@esmate/shadcn 3.3.2 → 3.5.0

package/README.md

@@ -3,7 +3,7 @@
 Supercharge your UI development with Shadcn—components, hooks, and styles all in one package.
 
 - 🔧 **Zero Config**: Works out of the box with Tailwind and pre-styled themes like `new-york.css`.
-- 🧩 **Ready-to-Use UI**: Composable Shadcn components via `@esmate/shadcn/ui/*`, no boilerplate needed.
+- 🧩 **Ready-to-Use UI**: Composable Shadcn components via `@esmate/shadcn/components/ui/*`, no boilerplate needed.
 - ⚙️ **Built-in Hooks**: Includes smart hooks like `useIsMobile` and `useZodForm` for fast logic handling.
 - 🛠 **Useful Utilities**: Handy functions like `cn` for class merging, all in one place.
 - 🎨 **Customizable Styles**: Easy theming with design tokens, dark mode, and editable base styles.
@@ -45,7 +45,8 @@ import { Card, CardContent } from "@esmate/shadcn/components/ui/card";
 
 ### UI Components
 
-All Shadcn [UI components](https://ui.shadcn.com/docs/components/) are available via `@esmate/shadcn/ui/*` imports.
+All Shadcn [UI components](https://ui.shadcn.com/docs/components/) are available via `@esmate/shadcn/components/ui/*`
+imports.
 
 ```typescript
 import { Button } from "@esmate/shadcn/components/ui/button";
@@ -72,7 +73,7 @@ import { useIsMobile } from "@esmate/shadcn/hooks/use-mobile";
 `@esmate/shadcn/hooks/*` also includes custom hooks, such as React Hook Form integrated with Zod support, like this:
 
 ```typescript
-import { z } from "@esmate/shadcn/zod";
+import { z } from "@esmate/shadcn/pkgs/zod";
 import { useZodForm } from "@esmate/shadcn/hooks/use-zod-form";
 
 const FormSchema = z.object({
@@ -252,6 +253,7 @@ import { useForm } from "@esmate/shadcn/pkgs/react-hook-form";
 import { zodResolver } from "@esmate/shadcn/pkgs/hookform/resolvers";
 import { Accordion } from "@esmate/shadcn/pkgs/radix-ui/react-accordion";
 import { z } from "@esmate/shadcn/pkgs/zod";
-
-// You can check src/pkgs or dist/pkgs to find more modules
 ```
+
+You can check [@esmate/shadcn/src/pkgs](https://github.com/VienDinhCom/esmate/tree/main/packages/shadcn/src/pkgs) or
+`node_modules/@esmate/shadcn/dist/pkgs` to find more modules

package/dist/components/ui/badge.js

@@ -2,7 +2,7 @@ import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
 import * as __WEBPACK_EXTERNAL_MODULE__radix_ui_react_slot_85c2da36__ from "@radix-ui/react-slot";
 import * as __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__ from "class-variance-authority";
 import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
-const badgeVariants = (0, __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__.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", {
+const badgeVariants = (0, __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__.cva)("inline-flex items-center justify-center rounded-full 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",

package/dist/components/ui/button-group.d.ts

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

package/dist/components/ui/button-group.js

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

package/dist/components/ui/button.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
     variant?: "link" | "default" | "destructive" | "outline" | "secondary" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;

package/dist/components/ui/button.js

@@ -16,7 +16,9 @@ const buttonVariants = (0, __WEBPACK_EXTERNAL_MODULE_class_variance_authority_15
             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"
+            icon: "size-9",
+            "icon-sm": "size-8",
+            "icon-lg": "size-10"
         }
     },
     defaultVariants: {

package/dist/components/ui/calendar.js

@@ -38,7 +38,7 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             week: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex w-full mt-2", defaultClassNames.week),
             week_number_header: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("select-none w-(--cell-size)", defaultClassNames.week_number_header),
             week_number: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
-            day: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("relative w-full h-full p-0 text-center [&:first-child[data-selected=true]_button]:rounded-l-md [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", defaultClassNames.day),
+            day: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("relative w-full h-full p-0 text-center [&:last-child[data-selected=true]_button]:rounded-r-md group/day aspect-square select-none", props.showWeekNumber ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-md" : "[&:first-child[data-selected=true]_button]:rounded-l-md", defaultClassNames.day),
             range_start: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("rounded-l-md bg-accent", defaultClassNames.range_start),
             range_middle: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("rounded-none", defaultClassNames.range_middle),
             range_end: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("rounded-r-md bg-accent", defaultClassNames.range_end),

package/dist/components/ui/card.js

@@ -10,7 +10,7 @@ function Card({ className, ...props }) {
 function CardHeader({ className, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {
         "data-slot": "card-header",
-        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
         ...props
     });
 }

package/dist/components/ui/checkbox.js

@@ -10,7 +10,7 @@ function Checkbox({ className, ...props }) {
         ...props
     }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_checkbox_76684228__.Indicator, {
         "data-slot": "checkbox-indicator",
-        className: "flex items-center justify-center text-current transition-none"
+        className: "grid place-content-center text-current transition-none"
     }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.CheckIcon, {
         className: "size-3.5"
     })));

package/dist/components/ui/context-menu.js

@@ -43,7 +43,7 @@ function ContextMenuSubTrigger({ className, inset, children, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_context_menu_293d36e3__.SubTrigger, {
         "data-slot": "context-menu-sub-trigger",
         "data-inset": inset,
-        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
         ...props
     }, children, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronRightIcon, {
         className: "ml-auto"

package/dist/components/ui/dropdown-menu.js

@@ -105,7 +105,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_dropdown_menu_dbc6754d__.SubTrigger, {
         "data-slot": "dropdown-menu-sub-trigger",
         "data-inset": inset,
-        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8", className),
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
         ...props
     }, children, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronRightIcon, {
         className: "ml-auto size-4"

package/dist/components/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-runtime").JSX.Element;
+declare function EmptyHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare const emptyMediaVariants: (props?: ({
+    variant?: "default" | "icon" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare function EmptyMedia({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof emptyMediaVariants>): import("react/jsx-runtime").JSX.Element;
+declare function EmptyTitle({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+declare function EmptyDescription({ className, ...props }: React.ComponentProps<"p">): import("react/jsx-runtime").JSX.Element;
+declare function EmptyContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
+export { Empty, EmptyHeader, EmptyTitle, EmptyDescription, EmptyContent, EmptyMedia, };

package/dist/components/ui/empty.js

@@ -0,0 +1,60 @@
+import * as __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__ from "class-variance-authority";
+import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
+function Empty({ className, ...props }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        "data-slot": "empty",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 rounded-lg border-dashed p-6 text-center text-balance md:p-12", className),
+        ...props
+    });
+}
+function EmptyHeader({ className, ...props }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        "data-slot": "empty-header",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex max-w-sm flex-col items-center gap-2 text-center", className),
+        ...props
+    });
+}
+const emptyMediaVariants = (0, __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__.cva)("flex shrink-0 items-center justify-center mb-2 [&_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 /*#__PURE__*/ React.createElement("div", {
+        "data-slot": "empty-icon",
+        "data-variant": variant,
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)(emptyMediaVariants({
+            variant,
+            className
+        })),
+        ...props
+    });
+}
+function EmptyTitle({ className, ...props }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        "data-slot": "empty-title",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("text-lg font-medium tracking-tight", className),
+        ...props
+    });
+}
+function EmptyDescription({ className, ...props }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        "data-slot": "empty-description",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4", className),
+        ...props
+    });
+}
+function EmptyContent({ className, ...props }) {
+    return /*#__PURE__*/ React.createElement("div", {
+        "data-slot": "empty-content",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("flex w-full max-w-sm min-w-0 flex-col items-center gap-4 text-sm text-balance", className),
+        ...props
+    });
+}
+export { Empty, EmptyContent, EmptyDescription, EmptyHeader, EmptyMedia, EmptyTitle };

package/dist/components/ui/field.d.ts

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

package/dist/components/ui/field.js

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

package/dist/components/ui/input-group.d.ts

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

package/dist/components/ui/input-group.js

@@ -0,0 +1,89 @@
+"use client"
+import * as __WEBPACK_EXTERNAL_MODULE_react__ from "react";
+import * as __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__ from "class-variance-authority";
+import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__ from "../../lib/utils.js";
+import * as __WEBPACK_EXTERNAL_MODULE__button_js_821b8d9d__ from "./button.js";
+import * as __WEBPACK_EXTERNAL_MODULE__input_js_53f4619d__ from "./input.js";
+import * as __WEBPACK_EXTERNAL_MODULE__textarea_js_9a8e5957__ from "./textarea.js";
+function InputGroup({ className, ...props }) {
+    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {
+        "data-slot": "input-group",
+        role: "group",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("group/input-group border-input dark:bg-input/30 relative flex w-full items-center rounded-md border shadow-xs transition-[color,box-shadow] outline-none", "h-9 min-w-0 has-[>textarea]:h-auto", "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", "has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot=input-group-control]:focus-visible]:ring-[3px]", "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 = (0, __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__.cva)("text-muted-foreground flex h-auto cursor-text items-center justify-center gap-2 py-1.5 text-sm font-medium select-none [&>svg:not([class*='size-'])]:size-4 [&>kbd]:rounded-[calc(var(--radius)-5px)] group-data-[disabled=true]/input-group:opacity-50", {
+    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.45rem] has-[>kbd]:mr-[-0.35rem]",
+            "block-start": "order-first w-full justify-start px-3 pt-3 [.border-b]:pb-3 group-has-[>input]/input-group:pt-2.5",
+            "block-end": "order-last w-full justify-start px-3 pb-3 [.border-t]:pt-3 group-has-[>input]/input-group:pb-2.5"
+        }
+    },
+    defaultVariants: {
+        align: "inline-start"
+    }
+});
+function InputGroupAddon({ className, align = "inline-start", ...props }) {
+    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {
+        role: "group",
+        "data-slot": "input-group-addon",
+        "data-align": align,
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)(inputGroupAddonVariants({
+            align
+        }), className),
+        onClick: (e)=>{
+            var _e_currentTarget_parentElement_querySelector, _e_currentTarget_parentElement;
+            if (e.target.closest("button")) return;
+            null == (_e_currentTarget_parentElement = e.currentTarget.parentElement) || null == (_e_currentTarget_parentElement_querySelector = _e_currentTarget_parentElement.querySelector("input")) || _e_currentTarget_parentElement_querySelector.focus();
+        },
+        ...props
+    });
+}
+const inputGroupButtonVariants = (0, __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__.cva)("text-sm shadow-none flex gap-2 items-center", {
+    variants: {
+        size: {
+            xs: "h-6 gap-1 px-2 rounded-[calc(var(--radius)-5px)] [&>svg:not([class*='size-'])]:size-3.5 has-[>svg]:px-2",
+            sm: "h-8 px-2.5 gap-1.5 rounded-md 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 /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__button_js_821b8d9d__.Button, {
+        type: type,
+        "data-size": size,
+        variant: variant,
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)(inputGroupButtonVariants({
+            size
+        }), className),
+        ...props
+    });
+}
+function InputGroupText({ className, ...props }) {
+    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("span", {
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.cn)("text-muted-foreground flex items-center gap-2 text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", className),
+        ...props
+    });
+}
+function InputGroupInput({ className, ...props }) {
+    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__input_js_53f4619d__.Input, {
+        "data-slot": "input-group-control",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.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 /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__textarea_js_9a8e5957__.Textarea, {
+        "data-slot": "input-group-control",
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_c09d30d7__.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, InputGroupInput, InputGroupText, InputGroupTextarea };

package/dist/components/ui/item.d.ts

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