@serendie/ui 0.1.16 → 0.2.0

package/dist/node_modules/@zag-js/radio-group/dist/index.js

@@ -1,18 +1,19 @@
 import { createAnatomy as p } from "../../anatomy/dist/index.js";
-import { createScope as m, queryAll as E, dataAttr as c, visuallyHiddenStyle as h, nextTick as y } from "../../dom-query/dist/index.js";
-import { createMachine as b, guards as T } from "../../core/dist/index.js";
-import { trackElementRect as R } from "../../element-rect/dist/index.js";
-import { trackFormControl as C, dispatchInputCheckedEvent as S } from "../../form-utils/dist/index.js";
-import { compact as V, isString as k, isEqual as A } from "../../utils/dist/index.js";
-import { createProps as f } from "../../types/dist/index.js";
-var D = p("radio-group").parts(
+import { createScope as m, dataAttr as c, visuallyHiddenStyle as E, queryAll as h, nextTick as b } from "../../dom-query/dist/index.js";
+import { trackFocusVisible as y, isFocusVisible as T } from "../../focus-visible/dist/index.js";
+import { createMachine as V, guards as R } from "../../core/dist/index.js";
+import { trackElementRect as C } from "../../element-rect/dist/index.js";
+import { dispatchInputCheckedEvent as S, trackFormControl as k } from "../../form-utils/dist/index.js";
+import { compact as A, isString as F, isEqual as D } from "../../utils/dist/index.js";
+import { createProps as I } from "../../types/dist/index.js";
+var _ = p("radio-group").parts(
   "root",
   "label",
   "item",
   "itemText",
   "itemControl",
   "indicator"
-), v = D.build(), o = m({
+), v = _.build(), n = m({
   getRootId: (e) => {
     var i;
     return ((i = e.ids) == null ? void 0 : i.root) ?? `radio-group:${e.id}`;
@@ -41,24 +42,24 @@ var D = p("radio-group").parts(
     var i;
     return ((i = e.ids) == null ? void 0 : i.indicator) ?? `radio-group:${e.id}:indicator`;
   },
-  getRootEl: (e) => o.getById(e, o.getRootId(e)),
-  getItemHiddenInputEl: (e, i) => o.getById(e, o.getItemHiddenInputId(e, i)),
-  getIndicatorEl: (e) => o.getById(e, o.getIndicatorId(e)),
+  getRootEl: (e) => n.getById(e, n.getRootId(e)),
+  getItemHiddenInputEl: (e, i) => n.getById(e, n.getItemHiddenInputId(e, i)),
+  getIndicatorEl: (e) => n.getById(e, n.getIndicatorId(e)),
   getFirstEnabledInputEl: (e) => {
     var i;
-    return (i = o.getRootEl(e)) == null ? void 0 : i.querySelector("input:not(:disabled)");
+    return (i = n.getRootEl(e)) == null ? void 0 : i.querySelector("input:not(:disabled)");
   },
   getFirstEnabledAndCheckedInputEl: (e) => {
     var i;
-    return (i = o.getRootEl(e)) == null ? void 0 : i.querySelector("input:not(:disabled):checked");
+    return (i = n.getRootEl(e)) == null ? void 0 : i.querySelector("input:not(:disabled):checked");
   },
   getInputEls: (e) => {
-    const t = `input[type=radio][data-ownedby='${CSS.escape(o.getRootId(e))}']:not([disabled])`;
-    return E(o.getRootEl(e), t);
+    const t = `input[type=radio][data-ownedby='${CSS.escape(n.getRootId(e))}']:not([disabled])`;
+    return h(n.getRootEl(e), t);
   },
   getActiveRadioEl: (e) => {
     if (e.value)
-      return o.getById(e, o.getItemId(e, e.value));
+      return n.getById(e, n.getItemId(e, e.value));
   },
   getOffsetRect: (e) => ({
     left: (e == null ? void 0 : e.offsetLeft) ?? 0,
@@ -67,9 +68,9 @@ var D = p("radio-group").parts(
     height: (e == null ? void 0 : e.offsetHeight) ?? 0
   }),
   getRectById: (e, i) => {
-    const t = o.getById(e, o.getItemId(e, i));
+    const t = n.getById(e, n.getItemId(e, i));
     if (t)
-      return o.resolveRect(o.getOffsetRect(t));
+      return n.resolveRect(n.getOffsetRect(t));
   },
   resolveRect: (e) => ({
     width: `${e.width}px`,
@@ -78,24 +79,25 @@ var D = p("radio-group").parts(
     top: `${e.top}px`
   })
 });
-function B(e, i, t) {
-  const a = e.context.isDisabled, d = e.context.readOnly;
-  function u(n) {
+function M(e, i, t) {
+  const a = e.context.isDisabled, l = e.context.readOnly;
+  function u(o) {
     return {
-      invalid: !!n.invalid,
-      disabled: !!n.disabled || a,
-      checked: e.context.value === n.value,
-      focused: e.context.focusedValue === n.value,
-      hovered: e.context.hoveredValue === n.value,
-      active: e.context.activeValue === n.value
+      invalid: !!o.invalid,
+      disabled: !!o.disabled || a,
+      checked: e.context.value === o.value,
+      focused: e.context.focusedValue === o.value,
+      hovered: e.context.hoveredValue === o.value,
+      active: e.context.activeValue === o.value
     };
   }
-  function s(n) {
-    const r = u(n);
+  function s(o) {
+    const r = u(o);
     return {
       "data-focus": c(r.focused),
+      "data-focus-visible": c(r.focused && e.context.focusVisible),
       "data-disabled": c(r.disabled),
-      "data-readonly": c(d),
+      "data-readonly": c(l),
       "data-state": r.checked ? "checked" : "unchecked",
       "data-hover": c(r.hovered),
       "data-invalid": c(r.invalid),
@@ -103,20 +105,20 @@ function B(e, i, t) {
       "data-ssr": c(e.context.ssr)
     };
   }
-  const g = () => {
-    const n = o.getFirstEnabledAndCheckedInputEl(e.context);
-    if (n) {
-      n.focus();
+  const f = () => {
+    const o = n.getFirstEnabledAndCheckedInputEl(e.context);
+    if (o) {
+      o.focus();
       return;
     }
-    const r = o.getFirstEnabledInputEl(e.context);
+    const r = n.getFirstEnabledInputEl(e.context);
     r == null || r.focus();
   };
   return {
-    focus: g,
+    focus: f,
     value: e.context.value,
-    setValue(n) {
-      i({ type: "SET_VALUE", value: n, isTrusted: !1 });
+    setValue(o) {
+      i({ type: "SET_VALUE", value: o, isTrusted: !1 });
     },
     clearValue() {
       i({ type: "SET_VALUE", value: null, isTrusted: !1 });
@@ -125,8 +127,8 @@ function B(e, i, t) {
       return t.element({
         ...v.root.attrs,
         role: "radiogroup",
-        id: o.getRootId(e.context),
-        "aria-labelledby": o.getLabelId(e.context),
+        id: n.getRootId(e.context),
+        "aria-labelledby": n.getLabelId(e.context),
         "data-orientation": e.context.orientation,
         "data-disabled": c(a),
         "aria-orientation": e.context.orientation,
@@ -142,89 +144,90 @@ function B(e, i, t) {
         dir: e.context.dir,
         "data-orientation": e.context.orientation,
         "data-disabled": c(a),
-        id: o.getLabelId(e.context),
-        onClick: g
+        id: n.getLabelId(e.context),
+        onClick: f
       });
     },
     getItemState: u,
-    getItemProps(n) {
-      const r = u(n);
+    getItemProps(o) {
+      const r = u(o);
       return t.label({
         ...v.item.attrs,
         dir: e.context.dir,
-        id: o.getItemId(e.context, n.value),
-        htmlFor: o.getItemHiddenInputId(e.context, n.value),
-        ...s(n),
+        id: n.getItemId(e.context, o.value),
+        htmlFor: n.getItemHiddenInputId(e.context, o.value),
+        ...s(o),
         onPointerMove() {
-          r.disabled || r.hovered || i({ type: "SET_HOVERED", value: n.value, hovered: !0 });
+          r.disabled || r.hovered || i({ type: "SET_HOVERED", value: o.value, hovered: !0 });
         },
         onPointerLeave() {
           r.disabled || i({ type: "SET_HOVERED", value: null });
         },
-        onPointerDown(l) {
-          r.disabled || (r.focused && l.pointerType === "mouse" && l.preventDefault(), i({ type: "SET_ACTIVE", value: n.value, active: !0 }));
+        onPointerDown(d) {
+          r.disabled || (r.focused && d.pointerType === "mouse" && d.preventDefault(), i({ type: "SET_ACTIVE", value: o.value, active: !0 }));
         },
         onPointerUp() {
           r.disabled || i({ type: "SET_ACTIVE", value: null });
         }
       });
     },
-    getItemTextProps(n) {
+    getItemTextProps(o) {
       return t.element({
         ...v.itemText.attrs,
         dir: e.context.dir,
-        id: o.getItemLabelId(e.context, n.value),
-        ...s(n)
+        id: n.getItemLabelId(e.context, o.value),
+        ...s(o)
       });
     },
-    getItemControlProps(n) {
-      const r = u(n);
+    getItemControlProps(o) {
+      const r = u(o);
       return t.element({
         ...v.itemControl.attrs,
         dir: e.context.dir,
-        id: o.getItemControlId(e.context, n.value),
+        id: n.getItemControlId(e.context, o.value),
         "data-active": c(r.active),
         "aria-hidden": !0,
-        ...s(n)
+        ...s(o)
       });
     },
-    getItemHiddenInputProps(n) {
-      const r = u(n);
+    getItemHiddenInputProps(o) {
+      const r = u(o);
       return t.input({
-        "data-ownedby": o.getRootId(e.context),
-        id: o.getItemHiddenInputId(e.context, n.value),
+        "data-ownedby": n.getRootId(e.context),
+        id: n.getItemHiddenInputId(e.context, o.value),
         type: "radio",
         name: e.context.name || e.context.id,
         form: e.context.form,
-        value: n.value,
-        onClick(l) {
-          if (d) {
-            l.preventDefault();
+        value: o.value,
+        onClick(d) {
+          if (l) {
+            d.preventDefault();
             return;
           }
-          l.currentTarget.checked && i({ type: "SET_VALUE", value: n.value, isTrusted: !0 });
+          d.currentTarget.checked && i({ type: "SET_VALUE", value: o.value, isTrusted: !0 });
         },
         onBlur() {
-          i({ type: "SET_FOCUSED", value: null });
+          i({ type: "SET_FOCUSED", value: null, focused: !1, focusVisible: !1 });
         },
         onFocus() {
-          i({ type: "SET_FOCUSED", value: n.value, focused: !0 });
+          const d = T();
+          i({ type: "SET_FOCUSED", value: o.value, focused: !0, focusVisible: d });
         },
-        onKeyDown(l) {
-          l.defaultPrevented || l.key === " " && i({ type: "SET_ACTIVE", value: n.value, active: !0 });
+        onKeyDown(d) {
+          d.defaultPrevented || d.key === " " && i({ type: "SET_ACTIVE", value: o.value, active: !0 });
         },
-        onKeyUp(l) {
-          l.defaultPrevented || l.key === " " && i({ type: "SET_ACTIVE", value: null });
+        onKeyUp(d) {
+          d.defaultPrevented || d.key === " " && i({ type: "SET_ACTIVE", value: null });
         },
         disabled: r.disabled,
         defaultChecked: r.checked,
-        style: h
+        style: E
       });
     },
     getIndicatorProps() {
-      var n, r, l, I;
+      var o, r, d, g;
       return t.element({
-        id: o.getIndicatorId(e.context),
+        id: n.getIndicatorId(e.context),
         ...v.indicator.attrs,
         dir: e.context.dir,
         hidden: e.context.value == null,
@@ -232,10 +235,10 @@ function B(e, i, t) {
         "data-orientation": e.context.orientation,
         style: {
           "--transition-property": "left, top, width, height",
-          "--left": (n = e.context.indicatorRect) == null ? void 0 : n.left,
+          "--left": (o = e.context.indicatorRect) == null ? void 0 : o.left,
           "--top": (r = e.context.indicatorRect) == null ? void 0 : r.top,
-          "--width": (l = e.context.indicatorRect) == null ? void 0 : l.width,
-          "--height": (I = e.context.indicatorRect) == null ? void 0 : I.height,
+          "--width": (d = e.context.indicatorRect) == null ? void 0 : d.width,
+          "--height": (g = e.context.indicatorRect) == null ? void 0 : g.height,
           position: "absolute",
           willChange: "var(--transition-property)",
           transitionProperty: "var(--transition-property)",
@@ -247,10 +250,10 @@ function B(e, i, t) {
     }
   };
 }
-var { not: _ } = T;
-function q(e) {
-  const i = V(e);
-  return b(
+var { not: $ } = R;
+function N(e) {
+  const i = A(e);
+  return V(
     {
       id: "radio",
       initial: "idle",
@@ -265,6 +268,7 @@ function q(e) {
         indicatorRect: {},
         canIndicatorTransition: !1,
         fieldsetDisabled: !1,
+        focusVisible: !1,
         ssr: !0
       },
       computed: {
@@ -272,14 +276,14 @@ function q(e) {
       },
       entry: ["syncIndicatorRect", "syncSsr"],
       exit: ["cleanupObserver"],
-      activities: ["trackFormControlState"],
+      activities: ["trackFormControlState", "trackFocusVisible"],
       watch: {
         value: ["setIndicatorTransition", "syncIndicatorRect", "syncInputElements"]
       },
       on: {
         SET_VALUE: [
           {
-            guard: _("isTrusted"),
+            guard: $("isTrusted"),
             actions: ["setValue", "dispatchChangeEvent"]
           },
           {
@@ -305,20 +309,23 @@ function q(e) {
         isTrusted: (t, a) => !!a.isTrusted
       },
       activities: {
-        trackFormControlState(t, a, { send: d, initialContext: u }) {
-          return C(o.getRootEl(t), {
+        trackFormControlState(t, a, { send: l, initialContext: u }) {
+          return k(n.getRootEl(t), {
             onFieldsetDisabledChange(s) {
               t.fieldsetDisabled = s;
             },
             onFormReset() {
-              d({ type: "SET_VALUE", value: u.value });
+              l({ type: "SET_VALUE", value: u.value });
             }
           });
+        },
+        trackFocusVisible(t) {
+          return y({ root: n.getRootNode(t) });
         }
       },
       actions: {
         setValue(t, a) {
-          $.value(t, a.value);
+          w.value(t, a.value);
         },
         setHovered(t, a) {
           t.hoveredValue = a.value;
@@ -327,15 +334,15 @@ function q(e) {
           t.activeValue = a.value;
         },
         setFocused(t, a) {
-          t.focusedValue = a.value;
+          t.focusedValue = a.value, t.focusVisible = a.focusVisible;
         },
         syncInputElements(t) {
-          o.getInputEls(t).forEach((d) => {
-            d.checked = d.value === t.value;
+          n.getInputEls(t).forEach((l) => {
+            l.checked = l.value === t.value;
           });
         },
         setIndicatorTransition(t) {
-          t.canIndicatorTransition = k(t.value);
+          t.canIndicatorTransition = F(t.value);
         },
         cleanupObserver(t) {
           var a;
@@ -346,44 +353,44 @@ function q(e) {
         },
         syncIndicatorRect(t) {
           var u;
-          if ((u = t.indicatorCleanup) == null || u.call(t), !o.getIndicatorEl(t)) return;
-          const a = t.value, d = o.getActiveRadioEl(t);
-          if (a == null || !d) {
+          if ((u = t.indicatorCleanup) == null || u.call(t), !n.getIndicatorEl(t)) return;
+          const a = t.value, l = n.getActiveRadioEl(t);
+          if (a == null || !l) {
             t.indicatorRect = {};
             return;
           }
-          t.indicatorCleanup = R(d, {
+          t.indicatorCleanup = C(l, {
             getRect(s) {
-              return o.getOffsetRect(s);
+              return n.getOffsetRect(s);
             },
             onChange(s) {
-              t.indicatorRect = o.resolveRect(s), y(() => {
+              t.indicatorRect = n.resolveRect(s), b(() => {
                 t.canIndicatorTransition = !1;
               });
             }
           });
         },
         dispatchChangeEvent(t) {
-          o.getInputEls(t).forEach((d) => {
-            const u = d.value === t.value;
-            u !== d.checked && S(d, { checked: u });
+          n.getInputEls(t).forEach((l) => {
+            const u = l.value === t.value;
+            u !== l.checked && S(l, { checked: u });
           });
         }
       }
     }
   );
 }
-var F = {
+var P = {
   change: (e) => {
     var i;
     e.value != null && ((i = e.onValueChange) == null || i.call(e, { value: e.value }));
   }
-}, $ = {
+}, w = {
   value: (e, i) => {
-    A(e.value, i) || (e.value = i, F.change(e));
+    D(e.value, i) || (e.value = i, P.change(e));
   }
 };
-f()([
+I()([
   "dir",
   "disabled",
   "form",
@@ -396,9 +403,9 @@ f()([
   "readOnly",
   "value"
 ]);
-f()(["value", "disabled", "invalid"]);
+I()(["value", "disabled", "invalid"]);
 export {
-  D as anatomy,
-  B as connect,
-  q as machine
+  _ as anatomy,
+  M as connect,
+  N as machine
 };

package/dist/node_modules/@zag-js/react/dist/index.js

@@ -1,35 +1,36 @@
 import { createNormalizer as C } from "../../types/dist/index.js";
-import A, { useRef as f, useSyncExternalStore as O, useCallback as _, useMemo as E, useEffect as i, useLayoutEffect as M } from "react";
+import O, { useRef as f, useLayoutEffect as A, useEffect as i, useSyncExternalStore as _, useCallback as j, useMemo as S } from "react";
 import "react-dom";
 import "react/jsx-runtime";
-import { makeGlobal as j, subscribe as w, snapshot as S } from "../../store/dist/index.js";
+import { subscribe as M, snapshot as g, makeGlobal as w } from "../../store/dist/index.js";
 import { isChanged as R, createProxy as W } from "../../../proxy-compare/dist/index.js";
-var X = C((t) => t), g = (t) => (t == null ? void 0 : t.constructor.name) === "Array", z = (t, e) => {
+var Y = C((t) => t), E = (t) => (t == null ? void 0 : t.constructor.name) === "Array", z = (t, e) => {
   if (t.length !== e.length) return !1;
   for (let r = 0; r < t.length; r++)
-    if (!y(t[r], e[r])) return !1;
+    if (!p(t[r], e[r])) return !1;
   return !0;
-}, y = (t, e) => {
+}, p = (t, e) => {
   if (Object.is(t, e)) return !0;
   if (t == null && e != null || t != null && e == null) return !1;
   if (typeof (t == null ? void 0 : t.isEqual) == "function" && typeof (e == null ? void 0 : e.isEqual) == "function")
     return t.isEqual(e);
   if (typeof t == "function" && typeof e == "function")
     return t.toString() === e.toString();
-  if (g(t) && g(e))
+  if (E(t) && E(e))
     return z(Array.from(t), Array.from(e));
   if (typeof t != "object" || typeof e != "object") return !1;
   const r = Object.keys(e ?? /* @__PURE__ */ Object.create(null)), o = r.length;
   for (let n = 0; n < o; n++)
     if (!Reflect.has(t, r[n])) return !1;
   for (let n = 0; n < o; n++) {
-    const s = r[n];
-    if (!y(t[s], e[s])) return !1;
+    const c = r[n];
+    if (!p(t[c], e[c])) return !1;
   }
   return !0;
-}, K = () => process.env.NODE_ENV !== "production";
+}, K = () => process.env.NODE_ENV !== "production", L = Function.prototype.toString;
+L.call(Object);
 function k(t) {
-  if (!L(t) || t === void 0)
+  if (!N(t) || t === void 0)
     return t;
   const e = Reflect.ownKeys(t).filter((o) => typeof o == "string"), r = {};
   for (const o of e) {
@@ -38,8 +39,8 @@ function k(t) {
   }
   return r;
 }
-var L = (t) => t && typeof t == "object" && t.constructor === Object;
-function N(t, e) {
+var N = (t) => t && typeof t == "object" && t.constructor === Object;
+function P(t, e) {
   const r = f(!1), o = f(!1);
   i(() => {
     if (r.current && o.current)
@@ -49,65 +50,65 @@ function N(t, e) {
     r.current = !1;
   }), []);
 }
-var { use: x } = A, P = j("__zag__targetCache", () => /* @__PURE__ */ new WeakMap());
+var { use: x } = O, D = w("__zag__targetCache", () => /* @__PURE__ */ new WeakMap());
 function q(t, e) {
-  const { actions: r, context: o, sync: n } = e ?? {}, s = f(), c = f(), d = O(
-    _((u) => w(t.state, u, n), [n]),
+  const { actions: r, context: o, sync: n } = e ?? {}, c = f(), s = f(), y = _(
+    j((u) => M(t.state, u, n), [n]),
     () => {
-      const u = S(t.state, x);
+      const u = g(t.state, x);
       try {
-        if (s.current && c.current && !R(s.current, u, c.current, /* @__PURE__ */ new WeakMap()))
-          return s.current;
+        if (c.current && s.current && !R(c.current, u, s.current, /* @__PURE__ */ new WeakMap()))
+          return c.current;
       } catch {
       }
       return u;
     },
-    () => S(t.state, x)
+    () => g(t.state, x)
   );
   t.setOptions({ actions: r });
-  const l = E(() => k(o ?? {}), [o]);
-  N(() => {
-    const u = Object.entries(l), p = t.contextSnapshot ?? {};
+  const l = S(() => k(o ?? {}), [o]);
+  P(() => {
+    const u = Object.entries(l), h = t.contextSnapshot ?? {};
     u.map(([a, m]) => ({
       key: a,
       curr: m,
-      prev: p[a],
-      equal: y(p[a], m)
+      prev: h[a],
+      equal: p(h[a], m)
     })).every(({ equal: a }) => a) || t.setContext(l);
   }, [l]);
-  const h = /* @__PURE__ */ new WeakMap();
+  const d = /* @__PURE__ */ new WeakMap();
   i(() => {
-    s.current = d, c.current = h;
+    c.current = y, s.current = d;
   });
-  const v = E(() => /* @__PURE__ */ new WeakMap(), []);
-  return W(d, h, v, P);
+  const v = S(() => /* @__PURE__ */ new WeakMap(), []);
+  return W(y, d, v, D);
 }
-function Y(t) {
+function Z(t) {
   return [q(t), t.send];
 }
-function D(t) {
+function I(t) {
   const e = f();
   return e.current || (e.current = { v: t() }), e.current.v;
 }
-var I = typeof document < "u" ? M : i;
+var F = typeof document < "u" ? A : i;
 function G(t, e) {
-  const { state: r, context: o } = e ?? {}, n = D(() => {
-    const c = typeof t == "function" ? t() : t;
-    return o && c.setContext(o), c._created(), c;
-  }), s = f();
-  return I(() => {
-    const c = r ?? s.current;
-    return n.start(c), () => {
-      K() && (s.current = n.getHydrationState()), n.stop();
+  const { state: r, context: o } = e ?? {}, n = I(() => {
+    const s = typeof t == "function" ? t() : t;
+    return o && s.setContext(o), s._created(), s;
+  }), c = f();
+  return F(() => {
+    const s = r ?? c.current;
+    return n.start(s), () => {
+      K() && (c.current = n.getHydrationState()), n.stop();
     };
   }, []), n;
 }
-function Z(t, e) {
+function $(t, e) {
   const r = G(t, e);
   return [q(r, e), r.send, r];
 }
 export {
-  X as normalizeProps,
-  Y as useActor,
-  Z as useMachine
+  Y as normalizeProps,
+  Z as useActor,
+  $ as useMachine
 };