@vela-ui/react
Version:
Vela UI React components
1,389 lines (1,349 loc) • 88.7 kB
JavaScript
"use strict";
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/index.ts
var index_exports = {};
__export(index_exports, {
Alert: () => Alert,
AlertDescription: () => AlertDescription,
AlertTitle: () => AlertTitle,
Badge: () => Badge,
Button: () => Button,
CheckIcon: () => CheckIcon,
Checkbox: () => Checkbox,
CheckboxGroup: () => CheckboxGroup,
CheckboxGroupRoot: () => CheckboxGroupRoot,
ChevronDownIcon: () => ChevronDownIcon,
ChevronRightIcon: () => ChevronRightIcon,
CircleIcon: () => CircleIcon,
CloseIcon: () => CloseIcon,
Description: () => Description,
Dialog: () => Dialog,
DialogCloseIcon: () => DialogCloseIcon,
DialogContent: () => DialogContent,
DialogDescription: () => DialogDescription,
DialogFooter: () => DialogFooter,
DialogHeader: () => DialogHeader,
DialogTitle: () => DialogTitle,
DialogTrigger: () => DialogTrigger,
Drawer: () => Drawer,
DrawerCloseIcon: () => DrawerCloseIcon,
DrawerContent: () => DrawerContent,
DrawerDescription: () => DrawerDescription,
DrawerFooter: () => DrawerFooter,
DrawerHeader: () => DrawerHeader,
DrawerTitle: () => DrawerTitle,
DrawerTrigger: () => DrawerTrigger,
ErrorIcon: () => ErrorIcon,
FieldError: () => FieldError,
FieldGroup: () => FieldGroup,
Form: () => import_react_aria_components9.Form,
InfoIcon: () => InfoIcon,
Input: () => Input,
Kbd: () => Kbd,
KbdVariants: () => KbdVariants,
Label: () => Label,
Link: () => Link,
LinkButton: () => LinkButton,
ListBox: () => ListBox,
ListBoxDescription: () => ListBoxDescription,
ListBoxItem: () => ListBoxItem,
ListBoxLabel: () => ListBoxLabel,
ListBoxSection: () => ListBoxSection2,
Loader: () => Loader,
LoaderCircleIcon: () => LoaderCircleIcon,
LoaderRingIcon: () => LoaderRingIcon,
Menu: () => Menu,
MenuDescription: () => MenuDescription,
MenuItem: () => MenuItem,
MenuLabel: () => MenuLabel,
MenuPopover: () => MenuPopover,
MenuSection: () => MenuSection,
MenuSeparator: () => MenuSeparator,
MenuShortcut: () => MenuShortcut,
MenuTrigger: () => MenuTrigger,
MinusIcon: () => MinusIcon,
Modal: () => Modal,
ModalContent: () => ModalContent,
ModalOverlay: () => ModalOverlay,
NativeSelect: () => NativeSelect,
Popover: () => Popover,
PopoverContent: () => PopoverContent,
PopoverTrigger: () => PopoverTrigger,
ProviderContext: () => ProviderContext,
Radio: () => Radio,
RadioGroup: () => RadioGroup,
RadioGroupRoot: () => RadioGroupRoot,
Select: () => Select,
SelectDescription: () => SelectDescription,
SelectItem: () => SelectItem,
SelectLabel: () => SelectLabel,
SelectList: () => SelectList,
SelectPopover: () => SelectPopover,
SelectSection: () => SelectSection,
SelectSeparator: () => SelectSeparator,
SelectTrigger: () => SelectTrigger,
SelectValue: () => SelectValue,
Separator: () => Separator2,
Skeleton: () => Skeleton,
Slider: () => Slider,
SliderOutput: () => SliderOutput,
SliderRange: () => SliderRange,
SliderThumb: () => SliderThumb,
SliderTrack: () => SliderTrack,
SubmenuTrigger: () => import_react_aria_components16.SubmenuTrigger,
SuccessIcon: () => SuccessIcon,
Switch: () => Switch,
Tab: () => Tab,
TabList: () => TabList,
TabPanel: () => TabPanel,
Tabs: () => Tabs,
TextField: () => import_react_aria_components4.TextField,
Textarea: () => Textarea,
ThemeProvider: () => ThemeProvider,
ThemeProviderContext: () => ThemeProviderContext,
Tooltip: () => Tooltip,
TooltipTrigger: () => TooltipTrigger,
VelaUIProvider: () => VelaUIProvider,
WarningIcon: () => WarningIcon,
badgeVariants: () => badgeVariants,
buttonVariants: () => buttonVariants,
cn: () => cn,
componentColors: () => componentColors,
componentDirections: () => componentDirections,
componentPositions: () => componentPositions,
componentShapes: () => componentShapes,
componentSizes: () => componentSizes,
componentStatuses: () => componentStatuses,
composeTailwindRenderProps: () => composeTailwindRenderProps,
defaultThemes: () => defaultThemes,
fieldVariants: () => fieldVariants,
useCallbackRef: () => useCallbackRef,
useDisclosure: () => useDisclosure,
useMediaQuery: () => useMediaQuery,
useProviderContext: () => useProviderContext,
useTheme: () => useTheme
});
module.exports = __toCommonJS(index_exports);
// src/components/alert.tsx
var import_tailwind_variants = require("tailwind-variants");
// src/lib/utils.ts
var import_clsx = require("clsx");
var import_react_aria_components = require("react-aria-components");
var import_tailwind_merge = require("tailwind-merge");
var cn = (...inputs) => (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(...inputs));
function composeTailwindRenderProps(className, tailwind) {
return (0, import_react_aria_components.composeRenderProps)(className, (className2) => (0, import_tailwind_merge.twMerge)(tailwind, className2));
}
// src/components/alert.tsx
var import_jsx_runtime = require("react/jsx-runtime");
var alertVariants = (0, import_tailwind_variants.tv)({
base: "relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current",
variants: {
variant: {
default: "bg-card text-card-foreground",
destructive: "text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 [&>svg]:text-current"
}
},
defaultVariants: {
variant: "default"
}
});
function Alert({ className, variant, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
"data-slot": "alert",
role: "alert",
className: alertVariants({ variant, className }),
...props
}
);
}
function AlertTitle({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
"data-slot": "alert-title",
className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
...props
}
);
}
function AlertDescription({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
"div",
{
"data-slot": "alert-description",
className: cn(
"text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed",
className
),
...props
}
);
}
// src/components/badge.tsx
var import_tailwind_variants3 = require("tailwind-variants");
// src/lib/classes.ts
var import_tailwind_variants2 = require("tailwind-variants");
var focusRing = (0, import_tailwind_variants2.tv)({
base: "outline-hidden",
variants: {
isFocusVisible: {
true: "border-ring ring-ring/50 ring-[3px]"
},
isInvalid: {
true: "ring-destructive/20 dark:ring-destructive/40 border-destructive"
}
}
});
// src/components/badge.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var badgeVariants = (0, import_tailwind_variants3.tv)({
extend: focusRing,
base: "inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-md border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] [&>svg]:pointer-events-none [&>svg]:size-3",
variants: {
variant: {
default: "bg-primary text-primary-foreground [a&]:hover:bg-primary/90 border-transparent",
secondary: "bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90 border-transparent",
destructive: "bg-destructive [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 border-transparent text-white",
outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
}
},
defaultVariants: {
variant: "default"
}
});
function Badge({ className, variant, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
"span",
{
"data-slot": "badge",
className: badgeVariants({
variant,
className
}),
...props
}
);
}
// src/components/button.tsx
var import_react_aria_components2 = require("react-aria-components");
var import_tailwind_variants5 = require("tailwind-variants");
// src/components/loader.tsx
var import_tailwind_variants4 = require("tailwind-variants");
// src/icons/check.tsx
var import_jsx_runtime3 = require("react/jsx-runtime");
var CheckIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "M20 6 9 17l-5-5" })
}
);
};
// src/icons/chevron-down.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var ChevronDownIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m6 9 6 6 6-6" })
}
);
};
// src/icons/chevron-right.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var ChevronRightIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m9 18 6-6-6-6" })
}
);
};
// src/icons/circle.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var CircleIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "10" })
}
);
};
// src/icons/close.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var CloseIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "M18 6 6 18" }),
/* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m6 6 12 12" })
]
}
);
};
// src/icons/error.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var ErrorIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
"svg",
{
fill: "currentColor",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z" })
}
);
};
// src/icons/info.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var InfoIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"svg",
{
fill: "currentColor",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("path", { d: "M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 7H13V9H11V7ZM11 11H13V17H11V11Z" })
}
);
};
// src/icons/loader-circle.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var LoaderCircleIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
}
);
};
// src/icons/loader-ring.tsx
var import_jsx_runtime11 = require("react/jsx-runtime");
var LoaderRingIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
"svg",
{
fill: "none",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"path",
{
stroke: "currentColor",
strokeOpacity: "0.25",
strokeWidth: "3.636",
d: "M11.909 21a9.09 9.09 0 1 0 0-18.182 9.09 9.09 0 0 0 0 18.182Z"
}
),
/* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"path",
{
fill: "currentColor",
d: "M4.636 11.91a7.273 7.273 0 0 1 7.273-7.274V1C5.885 1 1 5.885 1 11.91zm1.819 4.81a7.24 7.24 0 0 1-1.819-4.81H1c0 2.764 1.032 5.294 2.727 7.215z"
}
)
]
}
);
};
// src/icons/minus.tsx
var import_jsx_runtime12 = require("react/jsx-runtime");
var MinusIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("path", { d: "M5 12h14" })
}
);
};
// src/icons/success.tsx
var import_jsx_runtime13 = require("react/jsx-runtime");
var SuccessIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"svg",
{
fill: "currentColor",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z" })
}
);
};
// src/icons/warning.tsx
var import_jsx_runtime14 = require("react/jsx-runtime");
var WarningIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
"svg",
{
fill: "currentColor",
width: "24",
height: "24",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("path", { d: "M12.8659 3.00017L22.3922 19.5002C22.6684 19.9785 22.5045 20.5901 22.0262 20.8662C21.8742 20.954 21.7017 21.0002 21.5262 21.0002H2.47363C1.92135 21.0002 1.47363 20.5525 1.47363 20.0002C1.47363 19.8246 1.51984 19.6522 1.60761 19.5002L11.1339 3.00017C11.41 2.52187 12.0216 2.358 12.4999 2.63414C12.6519 2.72191 12.7782 2.84815 12.8659 3.00017ZM4.20568 19.0002H19.7941L11.9999 5.50017L4.20568 19.0002ZM10.9999 16.0002H12.9999V18.0002H10.9999V16.0002ZM10.9999 9.00017H12.9999V14.0002H10.9999V9.00017Z" })
}
);
};
// src/components/loader.tsx
var import_jsx_runtime15 = require("react/jsx-runtime");
var loaderVariants = (0, import_tailwind_variants4.tv)({
base: "relative",
variants: {
size: {
sm: "size-4",
md: "size-6",
lg: "size-8",
xl: "size-10"
}
},
defaultVariants: {
size: "sm"
}
});
function Default({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
LoaderCircleIcon,
{
className: cn("size-4 animate-spin", className),
"data-slot": "icon",
...props
}
);
}
var Ring = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(LoaderRingIcon, { className: cn("size-4 animate-spin", className), "data-slot": "icon", ...props });
function Spin({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"svg",
{
className: cn("size-4 stroke-current", className),
"data-slot": "icon",
viewBox: "0 0 2400 2400",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("g", { strokeWidth: "200", strokeLinecap: "round", fill: "none", children: [
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { x1: "1200", y1: "600", x2: "1200", y2: "100" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.5", x1: "1200", y1: "2300", x2: "1200", y2: "1800" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.917", x1: "900", y1: "680.4", x2: "650", y2: "247.4" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.417", x1: "1750", y1: "2152.6", x2: "1500", y2: "1719.6" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.833", x1: "680.4", y1: "900", x2: "247.4", y2: "650" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.333", x1: "2152.6", y1: "1750", x2: "1719.6", y2: "1500" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.75", x1: "600", y1: "1200", x2: "100", y2: "1200" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.25", x1: "2300", y1: "1200", x2: "1800", y2: "1200" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.667", x1: "680.4", y1: "1500", x2: "247.4", y2: "1750" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.167", x1: "2152.6", y1: "650", x2: "1719.6", y2: "900" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.583", x1: "900", y1: "1719.6", x2: "650", y2: "2152.6" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)("line", { opacity: "0.083", x1: "1750", y1: "247.4", x2: "1500", y2: "680.4" }),
/* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"animateTransform",
{
attributeName: "transform",
attributeType: "XML",
type: "rotate",
keyTimes: "0;0.08333;0.16667;0.25;0.33333;0.41667;0.5;0.58333;0.66667;0.75;0.83333;0.91667",
values: "0 1199 1199;30 1199 1199;60 1199 1199;90 1199 1199;120 1199 1199;150 1199 1199;180 1199 1199;210 1199 1199;240 1199 1199;270 1199 1199;300 1199 1199;330 1199 1199",
dur: "0.83333s",
begin: "0.08333s",
repeatCount: "indefinite",
calcMode: "discrete"
}
)
] })
}
);
}
var LOADERS = {
default: Default,
ring: Ring,
spin: Spin
};
var DEFAULT_VARIANT = "default";
function Loader(props) {
const { className, size, ref, variant, ...otherProps } = props;
const LoaderComponent = LOADERS[variant != null ? variant : DEFAULT_VARIANT];
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
LoaderComponent,
{
role: "presentation",
ref,
className: loaderVariants({ size, className }),
...otherProps
}
);
}
// src/components/button.tsx
var import_jsx_runtime16 = require("react/jsx-runtime");
var buttonVariants = (0, import_tailwind_variants5.tv)({
extend: focusRing,
base: "inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-all [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
variants: {
variant: {
default: "bg-primary text-primary-foreground hover:bg-primary/90 shadow-xs",
destructive: "bg-destructive hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60 text-white shadow-xs",
outline: "bg-background hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 border shadow-xs",
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 shadow-xs",
ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
link: "text-primary underline-offset-4 hover:underline"
},
size: {
xs: "h-8 gap-1 px-2.5 text-xs",
sm: "h-9 px-3.5",
md: "h-10 px-4 [&_svg:not([class*='size-'])]:size-5",
lg: "h-11 gap-2.5 px-5 text-base [&_svg:not([class*='size-'])]:size-5",
xl: "h-12 gap-2.5 px-5 text-base [&_svg:not([class*='size-'])]:size-5",
icon: "size-10"
},
isDisabled: {
true: "pointer-events-none opacity-50"
},
isPending: {
true: "pointer-events-none opacity-50"
}
},
defaultVariants: {
variant: "default",
size: "md"
}
});
function Button({ className, variant, size, loader = /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Loader, {}), ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
import_react_aria_components2.Button,
{
"data-slot": "button",
className: (0, import_react_aria_components2.composeRenderProps)(
className,
(className2, renderProps) => buttonVariants({
...renderProps,
variant,
size,
className: className2
})
),
...props,
children: (0, import_react_aria_components2.composeRenderProps)(props.children, (children) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
props.isPending && loader,
children
] }))
}
);
}
// src/components/checkbox.tsx
var import_react_aria_components3 = require("react-aria-components");
var import_tailwind_variants6 = require("tailwind-variants");
var import_jsx_runtime17 = require("react/jsx-runtime");
var checkboxVariants = (0, import_tailwind_variants6.tv)({
base: "group relative flex items-center gap-2 text-sm transition",
variants: {
isDisabled: {
true: "cursor-not-allowed opacity-50"
}
}
});
var checkboxIndicatorVariants = (0, import_tailwind_variants6.tv)({
extend: focusRing,
base: "peer border-input dark:bg-input/30 flex shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow [&_svg]:size-full",
variants: {
size: {
sm: "size-4",
md: "size-5 p-0.5",
lg: "size-6 p-0.5"
},
isSelected: {
true: "bg-primary dark:bg-primary text-primary-foreground border-primary"
},
isDisabled: {
true: "cursor-not-allowed opacity-50"
}
},
defaultVariants: {
size: "md"
}
});
function Checkbox({ className, children, indicatorClassName, size, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
import_react_aria_components3.Checkbox,
{
className: (0, import_react_aria_components3.composeRenderProps)(
className,
(className2, renderProps) => checkboxVariants({ ...renderProps, className: className2 })
),
...props,
children: (0, import_react_aria_components3.composeRenderProps)(children, (children2, { isSelected, isIndeterminate, ...renderProps }) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_jsx_runtime17.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
"div",
{
"data-slot": "checkbox-indicator",
className: checkboxIndicatorVariants({
isSelected: isSelected || isIndeterminate,
size,
...renderProps,
className: indicatorClassName
}),
children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(MinusIcon, {}) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(CheckIcon, {}) : null
}
),
children2
] }))
}
);
}
// src/components/checkbox-group.tsx
var import_react_aria_components5 = require("react-aria-components");
// src/components/field.tsx
var import_react_aria_components4 = require("react-aria-components");
var import_tailwind_variants7 = require("tailwind-variants");
var import_jsx_runtime18 = require("react/jsx-runtime");
var fieldVariants = (0, import_tailwind_variants7.tv)({
slots: {
label: "group-data-[invalid]:text-destructive flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50",
description: "text-muted-foreground text-sm",
fieldError: "text-destructive text-sm"
}
});
var { label, description, fieldError } = fieldVariants();
function Label({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components4.Label, { "data-slot": "label", className: label({ className }), ...props });
}
function Description({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components4.Text, { slot: "description", className: description({ className }), ...props });
}
function FieldError({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
import_react_aria_components4.FieldError,
{
className: (0, import_react_aria_components4.composeRenderProps)(className, (className2) => fieldError({ className: className2 })),
...props
}
);
}
var fieldGroupVariants = (0, import_tailwind_variants7.tv)({
extend: focusRing,
base: "group border-input relative flex h-10 items-center overflow-hidden rounded-lg border shadow-xs",
variants: {
isFocusWithin: {
true: "border-ring"
},
isInvalid: {
true: "border-destructive"
},
isDisabled: {
true: "opacity-50"
}
}
});
function FieldGroup({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
import_react_aria_components4.Group,
{
className: (0, import_react_aria_components4.composeRenderProps)(
className,
(className2, renderProps) => fieldGroupVariants({
...renderProps,
className: className2
})
),
...props
}
);
}
// src/components/checkbox-group.tsx
var import_jsx_runtime19 = require("react/jsx-runtime");
function CheckboxGroupRoot({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
import_react_aria_components5.CheckboxGroup,
{
"data-slot": "checkbox-group",
className: composeTailwindRenderProps(className, "group flex flex-col gap-2"),
...props
}
);
}
function CheckboxGroup({
children,
label: label2,
description: description2,
errorMessage,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(CheckboxGroupRoot, { ...props, children: (0, import_react_aria_components5.composeRenderProps)(children, (children2) => /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_jsx_runtime19.Fragment, { children: [
label2 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Label, { children: label2 }),
children2,
description2 && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Description, { children: description2 }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)(FieldError, { children: errorMessage })
] })) });
}
// src/components/dialog.tsx
var import_react_aria_components7 = require("react-aria-components");
// src/components/modal.tsx
var import_react_aria_components6 = require("react-aria-components");
var import_tailwind_variants8 = require("tailwind-variants");
var import_jsx_runtime20 = require("react/jsx-runtime");
var modalOverlayVariants = (0, import_tailwind_variants8.tv)({
base: "fixed top-0 left-0 isolate z-50 flex w-full items-center justify-center bg-black/50 duration-200",
variants: {
placement: {
top: "items-start",
center: "items-center",
bottom: "items-end"
},
scrollBehavior: {
inside: "overflow-hidden",
outside: "overflow-auto"
},
isEntering: {
true: "animate-in fade-in-0"
},
isExiting: {
true: "animate-out fade-out-0"
}
},
defaultVariants: {
placement: "center",
scrollBehavior: "outside"
}
});
var modalVariants = (0, import_tailwind_variants8.tv)({
base: "bg-background my-16 w-full max-w-[calc(100%-2rem)] rounded-lg border shadow-lg transition duration-200",
variants: {
scrollBehavior: {
inside: "max-h-[calc(100%-7.5rem)]",
outside: ""
},
isEntering: {
true: "animate-in fade-in-0 zoom-in-95"
},
isExiting: {
true: "animate-out fade-out-0 zoom-out-95"
},
size: {
xs: "sm:max-w-xs",
sm: "sm:max-w-sm",
md: "sm:max-w-md",
lg: "sm:max-w-lg",
xl: "sm:max-w-xl",
"2xl": "sm:max-w-2xl",
"3xl": "sm:max-w-3xl",
"4xl": "sm:max-w-4xl",
"5xl": "sm:max-w-5xl",
full: "my-0 h-dvh max-w-full rounded-none"
}
},
defaultVariants: {
size: "lg"
}
});
function ModalOverlay({
className,
placement,
scrollBehavior,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
import_react_aria_components6.ModalOverlay,
{
"data-slot": "modal-overlay",
style: {
height: "var(--visual-viewport-height)"
},
className: (0, import_react_aria_components6.composeRenderProps)(
className,
(className2, renderProps) => modalOverlayVariants({ ...renderProps, placement, scrollBehavior, className: className2 })
),
...props
}
);
}
function Modal({
className,
size,
scrollBehavior,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
import_react_aria_components6.Modal,
{
"data-slot": "modal",
className: (0, import_react_aria_components6.composeRenderProps)(
className,
(className2, renderProps) => modalVariants({ ...renderProps, size, scrollBehavior, className: className2 })
),
...props
}
);
}
function ModalContent({
className,
overlayClassName,
isDismissable = true,
size,
placement,
scrollBehavior,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
ModalOverlay,
{
isDismissable,
className: overlayClassName,
placement,
scrollBehavior,
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
Modal,
{
isDismissable,
className,
size,
scrollBehavior,
...props
}
)
}
);
}
// src/components/dialog.tsx
var import_jsx_runtime21 = require("react/jsx-runtime");
var DialogTrigger = import_react_aria_components7.DialogTrigger;
var Dialog = (props) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(ModalContent, { ...props });
var DialogContent = ({
role = "dialog",
className,
children,
showCloseButton = true,
...props
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
import_react_aria_components7.Dialog,
{
role,
"data-slot": "dialog-content",
className: cn("relative flex h-full w-full flex-col p-6 outline-hidden", className),
...props,
children: (0, import_react_aria_components7.composeRenderProps)(children, (children2) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
children2,
showCloseButton && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DialogCloseIcon, {})
] }))
}
);
};
var DialogHeader = ({ className, ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
"div",
{
"data-slot": "dialog-header",
className: cn("mb-4 flex flex-col gap-2 text-center sm:text-left", className),
...props
}
);
};
var DialogFooter = ({ className, ...props }) => {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
"div",
{
"data-slot": "dialog-footer",
className: cn("mt-4 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
...props
}
);
};
var DialogTitle = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
import_react_aria_components7.Heading,
{
slot: "title",
"data-slot": "dialog-title",
className: cn("text-lg leading-none font-semibold", className),
...props
}
);
var DialogDescription = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
import_react_aria_components7.Text,
{
slot: "description",
"data-slot": "dialog-description",
className: cn("text-muted-foreground text-sm", className),
...props
}
);
var DialogCloseIcon = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
import_react_aria_components7.Button,
{
"aria-label": "Close",
slot: "close",
"data-slot": "dialog-close",
className: composeTailwindRenderProps(
className,
"ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
),
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CloseIcon, {}),
/* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "sr-only", children: "Close" })
]
}
);
// src/components/drawer.tsx
var import_react_aria_components8 = require("react-aria-components");
var import_tailwind_variants9 = require("tailwind-variants");
var import_jsx_runtime22 = require("react/jsx-runtime");
var drawerOverlayVariants = (0, import_tailwind_variants9.tv)({
base: "fixed top-0 left-0 isolate z-50 flex w-full items-center justify-center bg-black/50",
variants: {
isEntering: {
true: "animate-in fade-in-0 duration-300"
},
isExiting: {
true: "animate-out fade-out-0 duration-200"
}
}
});
var drawerVariants = (0, import_tailwind_variants9.tv)({
base: "bg-background fixed z-50 flex h-auto flex-col shadow-lg transition",
variants: {
placement: {
top: "data-[entering]:slide-in-from-top data-[exiting]:slide-out-to-top inset-x-0 top-0 border-b",
bottom: "data-[entering]:slide-in-from-bottom data-[exiting]:slide-out-to-bottom inset-x-0 bottom-0 border-t",
left: "data-[entering]:slide-in-from-left data-[exiting]:slide-out-to-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
right: "data-[entering]:slide-in-from-right data-[exiting]:slide-out-to-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm"
},
isEntering: {
true: "animate-in duration-300"
},
isExiting: {
true: "animate-out duration-200"
}
},
defaultVariants: {
placement: "right"
}
});
var Drawer = ({
className,
overlayClassName,
isDismissable = true,
placement,
...props
}) => {
return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
import_react_aria_components8.ModalOverlay,
{
"data-slot": "drawer-overlay",
style: {
height: "var(--visual-viewport-height)"
},
isDismissable,
className: (0, import_react_aria_components8.composeRenderProps)(
overlayClassName,
(className2, renderProps) => drawerOverlayVariants({ ...renderProps, className: className2 })
),
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
import_react_aria_components8.Modal,
{
"data-slot": "drawer",
isDismissable,
className: (0, import_react_aria_components8.composeRenderProps)(
className,
(className2, renderProps) => drawerVariants({ ...renderProps, placement, className: className2 })
),
...props
}
)
}
);
};
var DrawerTrigger = DialogTrigger;
var DrawerContent = DialogContent;
var DrawerHeader = DialogHeader;
var DrawerFooter = DialogFooter;
var DrawerTitle = DialogTitle;
var DrawerDescription = DialogDescription;
var DrawerCloseIcon = DialogCloseIcon;
// src/components/form.tsx
var import_react_aria_components9 = require("react-aria-components");
// src/components/input.tsx
var import_react_aria_components10 = require("react-aria-components");
var import_tailwind_variants10 = require("tailwind-variants");
var import_jsx_runtime23 = require("react/jsx-runtime");
var inputVariants = (0, import_tailwind_variants10.tv)({
extend: focusRing,
base: "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex w-full min-w-0 rounded-md border bg-transparent py-1 shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50",
variants: {
size: {
xs: "h-8 px-2 text-xs",
sm: "h-9 px-2.5 text-sm",
md: "h-10 px-3 text-sm",
lg: "h-11 px-4 text-base",
xl: "h-12 px-4.5 text-base"
},
hasStartContent: {
true: "pl-10"
},
hasEndContent: {
true: "pr-10"
},
isFocused: focusRing.variants.isFocusVisible
},
defaultVariants: {
size: "md"
}
});
function Input({ className, size, startContent, endContent, ...props }) {
if (startContent || endContent) {
return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "relative", children: [
startContent && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-muted-foreground pointer-events-none absolute top-0 bottom-0 left-0 flex items-center px-3", children: startContent }),
/* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
import_react_aria_components10.Input,
{
"data-slot": "input",
className: (0, import_react_aria_components10.composeRenderProps)(
className,
(className2, renderProps) => inputVariants({
...renderProps,
size,
hasStartContent: !!startContent,
hasEndContent: !!endContent,
className: className2
})
),
...props
}
),
endContent && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "text-muted-foreground pointer-events-none absolute top-0 right-0 bottom-0 flex items-center px-3", children: endContent })
] });
}
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
import_react_aria_components10.Input,
{
"data-slot": "input",
className: (0, import_react_aria_components10.composeRenderProps)(
className,
(className2, renderProps) => inputVariants({
...renderProps,
size,
className: className2
})
),
...props
}
);
}
// src/components/kbd.tsx
var import_react_aria_components11 = require("react-aria-components");
var import_tailwind_variants11 = require("tailwind-variants");
var import_jsx_runtime24 = require("react/jsx-runtime");
var KbdVariants = (0, import_tailwind_variants11.tv)({
base: "text-muted-foreground inline-flex min-w-5 items-center justify-center rounded-sm border p-1 font-sans text-xs leading-none tracking-widest"
});
function Kbd({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_react_aria_components11.Keyboard, { className: KbdVariants({ className }), ...props });
}
// src/components/link.tsx
var import_react_aria_components12 = require("react-aria-components");
var import_tailwind_variants12 = require("tailwind-variants");
var import_jsx_runtime25 = require("react/jsx-runtime");
var linkVariants = (0, import_tailwind_variants12.tv)({
base: "underline-offset-4 outline-0 outline-offset-2 outline-current focus-visible:outline-2",
variants: {
variant: {
hover: "hover:underline",
underline: "underline",
none: "no-underline"
},
isDisabled: {
true: "pointer-events-none cursor-default opacity-50"
}
},
defaultVariants: {
variant: "hover"
}
});
function Link({ className, variant, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
import_react_aria_components12.Link,
{
"data-slot": "link",
className: (0, import_react_aria_components12.composeRenderProps)(
className,
(className2, renderProps) => linkVariants({ ...renderProps, variant, className: className2 })
),
...props
}
);
}
function LinkButton({ className, variant, size, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
import_react_aria_components12.Link,
{
"data-slot": "link",
className: (0, import_react_aria_components12.composeRenderProps)(
className,
(className2, renderProps) => buttonVariants({
...renderProps,
variant,
size,
className: className2
})
),
...props
}
);
}
// src/components/list-box.tsx
var import_react_aria_components14 = require("react-aria-components");
// src/components/dropdown.tsx
var import_react_aria_components13 = require("react-aria-components");
var import_tailwind_merge2 = require("tailwind-merge");
var import_tailwind_variants13 = require("tailwind-variants");
var import_jsx_runtime26 = require("react/jsx-runtime");
var dropdownItemVariants = (0, import_tailwind_variants13.tv)({
base: "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[selection-mode]:pr-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
variants: {
variant: {
default: "",
destructive: "text-destructive *:[svg]:!text-destructive"
},
isFocused: {
true: "bg-accent text-accent-foreground"
},
isHovered: {
true: "bg-accent text-accent-foreground"
},
isDisabled: {
true: "pointer-events-none opacity-50"
}
},
compoundVariants: [
{
variant: "destructive",
isFocused: true,
className: "bg-destructive/10 dark:bg-destructive/20 text-destructive"
}
]
});
function DropdownSection({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components13.ListBoxSection, { className, children: [
"title" in props && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components13.Header, { className: "text-muted-foreground px-2 py-1.5 text-xs", children: props.title }),
/* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components13.Collection, { items: props.items, children: props.children })
] });
}
function DropdownItem({ className, variant, ...props }) {
const textValue = props.textValue || (typeof props.children === "string" ? props.children : void 0);
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
import_react_aria_components13.ListBoxItem,
{
textValue,
className: (0, import_react_aria_components13.composeRenderProps)(
className,
(className2, renderProps) => dropdownItemVariants({ ...renderProps, variant, className: className2 })
),
...props,
children: (0, import_react_aria_components13.composeRenderProps)(props.children, (children, { isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_jsx_runtime26.Fragment, { children: [
isSelected && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(CheckIcon, {}) }),
children
] }))
}
);
}
function DropdownLabel({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components13.Text, { slot: "label", className, ...props });
}
function DropdownDescription({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
import_react_aria_components13.Text,
{
slot: "description",
className: (0, import_tailwind_merge2.twMerge)("text-muted-foreground text-sm", className),
...props
}
);
}
function DropdownSeparator({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
import_react_aria_components13.Separator,
{
orientation: "horizontal",
className: (0, import_tailwind_merge2.twMerge)("bg-border -mx-1 my-1 h-px", className),
...props
}
);
}
// src/components/list-box.tsx
var import_jsx_runtime27 = require("react/jsx-runtime");
function ListBox({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
import_react_aria_components14.ListBox,
{
className: composeTailwindRenderProps(
className,
"group bg-popover text-popover-foreground min-w-[8rem] overflow-auto rounded-md border p-1 shadow-md outline-hidden data-[empty]:p-6 data-[empty]:text-center data-[empty]:text-sm"
),
...props
}
);
}
var ListBoxItem = DropdownItem;
var ListBoxSection2 = DropdownSection;
var ListBoxLabel = DropdownLabel;
var ListBoxDescription = DropdownDescription;
// src/components/menu.tsx
var import_react_aria_components16 = require("react-aria-components");
// src/components/popover.tsx
var import_react_aria_components15 = require("react-aria-components");
var import_tailwind_variants14 = require("tailwind-variants");
var import_jsx_runtime28 = require("react/jsx-runtime");
var popoverVariants = (0, import_tailwind_variants14.tv)({
base: "bg-popover text-popover-foreground z-50 rounded-md border shadow-md outline-hidden transition duration-200",
variants: {
isEntering: {
true: [
"animate-in fade-in-0 zoom-in-95",
"data-[placement=left]:slide-in-from-right-2 data-[placement=right]:slide-in-from-left-2 data-[placement=top]:slide-in-from-bottom-2 data-[placement=bottom]:slide-in-from-top-2"
]
},
isExiting: {
true: [
"animate-out fade-out-0 zoom-out-95",
"data-[placement=left]:slide-out-to-right-2 data-[placement=right]:slide-out-to-left-2 data-[placement=top]:slide-out-to-bottom-2 data-[placement=bottom]:slide-out-to-top-2"
]
}
}
});
var PopoverTrigger = import_react_aria_components15.DialogTrigger;
var Popover = ({ className, showArrow, ...props }) => {
const popoverContext = (0, import_react_aria_components15.useSlottedContext)(import_react_aria_components15.PopoverContext);
const isSubmenu = (popoverContext == null ? void 0 : popoverContext.trigger) === "SubmenuTrigger";
let offset = showArrow ? 12 : 8;
offset = isSubmenu ? offset - 6 : offset;
return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
import_react_aria_components15.Popover,
{
"data-slot": "popover",
offset,
className: (0, import_react_aria_components15.composeRenderProps)(
className,
(className2, renderProps) => popoverVariants({
...renderProps,
className: className2
})
),
...props,
children: (0, import_react_aria_components15.composeRenderProps)(props.children, (children) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
showArrow && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components15.OverlayArrow, { className: "group", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
"svg",
{
width: 12,
height: 12,
viewBox: "0 0 12 12",
className: "fill-popover stroke-bord