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

package/dist/components/Radio/Radio.utils.js

@@ -1,59 +1,9 @@
-import { getSize as r } from "../../utils/get-size.js";
-import { resolveTypography as b } from "../../utils/typography.js";
-const l = (t) => {
-  switch (t) {
-    case "m":
-      return b("body", "m");
-    case "s":
-      return b("body", "s");
-  }
-}, a = (t) => {
-  switch (t) {
-    case "m":
-      return b("description", "l");
-    case "s":
-      return b("description", "m");
-  }
-}, u = (t) => ({
-  borderColor: `var(--radio-button-border-color-outline-${t})`,
-  backgroundColor: `var(--radio-button-bg-color-container-${t})`,
-  color: `var(--radio-button-text-color-${t})`,
-  subtitleColor: `var(--radio-button-subtitle-color-${t})`
-}), s = (t, o) => {
-  const n = u(t), e = l(o), i = a(o);
-  return {
-    "--radio-button-bg-color": n.backgroundColor,
-    "--radio-button-label-color": n.color,
-    "--radio-button-subtitle-color": n.subtitleColor,
-    "--radio-button-border-color": n.borderColor,
-    "--radio-button-label-font-family": e.fontFamily,
-    "--radio-button-label-font-size": e.fontSize,
-    "--radio-button-label-font-weight": e.fontWeight,
-    "--radio-button-label-line-height": e.lineHeight,
-    "--radio-button-label-letter-spacing": e.letterSpacing,
-    "--radio-button-subtitle-font-family": i.fontFamily,
-    "--radio-button-subtitle-font-size": i.fontSize,
-    "--radio-button-subtitle-font-weight": i.fontWeight,
-    "--radio-button-subtitle-line-height": i.lineHeight,
-    "--radio-button-subtitle-letter-spacing": i.letterSpacing,
-    "--radio-button-border-width": r(o, "radio-button-border-width"),
-    "--radio-button-border-radius": r(o, "radio-button-border-radius"),
-    "--radio-button-spacing-between": r(
-      o,
-      "radio-button-spacing-between"
-    ),
-    "--radio-button-container-width": r(
-      o,
-      "radio-button-container-width"
-    ),
-    "--radio-button-container-height": r(
-      o,
-      "radio-button-container-height"
-    ),
-    "--radio-button-bullet-width": r(o, "radio-button-bullet-width"),
-    "--radio-button-bullet-height": r(o, "radio-button-bullet-height")
-  };
-};
-export {
-  s as getRadioButtonStyles
-};
+import { getSize as e } from "../../utils/get-size.js";
+//#region src/components/Radio/Radio.utils.ts
+var t = (t) => ({
+	"--radio-button-border-width": e(t, "radio-button-border-width"),
+	"--radio-button-size": e(t, "radio-button-size"),
+	"--radio-button-bullet-size": e(t, "radio-button-bullet-size")
+});
+//#endregion
+export { t as getRadioButtonStyles };

package/dist/components/Radio/RadioGroup/RadioGroup.context.js

@@ -0,0 +1,5 @@
+import { createContext as e, useContext as t } from "react";
+//#region src/components/Radio/RadioGroup/RadioGroup.context.ts
+var n = e(null), r = () => t(n);
+//#endregion
+export { n as RadioGroupContext, r as useRadioGroupContext };

package/dist/components/Radio/RadioGroup/RadioGroup.js

@@ -1,41 +1,27 @@
-import { jsx as o } from "react/jsx-runtime";
-import { Children as x, isValidElement as y } from "react";
-import e from "./RadioGroup.module.css.js";
-import { Radio as s } from "../Radio.js";
-import { classNames as C } from "../../../utils/class-names.js";
-const k = ({
-  value: a,
-  onChange: t,
-  children: p,
-  name: m,
-  orientation: i = "vertical",
-  className: l,
-  size: n = "m",
-  disabled: c = !1,
-  defaultValue: f,
-  variant: u
-}) => {
-  const d = C(
-    e.root,
-    e[i],
-    l
-  ), v = a || f;
-  return /* @__PURE__ */ o("div", { className: d, children: x.map(
-    p,
-    (r) => y(r) && r.type === s ? /* @__PURE__ */ o(
-      s,
-      {
-        name: m,
-        checked: r.props.value === v,
-        variant: u || r.props.variant,
-        size: n,
-        disabled: c,
-        onChange: t,
-        ...r.props
-      }
-    ) : null
-  ) });
-};
-export {
-  k as RadioGroup
+import { classNames as e } from "../../../utils/class-names.js";
+import { RadioGroupContext as t } from "./RadioGroup.context.js";
+import n from "./RadioGroup.module.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Radio/RadioGroup/RadioGroup.tsx
+var i = ({ name: i, size: a, value: o, children: s, onChange: c, style: l, orientation: u = "vertical", className: d, defaultValue: f, disabled: p, labelPosition: m, ref: h }) => {
+	let g = e(n.root, n[u], d), _ = o || f, v = (e) => c?.(typeof e == "string" ? e : e.currentTarget.value);
+	return /* @__PURE__ */ r(t.Provider, {
+		value: {
+			name: i,
+			size: a,
+			disabled: p,
+			labelPosition: m,
+			value: _,
+			onChange: (e) => v(e)
+		},
+		children: /* @__PURE__ */ r("div", {
+			className: g,
+			role: "radiogroup",
+			ref: h,
+			style: l,
+			children: s
+		})
+	});
 };
+//#endregion
+export { i as RadioGroup };

package/dist/components/Radio/RadioGroup/RadioGroup.module.js

@@ -0,0 +1,7 @@
+var e = {
+	root: "_root_ckqs3_1",
+	horizontal: "_horizontal_ckqs3_8",
+	vertical: "_vertical_ckqs3_13"
+};
+//#endregion
+export { e as default };

package/dist/components/Rating/Rating.js

@@ -1,43 +1,35 @@
-import { jsx as o } from "react/jsx-runtime";
-import { useState as g } from "react";
-import r from "./Rating.module.css.js";
-import { getRatingStyles as M } from "./Rating.utils.js";
-import { SolidSystemStar as n } from "../../icons/components/SolidSystemStar.js";
-import { OutlineSystemStar as N } from "../../icons/components/OutlineSystemStar.js";
-import { classNames as i } from "../../utils/class-names.js";
-const k = ({
-  size: m = "s",
-  variant: a = "solid",
-  value: c,
-  onChange: u,
-  className: d,
-  filledIcon: f,
-  defaultIcon: p
-}) => {
-  const [s, l] = g(null), S = Array.from({ length: 5 }, (e, t) => t + 1), h = (e) => l(e), v = () => l(null), y = (e) => e ? f || /* @__PURE__ */ o(n, {}) : p || (a === "solid" ? /* @__PURE__ */ o(n, {}) : /* @__PURE__ */ o(N, {}));
-  return /* @__PURE__ */ o(
-    "div",
-    {
-      className: i(r.root, d),
-      style: M(m),
-      children: /* @__PURE__ */ o("div", { className: r.stars, children: S.map((e) => {
-        const t = s !== null ? e <= s : e <= c;
-        return /* @__PURE__ */ o(
-          "div",
-          {
-            role: "button",
-            className: i(r.star, t && r.filled),
-            onClick: () => u(e),
-            onMouseEnter: () => h(e),
-            onMouseLeave: v,
-            children: y(t)
-          },
-          e
-        );
-      }) })
-    }
-  );
-};
-export {
-  k as Rating
+import { classNames as e } from "../../utils/class-names.js";
+import { useComponentId as t } from "../../hooks/useComponentId/useComponentId.js";
+import n from "./Rating.module.js";
+import { getRatingStyles as r } from "./Rating.utils.js";
+import { RatingItem as i } from "./RatingItem/RatingItem.js";
+import { useRef as a, useState as o } from "react";
+import { jsx as s } from "react/jsx-runtime";
+//#region src/components/Rating/Rating.tsx
+var c = ({ size: c = "m", variant: l = "solid", value: u, onChange: d, className: f, filledIcon: p, emptyIcon: m, max: h = 5, name: g, fraction: _ = 1 }) => {
+	let [v, y] = o(null), b = a({}), x = t(g), S = Array.from({ length: h }, (e, t) => t + 1), C = v ?? u, w = (e) => C >= e ? 100 : C <= e - 1 ? 0 : (C - (e - 1)) * 100, T = (e) => {
+		let t = Math.max(0, Math.min(h, Number(e.toFixed(10))));
+		d(t), b.current[t]?.focus();
+	};
+	return /* @__PURE__ */ s("div", {
+		role: "radiogroup",
+		className: e(n.root, f),
+		style: r(c),
+		onMouseLeave: () => y(null),
+		children: S.map((e) => /* @__PURE__ */ s(i, {
+			name: x,
+			variant: l,
+			starValue: e,
+			fraction: _,
+			value: u,
+			onChange: T,
+			filledIcon: p,
+			emptyIcon: m,
+			fillPercentage: w(e),
+			onHoveredValue: y,
+			inputRefs: b
+		}, e))
+	});
 };
+//#endregion
+export { c as Rating };

package/dist/components/Rating/Rating.module.js

@@ -0,0 +1,10 @@
+var e = {
+	root: "_root_14vhm_1",
+	star: "_star_14vhm_19",
+	emptyIcon: "_emptyIcon_14vhm_29",
+	filledIcon: "_filledIcon_14vhm_30",
+	fractionLabel: "_fractionLabel_14vhm_60",
+	input: "_input_14vhm_67"
+};
+//#endregion
+export { e as default };

package/dist/components/Rating/Rating.utils.js

@@ -1,9 +1,7 @@
-const i = (n) => ({
-  "--rating-icon-container-height": `var(--rating-icon-container-height-${n})`,
-  "--rating-icon-container-width": `var(--rating-icon-container-width-${n})`,
-  "--rating-icon-height": `var(--rating-icon-height-${n})`,
-  "--rating-icon-width": `var(--rating-icon-width-${n})`
+//#region src/components/Rating/Rating.utils.ts
+var e = (e) => ({
+	"--rating-icon-container-size": `var(--rating-icon-container-size-${e})`,
+	"--rating-icon-size": `var(--rating-icon-size-${e})`
 });
-export {
-  i as getRatingStyles
-};
+//#endregion
+export { e as getRatingStyles };

package/dist/components/Rating/RatingItem/RatingItem.js

@@ -0,0 +1,58 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import t from "../Rating.module.js";
+import { resolveIcon as n } from "./RatingItem.utils.js";
+import { useId as r } from "react";
+import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
+import { OutlineSystemStar as s, SolidSystemStar as c } from "@alif-ui-test/icons";
+//#region src/components/Rating/RatingItem/RatingItem.tsx
+var l = ({ fillPercentage: l, emptyIcon: u, filledIcon: d, starValue: f, onHoveredValue: p, fraction: m = 1, name: h, variant: g, onChange: _, value: v, inputRefs: y }) => {
+	let b = r(), x = n(d, f, /* @__PURE__ */ a(c, {})), S = n(u, f, a(g === "outline" ? s : c, {})), C = l > 0 && l < 100, w = Array.from({ length: m }, (e, t) => Number((f - 1 + (t + 1) / m).toFixed(10)));
+	return /* @__PURE__ */ o("span", {
+		className: t.star,
+		children: [
+			l === 0 && /* @__PURE__ */ a("span", {
+				className: t.emptyIcon,
+				children: S
+			}),
+			l === 100 && /* @__PURE__ */ a("span", {
+				className: t.filledIcon,
+				children: x
+			}),
+			C && /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a("span", {
+				className: t.emptyIcon,
+				style: { clipPath: `inset(0 0 0 ${l}%)` },
+				children: S
+			}), /* @__PURE__ */ a("span", {
+				className: t.filledIcon,
+				style: { clipPath: `inset(0 ${100 - l}% 0 0)` },
+				children: x
+			})] }),
+			w.map((n, r) => {
+				let i = `${b}-${r}`;
+				return /* @__PURE__ */ a("label", {
+					htmlFor: i,
+					className: e(t.fractionLabel),
+					style: {
+						width: `${100 / m}%`,
+						left: `${r / m * 100}%`
+					},
+					onMouseEnter: () => p(n),
+					children: /* @__PURE__ */ a("input", {
+						ref: (e) => {
+							y.current[n] = e;
+						},
+						type: "radio",
+						id: i,
+						name: h,
+						value: n,
+						checked: n === v,
+						onChange: () => _(n),
+						className: t.input
+					})
+				}, n);
+			})
+		]
+	});
+};
+//#endregion
+export { l as RatingItem };

package/dist/components/Rating/RatingItem/RatingItem.utils.js

@@ -0,0 +1,4 @@
+//#region src/components/Rating/RatingItem/RatingItem.utils.ts
+var e = (e, t, n) => e ? typeof e == "function" ? e(t) : e : n;
+//#endregion
+export { e as resolveIcon };

package/dist/components/RemoveScroll/RemoveScroll.js

@@ -1,15 +1,12 @@
-import { jsx as i, Fragment as r } from "react/jsx-runtime";
-import { useEffect as l } from "react";
-const s = ({
-  enabled: o = !0,
-  children: e
-}) => (l(() => {
-  if (!o) return;
-  const d = document.body.style.overflow, n = document.body.style.paddingRight, t = window.innerWidth - document.documentElement.clientWidth;
-  return t > 0 && (document.body.style.paddingRight = `${t}px`), document.body.style.overflow = "hidden", () => {
-    document.body.style.overflow = d, document.body.style.paddingRight = n;
-  };
-}, [o]), /* @__PURE__ */ i(r, { children: e }));
-export {
-  s as RemoveScroll
-};
+import { useEffect as e } from "react";
+import { Fragment as t, jsx as n } from "react/jsx-runtime";
+//#region src/components/RemoveScroll/RemoveScroll.tsx
+var r = ({ enabled: r = !0, children: i }) => (e(() => {
+	if (!r) return;
+	let e = document.body.style.overflow, t = document.body.style.paddingRight, n = window.innerWidth - document.documentElement.clientWidth;
+	return n > 0 && (document.body.style.paddingRight = `${n}px`), document.body.style.overflow = "hidden", () => {
+		document.body.style.overflow = e, document.body.style.paddingRight = t;
+	};
+}, [r]), /* @__PURE__ */ n(t, { children: i }));
+//#endregion
+export { r as RemoveScroll };

package/dist/components/SegmentedControl/SegmentedControl.js

@@ -1,40 +1,32 @@
-import { jsx as l } from "react/jsx-runtime";
-import o from "./SegmentedControl.module.css.js";
-import { getSegmentedControlStyles as g } from "./SegmentedControl.utils.js";
-import { Tab as S } from "../Tab/Tab.js";
-import { classNames as h } from "../../utils/class-names.js";
-const N = ({
-  className: r,
-  tabs: m,
-  value: a,
-  defaultValue: n,
-  onChange: i,
-  rounded: s = !1,
-  size: t = "m",
-  variant: c = "primary",
-  fullWidth: d = !1,
-  disabled: f = !1
-}) => {
-  const p = h(
-    o.root,
-    d && o.fullWidth,
-    r
-  ), u = g(t, s), y = a || n;
-  return /* @__PURE__ */ l("div", { className: p, style: { ...u }, children: m?.map((e) => /* @__PURE__ */ l(
-    S,
-    {
-      rounded: s,
-      size: t,
-      variant: c,
-      checked: y === e.value,
-      onChange: i,
-      disabled: f || e.disabled,
-      selectionType: "single",
-      ...e
-    },
-    String(e.value)
-  )) });
-};
-export {
-  N as SegmentedControl
+import { classNames as e } from "../../utils/class-names.js";
+import { Tab as t } from "../Tab/Tab.js";
+import n from "./SegmentedControl.module.js";
+import { getSegmentedControlStyles as r } from "./SegmentedControl.utils.js";
+import "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/SegmentedControl/SegmentedControl.tsx
+var a = ({ className: a, style: o, data: s, value: c, defaultValue: l, rounded: u = !0, size: d = "m", variant: f, fullWidth: p = !1, disabled: m = !1, onChange: h, ref: g }) => {
+	let _ = e(n.root, u && n.rounded, p && "uiFullWidth", a), v = r(d), y = c || l;
+	return /* @__PURE__ */ i("div", {
+		role: "radiogroup",
+		className: _,
+		style: {
+			...v,
+			...o
+		},
+		ref: g,
+		children: s?.map((e) => /* @__PURE__ */ i(t, {
+			rounded: u,
+			size: d,
+			variant: f,
+			checked: y === e.value,
+			disabled: m || e.disabled,
+			type: "radio",
+			onChange: (e) => h(e.target.value),
+			children: e.label,
+			...e
+		}, e.value))
+	});
 };
+//#endregion
+export { a as SegmentedControl };

package/dist/components/SegmentedControl/SegmentedControl.module.js

@@ -0,0 +1,6 @@
+var e = {
+	root: "_root_11psj_1",
+	rounded: "_rounded_11psj_28"
+};
+//#endregion
+export { e as default };

package/dist/components/SegmentedControl/SegmentedControl.utils.js

@@ -1,22 +1,10 @@
-import { getSize as n } from "../../utils/get-size.js";
-const r = (e, t) => ({
-  "--segmented-control-border-radius": n(
-    `${e}${t ? "-rounded" : ""}`,
-    "segmented-control-border-radius"
-  ),
-  "--segmented-control-spacing-horizontal": n(
-    e,
-    "segmented-control-spacing-horizontal"
-  ),
-  "--segmented-control-spacing-vertical": n(
-    e,
-    "segmented-control-spacing-vertical"
-  ),
-  "--segmented-control-spacing-between": n(
-    e,
-    "segmented-control-spacing-between"
-  )
+import { getSize as e } from "../../utils/get-size.js";
+//#region src/components/SegmentedControl/SegmentedControl.utils.ts
+var t = (t) => ({
+	"--segmented-control-border-radius": e(t, "segmented-control-border-radius"),
+	"--segmented-control-spacing-horizontal": e(t, "segmented-control-spacing-horizontal"),
+	"--segmented-control-spacing-vertical": e(t, "segmented-control-spacing-vertical"),
+	"--segmented-control-spacing-between": e(t, "segmented-control-spacing-between")
 });
-export {
-  r as getSegmentedControlStyles
-};
+//#endregion
+export { t as getSegmentedControlStyles };