@alif-ui-test/core 1.11.0

package/dist/components/Pagination/Pagination.types.js

@@ -0,0 +1 @@
+

package/dist/components/Pagination/Pagination.utils.js

@@ -0,0 +1,37 @@
+import { getSize as i } from "../../utils/get-size.js";
+import { resolveTypography as t } from "../../utils/typography.js";
+const g = (n) => {
+  switch (n) {
+    case "m":
+      return t("body", "l");
+    case "s":
+      return t("body", "m");
+  }
+}, r = (n, o) => {
+  const a = g(n);
+  return {
+    "--pagination-border-radius": o ? `var(--pagination-border-radius-${n}-round)` : i(n, "pagination-border-radius"),
+    "--pagination-spacing-between": i(n, "pagination-spacing-between"),
+    "--pagination-spacing-between-grouping": `var(--pagination-spacing-between-${n}-grouping)`,
+    "--pagination-height": i(n, "pagination-height"),
+    "--pagination-width": i(n, "pagination-width"),
+    "--pagination-spacing-horizontal-button": `var(--pagination-spacing-horizontal-${n}-button)`,
+    "--pagination-label-spacing-container-horizontal": i(
+      n,
+      "pagination-label-spacing-container-horizontal"
+    ),
+    "--pagination-font-family": a.fontFamily,
+    "--pagination-font-weight": a.fontWeight,
+    "--pagination-font-size": a.fontSize,
+    "--pagination-line-height": a.lineHeight,
+    "--pagination-letter-spacing": a.letterSpacing,
+    "--pagination-icon-width": i(n, "pagination-icon-width"),
+    "--pagination-icon-height": i(n, "pagination-icon-height"),
+    "--pagination-border-width": i(n, "pagination-border-width"),
+    "--pagination-dots-spacing": i(n, "pagination-dots-spacing"),
+    "--pagination-spacing-between-number-input": `var(--pagination-spacing-between-${n}-number-input)`
+  };
+};
+export {
+  r as getPaginationStyles
+};

package/dist/components/Paper/Elevated/Elevated.js

@@ -0,0 +1,39 @@
+import { jsx as x } from "react/jsx-runtime";
+import { getElevatedStyles as g } from "./Elevated.utils.js";
+import E from "./Elevated.module.css.js";
+import e from "../Paper.module.css.js";
+import { getPaperStyles as N } from "../Paper.utils.js";
+import { classNames as j } from "../../../utils/class-names.js";
+const w = ({
+  className: m,
+  children: l,
+  p: t,
+  px: s,
+  py: r,
+  m: a,
+  mt: p,
+  mr: i,
+  mb: c,
+  ml: f,
+  rounded: o,
+  style: y,
+  shadowLevel: d = "xs",
+  ...v
+}) => {
+  const n = j(
+    E.elevated,
+    e.paper,
+    t && e.p,
+    s && e.px,
+    r && e.py,
+    o && e.rounded,
+    m
+  ), S = {
+    ...g(d),
+    ...N(t, s, r, a, p, i, c, f, o, y)
+  };
+  return /* @__PURE__ */ x("div", { style: S, className: n, ...v, children: l });
+};
+export {
+  w as Elevated
+};

package/dist/components/Paper/Elevated/Elevated.module.css.js

@@ -0,0 +1,7 @@
+const e = "_elevated_1d187_1", t = {
+  elevated: e
+};
+export {
+  t as default,
+  e as elevated
+};

package/dist/components/Paper/Elevated/Elevated.types.js

@@ -0,0 +1 @@
+

package/dist/components/Paper/Elevated/Elevated.utils.js

@@ -0,0 +1,8 @@
+const r = (a) => ({
+  "--elevated-box-shadow": `var(--shadow-${a}-x) var(--shadow-${a}-y) var(--shadow-${a}-blur) var(--shadow-${a}-spread) var(--shadow-${a}-color),
+var(--shadow-${a}2-x) var(--shadow-${a}2-y) var(--shadow-${a}2-blur) var(--shadow-${a}2-spread) var(--shadow-${a}2-color)`,
+  "--elevated-bg": `var(--elevated-${a})`
+});
+export {
+  r as getElevatedStyles
+};

package/dist/components/Paper/Paper.module.css.js

@@ -0,0 +1,15 @@
+const p = "_paper_15skr_1", _ = "_p_15skr_1", r = "_px_15skr_5", s = "_py_15skr_10", e = "_rounded_15skr_15", o = {
+  paper: p,
+  p: _,
+  px: r,
+  py: s,
+  rounded: e
+};
+export {
+  o as default,
+  _ as p,
+  p as paper,
+  r as px,
+  s as py,
+  e as rounded
+};

package/dist/components/Paper/Paper.type.js

@@ -0,0 +1 @@
+

package/dist/components/Paper/Paper.utils.js

@@ -0,0 +1,15 @@
+const r = (a = "px") => a?.includes("px") ? a : `${a}x`, c = (a, i, p, n, d, g, e, s, t, o) => ({
+  "--paper-padding": `var(--spacing-${r(a)})`,
+  "--paper-padding-x": `var(--spacing-${r(i)})`,
+  "--paper-padding-y": `var(--spacing-${r(p)})`,
+  "--paper-radius": `var(--border-radius-${t})`,
+  ...o,
+  margin: n,
+  marginTop: d,
+  marginRight: g,
+  marginBottom: e,
+  marginLeft: s
+});
+export {
+  c as getPaperStyles
+};

package/dist/components/Paper/Surface/Surface.js

@@ -0,0 +1,39 @@
+import { jsx as x } from "react/jsx-runtime";
+import { getSurfaceStyles as N } from "./Surface.utils.js";
+import d from "./Surface.module.css.js";
+import r from "../Paper.module.css.js";
+import { getPaperStyles as j } from "../Paper.utils.js";
+import { classNames as v } from "../../../utils/class-names.js";
+const z = ({
+  className: m,
+  children: a,
+  p: s,
+  px: e,
+  py: t,
+  m: p,
+  mt: c,
+  mr: f,
+  mb: l,
+  ml: i,
+  rounded: o,
+  style: y,
+  darkLevel: S = 1,
+  ...u
+}) => {
+  const n = v(
+    d.surface,
+    r.paper,
+    s && r.p,
+    e && r.px,
+    t && r.py,
+    o && r.rounded,
+    m
+  ), g = {
+    ...N(S),
+    ...j(s, e, t, p, c, f, l, i, o, y)
+  };
+  return /* @__PURE__ */ x("div", { style: g, className: n, ...u, children: a });
+};
+export {
+  z as Surface
+};

package/dist/components/Paper/Surface/Surface.module.css.js

@@ -0,0 +1,7 @@
+const s = "_surface_asc3y_1", a = {
+  surface: s
+};
+export {
+  a as default,
+  s as surface
+};

package/dist/components/Paper/Surface/Surface.types.js

@@ -0,0 +1 @@
+

package/dist/components/Paper/Surface/Surface.utils.js

@@ -0,0 +1,6 @@
+const r = (e) => ({
+  "--surface-bg": `var(--bg-surface${e})`
+});
+export {
+  r as getSurfaceStyles
+};

package/dist/components/Popover/Popover.context.js

@@ -0,0 +1,8 @@
+import { createSafeContext as o } from "../../utils/create-safe-context/create-safe-context.js";
+const [t, r] = o(
+  "Popover component was not found in the tree"
+);
+export {
+  t as PopoverContextProvider,
+  r as usePopoverContext
+};

package/dist/components/Popover/Popover.js

@@ -0,0 +1,73 @@
+import { jsx as b } from "react/jsx-runtime";
+import { useState as t } from "react";
+import { PopoverContextProvider as j } from "./Popover.context.js";
+import { useFloatingPosition as k } from "./useFloatingPosition/useFloatingPosition.js";
+import { PopoverTrigger as w } from "./PopoverTrigger/PopoverTrigger.js";
+import { PopoverDropdown as O } from "./PopoverDropdown/PopoverDropdown.js";
+import { getDefaultZIndex as Z } from "../../utils/get-default-z-index.js";
+import { useOutsideClick as q } from "../../hooks/use-click-outside.js";
+const a = ({
+  children: c,
+  offset: u = 8,
+  position: v = "bottom",
+  isOpen: o,
+  onChange: p,
+  onClose: g,
+  withArrow: s = !1,
+  width: l = "max-content",
+  zIndex: P = Z("popover"),
+  isFixed: f = !1,
+  transitionProps: S
+}) => {
+  const [m, n] = t(!1), [e, x] = t(
+    null
+  ), [r, R] = t(
+    null
+  ), { placement: D, arrowPlacement: T } = k(
+    r,
+    e,
+    v,
+    u,
+    s,
+    f
+  ), d = () => {
+    if (o !== void 0) {
+      p?.(!o);
+      return;
+    }
+    n((I) => !I);
+  }, i = () => {
+    !o && !m || (n(!1), p?.(!1), g?.());
+  };
+  return q(
+    [{ current: e }, { current: r }],
+    i
+  ), /* @__PURE__ */ b(
+    j,
+    {
+      value: {
+        closePopover: i,
+        togglePopover: d,
+        triggerRefState: r,
+        setTriggerRefState: R,
+        isOpen: m,
+        isOpenControlled: o,
+        setPopoverRefState: x,
+        popoverRefState: e,
+        placement: D,
+        arrowPlacement: T,
+        width: l,
+        withArrow: s,
+        zIndex: P,
+        transitionProps: S,
+        isFixed: f
+      },
+      children: c
+    }
+  );
+};
+a.Trigger = w;
+a.Dropdown = O;
+export {
+  a as Popover
+};

package/dist/components/Popover/Popover.module.css.js

@@ -0,0 +1,9 @@
+const r = "_popoverTrigger_16w5d_1", o = "_arrow_16w5d_7", e = {
+  popoverTrigger: r,
+  arrow: o
+};
+export {
+  o as arrow,
+  e as default,
+  r as popoverTrigger
+};

package/dist/components/Popover/Popover.types.js

@@ -0,0 +1 @@
+

package/dist/components/Popover/PopoverDropdown/PopoverArrow.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+const t = () => /* @__PURE__ */ r(
+  "svg",
+  {
+    style: {
+      all: "unset"
+    },
+    width: "14",
+    height: "6",
+    viewBox: "0 0 14 6",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    children: /* @__PURE__ */ r(
+      "path",
+      {
+        d: "M0 0C4 0 4.20121 6 7.00061 6C9.8 6 10 0 14 0L0 0Z",
+        fill: "currentColor"
+      }
+    )
+  }
+);
+export {
+  t as PopoverArrow
+};

package/dist/components/Popover/PopoverDropdown/PopoverDropdown.js

@@ -0,0 +1,71 @@
+import { jsx as o, jsxs as x } from "react/jsx-runtime";
+import { useMemo as P } from "react";
+import { PopoverArrow as v } from "./PopoverArrow.js";
+import R from "../Popover.module.css.js";
+import { usePopoverContext as C } from "../Popover.context.js";
+import { ARROW as y } from "../useFloatingPosition/useFloating.util.js";
+import { Portal as A } from "../../Portal/Portal.js";
+import { Transition as S } from "../../Transition/Transition.js";
+const B = ({
+  children: i,
+  className: n,
+  style: p
+}) => {
+  const {
+    isOpen: m,
+    isOpenControlled: s,
+    placement: d,
+    setPopoverRefState: l,
+    popoverRefState: r,
+    zIndex: c,
+    width: e,
+    withArrow: a,
+    arrowPlacement: f,
+    triggerRefState: u,
+    transitionProps: g,
+    isFixed: w
+  } = C(), h = P(() => {
+    if (r)
+      return getComputedStyle(r).backgroundColor;
+  }, [r]);
+  return /* @__PURE__ */ o(
+    A,
+    {
+      isFixed: w,
+      placement: {
+        ...d,
+        zIndex: c
+      },
+      children: /* @__PURE__ */ o(S, { mounted: s || m, ...g, children: (t) => /* @__PURE__ */ x(
+        "div",
+        {
+          style: {
+            ...t,
+            ...p,
+            width: e === "trigger" ? u?.getBoundingClientRect().width : e
+          },
+          className: n,
+          ref: l,
+          children: [
+            a && /* @__PURE__ */ o(
+              "div",
+              {
+                style: {
+                  color: h,
+                  padding: `0px ${y.X_PADDING}px`,
+                  ...f
+                },
+                className: R.arrow,
+                children: /* @__PURE__ */ o(v, {})
+              }
+            ),
+            i
+          ]
+        }
+      ) })
+    }
+  );
+};
+export {
+  B as PopoverDropdown
+};

package/dist/components/Popover/PopoverTrigger/PopoverTrigger.js

@@ -0,0 +1,31 @@
+import { jsx as i } from "react/jsx-runtime";
+import a from "../Popover.module.css.js";
+import { usePopoverContext as c } from "../Popover.context.js";
+import { classNames as l } from "../../../utils/class-names.js";
+import { closeEscape as g } from "../../../utils/close-escape.js";
+const w = ({
+  children: o,
+  className: e,
+  style: r,
+  ...t
+}) => {
+  const { closePopover: s, togglePopover: n, setTriggerRefState: p } = c();
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      ref: p,
+      onKeyDown: (m) => {
+        g(m, s);
+      },
+      tabIndex: -1,
+      onClick: n,
+      className: l(a.popoverTrigger, e),
+      style: r,
+      ...t,
+      children: o
+    }
+  );
+};
+export {
+  w as PopoverTrigger
+};

package/dist/components/Popover/useFloatingPosition/getScrollableAncestors.js

@@ -0,0 +1,12 @@
+function c(o) {
+  const t = [];
+  let e = o.parentElement;
+  for (; e; ) {
+    const l = getComputedStyle(e), n = (l.overflowY === "auto" || l.overflowY === "scroll") && e.scrollHeight > e.clientHeight, r = (l.overflowX === "auto" || l.overflowX === "scroll") && e.scrollWidth > e.clientWidth;
+    (n || r) && t.push(e), e = e.parentElement;
+  }
+  return (document.documentElement.scrollHeight > window.innerHeight || document.documentElement.scrollWidth > window.innerWidth) && t.push(window), t;
+}
+export {
+  c as getScrollableAncestors
+};

package/dist/components/Popover/useFloatingPosition/useFloating.types.js

@@ -0,0 +1 @@
+

package/dist/components/Popover/useFloatingPosition/useFloating.util.js

@@ -0,0 +1,55 @@
+const l = {
+  HEIGHT: 6,
+  X_PADDING: 12,
+  // IMPORTANT: This is --menu-list-border-radius value
+  SVG_WIDTH: 14,
+  get WIDTH() {
+    return this.SVG_WIDTH + 2 * this.X_PADDING;
+  }
+}, O = (w) => {
+  const [h, a] = w.split("-"), g = {
+    top: "bottom",
+    bottom: "top",
+    left: "right",
+    right: "left"
+  }[h] || h;
+  return a ? `${g}-${a}` : g;
+}, R = async (w, h, a, n, g, u) => {
+  await document.fonts.ready;
+  const e = w.getBoundingClientRect(), r = h.getBoundingClientRect(), i = { top: 0, left: 0 }, t = {
+    top: 0,
+    left: 0,
+    transform: "rotate(0deg)",
+    transformOrigin: "center center"
+  }, P = window.innerHeight, G = window.innerWidth;
+  let m = a;
+  const s = g ? l.HEIGHT : 0, H = (o) => {
+    switch (o) {
+      case "top":
+      case "top-start":
+      case "top-end":
+        return e.top - n - s - r.height >= 0;
+      case "bottom":
+      case "bottom-start":
+      case "bottom-end":
+        return e.bottom + n + s + r.height <= P;
+      case "left":
+      case "left-start":
+      case "left-end":
+        return e.left - n - s - r.width >= 0;
+      case "right":
+      case "right-start":
+      case "right-end":
+        return e.right + n + s + r.width <= G;
+      default:
+        return !0;
+    }
+  }, D = O(a);
+  !H(a) && H(D) && (m = D);
+  const I = (o) => o === "start" ? 0 : o === "end" ? e.width - r.width : (e.width - r.width) / 2, W = (o) => o === "start" ? 0 : o === "end" ? e.height - r.height : (e.height - r.height) / 2, b = (o) => o === "start" ? 0 : o === "end" ? r.width - l.WIDTH : (r.width - l.WIDTH) / 2, T = (o) => o === "start" ? 0 : o === "end" ? r.height - l.WIDTH : (r.height - l.WIDTH) / 2, [p, c] = m.split("-"), f = u ? 0 : window.scrollX, d = u ? 0 : window.scrollY;
+  return p === "bottom" ? (i.top = e.bottom + n + s + d, i.left = e.left + f + I(c), t.top = 0, t.left = b(c), t.transform = "rotate(180deg)", t.transformOrigin = "center top") : p === "top" ? (i.top = e.top - n - s - r.height + d, i.left = e.left + f + I(c), t.top = r.height, t.left = b(c), t.transform = "rotate(0deg)", t.transformOrigin = "center bottom") : p === "left" ? (i.left = e.left - n - s - r.width + f, i.top = e.top + d + W(c), t.left = r.width, t.top = T(c) + l.WIDTH, t.transform = "rotate(-90deg)", t.transformOrigin = "left top") : p === "right" && (i.left = e.right + n + s + f, i.top = e.top + d + W(c), t.left = 0, t.top = T(c), t.transform = "rotate(90deg)", t.transformOrigin = "left top"), { positionProps: i, arrowPosition: t };
+};
+export {
+  l as ARROW,
+  R as getPopoverPosition
+};

package/dist/components/Popover/useFloatingPosition/useFloatingPosition.js

@@ -0,0 +1,43 @@
+import { useState as f, useRef as b, useEffect as w } from "react";
+import { getPopoverPosition as z } from "./useFloating.util.js";
+import { getScrollableAncestors as L } from "./getScrollableAncestors.js";
+const O = (t, r, c = "bottom", a = 8, l = !1, s) => {
+  const [i, d] = f({
+    left: 0,
+    top: 0
+  }), [v, E] = f({
+    left: 0,
+    top: 0,
+    transform: "rotate(0deg)"
+  }), o = b(null);
+  return w(() => {
+    if (!t || !r) return;
+    const e = () => {
+      z(
+        t,
+        r,
+        c,
+        a,
+        l,
+        s
+      ).then(({ positionProps: n, arrowPosition: P }) => {
+        d(n), E(P);
+      });
+    };
+    if (s) {
+      e();
+      return;
+    }
+    const m = L(t);
+    m.forEach((n) => n.addEventListener("scroll", e)), window.addEventListener("resize", e), o.current = new ResizeObserver(e), o.current.observe(t), o.current.observe(r);
+    let u;
+    return document.fonts.ready.then(() => {
+      u = requestAnimationFrame(e);
+    }), () => {
+      m.forEach((n) => n.removeEventListener("scroll", e)), window.removeEventListener("resize", e), o.current?.disconnect(), cancelAnimationFrame(u);
+    };
+  }, [t, r, c, a, l, s]), { placement: i, arrowPlacement: v };
+};
+export {
+  O as useFloatingPosition
+};

package/dist/components/Portal/Portal.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import a from "react-dom";
+const l = ({
+  children: o,
+  placement: t,
+  isFixed: e = !1
+}) => a.createPortal(
+  /* @__PURE__ */ r(
+    "div",
+    {
+      style: {
+        position: e ? "fixed" : "absolute",
+        ...t
+      },
+      children: o
+    }
+  ),
+  document.body
+);
+export {
+  l as Portal
+};

package/dist/components/Portal/Portal.types.js

@@ -0,0 +1 @@
+

package/dist/components/ProgressBar/ProgressBar.js

@@ -0,0 +1,25 @@
+import { jsx as r } from "react/jsx-runtime";
+import i from "./ProgressBar.module.css.js";
+import { getProgressStyles as l } from "./ProgressBar.utils.js";
+import { classNames as c } from "../../utils/class-names.js";
+const h = ({
+  className: s,
+  style: t,
+  size: o = "m",
+  value: e = 0,
+  ...m
+}) => {
+  const a = Math.min(Math.max(e, 0), 100);
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      className: c(i.root, s),
+      style: l(o, t),
+      ...m,
+      children: /* @__PURE__ */ r("div", { style: { width: `${a}%` } })
+    }
+  );
+};
+export {
+  h as ProgressBar
+};

package/dist/components/ProgressBar/ProgressBar.module.css.js

@@ -0,0 +1,7 @@
+const o = "_root_1hjt2_1", t = {
+  root: o
+};
+export {
+  t as default,
+  o as root
+};

package/dist/components/ProgressBar/ProgressBar.types.js

@@ -0,0 +1 @@
+

package/dist/components/ProgressBar/ProgressBar.utils.js

@@ -0,0 +1,9 @@
+import { getSize as e } from "../../utils/get-size.js";
+const g = (r, s) => ({
+  "--progress-height": e(r, "progress-bar-height"),
+  "--progress-border-radius": e(r, "progress-bar-border-radius"),
+  ...s
+});
+export {
+  g as getProgressStyles
+};

package/dist/components/Radio/Radio.js

@@ -0,0 +1,44 @@
+import { jsxs as t, jsx as a } from "react/jsx-runtime";
+import s from "./Radio.module.css.js";
+import { getRadioButtonStyles as f } from "./Radio.utils.js";
+import { classNames as h } from "../../utils/class-names.js";
+const u = ({
+  label: e,
+  description: o,
+  className: i,
+  disabled: l,
+  checked: m,
+  onChange: n,
+  value: r,
+  size: c = "m",
+  variant: d = "default",
+  ...p
+}) => /* @__PURE__ */ t(
+  "label",
+  {
+    className: h(s.root, i),
+    style: f(d, c),
+    children: [
+      /* @__PURE__ */ a(
+        "input",
+        {
+          className: s.radio,
+          type: "radio",
+          disabled: l,
+          checked: m,
+          value: r,
+          role: "radio",
+          onChange: (N) => n?.(String(r), N),
+          ...p
+        }
+      ),
+      /* @__PURE__ */ t("div", { className: s.text, children: [
+        e && /* @__PURE__ */ a("span", { className: s.label, children: e }),
+        o && /* @__PURE__ */ a("span", { className: s.description, children: o })
+      ] })
+    ]
+  }
+);
+export {
+  u as Radio
+};

package/dist/components/Radio/Radio.module.css.js

@@ -0,0 +1,15 @@
+const t = "_root_1bvmi_1", o = "_text_1bvmi_57", _ = "_label_1bvmi_67", i = "_description_1bvmi_76", e = "_radio_1bvmi_85", s = {
+  root: t,
+  text: o,
+  label: _,
+  description: i,
+  radio: e
+};
+export {
+  s as default,
+  i as description,
+  _ as label,
+  e as radio,
+  t as root,
+  o as text
+};