@vela-ui/react
Version:
Vela UI React components
1,410 lines (1,370 loc) • 115 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,
AlertContent: () => AlertContent,
AlertDescription: () => AlertDescription,
AlertTitle: () => AlertTitle,
Avatar: () => Avatar,
AvatarFallback: () => AvatarFallback,
AvatarImage: () => AvatarImage,
Badge: () => Badge,
Button: () => Button,
Card: () => Card,
CardAction: () => CardAction,
CardContent: () => CardContent,
CardDescription: () => CardDescription,
CardFooter: () => CardFooter,
CardHeader: () => CardHeader,
CardTitle: () => CardTitle,
CheckIcon: () => CheckIcon,
Checkbox: () => Checkbox,
CheckboxGroup: () => CheckboxGroup,
CheckboxGroupRoot: () => CheckboxGroupRoot,
ChevronDownIcon: () => ChevronDownIcon,
ChevronRightIcon: () => ChevronRightIcon,
ChevronUpIcon: () => ChevronUpIcon,
ChevronsUpDownIcon: () => ChevronsUpDownIcon,
CircleIcon: () => CircleIcon,
CloseIcon: () => CloseIcon,
Combobox: () => Combobox,
ComboboxDescription: () => ComboboxDescription,
ComboboxInput: () => ComboboxInput,
ComboboxItem: () => ComboboxItem,
ComboboxLabel: () => ComboboxLabel,
ComboboxList: () => ComboboxList,
ComboboxPopover: () => ComboboxPopover,
ComboboxSection: () => ComboboxSection,
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,
FileTrigger: () => import_react_aria_components13.FileTrigger,
Form: () => import_react_aria_components14.Form,
InfoIcon: () => InfoIcon,
Input: () => Input,
InputGroup: () => InputGroup,
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,
NumberField: () => NumberField,
Popover: () => Popover,
PopoverContent: () => PopoverContent,
PopoverTrigger: () => PopoverTrigger,
ProviderContext: () => ProviderContext,
Radio: () => Radio,
RadioGroup: () => RadioGroup,
RadioGroupRoot: () => RadioGroupRoot,
SearchField: () => SearchField,
SearchIcon: () => SearchIcon,
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_components18.SubmenuTrigger,
SuccessIcon: () => SuccessIcon,
Switch: () => Switch,
Tab: () => Tab,
TabList: () => TabList,
TabPanel: () => TabPanel,
Tabs: () => Tabs,
TextField: () => TextField,
Textarea: () => Textarea,
ThemeProvider: () => ThemeProvider,
ThemeProviderContext: () => ThemeProviderContext,
ToggleButton: () => ToggleButton,
ToggleButtonGroup: () => ToggleButtonGroup,
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,
toggleButtonVariants: () => toggleButtonVariants,
useCallbackRef: () => useCallbackRef,
useDisclosure: () => useDisclosure,
useIsHydrated: () => useIsHydrated,
useMediaQuery: () => useMediaQuery,
useProviderContext: () => useProviderContext,
useTheme: () => useTheme,
useToggleGroupContext: () => useToggleGroupContext
});
module.exports = __toCommonJS(index_exports);
// src/components/alert.tsx
var import_tailwind_variants = require("tailwind-variants");
var import_jsx_runtime = require("react/jsx-runtime");
var alertVariants = (0, import_tailwind_variants.tv)({
slots: {
root: "bg-card text-card-foreground relative flex w-full items-start gap-3 rounded-lg border p-4 text-sm [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-5 [&>svg]:text-current",
content: "flex flex-1 flex-col gap-1",
title: "font-medium",
description: "text-muted-foreground"
}
});
var { root, content, title, description } = alertVariants();
function Alert({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "alert", role: "alert", className: root({ className }), ...props });
}
function AlertContent({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "alert-content", className: content({ className }), ...props });
}
function AlertTitle({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "alert-title", className: title({ className }), ...props });
}
function AlertDescription({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { "data-slot": "alert-description", className: description({ className }), ...props });
}
// src/components/avatar.tsx
var import_react4 = __toESM(require("react"));
var import_tailwind_variants2 = require("tailwind-variants");
// src/hooks/use-callback-ref.ts
var import_react = require("react");
function useCallbackRef(callback, deps = []) {
const callbackRef = (0, import_react.useRef)(() => {
throw new Error("Cannot call an event handler while rendering.");
});
(0, import_react.useInsertionEffect)(() => {
callbackRef.current = callback;
});
return (0, import_react.useCallback)((...args) => {
var _a;
return (_a = callbackRef.current) == null ? void 0 : _a.call(callbackRef, ...args);
}, deps);
}
// src/hooks/use-disclosure.ts
var import_react2 = require("react");
function useDisclosure(props = {}) {
const handleOpen = useCallbackRef(props.onOpen);
const handleClose = useCallbackRef(props.onClose);
const [openState, setOpen] = (0, import_react2.useState)(props.defaultOpen || false);
const isOpen = props.isOpen !== void 0 ? props.isOpen : openState;
const controlled = props.isOpen !== void 0;
const onClose = (0, import_react2.useCallback)(() => {
if (!controlled) setOpen(false);
handleClose == null ? void 0 : handleClose();
}, [controlled, handleClose]);
const onOpen = (0, import_react2.useCallback)(() => {
if (!controlled) setOpen(true);
handleOpen == null ? void 0 : handleOpen();
}, [controlled, handleOpen]);
const onOpenChange = (0, import_react2.useCallback)(() => {
if (isOpen) {
onClose();
} else {
onOpen();
}
}, [isOpen, onOpen, onClose]);
return {
isOpen,
onOpen,
onClose,
onOpenChange,
setOpen
};
}
// src/hooks/use-is-hydrated.ts
var React = __toESM(require("react"));
function useIsHydrated() {
const subscribe = () => () => {
};
return React.useSyncExternalStore(
subscribe,
() => true,
() => false
);
}
// src/hooks/use-media-query.ts
var import_react3 = require("react");
var useMediaQuery = (query) => {
const [value, setValue] = (0, import_react3.useState)(false);
(0, import_react3.useEffect)(() => {
const onChange = (event) => {
setValue(event.matches);
};
const result = matchMedia(query);
result.addEventListener("change", onChange);
setValue(result.matches);
return () => result.removeEventListener("change", onChange);
}, [query]);
return value;
};
// src/lib/context.ts
var React2 = __toESM(require("react"));
function createContext2(options = {}) {
const {
strict = true,
errorMessage = "useContext: `context` is undefined. Seems you forgot to wrap component within the Provider",
name
} = options;
const Context = React2.createContext(void 0);
Context.displayName = name;
function useContext3() {
var _a;
const context = React2.useContext(Context);
if (!context && strict) {
const error = new Error(errorMessage);
error.name = "ContextError";
(_a = Error.captureStackTrace) == null ? void 0 : _a.call(Error, error, useContext3);
throw error;
}
return context;
}
return [Context.Provider, useContext3, Context];
}
// src/components/avatar.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var avatarVariants = (0, import_tailwind_variants2.tv)({
slots: {
root: "relative inline-flex shrink-0 overflow-hidden",
image: "aspect-square size-full",
fallback: "bg-muted flex size-full items-center justify-center select-none"
},
variants: {
size: {
sm: { root: "size-8" },
md: { root: "size-10" },
lg: { root: "size-12" }
},
shape: {
circle: { root: "rounded-full" },
square: { root: "rounded-sm" }
}
},
defaultVariants: {
size: "md",
shape: "circle"
}
});
var { root: root2, image, fallback } = avatarVariants();
var [AvatarProvider, useAvatarContext] = createContext2({
name: "AvatarContext"
});
function Avatar({ className, shape, size, ...props }) {
const [imageLoadingStatus, setImageLoadingStatus] = import_react4.default.useState("idle");
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
AvatarProvider,
{
value: {
shape,
size,
imageLoadingStatus,
onImageLoadingStatusChange: setImageLoadingStatus
},
children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-slot": "avatar", className: root2({ className, shape, size }), ...props })
}
);
}
function AvatarImage({
src,
className,
onLoadingStatusChange = () => {
},
...props
}) {
const context = useAvatarContext();
const imageLoadingStatus = useImageLoadingStatus(src, props);
const handleLoadingStatusChange = useCallbackRef((status) => {
onLoadingStatusChange(status);
context.onImageLoadingStatusChange(status);
});
(0, import_react4.useLayoutEffect)(() => {
if (imageLoadingStatus !== "idle") {
handleLoadingStatusChange(imageLoadingStatus);
}
}, [imageLoadingStatus, handleLoadingStatusChange]);
return imageLoadingStatus === "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("img", { "data-slot": "avatar-image", className: image({ className }), src, ...props }) : null;
}
function AvatarFallback({ className, delayMs, ...props }) {
const context = useAvatarContext();
const [canRender, setCanRender] = (0, import_react4.useState)(delayMs === void 0);
(0, import_react4.useEffect)(() => {
if (delayMs !== void 0) {
const timerId = window.setTimeout(() => setCanRender(true), delayMs);
return () => window.clearTimeout(timerId);
}
}, [delayMs]);
return canRender && context.imageLoadingStatus !== "loaded" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "data-slot": "avatar-fallback", className: fallback({ className }), ...props }) : null;
}
function resolveLoadingStatus(image2, src) {
if (!image2) {
return "idle";
}
if (!src) {
return "error";
}
if (image2.src !== src) {
image2.src = src;
}
return image2.complete && image2.naturalWidth > 0 ? "loaded" : "loading";
}
function useImageLoadingStatus(src, { referrerPolicy, crossOrigin }) {
const isHydrated = useIsHydrated();
const imageRef = import_react4.default.useRef(null);
const image2 = (() => {
if (!isHydrated) return null;
if (!imageRef.current) {
imageRef.current = new window.Image();
}
return imageRef.current;
})();
const [loadingStatus, setLoadingStatus] = import_react4.default.useState(
() => resolveLoadingStatus(image2, src)
);
(0, import_react4.useLayoutEffect)(() => {
setLoadingStatus(resolveLoadingStatus(image2, src));
}, [image2, src]);
(0, import_react4.useLayoutEffect)(() => {
const updateStatus = (status) => () => {
setLoadingStatus(status);
};
if (!image2) return;
const handleLoad = updateStatus("loaded");
const handleError = updateStatus("error");
image2.addEventListener("load", handleLoad);
image2.addEventListener("error", handleError);
if (referrerPolicy) {
image2.referrerPolicy = referrerPolicy;
}
if (typeof crossOrigin === "string") {
image2.crossOrigin = crossOrigin;
}
return () => {
image2.removeEventListener("load", handleLoad);
image2.removeEventListener("error", handleError);
};
}, [image2, crossOrigin, referrerPolicy]);
return loadingStatus;
}
// src/components/badge.tsx
var import_tailwind_variants4 = require("tailwind-variants");
// src/lib/classes.ts
var import_tailwind_variants3 = require("tailwind-variants");
var focusRing = (0, import_tailwind_variants3.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_runtime3 = require("react/jsx-runtime");
var badgeVariants = (0, import_tailwind_variants4.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_runtime3.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_variants6 = require("tailwind-variants");
// src/components/loader.tsx
var import_tailwind_variants5 = require("tailwind-variants");
// src/icons/check.tsx
var import_jsx_runtime4 = require("react/jsx-runtime");
var CheckIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M20 6 9 17l-5-5" })
}
);
};
// src/icons/chevron-down.tsx
var import_jsx_runtime5 = require("react/jsx-runtime");
var ChevronDownIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("path", { d: "m6 9 6 6 6-6" })
}
);
};
// src/icons/chevron-right.tsx
var import_jsx_runtime6 = require("react/jsx-runtime");
var ChevronRightIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m9 18 6-6-6-6" })
}
);
};
// src/icons/chevron-up.tsx
var import_jsx_runtime7 = require("react/jsx-runtime");
var ChevronUpIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("path", { d: "m18 15-6-6-6 6" })
}
);
};
// src/icons/chevrons-up-down.tsx
var import_jsx_runtime8 = require("react/jsx-runtime");
var ChevronsUpDownIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m7 15 5 5 5-5" }),
/* @__PURE__ */ (0, import_jsx_runtime8.jsx)("path", { d: "m7 9 5-5 5 5" })
]
}
);
};
// src/icons/circle.tsx
var import_jsx_runtime9 = require("react/jsx-runtime");
var CircleIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("circle", { cx: "12", cy: "12", r: "10" })
}
);
};
// src/icons/close.tsx
var import_jsx_runtime10 = require("react/jsx-runtime");
var CloseIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "M18 6 6 18" }),
/* @__PURE__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m6 6 12 12" })
]
}
);
};
// src/icons/error.tsx
var import_jsx_runtime11 = require("react/jsx-runtime");
var ErrorIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
"svg",
{
fill: "currentColor",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime11.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_runtime12 = require("react/jsx-runtime");
var InfoIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
"svg",
{
fill: "currentColor",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime12.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_runtime13 = require("react/jsx-runtime");
var LoaderCircleIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
}
);
};
// src/icons/loader-ring.tsx
var import_jsx_runtime14 = require("react/jsx-runtime");
var LoaderRingIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
"svg",
{
fill: "none",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime14.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_runtime14.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_runtime15 = require("react/jsx-runtime");
var MinusIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("path", { d: "M5 12h14" })
}
);
};
// src/icons/search.tsx
var import_jsx_runtime16 = require("react/jsx-runtime");
var SearchIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
"svg",
{
fill: "none",
stroke: "currentColor",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: [
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("path", { d: "m21 21-4.34-4.34" }),
/* @__PURE__ */ (0, import_jsx_runtime16.jsx)("circle", { cx: "11", cy: "11", r: "8" })
]
}
);
};
// src/icons/success.tsx
var import_jsx_runtime17 = require("react/jsx-runtime");
var SuccessIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
"svg",
{
fill: "currentColor",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime17.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_runtime18 = require("react/jsx-runtime");
var WarningIcon = (props) => {
return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
"svg",
{
fill: "currentColor",
width: "1em",
height: "1em",
viewBox: "0 0 24 24",
xmlns: "http://www.w3.org/2000/svg",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime18.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/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/loader.tsx
var import_jsx_runtime19 = require("react/jsx-runtime");
var loaderVariants = (0, import_tailwind_variants5.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_runtime19.jsx)(
LoaderCircleIcon,
{
className: cn("size-4 animate-spin", className),
"data-slot": "icon",
...props
}
);
}
var Ring = ({ className, ...props }) => /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(LoaderRingIcon, { className: cn("size-4 animate-spin", className), "data-slot": "icon", ...props });
function Spin({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
"svg",
{
className: cn("size-4 stroke-current", className),
"data-slot": "icon",
viewBox: "0 0 2400 2400",
...props,
children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("g", { strokeWidth: "200", strokeLinecap: "round", fill: "none", children: [
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { x1: "1200", y1: "600", x2: "1200", y2: "100" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.5", x1: "1200", y1: "2300", x2: "1200", y2: "1800" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.917", x1: "900", y1: "680.4", x2: "650", y2: "247.4" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.417", x1: "1750", y1: "2152.6", x2: "1500", y2: "1719.6" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.833", x1: "680.4", y1: "900", x2: "247.4", y2: "650" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.333", x1: "2152.6", y1: "1750", x2: "1719.6", y2: "1500" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.75", x1: "600", y1: "1200", x2: "100", y2: "1200" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.25", x1: "2300", y1: "1200", x2: "1800", y2: "1200" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.667", x1: "680.4", y1: "1500", x2: "247.4", y2: "1750" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.167", x1: "2152.6", y1: "650", x2: "1719.6", y2: "900" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.583", x1: "900", y1: "1719.6", x2: "650", y2: "2152.6" }),
/* @__PURE__ */ (0, import_jsx_runtime19.jsx)("line", { opacity: "0.083", x1: "1750", y1: "247.4", x2: "1500", y2: "680.4" }),
/* @__PURE__ */ (0, import_jsx_runtime19.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_runtime19.jsx)(
LoaderComponent,
{
role: "presentation",
ref,
className: loaderVariants({ size, className }),
...otherProps
}
);
}
// src/components/button.tsx
var import_jsx_runtime20 = require("react/jsx-runtime");
var buttonVariants = (0, import_tailwind_variants6.tv)({
extend: focusRing,
base: "inline-flex shrink-0 items-center justify-center rounded-md font-medium whitespace-nowrap transition-all [&_svg]:pointer-events-none [&_svg]:shrink-0",
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: "size-8 gap-1 text-xs [&_svg:not([class*='size-'])]:size-4",
sm: "size-9 gap-2 text-sm [&_svg:not([class*='size-'])]:size-4",
md: "size-10 gap-2 text-sm [&_svg:not([class*='size-'])]:size-5",
lg: "size-11 gap-2.5 text-base [&_svg:not([class*='size-'])]:size-5",
xl: "size-12 gap-2.5 text-base [&_svg:not([class*='size-'])]:size-5"
},
shape: {
rectangle: "",
square: "",
circle: "rounded-full"
},
isDisabled: {
true: "pointer-events-none opacity-50"
},
isPending: {
true: "pointer-events-none opacity-50"
}
},
compoundVariants: [
{
size: "xs",
shape: "rectangle",
className: "w-auto px-2.5"
},
{
size: "sm",
shape: "rectangle",
className: "w-auto px-3.5"
},
{
size: "md",
shape: "rectangle",
className: "w-auto px-4"
},
{
size: "lg",
shape: "rectangle",
className: "w-auto px-5"
},
{
size: "xl",
shape: "rectangle",
className: "w-auto px-5"
}
],
defaultVariants: {
variant: "default",
size: "md",
shape: "rectangle"
}
});
function Button({ className, variant, size, shape, loader = /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Loader, {}), ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
import_react_aria_components2.Button,
{
"data-slot": "button",
className: (0, import_react_aria_components2.composeRenderProps)(
className,
(className2, renderProps) => buttonVariants({
...renderProps,
variant,
size,
shape,
className: className2
})
),
...props,
children: (0, import_react_aria_components2.composeRenderProps)(props.children, (children) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
props.isPending && loader,
children
] }))
}
);
}
// src/components/card.tsx
var import_tailwind_variants7 = require("tailwind-variants");
var import_jsx_runtime21 = require("react/jsx-runtime");
var cardVariants = (0, import_tailwind_variants7.tv)({
slots: {
root: "bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm",
header: "@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
title: "leading-none font-semibold",
description: "text-muted-foreground text-sm",
action: "col-start-2 row-span-2 row-start-1 self-start justify-self-end",
content: "px-6",
footer: "flex items-center px-6 [.border-t]:pt-6"
}
});
var { root: root3, header, title: title2, description: description2, action, content: content2, footer } = cardVariants();
function Card({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-slot": "card", className: root3({ className }), ...props });
}
function CardHeader({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-slot": "card-header", className: header({ className }), ...props });
}
function CardTitle({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-slot": "card-title", className: title2({ className }), ...props });
}
function CardDescription({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-slot": "card-description", className: description2({ className }), ...props });
}
function CardAction({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-slot": "card-action", className: action({ className }), ...props });
}
function CardContent({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-slot": "card-content", className: content2({ className }), ...props });
}
function CardFooter({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { "data-slot": "card-footer", className: footer({ className }), ...props });
}
// src/components/checkbox.tsx
var import_react_aria_components3 = require("react-aria-components");
var import_tailwind_variants8 = require("tailwind-variants");
var import_jsx_runtime22 = require("react/jsx-runtime");
var checkboxVariants = (0, import_tailwind_variants8.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_variants8.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_runtime22.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_runtime22.jsxs)(import_jsx_runtime22.Fragment, { children: [
/* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
"div",
{
"data-slot": "checkbox-indicator",
className: checkboxIndicatorVariants({
isSelected: isSelected || isIndeterminate,
size,
...renderProps,
className: indicatorClassName
}),
children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MinusIcon, {}) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime22.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_variants9 = require("tailwind-variants");
var import_jsx_runtime23 = require("react/jsx-runtime");
var fieldVariants = (0, import_tailwind_variants9.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: description3, fieldError } = fieldVariants();
function Label({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components4.Label, { "data-slot": "label", className: label({ className }), ...props });
}
function Description({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components4.Text, { slot: "description", className: description3({ className }), ...props });
}
function FieldError({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
import_react_aria_components4.FieldError,
{
className: (0, import_react_aria_components4.composeRenderProps)(className, (className2) => fieldError({ className: className2 })),
...props
}
);
}
var fieldGroupVariants = (0, import_tailwind_variants9.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_runtime23.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_runtime24 = require("react/jsx-runtime");
function CheckboxGroupRoot({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime24.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: description4,
errorMessage,
...props
}) {
return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CheckboxGroupRoot, { ...props, children: (0, import_react_aria_components5.composeRenderProps)(children, (children2) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(import_jsx_runtime24.Fragment, { children: [
label2 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Label, { children: label2 }),
children2,
description4 && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Description, { children: description4 }),
/* @__PURE__ */ (0, import_jsx_runtime24.jsx)(FieldError, { children: errorMessage })
] })) });
}
// src/components/combobox.tsx
var import_react_aria_components9 = require("react-aria-components");
// src/components/dropdown.tsx
var import_react_aria_components6 = require("react-aria-components");
var import_tailwind_merge2 = require("tailwind-merge");
var import_tailwind_variants10 = require("tailwind-variants");
var import_jsx_runtime25 = require("react/jsx-runtime");
var dropdownItemVariants = (0, import_tailwind_variants10.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_runtime25.jsxs)(import_react_aria_components6.ListBoxSection, { className, children: [
"title" in props && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components6.Header, { className: "text-muted-foreground px-2 py-1.5 text-xs", children: props.title }),
/* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components6.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_runtime25.jsx)(
import_react_aria_components6.ListBoxItem,
{
textValue,
className: (0, import_react_aria_components6.composeRenderProps)(
className,
(className2, renderProps) => dropdownItemVariants({ ...renderProps, variant, className: className2 })
),
...props,
children: (0, import_react_aria_components6.composeRenderProps)(props.children, (children, { isSelected }) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_jsx_runtime25.Fragment, { children: [
isSelected && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CheckIcon, {}) }),
children
] }))
}
);
}
function DropdownLabel({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components6.Text, { slot: "label", className, ...props });
}
function DropdownDescription({ className, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
import_react_aria_components6.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_runtime25.jsx)(
import_react_aria_components6.Separator,
{
orientation: "horizontal",
className: (0, import_tailwind_merge2.twMerge)("bg-border -mx-1 my-1 h-px", className),
...props
}
);
}
// src/components/input.tsx
var import_react5 = require("react");
var import_react_aria_components7 = require("react-aria-components");
var import_tailwind_variants11 = require("tailwind-variants");
var import_jsx_runtime26 = require("react/jsx-runtime");
var inputVariants = (0, import_tailwind_variants11.tv)({
extend: focusRing,
base: "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input relative 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"
},
isFocused: focusRing.variants.isFocusVisible,
hasStartElement: {
true: ""
},
hasEndElement: {
true: ""
}
},
compoundVariants: [
{
hasStartElement: true,
size: "xs",
className: "pl-8"
},
{
hasStartElement: true,
size: "sm",
className: "pl-9"
},
{
hasStartElement: true,
size: "md",
className: "pl-10"
},
{
hasStartElement: true,
size: "lg",
className: "pl-11"
},
{
hasStartElement: true,
size: "xl",
className: "pl-12"
},
{
hasEndElement: true,
size: "xs",
className: "pr-8"
},
{
hasEndElement: true,
size: "sm",
className: "pr-9"
},
{
hasEndElement: true,
size: "md",
className: "pr-10"
},
{
hasEndElement: true,
size: "lg",
className: "pr-11"
},
{
hasEndElement: true,
size: "xl",
className: "pr-12"
}
],
defaultVariants: {
size: "md"
}
});
function Input({ className, size, hasStartElement, hasEndElement, ...props }) {
return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
import_react_aria_components7.Input,
{
"data-slot": "input",
className: (0, import_react_aria_components7.composeRenderProps)(
className,
(className2, renderProps) => inputVariants({
...renderProps,
size,
hasStartElement,
hasEndElement,
className: className2
})
),
...props
}
);
}
var inputGroupVariants = (0, import_tailwind_variants11.tv)({
slots: {
root: [
"relative isolate flex w-full flex-row items-center justify-start !gap-0",
"has-[[data-slot=input-addon]]:[&_:not(:first-child)]:-ml-px",
"has-[[data-slot=input-addon]]:[&_:not(:first-child)]:rounded-ss-none has-[[data-slot=input-addon]]:[&_:not(:first-child)]:rounded-es-none",
"has-[[data-slot=input-addon]]:[&_:not(:last-child)]:rounded-se-none has-[[data-slot=input-addon]]:[&_:not(:last-child)]:rounded-ee-none"
],
addon: "border-input bg-accent flex w-auto items-center self-stretch rounded-md border whitespace-nowrap",
element: "text-muted-foreground absolute inset-y-0 z-50 flex items-center has-[button]:px-0 [&_button]:scale-75"
},
variants: {
size: {
xs: {
root: "text-xs",
addon: "px-2.5",
element: "px-2.5"
},
sm: {
root: "text-sm",
addon: "px-3",
element: "px-3"
},
md: {
root: "text-sm",
addon: "px-3",
element: "px-3"
},
lg: {
root: "text-base",
addon: "px-3.5",
element: "px-3.5"
},
xl: {
root: "text-base",
addon: "px-4",
element: "px-4"
}
}
},
defaultVariants: {
size: "md"
}
});
var {