shadcn-zod-formkit 3.3.0 → 3.4.0

package/dist/index.cjs

@@ -9,27 +9,29 @@ var tailwindMerge = require('tailwind-merge');
 var reactHookForm = require('react-hook-form');
 var AccordionPrimitive = require('@radix-ui/react-accordion');
 var reactSlot = require('@radix-ui/react-slot');
+var SeparatorPrimitive = require('@radix-ui/react-separator');
 var reactDayPicker = require('react-day-picker');
 var CheckboxPrimitive = require('@radix-ui/react-checkbox');
 var reactColorPalette = require('react-color-palette');
 var PopoverPrimitive = require('@radix-ui/react-popover');
 require('react-color-palette/css');
+var cmdk = require('cmdk');
 var DialogPrimitive = require('@radix-ui/react-dialog');
 var LabelPrimitive = require('@radix-ui/react-label');
-var SeparatorPrimitive = require('@radix-ui/react-separator');
 var inputOtp = require('input-otp');
 var RadioGroupPrimitive = require('@radix-ui/react-radio-group');
 var ResizablePrimitive = require('react-resizable-panels');
 var ScrollAreaPrimitive = require('@radix-ui/react-scroll-area');
 var SelectPrimitive = require('@radix-ui/react-select');
+var radixUi = require('radix-ui');
+var SliderPrimitive = require('@radix-ui/react-slider');
 var nextThemes = require('next-themes');
 var sonner = require('sonner');
 var SwitchPrimitive = require('@radix-ui/react-switch');
+var TabsPrimitive = require('@radix-ui/react-tabs');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
-var cmdk = require('cmdk');
 var dateFns = require('date-fns');
-var TabsPrimitive = require('@radix-ui/react-tabs');
-var SliderPrimitive = require('@radix-ui/react-slider');
+var zustand = require('zustand');
 var core = require('@dnd-kit/core');
 var sortable = require('@dnd-kit/sortable');
 var utilities = require('@dnd-kit/utilities');
@@ -58,19 +60,19 @@ function _interopNamespace(e) {
 
 var React3__namespace = /*#__PURE__*/_interopNamespace(React3);
 var AccordionPrimitive__namespace = /*#__PURE__*/_interopNamespace(AccordionPrimitive);
+var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var CheckboxPrimitive__namespace = /*#__PURE__*/_interopNamespace(CheckboxPrimitive);
 var PopoverPrimitive__namespace = /*#__PURE__*/_interopNamespace(PopoverPrimitive);
 var DialogPrimitive__namespace = /*#__PURE__*/_interopNamespace(DialogPrimitive);
 var LabelPrimitive__namespace = /*#__PURE__*/_interopNamespace(LabelPrimitive);
-var SeparatorPrimitive__namespace = /*#__PURE__*/_interopNamespace(SeparatorPrimitive);
 var RadioGroupPrimitive__namespace = /*#__PURE__*/_interopNamespace(RadioGroupPrimitive);
 var ResizablePrimitive__namespace = /*#__PURE__*/_interopNamespace(ResizablePrimitive);
 var ScrollAreaPrimitive__namespace = /*#__PURE__*/_interopNamespace(ScrollAreaPrimitive);
 var SelectPrimitive__namespace = /*#__PURE__*/_interopNamespace(SelectPrimitive);
+var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
 var SwitchPrimitive__namespace = /*#__PURE__*/_interopNamespace(SwitchPrimitive);
-var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var TabsPrimitive__namespace = /*#__PURE__*/_interopNamespace(TabsPrimitive);
-var SliderPrimitive__namespace = /*#__PURE__*/_interopNamespace(SliderPrimitive);
+var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitive);
 var z2__default = /*#__PURE__*/_interopDefault(z2);
 
 var __create = Object.create;
@@ -8752,12 +8754,12 @@ var require_leaflet_src = __commonJS({
           toBack(layer._container);
         }
       };
-      var create = Browser.vml ? vmlCreate : svgCreate;
+      var create2 = Browser.vml ? vmlCreate : svgCreate;
       var SVG = Renderer.extend({
         _initContainer: function() {
-          this._container = create("svg");
+          this._container = create2("svg");
           this._container.setAttribute("pointer-events", "none");
-          this._rootGroup = create("g");
+          this._rootGroup = create2("g");
           this._container.appendChild(this._rootGroup);
         },
         _destroyContainer: function() {
@@ -8784,7 +8786,7 @@ var require_leaflet_src = __commonJS({
         },
         // methods below are called by vector layers implementations
         _initPath: function(layer) {
-          var path = layer._path = create("path");
+          var path = layer._path = create2("path");
           if (layer.options.className) {
             addClass(path, layer.options.className);
           }
@@ -8919,7 +8921,7 @@ var require_leaflet_src = __commonJS({
       function rectangle(latLngBounds, options) {
         return new Rectangle(latLngBounds, options);
       }
-      SVG.create = create;
+      SVG.create = create2;
       SVG.pointsToPath = pointsToPath;
       GeoJSON.geometryToLayer = geometryToLayer;
       GeoJSON.coordsToLatLng = coordsToLatLng;
@@ -9227,7 +9229,7 @@ var require_leaflet_src = __commonJS({
         // Amount of pixels to pan when pressing an arrow key.
         keyboardPanDelta: 80
       });
-      var Keyboard = Handler.extend({
+      var Keyboard2 = Handler.extend({
         keyCodes: {
           left: [37],
           right: [39],
@@ -9345,7 +9347,7 @@ var require_leaflet_src = __commonJS({
           stop(e);
         }
       });
-      Map2.addInitHook("addHandler", "keyboard", Keyboard);
+      Map2.addInitHook("addHandler", "keyboard", Keyboard2);
       Map2.mergeOptions({
         // @section Mouse wheel options
         // @option scrollWheelZoom: Boolean|String = true
@@ -9563,7 +9565,7 @@ var require_leaflet_src = __commonJS({
       Map2.BoxZoom = BoxZoom;
       Map2.DoubleClickZoom = DoubleClickZoom;
       Map2.Drag = Drag;
-      Map2.Keyboard = Keyboard;
+      Map2.Keyboard = Keyboard2;
       Map2.ScrollWheelZoom = ScrollWheelZoom;
       Map2.TapHold = TapHold;
       Map2.TouchZoom = TouchZoom;
@@ -10138,6 +10140,91 @@ function Badge({
     }
   );
 }
+function Separator({
+  className,
+  orientation: orientation2 = "horizontal",
+  decorative = true,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SeparatorPrimitive__namespace.Root,
+    {
+      "data-slot": "separator",
+      decorative,
+      orientation: orientation2,
+      className: 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
+      ),
+      ...props
+    }
+  );
+}
+var buttonGroupVariants = classVarianceAuthority.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: orientation2,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "button-group",
+      "data-orientation": orientation2,
+      className: cn(buttonGroupVariants({ orientation: orientation2 }), className),
+      ...props
+    }
+  );
+}
+function ButtonGroupText({
+  className,
+  asChild = false,
+  ...props
+}) {
+  const Comp = asChild ? reactSlot.Slot : "div";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Comp,
+    {
+      className: 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: orientation2 = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Separator,
+    {
+      "data-slot": "button-group-separator",
+      orientation: orientation2,
+      className: cn(
+        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var buttonVariants = classVarianceAuthority.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",
   {
@@ -10657,153 +10744,287 @@ function DialogDescription({
     }
   );
 }
-function Label({
+function Command({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    LabelPrimitive__namespace.Root,
+    cmdk.Command,
     {
-      "data-slot": "label",
+      "data-slot": "command",
       className: cn(
-        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
         className
       ),
       ...props
     }
   );
 }
-function Separator({
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
   className,
-  orientation: orientation2 = "horizontal",
-  decorative = true,
+  showCloseButton = true,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SeparatorPrimitive__namespace.Root,
+  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { ...props, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "sr-only", children: [
+      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      DialogContent,
+      {
+        className: cn("overflow-hidden p-0", className),
+        showCloseButton,
+        children: /* @__PURE__ */ jsxRuntime.jsx(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 })
+      }
+    )
+  ] });
+}
+function CommandInput({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
     {
-      "data-slot": "separator",
-      decorative,
-      orientation: orientation2,
-      className: 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
-      ),
-      ...props
+      "data-slot": "command-input-wrapper",
+      className: "flex h-9 items-center gap-2 border-b px-3",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          cmdk.Command.Input,
+          {
+            "data-slot": "command-input",
+            className: cn(
+              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+              className
+            ),
+            ...props
+          }
+        )
+      ]
     }
   );
 }
-function FieldSet({ className, ...props }) {
+function CommandList({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "fieldset",
+    cmdk.Command.List,
     {
-      "data-slot": "field-set",
+      "data-slot": "command-list",
       className: cn(
-        "flex flex-col gap-6",
-        "has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3",
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
         className
       ),
       ...props
     }
   );
 }
-function FieldLegend({
-  className,
-  variant = "legend",
+function CommandEmpty({
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "legend",
+    cmdk.Command.Empty,
     {
-      "data-slot": "field-legend",
-      "data-variant": variant,
-      className: cn(
-        "mb-3 font-medium",
-        "data-[variant=legend]:text-base",
-        "data-[variant=label]:text-sm",
-        className
-      ),
+      "data-slot": "command-empty",
+      className: "py-6 text-center text-sm",
       ...props
     }
   );
 }
-function FieldGroup({ className, ...props }) {
+function CommandGroup({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    cmdk.Command.Group,
     {
-      "data-slot": "field-group",
+      "data-slot": "command-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",
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
         className
       ),
       ...props
     }
   );
 }
-var fieldVariants = classVarianceAuthority.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({
+function CommandSeparator({
   className,
-  orientation: orientation2 = "vertical",
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    cmdk.Command.Separator,
     {
-      role: "group",
-      "data-slot": "field",
-      "data-orientation": orientation2,
-      className: cn(fieldVariants({ orientation: orientation2 }), className),
+      "data-slot": "command-separator",
+      className: cn("bg-border -mx-1 h-px", className),
       ...props
     }
   );
 }
-function FieldContent({ className, ...props }) {
+function CommandItem({
+  className,
+  ...props
+}) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
+    cmdk.Command.Item,
     {
-      "data-slot": "field-content",
+      "data-slot": "command-item",
       className: cn(
-        "group/field-content flex flex-1 flex-col gap-1.5 leading-snug",
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       ),
       ...props
     }
   );
 }
-function FieldLabel({
+function CommandShortcut({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    Label,
+    "span",
     {
-      "data-slot": "field-label",
+      "data-slot": "command-shortcut",
       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",
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function Label({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    LabelPrimitive__namespace.Root,
+    {
+      "data-slot": "label",
+      className: cn(
+        "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function FieldSet({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "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 /* @__PURE__ */ jsxRuntime.jsx(
+    "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 /* @__PURE__ */ jsxRuntime.jsx(
+    "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
+    }
+  );
+}
+var fieldVariants = classVarianceAuthority.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: orientation2 = "vertical",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "group",
+      "data-slot": "field",
+      "data-orientation": orientation2,
+      className: cn(fieldVariants({ orientation: orientation2 }), className),
+      ...props
+    }
+  );
+}
+function FieldContent({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "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 /* @__PURE__ */ jsxRuntime.jsx(
+    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
@@ -11510,93 +11731,376 @@ function SelectScrollDownButton({
     }
   );
 }
-var Toaster = ({ ...props }) => {
-  const { theme = "system" } = nextThemes.useTheme();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    sonner.Toaster,
-    {
-      theme,
-      className: "toaster group",
-      style: {
-        "--normal-bg": "var(--popover)",
-        "--normal-text": "var(--popover-foreground)",
-        "--normal-border": "var(--border)"
-      },
-      ...props
-    }
-  );
-};
-function Switch({
+function Sheet({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Root, { "data-slot": "sheet", ...props });
+}
+function SheetPortal({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Portal, { "data-slot": "sheet-portal", ...props });
+}
+function SheetOverlay({
   className,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    SwitchPrimitive__namespace.Root,
+    radixUi.Dialog.Overlay,
     {
-      "data-slot": "switch",
+      "data-slot": "sheet-overlay",
       className: cn(
-        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        "fixed inset-0 z-50 bg-black/10 duration-100  data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0",
         className
       ),
-      ...props,
-      children: /* @__PURE__ */ jsxRuntime.jsx(
-        SwitchPrimitive__namespace.Thumb,
-        {
-          "data-slot": "switch-thumb",
-          className: cn(
-            "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
-          )
-        }
-      )
+      ...props
     }
   );
 }
-function TooltipProvider({
-  delayDuration = 0,
+function SheetContent({
+  className,
+  children,
+  side = "right",
+  showCloseButton = true,
   ...props
 }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(SheetPortal, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(SheetOverlay, {}),
+    /* @__PURE__ */ jsxRuntime.jsxs(
+      radixUi.Dialog.Content,
+      {
+        "data-slot": "sheet-content",
+        "data-side": side,
+        className: cn(
+          "fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm data-open:animate-in data-open:fade-in-0 data-[side=bottom]:data-open:slide-in-from-bottom-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:animate-out data-closed:fade-out-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=right]:data-closed:slide-out-to-right-10 data-[side=top]:data-closed:slide-out-to-top-10",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          showCloseButton && /* @__PURE__ */ jsxRuntime.jsx(radixUi.Dialog.Close, { "data-slot": "sheet-close", asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+            Button,
+            {
+              variant: "ghost",
+              className: "absolute top-3 right-3",
+              size: "icon-sm",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  lucideReact.XIcon,
+                  {}
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "sr-only", children: "Close" })
+              ]
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+function SheetHeader({ className, ...props }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
-    TooltipPrimitive__namespace.Provider,
+    "div",
     {
-      "data-slot": "tooltip-provider",
-      delayDuration,
+      "data-slot": "sheet-header",
+      className: cn("flex flex-col gap-0.5 p-4", className),
       ...props
     }
   );
 }
-function Tooltip({
+function SheetFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-slot": "sheet-footer",
+      className: cn("mt-auto flex flex-col gap-2 p-4", className),
+      ...props
+    }
+  );
+}
+function SheetTitle({
+  className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Title,
+    {
+      "data-slot": "sheet-title",
+      className: cn(
+        "font-heading text-base font-medium text-foreground",
+        className
+      ),
+      ...props
+    }
+  );
 }
-function TooltipTrigger({
+function SheetDescription({
+  className,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { "data-slot": "tooltip-trigger", ...props });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    radixUi.Dialog.Description,
+    {
+      "data-slot": "sheet-description",
+      className: cn("text-sm text-muted-foreground", className),
+      ...props
+    }
+  );
 }
-function TooltipContent({
+function Slider({
   className,
-  sideOffset = 0,
-  children,
+  defaultValue,
+  value,
+  min = 0,
+  max = 100,
   ...props
 }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
-    TooltipPrimitive__namespace.Content,
+  const _values = React3__namespace.useMemo(
+    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
+    [value, defaultValue, min, max]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    SliderPrimitive__namespace.Root,
     {
-      "data-slot": "tooltip-content",
-      sideOffset,
+      "data-slot": "slider",
+      defaultValue,
+      value,
+      min,
+      max,
       className: 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",
+        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
         className
       ),
       ...props,
       children: [
-        children,
-        /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
-      ]
-    }
-  ) });
-}
+        /* @__PURE__ */ jsxRuntime.jsx(
+          SliderPrimitive__namespace.Track,
+          {
+            "data-slot": "slider-track",
+            className: cn(
+              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
+            ),
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              SliderPrimitive__namespace.Range,
+              {
+                "data-slot": "slider-range",
+                className: cn(
+                  "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                )
+              }
+            )
+          }
+        ),
+        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          SliderPrimitive__namespace.Thumb,
+          {
+            "data-slot": "slider-thumb",
+            className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+          },
+          index
+        ))
+      ]
+    }
+  );
+}
+var Toaster = ({ ...props }) => {
+  const { theme = "system" } = nextThemes.useTheme();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    sonner.Toaster,
+    {
+      theme,
+      className: "toaster group",
+      style: {
+        "--normal-bg": "var(--popover)",
+        "--normal-text": "var(--popover-foreground)",
+        "--normal-border": "var(--border)"
+      },
+      ...props
+    }
+  );
+};
+function Stepper({ steps, currentStep, clickable = false, onStepClick }) {
+  const handleStepClick = (stepNumber) => {
+    if (clickable && onStepClick) {
+      onStepClick(stepNumber);
+    }
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-4 items-center justify-around", children: steps.map((step, index) => {
+    const stepNumber = index + 1;
+    const isCompleted = stepNumber < currentStep;
+    const isCurrent = stepNumber === currentStep;
+    const isUpcoming = stepNumber > currentStep;
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            onClick: () => handleStepClick(stepNumber),
+            className: cn(
+              "flex size-10 items-center shadow-lg  justify-center rounded-full border-2 transition-all duration-300",
+              isCompleted && "border-primary bg-primary text-primary-foreground",
+              isCurrent && "border-primary bg-background text-primary scale-110",
+              isUpcoming && "border-muted-foreground/60 bg-background border-b text-muted-foreground",
+              clickable && "cursor-pointer hover:scale-125 hover:shadow-xl",
+              !clickable && "cursor-default"
+            ),
+            children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: stepNumber })
+          }
+        ),
+        step.title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "p",
+            {
+              className: cn(
+                "text-sm font-medium transition-colors",
+                (isCompleted || isCurrent) && "text-foreground",
+                isUpcoming && "text-muted-foreground"
+              ),
+              children: step.title
+            }
+          ),
+          step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground max-w-[120px]", children: step.description })
+        ] })
+      ] }),
+      index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 flex-1 mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          className: cn(
+            "h-0.5 w-full transition-all duration-300",
+            stepNumber < currentStep ? "bg-primary" : "bg-muted-foreground/30"
+          )
+        }
+      ) })
+    ] }, index);
+  }) }) });
+}
+function Switch({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SwitchPrimitive__namespace.Root,
+    {
+      "data-slot": "switch",
+      className: cn(
+        "peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+        className
+      ),
+      ...props,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SwitchPrimitive__namespace.Thumb,
+        {
+          "data-slot": "switch-thumb",
+          className: cn(
+            "bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0"
+          )
+        }
+      )
+    }
+  );
+}
+function Tabs({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Root,
+    {
+      "data-slot": "tabs",
+      className: cn("flex flex-col gap-2", className),
+      ...props
+    }
+  );
+}
+function TabsList({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.List,
+    {
+      "data-slot": "tabs-list",
+      className: cn(
+        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsTrigger({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Trigger,
+    {
+      "data-slot": "tabs-trigger",
+      className: cn(
+        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function TabsContent({
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TabsPrimitive__namespace.Content,
+    {
+      "data-slot": "tabs-content",
+      className: cn("flex-1 outline-none", className),
+      ...props
+    }
+  );
+}
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    TooltipPrimitive__namespace.Provider,
+    {
+      "data-slot": "tooltip-provider",
+      delayDuration,
+      ...props
+    }
+  );
+}
+function Tooltip({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Root, { "data-slot": "tooltip", ...props }) });
+}
+function TooltipTrigger({
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsxs(
+    TooltipPrimitive__namespace.Content,
+    {
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: 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: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { className: "bg-foreground fill-foreground z-50 size-2.5 translate-y-[calc(-50%_-_2px)] rotate-45 rounded-[2px]" })
+      ]
+    }
+  ) });
+}
 var GroupedSwitchInput = class extends BaseInput {
   render() {
     const { input, isSubmitting } = this;
@@ -11709,103 +12213,38 @@ var AccordionGroupedSwitches = ({ form, input, groups = [], onChange, isSubmitti
             AccordionItem,
             {
               value: group.label,
-              className: `px-1 ${indx % 2 ? `bg-black/10` : "bg-black/5"}`,
-              children: [
-                /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 w-full", children: [
-                  group.label,
-                  " ",
-                  /* @__PURE__ */ jsxRuntime.jsxs(Badge, { children: [
-                    countCheckedByGroup(group),
-                    " / ",
-                    group.options.length
-                  ] })
-                ] }) }),
-                /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
-                  GroupedSwitches,
-                  {
-                    isSubmitting,
-                    input,
-                    options: group.options,
-                    onChange: (updated) => handleOptionChange(field, group.label, updated, input)
-                  }
-                ) })
-              ]
-            },
-            indx
-          )) })
-        ] }) }),
-        input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
-        /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
-      ] })
-    },
-    input.name
-  );
-};
-var buttonGroupVariants = classVarianceAuthority.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: orientation2,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "group",
-      "data-slot": "button-group",
-      "data-orientation": orientation2,
-      className: cn(buttonGroupVariants({ orientation: orientation2 }), className),
-      ...props
-    }
-  );
-}
-function ButtonGroupText({
-  className,
-  asChild = false,
-  ...props
-}) {
-  const Comp = asChild ? reactSlot.Slot : "div";
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Comp,
-    {
-      className: 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: orientation2 = "vertical",
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    Separator,
-    {
-      "data-slot": "button-group-separator",
-      orientation: orientation2,
-      className: cn(
-        "bg-input relative !m-0 self-stretch data-[orientation=vertical]:h-auto",
-        className
-      ),
-      ...props
-    }
+              className: `px-1 ${indx % 2 ? `bg-black/10` : "bg-black/5"}`,
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(AccordionTrigger, { children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-2 w-full", children: [
+                  group.label,
+                  " ",
+                  /* @__PURE__ */ jsxRuntime.jsxs(Badge, { children: [
+                    countCheckedByGroup(group),
+                    " / ",
+                    group.options.length
+                  ] })
+                ] }) }),
+                /* @__PURE__ */ jsxRuntime.jsx(AccordionContent, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                  GroupedSwitches,
+                  {
+                    isSubmitting,
+                    input,
+                    options: group.options,
+                    onChange: (updated) => handleOptionChange(field, group.label, updated, input)
+                  }
+                ) })
+              ]
+            },
+            indx
+          )) })
+        ] }) }),
+        input.description && /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+      ] })
+    },
+    input.name
   );
-}
+};
 var ButtonGroupInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -11981,233 +12420,79 @@ var FieldColor = ({ form, input, isSubmitting }) => {
         /* @__PURE__ */ jsxRuntime.jsx(FormControl, { children: ColorCmp ? /* @__PURE__ */ jsxRuntime.jsx(
           ColorCmp,
           {
-            value: field.value || "#000000",
-            onChange: (event) => {
-              handleOnChage(event, input, field);
-            },
-            onBlur: field.onBlur,
-            disabled: input.disabled || isSubmitting,
-            placeholder: input.placeHolder
-          }
-        ) : "N/A" }),
-        /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
-        /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
-      ] })
-    }
-  );
-};
-var ColorComp = React3__namespace.default.forwardRef(
-  ({ value = "#000000", onChange, onBlur, disabled, className, hideInput = ["hsv"] }, ref) => {
-    const [color, setColor] = reactColorPalette.useColor(value);
-    const [open, setOpen] = React3.useState(false);
-    React3__namespace.default.useEffect(() => {
-      if (value !== color.hex) {
-        setColor({ ...color, hex: value });
-      }
-    }, [value]);
-    const handleColorChange = (newColor) => {
-      setColor({ ...color, hex: newColor });
-      onChange?.(newColor);
-    };
-    const handlePickerChange = (newColor) => {
-      setColor(newColor);
-      onChange?.(newColor.hex);
-    };
-    const handleOpenChange = (newOpen) => {
-      setOpen(newOpen);
-      if (!newOpen) {
-        onBlur?.();
-      }
-    };
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
-      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 p-2", children: PRESET_COLORS.map((presetColor) => /* @__PURE__ */ jsxRuntime.jsx(
-        "button",
-        {
-          type: "button",
-          disabled,
-          className: cn(
-            "flex-1 size-4 shadow-lg rounded-md border-2 border-black transition-all hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed",
-            color.hex === presetColor ? "border-foreground ring-2 ring-foreground/20" : "border-border hover:border-foreground/50"
-          ),
-          style: { backgroundColor: presetColor },
-          onClick: () => handleColorChange(presetColor),
-          "aria-label": `Select color ${presetColor}`
-        },
-        presetColor
-      )) }),
-      /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
-          Button,
-          {
-            ref,
-            variant: "outline",
-            disabled,
-            className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", className),
-            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 border border-border rounded-sm", style: { backgroundColor: color.hex, width: 20, height: 20 } }),
-              /* @__PURE__ */ jsxRuntime.jsx("span", { children: color.hex })
-            ] })
-          }
-        ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(reactColorPalette.ColorPicker, { color, onChange: handlePickerChange, hideInput }) })
-      ] })
-    ] });
-  }
-);
-function Command({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command,
-    {
-      "data-slot": "command",
-      className: cn(
-        "bg-popover text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandDialog({
-  title = "Command Palette",
-  description = "Search for a command to run...",
-  children,
-  className,
-  showCloseButton = true,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(Dialog, { ...props, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(DialogHeader, { className: "sr-only", children: [
-      /* @__PURE__ */ jsxRuntime.jsx(DialogTitle, { children: title }),
-      /* @__PURE__ */ jsxRuntime.jsx(DialogDescription, { children: description })
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      DialogContent,
-      {
-        className: cn("overflow-hidden p-0", className),
-        showCloseButton,
-        children: /* @__PURE__ */ jsxRuntime.jsx(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 })
-      }
-    )
-  ] });
-}
-function CommandInput({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      "data-slot": "command-input-wrapper",
-      className: "flex h-9 items-center gap-2 border-b px-3",
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.SearchIcon, { className: "size-4 shrink-0 opacity-50" }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          cmdk.Command.Input,
-          {
-            "data-slot": "command-input",
-            className: cn(
-              "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
-              className
-            ),
-            ...props
-          }
-        )
-      ]
-    }
-  );
-}
-function CommandList({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.List,
-    {
-      "data-slot": "command-list",
-      className: cn(
-        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandEmpty({
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.Empty,
-    {
-      "data-slot": "command-empty",
-      className: "py-6 text-center text-sm",
-      ...props
-    }
-  );
-}
-function CommandGroup({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.Group,
-    {
-      "data-slot": "command-group",
-      className: cn(
-        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandSeparator({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.Separator,
-    {
-      "data-slot": "command-separator",
-      className: cn("bg-border -mx-1 h-px", className),
-      ...props
-    }
-  );
-}
-function CommandItem({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    cmdk.Command.Item,
-    {
-      "data-slot": "command-item",
-      className: cn(
-        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function CommandShortcut({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      "data-slot": "command-shortcut",
-      className: cn(
-        "text-muted-foreground ml-auto text-xs tracking-widest",
-        className
-      ),
-      ...props
+            value: field.value || "#000000",
+            onChange: (event) => {
+              handleOnChage(event, input, field);
+            },
+            onBlur: field.onBlur,
+            disabled: input.disabled || isSubmitting,
+            placeholder: input.placeHolder
+          }
+        ) : "N/A" }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormDescription, { children: input.description }),
+        /* @__PURE__ */ jsxRuntime.jsx(FormMessage, {})
+      ] })
     }
   );
-}
+};
+var ColorComp = React3__namespace.default.forwardRef(
+  ({ value = "#000000", onChange, onBlur, disabled, className, hideInput = ["hsv"] }, ref) => {
+    const [color, setColor] = reactColorPalette.useColor(value);
+    const [open, setOpen] = React3.useState(false);
+    React3__namespace.default.useEffect(() => {
+      if (value !== color.hex) {
+        setColor({ ...color, hex: value });
+      }
+    }, [value]);
+    const handleColorChange = (newColor) => {
+      setColor({ ...color, hex: newColor });
+      onChange?.(newColor);
+    };
+    const handlePickerChange = (newColor) => {
+      setColor(newColor);
+      onChange?.(newColor.hex);
+    };
+    const handleOpenChange = (newOpen) => {
+      setOpen(newOpen);
+      if (!newOpen) {
+        onBlur?.();
+      }
+    };
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-3", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-2 p-2", children: PRESET_COLORS.map((presetColor) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          disabled,
+          className: cn(
+            "flex-1 size-4 shadow-lg rounded-md border-2 border-black transition-all hover:scale-110 disabled:opacity-50 disabled:cursor-not-allowed",
+            color.hex === presetColor ? "border-foreground ring-2 ring-foreground/20" : "border-border hover:border-foreground/50"
+          ),
+          style: { backgroundColor: presetColor },
+          onClick: () => handleColorChange(presetColor),
+          "aria-label": `Select color ${presetColor}`
+        },
+        presetColor
+      )) }),
+      /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+          Button,
+          {
+            ref,
+            variant: "outline",
+            disabled,
+            className: cn("w-full justify-start text-left font-normal", !value && "text-muted-foreground", className),
+            children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx("div", { className: "h-4 w-4 border border-border rounded-sm", style: { backgroundColor: color.hex, width: 20, height: 20 } }),
+              /* @__PURE__ */ jsxRuntime.jsx("span", { children: color.hex })
+            ] })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverContent, { className: "w-auto p-3", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(reactColorPalette.ColorPicker, { color, onChange: handlePickerChange, hideInput }) })
+      ] })
+    ] });
+  }
+);
 var ComboboxInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -12745,6 +13030,61 @@ var FieldFileMultiUpload = ({ input, form, isSubmitting }) => {
   );
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
+var useKeyboardStore = zustand.create((set, get) => ({
+  activeInput: null,
+  inputs: {},
+  isOpen: false,
+  setIsOpen() {
+    set({ isOpen: !get().isOpen });
+  },
+  registerInput: (id, initialValue = "") => set((state) => ({
+    inputs: {
+      ...state.inputs,
+      [id]: initialValue
+    }
+  })),
+  unregisterInput: (id) => set((state) => {
+    const newInputs = { ...state.inputs };
+    delete newInputs[id];
+    return { inputs: newInputs };
+  }),
+  focusInput: (id) => set({ activeInput: id }),
+  write: (char) => set((state) => {
+    if (!state.activeInput) return state;
+    const current = state.inputs[state.activeInput] || "";
+    return {
+      inputs: {
+        ...state.inputs,
+        [state.activeInput]: current + char
+      }
+    };
+  }),
+  backspace: () => set((state) => {
+    if (!state.activeInput) return state;
+    const current = state.inputs[state.activeInput] || "";
+    return {
+      inputs: {
+        ...state.inputs,
+        [state.activeInput]: current.slice(0, -1)
+      }
+    };
+  }),
+  clear: () => set((state) => {
+    if (!state.activeInput) return state;
+    return {
+      inputs: {
+        ...state.inputs,
+        [state.activeInput]: ""
+      }
+    };
+  }),
+  setValue: (id, value) => set((state) => ({
+    inputs: {
+      ...state.inputs,
+      [id]: value
+    }
+  }))
+}));
 var TextInputGroup = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -12789,6 +13129,7 @@ var CustomInputGroup = ({
   isValid,
   autoCapitalize = "none"
 }) => {
+  const withKeyboard = input.withKeyboard;
   const groupConfig = input.inputGroupConfig;
   const infoTooltip = input?.infoTooltip;
   const autoValidate = groupConfig?.autoValidIcons ?? input.zodType ? true : false;
@@ -12803,6 +13144,7 @@ var CustomInputGroup = ({
   const isPasswordField = input.keyboardType === "password" /* PASSWORD */;
   const isNumberField = input.keyboardType === "number" /* NUMBER */;
   const showInputGroupAddons = iconsRight.length > 0 || textRight || autoValidate || infoTooltip || isPasswordField;
+  const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
   const applyMask = (value2, mask) => {
     if (!mask) return value2;
     if (typeof mask === "string") {
@@ -12917,6 +13259,7 @@ var CustomInputGroup = ({
           children: showPassword ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.EyeOff, { size: 20 }) : /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Eye, { size: 20 })
         }
       ),
+      withKeyboard && /* @__PURE__ */ jsxRuntime.jsx("button", { type: "button", className: "text-2xl", onClick: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Keyboard, {}) }),
       autoValidate && /* @__PURE__ */ jsxRuntime.jsx("div", { children: isSubmitting ? iconLoadingState : isValid ? iconValidState : iconInvalidState })
     ] })
   ] });
@@ -13342,64 +13685,6 @@ var FieldRepeater = ({ form, input, isSubmitting }) => {
     }
   );
 };
-function Tabs({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TabsPrimitive__namespace.Root,
-    {
-      "data-slot": "tabs",
-      className: cn("flex flex-col gap-2", className),
-      ...props
-    }
-  );
-}
-function TabsList({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TabsPrimitive__namespace.List,
-    {
-      "data-slot": "tabs-list",
-      className: cn(
-        "bg-muted text-muted-foreground inline-flex h-9 w-fit items-center justify-center rounded-lg p-[3px]",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TabsTrigger({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TabsPrimitive__namespace.Trigger,
-    {
-      "data-slot": "tabs-trigger",
-      className: cn(
-        "data-[state=active]:bg-background dark:data-[state=active]:text-foreground focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:outline-ring dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 text-foreground dark:text-muted-foreground inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:shadow-sm [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props
-    }
-  );
-}
-function TabsContent({
-  className,
-  ...props
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    TabsPrimitive__namespace.Content,
-    {
-      "data-slot": "tabs-content",
-      className: cn("flex-1 outline-none", className),
-      ...props
-    }
-  );
-}
 var RepeaterTabsInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -13686,62 +13971,6 @@ var FieldSimpleCheckList = ({ input, value, onChange, isSubmitting }) => {
   ] });
   return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: formField });
 };
-function Slider({
-  className,
-  defaultValue,
-  value,
-  min = 0,
-  max = 100,
-  ...props
-}) {
-  const _values = React3__namespace.useMemo(
-    () => Array.isArray(value) ? value : Array.isArray(defaultValue) ? defaultValue : [min, max],
-    [value, defaultValue, min, max]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsxs(
-    SliderPrimitive__namespace.Root,
-    {
-      "data-slot": "slider",
-      defaultValue,
-      value,
-      min,
-      max,
-      className: cn(
-        "relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
-        className
-      ),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SliderPrimitive__namespace.Track,
-          {
-            "data-slot": "slider-track",
-            className: cn(
-              "bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
-            ),
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              SliderPrimitive__namespace.Range,
-              {
-                "data-slot": "slider-range",
-                className: cn(
-                  "bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
-                )
-              }
-            )
-          }
-        ),
-        Array.from({ length: _values.length }, (_, index) => /* @__PURE__ */ jsxRuntime.jsx(
-          SliderPrimitive__namespace.Thumb,
-          {
-            "data-slot": "slider-thumb",
-            className: "border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
-          },
-          index
-        ))
-      ]
-    }
-  );
-}
 var SliderInput = class extends BaseInput {
   render() {
     const { input, form, isSubmitting } = this;
@@ -16088,61 +16317,6 @@ var FormWrapper = ({ form, handleSubmit, children, readOnly, debug, isWrapInWiza
     }
   ) });
 };
-function Stepper({ steps, currentStep, clickable = false, onStepClick }) {
-  const handleStepClick = (stepNumber) => {
-    if (clickable && onStepClick) {
-      onStepClick(stepNumber);
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: "w-full", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "flex flex-row gap-4 items-center justify-around", children: steps.map((step, index) => {
-    const stepNumber = index + 1;
-    const isCompleted = stepNumber < currentStep;
-    const isCurrent = stepNumber === currentStep;
-    const isUpcoming = stepNumber > currentStep;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-1 items-center", children: [
-      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center", children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          "div",
-          {
-            onClick: () => handleStepClick(stepNumber),
-            className: cn(
-              "flex size-10 items-center shadow-lg  justify-center rounded-full border-2 transition-all duration-300",
-              isCompleted && "border-primary bg-primary text-primary-foreground",
-              isCurrent && "border-primary bg-background text-primary scale-110",
-              isUpcoming && "border-muted-foreground/60 bg-background border-b text-muted-foreground",
-              clickable && "cursor-pointer hover:scale-125 hover:shadow-xl",
-              !clickable && "cursor-default"
-            ),
-            children: isCompleted ? /* @__PURE__ */ jsxRuntime.jsx(lucideReact.Check, { className: "size-5" }) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-sm font-semibold", children: stepNumber })
-          }
-        ),
-        step.title && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "mt-3 text-center", children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "p",
-            {
-              className: cn(
-                "text-sm font-medium transition-colors",
-                (isCompleted || isCurrent) && "text-foreground",
-                isUpcoming && "text-muted-foreground"
-              ),
-              children: step.title
-            }
-          ),
-          step.description && /* @__PURE__ */ jsxRuntime.jsx("p", { className: "mt-1 text-xs text-muted-foreground max-w-[120px]", children: step.description })
-        ] })
-      ] }),
-      index < steps.length - 1 && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mx-2 flex-1 mb-8", children: /* @__PURE__ */ jsxRuntime.jsx(
-        "div",
-        {
-          className: cn(
-            "h-0.5 w-full transition-all duration-300",
-            stepNumber < currentStep ? "bg-primary" : "bg-muted-foreground/30"
-          )
-        }
-      ) })
-    ] }, index);
-  }) }) });
-}
 var WizardForm = ({
   fields,
   record,
@@ -16365,6 +16539,18 @@ var InputList = ({ handleAddInput, inputsTypes }) => {
     );
   }) });
 };
+var CustomSheet = ({ title = "", children, childrenHeader, isOpen, className, side = "bottom" }) => {
+  const setIsOpen = useKeyboardStore((state) => state.setIsOpen);
+  const storeIsOpen = useKeyboardStore((state) => state.isOpen);
+  const controlledIsOpen = typeof isOpen === "boolean" ? isOpen : storeIsOpen;
+  return /* @__PURE__ */ jsxRuntime.jsx(Sheet, { open: controlledIsOpen, onOpenChange: setIsOpen, children: /* @__PURE__ */ jsxRuntime.jsxs(SheetContent, { side, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(SheetHeader, { children: [
+      /* @__PURE__ */ jsxRuntime.jsx(SheetTitle, { children: title }),
+      /* @__PURE__ */ jsxRuntime.jsx(SheetDescription, { children: childrenHeader })
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(SheetFooter, { children })
+  ] }) });
+};
 var GenericFilter = ({
   filters = [],
   pagination,
@@ -16623,6 +16809,7 @@ exports.CommandShortcut = CommandShortcut;
 exports.CurrencyInput = CurrencyInput;
 exports.CustomAlert = CustomAlert;
 exports.CustomInputGroup = CustomInputGroup;
+exports.CustomSheet = CustomSheet;
 exports.DateInput = DateInput;
 exports.DateTimeInput = DateTimeInput;
 exports.Dialog = Dialog;