@arcadeai/design-system 0.7.2 → 0.7.4

package/dist/components/ui/atoms/form.d.ts

@@ -2,7 +2,7 @@ import { Slot } from '@radix-ui/react-slot';
 import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
 import type * as LabelPrimitive from '@radix-ui/react-label';
 import * as React from 'react';
-declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues extends FieldValues | undefined = undefined>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
 declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => import("react/jsx-runtime").JSX.Element;
 declare const useFormField: () => {
     invalid: boolean;

package/dist/components/ui/atoms/form.js

@@ -1,92 +1,77 @@
-import { jsx as y } from "react/jsx-runtime";
-import { S as N } from "../../../index-CB1Wkg0G.js";
-import * as p from "react";
-import a from "react";
-import { Label as U } from "./label.js";
-import { c as h } from "../../../utils-Dy2WjYNJ.js";
-var $ = (e) => e.type === "checkbox", T = (e) => e instanceof Date, E = (e) => e == null;
-const W = (e) => typeof e == "object";
-var _ = (e) => !E(e) && !Array.isArray(e) && W(e) && !T(e), H = (e) => _(e) && e.target ? $(e.target) ? e.target.checked : e.target.value : e, G = (e) => e.substring(0, e.search(/\.\d+(\.|$)/)) || e, K = (e, r) => e.has(G(r)), q = (e) => {
-  const r = e.constructor && e.constructor.prototype;
-  return _(r) && r.hasOwnProperty("isPrototypeOf");
-}, z = typeof window < "u" && typeof window.HTMLElement < "u" && typeof document < "u";
-function I(e) {
-  let r;
-  const t = Array.isArray(e), o = typeof FileList < "u" ? e instanceof FileList : !1;
+import { jsx as m } from "react/jsx-runtime";
+import { S as W } from "../../../index-5Bhkapwi.js";
+import * as y from "react";
+import i from "react";
+import { Label as G } from "./label.js";
+import { c as p } from "../../../utils-CRiPKpXj.js";
+var j = (e) => e.type === "checkbox", K = (e) => e instanceof Date, O = (e) => e == null;
+const q = (e) => typeof e == "object";
+var b = (e) => !O(e) && !Array.isArray(e) && q(e) && !K(e), z = (e) => b(e) && e.target ? j(e.target) ? e.target.checked : e.target.value : e, J = (e) => e.substring(0, e.search(/\.\d+(\.|$)/)) || e, Q = (e, o) => e.has(J(o)), X = (e) => {
+  const o = e.constructor && e.constructor.prototype;
+  return b(o) && o.hasOwnProperty("isPrototypeOf");
+}, Y = typeof window < "u" && typeof window.HTMLElement < "u" && typeof document < "u";
+function L(e) {
+  let o;
+  const t = Array.isArray(e), s = typeof FileList < "u" ? e instanceof FileList : !1;
   if (e instanceof Date)
-    r = new Date(e);
-  else if (e instanceof Set)
-    r = new Set(e);
-  else if (!(z && (e instanceof Blob || o)) && (t || _(e)))
-    if (r = t ? [] : {}, !t && !q(e))
-      r = e;
+    o = new Date(e);
+  else if (!(Y && (e instanceof Blob || s)) && (t || b(e)))
+    if (o = t ? [] : {}, !t && !X(e))
+      o = e;
     else
-      for (const s in e)
-        e.hasOwnProperty(s) && (r[s] = I(e[s]));
+      for (const r in e)
+        e.hasOwnProperty(r) && (o[r] = L(e[r]));
   else
     return e;
-  return r;
+  return o;
 }
-var w = (e) => Array.isArray(e) ? e.filter(Boolean) : [], S = (e) => e === void 0, c = (e, r, t) => {
-  if (!r || !_(e))
+var M = (e) => /^\w*$/.test(e), V = (e) => e === void 0, Z = (e) => Array.isArray(e) ? e.filter(Boolean) : [], B = (e) => Z(e.replace(/["|']|\]/g, "").split(/\.|\[/)), c = (e, o, t) => {
+  if (!o || !b(e))
     return t;
-  const o = w(r.split(/[,[\].]+?/)).reduce((s, n) => E(s) ? s : s[n], e);
-  return S(o) || o === e ? S(e[r]) ? t : e[r] : o;
-}, C = (e) => typeof e == "boolean", J = (e) => /^\w*$/.test(e), Q = (e) => w(e.replace(/["|']|\]/g, "").split(/\.|\[/)), A = (e, r, t) => {
-  let o = -1;
-  const s = J(r) ? [r] : Q(r), n = s.length, u = n - 1;
-  for (; ++o < n; ) {
-    const l = s[o];
-    let i = t;
-    if (o !== u) {
-      const d = e[l];
-      i = _(d) || Array.isArray(d) ? d : isNaN(+s[o + 1]) ? {} : [];
+  const s = (M(o) ? [o] : B(o)).reduce((r, n) => O(r) ? r : r[n], e);
+  return V(s) || s === e ? V(e[o]) ? t : e[o] : s;
+}, C = (e) => typeof e == "boolean", P = (e, o, t) => {
+  let s = -1;
+  const r = M(o) ? [o] : B(o), n = r.length, l = n - 1;
+  for (; ++s < n; ) {
+    const u = r[s];
+    let a = t;
+    if (s !== l) {
+      const f = e[u];
+      a = b(f) || Array.isArray(f) ? f : isNaN(+r[s + 1]) ? {} : [];
     }
-    if (l === "__proto__" || l === "constructor" || l === "prototype")
+    if (u === "__proto__" || u === "constructor" || u === "prototype")
       return;
-    e[l] = i, e = e[l];
+    e[u] = a, e = e[u];
   }
-  return e;
 };
-const O = {
+const k = {
   BLUR: "blur",
   CHANGE: "change"
-}, P = {
+}, D = {
   all: "all"
-}, j = a.createContext(null), v = () => a.useContext(j), X = (e) => {
-  const { children: r, ...t } = e;
-  return a.createElement(j.Provider, { value: t }, r);
+}, I = i.createContext(null);
+I.displayName = "HookFormContext";
+const v = () => i.useContext(I), ee = (e) => {
+  const { children: o, ...t } = e;
+  return i.createElement(I.Provider, { value: t }, o);
 };
-var Y = (e, r, t, o = !0) => {
-  const s = {
-    defaultValues: r._defaultValues
+var te = (e, o, t, s = !0) => {
+  const r = {
+    defaultValues: o._defaultValues
   };
   for (const n in e)
-    Object.defineProperty(s, n, {
+    Object.defineProperty(r, n, {
       get: () => {
-        const u = n;
-        return r._proxyFormState[u] !== P.all && (r._proxyFormState[u] = !o || P.all), t && (t[u] = !0), e[u];
+        const l = n;
+        return o._proxyFormState[l] !== D.all && (o._proxyFormState[l] = !s || D.all), t && (t[l] = !0), e[l];
       }
     });
-  return s;
-}, Z = (e) => _(e) && !Object.keys(e).length, ee = (e, r, t, o) => {
-  t(e);
-  const { name: s, ...n } = e;
-  return Z(n) || Object.keys(n).length >= Object.keys(r).length || Object.keys(n).find((u) => r[u] === !0);
-}, te = (e) => Array.isArray(e) ? e : [e], k = (e, r, t) => !e || !r || e === r || te(e).some((o) => o && (t ? o === r : o.startsWith(r) || r.startsWith(o)));
-function D(e) {
-  const r = a.useRef(e);
-  r.current = e, a.useEffect(() => {
-    const t = !e.disabled && r.current.subject && r.current.subject.subscribe({
-      next: r.current.next
-    });
-    return () => {
-      t && t.unsubscribe();
-    };
-  }, [e.disabled]);
-}
-function R(e) {
-  const r = v(), { control: t = r.control, disabled: o, name: s, exact: n } = e || {}, [u, l] = a.useState(t._formState), i = a.useRef(!0), d = a.useRef({
+  return r;
+};
+const R = typeof window < "u" ? y.useLayoutEffect : y.useEffect;
+function U(e) {
+  const o = v(), { control: t = o.control, disabled: s, name: r, exact: n } = e || {}, [l, u] = i.useState(t._formState), a = i.useRef({
     isDirty: !1,
     isLoading: !1,
     dirtyFields: !1,
@@ -95,218 +80,216 @@ function R(e) {
     isValidating: !1,
     isValid: !1,
     errors: !1
-  }), m = a.useRef(s);
-  return m.current = s, D({
-    disabled: o,
-    next: (b) => i.current && k(m.current, b.name, n) && ee(b, d.current, t._updateFormState) && l({
-      ...t._formState,
-      ...b
-    }),
-    subject: t._subjects.state
-  }), a.useEffect(() => (i.current = !0, d.current.isValid && t._updateValid(!0), () => {
-    i.current = !1;
-  }), [t]), a.useMemo(() => Y(u, t, d.current, !1), [u, t]);
-}
-var re = (e) => typeof e == "string", se = (e, r, t, o, s) => re(e) ? c(t, e, s) : Array.isArray(e) ? e.map((n) => c(t, n)) : t;
-function oe(e) {
-  const r = v(), { control: t = r.control, name: o, defaultValue: s, disabled: n, exact: u } = e || {}, l = a.useRef(o);
-  l.current = o, D({
-    disabled: n,
-    subject: t._subjects.values,
-    next: (m) => {
-      k(l.current, m.name, u) && d(I(se(l.current, t._names, m.values || t._formValues, !1, s)));
-    }
   });
-  const [i, d] = a.useState(t._getWatch(o, s));
-  return a.useEffect(() => t._removeUnmounted()), i;
+  return R(() => t._subscribe({
+    name: r,
+    formState: a.current,
+    exact: n,
+    callback: (f) => {
+      !s && u({
+        ...t._formState,
+        ...f
+      });
+    }
+  }), [r, s, n]), i.useEffect(() => {
+    a.current.isValid && t._setValid(!0);
+  }, [t]), i.useMemo(() => te(l, t, a.current, !1), [l, t]);
+}
+var re = (e) => typeof e == "string", oe = (e, o, t, s, r) => re(e) ? c(t, e, r) : Array.isArray(e) ? e.map((n) => c(t, n)) : t;
+function se(e) {
+  const o = v(), { control: t = o.control, name: s, defaultValue: r, disabled: n, exact: l } = e || {}, u = i.useRef(r), [a, f] = i.useState(t._getWatch(s, u.current));
+  return R(() => t._subscribe({
+    name: s,
+    formState: {
+      values: !0
+    },
+    exact: l,
+    callback: (F) => !n && f(oe(s, t._names, F.values || t._formValues, !1, u.current))
+  }), [s, t, n, l]), i.useEffect(() => t._removeUnmounted()), a;
 }
 function ne(e) {
-  const r = v(), { name: t, disabled: o, control: s = r.control, shouldUnregister: n } = e, u = K(s._names.array, t), l = oe({
-    control: s,
+  const o = v(), { name: t, disabled: s, control: r = o.control, shouldUnregister: n } = e, l = Q(r._names.array, t), u = se({
+    control: r,
     name: t,
-    defaultValue: c(s._formValues, t, c(s._defaultValues, t, e.defaultValue)),
+    defaultValue: c(r._formValues, t, c(r._defaultValues, t, e.defaultValue)),
     exact: !0
-  }), i = R({
-    control: s,
+  }), a = U({
+    control: r,
     name: t,
     exact: !0
-  }), d = a.useRef(s.register(t, {
+  }), f = i.useRef(e), F = i.useRef(r.register(t, {
     ...e.rules,
-    value: l,
+    value: u,
     ...C(e.disabled) ? { disabled: e.disabled } : {}
-  })), m = a.useMemo(() => Object.defineProperties({}, {
+  })), S = i.useMemo(() => Object.defineProperties({}, {
     invalid: {
       enumerable: !0,
-      get: () => !!c(i.errors, t)
+      get: () => !!c(a.errors, t)
     },
     isDirty: {
       enumerable: !0,
-      get: () => !!c(i.dirtyFields, t)
+      get: () => !!c(a.dirtyFields, t)
     },
     isTouched: {
       enumerable: !0,
-      get: () => !!c(i.touchedFields, t)
+      get: () => !!c(a.touchedFields, t)
     },
     isValidating: {
       enumerable: !0,
-      get: () => !!c(i.validatingFields, t)
+      get: () => !!c(a.validatingFields, t)
     },
     error: {
       enumerable: !0,
-      get: () => c(i.errors, t)
+      get: () => c(a.errors, t)
     }
-  }), [i, t]), b = a.useMemo(() => ({
+  }), [a, t]), A = i.useCallback((d) => F.current.onChange({
+    target: {
+      value: z(d),
+      name: t
+    },
+    type: k.CHANGE
+  }), [t]), E = i.useCallback(() => F.current.onBlur({
+    target: {
+      value: c(r._formValues, t),
+      name: t
+    },
+    type: k.BLUR
+  }), [t, r._formValues]), w = i.useCallback((d) => {
+    const _ = c(r._fields, t);
+    _ && d && (_._f.ref = {
+      focus: () => d.focus && d.focus(),
+      select: () => d.select && d.select(),
+      setCustomValidity: (g) => d.setCustomValidity(g),
+      reportValidity: () => d.reportValidity()
+    });
+  }, [r._fields, t]), N = i.useMemo(() => ({
     name: t,
-    value: l,
-    ...C(o) || i.disabled ? { disabled: i.disabled || o } : {},
-    onChange: (f) => d.current.onChange({
-      target: {
-        value: H(f),
-        name: t
-      },
-      type: O.CHANGE
-    }),
-    onBlur: () => d.current.onBlur({
-      target: {
-        value: c(s._formValues, t),
-        name: t
-      },
-      type: O.BLUR
-    }),
-    ref: (f) => {
-      const F = c(s._fields, t);
-      F && f && (F._f.ref = {
-        focus: () => f.focus(),
-        select: () => f.select(),
-        setCustomValidity: (g) => f.setCustomValidity(g),
-        reportValidity: () => f.reportValidity()
-      });
-    }
-  }), [
-    t,
-    s._formValues,
-    o,
-    i.disabled,
-    l,
-    s._fields
-  ]);
-  return a.useEffect(() => {
-    const f = s._options.shouldUnregister || n, F = (g, B) => {
-      const V = c(s._fields, g);
-      V && V._f && (V._f.mount = B);
+    value: u,
+    ...C(s) || a.disabled ? { disabled: a.disabled || s } : {},
+    onChange: A,
+    onBlur: E,
+    ref: w
+  }), [t, s, a.disabled, A, E, w, u]);
+  return i.useEffect(() => {
+    const d = r._options.shouldUnregister || n;
+    r.register(t, {
+      ...f.current.rules,
+      ...C(f.current.disabled) ? { disabled: f.current.disabled } : {}
+    });
+    const _ = (g, H) => {
+      const h = c(r._fields, g);
+      h && h._f && (h._f.mount = H);
     };
-    if (F(t, !0), f) {
-      const g = I(c(s._options.defaultValues, t));
-      A(s._defaultValues, t, g), S(c(s._formValues, t)) && A(s._formValues, t, g);
+    if (_(t, !0), d) {
+      const g = L(c(r._options.defaultValues, t));
+      P(r._defaultValues, t, g), V(c(r._formValues, t)) && P(r._formValues, t, g);
     }
-    return () => {
-      (u ? f && !s._state.action : f) ? s.unregister(t) : F(t, !1);
+    return !l && r.register(t), () => {
+      (l ? d && !r._state.action : d) ? r.unregister(t) : _(t, !1);
     };
-  }, [t, s, u, n]), a.useEffect(() => {
-    C(o) && c(s._fields, t) && s._updateDisabledField({
-      disabled: o,
-      fields: s._fields,
-      name: t,
-      value: c(s._fields, t)._f.value
+  }, [t, r, l, n]), i.useEffect(() => {
+    r._setDisabledField({
+      disabled: s,
+      name: t
     });
-  }, [o, t, s]), a.useMemo(() => ({
-    field: b,
-    formState: i,
-    fieldState: m
-  }), [b, i, m]);
+  }, [s, t, r]), i.useMemo(() => ({
+    field: N,
+    formState: a,
+    fieldState: S
+  }), [N, a, S]);
 }
-const ie = (e) => e.render(ne(e)), fe = X, M = p.createContext(
+const ae = (e) => e.render(ne(e)), fe = ee, $ = y.createContext(
   {}
 ), me = ({
   ...e
-}) => /* @__PURE__ */ y(M.Provider, { value: { name: e.name }, children: /* @__PURE__ */ y(ie, { ...e }) }), x = () => {
-  const e = p.useContext(M), r = p.useContext(L), { getFieldState: t } = v(), o = R({ name: e.name }), s = t(e.name, o);
+}) => /* @__PURE__ */ m($.Provider, { value: { name: e.name }, children: /* @__PURE__ */ m(ae, { ...e }) }), x = () => {
+  const e = y.useContext($), o = y.useContext(T), { getFieldState: t } = v(), s = U({ name: e.name }), r = t(e.name, s);
   if (!e)
     throw new Error("useFormField should be used within <FormField>");
-  const { id: n } = r;
+  const { id: n } = o;
   return {
     id: n,
     name: e.name,
     formItemId: `${n}-form-item`,
     formDescriptionId: `${n}-form-item-description`,
     formMessageId: `${n}-form-item-message`,
-    ...s
+    ...r
   };
-}, L = p.createContext(
+}, T = y.createContext(
   {}
 );
-function ye({ className: e, ...r }) {
-  const t = p.useId();
-  return /* @__PURE__ */ y(L.Provider, { value: { id: t }, children: /* @__PURE__ */ y(
+function ye({ className: e, ...o }) {
+  const t = y.useId();
+  return /* @__PURE__ */ m(T.Provider, { value: { id: t }, children: /* @__PURE__ */ m(
     "div",
     {
-      className: h("grid gap-2", e),
+      className: p("grid gap-2", e),
       "data-slot": "form-item",
-      ...r
+      ...o
     }
   ) });
 }
-function be({
+function ge({
   className: e,
-  ...r
+  ...o
 }) {
-  const { error: t, formItemId: o } = x();
-  return /* @__PURE__ */ y(
-    U,
+  const { error: t, formItemId: s } = x();
+  return /* @__PURE__ */ m(
+    G,
     {
-      className: h("data-[error=true]:text-destructive", e),
+      className: p("data-[error=true]:text-destructive", e),
       "data-error": !!t,
       "data-slot": "form-label",
-      htmlFor: o,
-      ...r
+      htmlFor: s,
+      ...o
     }
   );
 }
-function ge({ ...e }) {
-  const { error: r, formItemId: t, formDescriptionId: o, formMessageId: s } = x();
-  return /* @__PURE__ */ y(
-    N,
+function _e({ ...e }) {
+  const { error: o, formItemId: t, formDescriptionId: s, formMessageId: r } = x();
+  return /* @__PURE__ */ m(
+    W,
     {
-      "aria-describedby": r ? `${o} ${s}` : `${o}`,
-      "aria-invalid": !!r,
+      "aria-describedby": o ? `${s} ${r}` : `${s}`,
+      "aria-invalid": !!o,
       "data-slot": "form-control",
       id: t,
       ...e
     }
   );
 }
-function _e({ className: e, ...r }) {
+function be({ className: e, ...o }) {
   const { formDescriptionId: t } = x();
-  return /* @__PURE__ */ y(
+  return /* @__PURE__ */ m(
     "p",
     {
-      className: h("text-muted-foreground text-sm", e),
+      className: p("text-muted-foreground text-sm", e),
       "data-slot": "form-description",
       id: t,
-      ...r
+      ...o
     }
   );
 }
-function Fe({ className: e, ...r }) {
-  const { error: t, formMessageId: o } = x(), s = t ? String((t == null ? void 0 : t.message) ?? "") : r.children;
-  return s ? /* @__PURE__ */ y(
+function Fe({ className: e, ...o }) {
+  const { error: t, formMessageId: s } = x(), r = t ? String(t?.message ?? "") : o.children;
+  return r ? /* @__PURE__ */ m(
     "p",
     {
-      className: h("text-destructive text-sm", e),
+      className: p("text-destructive text-sm", e),
       "data-slot": "form-message",
-      id: o,
-      ...r,
-      children: s
+      id: s,
+      ...o,
+      children: r
     }
   ) : null;
 }
 export {
   fe as Form,
-  ge as FormControl,
-  _e as FormDescription,
+  _e as FormControl,
+  be as FormDescription,
   me as FormField,
   ye as FormItem,
-  be as FormLabel,
+  ge as FormLabel,
   Fe as FormMessage,
   v as useFormContext,
   x as useFormField