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

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

@@ -0,0 +1,94 @@
+import { clamp as S } from "./als-react-ts-ui519.js";
+import { getPushedThumbValues as T } from "./als-react-ts-ui566.js";
+function H({
+  behavior: k,
+  values: M,
+  currentValues: A,
+  initialValues: C,
+  pressedIndex: o,
+  nextValue: t,
+  min: e,
+  max: r,
+  step: v,
+  minStepsBetweenValues: m
+}) {
+  const c = A ?? M, P = C ?? M;
+  if (!(c.length > 1))
+    return {
+      value: t,
+      thumbIndex: 0,
+      didSwap: !1
+    };
+  const l = v * m;
+  switch (k) {
+    case "swap": {
+      const u = c[o], g = 1e-7, n = c.slice(), i = n[o - 1], s = n[o + 1], p = i != null ? i + l : e, j = s != null ? s - l : r, D = S(t, p, j), V = Number(D.toFixed(12));
+      n[o] = V;
+      const L = t > u, U = t < u, w = L && s != null && t >= s - g, _ = U && i != null && t <= i + g;
+      if (!w && !_)
+        return {
+          value: n,
+          thumbIndex: o,
+          didSwap: !1
+        };
+      const h = w ? o + 1 : o - 1, q = n.map((N, d) => {
+        if (d === o)
+          return V;
+        const f = P[d];
+        return f ?? c[d];
+      });
+      let F = t;
+      w ? F = Math.max(t, n[h]) : F = Math.min(t, n[h]);
+      const b = T({
+        values: n,
+        index: h,
+        nextValue: F,
+        min: e,
+        max: r,
+        step: v,
+        minStepsBetweenValues: m,
+        initialValues: q
+      }), a = w ? h - 1 : h + 1;
+      if (a >= 0 && a < b.length) {
+        const N = b[a - 1], d = b[a + 1];
+        let f = N != null ? N + l : e;
+        f = Math.max(f, e + a * l);
+        let B = d != null ? d - l : r;
+        B = Math.min(B, r - (b.length - 1 - a) * l);
+        const y = S(V, f, B);
+        b[a] = Number(y.toFixed(12));
+      }
+      return {
+        value: b,
+        thumbIndex: h,
+        didSwap: !0
+      };
+    }
+    case "push":
+      return {
+        value: T({
+          values: c,
+          index: o,
+          nextValue: t,
+          min: e,
+          max: r,
+          step: v,
+          minStepsBetweenValues: m
+        }),
+        thumbIndex: o,
+        didSwap: !1
+      };
+    case "none":
+    default: {
+      const u = c.slice(), g = u[o - 1], n = u[o + 1], i = g != null ? g + l : e, s = n != null ? n - l : r, p = S(t, i, s);
+      return u[o] = Number(p.toFixed(12)), {
+        value: u,
+        thumbIndex: o,
+        didSwap: !1
+      };
+    }
+  }
+}
+export {
+  H as resolveThumbCollision
+};

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

@@ -0,0 +1,17 @@
+function a(r) {
+  var n, f, t = "";
+  if (typeof r == "string" || typeof r == "number") t += r;
+  else if (typeof r == "object") if (Array.isArray(r)) {
+    var o = r.length;
+    for (n = 0; n < o; n++) r[n] && (f = a(r[n])) && (t && (t += " "), t += f);
+  } else for (f in r) r[f] && (t && (t += " "), t += f);
+  return t;
+}
+function i() {
+  for (var r, n, f = 0, t = "", o = arguments.length; f < o; f++) (r = arguments[f]) && (n = a(r)) && (t && (t += " "), t += n);
+  return t;
+}
+export {
+  i as clsx,
+  i as default
+};

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

@@ -0,0 +1,6 @@
+let n = /* @__PURE__ */ (function(d) {
+  return d.index = "data-index", d.dragging = "data-dragging", d.orientation = "data-orientation", d.disabled = "data-disabled", d.readonly = "data-readonly", d.required = "data-required", d.valid = "data-valid", d.invalid = "data-invalid", d.touched = "data-touched", d.dirty = "data-dirty", d.focused = "data-focused", d;
+})({});
+export {
+  n as SliderThumbDataAttributes
+};

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

@@ -0,0 +1,4 @@
+const t = '!function(){const t=document.currentScript?.parentElement;if(!t)return;const e=t.closest("[data-base-ui-slider-control]");if(!e)return;const r=e.querySelector("[data-base-ui-slider-indicator]"),i=e.getBoundingClientRect(),n="vertical"===e.getAttribute("data-orientation")?"height":"width",o=e.querySelectorAll(\'input[type="range"]\'),l=o.length>1,s=o.length-1;let a=null,u=null;for(let t=0;t<o.length;t+=1){const e=o[t],y=parseFloat(e.getAttribute("value")??"");if(Number.isNaN(y))return;const c=e.parentElement;if(!c)return;const p=parseFloat(e.getAttribute("max")??"100"),g=parseFloat(e.getAttribute("min")??"0"),b=c?.getBoundingClientRect(),d=i[n]-b[n],m=100*(y-g)/(p-g),v=(b[n]/2+d*m/100)/i[n]*100;c.style.setProperty("--position",`${v}%`),Number.isFinite(v)&&(c.style.removeProperty("visibility"),r&&(0===t?(a=v,r.style.setProperty("--start-position",`${v}%`),l||r.style.removeProperty("visibility")):t===s&&(u=v-(a??0),r.style.setProperty("--end-position",`${v}%`),r.style.setProperty("--relative-size",`${u}%`),r.style.removeProperty("visibility"))))}}();';
+export {
+  t as script
+};

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

@@ -0,0 +1,6 @@
+let v = /* @__PURE__ */ (function(f) {
+  return f.hasOverflowX = "data-has-overflow-x", f.hasOverflowY = "data-has-overflow-y", f.overflowXStart = "data-overflow-x-start", f.overflowXEnd = "data-overflow-x-end", f.overflowYStart = "data-overflow-y-start", f.overflowYEnd = "data-overflow-y-end", f;
+})({});
+export {
+  v as ScrollAreaRootDataAttributes
+};

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

@@ -0,0 +1,10 @@
+import * as o from "react";
+const t = /* @__PURE__ */ o.createContext(void 0);
+process.env.NODE_ENV !== "production" && (t.displayName = "ToolbarGroupContext");
+function r(e) {
+  return o.useContext(t);
+}
+export {
+  t as ToolbarGroupContext,
+  r as useToolbarGroupContext
+};

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

@@ -0,0 +1,6 @@
+let e = /* @__PURE__ */ (function(d) {
+  return d.checked = "data-checked", d.unchecked = "data-unchecked", d.disabled = "data-disabled", d.readonly = "data-readonly", d.required = "data-required", 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;
+})({});
+export {
+  e as SwitchRootDataAttributes
+};

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

@@ -0,0 +1,8 @@
+import { asc as c } from "./als-react-ts-ui552.js";
+function p(r, e, o) {
+  const t = r.slice();
+  return t[e] = o, t.sort(c);
+}
+export {
+  p as replaceArrayItemAtIndex
+};

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

@@ -0,0 +1,32 @@
+import { clamp as r } from "./als-react-ts-ui519.js";
+function g({
+  values: s,
+  index: o,
+  nextValue: h,
+  min: f,
+  max: u,
+  step: x,
+  minStepsBetweenValues: M,
+  initialValues: V
+}) {
+  if (s.length === 0)
+    return [];
+  const e = s.slice(), i = x * M, c = e.length - 1, d = V ?? s, w = f + o * i, A = u - (c - o) * i;
+  e[o] = r(h, w, A);
+  for (let t = o + 1; t <= c; t += 1) {
+    const n = e[t - 1] + i, m = u - (c - t) * i, a = d[t] ?? e[t];
+    let l = Math.max(e[t], n);
+    a < l && (l = Math.max(a, n)), e[t] = r(l, n, m);
+  }
+  for (let t = o - 1; t >= 0; t -= 1) {
+    const n = e[t + 1] - i, m = f + t * i, a = d[t] ?? e[t];
+    let l = Math.min(e[t], n);
+    a > l && (l = Math.min(a, n)), e[t] = r(l, m, n);
+  }
+  for (let t = 0; t <= c; t += 1)
+    e[t] = Number(e[t].toFixed(12));
+  return e;
+}
+export {
+  g as getPushedThumbValues
+};

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

@@ -0,0 +1,14 @@
+import s 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 = "TabsRootContext");
+function r() {
+  const o = t.useContext(e);
+  if (o === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsRootContext is missing. Tabs parts must be placed within <Tabs.Root>." : s(64));
+  return o;
+}
+export {
+  e as TabsRootContext,
+  r as useTabsRootContext
+};

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

@@ -0,0 +1,9 @@
+import { TabsRootDataAttributes as i } from "./als-react-ts-ui573.js";
+const o = {
+  tabActivationDirection: (t) => ({
+    [i.activationDirection]: t
+  })
+};
+export {
+  o as tabsStateAttributesMapping
+};

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

@@ -0,0 +1,14 @@
+import o from "./als-react-ts-ui259.js";
+import * as s from "react";
+const e = /* @__PURE__ */ s.createContext(void 0);
+process.env.NODE_ENV !== "production" && (e.displayName = "TabsListContext");
+function i() {
+  const t = s.useContext(e);
+  if (t === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: TabsListContext is missing. TabsList parts must be placed within <Tabs.List>." : o(65));
+  return t;
+}
+export {
+  e as TabsListContext,
+  i as useTabsListContext
+};

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

@@ -0,0 +1,24 @@
+const a = "_root_ncbbj_5", _ = "_image_ncbbj_66", s = "_fallback_ncbbj_88", t = "_statusIndicator_ncbbj_116", n = {
+  root: a,
+  "size-sm": "_size-sm_ncbbj_22",
+  "size-md": "_size-md_ncbbj_28",
+  "size-lg": "_size-lg_ncbbj_34",
+  "size-xl": "_size-xl_ncbbj_40",
+  "variant-circular": "_variant-circular_ncbbj_50",
+  "variant-rounded": "_variant-rounded_ncbbj_54",
+  "variant-square": "_variant-square_ncbbj_58",
+  image: _,
+  fallback: s,
+  statusIndicator: t,
+  "status-online": "_status-online_ncbbj_129",
+  "status-offline": "_status-offline_ncbbj_133",
+  "status-away": "_status-away_ncbbj_137",
+  "status-busy": "_status-busy_ncbbj_141"
+};
+export {
+  n as default,
+  s as fallback,
+  _ as image,
+  a as root,
+  t as statusIndicator
+};

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

@@ -0,0 +1,4 @@
+const t = '!function(){const t=document.currentScript.previousElementSibling;if(!t)return;const e=t.closest(\'[role="tablist"]\');if(!e)return;const i=e.querySelector("[data-active]");if(!i)return;if(0===i.offsetWidth||0===e.offsetWidth)return;const l=getComputedStyle(e).direction;let n=0,o=0,c=0,r=0,f=0,s=0;if(null!=i&&null!=e){const t=e.getBoundingClientRect(),{left:u,top:d,width:h,height:p}=i.getBoundingClientRect();n=u-t.left+e.scrollLeft-e.clientLeft,c=d-t.top+e.scrollTop-e.clientTop,f=h,s=p,o="ltr"===l?e.scrollWidth-n-f-e.clientLeft:n-e.clientLeft,r=e.scrollHeight-c-s-e.clientTop}function u(e,i){t.style.setProperty(`--active-tab-${e}`,`${i}px`)}u("left",n),u("right",o),u("top",c),u("bottom",r),u("width",f),u("height",s),f>0&&s>0&&t.removeAttribute("hidden")}();';
+export {
+  t as script
+};

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

@@ -0,0 +1,6 @@
+let e = /* @__PURE__ */ (function(t) {
+  return t.activeTabLeft = "--active-tab-left", t.activeTabRight = "--active-tab-right", t.activeTabTop = "--active-tab-top", t.activeTabBottom = "--active-tab-bottom", t.activeTabWidth = "--active-tab-width", t.activeTabHeight = "--active-tab-height", t;
+})({});
+export {
+  e as TabsIndicatorCssVars
+};

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

@@ -0,0 +1,6 @@
+let n = /* @__PURE__ */ (function(i) {
+  return i.index = "data-index", i.activationDirection = "data-activation-direction", i.orientation = "data-orientation", i.hidden = "data-hidden", i;
+})({});
+export {
+  n as TabsPanelDataAttributes
+};

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

@@ -0,0 +1,6 @@
+let n = /* @__PURE__ */ (function(i) {
+  return i.activationDirection = "data-activation-direction", i.orientation = "data-orientation", i;
+})({});
+export {
+  n as TabsRootDataAttributes
+};

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

@@ -0,0 +1,30 @@
+import * as e from "react";
+import { useRenderElement as p } from "./als-react-ts-ui189.js";
+import { AvatarRootContext as u } from "./als-react-ts-ui190.js";
+import { avatarStateAttributesMapping as c } from "./als-react-ts-ui191.js";
+import { jsx as d } from "react/jsx-runtime";
+const f = /* @__PURE__ */ e.forwardRef(function(o, r) {
+  const {
+    className: v,
+    render: R,
+    ...s
+  } = o, [t, a] = e.useState("idle"), n = e.useMemo(() => ({
+    imageLoadingStatus: t
+  }), [t]), i = e.useMemo(() => ({
+    imageLoadingStatus: t,
+    setImageLoadingStatus: a
+  }), [t, a]), m = p("span", o, {
+    state: n,
+    ref: r,
+    props: s,
+    stateAttributesMapping: c
+  });
+  return /* @__PURE__ */ d(u.Provider, {
+    value: i,
+    children: m
+  });
+});
+process.env.NODE_ENV !== "production" && (f.displayName = "AvatarRoot");
+export {
+  f as AvatarRoot
+};

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

@@ -0,0 +1,39 @@
+import * as r from "react";
+import { useStableCallback as d } from "./als-react-ts-ui192.js";
+import { useIsoLayoutEffect as f } from "./als-react-ts-ui193.js";
+import { useRenderElement as p } from "./als-react-ts-ui189.js";
+import { useAvatarRootContext as l } from "./als-react-ts-ui190.js";
+import { avatarStateAttributesMapping as S } from "./als-react-ts-ui191.js";
+import { useImageLoadingStatus as L } from "./als-react-ts-ui194.js";
+const v = /* @__PURE__ */ r.forwardRef(function(e, n) {
+  const {
+    className: I,
+    render: b,
+    onLoadingStatusChange: s,
+    referrerPolicy: i,
+    crossOrigin: m,
+    ...g
+  } = e, u = l(), t = L(e.src, {
+    referrerPolicy: i,
+    crossOrigin: m
+  }), a = d((o) => {
+    s?.(o), u.setImageLoadingStatus(o);
+  });
+  f(() => {
+    t !== "idle" && a(t);
+  }, [t, a]);
+  const c = r.useMemo(() => ({
+    imageLoadingStatus: t
+  }), [t]);
+  return p("img", e, {
+    state: c,
+    ref: n,
+    props: g,
+    stateAttributesMapping: S,
+    enabled: t === "loaded"
+  });
+});
+process.env.NODE_ENV !== "production" && (v.displayName = "AvatarImage");
+export {
+  v as AvatarImage
+};

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

@@ -0,0 +1,103 @@
+import { jsx as m, jsxs as u } from "react/jsx-runtime";
+import * as e from "react";
+import { clsx as s } from "./als-react-ts-ui56.js";
+import r from "./als-react-ts-ui57.js";
+import { AvatarRoot as L } from "./als-react-ts-ui58.js";
+import { AvatarImage as x } from "./als-react-ts-ui59.js";
+import { AvatarFallback as R } from "./als-react-ts-ui60.js";
+const l = e.createContext(
+  void 0
+), A = () => {
+  const t = e.useContext(l);
+  if (!t)
+    throw new Error(
+      "ALSAvatar compound components must be used within ALSAvatar.Root"
+    );
+  return t;
+}, i = e.forwardRef(
+  ({
+    size: t = "md",
+    variant: o = "circular",
+    status: a,
+    className: n,
+    children: c,
+    ...d
+  }, p) => {
+    const S = e.useMemo(
+      () => ({ size: t, variant: o, status: a }),
+      [t, o, a]
+    );
+    return /* @__PURE__ */ m(l.Provider, { value: S, children: /* @__PURE__ */ u(
+      L,
+      {
+        ref: p,
+        className: s(
+          r.root,
+          r[`size-${t}`],
+          r[`variant-${o}`],
+          a && r[`status-${a}`],
+          n
+        ),
+        ...d,
+        children: [
+          c,
+          a && /* @__PURE__ */ m(
+            "span",
+            {
+              className: s(
+                r.statusIndicator,
+                r[`status-${a}`]
+              ),
+              "aria-label": `Status: ${a}`
+            }
+          )
+        ]
+      }
+    ) });
+  }
+);
+i.displayName = "ALSAvatar.Root";
+const v = e.forwardRef(
+  ({ className: t, alt: o, ...a }, n) => {
+    const { variant: c } = A();
+    return /* @__PURE__ */ m(
+      x,
+      {
+        ref: n,
+        className: s(
+          r.image,
+          r[`variant-${c}`],
+          t
+        ),
+        alt: o,
+        ...a
+      }
+    );
+  }
+);
+v.displayName = "ALSAvatar.Image";
+const f = e.forwardRef(({ className: t, children: o, ...a }, n) => {
+  const { variant: c } = A();
+  return /* @__PURE__ */ m(
+    R,
+    {
+      ref: n,
+      className: s(
+        r.fallback,
+        r[`variant-${c}`],
+        t
+      ),
+      ...a,
+      children: o
+    }
+  );
+});
+f.displayName = "ALSAvatar.Fallback";
+const I = {
+  Root: i,
+  Image: v,
+  Fallback: f
+};
+export {
+  I as ALSAvatar
+};

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

@@ -0,0 +1,30 @@
+import * as t from "react";
+import { useTimeout as u } from "./als-react-ts-ui195.js";
+import { useRenderElement as d } from "./als-react-ts-ui189.js";
+import { useAvatarRootContext as c } from "./als-react-ts-ui190.js";
+import { avatarStateAttributesMapping as f } from "./als-react-ts-ui191.js";
+const p = /* @__PURE__ */ t.forwardRef(function(s, o) {
+  const {
+    className: v,
+    render: A,
+    delay: e,
+    ...n
+  } = s, {
+    imageLoadingStatus: a
+  } = c(), [i, m] = t.useState(e === void 0), r = u();
+  t.useEffect(() => (e !== void 0 && r.start(e, () => m(!0)), r.clear), [r, e]);
+  const l = t.useMemo(() => ({
+    imageLoadingStatus: a
+  }), [a]);
+  return d("span", s, {
+    state: l,
+    ref: o,
+    props: n,
+    stateAttributesMapping: f,
+    enabled: a !== "loaded" && i
+  });
+});
+process.env.NODE_ENV !== "production" && (p.displayName = "AvatarFallback");
+export {
+  p as AvatarFallback
+};

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

@@ -0,0 +1,24 @@
+const e = "_button_1enjc_2", _ = "_block_1enjc_34", n = "_disabled_1enjc_372", s = {
+  button: e,
+  block: _,
+  "size-sm": "_size-sm_1enjc_40",
+  "size-md": "_size-md_1enjc_46",
+  "size-lg": "_size-lg_1enjc_51",
+  "size-full": "_size-full_1enjc_57",
+  "variant-primary": "_variant-primary_1enjc_68",
+  "style-full": "_style-full_1enjc_68",
+  "style-outline": "_style-outline_1enjc_87",
+  "style-ghost": "_style-ghost_1enjc_100",
+  "style-empty": "_style-empty_1enjc_112",
+  "variant-secondary": "_variant-secondary_1enjc_129",
+  "variant-success": "_variant-success_1enjc_189",
+  "variant-danger": "_variant-danger_1enjc_250",
+  "variant-warning": "_variant-warning_1enjc_311",
+  disabled: n
+};
+export {
+  _ as block,
+  e as button,
+  s as default,
+  n as disabled
+};

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

@@ -0,0 +1,73 @@
+import { jsx as n } from "react/jsx-runtime";
+import h from "react";
+import { clsx as f } from "./als-react-ts-ui56.js";
+import o from "./als-react-ts-ui126.js";
+import { CheckboxRoot as m } from "./als-react-ts-ui127.js";
+import { CheckboxIndicator as l } from "./als-react-ts-ui128.js";
+const k = h.forwardRef(
+  ({ size: t = "md", variant: r = "default", className: i, children: d, ...c }, a) => /* @__PURE__ */ n(
+    m,
+    {
+      ref: a,
+      className: (e) => f(
+        o.root,
+        o[`size-${t}`],
+        o[`variant-${r}`],
+        {
+          [o.checked]: e.checked,
+          [o.disabled]: e.disabled,
+          [o.indeterminate]: e.indeterminate,
+          [o.readonly]: e.readOnly,
+          [o.required]: e.required
+        },
+        typeof i == "function" ? i(e) : i
+      ),
+      ...c,
+      children: d
+    }
+  )
+);
+k.displayName = "ALSCheckboxRoot";
+const p = h.forwardRef(({ keepMounted: t = !1, className: r, children: i, render: d, ...c }, a) => /* @__PURE__ */ n(
+  l,
+  {
+    ref: a,
+    keepMounted: t,
+    className: (e) => f(
+      o.indicator,
+      {
+        [o.indicatorChecked]: e.checked,
+        [o.indicatorIndeterminate]: e.indeterminate
+      },
+      typeof r == "function" ? r(e) : r
+    ),
+    render: d || void 0,
+    ...c,
+    children: i || /* @__PURE__ */ n(
+      "svg",
+      {
+        width: "12",
+        height: "12",
+        viewBox: "0 0 12 12",
+        fill: "none",
+        xmlns: "http://www.w3.org/2000/svg",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ n(
+          "path",
+          {
+            d: "M10 3L4.5 8.5L2 6",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            strokeLinecap: "round",
+            strokeLinejoin: "round"
+          }
+        )
+      }
+    )
+  }
+));
+p.displayName = "ALSCheckboxIndicator";
+export {
+  p as ALSCheckboxIndicator,
+  k as ALSCheckboxRoot
+};

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

@@ -0,0 +1,34 @@
+import { jsx as c } from "react/jsx-runtime";
+import d from "react";
+import { clsx as a } from "./als-react-ts-ui56.js";
+import o from "./als-react-ts-ui155.js";
+import { CheckboxGroup as n } from "./als-react-ts-ui156.js";
+const l = d.forwardRef(
+  ({
+    orientation: e = "vertical",
+    spacing: i = "md",
+    className: r,
+    children: p,
+    ...m
+  }, f) => /* @__PURE__ */ c(
+    n,
+    {
+      ref: f,
+      className: (t) => a(
+        o.root,
+        o[`orientation-${e}`],
+        o[`spacing-${i}`],
+        {
+          [o.disabled]: t.disabled
+        },
+        typeof r == "function" ? r(t) : r
+      ),
+      ...m,
+      children: p
+    }
+  )
+);
+l.displayName = "ALSCheckboxGroupRoot";
+export {
+  l as ALSCheckboxGroupRoot
+};