najm-kit 2.1.36 → 2.1.37

package/dist/index.mjs

@@ -1621,6 +1621,23 @@ var PRESET_COLORS = [
   "#000000"
 ];
 var DEFAULT_FORMATS = ["hex", "rgb", "hsl", "oklch"];
+var CSS_VAR_RE = /^var\(\s*(--[\w-]+)\s*(?:,\s*(.+))?\)$/;
+function resolvePickerColor(value, themeContainer) {
+  let current = value.trim();
+  const seen = /* @__PURE__ */ new Set();
+  for (let depth = 0; depth < 10; depth += 1) {
+    if (parseColor(current)) return current;
+    const match = current.match(CSS_VAR_RE);
+    if (!match) return current;
+    const [, property, fallback] = match;
+    if (seen.has(property)) return fallback?.trim() || current;
+    seen.add(property);
+    const target = themeContainer ?? (typeof document !== "undefined" ? document.documentElement : null);
+    const resolved = target?.style.getPropertyValue(property).trim() || (target && typeof getComputedStyle === "function" ? getComputedStyle(target).getPropertyValue(property).trim() : "");
+    current = resolved || fallback?.trim() || current;
+  }
+  return current;
+}
 function ColorPickerInput(props) {
   if (props.mode === "popover") {
     return /* @__PURE__ */ jsx(PopoverColorPicker, { ...props });
@@ -1640,6 +1657,8 @@ function SwatchesColorPicker({
   hideSwatches = false
 }) {
   const inputRef = useRef(null);
+  const themeContainer = React__default.useContext(NajmThemeContainerCtx);
+  const resolvedValue = resolvePickerColor(value, themeContainer);
   return /* @__PURE__ */ jsxs(
     BaseInput,
     {
@@ -1665,7 +1684,7 @@ function SwatchesColorPicker({
             {
               ref: inputRef,
               type: "color",
-              value: toPickerHex(value),
+              value: toPickerHex(resolvedValue),
               onChange: (e) => onChange(e.target.value),
               disabled,
               className: "sr-only"
@@ -1708,7 +1727,9 @@ function PopoverColorPicker({
   formats = DEFAULT_FORMATS,
   output = "preserve"
 }) {
-  const initialFormat = formats.includes(detectFormat(value)) ? detectFormat(value) : formats[0] ?? "hex";
+  const themeContainer = React__default.useContext(NajmThemeContainerCtx);
+  const resolvedValue = resolvePickerColor(value, themeContainer);
+  const initialFormat = formats.includes(detectFormat(resolvedValue)) ? detectFormat(resolvedValue) : formats[0] ?? "hex";
   const [activeFormat, setActiveFormat] = useState(initialFormat);
   const [draft, setDraft] = useState(value);
   useEffect(() => {
@@ -1754,7 +1775,7 @@ function PopoverColorPicker({
             "span",
             {
               className: "w-8 h-8 rounded-md border border-border shrink-0",
-              style: { backgroundColor: toPickerHex(value) }
+              style: { backgroundColor: value }
             }
           ),
           /* @__PURE__ */ jsx("span", { className: "text-sm text-muted-foreground font-mono truncate", children: value })
@@ -1765,7 +1786,9 @@ function PopoverColorPicker({
       /* @__PURE__ */ jsx(
         HexColorPicker,
         {
-          color: toPickerHex(draft),
+          color: toPickerHex(
+            draft === value ? resolvedValue : resolvePickerColor(draft, themeContainer)
+          ),
           onChange: handlePickerChange,
           style: { width: "100%" }
         }
@@ -2744,7 +2767,18 @@ var THEME_TOKEN_GROUPS = [
   {
     id: "surface",
     label: "Surface",
-    tokens: ["background", "foreground", "card", "card-foreground", "popover", "popover-foreground"]
+    tokens: [
+      "background",
+      "foreground",
+      "card",
+      "card-foreground",
+      "popover",
+      "popover-foreground",
+      "muted",
+      "muted-foreground",
+      "destructive",
+      "destructive-foreground"
+    ]
   },
   {
     id: "brand",
@@ -2760,11 +2794,6 @@ var THEME_TOKEN_GROUPS = [
       "accent-foreground"
     ]
   },
-  {
-    id: "feedback",
-    label: "Feedback",
-    tokens: ["muted", "muted-foreground", "destructive", "destructive-foreground"]
-  },
   {
     id: "border-focus",
     label: "Border & Focus",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "najm-kit",
-  "version": "2.1.36",
+  "version": "2.1.37",
   "license": "MIT",
   "type": "module",
   "description": "Reusable React UI component package for Najm framework",