@trail-ui/react
Version:
501 lines (494 loc) • 17.8 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-field.tsx
var tw_field_exports = {};
__export(tw_field_exports, {
Description: () => Description,
DescriptionContext: () => DescriptionContext,
DescriptionProvider: () => DescriptionProvider,
FieldError: () => FieldError,
Input: () => Input,
InputFieldGroup: () => InputFieldGroup,
Label: () => Label,
LabeledGroup: () => LabeledGroup,
SearchField: () => SearchField,
SearchInput: () => SearchInput,
TextArea: () => TextArea,
TextField: () => TextField,
WithDescriptionContext: () => WithDescriptionContext,
WithLabelContext: () => WithLabelContext
});
module.exports = __toCommonJS(tw_field_exports);
var import_react4 = __toESM(require("react"));
var import_react_aria_components3 = require("react-aria-components");
var import_tailwind_merge5 = require("tailwind-merge");
// 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"];
var inputFieldStyle = [
"group flex flex-col",
"[&_[data-slot=label]:not([class*=mb-])]:mb-1",
"[&_[data-slot=description]:not([class*=mb-]):has(+:is(input,textarea,[data-slot=control]))]:mb-2",
"[&_:is(input,textarea,[data-slot=control])+[data-slot=description]:not([class*=mt-])]:mt-1"
];
// 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-text.tsx
var import_tailwind_merge3 = require("tailwind-merge");
var import_react2 = __toESM(require("react"));
var import_jsx_runtime = require("react/jsx-runtime");
function Text({ className, elementType, children, ...props }) {
return import_react2.default.createElement(
elementType != null ? elementType : "p",
{
...props,
className: (0, import_tailwind_merge3.twMerge)("flex gap-1 pt-1.5 text-xs text-neutral-700", className)
},
children
);
}
// src/multiselect/tw-button.tsx
var import_react3 = __toESM(require("react"));
var import_react_aria_components2 = require("react-aria-components");
var import_tailwind_merge4 = require("tailwind-merge");
var import_jsx_runtime2 = 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_react3.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_runtime2.jsx)(
Slot,
{
...slotProps,
className: (0, import_tailwind_merge4.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_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
import_react_aria_components2.Button,
{
...buttonProps,
ref,
className: (0, import_react_aria_components2.composeRenderProps)(props.className, (className, renderProps) => {
return (0, import_tailwind_merge4.twMerge)(
buttonStyle({
size,
color,
iconOnly,
...{ unstyle, outline, plain }
}),
renderProps.isFocusVisible && focusOutlineStyle,
isLoading && "text-transparent",
className
);
}),
children: (renderProps) => {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
isLoading ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "absolute flex h-full items-center justify-center" }) : null,
typeof children === "function" ? children(renderProps) : children
] });
}
}
),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-live": "polite", className: "sr-only", children: isLoading ? loadingLabel : "" })
] });
});
function CloseButton({
"aria-label": ariaLabel = "Close",
className,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
Button,
{
...props,
iconOnly: true,
"aria-label": ariaLabel,
className: composeTailwindRenderProps(className, "[&:not(:hover)]:text-muted"),
children: /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsx)("path", { d: "M18 6 6 18" }),
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)("path", { d: "m6 6 12 12" })
]
}
)
}
);
}
// src/multiselect/tw-field.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var LabeledGroup = import_react4.default.forwardRef(function(props, ref) {
const labelId = import_react4.default.useId();
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components3.LabelContext.Provider, { value: { id: labelId, elementType: "span" }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components3.GroupContext.Provider, { value: { "aria-labelledby": labelId }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components3.Group,
{
...props,
ref,
className: (0, import_react_aria_components3.composeRenderProps)(props.className, (className) => {
return (0, import_tailwind_merge5.twMerge)("relative flex flex-col", className);
})
}
) }) });
});
function Label({
requiredHint,
isDisabled,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components3.Label,
{
...props,
"data-slot": "label",
className: (0, import_tailwind_merge5.twMerge)(
requiredHint && "after:ml-0.5 after:text-red-800 after:content-['*']",
isDisabled && "opacity-50",
props.className
)
}
);
}
function WithLabelContext({
children
}) {
var _a;
const context = (_a = import_react4.default.useContext(import_react_aria_components3.LabelContext)) != null ? _a : {};
return children({
"aria-labelledBy": context == null ? void 0 : context.id
});
}
var DescriptionContext = import_react4.default.createContext(null);
function WithDescriptionContext({
children
}) {
const context = import_react4.default.useContext(DescriptionContext);
return children(context);
}
function DescriptionProvider({ children }) {
const descriptionId = import_react4.default.useId();
const [descriptionRendered, setDescriptionRendered] = import_react4.default.useState(true);
import_react4.default.useLayoutEffect(() => {
if (!document.getElementById(descriptionId)) {
setDescriptionRendered(false);
}
}, [descriptionId]);
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
DescriptionContext.Provider,
{
value: {
"aria-describedby": descriptionRendered ? descriptionId : void 0
},
children
}
);
}
function Description({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(WithDescriptionContext, { children: (context) => {
const describedby = context == null ? void 0 : context["aria-describedby"];
return describedby ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
Text,
{
...props,
id: describedby,
"data-slot": "description",
className: (0, import_tailwind_merge5.twMerge)("group-disabled:opacity-50", className)
}
) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components3.Text,
{
...props,
"data-slot": "description",
slot: "description",
className: (0, import_tailwind_merge5.twMerge)(
"text-muted text-pretty text-base/6 sm:text-sm/6",
"group-disabled:opacity-50",
className
)
}
);
} });
}
function TextField(props) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components3.TextField,
{
...props,
className: composeTailwindRenderProps(props.className, inputFieldStyle)
}
);
}
function FieldError(props) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components3.FieldError,
{
...props,
className: composeTailwindRenderProps(
props.className,
"text-destructive my-1 text-base/6 sm:text-sm/6"
)
}
);
}
var InputFieldGroup = import_react4.default.forwardRef(
function InputFieldGroup2(props, ref) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components3.Group,
{
...props,
"data-slot": "control",
ref,
className: (0, import_react_aria_components3.composeRenderProps)(props.className, (className) => {
return (0, import_tailwind_merge5.twMerge)(
"group relative flex w-full items-center overflow-hidden rounded-md border bg-inherit shadow-sm",
"[&_svg]:text-muted",
"group-invalid:border-destructive",
// Disabled and readonly style
"[&:has(_[data-disabled=true])]:opacity-50",
"[&:has([readonly])]:opacity-50",
// Prevent double opacity
"[&:has(_[data-disabled=true])_[class*=opacity-]]:opacity-100",
"[&:has([readonly])_[class*=opacity-]]:opacity-100",
// Remove inside input/data-input border style
"[&_:is(input,[data-slot=control])]:border-none",
"[&_:is(input,[data-slot=control])]:shadow-none",
"[&_:is(input,[data-slot=control])]:ring-0",
className
);
})
}
);
}
);
var Input = import_react4.default.forwardRef(function Input2(props, ref) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components3.Input,
{
...props,
ref,
className: (0, import_react_aria_components3.composeRenderProps)(props.className, (className, { isDisabled, isInvalid }) => {
return (0, import_tailwind_merge5.twMerge)(
"flex w-full rounded-md border-none bg-inherit px-2 py-[5px] shadow-none outline-none",
"text-sm placeholder:text-neutral-600",
"[&[readonly]]:opacity-50",
isInvalid && "border-destructive",
isDisabled && "opacity-50",
className
);
})
}
);
});
function TextArea(props) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components3.TextArea,
{
...props,
className: (0, import_react_aria_components3.composeRenderProps)(props.className, (className, { isDisabled, isInvalid }) => {
return (0, import_tailwind_merge5.twMerge)(
"w-full rounded-md border bg-inherit p-2 outline-none",
"placeholder:text-muted text-base/6 sm:text-sm/6",
"[&[readonly]]:opacity-50",
isDisabled && "opacity-50",
isInvalid && "border-destructive",
className
);
})
}
);
}
function SearchField(props) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
import_react_aria_components3.SearchField,
{
...props,
className: composeTailwindRenderProps(props.className, inputFieldStyle)
}
);
}
function SearchInput({
className,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
InputFieldGroup,
{
className: composeTailwindRenderProps(className, [
"[&_input::-webkit-search-cancel-button]:hidden"
]),
children: [
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"svg",
{
"aria-hidden": true,
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewBox: "0 0 24 24",
strokeWidth: 2,
stroke: "currentColor",
className: "ms-2 size-5",
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"path",
{
strokeLinecap: "round",
strokeLinejoin: "round",
d: "m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z"
}
)
}
),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Input, { ...props }),
/* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CloseButton, { plain: true, size: "sm", className: "me-1 group-empty:invisible" })
]
}
);
}
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Description,
DescriptionContext,
DescriptionProvider,
FieldError,
Input,
InputFieldGroup,
Label,
LabeledGroup,
SearchField,
SearchInput,
TextArea,
TextField,
WithDescriptionContext,
WithLabelContext
});