@webdevarif/dashui 0.3.5 → 0.3.6

package/dist/index.d.mts

@@ -556,6 +556,8 @@ interface ColorPickerContextValue {
     setSaturation: (s: number) => void;
     setLightness: (l: number) => void;
     setAlpha: (a: number) => void;
+    mode: string;
+    setMode: (mode: string) => void;
 }
 declare const useColorPicker: () => ColorPickerContextValue;
 type ColorPickerProps = HTMLAttributes<HTMLDivElement> & {
@@ -568,6 +570,10 @@ declare const ColorPickerHue: ({ className, ...props }: Omit<ComponentProps<type
 declare const ColorPickerAlpha: ({ className, ...props }: Omit<ComponentProps<typeof Slider.Root>, "value" | "onValueChange" | "max" | "step">) => react_jsx_runtime.JSX.Element;
 declare const ColorPickerHexOutput: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
 declare const ColorPickerEyeDropper: ({ className, ...props }: HTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
+type ColorPickerOutputProps = HTMLAttributes<HTMLDivElement>;
+declare const ColorPickerOutput: ({ className, ...props }: ColorPickerOutputProps) => react_jsx_runtime.JSX.Element;
+type ColorPickerFormatProps = HTMLAttributes<HTMLDivElement>;
+declare const ColorPickerFormat: ({ className, ...props }: ColorPickerFormatProps) => react_jsx_runtime.JSX.Element;
 
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;
@@ -653,4 +659,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, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerHexOutput, ColorPickerHue, ColorPickerSelection, 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, useColorPicker, 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, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHexOutput, ColorPickerHue, ColorPickerOutput, ColorPickerSelection, 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, useColorPicker, useDisclosure, usePagination };

package/dist/index.d.ts

@@ -556,6 +556,8 @@ interface ColorPickerContextValue {
     setSaturation: (s: number) => void;
     setLightness: (l: number) => void;
     setAlpha: (a: number) => void;
+    mode: string;
+    setMode: (mode: string) => void;
 }
 declare const useColorPicker: () => ColorPickerContextValue;
 type ColorPickerProps = HTMLAttributes<HTMLDivElement> & {
@@ -568,6 +570,10 @@ declare const ColorPickerHue: ({ className, ...props }: Omit<ComponentProps<type
 declare const ColorPickerAlpha: ({ className, ...props }: Omit<ComponentProps<typeof Slider.Root>, "value" | "onValueChange" | "max" | "step">) => react_jsx_runtime.JSX.Element;
 declare const ColorPickerHexOutput: ({ className, ...props }: HTMLAttributes<HTMLDivElement>) => react_jsx_runtime.JSX.Element;
 declare const ColorPickerEyeDropper: ({ className, ...props }: HTMLAttributes<HTMLButtonElement>) => react_jsx_runtime.JSX.Element;
+type ColorPickerOutputProps = HTMLAttributes<HTMLDivElement>;
+declare const ColorPickerOutput: ({ className, ...props }: ColorPickerOutputProps) => react_jsx_runtime.JSX.Element;
+type ColorPickerFormatProps = HTMLAttributes<HTMLDivElement>;
+declare const ColorPickerFormat: ({ className, ...props }: ColorPickerFormatProps) => react_jsx_runtime.JSX.Element;
 
 declare function useDisclosure(initial?: boolean): {
     isOpen: boolean;
@@ -653,4 +659,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, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerHexOutput, ColorPickerHue, ColorPickerSelection, 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, useColorPicker, 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, ColorPicker, ColorPickerAlpha, ColorPickerEyeDropper, ColorPickerFormat, ColorPickerHexOutput, ColorPickerHue, ColorPickerOutput, ColorPickerSelection, 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, useColorPicker, useDisclosure, usePagination };

package/dist/index.js

@@ -52,8 +52,10 @@ __export(index_exports, {
   ColorPicker: () => ColorPicker,
   ColorPickerAlpha: () => ColorPickerAlpha,
   ColorPickerEyeDropper: () => ColorPickerEyeDropper,
+  ColorPickerFormat: () => ColorPickerFormat,
   ColorPickerHexOutput: () => ColorPickerHexOutput,
   ColorPickerHue: () => ColorPickerHue,
+  ColorPickerOutput: () => ColorPickerOutput,
   ColorPickerSelection: () => ColorPickerSelection,
   ConfirmDialog: () => ConfirmDialog,
   DashboardLayout: () => DashboardLayout,
@@ -3348,6 +3350,7 @@ var ColorPicker = ({
   const [saturation, setSaturationState] = (0, import_react.useState)(initial.saturationl());
   const [lightness, setLightnessState] = (0, import_react.useState)(initial.lightness());
   const [alpha, setAlphaState] = (0, import_react.useState)(initial.alpha() * 100);
+  const [mode, setMode] = (0, import_react.useState)("HEX");
   const notifyRef = (0, import_react.useRef)(onChange);
   (0, import_react.useEffect)(() => {
     notifyRef.current = onChange;
@@ -3372,7 +3375,7 @@ var ColorPicker = ({
     setAlphaState(a);
     notify(hue, saturation, lightness, a);
   }, [hue, saturation, lightness, notify]);
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, setHue, setSaturation, setLightness, setAlpha }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ColorPickerContext.Provider, { value: { hue, saturation, lightness, alpha, setHue, setSaturation, setLightness, setAlpha, mode, setMode }, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: cn("flex flex-col gap-3", className), ...props, children }) });
 };
 var ColorPickerSelection = (0, import_react.memo)(({ className, ...props }) => {
   const containerRef = (0, import_react.useRef)(null);
@@ -3520,10 +3523,54 @@ var ColorPickerEyeDropper = ({ className, ...props }) => {
     }
   );
 };
+var ColorPickerOutput = ({ className, ...props }) => {
+  const { mode, setMode } = useColorPicker();
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "select",
+    {
+      value: mode,
+      onChange: (e) => setMode(e.target.value),
+      className: cn(
+        "h-7 bg-white/5 border border-white/10 rounded-md text-xs text-white/60 px-1.5 outline-none",
+        "hover:border-white/20 focus:border-white/30 cursor-pointer shrink-0",
+        className
+      ),
+      children: ["HEX", "HSL", "RGB"].map((f) => /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: f, className: "bg-[#1a1c2e]", children: f }, f))
+    }
+  );
+};
+var ColorPickerFormat = ({ className, ...props }) => {
+  const { hue, saturation, lightness, alpha, mode } = useColorPicker();
+  let displayValue = "";
+  try {
+    const c = import_color.default.hsl(hue, saturation, lightness).alpha(alpha / 100);
+    if (mode === "HEX") displayValue = c.hex();
+    else if (mode === "HSL") displayValue = `${Math.round(hue)} ${Math.round(saturation)}% ${Math.round(lightness)}%`;
+    else if (mode === "RGB") {
+      const rgb = c.rgb().array().map(Math.round);
+      displayValue = `${rgb[0]}, ${rgb[1]}, ${rgb[2]}`;
+    }
+  } catch {
+    displayValue = "";
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "input",
+    {
+      readOnly: true,
+      type: "text",
+      value: displayValue,
+      className: cn(
+        "flex-1 h-7 bg-white/5 border border-white/10 rounded-md px-2 text-xs text-white/50 font-mono outline-none",
+        className
+      ),
+      ...props
+    }
+  );
+};
 
 // src/components/ui/hsl-color-input.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
-function hslStringToHex(hsl) {
+function hslToHex(hsl) {
   if (!hsl) return "#000000";
   try {
     const parts = hsl.trim().split(/\s+/);
@@ -3535,13 +3582,10 @@ function hslStringToHex(hsl) {
     return "#000000";
   }
 }
-function hexToHslString(hex) {
+function hexToHsl(hex) {
   try {
-    const c = (0, import_color2.default)(hex);
-    const h = Math.round(c.hue());
-    const s = Math.round(c.saturationl());
-    const l = Math.round(c.lightness());
-    return `${h} ${s}% ${l}%`;
+    const c = (0, import_color2.default)(hex.startsWith("#") ? hex : `#${hex}`);
+    return `${Math.round(c.hue())} ${Math.round(c.saturationl())}% ${Math.round(c.lightness())}%`;
   } catch {
     return "0 0% 0%";
   }
@@ -3549,88 +3593,93 @@ function hexToHslString(hex) {
 function ColorReader({ onHexChange }) {
   const { hue, saturation, lightness, alpha } = useColorPicker();
   (0, import_react2.useEffect)(() => {
-    const hex = import_color2.default.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
-    onHexChange(hex);
+    try {
+      const hex = import_color2.default.hsl(hue, saturation, lightness).alpha(alpha / 100).hex();
+      onHexChange(hex);
+    } catch {
+    }
   }, [hue, saturation, lightness, alpha, onHexChange]);
   return null;
 }
 function HslColorInput({ value, onChange, className, inputClassName, disabled }) {
   const [open, setOpen] = (0, import_react2.useState)(false);
-  const [inputVal, setInputVal] = (0, import_react2.useState)(value);
-  (0, import_react2.useEffect)(() => {
-    setInputVal(value);
-  }, [value]);
-  const hexValue = hslStringToHex(value);
+  const hexValue = hslToHex(value);
   const cssColor = value ? `hsl(${value})` : "transparent";
-  const handlePickerHex = (0, import_react2.useCallback)((hex) => {
-    const hsl = hexToHslString(hex);
-    setInputVal(hsl);
-    onChange(hsl);
+  const pendingHexRef = (0, import_react2.useRef)(hexValue);
+  const onChangeRef = (0, import_react2.useRef)(onChange);
+  (0, import_react2.useEffect)(() => {
+    onChangeRef.current = onChange;
   }, [onChange]);
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cn("flex items-center gap-1.5", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Popover2.Root, { open, onOpenChange: disabled ? void 0 : setOpen, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        "button",
-        {
-          type: "button",
-          disabled,
-          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",
-            disabled && "opacity-50 cursor-not-allowed"
-          ),
-          style: { background: cssColor },
-          "aria-label": "Pick color"
-        }
-      ) }),
-      /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-        Popover2.Content,
-        {
-          sideOffset: 8,
-          align: "start",
-          className: cn(
-            "z-[9999] rounded-xl shadow-2xl p-3 w-[220px]",
-            "bg-[#1a1c2e] border border-white/10",
-            "focus:outline-none"
-          ),
-          onInteractOutside: () => setOpen(false),
-          children: open && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ColorPicker, { defaultValue: hexValue, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorReader, { onHexChange: handlePickerHex }),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerSelection, { className: "h-36 rounded-lg" }),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-2", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerEyeDropper, {}),
-              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-1.5 flex-1", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerHue, {}),
-                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerAlpha, {})
-              ] })
-            ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerHexOutput, {})
-          ] })
-        }
-      ) })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      "input",
+  (0, import_react2.useEffect)(() => {
+    if (open) pendingHexRef.current = hexValue;
+  }, [open, hexValue]);
+  const handleHexChange = (0, import_react2.useCallback)((hex) => {
+    pendingHexRef.current = hex;
+  }, []);
+  const handleOpenChange = (0, import_react2.useCallback)((newOpen) => {
+    if (!newOpen && open) {
+      const pending = pendingHexRef.current;
+      if (pending && pending !== hexValue) {
+        onChangeRef.current(hexToHsl(pending));
+      }
+    }
+    setOpen(newOpen);
+  }, [open, hexValue]);
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(Popover2.Root, { open, onOpenChange: disabled ? void 0 : handleOpenChange, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
+      "button",
       {
-        type: "text",
-        value: inputVal,
-        onChange: (e) => {
-          setInputVal(e.target.value);
-          if (/^\d+(\.\d+)?\s+\d+(\.\d+)?%\s+\d+(\.\d+)?%$/.test(e.target.value.trim())) {
-            onChange(e.target.value.trim());
-          }
-        },
-        onBlur: () => setInputVal(value),
+        type: "button",
         disabled,
-        placeholder: "H S% L%",
         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",
-          inputClassName
-        )
+          "flex items-center gap-2 px-2 py-1 rounded-lg border border-white/10",
+          "bg-white/5 hover:border-white/20 hover:bg-white/[0.08] transition-colors",
+          "text-xs text-white/60 font-mono min-w-[7.5rem] justify-start",
+          "focus:outline-none focus:border-white/30",
+          disabled && "opacity-50 cursor-not-allowed",
+          className
+        ),
+        "aria-label": "Pick color",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+            "span",
+            {
+              className: "w-4 h-4 rounded-full border border-white/20 shrink-0 inline-block",
+              style: { background: cssColor }
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { children: hexValue.toUpperCase() })
+        ]
       }
-    )
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Popover2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
+      Popover2.Content,
+      {
+        sideOffset: 6,
+        align: "start",
+        className: cn(
+          "z-[9999] rounded-xl shadow-2xl p-3 w-[14rem]",
+          "bg-[#0f1117] border border-white/10",
+          "focus:outline-none"
+        ),
+        onInteractOutside: () => handleOpenChange(false),
+        children: open && /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(ColorPicker, { defaultValue: hexValue, className: "gap-2.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorReader, { onHexChange: handleHexChange }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerSelection, { className: "h-32 w-full rounded-lg" }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerEyeDropper, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex flex-col gap-1.5 flex-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerHue, {}),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerAlpha, {})
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerOutput, {}),
+            /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(ColorPickerFormat, {})
+          ] })
+        ] }, hexValue)
+      }
+    ) })
   ] });
 }
 
@@ -3998,8 +4047,10 @@ var import_next_themes2 = require("next-themes");
   ColorPicker,
   ColorPickerAlpha,
   ColorPickerEyeDropper,
+  ColorPickerFormat,
   ColorPickerHexOutput,
   ColorPickerHue,
+  ColorPickerOutput,
   ColorPickerSelection,
   ConfirmDialog,
   DashboardLayout,