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

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

@@ -0,0 +1,307 @@
+import { jsx as e, jsxs as g } from "react/jsx-runtime";
+import * as s from "react";
+import { clsx as u } from "./als-react-ts-ui56.js";
+import r from "./als-react-ts-ui207.js";
+import { NavigationMenuRoot as f } from "./als-react-ts-ui208.js";
+import { NavigationMenuList as L } from "./als-react-ts-ui209.js";
+import { NavigationMenuItem as M } from "./als-react-ts-ui210.js";
+import { NavigationMenuTrigger as A } from "./als-react-ts-ui211.js";
+import { NavigationMenuIcon as S } from "./als-react-ts-ui212.js";
+import { NavigationMenuContent as w } from "./als-react-ts-ui213.js";
+import { NavigationMenuLink as C } from "./als-react-ts-ui214.js";
+import { NavigationMenuPositioner as h } from "./als-react-ts-ui215.js";
+import { NavigationMenuPopup as k } from "./als-react-ts-ui216.js";
+import { NavigationMenuViewport as R } from "./als-react-ts-ui217.js";
+import { NavigationMenuArrow as y } from "./als-react-ts-ui218.js";
+import { NavigationMenuBackdrop as x } from "./als-react-ts-ui219.js";
+import { NavigationMenuPortal as P } from "./als-react-ts-ui220.js";
+const d = s.createContext({
+  size: "md",
+  variant: "default",
+  orientation: "horizontal"
+}), c = () => s.useContext(d), I = s.forwardRef(
+  ({
+    orientation: a = "horizontal",
+    size: o = "md",
+    variant: n = "default",
+    className: i,
+    style: t,
+    children: N,
+    ...m
+  }, l) => {
+    const v = s.useMemo(
+      () => ({ size: o, variant: n, orientation: a }),
+      [o, n, a]
+    );
+    return /* @__PURE__ */ e(d.Provider, { value: v, children: /* @__PURE__ */ e(
+      f,
+      {
+        ref: l,
+        orientation: a,
+        className: u(
+          r.root,
+          r[`root--${o}`],
+          r[`root--${n}`],
+          i
+        ),
+        style: t,
+        ...m,
+        children: N
+      }
+    ) });
+  }
+);
+I.displayName = "ALSNavigationMenu.Root";
+const V = s.forwardRef(({ className: a, style: o, children: n, ...i }, t) => /* @__PURE__ */ e(
+  L,
+  {
+    ref: t,
+    className: u(r.list, a),
+    style: o,
+    ...i,
+    children: n
+  }
+));
+V.displayName = "ALSNavigationMenu.List";
+const H = s.forwardRef(({ className: a, style: o, children: n, ...i }, t) => /* @__PURE__ */ e(
+  M,
+  {
+    ref: t,
+    className: u(r.item, a),
+    style: o,
+    ...i,
+    children: n
+  }
+));
+H.displayName = "ALSNavigationMenu.Item";
+const $ = s.forwardRef(({ className: a, style: o, children: n, ...i }, t) => {
+  const { size: N, variant: m } = c();
+  return /* @__PURE__ */ e(
+    A,
+    {
+      ref: t,
+      className: u(
+        r.trigger,
+        r[`trigger--${N}`],
+        r[`trigger--${m}`],
+        a
+      ),
+      style: o,
+      ...i,
+      children: n
+    }
+  );
+});
+$.displayName = "ALSNavigationMenu.Trigger";
+const B = s.forwardRef(({ className: a, style: o, children: n, ...i }, t) => /* @__PURE__ */ e(
+  S,
+  {
+    ref: t,
+    className: u(r.icon, a),
+    style: o,
+    ...i,
+    children: n ?? /* @__PURE__ */ e(O, {})
+  }
+));
+B.displayName = "ALSNavigationMenu.Icon";
+const T = s.forwardRef(({ className: a, style: o, children: n, ...i }, t) => /* @__PURE__ */ e(
+  w,
+  {
+    ref: t,
+    className: u(r.content, a),
+    style: o,
+    ...i,
+    children: n
+  }
+));
+T.displayName = "ALSNavigationMenu.Content";
+const p = s.forwardRef(
+  ({
+    active: a = !1,
+    closeOnClick: o = !1,
+    className: n,
+    style: i,
+    children: t,
+    ...N
+  }, m) => {
+    const { size: l } = c();
+    return /* @__PURE__ */ e(
+      C,
+      {
+        ref: m,
+        active: a,
+        closeOnClick: o,
+        className: u(
+          r.link,
+          r[`link--${l}`],
+          n
+        ),
+        style: i,
+        render: /* @__PURE__ */ e("a", {}),
+        ...N,
+        children: t
+      }
+    );
+  }
+);
+p.displayName = "ALSNavigationMenu.Link";
+const z = ({ className: a, style: o, children: n, ...i }) => /* @__PURE__ */ e(P, { className: a, style: o, ...i, children: n });
+z.displayName = "ALSNavigationMenu.Portal";
+const Z = s.forwardRef(
+  ({
+    sideOffset: a = 10,
+    collisionPadding: o = { top: 5, bottom: 5, left: 20, right: 20 },
+    className: n,
+    style: i,
+    children: t,
+    ...N
+  }, m) => /* @__PURE__ */ e(
+    h,
+    {
+      ref: m,
+      sideOffset: a,
+      collisionPadding: o,
+      className: u(r.positioner, n),
+      style: i,
+      ...N,
+      children: t
+    }
+  )
+);
+Z.displayName = "ALSNavigationMenu.Positioner";
+const b = s.forwardRef(({ className: a, style: o, children: n, ...i }, t) => {
+  const { variant: N } = c();
+  return /* @__PURE__ */ e(
+    k,
+    {
+      ref: t,
+      className: u(
+        r.popup,
+        r[`popup--${N}`],
+        a
+      ),
+      style: o,
+      ...i,
+      children: n
+    }
+  );
+});
+b.displayName = "ALSNavigationMenu.Popup";
+const j = s.forwardRef(({ className: a, style: o, ...n }, i) => /* @__PURE__ */ e(
+  R,
+  {
+    ref: i,
+    className: u(r.viewport, a),
+    style: o,
+    ...n
+  }
+));
+j.displayName = "ALSNavigationMenu.Viewport";
+const D = s.forwardRef(({ className: a, style: o, children: n, ...i }, t) => /* @__PURE__ */ e(
+  y,
+  {
+    ref: t,
+    className: u(r.arrow, a),
+    style: o,
+    ...i,
+    children: n ?? /* @__PURE__ */ e(W, {})
+  }
+));
+D.displayName = "ALSNavigationMenu.Arrow";
+const F = s.forwardRef(({ className: a, style: o, ...n }, i) => /* @__PURE__ */ e(
+  x,
+  {
+    ref: i,
+    className: u(r.backdrop, a),
+    style: o,
+    ...n
+  }
+));
+F.displayName = "ALSNavigationMenu.Backdrop";
+function O(a) {
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      width: "10",
+      height: "10",
+      viewBox: "0 0 10 10",
+      fill: "none",
+      "aria-hidden": "true",
+      ...a,
+      children: /* @__PURE__ */ e(
+        "path",
+        {
+          d: "M1 3.5L5 7.5L9 3.5",
+          stroke: "currentColor",
+          strokeWidth: "1.5"
+        }
+      )
+    }
+  );
+}
+function W(a) {
+  return /* @__PURE__ */ g(
+    "svg",
+    {
+      width: "20",
+      height: "10",
+      viewBox: "0 0 20 10",
+      fill: "none",
+      "aria-hidden": "true",
+      ...a,
+      children: [
+        /* @__PURE__ */ e(
+          "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: r.arrowFill
+          }
+        ),
+        /* @__PURE__ */ e(
+          "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: r.arrowOuterStroke
+          }
+        ),
+        /* @__PURE__ */ e(
+          "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: r.arrowInnerStroke
+          }
+        )
+      ]
+    }
+  );
+}
+const q = s.forwardRef(({ title: a, description: o, className: n, children: i, ...t }, N) => /* @__PURE__ */ g(
+  p,
+  {
+    ref: N,
+    className: u(r.linkCard, n),
+    ...t,
+    children: [
+      /* @__PURE__ */ e("span", { className: r.linkCardTitle, children: a }),
+      o && /* @__PURE__ */ e("span", { className: r.linkCardDescription, children: o }),
+      i
+    ]
+  }
+));
+q.displayName = "ALSNavigationMenu.LinkCard";
+export {
+  D as ALSNavigationMenuArrow,
+  F as ALSNavigationMenuBackdrop,
+  T as ALSNavigationMenuContent,
+  B as ALSNavigationMenuIcon,
+  H as ALSNavigationMenuItem,
+  p as ALSNavigationMenuLink,
+  q as ALSNavigationMenuLinkCard,
+  V as ALSNavigationMenuList,
+  b as ALSNavigationMenuPopup,
+  z as ALSNavigationMenuPortal,
+  Z as ALSNavigationMenuPositioner,
+  I as ALSNavigationMenuRoot,
+  $ as ALSNavigationMenuTrigger,
+  j as ALSNavigationMenuViewport
+};

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

@@ -0,0 +1,200 @@
+import { jsx as t } from "react/jsx-runtime";
+import d, { forwardRef as l } from "react";
+import { clsx as m } from "./als-react-ts-ui56.js";
+import e from "./als-react-ts-ui221.js";
+import { NumberFieldRoot as N } from "./als-react-ts-ui222.js";
+import { NumberFieldGroup as p } from "./als-react-ts-ui223.js";
+import { NumberFieldInput as L } from "./als-react-ts-ui224.js";
+import { NumberFieldIncrement as A } from "./als-react-ts-ui225.js";
+import { NumberFieldDecrement as F } from "./als-react-ts-ui226.js";
+import { NumberFieldScrubArea as S } from "./als-react-ts-ui227.js";
+import { NumberFieldScrubAreaCursor as h } from "./als-react-ts-ui228.js";
+const b = d.createContext({
+  size: "md",
+  variant: "outlined"
+}), c = () => d.useContext(b), f = l(
+  ({ size: r = "md", variant: o = "outlined", className: n, children: i, ...a }, u) => {
+    const s = d.useMemo(
+      () => ({ size: r, variant: o }),
+      [r, o]
+    );
+    return /* @__PURE__ */ t(b.Provider, { value: s, children: /* @__PURE__ */ t(
+      N,
+      {
+        ref: u,
+        className: m(
+          e.root,
+          e[`root--${r}`],
+          e[`root--${o}`],
+          n
+        ),
+        ...a,
+        children: i
+      }
+    ) });
+  }
+);
+f.displayName = "ALSNumberField.Root";
+const v = l(({ className: r, children: o, ...n }, i) => {
+  const { size: a, variant: u } = c();
+  return /* @__PURE__ */ t(
+    p,
+    {
+      ref: i,
+      className: m(
+        e.group,
+        e[`group--${a}`],
+        e[`group--${u}`],
+        r
+      ),
+      ...n,
+      children: o
+    }
+  );
+});
+v.displayName = "ALSNumberField.Group";
+const C = l(({ className: r, ...o }, n) => {
+  const { size: i, variant: a } = c();
+  return /* @__PURE__ */ t(
+    L,
+    {
+      ref: n,
+      className: m(
+        e.input,
+        e[`input--${i}`],
+        e[`input--${a}`],
+        r
+      ),
+      ...o
+    }
+  );
+});
+C.displayName = "ALSNumberField.Input";
+const x = l(
+  ({
+    className: r,
+    children: o,
+    "aria-label": n = "Increment",
+    ...i
+  }, a) => {
+    const { size: u, variant: s } = c();
+    return /* @__PURE__ */ t(
+      A,
+      {
+        ref: a,
+        className: m(
+          e.button,
+          e.increment,
+          e[`button--${u}`],
+          e[`button--${s}`],
+          r
+        ),
+        "aria-label": n,
+        ...i,
+        children: o ?? /* @__PURE__ */ t(
+          "svg",
+          {
+            className: e.icon,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ t("path", { d: "M12 5v14M5 12h14" })
+          }
+        )
+      }
+    );
+  }
+);
+x.displayName = "ALSNumberField.Increment";
+const $ = l(
+  ({
+    className: r,
+    children: o,
+    "aria-label": n = "Decrement",
+    ...i
+  }, a) => {
+    const { size: u, variant: s } = c();
+    return /* @__PURE__ */ t(
+      F,
+      {
+        ref: a,
+        className: m(
+          e.button,
+          e.decrement,
+          e[`button--${u}`],
+          e[`button--${s}`],
+          r
+        ),
+        "aria-label": n,
+        ...i,
+        children: o ?? /* @__PURE__ */ t(
+          "svg",
+          {
+            className: e.icon,
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ t("path", { d: "M5 12h14" })
+          }
+        )
+      }
+    );
+  }
+);
+$.displayName = "ALSNumberField.Decrement";
+const k = l(
+  ({
+    className: r,
+    children: o,
+    direction: n = "horizontal",
+    pixelSensitivity: i = 2,
+    ...a
+  }, u) => /* @__PURE__ */ t(
+    S,
+    {
+      ref: u,
+      className: m(e.scrubArea, r),
+      direction: n,
+      pixelSensitivity: i,
+      ...a,
+      children: o
+    }
+  )
+);
+k.displayName = "ALSNumberField.ScrubArea";
+const y = l(({ className: r, children: o, ...n }, i) => /* @__PURE__ */ t(
+  h,
+  {
+    ref: i,
+    className: m(e.scrubAreaCursor, r),
+    ...n,
+    children: o ?? /* @__PURE__ */ t(
+      "svg",
+      {
+        className: e.scrubCursorIcon,
+        viewBox: "0 0 24 24",
+        fill: "currentColor",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ t("path", { d: "M9.293 12L5.146 7.854a.5.5 0 01.708-.708L10 11.293V5.5a.5.5 0 011 0v5.793l4.146-4.147a.5.5 0 01.708.708L11.707 12l4.147 4.146a.5.5 0 01-.708.708L11 12.707V18.5a.5.5 0 01-1 0v-5.793l-4.146 4.147a.5.5 0 01-.708-.708L9.293 12z" })
+      }
+    )
+  }
+));
+y.displayName = "ALSNumberField.ScrubAreaCursor";
+export {
+  $ as ALSNumberFieldDecrement,
+  v as ALSNumberFieldGroup,
+  x as ALSNumberFieldIncrement,
+  C as ALSNumberFieldInput,
+  f as ALSNumberFieldRoot,
+  k as ALSNumberFieldScrubArea,
+  y as ALSNumberFieldScrubAreaCursor
+};

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

@@ -0,0 +1,17 @@
+const o = "_popup_1w2m7_1", t = "_arrow_1w2m7_25", _ = "_title_1w2m7_35", c = "_description_1w2m7_42", p = "_close_1w2m7_49", s = "_backdrop_1w2m7_76", r = {
+  popup: o,
+  arrow: t,
+  title: _,
+  description: c,
+  close: p,
+  backdrop: s
+};
+export {
+  t as arrow,
+  s as backdrop,
+  p as close,
+  r as default,
+  c as description,
+  o as popup,
+  _ as title
+};

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

@@ -0,0 +1,8 @@
+import { ALSCheckboxIndicator as o, ALSCheckboxRoot as t } from "./als-react-ts-ui62.js";
+const r = {
+  Root: t,
+  Indicator: o
+};
+export {
+  r as ALSCheckbox
+};

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

@@ -0,0 +1,120 @@
+import J from "./als-react-ts-ui259.js";
+import * as o from "react";
+import * as h from "react-dom";
+import { useStableCallback as v } from "./als-react-ts-ui192.js";
+import { usePopoverRootContext as Q } from "./als-react-ts-ui354.js";
+import { useButton as W } from "./als-react-ts-ui247.js";
+import { pressableTriggerOpenStateMapping as X, triggerOpenStateMapping as Z } from "./als-react-ts-ui244.js";
+import { useRenderElement as $ } from "./als-react-ts-ui189.js";
+import { CLICK_TRIGGER_IDENTIFIER as ee } from "./als-react-ts-ui260.js";
+import { OPEN_DELAY as te } from "./als-react-ts-ui357.js";
+import { useBaseUiId as re } from "./als-react-ts-ui249.js";
+import { FocusGuard as E } from "./als-react-ts-ui358.js";
+import { createChangeEventDetails as R } from "./als-react-ts-ui246.js";
+import { jsxs as oe, jsx as c } from "react/jsx-runtime";
+import { useHoverReferenceInteraction as se } from "./als-react-ts-ui359.js";
+import { safePolygon as ne } from "./als-react-ts-ui360.js";
+import { useClick as ie } from "./als-react-ts-ui262.js";
+import { useInteractions as ae } from "./als-react-ts-ui263.js";
+import { useTriggerDataForwarding as ce } from "./als-react-ts-ui261.js";
+import { triggerPress as P, focusOut as O } from "./als-react-ts-ui248.js";
+import { getTabbableBeforeElement as pe, isOutsideEvent as ue, getTabbableAfterElement as le, getNextTabbable as ge } from "./als-react-ts-ui361.js";
+import { contains as me } from "./als-react-ts-ui331.js";
+const fe = /* @__PURE__ */ o.forwardRef(function(l, F) {
+  const {
+    render: be,
+    className: Te,
+    disabled: n = !1,
+    nativeButton: S = !0,
+    handle: y,
+    payload: C,
+    openOnHover: g = !1,
+    delay: I = te,
+    closeDelay: m = 0,
+    id: x,
+    ...M
+  } = l, B = Q(!0), e = y?.store ?? B?.store;
+  if (!e)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <Popover.Trigger> must be either used within a <Popover.Root> component or provided with a handle." : J(74));
+  const s = re(x), f = e.useState("isTriggerActive", s), i = e.useState("floatingRootContext"), d = e.useState("isOpenedByTrigger", s), [p, N] = o.useState(null), {
+    registerTrigger: D,
+    isMountedByThisTrigger: w
+  } = ce(s, p, e, {
+    payload: C,
+    disabled: n,
+    openOnHover: g,
+    closeDelay: m
+  }), u = e.useState("openChangeReason"), A = e.useState("stickIfOpen"), k = e.useState("openMethod"), G = se(i, {
+    enabled: i != null && g && (k !== "touch" || u !== P),
+    mouseOnly: !0,
+    move: !1,
+    handleClose: ne(),
+    restMs: I,
+    delay: {
+      close: m
+    },
+    triggerElement: p,
+    isActiveTrigger: f
+  }), _ = ie(i, {
+    enabled: i != null,
+    stickIfOpen: A
+  }), j = ae([_]), H = e.useState("triggerProps", w), L = o.useMemo(() => ({
+    disabled: n,
+    open: d
+  }), [n, d]), {
+    getButtonProps: U,
+    buttonRef: V
+  } = W({
+    disabled: n,
+    native: S
+  }), K = o.useMemo(() => ({
+    open(t) {
+      return t && u === P ? X.open(t) : Z.open(t);
+    }
+  }), [u]), b = $("button", l, {
+    state: L,
+    ref: [V, F, D, N],
+    props: [j.getReferenceProps(), G, H, {
+      [ee]: "",
+      id: s
+    }, M, U],
+    stateAttributesMapping: K
+  }), T = o.useRef(null), Y = v((t) => {
+    h.flushSync(() => {
+      e.setOpen(!1, R(O, t.nativeEvent, t.currentTarget));
+    }), pe(T.current)?.focus();
+  }), q = v((t) => {
+    const a = e.select("positionerElement");
+    if (a && ue(t, a))
+      e.context.beforeContentFocusGuardRef.current?.focus();
+    else {
+      h.flushSync(() => {
+        e.setOpen(!1, R(O, t.nativeEvent, t.currentTarget));
+      });
+      let r = le(p);
+      for (; r !== null && me(a, r) || r?.hasAttribute("aria-hidden"); ) {
+        const z = r;
+        if (r = ge(r), r === z)
+          break;
+      }
+      r?.focus();
+    }
+  });
+  return f ? /* @__PURE__ */ oe(o.Fragment, {
+    children: [/* @__PURE__ */ c(E, {
+      ref: T,
+      onFocus: Y
+    }), /* @__PURE__ */ c(o.Fragment, {
+      children: b
+    }, s), /* @__PURE__ */ c(E, {
+      ref: e.context.triggerFocusTargetRef,
+      onFocus: q
+    })]
+  }) : /* @__PURE__ */ c(o.Fragment, {
+    children: b
+  }, s);
+});
+process.env.NODE_ENV !== "production" && (fe.displayName = "PopoverTrigger");
+export {
+  fe as PopoverTrigger
+};