najm-kit 2.1.37 → 2.1.39

package/dist/index.mjs

@@ -6,20 +6,20 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as LucideIcons from 'lucide-react';
-import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, RotateCcw, X, XIcon, Menu, Search, ChevronRightIcon, CheckIcon, CircleIcon, ChevronDownIcon, ChevronUpIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, ChevronUp, Folder, Eye, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, UploadCloud, CheckCircle2, AlertCircle, Star, Globe, Clock, Upload, Plus, Trash2, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Copy, Scissors, Download, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
+import { ChevronDown, AlertTriangle, RefreshCw, LoaderCircleIcon, ChevronDownIcon, ChevronUpIcon, CheckIcon, Upload, Download, RotateCcw, X, XIcon, Menu, Search, ChevronRightIcon, CircleIcon, ChevronLeftIcon, SearchIcon, Table as Table$1, FileJson, ChevronRight, ArrowUpDown, Loader2, ChevronUp, Folder, Eye, EyeOff, ChevronsUpDown, Check, Calendar as Calendar$1, FileUp, UploadCloud, CheckCircle2, AlertCircle, Camera, Star, Globe, Clock, Plus, Trash2, MoreVertical, Edit, ChevronsLeft, ChevronLeft, ChevronsRight, Pencil, Merge, PanelLeftOpen, PanelLeftClose, LogOut, Image, ArrowUp, ArrowDown, CheckSquare, FilePlus, FolderPlus, Share2, Move, ClipboardPaste, Copy, Scissors, LoaderPinwheelIcon, LoaderIcon, ArrowUpRight, ArrowDownRight, SlidersHorizontal, Columns3, Settings, Filter, SearchX, Inbox, List, LayoutGrid, Code, FolderOpen } from 'lucide-react';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import { cva } from 'class-variance-authority';
 import { HexColorPicker } from 'react-colorful';
 import * as PopoverPrimitive from '@radix-ui/react-popover';
 import { converter, parse, formatHsl, formatRgb, formatHex } from 'culori';
 import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as SelectPrimitive from '@radix-ui/react-select';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as LabelPrimitive from '@radix-ui/react-label';
 import * as SheetPrimitive from '@radix-ui/react-dialog';
 import { OverlayScrollbarsComponent } from 'overlayscrollbars-react';
 import { create } from 'zustand';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import * as SelectPrimitive from '@radix-ui/react-select';
 import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as ProgressPrimitive from '@radix-ui/react-progress';
@@ -254,6 +254,10 @@ function resolveThemeTokens({
   return null;
 }
 var NajmThemeDepthContext = React.createContext(0);
+var NajmThemeModeContext = React.createContext(void 0);
+function useNajmThemeMode() {
+  return React.useContext(NajmThemeModeContext);
+}
 var NajmThemeContainerCtx = React.createContext(null);
 var DEFAULT_APPEARANCE = {};
 var NajmAppearanceContext = React.createContext(DEFAULT_APPEARANCE);
@@ -274,6 +278,7 @@ function NajmThemeProvider({
   children
 }) {
   const depth = React.useContext(NajmThemeDepthContext);
+  const parentMode = React.useContext(NajmThemeModeContext);
   const parentAppearance = React.useContext(NajmAppearanceContext);
   const effectivePreset = preset ?? config?.preset;
   const effectiveMode = mode ?? config?.mode;
@@ -322,7 +327,7 @@ function NajmThemeProvider({
     () => ({ ...parentAppearance, ...config?.appearance ?? {}, ...appearance ?? {} }),
     [parentAppearance, config?.appearance, appearance]
   );
-  return /* @__PURE__ */ jsx(NajmThemeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(NajmAppearanceContext.Provider, { value: resolvedAppearance, children: /* @__PURE__ */ jsx(NajmThemeContainerCtx.Provider, { value: container, children: /* @__PURE__ */ jsx(
+  return /* @__PURE__ */ jsx(NajmThemeDepthContext.Provider, { value: depth + 1, children: /* @__PURE__ */ jsx(NajmThemeModeContext.Provider, { value: effectiveMode ?? parentMode, children: /* @__PURE__ */ jsx(NajmAppearanceContext.Provider, { value: resolvedAppearance, children: /* @__PURE__ */ jsx(NajmThemeContainerCtx.Provider, { value: container, children: /* @__PURE__ */ jsx(
     Comp,
     {
       ref: handleContainerRef,
@@ -332,7 +337,7 @@ function NajmThemeProvider({
       style,
       children
     }
-  ) }) }) });
+  ) }) }) }) });
 }
 function cn(...inputs) {
   return twMerge(clsx(inputs));
@@ -1514,7 +1519,7 @@ var BaseInput = React__default.forwardRef(
         colorClass = PRESETS2[borderColor] ?? (NO_SHADE.has(borderColor) ? `border-${borderColor}` : `border-${borderColor}-600`);
       } else {
         const restingBorderClass = inputBorderClasses(isBordered);
-        borderClass = isBordered ? `${STATIC_BASE} ${restingBorderClass} hover:border-input focus-within:border-primary/70` : restingBorderClass;
+        borderClass = isBordered ? `${STATIC_BASE} ${restingBorderClass} [&:not(:focus-within):not([data-state=open]):hover]:border-input focus-within:border-ring data-[state=open]:border-ring` : restingBorderClass;
       }
     }
     return /* @__PURE__ */ jsx(
@@ -1974,34 +1979,179 @@ function ResetButton({
     }
   );
 }
-var NativeSelect = React.forwardRef(
-  ({ className, options, placeholder, value, ...props }, ref) => {
-    const hasValue = value !== void 0 && value !== "";
-    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
-      /* @__PURE__ */ jsxs(
-        "select",
-        {
-          ref,
-          value,
-          className: cn(
-            "flex h-10 w-full appearance-none rounded-md border border-input bg-card px-3 py-1.5 pr-8 text-sm text-foreground shadow-sm transition-colors",
-            "hover:border-muted-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            !hasValue && "text-muted-foreground",
-            className
-          ),
-          ...props,
-          children: [
-            placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
-            options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
-          ]
-        }
+function Select({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
+}
+function SelectGroup({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
+}
+function SelectValue({ ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
+}
+function SelectTrigger({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Trigger,
+    {
+      "data-slot": "select-trigger",
+      className: cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className
       ),
-      /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" })
-    ] });
-  }
-);
-NativeSelect.displayName = "NativeSelect";
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
+      ]
+    }
+  );
+}
+function SelectScrollUpButton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" }) });
+}
+function SelectScrollDownButton({ className, ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" }) });
+}
+function SelectContent({ className, children, position = "popper", style, ...props }) {
+  const container = React.useContext(NajmThemeContainerCtx);
+  const recipe = useNajmComponentStyle("select");
+  const contentSlot = recipe?.slots?.content;
+  const borderWidth = contentSlot?.borderWidth ?? recipe?.borderWidth;
+  const radius = resolveRadiusValue(contentSlot?.radius ?? recipe?.radius);
+  const recipeStyle = {
+    ...radius ? { borderRadius: radius } : {},
+    ...borderWidth !== void 0 ? {
+      borderWidth,
+      borderStyle: borderWidth === "0" ? "none" : "solid",
+      borderColor: "var(--border)"
+    } : {}
+  };
+  useNajmPortalLayerStyles();
+  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxs(
+    SelectPrimitive.Content,
+    {
+      "data-slot": "select-content",
+      className: cn(
+        "bg-popover text-popover-foreground 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 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 relative z-[10000] max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-hidden rounded-md shadow-md",
+        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
+        contentSlot?.className,
+        className
+      ),
+      style: { ...recipeStyle, ...style },
+      position,
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
+        /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children }),
+        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
+      ]
+    }
+  ) });
+}
+function SelectLabel({ className, ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("text-muted-foreground px-2 py-1.5 text-xs", className), ...props });
+}
+function SelectItem({ className, children, ...props }) {
+  return /* @__PURE__ */ jsxs(
+    SelectPrimitive.Item,
+    {
+      "data-slot": "select-item",
+      className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
+        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
+      ]
+    }
+  );
+}
+function SelectSeparator({ className, ...props }) {
+  return /* @__PURE__ */ jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("bg-muted pointer-events-none -mx-1 my-1 h-px", className), ...props });
+}
+function getIconColorProps(iconColor, baseClassName = "") {
+  if (!iconColor) return { className: cn(baseClassName, "text-muted-foreground"), style: {} };
+  if (iconColor.startsWith("text-")) return { className: cn(baseClassName, iconColor), style: {} };
+  return { className: baseClassName, style: { color: iconColor } };
+}
+function resolveIcon(icon) {
+  if (!icon) return null;
+  return /* @__PURE__ */ jsx(NIcon, { icon, size: 16 });
+}
+var EMPTY_VALUE = "__najm_select_empty_value__";
+function renderItems(items) {
+  return items.map((item) => {
+    const value = typeof item === "string" ? item : item.value;
+    const label = typeof item === "string" ? item : item.label;
+    const internalValue = value === "" ? EMPTY_VALUE : value;
+    return /* @__PURE__ */ jsx(SelectItem, { value: internalValue, children: label }, internalValue);
+  });
+}
+var SelectInput = ({ placeholder = "", ariaLabel, value, onChange, icon, showIcon = true, iconColor, items, className = "", dropdownClassName, variant = "default", status = "default", bordered, borderColor, disabled = false }) => {
+  const shouldDisplayIcon = Boolean(icon) && showIcon && !value;
+  const iconProps = getIconColorProps(iconColor, "h-4 w-4");
+  const found = items.find(
+    (item) => typeof item === "string" ? item === value : item.value === value
+  );
+  const displayLabel = typeof found === "string" ? found : found?.label ?? value;
+  const [open, setOpen] = React__default.useState(false);
+  const triggerRef = React__default.useRef(null);
+  const pointerDismissedRef = React__default.useRef(false);
+  return /* @__PURE__ */ jsxs("div", { className: cn("group relative", className), children: [
+    /* @__PURE__ */ jsxs(
+      BaseInput,
+      {
+        variant,
+        status,
+        bordered,
+        borderColor,
+        "data-state": open ? "open" : "closed",
+        className: "pointer-events-none group-focus-within:border-ring",
+        children: [
+          shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-sm", !displayLabel && "text-muted-foreground"), children: displayLabel || placeholder }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      Select,
+      {
+        onValueChange: (next) => onChange(next === EMPTY_VALUE ? "" : next),
+        value: value === "" ? EMPTY_VALUE : String(value),
+        disabled,
+        open,
+        onOpenChange: setOpen,
+        children: [
+          /* @__PURE__ */ jsx(
+            SelectTrigger,
+            {
+              ref: triggerRef,
+              className: "absolute inset-0 h-full w-full opacity-0 focus-visible:border-transparent focus-visible:ring-0",
+              disabled,
+              "aria-label": ariaLabel || placeholder || "Select"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SelectContent,
+            {
+              className: dropdownClassName,
+              onPointerDownOutside: () => {
+                pointerDismissedRef.current = true;
+              },
+              onCloseAutoFocus: (event) => {
+                if (!pointerDismissedRef.current) return;
+                event.preventDefault();
+                pointerDismissedRef.current = false;
+                triggerRef.current?.blur();
+              },
+              children: renderItems(items)
+            }
+          )
+        ]
+      },
+      value === "" ? EMPTY_VALUE : String(value)
+    )
+  ] });
+};
 var TRACK = {
   xs: "h-3 w-5",
   sm: "h-4 w-7",
@@ -2438,16 +2588,16 @@ function ThemeCustomizerComponentsLayoutTab({
           label: labels.pageGutter,
           disabled,
           children: /* @__PURE__ */ jsx(
-            NativeSelect,
+            SelectInput,
             {
               value: layout.pageGutter ?? "",
-              onChange: (e) => onChange(setLayoutField(value, "pageGutter", e.target.value || void 0)),
-              options: [
+              onChange: (next) => onChange(setLayoutField(value, "pageGutter", next || void 0)),
+              items: [
                 toOption(labels.defaultOption, ""),
                 ...LAYOUT_SIZE_VALUES.map((value2) => ({ value: value2, label: value2 }))
               ],
               disabled,
-              "aria-label": typeof labels.pageGutter === "string" ? labels.pageGutter : "Page gutter"
+              ariaLabel: typeof labels.pageGutter === "string" ? labels.pageGutter : "Page gutter"
             }
           )
         }
@@ -2458,54 +2608,54 @@ function ThemeCustomizerComponentsLayoutTab({
           label: labels.sectionGap,
           disabled,
           children: /* @__PURE__ */ jsx(
-            NativeSelect,
+            SelectInput,
             {
               value: layout.sectionGap ?? "",
-              onChange: (e) => onChange(setLayoutField(value, "sectionGap", e.target.value || void 0)),
-              options: [
+              onChange: (next) => onChange(setLayoutField(value, "sectionGap", next || void 0)),
+              items: [
                 toOption(labels.defaultOption, ""),
                 ...LAYOUT_SIZE_VALUES.map((value2) => ({ value: value2, label: value2 }))
               ],
               disabled,
-              "aria-label": typeof labels.sectionGap === "string" ? labels.sectionGap : "Section gap"
+              ariaLabel: typeof labels.sectionGap === "string" ? labels.sectionGap : "Section gap"
             }
           )
         }
       ),
       /* @__PURE__ */ jsx(CustomizerField, { label: labels.globalBorderWidth, disabled, children: /* @__PURE__ */ jsx(
-        NativeSelect,
+        SelectInput,
         {
           value: value.theme.appearance?.borderWidth ?? "1px",
-          onChange: (event) => onChange(setThemeField(value, "appearance", {
+          onChange: (next) => onChange(setThemeField(value, "appearance", {
             ...value.theme.appearance ?? {},
-            borderWidth: event.target.value
+            borderWidth: next
           })),
-          options: BORDER_WIDTH_VALUES.map((borderWidth) => ({ value: borderWidth, label: borderWidth })),
+          items: BORDER_WIDTH_VALUES.map((borderWidth) => ({ value: borderWidth, label: borderWidth })),
           disabled,
-          "aria-label": typeof labels.globalBorderWidth === "string" ? labels.globalBorderWidth : "Border width"
+          ariaLabel: typeof labels.globalBorderWidth === "string" ? labels.globalBorderWidth : "Border width"
         }
       ) }),
       /* @__PURE__ */ jsx(CustomizerField, { label: labels.inputBorderWidth, disabled, children: /* @__PURE__ */ jsx(
-        NativeSelect,
+        SelectInput,
         {
           value: components.input?.borderWidth ?? "",
-          onChange: (e) => onChange(setComponentField(value, "input", "borderWidth", e.target.value || void 0)),
-          options: [
+          onChange: (next) => onChange(setComponentField(value, "input", "borderWidth", next || void 0)),
+          items: [
             toOption(labels.defaultOption, ""),
             ...COMPONENT_BORDER_WIDTH_VALUES.map((value2) => ({ value: value2, label: value2 }))
           ],
           disabled,
-          "aria-label": typeof labels.inputBorderWidth === "string" ? labels.inputBorderWidth : "Input border width"
+          ariaLabel: typeof labels.inputBorderWidth === "string" ? labels.inputBorderWidth : "Input border width"
         }
       ) }),
       /* @__PURE__ */ jsx(CustomizerField, { className: "col-span-2", label: labels.globalRadius, disabled, children: /* @__PURE__ */ jsx(
-        NativeSelect,
+        SelectInput,
         {
           value: value.theme.radius ?? "8px",
-          onChange: (event) => onChange(setThemeField(value, "radius", event.target.value)),
-          options: RADIUS_VALUES.map((radius) => ({ value: radius, label: radius })),
+          onChange: (next) => onChange(setThemeField(value, "radius", next)),
+          items: RADIUS_VALUES.map((radius) => ({ value: radius, label: radius })),
           disabled,
-          "aria-label": typeof labels.globalRadius === "string" ? labels.globalRadius : "Radius"
+          ariaLabel: typeof labels.globalRadius === "string" ? labels.globalRadius : "Radius"
         }
       ) })
     ] }) }),
@@ -2859,6 +3009,9 @@ var DEFAULT_LABELS = {
   darkMode: "Dark",
   resetField: "Reset",
   resetSection: "Reset section",
+  importTheme: "Import",
+  exportTheme: "Export",
+  invalidThemeFile: "Invalid theme file",
   colorSwatchFallback: "Color",
   defaultOption: "Default",
   themeSection: "Theme",
@@ -2908,12 +3061,12 @@ function ThemeCustomizerThemeTab({
   onChange,
   previewMode,
   onPreviewModeChange,
-  showPreviewMode = true,
+  showPreviewMode = false,
   labels,
   disabled
 }) {
   return /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-3", children: [
-    showPreviewMode && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
+    showPreviewMode && onPreviewModeChange && /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1.5", children: [
       /* @__PURE__ */ jsx("span", { className: "text-xs font-medium text-muted-foreground", children: labels.previewMode }),
       /* @__PURE__ */ jsx(
         SegmentedControl,
@@ -3144,16 +3297,16 @@ function ThemeCustomizerTypographyTab({
         label: labels.baseSize,
         disabled,
         children: /* @__PURE__ */ jsx(
-          NativeSelect,
+          SelectInput,
           {
             value: typography.baseSize ?? "",
-            onChange: (e) => handleTypography("baseSize", e.target.value || void 0),
-            options: [
+            onChange: (next) => handleTypography("baseSize", next || void 0),
+            items: [
               toOption(labels.defaultOption, ""),
               ...FONT_SIZE_VALUES.map((value2) => ({ value: value2, label: value2 }))
             ],
             disabled,
-            "aria-label": typeof labels.baseSize === "string" ? labels.baseSize : "Base size"
+            ariaLabel: typeof labels.baseSize === "string" ? labels.baseSize : "Base size"
           }
         )
       }
@@ -3187,14 +3340,14 @@ function ThemeCustomizerTypographyTab({
           )
         ] }) : null,
         /* @__PURE__ */ jsx(CustomizerField, { label: labels.scale, disabled, children: /* @__PURE__ */ jsx(
-          NativeSelect,
+          SelectInput,
           {
             value: typography.scale ?? "",
-            onChange: (e) => handleTypography(
+            onChange: (next) => handleTypography(
               "scale",
-              e.target.value || void 0
+              next || void 0
             ),
-            options: [
+            items: [
               toOption(labels.defaultOption, ""),
               ...SCALE_VALUES.map((o) => ({
                 value: o.value,
@@ -3204,33 +3357,33 @@ function ThemeCustomizerTypographyTab({
               }))
             ],
             disabled,
-            "aria-label": typeof labels.scale === "string" ? labels.scale : "Scale"
+            ariaLabel: typeof labels.scale === "string" ? labels.scale : "Scale"
           }
         ) }),
         /* @__PURE__ */ jsx(CustomizerField, { label: labels.lineHeight, disabled, children: /* @__PURE__ */ jsx(
-          NativeSelect,
+          SelectInput,
           {
             value: typography.lineHeight ?? "",
-            onChange: (e) => handleTypography("lineHeight", e.target.value || void 0),
-            options: [
+            onChange: (next) => handleTypography("lineHeight", next || void 0),
+            items: [
               toOption(labels.defaultOption, ""),
               ...LINE_HEIGHT_VALUES.map((value2) => ({ value: value2, label: value2 }))
             ],
             disabled,
-            "aria-label": typeof labels.lineHeight === "string" ? labels.lineHeight : "Line height"
+            ariaLabel: typeof labels.lineHeight === "string" ? labels.lineHeight : "Line height"
           }
         ) }),
         /* @__PURE__ */ jsx(CustomizerField, { label: labels.letterSpacing, disabled, children: /* @__PURE__ */ jsx(
-          NativeSelect,
+          SelectInput,
           {
             value: typography.letterSpacing ?? "",
-            onChange: (e) => handleTypography("letterSpacing", e.target.value || void 0),
-            options: [
+            onChange: (next) => handleTypography("letterSpacing", next || void 0),
+            items: [
               toOption(labels.defaultOption, ""),
               ...LETTER_SPACING_VALUES.map((value2) => ({ value: value2, label: value2 }))
             ],
             disabled,
-            "aria-label": typeof labels.letterSpacing === "string" ? labels.letterSpacing : "Letter spacing"
+            ariaLabel: typeof labels.letterSpacing === "string" ? labels.letterSpacing : "Letter spacing"
           }
         ) })
       ] })
@@ -3267,18 +3420,33 @@ function FontSelect({
       label,
       disabled,
       children: /* @__PURE__ */ jsx(
-        NativeSelect,
+        SelectInput,
         {
           value: value ?? "",
-          onChange: (e) => onChange(e.target.value || void 0),
-          options,
+          onChange: (next) => onChange(next || void 0),
+          items: options,
           disabled,
-          "aria-label": typeof label === "string" ? label : "Font"
+          ariaLabel: typeof label === "string" ? label : "Font"
         }
       )
     }
   );
 }
+
+// src/components/ThemeCustomizer/theme-customizer-file.ts
+var DEFAULT_THEME_FILE_NAME = "najm-theme.json";
+function parseThemeFile(content) {
+  return parseNajmDesignConfig(JSON.parse(content));
+}
+function stringifyThemeFile(config) {
+  return `${JSON.stringify(config, null, 2)}
+`;
+}
+function normalizeThemeFileName(fileName) {
+  const trimmed = fileName?.trim();
+  if (!trimmed) return DEFAULT_THEME_FILE_NAME;
+  return trimmed.toLowerCase().endsWith(".json") ? trimmed : `${trimmed}.json`;
+}
 var DEFAULT_TABS = [
   "theme",
   "typography"
@@ -3317,7 +3485,11 @@ function NThemeCustomizer({
   onChange,
   previewMode,
   onPreviewModeChange,
-  showPreviewMode = true,
+  showPreviewMode = false,
+  showFileActions = true,
+  showResetAction = true,
+  exportFileName,
+  onImportError,
   showTabs = true,
   tabs,
   fontOptions,
@@ -3325,9 +3497,13 @@ function NThemeCustomizer({
   disabled = false,
   className
 }) {
+  const inheritedMode = useNajmThemeMode();
+  const resolvedPreviewMode = previewMode ?? inheritedMode ?? value.theme.mode ?? "light";
   const visibleTabs = React.useMemo(() => buildTabs(tabs), [tabs]);
   const firstTab = visibleTabs[0] ?? "theme";
   const [activeTab, setActiveTab] = React.useState(TAB_VALUE[firstTab]);
+  const [fileError, setFileError] = React.useState(false);
+  const fileInputRef = React.useRef(null);
   React.useEffect(() => {
     setActiveTab(TAB_VALUE[firstTab]);
   }, [firstTab]);
@@ -3335,6 +3511,9 @@ function NThemeCustomizer({
   const typographyLabel = resolveLabel("typographyTab", labels);
   const resetSectionLabel = resolveLabel("resetSection", labels);
   const resetFieldLabel = resolveLabel("resetField", labels);
+  const importThemeLabel = resolveLabel("importTheme", labels);
+  const exportThemeLabel = resolveLabel("exportTheme", labels);
+  const invalidThemeFileLabel = resolveLabel("invalidThemeFile", labels);
   const defaultOptionLabel = resolveLabel("defaultOption", labels);
   const colorSwatchFallbackLabel = resolveLabel("colorSwatchFallback", labels);
   const tokenLabels = React.useMemo(() => {
@@ -3387,9 +3566,9 @@ function NThemeCustomizer({
         value,
         factoryValue,
         onChange,
-        previewMode,
+        previewMode: resolvedPreviewMode,
         onPreviewModeChange,
-        showPreviewMode,
+        showPreviewMode: showPreviewMode && Boolean(onPreviewModeChange),
         disabled,
         labels: {
           resetField: resetFieldLabel,
@@ -3492,6 +3671,32 @@ function NThemeCustomizer({
     if (target === TAB_VALUE.theme) handleResetTheme();
     else handleResetTypography();
   };
+  const handleImportFile = async (event) => {
+    const input = event.currentTarget;
+    const file = input.files?.[0];
+    input.value = "";
+    if (!file) return;
+    try {
+      const imported = parseThemeFile(await file.text());
+      setFileError(false);
+      onChange(imported);
+    } catch (cause) {
+      const error = cause instanceof Error ? cause : new Error(String(cause));
+      setFileError(true);
+      onImportError?.(error);
+    }
+  };
+  const handleExportFile = () => {
+    const blob = new Blob([stringifyThemeFile(value)], {
+      type: "application/json"
+    });
+    const url = URL.createObjectURL(blob);
+    const anchor = document.createElement("a");
+    anchor.href = url;
+    anchor.download = normalizeThemeFileName(exportFileName);
+    anchor.click();
+    URL.revokeObjectURL(url);
+  };
   const directContent = items[0]?.content ?? themeContent;
   return /* @__PURE__ */ jsxs(
     "div",
@@ -3518,21 +3723,65 @@ function NThemeCustomizer({
             }
           }
         ) : directContent,
-        /* @__PURE__ */ jsx("div", { className: "flex items-center justify-end", children: /* @__PURE__ */ jsxs(
-          NButton,
-          {
-            type: "button",
-            variant: "outline",
-            size: "sm",
-            onClick: handleReset,
-            disabled,
-            "aria-label": typeof resetSectionLabel === "string" || typeof resetSectionLabel === "number" ? String(resetSectionLabel) : "Reset section",
-            children: [
-              /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5" }),
-              /* @__PURE__ */ jsx("span", { children: resetSectionLabel })
-            ]
-          }
-        ) })
+        fileError ? /* @__PURE__ */ jsx("p", { role: "alert", className: "text-xs text-destructive", children: invalidThemeFileLabel }) : null,
+        showFileActions || showResetAction ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center justify-between gap-2", children: [
+          showFileActions ? /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+            /* @__PURE__ */ jsx(
+              "input",
+              {
+                ref: fileInputRef,
+                type: "file",
+                accept: ".json,application/json",
+                className: "sr-only",
+                disabled,
+                onChange: (event) => void handleImportFile(event)
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              NButton,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                onClick: () => fileInputRef.current?.click(),
+                disabled,
+                children: [
+                  /* @__PURE__ */ jsx(Upload, { className: "size-3.5" }),
+                  /* @__PURE__ */ jsx("span", { children: importThemeLabel })
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxs(
+              NButton,
+              {
+                type: "button",
+                variant: "outline",
+                size: "sm",
+                onClick: handleExportFile,
+                disabled,
+                children: [
+                  /* @__PURE__ */ jsx(Download, { className: "size-3.5" }),
+                  /* @__PURE__ */ jsx("span", { children: exportThemeLabel })
+                ]
+              }
+            )
+          ] }) : null,
+          showResetAction ? /* @__PURE__ */ jsxs(
+            NButton,
+            {
+              type: "button",
+              variant: "outline",
+              size: "sm",
+              onClick: handleReset,
+              disabled,
+              "aria-label": typeof resetSectionLabel === "string" || typeof resetSectionLabel === "number" ? String(resetSectionLabel) : "Reset section",
+              children: [
+                /* @__PURE__ */ jsx(RotateCcw, { className: "size-3.5" }),
+                /* @__PURE__ */ jsx("span", { children: resetSectionLabel })
+              ]
+            }
+          ) : null
+        ] }) : null
       ]
     }
   );
@@ -4100,7 +4349,7 @@ function Textarea({ className, ...props }) {
     }
   );
 }
-function Label({ className, ...props }) {
+function Label2({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     LabelPrimitive.Root,
     {
@@ -5781,94 +6030,34 @@ function DropdownMenuSeparator({ className, ...props }) {
 function DropdownMenuShortcut({ className, ...props }) {
   return /* @__PURE__ */ jsx("span", { "data-slot": "dropdown-menu-shortcut", className: cn("text-muted-foreground ml-auto text-xs tracking-widest", className), ...props });
 }
-function Select({ ...props }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
-}
-function SelectGroup({ ...props }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
-}
-function SelectValue({ ...props }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
-}
-function SelectTrigger({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    SelectPrimitive.Trigger,
-    {
-      "data-slot": "select-trigger",
-      className: cn(
-        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })
-      ]
-    }
-  );
-}
-function SelectScrollUpButton({ className, ...props }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronUpIcon, { className: "size-4" }) });
-}
-function SelectScrollDownButton({ className, ...props }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "size-4" }) });
-}
-function SelectContent({ className, children, position = "popper", style, ...props }) {
-  const container = React.useContext(NajmThemeContainerCtx);
-  const recipe = useNajmComponentStyle("select");
-  const contentSlot = recipe?.slots?.content;
-  const borderWidth = contentSlot?.borderWidth ?? recipe?.borderWidth;
-  const radius = resolveRadiusValue(contentSlot?.radius ?? recipe?.radius);
-  const recipeStyle = {
-    ...radius ? { borderRadius: radius } : {},
-    ...borderWidth !== void 0 ? {
-      borderWidth,
-      borderStyle: borderWidth === "0" ? "none" : "solid",
-      borderColor: "var(--border)"
-    } : {}
-  };
-  useNajmPortalLayerStyles();
-  return /* @__PURE__ */ jsx(SelectPrimitive.Portal, { container: container ?? void 0, children: /* @__PURE__ */ jsxs(
-    SelectPrimitive.Content,
-    {
-      "data-slot": "select-content",
-      className: cn(
-        "bg-popover text-popover-foreground 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 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 relative z-[10000] max-h-(--radix-select-content-available-height) min-w-[8rem] overflow-hidden rounded-md shadow-md",
-        position === "popper" && "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1 w-[var(--radix-select-trigger-width)]",
-        contentSlot?.className,
-        className
+var NativeSelect = React.forwardRef(
+  ({ className, options, placeholder, value, ...props }, ref) => {
+    const hasValue = value !== void 0 && value !== "";
+    return /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+      /* @__PURE__ */ jsxs(
+        "select",
+        {
+          ref,
+          value,
+          className: cn(
+            "flex h-10 w-full appearance-none rounded-md border border-input bg-card px-3 py-1.5 pr-8 text-sm text-foreground shadow-sm transition-colors",
+            "hover:border-muted-foreground/30 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+            "disabled:cursor-not-allowed disabled:opacity-50",
+            !hasValue && "text-muted-foreground",
+            className
+          ),
+          ...props,
+          children: [
+            placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+            options.map((opt) => /* @__PURE__ */ jsx("option", { value: opt.value, children: opt.label }, opt.value))
+          ]
+        }
       ),
-      style: { ...recipeStyle, ...style },
-      position,
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx(SelectScrollUpButton, {}),
-        /* @__PURE__ */ jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" && "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"), children }),
-        /* @__PURE__ */ jsx(SelectScrollDownButton, {})
-      ]
-    }
-  ) });
-}
-function SelectLabel({ className, ...props }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("text-muted-foreground px-2 py-1.5 text-xs", className), ...props });
-}
-function SelectItem({ className, children, ...props }) {
-  return /* @__PURE__ */ jsxs(
-    SelectPrimitive.Item,
-    {
-      "data-slot": "select-item",
-      className: cn("focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-pointer items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none data-[disabled]:pointer-events-none data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className),
-      ...props,
-      children: [
-        /* @__PURE__ */ jsx("span", { className: "absolute right-2 flex size-3.5 items-center justify-center", children: /* @__PURE__ */ jsx(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, { className: "size-4" }) }) }),
-        /* @__PURE__ */ jsx(SelectPrimitive.ItemText, { children })
-      ]
-    }
-  );
-}
-function SelectSeparator({ className, ...props }) {
-  return /* @__PURE__ */ jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("bg-muted pointer-events-none -mx-1 my-1 h-px", className), ...props });
-}
+      /* @__PURE__ */ jsx(ChevronDown, { className: "pointer-events-none absolute right-2 top-1/2 size-4 -translate-y-1/2 text-muted-foreground" })
+    ] });
+  }
+);
+NativeSelect.displayName = "NativeSelect";
 function Checkbox({ className, ...props }) {
   return /* @__PURE__ */ jsx(
     CheckboxPrimitive.Root,
@@ -6598,7 +6787,7 @@ function FormItem({ className, ...props }) {
 }
 function FormLabel({ className, ...props }) {
   const { error, formItemId } = useFormField();
-  return /* @__PURE__ */ jsx(Label, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props });
+  return /* @__PURE__ */ jsx(Label2, { "data-slot": "form-label", "data-error": !!error, className: cn("data-[error=true]:text-destructive", className), htmlFor: formItemId, ...props });
 }
 function FormControl({ ...props }) {
   const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
@@ -7351,14 +7540,14 @@ function NSectionInfo({
   const displayValue = isTruncated ? truncateByCharacters(stringValue, maxChars) : value;
   return /* @__PURE__ */ jsxs("div", { className: cn("flex items-center gap-2", className), children: [
     Icon2 && /* @__PURE__ */ jsx(Icon2, { className: cn("w-4 h-4", iconColor) }),
-    /* @__PURE__ */ jsxs(Label, { className: "text-sm text-muted-foreground", children: [
+    /* @__PURE__ */ jsxs(Label2, { className: "text-sm text-muted-foreground", children: [
       label,
       ":"
     ] }),
     isTruncated ? /* @__PURE__ */ jsxs(Tooltip, { children: [
-      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Label, { className: cn("text-sm cursor-help", valueColor), children: displayValue }) }),
+      /* @__PURE__ */ jsx(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx(Label2, { className: cn("text-sm cursor-help", valueColor), children: displayValue }) }),
       /* @__PURE__ */ jsx(TooltipContent, { children: /* @__PURE__ */ jsx("p", { className: "max-w-xs", children: stringValue }) })
-    ] }) : /* @__PURE__ */ jsx(Label, { className: cn("text-sm", valueColor), children: displayValue })
+    ] }) : /* @__PURE__ */ jsx(Label2, { className: cn("text-sm", valueColor), children: displayValue })
   ] });
 }
 function NSection({
@@ -7372,7 +7561,7 @@ function NSection({
   return /* @__PURE__ */ jsxs("div", { className: cn(background, "flex flex-col gap-1 rounded-lg p-4", className), children: [
     /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 mb-3", children: [
       /* @__PURE__ */ jsx(Icon2, { className: cn("w-5 h-5", iconColor) }),
-      /* @__PURE__ */ jsx(Label, { className: "text-base font-medium text-foreground", children: title })
+      /* @__PURE__ */ jsx(Label2, { className: "text-base font-medium text-foreground", children: title })
     ] }),
     /* @__PURE__ */ jsx("div", { className: "space-y-1", children })
   ] });
@@ -7461,10 +7650,10 @@ function NSectionHeaderRoot({
   );
 }
 function NSectionHeaderTitle({ children, className }) {
-  return /* @__PURE__ */ jsx(Label, { className: cn("text-2xl font-bold text-foreground block", className), children });
+  return /* @__PURE__ */ jsx(Label2, { className: cn("text-2xl font-bold text-foreground block", className), children });
 }
 function NSectionHeaderSubtitle({ children, className }) {
-  return /* @__PURE__ */ jsx(Label, { className: cn("text-muted-foreground block", className), children });
+  return /* @__PURE__ */ jsx(Label2, { className: cn("text-muted-foreground block", className), children });
 }
 function NSectionHeaderContent({ children, className }) {
   return /* @__PURE__ */ jsx("div", { className: cn("mt-3", className), children });
@@ -8776,15 +8965,6 @@ function NFolderIcon({ size = "md", className }) {
   const iconSize = size === "xl" ? 72 : size === "lg" ? 56 : size === "md" ? 28 : 18;
   return /* @__PURE__ */ jsx("span", { className: cn(dim, "inline-flex shrink-0 items-center justify-center", className), children: /* @__PURE__ */ jsx(Folder, { size: iconSize, className: "text-sky-500", fill: "currentColor", strokeWidth: 1.5 }) });
 }
-function getIconColorProps(iconColor, baseClassName = "") {
-  if (!iconColor) return { className: cn(baseClassName, "text-muted-foreground"), style: {} };
-  if (iconColor.startsWith("text-")) return { className: cn(baseClassName, iconColor), style: {} };
-  return { className: baseClassName, style: { color: iconColor } };
-}
-function resolveIcon(icon) {
-  if (!icon) return null;
-  return /* @__PURE__ */ jsx(NIcon, { icon, size: 16 });
-}
 var TextInput = ({ value, onChange, placeholder = "", icon, showIcon = true, iconColor, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, ...props }) => {
   const shouldDisplayIcon = Boolean(icon) && showIcon;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
@@ -8839,41 +9019,10 @@ var TextAreaInput = ({ value, onChange, placeholder = "", className = "", varian
     }
   );
 };
-function renderItems(items) {
-  return items.map((item) => {
-    const value = typeof item === "string" ? item : item.value;
-    const label = typeof item === "string" ? item : item.label;
-    return /* @__PURE__ */ jsx(SelectItem, { value, children: label }, value);
-  });
-}
-var SelectInput = ({ placeholder = "", value, onChange, icon, showIcon = true, iconColor, items, className = "", dropdownClassName, variant = "default", status = "default", bordered, borderColor, disabled = false }) => {
-  const shouldDisplayIcon = Boolean(icon) && showIcon && !value;
-  const iconProps = getIconColorProps(iconColor, "h-4 w-4");
-  const displayLabel = value ? (() => {
-    const found = items.find((i) => typeof i === "string" ? i === value : i.value === value);
-    return typeof found === "string" ? found : found?.label ?? value;
-  })() : "";
-  return /* @__PURE__ */ jsxs("div", { className: cn("relative", className), children: [
-    /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: "pointer-events-none", children: [
-      shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-      /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-sm", !displayLabel && "text-muted-foreground"), children: displayLabel || placeholder }),
-      /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 shrink-0 opacity-50" })
-    ] }),
-    /* @__PURE__ */ jsxs(Select, { onValueChange: onChange, value: String(value || ""), disabled, children: [
-      /* @__PURE__ */ jsx(
-        SelectTrigger,
-        {
-          className: "absolute inset-0 w-full h-full opacity-0",
-          disabled,
-          "aria-label": placeholder || "Select"
-        }
-      ),
-      /* @__PURE__ */ jsx(SelectContent, { className: dropdownClassName, children: renderItems(items) })
-    ] }, String(value))
-  ] });
-};
 var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...", emptyMessage = "No results found.", value, onChange, icon, showIcon = true, iconColor, items = [], className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, allowFreeText = false }) => {
   const [open, setOpen] = useState(false);
+  const triggerRef = React__default.useRef(null);
+  const pointerDismissedRef = React__default.useRef(false);
   const [query, setQuery] = useState("");
   const normalizedItems = items.map((item) => typeof item === "string" ? { value: item, label: item } : item);
   const selectedItem = normalizedItems.find((item) => item.value === value);
@@ -8892,47 +9041,82 @@ var ComboboxInput = ({ placeholder = "Select...", searchPlaceholder = "Search...
     setOpen(o);
     if (!o) setQuery("");
   }, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("cursor-pointer", className), children: [
-      shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-      /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-sm", !displayLabel && "text-muted-foreground"), children: displayLabel || placeholder }),
-      /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
-    ] }) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
-      /* @__PURE__ */ jsx(
-        CommandInput,
-        {
-          placeholder: searchPlaceholder,
-          className: "h-9",
-          value: query,
-          onValueChange: setQuery,
-          onKeyDown: (e) => {
-            if (e.key === "Enter" && showFreeTextOption) {
-              e.preventDefault();
-              commit(trimmedQuery);
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
+      BaseInput,
+      {
+        ref: triggerRef,
+        variant,
+        status,
+        bordered,
+        borderColor,
+        role: "combobox",
+        tabIndex: disabled ? -1 : 0,
+        "aria-expanded": open,
+        className: cn(
+          "cursor-pointer outline-none data-[state=open]:border-ring",
+          className
+        ),
+        children: [
+          shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
+          /* @__PURE__ */ jsx("span", { className: cn("flex-1 truncate text-sm", !displayLabel && "text-muted-foreground"), children: displayLabel || placeholder }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "h-4 w-4 shrink-0 opacity-50" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "w-[var(--radix-popover-trigger-width)] p-0",
+        align: "start",
+        onPointerDownOutside: () => {
+          pointerDismissedRef.current = true;
+        },
+        onCloseAutoFocus: (event) => {
+          if (!pointerDismissedRef.current) return;
+          event.preventDefault();
+          pointerDismissedRef.current = false;
+          triggerRef.current?.blur();
+        },
+        children: /* @__PURE__ */ jsxs(Command, { children: [
+          /* @__PURE__ */ jsx(
+            CommandInput,
+            {
+              placeholder: searchPlaceholder,
+              className: "h-9",
+              value: query,
+              onValueChange: setQuery,
+              onKeyDown: (e) => {
+                if (e.key === "Enter" && showFreeTextOption) {
+                  e.preventDefault();
+                  commit(trimmedQuery);
+                }
+              }
             }
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs(CommandList, { children: [
-        /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
-        /* @__PURE__ */ jsxs(CommandGroup, { children: [
-          showFreeTextOption && /* @__PURE__ */ jsxs(CommandItem, { value: trimmedQuery, onSelect: () => commit(trimmedQuery), className: "cursor-pointer", children: [
-            /* @__PURE__ */ jsx(Check, { className: "mr-2 h-4 w-4 opacity-0" }),
-            'Use "',
-            trimmedQuery,
-            '"'
-          ] }, "__free_text__"),
-          normalizedItems.map((item) => /* @__PURE__ */ jsxs(CommandItem, { value: item.label, keywords: [item.value, item.label], onSelect: () => commit(value === item.value ? "" : item.value), className: "cursor-pointer", children: [
-            /* @__PURE__ */ jsx(Check, { className: cn("mr-2 h-4 w-4", value === item.value ? "opacity-100" : "opacity-0") }),
-            item.label
-          ] }, item.value))
+          ),
+          /* @__PURE__ */ jsxs(CommandList, { children: [
+            /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+            /* @__PURE__ */ jsxs(CommandGroup, { children: [
+              showFreeTextOption && /* @__PURE__ */ jsxs(CommandItem, { value: trimmedQuery, onSelect: () => commit(trimmedQuery), className: "cursor-pointer", children: [
+                /* @__PURE__ */ jsx(Check, { className: "mr-2 h-4 w-4 opacity-0" }),
+                'Use "',
+                trimmedQuery,
+                '"'
+              ] }, "__free_text__"),
+              normalizedItems.map((item) => /* @__PURE__ */ jsxs(CommandItem, { value: item.label, keywords: [item.value, item.label], onSelect: () => commit(value === item.value ? "" : item.value), className: "cursor-pointer", children: [
+                /* @__PURE__ */ jsx(Check, { className: cn("mr-2 h-4 w-4", value === item.value ? "opacity-100" : "opacity-0") }),
+                item.label
+              ] }, item.value))
+            ] })
+          ] })
         ] })
-      ] })
-    ] }) })
+      }
+    )
   ] });
 };
 var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange, icon, showIcon = true, iconColor, items, className = "", variant = "default", status = "default", bordered, borderColor, disabled = false, searchPlaceholder = "Search...", emptyMessage = "No items found.", maxDisplay = 3, showSearch = true }) => {
   const [open, setOpen] = useState(false);
+  const triggerRef = React__default.useRef(null);
+  const pointerDismissedRef = React__default.useRef(false);
   const shouldDisplayIcon = Boolean(icon) && showIcon && value.length === 0;
   const iconProps = getIconColorProps(iconColor, "h-4 w-4");
   const handleSelect = (itemValue) => {
@@ -8945,37 +9129,71 @@ var MultiSelectInput = ({ placeholder = "Select items...", value = [], onChange,
   const displayedItems = value.slice(0, maxDisplay);
   const remainingCount = value.length - maxDisplay;
   return /* @__PURE__ */ jsxs(Popover, { open, onOpenChange: setOpen, children: [
-    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2 cursor-pointer", className, disabled && "cursor-not-allowed opacity-50"), children: [
-      shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
-      /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 flex-1 overflow-hidden", children: value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        displayedItems.map((itemValue) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs px-2 py-0.5 gap-1", children: [
-          getItemLabel(itemValue),
-          !disabled && /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => {
-            e.stopPropagation();
-            onChange(value.filter((v) => v !== itemValue));
-          }, className: "ml-1 hover:text-destructive", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
-        ] }, itemValue)),
-        remainingCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs px-2 py-0.5", children: [
-          "+",
-          remainingCount,
-          " more"
+    /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ jsxs(
+      BaseInput,
+      {
+        ref: triggerRef,
+        variant,
+        status,
+        bordered,
+        borderColor,
+        role: "combobox",
+        tabIndex: disabled ? -1 : 0,
+        "aria-expanded": open,
+        className: cn(
+          "gap-2 cursor-pointer outline-none data-[state=open]:border-ring",
+          className,
+          disabled && "cursor-not-allowed opacity-50"
+        ),
+        children: [
+          shouldDisplayIcon && /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }),
+          /* @__PURE__ */ jsx("div", { className: "flex items-center gap-1 flex-1 overflow-hidden", children: value.length === 0 ? /* @__PURE__ */ jsx("span", { className: "text-muted-foreground text-sm", children: placeholder }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+            displayedItems.map((itemValue) => /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs px-2 py-0.5 gap-1", children: [
+              getItemLabel(itemValue),
+              !disabled && /* @__PURE__ */ jsx("button", { type: "button", onClick: (e) => {
+                e.stopPropagation();
+                onChange(value.filter((v) => v !== itemValue));
+              }, className: "ml-1 hover:text-destructive", children: /* @__PURE__ */ jsx(X, { className: "h-3 w-3" }) })
+            ] }, itemValue)),
+            remainingCount > 0 && /* @__PURE__ */ jsxs(Badge, { variant: "secondary", className: "text-xs px-2 py-0.5", children: [
+              "+",
+              remainingCount,
+              " more"
+            ] })
+          ] }) }),
+          open ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-muted-foreground ml-2 shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground ml-2 shrink-0" })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx(
+      PopoverContent,
+      {
+        className: "w-[var(--radix-popover-trigger-width)] p-0",
+        align: "start",
+        onPointerDownOutside: () => {
+          pointerDismissedRef.current = true;
+        },
+        onCloseAutoFocus: (event) => {
+          if (!pointerDismissedRef.current) return;
+          event.preventDefault();
+          pointerDismissedRef.current = false;
+          triggerRef.current?.blur();
+        },
+        children: /* @__PURE__ */ jsxs(Command, { children: [
+          showSearch && /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, className: "h-9" }),
+          /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
+          /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-[300px] najm-overlay-scroll-y", children: items.map((item) => {
+            const itemValue = typeof item === "string" ? item : item.value;
+            const itemLabel = typeof item === "string" ? item : item.label;
+            const isSelected = value.includes(itemValue);
+            return /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => handleSelect(itemValue), className: "flex items-center gap-2 cursor-pointer", children: [
+              /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: () => handleSelect(itemValue), className: "pointer-events-none" }),
+              /* @__PURE__ */ jsx("span", { className: "flex-1", children: itemLabel })
+            ] }, itemValue);
+          }) })
         ] })
-      ] }) }),
-      open ? /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4 text-muted-foreground ml-2 shrink-0" }) : /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4 text-muted-foreground ml-2 shrink-0" })
-    ] }) }),
-    /* @__PURE__ */ jsx(PopoverContent, { className: "w-[var(--radix-popover-trigger-width)] p-0", align: "start", children: /* @__PURE__ */ jsxs(Command, { children: [
-      showSearch && /* @__PURE__ */ jsx(CommandInput, { placeholder: searchPlaceholder, className: "h-9" }),
-      /* @__PURE__ */ jsx(CommandEmpty, { children: emptyMessage }),
-      /* @__PURE__ */ jsx(CommandGroup, { className: "max-h-[300px] najm-overlay-scroll-y", children: items.map((item) => {
-        const itemValue = typeof item === "string" ? item : item.value;
-        const itemLabel = typeof item === "string" ? item : item.label;
-        const isSelected = value.includes(itemValue);
-        return /* @__PURE__ */ jsxs(CommandItem, { onSelect: () => handleSelect(itemValue), className: "flex items-center gap-2 cursor-pointer", children: [
-          /* @__PURE__ */ jsx(Checkbox, { checked: isSelected, onCheckedChange: () => handleSelect(itemValue), className: "pointer-events-none" }),
-          /* @__PURE__ */ jsx("span", { className: "flex-1", children: itemLabel })
-        ] }, itemValue);
-      }) })
-    ] }) })
+      }
+    )
   ] });
 };
 var layoutVariants = cva("flex items-start", { variants: { layout: { column: "flex-col gap-4", row: "flex-row gap-7" } }, defaultVariants: { layout: "row" } });
@@ -8984,14 +9202,14 @@ var RadioGroupInput = ({ value, onChange, className = "", variant = "default", s
   const itemLabel = typeof item === "string" ? item : item.label;
   return /* @__PURE__ */ jsxs("div", { className: "flex items-center space-y-0", children: [
     /* @__PURE__ */ jsx(RadioGroupItem, { value: itemValue }),
-    /* @__PURE__ */ jsx(Label, { className: "text-sm font-normal peer-disabled:opacity-70 ml-1", children: itemLabel })
+    /* @__PURE__ */ jsx(Label2, { className: "text-sm font-normal peer-disabled:opacity-70 ml-1", children: itemLabel })
   ] }, itemValue);
 }) }) });
 var CheckboxInput = ({ value, onChange, helper, label, checkboxClassName, className, variant = "default", status = "default", bordered, borderColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("flex gap-2 items-center", className), children: [
   /* @__PURE__ */ jsx(Checkbox, { checked: value, onCheckedChange: onChange, className: cn("cursor-pointer transition-colors duration-200 border-primary", checkboxClassName) }),
   /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsx(Label, { className: "cursor-pointer text-muted-foreground", onClick: () => onChange(!value), children: label }),
-    helper && /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground", children: helper })
+    /* @__PURE__ */ jsx(Label2, { className: "cursor-pointer text-muted-foreground", onClick: () => onChange(!value), children: label }),
+    helper && /* @__PURE__ */ jsx(Label2, { className: "text-xs text-muted-foreground", children: helper })
   ] })
 ] });
 var layoutVariants2 = cva("flex items-start", {
@@ -9038,11 +9256,11 @@ function CheckboxGroupInput({
 }
 var SwitchInput = ({ value, onChange, label = "", helper, className = "", variant = "default", status = "default", bordered, borderColor, icon, showIcon = true, iconPosition = "label", iconColor }) => /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2 justify-between items-center", className), children: [
   /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-1", children: [
-    /* @__PURE__ */ jsxs(Label, { className: "flex items-center gap-2", children: [
+    /* @__PURE__ */ jsxs(Label2, { className: "flex items-center gap-2", children: [
       iconPosition === "label" && icon && showIcon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", children: resolveIcon(icon) }),
       label
     ] }),
-    helper && /* @__PURE__ */ jsx(Label, { className: "text-xs text-muted-foreground", children: helper })
+    helper && /* @__PURE__ */ jsx(Label2, { className: "text-xs text-muted-foreground", children: helper })
   ] }),
   /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2", children: [
     iconPosition === "input" && icon && showIcon && /* @__PURE__ */ jsx("span", { className: "w-4 h-4", children: resolveIcon(icon) }),
@@ -9055,7 +9273,7 @@ var DateInput = ({ value, onChange, placeholder = "Pick a date", className = "",
   const toDate = (val) => typeof val === "string" ? parseISO(val) : val;
   return /* @__PURE__ */ jsxs(BaseInput, { variant, status, bordered, borderColor, className, children: [
     /* @__PURE__ */ jsxs(Popover, { children: [
-      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", children: /* @__PURE__ */ jsx(Label, { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(toDate(value), "PPP") : placeholder }) }) }),
+      /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: "w-full flex items-center cursor-pointer gap-2 justify-start text-left font-normal", children: /* @__PURE__ */ jsx(Label2, { className: cn("cursor-pointer", value ? "text-foreground" : "text-muted-foreground"), children: value ? format(toDate(value), "PPP") : placeholder }) }) }),
       /* @__PURE__ */ jsx(PopoverContent, { className: "w-auto p-0", align: "start", children: /* @__PURE__ */ jsx(Calendar, { mode: "single", selected: toDate(value), onSelect: (date) => onChange(toDateString(date)), captionLayout: "dropdown" }) })
     ] }),
     !icon && showIcon && /* @__PURE__ */ jsx(Calendar$1, { className: iconProps.className, style: iconProps.style })
@@ -9080,9 +9298,9 @@ var FileInput = ({ value, onChange, placeholder = "No file chosen", icon, showIc
     /* @__PURE__ */ jsx("input", { type: "file", ref: fileInputRef, onChange: (e) => onChange(e.target.files?.[0] || null), className: "hidden" }),
     /* @__PURE__ */ jsxs("div", { className: "bg-muted flex h-full items-center px-3", children: [
       showIcon && (icon ? /* @__PURE__ */ jsx("span", { className: iconProps.className, style: iconProps.style, children: resolveIcon(icon) }) : /* @__PURE__ */ jsx(FileUp, { className: cn(iconProps.className) })),
-      /* @__PURE__ */ jsx(Label, { className: "flex cursor-pointer h-full justify-center items-center px-2 text-muted-foreground", children: "Choose File" })
+      /* @__PURE__ */ jsx(Label2, { className: "flex cursor-pointer h-full justify-center items-center px-2 text-muted-foreground", children: "Choose File" })
     ] }),
-    /* @__PURE__ */ jsx(Label, { className: "ml-2 flex-1 text-foreground", children: displayFilename() || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) })
+    /* @__PURE__ */ jsx(Label2, { className: "ml-2 flex-1 text-foreground", children: displayFilename() || /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: placeholder }) })
   ] });
 };
 function formatBytes2(bytes) {
@@ -9277,6 +9495,8 @@ function ImageInput({
   value,
   onChange,
   previewClassName,
+  previewStyle,
+  contentClassName,
   showPreview = true,
   previewPosition = "top",
   allowClear = true,
@@ -9288,6 +9508,8 @@ function ImageInput({
   uploadIcon,
   title = "Click to upload",
   subtitle,
+  titleClassName,
+  subtitleClassName,
   replaceTitle = "Replace image",
   replaceSubtitle,
   trigger = "icon",
@@ -9326,15 +9548,16 @@ function ImageInput({
   const renderPreview = () => /* @__PURE__ */ jsx(
     "div",
     {
+      style: previewStyle,
       className: cn(
         "flex relative group rounded-lg overflow-hidden border-2 border-dashed border-muted-foreground/60 hover:border-primary transition-colors",
         effectiveSize
       ),
       children: preview ? isDropzone ? /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx("img", { src: preview, alt: "Preview", className: "absolute inset-0 w-full h-full object-cover" }),
-        /* @__PURE__ */ jsxs("div", { className: "relative w-full h-full flex flex-col items-center justify-center gap-1.5 bg-black/40 text-white px-6 py-8 text-center", children: [
-          /* @__PURE__ */ jsx("span", { className: "text-sm font-medium", children: replaceTitle }),
-          effectiveReplaceSubtitle ? /* @__PURE__ */ jsx("span", { className: "text-xs opacity-80", children: effectiveReplaceSubtitle }) : null,
+        /* @__PURE__ */ jsxs("div", { className: cn("relative w-full h-full flex flex-col items-center justify-center gap-1.5 bg-black/40 text-white px-6 py-8 text-center", contentClassName), children: [
+          /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium", titleClassName), children: replaceTitle }),
+          effectiveReplaceSubtitle ? /* @__PURE__ */ jsx("span", { className: cn("text-xs opacity-80", subtitleClassName), children: effectiveReplaceSubtitle }) : null,
           allowClear && /* @__PURE__ */ jsx(
             "button",
             {
@@ -9381,7 +9604,7 @@ function ImageInput({
         "div",
         {
           onClick: handleClick,
-          className: "w-full h-full flex flex-col items-center justify-center gap-2 cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors px-6 py-8 text-center",
+          className: cn("w-full h-full flex flex-col items-center justify-center gap-2 cursor-pointer bg-muted/30 hover:bg-muted/50 transition-colors px-6 py-8 text-center", contentClassName),
           children: [
             (trigger === "icon" || trigger === "both") && /* @__PURE__ */ jsx("div", { className: "text-primary", children: uploadIcon ?? /* @__PURE__ */ jsx(Plus, { className: "h-8 w-8" }) }),
             (trigger === "button" || trigger === "both") && /* @__PURE__ */ jsx(
@@ -9392,8 +9615,8 @@ function ImageInput({
                 children: buttonLabel
               }
             ),
-            /* @__PURE__ */ jsx("span", { className: "text-sm font-medium text-foreground", children: title }),
-            subtitle ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: subtitle }) : null
+            /* @__PURE__ */ jsx("span", { className: cn("text-sm font-medium text-foreground", titleClassName), children: title }),
+            subtitle ? /* @__PURE__ */ jsx("span", { className: cn("text-xs text-muted-foreground", subtitleClassName), children: subtitle }) : null
           ]
         }
       ) : /* @__PURE__ */ jsxs(
@@ -9432,6 +9655,57 @@ function ImageInput({
     renderFileInput()
   ] });
 }
+var AVATAR_SIZE_MAP = {
+  sm: "size-16",
+  md: "size-24",
+  lg: "size-32",
+  xl: "size-40"
+};
+var AVATAR_RADIUS_MAP = {
+  none: "rounded-none",
+  sm: "rounded-sm",
+  md: "rounded-md",
+  lg: "rounded-lg",
+  xl: "rounded-xl",
+  "2xl": "rounded-2xl",
+  full: "rounded-full"
+};
+function AvatarInput({
+  imageSize = "md",
+  size,
+  radius = "full",
+  previewClassName,
+  previewStyle,
+  contentClassName,
+  uploadIcon,
+  title = "Upload photo",
+  subtitleClassName,
+  trigger = "icon",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ImageInput,
+    {
+      ...props,
+      imageSize,
+      previewClassName: cn(
+        AVATAR_SIZE_MAP[imageSize],
+        "shrink-0",
+        AVATAR_RADIUS_MAP[radius],
+        previewClassName
+      ),
+      previewStyle: {
+        ...previewStyle,
+        ...size != null ? { width: size, height: size } : null
+      },
+      contentClassName: cn("gap-1 p-2", contentClassName),
+      uploadIcon: uploadIcon ?? /* @__PURE__ */ jsx(Camera, { className: "size-6" }),
+      title,
+      subtitleClassName: cn("text-[10px] leading-tight", subtitleClassName),
+      trigger
+    }
+  );
+}
 var StarRatingInput = ({ value, onChange, maxStars = 5, className = "", variant = "default", status = "default", bordered, borderColor }) => {
   const stars = Array.from({ length: maxStars }, (_, i) => /* @__PURE__ */ jsx(Star, { onClick: () => onChange(i + 1), className: cn("cursor-pointer h-8 w-8", i < value ? "fill-orange-400 text-orange-400" : "fill-[#d6d6d6] text-[#d6d6d6]") }, i));
   return /* @__PURE__ */ jsx(BaseInput, { variant, status, bordered, borderColor, className: cn("gap-2", className), children: stars });
@@ -10253,7 +10527,7 @@ function NFormSectionHeader({
       ),
       children: [
         Icon2 && /* @__PURE__ */ jsx(Icon2, { className: "w-4 h-4 shrink-0 text-current" }),
-        /* @__PURE__ */ jsx(Label, { className: "text-sm font-semibold leading-none text-current", children: title })
+        /* @__PURE__ */ jsx(Label2, { className: "text-sm font-semibold leading-none text-current", children: title })
       ]
     }
   );
@@ -10279,6 +10553,7 @@ var Inputs = {
   date: DateInput,
   file: FileInput,
   image: ImageInput,
+  avatar: AvatarInput,
   select: SelectInput,
   combobox: ComboboxInput,
   multiselect: MultiSelectInput,
@@ -10305,7 +10580,7 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
     if (type === "multiselect" || type === "checkboxGroup") return [];
     if (type === "switch" || type === "checkbox") return false;
     if (type === "starRating" || type === "emoji" || type === "slider") return 0;
-    if (type === "image" || type === "file") return null;
+    if (type === "image" || type === "avatar" || type === "file") return null;
     return "";
   };
   const presetInput = type === "textarea" ? preset.input?.replace(/\bh-\d+\b/g, "").trim() : preset.input;
@@ -10335,6 +10610,9 @@ var FormInput = ({ name, type, formLabel, formDescription, required = false, dis
     ] });
   } });
 };
+function AvatarFormInput(props) {
+  return /* @__PURE__ */ jsx(FormInput, { ...props, type: "avatar" });
+}
 var DynamicArray = ({ name, children, title, onAdd, className, collapsible = true, defaultCollapsed = false, addLabel = "Click to add item", emptyLabel = "No items added yet." }) => {
   const { control } = useFormContext();
   const { fields, append, remove, replace } = useFieldArray({ control, name });
@@ -14168,4 +14446,4 @@ function NGridItem({
   return /* @__PURE__ */ jsx("div", { className: itemClassName, ...props, children });
 }
 
-export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarGroup, AvatarImage, AvatarStatus, Badge, BaseInput, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator, Input, Label, LangInput, MultiSelectInput, NAJM_COMPONENT_NAMES, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBulkActionsBar, NButton, NCard, NCardAction, NCardFooter, NCardInfo, NCardMedia, NCardSection, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NDonutCard, NEditorTabs, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NGrid, NGridItem, NIcon, NIndicator, NInspectorSheet, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarLogo, NSidebarMobile, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NThemeCustomizer, NUploader, NViewBody, NViewToggle, NajmDesignProvider, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RADIUS_VALUE_MAP, RadioGroup2 as RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStoreContext, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, filterResponsiveColumns, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, inputBorderClasses, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, resolveHiddenBelowClass, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, useNajmComponentStyle, useNajmDesign, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };
+export { Alert, NCard as AsyncCard, Avatar, AvatarFallback, AvatarFormInput, AvatarGroup, AvatarImage, AvatarInput, AvatarStatus, Badge, BaseInput, Button, Calendar, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, CheckboxGroupInput, CheckboxInput, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorArrayInput, ColorPickerInput, Combobox, ComboboxInput, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, DEFAULT_THEME_FILE_NAME, DateInput, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, DynamicArray_default as DynamicArray, EmojiInput, FileImportButton, FileInput, Form, FormControl, FormDescription, FormField, FormInput, FormItem, FormLabel, FormMessage, IconButton, ImageInput, Indicator, Input, Label2 as Label, LangInput, MultiSelectInput, NAJM_COMPONENT_NAMES, NAlert, NAppShell, NCard as NAsyncCard, NAvatar, NBadge, NBulkActionsBar, NButton, NCard, NCardAction, NCardFooter, NCardInfo, NCardMedia, NCardSection, NCommandPalette, NConfirmDialog, NContextMenu, NDataCardShell, NDeleteDialog, NDeleteDialogContent, NDetailCard, NDetailItem, NDetailList, NDialog, NDialogDescription, NDialogHeader, NDialogPrimaryButton, NDialogSecondaryButton, NDonutCard, NEditorTabs, NEmptyState, NErrorBoundary, NErrorState, NFileBrowser, NFileTypeIcon, NFilterBar, NFolderIcon, NForm, NFormSectionHeader, NGrid, NGridItem, NIcon, NIndicator, NInspectorSheet, NLoadingState, NMultiDialog, NNavbar, NPageHeader, NPageHeaderActions, NPageHeaderCompactActions, NPageHeaderFilters, NPageHeaderTop, NPageLayout, NPortalScopeProvider, NProgress, NRowActions, NSection, NSectionHeader, NSectionInfo, NSectionWithInfo, NSheet, NSidebar, NSidebarContent, NSidebarFooter, NSidebarHeader, NSidebarItem, NSidebarLogo, NSidebarMobile, NSidebarSection, NSkeleton, NSkeletonCalendar, NSkeletonChart, NSkeletonDonut, NSkeletonEventList, NSkeletonWidget, NSkeletonWidgets, NSlider, NSmartPasteDialog, NSpinner, NStatCard, NStatCardSkeleton, Swap as NSwap, NTable, NTableCardRoot, NTableCards, NTableContent, NTableHeader, NTableJson, NTableLoadingSkeleton, NTablePagination, NTableRowSkeleton, NTableSkeleton, NTabs, NThemeCustomizer, NUploader, NViewBody, NViewToggle, NajmDesignProvider, NajmScroll, NajmThemeProvider, NativeSelect, NumberInput, PasswordInput, PhoneInput, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PrefixProvider, Progress, RADIUS_VALUE_MAP, RadioGroup2 as RadioGroup, RadioGroupInput, RadioGroupItem, RepeatingFields, ScrollArea, SearchField, SearchField as SearchInput, SegmentedControl, Select, SelectContent, SelectGroup, SelectInput, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator3 as Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, SimpleTooltip, NSkeleton as Skeleton, Slider, SliderInput, StarRatingInput, StatusPill, StepIndicator, StepsHeader, StepsProgress, Swap, SwapIndeterminate, SwapOff, SwapOn, Switch, SwitchInput, TAB_COLORS, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, TableStoreContext, Tabs, TabsContent, TabsList, TabsTrigger, TextAreaInput, TextInput, Textarea, TimeInput, TimeZoneInput, Toaster, Toggle, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, VariantProvider, WizardForm, alertVariants, avatarVariants, badgeColorVariants, badgeVariants, buildDefaultFileColumns, buttonVariants, cn, composePreset, createDialogStore, createTableStore, defineNajmDesignConfig, defineNajmThemeConfig, detectFormat, dialogVariants, filterResponsiveColumns, formatColor, formatFileBytes, formatFileRelative, getIconColorProps, getNextEditorTabValue, hiddenBelowClasses, indicatorVariants, inputBorderClasses, normalizeThemeFileName, parseColor, parseNajmDesignConfig, parseNajmThemeConfig, parseThemeFile, resolveHiddenBelowClass, resolvePreset, resolveRadiusValue, resolveSlot, resolveVariantAlias, sidebarBorderClasses, sliderVariants, stringifyNajmDesignConfig, stringifyNajmThemeConfig, stringifyThemeFile, surfaceBorderClasses, swapVariants, toPickerHex, toggleVariants, tooltipContentVariants, truncateByCharacters, useClickOutside, useContextMenu, useDebouncedValue, useDelayedLoading, useDialog, useDialogStore, useDynamicPageSize, useFormField, useFormSubmission, useInfiniteScroll, useKeyboard, useLocalStorageState, useNForm, useNPortalScope, useNajmAppearance, useNajmComponentStyle, useNajmDesign, useNajmThemeMode, usePrefix, useSelection, useStepNavigation, useStorageContextMenu, useStoreSync, useTable, useTableKeyboard, useTableStore, useVariant, useVariantPreset };