@alif-ui-test/core 1.11.0

package/dist/components/Backdrop/useZIndexStack.js

@@ -0,0 +1,28 @@
+import { useState as u, useEffect as c } from "react";
+import { getDefaultZIndex as x } from "../../utils/get-default-z-index.js";
+const r = x("backdrop"), n = [];
+function l() {
+  if (n.length === 0)
+    return n.push(r), r;
+  const e = n[n.length - 1] + 1;
+  return n.push(e), e;
+}
+function d(e) {
+  const t = n.indexOf(e);
+  t !== -1 && n.splice(t, 1);
+}
+const I = (e) => {
+  const [t, o] = u(null);
+  return c(() => {
+    if (e) {
+      const s = l();
+      return o(s), () => {
+        d(s), o(null);
+      };
+    } else
+      o(null);
+  }, [e]), t;
+};
+export {
+  I as useZIndexStack
+};

package/dist/components/Badge/Badge.js

@@ -0,0 +1,31 @@
+import { jsxs as i, jsx as n } from "react/jsx-runtime";
+import m from "./Badge.module.css.js";
+import { getBadgeStyles as d } from "./Badge.utils.js";
+import { classNames as f } from "../../utils/class-names.js";
+const h = ({
+  counter: s,
+  children: a,
+  className: e,
+  leftSection: o,
+  rightSection: t,
+  size: r = "m",
+  type: l = "primary",
+  variant: p = "neutral",
+  ...c
+}) => /* @__PURE__ */ i(
+  "span",
+  {
+    style: d(l, p, r),
+    className: f(m.root, e),
+    ...c,
+    children: [
+      o,
+      a,
+      s && r === "m" && /* @__PURE__ */ n("span", { className: m.counter, children: s }),
+      t
+    ]
+  }
+);
+export {
+  h as Badge
+};

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

@@ -0,0 +1,9 @@
+const o = "_root_1peov_1", t = "_counter_1peov_145", e = {
+  root: o,
+  counter: t
+};
+export {
+  t as counter,
+  e as default,
+  o as root
+};

package/dist/components/Badge/Badge.types.js

@@ -0,0 +1 @@
+

package/dist/components/Badge/Badge.utils.js

@@ -0,0 +1,40 @@
+import { resolveTypography as r } from "../../utils/typography.js";
+import { getSize as o } from "../../utils/get-size.js";
+const i = (g) => {
+  switch (g) {
+    case "m":
+      return r("body", "m");
+    case "s":
+      return r("body", "s");
+    case "xs":
+      return r("description", "l");
+  }
+}, c = (g, n, e) => {
+  const a = i(e), t = r("description", "s");
+  return {
+    "--badge-bg-color": `var(--badge-bg-color-${g}-${n})`,
+    "--badge-counter-label-color": `var(--badge-counter-label-color-${g}-${n})`,
+    "--badge-icon-color": `var(--badge-icon-color-${g}-${n})`,
+    "--badge-label-color": `var(--badge-label-color-${g}-${n})`,
+    "--badge-border-radius": o(e, "badge-border-radius"),
+    "--badge-height": o(e, "badge-height"),
+    "--badge-spacing-between": o(e, "badge-spacing-between"),
+    "--badge-spacing-horizontal": o(e, "badge-spacing-horizontal"),
+    "--badge-spacing-vertical": o(e, "badge-spacing-vertical"),
+    "--badge-font-family": a.fontFamily,
+    "--badge-font-weight": a.fontWeight,
+    "--badge-font-size": a.fontSize,
+    "--badge-line-height": a.lineHeight,
+    "--badge-letter-spacing": a.letterSpacing,
+    "--badge-counter-font-family": t.fontFamily,
+    "--badge-counter-font-weight": t.fontWeight,
+    "--badge-counter-font-size": t.fontSize,
+    "--badge-counter-line-height": t.lineHeight,
+    "--badge-counter-letter-spacing": t.letterSpacing,
+    "--icon-width": o(e, "badge-icon-width"),
+    "--icon-height": o(e, "badge-icon-height")
+  };
+};
+export {
+  c as getBadgeStyles
+};

package/dist/components/Breadcrumbs/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,19 @@
+import { jsx as t } from "react/jsx-runtime";
+import c from "./Breadcrumb.module.css.js";
+const i = ({
+  isLast: m,
+  LinkComponent: o,
+  linkProps: r,
+  label: e,
+  path: s
+}) => m ? /* @__PURE__ */ t("p", { className: c.current, children: e }) : /* @__PURE__ */ t(
+  o,
+  {
+    ...r ? r(s) : {},
+    className: c.root,
+    children: e
+  }
+);
+export {
+  i as Breadcrumb
+};

package/dist/components/Breadcrumbs/Breadcrumb/Breadcrumb.module.css.js

@@ -0,0 +1,9 @@
+const o = "_root_1oifj_1", t = "_current_1oifj_14", r = {
+  root: o,
+  current: t
+};
+export {
+  t as current,
+  r as default,
+  o as root
+};

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,58 @@
+import { jsx as e, jsxs as g, Fragment as d } from "react/jsx-runtime";
+import { getBreadcrumbsStyles as f } from "./Breadcrumbs.utils.js";
+import u from "./Breadcrumbs.module.css.js";
+import { BreadcrumbsMenu as M } from "./BreadcrumbsMenu/BreadcrumbsMenu.js";
+import { Breadcrumb as v } from "./Breadcrumb/Breadcrumb.js";
+import { OutlineNavigationChevronRightSmall as y } from "../../icons/components/OutlineNavigationChevronRightSmall.js";
+const F = ({
+  variant: p = "primary",
+  links: t,
+  LinkComponent: o,
+  linkProps: m,
+  maxItems: s = 5
+}) => {
+  const r = t.length, c = Math.min(Math.max(s, 2), r), l = t.slice(1, r - c + 1), b = l.length > 0 && s <= r, i = [
+    t[0],
+    ...t.slice(r - c + 1)
+  ];
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: u.root,
+      style: f(p),
+      "aria-label": "breadcrumbs",
+      children: i.map((n, a) => {
+        const h = a === i.length - 1;
+        return /* @__PURE__ */ g(d, { children: [
+          /* @__PURE__ */ e(
+            v,
+            {
+              LinkComponent: o,
+              label: n.label,
+              path: n.path,
+              isLast: h,
+              linkProps: m
+            }
+          ),
+          a === 0 && b && /* @__PURE__ */ e(
+            M,
+            {
+              links: l,
+              LinkComponent: o,
+              linkProps: m
+            }
+          ),
+          !h && (s >= r || a !== 0) && /* @__PURE__ */ e(
+            y,
+            {
+              className: u.separator
+            }
+          )
+        ] }, a);
+      })
+    }
+  );
+};
+export {
+  F as Breadcrumbs
+};

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

@@ -0,0 +1,9 @@
+const o = "_root_5c7zo_1", t = "_separator_5c7zo_28", r = {
+  root: o,
+  separator: t
+};
+export {
+  r as default,
+  o as root,
+  t as separator
+};

package/dist/components/Breadcrumbs/Breadcrumbs.types.js

@@ -0,0 +1 @@
+

package/dist/components/Breadcrumbs/Breadcrumbs.utils.js

@@ -0,0 +1,18 @@
+import { resolveTypography as b } from "../../utils/typography.js";
+const o = (e) => {
+  const r = b("body", "s");
+  return {
+    "--breadcrumbs-font-family": r.fontFamily,
+    "--breadcrumbs-font-weight": r.fontWeight,
+    "--breadcrumbs-font-size": r.fontSize,
+    "--breadcrumbs-line-height": r.lineHeight,
+    "--breadcrumbs-letter-spacing": r.letterSpacing,
+    "--breadcrumbs-label-color-current": `var(--breadcrumbs-label-color-${e}-current)`,
+    "--breadcrumbs-label-color-default": `var(--breadcrumbs-label-color-${e}-default)`,
+    "--breadcrumbs-label-color-hover": `var(--breadcrumbs-label-color-${e}-hover)`,
+    "--breadcrumbs-label-decoration": e === "primary" ? "underline" : "none"
+  };
+};
+export {
+  o as getBreadcrumbsStyles
+};

package/dist/components/Breadcrumbs/BreadcrumbsMenu/BreadcrumbsMenu.js

@@ -0,0 +1,46 @@
+import { jsx as r } from "react/jsx-runtime";
+import { useState as l } from "react";
+import o from "./BreadcrumbsMenu.module.css.js";
+import { Breadcrumb as c } from "../Breadcrumb/Breadcrumb.js";
+import { Menu as m } from "../../Menu/Menu.js";
+import { FunctionButton as u } from "../../FunctionButton/FunctionButton.js";
+import { SolidSystemMoreHorizontal as f } from "../../../icons/components/SolidSystemMoreHorizontal.js";
+import { classNames as d } from "../../../utils/class-names.js";
+const v = ({
+  links: a,
+  LinkComponent: s,
+  linkProps: i
+}) => {
+  const [t, n] = l(!1);
+  return /* @__PURE__ */ r(
+    m,
+    {
+      isOpen: t,
+      position: "bottom-start",
+      onChange: n,
+      trigger: /* @__PURE__ */ r(
+        u,
+        {
+          variant: "tertiary",
+          className: d(
+            !t && o.moreButton,
+            t && o.moreButtonActive
+          ),
+          children: /* @__PURE__ */ r(f, { className: o.separator })
+        }
+      ),
+      children: a.map((e, p) => /* @__PURE__ */ r(m.Item, { children: /* @__PURE__ */ r(
+        c,
+        {
+          LinkComponent: s,
+          label: e.label,
+          path: e.path,
+          linkProps: i
+        }
+      ) }, p))
+    }
+  );
+};
+export {
+  v as BreadcrumbsMenu
+};

package/dist/components/Breadcrumbs/BreadcrumbsMenu/BreadcrumbsMenu.module.css.js

@@ -0,0 +1,11 @@
+const t = "_moreButton_7ovii_8", o = "_moreButtonActive_7ovii_8", e = "_separator_7ovii_29", r = {
+  moreButton: t,
+  moreButtonActive: o,
+  separator: e
+};
+export {
+  r as default,
+  t as moreButton,
+  o as moreButtonActive,
+  e as separator
+};

package/dist/components/Button/Button.js

@@ -0,0 +1,46 @@
+import { jsx as o, jsxs as v, Fragment as b } from "react/jsx-runtime";
+import a from "./Button.module.css.js";
+import { getButtonStyles as j, getLoaderVariant as z } from "./Button.utils.js";
+import { Loader as u } from "../Loader/Loader.js";
+import { validateIconButtonProps as N } from "../../utils/validate-icon-button-props.js";
+import { classNames as V } from "../../utils/class-names.js";
+const q = ({
+  children: t,
+  className: i,
+  leftSection: s,
+  rightSection: m,
+  size: n = "m",
+  variant: l = "primary",
+  isIconBtn: e = !1,
+  isActive: d = !1,
+  isLoading: r = !1,
+  disabled: x,
+  ...c
+}) => {
+  N(e, s, m, t);
+  const f = ["xs", "s"].includes(n) ? "xs" : "s", p = z(l), y = () => e ? r ? /* @__PURE__ */ o(u, { size: f, variant: p }) : t : /* @__PURE__ */ v(b, { children: [
+    r && /* @__PURE__ */ o(u, { size: f, variant: p }),
+    s,
+    t,
+    m
+  ] });
+  return /* @__PURE__ */ o(
+    "button",
+    {
+      style: j(l, n, e),
+      className: V(
+        a.root,
+        d && a.active,
+        r && a.isLoading,
+        i
+      ),
+      disabled: x,
+      tabIndex: r ? -1 : 0,
+      ...c,
+      children: y()
+    }
+  );
+};
+export {
+  q as Button
+};

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

@@ -0,0 +1,11 @@
+const o = "_root_1fyi2_1", t = "_isLoading_1fyi2_147", i = "_active_1fyi2_165", s = {
+  root: o,
+  isLoading: t,
+  active: i
+};
+export {
+  i as active,
+  s as default,
+  t as isLoading,
+  o as root
+};

package/dist/components/Button/Button.types.js

@@ -0,0 +1 @@
+

package/dist/components/Button/Button.utils.js

@@ -0,0 +1,69 @@
+import { getSize as r } from "../../utils/get-size.js";
+import { resolveTypography as n } from "../../utils/typography.js";
+const c = (o) => {
+  switch (o) {
+    case "xs":
+      return n("description", "l");
+    case "s":
+      return n("body", "sStrong");
+    case "m":
+    case "l":
+      return n("body", "mStrong");
+  }
+}, a = (o, t, l) => {
+  const e = {
+    borderColor: "transparent",
+    borderColorHover: "transparent",
+    borderColorDisabled: "transparent",
+    borderColorActive: "transparent"
+  };
+  (o === "outline" || o === "outline-neutral") && (e.borderColor = `var(--button-border-color-${o}-default)`, e.borderColorHover = `var(--button-border-color-${o}-hover)`, e.borderColorActive = `var(--button-border-color-${o}-active)`, e.borderColorDisabled = `var(--button-border-color-${o}-disabled)`);
+  const b = c(t);
+  return {
+    "--button-height": r(t, "button-height"),
+    "--button-padding-x": l ? r(t, "button-spacing-horizontal-icon-btn") : r(t, "button-spacing-horizontal"),
+    "--button-padding-y": l ? r(t, "button-spacing-horizontal-icon-btn") : r(t, "button-spacing-horizontal"),
+    "--button-font-family": b.fontFamily,
+    "--button-font-weight": b.fontWeight,
+    "--button-font-size": b.fontSize,
+    "--button-line-height": b.lineHeight,
+    "--button-letter-spacing": b.letterSpacing,
+    "--button-border-radius": r(t, "button-border-radius"),
+    "--button-border-width": r(t, "button-border-width"),
+    "--button-bg-color": `var(--button-bg-color-${o}-default)`,
+    "--button-bg-color-active": `var(--button-bg-color-${o}-active)`,
+    "--button-bg-color-disabled": `var(--button-bg-color-${o}-disabled)`,
+    "--button-bg-color-hover": `var(--button-bg-color-${o}-hover)`,
+    "--button-label-color": `var(--button-label-color-${o}-default)`,
+    "--button-label-color-hover": `var(--button-label-color-${o}-hover)`,
+    "--button-label-color-active": `var(--button-label-color-${o}-active)`,
+    "--button-label-color-disabled": `var(--button-label-color-${o}-disabled)`,
+    "--button-border-color-hover": e.borderColorHover,
+    "--button-border-color": e.borderColor,
+    "--button-border-color-active": e.borderColorActive,
+    "--button-border-color-disabled": e.borderColorDisabled,
+    "--button-icon-width": r(t, "button-icon-width"),
+    "--button-icon-height": r(t, "button-icon-height"),
+    "--button-icon-color": `var(--button-icon-color-${o}-default)`,
+    "--button-icon-color-hover": `var(--button-icon-color-${o}-hover)`,
+    "--button-icon-color-active": `var(--button-icon-color-${o}-active)`,
+    "--button-icon-color-disabled": `var(--button-icon-color-${o}-disabled)`
+  };
+}, i = (o) => {
+  switch (o) {
+    case "outline":
+      return "primary";
+    case "outline-neutral":
+    case "secondary":
+    case "tertiary":
+      return "secondary";
+    case "primary":
+      return "contrast";
+    case "risk":
+      return "risk";
+  }
+};
+export {
+  a as getButtonStyles,
+  i as getLoaderVariant
+};

package/dist/components/Checkbox/Checkbox.js

@@ -0,0 +1,54 @@
+import { jsxs as o, jsx as s } from "react/jsx-runtime";
+import e from "./Checkbox.module.css.js";
+import { getCheckboxStyles as m } from "./Checkbox.utils.js";
+import { OutlineSystemRemove as p } from "../../icons/components/OutlineSystemRemove.js";
+import { classNames as t } from "../../utils/class-names.js";
+const b = ({
+  label: r,
+  description: a,
+  size: l = "s",
+  checked: i = !1,
+  isAllChecked: n = !1,
+  ...c
+}) => /* @__PURE__ */ o(
+  "label",
+  {
+    style: m(l),
+    className: t(e.root, n && e.inputWithList),
+    children: [
+      /* @__PURE__ */ s("input", { hidden: !0, type: "checkbox", checked: i, ...c }),
+      /* @__PURE__ */ o("div", { className: e.checkboxIcon, children: [
+        /* @__PURE__ */ s(
+          p,
+          {
+            className: t(!i && n && e.iconVisible)
+          }
+        ),
+        /* @__PURE__ */ s(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            className: t(e.checkmark, i && e.iconVisible),
+            children: /* @__PURE__ */ s(
+              "path",
+              {
+                fill: "none",
+                strokeWidth: "2",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                d: "M5 12L10 17L20 7"
+              }
+            )
+          }
+        )
+      ] }),
+      /* @__PURE__ */ o("div", { className: e.textContainer, children: [
+        r && /* @__PURE__ */ s("span", { className: e.label, children: r }),
+        a && /* @__PURE__ */ s("span", { className: e.description, children: a })
+      ] })
+    ]
+  }
+);
+export {
+  b as Checkbox
+};

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

@@ -0,0 +1,21 @@
+const t = "_root_rwl3u_1", o = "_checkboxIcon_rwl3u_51", c = "_label_rwl3u_100", i = "_description_rwl3u_101", n = "_inputWithList_rwl3u_105", e = "_textContainer_rwl3u_114", _ = "_iconVisible_rwl3u_150", r = "_checkmark_rwl3u_154", s = {
+  root: t,
+  checkboxIcon: o,
+  label: c,
+  description: i,
+  inputWithList: n,
+  textContainer: e,
+  iconVisible: _,
+  checkmark: r
+};
+export {
+  o as checkboxIcon,
+  r as checkmark,
+  s as default,
+  i as description,
+  _ as iconVisible,
+  n as inputWithList,
+  c as label,
+  t as root,
+  e as textContainer
+};

package/dist/components/Checkbox/Checkbox.types.js

@@ -0,0 +1 @@
+

package/dist/components/Checkbox/Checkbox.utils.js

@@ -0,0 +1,44 @@
+import { getSize as t } from "../../utils/get-size.js";
+import { resolveTypography as i } from "../../utils/typography.js";
+const n = (e) => {
+  switch (e) {
+    case "m":
+      return i("body", "m");
+    case "s":
+      return i("body", "s");
+  }
+}, r = (e) => {
+  switch (e) {
+    case "m":
+      return i("description", "l");
+    case "s":
+      return i("description", "m");
+  }
+}, s = (e) => {
+  const o = n(e), c = r(e);
+  return {
+    "--label-font-family": o.fontFamily,
+    "--label-font-size": o.fontSize,
+    "--label-font-weight": o.fontWeight,
+    "--label-line-height": o.lineHeight,
+    "--label-letter-spacing": o.letterSpacing,
+    "--description-font-family": c.fontFamily,
+    "--description-font-weight": c.fontWeight,
+    "--description-font-size": c.fontSize,
+    "--description-line-height": c.lineHeight,
+    "--description-letter-spacing": c.letterSpacing,
+    "--checkbox-height": t(e, "checkbox-height"),
+    "--checkbox-space-between": t(e, "checkbox-spacing-between"),
+    "--checkbox-border": t(e, "checkbox-border-width"),
+    "--checkbox-border-radius": t(e, "checkbox-border-radius"),
+    "--checkbox-icon-width": t(e, "checkbox-icon-width"),
+    "--checkbox-icon-height": t(e, "checkbox-icon-height"),
+    "--checkbox-spacing-horizontal": t(
+      e,
+      "checkbox-spacing-horizontal"
+    )
+  };
+};
+export {
+  s as getCheckboxStyles
+};

package/dist/components/Collapse/Collapse.js

@@ -0,0 +1,11 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Transition as s } from "../Transition/Transition.js";
+const p = ({
+  isOpen: r,
+  className: t,
+  children: i,
+  duration: n = 300
+}) => /* @__PURE__ */ o(s, { duration: n, transition: "collapser", mounted: r, children: (e) => /* @__PURE__ */ o("div", { style: e, className: t, children: i }) });
+export {
+  p as Collapse
+};

package/dist/components/Collapse/Collapse.types.js

@@ -0,0 +1 @@
+