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

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

@@ -0,0 +1,51 @@
+import * as o from "react";
+import { formatNumber as M } from "./als-react-ts-ui494.js";
+import { useRenderElement as v } from "./als-react-ts-ui189.js";
+import { useSliderRootContext as V } from "./als-react-ts-ui556.js";
+import { sliderStateAttributesMapping as b } from "./als-react-ts-ui555.js";
+const N = /* @__PURE__ */ o.forwardRef(function(i, m) {
+  const {
+    "aria-live": f = "off",
+    render: S,
+    className: g,
+    children: a,
+    ...p
+  } = i, {
+    thumbMap: u,
+    state: d,
+    values: r,
+    formatOptionsRef: s,
+    locale: l
+  } = V(), c = o.useMemo(() => {
+    let t = "";
+    for (const e of u.values())
+      e?.inputId && (t += `${e.inputId} `);
+    return t.trim() === "" ? void 0 : t.trim();
+  }, [u]), n = o.useMemo(() => {
+    const t = [];
+    for (let e = 0; e < r.length; e += 1)
+      t.push(M(r[e], l, s.current ?? void 0));
+    return t;
+  }, [s, l, r]), h = o.useMemo(() => {
+    const t = [];
+    for (let e = 0; e < r.length; e += 1)
+      t.push(n[e] || r[e]);
+    return t.join(" – ");
+  }, [r, n]);
+  return v("output", i, {
+    state: d,
+    ref: m,
+    props: [{
+      // off by default because it will keep announcing when the slider is being dragged
+      // and also when the value is changing (but not yet committed)
+      "aria-live": f,
+      children: typeof a == "function" ? a(n, r) : h,
+      htmlFor: c
+    }, p],
+    stateAttributesMapping: b
+  });
+});
+process.env.NODE_ENV !== "production" && (N.displayName = "SliderValue");
+export {
+  N as SliderValue
+};

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

@@ -0,0 +1,192 @@
+import * as t from "react";
+import { ownerDocument as Ve } from "./als-react-ts-ui372.js";
+import { useControlled as Ie } from "./als-react-ts-ui282.js";
+import { useStableCallback as d } from "./als-react-ts-ui192.js";
+import { useValueAsRef as De } from "./als-react-ts-ui337.js";
+import { useIsoLayoutEffect as Pe } from "./als-react-ts-ui193.js";
+import { warn as Me } from "./als-react-ts-ui283.js";
+import { createChangeEventDetails as X, createGenericEventDetails as Ne } from "./als-react-ts-ui246.js";
+import { useValueChanged as Te } from "./als-react-ts-ui406.js";
+import { useBaseUiId as Le } from "./als-react-ts-ui249.js";
+import { useRenderElement as Oe } from "./als-react-ts-ui189.js";
+import { clamp as Be } from "./als-react-ts-ui519.js";
+import { areArraysEqual as Z } from "./als-react-ts-ui438.js";
+import { CompositeList as Ue } from "./als-react-ts-ui284.js";
+import { useField as Fe } from "./als-react-ts-ui403.js";
+import { useFieldRootContext as ke } from "./als-react-ts-ui398.js";
+import { useFormContext as je } from "./als-react-ts-ui402.js";
+import { useLabelableContext as qe } from "./als-react-ts-ui399.js";
+import { asc as we } from "./als-react-ts-ui552.js";
+import { getSliderValue as _e } from "./als-react-ts-ui553.js";
+import { validateMinimumDistance as ze } from "./als-react-ts-ui554.js";
+import { sliderStateAttributesMapping as Ge } from "./als-react-ts-ui555.js";
+import { SliderRootContext as He } from "./als-react-ts-ui556.js";
+import { jsx as Y } from "react/jsx-runtime";
+import { none as Je, keyboard as Ke, inputChange as Qe } from "./als-react-ts-ui248.js";
+import { activeElement as We } from "./als-react-ts-ui331.js";
+function Xe(i) {
+  return "key" in i ? Ke : Qe;
+}
+function Ye(i, l) {
+  return typeof i == "number" && typeof l == "number" ? i === l : Array.isArray(i) && Array.isArray(l) ? Z(i, l) : !1;
+}
+const Ze = /* @__PURE__ */ t.forwardRef(function(l, $) {
+  const {
+    "aria-labelledby": ee,
+    className: $e,
+    defaultValue: te,
+    disabled: re = !1,
+    id: oe,
+    format: ne,
+    largeStep: T = 10,
+    locale: L,
+    render: et,
+    max: n = 100,
+    min: o = 0,
+    minStepsBetweenValues: f = 0,
+    name: ae,
+    onValueChange: se,
+    onValueCommitted: ie,
+    orientation: v = "horizontal",
+    step: p = 1,
+    thumbCollisionBehavior: O = "push",
+    thumbAlignment: S = "center",
+    value: le,
+    ...ue
+  } = l, B = Le(oe), me = d(se), A = d(ie), {
+    clearErrors: ce
+  } = je(), {
+    state: U,
+    disabled: de,
+    name: fe,
+    setTouched: pe,
+    setDirty: be,
+    validityData: he,
+    shouldValidateOnChange: ge,
+    validation: m
+  } = ke(), {
+    labelId: ve
+  } = qe(), E = ee ?? ve, u = de || re, b = fe ?? ae, [r, Re] = Ie({
+    controlled: le,
+    default: te ?? o,
+    name: "Slider"
+  }), x = t.useRef(null), R = t.useRef(null), V = t.useRef([]), F = t.useRef(null), k = t.useRef(null), j = t.useRef(-1), q = t.useRef(null), y = t.useRef(null), I = t.useRef("none"), w = De(ne), [h, ye] = t.useState(-1), [_, Ce] = t.useState(-1), [C, z] = t.useState(!1), [G, Se] = t.useState(() => /* @__PURE__ */ new Map()), [H, J] = t.useState([void 0, void 0]), D = d((e) => {
+    ye(e), e !== -1 && Ce(e);
+  });
+  Fe({
+    id: B,
+    commit: m.commit,
+    value: r,
+    controlRef: R,
+    name: b,
+    getValue: () => r
+  }), Te(r, () => {
+    ce(b), ge() ? m.commit(r) : m.commit(r, !0);
+    const e = he.initialValue;
+    let a;
+    Array.isArray(r) && Array.isArray(e) ? a = !Z(r, e) : a = r !== e, be(a);
+  });
+  const K = d((e) => {
+    e && (R.current = e);
+  }), P = Array.isArray(r), g = t.useMemo(() => P ? r.slice().sort(we) : [Be(r, o, n)], [n, o, P, r]), M = d((e, a) => {
+    if (Number.isNaN(e) || Ye(e, r))
+      return;
+    const s = a ?? X(Je, void 0, void 0, {
+      activeThumbIndex: -1
+    });
+    I.current = s.reason;
+    const c = new event.constructor(event.type, event);
+    Object.defineProperty(c, "target", {
+      writable: !0,
+      value: {
+        value: e,
+        name: b
+      }
+    }), s.event = c, y.current = e, me(e, s), !s.isCanceled && Re(e);
+  }), Q = d((e, a, s) => {
+    const c = _e(e, a, o, n, P, g);
+    if (ze(c, p, f)) {
+      const W = Xe(s);
+      M(c, X(W, s.nativeEvent, void 0, {
+        activeThumbIndex: a
+      })), pe(!0);
+      const xe = y.current ?? c;
+      A(xe, Ne(W, s.nativeEvent));
+    }
+  });
+  process.env.NODE_ENV !== "production" && o >= n && Me("Slider `max` must be greater than `min`."), Pe(() => {
+    const e = We(Ve(x.current));
+    u && e && x.current?.contains(e) && e.blur();
+  }, [u]), u && h !== -1 && D(-1);
+  const N = t.useMemo(() => ({
+    ...U,
+    activeThumbIndex: h,
+    disabled: u,
+    dragging: C,
+    orientation: v,
+    max: n,
+    min: o,
+    minStepsBetweenValues: f,
+    step: p,
+    values: g
+  }), [U, h, u, C, n, o, f, v, p, g]), Ae = t.useMemo(() => ({
+    active: h,
+    controlRef: R,
+    disabled: u,
+    dragging: C,
+    validation: m,
+    formatOptionsRef: w,
+    handleInputChange: Q,
+    indicatorPosition: H,
+    inset: S !== "center",
+    labelId: E,
+    largeStep: T,
+    lastUsedThumbIndex: _,
+    lastChangedValueRef: y,
+    lastChangeReasonRef: I,
+    locale: L,
+    max: n,
+    min: o,
+    minStepsBetweenValues: f,
+    name: b,
+    onValueCommitted: A,
+    orientation: v,
+    pressedInputRef: F,
+    pressedThumbCenterOffsetRef: k,
+    pressedThumbIndexRef: j,
+    pressedValuesRef: q,
+    registerFieldControlRef: K,
+    renderBeforeHydration: S === "edge",
+    setActive: D,
+    setDragging: z,
+    setIndicatorPosition: J,
+    setValue: M,
+    state: N,
+    step: p,
+    thumbCollisionBehavior: O,
+    thumbMap: G,
+    thumbRefs: V,
+    values: g
+  }), [h, R, E, u, C, m, w, Q, H, T, _, y, I, L, n, o, f, b, A, v, F, k, j, q, K, D, z, J, M, N, p, O, S, G, V, g]), Ee = Oe("div", l, {
+    state: N,
+    ref: [$, x],
+    props: [{
+      "aria-labelledby": E,
+      id: B,
+      role: "group"
+    }, m.getValidationProps, ue],
+    stateAttributesMapping: Ge
+  });
+  return /* @__PURE__ */ Y(He.Provider, {
+    value: Ae,
+    children: /* @__PURE__ */ Y(Ue, {
+      elementsRef: V,
+      onMapChange: Se,
+      children: Ee
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (Ze.displayName = "SliderRoot");
+export {
+  Ze as SliderRoot
+};

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

@@ -0,0 +1,16 @@
+const e = "_toggle_1lewf_2", g = {
+  toggle: e,
+  "toggle--disabled": "_toggle--disabled_1lewf_31",
+  "toggle--pressed": "_toggle--pressed_1lewf_43",
+  "toggle--sm": "_toggle--sm_1lewf_62",
+  "toggle--md": "_toggle--md_1lewf_68",
+  "toggle--lg": "_toggle--lg_1lewf_74",
+  "toggle--default": "_toggle--default_1lewf_81",
+  "toggle--primary": "_toggle--primary_1lewf_86",
+  "toggle--success": "_toggle--success_1lewf_97",
+  "toggle--error": "_toggle--error_1lewf_108"
+};
+export {
+  g as default,
+  e as toggle
+};

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

@@ -0,0 +1,66 @@
+import * as f from "react";
+import { useStableCallback as y } from "./als-react-ts-ui192.js";
+import { useControlled as G } from "./als-react-ts-ui282.js";
+import { useRenderElement as O } from "./als-react-ts-ui189.js";
+import { useToggleGroupContext as S } from "./als-react-ts-ui537.js";
+import { useButton as j } from "./als-react-ts-ui247.js";
+import { CompositeItem as w } from "./als-react-ts-ui488.js";
+import { createChangeEventDetails as D } from "./als-react-ts-ui246.js";
+import { jsx as I } from "react/jsx-runtime";
+import { none as M } from "./als-react-ts-ui248.js";
+const _ = /* @__PURE__ */ f.forwardRef(function(a, i) {
+  const {
+    className: m,
+    defaultPressed: c = !1,
+    disabled: g = !1,
+    form: z,
+    // never participates in form validation
+    onPressedChange: P,
+    pressed: C,
+    render: b,
+    type: A,
+    // cannot change button type
+    value: v,
+    nativeButton: x = !0,
+    ...E
+  } = a, r = v ?? "", e = S(), N = e?.value ?? [], T = e ? void 0 : c, n = (g || e?.disabled) ?? !1, [o, h] = G({
+    controlled: e && r ? N?.indexOf(r) > -1 : C,
+    default: T,
+    name: "Toggle",
+    state: "pressed"
+  }), R = y((s, t) => {
+    e?.setGroupValue?.(r, s, t), P?.(s, t);
+  }), {
+    getButtonProps: B,
+    buttonRef: V
+  } = j({
+    disabled: n,
+    native: x
+  }), l = f.useMemo(() => ({
+    disabled: n,
+    pressed: o
+  }), [n, o]), d = [V, i], p = [{
+    "aria-pressed": o,
+    onClick(s) {
+      const t = !o, u = D(M, s.nativeEvent);
+      R(t, u), !u.isCanceled && h(t);
+    }
+  }, E, B], k = O("button", a, {
+    enabled: !e,
+    state: l,
+    ref: d,
+    props: p
+  });
+  return e ? /* @__PURE__ */ I(w, {
+    tag: "button",
+    render: b,
+    className: m,
+    state: l,
+    refs: d,
+    props: p
+  }) : k;
+});
+process.env.NODE_ENV !== "production" && (_.displayName = "Toggle");
+export {
+  _ as Toggle
+};

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

@@ -0,0 +1,17 @@
+const r = "_group_1ni9e_2", _ = {
+  group: r,
+  "group--horizontal": "_group--horizontal_1ni9e_12",
+  "group--vertical": "_group--vertical_1ni9e_16",
+  "group--disabled": "_group--disabled_1ni9e_21",
+  "group--sm": "_group--sm_1ni9e_27",
+  "group--md": "_group--md_1ni9e_32",
+  "group--lg": "_group--lg_1ni9e_37",
+  "group--default": "_group--default_1ni9e_43",
+  "group--primary": "_group--primary_1ni9e_47",
+  "group--success": "_group--success_1ni9e_52",
+  "group--error": "_group--error_1ni9e_57"
+};
+export {
+  _ as default,
+  r as group
+};

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

@@ -0,0 +1,77 @@
+import * as l from "react";
+import { useStableCallback as E } from "./als-react-ts-ui192.js";
+import { useControlled as F } from "./als-react-ts-ui282.js";
+import { useRenderElement as O } from "./als-react-ts-ui189.js";
+import { CompositeRoot as S } from "./als-react-ts-ui484.js";
+import { useToolbarRootContext as j } from "./als-react-ts-ui368.js";
+import { ToggleGroupContext as k } from "./als-react-ts-ui537.js";
+import { ToggleGroupDataAttributes as z } from "./als-react-ts-ui538.js";
+import { jsx as V } from "react/jsx-runtime";
+const v = {
+  multiple(i) {
+    return i ? {
+      [z.multiple]: ""
+    } : null;
+  }
+}, B = /* @__PURE__ */ l.forwardRef(function(p, m) {
+  const {
+    defaultValue: f,
+    disabled: T = !1,
+    loopFocus: x = !0,
+    onValueChange: A,
+    orientation: o = "horizontal",
+    multiple: s = !1,
+    value: u,
+    className: M,
+    render: N,
+    ...d
+  } = p, a = j(!0), h = l.useMemo(() => {
+    if (u === void 0)
+      return f ?? [];
+  }, [u, f]), t = (a?.disabled ?? !1) || T, [r, P] = F({
+    controlled: u,
+    default: h,
+    name: "ToggleGroup",
+    state: "value"
+  }), c = E((n, C, G) => {
+    let e;
+    if (s ? (e = r.slice(), C ? e.push(n) : e.splice(r.indexOf(n), 1)) : e = C ? [n] : [], Array.isArray(e)) {
+      if (A?.(e, G), G.isCanceled)
+        return;
+      P(e);
+    }
+  }), g = l.useMemo(() => ({
+    disabled: t,
+    multiple: s,
+    orientation: o
+  }), [t, o, s]), R = l.useMemo(() => ({
+    disabled: t,
+    orientation: o,
+    setGroupValue: c,
+    value: r
+  }), [t, o, c, r]), b = {
+    role: "group"
+  }, y = O("div", p, {
+    enabled: !!a,
+    state: g,
+    ref: m,
+    props: [b, d],
+    stateAttributesMapping: v
+  });
+  return /* @__PURE__ */ V(k.Provider, {
+    value: R,
+    children: a ? y : /* @__PURE__ */ V(S, {
+      render: N,
+      className: M,
+      state: g,
+      refs: [m],
+      props: [b, d],
+      stateAttributesMapping: v,
+      loopFocus: x
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (B.displayName = "ToggleGroup");
+export {
+  B as ToggleGroup
+};

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

@@ -0,0 +1,27 @@
+const t = "_root_hgdff_2", o = "_disabled_hgdff_35", _ = "_button_hgdff_41", a = "_buttonDisabled_hgdff_80", r = "_link_hgdff_86", n = "_group_hgdff_114", i = "_groupDisabled_hgdff_127", s = "_separator_hgdff_133", e = "_input_hgdff_153", f = {
+  root: t,
+  "orientation-horizontal": "_orientation-horizontal_hgdff_27",
+  "orientation-vertical": "_orientation-vertical_hgdff_31",
+  disabled: o,
+  button: _,
+  buttonDisabled: a,
+  link: r,
+  group: n,
+  groupDisabled: i,
+  separator: s,
+  "separator-horizontal": "_separator-horizontal_hgdff_138",
+  "separator-vertical": "_separator-vertical_hgdff_146",
+  input: e
+};
+export {
+  _ as button,
+  a as buttonDisabled,
+  f as default,
+  o as disabled,
+  n as group,
+  i as groupDisabled,
+  e as input,
+  r as link,
+  t as root,
+  s as separator
+};

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

@@ -0,0 +1,47 @@
+import * as e from "react";
+import { CompositeRoot as x } from "./als-react-ts-ui484.js";
+import { ToolbarRootContext as h } from "./als-react-ts-ui368.js";
+import { jsx as i } from "react/jsx-runtime";
+const N = /* @__PURE__ */ e.forwardRef(function(l, c) {
+  const {
+    disabled: t = !1,
+    loopFocus: p = !0,
+    orientation: o = "horizontal",
+    className: d,
+    render: m,
+    ...u
+  } = l, [a, r] = e.useState(() => /* @__PURE__ */ new Map()), f = e.useMemo(() => {
+    const n = [];
+    for (const s of a.values())
+      s?.index && !s.focusableWhenDisabled && n.push(s.index);
+    return n;
+  }, [a]), b = e.useMemo(() => ({
+    disabled: t,
+    orientation: o,
+    setItemMap: r
+  }), [t, o, r]), M = e.useMemo(() => ({
+    disabled: t,
+    orientation: o
+  }), [t, o]), R = {
+    "aria-orientation": o,
+    role: "toolbar"
+  };
+  return /* @__PURE__ */ i(h.Provider, {
+    value: b,
+    children: /* @__PURE__ */ i(x, {
+      render: m,
+      className: d,
+      state: M,
+      refs: [c],
+      props: [R, u],
+      disabledIndices: f,
+      loopFocus: p,
+      onMapChange: r,
+      orientation: o
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (N.displayName = "ToolbarRoot");
+export {
+  N as ToolbarRoot
+};

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

@@ -0,0 +1,11 @@
+import { ALSTabsPanel as a, ALSTabsIndicator as o, ALSTabsTab as s, ALSTabsList as t, ALSTabsRoot as b } from "./als-react-ts-ui306.js";
+const T = {
+  Root: b,
+  List: t,
+  Tab: s,
+  Indicator: o,
+  Panel: a
+};
+export {
+  T as ALSTabs
+};

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

@@ -0,0 +1,54 @@
+import * as e from "react";
+import { useToolbarRootContext as x } from "./als-react-ts-ui368.js";
+import { useToolbarGroupContext as N } from "./als-react-ts-ui563.js";
+import { CompositeItem as T } from "./als-react-ts-ui488.js";
+import { jsx as C } from "react/jsx-runtime";
+import { useButton as R } from "./als-react-ts-ui247.js";
+const g = /* @__PURE__ */ e.forwardRef(function(r, a) {
+  const {
+    className: n,
+    disabled: i = !1,
+    focusableWhenDisabled: o = !0,
+    render: m,
+    nativeButton: u = !0,
+    ...l
+  } = r, d = e.useMemo(() => ({
+    focusableWhenDisabled: o
+  }), [o]), {
+    disabled: p,
+    orientation: s
+  } = x(), b = N(), t = p || (b?.disabled ?? !1) || i, {
+    getButtonProps: c,
+    buttonRef: f
+  } = R({
+    disabled: t,
+    focusableWhenDisabled: o,
+    native: u
+  }), B = e.useMemo(() => ({
+    disabled: t,
+    orientation: s,
+    focusable: o
+  }), [t, o, s]);
+  return /* @__PURE__ */ C(T, {
+    tag: "button",
+    render: m,
+    className: n,
+    metadata: d,
+    state: B,
+    refs: [a, f],
+    props: [
+      l,
+      // for integrating with Menu and Select disabled states, `disabled` is
+      // intentionally duplicated even though getButtonProps includes it already
+      // TODO: follow up after https://github.com/mui/base-ui/issues/1976#issuecomment-2916905663
+      {
+        disabled: t
+      },
+      c
+    ]
+  });
+});
+process.env.NODE_ENV !== "production" && (g.displayName = "ToolbarButton");
+export {
+  g as ToolbarButton
+};

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

@@ -0,0 +1,32 @@
+import * as e from "react";
+import { useToolbarRootContext as i } from "./als-react-ts-ui368.js";
+import { CompositeItem as c } from "./als-react-ts-ui488.js";
+import { jsx as p } from "react/jsx-runtime";
+const f = {
+  // links cannot be disabled, this metadata is only used for deriving `disabledIndices``
+  // TODO: better name
+  focusableWhenDisabled: !0
+}, l = /* @__PURE__ */ e.forwardRef(function(t, r) {
+  const {
+    className: s,
+    render: a,
+    ...n
+  } = t, {
+    orientation: o
+  } = i(), m = e.useMemo(() => ({
+    orientation: o
+  }), [o]);
+  return /* @__PURE__ */ p(c, {
+    tag: "a",
+    render: a,
+    className: s,
+    metadata: f,
+    state: m,
+    refs: [r],
+    props: [n]
+  });
+});
+process.env.NODE_ENV !== "production" && (l.displayName = "ToolbarLink");
+export {
+  l as ToolbarLink
+};

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

@@ -0,0 +1,35 @@
+import * as e from "react";
+import { useRenderElement as p } from "./als-react-ts-ui189.js";
+import { useToolbarRootContext as u } from "./als-react-ts-ui368.js";
+import { ToolbarGroupContext as c } from "./als-react-ts-ui563.js";
+import { jsx as b } from "react/jsx-runtime";
+const f = /* @__PURE__ */ e.forwardRef(function(r, s) {
+  const {
+    className: T,
+    disabled: a = !1,
+    render: v,
+    ...l
+  } = r, {
+    orientation: t,
+    disabled: n
+  } = u(), o = n || a, i = e.useMemo(() => ({
+    disabled: o
+  }), [o]), d = e.useMemo(() => ({
+    disabled: o,
+    orientation: t
+  }), [o, t]), m = p("div", r, {
+    state: d,
+    ref: s,
+    props: [{
+      role: "group"
+    }, l]
+  });
+  return /* @__PURE__ */ b(c.Provider, {
+    value: i,
+    children: m
+  });
+});
+process.env.NODE_ENV !== "production" && (f.displayName = "ToolbarGroup");
+export {
+  f as ToolbarGroup
+};

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

@@ -0,0 +1,19 @@
+import * as e from "react";
+import { useToolbarRootContext as i } from "./als-react-ts-ui368.js";
+import { jsx as n } from "react/jsx-runtime";
+import { Separator as p } from "./als-react-ts-ui107.js";
+const c = /* @__PURE__ */ e.forwardRef(function(o, r) {
+  const t = i(), a = {
+    vertical: "horizontal",
+    horizontal: "vertical"
+  }[t.orientation];
+  return /* @__PURE__ */ n(p, {
+    orientation: a,
+    ...o,
+    ref: r
+  });
+});
+process.env.NODE_ENV !== "production" && (c.displayName = "ToolbarSeparator");
+export {
+  c as ToolbarSeparator
+};