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

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

@@ -1,69 +1,126 @@
-import { useRefWithInit as r } from "./als-react-ts-ui240.js";
-function b(n, e, c, t) {
-  const l = r(i).current;
-  return s(l, n, e, c, t) && o(l, [n, e, c, t]), l.callback;
-}
-function h(n) {
-  const e = r(i).current;
-  return f(e, n) && o(e, n), e.callback;
-}
-function i() {
-  return {
-    callback: null,
-    cleanup: null,
-    refs: []
-  };
-}
-function s(n, e, c, t, l) {
-  return n.refs[0] !== e || n.refs[1] !== c || n.refs[2] !== t || n.refs[3] !== l;
-}
-function f(n, e) {
-  return n.refs.length !== e.length || n.refs.some((c, t) => c !== e[t]);
-}
-function o(n, e) {
-  if (n.refs = e, e.every((c) => c == null)) {
-    n.callback = null;
-    return;
-  }
-  n.callback = (c) => {
-    if (n.cleanup && (n.cleanup(), n.cleanup = null), c != null) {
-      const t = Array(e.length).fill(null);
-      for (let l = 0; l < e.length; l += 1) {
-        const u = e[l];
-        if (u != null)
-          switch (typeof u) {
-            case "function": {
-              const a = u(c);
-              typeof a == "function" && (t[l] = a);
-              break;
-            }
-            case "object": {
-              u.current = c;
-              break;
-            }
-          }
+import * as h from "react";
+import { useScrollAreaRootContext as I } from "./als-react-ts-ui536.js";
+import { ScrollAreaScrollbarContext as N } from "./als-react-ts-ui545.js";
+import { useRenderElement as V } from "./als-react-ts-ui226.js";
+import { getOffset as m } from "./als-react-ts-ui539.js";
+import { ScrollAreaRootCssVars as x } from "./als-react-ts-ui537.js";
+import { ScrollAreaScrollbarCssVars as W } from "./als-react-ts-ui546.js";
+import { useDirection as U } from "./als-react-ts-ui270.js";
+import { scrollAreaStateAttributesMapping as B } from "./als-react-ts-ui541.js";
+import { jsx as j } from "react/jsx-runtime";
+const K = /* @__PURE__ */ h.forwardRef(function(R, C) {
+  const {
+    render: q,
+    className: F,
+    orientation: t = "vertical",
+    keepMounted: O = !1,
+    ...T
+  } = R, {
+    hovering: Y,
+    scrollingX: H,
+    scrollingY: X,
+    hiddenState: a,
+    overflowEdges: f,
+    scrollbarYRef: c,
+    scrollbarXRef: i,
+    viewportRef: o,
+    thumbYRef: p,
+    thumbXRef: b,
+    handlePointerDown: L,
+    handlePointerUp: y,
+    rootId: A,
+    thumbSize: E
+  } = I(), k = h.useMemo(() => ({
+    hovering: Y,
+    scrolling: {
+      horizontal: H,
+      vertical: X
+    }[t],
+    orientation: t,
+    hasOverflowX: !a.scrollbarXHidden,
+    hasOverflowY: !a.scrollbarYHidden,
+    overflowXStart: f.xStart,
+    overflowXEnd: f.xEnd,
+    overflowYStart: f.yStart,
+    overflowYEnd: f.yEnd,
+    cornerHidden: a.cornerHidden
+  }), [Y, H, X, t, a, f]), D = U();
+  h.useEffect(() => {
+    const r = o.current, l = t === "vertical" ? c.current : i.current;
+    if (!l)
+      return;
+    function n(e) {
+      if (!(!r || !l || e.ctrlKey)) {
+        if (e.preventDefault(), t === "vertical") {
+          if (r.scrollTop === 0 && e.deltaY < 0)
+            return;
+        } else if (r.scrollLeft === 0 && e.deltaX < 0)
+          return;
+        if (t === "vertical") {
+          if (r.scrollTop === r.scrollHeight - r.clientHeight && e.deltaY > 0)
+            return;
+        } else if (r.scrollLeft === r.scrollWidth - r.clientWidth && e.deltaX > 0)
+          return;
+        t === "vertical" ? r.scrollTop += e.deltaY : r.scrollLeft += e.deltaX;
       }
-      n.cleanup = () => {
-        for (let l = 0; l < e.length; l += 1) {
-          const u = e[l];
-          if (u != null)
-            switch (typeof u) {
-              case "function": {
-                const a = t[l];
-                typeof a == "function" ? a() : u(null);
-                break;
-              }
-              case "object": {
-                u.current = null;
-                break;
-              }
-            }
+    }
+    return l.addEventListener("wheel", n, {
+      passive: !1
+    }), () => {
+      l.removeEventListener("wheel", n);
+    };
+  }, [t, i, c, o]);
+  const M = {
+    ...A && {
+      "data-id": `${A}-scrollbar`
+    },
+    onPointerDown(r) {
+      if (r.button === 0 && r.currentTarget === r.target && o.current) {
+        if (p.current && c.current && t === "vertical") {
+          const l = m(p.current, "margin", "y"), n = m(c.current, "padding", "y"), e = p.current.offsetHeight, g = c.current.getBoundingClientRect(), S = r.clientY - g.top - e / 2 - n + l / 2, u = o.current.scrollHeight, d = o.current.clientHeight, v = c.current.offsetHeight - e - n - l, s = S / v * (u - d);
+          o.current.scrollTop = s;
+        }
+        if (b.current && i.current && t === "horizontal") {
+          const l = m(b.current, "margin", "x"), n = m(i.current, "padding", "x"), e = b.current.offsetWidth, g = i.current.getBoundingClientRect(), S = r.clientX - g.left - e / 2 - n + l / 2, u = o.current.scrollWidth, d = o.current.clientWidth, v = i.current.offsetWidth - e - n - l, w = S / v;
+          let s;
+          D === "rtl" ? (s = (1 - w) * (u - d), o.current.scrollLeft <= 0 && (s = -s)) : s = w * (u - d), o.current.scrollLeft = s;
         }
-      };
+        L(r);
+      }
+    },
+    onPointerUp: y,
+    style: {
+      position: "absolute",
+      touchAction: "none",
+      WebkitUserSelect: "none",
+      userSelect: "none",
+      ...t === "vertical" && {
+        top: 0,
+        bottom: `var(${x.scrollAreaCornerHeight})`,
+        insetInlineEnd: 0,
+        [W.scrollAreaThumbHeight]: `${E.height}px`
+      },
+      ...t === "horizontal" && {
+        insetInlineStart: 0,
+        insetInlineEnd: `var(${x.scrollAreaCornerWidth})`,
+        bottom: 0,
+        [W.scrollAreaThumbWidth]: `${E.width}px`
+      }
     }
-  };
-}
+  }, P = V("div", R, {
+    ref: [C, t === "vertical" ? c : i],
+    state: k,
+    props: [M, T],
+    stateAttributesMapping: B
+  }), $ = h.useMemo(() => ({
+    orientation: t
+  }), [t]), z = t === "vertical" ? a.scrollbarYHidden : a.scrollbarXHidden;
+  return O || !z ? /* @__PURE__ */ j(N.Provider, {
+    value: $,
+    children: P
+  }) : null;
+});
+process.env.NODE_ENV !== "production" && (K.displayName = "ScrollAreaScrollbar");
 export {
-  b as useMergedRefs,
-  h as useMergedRefsN
+  K as ScrollAreaScrollbar
 };

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

@@ -1,66 +1,47 @@
-import * as e from "react";
-import { useControlled as A } from "./als-react-ts-ui282.js";
-import { useIsoLayoutEffect as B } from "./als-react-ts-ui193.js";
-import { useStableCallback as H } from "./als-react-ts-ui192.js";
-import { useBaseUiId as K } from "./als-react-ts-ui249.js";
-import { createChangeEventDetails as L } from "./als-react-ts-ui246.js";
-import { useAnimationsFinished as V } from "./als-react-ts-ui338.js";
-import { useTransitionStatus as j } from "./als-react-ts-ui344.js";
-import { triggerPress as q } from "./als-react-ts-ui248.js";
-function Z(F) {
+import * as o from "react";
+import { useScrollAreaRootContext as d } from "./als-react-ts-ui536.js";
+import { useScrollAreaScrollbarContext as S } from "./als-react-ts-ui545.js";
+import { ScrollAreaScrollbarCssVars as t } from "./als-react-ts-ui546.js";
+import { useRenderElement as b } from "./als-react-ts-ui226.js";
+const v = /* @__PURE__ */ o.forwardRef(function(r, l) {
   const {
-    open: r,
-    defaultOpen: M,
-    onOpenChange: E,
-    disabled: d
-  } = F, m = r !== void 0, [n, u] = A({
-    controlled: r,
-    default: M,
-    name: "Collapsible",
-    state: "open"
-  }), {
-    mounted: i,
-    setMounted: o,
-    transitionStatus: p
-  } = j(n, !0, !0), [l, f] = e.useState(n), [{
-    height: h,
-    width: R
-  }, S] = e.useState({
-    height: void 0,
-    width: void 0
-  }), T = K(), [U, k] = e.useState(), C = U ?? T, [w, b] = e.useState(!1), [c, g] = e.useState(!1), v = e.useRef(null), t = e.useRef(null), I = e.useRef(null), a = e.useRef(null), O = V(a, !1), P = H((x) => {
-    const s = !n, y = L(q, x.nativeEvent);
-    if (E(s, y), y.isCanceled)
-      return;
-    const D = a.current;
-    t.current === "css-animation" && D != null && D.style.removeProperty("animation-name"), !w && !c && (t.current != null && t.current !== "css-animation" && !i && s && o(!0), t.current === "css-animation" && (!l && s && f(!0), !i && s && o(!0))), u(s), t.current === "none" && i && !s && o(!1);
+    render: P,
+    className: R,
+    ...n
+  } = r, {
+    thumbYRef: a,
+    thumbXRef: i,
+    handlePointerDown: s,
+    handlePointerMove: c,
+    handlePointerUp: m,
+    setScrollingX: h,
+    setScrollingY: f
+  } = d(), {
+    orientation: e
+  } = S(), u = o.useMemo(() => ({
+    orientation: e
+  }), [e]);
+  return b("div", r, {
+    ref: [l, e === "vertical" ? a : i],
+    state: u,
+    props: [{
+      onPointerDown: s,
+      onPointerMove: c,
+      onPointerUp(p) {
+        e === "vertical" && f(!1), e === "horizontal" && h(!1), m(p);
+      },
+      style: {
+        ...e === "vertical" && {
+          height: `var(${t.scrollAreaThumbHeight})`
+        },
+        ...e === "horizontal" && {
+          width: `var(${t.scrollAreaThumbWidth})`
+        }
+      }
+    }, n]
   });
-  return B(() => {
-    m && t.current === "none" && !c && !n && o(!1);
-  }, [m, c, n, r, o]), e.useMemo(() => ({
-    abortControllerRef: v,
-    animationTypeRef: t,
-    disabled: d,
-    handleTrigger: P,
-    height: h,
-    mounted: i,
-    open: n,
-    panelId: C,
-    panelRef: a,
-    runOnceAnimationsFinish: O,
-    setDimensions: S,
-    setHiddenUntilFound: b,
-    setKeepMounted: g,
-    setMounted: o,
-    setOpen: u,
-    setPanelIdState: k,
-    setVisible: f,
-    transitionDimensionRef: I,
-    transitionStatus: p,
-    visible: l,
-    width: R
-  }), [v, t, d, P, h, i, n, C, a, O, S, b, g, o, u, f, I, p, l, R]);
-}
+});
+process.env.NODE_ENV !== "production" && (v.displayName = "ScrollAreaThumb");
 export {
-  Z as useCollapsibleRoot
+  v as ScrollAreaThumb
 };

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

@@ -1,14 +1,30 @@
-import s from "./als-react-ts-ui259.js";
-import * as e from "react";
-const t = /* @__PURE__ */ e.createContext(void 0);
-process.env.NODE_ENV !== "production" && (t.displayName = "CollapsibleRootContext");
-function i() {
-  const o = e.useContext(t);
-  if (o === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: CollapsibleRootContext is missing. Collapsible parts must be placed within <Collapsible.Root>." : s(15));
-  return o;
-}
+import * as s from "react";
+import { useScrollAreaRootContext as c } from "./als-react-ts-ui536.js";
+import { useRenderElement as a } from "./als-react-ts-ui226.js";
+const d = /* @__PURE__ */ s.forwardRef(function(e, o) {
+  const {
+    render: f,
+    className: p,
+    ...t
+  } = e, {
+    cornerRef: n,
+    cornerSize: r,
+    hiddenState: i
+  } = c(), l = a("div", e, {
+    ref: [o, n],
+    props: [{
+      style: {
+        position: "absolute",
+        bottom: 0,
+        insetInlineEnd: 0,
+        width: r.width,
+        height: r.height
+      }
+    }, t]
+  });
+  return i.cornerHidden ? null : l;
+});
+process.env.NODE_ENV !== "production" && (d.displayName = "ScrollAreaCorner");
 export {
-  t as CollapsibleRootContext,
-  i as useCollapsibleRootContext
+  d as ScrollAreaCorner
 };

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

@@ -1,7 +1,7 @@
 import { jsxs as L, jsx as s } from "react/jsx-runtime";
 import { forwardRef as N } from "react";
 import { clsx as e } from "./als-react-ts-ui56.js";
-import r from "./als-react-ts-ui239.js";
+import r from "./als-react-ts-ui290.js";
 import { Separator as l } from "./als-react-ts-ui107.js";
 const S = N(
   ({

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

@@ -1,55 +1,27 @@
-import * as u from "react";
-import { useIsoLayoutEffect as g } from "./als-react-ts-ui193.js";
-import { useCompositeListContext as F } from "./als-react-ts-ui345.js";
-let I = /* @__PURE__ */ (function(t) {
-  return t[t.None = 0] = "None", t[t.GuessFromOrder = 1] = "GuessFromOrder", t;
-})({});
-function N(t = {}) {
-  const {
-    label: c,
-    metadata: l,
-    textRef: d,
-    indexGuessBehavior: L,
-    index: r
-  } = t, {
-    register: m,
-    unregister: a,
-    subscribeMapChange: x,
-    elementsRef: R,
-    labelsRef: i,
-    nextIndexRef: p
-  } = F(), f = u.useRef(-1), [n, C] = u.useState(r ?? (L === I.GuessFromOrder ? () => {
-    if (f.current === -1) {
-      const e = p.current;
-      p.current += 1, f.current = e;
-    }
-    return f.current;
-  } : -1)), s = u.useRef(null), b = u.useCallback((e) => {
-    if (s.current = e, n !== -1 && e !== null && (R.current[n] = e, i)) {
-      const o = c !== void 0;
-      i.current[n] = o ? c : d?.current?.textContent ?? e.textContent;
-    }
-  }, [n, R, i, c, d]);
-  return g(() => {
-    if (r != null)
-      return;
-    const e = s.current;
-    if (e)
-      return m(e, l), () => {
-        a(e);
-      };
-  }, [r, m, a, l]), g(() => {
-    if (r == null)
-      return x((e) => {
-        const o = s.current ? e.get(s.current)?.index : null;
-        o != null && C(o);
-      });
-  }, [r, x, C]), u.useMemo(() => ({
-    ref: b,
-    index: n
-  }), [n, b]);
-}
+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 {
-  I as IndexGuessBehavior,
-  N as useCompositeListItem
+  e as default,
+  a as separator,
+  r as separatorContainer,
+  t as separatorLabel,
+  s as separatorLine
 };

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

@@ -1,14 +1,31 @@
-import n from "./als-react-ts-ui259.js";
-import * as t from "react";
-const e = /* @__PURE__ */ t.createContext(void 0);
-process.env.NODE_ENV !== "production" && (e.displayName = "AccordionItemContext");
-function c() {
-  const o = t.useContext(e);
-  if (o === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: AccordionItemContext is missing. Accordion parts must be placed within <Accordion.Item>." : n(9));
-  return o;
-}
+const _ = "_container_z6vxp_6", t = "_labelContainer_z6vxp_26", i = "_label_z6vxp_26", s = "_required_z6vxp_46", c = "_description_z6vxp_51", e = "_thumb_z6vxp_145", n = {
+  container: _,
+  "container--left": "_container--left_z6vxp_12",
+  "container--right": "_container--right_z6vxp_16",
+  "container--disabled": "_container--disabled_z6vxp_20",
+  labelContainer: t,
+  label: i,
+  required: s,
+  description: c,
+  switch: "_switch_z6vxp_61",
+  "switch--primary": "_switch--primary_z6vxp_93",
+  "switch--success": "_switch--success_z6vxp_101",
+  "switch--warning": "_switch--warning_z6vxp_109",
+  "switch--error": "_switch--error_z6vxp_117",
+  "switch--sm": "_switch--sm_z6vxp_126",
+  "switch--md": "_switch--md_z6vxp_132",
+  "switch--lg": "_switch--lg_z6vxp_138",
+  thumb: e,
+  "thumb--sm": "_thumb--sm_z6vxp_158",
+  "thumb--md": "_thumb--md_z6vxp_163",
+  "thumb--lg": "_thumb--lg_z6vxp_168"
+};
 export {
-  e as AccordionItemContext,
-  c as useAccordionItemContext
+  _ as container,
+  n as default,
+  c as description,
+  i as label,
+  t as labelContainer,
+  s as required,
+  e as thumb
 };

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

@@ -1,14 +1,143 @@
-import { collapsibleOpenStateMapping as i } from "./als-react-ts-ui294.js";
-import { transitionStatusMapping as r } from "./als-react-ts-ui245.js";
-import { AccordionItemDataAttributes as n } from "./als-react-ts-ui343.js";
-const a = {
-  ...i,
-  index: (t) => Number.isInteger(t) ? {
-    [n.index]: String(t)
-  } : null,
-  ...r,
-  value: () => null
-};
+import * as a from "react";
+import { useControlled as K } from "./als-react-ts-ui265.js";
+import { useStableCallback as Q } from "./als-react-ts-ui266.js";
+import { useMergedRefs as W } from "./als-react-ts-ui272.js";
+import { useIsoLayoutEffect as X } from "./als-react-ts-ui267.js";
+import { visuallyHidden as Y } from "./als-react-ts-ui359.js";
+import { useRenderElement as Z } from "./als-react-ts-ui226.js";
+import { useBaseUiId as $ } from "./als-react-ts-ui232.js";
+import { SwitchRootContext as ee } from "./als-react-ts-ui550.js";
+import { stateAttributesMapping as te } from "./als-react-ts-ui551.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-ui229.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-ui230.js";
+import { mergeProps as ue } from "./als-react-ts-ui305.js";
+import { none as me } from "./als-react-ts-ui231.js";
+const fe = /* @__PURE__ */ a.forwardRef(function(u, x) {
+  const {
+    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"
+  });
+  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();
+    }
+  }, 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" && (fe.displayName = "SwitchRoot");
 export {
-  a as accordionStateAttributesMapping
+  fe as SwitchRoot
 };