@trail-ui/react
Version:
86 lines (83 loc) • 2.41 kB
JavaScript
import {
_Spinner
} from "./chunk-P3AIC7XZ.mjs";
// src/button/button.tsx
import { cloneElement, forwardRef, isValidElement, useMemo } from "react";
import { Button as AriaButton } from "react-aria-components";
import { button } from "@trail-ui/theme";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function Button(props, ref) {
const {
appearance,
// size = 'md',
spacing = "default",
fullWidth,
isLoading,
spinner = /* @__PURE__ */ jsx(_Spinner, { color: "current", size: "sm", ...props.spinnerProps }),
spinnerPlacement = "start",
startContent: startContentProp,
endContent: endContentProp,
disableAnimation,
className,
children,
...otherProps
} = props;
const styles = useMemo(
() => button({
// size,
isLoading,
spinnerPlacement,
startContentProp: !!startContentProp,
endContentProp: !!endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
}),
[
isLoading,
spinnerPlacement,
startContentProp,
endContentProp,
appearance,
spacing,
fullWidth,
disableAnimation,
className
]
);
const getIconClone = (icon) => isValidElement(icon) ? cloneElement(icon, {
"aria-hidden": true,
focusable: false,
tabIndex: -1
}) : null;
const startContent = getIconClone(startContentProp);
const endContent = getIconClone(endContentProp);
return (
// @ts-ignore
/* @__PURE__ */ jsx(AriaButton, { ref, className: styles, ...otherProps, children: () => /* @__PURE__ */ jsxs(Fragment, { children: [
!isLoading && startContent,
isLoading && spinnerPlacement === "start" && /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
spinner,
/* @__PURE__ */ jsxs("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] })
] }),
children,
isLoading && spinnerPlacement === "end" && /* @__PURE__ */ jsxs("div", { className: "shrink-0", children: [
/* @__PURE__ */ jsxs("span", { "aria-atomic": "true", "aria-live": "polite", className: "sr-only", children: [
"Loading",
" "
] }),
spinner
] }),
!isLoading && endContent
] }) })
);
}
var _Button = forwardRef(Button);
export {
_Button
};