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

package/dist/components/Slider/SliderBase/SliderBase.js

@@ -1,38 +1,25 @@
-import { jsxs as e, jsx as o } from "react/jsx-runtime";
-import m from "../Slider.module.css.js";
-import { Track as N } from "../Track/Track.js";
-import { Label as d } from "../Label/Label.js";
-import { Marks as h } from "../Marks/Marks.js";
-import { classNames as i } from "../../../utils/class-names.js";
-const B = ({
-  label: t = "",
-  counter: a = "",
-  disabled: r = !1,
-  className: l,
-  children: c,
-  onTrackClick: f,
-  rangeStyle: n,
-  marks: s,
-  min: p,
-  max: x
-}) => /* @__PURE__ */ e("div", { className: i(m.root, l), children: [
-  /* @__PURE__ */ o(d, { label: t, counter: a, disabled: r }),
-  /* @__PURE__ */ e(
-    "div",
-    {
-      className: i(
-        m.sliderContainer,
-        r && m.disabled
-      ),
-      onClick: f,
-      children: [
-        c,
-        /* @__PURE__ */ o(N, { rangeStyle: n, disabled: r })
-      ]
-    }
-  ),
-  s && /* @__PURE__ */ o(h, { marks: s, min: p, max: x, disabled: r })
-] });
-export {
-  B as SliderBase
-};
+import { classNames as e } from "../../../utils/class-names.js";
+import t from "../Slider.module.js";
+import { Track as n } from "../Track/Track.js";
+import { Marks as r } from "../Marks/Marks.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/Slider/SliderBase/SliderBase.tsx
+var o = ({ disabled: o = !1, className: s, children: c, onTrackClick: l, rangeStyle: u, marks: d, min: f, max: p, ...m }) => /* @__PURE__ */ a("div", {
+	...m,
+	className: e(t.root, s),
+	children: [/* @__PURE__ */ a("div", {
+		className: e(t.sliderContainer, o && t.disabled),
+		onClick: l,
+		children: [c, /* @__PURE__ */ i(n, {
+			rangeStyle: u,
+			disabled: o
+		})]
+	}), d && /* @__PURE__ */ i(r, {
+		marks: d,
+		min: f,
+		max: p,
+		disabled: o
+	})]
+});
+//#endregion
+export { o as SliderBase };

package/dist/components/Slider/Thumb/Thumb.js

@@ -1,70 +1,59 @@
-import { jsx as u } from "react/jsx-runtime";
-import { useRef as v, useState as E, useEffect as P } from "react";
-import { getPercent as h, calculateSliderValue as k } from "../Slider.utils.js";
-import p from "../Slider.module.css.js";
-import { Tooltip as L } from "../../Tooltip/Tooltip.js";
-import { classNames as A } from "../../../utils/class-names.js";
-const V = ({
-  disabled: r,
-  onChange: o,
-  value: n,
-  min: i,
-  max: s,
-  step: c,
-  withTooltip: l
-}) => {
-  const f = v(null), [m, w] = E(!1);
-  P(() => {
-    if (!m || r || !o) return;
-    const e = f.current?.parentElement;
-    if (!e) return;
-    const t = (d) => {
-      const D = e.getBoundingClientRect(), y = k(d, i, s, c, D);
-      o(y);
-    }, a = () => w(!1);
-    return window.addEventListener("pointermove", t), window.addEventListener("pointerup", a), () => {
-      window.removeEventListener("pointermove", t), window.removeEventListener("pointerup", a);
-    };
-  }, [m, r, o, i, s, c]);
-  const g = (e) => {
-    if (!o || r) return;
-    let t = n;
-    if (e.key === "ArrowRight" || e.key === "ArrowUp")
-      t = Math.min(n + c, s);
-    else if (e.key === "ArrowLeft" || e.key === "ArrowDown")
-      t = Math.max(n - c, i);
-    else
-      return;
-    e.preventDefault(), t !== n && o(t);
-  };
-  return /* @__PURE__ */ u(
-    "div",
-    {
-      ref: f,
-      className: A(p.thumb, r && p.disabled),
-      tabIndex: r ? -1 : 0,
-      onPointerDown: (e) => {
-        r || (f.current?.focus(), w(!0), l || e.currentTarget.setPointerCapture(e.pointerId));
-      },
-      onKeyDown: g,
-      style: {
-        left: `${h(n, i, s)}%`
-      },
-      children: l && /* @__PURE__ */ u(L, { label: String(n), position: "top", children: /* @__PURE__ */ u(
-        "div",
-        {
-          className: p.tooltipTrigger,
-          onPointerDown: (e) => (
-            // The Element will continue to receive all pointer events (like pointermove, pointerup, etc.),
-            // even if the pointer moves outside the element’s bounds.
-            // So it prevents the tooltip from closing.
-            e.currentTarget.setPointerCapture(e.pointerId)
-          )
-        }
-      ) })
-    }
-  );
-};
-export {
-  V as Thumb
+import { classNames as e } from "../../../utils/class-names.js";
+import { Tooltip as t } from "../../Tooltip/Tooltip.js";
+import { calculateSliderValue as n, getPercent as r } from "../Slider.utils.js";
+import i from "../Slider.module.js";
+import { useEffect as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/Slider/Thumb/Thumb.tsx
+var c = ({ disabled: c, onChange: l, value: u, min: d, max: f, step: p, withTooltip: m, ref: h }) => {
+	let [g, _] = o(!1);
+	return a(() => {
+		if (!g || c || !l) return;
+		let e = h.current?.parentElement;
+		if (!e) return;
+		let t = (t) => {
+			l(n(t, d, f, p, e.getBoundingClientRect()));
+		}, r = () => _(!1);
+		return window.addEventListener("pointermove", t), window.addEventListener("pointerup", r), () => {
+			window.removeEventListener("pointermove", t), window.removeEventListener("pointerup", r);
+		};
+	}, [
+		g,
+		c,
+		l,
+		d,
+		f,
+		p,
+		h
+	]), /* @__PURE__ */ s("div", {
+		role: "slider",
+		"aria-valuemin": d,
+		"aria-valuemax": f,
+		"aria-valuenow": u,
+		ref: h,
+		className: e(i.thumb, c && i.disabled),
+		tabIndex: c ? -1 : 0,
+		onPointerDown: (e) => {
+			c || (h.current?.focus(), _(!0), m || e.currentTarget.setPointerCapture(e.pointerId));
+		},
+		onKeyDown: (e) => {
+			if (!l || c) return;
+			let t = u;
+			if (e.key === "ArrowRight" || e.key === "ArrowUp") t = Math.min(u + p, f);
+			else if (e.key === "ArrowLeft" || e.key === "ArrowDown") t = Math.max(u - p, d);
+			else return;
+			e.preventDefault(), t !== u && l(t);
+		},
+		style: { left: `${r(u, d, f)}%` },
+		children: m && /* @__PURE__ */ s(t, {
+			label: String(u),
+			position: "top",
+			children: /* @__PURE__ */ s("div", {
+				className: i.tooltipTrigger,
+				onPointerDown: (e) => e.currentTarget.setPointerCapture(e.pointerId)
+			})
+		})
+	});
 };
+//#endregion
+export { c as Thumb };

package/dist/components/Slider/Track/Track.js

@@ -1,16 +1,16 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import s from "../Slider.module.css.js";
-import { classNames as d } from "../../../utils/class-names.js";
-const t = ({ rangeStyle: r, disabled: a }) => {
-  const i = d(
-    s.sliderRange,
-    a && s.sliderDisabledRange
-  );
-  return /* @__PURE__ */ l("div", { className: s.slider, children: [
-    /* @__PURE__ */ e("div", { className: s.sliderTrack }),
-    /* @__PURE__ */ e("div", { className: i, style: r })
-  ] });
-};
-export {
-  t as Track
+import { classNames as e } from "../../../utils/class-names.js";
+import t from "../Slider.module.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/components/Slider/Track/Track.tsx
+var i = ({ rangeStyle: i, disabled: a }) => {
+	let o = e(t.sliderRange, a && t.sliderDisabledRange);
+	return /* @__PURE__ */ r("div", {
+		className: t.slider,
+		children: [/* @__PURE__ */ n("div", { className: t.sliderTrack }), /* @__PURE__ */ n("div", {
+			className: o,
+			style: i
+		})]
+	});
 };
+//#endregion
+export { i as Track };

package/dist/components/Snackbar/Snackbar.js

@@ -1,105 +1,26 @@
-import { jsx as r, jsxs as f } from "react/jsx-runtime";
-import { useState as N } from "react";
-import e from "./Snackbar.module.css.js";
-import { getSnackbarStyles as g, getSnackbarIconStyles as v } from "./Snackbar.utils.js";
-import { Typography as p } from "../Typography/Typography.js";
-import { FunctionButton as w } from "../FunctionButton/FunctionButton.js";
-import { SnackbarTimer as x } from "./SnackbarTimer/SnackbarTimer.js";
-import { SolidSystemExclamation as E } from "../../icons/components/SolidSystemExclamation.js";
-import { SolidSystemRemoveCircle as T } from "../../icons/components/SolidSystemRemoveCircle.js";
-import { classNames as I } from "../../utils/class-names.js";
-import { OutlineSystemClose as B } from "../../icons/components/OutlineSystemClose.js";
-import { SolidSystemInfo as j } from "../../icons/components/SolidSystemInfo.js";
-import { SolidSystemCheckCircle as A } from "../../icons/components/SolidSystemCheckCircle.js";
-const O = {
-  success: /* @__PURE__ */ r(A, {}),
-  error: /* @__PURE__ */ r(T, {}),
-  warning: /* @__PURE__ */ r(E, {}),
-  info: /* @__PURE__ */ r(j, {})
-}, R = { show: () => {
-} }, M = ({
-  position: i = "top-right"
-}) => {
-  const [b, m] = N([]), l = (t) => {
-    const s = document.getElementById(`snackbar-${t}`);
-    s && (s.classList.add(e.snackbarExit), setTimeout(() => {
-      m((a) => a.filter((o) => o.id !== t));
-    }, 100));
-  }, k = ({
-    duration: t = 3e3,
-    autoHide: s = !0,
-    ...a
-  }) => {
-    const o = {
-      id: Date.now(),
-      ...a,
-      duration: t
-    };
-    m(
-      (n) => i.includes("top") ? [o, ...n] : [...n, o]
-    ), s && setTimeout(() => l(o.id), t);
-  };
-  return R.show = k, /* @__PURE__ */ r("div", { className: e.root, style: g(i), children: b.map(
-    ({
-      id: t,
-      title: s,
-      subtitle: a,
-      withCloseButton: o,
-      withTimer: n,
-      leftSlot: y,
-      rightSlot: S,
-      type: c,
-      actions: h,
-      className: u,
-      duration: C
-    }) => {
-      const d = c ? O[c] : n ? /* @__PURE__ */ r(x, { duration: C }) : y;
-      return /* @__PURE__ */ f(
-        "div",
-        {
-          style: v(c),
-          id: `snackbar-${t}`,
-          className: I(e.snackbar, u),
-          children: [
-            d && /* @__PURE__ */ r("div", { className: e.leftSlot, children: d }),
-            /* @__PURE__ */ f("div", { className: e.titles, children: [
-              /* @__PURE__ */ r(
-                p,
-                {
-                  className: e.title,
-                  category: "body",
-                  proportions: "mStrong",
-                  children: s
-                }
-              ),
-              a && /* @__PURE__ */ r(
-                p,
-                {
-                  className: e.subtitle,
-                  category: "body",
-                  proportions: "xs",
-                  children: a
-                }
-              ),
-              h
-            ] }),
-            S,
-            o && !S && /* @__PURE__ */ r(
-              w,
-              {
-                variant: "tertiary",
-                onClick: () => l(t),
-                children: /* @__PURE__ */ r(B, {})
-              }
-            )
-          ]
-        },
-        t
-      );
-    }
-  ) });
-};
-export {
-  M as SnackbarContainer,
-  R as snackbar
+import { Portal as e } from "../Portal/Portal.js";
+import { POSITIONS as t, dismissSnackbar as n, getContainerStyles as r, getSnapshot as i, setSnackbarDefaults as a, subscribe as o } from "./Snackbar.utils.js";
+import { SnackbarSlot as s } from "./SnackbarSlot/SnackbarSlot.js";
+import { useEffect as c, useSyncExternalStore as l } from "react";
+import { jsx as u } from "react/jsx-runtime";
+//#region src/components/Snackbar/Snackbar.tsx
+var d = ({ position: d, duration: f }) => {
+	let p = l(o, i);
+	return c(() => {
+		a({
+			...d !== void 0 && { position: d },
+			...f !== void 0 && { duration: f }
+		});
+	}, [d, f]), /* @__PURE__ */ u(e, { children: t.map((e) => {
+		let t = p.filter((t) => t.position === e);
+		return t.length === 0 ? null : /* @__PURE__ */ u("div", {
+			style: r(e),
+			children: t.map((e) => /* @__PURE__ */ u(s, {
+				item: e,
+				onDismiss: n
+			}, e.id))
+		}, e);
+	}) });
 };
+//#endregion
+export { d as Snackbar };

package/dist/components/Snackbar/Snackbar.module.js

@@ -0,0 +1,20 @@
+var e = {
+	root: "_root_gtez6_37",
+	scaleIn: "_scaleIn_gtez6_66",
+	"scale-in": "_scale-in_gtez6_1",
+	scaleOut: "_scaleOut_gtez6_71",
+	"scale-out": "_scale-out_gtez6_1",
+	leftSlot: "_leftSlot_gtez6_75",
+	content: "_content_gtez6_85",
+	title: "_title_gtez6_94",
+	description: "_description_gtez6_98",
+	typeIcon: "_typeIcon_gtez6_102",
+	"icon-pop": "_icon-pop_gtez6_1",
+	success: "_success_gtez6_108",
+	error: "_error_gtez6_112",
+	warning: "_warning_gtez6_116",
+	info: "_info_gtez6_120",
+	timer: "_timer_gtez6_124"
+};
+//#endregion
+export { e as default };

package/dist/components/Snackbar/Snackbar.utils.js

@@ -1,52 +1,152 @@
-const n = (a) => ({
-  "--snackbar-icon-color": a ? `var(--snackbar-icon-color-${a})` : "var(--snackbar-icon-color-default)"
-}), r = (a) => {
-  const t = {
-    top: "",
-    bottom: "",
-    right: "",
-    left: "",
-    transform: "",
-    animationTransform: "",
-    alignItems: ""
-  };
-  switch (a) {
-    case "top-right": {
-      t.top = "0", t.right = "0", t.transform = "translateX(0)", t.animationTransform = "translateX(50px)", t.alignItems = "end";
-      break;
-    }
-    case "top-center": {
-      t.top = "0", t.left = "50%", t.transform = "translateX(-50%)", t.animationTransform = "translateY(-50px)", t.alignItems = "center";
-      break;
-    }
-    case "top-left": {
-      t.top = "0", t.left = "0", t.transform = "translateX(0)", t.animationTransform = "translateX(-50px)", t.alignItems = "start";
-      break;
-    }
-    case "bottom-left": {
-      t.bottom = "0", t.left = "0", t.transform = "translateX(0)", t.animationTransform = "translateX(-50px)", t.alignItems = "start";
-      break;
-    }
-    case "bottom-center": {
-      t.bottom = "0", t.left = "50%", t.transform = "translateX(-50%)", t.animationTransform = "translateY(50px)", t.alignItems = "center";
-      break;
-    }
-    case "bottom-right": {
-      t.bottom = "0", t.right = "0", t.transform = "translateX(0)", t.animationTransform = "translateX(50px)", t.alignItems = "end";
-      break;
-    }
-  }
-  return {
-    "--snackbar-position-top": t.top,
-    "--snackbar-position-bottom": t.bottom,
-    "--snackbar-position-left": t.left,
-    "--snackbar-position-right": t.right,
-    "--snackbar-position-transform": t.transform,
-    "--snackbar-position-animation-transform": t.animationTransform,
-    "--snackbar-align-items": t.alignItems
-  };
-};
-export {
-  n as getSnackbarIconStyles,
-  r as getSnackbarStyles
+import { getDefaultZIndex as e } from "../../utils/get-default-z-index.js";
+//#region src/components/Snackbar/Snackbar.utils.ts
+var t = {
+	position: "top-right",
+	duration: 4e3
+}, n = (e) => {
+	t = {
+		...t,
+		...e
+	};
+}, r = [], i = /* @__PURE__ */ new Set(), a = 0, o = () => {
+	let e = [...r];
+	i.forEach((t) => t(e));
+}, s = (e) => {
+	r = [e, ...r], o();
+}, c = (e) => {
+	r = r.map((t) => t.id === e ? {
+		...t,
+		mounted: !1
+	} : t), o();
+}, l = (e) => {
+	r = r.filter((t) => t.id !== e), o();
+}, u = (e, t) => {
+	r = r.map((n) => n.id === e ? {
+		...n,
+		...t
+	} : n), o();
+}, d = (e) => (i.add(e), () => {
+	i.delete(e);
+}), f = () => r, p = () => `snackbar-${++a}`, m = (e, t) => {
+	t > 0 && setTimeout(() => c(e), t);
+}, h = (e, n = {}, i) => {
+	let a = n.id ?? p(), o = n.duration ?? t.duration, l = n.position ?? t.position, u = () => {
+		s({
+			id: a,
+			message: e,
+			duration: o,
+			position: l,
+			mounted: !0,
+			type: i,
+			leftSlot: n.leftSlot,
+			description: n.description,
+			rightSlot: n.rightSlot,
+			actionSlot: n.actionSlot,
+			style: n.style,
+			withCloseButton: n.withCloseButton ?? !0,
+			withTimer: n.withTimer ?? !1
+		}), m(a, o);
+	};
+	return r.some((e) => e.id === a) ? (c(a), setTimeout(() => u(), 200)) : u(), a;
+}, g = Object.assign((e, t) => h(e, t), {
+	success: (e, t) => h(e, t, "success"),
+	error: (e, t) => h(e, t, "error"),
+	warning: (e, t) => h(e, t, "warning"),
+	info: (e, t) => h(e, t, "info"),
+	loading: (e, n) => {
+		let r = n?.id ?? p();
+		return s({
+			id: r,
+			message: e,
+			duration: 0,
+			position: n?.position ?? t.position,
+			mounted: !0,
+			loading: !0,
+			withCloseButton: n?.withCloseButton ?? !1
+		}), r;
+	},
+	promise(e, n, r) {
+		let i = g.loading(n.loading, r), a = r?.duration ?? t.duration, o = (e, t) => {
+			e === void 0 ? c(i) : (u(i, {
+				...r,
+				message: e,
+				type: t,
+				loading: !1,
+				duration: a
+			}), m(i, a));
+		}, s = typeof e == "function" ? e() : e;
+		return s.then((e) => {
+			o(typeof n.success == "function" ? n.success(e) : n.success, "success");
+		}, (e) => {
+			o(typeof n.error == "function" ? n.error(e) : n.error, "error");
+		}), s;
+	},
+	custom(e, n) {
+		let r = n?.id ?? p(), i = n?.duration ?? t.duration, a = n?.position ?? t.position, o = typeof e == "function";
+		return s({
+			id: r,
+			message: o ? null : e,
+			render: o ? e : void 0,
+			duration: i,
+			position: a,
+			mounted: !0,
+			custom: !0
+		}), m(r, i), r;
+	},
+	dismiss: (e) => {
+		e ? c(e) : r.forEach((e) => c(e.id));
+	}
+}), _ = [
+	"top-left",
+	"top-center",
+	"top-right",
+	"bottom-left",
+	"bottom-center",
+	"bottom-right"
+], v = (t) => {
+	let n = t.startsWith("bottom"), r = t.endsWith("center"), i = t.endsWith("right"), a = {
+		position: "fixed",
+		zIndex: e("notifications"),
+		display: "flex",
+		alignItems: r ? "center" : i ? "flex-end" : "flex-start",
+		flexDirection: n ? "column-reverse" : "column",
+		gap: "0.6rem",
+		pointerEvents: "none"
+	};
+	switch (t) {
+		case "top-right": return {
+			...a,
+			top: 16,
+			right: 16
+		};
+		case "top-left": return {
+			...a,
+			top: 16,
+			left: 16
+		};
+		case "top-center": return {
+			...a,
+			top: 16,
+			left: "50%",
+			transform: "translateX(-50%)"
+		};
+		case "bottom-right": return {
+			...a,
+			bottom: 16,
+			right: 16
+		};
+		case "bottom-left": return {
+			...a,
+			bottom: 16,
+			left: 16
+		};
+		case "bottom-center": return {
+			...a,
+			bottom: 16,
+			left: "50%",
+			transform: "translateX(-50%)"
+		};
+	}
 };
+//#endregion
+export { _ as POSITIONS, c as dismissSnackbar, v as getContainerStyles, f as getSnapshot, l as removeSnackbar, n as setSnackbarDefaults, g as snackbar, d as subscribe };

package/dist/components/Snackbar/SnackbarCard/SnackbarCard.js

@@ -0,0 +1,75 @@
+import { resolveTypography as e } from "../../../utils/typography.js";
+import { classNames as t } from "../../../utils/class-names.js";
+import { useLocale as n } from "../../../providers/hooks/useLocale/useLocale.js";
+import { Loader as r } from "../../Loader/Loader.js";
+import { Button as i } from "../../Button/Button.js";
+import a from "../Snackbar.module.js";
+import { SnackbarTimer as o } from "../SnackbarTimer/SnackbarTimer.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { OutlineSystemClose as l, SolidSystemAlertCircle as u, SolidSystemCheckCircle as d, SolidSystemInfo as f, SolidSystemRemoveCircle as p } from "@alif-ui-test/icons";
+//#region src/components/Snackbar/SnackbarCard/SnackbarCard.tsx
+var m = {
+	success: /* @__PURE__ */ s(d, {}),
+	error: /* @__PURE__ */ s(p, {}),
+	warning: /* @__PURE__ */ s(u, {}),
+	info: /* @__PURE__ */ s(f, {})
+}, h = {
+	en: "Close notification",
+	ru: "Закрыть уведомление",
+	tj: "Пӯшидани огоҳӣ"
+}, g = ({ item: u, onDismiss: d }) => {
+	let { locale: f } = n(), { id: p, message: g, type: _, leftSlot: v, description: y, rightSlot: b, actionSlot: x, withCloseButton: S = !0, loading: C, custom: w, render: T, mounted: E } = u;
+	if (w) {
+		let e = T ? T(p) : g;
+		return /* @__PURE__ */ s("div", {
+			role: "status",
+			className: t(a.scaleIn, !E && a.scaleOut),
+			children: e
+		});
+	}
+	let D = C ? /* @__PURE__ */ s(r, {
+		size: "s",
+		color: "secondary"
+	}) : v === null ? null : v === void 0 ? _ ? /* @__PURE__ */ s("span", {
+		"aria-hidden": "true",
+		className: t(a.typeIcon, a[_]),
+		children: m[_]
+	}) : u.withTimer && u.duration > 0 ? /* @__PURE__ */ s(o, { duration: u.duration }) : null : /* @__PURE__ */ s("div", {
+		className: a.leftSlot,
+		children: v
+	});
+	return /* @__PURE__ */ c("div", {
+		role: "status",
+		style: u.style,
+		className: t(a.root, a.scaleIn, !E && a.scaleOut),
+		children: [
+			D,
+			/* @__PURE__ */ c("div", {
+				className: a.content,
+				children: [
+					/* @__PURE__ */ s("div", {
+						className: t(a.title, "uiFont"),
+						style: e("body", "m", "medium"),
+						children: g
+					}),
+					y && /* @__PURE__ */ s("div", {
+						className: t(a.description, "uiFont"),
+						style: e("body", "s"),
+						children: y
+					}),
+					x
+				]
+			}),
+			b,
+			S && /* @__PURE__ */ s(i, {
+				variant: "function",
+				color: "tertiary",
+				onClick: () => d(p),
+				"aria-label": h[f],
+				children: /* @__PURE__ */ s(l, {})
+			})
+		]
+	});
+};
+//#endregion
+export { g as SnackbarCard };