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

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

@@ -0,0 +1,56 @@
+import * as s from "react";
+import { useFocusableWhenDisabled as D } from "./als-react-ts-ui342.js";
+import { ARROW_LEFT as R, ARROW_RIGHT as T } from "./als-react-ts-ui254.js";
+import { useToolbarRootContext as N } from "./als-react-ts-ui368.js";
+import { useToolbarGroupContext as P } from "./als-react-ts-ui563.js";
+import { CompositeItem as x } from "./als-react-ts-ui488.js";
+import { jsx as C } from "react/jsx-runtime";
+import { stopEvent as I } from "./als-react-ts-ui295.js";
+const W = /* @__PURE__ */ s.forwardRef(function(a, n) {
+  const {
+    className: i,
+    focusableWhenDisabled: t = !0,
+    render: p,
+    disabled: l = !1,
+    ...m
+  } = a, f = s.useMemo(() => ({
+    focusableWhenDisabled: t
+  }), [t]), {
+    disabled: u,
+    orientation: r
+  } = N(), d = P(), e = u || (d?.disabled ?? !1) || l, {
+    props: c
+  } = D({
+    composite: !0,
+    disabled: e,
+    focusableWhenDisabled: t,
+    isNativeButton: !1
+  }), b = s.useMemo(() => ({
+    disabled: e,
+    orientation: r,
+    focusable: t
+  }), [e, t, r]);
+  return /* @__PURE__ */ C(x, {
+    tag: "input",
+    render: p,
+    className: i,
+    metadata: f,
+    state: b,
+    refs: [n],
+    props: [{
+      onClick(o) {
+        e && o.preventDefault();
+      },
+      onKeyDown(o) {
+        o.key !== R && o.key !== T && e && I(o);
+      },
+      onPointerDown(o) {
+        e && o.preventDefault();
+      }
+    }, m, c]
+  });
+});
+process.env.NODE_ENV !== "production" && (W.displayName = "ToolbarInput");
+export {
+  W as ToolbarInput
+};

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

@@ -0,0 +1,20 @@
+import * as n from "react";
+import { SafeReact as f } from "./als-react-ts-ui370.js";
+let o = 0;
+function l(u, t = "mui") {
+  const [e, s] = n.useState(u), c = u || e;
+  return n.useEffect(() => {
+    e == null && (o += 1, s(`${t}-${o}`));
+  }, [e, t]), c;
+}
+const a = f.useId;
+function I(u, t) {
+  if (a !== void 0) {
+    const e = a();
+    return u ?? (t ? `${t}-${e}` : e);
+  }
+  return l(u, t);
+}
+export {
+  I as useId
+};

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

@@ -0,0 +1,106 @@
+import { getWindow as u, isOverflowElement as Y } from "./als-react-ts-ui339.js";
+import { isIOS as W, isWebKit as E } from "./als-react-ts-ui371.js";
+import { ownerDocument as n } from "./als-react-ts-ui372.js";
+import { useIsoLayoutEffect as T } from "./als-react-ts-ui193.js";
+import { Timeout as k } from "./als-react-ts-ui195.js";
+import { AnimationFrame as z } from "./als-react-ts-ui346.js";
+import { NOOP as H } from "./als-react-ts-ui303.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]);
+}
+export {
+  _ as useScrollLock
+};

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

@@ -0,0 +1,24 @@
+import * as e from "react";
+import { useStableCallback as i } from "./als-react-ts-ui192.js";
+import { useEnhancedClickHandler as u } from "./als-react-ts-ui373.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]);
+}
+export {
+  f as useOpenInteractionType
+};

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

@@ -0,0 +1,35 @@
+import { useId as f } from "./als-react-ts-ui325.js";
+import { useRefWithInit as g } from "./als-react-ts-ui240.js";
+import { useIsoLayoutEffect as E } from "./als-react-ts-ui193.js";
+import { isElement as d } from "./als-react-ts-ui339.js";
+import { useFloatingParentNodeId as S } from "./als-react-ts-ui356.js";
+import { FloatingRootStore as x } from "./als-react-ts-ui386.js";
+function v(p) {
+  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;
+}
+export {
+  v as useSyncedFloatingRootContext
+};

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

@@ -0,0 +1,77 @@
+import * as r from "react";
+import { useId as P } from "./als-react-ts-ui325.js";
+import { useFloatingParentNodeId as S } from "./als-react-ts-ui356.js";
+import { EMPTY_OBJECT as F } from "./als-react-ts-ui303.js";
+import { getFloatingFocusElement as y } from "./als-react-ts-ui331.js";
+const T = /* @__PURE__ */ new Map([["select", "listbox"], ["combobox", "listbox"], ["label", !1]]);
+function k(c, I = {}) {
+  const a = "rootStore" in c ? c.rootStore : c, l = a.useState("open"), u = a.useState("floatingId"), x = a.useState("domReferenceElement"), d = a.useState("floatingElement"), {
+    enabled: m = !0,
+    role: o = "dialog"
+  } = I, M = P(), s = x?.id || M, t = r.useMemo(() => y(d)?.id || u, [d, u]), e = T.get(o) ?? o, p = S() != null, i = r.useMemo(() => e === "tooltip" || o === "label" ? F : {
+    "aria-haspopup": e === "alertdialog" ? "dialog" : e,
+    "aria-expanded": "false",
+    ...e === "listbox" && {
+      role: "combobox"
+    },
+    ...e === "menu" && p && {
+      role: "menuitem"
+    },
+    ...o === "select" && {
+      "aria-autocomplete": "none"
+    },
+    ...o === "combobox" && {
+      "aria-autocomplete": "list"
+    }
+  }, [e, p, o]), f = r.useMemo(() => e === "tooltip" || o === "label" ? {
+    [`aria-${o === "label" ? "labelledby" : "describedby"}`]: l ? t : void 0
+  } : {
+    ...i,
+    "aria-expanded": l ? "true" : "false",
+    "aria-controls": l ? t : void 0,
+    ...e === "menu" && {
+      id: s
+    }
+  }, [e, t, l, s, o, i]), b = r.useMemo(() => {
+    const n = {
+      id: t,
+      ...e && {
+        role: e
+      }
+    };
+    return e === "tooltip" || o === "label" ? n : {
+      ...n,
+      ...e === "menu" && {
+        "aria-labelledby": s
+      }
+    };
+  }, [e, t, s, o]), g = r.useCallback(({
+    active: n,
+    selected: R
+  }) => {
+    const E = {
+      role: "option",
+      ...n && {
+        id: `${t}-fui-option`
+      }
+    };
+    switch (o) {
+      case "select":
+      case "combobox":
+        return {
+          ...E,
+          "aria-selected": R
+        };
+    }
+    return {};
+  }, [t, o]);
+  return r.useMemo(() => m ? {
+    reference: f,
+    floating: b,
+    item: g,
+    trigger: i
+  } : {}, [m, f, b, i, g]);
+}
+export {
+  k as useRole
+};

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

@@ -0,0 +1,173 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { forwardRef as l } from "react";
+import n from "./als-react-ts-ui111.js";
+import { useToastManager as A } from "./als-react-ts-ui112.js";
+import { ToastViewport as w } from "./als-react-ts-ui113.js";
+import { ToastRoot as y } from "./als-react-ts-ui114.js";
+import { ToastContent as j } from "./als-react-ts-ui115.js";
+import { ToastTitle as P } from "./als-react-ts-ui116.js";
+import { ToastDescription as g } from "./als-react-ts-ui117.js";
+import { ToastAction as v } from "./als-react-ts-ui118.js";
+import { ToastClose as B } from "./als-react-ts-ui119.js";
+import { createToastManager as x } from "./als-react-ts-ui120.js";
+import { ToastPortal as M } from "./als-react-ts-ui121.js";
+import { ToastProvider as R } from "./als-react-ts-ui122.js";
+const L = ({
+  limit: o = 3,
+  timeout: t = 5e3,
+  toastManager: s,
+  children: r
+}) => /* @__PURE__ */ e(
+  R,
+  {
+    limit: o,
+    timeout: t,
+    toastManager: s,
+    children: r
+  }
+);
+L.displayName = "ALSToast.Provider";
+const S = ({
+  container: o,
+  children: t
+}) => /* @__PURE__ */ e(M, { container: o, children: t });
+S.displayName = "ALSToast.Portal";
+const C = l(
+  ({ className: o, style: t }, s) => {
+    const { toasts: r } = A(), a = [n.viewport, o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e(
+      w,
+      {
+        ref: s,
+        className: a,
+        style: t,
+        children: r.slice().map((i, c) => /* @__PURE__ */ e(
+          m,
+          {
+            toast: i,
+            style: {
+              "--toast-index": c
+            },
+            children: /* @__PURE__ */ h(p, { children: [
+              i.title && /* @__PURE__ */ e(T, { children: i.title }),
+              i.description && /* @__PURE__ */ e(d, { children: i.description }),
+              i.actionProps && /* @__PURE__ */ e(f, { ...i.actionProps }),
+              /* @__PURE__ */ e(N, {})
+            ] })
+          },
+          i.id
+        ))
+      }
+    );
+  }
+);
+C.displayName = "ALSToast.Viewport";
+const m = l(
+  ({
+    toast: o,
+    swipeDirection: t = ["down", "right"],
+    className: s,
+    style: r,
+    children: a
+  }, i) => {
+    const c = o.type || "default", u = [n.root, n[`root--${c}`], s].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e(
+      y,
+      {
+        ref: i,
+        toast: o,
+        swipeDirection: t,
+        className: u,
+        style: r,
+        children: a
+      }
+    );
+  }
+);
+m.displayName = "ALSToast.Root";
+const p = l(
+  ({ className: o, style: t, children: s }, r) => {
+    const a = [n.content, o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e(j, { ref: r, className: a, style: t, children: s });
+  }
+);
+p.displayName = "ALSToast.Content";
+const T = l(
+  ({ className: o, style: t, children: s }, r) => {
+    const a = [n.title, o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e(P, { ref: r, className: a, style: t, children: s });
+  }
+);
+T.displayName = "ALSToast.Title";
+const d = l(({ className: o, style: t, children: s }, r) => {
+  const a = [n.description, o].filter(Boolean).join(" ");
+  return /* @__PURE__ */ e(
+    g,
+    {
+      ref: r,
+      className: a,
+      style: t,
+      children: s
+    }
+  );
+});
+d.displayName = "ALSToast.Description";
+const f = l(
+  ({ className: o, style: t, children: s, onClick: r }, a) => {
+    const i = [n.action, o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e(
+      v,
+      {
+        ref: a,
+        className: i,
+        style: t,
+        onClick: r,
+        children: s
+      }
+    );
+  }
+);
+f.displayName = "ALSToast.Action";
+const N = l(
+  ({ className: o, style: t, children: s }, r) => {
+    const a = [n.close, o].filter(Boolean).join(" ");
+    return /* @__PURE__ */ e(B, { ref: r, className: a, style: t, children: s || /* @__PURE__ */ e(k, {}) });
+  }
+);
+N.displayName = "ALSToast.Close";
+const k = () => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: n.closeIcon,
+    children: /* @__PURE__ */ e(
+      "path",
+      {
+        d: "M12 4L4 12M4 4L12 12",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), O = {
+  Provider: L,
+  Portal: S,
+  Viewport: C,
+  Root: m,
+  Content: p,
+  Title: T,
+  Description: d,
+  Action: f,
+  Close: N,
+  useToastManager: A,
+  createToastManager: x
+};
+export {
+  O as ALSToast
+};