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

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

@@ -0,0 +1,194 @@
+import { jsx as i, jsxs as c } from "react/jsx-runtime";
+import * as d from "react";
+import { clsx as n } from "./als-react-ts-ui56.js";
+import o from "./als-react-ts-ui272.js";
+import { PreviewCardTrigger as P } from "./als-react-ts-ui273.js";
+import { PreviewCardPositioner as v } from "./als-react-ts-ui274.js";
+import { PreviewCardPopup as L } from "./als-react-ts-ui275.js";
+import { PreviewCardArrow as f } from "./als-react-ts-ui276.js";
+import { PreviewCardPortal as A } from "./als-react-ts-ui277.js";
+import { PreviewCardRoot as u } from "./als-react-ts-ui278.js";
+const l = d.createContext({
+  variant: "default",
+  size: "md"
+}), p = () => d.useContext(l), S = (r) => /* @__PURE__ */ c("svg", { width: "20", height: "10", viewBox: "0 0 20 10", fill: "none", ...r, children: [
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z",
+      className: o.arrowFill
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z",
+      className: o.arrowOuterStroke
+    }
+  ),
+  /* @__PURE__ */ i(
+    "path",
+    {
+      d: "M10.3333 3.34539L5.47654 7.71648C4.55842 8.54279 3.36693 9 2.13172 9H0V8H2.13172C3.11989 8 4.07308 7.63423 4.80758 6.97318L9.66437 2.60207C10.0447 2.25979 10.622 2.2598 11.0023 2.60207L15.8591 6.97318C16.5936 7.63423 17.5468 8 18.5349 8H20V9H18.5349C17.2998 9 16.1083 8.54278 15.1901 7.71648L10.3333 3.34539Z",
+      className: o.arrowInnerStroke
+    }
+  )
+] }), N = ({
+  defaultOpen: r = !1,
+  open: e,
+  onOpenChange: a,
+  children: t
+}) => /* @__PURE__ */ i(
+  u,
+  {
+    defaultOpen: r,
+    open: e,
+    onOpenChange: a,
+    children: t
+  }
+);
+N.displayName = "ALSPreviewCard.Root";
+const g = d.forwardRef(
+  ({ href: r, delay: e = 600, closeDelay: a = 300, className: t, style: s, children: m }, w) => /* @__PURE__ */ i(
+    P,
+    {
+      ref: w,
+      href: r,
+      delay: e,
+      closeDelay: a,
+      className: n(o.trigger, t),
+      style: s,
+      children: m
+    }
+  )
+);
+g.displayName = "ALSPreviewCard.Trigger";
+const R = ({
+  container: r,
+  keepMounted: e = !1,
+  children: a
+}) => /* @__PURE__ */ i(A, { container: r, keepMounted: e, children: a });
+R.displayName = "ALSPreviewCard.Portal";
+const y = d.forwardRef(
+  ({
+    side: r = "bottom",
+    sideOffset: e = 8,
+    align: a = "center",
+    alignOffset: t = 0,
+    className: s,
+    style: m,
+    children: w
+  }, C) => /* @__PURE__ */ i(
+    v,
+    {
+      ref: C,
+      side: r,
+      sideOffset: e,
+      align: a,
+      alignOffset: t,
+      className: n(o.positioner, s),
+      style: m,
+      children: w
+    }
+  )
+);
+y.displayName = "ALSPreviewCard.Positioner";
+const h = d.forwardRef(({ variant: r = "default", size: e = "md", className: a, style: t, children: s }, m) => {
+  const w = d.useMemo(
+    () => ({ variant: r, size: e }),
+    [r, e]
+  );
+  return /* @__PURE__ */ i(l.Provider, { value: w, children: /* @__PURE__ */ i(
+    L,
+    {
+      ref: m,
+      className: n(
+        o.popup,
+        o[`popup--${r}`],
+        o[`popup--${e}`],
+        a
+      ),
+      style: t,
+      children: s
+    }
+  ) });
+});
+h.displayName = "ALSPreviewCard.Popup";
+const x = d.forwardRef(({ className: r, style: e }, a) => /* @__PURE__ */ i(
+  f,
+  {
+    ref: a,
+    className: n(o.arrow, r),
+    style: e,
+    children: /* @__PURE__ */ i(S, {})
+  }
+));
+x.displayName = "ALSPreviewCard.Arrow";
+const H = d.forwardRef(({ src: r, alt: e, width: a, height: t, className: s, style: m }, w) => {
+  const { size: C } = p();
+  return /* @__PURE__ */ i(
+    "img",
+    {
+      ref: w,
+      src: r,
+      alt: e,
+      width: a,
+      height: t,
+      className: n(o.image, o[`image--${C}`], s),
+      style: m
+    }
+  );
+});
+H.displayName = "ALSPreviewCard.Image";
+const T = d.forwardRef(({ className: r, style: e, children: a }, t) => {
+  const { size: s } = p();
+  return /* @__PURE__ */ i(
+    "h4",
+    {
+      ref: t,
+      className: n(o.title, o[`title--${s}`], r),
+      style: e,
+      children: a
+    }
+  );
+});
+T.displayName = "ALSPreviewCard.Title";
+const V = d.forwardRef(({ className: r, style: e, children: a }, t) => {
+  const { size: s } = p();
+  return /* @__PURE__ */ i(
+    "p",
+    {
+      ref: t,
+      className: n(
+        o.description,
+        o[`description--${s}`],
+        r
+      ),
+      style: e,
+      children: a
+    }
+  );
+});
+V.displayName = "ALSPreviewCard.Description";
+const $ = d.forwardRef(({ className: r, style: e, children: a }, t) => /* @__PURE__ */ i(
+  "div",
+  {
+    ref: t,
+    className: n(o.content, r),
+    style: e,
+    children: a
+  }
+));
+$.displayName = "ALSPreviewCard.Content";
+export {
+  x as ALSPreviewCardArrow,
+  $ as ALSPreviewCardContent,
+  V as ALSPreviewCardDescription,
+  H as ALSPreviewCardImage,
+  h as ALSPreviewCardPopup,
+  R as ALSPreviewCardPortal,
+  y as ALSPreviewCardPositioner,
+  N as ALSPreviewCardRoot,
+  T as ALSPreviewCardTitle,
+  g as ALSPreviewCardTrigger
+};

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

@@ -0,0 +1,74 @@
+import { jsx as a } from "react/jsx-runtime";
+import { clsx as t } from "./als-react-ts-ui56.js";
+import { forwardRef as m } from "react";
+import e from "./als-react-ts-ui233.js";
+import { ProgressRoot as c } from "./als-react-ts-ui234.js";
+import { ProgressTrack as p } from "./als-react-ts-ui235.js";
+import { ProgressIndicator as g } from "./als-react-ts-ui236.js";
+import { ProgressLabel as n } from "./als-react-ts-ui237.js";
+import { ProgressValue as P } from "./als-react-ts-ui238.js";
+const L = m(
+  ({ className: r, variant: s = "primary", size: o = "md", ...i }, l) => /* @__PURE__ */ a(
+    c,
+    {
+      ref: l,
+      className: t(
+        e.root,
+        e[`variant-${s}`],
+        e[`size-${o}`],
+        r
+      ),
+      ...i
+    }
+  )
+);
+L.displayName = "ALSProgressRoot";
+const d = m(
+  ({ className: r, ...s }, o) => /* @__PURE__ */ a(
+    p,
+    {
+      ref: o,
+      className: t(e.track, r),
+      ...s
+    }
+  )
+);
+d.displayName = "ALSProgressTrack";
+const f = m(({ className: r, ...s }, o) => /* @__PURE__ */ a(
+  g,
+  {
+    ref: o,
+    className: t(e.indicator, r),
+    ...s
+  }
+));
+f.displayName = "ALSProgressIndicator";
+const A = m(
+  ({ className: r, ...s }, o) => /* @__PURE__ */ a(
+    n,
+    {
+      ref: o,
+      className: t(e.label, r),
+      ...s
+    }
+  )
+);
+A.displayName = "ALSProgressLabel";
+const N = m(
+  ({ className: r, ...s }, o) => /* @__PURE__ */ a(
+    P,
+    {
+      ref: o,
+      className: t(e.value, r),
+      ...s
+    }
+  )
+);
+N.displayName = "ALSProgressValue";
+export {
+  f as ALSProgressIndicator,
+  A as ALSProgressLabel,
+  L as ALSProgressRoot,
+  d as ALSProgressTrack,
+  N as ALSProgressValue
+};

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

@@ -0,0 +1,214 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import * as l from "react";
+import { clsx as d } from "./als-react-ts-ui56.js";
+import a from "./als-react-ts-ui229.js";
+import { RadioGroup as S } from "./als-react-ts-ui230.js";
+import { RadioIndicator as M } from "./als-react-ts-ui231.js";
+import { RadioRoot as j } from "./als-react-ts-ui232.js";
+const b = l.createContext({
+  size: "md",
+  variant: "primary"
+}), y = () => l.useContext(b), k = l.forwardRef(function({ size: m, variant: o, className: n, style: r }, i) {
+  const t = y(), f = m ?? t.size, u = o ?? t.variant;
+  return /* @__PURE__ */ e(
+    M,
+    {
+      ref: i,
+      keepMounted: !0,
+      className: d(
+        a.indicator,
+        a[`indicator--${f}`],
+        a[`indicator--${u}`],
+        n
+      ),
+      style: r
+    }
+  );
+}), w = l.forwardRef(function({
+  value: m,
+  label: o,
+  description: n,
+  disabled: r = !1,
+  size: i,
+  variant: t,
+  className: f,
+  style: u
+}, N) {
+  const R = y(), c = i ?? R.size, s = t ?? R.variant;
+  return /* @__PURE__ */ h(
+    "label",
+    {
+      ref: N,
+      className: d(
+        a.item,
+        a[`item--${c}`],
+        r && a["item--disabled"],
+        f
+      ),
+      style: u,
+      children: [
+        /* @__PURE__ */ e(
+          j,
+          {
+            value: m,
+            disabled: r,
+            className: d(
+              a.radio,
+              a[`radio--${c}`],
+              a[`radio--${s}`]
+            ),
+            children: /* @__PURE__ */ e(k, { size: c, variant: s })
+          }
+        ),
+        (o || n) && /* @__PURE__ */ h("span", { className: a.content, children: [
+          o && /* @__PURE__ */ e(
+            "span",
+            {
+              className: d(
+                a.label,
+                a[`label--${c}`]
+              ),
+              children: o
+            }
+          ),
+          n && /* @__PURE__ */ e(
+            "span",
+            {
+              className: d(
+                a.description,
+                a[`description--${c}`]
+              ),
+              children: n
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}), F = ({
+  options: v,
+  name: m,
+  defaultValue: o,
+  value: n,
+  onValueChange: r,
+  size: i = "md",
+  variant: t = "primary",
+  orientation: f = "vertical",
+  disabled: u = !1,
+  readOnly: N = !1,
+  required: R = !1,
+  label: c,
+  error: s,
+  helperText: $,
+  className: g,
+  style: G
+}) => {
+  const x = l.useId(), L = c ? `${x}-label` : void 0, I = s ? `${x}-error` : void 0, A = $ && !s ? `${x}-helper` : void 0, C = l.useMemo(
+    () => ({ size: i, variant: t }),
+    [i, t]
+  ), z = l.useCallback(
+    (p) => {
+      r && typeof p == "string" && r(p);
+    },
+    [r]
+  );
+  return /* @__PURE__ */ e(b.Provider, { value: C, children: /* @__PURE__ */ h(
+    "div",
+    {
+      className: d(
+        a.group,
+        s && a["group--error"],
+        g
+      ),
+      style: G,
+      children: [
+        c && /* @__PURE__ */ h(
+          "span",
+          {
+            id: L,
+            className: d(
+              a.groupLabel,
+              a[`groupLabel--${i}`]
+            ),
+            children: [
+              c,
+              R && /* @__PURE__ */ e("span", { className: a.required, children: "*" })
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          S,
+          {
+            name: m,
+            defaultValue: o,
+            value: n,
+            onValueChange: z,
+            disabled: u,
+            readOnly: N,
+            required: R,
+            "aria-labelledby": L,
+            "aria-describedby": I || A,
+            "aria-invalid": !!s,
+            className: d(
+              a.radioGroup,
+              a[`radioGroup--${f}`]
+            ),
+            children: v.map((p) => /* @__PURE__ */ e(
+              w,
+              {
+                value: p.value,
+                label: p.label,
+                description: p.description,
+                disabled: p.disabled || u,
+                size: i,
+                variant: t
+              },
+              p.value
+            ))
+          }
+        ),
+        s && /* @__PURE__ */ e(
+          "span",
+          {
+            id: I,
+            className: a.errorText,
+            role: "alert",
+            children: s
+          }
+        ),
+        $ && !s && /* @__PURE__ */ e("span", { id: A, className: a.helperText, children: $ })
+      ]
+    }
+  ) });
+}, H = l.forwardRef(function({
+  size: m = "md",
+  variant: o = "primary",
+  orientation: n = "vertical",
+  className: r,
+  children: i,
+  ...t
+}, f) {
+  const u = l.useMemo(
+    () => ({ size: m, variant: o }),
+    [m, o]
+  );
+  return /* @__PURE__ */ e(b.Provider, { value: u, children: /* @__PURE__ */ e(
+    S,
+    {
+      ref: f,
+      className: d(
+        a.radioGroup,
+        a[`radioGroup--${n}`],
+        r
+      ),
+      ...t,
+      children: i
+    }
+  ) });
+});
+export {
+  F as ALSRadioGroupRoot,
+  k as ALSRadioIndicator,
+  w as ALSRadioItem,
+  H as ALSRadioRoot
+};

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

@@ -0,0 +1,211 @@
+import { jsx as n, jsxs as N, Fragment as H } from "react/jsx-runtime";
+import { createContext as j, forwardRef as f, useState as V, useCallback as b, useLayoutEffect as z, useRef as k, useContext as P } from "react";
+import { clsx as u } from "./als-react-ts-ui56.js";
+import t from "./als-react-ts-ui265.js";
+import { ScrollAreaRoot as q } from "./als-react-ts-ui266.js";
+import { ScrollAreaViewport as D } from "./als-react-ts-ui267.js";
+import { ScrollAreaContent as F } from "./als-react-ts-ui268.js";
+import { ScrollAreaScrollbar as G } from "./als-react-ts-ui269.js";
+import { ScrollAreaThumb as I } from "./als-react-ts-ui270.js";
+import { ScrollAreaCorner as J } from "./als-react-ts-ui271.js";
+const $ = j(
+  null
+);
+function h() {
+  const s = P($);
+  if (!s)
+    throw new Error(
+      "ALSScrollArea components must be used within an ALSScrollArea.Root"
+    );
+  return s;
+}
+const ot = f(function({
+  children: e,
+  className: l,
+  style: c,
+  size: o = "md",
+  variant: r = "default",
+  showFade: a = !1,
+  fadeColor: i,
+  overflowEdgeThreshold: p = 0,
+  ...w
+}, m) {
+  const [S, E] = V(null), [y, C] = V({
+    isAtTop: !0,
+    isAtBottom: !1
+  }), T = b((A) => {
+    const { scrollTop: d, scrollHeight: R, clientHeight: x } = A, v = 5;
+    C({
+      isAtTop: d <= v,
+      isAtBottom: d + x >= R - v
+    });
+  }, []), L = b(() => {
+    S && T(S);
+  }, [S, T]), O = b((A) => {
+    if (E(A), A) {
+      const { scrollTop: d, scrollHeight: R, clientHeight: x } = A, v = 5;
+      C({
+        isAtTop: d <= v,
+        isAtBottom: d + x >= R - v
+      });
+    }
+  }, []);
+  z(() => {
+    if (!S) return;
+    S.addEventListener("scroll", L, { passive: !0 });
+    const A = new ResizeObserver(L);
+    return A.observe(S), () => {
+      S.removeEventListener("scroll", L), A.disconnect();
+    };
+  }, [S, L]);
+  const g = {
+    size: o,
+    variant: r,
+    showFade: a,
+    fadeColor: i,
+    setViewportRef: O,
+    scrollState: y
+  }, B = i ? { "--fade-color": i } : {};
+  return /* @__PURE__ */ n($.Provider, { value: g, children: /* @__PURE__ */ N(
+    q,
+    {
+      ref: m,
+      className: u(
+        t.root,
+        t[`root--${o}`],
+        t[`root--${r}`],
+        l
+      ),
+      style: { ...c, ...B },
+      overflowEdgeThreshold: p,
+      ...w,
+      children: [
+        e,
+        a && /* @__PURE__ */ N(H, { children: [
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: u(
+                t.fadeOverlay,
+                t["fadeOverlay--top"]
+              ),
+              style: { opacity: y.isAtTop ? 0 : 1 },
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ n(
+            "div",
+            {
+              className: u(
+                t.fadeOverlay,
+                t["fadeOverlay--bottom"]
+              ),
+              style: { opacity: y.isAtBottom ? 0 : 1 },
+              "aria-hidden": "true"
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}), et = f(function({ children: e, className: l, style: c, ...o }, r) {
+  const { variant: a, setViewportRef: i } = h(), p = k(null), w = b(
+    (m) => {
+      p.current = m, typeof r == "function" ? r(m) : r && (r.current = m), i(m);
+    },
+    [r, i]
+  );
+  return /* @__PURE__ */ n(
+    D,
+    {
+      ref: w,
+      className: u(
+        t.viewport,
+        t[`viewport--${a}`],
+        l
+      ),
+      style: c,
+      ...o,
+      children: e
+    }
+  );
+}), lt = f(function({ children: e, className: l, style: c, ...o }, r) {
+  const { size: a } = h();
+  return /* @__PURE__ */ n(
+    F,
+    {
+      ref: r,
+      className: u(
+        t.content,
+        t[`content--${a}`],
+        l
+      ),
+      style: c,
+      ...o,
+      children: e
+    }
+  );
+}), ct = f(function({
+  children: e,
+  className: l,
+  style: c,
+  orientation: o = "vertical",
+  keepMounted: r = !1,
+  ...a
+}, i) {
+  const { variant: p } = h();
+  return /* @__PURE__ */ n(
+    G,
+    {
+      ref: i,
+      className: u(
+        t.scrollbar,
+        t[`scrollbar--${p}`],
+        l
+      ),
+      style: c,
+      orientation: o,
+      keepMounted: r,
+      ...a,
+      children: e || /* @__PURE__ */ n(K, {})
+    }
+  );
+}), K = f(function({ className: e, style: l, ...c }, o) {
+  const { variant: r } = h();
+  return /* @__PURE__ */ n(
+    I,
+    {
+      ref: o,
+      className: u(
+        t.thumb,
+        t[`thumb--${r}`],
+        e
+      ),
+      style: l,
+      ...c
+    }
+  );
+}), nt = f(function({ className: e, style: l, ...c }, o) {
+  const { variant: r } = h();
+  return /* @__PURE__ */ n(
+    J,
+    {
+      ref: o,
+      className: u(
+        t.corner,
+        t[`corner--${r}`],
+        e
+      ),
+      style: l,
+      ...c
+    }
+  );
+});
+export {
+  lt as ALSScrollAreaContent,
+  nt as ALSScrollAreaCorner,
+  ot as ALSScrollAreaRoot,
+  ct as ALSScrollAreaScrollbar,
+  K as ALSScrollAreaThumb,
+  et as ALSScrollAreaViewport
+};

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

@@ -0,0 +1,21 @@
+const r = "_trigger_krl6a_1", t = "_icon_krl6a_40", o = "_popup_krl6a_48", _ = "_item_krl6a_69", a = "_itemIndicator_krl6a_99", e = "_group_krl6a_107", l = "_label_krl6a_111", p = "_separator_krl6a_118", c = {
+  trigger: r,
+  icon: t,
+  popup: o,
+  item: _,
+  itemIndicator: a,
+  group: e,
+  label: l,
+  separator: p
+};
+export {
+  c as default,
+  e as group,
+  t as icon,
+  _ as item,
+  a as itemIndicator,
+  l as label,
+  o as popup,
+  p as separator,
+  r as trigger
+};

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

@@ -0,0 +1,6 @@
+import o from "./als-react-ts-ui350.js";
+const e = [["path", { d: "m6 9 6 6 6-6", key: "qrunsl" }]], c = o("chevron-down", e);
+export {
+  e as __iconNode,
+  c as default
+};