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

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

@@ -0,0 +1,257 @@
+import { jsx as f, jsxs as D, Fragment as q } from "react/jsx-runtime";
+import v, { useState as u, useRef as E, useEffect as R, useCallback as S } from "react";
+import e from "./als-react-ts-ui129.js";
+const A = v.createContext({
+  asidePosition: "left",
+  asideHidden: !1,
+  asideCollapsed: !1,
+  asideFullHeight: !1,
+  headerBehavior: "sticky",
+  scrollY: 0,
+  mainRef: null,
+  registerAside: () => {
+  },
+  registerHeader: () => {
+  }
+}), te = () => v.useContext(A), G = (o, d = 10) => {
+  const [s, t] = u("up"), [r, i] = u(0), n = E(0);
+  return R(() => {
+    const a = o.current;
+    if (!a) return;
+    const c = () => {
+      const l = a.scrollTop;
+      i(l), !(Math.abs(l - n.current) < d) && (t(
+        l > n.current ? "down" : "up"
+      ), n.current = l);
+    };
+    return a.addEventListener("scroll", c, { passive: !0 }), () => a.removeEventListener("scroll", c);
+  }, [o, d]), { scrollDirection: s, scrollY: r };
+}, J = ({
+  children: o,
+  className: d = "",
+  behavior: s = "sticky",
+  scrollThreshold: t = 50,
+  elevated: r = !1,
+  transparent: i = !1,
+  height: n
+}) => {
+  const { scrollY: a, registerHeader: c, asideFullHeight: l } = v.useContext(A), [m, y] = u(!1), [p, x] = u(i);
+  R(() => {
+    c(s);
+  }, [s, c]), R(() => {
+    r && y(a > 0), i && x(a < t);
+  }, [a, s, t, r, i]);
+  const C = {
+    fixed: e.headerFixed,
+    sticky: e.headerSticky,
+    relative: e.headerRelative,
+    hideOnScroll: e.headerHideOnScroll
+  }[s], h = [
+    e.header,
+    C,
+    m && e.headerElevated,
+    p && e.headerTransparent,
+    l && e.headerWithFullHeightAside,
+    d
+  ].filter(Boolean).join(" "), F = n ? {
+    "--header-custom-height": typeof n == "number" ? `${n}px` : n
+  } : {};
+  return /* @__PURE__ */ f("header", { className: h, style: F, children: o });
+}, I = ({
+  children: o,
+  className: d = "",
+  collapsed: s = !1,
+  hidden: t = !1,
+  variant: r = "relative",
+  width: i,
+  collapsedWidth: n,
+  resizable: a = !1,
+  minWidth: c = 200,
+  maxWidth: l = 500,
+  onWidthChange: m,
+  overlay: y = !1,
+  onOverlayClose: p,
+  collapsedContent: x,
+  transitionDuration: C = 300,
+  fullHeight: h = !1
+}) => {
+  const { registerAside: F, asidePosition: L } = v.useContext(A), [g, H] = u(null), [M, j] = u(!1), [$, P] = u(!1), B = E(null);
+  R(() => {
+    F(s, t, h);
+  }, [s, t, h, F]);
+  const T = S(() => {
+    p && (P(!0), setTimeout(() => {
+      P(!1), p();
+    }, C));
+  }, [p, C]), z = S(
+    (N) => {
+      a && (N.preventDefault(), j(!0));
+    },
+    [a]
+  );
+  if (R(() => {
+    if (!M) return;
+    const N = (b) => {
+      if (!B.current) return;
+      const O = B.current.getBoundingClientRect();
+      let k;
+      L === "right" ? k = O.right - b.clientX : k = b.clientX - O.left;
+      const w = Math.min(
+        Math.max(k, c),
+        l
+      );
+      H(w), m?.(w);
+    }, Y = () => {
+      j(!1);
+    };
+    return document.addEventListener("mousemove", N), document.addEventListener("mouseup", Y), () => {
+      document.removeEventListener("mousemove", N), document.removeEventListener("mouseup", Y);
+    };
+  }, [M, c, l, m, L]), t) return null;
+  const X = r === "fixed" ? e.asideFixed : e.asideRelative, V = [
+    e.aside,
+    X,
+    s && e.asideCollapsed,
+    y && e.asideOverlay,
+    y && $ && e.asideOverlayClosing,
+    M && e.asideResizing,
+    h && e.asideFullHeight,
+    d
+  ].filter(Boolean).join(" "), _ = {
+    ...i && !s && !g && {
+      "--aside-width": typeof i == "number" ? `${i}px` : i
+    },
+    ...n && s && {
+      "--aside-collapsed-width": typeof n == "number" ? `${n}px` : n
+    },
+    ...g && !s && {
+      "--aside-width": `${g}px`
+    },
+    "--aside-transition-duration": `${C}ms`
+  }, U = [
+    e.asideContent,
+    s && e.asideContentCollapsed
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ D(q, { children: [
+    y && /* @__PURE__ */ f(
+      "div",
+      {
+        className: `${e.asideOverlayBackdrop} ${$ ? e.asideOverlayBackdropClosing : ""}`,
+        onClick: T,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ D("aside", { ref: B, className: V, style: _, children: [
+      /* @__PURE__ */ f("div", { className: U, children: s && x ? x : o }),
+      a && !s && /* @__PURE__ */ f(
+        "div",
+        {
+          className: e.asideResizeHandle,
+          onMouseDown: z,
+          role: "separator",
+          "aria-orientation": "vertical",
+          "aria-label": "Resize sidebar"
+        }
+      )
+    ] })
+  ] });
+}, K = ({
+  children: o,
+  className: d = "",
+  maxWidth: s,
+  centered: t = !1,
+  padding: r = "lg"
+}) => {
+  const { asideHidden: i, asideFullHeight: n, mainRef: a } = v.useContext(A), c = {
+    none: e.mainPaddingNone,
+    sm: e.mainPaddingSm,
+    md: e.mainPaddingMd,
+    lg: e.mainPaddingLg,
+    xl: e.mainPaddingXl
+  }[r], l = [
+    e.main,
+    i && e.mainFullWidth,
+    n && e.mainWithFullHeightAside,
+    c,
+    d
+  ].filter(Boolean).join(" "), m = {
+    ...s && {
+      maxWidth: typeof s == "number" ? `${s}px` : s
+    },
+    ...t && { margin: "0 auto" }
+  };
+  return /* @__PURE__ */ f(
+    "main",
+    {
+      ref: a,
+      className: l,
+      children: s || t ? /* @__PURE__ */ f("div", { style: m, children: o }) : o
+    }
+  );
+}, Q = ({
+  children: o,
+  className: d = "",
+  variant: s = "relative",
+  height: t
+}) => {
+  const { asideFullHeight: r } = v.useContext(A), i = {
+    fixed: e.footerFixed,
+    sticky: e.footerSticky,
+    relative: e.footerRelative
+  }[s], n = [
+    e.footer,
+    i,
+    r && e.footerWithFullHeightAside,
+    d
+  ].filter(Boolean).join(" "), a = t ? {
+    "--footer-custom-height": typeof t == "number" ? `${t}px` : t
+  } : {};
+  return /* @__PURE__ */ f("footer", { className: n, style: a, children: o });
+}, Z = ({
+  children: o,
+  className: d = "",
+  asidePosition: s = "left"
+}) => {
+  const [t, r] = u(!1), [i, n] = u(!1), [a, c] = u(!1), [l, m] = u("sticky"), y = E(null), { scrollY: p } = G(y), x = S(
+    (g, H, M) => {
+      n(g), r(H), c(M);
+    },
+    []
+  ), C = S((g) => {
+    m(g);
+  }, []);
+  R(() => {
+    v.Children.toArray(o).some(
+      (H) => v.isValidElement(H) && H.type === I && !H.props.hidden
+    ) || r(!0);
+  }, [o]);
+  const h = s === "right" ? e.layoutRight : e.layoutLeft, F = [
+    e.layout,
+    h,
+    i && e.layoutAsideCollapsed,
+    t && e.layoutAsideHidden,
+    a && e.layoutAsideFullHeight,
+    d
+  ].filter(Boolean).join(" "), L = {
+    asidePosition: s,
+    asideHidden: t,
+    asideCollapsed: i,
+    asideFullHeight: a,
+    headerBehavior: l,
+    scrollY: p,
+    mainRef: y,
+    registerAside: x,
+    registerHeader: C
+  };
+  return /* @__PURE__ */ f(A.Provider, { value: L, children: /* @__PURE__ */ f("div", { className: F, children: o }) });
+}, ne = Object.assign({
+  Root: Z,
+  Header: J,
+  Aside: I,
+  Main: K,
+  Footer: Q
+});
+export {
+  ne as MainLayout,
+  te as useLayout
+};

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

@@ -0,0 +1,48 @@
+const e = "_root_l6s1z_10", _ = "_item_l6s1z_53", r = "_header_l6s1z_100", t = "_trigger_l6s1z_109", l = "_triggerContent_l6s1z_195", o = "_triggerIcon_l6s1z_201", s = "_chevronSvg_l6s1z_214", a = "_panel_l6s1z_222", n = "_panelContent_l6s1z_255", g = {
+  root: e,
+  "root--default": "_root--default_l6s1z_17",
+  "root--bordered": "_root--bordered_l6s1z_21",
+  "root--separated": "_root--separated_l6s1z_28",
+  "root--minimal": "_root--minimal_l6s1z_32",
+  "root--sm": "_root--sm_l6s1z_37",
+  "root--md": "_root--md_l6s1z_41",
+  "root--lg": "_root--lg_l6s1z_45",
+  item: _,
+  "item--default": "_item--default_l6s1z_60",
+  "item--bordered": "_item--bordered_l6s1z_68",
+  "item--separated": "_item--separated_l6s1z_76",
+  "item--minimal": "_item--minimal_l6s1z_82",
+  header: r,
+  trigger: t,
+  "trigger--default": "_trigger--default_l6s1z_142",
+  "trigger--bordered": "_trigger--bordered_l6s1z_150",
+  "trigger--separated": "_trigger--separated_l6s1z_158",
+  "trigger--minimal": "_trigger--minimal_l6s1z_167",
+  "trigger--sm": "_trigger--sm_l6s1z_179",
+  "trigger--md": "_trigger--md_l6s1z_184",
+  "trigger--lg": "_trigger--lg_l6s1z_189",
+  triggerContent: l,
+  triggerIcon: o,
+  chevronSvg: s,
+  panel: a,
+  "panel--default": "_panel--default_l6s1z_238",
+  "panel--bordered": "_panel--bordered_l6s1z_242",
+  "panel--separated": "_panel--separated_l6s1z_246",
+  "panel--minimal": "_panel--minimal_l6s1z_250",
+  panelContent: n,
+  "panel--sm": "_panel--sm_l6s1z_262",
+  "panel--md": "_panel--md_l6s1z_267",
+  "panel--lg": "_panel--lg_l6s1z_272"
+};
+export {
+  s as chevronSvg,
+  g as default,
+  r as header,
+  _ as item,
+  a as panel,
+  n as panelContent,
+  e as root,
+  t as trigger,
+  l as triggerContent,
+  o as triggerIcon
+};

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

@@ -0,0 +1,158 @@
+import { jsx as r } from "react/jsx-runtime";
+import c, { createContext as A, forwardRef as i, useContext as g } from "react";
+import a from "./als-react-ts-ui45.js";
+import { AlertDialogRoot as d } from "./als-react-ts-ui46.js";
+import { DialogTrigger as D } from "./als-react-ts-ui47.js";
+import { DialogBackdrop as N } from "./als-react-ts-ui48.js";
+import { DialogViewport as f } from "./als-react-ts-ui49.js";
+import { DialogPopup as L } from "./als-react-ts-ui50.js";
+import { DialogTitle as u } from "./als-react-ts-ui51.js";
+import { DialogDescription as S } from "./als-react-ts-ui52.js";
+import { DialogClose as m } from "./als-react-ts-ui53.js";
+import { DialogPortal as C } from "./als-react-ts-ui54.js";
+const p = A({
+  variant: "default",
+  size: "md"
+}), B = () => g(p), y = i(
+  ({
+    open: e,
+    defaultOpen: o = !1,
+    onOpenChange: l,
+    variant: t = "default",
+    size: s = "md",
+    children: n
+  }) => /* @__PURE__ */ r(p.Provider, { value: { variant: t, size: s }, children: /* @__PURE__ */ r(
+    d,
+    {
+      open: e,
+      defaultOpen: o,
+      onOpenChange: l,
+      children: n
+    }
+  ) })
+);
+y.displayName = "ALSAlertDialog.Root";
+const j = i(({ className: e, children: o }, l) => {
+  const t = [a.trigger, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(
+    D,
+    {
+      ref: l,
+      className: t,
+      render: (s) => c.cloneElement(o, s)
+    }
+  );
+});
+j.displayName = "ALSAlertDialog.Trigger";
+const v = i(({ className: e }, o) => {
+  const l = [a.backdrop, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(N, { ref: o, className: l });
+});
+v.displayName = "ALSAlertDialog.Backdrop";
+const w = ({
+  container: e,
+  keepMounted: o = !1,
+  children: l
+}) => /* @__PURE__ */ r(C, { container: e, keepMounted: o, children: l });
+w.displayName = "ALSAlertDialog.Portal";
+const k = i(({ className: e, children: o }, l) => {
+  const t = [a.viewport, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(f, { ref: l, className: t, children: o });
+});
+k.displayName = "ALSAlertDialog.Viewport";
+const x = i(({ className: e, children: o }, l) => {
+  const { variant: t, size: s } = B(), n = [
+    a.popup,
+    a[`popup--${t}`],
+    a[`popup--${s}`],
+    e
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(L, { ref: l, className: n, children: o });
+});
+x.displayName = "ALSAlertDialog.Popup";
+const h = i(({ className: e, children: o }, l) => {
+  const t = [a.title, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(u, { ref: l, className: t, children: o });
+});
+h.displayName = "ALSAlertDialog.Title";
+const P = i(({ className: e, children: o }, l) => {
+  const t = [a.description, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(S, { ref: l, className: t, children: o });
+});
+P.displayName = "ALSAlertDialog.Description";
+const T = i(({ className: e, children: o }, l) => {
+  const t = [a.close, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(m, { ref: l, className: t, children: o || /* @__PURE__ */ r(R, {}) });
+});
+T.displayName = "ALSAlertDialog.Close";
+const R = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    className: a.closeIcon,
+    children: /* @__PURE__ */ r(
+      "path",
+      {
+        d: "M15 5L5 15M5 5L15 15",
+        stroke: "currentColor",
+        strokeWidth: "1.5",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  }
+), E = i(({ className: e, children: o }, l) => {
+  const t = [a.footer, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r("div", { ref: l, className: t, children: o });
+});
+E.displayName = "ALSAlertDialog.Footer";
+const V = i(({ className: e, children: o, asChild: l }, t) => {
+  const s = [a.cancel, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(
+    m,
+    {
+      ref: t,
+      className: s,
+      render: l ? (n) => c.cloneElement(
+        o,
+        n
+      ) : void 0,
+      children: o
+    }
+  );
+});
+V.displayName = "ALSAlertDialog.Cancel";
+const b = i(({ className: e, children: o, asChild: l }, t) => {
+  const s = [a.action, e].filter(Boolean).join(" ");
+  return /* @__PURE__ */ r(
+    m,
+    {
+      ref: t,
+      className: s,
+      render: l ? (n) => c.cloneElement(
+        o,
+        n
+      ) : void 0,
+      children: o
+    }
+  );
+});
+b.displayName = "ALSAlertDialog.Action";
+export {
+  b as ALSAlertDialogAction,
+  v as ALSAlertDialogBackdrop,
+  V as ALSAlertDialogCancel,
+  T as ALSAlertDialogClose,
+  P as ALSAlertDialogDescription,
+  E as ALSAlertDialogFooter,
+  x as ALSAlertDialogPopup,
+  w as ALSAlertDialogPortal,
+  y as ALSAlertDialogRoot,
+  h as ALSAlertDialogTitle,
+  j as ALSAlertDialogTrigger,
+  k as ALSAlertDialogViewport
+};

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

@@ -0,0 +1,96 @@
+import * as n from "react";
+import { useControlled as D } from "./als-react-ts-ui159.js";
+import { useStableCallback as V } from "./als-react-ts-ui160.js";
+import { useIsoLayoutEffect as O } from "./als-react-ts-ui161.js";
+import { warn as U } from "./als-react-ts-ui162.js";
+import { CompositeList as w } from "./als-react-ts-ui163.js";
+import { useDirection as y } from "./als-react-ts-ui164.js";
+import { AccordionRootContext as I } from "./als-react-ts-ui165.js";
+import { useRenderElement as L } from "./als-react-ts-ui166.js";
+import { createChangeEventDetails as S } from "./als-react-ts-ui167.js";
+import { jsx as g } from "react/jsx-runtime";
+import { none as _ } from "./als-react-ts-ui168.js";
+const j = {
+  value: () => null
+}, q = /* @__PURE__ */ n.forwardRef(function(m, M) {
+  const {
+    render: z,
+    className: B,
+    disabled: r = !1,
+    hiddenUntilFound: i,
+    keepMounted: s,
+    loopFocus: h = !0,
+    onValueChange: A,
+    multiple: x = !1,
+    orientation: l = "vertical",
+    value: u,
+    defaultValue: v,
+    ...E
+  } = m, d = y();
+  process.env.NODE_ENV !== "production" && O(() => {
+    i && s === !1 && U("The `keepMounted={false}` prop on a Accordion.Root will be ignored when using `hiddenUntilFound` since it requires Panels to remain mounted when closed.");
+  }, [i, s]);
+  const P = n.useMemo(() => {
+    if (u === void 0)
+      return v ?? [];
+  }, [u, v]), c = V(A), C = n.useRef([]), [o, f] = D({
+    controlled: u,
+    default: P,
+    name: "Accordion",
+    state: "value"
+  }), R = V((a, k) => {
+    const t = S(_);
+    if (x)
+      if (k) {
+        const e = o.slice();
+        if (e.push(a), c(e, t), t.isCanceled)
+          return;
+        f(e);
+      } else {
+        const e = o.filter((F) => F !== a);
+        if (c(e, t), t.isCanceled)
+          return;
+        f(e);
+      }
+    else {
+      const e = o[0] === a ? [] : [a];
+      if (c(e, t), t.isCanceled)
+        return;
+      f(e);
+    }
+  }), p = n.useMemo(() => ({
+    value: o,
+    disabled: r,
+    orientation: l
+  }), [o, r, l]), b = n.useMemo(() => ({
+    accordionItemRefs: C,
+    direction: d,
+    disabled: r,
+    handleValueChange: R,
+    hiddenUntilFound: i ?? !1,
+    keepMounted: s ?? !1,
+    loopFocus: h,
+    orientation: l,
+    state: p,
+    value: o
+  }), [d, r, R, i, s, h, l, p, o]), N = L("div", m, {
+    state: p,
+    ref: M,
+    props: [{
+      dir: d,
+      role: "region"
+    }, E],
+    stateAttributesMapping: j
+  });
+  return /* @__PURE__ */ g(I.Provider, {
+    value: b,
+    children: /* @__PURE__ */ g(w, {
+      elementsRef: C,
+      children: N
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (q.displayName = "AccordionRoot");
+export {
+  q as AccordionRoot
+};

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

@@ -0,0 +1,78 @@
+import * as o from "react";
+import { useStableCallback as k } from "./als-react-ts-ui160.js";
+import { useMergedRefs as j } from "./als-react-ts-ui169.js";
+import { useBaseUiId as C } from "./als-react-ts-ui170.js";
+import { useCollapsibleRoot as w } from "./als-react-ts-ui171.js";
+import { CollapsibleRootContext as y } from "./als-react-ts-ui172.js";
+import { useCompositeListItem as B } from "./als-react-ts-ui173.js";
+import { useAccordionRootContext as D } from "./als-react-ts-ui165.js";
+import { AccordionItemContext as L } from "./als-react-ts-ui174.js";
+import { accordionStateAttributesMapping as T } from "./als-react-ts-ui175.js";
+import { useRenderElement as U } from "./als-react-ts-ui166.js";
+import { jsx as g } from "react/jsx-runtime";
+const _ = /* @__PURE__ */ o.forwardRef(function(c, I) {
+  const {
+    className: z,
+    disabled: h = !1,
+    onOpenChange: v,
+    render: F,
+    value: R,
+    ...x
+  } = c, {
+    ref: M,
+    index: d
+  } = B(), S = j(I, M), {
+    disabled: A,
+    handleValueChange: P,
+    state: m,
+    value: n
+  } = D(), N = C(), s = R ?? N, i = h || A, r = o.useMemo(() => {
+    if (!n)
+      return !1;
+    for (let t = 0; t < n.length; t += 1)
+      if (n[t] === s)
+        return !0;
+    return !1;
+  }, [n, s]), a = k((t, b) => {
+    v?.(t, b), !b.isCanceled && P(s, t);
+  }), e = w({
+    open: r,
+    onOpenChange: a,
+    disabled: i
+  }), p = o.useMemo(() => ({
+    open: e.open,
+    disabled: e.disabled,
+    hidden: !e.mounted,
+    transitionStatus: e.transitionStatus
+  }), [e.open, e.disabled, e.mounted, e.transitionStatus]), O = o.useMemo(() => ({
+    ...e,
+    onOpenChange: a,
+    state: p
+  }), [e, p, a]), l = o.useMemo(() => ({
+    ...m,
+    index: d,
+    disabled: i,
+    open: r
+  }), [i, d, r, m]), [u, f] = o.useState(C()), V = o.useMemo(() => ({
+    open: r,
+    state: l,
+    setTriggerId: f,
+    triggerId: u
+  }), [r, l, f, u]), E = U("div", c, {
+    state: l,
+    ref: S,
+    props: x,
+    stateAttributesMapping: T
+  });
+  return /* @__PURE__ */ g(y.Provider, {
+    value: O,
+    children: /* @__PURE__ */ g(L.Provider, {
+      value: V,
+      children: E
+    })
+  });
+});
+process.env.NODE_ENV !== "production" && (_.displayName = "AccordionItem");
+export {
+  _ as AccordionItem
+};

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

@@ -0,0 +1,23 @@
+import * as n from "react";
+import { useRenderElement as c } from "./als-react-ts-ui166.js";
+import { useAccordionItemContext as i } from "./als-react-ts-ui174.js";
+import { accordionStateAttributesMapping as s } from "./als-react-ts-ui175.js";
+const a = /* @__PURE__ */ n.forwardRef(function(e, t) {
+  const {
+    render: d,
+    className: p,
+    ...r
+  } = e, {
+    state: o
+  } = i();
+  return c("h3", e, {
+    state: o,
+    ref: t,
+    props: r,
+    stateAttributesMapping: s
+  });
+});
+process.env.NODE_ENV !== "production" && (a.displayName = "AccordionHeader");
+export {
+  a as AccordionHeader
+};