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

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

@@ -1,37 +1,143 @@
-import * as o from "react";
-import { useRenderElement as u } from "./als-react-ts-ui226.js";
-import { useRadioRootContext as l } from "./als-react-ts-ui534.js";
-import { stateAttributesMapping as R } from "./als-react-ts-ui533.js";
-import { useOpenChangeComplete as C } from "./als-react-ts-ui236.js";
-import { useTransitionStatus as M } from "./als-react-ts-ui342.js";
-const N = /* @__PURE__ */ o.forwardRef(function(n, i) {
+import * as a from "react";
+import { useControlled as K } from "./als-react-ts-ui292.js";
+import { useStableCallback as Q } from "./als-react-ts-ui223.js";
+import { useMergedRefs as W } from "./als-react-ts-ui297.js";
+import { useIsoLayoutEffect as X } from "./als-react-ts-ui224.js";
+import { visuallyHidden as Y } from "./als-react-ts-ui376.js";
+import { useRenderElement as Z } from "./als-react-ts-ui220.js";
+import { useBaseUiId as $ } from "./als-react-ts-ui276.js";
+import { SwitchRootContext as ee } from "./als-react-ts-ui560.js";
+import { stateAttributesMapping as te } from "./als-react-ts-ui561.js";
+import { useField as oe } from "./als-react-ts-ui403.js";
+import { useFieldRootContext as re } from "./als-react-ts-ui398.js";
+import { useFormContext as ne } from "./als-react-ts-ui402.js";
+import { useLabelableContext as ie } from "./als-react-ts-ui399.js";
+import { useLabelableId as ae } from "./als-react-ts-ui400.js";
+import { createChangeEventDetails as se } from "./als-react-ts-ui273.js";
+import { useValueChanged as ce } from "./als-react-ts-ui406.js";
+import { jsxs as le, jsx as P } from "react/jsx-runtime";
+import { useButton as de } from "./als-react-ts-ui274.js";
+import { mergeProps as ue } from "./als-react-ts-ui323.js";
+import { none as me } from "./als-react-ts-ui275.js";
+const fe = /* @__PURE__ */ a.forwardRef(function(u, x) {
   const {
-    render: E,
-    className: I,
-    keepMounted: d = !1,
-    ...c
-  } = n, t = l(), e = t.checked, {
-    transitionStatus: r,
-    setMounted: m
-  } = M(e), p = o.useMemo(() => ({
-    ...t,
-    transitionStatus: r
-  }), [t, r]), s = o.useRef(null), a = d || e, f = u("span", n, {
-    enabled: a,
-    ref: [i, s],
-    state: p,
-    props: c,
-    stateAttributesMapping: R
+    checked: y,
+    className: he,
+    defaultChecked: I,
+    id: w,
+    inputRef: E,
+    name: S,
+    nativeButton: B = !1,
+    onCheckedChange: D,
+    readOnly: s = !1,
+    required: c = !1,
+    disabled: F = !1,
+    render: Ce,
+    ...V
+  } = u, {
+    clearErrors: M
+  } = ne(), {
+    state: m,
+    setTouched: N,
+    setDirty: L,
+    validityData: O,
+    setFilled: d,
+    setFocused: f,
+    shouldValidateOnChange: j,
+    validationMode: q,
+    disabled: A,
+    name: H,
+    validation: t
+  } = re(), {
+    labelId: T
+  } = ie(), o = A || F, n = H ?? S, p = Q(D), i = a.useRef(null), h = W(i, E, t.inputRef), l = a.useRef(null), C = $(), R = ae({
+    id: w,
+    implicit: !1,
+    controlRef: l
+  }), [e, b] = K({
+    controlled: y,
+    default: !!I,
+    name: "Switch",
+    state: "checked"
   });
-  return C({
-    open: e,
-    ref: s,
-    onComplete() {
-      e || m(!1);
+  oe({
+    id: C,
+    commit: t.commit,
+    value: e,
+    controlRef: l,
+    name: n,
+    getValue: () => e
+  }), X(() => {
+    i.current && d(i.current.checked);
+  }, [i, d]), ce(e, () => {
+    M(n), L(e !== O.initialValue), d(e), j() ? t.commit(e) : t.commit(e, !0);
+  });
+  const {
+    getButtonProps: U,
+    buttonRef: _
+  } = de({
+    disabled: o,
+    native: B
+  }), z = {
+    id: C,
+    role: "switch",
+    "aria-checked": e,
+    "aria-readonly": s || void 0,
+    "aria-labelledby": T,
+    onFocus() {
+      o || f(!0);
+    },
+    onBlur() {
+      const r = i.current;
+      !r || o || (N(!0), f(!1), q === "onBlur" && t.commit(r.checked));
+    },
+    onClick(r) {
+      s || o || (r.preventDefault(), i?.current?.click());
+    }
+  }, G = a.useMemo(() => ue({
+    checked: e,
+    disabled: o,
+    id: R,
+    name: n,
+    required: c,
+    style: Y,
+    tabIndex: -1,
+    type: "checkbox",
+    "aria-hidden": !0,
+    ref: h,
+    onChange(r) {
+      if (r.nativeEvent.defaultPrevented)
+        return;
+      const v = r.target.checked, g = se(me, r.nativeEvent);
+      p?.(v, g), !g.isCanceled && b(v);
+    },
+    onFocus() {
+      l.current?.focus();
     }
-  }), a ? f : null;
+  }, t.getInputValidationProps), [e, o, h, R, n, p, c, b, t]), k = a.useMemo(() => ({
+    ...m,
+    checked: e,
+    disabled: o,
+    readOnly: s,
+    required: c
+  }), [m, e, o, s, c]), J = Z("span", u, {
+    state: k,
+    ref: [x, l, _],
+    props: [z, t.getValidationProps, V, U],
+    stateAttributesMapping: te
+  });
+  return /* @__PURE__ */ le(ee.Provider, {
+    value: k,
+    children: [J, !e && n && /* @__PURE__ */ P("input", {
+      type: "hidden",
+      name: n,
+      value: "off"
+    }), /* @__PURE__ */ P("input", {
+      ...G
+    })]
+  });
 });
-process.env.NODE_ENV !== "production" && (N.displayName = "RadioIndicator");
+process.env.NODE_ENV !== "production" && (fe.displayName = "SwitchRoot");
 export {
-  N as RadioIndicator
+  fe as SwitchRoot
 };

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

@@ -1,137 +1,27 @@
-import * as i from "react";
-import { useMergedRefs as ee } from "./als-react-ts-ui272.js";
-import { useIsoLayoutEffect as te } from "./als-react-ts-ui267.js";
-import { visuallyHidden as oe } from "./als-react-ts-ui359.js";
-import { createChangeEventDetails as re } from "./als-react-ts-ui229.js";
-import { stateAttributesMapping as I } from "./als-react-ts-ui533.js";
-import { useBaseUiId as ie } from "./als-react-ts-ui232.js";
-import { useRenderElement as ne } from "./als-react-ts-ui226.js";
-import { ACTIVE_COMPOSITE_ITEM as se } from "./als-react-ts-ui527.js";
-import { CompositeItem as ae } from "./als-react-ts-ui487.js";
-import { useFieldRootContext as de } from "./als-react-ts-ui398.js";
-import { useFieldItemContext as ue } from "./als-react-ts-ui464.js";
-import { useLabelableContext as le } from "./als-react-ts-ui399.js";
-import { useLabelableId as fe } from "./als-react-ts-ui400.js";
-import { useRadioGroupContext as ce } from "./als-react-ts-ui524.js";
-import { RadioRootContext as pe } from "./als-react-ts-ui534.js";
-import { jsxs as me, jsx as g } from "react/jsx-runtime";
-import { useButton as Re } from "./als-react-ts-ui230.js";
-import { EMPTY_OBJECT as be, NOOP as Pe } from "./als-react-ts-ui304.js";
-import { none as ve } from "./als-react-ts-ui231.js";
-const ye = /* @__PURE__ */ i.forwardRef(function(c, x) {
+import * as n from "react";
+import { useSwitchRootContext as m } from "./als-react-ts-ui560.js";
+import { useRenderElement as a } from "./als-react-ts-ui220.js";
+import { useFieldRootContext as c } from "./als-react-ts-ui398.js";
+import { stateAttributesMapping as p } from "./als-react-ts-ui561.js";
+const f = /* @__PURE__ */ n.forwardRef(function(t, e) {
   const {
-    render: O,
-    className: k,
-    disabled: D = !1,
-    readOnly: M = !1,
-    required: T = !1,
-    value: n,
-    inputRef: V,
-    nativeButton: q = !1,
-    id: F,
-    ...N
-  } = c, {
-    disabled: B,
-    readOnly: G,
-    required: _,
-    checkedValue: A,
-    setCheckedValue: l,
-    touched: L,
-    setTouched: j,
-    validation: w,
-    registerControlRef: S
-  } = ce(), {
-    setDirty: p,
-    validityData: m,
-    setTouched: R,
-    setFilled: a,
-    state: b,
-    disabled: H
-  } = de(), J = ue(), {
-    labelId: K,
-    getDescriptionProps: U
-  } = le(), e = H || J.disabled || B || D, o = G || M, s = _ || T, r = A === n, f = i.useRef(null), d = i.useRef(null), P = ee(V, d);
-  te(() => {
-    d.current?.checked && a(!0);
-  }, [a]);
-  const Y = ie(), v = fe({
-    id: F,
-    implicit: !1,
-    controlRef: f
-  }), z = {
-    role: "radio",
-    "aria-checked": r,
-    "aria-required": s || void 0,
-    "aria-disabled": e || void 0,
-    "aria-readonly": o || void 0,
-    "aria-labelledby": K,
-    [se]: r ? "" : void 0,
-    id: Y,
-    disabled: e,
-    onKeyDown(t) {
-      t.key === "Enter" && t.preventDefault();
-    },
-    onClick(t) {
-      t.defaultPrevented || e || o || (t.preventDefault(), d.current?.click());
-    },
-    onFocus(t) {
-      t.defaultPrevented || e || o || !L || (d.current?.click(), j(!1));
-    }
-  }, {
-    getButtonProps: Q,
-    buttonRef: W
-  } = Re({
-    disabled: e,
-    native: q
-  }), X = i.useMemo(() => ({
-    type: "radio",
-    ref: P,
-    id: v,
-    tabIndex: -1,
-    style: oe,
-    "aria-hidden": !0,
-    disabled: e,
-    checked: r,
-    required: s,
-    readOnly: o,
-    onChange(t) {
-      if (t.nativeEvent.defaultPrevented || e || o || n === void 0)
-        return;
-      const E = re(ve, t.nativeEvent);
-      E.isCanceled || (R(!0), p(n !== m.initialValue), a(!0), l(n, E));
-    },
-    onFocus() {
-      f.current?.focus();
-    }
-  }), [r, e, v, P, o, s, l, p, R, a, m.initialValue, n]), u = i.useMemo(() => ({
-    ...b,
-    required: s,
-    disabled: e,
-    readOnly: o,
-    checked: r
-  }), [b, e, o, r, s]), Z = i.useMemo(() => u, [u]), y = l !== Pe, C = [x, S, f, W], h = [z, U, w?.getValidationProps ?? be, N, Q], $ = ne("span", c, {
-    enabled: !y,
-    state: u,
-    ref: C,
-    props: h,
-    stateAttributesMapping: I
-  });
-  return /* @__PURE__ */ me(pe.Provider, {
-    value: Z,
-    children: [y ? /* @__PURE__ */ g(ae, {
-      tag: "span",
-      render: O,
-      className: k,
-      state: u,
-      refs: C,
-      props: h,
-      stateAttributesMapping: I
-    }) : $, /* @__PURE__ */ g("input", {
-      ...X
-    })]
+    render: d,
+    className: h,
+    ...o
+  } = t, {
+    state: r
+  } = c(), s = m(), i = {
+    ...r,
+    ...s
+  };
+  return a("span", t, {
+    state: i,
+    ref: e,
+    stateAttributesMapping: p,
+    props: o
   });
 });
-process.env.NODE_ENV !== "production" && (ye.displayName = "RadioRoot");
+process.env.NODE_ENV !== "production" && (f.displayName = "SwitchThumb");
 export {
-  ye as RadioRoot
+  f as SwitchThumb
 };

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

@@ -1,31 +1,27 @@
-import * as n from "react";
-function d({
-  controlled: o,
-  default: s,
-  name: t,
-  state: i = "value"
-}) {
-  const {
-    current: e
-  } = n.useRef(o !== void 0), [l, c] = n.useState(s), u = e ? o : l;
-  if (process.env.NODE_ENV !== "production") {
-    n.useEffect(() => {
-      e !== (o !== void 0) && console.error([`Base UI: A component is changing the ${e ? "" : "un"}controlled ${i} state of ${t} to be ${e ? "un" : ""}controlled.`, "Elements should not switch from uncontrolled to controlled (or vice versa).", `Decide between using a controlled or uncontrolled ${t} element for the lifetime of the component.`, "The nature of the state is determined during the first render. It's considered controlled if the value is not `undefined`.", "More info: https://fb.me/react-controlled-components"].join(`
-`));
-    }, [i, t, o]);
-    const {
-      current: r
-    } = n.useRef(s);
-    n.useEffect(() => {
-      !e && JSON.stringify(r) !== JSON.stringify(s) && console.error([`Base UI: A component is changing the default ${i} state of an uncontrolled ${t} after being initialized. To suppress this warning opt to use a controlled ${t}.`].join(`
-`));
-    }, [JSON.stringify(s)]);
-  }
-  const f = n.useCallback((r) => {
-    e || c(r);
-  }, []);
-  return [u, f];
-}
+const a = "_separator_1xnsi_6", r = "_separatorContainer_1xnsi_155", s = "_separatorLine_1xnsi_162", t = "_separatorLabel_1xnsi_168", e = {
+  separator: a,
+  "separator--horizontal": "_separator--horizontal_1xnsi_13",
+  "separator--vertical": "_separator--vertical_1xnsi_18",
+  "separator--sm": "_separator--sm_1xnsi_25",
+  "separator--md": "_separator--md_1xnsi_29",
+  "separator--lg": "_separator--lg_1xnsi_33",
+  "separator--solid": "_separator--solid_1xnsi_51",
+  "separator--dashed": "_separator--dashed_1xnsi_56",
+  "separator--dotted": "_separator--dotted_1xnsi_89",
+  "separator--default": "_separator--default_1xnsi_123",
+  "separator--subtle": "_separator--subtle_1xnsi_128",
+  "separator--strong": "_separator--strong_1xnsi_133",
+  "separator--primary": "_separator--primary_1xnsi_138",
+  "separator--with-spacing": "_separator--with-spacing_1xnsi_144",
+  separatorContainer: r,
+  separatorLine: s,
+  separatorLabel: t,
+  "separator--with-label": "_separator--with-label_1xnsi_178"
+};
 export {
-  d as useControlled
+  e as default,
+  a as separator,
+  r as separatorContainer,
+  t as separatorLabel,
+  s as separatorLine
 };

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

@@ -1,29 +1,109 @@
-import * as a from "react";
-import { useRefWithInit as c } from "./als-react-ts-ui222.js";
-const n = a[`useInsertionEffect${Math.random().toFixed(1)}`.slice(0, -3)], r = (
-  // React 17 doesn't have useInsertionEffect.
-  n && // Preact replaces useInsertionEffect with useLayoutEffect and fires too late.
-  n !== a.useLayoutEffect ? n : (e) => e()
+import { jsx as l } from "react/jsx-runtime";
+import { createContext as f, forwardRef as i, useContext as p } from "react";
+import n from "./als-react-ts-ui525.js";
+import { TabsRoot as d } from "./als-react-ts-ui526.js";
+import { TabsList as L } from "./als-react-ts-ui527.js";
+import { TabsTab as N } from "./als-react-ts-ui528.js";
+import { TabsIndicator as A } from "./als-react-ts-ui529.js";
+import { TabsPanel as S } from "./als-react-ts-ui530.js";
+const c = f({
+  size: "md"
+}), u = () => p(c), C = i(
+  ({
+    value: s,
+    defaultValue: o = 0,
+    onValueChange: t,
+    orientation: a = "horizontal",
+    size: e = "md",
+    className: r,
+    children: m
+  }, b) => {
+    const T = [
+      n.root,
+      n[`root--${a}`],
+      r
+    ].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(c.Provider, { value: { size: e }, children: /* @__PURE__ */ l(
+      d,
+      {
+        ref: b,
+        value: s,
+        defaultValue: o,
+        onValueChange: t,
+        orientation: a,
+        className: T,
+        children: m
+      }
+    ) });
+  }
 );
-function f(e) {
-  const t = c(o).current;
-  return t.next = e, r(t.effect), t.trampoline;
-}
-function o() {
-  const e = {
-    next: void 0,
-    callback: l,
-    trampoline: (...t) => e.callback?.(...t),
-    effect: () => {
-      e.callback = e.next;
-    }
-  };
-  return e;
-}
-function l() {
-  if (process.env.NODE_ENV !== "production")
-    throw new Error("Base UI: Cannot call an event handler while rendering.");
-}
+C.displayName = "ALSTabs.Root";
+const j = i(
+  ({ activateOnFocus: s = !1, loopFocus: o = !0, className: t, children: a }, e) => {
+    const r = [n.list, t].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(
+      L,
+      {
+        ref: e,
+        activateOnFocus: s,
+        loopFocus: o,
+        className: r,
+        children: a
+      }
+    );
+  }
+);
+j.displayName = "ALSTabs.List";
+const x = i(
+  ({ value: s, disabled: o = !1, className: t, children: a }, e) => {
+    const { size: r } = u(), m = [n.tab, n[`tab--${r}`], t].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(
+      N,
+      {
+        ref: e,
+        value: s,
+        disabled: o,
+        className: m,
+        children: a
+      }
+    );
+  }
+);
+x.displayName = "ALSTabs.Tab";
+const y = i(
+  ({ className: s, renderBeforeHydration: o = !1 }, t) => {
+    const a = [n.indicator, s].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(
+      A,
+      {
+        ref: t,
+        renderBeforeHydration: o,
+        className: a
+      }
+    );
+  }
+);
+y.displayName = "ALSTabs.Indicator";
+const B = i(
+  ({ value: s, keepMounted: o = !1, className: t, children: a }, e) => {
+    const r = [n.panel, t].filter(Boolean).join(" ");
+    return /* @__PURE__ */ l(
+      S,
+      {
+        ref: e,
+        value: s,
+        keepMounted: o,
+        className: r,
+        children: a
+      }
+    );
+  }
+);
+B.displayName = "ALSTabs.Panel";
 export {
-  f as useStableCallback
+  y as ALSTabsIndicator,
+  j as ALSTabsList,
+  B as ALSTabsPanel,
+  C as ALSTabsRoot,
+  x as ALSTabsTab
 };

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

@@ -1,6 +1,9 @@
-import * as o from "react";
-const t = () => {
-}, e = typeof document < "u" ? o.useLayoutEffect : t;
+import * as c from "react";
+const e = {};
+function f(r, n) {
+  const t = c.useRef(e);
+  return t.current === e && (t.current = r(n)), t;
+}
 export {
-  e as useIsoLayoutEffect
+  f as useRefWithInit
 };

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

@@ -1,11 +1,89 @@
-let n;
-process.env.NODE_ENV !== "production" && (n = /* @__PURE__ */ new Set());
-function s(...o) {
-  if (process.env.NODE_ENV !== "production") {
-    const e = o.join(" ");
-    n.has(e) || (n.add(e), console.warn(`Base UI: ${e}`));
-  }
+import * as s from "react";
+import { useStableCallback as y } from "./als-react-ts-ui223.js";
+import { useScrollLock as I } from "./als-react-ts-ui325.js";
+import { useOpenInteractionType as A } from "./als-react-ts-ui326.js";
+import { createChangeEventDetails as M } from "./als-react-ts-ui273.js";
+import { useImplicitActiveTrigger as B, useOpenStateTransitions as F } from "./als-react-ts-ui288.js";
+import { useSyncedFloatingRootContext as U } from "./als-react-ts-ui327.js";
+import { useRole as w } from "./als-react-ts-ui328.js";
+import { useDismiss as H } from "./als-react-ts-ui329.js";
+import { useInteractions as K } from "./als-react-ts-ui290.js";
+import { imperativeAction as L } from "./als-react-ts-ui275.js";
+import { getTarget as V, contains as j } from "./als-react-ts-ui330.js";
+function ee(R) {
+  const {
+    store: e,
+    parentContext: o,
+    actionsRef: x
+  } = R, n = e.useState("open"), P = e.useState("disablePointerDismissal"), c = e.useState("modal"), l = e.useState("popupElement"), {
+    openMethod: k,
+    triggerProps: r,
+    reset: S
+  } = A(n);
+  B(e);
+  const {
+    forceUnmount: m
+  } = F(n, e, () => {
+    S();
+  }), f = y((t) => {
+    const a = M(t);
+    return a.preventUnmountOnClose = () => {
+      e.set("preventUnmountingOnClose", !0);
+    }, a;
+  }), g = s.useCallback(() => {
+    e.setOpen(!1, f(L));
+  }, [e, f]);
+  s.useImperativeHandle(x, () => ({
+    unmount: m,
+    close: g
+  }), [m, g]);
+  const u = U({
+    popupStore: e,
+    onOpenChange: e.setOpen,
+    treatPopupAsFloatingElement: !0,
+    noEmit: !0
+  }), [i, d] = s.useState(0), C = i === 0, N = w(u), T = H(u, {
+    outsidePressEvent() {
+      return e.context.internalBackdropRef.current || e.context.backdropRef.current ? "intentional" : {
+        mouse: c === "trap-focus" ? "sloppy" : "intentional",
+        touch: "sloppy"
+      };
+    },
+    outsidePress(t) {
+      if ("button" in t && t.button !== 0 || "touches" in t && t.touches.length !== 1)
+        return !1;
+      const a = V(t);
+      if (C && !P) {
+        const p = a;
+        return c && (e.context.internalBackdropRef.current || e.context.backdropRef.current) ? e.context.internalBackdropRef.current === p || e.context.backdropRef.current === p || j(p, l) && !p?.hasAttribute("data-base-ui-portal") : !0;
+      }
+      return !1;
+    },
+    escapeKey: C
+  });
+  I(n && c === !0, l);
+  const {
+    getReferenceProps: D,
+    getFloatingProps: O,
+    getTriggerProps: b
+  } = K([N, T]);
+  e.useContextCallback("onNestedDialogOpen", (t) => {
+    d(t + 1);
+  }), e.useContextCallback("onNestedDialogClose", () => {
+    d(0);
+  }), s.useEffect(() => (o?.onNestedDialogOpen && n && o.onNestedDialogOpen(i), o?.onNestedDialogClose && !n && o.onNestedDialogClose(), () => {
+    o?.onNestedDialogClose && n && o.onNestedDialogClose();
+  }), [n, o, i]);
+  const h = s.useMemo(() => D(r), [D, r]), v = s.useMemo(() => b(r), [b, r]), E = s.useMemo(() => O(), [O]);
+  e.useSyncedValues({
+    openMethod: k,
+    activeTriggerProps: h,
+    inactiveTriggerProps: v,
+    popupProps: E,
+    floatingRootContext: u,
+    nestedOpenDialogCount: i
+  });
 }
 export {
-  s as warn
+  ee as useDialogRoot
 };