sellmate-design-system-react 0.1.3 → 0.1.4

package/dist/index.cjs

@@ -44,6 +44,134 @@ var Ariakit__namespace = /*#__PURE__*/_interopNamespace(Ariakit);
 function cn(...inputs) {
   return tailwindMerge.twMerge(clsx.clsx(inputs));
 }
+
+// src/lib/color.ts
+var COLOR_KEYS = [
+  "white",
+  "black",
+  "grey_10",
+  "grey_20",
+  "grey_25",
+  "grey_30",
+  "grey_35",
+  "grey_45",
+  "grey_50",
+  "grey_55",
+  "grey_60",
+  "grey_65",
+  "grey_70",
+  "grey_80",
+  "grey_85",
+  "grey_90",
+  "grey_95",
+  "grey_05",
+  "red_15",
+  "red_20",
+  "red_30",
+  "red_45",
+  "red_60",
+  "red_70",
+  "red_75",
+  "red_80",
+  "red_85",
+  "red_90",
+  "red_95",
+  "red_99",
+  "orange_10",
+  "orange_20",
+  "orange_35",
+  "orange_45",
+  "orange_55",
+  "orange_60",
+  "orange_65",
+  "orange_75",
+  "orange_85",
+  "orange_90",
+  "orange_95",
+  "orange_99",
+  "yellow_10",
+  "yellow_20",
+  "yellow_25",
+  "yellow_30",
+  "yellow_40",
+  "yellow_45",
+  "yellow_50",
+  "yellow_60",
+  "yellow_70",
+  "yellow_80",
+  "yellow_90",
+  "yellow_95",
+  "olive_10",
+  "olive_15",
+  "olive_20",
+  "olive_30",
+  "olive_45",
+  "olive_55",
+  "olive_65",
+  "olive_70",
+  "olive_80",
+  "olive_90",
+  "olive_95",
+  "olive_05",
+  "green_15",
+  "green_25",
+  "green_45",
+  "green_55",
+  "green_65",
+  "green_70",
+  "green_75",
+  "green_80",
+  "green_85",
+  "green_90",
+  "green_95",
+  "green_99",
+  "steelblue_10",
+  "steelblue_25",
+  "steelblue_45",
+  "steelblue_60",
+  "steelblue_65",
+  "steelblue_70",
+  "steelblue_75",
+  "steelblue_80",
+  "steelblue_85",
+  "steelblue_90",
+  "steelblue_95",
+  "steelblue_99",
+  "oceanblue_15",
+  "oceanblue_25",
+  "oceanblue_50",
+  "oceanblue_60",
+  "oceanblue_65",
+  "oceanblue_70",
+  "oceanblue_75",
+  "oceanblue_80",
+  "oceanblue_85",
+  "oceanblue_90",
+  "oceanblue_95",
+  "oceanblue_99",
+  "brilliantblue_10",
+  "brilliantblue_20",
+  "brilliantblue_25",
+  "brilliantblue_40",
+  "brilliantblue_50",
+  "brilliantblue_60",
+  "brilliantblue_70",
+  "brilliantblue_75",
+  "brilliantblue_80",
+  "brilliantblue_85",
+  "brilliantblue_90",
+  "brilliantblue_95",
+  "brilliantblue_99",
+  "brilliantblue_05"
+];
+var KEY_SET = new Set(COLOR_KEYS);
+function isColorKey(input) {
+  return KEY_SET.has(input);
+}
+function resolveColor(input, fallback) {
+  if (input === null || input === void 0 || input === "") return fallback;
+  return isColorKey(input) ? `var(--color-${input.replace(/_/g, "-")})` : input;
+}
 var Icon_add = (p) => {
   const { size = 24, ...rest } = p;
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -2743,7 +2871,7 @@ var SIcon = react.forwardRef(function SIcon2({ name, size = 24, color, rotate, l
     {
       ref,
       className: cn("inline-flex items-center justify-center", rotateClass, className),
-      style: { color, ...style },
+      style: { color: resolveColor(color), ...style },
       role: label ? "img" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
@@ -4797,8 +4925,6 @@ function SCheckbox({
     }
   );
 }
-
-// src/lib/form.ts
 function runRules(value, rules) {
   if (!rules || rules.length === 0) return "";
   for (const rule of rules) {
@@ -4807,6 +4933,24 @@ function runRules(value, rules) {
   }
   return "";
 }
+var FormContext = react.createContext(null);
+function useFormContext() {
+  return react.useContext(FormContext);
+}
+function useFormField(field) {
+  const ctx = useFormContext();
+  const cbRef = react.useRef(field);
+  cbRef.current = field;
+  const name = field.name ?? "";
+  react.useEffect(() => {
+    if (!ctx) return;
+    return ctx.register({
+      name,
+      validate: () => cbRef.current.validate(),
+      resetValidation: () => cbRef.current.resetValidation()
+    });
+  }, [ctx, name]);
+}
 var FIELD_SIZE = {
   sm: { height: 28, radius: 4, fieldGap: 12, labelGap: 6, fontSize: 12, lineHeight: 20, icon: 12 },
   md: { height: 36, radius: 6, fieldGap: 16, labelGap: 8, fontSize: 14, lineHeight: 24, icon: 12 }
@@ -5099,6 +5243,15 @@ var SSelect = react.forwardRef(function SSelect2({
     const arr = Array.isArray(value) ? value : [value];
     return arr.map((v) => v != null && typeof v === "object" ? v.value : v).filter((v) => v != null && v !== "").map(String);
   }, [value]);
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(multi ? selected : selected[0] ?? "", rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
   const emit2 = (next) => {
     if (!onValueChange) return;
     const mapped = next.map(
@@ -5873,6 +6026,15 @@ var SInput = react.forwardRef(function SInput2({
   const isPassword = type === "password";
   const inputType = isPassword ? visible ? "text" : "password" : type;
   const hasValue = value !== void 0 && value !== null && String(value) !== "";
+  useFormField({
+    name: rest.name,
+    validate: () => {
+      const msg = runRules(value, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
   const resolvedError = error || ruleError !== "";
   const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
@@ -6003,6 +6165,15 @@ var STextarea = react.forwardRef(function STextarea2({
 }, ref) {
   const p = PAD;
   const [ruleError, setRuleError] = react.useState("");
+  useFormField({
+    name: rest.name,
+    validate: () => {
+      const msg = runRules(value, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
   const resolvedError = error || ruleError !== "";
   const resolvedErrorMessage = ruleError !== "" ? ruleError : errorMessage;
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
@@ -6136,6 +6307,15 @@ var SNumberInput = react.forwardRef(function SNumberInput2({
   react.useEffect(() => {
     setDisplay(formatWithCommas(toNumber(value)));
   }, [value]);
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(numValue, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const emit2 = (n) => {
@@ -6631,7 +6811,7 @@ function SCalendar({
                       "span",
                       {
                         className: "h-[var(--cmp-datepicker-calendar-day-dot-size)] w-[var(--cmp-datepicker-calendar-day-dot-size)] rounded-full",
-                        style: { backgroundColor: ev.color }
+                        style: { backgroundColor: resolveColor(ev.color) }
                       },
                       i
                     ))
@@ -6659,7 +6839,7 @@ function SCalendar({
                   "span",
                   {
                     className: "h-[var(--cmp-datepicker-calendar-day-dot-size)] w-[var(--cmp-datepicker-calendar-day-dot-size)] rounded-full",
-                    style: { backgroundColor: item.color },
+                    style: { backgroundColor: resolveColor(item.color) },
                     "aria-hidden": true
                   }
                 ),
@@ -6703,6 +6883,15 @@ function SDatePicker({
   const [focused, setFocused] = react.useState(false);
   const [ruleError, setRuleError] = react.useState("");
   const hasValue = value != null && value !== "";
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(value, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const dims = size === "md" ? { padX: 16, gap: 12, icon: 20, minW: 104, fontSize: 14, lineHeight: 24, radius: 6 } : { padX: 12, gap: 8, icon: 16, minW: 80, fontSize: 12, lineHeight: 20, radius: 4 };
@@ -6988,6 +7177,15 @@ function SDateRangePicker({
   const [ruleError, setRuleError] = react.useState("");
   const hasValue = value != null && value[0] !== "" && value[1] !== "";
   const display = hasValue ? `${value[0]} ~ ${value[1]}` : placeholder;
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(value, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
   const resolvedError = error || ruleError !== "";
   const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
   const dims = size === "md" ? { padX: 16, gap: 12, icon: 20, minW: 104, fontSize: 14, lineHeight: 24, radius: 6 } : { padX: 12, gap: 8, icon: 16, minW: 80, fontSize: 12, lineHeight: 20, radius: 4 };
@@ -7252,6 +7450,15 @@ function SFilePicker({
   const files = multiple ? Array.isArray(value) ? value : [] : value && !Array.isArray(value) ? value : null;
   const hasSingle = !multiple && !!files;
   const displayText = hasSingle ? files.name : placeholder;
+  useFormField({
+    name,
+    validate: () => {
+      const msg = runRules(files, rules);
+      setRuleError(msg);
+      return msg === "";
+    },
+    resetValidation: () => setRuleError("")
+  });
   const validate = (arr, existing = 0) => {
     const mfs = toBytes(maxFileSize), mts = toBytes(maxTotalSize), mf = maxFiles != null ? Number(maxFiles) : void 0;
     if (mf != null && existing + arr.length > mf)
@@ -7848,6 +8055,81 @@ var SToastContainer = react.forwardRef(
     );
   }
 );
+var SForm = react.forwardRef(function SForm2({ formClass, onSubmit, onValidationError, children, className, style }, ref) {
+  const formRef = react.useRef(null);
+  const fieldsRef = react.useRef(/* @__PURE__ */ new Set());
+  const register = react.useCallback((entry) => {
+    fieldsRef.current.add(entry);
+    return () => {
+      fieldsRef.current.delete(entry);
+    };
+  }, []);
+  const ctx = react.useMemo(() => ({ register }), [register]);
+  const orderByDom = react.useCallback((names) => {
+    const form = formRef.current;
+    if (!form || names.length < 2) return names;
+    const domOrder = /* @__PURE__ */ new Map();
+    form.querySelectorAll("[name],[data-name]").forEach((el, i) => {
+      const n = el.getAttribute("name") || el.getAttribute("data-name");
+      if (n && !domOrder.has(n)) domOrder.set(n, i);
+    });
+    return [...names].sort((a, b) => (domOrder.get(a) ?? Infinity) - (domOrder.get(b) ?? Infinity));
+  }, []);
+  const focusByName = react.useCallback((name) => {
+    const form = formRef.current;
+    if (!form || !name) return;
+    const host = form.querySelector(`[name="${CSS.escape(name)}"]`) ?? form.querySelector(`[data-name="${CSS.escape(name)}"]`);
+    if (!host) return;
+    const focusable = host.matches("input,textarea,select,button,[tabindex]") ? host : host.querySelector("input,textarea,select,button,[tabindex]");
+    focusable?.focus();
+    (focusable ?? host).scrollIntoView({ block: "nearest" });
+  }, []);
+  const runValidation = react.useCallback(() => {
+    let valid = true;
+    const invalidNames = [];
+    fieldsRef.current.forEach((f) => {
+      if (!f.validate()) {
+        valid = false;
+        if (f.name) invalidNames.push(f.name);
+      }
+    });
+    return { valid, names: orderByDom(invalidNames) };
+  }, [orderByDom]);
+  react.useImperativeHandle(
+    ref,
+    () => ({
+      validate: () => runValidation().valid,
+      resetValidation: () => fieldsRef.current.forEach((f) => f.resetValidation()),
+      reset: () => fieldsRef.current.forEach((f) => f.resetValidation()),
+      focusFirstInvalid: () => {
+        const { names } = runValidation();
+        if (names.length > 0) focusByName(names[0]);
+      }
+    }),
+    [runValidation, focusByName]
+  );
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    const { valid, names } = runValidation();
+    if (!valid) {
+      if (names.length > 0) focusByName(names[0]);
+      onValidationError?.({ names });
+      return;
+    }
+    onSubmit?.();
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(FormContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "form",
+    {
+      ref: formRef,
+      onSubmit: handleSubmit,
+      className: cn(formClass, className),
+      style,
+      noValidate: true,
+      children
+    }
+  ) });
+});
 function SRadioButton({
   options = [],
   value,
@@ -7963,6 +8245,12 @@ function SChipInput({
   const resolvedErrorMessage = duplicateMessage || ruleMessage || errorMessage;
   const resolvedError = error || duplicateMessage !== "" || ruleMessage !== "";
   const resolvedStatus = status ?? (resolvedError ? "error" : void 0);
+  useFormField({
+    name,
+    validate: () => runRules(values, rules) === "" && duplicateMessage === "",
+    resetValidation: () => {
+    }
+  });
   const isMax = maxCount != null && values.length >= maxCount;
   const commit = (next) => onValueChange?.(next);
   const addChip = (v) => {
@@ -8235,6 +8523,15 @@ var SBarcodeInput = react.forwardRef(
     const f = FONT2[size];
     const [ruleError, setRuleError] = react.useState("");
     const hasValue = value !== void 0 && value !== null && String(value) !== "";
+    useFormField({
+      name,
+      validate: () => {
+        const msg = runRules(value, rules);
+        setRuleError(msg);
+        return msg === "";
+      },
+      resetValidation: () => setRuleError("")
+    });
     const resolvedError = error || ruleError !== "";
     const resolvedStatus = status ?? (rules && rules.length > 0 ? ruleError !== "" ? "error" : void 0 : void 0);
     return /* @__PURE__ */ jsxRuntime.jsx(
@@ -8324,6 +8621,7 @@ var SBarcodeInput = react.forwardRef(
 exports.BADGE_COLORS = BADGE_COLORS;
 exports.BUTTON_COLORS = BUTTON_COLORS;
 exports.BUTTON_SIZES = BUTTON_SIZES;
+exports.COLOR_KEYS = COLOR_KEYS;
 exports.ICONS = ICONS;
 exports.SActionModal = SActionModal;
 exports.SBadge = SBadge;
@@ -8343,6 +8641,7 @@ exports.SDivider = SDivider;
 exports.SDropdownButton = SDropdownButton;
 exports.SField = SField;
 exports.SFilePicker = SFilePicker;
+exports.SForm = SForm;
 exports.SGhostButton = SGhostButton;
 exports.SGuide = SGuide;
 exports.SIcon = SIcon;
@@ -8377,6 +8676,8 @@ exports.TAG_SHAPES = TAG_SHAPES;
 exports.TAG_SIZES = TAG_SIZES;
 exports.buttonPreset = buttonPreset;
 exports.cn = cn;
+exports.isColorKey = isColorKey;
 exports.loading = loading;
+exports.resolveColor = resolveColor;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map