@esmate/shadcn 1.1.1 → 2.0.0

package/LICENSE

@@ -0,0 +1,16 @@
+MIT License
+
+Copyright (c) 2025 Vien Dinh
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
+documentation files (the "Software"), to deal in the Software without restriction, including without limitation the
+rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit
+persons to whom the Software is furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial portions of the
+Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
+WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
+COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR
+OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -2,10 +2,12 @@
 
 Supercharge your UI development with Shadcn—components, hooks, and styles all in one package.
 
-- **Zero config pain**: Works out of the box with Tailwind.
-- **Pre-styled**: Comes with `base.css`, `new-york.css`, etc.
-- **Complete UI**: Composable components, no boilerplate needed.
-- **Smart hooks**: Built-in logic that saves you time.
+- 🔧 **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.
+- ⚙️ **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.
+- 📦 **Bundled Deps**: Re-exports `zod`, `react-hook-form`, and more—no extra installs needed.
 
 ## Installation
 
@@ -238,8 +240,9 @@ easy theme generation.
 
 ### Exports
 
-Shadcn comes with many dependencies, which can be complicated to manage and use in a project. That's why I created this
-package: to bundle them all together. To make them reusable and avoid reinstalling them, I re-export them for you.
+Shadcn includes many dependencies that can be tricky to manage in a project. That’s why I created this package: to
+bundle them all in one place. I’ve re-exported everything for you, making the dependencies reusable and saving you from
+having to install each dependency individually.
 
 ```typescript
 import { useForm } from "@esmate/shadcn/react-hook-form";

package/dist/hooks/use-zod-form.d.ts

@@ -1,8 +1,7 @@
-import { type UseFormProps } from "react-hook-form";
-import z, { ZodSchema } from "zod";
-export type ZodFormValues<S extends ZodSchema> = z.infer<S>;
-interface Props<S extends ZodSchema> extends Omit<UseFormProps<ZodFormValues<S>>, "resolver"> {
-    schema: S;
+import { type UseFormProps, type UseFormReturn, type FieldValues } from "react-hook-form";
+import type { ZodType, infer as zodInfer } from "zod";
+export type ZodFormValues<S extends ZodType<FieldValues, any, any>> = zodInfer<S>;
+export interface UseZodFormProps extends Omit<UseFormProps<FieldValues>, "resolver"> {
+    schema: ZodType<FieldValues, any, any>;
 }
-export declare function useZodForm<S extends ZodSchema>(props: Props<S>): import("react-hook-form").UseFormReturn<ZodFormValues<S>, any, ZodFormValues<S>>;
-export {};
+export declare function useZodForm(props: UseZodFormProps): UseFormReturn<FieldValues>;

package/dist/hooks/use-zod-form.js

@@ -1,10 +1,10 @@
 import * as __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__ from "react-hook-form";
 import * as __WEBPACK_EXTERNAL_MODULE__hookform_resolvers_zod_9ebfe08b__ from "@hookform/resolvers/zod";
 function useZodForm(props) {
-    const form = (0, __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__.useForm)({
-        ...props,
-        resolver: (0, __WEBPACK_EXTERNAL_MODULE__hookform_resolvers_zod_9ebfe08b__.zodResolver)(props.schema)
+    const { schema, ...formProps } = props;
+    return (0, __WEBPACK_EXTERNAL_MODULE_react_hook_form_05a66946__.useForm)({
+        ...formProps,
+        resolver: (0, __WEBPACK_EXTERNAL_MODULE__hookform_resolvers_zod_9ebfe08b__.zodResolver)(schema)
     });
-    return form;
 }
 export { useZodForm };

package/dist/lib/react-day-picker.d.ts

@@ -1,2 +1 @@
 export * from "react-day-picker";
-export { default } from "react-day-picker";

package/dist/lib/react-day-picker.js

@@ -1,4 +1 @@
-import * as __WEBPACK_EXTERNAL_MODULE_react_day_picker_7bc423fd__ from "react-day-picker";
 export * from "react-day-picker";
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE_react_day_picker_7bc423fd__["default"];
-export { __webpack_exports__default as default };

package/dist/ui/button.d.ts

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

package/dist/ui/button.js

@@ -5,10 +5,10 @@ import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__ from "../lib/util
 const buttonVariants = (0, __WEBPACK_EXTERNAL_MODULE_class_variance_authority_159ad65c__.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",
+            default: "bg-primary text-primary-foreground hover:bg-primary/90",
+            destructive: "bg-destructive text-white 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",
+            secondary: "bg-secondary text-secondary-foreground 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"
         },

package/dist/ui/calendar.d.ts

@@ -1,4 +1,8 @@
 import * as React from "react";
-import { DayPicker } from "react-day-picker";
-declare function Calendar({ className, classNames, showOutsideDays, ...props }: React.ComponentProps<typeof DayPicker>): import("react/jsx-runtime").JSX.Element;
-export { Calendar };
+import { DayButton, DayPicker } from "react-day-picker";
+import { Button } from "./button";
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
+    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
+}): import("react/jsx-runtime").JSX.Element;
+declare function CalendarDayButton({ className, day, modifiers, ...props }: React.ComponentProps<typeof DayButton>): import("react/jsx-runtime").JSX.Element;
+export { Calendar, CalendarDayButton };

package/dist/ui/calendar.js

@@ -4,50 +4,100 @@ import * as __WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__ from "lucide-react
 import * as __WEBPACK_EXTERNAL_MODULE_react_day_picker_7bc423fd__ from "react-day-picker";
 import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__ from "../lib/utils.js";
 import * as __WEBPACK_EXTERNAL_MODULE__button_js_821b8d9d__ from "./button.js";
-function Calendar({ className, classNames, showOutsideDays = true, ...props }) {
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", formatters, components, ...props }) {
+    const defaultClassNames = (0, __WEBPACK_EXTERNAL_MODULE_react_day_picker_7bc423fd__.getDefaultClassNames)();
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_react_day_picker_7bc423fd__.DayPicker, {
         showOutsideDays: showOutsideDays,
-        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("p-3", className),
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("bg-background group/calendar p-3 [--cell-size:--spacing(8)] [[data-slot=card-content]_&]:bg-transparent [[data-slot=popover-content]_&]:bg-transparent", String.raw`rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw`rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className),
+        captionLayout: captionLayout,
+        formatters: {
+            formatMonthDropdown: (date)=>date.toLocaleString("default", {
+                    month: "short"
+                }),
+            ...formatters
+        },
         classNames: {
-            months: "flex flex-col sm:flex-row gap-2",
-            month: "flex flex-col gap-4",
-            caption: "flex justify-center pt-1 relative items-center w-full",
-            caption_label: "text-sm font-medium",
-            nav: "flex items-center gap-1",
-            nav_button: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)((0, __WEBPACK_EXTERNAL_MODULE__button_js_821b8d9d__.buttonVariants)({
-                variant: "outline"
-            }), "size-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-x-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: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([aria-selected])]:bg-accent [&:has([aria-selected].day-range-end)]:rounded-r-md", "range" === props.mode ? "[&: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: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)((0, __WEBPACK_EXTERNAL_MODULE__button_js_821b8d9d__.buttonVariants)({
-                variant: "ghost"
-            }), "size-8 p-0 font-normal aria-selected:opacity-100"),
-            day_range_start: "day-range-start aria-selected:bg-primary aria-selected:text-primary-foreground",
-            day_range_end: "day-range-end aria-selected:bg-primary aria-selected:text-primary-foreground",
-            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: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",
+            root: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("w-fit", defaultClassNames.root),
+            months: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("flex gap-4 flex-col md:flex-row relative", defaultClassNames.months),
+            month: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("flex flex-col w-full gap-4", defaultClassNames.month),
+            nav: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("flex items-center gap-1 w-full absolute top-0 inset-x-0 justify-between", defaultClassNames.nav),
+            button_previous: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)((0, __WEBPACK_EXTERNAL_MODULE__button_js_821b8d9d__.buttonVariants)({
+                variant: buttonVariant
+            }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_previous),
+            button_next: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)((0, __WEBPACK_EXTERNAL_MODULE__button_js_821b8d9d__.buttonVariants)({
+                variant: buttonVariant
+            }), "size-(--cell-size) aria-disabled:opacity-50 p-0 select-none", defaultClassNames.button_next),
+            month_caption: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("flex items-center justify-center h-(--cell-size) w-full px-(--cell-size)", defaultClassNames.month_caption),
+            dropdowns: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("w-full flex items-center text-sm font-medium justify-center h-(--cell-size) gap-1.5", defaultClassNames.dropdowns),
+            dropdown_root: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("relative has-focus:border-ring border border-input shadow-xs has-focus:ring-ring/50 has-focus:ring-[3px] rounded-md", defaultClassNames.dropdown_root),
+            dropdown: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("absolute bg-popover inset-0 opacity-0", defaultClassNames.dropdown),
+            caption_label: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("select-none font-medium", "label" === captionLayout ? "text-sm" : "rounded-md pl-2 pr-1 flex items-center gap-1 text-sm h-8 [&>svg]:text-muted-foreground [&>svg]:size-3.5", defaultClassNames.caption_label),
+            table: "w-full border-collapse",
+            weekdays: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("flex", defaultClassNames.weekdays),
+            weekday: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem] select-none", defaultClassNames.weekday),
+            week: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("flex w-full mt-2", defaultClassNames.week),
+            week_number_header: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("select-none w-(--cell-size)", defaultClassNames.week_number_header),
+            week_number: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("text-[0.8rem] select-none text-muted-foreground", defaultClassNames.week_number),
+            day: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.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),
+            range_start: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("rounded-l-md bg-accent", defaultClassNames.range_start),
+            range_middle: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("rounded-none", defaultClassNames.range_middle),
+            range_end: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("rounded-r-md bg-accent", defaultClassNames.range_end),
+            today: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("bg-accent text-accent-foreground rounded-md data-[selected=true]:rounded-none", defaultClassNames.today),
+            outside: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
+            disabled: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("text-muted-foreground opacity-50", defaultClassNames.disabled),
+            hidden: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("invisible", defaultClassNames.hidden),
             ...classNames
         },
         components: {
-            IconLeft: ({ className, ...props })=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronLeft, {
-                    className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("size-4", className),
+            Root: ({ className, rootRef, ...props })=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {
+                    "data-slot": "calendar",
+                    ref: rootRef,
+                    className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)(className),
                     ...props
                 }),
-            IconRight: ({ className, ...props })=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronRight, {
+            Chevron: ({ className, orientation, ...props })=>{
+                if ("left" === orientation) return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronLeftIcon, {
+                    className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("size-4", className),
+                    ...props
+                });
+                if ("right" === orientation) return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronRightIcon, {
                     className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("size-4", className),
                     ...props
-                })
+                });
+                return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.ChevronDownIcon, {
+                    className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("size-4", className),
+                    ...props
+                });
+            },
+            DayButton: CalendarDayButton,
+            WeekNumber: ({ children, ...props })=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("td", props, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {
+                    className: "flex size-(--cell-size) items-center justify-center text-center"
+                }, children)),
+            ...components
         },
         ...props
     });
 }
-export { Calendar };
+function CalendarDayButton({ className, day, modifiers, ...props }) {
+    const defaultClassNames = (0, __WEBPACK_EXTERNAL_MODULE_react_day_picker_7bc423fd__.getDefaultClassNames)();
+    const ref = __WEBPACK_EXTERNAL_MODULE_react__.useRef(null);
+    __WEBPACK_EXTERNAL_MODULE_react__.useEffect(()=>{
+        var _ref_current;
+        if (modifiers.focused) null == (_ref_current = ref.current) || _ref_current.focus();
+    }, [
+        modifiers.focused
+    ]);
+    return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__button_js_821b8d9d__.Button, {
+        ref: ref,
+        variant: "ghost",
+        size: "icon",
+        "data-day": day.date.toLocaleDateString(),
+        "data-selected-single": modifiers.selected && !modifiers.range_start && !modifiers.range_end && !modifiers.range_middle,
+        "data-range-start": modifiers.range_start,
+        "data-range-end": modifiers.range_end,
+        "data-range-middle": modifiers.range_middle,
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground data-[range-middle=true]:bg-accent data-[range-middle=true]:text-accent-foreground data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground group-data-[focused=true]/day:border-ring group-data-[focused=true]/day:ring-ring/50 dark:hover:text-accent-foreground flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 group-data-[focused=true]/day:ring-[3px] data-[range-end=true]:rounded-md data-[range-end=true]:rounded-r-md data-[range-middle=true]:rounded-none data-[range-start=true]:rounded-md data-[range-start=true]:rounded-l-md [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className),
+        ...props
+    });
+}
+export { Calendar, CalendarDayButton };

package/dist/ui/chart.js

@@ -78,7 +78,7 @@ function ChartTooltipContent({ active, payload, className, indicator = "dot", hi
         className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className)
     }, nestLabel ? null : tooltipLabel, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {
         className: "grid gap-1.5"
-    }, payload.map((item, index)=>{
+    }, payload.filter((item)=>"none" !== item.type).map((item, index)=>{
         const key = `${nameKey || item.name || item.dataKey || "value"}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
         const indicatorColor = color || item.payload.fill || item.color;
@@ -113,7 +113,7 @@ function ChartLegendContent({ className, hideIcon = false, payload, verticalAlig
     if (!(null == payload ? void 0 : payload.length)) return null;
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {
         className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("flex items-center justify-center gap-4", "top" === verticalAlign ? "pb-3" : "pt-3", className)
-    }, payload.map((item)=>{
+    }, payload.filter((item)=>"none" !== item.type).map((item)=>{
         const key = `${nameKey || item.dataKey || "value"}`;
         const itemConfig = getPayloadConfigFromPayload(config, item, key);
         return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {

package/dist/ui/command.d.ts

@@ -2,9 +2,11 @@ import * as React from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { Dialog } from "./dialog";
 declare function Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>): import("react/jsx-runtime").JSX.Element;
-declare function CommandDialog({ title, description, children, ...props }: React.ComponentProps<typeof Dialog> & {
+declare function CommandDialog({ title, description, children, className, showCloseButton, ...props }: React.ComponentProps<typeof Dialog> & {
     title?: string;
     description?: string;
+    className?: string;
+    showCloseButton?: boolean;
 }): import("react/jsx-runtime").JSX.Element;
 declare function CommandInput({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Input>): import("react/jsx-runtime").JSX.Element;
 declare function CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/command.js

@@ -11,11 +11,12 @@ function Command({ className, ...props }) {
         ...props
     });
 }
-function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, ...props }) {
+function CommandDialog({ title = "Command Palette", description = "Search for a command to run...", children, className, showCloseButton = true, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__dialog_js_d344ec77__.Dialog, props, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__dialog_js_d344ec77__.DialogHeader, {
         className: "sr-only"
     }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__dialog_js_d344ec77__.DialogTitle, null, title), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__dialog_js_d344ec77__.DialogDescription, null, description)), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__dialog_js_d344ec77__.DialogContent, {
-        className: "overflow-hidden p-0"
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("overflow-hidden p-0", className),
+        showCloseButton: showCloseButton
     }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(Command, {
         className: "[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5"
     }, children)));

package/dist/ui/dialog.d.ts

@@ -5,7 +5,9 @@ declare function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogP
 declare function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>): import("react/jsx-runtime").JSX.Element;
 declare function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>): import("react/jsx-runtime").JSX.Element;
 declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): import("react/jsx-runtime").JSX.Element;
-declare function DialogContent({ className, children, ...props }: React.ComponentProps<typeof DialogPrimitive.Content>): import("react/jsx-runtime").JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
+    showCloseButton?: boolean;
+}): import("react/jsx-runtime").JSX.Element;
 declare function DialogHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function DialogFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
 declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>): import("react/jsx-runtime").JSX.Element;

package/dist/ui/dialog.js

@@ -34,14 +34,15 @@ function DialogOverlay({ className, ...props }) {
         ...props
     });
 }
-function DialogContent({ className, children, ...props }) {
+function DialogContent({ className, children, showCloseButton = true, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(DialogPortal, {
         "data-slot": "dialog-portal"
     }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(DialogOverlay, null), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_dialog_6b867f3d__.Content, {
         "data-slot": "dialog-content",
         className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("bg-background data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg", className),
         ...props
-    }, children, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_dialog_6b867f3d__.Close, {
+    }, children, showCloseButton && /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_dialog_6b867f3d__.Close, {
+        "data-slot": "dialog-close",
         className: "ring-offset-background focus:ring-ring data-[state=open]:bg-accent data-[state=open]:text-muted-foreground absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4"
     }, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_lucide_react_f128bbbb__.XIcon, null), /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("span", {
         className: "sr-only"

package/dist/ui/drawer.js

@@ -47,7 +47,7 @@ function DrawerContent({ className, children, ...props }) {
 function DrawerHeader({ className, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {
         "data-slot": "drawer-header",
-        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("flex flex-col gap-1.5 p-4", className),
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("flex flex-col gap-0.5 p-4 group-data-[vaul-drawer-direction=bottom]/drawer-content:text-center group-data-[vaul-drawer-direction=top]/drawer-content:text-center md:gap-1.5 md:text-left", className),
         ...props
     });
 }

package/dist/ui/input.js

@@ -4,7 +4,7 @@ function Input({ className, type, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("input", {
         type: type,
         "data-slot": "input",
-        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "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", className),
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm", "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", className),
         ...props
     });
 }

package/dist/ui/resizable.js

@@ -19,7 +19,7 @@ function ResizablePanel({ ...props }) {
 function ResizableHandle({ withHandle, className, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE_react_resizable_panels_8d5960a0__.PanelResizeHandle, {
         "data-slot": "resizable-handle",
-        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:-translate-y-1/2 data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", className),
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2 [&[data-panel-group-direction=vertical]>div]:rotate-90", className),
         ...props
     }, withHandle && /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement("div", {
         className: "bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border"

package/dist/ui/separator.js

@@ -4,7 +4,7 @@ import * as __WEBPACK_EXTERNAL_MODULE__radix_ui_react_separator_30da60f9__ from
 import * as __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__ from "../lib/utils.js";
 function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_separator_30da60f9__.Root, {
-        "data-slot": "separator-root",
+        "data-slot": "separator",
         decorative: decorative,
         orientation: orientation,
         className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className),

package/dist/ui/tooltip.js

@@ -25,10 +25,10 @@ function TooltipContent({ className, sideOffset = 0, children, ...props }) {
     return /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_tooltip_22b80323__.Portal, null, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_tooltip_22b80323__.Content, {
         "data-slot": "tooltip-content",
         sideOffset: sideOffset,
-        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("bg-primary text-primary-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
+        className: (0, __WEBPACK_EXTERNAL_MODULE__lib_utils_js_5e4c9133__.cn)("bg-foreground text-background animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance", className),
         ...props
     }, children, /*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__.createElement(__WEBPACK_EXTERNAL_MODULE__radix_ui_react_tooltip_22b80323__.Arrow, {
-        className: "bg-primary fill-primary z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
+        className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]"
     })));
 }
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@esmate/shadcn",
   "description": "Shadcn components, hooks, and styles in one package.",
-  "version": "1.1.1",
+  "version": "2.0.0",
   "license": "MIT",
   "type": "module",
   "repository": {
@@ -30,59 +30,62 @@
     }
   },
   "dependencies": {
-    "@hookform/resolvers": "^5.0.1",
-    "@radix-ui/react-accordion": "^1.2.11",
-    "@radix-ui/react-alert-dialog": "^1.1.14",
+    "@hookform/resolvers": "^5.2.2",
+    "@radix-ui/react-accordion": "^1.2.12",
+    "@radix-ui/react-alert-dialog": "^1.1.15",
     "@radix-ui/react-aspect-ratio": "^1.1.7",
     "@radix-ui/react-avatar": "^1.1.10",
-    "@radix-ui/react-checkbox": "^1.3.2",
-    "@radix-ui/react-collapsible": "^1.1.11",
-    "@radix-ui/react-context-menu": "^2.2.15",
-    "@radix-ui/react-dialog": "^1.1.14",
-    "@radix-ui/react-dropdown-menu": "^2.1.15",
-    "@radix-ui/react-hover-card": "^1.1.14",
+    "@radix-ui/react-checkbox": "^1.3.3",
+    "@radix-ui/react-collapsible": "^1.1.12",
+    "@radix-ui/react-context-menu": "^2.2.16",
+    "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-dropdown-menu": "^2.1.16",
+    "@radix-ui/react-hover-card": "^1.1.15",
     "@radix-ui/react-label": "^2.1.7",
-    "@radix-ui/react-menubar": "^1.1.15",
-    "@radix-ui/react-navigation-menu": "^1.2.13",
-    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-menubar": "^1.1.16",
+    "@radix-ui/react-navigation-menu": "^1.2.14",
+    "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-progress": "^1.1.7",
-    "@radix-ui/react-radio-group": "^1.3.7",
-    "@radix-ui/react-scroll-area": "^1.2.9",
-    "@radix-ui/react-select": "^2.2.5",
+    "@radix-ui/react-radio-group": "^1.3.8",
+    "@radix-ui/react-scroll-area": "^1.2.10",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-separator": "^1.1.7",
-    "@radix-ui/react-slider": "^1.3.5",
+    "@radix-ui/react-slider": "^1.3.6",
     "@radix-ui/react-slot": "^1.2.3",
-    "@radix-ui/react-switch": "^1.2.5",
-    "@radix-ui/react-tabs": "^1.1.12",
-    "@radix-ui/react-toggle": "^1.1.9",
-    "@radix-ui/react-toggle-group": "^1.1.10",
-    "@radix-ui/react-tooltip": "^1.2.7",
+    "@radix-ui/react-switch": "^1.2.6",
+    "@radix-ui/react-tabs": "^1.1.13",
+    "@radix-ui/react-toggle": "^1.1.10",
+    "@radix-ui/react-toggle-group": "^1.1.11",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",
-    "date-fns": "^3.6.0",
+    "date-fns": "^4.1.0",
     "embla-carousel-react": "^8.6.0",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.511.0",
+    "lucide-react": "^0.544.0",
     "next-themes": "^0.4.6",
-    "react-day-picker": "8.10.1",
-    "react-hook-form": "^7.56.4",
-    "react-resizable-panels": "^3.0.2",
-    "recharts": "^2.15.3",
-    "sonner": "^2.0.3",
-    "tailwind-merge": "^3.3.0",
-    "tw-animate-css": "^1.3.0",
+    "react-day-picker": "^9.11.0",
+    "react-hook-form": "^7.63.0",
+    "react-resizable-panels": "^3.0.6",
+    "recharts": "2.15.4",
+    "sonner": "^2.0.7",
+    "tailwind-merge": "^3.3.1",
+    "tw-animate-css": "^1.4.0",
     "vaul": "^1.1.2",
-    "zod": "^3.25.23"
+    "zod": "^4.1.11"
   },
   "devDependencies": {
     "@rslib/core": "^0.7.1",
-    "@types/node": "^22.15.19",
-    "@types/react": "^19.0.0",
+    "@types/node": "^22.18.7",
+    "@types/react": "^18.3.24",
+    "@types/react-dom": "^18.3.7",
     "globby": "^14.1.0",
-    "shadcn": "^2.5.0",
-    "tsx": "^4.19.4",
-    "typescript": "^5.8.3"
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "shadcn": "^2.10.0",
+    "tsx": "^4.20.6",
+    "typescript": "^5.9.2"
   },
   "files": [
     "dist"

package/dist/lib/clsx.d.ts

@@ -1,2 +0,0 @@
-export * from "clsx";
-export { default } from "clsx";

package/dist/lib/clsx.js

@@ -1,4 +0,0 @@
-import * as __WEBPACK_EXTERNAL_MODULE_clsx__ from "clsx";
-export * from "clsx";
-var __webpack_exports__default = __WEBPACK_EXTERNAL_MODULE_clsx__["default"];
-export { __webpack_exports__default as default };

package/dist/lib/tailwind-merge.d.ts

@@ -1 +0,0 @@
-export * from "tailwind-merge";

package/dist/lib/tailwind-merge.js

@@ -1 +0,0 @@
-export * from "tailwind-merge";