@timeax/form-palette 0.1.35 → 0.2.0

package/dist/index.mjs

@@ -16,6 +16,7 @@ import '@radix-ui/react-toggle';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
 import Editor from '@toast-ui/editor';
 import '@toast-ui/editor/dist/toastui-editor.css';
+import '@toast-ui/editor/dist/theme/toastui-editor-dark.css';
 import * as SeparatorPrimitive from '@radix-ui/react-separator';
 import Ajv from 'ajv';
 import { Icon as Icon$1 } from '@iconify/react';
@@ -11817,6 +11818,7 @@ var Input = React66.forwardRef(
             "data-size": sizeKey,
             "data-density": densityKey,
             placeholder,
+            ...rest,
             value: displayValue,
             onChange,
             onBlur,
@@ -11824,8 +11826,7 @@ var Input = React66.forwardRef(
             onKeyDown: handleKeyDownWrapped,
             onKeyPress: handleKeyPressWrapped,
             onBeforeInput: handleBeforeInputWrapped,
-            onPaste: handlePasteWrapped,
-            ...rest
+            onPaste: handlePasteWrapped
           }
         )
       );
@@ -12102,6 +12103,12 @@ var Input = React66.forwardRef(
     ] });
   }
 );
+function stripAffixes(value, prefix, suffix) {
+  let out = value != null ? value : "";
+  if (prefix && out.startsWith(prefix)) out = out.slice(prefix.length);
+  if (suffix && out.endsWith(suffix)) out = out.slice(0, -suffix.length);
+  return out;
+}
 var ShadcnTextVariant = React66.forwardRef(function ShadcnTextVariant2(props, forwardedRef) {
   const {
     // form-level props
@@ -12185,7 +12192,12 @@ var ShadcnTextVariant = React66.forwardRef(function ShadcnTextVariant2(props, fo
     (e4) => {
       var _a, _b, _c;
       const maskedValue = (_a = e4.value) != null ? _a : "";
-      const unmaskedInner = (_c = (_b = maskedValue.match(/[0-9A-Za-z]/g)) == null ? void 0 : _b.join("")) != null ? _c : "";
+      const maskedValueWithoutAffixes = stripAffixes(
+        maskedValue,
+        prefix,
+        suffix
+      );
+      const unmaskedInner = (_c = (_b = maskedValueWithoutAffixes.match(/[0-9A-Za-z]/g)) == null ? void 0 : _b.join("")) != null ? _c : "";
       const mode = unmask === true || unmask === "raw" ? "raw" : "masked";
       const detail = {
         source: "variant",
@@ -12324,7 +12336,7 @@ function getDecimalSeparator(locale) {
   const m2 = s3.match(/1(.?)1/);
   return (m2 == null ? void 0 : m2[1]) || ".";
 }
-function stripAffixes(text, prefix, suffix) {
+function stripAffixes2(text, prefix, suffix) {
   let t4 = text != null ? text : "";
   if (prefix && t4.startsWith(prefix)) t4 = t4.slice(prefix.length);
   if (suffix && t4.endsWith(suffix)) t4 = t4.slice(0, -suffix.length);
@@ -12518,7 +12530,7 @@ var InputNumber = React66.memo(
     );
     const getModelFromDisplay = React66.useCallback(
       (text) => {
-        const stripped = stripAffixes(text, props.prefix, props.suffix);
+        const stripped = stripAffixes2(text, props.prefix, props.suffix);
         const withoutGroup = stripGrouping(stripped, locale);
         const candidate = decimalSep !== "." ? withoutGroup.replace(".", decimalSep) : withoutGroup;
         const n3 = parseEditable(candidate, locale, decimalSep);
@@ -12556,7 +12568,7 @@ var InputNumber = React66.memo(
       setFocused(true);
       (_a2 = props.onFocus) == null ? void 0 : _a2.call(props, e4);
       const model = isFiniteNumber(props.value) ? clampModel(props.value) : getModelFromDisplay(display);
-      const editable = model == null ? stripAffixes(display, props.prefix, props.suffix) : toEditableFromNumber(model);
+      const editable = model == null ? stripAffixes2(display, props.prefix, props.suffix) : toEditableFromNumber(model);
       const normalized = normalizeEditable(
         editable,
         locale,
@@ -12573,7 +12585,7 @@ var InputNumber = React66.memo(
       var _a2, _b;
       setFocused(false);
       const el = e4.currentTarget;
-      const raw = stripAffixes(el.value, props.prefix, props.suffix);
+      const raw = stripAffixes2(el.value, props.prefix, props.suffix);
       const normalized = normalizeEditable(
         raw,
         locale,
@@ -12595,7 +12607,7 @@ var InputNumber = React66.memo(
       if (props.disabled || props.readOnly) return;
       const el = e4.currentTarget;
       const caretBefore = (_a2 = el.selectionStart) != null ? _a2 : el.value.length;
-      const stripped = stripAffixes(el.value, props.prefix, props.suffix);
+      const stripped = stripAffixes2(el.value, props.prefix, props.suffix);
       let next = normalizeEditable(
         stripped,
         locale,
@@ -13086,14 +13098,18 @@ function applyMask(mask, raw, keepCharPositions) {
 function digitsOnly(input) {
   return (input != null ? input : "").replace(/\D+/g, "");
 }
+function normalizeDial(dial) {
+  return digitsOnly(dial != null ? dial : "");
+}
 function dialPrefixFor(country) {
-  return `+${country.dial} `;
+  return `+${normalizeDial(country.dial)} `;
 }
 function valueToNationalDigits(value, country) {
   const digits = digitsOnly(value);
   if (!digits) return "";
-  if (digits.startsWith(country.dial)) {
-    return digits.slice(country.dial.length);
+  const dial = normalizeDial(country.dial);
+  if (dial && digits.startsWith(dial)) {
+    return digits.slice(dial.length);
   }
   return digits;
 }
@@ -13113,8 +13129,9 @@ function computeDisplayFromValue(value, country, keepCharPositions) {
 function computeNextFromInput(rawInput, country, mode, keepCharPositions) {
   const prefix = dialPrefixFor(country);
   let national = digitsOnly(rawInput);
-  if (national.startsWith(country.dial)) {
-    national = national.slice(country.dial.length);
+  const dial = normalizeDial(country.dial);
+  if (dial && national.startsWith(dial)) {
+    national = national.slice(dial.length);
   }
   const mask = compileMask(country.mask);
   const maskedNational = applyMask(mask, national, keepCharPositions);
@@ -13125,7 +13142,7 @@ function computeNextFromInput(rawInput, country, mode, keepCharPositions) {
   } else if (mode === "masked") {
     nextValue = display;
   } else if (mode === "e164") {
-    nextValue = country.dial + national;
+    nextValue = dial + national;
   } else {
     nextValue = national;
   }
@@ -13138,8 +13155,10 @@ function remapToCountry(value, from, to, mode, keepCharPositions) {
   }
   const digitsAll = digitsOnly(value);
   let national = digitsAll;
-  if (digitsAll.startsWith(from.dial)) {
-    national = digitsAll.slice(from.dial.length);
+  const fromDial = normalizeDial(from.dial);
+  const toDial = normalizeDial(to.dial);
+  if (fromDial && digitsAll.startsWith(fromDial)) {
+    national = digitsAll.slice(fromDial.length);
   }
   const prefix = dialPrefixFor(to);
   const mask = compileMask(to.mask);
@@ -13151,7 +13170,7 @@ function remapToCountry(value, from, to, mode, keepCharPositions) {
   } else if (mode === "masked") {
     nextValue = display;
   } else if (mode === "e164") {
-    nextValue = to.dial + national;
+    nextValue = toDial + national;
   } else {
     nextValue = national;
   }
@@ -13180,7 +13199,7 @@ var CountrySelect = ({
   const selected = (_b = (_a = countries.find((c2) => c2.code === value)) != null ? _a : countries[0]) != null ? _b : null;
   const triggerLabel = selected ? [
     showFlag && selected.flag ? selected.flag : null,
-    showSelectedDial ? `+${selected.dial}` : null,
+    showSelectedDial ? `+${normalizeDial(selected.dial)}` : null,
     showSelectedLabel ? selected.label : null
   ].filter(Boolean).join(" ") : "";
   return /* @__PURE__ */ jsx("div", { className: countrySelectClassName, children: /* @__PURE__ */ jsxs(Select, { value: (_c = selected == null ? void 0 : selected.code) != null ? _c : "", onValueChange: onChange, children: [
@@ -13207,7 +13226,7 @@ var CountrySelect = ({
         parts.push(String(c2.flag));
       }
       if (showDialInList) {
-        parts.push(`${c2.dial}`);
+        parts.push(`+${normalizeDial(c2.dial)}`);
       }
       parts.push(c2.label);
       return /* @__PURE__ */ jsx(
@@ -21150,6 +21169,7 @@ function normalizeItems2(items, mappers, optionValueKey, optionLabelKey, optionT
     });
   }
   return items.map((item, index) => {
+    var _a;
     if (typeof item === "string" || typeof item === "number" || typeof item === "boolean") {
       const v2 = item;
       return {
@@ -21162,12 +21182,19 @@ function normalizeItems2(items, mappers, optionValueKey, optionLabelKey, optionT
         raw: item
       };
     }
-    return item;
+    const existing = item;
+    return {
+      ...existing,
+      raw: (_a = existing.raw) != null ? _a : item
+    };
   });
 }
 function isEqualValue2(a3, b2) {
   return Object.is(a3, b2);
 }
+function valueLookupKey(value) {
+  return `${typeof value}:${String(value)}`;
+}
 function asGroupValue(value) {
   if (!value) return void 0;
   if (Array.isArray(value)) {
@@ -21181,13 +21208,14 @@ function asGroupValue(value) {
       state: true
     }));
   }
-  if (typeof value == "object")
-    return Object.keys(value).map(
+  if (typeof value == "object") {
+    return Reflect.ownKeys(value).map(
       (key) => ({
         value: key,
         state: value[key]
       })
     );
+  }
   return void 0;
 }
 function asSingleValue(value) {
@@ -21346,7 +21374,32 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
       }
     );
   }
-  const groupValue = asGroupValue(value);
+  const normalizedByValueKey = React66.useMemo(() => {
+    const lookup = /* @__PURE__ */ new Map();
+    normalized.forEach((item) => {
+      lookup.set(valueLookupKey(item.value), item);
+    });
+    return lookup;
+  }, [normalized]);
+  const groupValue = React66.useMemo(() => {
+    const source = asGroupValue(value);
+    if (!(source == null ? void 0 : source.length)) return source;
+    return source.map((entry) => {
+      const byExact = normalized.find(
+        (item) => isEqualValue2(item.value, entry.value)
+      );
+      if (byExact) return { ...entry, value: byExact.value };
+      const byKey = normalizedByValueKey.get(valueLookupKey(entry.value));
+      if (byKey) return { ...entry, value: byKey.value };
+      if (typeof entry.value === "string") {
+        const byString = normalized.find(
+          (item) => typeof item.value !== "object" && String(item.value) === entry.value
+        );
+        if (byString) return { ...entry, value: byString.value };
+      }
+      return entry;
+    });
+  }, [value, normalized, normalizedByValueKey]);
   const {
     groupStyle,
     groupClasses,
@@ -21447,10 +21500,13 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
         raw: nextList,
         selectedOptions: nextList.map(
           (entry) => {
-            var _a, _b;
-            return (_b = (_a = normalized.find(
+            var _a, _b, _c;
+            const normalizedItem = (_a = normalizedByValueKey.get(
+              valueLookupKey(entry.value)
+            )) != null ? _a : normalized.find(
               (item) => isEqualValue2(item.value, entry.value)
-            )) == null ? void 0 : _a.raw) != null ? _b : entry.value;
+            );
+            return (_c = (_b = normalizedItem == null ? void 0 : normalizedItem.raw) != null ? _b : normalizedItem) != null ? _c : entry.value;
           }
         ),
         nativeEvent: void 0,
@@ -21466,7 +21522,7 @@ var InnerShadcnCheckboxVariant = (props, ref) => {
       }
       onValue(nextList.map((item) => item.value), detail);
     },
-    [onValue, disabled, groupValue, normalized, hasAnyTristate]
+    [onValue, disabled, groupValue, normalizedByValueKey, normalized, hasAnyTristate]
   );
   return /* @__PURE__ */ jsx(
     "div",
@@ -26412,7 +26468,7 @@ var ShadcnToggleVariant3 = React66.forwardRef(function ShadcnToggleVariant4(prop
     size = "md",
     options = [],
     multiple = false,
-    variant = "default",
+    design = "default",
     layout = "horizontal",
     gridCols = 2,
     fillWidth: fullWidth = false,
@@ -26516,7 +26572,6 @@ var ShadcnToggleVariant3 = React66.forwardRef(function ShadcnToggleVariant4(prop
     fullWidth && layout === "vertical" && "[&>*]:w-full",
     className
   );
-  console.log(layoutClasses, fullWidth, autoCap);
   const groupStyle = React66.useMemo(() => {
     const style = {};
     if (layout === "grid") {
@@ -26535,7 +26590,7 @@ var ShadcnToggleVariant3 = React66.forwardRef(function ShadcnToggleVariant4(prop
       value: currentValue,
       onValueChange: handleChange,
       disabled: isDisabled,
-      variant,
+      variant: design,
       size: toggleSize,
       className: layoutClasses,
       style: groupStyle,
@@ -26577,7 +26632,7 @@ var ShadcnToggleVariant3 = React66.forwardRef(function ShadcnToggleVariant4(prop
               // Error State
               error && "border-destructive/50 hover:bg-destructive/10 data-[state=on]:bg-destructive data-[state=on]:text-destructive-foreground",
               // Variant: Outline specific tweaks
-              variant === "outline" && layout === "horizontal" && !fullWidth && "first:rounded-l-md last:rounded-r-md rounded-none border-l-0 first:border-l",
+              design === "outline" && layout === "horizontal" && !fullWidth && "first:rounded-l-md last:rounded-r-md rounded-none border-l-0 first:border-l",
               // Layout tweaks
               fullWidth && "justify-center",
               // Custom Item Class
@@ -26612,6 +26667,30 @@ var toggleGroupModule = {
     tags: ["buttons", "toggle"]
   }
 };
+function isDarkThemedElement(el) {
+  if (!el) return false;
+  if (el.classList.contains("dark")) return true;
+  const dataTheme = el.getAttribute("data-theme");
+  return dataTheme === "dark";
+}
+function resolveAutoDarkFromHost(host, target) {
+  if (typeof document === "undefined") return false;
+  if (target === "document") {
+    return isDarkThemedElement(document.documentElement) || isDarkThemedElement(document.body);
+  }
+  let node = host != null ? host : null;
+  while (node) {
+    const isEditorMarker = node.hasAttribute("data-editor-theme");
+    if (!isEditorMarker) {
+      if (node.classList.contains("dark")) return true;
+      if (node.hasAttribute("data-theme")) {
+        return node.getAttribute("data-theme") === "dark";
+      }
+    }
+    node = node.parentElement;
+  }
+  return isDarkThemedElement(document.documentElement) || isDarkThemedElement(document.body);
+}
 function ShadcnEditorVariant(props) {
   const {
     value,
@@ -26630,7 +26709,9 @@ function ShadcnEditorVariant(props) {
     useCommandShortcut = true,
     format: format2 = "html",
     toolbar = "default",
-    pastePlainText = false
+    pastePlainText = false,
+    theme = "auto",
+    themeTarget = "nearest"
   } = props;
   const mountRef = React66.useRef(null);
   const editorRef = React66.useRef(null);
@@ -26638,9 +26719,13 @@ function ShadcnEditorVariant(props) {
   const onValueRef = React66.useRef(onValue);
   const syncingRef = React66.useRef(false);
   const loadedRef = React66.useRef(false);
+  const lastContentRef = React66.useRef(value != null ? value : "");
+  const [autoDark, setAutoDark] = React66.useState(false);
   formatRef.current = format2;
   onValueRef.current = onValue;
+  if (value !== void 0) lastContentRef.current = value;
   const effectiveReadOnly = Boolean(disabled || readOnly);
+  const effectiveTheme = theme === "auto" ? autoDark ? "dark" : "light" : theme;
   const readContent = React66.useCallback((ed) => {
     var _a, _b;
     return formatRef.current === "markdown" ? (_a = ed.getMarkdown()) != null ? _a : "" : (_b = ed.getHTML()) != null ? _b : "";
@@ -26652,9 +26737,40 @@ function ShadcnEditorVariant(props) {
   }, []);
   const structuralKey = React66.useMemo(() => {
     const hideModeSwitch = toolbar === "none" || pastePlainText;
-    return JSON.stringify({ toolbar, useCommandShortcut, hideModeSwitch });
-  }, [toolbar, useCommandShortcut, pastePlainText]);
+    return JSON.stringify({
+      toolbar,
+      useCommandShortcut,
+      hideModeSwitch,
+      effectiveTheme
+    });
+  }, [toolbar, useCommandShortcut, pastePlainText, effectiveTheme]);
   React66.useEffect(() => {
+    if (theme !== "auto") return;
+    if (typeof document === "undefined") return;
+    const host = mountRef.current;
+    const recompute = () => {
+      setAutoDark(resolveAutoDarkFromHost(host, themeTarget));
+    };
+    recompute();
+    const observer = new MutationObserver(() => {
+      recompute();
+    });
+    observer.observe(document.documentElement, {
+      attributes: true,
+      subtree: true,
+      attributeFilter: ["class", "data-theme"]
+    });
+    if (document.body) {
+      observer.observe(document.body, {
+        attributes: true,
+        subtree: true,
+        attributeFilter: ["class", "data-theme"]
+      });
+    }
+    return () => observer.disconnect();
+  }, [theme, themeTarget]);
+  React66.useEffect(() => {
+    var _a;
     const el = mountRef.current;
     if (!el) return;
     if (editorRef.current) {
@@ -26678,13 +26794,14 @@ function ShadcnEditorVariant(props) {
     const options = {
       el,
       height,
-      initialValue: value != null ? value : "",
+      initialValue: (_a = value != null ? value : lastContentRef.current) != null ? _a : "",
       previewStyle,
       initialEditType: editType,
       useCommandShortcut,
       usageStatistics: false,
       placeholder,
       hideModeSwitch,
+      ...effectiveTheme === "dark" ? { theme: "dark" } : {},
       ...toolbar === "none" ? { toolbarItems: [] } : Array.isArray(toolbar) ? { toolbarItems: toolbar } : {},
       events: {
         load: () => {
@@ -26695,7 +26812,9 @@ function ShadcnEditorVariant(props) {
           const ed = editorRef.current;
           if (!ed) return;
           if (syncingRef.current) return;
-          emit(readContent(ed));
+          const next = readContent(ed);
+          lastContentRef.current = next;
+          emit(next);
         }
       }
     };
@@ -26756,6 +26875,7 @@ function ShadcnEditorVariant(props) {
       const cur = (_d = (_c = ed.getHTML) == null ? void 0 : _c.call(ed)) != null ? _d : "";
       if (cur !== next) ed.setHTML(next, false);
     }
+    lastContentRef.current = next;
     Promise.resolve().then(() => {
       syncingRef.current = false;
     });
@@ -26779,6 +26899,8 @@ function ShadcnEditorVariant(props) {
     {
       "data-size": size,
       "data-density": density,
+      "data-theme": effectiveTheme,
+      "data-editor-theme": effectiveTheme,
       className: cn(
         "rounded-md border border-input bg-background overflow-hidden",
         effectiveReadOnly && "opacity-60 pointer-events-none",