@badnpm/ui 0.0.0 → 0.0.1

package/dist/cjs/components/context-menu.cjs

@@ -0,0 +1,69 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var contextMenu = require('@base-ui/react/context-menu');
+var cn = require('cn');
+var lucideReact = require('lucide-react');
+
+function ContextMenu({ ...props }) {
+    return jsxRuntime.jsx(contextMenu.ContextMenu.Root, { "data-slot": "context-menu", ...props });
+}
+function ContextMenuPortal({ ...props }) {
+    return (jsxRuntime.jsx(contextMenu.ContextMenu.Portal, { "data-slot": "context-menu-portal", ...props }));
+}
+function ContextMenuTrigger({ className, ...props }) {
+    return (jsxRuntime.jsx(contextMenu.ContextMenu.Trigger, { "data-slot": "context-menu-trigger", className: cn.cn("select-none", className), ...props }));
+}
+function ContextMenuContent({ className, align = "start", alignOffset = 4, side = "right", sideOffset = 0, ...props }) {
+    return (jsxRuntime.jsx(contextMenu.ContextMenu.Portal, { children: jsxRuntime.jsx(contextMenu.ContextMenu.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: jsxRuntime.jsx(contextMenu.ContextMenu.Popup, { "data-slot": "context-menu-content", className: cn.cn("z-50 max-h-(--available-height) min-w-36 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+}
+function ContextMenuGroup({ ...props }) {
+    return (jsxRuntime.jsx(contextMenu.ContextMenu.Group, { "data-slot": "context-menu-group", ...props }));
+}
+function ContextMenuLabel({ className, inset, ...props }) {
+    return (jsxRuntime.jsx(contextMenu.ContextMenu.GroupLabel, { "data-slot": "context-menu-label", "data-inset": inset, className: cn.cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
+}
+function ContextMenuItem({ className, inset, variant = "default", ...props }) {
+    return (jsxRuntime.jsx(contextMenu.ContextMenu.Item, { "data-slot": "context-menu-item", "data-inset": inset, "data-variant": variant, className: cn.cn("group/context-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 focus:*:[svg]:text-accent-foreground data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+}
+function ContextMenuSub({ ...props }) {
+    return (jsxRuntime.jsx(contextMenu.ContextMenu.SubmenuRoot, { "data-slot": "context-menu-sub", ...props }));
+}
+function ContextMenuSubTrigger({ className, inset, children, ...props }) {
+    return (jsxRuntime.jsxs(contextMenu.ContextMenu.SubmenuTrigger, { "data-slot": "context-menu-sub-trigger", "data-inset": inset, className: cn.cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function ContextMenuSubContent({ ...props }) {
+    return (jsxRuntime.jsx(ContextMenuContent, { "data-slot": "context-menu-sub-content", className: "shadow-lg", side: "right", ...props }));
+}
+function ContextMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (jsxRuntime.jsxs(contextMenu.ContextMenu.CheckboxItem, { "data-slot": "context-menu-checkbox-item", "data-inset": inset, className: cn.cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-2", children: jsxRuntime.jsx(contextMenu.ContextMenu.CheckboxItemIndicator, { children: jsxRuntime.jsx(lucideReact.CheckIcon, {}) }) }), children] }));
+}
+function ContextMenuRadioGroup({ ...props }) {
+    return (jsxRuntime.jsx(contextMenu.ContextMenu.RadioGroup, { "data-slot": "context-menu-radio-group", ...props }));
+}
+function ContextMenuRadioItem({ className, children, inset, ...props }) {
+    return (jsxRuntime.jsxs(contextMenu.ContextMenu.RadioItem, { "data-slot": "context-menu-radio-item", "data-inset": inset, className: cn.cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-2", children: jsxRuntime.jsx(contextMenu.ContextMenu.RadioItemIndicator, { children: jsxRuntime.jsx(lucideReact.CheckIcon, {}) }) }), children] }));
+}
+function ContextMenuSeparator({ className, ...props }) {
+    return (jsxRuntime.jsx(contextMenu.ContextMenu.Separator, { "data-slot": "context-menu-separator", className: cn.cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function ContextMenuShortcut({ className, ...props }) {
+    return (jsxRuntime.jsx("span", { "data-slot": "context-menu-shortcut", className: cn.cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/context-menu-item:text-accent-foreground", className), ...props }));
+}
+
+exports.ContextMenu = ContextMenu;
+exports.ContextMenuCheckboxItem = ContextMenuCheckboxItem;
+exports.ContextMenuContent = ContextMenuContent;
+exports.ContextMenuGroup = ContextMenuGroup;
+exports.ContextMenuItem = ContextMenuItem;
+exports.ContextMenuLabel = ContextMenuLabel;
+exports.ContextMenuPortal = ContextMenuPortal;
+exports.ContextMenuRadioGroup = ContextMenuRadioGroup;
+exports.ContextMenuRadioItem = ContextMenuRadioItem;
+exports.ContextMenuSeparator = ContextMenuSeparator;
+exports.ContextMenuShortcut = ContextMenuShortcut;
+exports.ContextMenuSub = ContextMenuSub;
+exports.ContextMenuSubContent = ContextMenuSubContent;
+exports.ContextMenuSubTrigger = ContextMenuSubTrigger;
+exports.ContextMenuTrigger = ContextMenuTrigger;

package/dist/cjs/components/dialog.cjs

@@ -0,0 +1,50 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var dialog = require('@base-ui/react/dialog');
+var cn = require('cn');
+var button = require('./button.cjs');
+var lucideReact = require('lucide-react');
+
+function Dialog({ ...props }) {
+    return jsxRuntime.jsx(dialog.Dialog.Root, { "data-slot": "dialog", ...props });
+}
+function DialogTrigger({ ...props }) {
+    return jsxRuntime.jsx(dialog.Dialog.Trigger, { "data-slot": "dialog-trigger", ...props });
+}
+function DialogPortal({ ...props }) {
+    return jsxRuntime.jsx(dialog.Dialog.Portal, { "data-slot": "dialog-portal", ...props });
+}
+function DialogClose({ ...props }) {
+    return jsxRuntime.jsx(dialog.Dialog.Close, { "data-slot": "dialog-close", ...props });
+}
+function DialogOverlay({ className, ...props }) {
+    return (jsxRuntime.jsx(dialog.Dialog.Backdrop, { "data-slot": "dialog-overlay", className: cn.cn("fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0", className), ...props }));
+}
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
+    return (jsxRuntime.jsxs(DialogPortal, { children: [jsxRuntime.jsx(DialogOverlay, {}), jsxRuntime.jsxs(dialog.Dialog.Popup, { "data-slot": "dialog-content", className: cn.cn("fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl bg-popover p-4 text-sm text-popover-foreground ring-1 ring-foreground/10 duration-100 outline-none sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props, children: [children, showCloseButton && (jsxRuntime.jsxs(dialog.Dialog.Close, { "data-slot": "dialog-close", render: jsxRuntime.jsx(button.Button, { variant: "ghost", className: "absolute top-2 right-2", size: "icon-sm" }), children: [jsxRuntime.jsx(lucideReact.XIcon, {}), jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
+}
+function DialogHeader({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "dialog-header", className: cn.cn("flex flex-col gap-2", className), ...props }));
+}
+function DialogFooter({ className, showCloseButton = false, children, ...props }) {
+    return (jsxRuntime.jsxs("div", { "data-slot": "dialog-footer", className: cn.cn("-mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t bg-muted/50 p-4 sm:flex-row sm:justify-end", className), ...props, children: [children, showCloseButton && (jsxRuntime.jsx(dialog.Dialog.Close, { render: jsxRuntime.jsx(button.Button, { variant: "outline" }), children: "Close" }))] }));
+}
+function DialogTitle({ className, ...props }) {
+    return (jsxRuntime.jsx(dialog.Dialog.Title, { "data-slot": "dialog-title", className: cn.cn("font-heading text-base leading-none font-medium", className), ...props }));
+}
+function DialogDescription({ className, ...props }) {
+    return (jsxRuntime.jsx(dialog.Dialog.Description, { "data-slot": "dialog-description", className: cn.cn("text-sm text-muted-foreground *:[a]:underline *:[a]:underline-offset-3 *:[a]:hover:text-foreground", className), ...props }));
+}
+
+exports.Dialog = Dialog;
+exports.DialogClose = DialogClose;
+exports.DialogContent = DialogContent;
+exports.DialogDescription = DialogDescription;
+exports.DialogFooter = DialogFooter;
+exports.DialogHeader = DialogHeader;
+exports.DialogOverlay = DialogOverlay;
+exports.DialogPortal = DialogPortal;
+exports.DialogTitle = DialogTitle;
+exports.DialogTrigger = DialogTrigger;

package/dist/cjs/components/drawer.cjs

@@ -0,0 +1,108 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var drawer = require('@base-ui/react/drawer');
+var cn = require('cn');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+const DrawerContext = React__namespace.createContext(null);
+function useDrawer() {
+    const context = React__namespace.useContext(DrawerContext);
+    if (!context) {
+        throw new Error("useDrawer must be used within a Drawer.");
+    }
+    return context;
+}
+function Drawer({ modal = true, showSwipeHandle = false, snapPoints, swipeDirection = "down", ...props }) {
+    const hasSnapPoints = snapPoints != null && snapPoints.length > 0;
+    const contextValue = React__namespace.useMemo(() => ({ hasSnapPoints, modal, showSwipeHandle, swipeDirection }), [hasSnapPoints, modal, showSwipeHandle, swipeDirection]);
+    return (jsxRuntime.jsx(DrawerContext.Provider, { value: contextValue, children: jsxRuntime.jsx(drawer.Drawer.Root, { "data-slot": "drawer", modal: modal, snapPoints: snapPoints, swipeDirection: swipeDirection, ...props }) }));
+}
+function DrawerTrigger({ ...props }) {
+    return jsxRuntime.jsx(drawer.Drawer.Trigger, { "data-slot": "drawer-trigger", ...props });
+}
+function DrawerPortal({ ...props }) {
+    return jsxRuntime.jsx(drawer.Drawer.Portal, { "data-slot": "drawer-portal", ...props });
+}
+function DrawerClose({ ...props }) {
+    return jsxRuntime.jsx(drawer.Drawer.Close, { "data-slot": "drawer-close", ...props });
+}
+function DrawerOverlay({ className, ...props }) {
+    return (jsxRuntime.jsx(drawer.Drawer.Backdrop, { "data-slot": "drawer-overlay", className: cn.cn("fixed inset-0 z-50 min-h-dvh bg-black/10 opacity-[max(var(--drawer-overlay-min-opacity,0),calc(1-var(--drawer-swipe-progress)))] transition-opacity duration-450 ease-[cubic-bezier(0.32,0.72,0,1)] select-none data-ending-style:pointer-events-none data-ending-style:opacity-0 data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-snap-points:[--drawer-overlay-min-opacity:0.5] data-starting-style:opacity-0 data-swiping:duration-0 supports-backdrop-filter:backdrop-blur-xs supports-[-webkit-touch-callout:none]:absolute", className), ...props }));
+}
+function DrawerSwipeHandle({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "drawer-swipe-handle", "aria-hidden": "true", className: cn.cn("relative z-10 flex shrink-0 cursor-grab transition-opacity duration-200 group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-[swipe-axis=x]/drawer-popup:h-full group-data-[swipe-axis=x]/drawer-popup:w-3 group-data-[swipe-axis=x]/drawer-popup:items-center group-data-[swipe-axis=y]/drawer-popup:h-3 group-data-[swipe-axis=y]/drawer-popup:w-full group-data-[swipe-axis=y]/drawer-popup:justify-center group-data-[swipe-direction=down]/drawer-popup:items-end group-data-[swipe-direction=left]/drawer-popup:order-last group-data-[swipe-direction=left]/drawer-popup:justify-start group-data-[swipe-direction=right]/drawer-popup:justify-end group-data-[swipe-direction=up]/drawer-popup:order-last group-data-[swipe-direction=up]/drawer-popup:items-start after:block after:shrink-0 after:rounded-full after:bg-muted group-data-[swipe-axis=x]/drawer-popup:after:h-24 group-data-[swipe-axis=x]/drawer-popup:after:w-1 group-data-[swipe-axis=y]/drawer-popup:after:h-1 group-data-[swipe-axis=y]/drawer-popup:after:w-24 active:cursor-grabbing", className), ...props }));
+}
+function DrawerContent({ className, children, ...props }) {
+    const { hasSnapPoints, modal, showSwipeHandle, swipeDirection } = useDrawer();
+    const swipeAxis = swipeDirection === "down" || swipeDirection === "up" ? "y" : "x";
+    return (jsxRuntime.jsxs(DrawerPortal, { "data-slot": "drawer-portal", children: [modal === true && (jsxRuntime.jsx(DrawerOverlay, { "data-snap-points": hasSnapPoints ? "" : undefined })), jsxRuntime.jsx(drawer.Drawer.Viewport, { "data-slot": "drawer-viewport", "data-modal": modal, className: "pointer-events-none fixed inset-0 z-50 select-none data-[modal=true]:pointer-events-auto", children: jsxRuntime.jsxs(drawer.Drawer.Popup, { "data-slot": "drawer-popup", "data-swipe-axis": swipeAxis, "data-snap-points": hasSnapPoints ? "" : undefined, className: cn.cn(
+                    // Base.
+                    "group/drawer-popup pointer-events-auto fixed z-50 m-(--drawer-inset,0px) flex h-(--drawer-content-height) max-h-(--drawer-content-max-height,none) min-h-0 w-(--drawer-content-width,auto) transform-[translate3d(var(--translate-x,0px),var(--translate-y,0px),0)_scale(var(--stack-scale))] flex-col bg-popover text-sm text-popover-foreground transition-[transform,height,opacity,filter] duration-450 ease-[cubic-bezier(0.22,1,0.36,1)] will-change-transform outline-none select-none [interpolate-size:allow-keywords] data-[swipe-direction=down]:rounded-t-xl data-[swipe-direction=down]:border-t data-[swipe-direction=left]:rounded-r-xl data-[swipe-direction=left]:border-r data-[swipe-direction=right]:rounded-l-xl data-[swipe-direction=right]:border-l data-[swipe-direction=up]:rounded-b-xl data-[swipe-direction=up]:border-b", 
+                    // Nested.
+                    "data-nested-drawer-open:overflow-hidden data-nested-drawer-open:brightness-95", 
+                    // Bleed.
+                    "after:pointer-events-none after:absolute after:bg-(--drawer-bleed-background,var(--color-popover)) data-[swipe-axis=x]:after:inset-y-0 data-[swipe-axis=x]:after:w-(--bleed) data-[swipe-axis=y]:after:inset-x-0 data-[swipe-axis=y]:after:h-(--bleed) data-[swipe-direction=down]:after:top-full data-[swipe-direction=left]:after:right-full data-[swipe-direction=right]:after:left-full data-[swipe-direction=up]:after:bottom-full", 
+                    // Sizing.
+                    "[--drawer-content-height:var(--drawer-height,auto)] data-[swipe-axis=x]:[--drawer-content-width:75%] data-[swipe-axis=y]:[--drawer-content-max-height:calc(100dvh-6rem)] data-[swipe-axis=y]:data-snap-points:[--drawer-content-height:100dvh] data-[swipe-axis=x]:sm:[--drawer-content-width:24rem]", 
+                    // Stack.
+                    "[--bleed:3rem] [--peek:1rem] [--stack-height:var(--drawer-frontmost-height,var(--drawer-height,0px))] [--stack-peek-offset:max(0px,calc((var(--nested-drawers)-var(--stack-progress))*var(--peek)))] [--stack-progress:clamp(0,var(--drawer-swipe-progress),1)] [--stack-scale-base:max(0,calc(1-(var(--nested-drawers)*var(--stack-step))))] [--stack-scale:clamp(0,calc(var(--stack-scale-base)+(var(--stack-step)*var(--stack-progress))),1)] [--stack-shrink:calc(1-var(--stack-scale))] [--stack-step:0.05]", 
+                    // Transitions.
+                    "data-ending-style:transform-(--closed-transform) data-ending-style:opacity-[0.9999] data-ending-style:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-nested-drawer-swiping:duration-0 data-ending-style:data-nested-drawer-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)] data-starting-style:transform-(--closed-transform) data-swiping:duration-0 data-ending-style:data-swiping:duration-[calc(var(--drawer-swipe-strength)*400ms)]", 
+                    // Axis: y.
+                    "data-[swipe-axis=y]:inset-x-0 data-[swipe-axis=y]:data-nested-drawer-open:h-(--stack-height)", 
+                    // Axis: x.
+                    "data-[swipe-axis=x]:inset-y-0 data-[swipe-axis=x]:flex-row", 
+                    // Direction: down.
+                    "data-[swipe-direction=down]:bottom-0 data-[swipe-direction=down]:origin-bottom data-[swipe-direction=down]:[--closed-transform:translate3d(0,calc(100%+var(--drawer-inset,0px)+2px),0)] data-[swipe-direction=down]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)-var(--stack-peek-offset)-(var(--stack-shrink)*var(--stack-height)))]", 
+                    // Direction: up.
+                    "data-[swipe-direction=up]:top-0 data-[swipe-direction=up]:origin-top data-[swipe-direction=up]:[--closed-transform:translate3d(0,calc(-100%-var(--drawer-inset,0px)-2px),0)] data-[swipe-direction=up]:[--translate-y:calc(var(--drawer-snap-point-offset,0px)+var(--drawer-swipe-movement-y)+var(--stack-peek-offset)+(var(--stack-shrink)*var(--stack-height)))]", 
+                    // Direction: left.
+                    "data-[swipe-direction=left]:left-0 data-[swipe-direction=left]:origin-left data-[swipe-direction=left]:[--closed-transform:translate3d(calc(-100%-var(--drawer-inset,0px)-2px),0,0)] data-[swipe-direction=left]:[--translate-x:calc(var(--drawer-swipe-movement-x)+var(--stack-peek-offset)+(var(--stack-shrink)*100%))]", 
+                    // Direction: right.
+                    "data-[swipe-direction=right]:right-0 data-[swipe-direction=right]:origin-right data-[swipe-direction=right]:[--closed-transform:translate3d(calc(100%+var(--drawer-inset,0px)+2px),0,0)] data-[swipe-direction=right]:[--translate-x:calc(var(--drawer-swipe-movement-x)-var(--stack-peek-offset)-(var(--stack-shrink)*100%))]", className), ...props, children: [showSwipeHandle && jsxRuntime.jsx(DrawerSwipeHandle, {}), jsxRuntime.jsx(drawer.Drawer.Content, { "data-slot": "drawer-content", className: cn.cn("flex min-h-0 flex-1 flex-col overflow-hidden overscroll-contain rounded-[inherit] transition-opacity duration-300 ease-[cubic-bezier(0.45,1.005,0,1.005)] select-text group-data-nested-drawer-open/drawer-popup:opacity-0 group-data-nested-drawer-swiping/drawer-popup:opacity-100 group-data-swiping/drawer-popup:select-none"), children: children })] }) })] }));
+}
+function DrawerHeader({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "drawer-header", className: cn.cn("flex shrink-0 flex-col gap-0.5 p-4 pb-0 group-data-[swipe-axis=y]/drawer-popup:text-center md:gap-0.5 md:text-left", className), ...props }));
+}
+function DrawerFooter({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "drawer-footer", className: cn.cn("mt-auto flex shrink-0 flex-col gap-2 p-4 pt-0", className), ...props }));
+}
+function DrawerTitle({ className, ...props }) {
+    return (jsxRuntime.jsx(drawer.Drawer.Title, { "data-slot": "drawer-title", className: cn.cn("font-heading text-base font-medium text-foreground", className), ...props }));
+}
+function DrawerDescription({ className, ...props }) {
+    return (jsxRuntime.jsx(drawer.Drawer.Description, { "data-slot": "drawer-description", className: cn.cn("text-sm text-balance text-muted-foreground", className), ...props }));
+}
+
+exports.Drawer = Drawer;
+exports.DrawerClose = DrawerClose;
+exports.DrawerContent = DrawerContent;
+exports.DrawerDescription = DrawerDescription;
+exports.DrawerFooter = DrawerFooter;
+exports.DrawerHeader = DrawerHeader;
+exports.DrawerOverlay = DrawerOverlay;
+exports.DrawerPortal = DrawerPortal;
+exports.DrawerSwipeHandle = DrawerSwipeHandle;
+exports.DrawerTitle = DrawerTitle;
+exports.DrawerTrigger = DrawerTrigger;

package/dist/cjs/components/dropdown-menu.cjs

@@ -0,0 +1,68 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var menu = require('@base-ui/react/menu');
+var cn = require('cn');
+var lucideReact = require('lucide-react');
+
+function DropdownMenu({ ...props }) {
+    return jsxRuntime.jsx(menu.Menu.Root, { "data-slot": "dropdown-menu", ...props });
+}
+function DropdownMenuPortal({ ...props }) {
+    return jsxRuntime.jsx(menu.Menu.Portal, { "data-slot": "dropdown-menu-portal", ...props });
+}
+function DropdownMenuTrigger({ ...props }) {
+    return jsxRuntime.jsx(menu.Menu.Trigger, { "data-slot": "dropdown-menu-trigger", ...props });
+}
+function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 4, className, ...props }) {
+    return (jsxRuntime.jsx(menu.Menu.Portal, { children: jsxRuntime.jsx(menu.Menu.Positioner, { className: "isolate z-50 outline-none", align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, children: jsxRuntime.jsx(menu.Menu.Popup, { "data-slot": "dropdown-menu-content", className: cn.cn("z-50 max-h-(--available-height) w-(--anchor-width) min-w-32 origin-(--transform-origin) overflow-x-hidden overflow-y-auto rounded-lg bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 outline-none data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:overflow-hidden data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+}
+function DropdownMenuGroup({ ...props }) {
+    return jsxRuntime.jsx(menu.Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
+}
+function DropdownMenuLabel({ className, inset, ...props }) {
+    return (jsxRuntime.jsx(menu.Menu.GroupLabel, { "data-slot": "dropdown-menu-label", "data-inset": inset, className: cn.cn("px-1.5 py-1 text-xs font-medium text-muted-foreground data-inset:pl-7", className), ...props }));
+}
+function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
+    return (jsxRuntime.jsx(menu.Menu.Item, { "data-slot": "dropdown-menu-item", "data-inset": inset, "data-variant": variant, className: cn.cn("group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive dark:data-[variant=destructive]:focus:bg-destructive/20 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 data-[variant=destructive]:*:[svg]:text-destructive", className), ...props }));
+}
+function DropdownMenuSub({ ...props }) {
+    return jsxRuntime.jsx(menu.Menu.SubmenuRoot, { "data-slot": "dropdown-menu-sub", ...props });
+}
+function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
+    return (jsxRuntime.jsxs(menu.Menu.SubmenuTrigger, { "data-slot": "dropdown-menu-sub-trigger", "data-inset": inset, className: cn.cn("flex cursor-default items-center gap-1.5 rounded-md px-1.5 py-1 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-inset:pl-7 data-popup-open:bg-accent data-popup-open:text-accent-foreground data-open:bg-accent data-open:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [children, jsxRuntime.jsx(lucideReact.ChevronRightIcon, { className: "ml-auto" })] }));
+}
+function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 0, className, ...props }) {
+    return (jsxRuntime.jsx(DropdownMenuContent, { "data-slot": "dropdown-menu-sub-content", className: cn.cn("w-auto min-w-[96px] rounded-lg bg-popover p-1 text-popover-foreground shadow-lg ring-1 ring-foreground/10 duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, ...props }));
+}
+function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
+    return (jsxRuntime.jsxs(menu.Menu.CheckboxItem, { "data-slot": "dropdown-menu-checkbox-item", "data-inset": inset, className: cn.cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), checked: checked, ...props, children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-checkbox-item-indicator", children: jsxRuntime.jsx(menu.Menu.CheckboxItemIndicator, { children: jsxRuntime.jsx(lucideReact.CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuRadioGroup({ ...props }) {
+    return (jsxRuntime.jsx(menu.Menu.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props }));
+}
+function DropdownMenuRadioItem({ className, children, inset, ...props }) {
+    return (jsxRuntime.jsxs(menu.Menu.RadioItem, { "data-slot": "dropdown-menu-radio-item", "data-inset": inset, className: cn.cn("relative flex cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground data-inset:pl-7 data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className), ...props, children: [jsxRuntime.jsx("span", { className: "pointer-events-none absolute right-2 flex items-center justify-center", "data-slot": "dropdown-menu-radio-item-indicator", children: jsxRuntime.jsx(menu.Menu.RadioItemIndicator, { children: jsxRuntime.jsx(lucideReact.CheckIcon, {}) }) }), children] }));
+}
+function DropdownMenuSeparator({ className, ...props }) {
+    return (jsxRuntime.jsx(menu.Menu.Separator, { "data-slot": "dropdown-menu-separator", className: cn.cn("-mx-1 my-1 h-px bg-border", className), ...props }));
+}
+function DropdownMenuShortcut({ className, ...props }) {
+    return (jsxRuntime.jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn.cn("ml-auto text-xs tracking-widest text-muted-foreground group-focus/dropdown-menu-item:text-accent-foreground", className), ...props }));
+}
+
+exports.DropdownMenu = DropdownMenu;
+exports.DropdownMenuCheckboxItem = DropdownMenuCheckboxItem;
+exports.DropdownMenuContent = DropdownMenuContent;
+exports.DropdownMenuGroup = DropdownMenuGroup;
+exports.DropdownMenuItem = DropdownMenuItem;
+exports.DropdownMenuLabel = DropdownMenuLabel;
+exports.DropdownMenuPortal = DropdownMenuPortal;
+exports.DropdownMenuRadioGroup = DropdownMenuRadioGroup;
+exports.DropdownMenuRadioItem = DropdownMenuRadioItem;
+exports.DropdownMenuSeparator = DropdownMenuSeparator;
+exports.DropdownMenuShortcut = DropdownMenuShortcut;
+exports.DropdownMenuSub = DropdownMenuSub;
+exports.DropdownMenuSubContent = DropdownMenuSubContent;
+exports.DropdownMenuSubTrigger = DropdownMenuSubTrigger;
+exports.DropdownMenuTrigger = DropdownMenuTrigger;

package/dist/cjs/components/empty.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var cn = require('cn');
+
+function Empty({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "empty", className: cn.cn("flex w-full min-w-0 flex-1 flex-col items-center justify-center gap-4 rounded-xl border-dashed p-6 text-center text-balance", className), ...props }));
+}
+function EmptyHeader({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "empty-header", className: cn.cn("flex max-w-sm flex-col items-center gap-2", className), ...props }));
+}
+const emptyMediaVariants = classVarianceAuthority.cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            icon: "flex size-8 shrink-0 items-center justify-center rounded-lg bg-muted text-foreground [&_svg:not([class*='size-'])]:size-4",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "empty-icon", "data-variant": variant, className: cn.cn(emptyMediaVariants({ variant, className })), ...props }));
+}
+function EmptyTitle({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "empty-title", className: cn.cn("font-heading text-sm font-medium tracking-tight", className), ...props }));
+}
+function EmptyDescription({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "empty-description", className: cn.cn("text-sm/relaxed text-muted-foreground [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function EmptyContent({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "empty-content", className: cn.cn("flex w-full max-w-sm min-w-0 flex-col items-center gap-2.5 text-sm text-balance", className), ...props }));
+}
+
+exports.Empty = Empty;
+exports.EmptyContent = EmptyContent;
+exports.EmptyDescription = EmptyDescription;
+exports.EmptyHeader = EmptyHeader;
+exports.EmptyMedia = EmptyMedia;
+exports.EmptyTitle = EmptyTitle;

package/dist/cjs/components/field.cjs

@@ -0,0 +1,80 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var classVarianceAuthority = require('class-variance-authority');
+var cn = require('cn');
+var label = require('./label.cjs');
+var separator = require('./separator.cjs');
+
+function FieldSet({ className, ...props }) {
+    return (jsxRuntime.jsx("fieldset", { "data-slot": "field-set", className: cn.cn("flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className), ...props }));
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+    return (jsxRuntime.jsx("legend", { "data-slot": "field-legend", "data-variant": variant, className: cn.cn("mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base", className), ...props }));
+}
+function FieldGroup({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "field-group", className: cn.cn("group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4", className), ...props }));
+}
+const fieldVariants = classVarianceAuthority.cva("group/field flex w-full gap-2 data-[invalid=true]:text-destructive", {
+    variants: {
+        orientation: {
+            vertical: "flex-col *:w-full [&>.sr-only]:w-auto",
+            horizontal: "flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            responsive: "flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+function Field({ className, orientation = "vertical", ...props }) {
+    return (jsxRuntime.jsx("div", { role: "group", "data-slot": "field", "data-orientation": orientation, className: cn.cn(fieldVariants({ orientation }), className), ...props }));
+}
+function FieldContent({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "field-content", className: cn.cn("group/field-content flex flex-1 flex-col gap-0.5 leading-snug", className), ...props }));
+}
+function FieldLabel({ className, ...props }) {
+    return (jsxRuntime.jsx(label.Label, { "data-slot": "field-label", className: cn.cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className), ...props }));
+}
+function FieldTitle({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "field-label", className: cn.cn("flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50", className), ...props }));
+}
+function FieldDescription({ className, ...props }) {
+    return (jsxRuntime.jsx("p", { "data-slot": "field-description", className: cn.cn("text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5", "last:mt-0 nth-last-2:-mt-1", "[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className), ...props }));
+}
+function FieldSeparator({ children, className, ...props }) {
+    return (jsxRuntime.jsxs("div", { "data-slot": "field-separator", "data-content": !!children, className: cn.cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className), ...props, children: [jsxRuntime.jsx(separator.Separator, { className: "absolute inset-0 top-1/2" }), children && (jsxRuntime.jsx("span", { className: "relative mx-auto block w-fit bg-background px-2 text-muted-foreground", "data-slot": "field-separator-content", children: children }))] }));
+}
+function FieldError({ className, children, errors, ...props }) {
+    const content = React.useMemo(() => {
+        if (children) {
+            return children;
+        }
+        if (!errors?.length) {
+            return null;
+        }
+        const uniqueErrors = [
+            ...new Map(errors.map((error) => [error?.message, error])).values(),
+        ];
+        if (uniqueErrors?.length == 1) {
+            return uniqueErrors[0]?.message;
+        }
+        return (jsxRuntime.jsx("ul", { className: "ml-4 flex list-disc flex-col gap-1", children: uniqueErrors.map((error, index) => error?.message && jsxRuntime.jsx("li", { children: error.message }, index)) }));
+    }, [children, errors]);
+    if (!content) {
+        return null;
+    }
+    return (jsxRuntime.jsx("div", { role: "alert", "data-slot": "field-error", className: cn.cn("text-sm font-normal text-destructive", className), ...props, children: content }));
+}
+
+exports.Field = Field;
+exports.FieldContent = FieldContent;
+exports.FieldDescription = FieldDescription;
+exports.FieldError = FieldError;
+exports.FieldGroup = FieldGroup;
+exports.FieldLabel = FieldLabel;
+exports.FieldLegend = FieldLegend;
+exports.FieldSeparator = FieldSeparator;
+exports.FieldSet = FieldSet;
+exports.FieldTitle = FieldTitle;

package/dist/cjs/components/hover-card.cjs

@@ -0,0 +1,20 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var previewCard = require('@base-ui/react/preview-card');
+var cn = require('cn');
+
+function HoverCard({ ...props }) {
+    return jsxRuntime.jsx(previewCard.PreviewCard.Root, { "data-slot": "hover-card", ...props });
+}
+function HoverCardTrigger({ ...props }) {
+    return (jsxRuntime.jsx(previewCard.PreviewCard.Trigger, { "data-slot": "hover-card-trigger", ...props }));
+}
+function HoverCardContent({ className, side = "bottom", sideOffset = 4, align = "center", alignOffset = 4, ...props }) {
+    return (jsxRuntime.jsx(previewCard.PreviewCard.Portal, { "data-slot": "hover-card-portal", children: jsxRuntime.jsx(previewCard.PreviewCard.Positioner, { align: align, alignOffset: alignOffset, side: side, sideOffset: sideOffset, className: "isolate z-50", children: jsxRuntime.jsx(previewCard.PreviewCard.Popup, { "data-slot": "hover-card-content", className: cn.cn("z-50 w-64 origin-(--transform-origin) rounded-lg bg-popover p-2.5 text-sm text-popover-foreground shadow-md ring-1 ring-foreground/10 outline-hidden duration-100 data-[side=bottom]:slide-in-from-top-2 data-[side=inline-end]:slide-in-from-left-2 data-[side=inline-start]:slide-in-from-right-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", className), ...props }) }) }));
+}
+
+exports.HoverCard = HoverCard;
+exports.HoverCardContent = HoverCardContent;
+exports.HoverCardTrigger = HoverCardTrigger;

package/dist/cjs/components/input-group.cjs

@@ -0,0 +1,66 @@
+"use client";
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+var cn = require('cn');
+var button = require('./button.cjs');
+var input = require('./input.cjs');
+var textarea = require('./textarea.cjs');
+
+function InputGroup({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "input-group", role: "group", className: cn.cn("group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5", className), ...props }));
+}
+const inputGroupAddonVariants = classVarianceAuthority.cva("flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium text-muted-foreground select-none group-data-[disabled=true]/input-group:opacity-50 [&>kbd]:rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-4", {
+    variants: {
+        align: {
+            "inline-start": "order-first pl-2 has-[>button]:ml-[-0.3rem] has-[>kbd]:ml-[-0.15rem]",
+            "inline-end": "order-last pr-2 has-[>button]:mr-[-0.3rem] has-[>kbd]:mr-[-0.15rem]",
+            "block-start": "order-first w-full justify-start px-2.5 pt-2 group-has-[>input]/input-group:pt-2 [.border-b]:pb-2",
+            "block-end": "order-last w-full justify-start px-2.5 pb-2 group-has-[>input]/input-group:pb-2 [.border-t]:pt-2",
+        },
+    },
+    defaultVariants: {
+        align: "inline-start",
+    },
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+    return (jsxRuntime.jsx("div", { role: "group", "data-slot": "input-group-addon", "data-align": align, className: cn.cn(inputGroupAddonVariants({ align }), className), onClick: (e) => {
+            if (e.target.closest("button")) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector("input")?.focus();
+        }, ...props }));
+}
+const inputGroupButtonVariants = classVarianceAuthority.cva("flex items-center gap-2 text-sm shadow-none", {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-3px)] px-1.5 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: "",
+            "icon-xs": "size-6 rounded-[calc(var(--radius)-3px)] p-0 has-[>svg]:p-0",
+            "icon-sm": "size-8 p-0 has-[>svg]:p-0",
+        },
+    },
+    defaultVariants: {
+        size: "xs",
+    },
+});
+function InputGroupButton({ className, type = "button", variant = "ghost", size = "xs", ...props }) {
+    return (jsxRuntime.jsx(button.Button, { type: type, "data-size": size, variant: variant, className: cn.cn(inputGroupButtonVariants({ size }), className), ...props }));
+}
+function InputGroupText({ className, ...props }) {
+    return (jsxRuntime.jsx("span", { className: cn.cn("flex items-center gap-2 text-sm text-muted-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className), ...props }));
+}
+function InputGroupInput({ className, ...props }) {
+    return (jsxRuntime.jsx(input.Input, { "data-slot": "input-group-control", className: cn.cn("flex-1 rounded-none border-0 bg-transparent shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className), ...props }));
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (jsxRuntime.jsx(textarea.Textarea, { "data-slot": "input-group-control", className: cn.cn("flex-1 resize-none rounded-none border-0 bg-transparent py-2 shadow-none ring-0 focus-visible:ring-0 disabled:bg-transparent aria-invalid:ring-0 dark:bg-transparent dark:disabled:bg-transparent", className), ...props }));
+}
+
+exports.InputGroup = InputGroup;
+exports.InputGroupAddon = InputGroupAddon;
+exports.InputGroupButton = InputGroupButton;
+exports.InputGroupInput = InputGroupInput;
+exports.InputGroupText = InputGroupText;
+exports.InputGroupTextarea = InputGroupTextarea;

package/dist/cjs/components/input-otp.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+var cn = require('cn');
+var inputOtp = require('input-otp');
+var lucideReact = require('lucide-react');
+
+function _interopNamespaceDefault(e) {
+    var n = Object.create(null);
+    if (e) {
+        Object.keys(e).forEach(function (k) {
+            if (k !== 'default') {
+                var d = Object.getOwnPropertyDescriptor(e, k);
+                Object.defineProperty(n, k, d.get ? d : {
+                    enumerable: true,
+                    get: function () { return e[k]; }
+                });
+            }
+        });
+    }
+    n.default = e;
+    return Object.freeze(n);
+}
+
+var React__namespace = /*#__PURE__*/_interopNamespaceDefault(React);
+
+function InputOTP({ className, containerClassName, ...props }) {
+    return (jsxRuntime.jsx(inputOtp.OTPInput, { "data-slot": "input-otp", containerClassName: cn.cn("cn-input-otp flex items-center has-disabled:opacity-50", containerClassName), spellCheck: false, className: cn.cn("disabled:cursor-not-allowed", className), ...props }));
+}
+function InputOTPGroup({ className, ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "input-otp-group", className: cn.cn("flex items-center rounded-lg has-aria-invalid:border-destructive has-aria-invalid:ring-3 has-aria-invalid:ring-destructive/20 dark:has-aria-invalid:ring-destructive/40", className), ...props }));
+}
+function InputOTPSlot({ index, className, ...props }) {
+    const inputOTPContext = React__namespace.useContext(inputOtp.OTPInputContext);
+    const { char, hasFakeCaret, isActive } = inputOTPContext?.slots[index] ?? {};
+    return (jsxRuntime.jsxs("div", { "data-slot": "input-otp-slot", "data-active": isActive, className: cn.cn("relative flex size-8 items-center justify-center border-y border-r border-input text-sm transition-all outline-none first:rounded-l-lg first:border-l last:rounded-r-lg aria-invalid:border-destructive data-[active=true]:z-10 data-[active=true]:border-ring data-[active=true]:ring-3 data-[active=true]:ring-ring/50 data-[active=true]:aria-invalid:border-destructive data-[active=true]:aria-invalid:ring-destructive/20 dark:bg-input/30 dark:data-[active=true]:aria-invalid:ring-destructive/40", className), ...props, children: [char, hasFakeCaret && (jsxRuntime.jsx("div", { className: "pointer-events-none absolute inset-0 flex items-center justify-center", children: jsxRuntime.jsx("div", { className: "h-4 w-px animate-caret-blink bg-foreground duration-1000" }) }))] }));
+}
+function InputOTPSeparator({ ...props }) {
+    return (jsxRuntime.jsx("div", { "data-slot": "input-otp-separator", className: "flex items-center [&_svg:not([class*='size-'])]:size-4", role: "separator", ...props, children: jsxRuntime.jsx(lucideReact.MinusIcon, {}) }));
+}
+
+exports.InputOTP = InputOTP;
+exports.InputOTPGroup = InputOTPGroup;
+exports.InputOTPSeparator = InputOTPSeparator;
+exports.InputOTPSlot = InputOTPSlot;