shadcn-packaged 2025.9.22 → 2025.10.6

package/index.d.ts

@@ -7,6 +7,7 @@
 /// <reference path="./ui/avatar.d.ts" />;
 /// <reference path="./ui/badge.d.ts" />;
 /// <reference path="./ui/breadcrumb.d.ts" />;
+/// <reference path="./ui/button-group.d.ts" />;
 /// <reference path="./ui/button.d.ts" />;
 /// <reference path="./ui/calendar.d.ts" />;
 /// <reference path="./ui/card.d.ts" />;
@@ -19,10 +20,15 @@
 /// <reference path="./ui/dialog.d.ts" />;
 /// <reference path="./ui/drawer.d.ts" />;
 /// <reference path="./ui/dropdown-menu.d.ts" />;
+/// <reference path="./ui/empty.d.ts" />;
+/// <reference path="./ui/field.d.ts" />;
 /// <reference path="./ui/form.d.ts" />;
 /// <reference path="./ui/hover-card.d.ts" />;
+/// <reference path="./ui/input-group.d.ts" />;
 /// <reference path="./ui/input-otp.d.ts" />;
 /// <reference path="./ui/input.d.ts" />;
+/// <reference path="./ui/item.d.ts" />;
+/// <reference path="./ui/kbd.d.ts" />;
 /// <reference path="./ui/label.d.ts" />;
 /// <reference path="./ui/menubar.d.ts" />;
 /// <reference path="./ui/navigation-menu.d.ts" />;
@@ -39,6 +45,7 @@
 /// <reference path="./ui/skeleton.d.ts" />;
 /// <reference path="./ui/slider.d.ts" />;
 /// <reference path="./ui/sonner.d.ts" />;
+/// <reference path="./ui/spinner.d.ts" />;
 /// <reference path="./ui/switch.d.ts" />;
 /// <reference path="./ui/table.d.ts" />;
 /// <reference path="./ui/tabs.d.ts" />;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "shadcn-packaged",
   "private": false,
-  "version": "2025.9.22",
+  "version": "2025.10.6",
   "type": "module",
   "module": "index.mjs",
   "scripts": {
@@ -57,7 +57,7 @@
     "input-otp": "^1.4.2",
     "next-themes": "^0.4.6",
     "react-day-picker": "^9.11.0",
-    "react-hook-form": "^7.63.0",
+    "react-hook-form": "^7.64.0",
     "react-resizable-panels": "^3.0.6",
     "recharts": "^2.15.4",
     "sonner": "^2.0.7",
@@ -74,7 +74,7 @@
     "lucide-react": "^0.544.0",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^3.4.17",
-    "tw-animate-css": "^1.3.8",
+    "tw-animate-css": "^1.4.0",
     "typescript": "~5.6.2"
   }
 }

package/ui/button-group.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+import { Separator } from "../ui/separator";
+declare const buttonGroupVariants: (props?: {
+    orientation?: "horizontal" | "vertical";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function ButtonGroup({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof buttonGroupVariants>): import("react").JSX.Element;
+declare function ButtonGroupText({ className, asChild, ...props }: React.ComponentProps<"div"> & {
+    asChild?: boolean;
+}): import("react").JSX.Element;
+declare function ButtonGroupSeparator({ className, orientation, ...props }: React.ComponentProps<typeof Separator>): import("react").JSX.Element;
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/ui/button-group.jsx

@@ -0,0 +1,26 @@
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Separator } from "../ui/separator";
+const buttonGroupVariants = cva("flex w-fit items-stretch has-[>[data-slot=button-group]]:gap-2 [&>*]:focus-visible:relative [&>*]:focus-visible:z-10 has-[select[aria-hidden=true]:last-child]:[&>[data-slot=select-trigger]:last-of-type]:rounded-r-md [&>[data-slot=select-trigger]:not([class*='w-'])]:w-fit [&>input]:flex-1", {
+    variants: {
+        orientation: {
+            horizontal: "[&>*:not(:first-child)]:rounded-l-none [&>*:not(:first-child)]:border-l-0 [&>*:not(:last-child)]:rounded-r-none",
+            vertical: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:first-child)]:border-t-0 [&>*:not(:last-child)]:rounded-b-none",
+        },
+    },
+    defaultVariants: {
+        orientation: "horizontal",
+    },
+});
+function ButtonGroup({ className, orientation, ...props }) {
+    return (<div role="group" data-slot="button-group" data-orientation={orientation} className={cn(buttonGroupVariants({ orientation }), className)} {...props}/>);
+}
+function ButtonGroupText({ className, asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "div";
+    return (<Comp className={cn("bg-muted shadow-xs flex items-center gap-2 rounded-md border px-4 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className)} {...props}/>);
+}
+function ButtonGroupSeparator({ className, orientation = "vertical", ...props }) {
+    return (<Separator data-slot="button-group-separator" orientation={orientation} className={cn("bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto", className)} {...props}/>);
+}
+export { ButtonGroup, ButtonGroupSeparator, ButtonGroupText, buttonGroupVariants, };

package/ui/empty.d.ts

@@ -0,0 +1,11 @@
+import { type VariantProps } from "class-variance-authority";
+declare function Empty({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare const emptyMediaVariants: (props?: {
+    variant?: "default" | "icon";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };

package/ui/empty.jsx

@@ -0,0 +1,32 @@
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+function Empty({ className, ...props }) {
+    return (<div data-slot="empty" className={cn("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12", className)} {...props}/>);
+}
+function EmptyHeader({ className, ...props }) {
+    return (<div data-slot="empty-header" className={cn("flex max-w-sm flex-col items-center gap-2 text-center", className)} {...props}/>);
+}
+const emptyMediaVariants = cva("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function EmptyMedia({ className, variant = "default", ...props }) {
+    return (<div data-slot="empty-icon" data-variant={variant} className={cn(emptyMediaVariants({ variant, className }))} {...props}/>);
+}
+function EmptyTitle({ className, ...props }) {
+    return (<div data-slot="empty-title" className={cn("text-lg font-medium tracking-tight", className)} {...props}/>);
+}
+function EmptyDescription({ className, ...props }) {
+    return (<div data-slot="empty-description" className={cn("text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4", className)} {...props}/>);
+}
+function EmptyContent({ className, ...props }) {
+    return (<div data-slot="empty-content" className={cn("flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm", className)} {...props}/>);
+}
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };

package/ui/field.d.ts

@@ -0,0 +1,24 @@
+import { type VariantProps } from "class-variance-authority";
+import { Label } from "../ui/label";
+declare function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">): import("react").JSX.Element;
+declare function FieldLegend({ className, variant, ...props }: React.ComponentProps<"legend"> & {
+    variant?: "legend" | "label";
+}): import("react").JSX.Element;
+declare function FieldGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare const fieldVariants: (props?: {
+    orientation?: "horizontal" | "vertical" | "responsive";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function Field({ className, orientation, ...props }: React.ComponentProps<"div"> & VariantProps<typeof fieldVariants>): import("react").JSX.Element;
+declare function FieldContent({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>): import("react").JSX.Element;
+declare function FieldTitle({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+declare function FieldDescription({ className, ...props }: React.ComponentProps<"p">): import("react").JSX.Element;
+declare function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & {
+    children?: React.ReactNode;
+}): import("react").JSX.Element;
+declare function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & {
+    errors?: Array<{
+        message?: string;
+    } | undefined>;
+}): import("react").JSX.Element;
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/ui/field.jsx

@@ -0,0 +1,81 @@
+"use client";
+import { useMemo } from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Label } from "../ui/label";
+import { Separator } from "../ui/separator";
+function FieldSet({ className, ...props }) {
+    return (<fieldset data-slot="field-set" className={cn("flex flex-col gap-6", "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className)} {...props}/>);
+}
+function FieldLegend({ className, variant = "legend", ...props }) {
+    return (<legend data-slot="field-legend" data-variant={variant} className={cn("mb-3 font-medium", "data-[variant=legend]:text-base", "data-[variant=label]:text-sm", className)} {...props}/>);
+}
+function FieldGroup({ className, ...props }) {
+    return (<div data-slot="field-group" className={cn("group/field-group @container/field-group flex w-full flex-col gap-7 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4", className)} {...props}/>);
+}
+const fieldVariants = cva("group/field data-[invalid=true]:text-destructive flex w-full gap-3", {
+    variants: {
+        orientation: {
+            vertical: ["flex-col [&>*]:w-full [&>.sr-only]:w-auto"],
+            horizontal: [
+                "flex-row items-center",
+                "[&>[data-slot=field-label]]:flex-auto",
+                "has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start",
+            ],
+            responsive: [
+                "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]:w-auto",
+                "@md/field-group:[&>[data-slot=field-label]]:flex-auto",
+                "@md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px",
+            ],
+        },
+    },
+    defaultVariants: {
+        orientation: "vertical",
+    },
+});
+function Field({ className, orientation = "vertical", ...props }) {
+    return (<div role="group" data-slot="field" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props}/>);
+}
+function FieldContent({ className, ...props }) {
+    return (<div data-slot="field-content" className={cn("group/field-content flex flex-1 flex-col gap-1.5 leading-snug", className)} {...props}/>);
+}
+function FieldLabel({ className, ...props }) {
+    return (<Label data-slot="field-label" className={cn("group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4", "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", className)} {...props}/>);
+}
+function FieldTitle({ className, ...props }) {
+    return (<div data-slot="field-label" className={cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug group-data-[disabled=true]/field:opacity-50", className)} {...props}/>);
+}
+function FieldDescription({ className, ...props }) {
+    return (<p data-slot="field-description" className={cn("text-muted-foreground text-sm font-normal leading-normal group-has-[[data-orientation=horizontal]]/field:text-balance", "nth-last-2:-mt-1 last:mt-0 [[data-variant=legend]+&]:-mt-1.5", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className)} {...props}/>);
+}
+function FieldSeparator({ children, className, ...props }) {
+    return (<div data-slot="field-separator" data-content={!!children} className={cn("relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2", className)} {...props}>
+      <Separator className="absolute inset-0 top-1/2"/>
+      {children && (<span className="bg-background text-muted-foreground relative mx-auto block w-fit px-2" data-slot="field-separator-content">
+          {children}
+        </span>)}
+    </div>);
+}
+function FieldError({ className, children, errors, ...props }) {
+    const content = useMemo(() => {
+        if (children) {
+            return children;
+        }
+        if (!errors) {
+            return null;
+        }
+        if (errors?.length === 1 && errors[0]?.message) {
+            return errors[0].message;
+        }
+        return (<ul className="ml-4 flex list-disc flex-col gap-1">
+        {errors.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}
+      </ul>);
+    }, [children, errors]);
+    if (!content) {
+        return null;
+    }
+    return (<div role="alert" data-slot="field-error" className={cn("text-destructive text-sm font-normal", className)} {...props}>
+      {content}
+    </div>);
+}
+export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };

package/ui/input-group.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Button } from "../ui/button";
+declare function InputGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare const inputGroupAddonVariants: (props?: {
+    align?: "block-end" | "block-start" | "inline-end" | "inline-start";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function InputGroupAddon({ className, align, ...props }: React.ComponentProps<"div"> & VariantProps<typeof inputGroupAddonVariants>): React.JSX.Element;
+declare const inputGroupButtonVariants: (props?: {
+    size?: "sm" | "xs" | "icon-xs" | "icon-sm";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function InputGroupButton({ className, type, variant, size, ...props }: Omit<React.ComponentProps<typeof Button>, "size"> & VariantProps<typeof inputGroupButtonVariants>): React.JSX.Element;
+declare function InputGroupText({ className, ...props }: React.ComponentProps<"span">): React.JSX.Element;
+declare function InputGroupInput({ className, ...props }: React.ComponentProps<"input">): React.JSX.Element;
+declare function InputGroupTextarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/ui/input-group.jsx

@@ -0,0 +1,63 @@
+"use client";
+import * as React from "react";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Button } from "../ui/button";
+import { Input } from "../ui/input";
+import { Textarea } from "../ui/textarea";
+function InputGroup({ className, ...props }) {
+    return (<div data-slot="input-group" role="group" className={cn("group/input-group border-input dark:bg-input/30 shadow-xs relative flex w-full items-center rounded-md border outline-none transition-[color,box-shadow]", "h-9 has-[>textarea]:h-auto", 
+        // Variants based on alignment.
+        "has-[>[data-align=inline-start]]:[&>input]:pl-2", "has-[>[data-align=inline-end]]:[&>input]:pr-2", "has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-3", "has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-3", 
+        // Focus state.
+        "has-[[data-slot=input-group-control]:focus-visible]:ring-ring has-[[data-slot=input-group-control]:focus-visible]:ring-1", 
+        // Error state.
+        "has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[[data-slot][aria-invalid=true]]:border-destructive dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40", className)} {...props}/>);
+}
+const inputGroupAddonVariants = cva("text-muted-foreground flex h-auto cursor-text select-none items-center justify-center gap-2 py-1.5 text-sm font-medium 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-3 has-[>button]:ml-[-0.45rem] has-[>kbd]:ml-[-0.35rem]",
+            "inline-end": "order-last pr-3 has-[>button]:mr-[-0.4rem] has-[>kbd]:mr-[-0.35rem]",
+            "block-start": "[.border-b]:pb-3 order-first w-full justify-start px-3 pt-3 group-has-[>input]/input-group:pt-2.5",
+            "block-end": "[.border-t]:pt-3 order-last w-full justify-start px-3 pb-3 group-has-[>input]/input-group:pb-2.5",
+        },
+    },
+    defaultVariants: {
+        align: "inline-start",
+    },
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+    return (<div role="group" data-slot="input-group-addon" data-align={align} className={cn(inputGroupAddonVariants({ align }), className)} onClick={(e) => {
+            if (e.target.closest("button")) {
+                return;
+            }
+            e.currentTarget.parentElement?.querySelector("input")?.focus();
+        }} {...props}/>);
+}
+const inputGroupButtonVariants = cva("flex items-center gap-2 text-sm shadow-none", {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 rounded-[calc(var(--radius)-5px)] px-2 has-[>svg]:px-2 [&>svg:not([class*='size-'])]:size-3.5",
+            sm: "h-8 gap-1.5 rounded-md px-2.5 has-[>svg]:px-2.5",
+            "icon-xs": "size-6 rounded-[calc(var(--radius)-5px)] 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 (<Button type={type} data-size={size} variant={variant} className={cn(inputGroupButtonVariants({ size }), className)} {...props}/>);
+}
+function InputGroupText({ className, ...props }) {
+    return (<span className={cn("text-muted-foreground flex items-center gap-2 text-sm [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none", className)} {...props}/>);
+}
+function InputGroupInput({ className, ...props }) {
+    return (<Input data-slot="input-group-control" className={cn("flex-1 rounded-none border-0 bg-transparent shadow-none focus-visible:ring-0 dark:bg-transparent", className)} {...props}/>);
+}
+function InputGroupTextarea({ className, ...props }) {
+    return (<Textarea data-slot="input-group-control" className={cn("flex-1 resize-none rounded-none border-0 bg-transparent py-3 shadow-none focus-visible:ring-0 dark:bg-transparent", className)} {...props}/>);
+}
+export { InputGroup, InputGroupAddon, InputGroupButton, InputGroupText, InputGroupInput, InputGroupTextarea, };

package/ui/item.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+import { type VariantProps } from "class-variance-authority";
+import { Separator } from "../ui/separator";
+declare function ItemGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare const itemVariants: (props?: {
+    variant?: "default" | "outline" | "muted";
+    size?: "default" | "sm";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function Item({ className, variant, size, asChild, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemVariants> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare const itemMediaVariants: (props?: {
+    variant?: "default" | "image" | "icon";
+} & import("class-variance-authority/dist/types").ClassProp) => string;
+declare function ItemMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof itemMediaVariants>): React.JSX.Element;
+declare function ItemContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemDescription({ className, ...props }: React.ComponentProps<"p">): React.JSX.Element;
+declare function ItemActions({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+declare function ItemFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };

package/ui/item.jsx

@@ -0,0 +1,66 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import { cn } from "../lib/utils";
+import { Separator } from "../ui/separator";
+function ItemGroup({ className, ...props }) {
+    return (<div role="list" data-slot="item-group" className={cn("group/item-group flex flex-col", className)} {...props}/>);
+}
+function ItemSeparator({ className, ...props }) {
+    return (<Separator data-slot="item-separator" orientation="horizontal" className={cn("my-0", className)} {...props}/>);
+}
+const itemVariants = cva("group/item [a]:hover:bg-accent/50 focus-visible:border-ring focus-visible:ring-ring/50 [a]:transition-colors flex flex-wrap items-center rounded-md border border-transparent text-sm outline-none transition-colors duration-100 focus-visible:ring-[3px]", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            outline: "border-border",
+            muted: "bg-muted/50",
+        },
+        size: {
+            default: "gap-4 p-4 ",
+            sm: "gap-2.5 px-4 py-3",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+        size: "default",
+    },
+});
+function Item({ className, variant = "default", size = "default", asChild = false, ...props }) {
+    const Comp = asChild ? Slot : "div";
+    return (<Comp data-slot="item" data-variant={variant} data-size={size} className={cn(itemVariants({ variant, size, className }))} {...props}/>);
+}
+const itemMediaVariants = cva("flex shrink-0 items-center justify-center gap-2 group-has-[[data-slot=item-description]]/item:translate-y-0.5 group-has-[[data-slot=item-description]]/item:self-start [&_svg]:pointer-events-none", {
+    variants: {
+        variant: {
+            default: "bg-transparent",
+            icon: "bg-muted size-8 rounded-sm border [&_svg:not([class*='size-'])]:size-4",
+            image: "size-10 overflow-hidden rounded-sm [&_img]:size-full [&_img]:object-cover",
+        },
+    },
+    defaultVariants: {
+        variant: "default",
+    },
+});
+function ItemMedia({ className, variant = "default", ...props }) {
+    return (<div data-slot="item-media" data-variant={variant} className={cn(itemMediaVariants({ variant, className }))} {...props}/>);
+}
+function ItemContent({ className, ...props }) {
+    return (<div data-slot="item-content" className={cn("flex flex-1 flex-col gap-1 [&+[data-slot=item-content]]:flex-none", className)} {...props}/>);
+}
+function ItemTitle({ className, ...props }) {
+    return (<div data-slot="item-title" className={cn("flex w-fit items-center gap-2 text-sm font-medium leading-snug", className)} {...props}/>);
+}
+function ItemDescription({ className, ...props }) {
+    return (<p data-slot="item-description" className={cn("text-muted-foreground line-clamp-2 text-balance text-sm font-normal leading-normal", "[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className)} {...props}/>);
+}
+function ItemActions({ className, ...props }) {
+    return (<div data-slot="item-actions" className={cn("flex items-center gap-2", className)} {...props}/>);
+}
+function ItemHeader({ className, ...props }) {
+    return (<div data-slot="item-header" className={cn("flex basis-full items-center justify-between gap-2", className)} {...props}/>);
+}
+function ItemFooter({ className, ...props }) {
+    return (<div data-slot="item-footer" className={cn("flex basis-full items-center justify-between gap-2", className)} {...props}/>);
+}
+export { Item, ItemMedia, ItemContent, ItemActions, ItemGroup, ItemSeparator, ItemTitle, ItemDescription, ItemHeader, ItemFooter, };

package/ui/kbd.d.ts

@@ -0,0 +1,3 @@
+declare function Kbd({ className, ...props }: React.ComponentProps<"kbd">): import("react").JSX.Element;
+declare function KbdGroup({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
+export { Kbd, KbdGroup };

package/ui/kbd.jsx

@@ -0,0 +1,8 @@
+import { cn } from "../lib/utils";
+function Kbd({ className, ...props }) {
+    return (<kbd data-slot="kbd" className={cn("bg-muted text-muted-foreground pointer-events-none inline-flex h-5 w-fit min-w-5 select-none items-center justify-center gap-1 rounded-sm px-1 font-sans text-xs font-medium", "[&_svg:not([class*='size-'])]:size-3", "[[data-slot=tooltip-content]_&]:bg-background/20 [[data-slot=tooltip-content]_&]:text-background dark:[[data-slot=tooltip-content]_&]:bg-background/10", className)} {...props}/>);
+}
+function KbdGroup({ className, ...props }) {
+    return (<kbd data-slot="kbd-group" className={cn("inline-flex items-center gap-1", className)} {...props}/>);
+}
+export { Kbd, KbdGroup };

package/ui/spinner.d.ts

@@ -0,0 +1,2 @@
+declare function Spinner({ className, ...props }: React.ComponentProps<"svg">): import("react").JSX.Element;
+export { Spinner };

package/ui/spinner.jsx

@@ -0,0 +1,6 @@
+import { Loader2Icon } from "lucide-react";
+import { cn } from "../lib/utils";
+function Spinner({ className, ...props }) {
+    return (<Loader2Icon role="status" aria-label="Loading" className={cn("size-4 animate-spin", className)} {...props}/>);
+}
+export { Spinner };