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

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

@@ -1,117 +1,24 @@
-import * as i from "react";
-import { ownerDocument as R } from "./als-react-ts-ui268.js";
-import { useIsoLayoutEffect as U } from "./als-react-ts-ui161.js";
-import { useBaseUiId as k } from "./als-react-ts-ui170.js";
-import { useRenderElement as H } from "./als-react-ts-ui166.js";
-import { ACTIVE_COMPOSITE_ITEM as K } from "./als-react-ts-ui357.js";
-import { useCompositeItem as S } from "./als-react-ts-ui358.js";
-import { useTabsRootContext as W } from "./als-react-ts-ui355.js";
-import { useTabsListContext as j } from "./als-react-ts-ui359.js";
-import { createChangeEventDetails as g } from "./als-react-ts-ui167.js";
-import { useButton as q } from "./als-react-ts-ui179.js";
-import { activeElement as z, contains as G } from "./als-react-ts-ui241.js";
-import { none as I } from "./als-react-ts-ui168.js";
-const J = /* @__PURE__ */ i.forwardRef(function(d, P) {
-  const {
-    className: X,
-    disabled: n = !1,
-    render: Y,
-    value: r,
-    id: h,
-    nativeButton: C = !0,
-    ...D
-  } = d, {
-    value: u,
-    getTabPanelIdByTabValueOrIndex: x,
-    orientation: p
-  } = W(), {
-    activateOnFocus: M,
-    highlightedTabIndex: b,
-    onTabActivation: v,
-    setHighlightedTabIndex: c,
-    tabsListElement: T
-  } = j(), f = k(h), B = i.useMemo(() => ({
-    disabled: n,
-    id: f,
-    value: r
-  }), [n, f, r]), {
-    compositeProps: N,
-    compositeRef: O,
-    index: e
-    // hook is used instead of the CompositeItem component
-    // because the index is needed for Tab internals
-  } = S({
-    metadata: B
-  }), E = r ?? e, o = i.useMemo(() => r === void 0 ? e < 0 ? !1 : e === u : r === u, [e, u, r]), m = i.useRef(!1);
-  U(() => {
-    if (m.current) {
-      m.current = !1;
-      return;
-    }
-    if (!(o && e > -1 && b !== e))
-      return;
-    const t = T;
-    if (t != null) {
-      const s = z(R(t));
-      if (s && G(t, s))
-        return;
-    }
-    c(e);
-  }, [o, e, b, c, n, T]);
-  const {
-    getButtonProps: V,
-    buttonRef: w
-  } = q({
-    disabled: n,
-    native: C,
-    focusableWhenDisabled: !0
-  }), y = e > -1 ? x(r, e) : void 0, a = i.useRef(!1), l = i.useRef(!1);
-  function L(t) {
-    o || n || v(E, g(I, t.nativeEvent, void 0, {
-      activationDirection: "none"
-    }));
-  }
-  function _(t) {
-    o || (e > -1 && c(e), !n && M && (!a.current || // keyboard or touch focus
-    a.current && l.current) && v(E, g(I, t.nativeEvent, void 0, {
-      activationDirection: "none"
-    })));
-  }
-  function A(t) {
-    if (o || n)
-      return;
-    a.current = !0;
-    function s() {
-      a.current = !1, l.current = !1;
-    }
-    (!t.button || t.button === 0) && (l.current = !0, R(t.currentTarget).addEventListener("pointerup", s, {
-      once: !0
-    }));
-  }
-  const F = i.useMemo(() => ({
-    disabled: n,
-    active: o,
-    orientation: p
-  }), [n, o, p]);
-  return H("button", d, {
-    state: F,
-    ref: [P, w, O],
-    props: [N, {
-      role: "tab",
-      "aria-controls": y,
-      "aria-selected": o,
-      id: f,
-      onClick: L,
-      onFocus: _,
-      onPointerDown: A,
-      [K]: o ? "" : void 0,
-      onKeyDownCapture() {
-        m.current = !0;
-      }
-    }, D, V]
-  });
-});
-process.env.NODE_ENV !== "production" && (J.displayName = "TabsTab");
+const _ = "_root_1m4y4_2", a = "_track_1m4y4_10", r = "_indicator_1m4y4_19", t = "_label_1m4y4_27", i = "_value_1m4y4_34", e = "_indeterminate_1m4y4_1", n = {
+  root: _,
+  track: a,
+  indicator: r,
+  label: t,
+  value: i,
+  "size-sm": "_size-sm_1m4y4_42",
+  "size-md": "_size-md_1m4y4_46",
+  "size-lg": "_size-lg_1m4y4_50",
+  "variant-primary": "_variant-primary_1m4y4_55",
+  "variant-success": "_variant-success_1m4y4_60",
+  "variant-warning": "_variant-warning_1m4y4_65",
+  "variant-error": "_variant-error_1m4y4_70",
+  indeterminate: e
+};
 export {
-  J as TabsTab
+  n as default,
+  e as indeterminate,
+  r as indicator,
+  t as label,
+  _ as root,
+  a as track,
+  i as value
 };

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

@@ -1,104 +1,61 @@
 import * as n from "react";
-import { useForcedRerendering as N } from "./als-react-ts-ui354.js";
-import { useOnMount as V } from "./als-react-ts-ui222.js";
-import { useRenderElement as A } from "./als-react-ts-ui166.js";
-import { useDirection as D } from "./als-react-ts-ui164.js";
-import { useTabsRootContext as h } from "./als-react-ts-ui355.js";
-import { tabsStateAttributesMapping as _ } from "./als-react-ts-ui356.js";
-import { useTabsListContext as j } from "./als-react-ts-ui359.js";
-import { script as F } from "./als-react-ts-ui360.js";
-import { TabsIndicatorCssVars as a } from "./als-react-ts-ui361.js";
-import { jsxs as P, jsx as k } from "react/jsx-runtime";
-const q = {
-  ..._,
-  activeTabPosition: () => null,
-  activeTabSize: () => null
-}, G = /* @__PURE__ */ n.forwardRef(function(d, x) {
+import { useValueAsRef as N } from "./als-react-ts-ui337.js";
+import { formatNumber as f } from "./als-react-ts-ui494.js";
+import { useRenderElement as P } from "./als-react-ts-ui189.js";
+import { ProgressRootContext as A } from "./als-react-ts-ui509.js";
+import { progressStateAttributesMapping as M } from "./als-react-ts-ui510.js";
+import { jsx as y } from "react/jsx-runtime";
+function E(r, e, s) {
+  return r == null ? "" : s ? f(r, e, s) : f(r / 100, e, {
+    style: "percent"
+  });
+}
+function w(r, e) {
+  return e == null ? "indeterminate progress" : r || `${e}%`;
+}
+const D = /* @__PURE__ */ n.forwardRef(function(e, s) {
   const {
-    className: K,
-    render: Q,
-    renderBeforeHydration: R = !1,
-    ...L
-  } = d, {
-    getTabElementBySelectedValue: M,
-    orientation: f,
-    tabActivationDirection: m,
-    value: p
-  } = h(), {
-    tabsListElement: e
-  } = j(), [y, H] = n.useState(!1), {
-    value: I
-  } = h(), S = D();
-  V(() => H(!0));
-  const b = N();
-  n.useEffect(() => {
-    if (p != null && e != null && typeof ResizeObserver < "u") {
-      const u = new ResizeObserver(b);
-      return u.observe(e), () => {
-        u.disconnect();
-      };
-    }
-  }, [p, e, b]);
-  let o = 0, l = 0, s = 0, c = 0, i = 0, r = 0, t = !1;
-  if (p != null && e != null) {
-    const u = M(p);
-    if (t = !0, u != null) {
-      const g = e.getBoundingClientRect(), {
-        left: C,
-        top: O,
-        width: W,
-        height: w
-      } = u.getBoundingClientRect();
-      o = C - g.left + e.scrollLeft - e.clientLeft, s = O - g.top + e.scrollTop - e.clientTop, i = W, r = w, l = S === "ltr" ? e.scrollWidth - o - i - e.clientLeft : o - e.clientLeft, c = e.scrollHeight - s - r - e.clientTop;
-    }
-  }
-  const T = n.useMemo(() => t ? {
-    left: o,
-    right: l,
-    top: s,
-    bottom: c
-  } : null, [o, l, s, c, t]), v = n.useMemo(() => t ? {
-    width: i,
-    height: r
-  } : null, [i, r, t]), E = n.useMemo(() => {
-    if (t)
-      return {
-        [a.activeTabLeft]: `${o}px`,
-        [a.activeTabRight]: `${l}px`,
-        [a.activeTabTop]: `${s}px`,
-        [a.activeTabBottom]: `${c}px`,
-        [a.activeTabWidth]: `${i}px`,
-        [a.activeTabHeight]: `${r}px`
-      };
-  }, [o, l, s, c, i, r, t]), $ = t && i > 0 && r > 0, z = n.useMemo(() => ({
-    orientation: f,
-    activeTabPosition: T,
-    activeTabSize: v,
-    tabActivationDirection: m
-  }), [f, T, v, m]), B = A("span", d, {
-    state: z,
-    ref: x,
-    props: [{
-      role: "presentation",
-      style: E,
-      hidden: !$
-      // do not display the indicator before the layout is settled
-    }, L, {
-      suppressHydrationWarning: !0
-    }],
-    stateAttributesMapping: q
+    format: p,
+    getAriaValueText: c = w,
+    locale: d,
+    max: a = 100,
+    min: i = 0,
+    value: t,
+    render: I,
+    className: O,
+    ...g
+  } = e, [b, l] = n.useState(), x = N(p);
+  let o = "indeterminate";
+  Number.isFinite(t) && (o = t === a ? "complete" : "progressing");
+  const u = E(t, d, x.current), m = n.useMemo(() => ({
+    status: o
+  }), [o]), R = {
+    "aria-labelledby": b,
+    "aria-valuemax": a,
+    "aria-valuemin": i,
+    "aria-valuenow": t ?? void 0,
+    "aria-valuetext": c(u, t),
+    role: "progressbar"
+  }, V = n.useMemo(() => ({
+    formattedValue: u,
+    max: a,
+    min: i,
+    setLabelId: l,
+    state: m,
+    status: o,
+    value: t
+  }), [u, a, i, l, m, o, t]), v = P("div", e, {
+    state: m,
+    ref: s,
+    props: [R, g],
+    stateAttributesMapping: M
   });
-  return I == null ? null : /* @__PURE__ */ P(n.Fragment, {
-    children: [B, !y && R && /* @__PURE__ */ k("script", {
-      // eslint-disable-next-line react/no-danger
-      dangerouslySetInnerHTML: {
-        __html: F
-      },
-      suppressHydrationWarning: !0
-    })]
+  return /* @__PURE__ */ y(A.Provider, {
+    value: V,
+    children: v
   });
 });
-process.env.NODE_ENV !== "production" && (G.displayName = "TabsIndicator");
+process.env.NODE_ENV !== "production" && (D.displayName = "ProgressRoot");
 export {
-  G as TabsIndicator
+  D as ProgressRoot
 };

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

@@ -1,53 +1,23 @@
-import * as n from "react";
-import { useBaseUiId as I } from "./als-react-ts-ui170.js";
-import { useRenderElement as T } from "./als-react-ts-ui166.js";
-import { useCompositeListItem as x } from "./als-react-ts-ui173.js";
-import { tabsStateAttributesMapping as M } from "./als-react-ts-ui356.js";
-import { useTabsRootContext as R } from "./als-react-ts-ui355.js";
-import { TabsPanelDataAttributes as V } from "./als-react-ts-ui362.js";
-const g = /* @__PURE__ */ n.forwardRef(function(r, d) {
+import * as o from "react";
+import { useRenderElement as n } from "./als-react-ts-ui189.js";
+import { useProgressRootContext as a } from "./als-react-ts-ui509.js";
+import { progressStateAttributesMapping as p } from "./als-react-ts-ui510.js";
+const i = /* @__PURE__ */ o.forwardRef(function(e, r) {
   const {
-    children: m,
-    className: N,
-    value: e,
-    render: h,
-    keepMounted: u = !1,
-    ...c
-  } = r, {
-    value: p,
-    getTabIdByPanelValueOrIndex: s,
-    orientation: i,
-    tabActivationDirection: l
-  } = R(), o = I(), b = n.useMemo(() => ({
-    id: o,
-    value: e
-  }), [o, e]), {
-    ref: f,
-    index: a
-  } = x({
-    metadata: b
-  }), t = (e ?? a) !== p, P = n.useMemo(() => s(e, a), [s, a, e]), v = n.useMemo(() => ({
-    hidden: t,
-    orientation: i,
-    tabActivationDirection: l
-  }), [t, i, l]);
-  return T("div", r, {
-    state: v,
-    ref: [d, f],
-    props: [{
-      "aria-labelledby": P,
-      hidden: t,
-      id: o ?? void 0,
-      role: "tabpanel",
-      tabIndex: t ? -1 : 0,
-      [V.index]: a
-    }, c, {
-      children: t && !u ? void 0 : m
-    }],
-    stateAttributesMapping: M
+    render: c,
+    className: f,
+    ...t
+  } = e, {
+    state: s
+  } = a();
+  return n("div", e, {
+    state: s,
+    ref: r,
+    props: t,
+    stateAttributesMapping: p
   });
 });
-process.env.NODE_ENV !== "production" && (g.displayName = "TabsPanel");
+process.env.NODE_ENV !== "production" && (i.displayName = "ProgressTrack");
 export {
-  g as TabsPanel
+  i as ProgressTrack
 };

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

@@ -1,106 +1,33 @@
-import { getWindow as u, isOverflowElement as Y } from "./als-react-ts-ui221.js";
-import { isIOS as W, isWebKit as E } from "./als-react-ts-ui275.js";
-import { ownerDocument as n } from "./als-react-ts-ui268.js";
-import { useIsoLayoutEffect as T } from "./als-react-ts-ui161.js";
-import { Timeout as k } from "./als-react-ts-ui229.js";
-import { AnimationFrame as z } from "./als-react-ts-ui223.js";
-import { NOOP as H } from "./als-react-ts-ui212.js";
-let L = {}, C = {}, O = "";
-function F(r) {
-  if (typeof document > "u")
-    return !1;
-  const o = n(r);
-  return u(o).innerWidth - o.documentElement.clientWidth > 0;
-}
-function j(r) {
-  const o = n(r), t = o.documentElement, e = o.body, l = Y(t) ? t : e, s = l.style.overflow;
-  return l.style.overflow = "hidden", () => {
-    l.style.overflow = s;
-  };
-}
-function I(r) {
-  const o = n(r), t = o.documentElement, e = o.body, l = u(t);
-  let s = 0, c = 0;
-  const h = z.create(), f = typeof CSS < "u" && CSS.supports?.("scrollbar-gutter", "stable");
-  if (E && (l.visualViewport?.scale ?? 1) !== 1)
-    return () => {
-    };
-  function d() {
-    const a = l.getComputedStyle(t), i = l.getComputedStyle(e), y = (a.scrollbarGutter || "").includes("both-edges") ? "stable both-edges" : "stable";
-    s = t.scrollTop, c = t.scrollLeft, L = {
-      scrollbarGutter: t.style.scrollbarGutter,
-      overflowY: t.style.overflowY,
-      overflowX: t.style.overflowX
-    }, O = t.style.scrollBehavior, C = {
-      position: e.style.position,
-      height: e.style.height,
-      width: e.style.width,
-      boxSizing: e.style.boxSizing,
-      overflowY: e.style.overflowY,
-      overflowX: e.style.overflowX,
-      scrollBehavior: e.style.scrollBehavior
-    };
-    const X = t.scrollHeight > t.clientHeight, B = t.scrollWidth > t.clientWidth, x = a.overflowY === "scroll" || i.overflowY === "scroll", G = a.overflowX === "scroll" || i.overflowX === "scroll", b = Math.max(0, l.innerWidth - t.clientWidth), w = Math.max(0, l.innerHeight - t.clientHeight), p = parseFloat(i.marginTop) + parseFloat(i.marginBottom), g = parseFloat(i.marginLeft) + parseFloat(i.marginRight), S = Y(t) ? t : e;
-    if (f) {
-      t.style.scrollbarGutter = y, S.style.overflowY = "hidden", S.style.overflowX = "hidden";
-      return;
-    }
-    Object.assign(t.style, {
-      scrollbarGutter: y,
-      overflowY: "hidden",
-      overflowX: "hidden"
-    }), (X || x) && (t.style.overflowY = "scroll"), (B || G) && (t.style.overflowX = "scroll"), Object.assign(e.style, {
-      position: "relative",
-      height: p || w ? `calc(100dvh - ${p + w}px)` : "100dvh",
-      width: g || b ? `calc(100vw - ${g + b}px)` : "100vw",
-      boxSizing: "border-box",
-      overflow: "hidden",
-      scrollBehavior: "unset"
-    }), e.scrollTop = s, e.scrollLeft = c, t.setAttribute("data-base-ui-scroll-locked", ""), t.style.scrollBehavior = "unset";
-  }
-  function m() {
-    Object.assign(t.style, L), Object.assign(e.style, C), f || (t.scrollTop = s, t.scrollLeft = c, t.removeAttribute("data-base-ui-scroll-locked"), t.style.scrollBehavior = O);
-  }
-  function v() {
-    m(), h.request(d);
-  }
-  return d(), l.addEventListener("resize", v), () => {
-    h.cancel(), m(), typeof l.removeEventListener == "function" && l.removeEventListener("resize", v);
-  };
-}
-class R {
-  lockCount = 0;
-  restore = null;
-  timeoutLock = k.create();
-  timeoutUnlock = k.create();
-  acquire(o) {
-    return this.lockCount += 1, this.lockCount === 1 && this.restore === null && this.timeoutLock.start(0, () => this.lock(o)), this.release;
-  }
-  release = () => {
-    this.lockCount -= 1, this.lockCount === 0 && this.restore && this.timeoutUnlock.start(0, this.unlock);
-  };
-  unlock = () => {
-    this.lockCount === 0 && this.restore && (this.restore?.(), this.restore = null);
-  };
-  lock(o) {
-    if (this.lockCount === 0 || this.restore !== null)
-      return;
-    const e = n(o).documentElement, l = u(e).getComputedStyle(e).overflowY;
-    if (l === "hidden" || l === "clip") {
-      this.restore = H;
-      return;
-    }
-    const s = W || !F(o);
-    this.restore = s ? j(o) : I(o);
-  }
-}
-const V = new R();
-function _(r = !0, o = null) {
-  T(() => {
-    if (r)
-      return V.acquire(o);
-  }, [r, o]);
-}
+import * as n from "react";
+import { useRenderElement as u } from "./als-react-ts-ui189.js";
+import { valueToPercent as c } from "./als-react-ts-ui495.js";
+import { useProgressRootContext as p } from "./als-react-ts-ui509.js";
+import { progressStateAttributesMapping as f } from "./als-react-ts-ui510.js";
+const d = /* @__PURE__ */ n.forwardRef(function(r, s) {
+  const {
+    render: N,
+    className: P,
+    ...o
+  } = r, {
+    max: i,
+    min: a,
+    value: e,
+    state: l
+  } = p(), t = Number.isFinite(e) && e !== null ? c(e, a, i) : null, m = n.useCallback(() => t == null ? {} : {
+    insetInlineStart: 0,
+    height: "inherit",
+    width: `${t}%`
+  }, [t]);
+  return u("div", r, {
+    state: l,
+    ref: s,
+    props: [{
+      style: m()
+    }, o],
+    stateAttributesMapping: f
+  });
+});
+process.env.NODE_ENV !== "production" && (d.displayName = "ProgressIndicator");
 export {
-  _ as useScrollLock
+  d as ProgressIndicator
 };

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

@@ -1,24 +1,29 @@
-import * as e from "react";
-import { useStableCallback as i } from "./als-react-ts-ui160.js";
-import { useEnhancedClickHandler as u } from "./als-react-ts-ui297.js";
-function f(s) {
-  const [n, o] = e.useState(null), c = i((p, a) => {
-    s || o(a);
-  }), t = e.useCallback(() => {
-    o(null);
-  }, []), {
-    onClick: r,
-    onPointerDown: l
-  } = u(c);
-  return e.useMemo(() => ({
-    openMethod: n,
-    reset: t,
-    triggerProps: {
-      onClick: r,
-      onPointerDown: l
-    }
-  }), [n, t, r, l]);
-}
+import * as i from "react";
+import { useIsoLayoutEffect as p } from "./als-react-ts-ui193.js";
+import { useBaseUiId as m } from "./als-react-ts-ui249.js";
+import { useRenderElement as f } from "./als-react-ts-ui189.js";
+import { useProgressRootContext as d } from "./als-react-ts-ui509.js";
+import { progressStateAttributesMapping as u } from "./als-react-ts-ui510.js";
+const c = /* @__PURE__ */ i.forwardRef(function(t, s) {
+  const {
+    render: g,
+    className: b,
+    id: o,
+    ...n
+  } = t, e = m(o), {
+    setLabelId: r,
+    state: a
+  } = d();
+  return p(() => (r(e), () => r(void 0)), [e, r]), f("span", t, {
+    state: a,
+    ref: s,
+    props: [{
+      id: e
+    }, n],
+    stateAttributesMapping: u
+  });
+});
+process.env.NODE_ENV !== "production" && (c.displayName = "ProgressLabel");
 export {
-  f as useOpenInteractionType
+  c as ProgressLabel
 };

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

@@ -1,35 +1,29 @@
-import { useId as f } from "./als-react-ts-ui216.js";
-import { useRefWithInit as g } from "./als-react-ts-ui184.js";
-import { useIsoLayoutEffect as E } from "./als-react-ts-ui161.js";
-import { isElement as d } from "./als-react-ts-ui221.js";
-import { useFloatingParentNodeId as S } from "./als-react-ts-ui286.js";
-import { FloatingRootStore as x } from "./als-react-ts-ui307.js";
-function v(p) {
+import * as u from "react";
+import { useRenderElement as m } from "./als-react-ts-ui189.js";
+import { useProgressRootContext as p } from "./als-react-ts-ui509.js";
+import { progressStateAttributesMapping as f } from "./als-react-ts-ui510.js";
+const c = /* @__PURE__ */ u.forwardRef(function(t, s) {
   const {
-    popupStore: o,
-    noEmit: i = !1,
-    treatPopupAsFloatingElement: a = !1,
-    onOpenChange: m
-  } = p, n = f(), c = S() != null, r = o.useState("open"), t = o.useState("activeTriggerElement"), s = o.useState(a ? "popupElement" : "positionerElement"), u = o.context.triggerElements, e = g(() => new x({
-    open: r,
-    referenceElement: t,
-    floatingElement: s,
-    triggerElements: u,
-    onOpenChange: m,
-    floatingId: n,
-    nested: c,
-    noEmit: i
-  })).current;
-  return E(() => {
-    const l = {
-      open: r,
-      floatingId: n,
-      referenceElement: t,
-      floatingElement: s
-    };
-    d(t) && (l.domReferenceElement = t), e.update(l);
-  }, [r, n, t, s, e]), e.context.onOpenChange = m, e.context.nested = c, e.context.noEmit = i, e;
-}
+    className: g,
+    render: V,
+    children: r,
+    ...n
+  } = t, {
+    value: e,
+    formattedValue: o,
+    state: a
+  } = p(), l = e == null ? "indeterminate" : o, i = e == null ? null : o;
+  return m("span", t, {
+    state: a,
+    ref: s,
+    props: [{
+      "aria-hidden": !0,
+      children: typeof r == "function" ? r(l, e) : i
+    }, n],
+    stateAttributesMapping: f
+  });
+});
+process.env.NODE_ENV !== "production" && (c.displayName = "ProgressValue");
 export {
-  v as useSyncedFloatingRootContext
+  c as ProgressValue
 };