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

package/dist/components/Accordion/Accordion.context.js

@@ -0,0 +1,5 @@
+import { createSafeContext as e } from "../../utils/create-safe-context/create-safe-context.js";
+//#region src/components/Accordion/Accordion.context.ts
+var [t, n] = e("Accordion component was not found in the tree"), [r, i] = e("AccordionItem component was not found in the tree");
+//#endregion
+export { t as AccordionContextProvider, r as AccordionItemContextProvider, n as useAccordionContext, i as useAccordionItemContext };

package/dist/components/Accordion/Accordion.js

@@ -1,33 +1,34 @@
-import { jsx as o, jsxs as a } from "react/jsx-runtime";
-import { createContext as l, useContext as p } from "react";
-import r from "./Accordion.module.css.js";
-import { getAccordionStyles as f } from "./Accordion.utils.js";
-import { AccordionSummary as u } from "./AccordionSummary/AccordionSummary.js";
-import { AccordionDetails as v } from "./AccordionDetails/AccordionDetails.js";
-import { Divider as x } from "../Divider/Divider.js";
-import { classNames as A } from "../../utils/class-names.js";
-const e = l({ isOpen: !1 }), t = ({
-  children: i,
-  className: s,
-  variant: m = "desktop",
-  size: c = "s",
-  type: d = "default",
-  isOpen: n
-}) => /* @__PURE__ */ o(e.Provider, { value: { isOpen: n }, children: /* @__PURE__ */ a(
-  "div",
-  {
-    className: A(r.root, s),
-    style: f(m, c),
-    children: [
-      i,
-      d === "withDivider" && /* @__PURE__ */ o("div", { role: "separator", className: r.divider, children: /* @__PURE__ */ o(x, {}) })
-    ]
-  }
-) });
-t.Summary = u;
-t.Details = v;
-const k = () => p(e);
-export {
-  t as Accordion,
-  k as useAccordionContext
+import { classNames as e } from "../../utils/class-names.js";
+import { AccordionContextProvider as t } from "./Accordion.context.js";
+import n from "./Accordion.module.js";
+import { AccordionItem as r } from "./AccordionItem/AccordionItem.js";
+import { AccordionTrigger as i } from "./AccordionTrigger/AccordionTrigger.js";
+import { AccordionContent as a } from "./AccordionContent/AccordionContent.js";
+import { getAccordionStyles as o, getNextValues as s, toArray as c } from "./Accordion.utils.js";
+import { useState as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/components/Accordion/Accordion.tsx
+var d = ({ value: r, defaultValue: i, onChange: a, children: d, type: f = "single", size: p = "m", withDivider: m = !1, duration: h, className: g, style: _, ref: v }) => {
+	let y = r !== void 0, [b, x] = l(() => c(i)), S = y ? c(r) : b;
+	return /* @__PURE__ */ u(t, {
+		value: {
+			open: (e) => S.includes(e),
+			toggle: (e) => {
+				let t = s(f, S, e);
+				y || x(t), f === "single" ? a?.(t[0] ?? "") : a?.(t);
+			},
+			size: p,
+			withDivider: m,
+			duration: h
+		},
+		children: /* @__PURE__ */ u("div", {
+			ref: v,
+			style: o(p, _),
+			className: e(n.root, g),
+			children: d
+		})
+	});
 };
+d.Item = r, d.Trigger = i, d.Content = a;
+//#endregion
+export { d as Accordion };

package/dist/components/Accordion/Accordion.module.js

@@ -0,0 +1,12 @@
+var e = {
+	root: "_root_1caww_1",
+	item: "_item_1caww_13",
+	withDivider: "_withDivider_1caww_18",
+	trigger: "_trigger_1caww_22",
+	triggerIcon: "_triggerIcon_1caww_37",
+	chevron: "_chevron_1caww_43",
+	chevronOpen: "_chevronOpen_1caww_47",
+	content: "_content_1caww_51"
+};
+//#endregion
+export { e as default };

package/dist/components/Accordion/Accordion.utils.js

@@ -1,10 +1,8 @@
-const a = (c, n) => {
-  const e = `var(--accordion-spacing-vertical-${c}-${n})`, o = `var(--accordion-spacing-between-${c})`;
-  return {
-    "--accordion-padding-y": e,
-    "--accordion-spacing-between": o
-  };
-};
-export {
-  a as getAccordionStyles
-};
+import { getSize as e } from "../../utils/get-size.js";
+//#region src/components/Accordion/Accordion.utils.ts
+var t = (t, n) => ({
+	"--accordion-spacing-vertical": e(t, "accordion-spacing-vertical"),
+	...n
+}), n = (e, t = []) => e === void 0 ? t : Array.isArray(e) ? e : e ? [e] : [], r = (e, t, n) => t.includes(n) ? t.filter((e) => e !== n) : e === "single" ? [n] : [...t, n];
+//#endregion
+export { t as getAccordionStyles, r as getNextValues, n as toArray };

package/dist/components/Accordion/AccordionContent/AccordionContent.js

@@ -0,0 +1,24 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import { useAccordionItemContext as t } from "../Accordion.context.js";
+import n from "../Accordion.module.js";
+import { Collapse as r } from "../../Collapse/Collapse.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/Accordion/AccordionContent/AccordionContent.tsx
+var a = ({ children: a, className: o, style: s, ref: c }) => {
+	let { isOpen: l, duration: u, contentId: d, triggerId: f } = t();
+	return /* @__PURE__ */ i(r, {
+		isOpen: l,
+		duration: u,
+		children: /* @__PURE__ */ i("div", {
+			id: d,
+			ref: c,
+			style: s,
+			role: "region",
+			"aria-labelledby": f,
+			className: e(n.content, o),
+			children: a
+		})
+	});
+};
+//#endregion
+export { a as AccordionContent };

package/dist/components/Accordion/AccordionItem/AccordionItem.js

@@ -0,0 +1,27 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import { AccordionItemContextProvider as t, useAccordionContext as n } from "../Accordion.context.js";
+import r from "../Accordion.module.js";
+import { useId as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/Accordion/AccordionItem/AccordionItem.tsx
+var o = ({ value: o, disabled: s = !1, children: c, className: l, style: u, ref: d }) => {
+	let { open: f, withDivider: p, duration: m } = n(), h = i(), g = `${h}-trigger`, _ = `${h}-content`;
+	return /* @__PURE__ */ a(t, {
+		value: {
+			value: o,
+			disabled: s,
+			isOpen: f(o),
+			duration: m,
+			triggerId: g,
+			contentId: _
+		},
+		children: /* @__PURE__ */ a("div", {
+			ref: d,
+			style: u,
+			className: e(r.item, p && r.withDivider, l),
+			children: c
+		})
+	});
+};
+//#endregion
+export { o as AccordionItem };

package/dist/components/Accordion/AccordionTrigger/AccordionTrigger.js

@@ -0,0 +1,28 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import { useAccordionContext as t, useAccordionItemContext as n } from "../Accordion.context.js";
+import r from "../Accordion.module.js";
+import { UnstyledButton as i } from "../../UnstyledButton/UnstyledButton.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { OutlineNavigationChevronDown as s } from "@alif-ui-test/icons";
+//#region src/components/Accordion/AccordionTrigger/AccordionTrigger.tsx
+var c = ({ chevron: c, children: l, className: u, style: d, ref: f }) => {
+	let { toggle: p } = t(), { value: m, disabled: h, isOpen: g, triggerId: _, contentId: v } = n();
+	return /* @__PURE__ */ o(i, {
+		id: _,
+		type: "button",
+		"aria-expanded": g,
+		"aria-controls": v,
+		disabled: h,
+		onClick: () => p(m),
+		className: e(r.trigger, u),
+		style: d,
+		ref: f,
+		children: [/* @__PURE__ */ a("div", { children: l }), /* @__PURE__ */ a("span", {
+			className: r.triggerIcon,
+			"aria-hidden": "true",
+			children: typeof c == "function" ? c(g) : c ?? /* @__PURE__ */ a(s, { className: e(r.chevron, g && r.chevronOpen) })
+		})]
+	});
+};
+//#endregion
+export { c as AccordionTrigger };

package/dist/components/Alert/Alert.js

@@ -1,42 +1,58 @@
-import { jsxs as m, jsx as o } from "react/jsx-runtime";
-import r from "./Alert.module.css.js";
-import { getAlertStyles as p } from "./Alert.utils.js";
-import { Typography as l } from "../Typography/Typography.js";
-import { SolidSystemClose as a } from "../../icons/components/SolidSystemClose.js";
-import { SolidSystemInfo as e } from "../../icons/components/SolidSystemInfo.js";
-import { SolidSystemCheckCircle as y } from "../../icons/components/SolidSystemCheckCircle.js";
-import { classNames as S } from "../../utils/class-names.js";
-const g = {
-  success: /* @__PURE__ */ o(y, {}),
-  error: /* @__PURE__ */ o(e, {}),
-  warning: /* @__PURE__ */ o(e, {}),
-  info: /* @__PURE__ */ o(e, {})
-}, j = ({
-  title: n,
-  description: t,
-  variant: s = "default",
-  type: i = "info",
-  showCloseIcon: c = !1,
-  showIcon: d = !0,
-  onClose: f
-}) => /* @__PURE__ */ m(
-  "div",
-  {
-    style: p(s, i),
-    className: S(
-      r.root,
-      s === "outlined" && r.outlined
-    ),
-    children: [
-      d && g[i],
-      /* @__PURE__ */ m("div", { className: r.container, children: [
-        /* @__PURE__ */ o(l, { category: "body", proportions: "mStrong", children: n }),
-        t && /* @__PURE__ */ o(l, { category: "body", proportions: "xs", children: t })
-      ] }),
-      c && /* @__PURE__ */ o(a, { onClick: f })
-    ]
-  }
-);
-export {
-  j as Alert
+import { classNames as e } from "../../utils/class-names.js";
+import { UnstyledButton as t } from "../UnstyledButton/UnstyledButton.js";
+import { useLocale as n } from "../../providers/hooks/useLocale/useLocale.js";
+import { useComponentId as r } from "../../hooks/useComponentId/useComponentId.js";
+import { Typography as i } from "../Typography/Typography.js";
+import a from "./Alert.module.js";
+import { ARIA_CLOSE_LABEL as o, getAlertStyles as s } from "./Alert.utils.js";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { OutlineSystemCheckCircle as u, OutlineSystemClose as d, OutlineSystemInfo as f } from "@alif-ui-test/icons";
+//#region src/components/Alert/Alert.tsx
+var p = {
+	success: /* @__PURE__ */ c(u, {}),
+	error: /* @__PURE__ */ c(f, {}),
+	warning: /* @__PURE__ */ c(f, {}),
+	info: /* @__PURE__ */ c(f, {})
+}, m = ({ title: u, description: f, variant: m = "light", color: h = "info", icon: g, onClose: _, className: v, style: y, id: b }) => {
+	let { locale: x } = n(), S = r(b), C = u ? `${S}-title` : void 0, w = f ? `${S}-description` : void 0, T = g === !1 ? null : g ?? p[h];
+	return /* @__PURE__ */ l("div", {
+		role: "alert",
+		id: S,
+		"aria-labelledby": u ? C : void 0,
+		"aria-describedby": f ? w : void 0,
+		style: {
+			...s(m, h),
+			...y
+		},
+		className: e(a.root, m === "outline" && a.outline, v),
+		children: [
+			T,
+			/* @__PURE__ */ l("div", {
+				className: a.container,
+				children: [u && /* @__PURE__ */ c(i, {
+					id: C,
+					element: "div",
+					variant: "body",
+					size: "m",
+					weight: "medium",
+					children: u
+				}), f && /* @__PURE__ */ c(i, {
+					id: w,
+					element: "div",
+					variant: "body",
+					size: "xs",
+					weight: "extra-light",
+					children: f
+				})]
+			}),
+			_ && /* @__PURE__ */ c(t, {
+				className: a.clearButton,
+				onClick: _,
+				"aria-label": o[x],
+				children: /* @__PURE__ */ c(d, {})
+			})
+		]
+	});
 };
+//#endregion
+export { m as Alert };

package/dist/components/Alert/Alert.module.js

@@ -0,0 +1,8 @@
+var e = {
+	root: "_root_8u4mx_1",
+	outline: "_outline_8u4mx_45",
+	container: "_container_8u4mx_57",
+	clearButton: "_clearButton_8u4mx_67"
+};
+//#endregion
+export { e as default };

package/dist/components/Alert/Alert.utils.js

@@ -1,9 +1,12 @@
-const o = (l, r) => ({
-  "--alert-bg-color": `var(--alert-bg-color-${l}-${r})`,
-  "--alert-border-color": `var(--alert-border-color-${r})`,
-  "--alert-icon-color": `var(--alert-icon-color-${l}-${r})`,
-  "--alert-label-color": `var(--alert-label-color-${l}-${r})`
-});
-export {
-  o as getAlertStyles
+//#region src/components/Alert/Alert.utils.ts
+var e = (e, t) => ({
+	"--alert-bg-color": `var(--alert-${e}-bg-color-${t})`,
+	"--alert-border-color": `var(--alert-${e}-border-color-${t})`,
+	"--alert-content-color": `var(--alert-${e}-content-color-${t})`
+}), t = {
+	en: "Close alert",
+	ru: "Закрыть оповещение",
+	tj: "Пӯшидани огоҳӣ"
 };
+//#endregion
+export { t as ARIA_CLOSE_LABEL, e as getAlertStyles };

package/dist/components/AppLayout/AppLayout.js

@@ -1,12 +1,20 @@
-import { jsxs as a, jsx as i } from "react/jsx-runtime";
-import r from "./AppLayout.module.css.js";
-const t = ({ navbar: e, aside: s, children: m }) => /* @__PURE__ */ a("div", { className: r.root, children: [
-  s && /* @__PURE__ */ i("div", { className: r.sidebar, children: s }),
-  /* @__PURE__ */ a("div", { className: r.mainContainer, children: [
-    e,
-    /* @__PURE__ */ i("div", { className: r.main, children: m })
-  ] })
-] });
-export {
-  t as AppLayout
-};
+import { classNames as e } from "../../utils/class-names.js";
+import t from "./AppLayout.module.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/AppLayout/AppLayout.tsx
+var i = ({ navbar: i, sidebar: a, children: o, className: s, ...c }) => /* @__PURE__ */ r("div", {
+	className: e(t.root, s),
+	...c,
+	children: [a, /* @__PURE__ */ r("div", {
+		className: t.content,
+		children: [i && /* @__PURE__ */ n("header", {
+			className: t.navbar,
+			children: i
+		}), /* @__PURE__ */ n("main", {
+			className: t.main,
+			children: o
+		})]
+	})]
+});
+//#endregion
+export { i as AppLayout };

package/dist/components/AppLayout/AppLayout.module.js

@@ -0,0 +1,8 @@
+var e = {
+	root: "_root_14qx4_1",
+	content: "_content_14qx4_6",
+	navbar: "_navbar_14qx4_13",
+	main: "_main_14qx4_17"
+};
+//#endregion
+export { e as default };

package/dist/components/Avatar/Avatar.js

@@ -1,41 +1,23 @@
-import { jsxs as v, jsx as a } from "react/jsx-runtime";
-import s from "./Avatar.module.css.js";
-import { getAvatarStyles as N } from "./Avatar.utils.js";
-import { classNames as t } from "../../utils/class-names.js";
-const b = ({
-  id: r,
-  src: o,
-  className: i,
-  badgeContent: e,
-  badgeContentType: m,
-  placeholderContent: c,
-  size: n = "m",
-  hasStatus: d = !1,
-  statusVariant: p = "online",
-  reversePosition: l = !1
-}) => {
-  const f = t(
-    s.badge,
-    m === "with-icons" && s.badgeWithIcon,
-    l && s.badgePositionTop
-  ), h = t(
-    s.status,
-    l && s.statusPositionBottom
-  );
-  return /* @__PURE__ */ v(
-    "div",
-    {
-      id: r,
-      className: t(s.root, i),
-      style: N(n, p, o),
-      children: [
-        d && /* @__PURE__ */ a("div", { className: h }),
-        !o && /* @__PURE__ */ a("span", { className: s.placeholder, children: c }),
-        e && /* @__PURE__ */ a("div", { className: f, children: e })
-      ]
-    }
-  );
-};
-export {
-  b as Avatar
-};
+import { classNames as e } from "../../utils/class-names.js";
+import t from "./Avatar.module.js";
+import { getAvatarStyles as n, getInitials as r } from "./Avatar.utils.js";
+import { AvatarGroup as i } from "./AvatarGroup/AvatarGroup.js";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/Avatar/Avatar.tsx
+var o = ({ size: i = "m", children: o, src: s, alt: c, imageProps: l, name: u, className: d, style: f, ref: p }) => /* @__PURE__ */ a("div", {
+	className: e(t.root, "uiFont", d),
+	style: n(i, f),
+	ref: p,
+	children: s ? /* @__PURE__ */ a("img", {
+		...l,
+		className: t.image,
+		src: s,
+		alt: c
+	}) : /* @__PURE__ */ a("span", {
+		className: t.placeholder,
+		children: o ?? (u && r(u))
+	})
+});
+o.Group = i;
+//#endregion
+export { o as Avatar };

package/dist/components/Avatar/Avatar.module.js

@@ -0,0 +1,7 @@
+var e = {
+	root: "_root_1fy70_1",
+	placeholder: "_placeholder_1fy70_55",
+	image: "_image_1fy70_66"
+};
+//#endregion
+export { e as default };

package/dist/components/Avatar/Avatar.utils.js

@@ -1,130 +1,25 @@
-import { getSize as t } from "../../utils/get-size.js";
-import { resolveTypography as e } from "../../utils/typography.js";
-const h = (a) => {
-  switch (a) {
-    case "xxl":
-      return e("display", "lStrong");
-    case "xl":
-      return e("heading", "h3");
-    case "l":
-      return e("body", "l");
-    case "m":
-      return e("body", "m");
-    case "s":
-      return e("body", "s");
-    case "xs":
-      return e("body", "xs");
-    case "xxs":
-      return e("description", "sTag");
-  }
-}, n = (a) => {
-  switch (a) {
-    case "xxl":
-      return e("heading", "h3");
-    case "xl":
-      return e("body", "s");
-    case "l":
-      return e("body", "xs");
-    case "m":
-      return e("description", "l");
-    case "s":
-      return e("description", "m");
-    case "xs":
-      return e("description", "s");
-    case "xxs":
-      return e("description", "sTag");
-  }
-}, c = (a) => {
-  switch (a) {
-    case "xxl":
-      return {
-        badgeBottom: "-5px",
-        badgeRight: "-5px"
-      };
-    case "xl":
-      return {
-        badgeBottom: "0",
-        badgeRight: "-5px"
-      };
-    case "l":
-      return {
-        badgeBottom: "-2px",
-        badgeRight: "-5px"
-      };
-    case "m":
-      return {
-        badgeBottom: "-2px",
-        badgeRight: "-5px"
-      };
-    case "s":
-      return {
-        badgeBottom: "0",
-        badgeRight: "-2px"
-      };
-    case "xs":
-      return {
-        badgeBottom: "0",
-        badgeRight: "-2px"
-      };
-    case "xxs":
-      return {
-        badgeBottom: "0",
-        badgeRight: "-2px"
-      };
-  }
-}, o = (a, i, d) => {
-  const r = h(a), g = n(a), s = c(a);
-  return {
-    "--avatar-width": t(a, "avatar-width"),
-    "--avatar-height": t(a, "avatar-height"),
-    "--avatar-border-radius": t(a, "avatar-border-radius"),
-    "--avatar-font-family": r.fontFamily,
-    "--avatar-font-size": r.fontSize,
-    "--avatar-font-weight": r.fontWeight,
-    "--avatar-line-height": r.lineHeight,
-    "--avatar-letter-spacing": r.letterSpacing,
-    "--avatar-icon-width": t(a, "avatar-icon-width"),
-    "--avatar-icon-height": t(a, "avatar-icon-height"),
-    "--avatar-border-width": t(a, "avatar-border-width"),
-    "--avatar-status-border-width": t(
-      a,
-      "avatar-status-border-width"
-    ),
-    "--avatar-badge-width": t(a, "avatar-badge-width"),
-    "--avatar-badge-height": t(a, "avatar-badge-height"),
-    "--avatar-badge-icon-width": t(
-      a,
-      "avatar-badge-icon-width"
-    ),
-    "--avatar-badge-icon-height": t(
-      a,
-      "avatar-badge-icon-height"
-    ),
-    "--avatar-status-width": t(a, "avatar-status-width"),
-    "--avatar-status-height": t(a, "avatar-status-height"),
-    "--avatar-status-bg-color": `var(--avatar-status-bg-color-${i})`,
-    "--avatar-status-border-color": `var(--avatar-status-border-color-${i})`,
-    "--avatar-badge-spacing-vertical": t(
-      a,
-      "avatar-badge-spacing-vertical"
-    ),
-    "--avatar-badge-spacing-horizontal": t(
-      a,
-      "avatar-badge-spacing-horizontal"
-    ),
-    "--avatar-badge-font-family": g.fontFamily,
-    "--avatar-badge-font-size": g.fontSize,
-    "--avatar-badge-font-weight": g.fontWeight,
-    "--avatar-badge-line-height": g.lineHeight,
-    "--avatar-badge-letter-spacing": g.letterSpacing,
-    "--avatar-badge-bottom": s.badgeBottom,
-    "--avatar-badge-right": s.badgeRight,
-    backgroundImage: d ? `url(${d})` : "none",
-    backgroundSize: "cover",
-    backgroundPosition: "center",
-    backgroundRepeat: "no-repeat"
-  };
-};
-export {
-  o as getAvatarStyles
+import { getSize as e } from "../../utils/get-size.js";
+import { resolveTypography as t } from "../../utils/typography.js";
+//#region src/components/Avatar/Avatar.utils.ts
+var n = (e) => {
+	switch (e) {
+		case "xxl": return t("display", "l", "bold");
+		case "xl": return t("heading", "h3", "bold");
+		case "l": return t("body", "l", "regular");
+		case "m": return t("body", "m", "regular");
+		case "s": return t("body", "s", "regular");
+		case "xs": return t("body", "xs", "regular");
+		case "xxs": return t("description", "s", "regular");
+	}
+}, r = (t, r) => ({
+	...n(t),
+	"--avatar-size": e(t, "avatar-size"),
+	"--avatar-icon-size": e(t, "avatar-icon-size"),
+	"--avatar-border-width": e(t, "avatar-border-width"),
+	...r
+}), i = (e) => {
+	let t = e.split(" ").filter(Boolean);
+	return t.length === 1 ? t[0].slice(0, 1).toUpperCase() : t.map((e) => e[0]).slice(0, 2).join("").toUpperCase();
 };
+//#endregion
+export { r as getAvatarStyles, i as getInitials };

package/dist/components/Avatar/AvatarGroup/AvatarGroup.js

@@ -1,12 +1,11 @@
-import { jsx as a } from "react/jsx-runtime";
-import e from "./AvatarGroup.module.css.js";
-import { getSize as s } from "../../../utils/get-size.js";
-const n = ({ children: r, spacing: t = "m" }) => {
-  const o = {
-    "--ag-spacing": s(t, "avatar-group-spacing-between")
-  };
-  return /* @__PURE__ */ a("div", { style: o, className: e.root, children: r });
-};
-export {
-  n as AvatarGroup
-};
+import { getSize as e } from "../../../utils/get-size.js";
+import t from "./AvatarGroup.module.js";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/Avatar/AvatarGroup/AvatarGroup.tsx
+var r = ({ children: r, spacing: i = "m" }) => /* @__PURE__ */ n("div", {
+	style: { "--ag-spacing": e(i, "avatar-group-spacing-between") },
+	className: t.root,
+	children: r
+});
+//#endregion
+export { r as AvatarGroup };

package/dist/components/Avatar/AvatarGroup/AvatarGroup.module.js

@@ -0,0 +1,3 @@
+var e = { root: "_root_14o9w_1" };
+//#endregion
+export { e as default };