@als-tp/als-react-ts-ui 0.5.0 → 0.5.2

package/dist/als-react-ts-ui149.js

@@ -1,24 +1,187 @@
-import * as u from "react";
-import { useComboboxRootContext as a } from "./als-react-ts-ui454.js";
-import { ComboboxPortalContext as c } from "./als-react-ts-ui458.js";
-import { selectors as t } from "./als-react-ts-ui455.js";
-import { jsx as e } from "react/jsx-runtime";
-import { FloatingPortal as d } from "./als-react-ts-ui258.js";
-import { useStore as n } from "./als-react-ts-ui408.js";
-const p = /* @__PURE__ */ u.forwardRef(function(m, s) {
+import * as f from "react";
+import { NOOP as Pe, EMPTY_OBJECT as xe } from "./als-react-ts-ui322.js";
+import { useControlled as ve } from "./als-react-ts-ui292.js";
+import { useStableCallback as Re } from "./als-react-ts-ui223.js";
+import { useIsoLayoutEffect as A } from "./als-react-ts-ui224.js";
+import { useMergedRefs as Ve } from "./als-react-ts-ui297.js";
+import { visuallyHidden as Ee } from "./als-react-ts-ui376.js";
+import { useStateAttributesMapping as Ie } from "./als-react-ts-ui448.js";
+import { useRenderElement as ye } from "./als-react-ts-ui220.js";
+import { useBaseUiId as _ } from "./als-react-ts-ui276.js";
+import { useButton as Be } from "./als-react-ts-ui274.js";
+import { useFieldRootContext as Fe } from "./als-react-ts-ui398.js";
+import { useFieldItemContext as Oe } from "./als-react-ts-ui447.js";
+import { useField as De } from "./als-react-ts-ui403.js";
+import { useFormContext as Ne } from "./als-react-ts-ui402.js";
+import { useLabelableContext as Ge } from "./als-react-ts-ui399.js";
+import { useCheckboxGroupContext as Me } from "./als-react-ts-ui436.js";
+import { CheckboxRootContext as Se } from "./als-react-ts-ui449.js";
+import { createChangeEventDetails as Te } from "./als-react-ts-ui273.js";
+import { useValueChanged as Ae } from "./als-react-ts-ui406.js";
+import { jsxs as _e, jsx as j } from "react/jsx-runtime";
+import { mergeProps as je } from "./als-react-ts-ui323.js";
+import { none as qe } from "./als-react-ts-ui275.js";
+const He = "data-parent", Le = /* @__PURE__ */ f.forwardRef(function(I, q) {
   const {
-    keepMounted: o = !1,
-    ...f
-  } = m, r = a(), l = n(r, t.mounted), i = n(r, t.forceMounted);
-  return l || o || i ? /* @__PURE__ */ e(c.Provider, {
-    value: o,
-    children: /* @__PURE__ */ e(d, {
-      ref: s,
-      ...f
-    })
-  }) : null;
+    checked: H,
+    className: we,
+    defaultChecked: L = !1,
+    disabled: $ = !1,
+    id: y,
+    indeterminate: x = !1,
+    inputRef: w,
+    name: J,
+    onCheckedChange: K,
+    parent: n = !1,
+    readOnly: p = !1,
+    render: Je,
+    required: m = !1,
+    value: h,
+    nativeButton: U = !1,
+    ...W
+  } = I, {
+    clearErrors: X
+  } = Ne(), {
+    disabled: Y,
+    name: z,
+    setDirty: Q,
+    setFilled: v,
+    setFocused: B,
+    setTouched: Z,
+    state: F,
+    validationMode: ee,
+    validityData: te,
+    shouldValidateOnChange: oe,
+    validation: ne
+  } = Fe(), re = Oe(), {
+    labelId: ie,
+    controlId: ae,
+    setControlId: C,
+    getDescriptionProps: O
+  } = Ge(), e = Me(), u = e?.parent, g = u && e.allValues, a = Y || re.disabled || e?.disabled || $, s = z ?? J, o = h ?? s, D = _(), se = _();
+  let l = ae;
+  g ? l = n ? se : `${u.id}-${o}` : y && (l = y);
+  let R = {};
+  g && (n ? R = e.parent.getParentProps() : o && (R = e.parent.getChildProps(o)));
+  const de = Re(K), {
+    checked: N = H,
+    indeterminate: k = x,
+    onCheckedChange: ue,
+    ...le
+  } = R, d = e?.value, G = e?.setValue, M = e?.defaultValue, V = f.useRef(null), {
+    getButtonProps: ce,
+    buttonRef: fe
+  } = Be({
+    disabled: a,
+    native: U
+  }), r = e?.validation ?? ne, [t, pe] = ve({
+    controlled: o && d && !n ? d.includes(o) : N,
+    default: o && M && !n ? M.includes(o) : L,
+    name: "Checkbox",
+    state: "checked"
+  });
+  A(() => {
+    if (C !== Pe)
+      return C(l), () => {
+        C(void 0);
+      };
+  }, [l, e, C, n]), De({
+    enabled: !e,
+    id: D,
+    commit: r.commit,
+    value: t,
+    controlRef: V,
+    name: s,
+    getValue: () => t
+  });
+  const c = f.useRef(null), me = Ve(w, c, r.inputRef);
+  A(() => {
+    c.current && (c.current.indeterminate = k, t && v(!0));
+  }, [t, k, v]), Ae(t, () => {
+    e && !n || (X(s), v(t), Q(t !== te.initialValue), oe() ? r.commit(t) : r.commit(t, !0));
+  });
+  const he = je(
+    {
+      checked: t,
+      disabled: a,
+      // parent checkboxes unset `name` to be excluded from form submission
+      name: n ? void 0 : s,
+      // Set `id` to stop Chrome warning about an unassociated input
+      id: l ?? void 0,
+      required: m,
+      ref: me,
+      style: Ee,
+      tabIndex: -1,
+      type: "checkbox",
+      "aria-hidden": !0,
+      onChange(i) {
+        if (i.nativeEvent.defaultPrevented)
+          return;
+        const b = i.target.checked, P = Te(qe, i.nativeEvent);
+        if (ue?.(b, P), de(b, P), !P.isCanceled && (pe(b), o && d && G && !n)) {
+          const ke = b ? [...d, o] : d.filter((be) => be !== o);
+          G(ke, P);
+        }
+      },
+      onFocus() {
+        V.current?.focus();
+      }
+    },
+    // React <19 sets an empty value if `undefined` is passed explicitly
+    // To avoid this, we only set the value if it's defined
+    h !== void 0 ? {
+      value: (e ? t && h : h) || ""
+    } : xe,
+    O,
+    e ? r.getValidationProps : r.getInputValidationProps
+  ), S = g ? !!N : t, T = g && k || x;
+  f.useEffect(() => {
+    u && o && u.disabledStatesRef.current.set(o, a);
+  }, [u, a, o]);
+  const E = f.useMemo(() => ({
+    ...F,
+    checked: S,
+    disabled: a,
+    readOnly: p,
+    required: m,
+    indeterminate: T
+  }), [F, S, a, p, m, T]), Ce = Ie(E), ge = ye("span", I, {
+    state: E,
+    ref: [fe, V, q, e?.registerControlRef],
+    props: [{
+      id: D,
+      role: "checkbox",
+      "aria-checked": k ? "mixed" : t,
+      "aria-readonly": p || void 0,
+      "aria-required": m || void 0,
+      "aria-labelledby": ie,
+      [He]: n ? "" : void 0,
+      onFocus() {
+        B(!0);
+      },
+      onBlur() {
+        const i = c.current;
+        i && (Z(!0), B(!1), ee === "onBlur" && r.commit(e ? d : i.checked));
+      },
+      onClick(i) {
+        p || a || (i.preventDefault(), c.current?.click());
+      }
+    }, O, r.getValidationProps, W, le, ce],
+    stateAttributesMapping: Ce
+  });
+  return /* @__PURE__ */ _e(Se.Provider, {
+    value: E,
+    children: [ge, !t && !e && s && !n && /* @__PURE__ */ j("input", {
+      type: "hidden",
+      name: s,
+      value: "off"
+    }), /* @__PURE__ */ j("input", {
+      ...he
+    })]
+  });
 });
-process.env.NODE_ENV !== "production" && (p.displayName = "ComboboxPortal");
+process.env.NODE_ENV !== "production" && (Le.displayName = "CheckboxRoot");
 export {
-  p as ComboboxPortal
+  Le as CheckboxRoot,
+  He as PARENT_CHECKBOX
 };

package/dist/als-react-ts-ui150.js

@@ -1,15 +1,45 @@
-import * as r from "react";
-import { useComboboxInputValueContext as l } from "./als-react-ts-ui454.js";
-import { jsx as u } from "react/jsx-runtime";
-function c(n) {
+import * as o from "react";
+import { useCheckboxRootContext as b } from "./als-react-ts-ui449.js";
+import { useRenderElement as M } from "./als-react-ts-ui220.js";
+import { useStateAttributesMapping as C } from "./als-react-ts-ui448.js";
+import { useOpenChangeComplete as h } from "./als-react-ts-ui280.js";
+import { useTransitionStatus as R } from "./als-react-ts-ui349.js";
+import { transitionStatusMapping as g } from "./als-react-ts-ui272.js";
+import { fieldValidityMapping as k } from "./als-react-ts-ui409.js";
+const x = /* @__PURE__ */ o.forwardRef(function(n, p) {
   const {
-    children: e
-  } = n, o = l();
-  let t = null;
-  return typeof e == "function" ? t = e(String(o)) : e != null ? t = e : t = o, /* @__PURE__ */ u(r.Fragment, {
-    children: t
+    render: N,
+    className: A,
+    keepMounted: c = !1,
+    ...m
+  } = n, e = b(), t = e.checked || e.indeterminate, {
+    transitionStatus: r,
+    setMounted: u
+  } = R(t), s = o.useRef(null), f = o.useMemo(() => ({
+    ...e,
+    transitionStatus: r
+  }), [e, r]);
+  h({
+    open: t,
+    ref: s,
+    onComplete() {
+      t || u(!1);
+    }
   });
-}
+  const i = C(e), d = o.useMemo(() => ({
+    ...i,
+    ...g,
+    ...k
+  }), [i]), a = c || t, l = M("span", n, {
+    enabled: a,
+    ref: [p, s],
+    state: f,
+    stateAttributesMapping: d,
+    props: m
+  });
+  return a ? l : null;
+});
+process.env.NODE_ENV !== "production" && (x.displayName = "CheckboxIndicator");
 export {
-  c as AutocompleteValue
+  x as CheckboxIndicator
 };

package/dist/als-react-ts-ui151.js

@@ -1,11 +1,14 @@
-const t = "_root_17j9n_1", o = "_trigger_17j9n_8", n = "_panel_17j9n_50", r = {
+const t = "_root_1n6zt_2", n = "_disabled_1n6zt_43", o = {
   root: t,
-  trigger: o,
-  panel: n
+  "orientation-vertical": "_orientation-vertical_1n6zt_8",
+  "orientation-horizontal": "_orientation-horizontal_1n6zt_12",
+  "spacing-sm": "_spacing-sm_1n6zt_18",
+  "spacing-md": "_spacing-md_1n6zt_22",
+  "spacing-lg": "_spacing-lg_1n6zt_26",
+  disabled: n
 };
 export {
-  r as default,
-  n as panel,
-  t as root,
-  o as trigger
+  o as default,
+  n as disabled,
+  t as root
 };

package/dist/als-react-ts-ui152.js

@@ -1,47 +1,101 @@
-import * as n from "react";
-import { useStableCallback as b } from "./als-react-ts-ui192.js";
-import { useRenderElement as C } from "./als-react-ts-ui189.js";
-import { useCollapsibleRoot as R } from "./als-react-ts-ui288.js";
-import { CollapsibleRootContext as a } from "./als-react-ts-ui289.js";
-import { collapsibleStateAttributesMapping as h } from "./als-react-ts-ui450.js";
-import { jsx as i } from "react/jsx-runtime";
-const v = /* @__PURE__ */ n.forwardRef(function(o, p) {
+import * as a from "react";
+import { useControlled as B } from "./als-react-ts-ui292.js";
+import { useStableCallback as I } from "./als-react-ts-ui223.js";
+import { useBaseUiId as S } from "./als-react-ts-ui276.js";
+import { useRenderElement as T } from "./als-react-ts-ui220.js";
+import { CheckboxGroupContext as U } from "./als-react-ts-ui436.js";
+import { useFieldRootContext as Y } from "./als-react-ts-ui398.js";
+import { useLabelableContext as j } from "./als-react-ts-ui399.js";
+import { fieldValidityMapping as q } from "./als-react-ts-ui409.js";
+import { useField as H } from "./als-react-ts-ui403.js";
+import { PARENT_CHECKBOX as K } from "./als-react-ts-ui149.js";
+import { useCheckboxGroupParent as L } from "./als-react-ts-ui437.js";
+import { useFormContext as X } from "./als-react-ts-ui402.js";
+import { useValueChanged as z } from "./als-react-ts-ui406.js";
+import { areArraysEqual as J } from "./als-react-ts-ui438.js";
+import { jsx as Q } from "react/jsx-runtime";
+import { EMPTY_ARRAY as h } from "./als-react-ts-ui322.js";
+const W = /* @__PURE__ */ a.forwardRef(function(m, g) {
   const {
-    render: O,
-    className: S,
-    defaultOpen: d = !1,
-    disabled: m = !1,
-    onOpenChange: u,
-    open: c,
-    ...r
-  } = o, t = b(u), e = R({
-    open: c,
-    defaultOpen: d,
-    onOpenChange: t,
-    disabled: m
-  }), l = n.useMemo(() => ({
-    open: e.open,
-    disabled: e.disabled,
-    transitionStatus: e.transitionStatus
-  }), [e.open, e.disabled, e.transitionStatus]), s = n.useMemo(() => ({
-    ...e,
-    onOpenChange: t,
-    state: l
-  }), [e, t, l]), f = C("div", o, {
-    state: l,
-    ref: p,
-    props: r,
-    stateAttributesMapping: h
+    allValues: s,
+    className: $,
+    defaultValue: n,
+    disabled: R = !1,
+    id: v,
+    onValueChange: d,
+    render: ee,
+    value: c,
+    ...k
+  } = m, {
+    disabled: y,
+    name: l,
+    state: p,
+    validation: o,
+    setFilled: A,
+    setDirty: E,
+    shouldValidateOnChange: P,
+    validityData: f
+  } = Y(), {
+    labelId: G,
+    getDescriptionProps: N
+  } = j(), {
+    clearErrors: M
+  } = X(), i = y || R, [t, D] = B({
+    controlled: c,
+    default: n,
+    name: "CheckboxGroup",
+    state: "value"
+  }), b = I((e, x) => {
+    d?.(e, x), !x.isCanceled && D(e);
+  }), C = L({
+    allValues: s,
+    value: c,
+    onValueChange: d
+  }), F = S(v), u = a.useRef(null), V = a.useCallback((e) => {
+    u.current == null && e != null && !e.hasAttribute(K) && (u.current = e);
+  }, []);
+  H({
+    enabled: !!l,
+    id: F,
+    commit: o.commit,
+    value: t,
+    controlRef: u,
+    name: l,
+    getValue: () => t
   });
-  return o.render !== null ? /* @__PURE__ */ i(a.Provider, {
-    value: s,
-    children: f
-  }) : /* @__PURE__ */ i(a.Provider, {
-    value: s,
-    children: r.children
+  const r = t ?? h;
+  z(r, () => {
+    l && M(l);
+    const e = Array.isArray(f.initialValue) ? f.initialValue : h;
+    A(r.length > 0), E(!J(r, e)), P() ? o.commit(r) : o.commit(r, !0);
+  });
+  const O = a.useMemo(() => ({
+    ...p,
+    disabled: i
+  }), [p, i]), _ = a.useMemo(() => ({
+    allValues: s,
+    value: t,
+    defaultValue: n,
+    setValue: b,
+    parent: C,
+    disabled: i,
+    validation: o,
+    registerControlRef: V
+  }), [s, t, n, b, C, i, o, V]), w = T("div", m, {
+    state: O,
+    ref: g,
+    props: [{
+      role: "group",
+      "aria-labelledby": G
+    }, N, k],
+    stateAttributesMapping: q
+  });
+  return /* @__PURE__ */ Q(U.Provider, {
+    value: _,
+    children: w
   });
 });
-process.env.NODE_ENV !== "production" && (v.displayName = "CollapsibleRoot");
+process.env.NODE_ENV !== "production" && (W.displayName = "CheckboxGroup");
 export {
-  v as CollapsibleRoot
+  W as CheckboxGroup
 };

package/dist/als-react-ts-ui153.js

@@ -1,47 +1,11 @@
-import * as i from "react";
-import { triggerOpenStateMapping as f } from "./als-react-ts-ui294.js";
-import { transitionStatusMapping as g } from "./als-react-ts-ui245.js";
-import { useRenderElement as b } from "./als-react-ts-ui189.js";
-import { useCollapsibleRootContext as C } from "./als-react-ts-ui289.js";
-import { useButton as R } from "./als-react-ts-ui247.js";
-const x = {
-  ...f,
-  ...g
-}, M = /* @__PURE__ */ i.forwardRef(function(o, s) {
-  const {
-    panelId: r,
-    open: e,
-    handleTrigger: n,
-    state: a,
-    disabled: p
-  } = C(), {
-    className: T,
-    disabled: t = p,
-    id: v,
-    render: B,
-    nativeButton: l = !0,
-    ...d
-  } = o, {
-    getButtonProps: m,
-    buttonRef: u
-  } = R({
-    disabled: t,
-    focusableWhenDisabled: !0,
-    native: l
-  }), c = i.useMemo(() => ({
-    "aria-controls": e ? r : void 0,
-    "aria-expanded": e,
-    disabled: t,
-    onClick: n
-  }), [r, t, e, n]);
-  return b("button", o, {
-    state: a,
-    ref: [s, u],
-    props: [c, d, m],
-    stateAttributesMapping: x
-  });
-});
-process.env.NODE_ENV !== "production" && (M.displayName = "CollapsibleTrigger");
+const t = "_root_17j9n_1", o = "_trigger_17j9n_8", n = "_panel_17j9n_50", r = {
+  root: t,
+  trigger: o,
+  panel: n
+};
 export {
-  M as CollapsibleTrigger
+  r as default,
+  n as panel,
+  t as root,
+  o as trigger
 };

package/dist/als-react-ts-ui154.js

@@ -1,107 +1,47 @@
-import * as R from "react";
-import { useIsoLayoutEffect as t } from "./als-react-ts-ui193.js";
-import { warn as A } from "./als-react-ts-ui283.js";
-import { useRenderElement as I } from "./als-react-ts-ui189.js";
-import { useCollapsibleRootContext as H } from "./als-react-ts-ui289.js";
-import { collapsibleStateAttributesMapping as T } from "./als-react-ts-ui450.js";
-import { useCollapsiblePanel as _ } from "./als-react-ts-ui296.js";
-import { CollapsiblePanelCssVars as g } from "./als-react-ts-ui451.js";
-import { useOpenChangeComplete as $ } from "./als-react-ts-ui253.js";
-const q = /* @__PURE__ */ R.forwardRef(function(f, m) {
+import * as n from "react";
+import { useStableCallback as b } from "./als-react-ts-ui223.js";
+import { useRenderElement as C } from "./als-react-ts-ui220.js";
+import { useCollapsibleRoot as R } from "./als-react-ts-ui298.js";
+import { CollapsibleRootContext as a } from "./als-react-ts-ui299.js";
+import { collapsibleStateAttributesMapping as h } from "./als-react-ts-ui450.js";
+import { jsx as i } from "react/jsx-runtime";
+const v = /* @__PURE__ */ n.forwardRef(function(o, p) {
   const {
-    className: L,
-    hiddenUntilFound: o,
-    keepMounted: i,
-    render: W,
-    id: l,
-    ...M
-  } = f;
-  process.env.NODE_ENV !== "production" && t(() => {
-    o && i === !1 && A("The `keepMounted={false}` prop on a Collapsible will be ignored when using `hiddenUntilFound` since it requires the Panel to remain mounted even when closed.");
-  }, [o, i]);
-  const {
-    abortControllerRef: w,
-    animationTypeRef: E,
-    height: s,
-    mounted: c,
-    onOpenChange: F,
-    open: r,
-    panelId: N,
-    panelRef: a,
-    runOnceAnimationsFinish: O,
-    setDimensions: h,
-    setHiddenUntilFound: b,
-    setKeepMounted: C,
-    setMounted: v,
-    setPanelIdState: d,
-    setOpen: x,
-    setVisible: U,
-    state: P,
-    transitionDimensionRef: k,
-    visible: y,
-    width: p,
-    transitionStatus: u
-  } = H(), n = o ?? !1, e = i ?? !1;
-  t(() => {
-    if (l)
-      return d(l), () => {
-        d(void 0);
-      };
-  }, [l, d]), t(() => {
-    b(n);
-  }, [b, n]), t(() => {
-    C(e);
-  }, [C, e]);
-  const {
-    props: D
-  } = _({
-    abortControllerRef: w,
-    animationTypeRef: E,
-    externalRef: m,
-    height: s,
-    hiddenUntilFound: n,
-    id: N,
-    keepMounted: e,
-    mounted: c,
-    onOpenChange: F,
-    open: r,
-    panelRef: a,
-    runOnceAnimationsFinish: O,
-    setDimensions: h,
-    setMounted: v,
-    setOpen: x,
-    setVisible: U,
-    transitionDimensionRef: k,
-    visible: y,
-    width: p
-  });
-  $({
-    open: r && u === "idle",
-    ref: a,
-    onComplete() {
-      r && h({
-        height: void 0,
-        width: void 0
-      });
-    }
+    render: O,
+    className: S,
+    defaultOpen: d = !1,
+    disabled: m = !1,
+    onOpenChange: u,
+    open: c,
+    ...r
+  } = o, t = b(u), e = R({
+    open: c,
+    defaultOpen: d,
+    onOpenChange: t,
+    disabled: m
+  }), l = n.useMemo(() => ({
+    open: e.open,
+    disabled: e.disabled,
+    transitionStatus: e.transitionStatus
+  }), [e.open, e.disabled, e.transitionStatus]), s = n.useMemo(() => ({
+    ...e,
+    onOpenChange: t,
+    state: l
+  }), [e, t, l]), f = C("div", o, {
+    state: l,
+    ref: p,
+    props: r,
+    stateAttributesMapping: h
   });
-  const S = R.useMemo(() => ({
-    ...P,
-    transitionStatus: u
-  }), [P, u]), V = I("div", f, {
-    state: S,
-    ref: [m, a],
-    props: [D, {
-      style: {
-        [g.collapsiblePanelHeight]: s === void 0 ? "auto" : `${s}px`,
-        [g.collapsiblePanelWidth]: p === void 0 ? "auto" : `${p}px`
-      }
-    }, M],
-    stateAttributesMapping: T
+  return o.render !== null ? /* @__PURE__ */ i(a.Provider, {
+    value: s,
+    children: f
+  }) : /* @__PURE__ */ i(a.Provider, {
+    value: s,
+    children: r.children
   });
-  return e || n || !e && c ? V : null;
 });
-process.env.NODE_ENV !== "production" && (q.displayName = "CollapsiblePanel");
+process.env.NODE_ENV !== "production" && (v.displayName = "CollapsibleRoot");
 export {
-  q as CollapsiblePanel
+  v as CollapsibleRoot
 };