@trail-ui/react
Version:
203 lines (200 loc) • 6.34 kB
JavaScript
import {
Slot
} from "./chunk-QD7CZFZ3.mjs";
import {
composeTailwindRenderProps,
focusOutlineStyle
} from "./chunk-E45U7QEE.mjs";
// src/multiselect/tw-button.tsx
import React from "react";
import {
Button as RACButton,
ToggleButton as RACToggleButton,
composeRenderProps
} from "react-aria-components";
import { twMerge } from "tailwind-merge";
import { Fragment, jsx, jsxs } from "react/jsx-runtime";
function buttonStyle({ size, color, iconOnly, ...props }) {
if (props.unstyle) {
return "relative outline-none rounded-lg";
}
return [
// Base
"group relative inline-flex justify-center items-center whitespace-nowrap rounded-lg outline-none",
// Disabled
"disabled:opacity-50",
// Size
iconOnly ? [
// default size
"p-1.5 size-9",
size === "sm" && "p-1 size-7",
size === "lg" && "size-10"
] : [
// default size
"h-9 px-3 gap-x-2 text-base/6 sm:text-sm/6 font-semibold",
size === "sm" && "h-7 px-2 gap-x-1 text-sm/6 sm:text-xs/6",
size === "lg" && "h-10 px-4 gap-x-2"
],
// Color
color === "accent" && "text-accent",
color === "success" && "text-success",
color === "destructive" && "text-destructive",
// Variant
props.outline && [
"border border-foreground/10 hover:border-foreground/15 dark:border-foreground/15 hover:dark:border-foreground/10 bg-transparent shadow-sm hover:bg-hover/95 pressed:bg-hover"
],
props.plain && ["bg-transparent hover:bg-hover/95 pressed:bg-hover"],
props.outline === void 0 && props.plain === void 0 && [
"border dark:border-0",
"shadow-[inset_0_1px_0_0_rgba(255,255,255,0.1)]",
"border-accent bg-accent text-white hover:bg-accent/90",
color === "success" && "border-success bg-success hover:bg-success/90",
color === "destructive" && "border-destructive bg-destructive hover:bg-destructive/90"
],
// Set svg size when the icon does not have a size set
"[&.h-7_svg:not([class*=size-])]:size-3 [&.size-7_svg:not([class*=size-])]:size-4",
"[&.h-9_svg:not([class*=size-])]:size-4 [&.size-9_svg:not([class*=size-])]:size-5",
"[&.h-10_svg:not([class*=size-])]:size-5 [&.size-10_svg::not([class*=size-])]:size-6",
// Set svg color when the icon does not have color set
// outline
"[&.border.bg-transparent:not(:hover)_svg:not([class*=text-])]:text-muted",
// not outline && plain
iconOnly ? "[&:not(.bg-transparent):not(:hover)_svg:not([class*=text-])]:text-white/90" : "[&:not(.bg-transparent):not(:hover)_svg:not([class*=text-])]:text-white/75"
];
}
var Button = React.forwardRef(function Button2(props, ref) {
if (props.asChild) {
const { size: size2, color: color2, plain: plain2, unstyle: unstyle2, outline: outline2, iconOnly: iconOnly2, ...slotProps } = props;
return /* @__PURE__ */ jsx(
Slot,
{
...slotProps,
className: twMerge(
buttonStyle({
size: size2,
color: color2,
iconOnly: iconOnly2,
...{ unstyle: unstyle2, outline: outline2, plain: plain2 }
})
)
}
);
}
const {
children,
isLoading,
loadingLabel,
size,
color,
plain,
unstyle,
outline,
iconOnly,
...buttonProps
} = props;
return /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(
RACButton,
{
...buttonProps,
ref,
className: composeRenderProps(props.className, (className, renderProps) => {
return twMerge(
buttonStyle({
size,
color,
iconOnly,
...{ unstyle, outline, plain }
}),
renderProps.isFocusVisible && focusOutlineStyle,
isLoading && "text-transparent",
className
);
}),
children: (renderProps) => {
return /* @__PURE__ */ jsxs(Fragment, { children: [
isLoading ? /* @__PURE__ */ jsx("div", { className: "absolute flex h-full items-center justify-center" }) : null,
typeof children === "function" ? children(renderProps) : children
] });
}
}
),
/* @__PURE__ */ jsx("span", { "aria-live": "polite", className: "sr-only", children: isLoading ? loadingLabel : "" })
] });
});
function ToggleButton(props) {
return /* @__PURE__ */ jsx(
RACToggleButton,
{
...props,
className: composeRenderProps(
props.className,
(className, { isFocusVisible }) => twMerge(buttonStyle(props), isFocusVisible && focusOutlineStyle, className)
)
}
);
}
function CloseButton({
"aria-label": ariaLabel = "Close",
className,
...props
}) {
return /* @__PURE__ */ jsx(
Button,
{
...props,
iconOnly: true,
"aria-label": ariaLabel,
className: composeTailwindRenderProps(className, "[&:not(:hover)]:text-muted"),
children: /* @__PURE__ */ jsxs(
"svg",
{
"aria-hidden": true,
xmlns: "http://www.w3.org/2000/svg",
width: "24",
height: "24",
viewBox: "0 0 24 24",
fill: "none",
stroke: "currentColor",
strokeWidth: "2",
strokeLinecap: "round",
strokeLinejoin: "round",
children: [
/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }),
/* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
]
}
)
}
);
}
function ButtonGroup({
className,
contrast,
...props
}) {
return /* @__PURE__ */ jsx(
"div",
{
...props,
"data-slot": "button-group",
className: twMerge(
"group flex items-center",
"[&>button:first-of-type]:rounded-e-none",
"[&>button:last-of-type]:rounded-s-none",
"[&>button:not(:first-of-type):not(:last-of-type)]:rounded-none",
"[&>button:not(:last-of-type)]:border-e-0",
// None outline button has not border in dark mode
"dark:[&>button:not(.bg-transparent)]:border",
contrast ? "[&>button:not(.bg-transparent):not(:first-of-type)]:border-s-white/30" : "[&>button:not(.bg-transparent):not(:first-of-type)]:border-s-black/15",
className
)
}
);
}
export {
Button,
ToggleButton,
CloseButton,
ButtonGroup
};