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

package/dist/components/Field/Field.js

@@ -1,69 +1,43 @@
-import { jsx as i } from "react/jsx-runtime";
-import { useRef as W, useId as q } from "react";
-import { InputBaseWrapper as w } from "./InputBaseWrapper/InputBaseWrapper.js";
-import { InputBase as y } from "./InputBase/InputBase.js";
-const G = ({
-  label: m,
-  placeholder: p,
-  onClear: u,
-  leftSection: f,
-  leftIcon: s,
-  rightIcon: c,
-  hasError: d,
-  id: I,
-  value: r,
-  mask: l,
-  inputRegExp: a,
-  className: x,
-  disabled: t,
-  keepLabel: B,
-  keepLabelFixed: R,
-  style: g,
-  fullWidth: h = !0,
-  bordered: j = !0,
-  proportions: e = "m",
-  onFieldClick: k,
-  ...C
-}) => {
-  const n = W(null), F = q(), o = I || F;
-  return /* @__PURE__ */ i(
-    w,
-    {
-      label: m,
-      onClear: u,
-      leftSection: f,
-      leftIcon: s,
-      rightIcon: c,
-      proportions: e,
-      keepLabel: B,
-      keepLabelFixed: R,
-      bordered: j,
-      inputRef: n,
-      hasError: d,
-      disabled: t,
-      value: r,
-      id: o,
-      fullWidth: h,
-      className: x,
-      style: g,
-      onClick: k,
-      children: /* @__PURE__ */ i(
-        y,
-        {
-          proportions: e,
-          ref: n,
-          placeholder: p,
-          id: o,
-          value: r,
-          mask: l,
-          inputRegExp: a,
-          disabled: t,
-          ...C
-        }
-      )
-    }
-  );
-};
-export {
-  G as Field
+import { syncRefs as e } from "../../utils/sync-refs.js";
+import { useComponentId as t } from "../../hooks/useComponentId/useComponentId.js";
+import { InputBaseWrapper as n } from "./InputBaseWrapper/InputBaseWrapper.js";
+import { InputBase as r } from "./InputBase/InputBase.js";
+import { useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/Field/Field.tsx
+var o = ({ id: o, label: s, placeholder: c, onClear: l, leftSection: u, leftIcon: d, rightIcon: f, hasError: p, value: m, inputRegExp: h, className: g, disabled: _, keepLabel: v = !0, keepLabelFixed: y = !1, style: b, fullWidth: x = !0, bordered: S = !0, size: C = "m", onFieldClick: w, ref: T, hintLeftSection: E, hintRightSection: D, ...O }) => {
+	let k = i(null), A = t(o);
+	return /* @__PURE__ */ a(n, {
+		label: s,
+		onClear: l,
+		leftSection: u,
+		leftIcon: d,
+		rightIcon: f,
+		id: A,
+		size: C,
+		keepLabel: v,
+		keepLabelFixed: y,
+		bordered: S,
+		inputRef: k,
+		hasError: p,
+		disabled: _,
+		value: m,
+		fullWidth: x,
+		className: g,
+		style: b,
+		onClick: w,
+		hintLeftSection: E,
+		hintRightSection: D,
+		children: /* @__PURE__ */ a(r, {
+			id: A,
+			ref: e(k, T),
+			value: m,
+			placeholder: c,
+			inputRegExp: h,
+			disabled: _,
+			...O
+		})
+	});
 };
+//#endregion
+export { o as Field };

package/dist/components/Field/InputBase/InputBase.js

@@ -1,52 +1,24 @@
-import { jsxs as N, jsx as m } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import r from "./InputBase.module.css.js";
-import { getInputBaseStyles as v, applyMask as x } from "./InputBase.utils.js";
-import { classNames as f } from "../../../utils/class-names.js";
-const k = h(
-  ({
-    value: a,
-    mask: t,
-    inputRegExp: e,
-    onChange: o,
-    className: p,
-    style: i,
-    proportions: c = "m",
-    autoComplete: u = "off",
-    ...y
-  }, d) => {
-    const n = typeof e == "string" ? new RegExp(e) : e, l = v(c), g = (s) => {
-      if (!n) {
-        o?.(s);
-        return;
-      }
-      n.test(s.target.value) && o?.(s);
-    };
-    return /* @__PURE__ */ N("div", { className: f(r.root, p), style: i, children: [
-      /* @__PURE__ */ m(
-        "input",
-        {
-          ref: d,
-          value: a ?? "",
-          onChange: g,
-          className: f(t && r.maskedInput),
-          style: l,
-          autoComplete: u,
-          ...y
-        }
-      ),
-      t && /* @__PURE__ */ m(
-        "input",
-        {
-          className: r.mask,
-          value: x(a ?? "", t),
-          style: l,
-          readOnly: !0
-        }
-      )
-    ] });
-  }
-);
-export {
-  k as InputBase
+import { resolveTypography as e } from "../../../utils/typography.js";
+import { classNames as t } from "../../../utils/class-names.js";
+import n from "./InputBase.module.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Field/InputBase/InputBase.tsx
+var i = ({ inputRegExp: i, onChange: a, className: o, autoComplete: s = "off", ref: c, ...l }) => {
+	let u = typeof i == "string" ? new RegExp(i) : i;
+	return /* @__PURE__ */ r("input", {
+		ref: c,
+		className: t("uiFont", n.root, o, n.maskedInput),
+		style: e("body", "m"),
+		onChange: (e) => {
+			if (!u) {
+				a?.(e);
+				return;
+			}
+			u.test(e.target.value) && a?.(e);
+		},
+		autoComplete: s,
+		...l
+	});
 };
+//#endregion
+export { i as InputBase };

package/dist/components/Field/InputBase/InputBase.module.js

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

package/dist/components/Field/InputBaseWrapper/InputBaseWrapper.constants.js

@@ -0,0 +1,8 @@
+//#region src/components/Field/InputBaseWrapper/InputBaseWrapper.constants.ts
+var e = {
+	ru: { clearText: "Очистить текст" },
+	en: { clearText: "Clear text" },
+	tj: { clearText: "Матнро пок кардан" }
+};
+//#endregion
+export { e as INPUT_BASE_WRAPPER_LOCALES };

package/dist/components/Field/InputBaseWrapper/InputBaseWrapper.js

@@ -1,86 +1,61 @@
-import { jsxs as o, jsx as n } from "react/jsx-runtime";
-import e from "./InputBaseWrapper.module.css.js";
-import { inputBaseWrapperProportionsResolver as L } from "./InputBaseWrapper.utils.js";
-import { OutlineSystemClose as O } from "../../../icons/components/OutlineSystemClose.js";
-import { classNames as r } from "../../../utils/class-names.js";
-const E = ({
-  id: m,
-  value: a,
-  label: t,
-  onClear: i,
-  leftSection: h,
-  leftIcon: u,
-  rightIcon: p,
-  children: f,
-  inputRef: N,
-  hasError: C,
-  disabled: v,
-  onClick: b,
-  className: D,
-  style: W,
-  fullWidth: w = !0,
-  bordered: y = !0,
-  keepLabel: c = !0,
-  keepLabelFixed: I = !1,
-  proportions: s = "m"
-}) => {
-  const S = r(
-    e.root,
-    !y && e.borderNone,
-    C && e.error,
-    v && e.disabled,
-    w && e.fullWidth,
-    D
-  ), x = r(
-    e.label,
-    (a || I) && e.labelActive,
-    (s === "s" || !c) && e.hideLabel,
-    (s === "s" || !c) && a && e.hideLabelActive
-  ), A = r(
-    e.children,
-    (s === "s" || !t || !c) && e.childrenWithoutLabel
-  ), B = r(
-    e.clearIcon,
-    !a && e.hideClearIcon
-  ), M = {
-    ...W,
-    ...L(s)
-  }, d = () => {
-    N?.current?.focus();
-  }, j = () => {
-    d(), i?.();
-  }, F = (l) => {
-    const { className: g } = l.target;
-    g === e.middleSection && l.preventDefault();
-  };
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      onClick: b,
-      className: S,
-      style: M,
-      children: [
-        h,
-        /* @__PURE__ */ o("div", { className: e.main, onClick: d, children: [
-          u,
-          /* @__PURE__ */ o("div", { className: e.middleSection, onMouseDown: F, children: [
-            t && /* @__PURE__ */ n("label", { htmlFor: m, className: x, children: t }),
-            /* @__PURE__ */ n("div", { className: A, children: f })
-          ] }),
-          i && /* @__PURE__ */ n(
-            O,
-            {
-              onMouseDown: (l) => l.preventDefault(),
-              className: B,
-              onClick: j
-            }
-          ),
-          p
-        ] })
-      ]
-    }
-  );
-};
-export {
-  E as InputBaseWrapper
+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 r from "./InputBaseWrapper.module.js";
+import { sizeVarsResolver as i } from "./InputBaseWrapper.utils.js";
+import { INPUT_BASE_WRAPPER_LOCALES as a } from "./InputBaseWrapper.constants.js";
+import { Hinter as o } from "../../Hinter/Hinter.js";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { OutlineSystemClose as l } from "@alif-ui-test/icons";
+//#region src/components/Field/InputBaseWrapper/InputBaseWrapper.tsx
+var u = ({ id: u, value: d, label: f, onClear: p, leftSection: m, leftIcon: h, rightIcon: g, children: _, inputRef: v, hasError: y, disabled: b, onClick: x, className: S, style: C, fullWidth: w, bordered: T, keepLabel: E, keepLabelFixed: D, hintLeftSection: O, hintRightSection: k, size: A = "m" }) => {
+	let { locale: j } = n(), M = d != null && d !== "", N = A === "s" || !E, P = e(r.root, !T && r.rootBorderless, y && r.rootError, b && r.rootDisabled, w && r.rootFullWidth, S), F = e(r.label, "uiFont", (M || D) && r.labelFloated, N && r.labelHidden, N && M && r.labelHiddenWithValue), I = e(r.content, (N || !f) && r.contentCentered), L = e(r.clearButton, !M && r.clearButtonHidden), R = () => {
+		v?.current?.focus();
+	};
+	return /* @__PURE__ */ c("div", { children: [/* @__PURE__ */ c("div", {
+		onClick: x,
+		className: P,
+		style: i(A, C),
+		children: [m, /* @__PURE__ */ c("div", {
+			className: r.wrapper,
+			onClick: R,
+			children: [
+				h,
+				/* @__PURE__ */ c("div", {
+					className: r.inputContainer,
+					onMouseDown: (e) => {
+						e.target === e.currentTarget && e.preventDefault();
+					},
+					children: [f && /* @__PURE__ */ s("label", {
+						htmlFor: u,
+						className: F,
+						children: f
+					}), /* @__PURE__ */ s("div", {
+						className: I,
+						children: _
+					})]
+				}),
+				p && /* @__PURE__ */ s(t, {
+					disabled: b,
+					onMouseDown: (e) => e.preventDefault(),
+					className: L,
+					onClick: () => {
+						R(), p?.();
+					},
+					"aria-label": a[j].clearText,
+					children: /* @__PURE__ */ s(l, {})
+				}),
+				g
+			]
+		})]
+	}), /* @__PURE__ */ c(o, {
+		className: r.hinter,
+		hasError: y,
+		children: [O && /* @__PURE__ */ s("div", { children: O }), k && /* @__PURE__ */ s("div", {
+			className: r.hintRight,
+			children: k
+		})]
+	})] });
 };
+//#endregion
+export { u as InputBaseWrapper };

package/dist/components/Field/InputBaseWrapper/InputBaseWrapper.module.js

@@ -0,0 +1,21 @@
+var e = {
+	root: "_root_1akcl_1",
+	wrapper: "_wrapper_1akcl_55",
+	rootError: "_rootError_1akcl_62",
+	rootDisabled: "_rootDisabled_1akcl_62",
+	label: "_label_1akcl_75",
+	inputContainer: "_inputContainer_1akcl_103",
+	labelFloated: "_labelFloated_1akcl_129",
+	content: "_content_1akcl_140",
+	contentCentered: "_contentCentered_1akcl_146",
+	labelHidden: "_labelHidden_1akcl_152",
+	labelHiddenWithValue: "_labelHiddenWithValue_1akcl_153",
+	clearButton: "_clearButton_1akcl_157",
+	clearButtonHidden: "_clearButtonHidden_1akcl_168",
+	rootBorderless: "_rootBorderless_1akcl_172",
+	rootFullWidth: "_rootFullWidth_1akcl_176",
+	hinter: "_hinter_1akcl_180",
+	hintRight: "_hintRight_1akcl_187"
+};
+//#endregion
+export { e as default };

package/dist/components/Field/InputBaseWrapper/InputBaseWrapper.utils.js

@@ -1,65 +1,36 @@
-import { getSize as i } from "../../../utils/get-size.js";
-import { resolveTypography as a } from "../../../utils/typography.js";
-const n = (e) => ({
-  "--field-item-border-radius": i(
-    e,
-    "field-item-border-radius"
-  ),
-  "--field-item-border-width": i(
-    e,
-    "field-item-border-width"
-  ),
-  "--field-item-height": i(e, "field-item-height"),
-  "--field-item-spacing-between": i(
-    e,
-    "field-item-spacing-between"
-  ),
-  "--field-item-spacing-horizontal": i(
-    e,
-    "field-item-spacing-horizontal"
-  ),
-  "--field-item-spacing-vertical": i(
-    e,
-    "field-item-spacing-vertical"
-  ),
-  "--field-item-icon-width": i(e, "field-item-icon-width"),
-  "--field-item-icon-height": i(e, "field-item-icon-height"),
-  "--field-item-spacing-input-container-vertical-active": i(
-    e,
-    "field-item-spacing-input-container-vertical-active"
-  )
-}), c = (e) => {
-  switch (e) {
-    case "l":
-      return a("body", "m");
-    case "m":
-      return a("body", "s");
-    case "s":
-      return a("description", "l");
-  }
-}, f = (e) => {
-  switch (e) {
-    case "m":
-      return a("description", "m");
-    case "l":
-      return a("description", "l");
-  }
+import { getSize as e } from "../../../utils/get-size.js";
+import { resolveTypography as t } from "../../../utils/typography.js";
+//#region src/components/Field/InputBaseWrapper/InputBaseWrapper.utils.ts
+var n = (e) => {
+	switch (e) {
+		case "l": return t("body", "m");
+		case "m": return t("body", "s");
+		case "s": return t("description", "l");
+	}
 }, r = (e) => {
-  const t = c(e), l = f(e);
-  return {
-    ...n(e),
-    "--field-item-label-font-family": t.fontFamily,
-    "--field-item-label-font-weight": t.fontWeight,
-    "--field-item-label-font-size": t.fontSize,
-    "--field-item-label-line-height": t.lineHeight,
-    "--field-item-label-letter-spacing": t.letterSpacing,
-    "--field-item-label-font-family-active": l?.fontFamily,
-    "--field-item-label-font-weight-active": l?.fontWeight,
-    "--field-item-label-font-size-active": l?.fontSize,
-    "--field-item-label-line-height-active": l?.lineHeight,
-    "--field-item-label-letter-spacing-active": l?.letterSpacing
-  };
-};
-export {
-  r as inputBaseWrapperProportionsResolver
+	switch (e) {
+		case "m": return t("description", "m");
+		case "l": return t("description", "l");
+	}
+}, i = (t, i) => {
+	let a = n(t), o = r(t);
+	return {
+		...a,
+		"--field-item-border-radius": e(t, "field-item-border-radius"),
+		"--field-item-border-width": e(t, "field-item-border-width"),
+		"--field-item-height": e(t, "field-item-height"),
+		"--field-item-spacing-between": e(t, "field-item-spacing-between"),
+		"--field-item-spacing-horizontal": e(t, "field-item-spacing-horizontal"),
+		"--field-item-spacing-vertical": e(t, "field-item-spacing-vertical"),
+		"--field-item-icon-size": e(t, "field-item-icon-size"),
+		"--field-item-spacing-input-container-vertical-active": e(t, "field-item-spacing-input-container-vertical-active"),
+		"--label-active-font-family": o?.["--typography-font-family"],
+		"--label-active-font-size": o?.["--typography-font-size"],
+		"--label-active-line-height": o?.["--typography-line-height"],
+		"--label-active-letter-spacing": o?.["--typography-letter-spacing"],
+		"--label-active-font-weight": o?.["--typography-font-weight"],
+		...i
+	};
 };
+//#endregion
+export { i as sizeVarsResolver };