@trail-ui/react
Version:
267 lines (261 loc) • 9.68 kB
JavaScript
;
var __create = Object.create;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __getProtoOf = Object.getPrototypeOf;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
// If the importer is in node compatibility mode or this is not an ESM
// file that has been converted to a CommonJS file using a Babel-
// compatible transform (i.e. "__esModule" has not been set), then set
// "default" to the CommonJS "module.exports" for node compatibility.
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
mod
));
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/multiselect/tw-button.tsx
var tw_button_exports = {};
__export(tw_button_exports, {
Button: () => Button,
ButtonGroup: () => ButtonGroup,
CloseButton: () => CloseButton,
ToggleButton: () => ToggleButton
});
module.exports = __toCommonJS(tw_button_exports);
var import_react2 = __toESM(require("react"));
var import_react_aria_components2 = require("react-aria-components");
// src/multiselect/tw-utils.ts
var import_react_aria_components = require("react-aria-components");
var import_tailwind_merge = require("tailwind-merge");
function composeTailwindRenderProps(className, tw) {
return (0, import_react_aria_components.composeRenderProps)(className, (className2) => (0, import_tailwind_merge.twMerge)(tw, className2));
}
var focusOutlineStyle = ["outline outline-2 outline-purple-600 outline-offset-2"];
// src/multiselect/tw-button.tsx
var import_tailwind_merge3 = require("tailwind-merge");
// src/multiselect/tw-slot.tsx
var import_react = __toESM(require("react"));
var import_tailwind_merge2 = require("tailwind-merge");
function Slot({
children,
...props
}) {
if ("asChild" in props) {
delete props.asChild;
}
if (import_react.default.isValidElement(children)) {
return import_react.default.cloneElement(children, {
...props,
...children.props,
style: {
...props.style,
...children.props.style
},
className: (0, import_tailwind_merge2.twMerge)(props.className, children.props.className)
});
}
if (import_react.default.Children.count(children) > 1) {
import_react.default.Children.only(null);
}
return null;
}
// src/multiselect/tw-button.tsx
var import_jsx_runtime = require("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 = import_react2.default.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__ */ (0, import_jsx_runtime.jsx)(
Slot,
{
...slotProps,
className: (0, import_tailwind_merge3.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__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components2.Button,
{
...buttonProps,
ref,
className: (0, import_react_aria_components2.composeRenderProps)(props.className, (className, renderProps) => {
return (0, import_tailwind_merge3.twMerge)(
buttonStyle({
size,
color,
iconOnly,
...{ unstyle, outline, plain }
}),
renderProps.isFocusVisible && focusOutlineStyle,
isLoading && "text-transparent",
className
);
}),
children: (renderProps) => {
return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute flex h-full items-center justify-center" }) : null,
typeof children === "function" ? children(renderProps) : children
] });
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-live": "polite", className: "sr-only", children: isLoading ? loadingLabel : "" })
] });
});
function ToggleButton(props) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_react_aria_components2.ToggleButton,
{
...props,
className: (0, import_react_aria_components2.composeRenderProps)(
props.className,
(className, { isFocusVisible }) => (0, import_tailwind_merge3.twMerge)(buttonStyle(props), isFocusVisible && focusOutlineStyle, className)
)
}
);
}
function CloseButton({
"aria-label": ariaLabel = "Close",
className,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
Button,
{
...props,
iconOnly: true,
"aria-label": ariaLabel,
className: composeTailwindRenderProps(className, "[&:not(:hover)]:text-muted"),
children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
/* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
]
}
)
}
);
}
function ButtonGroup({
className,
contrast,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
...props,
"data-slot": "button-group",
className: (0, import_tailwind_merge3.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
)
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Button,
ButtonGroup,
CloseButton,
ToggleButton
});