@webdevarif/dashui 0.3.1 → 0.3.2

package/dist/index.d.mts

@@ -536,6 +536,15 @@ interface PostSidebarSectionProps {
 }
 declare function PostSidebarSection({ title, children, defaultOpen, className, }: PostSidebarSectionProps): react_jsx_runtime.JSX.Element;
 
+interface HslColorInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+    inputClassName?: string;
+    disabled?: boolean;
+}
+declare function HslColorInput({ value, onChange, className, inputClassName, disabled, }: HslColorInputProps): react_jsx_runtime.JSX.Element;
+
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;
     open: () => void;
@@ -620,4 +629,4 @@ interface SkeletonProps {
 }
 declare function Skeleton({ width, height, rounded, style }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type Column, ConfirmDialog, type ConfirmDialogProps, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableProps, 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, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, ImagePickerField, type ImagePickerFieldProps, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, MediaCard, type MediaCardFile, type MediaCardProps, MediaGrid, type MediaGridProps, MediaPickerDialog, type MediaPickerDialogFolder, type MediaPickerDialogProps, type NavItem, NotificationBell, type NotificationBellProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, PlanBadge, type PlanBadgeProps, type PlanId, Popover, PopoverContent, PopoverTrigger, PostEditorShell, type PostEditorShellProps, PostFiltersBar, type PostFiltersBarProps, type PostListItem, PostListTable, type PostListTableProps, PostSidebarSection, type PostSidebarSectionProps, type PostStatus, PostStatusBadge, type PostStatusBadgeProps, SearchBar, type SearchBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, SlugInput, type SlugInputProps, type Stat, Stats, type StatsProps, StorageBar, type StorageBarProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, type UploadItem, badgeVariants, buttonVariants, cn, useDisclosure, usePagination };
+export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type Column, ConfirmDialog, type ConfirmDialogProps, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableProps, 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, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, HslColorInput, ImagePickerField, type ImagePickerFieldProps, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, MediaCard, type MediaCardFile, type MediaCardProps, MediaGrid, type MediaGridProps, MediaPickerDialog, type MediaPickerDialogFolder, type MediaPickerDialogProps, type NavItem, NotificationBell, type NotificationBellProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, PlanBadge, type PlanBadgeProps, type PlanId, Popover, PopoverContent, PopoverTrigger, PostEditorShell, type PostEditorShellProps, PostFiltersBar, type PostFiltersBarProps, type PostListItem, PostListTable, type PostListTableProps, PostSidebarSection, type PostSidebarSectionProps, type PostStatus, PostStatusBadge, type PostStatusBadgeProps, SearchBar, type SearchBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, SlugInput, type SlugInputProps, type Stat, Stats, type StatsProps, StorageBar, type StorageBarProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, type UploadItem, badgeVariants, buttonVariants, cn, useDisclosure, usePagination };

package/dist/index.d.ts

@@ -536,6 +536,15 @@ interface PostSidebarSectionProps {
 }
 declare function PostSidebarSection({ title, children, defaultOpen, className, }: PostSidebarSectionProps): react_jsx_runtime.JSX.Element;
 
+interface HslColorInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    className?: string;
+    inputClassName?: string;
+    disabled?: boolean;
+}
+declare function HslColorInput({ value, onChange, className, inputClassName, disabled, }: HslColorInputProps): react_jsx_runtime.JSX.Element;
+
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;
     open: () => void;
@@ -620,4 +629,4 @@ interface SkeletonProps {
 }
 declare function Skeleton({ width, height, rounded, style }: SkeletonProps): react_jsx_runtime.JSX.Element;
 
-export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type Column, ConfirmDialog, type ConfirmDialogProps, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableProps, 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, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, ImagePickerField, type ImagePickerFieldProps, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, MediaCard, type MediaCardFile, type MediaCardProps, MediaGrid, type MediaGridProps, MediaPickerDialog, type MediaPickerDialogFolder, type MediaPickerDialogProps, type NavItem, NotificationBell, type NotificationBellProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, PlanBadge, type PlanBadgeProps, type PlanId, Popover, PopoverContent, PopoverTrigger, PostEditorShell, type PostEditorShellProps, PostFiltersBar, type PostFiltersBarProps, type PostListItem, PostListTable, type PostListTableProps, PostSidebarSection, type PostSidebarSectionProps, type PostStatus, PostStatusBadge, type PostStatusBadgeProps, SearchBar, type SearchBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, SlugInput, type SlugInputProps, type Stat, Stats, type StatsProps, StorageBar, type StorageBarProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, type UploadItem, badgeVariants, buttonVariants, cn, useDisclosure, usePagination };
+export { Alert, type AlertProps, AppShell, type AppShellProps, AuthButton, AuthCard, AuthDivider, AuthField, AuthFootnote, AuthHeader, AuthLogo, AuthShell, Badge, type BadgeProps, type Breadcrumb, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type Column, ConfirmDialog, type ConfirmDialogProps, DashboardLayout, type DashboardLayoutProps, DataTable, type DataTableProps, 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, EmptyState, type EmptyStateProps, FormField, type FormFieldProps, FormLayout, type FormLayoutProps, FormSection, type FormSectionProps, HslColorInput, ImagePickerField, type ImagePickerFieldProps, Input, type InputProps, Label, LoadingSpinner, type LoadingSpinnerProps, MediaCard, type MediaCardFile, type MediaCardProps, MediaGrid, type MediaGridProps, MediaPickerDialog, type MediaPickerDialogFolder, type MediaPickerDialogProps, type NavItem, NotificationBell, type NotificationBellProps, Page, type PageProps, PageSection, type PageSectionProps, Pagination, type PaginationProps, PlanBadge, type PlanBadgeProps, type PlanId, Popover, PopoverContent, PopoverTrigger, PostEditorShell, type PostEditorShellProps, PostFiltersBar, type PostFiltersBarProps, type PostListItem, PostListTable, type PostListTableProps, PostSidebarSection, type PostSidebarSectionProps, type PostStatus, PostStatusBadge, type PostStatusBadgeProps, SearchBar, type SearchBarProps, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sidebar, type SidebarItem, type SidebarProps, Skeleton, SlugInput, type SlugInputProps, type Stat, Stats, type StatsProps, StorageBar, type StorageBarProps, Switch, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, type TextareaProps, ThemeToggle, type ThemeToggleProps, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TopBar, type TopBarProps, type UploadItem, badgeVariants, buttonVariants, cn, useDisclosure, usePagination };

package/dist/index.js

@@ -81,6 +81,7 @@ __export(index_exports, {
   FormField: () => FormField,
   FormLayout: () => FormLayout,
   FormSection: () => FormSection,
+  HslColorInput: () => HslColorInput,
   ImagePickerField: () => ImagePickerField,
   Input: () => Input,
   Label: () => Label2,
@@ -3306,10 +3307,126 @@ function PostSidebarSection({
   ] });
 }
 
-// src/hooks/index.ts
+// src/components/ui/hsl-color-input.tsx
 var import_react = require("react");
+var import_react_colorful = require("react-colorful");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function parseHsl(value) {
+  if (!value) return { h: 0, s: 0, l: 0 };
+  const parts = value.trim().split(/\s+/);
+  const h = parseFloat(parts[0]) || 0;
+  const s = parseFloat(parts[1]) || 0;
+  const l = parseFloat(parts[2]) || 0;
+  return { h, s, l };
+}
+function formatHsl(color) {
+  return `${Math.round(color.h)} ${Math.round(color.s)}% ${Math.round(color.l)}%`;
+}
+function HslColorInput({
+  value,
+  onChange,
+  className,
+  inputClassName,
+  disabled
+}) {
+  const [open, setOpen] = (0, import_react.useState)(false);
+  const [inputVal, setInputVal] = (0, import_react.useState)(value);
+  const containerRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    setInputVal(value);
+  }, [value]);
+  (0, import_react.useEffect)(() => {
+    if (!open) return;
+    const handler = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handler);
+    return () => document.removeEventListener("mousedown", handler);
+  }, [open]);
+  const hslColor = parseHsl(value);
+  const cssColor = value ? `hsl(${value})` : "transparent";
+  const handlePickerChange = (0, import_react.useCallback)((color) => {
+    const formatted = formatHsl(color);
+    setInputVal(formatted);
+    onChange(formatted);
+  }, [onChange]);
+  const handleInputChange = (e) => {
+    const v = e.target.value;
+    setInputVal(v);
+    if (/^\d+\s+\d+%?\s+\d+%?$/.test(v.trim()) || /^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/.test(v.trim())) {
+      onChange(v);
+    }
+  };
+  const handleInputBlur = () => {
+    setInputVal(value);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { ref: containerRef, className: cn("relative flex items-center gap-1.5", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => setOpen((o) => !o),
+        className: cn(
+          "w-5 h-5 rounded border border-white/10 shrink-0 transition-all",
+          "hover:scale-110 hover:border-white/30 focus:outline-none focus:ring-1 focus:ring-white/20",
+          disabled && "opacity-50 cursor-not-allowed"
+        ),
+        style: { background: cssColor },
+        title: value,
+        "aria-label": "Open color picker"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+      "input",
+      {
+        type: "text",
+        value: inputVal,
+        onChange: handleInputChange,
+        onBlur: handleInputBlur,
+        disabled,
+        placeholder: "0 0% 0%",
+        className: cn(
+          "w-28 bg-white/5 border border-white/10 rounded px-1.5 py-0.5",
+          "text-xs text-white/70 font-mono outline-none",
+          "focus:border-white/30 placeholder:text-white/20",
+          "disabled:opacity-50 disabled:cursor-not-allowed",
+          inputClassName
+        )
+      }
+    ),
+    open && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cn(
+      "absolute z-50 top-full left-0 mt-2",
+      "bg-[#1a1c2e] border border-white/10 rounded-xl shadow-2xl p-3",
+      "flex flex-col gap-3"
+    ), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        import_react_colorful.HslColorPicker,
+        {
+          color: hslColor,
+          onChange: handlePickerChange
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "div",
+          {
+            className: "w-6 h-6 rounded border border-white/10 shrink-0",
+            style: { background: cssColor }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-mono text-white/50 truncate", children: value || "none" })
+      ] })
+    ] })
+  ] });
+}
+
+// src/hooks/index.ts
+var import_react2 = require("react");
 function useDisclosure(initial = false) {
-  const [isOpen, setIsOpen] = (0, import_react.useState)(initial);
+  const [isOpen, setIsOpen] = (0, import_react2.useState)(initial);
   return {
     isOpen,
     open: () => setIsOpen(true),
@@ -3319,15 +3436,15 @@ function useDisclosure(initial = false) {
   };
 }
 function usePagination(total, pageSize = 20) {
-  const [page, setPage] = (0, import_react.useState)(1);
+  const [page, setPage] = (0, import_react2.useState)(1);
   const totalPages = Math.ceil(total / pageSize);
   return { page, setPage, pageSize, total, totalPages };
 }
 
 // src/components/auth/AuthShell.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "div",
     {
       style: {
@@ -3342,7 +3459,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
         overflow: "hidden"
       },
       children: [
-        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        pattern === "dots" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -3356,7 +3473,7 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        pattern === "grid" && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
           "div",
           {
             "aria-hidden": true,
@@ -3370,16 +3487,16 @@ function AuthShell({ children, pattern = "dots", maxWidth = "520px" }) {
             }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { style: { position: "relative", zIndex: 1, width: "100%", maxWidth }, children })
       ]
     }
   );
 }
 
 // src/components/auth/AuthCard.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function AuthCard({ children, padding = "24px 28px" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "div",
     {
       style: {
@@ -3396,10 +3513,10 @@ function AuthCard({ children, padding = "24px 28px" }) {
 }
 
 // src/components/auth/AuthLogo.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
-    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "center", gap: "10px", marginBottom: "28px" }, children: [
+    imageUrl ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "img",
       {
         src: imageUrl,
@@ -3408,7 +3525,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         height: size,
         style: { borderRadius: "calc(var(--radius, 0.5rem) * 1.2)", flexShrink: 0, display: "block" }
       }
-    ) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    ) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "div",
       {
         style: {
@@ -3427,7 +3544,7 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
         children: letter
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
       "span",
       {
         style: {
@@ -3443,10 +3560,10 @@ function AuthLogo({ appName = "Builify CMS", letter = "B", imageUrl, size = 36 }
 }
 
 // src/components/auth/AuthHeader.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function AuthHeader({ title, description }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { style: { marginBottom: "24px", textAlign: "center" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "h1",
       {
         style: {
@@ -3459,7 +3576,7 @@ function AuthHeader({ title, description }) {
         children: title
       }
     ),
-    description && /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    description && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
       "p",
       {
         style: {
@@ -3475,12 +3592,12 @@ function AuthHeader({ title, description }) {
 }
 
 // src/components/auth/AuthField.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function AuthField({ label, error, hint, rightLabel, id, ...props }) {
   const fieldId = id ?? label.toLowerCase().replace(/\s+/g, "-");
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "6px" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { style: { display: "flex", alignItems: "center", justifyContent: "space-between" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
         "label",
         {
           htmlFor: fieldId,
@@ -3492,9 +3609,9 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
           children: label
         }
       ),
-      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
+      rightLabel && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { style: { fontSize: "0.8125rem" }, children: rightLabel })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
       "input",
       {
         id: fieldId,
@@ -3524,13 +3641,13 @@ function AuthField({ label, error, hint, rightLabel, id, ...props }) {
         ...props
       }
     ),
-    error && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
-    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
+    error && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--destructive)", margin: 0 }, children: error }),
+    hint && !error && /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { style: { fontSize: "0.8rem", color: "var(--muted-foreground)", margin: 0 }, children: hint })
   ] });
 }
 
 // src/components/auth/AuthButton.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime55 = require("react/jsx-runtime");
 function AuthButton({
   loading,
   variant = "primary",
@@ -3573,7 +3690,7 @@ function AuthButton({
       color: "var(--foreground)"
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
     "button",
     {
       disabled: loading || disabled,
@@ -3585,8 +3702,8 @@ function AuthButton({
         e.currentTarget.style.filter = "none";
       },
       ...props,
-      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)(import_jsx_runtime54.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+      children: loading ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(import_jsx_runtime55.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
           "span",
           {
             style: {
@@ -3607,19 +3724,19 @@ function AuthButton({
 }
 
 // src/components/auth/AuthDivider.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime56 = require("react/jsx-runtime");
 function AuthDivider({ label = "or" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { style: { display: "flex", alignItems: "center", gap: "12px", margin: "20px 0" }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { style: { fontSize: "0.75rem", color: "var(--muted-foreground)", userSelect: "none" }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("div", { style: { flex: 1, height: 1, background: "var(--border)" } })
   ] });
 }
 
 // src/components/auth/AuthFootnote.tsx
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_jsx_runtime57 = require("react/jsx-runtime");
 function AuthFootnote({ text, linkText, linkHref }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("p", { style: {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("p", { style: {
     textAlign: "center",
     marginTop: "20px",
     fontSize: "0.8125rem",
@@ -3627,7 +3744,7 @@ function AuthFootnote({ text, linkText, linkHref }) {
   }, children: [
     text,
     " ",
-    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
       "a",
       {
         href: linkHref,
@@ -3699,6 +3816,7 @@ var import_next_themes2 = require("next-themes");
   FormField,
   FormLayout,
   FormSection,
+  HslColorInput,
   ImagePickerField,
   Input,
   Label,