@vuer-ai/vuer-uikit 0.0.120 → 0.1.0

package/dist/{chunk-MYZHDWBF.mjs → chunk-LLFE3UHZ.mjs}

@@ -1,20 +1,20 @@
 import { useTimelineState } from './chunk-JWKOW2OV.mjs';
 import { useViewport } from './chunk-VPQ5SSY3.mjs';
-import { TimelineProcessBar } from './chunk-FMKD5JBL.mjs';
-import { LeftWedge, RightWedge } from './chunk-ZSAPBZ36.mjs';
+import { LeftWedge, RightWedge } from './chunk-OW653F7T.mjs';
 import { WheelZoomContext } from './chunk-CIPI2V54.mjs';
-import { useTreeState, useTreeSearch } from './chunk-PC5DHSC4.mjs';
-import { CursorOverlay } from './chunk-AHD46BFN.mjs';
+import { CursorOverlay } from './chunk-ZQOQB6GF.mjs';
 import { NavigationControls } from './chunk-D5H4XX6Q.mjs';
 import { Tick } from './chunk-JVV7W3TP.mjs';
 import { TimeRuleEventDot } from './chunk-OC4HRPZU.mjs';
-import { TimelineEvent } from './chunk-K2ZYSKRU.mjs';
+import { TimelineEvent } from './chunk-EZ536NLQ.mjs';
+import { TimelineProcessBar } from './chunk-7TD77VF4.mjs';
 import { rightWedgeClasses, leftWedgeClasses, TOTAL_DURATION } from './chunk-4U232QAX.mjs';
-import { TreeSearchBar } from './chunk-SRZ56OJH.mjs';
-import { TreeView } from './chunk-Q37KC3CL.mjs';
-import { TooltipProvider } from './chunk-UQQBUPGF.mjs';
-import { SyncScroll, SyncDragY, SyncScrollSlave } from './chunk-T4U3BG2V.mjs';
-import { cn } from './chunk-T66ETI7E.mjs';
+import { TreeSearchBar } from './chunk-XZTEU7ME.mjs';
+import { TreeView } from './chunk-YRNI7ZJ7.mjs';
+import { useTreeState, useTreeSearch } from './chunk-NKUK73WB.mjs';
+import { TooltipProvider } from './chunk-IPMWGCAI.mjs';
+import { SyncScroll, SyncDragY, SyncScrollSlave } from './chunk-EGJLY5VZ.mjs';
+import { cn } from './chunk-HBEU2PU2.mjs';
 import { SyncScrollProvider } from './chunk-SAGQV2YZ.mjs';
 import { useState, useEffect } from 'react';
 import { jsx, jsxs } from 'react/jsx-runtime';

package/dist/{chunk-332A4MHC.mjs → chunk-LNYUFL3Q.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-T66ETI7E.mjs';
+import { cn } from './chunk-HBEU2PU2.mjs';
 import { Drawer as Drawer$1 } from 'vaul';
 import { jsx, jsxs } from 'react/jsx-runtime';
 

package/dist/{chunk-BUAWPPXA.cjs → chunk-MQ5DGLVE.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkCRX2ZCM2_cjs = require('./chunk-CRX2ZCM2.cjs');
+var chunk6LTCLQH3_cjs = require('./chunk-6LTCLQH3.cjs');
 var DropdownMenuPrimitive = require('@radix-ui/react-dropdown-menu');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -51,7 +51,7 @@ function DropdownMenuContent({
     {
       "data-slot": "dropdown-menu-content",
       sideOffset,
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         [
           "bg-bg-primary",
           "p-md",
@@ -90,7 +90,7 @@ function DropdownMenuGroup({
     DropdownMenuPrimitive__namespace.Group,
     {
       "data-slot": "dropdown-menu-group",
-      className: chunkCRX2ZCM2_cjs.cn("space-y-xs", className),
+      className: chunk6LTCLQH3_cjs.cn("space-y-xs", className),
       ...props
     }
   );
@@ -107,7 +107,7 @@ function DropdownMenuItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       "data-variant": variant,
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         [
           "w-full",
           "flex",
@@ -146,7 +146,7 @@ function DropdownMenuCheckboxItem({
     DropdownMenuPrimitive__namespace.CheckboxItem,
     {
       "data-slot": "dropdown-menu-checkbox-item",
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         [
           "w-full",
           "flex",
@@ -194,7 +194,7 @@ function DropdownMenuRadioItem({
     DropdownMenuPrimitive__namespace.RadioItem,
     {
       "data-slot": "dropdown-menu-radio-item",
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         [
           "w-full",
           "hover:bg-bg-tertiary",
@@ -237,7 +237,7 @@ function DropdownMenuLabel({
     {
       "data-slot": "dropdown-menu-label",
       "data-inset": inset,
-      className: chunkCRX2ZCM2_cjs.cn("text-text-secondary text-uk-sm leading-uk-sm pb-lg pt-xs px-sm", className),
+      className: chunk6LTCLQH3_cjs.cn("text-text-secondary text-uk-sm leading-uk-sm pb-lg pt-xs px-sm", className),
       ...props
     }
   );
@@ -250,7 +250,7 @@ function DropdownMenuSeparator({
     DropdownMenuPrimitive__namespace.Separator,
     {
       "data-slot": "dropdown-menu-separator",
-      className: chunkCRX2ZCM2_cjs.cn("bg-line-primary my-lg pointer-events-none h-px", className),
+      className: chunk6LTCLQH3_cjs.cn("bg-line-primary my-lg pointer-events-none h-px", className),
       ...props
     }
   );
@@ -260,7 +260,7 @@ function DropdownMenuShortcut({ className, ...props }) {
     "span",
     {
       "data-slot": "dropdown-menu-shortcut",
-      className: chunkCRX2ZCM2_cjs.cn("text-text-tertiary text-uk-sm leading-uk-sm ml-auto", className),
+      className: chunk6LTCLQH3_cjs.cn("text-text-tertiary text-uk-sm leading-uk-sm ml-auto", className),
       ...props
     }
   );
@@ -279,7 +279,7 @@ function DropdownMenuSubTrigger({
     {
       "data-slot": "dropdown-menu-sub-trigger",
       "data-inset": inset,
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         "w-full",
         "flex",
         "gap-md",
@@ -319,7 +319,7 @@ function DropdownMenuSubContent({
     DropdownMenuPrimitive__namespace.SubContent,
     {
       "data-slot": "dropdown-menu-sub-content",
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         "bg-bg-primary",
         "p-md",
         "data-[state=open]:animate-in",

package/dist/{chunk-EXY6WRH4.mjs → chunk-N6KP2HIC.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-T66ETI7E.mjs';
+import { cn } from './chunk-HBEU2PU2.mjs';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import { jsx } from 'react/jsx-runtime';
 
@@ -11,7 +11,7 @@ function Separator({
   return /* @__PURE__ */ jsx(
     SeparatorPrimitive.Root,
     {
-      "data-slot": "separator-root",
+      "data-slot": "separator",
       decorative,
       orientation,
       className: cn(

package/dist/{chunk-V75PKBIV.cjs → chunk-NEJKCSS5.cjs}

@@ -1,8 +1,8 @@
 'use strict';
 
-var chunkJYYAGDLZ_cjs = require('./chunk-JYYAGDLZ.cjs');
+var chunkR22VW3EK_cjs = require('./chunk-R22VW3EK.cjs');
 var chunkT3G35JSP_cjs = require('./chunk-T3G35JSP.cjs');
-var chunkCRX2ZCM2_cjs = require('./chunk-CRX2ZCM2.cjs');
+var chunk6LTCLQH3_cjs = require('./chunk-6LTCLQH3.cjs');
 var lucideReact = require('lucide-react');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -13,7 +13,7 @@ function Pagination({ className, ...props }) {
       role: "navigation",
       "aria-label": "pagination",
       "data-slot": "pagination",
-      className: chunkCRX2ZCM2_cjs.cn("mx-auto flex w-full justify-center", className),
+      className: chunk6LTCLQH3_cjs.cn("mx-auto flex w-full justify-center", className),
       ...props
     }
   );
@@ -25,7 +25,7 @@ function PaginationContent({ className, ...props }) {
     {
       onMouseLeave: () => setCursorTarget(null),
       "data-slot": "pagination-content",
-      className: chunkCRX2ZCM2_cjs.cn("gap-xs flex flex-row items-center", className),
+      className: chunk6LTCLQH3_cjs.cn("gap-xs flex flex-row items-center", className),
       style: {
         marginBottom: "0px"
       },
@@ -55,8 +55,8 @@ function PaginationLink({ className, isActive, size = "md", ...props }) {
       "aria-current": isActive ? "page" : void 0,
       "data-slot": "pagination-link",
       "data-active": isActive,
-      className: chunkCRX2ZCM2_cjs.cn(
-        chunkJYYAGDLZ_cjs.buttonVariants({
+      className: chunk6LTCLQH3_cjs.cn(
+        chunkR22VW3EK_cjs.buttonVariants({
           variant: isActive ? "secondary" : "ghost",
           size
         }),
@@ -74,7 +74,7 @@ function PaginationPrevious({ className, ...props }) {
     PaginationLink,
     {
       "aria-label": "Go to previous page",
-      className: chunkCRX2ZCM2_cjs.cn("gap-xs px-lg sm:pl-lg", className),
+      className: chunk6LTCLQH3_cjs.cn("gap-xs px-lg sm:pl-lg", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronLeftIcon, {}),
@@ -88,7 +88,7 @@ function PaginationNext({ className, ...props }) {
     PaginationLink,
     {
       "aria-label": "Go to next page",
-      className: chunkCRX2ZCM2_cjs.cn("gap-xs px-lg sm:pr-lg", className),
+      className: chunk6LTCLQH3_cjs.cn("gap-xs px-lg sm:pr-lg", className),
       ...props,
       children: [
         /* @__PURE__ */ jsxRuntime.jsx("span", { className: "hidden sm:block", children: "Next" }),
@@ -103,7 +103,7 @@ function PaginationEllipsis({ className, ...props }) {
     {
       "aria-hidden": true,
       "data-slot": "pagination-ellipsis",
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         "text-text-primary flex size-9 size-[32px] items-center justify-center",
         className
       ),

package/dist/{chunk-KPGZOX2A.cjs → chunk-NHFIDL5X.cjs}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunkGEGPGQVH_cjs = require('./chunk-GEGPGQVH.cjs');
-var chunkCRX2ZCM2_cjs = require('./chunk-CRX2ZCM2.cjs');
+var chunk6LTCLQH3_cjs = require('./chunk-6LTCLQH3.cjs');
 var ToggleGroupPrimitive = require('@radix-ui/react-toggle-group');
 var classVarianceAuthority = require('class-variance-authority');
 var react = require('react');
@@ -124,7 +124,7 @@ function ToggleGroupRoot({
       "data-slot": "toggle-group",
       "data-variant": variant,
       "data-size": size,
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         "group/toggle-group",
         "flex",
         "w-fit",
@@ -150,7 +150,7 @@ function ToggleGroupFallback({
       "data-slot": "toggle-group",
       "data-variant": variant,
       "data-size": size,
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         "group/toggle-group",
         "flex",
         "w-fit",
@@ -178,7 +178,7 @@ function ToggleGroupItemRoot({
       "data-slot": "toggle-group-item",
       "data-variant": context.variant || variant,
       "data-size": context.size || size,
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         toggleGroupVariants({
           variant: context.variant || variant,
           size: context.size || size
@@ -204,7 +204,7 @@ function ToggleGroupItemFallback({
       "data-slot": "toggle-group-item",
       "data-variant": context.variant || variant,
       "data-size": context.size || size,
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         toggleGroupVariants({
           variant: context.variant || variant,
           size: context.size || size

package/dist/{chunk-JNV3UBBP.cjs → chunk-NIACIZWY.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkCRX2ZCM2_cjs = require('./chunk-CRX2ZCM2.cjs');
+var chunk6LTCLQH3_cjs = require('./chunk-6LTCLQH3.cjs');
 var TooltipPrimitive = require('@radix-ui/react-tooltip');
 var react = require('react');
 var jsxRuntime = require('react/jsx-runtime');
@@ -27,7 +27,6 @@ var TooltipPrimitive__namespace = /*#__PURE__*/_interopNamespace(TooltipPrimitiv
 
 function TooltipProvider({
   delayDuration = 0,
-  children,
   ...props
 }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -35,29 +34,14 @@ function TooltipProvider({
     {
       "data-slot": "tooltip-provider",
       delayDuration,
-      ...props,
-      children
+      ...props
     }
   );
 }
-function Tooltip({ children, ...props }) {
-  const [isClient, setIsClient] = react.useState(false);
-  react.useEffect(() => {
-    setIsClient(true);
-  }, []);
-  if (!isClient) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Root, { "data-slot": "tooltip", ...props, children }) });
+function Tooltip({ ...props }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Root, { "data-slot": "tooltip", ...props }) });
 }
 function TooltipTrigger({ ...props }) {
-  const [isClient, setIsClient] = react.useState(false);
-  react.useEffect(() => {
-    setIsClient(true);
-  }, []);
-  if (!isClient) {
-    return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children: props.children });
-  }
   return /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Trigger, { "data-slot": "tooltip-trigger", ...props });
 }
 function TooltipContent({
@@ -92,7 +76,7 @@ function TooltipContent({
       "data-slot": "tooltip-content",
       sideOffset,
       side,
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         "bg-bg-primary",
         getLiquidBgClass(side),
         "text-text-primary",
@@ -125,7 +109,7 @@ function TooltipContent({
         /* @__PURE__ */ jsxRuntime.jsx(TooltipPrimitive__namespace.Arrow, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
           "div",
           {
-            className: chunkCRX2ZCM2_cjs.cn(
+            className: chunk6LTCLQH3_cjs.cn(
               "z-50",
               "h-[9px] w-[15px]",
               "border-none",

package/dist/{chunk-PC5DHSC4.mjs → chunk-NKUK73WB.mjs}

@@ -2,6 +2,76 @@ import { useState, useMemo, useCallback } from 'react';
 import { jsx, Fragment } from 'react/jsx-runtime';
 
 // src/ui/tree-view/hooks.tsx
+function getDescendantIds(itemId, data, childrenMap) {
+  const descendants = [];
+  const children = childrenMap.get(itemId) || [];
+  children.forEach((child) => {
+    descendants.push(child.id);
+    descendants.push(...getDescendantIds(child.id, data, childrenMap));
+  });
+  return descendants;
+}
+function getAncestorIds(itemId, data) {
+  const ancestors = [];
+  const dataMap = new Map(data.map((item) => [item.id, item]));
+  let current = dataMap.get(itemId)?.parentId;
+  while (current) {
+    ancestors.push(current);
+    current = dataMap.get(current)?.parentId;
+  }
+  return ancestors;
+}
+function isIndirectlySelected(itemId, selectedIds, data) {
+  const ancestors = getAncestorIds(itemId, data);
+  return ancestors.some((ancestorId) => selectedIds.has(ancestorId));
+}
+function getMultiSelectState(itemId, selectedIds, data) {
+  if (isIndirectlySelected(itemId, selectedIds, data)) {
+    return "indirect";
+  }
+  if (selectedIds.has(itemId)) {
+    return "selected";
+  }
+  return "unselected";
+}
+function getRangeIds(lastSelectedId, currentId, data) {
+  if (!lastSelectedId) {
+    return [currentId];
+  }
+  const lastIndex = data.findIndex((item) => item.id === lastSelectedId);
+  const currentIndex = data.findIndex((item) => item.id === currentId);
+  if (lastIndex === -1 || currentIndex === -1) {
+    return [currentId];
+  }
+  const startIndex = Math.min(lastIndex, currentIndex);
+  const endIndex = Math.max(lastIndex, currentIndex);
+  const rangeIds = [];
+  for (let i = startIndex; i <= endIndex; i++) {
+    rangeIds.push(data[i].id);
+  }
+  return rangeIds;
+}
+function cleanIndirectSelectedNodes(selectedIds, data) {
+  const cleanedIds = /* @__PURE__ */ new Set();
+  for (const id of selectedIds) {
+    const isNodeIndirectlySelected = isIndirectlySelected(id, selectedIds, data);
+    if (!isNodeIndirectlySelected) {
+      cleanedIds.add(id);
+    }
+  }
+  return cleanedIds;
+}
+function getAdjacentSelectionState(itemId, selectedIds, data) {
+  const currentIndex = data.findIndex((item) => item.id === itemId);
+  if (currentIndex === -1) {
+    return { hasPrevSelected: false, hasNextSelected: false };
+  }
+  const prevIndex = currentIndex - 1;
+  const hasPrevSelected = prevIndex >= 0 && getMultiSelectState(data[prevIndex].id, selectedIds, data) !== "unselected";
+  const nextIndex = currentIndex + 1;
+  const hasNextSelected = nextIndex < data.length && getMultiSelectState(data[nextIndex].id, selectedIds, data) !== "unselected";
+  return { hasPrevSelected, hasNextSelected };
+}
 function useTreeSearch({
   data,
   searchQuery,
@@ -223,4 +293,4 @@ function useTreeState({
   };
 }
 
-export { useTreeSearch, useTreeState };
+export { cleanIndirectSelectedNodes, getAdjacentSelectionState, getAncestorIds, getDescendantIds, getMultiSelectState, getRangeIds, isIndirectlySelected, useTreeSearch, useTreeState };

package/dist/{chunk-5OZS5UJX.cjs → chunk-NSPAT6XV.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkCRX2ZCM2_cjs = require('./chunk-CRX2ZCM2.cjs');
+var chunk6LTCLQH3_cjs = require('./chunk-6LTCLQH3.cjs');
 var vaul = require('vaul');
 var jsxRuntime = require('react/jsx-runtime');
 
@@ -24,7 +24,7 @@ function DrawerOverlay({
     vaul.Drawer.Overlay,
     {
       "data-slot": "drawer-overlay",
-      className: chunkCRX2ZCM2_cjs.cn(
+      className: chunk6LTCLQH3_cjs.cn(
         "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 bg-bg-mask fixed inset-0 z-50",
         className
       ),
@@ -43,7 +43,7 @@ function DrawerContent({
       vaul.Drawer.Content,
       {
         "data-slot": "drawer-content",
-        className: chunkCRX2ZCM2_cjs.cn(
+        className: chunk6LTCLQH3_cjs.cn(
           "group/drawer-content bg-bg-primary liquid-dark:liquid-dark-bg liquid-light:liquid-light-bg p-xl fixed z-50 flex h-auto flex-col shadow-[0_4px_16px_0_var(--color-shadow-secondary)]",
           "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh]",
           "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:pt-0",
@@ -65,7 +65,7 @@ function DrawerHeader({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-header",
-      className: chunkCRX2ZCM2_cjs.cn("gap-md pb-xl flex flex-col", className),
+      className: chunk6LTCLQH3_cjs.cn("gap-md pb-xl flex flex-col", className),
       ...props
     }
   );
@@ -75,7 +75,7 @@ function DrawerFooter({ className, ...props }) {
     "div",
     {
       "data-slot": "drawer-footer",
-      className: chunkCRX2ZCM2_cjs.cn("gap-lg pt-xl mt-auto flex flex-col", className),
+      className: chunk6LTCLQH3_cjs.cn("gap-lg pt-xl mt-auto flex flex-col", className),
       ...props
     }
   );
@@ -85,7 +85,7 @@ function DrawerTitle({ className, ...props }) {
     vaul.Drawer.Title,
     {
       "data-slot": "drawer-title",
-      className: chunkCRX2ZCM2_cjs.cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className),
+      className: chunk6LTCLQH3_cjs.cn("text-text-highlight text-uk-xl leading-uk-xl font-medium", className),
       ...props
     }
   );
@@ -98,7 +98,7 @@ function DrawerDescription({
     vaul.Drawer.Description,
     {
       "data-slot": "drawer-description",
-      className: chunkCRX2ZCM2_cjs.cn("text-text-secondary text-uk-md leading-uk-md", className),
+      className: chunk6LTCLQH3_cjs.cn("text-text-secondary text-uk-md leading-uk-md", className),
       ...props
     }
   );

package/dist/chunk-NUBFD3YP.mjs

@@ -0,0 +1,117 @@
+import { InputRoot, InputSlot } from './chunk-HGTL7DFT.mjs';
+import { cn } from './chunk-HBEU2PU2.mjs';
+import { forwardRef, useState, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ColorInput = forwardRef(function ColorInput2({ className, value, defaultValue, onChange, onValueChange, ...props }, ref) {
+  const normalizeColor = (colorValue) => {
+    if (colorValue === void 0 || colorValue === null) {
+      return "ffffff";
+    }
+    if (typeof colorValue === "number") {
+      if (colorValue > 16777215) {
+        const hex = colorValue.toString(16).padStart(8, "0");
+        return hex.slice(0, 6);
+      }
+      return colorValue.toString(16).padStart(6, "0");
+    }
+    if (typeof colorValue === "string") {
+      const trimmed = colorValue.trim().toLowerCase();
+      if (trimmed.startsWith("0x")) {
+        const hex = trimmed.slice(2);
+        if (hex.length > 6) {
+          return hex.slice(0, 6);
+        }
+        return hex.padStart(6, "0");
+      }
+      if (trimmed.startsWith("#")) {
+        const hex = trimmed.slice(1);
+        if (hex.length === 3) {
+          return hex.split("").map((c) => c + c).join("");
+        }
+        if (hex.length === 4) {
+          return hex.slice(0, 3).split("").map((c) => c + c).join("");
+        }
+        if (hex.length > 6) {
+          return hex.slice(0, 6);
+        }
+        return hex;
+      }
+      const rgbMatch = trimmed.match(/^rgba?\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)/);
+      if (rgbMatch) {
+        const r = Math.min(255, parseInt(rgbMatch[1], 10)).toString(16).padStart(2, "0");
+        const g = Math.min(255, parseInt(rgbMatch[2], 10)).toString(16).padStart(2, "0");
+        const b = Math.min(255, parseInt(rgbMatch[3], 10)).toString(16).padStart(2, "0");
+        return r + g + b;
+      }
+      if (/^[0-9a-f]+$/i.test(trimmed)) {
+        if (trimmed.length === 3) {
+          return trimmed.split("").map((c) => c + c).join("");
+        }
+        if (trimmed.length > 6) {
+          return trimmed.slice(0, 6);
+        }
+        return trimmed.padStart(6, "0");
+      }
+      return trimmed;
+    }
+    return "ffffff";
+  };
+  const [color, setColor] = useState(normalizeColor(value || defaultValue));
+  useEffect(() => {
+    if (value !== void 0) {
+      setColor(normalizeColor(value));
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsxs("div", { className: "gap-sm flex", children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        type: "color",
+        value: `#${color}`,
+        onChange: (e) => {
+          const newColor = e.currentTarget.value.replace(/^#/, "");
+          setColor(newColor);
+          onValueChange?.(newColor);
+          onChange?.(e);
+        },
+        className: cn(
+          [
+            "h-6",
+            "w-6",
+            "flex-none",
+            "cursor-pointer",
+            "rounded-1",
+            "[appearance:none]",
+            "[&::-webkit-color-swatch-wrapper]:p-0",
+            "[&::-webkit-color-swatch]:border-line-primary",
+            "[&::-webkit-color-swatch]:rounded-lg",
+            "[&::-moz-color-swatch]:border-line-primary",
+            "[&::-moz-color-swatch]:rounded-lg"
+          ],
+          className
+        )
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      InputRoot,
+      {
+        ...props,
+        size: "sm",
+        type: "text",
+        className: "flex-1",
+        value: color,
+        onChange: (e) => {
+          const newColor = e.currentTarget.value;
+          setColor(newColor);
+          onValueChange?.(newColor);
+          onChange?.(e);
+        },
+        children: /* @__PURE__ */ jsx(InputSlot, { children: "#" })
+      }
+    )
+  ] });
+});
+
+export { ColorInput };

package/dist/{chunk-4BQPIY5Z.mjs → chunk-O2NGB7YP.mjs}

@@ -1,4 +1,4 @@
-import { cn } from './chunk-T66ETI7E.mjs';
+import { cn } from './chunk-HBEU2PU2.mjs';
 import { jsx } from 'react/jsx-runtime';
 
 function Toolbar({ className, children, variant = "default", size = "md" }) {