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

package/dist/components/FileUploader/FileUploader.js

@@ -1,131 +1,91 @@
-import { jsx as n, jsxs as p, Fragment as q } from "react/jsx-runtime";
-import { useState as N, useRef as G } from "react";
-import t from "./FileUploader.module.css.js";
-import { isValidFileCount as H, ERROR_TEXT as d, isValidFileSize as J, isValidFileType as K } from "./FileUploader.utils.js";
-import { useLocale as Q } from "../../providers/hooks/useLocale/useLocale.js";
-import { OutlineSystemUploadCloud as W } from "../../icons/components/OutlineSystemUploadCloud.js";
-import { Typography as V } from "../Typography/Typography.js";
-import { Button as Y } from "../Button/Button.js";
-import { classNames as u } from "../../utils/class-names.js";
-const le = ({
-  onFilesChange: O,
-  files: g,
-  width: R,
-  hasError: S,
-  title: b,
-  description: k,
-  buttonText: E,
-  errorText: z,
-  isMultiple: h,
-  allowedExtensions: L,
-  allowedMimeTypes: j,
-  maxFileSize: y = 20,
-  maxCount: v = 5,
-  className: A,
-  disabled: o = !1,
-  variant: I = "desktop"
-}) => {
-  const { locale: c } = Q(), [U, f] = N(!1), [m, s] = N(""), x = G(null), a = I === "mobile", D = z || m || k, w = u(
-    t.uploader,
-    U && !o && t.dragOver,
-    (S || m) && t.error,
-    o && t.disabled
-  ), B = (e) => {
-    const r = Array.from(e), l = h ? [...g, ...r] : r;
-    O(l), s("");
-  }, M = (e) => {
-    if (e.preventDefault(), e.stopPropagation(), o) return;
-    f(!1);
-    const r = e.dataTransfer.files;
-    r && T(r);
-  }, P = (e) => {
-    e.preventDefault(), f(!0);
-  }, X = () => {
-    f(!1);
-  }, _ = (e) => {
-    if (o) return;
-    const r = e.target.files;
-    r && (T(r), e.target.value = "");
-  }, T = (e) => {
-    const r = g.length + e.length;
-    if (!H(r, v)) {
-      s(d.maxCountText[c](v));
-      return;
-    }
-    const l = Array.from(e).filter((i) => {
-      const F = J(i, y), C = K(
-        i,
-        L,
-        j
-      );
-      return F || s(
-        d.maxFileSizeText[c](i.name, y)
-      ), C || s(d.extText[c](i.name)), F && C;
-    });
-    l.length && B(l);
-  };
-  return /* @__PURE__ */ n("div", { className: u(t.root, A), style: { width: R }, children: /* @__PURE__ */ p(
-    "div",
-    {
-      className: a ? "" : w,
-      onDrop: M,
-      onDragOver: P,
-      onDragLeave: X,
-      onClick: () => x.current?.click(),
-      children: [
-        /* @__PURE__ */ n(
-          "input",
-          {
-            type: "file",
-            "data-testid": "file-input",
-            ref: x,
-            multiple: h,
-            onChange: _,
-            hidden: !0,
-            disabled: o
-          }
-        ),
-        /* @__PURE__ */ p("div", { className: t.text, children: [
-          !a && /* @__PURE__ */ p(q, { children: [
-            /* @__PURE__ */ n(W, {}),
-            /* @__PURE__ */ n(
-              V,
-              {
-                category: "body",
-                proportions: "lStrong",
-                className: t.labelText,
-                children: b
-              }
-            )
-          ] }),
-          D && /* @__PURE__ */ n(
-            V,
-            {
-              category: "body",
-              proportions: "m",
-              className: u(
-                t.labelDescription,
-                m && t.error,
-                o && t.disabled
-              ),
-              children: D
-            }
-          ),
-          /* @__PURE__ */ n(
-            Y,
-            {
-              size: a ? "m" : "s",
-              variant: "outline",
-              className: a ? t.btnMobile : "",
-              disabled: o,
-              children: E
-            }
-          )
-        ] })
-      ]
-    }
-  ) });
-};
-export {
-  le as FileUploader
+import { classNames as e } from "../../utils/class-names.js";
+import { syncRefs as t } from "../../utils/sync-refs.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 { Typography as a } from "../Typography/Typography.js";
+import o from "./FileUploader.module.js";
+import { BUTTON_TEXT as s, ERROR_TEXT as c, buildAccept as l, isValidFileCount as u, isValidFileSize as d, isValidFileType as f } from "./FileUploader.utils.js";
+import { useRef as p, useState as m } from "react";
+import { jsx as h, jsxs as g } from "react/jsx-runtime";
+import { OutlineSystemUploadCloud as _ } from "@alif-ui-test/icons";
+//#region src/components/FileUploader/FileUploader.tsx
+var v = ({ value: v, onChange: y, title: b, description: x, buttonText: S, multiple: C, allowedExtensions: w = [], allowedMimeTypes: T = [], maxFileSize: E = 20, maxCount: D = 5, hasError: O, errorText: k, disabled: A = !1, loading: j = !1, className: M, style: N, ref: P }) => {
+	let F = p(null), [I, L] = m(!1), [R, z] = m(""), { locale: B } = n(), V = k || R || x, H = S ?? s[B], U = A || j, W = e(o.root, I && !U && o.dragOver, (O || R) && o.error, U && o.disabled, M), G = (e) => {
+		let t = Array.from(e);
+		y(C ? [...v, ...t] : t), z("");
+	}, K = (e) => {
+		if (!u((C ? v.length : 0) + e.length, D)) {
+			z(c.maxCountText[B](D));
+			return;
+		}
+		let t = "", n = Array.from(e).filter((e) => {
+			let n = d(e, E), r = f(e, w, T);
+			return !n && !t && (t = c.maxFileSizeText[B](e.name, E)), !r && !t && (t = c.extText[B](e.name)), n && r;
+		});
+		t && z(t), n.length && G(n);
+	};
+	return /* @__PURE__ */ g("div", {
+		className: W,
+		style: N,
+		role: "button",
+		"aria-label": b,
+		"aria-disabled": U,
+		"aria-busy": j,
+		onClick: () => F.current?.click(),
+		onDrop: (e) => {
+			if (e.preventDefault(), e.stopPropagation(), U) return;
+			L(!1);
+			let t = e.dataTransfer.files;
+			t && K(t);
+		},
+		onDragOver: (e) => {
+			e.preventDefault(), U || L(!0);
+		},
+		onDragLeave: () => {
+			L(!1);
+		},
+		children: [/* @__PURE__ */ h("input", {
+			type: "file",
+			hidden: !0,
+			"data-testid": "file-input",
+			ref: t(F, P),
+			multiple: C,
+			accept: l(w, T),
+			disabled: U,
+			onChange: (e) => {
+				if (U) return;
+				let t = e.target.files;
+				t && (K(t), e.target.value = "");
+			}
+		}), /* @__PURE__ */ g("div", {
+			className: o.content,
+			children: [
+				j && /* @__PURE__ */ h("span", {
+					className: o.loader,
+					children: /* @__PURE__ */ h(r, {})
+				}),
+				/* @__PURE__ */ h(_, {}),
+				/* @__PURE__ */ h(a, {
+					size: "l",
+					weight: "medium",
+					className: o.title,
+					children: b
+				}),
+				V && /* @__PURE__ */ h(a, {
+					className: e(o.description, R && o.error),
+					children: V
+				}),
+				/* @__PURE__ */ h(i, {
+					type: "button",
+					size: "s",
+					variant: "outline",
+					disabled: U,
+					children: H
+				})
+			]
+		})]
+	});
 };
+//#endregion
+export { v as FileUploader };

package/dist/components/FileUploader/FileUploader.module.js

@@ -0,0 +1,12 @@
+var e = {
+	root: "_root_hjsed_1",
+	error: "_error_hjsed_37",
+	disabled: "_disabled_hjsed_42",
+	dragOver: "_dragOver_hjsed_48",
+	content: "_content_hjsed_53",
+	title: "_title_hjsed_77",
+	description: "_description_hjsed_85",
+	loader: "_loader_hjsed_99"
+};
+//#endregion
+export { e as default };

package/dist/components/FileUploader/FileUploader.utils.js

@@ -1,29 +1,31 @@
-const a = (e, i, t) => {
-  const n = e.name.split(".").pop()?.toLowerCase(), s = i.includes(n || ""), o = t.includes(e.type);
-  return s && o;
-}, l = (e, i) => {
-  const t = i * 1024 * 1024;
-  return e.size <= t;
-}, u = (e, i) => e <= i, x = {
-  maxCountText: {
-    ru: (e) => `Максимум можно загрузить ${e} файла(ов).`,
-    en: (e) => `You can upload a maximum of ${e} file(s).`,
-    tj: (e) => `Шумо метавонед на бештар аз ${e} файл бор кунед.`
-  },
-  maxFileSizeText: {
-    ru: (e, i) => `Файл "${e}" превышает максимальный размер ${i} мб.`,
-    en: (e, i) => `The file "${e}" exceeds the maximum size of ${i} mb.`,
-    tj: (e, i) => `Файли "${e}" аз ҳадди ниҳоии андозаи ${i} мб зиёд аст.`
-  },
-  extText: {
-    ru: (e) => `Файл "${e}" имеет недопустимый тип или расширение.`,
-    en: (e) => `The file "${e}" has an invalid type or extension.`,
-    tj: (e) => `Файли "${e}" намуди номатлуб ё васеъкунии нодуруст дорад.`
-  }
-};
-export {
-  x as ERROR_TEXT,
-  u as isValidFileCount,
-  l as isValidFileSize,
-  a as isValidFileType
+//#region src/components/FileUploader/FileUploader.utils.ts
+var e = (e, t) => [...t, ...e.map((e) => `.${e}`)].join(","), t = (e, t, n) => {
+	if (!t.length && !n.length) return !0;
+	let r = e.name.split(".").pop()?.toLowerCase(), i = t.length > 0 && t.includes(r || ""), a = n.length > 0 && n.includes(e.type);
+	return i || a;
+}, n = (e, t) => {
+	let n = t * 1024 * 1024;
+	return e.size <= n;
+}, r = (e, t) => e <= t, i = {
+	ru: "Выбрать файл",
+	en: "Choose file",
+	tj: "Файлро интихоб кунед"
+}, a = {
+	maxCountText: {
+		ru: (e) => `Максимум можно загрузить ${e} файла(ов).`,
+		en: (e) => `You can upload a maximum of ${e} file(s).`,
+		tj: (e) => `Шумо метавонед на бештар аз ${e} файл бор кунед.`
+	},
+	maxFileSizeText: {
+		ru: (e, t) => `Файл "${e}" превышает максимальный размер ${t} мб.`,
+		en: (e, t) => `The file "${e}" exceeds the maximum size of ${t} mb.`,
+		tj: (e, t) => `Файли "${e}" аз ҳадди ниҳоии андозаи ${t} мб зиёд аст.`
+	},
+	extText: {
+		ru: (e) => `Файл "${e}" имеет недопустимый тип или расширение.`,
+		en: (e) => `The file "${e}" has an invalid type or extension.`,
+		tj: (e) => `Файли "${e}" намуди номатлуб ё васеъкунии нодуруст дорад.`
+	}
 };
+//#endregion
+export { i as BUTTON_TEXT, a as ERROR_TEXT, e as buildAccept, r as isValidFileCount, n as isValidFileSize, t as isValidFileType };

package/dist/components/FileView/FileView.js

@@ -1,75 +1,25 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
-import r from "./FileView.module.css.js";
-import { formatFileSize as N } from "./FileView.utils.js";
-import { OutlineSystemFileError as h } from "../../icons/components/OutlineSystemFileError.js";
-import { OutlineSystemDoc as y } from "../../icons/components/OutlineSystemDoc.js";
-import { Typography as t } from "../Typography/Typography.js";
-import { ProgressBar as f } from "../ProgressBar/ProgressBar.js";
-import { classNames as g } from "../../utils/class-names.js";
-const j = ({
-  file: o,
-  rightIcon: a,
-  onFileClick: c,
-  onIconClick: m,
-  className: n,
-  style: p
-}) => {
-  const { errorText: d, progress: s } = o, l = d?.trim();
-  return /* @__PURE__ */ i(
-    "div",
-    {
-      className: g(r.root, r.file, n),
-      style: p,
-      children: [
-        /* @__PURE__ */ e("div", { className: r.fileIcon, children: l ? /* @__PURE__ */ e(h, {}) : /* @__PURE__ */ e(y, {}) }),
-        /* @__PURE__ */ i("div", { className: r.fileText, onClick: () => c?.(o), children: [
-          /* @__PURE__ */ e(t, { category: "body", proportions: "s", className: r.label, children: o.name }),
-          /* @__PURE__ */ i("div", { className: r.fileDetails, children: [
-            o.size && !l && /* @__PURE__ */ e(
-              t,
-              {
-                category: "description",
-                proportions: "l",
-                className: r.size,
-                children: N(o.size)
-              }
-            ),
-            l && /* @__PURE__ */ e(
-              t,
-              {
-                category: "description",
-                proportions: "l",
-                className: r.errorText,
-                children: o.errorText
-              }
-            ),
-            s !== void 0 && /* @__PURE__ */ i(
-              t,
-              {
-                category: "description",
-                proportions: "l",
-                className: r.progress,
-                children: [
-                  s,
-                  "%"
-                ]
-              }
-            )
-          ] }),
-          s !== void 0 && /* @__PURE__ */ e(
-            f,
-            {
-              value: s,
-              size: "s",
-              className: r.progressBar
-            }
-          )
-        ] }),
-        a && /* @__PURE__ */ e("div", { className: r.fileRightIcon, onClick: m, children: a })
-      ]
-    }
-  );
-};
-export {
-  j as FileView
-};
+import { classNames as e } from "../../utils/class-names.js";
+import t from "./FileView.module.js";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+import { OutlineSystemDoc as i } from "@alif-ui-test/icons";
+//#region src/components/FileView/FileView.tsx
+var a = ({ children: a, leftSection: o, rightSection: s, leftIcon: c, onClick: l, className: u, style: d, ref: f }) => /* @__PURE__ */ r("div", {
+	className: e(t.root, u),
+	style: d,
+	onClick: l,
+	ref: f,
+	children: [
+		o ?? /* @__PURE__ */ n("span", {
+			className: t.iconContainer,
+			"aria-hidden": "true",
+			children: c ?? /* @__PURE__ */ n(i, {})
+		}),
+		/* @__PURE__ */ n("div", {
+			className: t.content,
+			children: a
+		}),
+		s
+	]
+});
+//#endregion
+export { a as FileView };

package/dist/components/FileView/FileView.module.js

@@ -0,0 +1,7 @@
+var e = {
+	root: "_root_jtfai_1",
+	iconContainer: "_iconContainer_jtfai_28",
+	content: "_content_jtfai_45"
+};
+//#endregion
+export { e as default };

package/dist/components/Hinter/Hinter.js

@@ -1,53 +1,17 @@
-import { jsxs as l, jsx as a } from "react/jsx-runtime";
-import e from "./Hinter.module.css.js";
-import { Typography as c } from "../Typography/Typography.js";
-import { classNames as N } from "../../utils/class-names.js";
-import { SolidSystemCheckCircle as C } from "../../icons/components/SolidSystemCheckCircle.js";
-const k = ({
-  maxLength: i,
-  className: m = "",
-  disabled: p = !1,
-  isFilled: d = !1,
-  hasError: r = !1,
-  hintText: o = "",
-  isHintAlwaysShown: s = !1,
-  showCorrectHintIcon: f = !1,
-  showLengthHint: t = !1,
-  filledLength: n = 0,
-  style: u = {}
-}) => {
-  const y = N(
-    e.root,
-    p && e.disabled,
-    r && e.invalid,
-    m
-  );
-  return !s && !r && !t && !o ? null : /* @__PURE__ */ l("div", { style: u, className: y, "data-testid": "hinter", children: [
-    d && !r && s && f && /* @__PURE__ */ a(C, { width: "16", height: "16" }),
-    /* @__PURE__ */ a(
-      c,
-      {
-        proportions: "l",
-        category: "description",
-        className: e.hint,
-        children: s || r ? o : ""
-      }
-    ),
-    t && i && /* @__PURE__ */ l(
-      c,
-      {
-        proportions: "l",
-        category: "description",
-        className: e.counter,
-        children: [
-          n,
-          "/",
-          i
-        ]
-      }
-    )
-  ] });
-};
-export {
-  k as Hinter
-};
+import { resolveTypography as e } from "../../utils/typography.js";
+import { classNames as t } from "../../utils/class-names.js";
+import n from "./Hinter.module.js";
+import { Children as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/Hinter/Hinter.tsx
+var a = ({ className: a, hasError: o, children: s, style: c, ...l }) => r.toArray(s).filter(Boolean).length ? /* @__PURE__ */ i("div", {
+	style: {
+		...e("description", "l"),
+		...c
+	},
+	className: t(n.root, "uiFont", o && n.error, a),
+	...l,
+	children: s
+}) : null;
+//#endregion
+export { a as Hinter };

package/dist/components/Hinter/Hinter.module.js

@@ -0,0 +1,6 @@
+var e = {
+	root: "_root_14jcb_1",
+	error: "_error_14jcb_20"
+};
+//#endregion
+export { e as default };

package/dist/components/Indicator/Indicator.js

@@ -0,0 +1,23 @@
+import { classNames as e } from "../../utils/class-names.js";
+import t from "./Indicator.module.js";
+import { POSITION_CLASS_MAP as n, getIndicatorStyles as r } from "./Indicator.utils.js";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/components/Indicator/Indicator.tsx
+var o = ({ children: o, label: s, size: c = "m", color: l = "success", position: u = "top-end", offset: d = 0, disabled: f = !1, className: p, style: m, ...h }) => {
+	if (f) return o || null;
+	let g = n[u], _ = /* @__PURE__ */ i("span", {
+		className: e(t.root, "uiFont", o ? t[g] : void 0, p),
+		style: r(c, l, d, o ? u : void 0, m),
+		...h,
+		children: /* @__PURE__ */ i("span", {
+			className: t.label,
+			children: s
+		})
+	});
+	return o ? /* @__PURE__ */ a("div", {
+		className: t.wrapper,
+		children: [o, _]
+	}) : _;
+};
+//#endregion
+export { o as Indicator };

package/dist/components/Indicator/Indicator.module.js

@@ -0,0 +1,11 @@
+var e = {
+	root: "_root_1xi3y_1",
+	wrapper: "_wrapper_1xi3y_50",
+	topEnd: "_topEnd_1xi3y_55",
+	topStart: "_topStart_1xi3y_56",
+	bottomEnd: "_bottomEnd_1xi3y_57",
+	bottomStart: "_bottomStart_1xi3y_58",
+	label: "_label_1xi3y_86"
+};
+//#endregion
+export { e as default };

package/dist/components/Indicator/Indicator.utils.js

@@ -0,0 +1,38 @@
+import { getSize as e } from "../../utils/get-size.js";
+import { resolveTypography as t } from "../../utils/typography.js";
+//#region src/components/Indicator/Indicator.utils.ts
+var n = ["danger", "success"], r = {
+	"top-start": "topStart",
+	"top-end": "topEnd",
+	"bottom-start": "bottomStart",
+	"bottom-end": "bottomEnd"
+}, i = (e) => {
+	switch (e) {
+		case "xxl": return t("heading", "h3", "bold");
+		case "xl": return t("body", "s");
+		case "l": return t("body", "xs");
+		case "m": return t("description", "l");
+		case "s": return t("description", "m");
+	}
+}, a = (t, r, a, o, s) => {
+	let c = n.includes(r), l = {};
+	if (o && a !== 0) {
+		let e = o.toLowerCase(), t = e.endsWith("end"), n = e.startsWith("top");
+		l.transform = `translate(${t ? `calc(50% + ${a}px)` : `calc(-50% - ${a}px)`}, ${n ? `calc(-50% - ${a}px)` : `calc(50% + ${a}px)`})`;
+	}
+	return {
+		...i(t),
+		"--indicator-bg-color": c ? `var(--indicator-bg-color-${r})` : r,
+		"--indicator-label-color": "var(--indicator-label-color-number)",
+		"--indicator-border-radius": e(t, "indicator-border-radius"),
+		"--indicator-height": e(t, "indicator-height"),
+		"--indicator-min-width": e(t, "indicator-min-width"),
+		"--indicator-spacing-horizontal": e(t, "indicator-spacing-horizontal"),
+		"--indicator-spacing-vertical": e(t, "indicator-spacing-vertical"),
+		"--indicator-icon-size": e(t, "indicator-icon-size"),
+		...l,
+		...s
+	};
+};
+//#endregion
+export { r as POSITION_CLASS_MAP, a as getIndicatorStyles };

package/dist/components/InlineInput/InlineInput.js

@@ -0,0 +1,31 @@
+import { classNames as e } from "../../utils/class-names.js";
+import t from "./InlineInput.module.js";
+import { getInlineInputStyles as n, resolveDescriptionTypography as r, resolveLabelTypography as i } from "./InlineInput.utils.js";
+import { Typography as a } from "../Typography/Typography.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/InlineInput/InlineInput.tsx
+var c = ({ labelPosition: c = "right", label: l, description: u, children: d, className: f, style: p, id: m, disabled: h, size: g = "m", bodyElement: _ = "div", rootRef: v, ...y }) => /* @__PURE__ */ s(_, {
+	style: n(g, p),
+	className: e(t.root, f),
+	"data-label-position": c,
+	ref: v,
+	...y,
+	children: [d, /* @__PURE__ */ s("div", {
+		"data-disabled": h || void 0,
+		className: t.labelWrapper,
+		children: [l && /* @__PURE__ */ o(a, {
+			style: i(g),
+			element: "label",
+			className: t.label,
+			htmlFor: m,
+			children: l
+		}), u && /* @__PURE__ */ o(a, {
+			style: r(g),
+			element: "span",
+			className: t.description,
+			children: u
+		})]
+	})]
+});
+//#endregion
+export { c as InlineInput };

package/dist/components/InlineInput/InlineInput.module.js

@@ -0,0 +1,8 @@
+var e = {
+	root: "_root_1lf3n_1",
+	label: "_label_1lf3n_14",
+	labelWrapper: "_labelWrapper_1lf3n_19",
+	description: "_description_1lf3n_47"
+};
+//#endregion
+export { e as default };

package/dist/components/InlineInput/InlineInput.utils.js

@@ -0,0 +1,9 @@
+import { getSize as e } from "../../utils/get-size.js";
+import { resolveTypography as t } from "../../utils/typography.js";
+//#region src/components/InlineInput/InlineInput.utils.ts
+var n = (e) => e === "s" ? t("body", "s") : t("body", "m"), r = (e) => e === "s" ? t("description", "m") : t("description", "l"), i = (t, n) => ({
+	"--inline-input-spacing-horizontal": e(t, "inline-input-spacing-between"),
+	...n
+});
+//#endregion
+export { i as getInlineInputStyles, r as resolveDescriptionTypography, n as resolveLabelTypography };