@alif-ui-test/core 1.11.0 → 2.0.0-alpha.6

package/dist/components/Backdrop/Backdrop.js

@@ -1,59 +1,47 @@
-import { jsx as t, jsxs as p } from "react/jsx-runtime";
-import { useEffect as k } from "react";
-import u from "./Backdrop.module.css.js";
-import { useZIndexStack as v } from "./useZIndexStack.js";
-import { BackdropOverlay as x } from "./BackdropOverlay.js";
-import { RemoveScroll as h } from "../RemoveScroll/RemoveScroll.js";
-import { Portal as y } from "../Portal/Portal.js";
-import { Transition as E } from "../Transition/Transition.js";
-import { closeEscape as I } from "../../utils/close-escape.js";
-import { classNames as b } from "../../utils/class-names.js";
-const C = ({
-  isOpen: o,
-  onClose: e,
-  children: m,
-  isCloseOutside: c,
-  className: a,
-  zIndex: d,
-  transitionProps: n,
-  ...i
-}) => {
-  const s = v(o), l = (r) => {
-    r.target === r.currentTarget && c && e();
-  };
-  return k(() => {
-    const r = (f) => {
-      I(f, e);
-    };
-    if (o)
-      return document.addEventListener("keydown", r), () => {
-        document.removeEventListener("keydown", r);
-      };
-  }, [o, e]), /* @__PURE__ */ t(
-    y,
-    {
-      placement: {
-        top: 0,
-        left: 0,
-        zIndex: d ?? s ?? void 0
-      },
-      children: /* @__PURE__ */ p(h, { enabled: o, children: [
-        /* @__PURE__ */ t(x, { isOpen: o }),
-        /* @__PURE__ */ t(E, { mounted: o, ...n, children: (r) => /* @__PURE__ */ t(
-          "div",
-          {
-            style: r,
-            "data-testid": "backdrop",
-            className: b(u.root, a),
-            onClick: l,
-            ...i,
-            children: m
-          }
-        ) })
-      ] })
-    }
-  );
-};
-export {
-  C as Backdrop
+import { classNames as e } from "../../utils/class-names.js";
+import { closeEscape as t } from "../../utils/close-escape.js";
+import n from "./Backdrop.module.js";
+import { useZIndexStack as r } from "./useZIndexStack.js";
+import { BackdropOverlay as i } from "./BackdropOverlay.js";
+import { RemoveScroll as a } from "../RemoveScroll/RemoveScroll.js";
+import { Portal as o } from "../Portal/Portal.js";
+import { Transition as s } from "../Transition/Transition.js";
+import { useEffect as c } from "react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/Backdrop/Backdrop.tsx
+var d = ({ isOpen: d, onClose: f, children: p, closeOnClickOutside: m = !0, className: h, zIndex: g, transitionProps: _, ...v }) => {
+	let y = r(d), b = (e) => {
+		e.target === e.currentTarget && m && f();
+	};
+	return c(() => {
+		let e = (e) => {
+			t(e, f);
+		};
+		if (d) return document.addEventListener("keydown", e), () => {
+			document.removeEventListener("keydown", e);
+		};
+	}, [d, f]), /* @__PURE__ */ l(o, {
+		placement: {
+			top: 0,
+			left: 0,
+			zIndex: g ?? y ?? void 0
+		},
+		children: /* @__PURE__ */ u(a, {
+			enabled: d,
+			children: [/* @__PURE__ */ l(i, { isOpen: d }), /* @__PURE__ */ l(s, {
+				mounted: d,
+				..._,
+				children: (t) => /* @__PURE__ */ l("div", {
+					style: t,
+					"data-testid": "backdrop",
+					className: e(n.root, h),
+					onClick: b,
+					...v,
+					children: p
+				})
+			})]
+		})
+	});
 };
+//#endregion
+export { d as Backdrop };

package/dist/components/Backdrop/Backdrop.module.js

@@ -0,0 +1,6 @@
+var e = {
+	root: "_root_13p6u_1",
+	overlay: "_overlay_13p6u_9"
+};
+//#endregion
+export { e as default };

package/dist/components/Backdrop/BackdropOverlay.js

@@ -1,8 +1,16 @@
-import { jsx as r } from "react/jsx-runtime";
-import s from "./Backdrop.module.css.js";
-import { Transition as a } from "../Transition/Transition.js";
 import { classNames as e } from "../../utils/class-names.js";
-const d = ({ isOpen: o }) => /* @__PURE__ */ r(a, { mounted: o, transition: "fade", duration: 300, children: (t) => /* @__PURE__ */ r("div", { style: t, className: e(s.overlay) }) });
-export {
-  d as BackdropOverlay
-};
+import t from "./Backdrop.module.js";
+import { Transition as n } from "../Transition/Transition.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Backdrop/BackdropOverlay.tsx
+var i = ({ isOpen: i }) => /* @__PURE__ */ r(n, {
+	mounted: i,
+	transition: "fade",
+	duration: 300,
+	children: (n) => /* @__PURE__ */ r("div", {
+		style: n,
+		className: e(t.overlay)
+	})
+});
+//#endregion
+export { i as BackdropOverlay };

package/dist/components/Backdrop/useZIndexStack.js

@@ -1,28 +1,26 @@
-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;
+import { getDefaultZIndex as e } from "../../utils/get-default-z-index.js";
+import { useEffect as t, useState as n } from "react";
+//#region src/components/Backdrop/useZIndexStack.ts
+var r = e("backdrop"), i = [];
+function a() {
+	if (i.length === 0) return i.push(r), r;
+	let e = i[i.length - 1] + 1;
+	return i.push(e), e;
 }
-function d(e) {
-  const t = n.indexOf(e);
-  t !== -1 && n.splice(t, 1);
+function o(e) {
+	let t = i.indexOf(e);
+	t !== -1 && i.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
+var s = (e) => {
+	let [r, i] = n(null);
+	return t(() => {
+		if (e) {
+			let e = a();
+			return i(e), () => {
+				o(e), i(null);
+			};
+		} else i(null);
+	}, [e]), r;
 };
+//#endregion
+export { s as useZIndexStack };

package/dist/components/Badge/Badge.js

@@ -1,31 +1,21 @@
-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
+import { classNames as e } from "../../utils/class-names.js";
+import { useMode as t } from "../../providers/hooks/useMode/useMode.js";
+import n from "./Badge.module.js";
+import { getBadgeStyles as r } from "./Badge.utils.js";
+import { Children as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/Badge/Badge.tsx
+var o = ({ children: o, size: s = "m", variant: c = "filled", color: l = "info", clickable: u = !1, className: d, style: f, ...p }) => {
+	let { mode: m } = t();
+	return /* @__PURE__ */ a("span", {
+		style: r(s, l, c, f, m),
+		className: e(n.root, "uiFont", u && n.clickable, d),
+		...p,
+		children: i.map(o, (e) => typeof e == "string" ? /* @__PURE__ */ a("span", {
+			className: n.label,
+			children: e
+		}) : e)
+	});
 };
+//#endregion
+export { o as Badge };

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

@@ -0,0 +1,7 @@
+var e = {
+	root: "_root_1hkbt_1",
+	label: "_label_1hkbt_57",
+	clickable: "_clickable_1hkbt_63"
+};
+//#endregion
+export { e as default };

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

@@ -1,40 +1,32 @@
-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
+import { getSize as e } from "../../utils/get-size.js";
+import { resolveTypography as t } from "../../utils/typography.js";
+import { generateColorFromHex as n } from "../../utils/generate-color-from-hex.js";
+//#region src/components/Badge/Badge.utils.ts
+var r = [
+	"info",
+	"success",
+	"neutral",
+	"warning",
+	"danger"
+], i = (e) => {
+	switch (e) {
+		case "m": return t("body", "m");
+		case "s": return t("body", "s");
+		case "xs": return t("description", "l");
+	}
+}, a = (t, a, o, s, c) => {
+	let l = r.includes(a), u = l ? null : n(a, c);
+	return {
+		...i(t),
+		"--badge-bg-color": l ? `var(--badge-${o}-bg-color-${a})` : u?.background,
+		"--badge-content-color": l ? `var(--badge-${o}-content-color-${a})` : u?.color,
+		"--badge-border-radius": e(t, "badge-border-radius"),
+		"--badge-height": e(t, "badge-height"),
+		"--badge-spacing-between": e(t, "badge-spacing-between"),
+		"--badge-spacing-horizontal": e(t, "badge-spacing-horizontal"),
+		"--icon-size": e(t, "badge-icon-size"),
+		...s
+	};
 };
+//#endregion
+export { a as getBadgeStyles };

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

@@ -1,19 +1,14 @@
+import e from "./Breadcrumb.module.js";
 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
-};
+//#region src/components/Breadcrumbs/Breadcrumb/Breadcrumb.tsx
+var n = ({ isLast: n, linkComponent: r, linkProps: i, label: a, path: o }) => n ? /* @__PURE__ */ t("span", {
+	className: e.current,
+	"aria-current": "page",
+	children: a
+}) : /* @__PURE__ */ t(r, {
+	...i ? i(o) : {},
+	className: e.root,
+	children: a
+});
+//#endregion
+export { n as Breadcrumb };

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

@@ -0,0 +1,6 @@
+var e = {
+	root: "_root_dlvkz_1",
+	current: "_current_dlvkz_12"
+};
+//#endregion
+export { e as default };

package/dist/components/Breadcrumbs/Breadcrumbs.js

@@ -1,58 +1,45 @@
-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
+import { classNames as e } from "../../utils/class-names.js";
+import { getBreadcrumbsStyles as t } from "./Breadcrumbs.utils.js";
+import n from "./Breadcrumbs.module.js";
+import { Breadcrumb as r } from "./Breadcrumb/Breadcrumb.js";
+import { BreadcrumbsMenu as i } from "./BreadcrumbsMenu/BreadcrumbsMenu.js";
+import { Fragment as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { OutlineNavigationChevronRight as c } from "@alif-ui-test/icons";
+//#region src/components/Breadcrumbs/Breadcrumbs.tsx
+var l = ({ color: l = "primary", links: u, linkComponent: d, linkProps: f, maxItems: p = 5, menuProps: m, className: h, style: g, ref: _ }) => {
+	let v = u.length, y = Math.min(Math.max(p, 2), v), b = v > y, x = b ? u.slice(1, v - y + 1) : [], S = b ? [u[0], ...u.slice(v - y + 1)] : u;
+	return /* @__PURE__ */ o("nav", {
+		style: t(l, g),
+		className: e(n.root, "uiFont", h),
+		"aria-label": "breadcrumb",
+		ref: _,
+		children: /* @__PURE__ */ o("ol", {
+			className: n.list,
+			children: S.map((e, t) => {
+				let l = t === S.length - 1;
+				return /* @__PURE__ */ s(a, { children: [
+					/* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(r, {
+						isLast: l,
+						linkComponent: d,
+						linkProps: f,
+						...e
+					}) }),
+					t === 0 && b && /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o(i, {
+						links: x,
+						linkComponent: d,
+						linkProps: f,
+						menuProps: m
+					}) }),
+					!l && (!b || t !== 0) && /* @__PURE__ */ o("li", {
+						className: n.separator,
+						"aria-hidden": "true",
+						children: /* @__PURE__ */ o(c, {})
+					})
+				] }, t);
+			})
+		})
+	});
 };
+//#endregion
+export { l as Breadcrumbs };

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

@@ -0,0 +1,7 @@
+var e = {
+	root: "_root_8s37m_1",
+	list: "_list_8s37m_18",
+	separator: "_separator_8s37m_28"
+};
+//#endregion
+export { e as default };

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

@@ -1,18 +1,12 @@
-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
-};
+import { resolveTypography as e } from "../../utils/typography.js";
+//#region src/components/Breadcrumbs/Breadcrumbs.utils.ts
+var t = (t, n) => ({
+	"--breadcrumbs-label-color-current": `var(--breadcrumbs-label-color-${t}-current)`,
+	"--breadcrumbs-label-color-default": `var(--breadcrumbs-label-color-${t}-default)`,
+	"--breadcrumbs-label-color-hover": `var(--breadcrumbs-label-color-${t}-hover)`,
+	"--breadcrumbs-label-decoration": t === "highlight" ? "underline" : "none",
+	...e("body", "s"),
+	...n
+});
+//#endregion
+export { t as getBreadcrumbsStyles };

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

@@ -1,46 +1,24 @@
+import { Breadcrumb as e } from "../Breadcrumb/Breadcrumb.js";
+import { Button as t } from "../../Button/Button.js";
+import { Menu as n } from "../../Menu/Menu.js";
 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
-};
+import { SolidSystemMoreHorizontal as i } from "@alif-ui-test/icons";
+//#region src/components/Breadcrumbs/BreadcrumbsMenu/BreadcrumbsMenu.tsx
+var a = ({ links: a, linkComponent: o, linkProps: s, menuProps: c }) => /* @__PURE__ */ r(n, {
+	position: "bottom-start",
+	offset: 4,
+	trigger: /* @__PURE__ */ r(t, {
+		variant: "function",
+		color: "tertiary",
+		size: "s",
+		children: /* @__PURE__ */ r(i, {})
+	}),
+	...c,
+	children: a.map((t, i) => /* @__PURE__ */ r(n.Item, { children: /* @__PURE__ */ r(e, {
+		linkComponent: o,
+		linkProps: s,
+		...t
+	}) }, i))
+});
+//#endregion
+export { a as BreadcrumbsMenu };