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

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

@@ -1,12 +1,66 @@
-function n(e, t) {
-  return {
-    ...e,
-    state: {
-      ...e.state,
-      valid: !t && e.state.valid
+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 {
-  n as getCombinedFieldValidityData
+  _ as Toggle
 };

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

@@ -1,6 +1,17 @@
-let a = /* @__PURE__ */ (function(d) {
-  return d.disabled = "data-disabled", d.valid = "data-valid", d.invalid = "data-invalid", d.touched = "data-touched", d.dirty = "data-dirty", d.filled = "data-filled", d.focused = "data-focused", d;
-})({});
+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 {
-  a as FieldControlDataAttributes
+  _ as default,
+  r as group
 };

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

@@ -1,130 +1,77 @@
-const j = ["top", "right", "bottom", "left"], m = Math.min, p = Math.max, C = Math.round, L = Math.floor, E = (t) => ({
-  x: t,
-  y: t
-}), h = {
-  left: "right",
-  right: "left",
-  bottom: "top",
-  top: "bottom"
-}, x = {
-  start: "end",
-  end: "start"
-};
-function R(t, e, n) {
-  return p(t, m(e, n));
-}
-function T(t, e) {
-  return typeof t == "function" ? t(e) : t;
-}
-function g(t) {
-  return t.split("-")[0];
-}
-function a(t) {
-  return t.split("-")[1];
-}
-function b(t) {
-  return t === "x" ? "y" : "x";
-}
-function d(t) {
-  return t === "y" ? "height" : "width";
-}
-const A = /* @__PURE__ */ new Set(["top", "bottom"]);
-function P(t) {
-  return A.has(g(t)) ? "y" : "x";
-}
-function y(t) {
-  return b(P(t));
-}
-function k(t, e, n) {
-  n === void 0 && (n = !1);
-  const r = a(t), i = y(t), o = d(i);
-  let c = i === "x" ? r === (n ? "end" : "start") ? "right" : "left" : r === "start" ? "bottom" : "top";
-  return e.reference[o] > e.floating[o] && (c = f(c)), [c, f(c)];
-}
-function q(t) {
-  const e = f(t);
-  return [s(t), e, s(e)];
-}
-function s(t) {
-  return t.replace(/start|end/g, (e) => x[e]);
-}
-const u = ["left", "right"], l = ["right", "left"], M = ["top", "bottom"], O = ["bottom", "top"];
-function S(t, e, n) {
-  switch (t) {
-    case "top":
-    case "bottom":
-      return n ? e ? l : u : e ? u : l;
-    case "left":
-    case "right":
-      return e ? M : O;
-    default:
-      return [];
+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;
   }
-}
-function z(t, e, n, r) {
-  const i = a(t);
-  let o = S(g(t), n === "start", r);
-  return i && (o = o.map((c) => c + "-" + i), e && (o = o.concat(o.map(s)))), o;
-}
-function f(t) {
-  return t.replace(/left|right|bottom|top/g, (e) => h[e]);
-}
-function w(t) {
-  return {
-    top: 0,
-    right: 0,
-    bottom: 0,
-    left: 0,
-    ...t
-  };
-}
-function B(t) {
-  return typeof t != "number" ? w(t) : {
-    top: t,
-    right: t,
-    bottom: t,
-    left: t
-  };
-}
-function D(t) {
+}, B = /* @__PURE__ */ l.forwardRef(function(p, m) {
   const {
-    x: e,
-    y: n,
-    width: r,
-    height: i
-  } = t;
-  return {
-    width: r,
-    height: i,
-    top: n,
-    left: e,
-    right: e + r,
-    bottom: n + i,
-    x: e,
-    y: n
-  };
-}
+    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 {
-  R as clamp,
-  E as createCoords,
-  T as evaluate,
-  w as expandPaddingObject,
-  L as floor,
-  a as getAlignment,
-  y as getAlignmentAxis,
-  k as getAlignmentSides,
-  d as getAxisLength,
-  q as getExpandedPlacements,
-  s as getOppositeAlignmentPlacement,
-  b as getOppositeAxis,
-  z as getOppositeAxisPlacements,
-  f as getOppositePlacement,
-  B as getPaddingObject,
-  g as getSide,
-  P as getSideAxis,
-  p as max,
-  m as min,
-  D as rectToClientRect,
-  C as round,
-  j as sides
+  B as ToggleGroup
 };

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

@@ -1,47 +1,27 @@
-import { evaluate as W, getPaddingObject as Y, getAlignmentAxis as k, getAlignment as q, clamp as B, getAxisLength as C } from "./als-react-ts-ui317.js";
-const F = (s) => ({
-  name: "arrow",
-  options: s,
-  async fn(i) {
-    const {
-      x: y,
-      y: j,
-      placement: x,
-      rects: n,
-      platform: f,
-      elements: l,
-      middlewareData: M
-    } = i, {
-      element: g,
-      padding: v = 0,
-      offsetParent: z = "real"
-    } = W(s, i) || {};
-    if (g == null)
-      return {};
-    const h = Y(v), m = {
-      x: y,
-      y: j
-    }, t = k(x), e = C(t), r = await f.getDimensions(g), d = t === "y", E = d ? "top" : "left", H = d ? "bottom" : "right", A = d ? "clientHeight" : "clientWidth", L = n.reference[e] + n.reference[t] - m[t] - n.floating[e], R = m[t] - n.reference[t], S = z === "real" ? await f.getOffsetParent?.(g) : l.floating;
-    let a = l.floating[A] || n.floating[e];
-    (!a || !await f.isElement?.(S)) && (a = l.floating[A] || n.floating[e]);
-    const T = L / 2 - R / 2, O = a / 2 - r[e] / 2 - 1, u = Math.min(h[E], O), b = Math.min(h[H], O), c = u, D = a - r[e] - b, o = a / 2 - r[e] / 2 + T, P = B(c, o, D), p = !M.arrow && q(x) != null && o !== P && n.reference[e] / 2 - (o < c ? u : b) - r[e] / 2 < 0, w = p ? o < c ? o - c : o - D : 0;
-    return {
-      [t]: m[t] + w,
-      data: {
-        [t]: P,
-        centerOffset: o - P - w,
-        ...p && {
-          alignmentOffset: w
-        }
-      },
-      reset: p
-    };
-  }
-}), I = (s, i) => ({
-  ...F(s),
-  options: [s, i]
-});
+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 {
-  I as arrow,
-  F as baseArrow
+  _ 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

@@ -1,20 +1,47 @@
-import { hide as a } from "./als-react-ts-ui306.js";
-const o = {
-  name: "hide",
-  async fn(e) {
-    const {
-      width: n,
-      height: d,
-      x: i,
-      y: t
-    } = e.rects.reference, r = n === 0 && d === 0 && i === 0 && t === 0;
-    return {
-      data: {
-        referenceHidden: (await a().fn(e)).data?.referenceHidden || r
-      }
-    };
-  }
-};
+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 {
-  o as hide
+  N as ToolbarRoot
 };

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

@@ -1,4 +1,4 @@
-import { ALSTabsPanel as a, ALSTabsIndicator as o, ALSTabsTab as s, ALSTabsList as t, ALSTabsRoot as b } from "./als-react-ts-ui158.js";
+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,

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

@@ -1,14 +1,54 @@
-import { round as r } from "./als-react-ts-ui317.js";
-import { getComputedStyle as a, isHTMLElement as c } from "./als-react-ts-ui221.js";
-function g(t) {
-  const i = a(t);
-  let o = parseFloat(i.width) || 0, s = parseFloat(i.height) || 0;
-  const f = c(t), e = f ? t.offsetWidth : o, h = f ? t.offsetHeight : s;
-  return (r(o) !== e || r(s) !== h) && (o = e, s = h), {
-    width: o,
-    height: s
-  };
-}
+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 getCssDimensions
+  g as ToolbarButton
 };

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

@@ -1,7 +1,32 @@
-let t = 0;
-function n(e) {
-  return t += 1, `${e}-${Math.random().toString(36).slice(2, 6)}-${t}`;
-}
+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 {
-  n as generateId
+  l as ToolbarLink
 };

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

@@ -1,14 +1,35 @@
-import r from "./als-react-ts-ui197.js";
-import * as o from "react";
-const e = /* @__PURE__ */ o.createContext(void 0);
-process.env.NODE_ENV !== "production" && (e.displayName = "ToastContext");
-function n() {
-  const t = o.useContext(e);
-  if (!t)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: useToastManager must be used within <Toast.Provider>." : r(73));
-  return t;
-}
+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 {
-  e as ToastContext,
-  n as useToastContext
+  f as ToolbarGroup
 };

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

@@ -1,16 +1,19 @@
-function n(e, t) {
-  if (typeof e == "string")
-    return {
-      description: e
-    };
-  if (typeof e == "function") {
-    const r = e(t);
-    return typeof r == "string" ? {
-      description: r
-    } : r;
-  }
-  return e;
-}
+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 {
-  n as resolvePromiseOptions
+  c as ToolbarSeparator
 };