art-bd-ui 1.0.0

package/dist/esm/components/popovers/drawer/drawer.js

@@ -0,0 +1,74 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Drawer as Drawer$1 } from 'vaul';
+import { cn } from '../../../lib/utils.js';
+
+const Drawer = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Drawer$1.Root, Object.assign({ "data-slot": "drawer" }, props));
+};
+const DrawerPortal = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Drawer$1.Portal, Object.assign({ "data-slot": "drawer-portal" }, props));
+};
+const DrawerClose = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Drawer$1.Close, Object.assign({ "data-slot": "drawer-close" }, props));
+};
+const DrawerOverlay = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Drawer$1.Overlay, Object.assign({ "data-slot": "drawer-overlay", className: cn("fixed inset-0 z-50 bg-black/50", [
+            "data-[state=open]:animate-in",
+            "data-[state=open]:fade-in-0",
+            "data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0",
+        ], className) }, props)));
+};
+const DrawerContent = (_a) => {
+    var { children, className } = _a, props = __rest(_a, ["children", "className"]);
+    return (jsxs(DrawerPortal, { children: [jsx(DrawerOverlay, {}), jsxs(Drawer$1.Content, Object.assign({ "data-slot": "drawer-content", className: cn("group/drawer-content bg-background fixed z-50 flex h-auto flex-col", [
+                    "data-[vaul-drawer-direction=top]:inset-x-0",
+                    "data-[vaul-drawer-direction=top]:top-0",
+                    "data-[vaul-drawer-direction=top]:mb-24",
+                    "data-[vaul-drawer-direction=top]:max-h-[80vh]",
+                    "data-[vaul-drawer-direction=top]:rounded-b-lg",
+                    "data-[vaul-drawer-direction=top]:border-b",
+                ], [
+                    "data-[vaul-drawer-direction=bottom]:inset-x-0",
+                    "data-[vaul-drawer-direction=bottom]:bottom-0",
+                    "data-[vaul-drawer-direction=bottom]:mt-24",
+                    "data-[vaul-drawer-direction=bottom]:max-h-[80vh]",
+                    "data-[vaul-drawer-direction=bottom]:rounded-t-lg",
+                    "data-[vaul-drawer-direction=bottom]:border-t",
+                ], [
+                    "data-[vaul-drawer-direction=right]:inset-y-0",
+                    "data-[vaul-drawer-direction=right]:right-0",
+                    "data-[vaul-drawer-direction=right]:w-3/4",
+                    "data-[vaul-drawer-direction=right]:border-l",
+                    "data-[vaul-drawer-direction=right]:sm:max-w-sm",
+                ], [
+                    "data-[vaul-drawer-direction=left]:inset-y-0",
+                    "data-[vaul-drawer-direction=left]:left-0",
+                    "data-[vaul-drawer-direction=left]:w-3/4",
+                    "data-[vaul-drawer-direction=left]:border-r",
+                    "data-[vaul-drawer-direction=left]:sm:max-w-sm",
+                ], className) }, props, { children: [jsx("div", { className: "bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" }), children] }))] }));
+};
+const DrawerHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return jsx("div", Object.assign({ "data-slot": "drawer-header", className: cn("flex flex-col gap-1.5 p-4", className) }, props));
+};
+const DrawerFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return jsx("div", Object.assign({ "data-slot": "drawer-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className) }, props));
+};
+const DrawerTitle = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Drawer$1.Title, Object.assign({ "data-slot": "drawer-title", className: cn("text-foreground font-semibold", className) }, props)));
+};
+const DrawerDescription = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Drawer$1.Description, Object.assign({ "data-slot": "drawer-description", className: cn("text-muted-foreground text-sm", className) }, props)));
+};
+
+export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerTitle };

package/dist/esm/components/popovers/popover/popover.js

@@ -0,0 +1,61 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Root, Trigger, Portal, Content, Close, Arrow, Anchor } from '@radix-ui/react-popover';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const popoverContentVariants = cva([
+    "bg-popover text-popover-foreground z-50 w-72 rounded-md border p-4 shadow-md outline-hidden",
+    "origin-(--radix-popover-content-transform-origin)",
+], {
+    variants: {
+        size: {
+            default: "w-72",
+            sm: "w-56",
+            lg: "w-96",
+        },
+    },
+    defaultVariants: {
+        size: "default",
+    },
+});
+const popoverCloseVariants = cva([
+    "ring-offset-background rounded-xs opacity-70 hover:opacity-100 transition-opacity",
+    "disabled:pointer-events-none",
+    "absolute top-4 right-4",
+    "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
+]);
+const Popover = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Root, Object.assign({ "data-slot": "popover" }, props));
+};
+const PopoverTrigger = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Trigger, Object.assign({ "data-slot": "popover-trigger" }, props));
+};
+const PopoverContent = (_a) => {
+    var { className, align = "center", arrow = false, withClose = false, sideOffset = 4, size, children } = _a, props = __rest(_a, ["className", "align", "arrow", "withClose", "sideOffset", "size", "children"]);
+    return (jsx(Portal, { children: jsxs(Content, Object.assign({ "data-slot": "popover-content", align: align, sideOffset: sideOffset, className: cn(popoverContentVariants({ size }), [
+                "data-[state=open]:animate-in",
+                "data-[state=open]:fade-in-0",
+                "data-[state=open]:zoom-in-95",
+                "data-[state=closed]:animate-out",
+                "data-[state=closed]:fade-out-0",
+                "data-[state=closed]:zoom-out-95",
+                "data-[side=top]:slide-in-from-bottom-2",
+                "data-[side=right]:slide-in-from-left-2",
+                "data-[side=bottom]:slide-in-from-top-2",
+                "data-[side=left]:slide-in-from-right-2",
+            ], className) }, props, { children: [children, withClose && (jsx(Close, { className: cn(popoverCloseVariants), "aria-label": "Close", children: jsx(Icon, { name: "x", size: 16 }) })), arrow && jsx(Arrow, { className: "fill-popover" })] })) }));
+};
+const PopoverAnchor = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Anchor, Object.assign({ "data-slot": "popover-anchor" }, props));
+};
+PopoverTrigger.displayName = "PopoverTrigger";
+PopoverContent.displayName = "PopoverContent";
+PopoverAnchor.displayName = "PopoverAnchor";
+Popover.displayName = "Popover";
+
+export { Popover, PopoverAnchor, PopoverContent, PopoverTrigger };

package/dist/esm/components/popovers/sheet/sheet.js

@@ -0,0 +1,86 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Root, Close, Content, Title, Description, Portal, Overlay } from '@radix-ui/react-dialog';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const Sheet = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Root, Object.assign({ "data-slot": "sheet" }, props));
+};
+const SheetPortal = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Portal, Object.assign({ "data-slot": "sheet-portal" }, props));
+};
+const SheetClose = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Close, Object.assign({ "data-slot": "sheet-close" }, props));
+};
+const SheetOverlay = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Overlay, Object.assign({ "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/50", [
+            "data-[state=open]:animate-in",
+            "data-[state=open]:fade-in-0",
+            "data-[state=closed]:animate-out",
+            "data-[state=closed]:fade-out-0",
+        ], className) }, props)));
+};
+const contentVariants = cva([
+    "bg-background fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out",
+    "data-[state=open]:animate-in data-[state=open]:duration-500",
+    "data-[state=closed]:animate-out data-[state=closed]:duration-300",
+], {
+    variants: {
+        side: {
+            top: [
+                "inset-x-0 top-0 h-auto border-b",
+                "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+            ],
+            right: [
+                "inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+                "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right",
+            ],
+            bottom: [
+                "inset-x-0 bottom-0 h-auto border-t",
+                "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
+            ],
+            left: [
+                "inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+                "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left",
+            ],
+        },
+    },
+    defaultVariants: {
+        side: "right",
+    },
+});
+const closeVariants = cva([
+    "ring-offset-background absolute top-4 right-4 rounded-xs",
+    "opacity-70 transition-opacity hover:opacity-100",
+    "disabled:pointer-events-none",
+    "data-[state=open]:bg-secondary",
+    "focus:ring-ring focus:ring-2 focus:ring-offset-2 focus:outline-hidden",
+]);
+const SheetContent = (_a) => {
+    var { className, children, side = "right" } = _a, props = __rest(_a, ["className", "children", "side"]);
+    return (jsxs(SheetPortal, { children: [jsx(SheetOverlay, {}), jsxs(Content, Object.assign({ "data-slot": "sheet-content", className: cn(contentVariants({ side }), className) }, props, { children: [children, jsxs(Close, { className: closeVariants(), children: [jsx(Icon, { name: "x", size: 16 }), jsx("span", { className: "sr-only", children: "Close" })] })] }))] }));
+};
+const SheetHeader = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return jsx("div", Object.assign({ "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className) }, props));
+};
+const SheetFooter = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return jsx("div", Object.assign({ "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className) }, props));
+};
+const SheetTitle = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return jsx(Title, Object.assign({ "data-slot": "sheet-title", className: cn("text-foreground font-semibold", className) }, props));
+};
+const SheetDescription = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Description, Object.assign({ "data-slot": "sheet-description", className: cn("text-muted-foreground text-sm", className) }, props)));
+};
+
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle };

package/dist/esm/components/popovers/toast/toast.js

@@ -0,0 +1,67 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Viewport, Root, Action, Close, Title, Description, Provider } from '@radix-ui/react-toast';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const ToastProvider = Provider;
+const ToastViewport = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Viewport, Object.assign({ ref: ref, "data-slot": "toast-viewport", className: cn("fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4", "sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]", className) }, props)));
+});
+ToastViewport.displayName = "ToastViewport";
+const toastVariants = cva("group pointer-events-auto relative flex w-full items-center justify-between space-x-2 overflow-hidden rounded-md border p-4 pr-6 shadow-lg transition-all", {
+    variants: {
+        variant: {
+            default: "border bg-background text-foreground",
+            destructive: "destructive group border-destructive bg-destructive text-destructive-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const Toast = forwardRef((_a, ref) => {
+    var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
+    return (jsx(Root, Object.assign({ ref: ref, "data-slot": "toast", className: cn(toastVariants({ variant }), 
+        // Animation states
+        "data-[swipe=cancel]:translate-x-0", "data-[swipe=end]:translate-x-[var(--radix-toast-swipe-end-x)]", "data-[swipe=move]:translate-x-[var(--radix-toast-swipe-move-x)]", "data-[swipe=move]:transition-none", 
+        // Open/Close animations
+        "data-[state=open]:animate-in", "data-[state=closed]:animate-out", "data-[swipe=end]:animate-out", "data-[state=closed]:fade-out-80", "data-[state=closed]:slide-out-to-right-full", "data-[state=open]:slide-in-from-top-full", "data-[state=open]:sm:slide-in-from-bottom-full", className) }, props)));
+});
+Toast.displayName = "Toast";
+const ToastAction = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Action, Object.assign({ ref: ref, "data-slot": "toast-action", className: cn(
+        // Base styles
+        "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium", "transition-colors hover:bg-secondary", "focus:outline-none focus:ring-1 focus:ring-ring", "disabled:pointer-events-none disabled:opacity-50", 
+        // Destructive variant styles
+        "group-[.destructive]:border-muted/40", "group-[.destructive]:hover:border-destructive/30", "group-[.destructive]:hover:bg-destructive", "group-[.destructive]:hover:text-destructive-foreground", "group-[.destructive]:focus:ring-destructive", className) }, props)));
+});
+ToastAction.displayName = "ToastAction";
+const ToastClose = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Close, Object.assign({ ref: ref, "data-slot": "toast-close", className: cn(
+        // Position and layout
+        "absolute right-1 top-1 rounded-md p-1", 
+        // Text and opacity
+        "text-foreground/50 opacity-0 transition-opacity", "hover:text-foreground", "focus:opacity-100 focus:outline-none focus:ring-1", "group-hover:opacity-100", 
+        // Destructive variant styles
+        "group-[.destructive]:text-red-300", "group-[.destructive]:hover:text-red-50", "group-[.destructive]:focus:ring-red-400", "group-[.destructive]:focus:ring-offset-red-600", className), "toast-close": "" }, props, { children: jsx(Icon, { name: "x", className: "size-4" }) })));
+});
+ToastClose.displayName = "ToastClose";
+const ToastTitle = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Title, Object.assign({ ref: ref, "data-slot": "toast-title", className: cn("text-sm font-semibold", "[&+div]:text-xs", className) }, props)));
+});
+ToastTitle.displayName = "ToastTitle";
+const ToastDescription = forwardRef((_a, ref) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Description, Object.assign({ ref: ref, "data-slot": "toast-description", className: cn("text-sm opacity-90", className) }, props)));
+});
+ToastDescription.displayName = "ToastDescription";
+
+export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport };

package/dist/esm/components/popovers/tooltip/tooltip.js

@@ -0,0 +1,40 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Root, Trigger, Portal, Content, Arrow, Provider } from '@radix-ui/react-tooltip';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+
+const TooltipProvider = (_a) => {
+    var { delayDuration = 0 } = _a, props = __rest(_a, ["delayDuration"]);
+    return jsx(Provider, Object.assign({ "data-slot": "tooltip-provider", delayDuration: delayDuration }, props));
+};
+const TooltipTrigger = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Trigger, Object.assign({ "data-slot": "tooltip-trigger" }, props));
+};
+const contentVariants = cva([
+    "bg-primary text-primary-foreground w-fit px-3 py-1.5 rounded-md text-xs text-balance",
+    "animate-in fade-in-0 zoom-in-95 z-50",
+    "data-[state=closed]:animate-out",
+    "data-[state=closed]:fade-out-0",
+    "data-[state=closed]:zoom-out-95",
+    "data-[side=top]:slide-in-from-bottom-2",
+    "data-[side=right]:slide-in-from-left-2",
+    "data-[side=bottom]:slide-in-from-top-2",
+    "data-[side=left]:slide-in-from-right-2",
+    "origin-(--radix-tooltip-content-transform-origin)",
+]);
+const TooltipContent = (_a) => {
+    var { className, sideOffset = 0, arrow = false, children } = _a, props = __rest(_a, ["className", "sideOffset", "arrow", "children"]);
+    return (jsx(Portal, { "data-slot": "tooltip-portal", children: jsxs(Content, Object.assign({ "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn(contentVariants(), className) }, props, { children: [children, arrow && (jsx(Arrow, { className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" }))] })) }));
+};
+const Tooltip = (_a) => {
+    var { skipDelayDuration, delayDuration, disableHoverableContent } = _a, props = __rest(_a, ["skipDelayDuration", "delayDuration", "disableHoverableContent"]);
+    return (jsx(TooltipProvider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, skipDelayDuration: skipDelayDuration, disableHoverableContent: disableHoverableContent, children: jsx(Root, Object.assign({ "data-slot": "tooltip" }, props)) }));
+};
+Tooltip.displayName = "Tooltip";
+TooltipContent.displayName = "TooltipContent";
+TooltipTrigger.displayName = "TooltipTrigger";
+TooltipProvider.displayName = "TooltipProvider";
+
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/esm/components/typography/heading/heading.js

@@ -0,0 +1,53 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { textColors, textAlignment, fontWeights } from '../../../styles/typography.js';
+
+const headingVariants = cva("tracking-tight", {
+    variants: {
+        level: {
+            1: "text-2xl leading-[1.1] sm:text-3xl md:text-4xl lg:text-5xl",
+            2: "text-xl leading-[1.1] sm:text-2xl md:text-3xl lg:text-4xl",
+            3: "text-lg leading-[1.1] sm:text-xl md:text-2xl lg:text-3xl",
+            4: "text-base leading-[1.1] sm:text-lg md:text-xl lg:text-2xl",
+            5: "text-sm leading-[1.1] sm:text-base md:text-lg lg:text-xl",
+            6: "text-xs leading-[1.1] sm:text-sm md:text-base lg:text-lg",
+        },
+        weight: {
+            light: fontWeights.light,
+            regular: fontWeights.regular,
+            medium: fontWeights.medium,
+            bold: fontWeights.bold,
+        },
+        align: {
+            left: textAlignment.left,
+            center: textAlignment.center,
+            right: textAlignment.right,
+        },
+        color: {
+            default: textColors.default,
+            muted: textColors.muted,
+            primary: textColors.primary,
+            secondary: textColors.secondary,
+            accent: textColors.accent,
+            destructive: textColors.destructive,
+        },
+    },
+    defaultVariants: {
+        level: 1,
+        weight: "bold",
+        align: "left",
+        color: "default",
+    },
+});
+const Heading = forwardRef((_a, ref) => {
+    var { level = 1, weight, align, color, asChild = false, className } = _a, props = __rest(_a, ["level", "weight", "align", "color", "asChild", "className"]);
+    const Tag = asChild ? Slot : `h${level}`;
+    return (jsx(Tag, Object.assign({ ref: ref, "data-slot": "heading", className: cn(headingVariants({ level, weight, align, color }), className) }, props)));
+});
+Heading.displayName = "Heading";
+
+export { Heading };

package/dist/esm/components/typography/text/text.js

@@ -0,0 +1,55 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { textColors, textAlignment, fontWeights } from '../../../styles/typography.js';
+
+const textVariants = cva("", {
+    variants: {
+        type: {
+            body: "text-sm leading-5 sm:text-base md:text-lg lg:text-xl",
+            small: "text-xs leading-4 sm:text-sm md:text-base lg:text-lg",
+            tiny: "text-[10px] leading-3 sm:text-xs md:text-sm lg:text-base",
+        },
+        weight: {
+            light: fontWeights.light,
+            regular: fontWeights.regular,
+            medium: fontWeights.medium,
+            bold: fontWeights.bold,
+        },
+        align: {
+            left: textAlignment.left,
+            center: textAlignment.center,
+            right: textAlignment.right,
+        },
+        color: {
+            default: textColors.default,
+            muted: textColors.muted,
+            primary: textColors.primary,
+            secondary: textColors.secondary,
+            accent: textColors.accent,
+            destructive: textColors.destructive,
+        },
+        truncate: {
+            true: "truncate",
+            false: "",
+        },
+    },
+    defaultVariants: {
+        type: "body",
+        weight: "regular",
+        align: "left",
+        color: "default",
+        truncate: false,
+    },
+});
+const Text = forwardRef((_a, ref) => {
+    var { asChild = false, className } = _a, props = __rest(_a, ["asChild", "className"]);
+    const Comp = asChild ? Slot : "span";
+    return jsx(Comp, Object.assign({ ref: ref, "data-slot": "text", className: cn(textVariants(props), className) }, props));
+});
+Text.displayName = "Text";
+
+export { Text };

package/dist/esm/components/ui/alert/alert.js

@@ -0,0 +1,30 @@
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+
+const alertVariants = cva("relative w-full rounded-lg border px-4 py-3 text-sm grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+    variants: {
+        variant: {
+            default: "bg-card text-card-foreground",
+            destructive: "text-destructive bg-card [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function Alert(_a) {
+    var { className, variant } = _a, props = __rest(_a, ["className", "variant"]);
+    return jsx("div", Object.assign({ "data-slot": "alert", role: "alert", className: cn(alertVariants({ variant }), className) }, props));
+}
+function AlertTitle(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ "data-slot": "alert-title", className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className) }, props)));
+}
+function AlertDescription(_a) {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("div", Object.assign({ "data-slot": "alert-description", className: cn("text-muted-foreground col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed", className) }, props)));
+}
+
+export { Alert, AlertDescription, AlertTitle };

package/dist/esm/components/ui/badge/badge.js

@@ -0,0 +1,28 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { Slot } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+
+const badgeVariants = cva("inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+    variants: {
+        variant: {
+            default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
+            secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
+            destructive: "border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+const Badge = (_a) => {
+    var { className, variant, asChild = false } = _a, props = __rest(_a, ["className", "variant", "asChild"]);
+    const Comp = asChild ? Slot : "span";
+    return jsx(Comp, Object.assign({ "data-slot": "badge", className: cn(badgeVariants({ variant }), className) }, props));
+};
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };

package/dist/esm/components/ui/button/button.js

@@ -0,0 +1,40 @@
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import { Slot, Slottable } from '@radix-ui/react-slot';
+import { cva } from 'class-variance-authority';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../icon/icon.js';
+
+const buttonVariants = cva("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive", {
+    variants: {
+        variant: {
+            default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
+            destructive: "bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+            outline: "border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
+            ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+            link: "text-primary underline-offset-4 hover:underline",
+        },
+        size: {
+            default: "h-9 px-4 py-2 has-[>svg]:px-3",
+            sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+            lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+            icon: "size-9",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+const Button = forwardRef((_a, ref) => {
+    var { className, variant, size, asChild = false, loading, children, leftIcon, rightIcon } = _a, props = __rest(_a, ["className", "variant", "size", "asChild", "loading", "children", "leftIcon", "rightIcon"]);
+    const Comp = asChild ? Slot : "button";
+    const leftElement = loading ? (jsx(Icon, { name: "loader-2", className: "animate-spin" })) : (leftIcon && jsx(Icon, { name: leftIcon }));
+    const rightElement = rightIcon && jsx(Icon, { name: rightIcon });
+    return (jsxs(Comp, Object.assign({ ref: ref, "data-slot": "button", className: cn(buttonVariants({ variant, size }), className) }, props, { children: [leftElement, jsx(Slottable, { children: children }), rightElement] })));
+});
+Button.displayName = "Button";
+
+export { Button };

package/dist/esm/components/ui/calendar/calendar.js

@@ -0,0 +1,22 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx } from 'react/jsx-runtime';
+import { DayPicker } from 'react-day-picker';
+import { cn } from '../../../lib/utils.js';
+import { Icon } from '../../media/icon/icon.js';
+import { buttonVariants } from '../../buttons/button/button.js';
+
+function Calendar(_a) {
+    var { className, classNames, showOutsideDays = true } = _a, props = __rest(_a, ["className", "classNames", "showOutsideDays"]);
+    return (jsx(DayPicker, Object.assign({ showOutsideDays: showOutsideDays, className: cn("p-3", className), classNames: Object.assign({ months: "flex flex-col sm:flex-row space-y-4 sm:space-x-4 sm:space-y-0", month: "space-y-4", caption: "flex justify-center pt-1 relative items-center", caption_label: "text-sm font-medium", nav: "space-x-1 flex items-center", nav_button: cn(buttonVariants({ variant: "outline" }), "h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100"), nav_button_previous: "absolute left-1", nav_button_next: "absolute right-1", table: "w-full border-collapse space-y-1", head_row: "flex", head_cell: "text-muted-foreground rounded-md w-8 font-normal text-[0.8rem]", row: "flex w-full mt-2", cell: cn("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-outside)]:bg-accent/50 [&:has([aria-selected].day-range-end)]:rounded-r-md", props.mode === "range"
+                ? "[&:has(>.day-range-end)]:rounded-r-md [&:has(>.day-range-start)]:rounded-l-md first:[&:has([aria-selected])]:rounded-l-md last:[&:has([aria-selected])]:rounded-r-md"
+                : "[&:has([aria-selected])]:rounded-md"), day: cn(buttonVariants({ variant: "ghost" }), "h-8 w-8 p-0 font-normal aria-selected:opacity-100"), day_range_start: "day-range-start", day_range_end: "day-range-end", day_selected: "bg-primary text-primary-foreground hover:bg-primary hover:text-primary-foreground focus:bg-primary focus:text-primary-foreground", day_today: "bg-accent text-accent-foreground", day_outside: "day-outside text-muted-foreground aria-selected:bg-accent/50 aria-selected:text-muted-foreground", day_disabled: "text-muted-foreground opacity-50", day_range_middle: "aria-selected:bg-accent aria-selected:text-accent-foreground", day_hidden: "invisible" }, classNames), components: {
+            Chevron: (_a) => {
+                var { className, orientation } = _a, props = __rest(_a, ["className", "orientation"]);
+                return (jsx(Icon, Object.assign({ name: `chevron-${orientation}`, className: cn("h-4 w-4", className) }, props)));
+            },
+        } }, props)));
+}
+Calendar.displayName = "Calendar";
+
+export { Calendar };

package/dist/esm/components/ui/command/command.js

@@ -0,0 +1,73 @@
+"use client";
+import { __rest } from 'tslib';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { Command as Command$1 } from 'cmdk';
+import { cn } from '../../../lib/utils.js';
+import { Dialog, DialogHeader, DialogTitle, DialogDescription, DialogContent } from '../../popovers/dialog/dialog.js';
+import { Icon } from '../../media/icon/icon.js';
+
+const Command = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Command$1, Object.assign({ "data-slot": "command", className: cn("flex h-full w-full flex-col overflow-hidden rounded-md", "bg-popover text-popover-foreground", className) }, props)));
+};
+Command.displayName = "Command";
+const CommandDialog = (_a) => {
+    var { title = "Command Palette", description = "Search for a command to run...", children } = _a, props = __rest(_a, ["title", "description", "children"]);
+    return (jsxs(Dialog, Object.assign({}, props, { children: [jsxs(DialogHeader, { className: "sr-only", children: [jsx(DialogTitle, { children: title }), jsx(DialogDescription, { children: description })] }), jsx(DialogContent, { className: "overflow-hidden p-0", children: jsx(Command, { className: cn(
+                    // Group heading styles
+                    "[&_[cmdk-group-heading]]:text-muted-foreground", "[&_[cmdk-group-heading]]:px-2", "[&_[cmdk-group-heading]]:font-medium", 
+                    // Group styles
+                    "[&_[cmdk-group]]:px-2", "[&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0", 
+                    // Input wrapper styles
+                    "**:data-[slot=command-input-wrapper]:h-12", "[&_[cmdk-input-wrapper]_svg]:h-5", "[&_[cmdk-input-wrapper]_svg]:w-5", 
+                    // Input styles
+                    "[&_[cmdk-input]]:h-12", 
+                    // Item styles
+                    "[&_[cmdk-item]]:px-2", "[&_[cmdk-item]]:py-3", "[&_[cmdk-item]_svg]:h-5", "[&_[cmdk-item]_svg]:w-5"), children: children }) })] })));
+};
+CommandDialog.displayName = "CommandDialog";
+const CommandInput = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsxs("div", { "data-slot": "command-input-wrapper", className: "flex h-9 items-center gap-2 border-b px-3", children: [jsx(Icon, { name: "search", className: "size-4 shrink-0 opacity-50" }), jsx(Command$1.Input, Object.assign({ "data-slot": "command-input", className: cn("flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden", "placeholder:text-muted-foreground", "disabled:cursor-not-allowed disabled:opacity-50", className) }, props))] }));
+};
+CommandInput.displayName = "CommandInput";
+const CommandList = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Command$1.List, Object.assign({ "data-slot": "command-list", className: cn("max-h-[300px] overflow-x-hidden overflow-y-auto", "scroll-py-1", className) }, props)));
+};
+CommandList.displayName = "CommandList";
+const CommandEmpty = (_a) => {
+    var props = __rest(_a, []);
+    return jsx(Command$1.Empty, Object.assign({ "data-slot": "command-empty", className: "py-6 text-center text-sm" }, props));
+};
+CommandEmpty.displayName = "CommandEmpty";
+const CommandGroup = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Command$1.Group, Object.assign({ "data-slot": "command-group", className: cn("overflow-hidden p-1", "text-foreground", 
+        // Group heading styles
+        "[&_[cmdk-group-heading]]:text-muted-foreground", "[&_[cmdk-group-heading]]:px-2", "[&_[cmdk-group-heading]]:py-1.5", "[&_[cmdk-group-heading]]:text-xs", "[&_[cmdk-group-heading]]:font-medium", className) }, props)));
+};
+CommandGroup.displayName = "CommandGroup";
+const CommandSeparator = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Command$1.Separator, Object.assign({ "data-slot": "command-separator", className: cn("bg-border -mx-1 h-px", className) }, props)));
+};
+CommandSeparator.displayName = "CommandSeparator";
+const CommandItem = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx(Command$1.Item, Object.assign({ "data-slot": "command-item", className: cn(
+        // Layout
+        "relative flex items-center gap-2 rounded-sm px-2 py-1.5", "text-sm outline-hidden select-none", 
+        // States
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground", "data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50", 
+        // Icon styles
+        "[&_svg:not([class*='text-'])]:text-muted-foreground", "[&_svg]:pointer-events-none", "[&_svg]:shrink-0", "[&_svg:not([class*='size-'])]:size-4", className) }, props)));
+};
+CommandItem.displayName = "CommandItem";
+const CommandShortcut = (_a) => {
+    var { className } = _a, props = __rest(_a, ["className"]);
+    return (jsx("span", Object.assign({ "data-slot": "command-shortcut", className: cn("ml-auto text-xs tracking-widest", "text-muted-foreground", className) }, props)));
+};
+CommandShortcut.displayName = "CommandShortcut";
+
+export { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut };