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

package/dist/components/Sidebar/SidebarItem/SidebarItem.js

@@ -1,36 +1,53 @@
-import { jsxs as l, jsx as o } from "react/jsx-runtime";
-import s from "./SidebarItem.module.css.js";
-import { useSidebarContext as C } from "../Sidebar.context.js";
-import { classNames as m } from "../../../utils/class-names.js";
-const x = ({
-  children: t,
-  icon: e,
-  isCollapseParent: c,
-  count: n,
-  path: r,
-  active: d,
-  onClick: i
-}) => {
-  const { isCompact: a } = C(), p = m(
-    s.navigationButton,
-    c && s.collapse,
-    a && s.compact,
-    d && s.active
-  ), h = m(
-    s.badge,
-    a && !c && s.badgePosition
-  );
-  return /* @__PURE__ */ l("div", { className: p, onClick: () => {
-    i && i(r);
-  }, children: [
-    /* @__PURE__ */ l("div", { className: s.content, children: [
-      e && /* @__PURE__ */ o("span", { className: s.icon, children: e }),
-      !e && a && /* @__PURE__ */ o("span", { className: s.icon, children: t.slice(0, 2).toLocaleUpperCase() }),
-      !a && t
-    ] }),
-    !!n && /* @__PURE__ */ o("span", { className: h, children: n })
-  ] });
-};
-export {
-  x as SidebarItem
+import { classNames as e } from "../../../utils/class-names.js";
+import { UnstyledButton as t } from "../../UnstyledButton/UnstyledButton.js";
+import { Indicator as n } from "../../Indicator/Indicator.js";
+import { useSidebarContext as r } from "../Sidebar.context.js";
+import i from "./SidebarItem.module.js";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/Sidebar/SidebarItem/SidebarItem.tsx
+var c = ({ children: c, icon: l, counter: u, rightSection: d, path: f = "", active: p, onClick: m, className: h, style: g, linkComponent: _, linkProps: v }) => {
+	let { isCompactSize: y } = r(), b = {
+		style: g,
+		className: e(i.sidebarItem, y && i.sidebarItemCompact, p && i.itemActive, h),
+		onClick: () => m?.(f),
+		"aria-label": c
+	}, x = /* @__PURE__ */ s(a, { children: [/* @__PURE__ */ s("div", {
+		className: i.itemContent,
+		children: [
+			l && /* @__PURE__ */ o("span", {
+				className: i.itemIcon,
+				children: y && u ? /* @__PURE__ */ o(n, {
+					size: "s",
+					color: "danger",
+					label: u,
+					children: l
+				}) : l
+			}),
+			!l && y && u ? /* @__PURE__ */ o(n, {
+				size: "s",
+				color: "danger",
+				label: u,
+				children: /* @__PURE__ */ o("span", { children: c.slice(0, 2).toLocaleUpperCase() })
+			}) : !l && y && /* @__PURE__ */ o("span", { children: c.slice(0, 2).toLocaleUpperCase() }),
+			!y && c
+		]
+	}), !y && (d || u) && /* @__PURE__ */ s("div", {
+		className: i.rightSection,
+		children: [!!u && /* @__PURE__ */ o(n, {
+			size: "s",
+			color: "danger",
+			label: u
+		}), d]
+	})] });
+	return _ ? /* @__PURE__ */ o(_, {
+		...b,
+		...v ? v(f) : {},
+		children: x
+	}) : /* @__PURE__ */ o(t, {
+		type: "button",
+		...b,
+		children: x
+	});
 };
+//#endregion
+export { c as SidebarItem };

package/dist/components/Sidebar/SidebarItem/SidebarItem.module.js

@@ -0,0 +1,10 @@
+var e = {
+	sidebarItem: "_sidebarItem_188cr_1",
+	sidebarItemCompact: "_sidebarItemCompact_188cr_15",
+	itemIcon: "_itemIcon_188cr_26",
+	itemContent: "_itemContent_188cr_30",
+	itemActive: "_itemActive_188cr_37",
+	rightSection: "_rightSection_188cr_42"
+};
+//#endregion
+export { e as default };

package/dist/components/Sidebar/SidebarItems/SidebarItems.js

@@ -1,25 +1,19 @@
-import { jsx as o, jsxs as p } from "react/jsx-runtime";
-import { Children as c, isValidElement as l, Fragment as d, cloneElement as u } from "react";
-import { useSidebarContext as v } from "../Sidebar.context.js";
-import { Divider as f } from "../../Divider/Divider.js";
-const j = ({ children: e }) => {
-  const { isCompact: s, variant: i } = v(), n = c.toArray(e);
-  return /* @__PURE__ */ o("div", { children: n.map((r, t) => {
-    const a = l(r) && r.props.collapseVariant === "group", m = t > 0 && a && s;
-    return /* @__PURE__ */ p(d, { children: [
-      m && /* @__PURE__ */ o(
-        f,
-        {
-          variant: i !== "default" ? "contrast" : "secondary",
-          size: "s"
-        }
-      ),
-      /* @__PURE__ */ o("div", { children: u(r, {
-        index: t
-      }) })
-    ] }, t);
-  }) });
-};
-export {
-  j as SidebarItems
+import { Divider as e } from "../../Divider/Divider.js";
+import { useSidebarContext as t } from "../Sidebar.context.js";
+import { SidebarGroup as n } from "../SidebarGroup/SidebarGroup.js";
+import { Children as r, Fragment as i, isValidElement as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/Sidebar/SidebarItems/SidebarItems.tsx
+var c = ({ children: c }) => {
+	let { color: l, isCompactSize: u } = t();
+	return /* @__PURE__ */ o("div", { children: r.toArray(c).map((t, r) => {
+		let c = a(t) && t.type === n;
+		return /* @__PURE__ */ s(i, { children: [r > 0 && c && u && /* @__PURE__ */ o(e, {
+			color: l === "default" ? "primary" : "contrast",
+			size: "s",
+			"aria-hidden": "true"
+		}), t] }, r);
+	}) });
 };
+//#endregion
+export { c as SidebarItems };

package/dist/components/Sidebar/SidebarProfile/SidebarProfile.js

@@ -0,0 +1,37 @@
+import { classNames as e } from "../../../utils/class-names.js";
+import { Avatar as t } from "../../Avatar/Avatar.js";
+import { Typography as n } from "../../Typography/Typography.js";
+import { useSidebarContext as r } from "../Sidebar.context.js";
+import i from "./SidebarProfile.module.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Sidebar/SidebarProfile/SidebarProfile.tsx
+var s = ({ name: s, subtitle: c, avatar: l, rightSection: u, className: d, style: f }) => {
+	let { isCompactSize: p } = r(), m = l || /* @__PURE__ */ a(t, { name: s });
+	return /* @__PURE__ */ o("div", {
+		style: f,
+		className: e(i.sidebarProfile, p && i.compactMode, d),
+		children: [/* @__PURE__ */ o("div", {
+			className: e(i.mainSection, p && i.mainSectionCompact),
+			children: [m, !p && /* @__PURE__ */ o("div", {
+				className: i.textContent,
+				children: [/* @__PURE__ */ a(n, {
+					variant: "body",
+					size: "s",
+					weight: "medium",
+					className: i.name,
+					children: s
+				}), c && /* @__PURE__ */ a(n, {
+					variant: "body",
+					size: "s",
+					className: i.subtitle,
+					children: c
+				})]
+			})]
+		}), !p && u && /* @__PURE__ */ a("div", {
+			className: i.rightSection,
+			children: u
+		})]
+	});
+};
+//#endregion
+export { s as SidebarProfile };

package/dist/components/Sidebar/SidebarProfile/SidebarProfile.module.js

@@ -0,0 +1,12 @@
+var e = {
+	sidebarProfile: "_sidebarProfile_19a0q_1",
+	compactMode: "_compactMode_19a0q_18",
+	mainSection: "_mainSection_19a0q_26",
+	mainSectionCompact: "_mainSectionCompact_19a0q_34",
+	textContent: "_textContent_19a0q_38",
+	name: "_name_19a0q_44",
+	subtitle: "_subtitle_19a0q_53",
+	rightSection: "_rightSection_19a0q_61"
+};
+//#endregion
+export { e as default };

package/dist/components/Skeleton/Skeleton.js

@@ -1,23 +1,12 @@
-import { jsx as a } from "react/jsx-runtime";
-import i from "./Skeleton.module.css.js";
-import { getSkeletonStyles as p } from "./Skeleton.utils.js";
-import { classNames as c } from "../../utils/class-names.js";
-const g = ({
-  className: o,
-  style: t,
-  type: e = "rectangle",
-  height: r = "100%",
-  width: s = "100%",
-  radius: m,
-  ...l
-}) => /* @__PURE__ */ a(
-  "div",
-  {
-    className: c(i.root, o),
-    style: p(e, r, s, m, t),
-    ...l
-  }
-);
-export {
-  g as Skeleton
-};
+import { classNames as e } from "../../utils/class-names.js";
+import t from "./Skeleton.module.js";
+import { getSkeletonStyles as n } from "./Skeleton.utils.js";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/Skeleton/Skeleton.tsx
+var i = ({ className: i, style: a, height: o = "100%", width: s = "100%", radius: c = "none", ...l }) => /* @__PURE__ */ r("div", {
+	className: e(t.root, i),
+	style: n(o, s, c, a),
+	...l
+});
+//#endregion
+export { i as Skeleton };

package/dist/components/Skeleton/Skeleton.module.js

@@ -0,0 +1,6 @@
+var e = {
+	root: "_root_hvja6_1",
+	"skeleton-loading": "_skeleton-loading_hvja6_1"
+};
+//#endregion
+export { e as default };

package/dist/components/Skeleton/Skeleton.utils.js

@@ -1,9 +1,10 @@
-const d = (r, o, t, e, s) => ({
-  "--skeleton-border-radius": r === "circle" ? "var(--skeleton-border-radius-circle)" : e ? `var(--border-radius-${e})` : "var(--border-radius-none)",
-  "--skeleton-height": o,
-  "--skeleton-width": t,
-  ...s
+import { resolveUnit as e } from "../../utils/unit-resolver.js";
+//#region src/components/Skeleton/Skeleton.utils.ts
+var t = (t, n, r, i) => ({
+	"--skeleton-border-radius": e(r),
+	"--skeleton-height": e(t),
+	"--skeleton-width": e(n),
+	...i
 });
-export {
-  d as getSkeletonStyles
-};
+//#endregion
+export { t as getSkeletonStyles };

package/dist/components/Slider/Marks/Marks.js

@@ -1,33 +1,25 @@
-import { jsx as a } from "react/jsx-runtime";
-import r from "../Slider.module.css.js";
-import { getPercent as p } from "../Slider.utils.js";
-import { Typography as c } from "../../Typography/Typography.js";
-import { classNames as f } from "../../../utils/class-names.js";
-const h = ({
-  disabled: t = !1,
-  marks: o = [],
-  min: m = 0,
-  max: l = 100
-}) => {
-  const n = f(r.mark, t && r.disabledMark);
-  return /* @__PURE__ */ a("div", { className: r.marksContainer, children: o.map((e) => {
-    const s = e.value, i = {
-      left: `${p(s, m, l)}%`
-    };
-    return /* @__PURE__ */ a(
-      c,
-      {
-        element: "span",
-        className: n,
-        style: i,
-        category: "description",
-        proportions: "s",
-        children: e.label
-      },
-      s
-    );
-  }) });
-};
-export {
-  h as Marks
+import { classNames as e } from "../../../utils/class-names.js";
+import { Typography as t } from "../../Typography/Typography.js";
+import { getPercent as n } from "../Slider.utils.js";
+import r from "../Slider.module.js";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/Slider/Marks/Marks.tsx
+var a = ({ disabled: a = !1, marks: o = [], min: s = 0, max: c = 100 }) => {
+	let l = e(r.mark, a && r.disabledMark);
+	return /* @__PURE__ */ i("div", {
+		className: r.marksContainer,
+		children: o.map((e) => {
+			let r = e.value;
+			return /* @__PURE__ */ i(t, {
+				element: "span",
+				className: l,
+				style: { left: `${n(r, s, c)}%` },
+				variant: "description",
+				size: "s",
+				children: e.label
+			}, r);
+		})
+	});
 };
+//#endregion
+export { a as Marks };

package/dist/components/Slider/RangeSlider/RangeSlider.js

@@ -1,78 +1,58 @@
-import { jsxs as y, jsx as h } from "react/jsx-runtime";
-import { getTrackStyle as D } from "./RangeSlider.utils.js";
-import { SliderBase as V } from "../SliderBase/SliderBase.js";
-import { calculateSliderValue as d } from "../Slider.utils.js";
-import { Thumb as u } from "../Thumb/Thumb.js";
-const q = ({
-  min: a = 0,
-  max: c = 100,
-  step: t = 1,
-  disabled: e,
-  value: l,
-  onChange: m,
-  counter: g,
-  label: k,
-  withTooltip: f = !1,
-  marks: x
-}) => {
-  const n = l.min, o = l.max, C = (r) => {
-    r <= o - t && m({
-      min: r,
-      max: o
-    });
-  }, S = (r) => {
-    r >= n + t && m({
-      min: n,
-      max: r
-    });
-  }, M = (r) => {
-    if (e) return;
-    const i = d(r, a, c, t), T = Math.abs(i - n), j = Math.abs(i - o), s = T < j;
-    m({
-      min: s ? i : n,
-      max: s ? o : i
-    });
-  };
-  return /* @__PURE__ */ y(
-    V,
-    {
-      label: k,
-      counter: g,
-      disabled: e,
-      rangeStyle: D(n, o, a, c),
-      onTrackClick: M,
-      min: a,
-      max: c,
-      marks: x,
-      children: [
-        /* @__PURE__ */ h(
-          u,
-          {
-            onChange: C,
-            value: n,
-            min: a,
-            max: c,
-            step: t,
-            disabled: e,
-            withTooltip: f
-          }
-        ),
-        /* @__PURE__ */ h(
-          u,
-          {
-            onChange: S,
-            value: o,
-            min: a,
-            max: c,
-            step: t,
-            disabled: e,
-            withTooltip: f
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  q as RangeSlider
+import { calculateSliderValue as e } from "../Slider.utils.js";
+import { SliderBase as t } from "../SliderBase/SliderBase.js";
+import { Thumb as n } from "../Thumb/Thumb.js";
+import { getTrackStyle as r } from "./RangeSlider.utils.js";
+import { useRef as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Slider/RangeSlider/RangeSlider.tsx
+var s = ({ min: s = 0, max: c = 100, step: l = 1, disabled: u, value: d, onChange: f, withTooltip: p = !1, marks: m }) => {
+	let h = i(null), g = i(null), _ = d.min, v = d.max;
+	return /* @__PURE__ */ o(t, {
+		disabled: u,
+		rangeStyle: r(_, v, s, c),
+		onTrackClick: (t) => {
+			if (u) return;
+			let n = e(t, s, c, l), r = Math.abs(n - _) < Math.abs(n - v);
+			f({
+				min: r ? n : _,
+				max: r ? v : n
+			});
+			let i = r ? h.current : g.current;
+			i && i.focus();
+		},
+		min: s,
+		max: c,
+		marks: m,
+		children: [/* @__PURE__ */ a(n, {
+			onChange: (e) => {
+				e <= v - l && f({
+					min: e,
+					max: v
+				});
+			},
+			value: _,
+			min: s,
+			max: c,
+			step: l,
+			disabled: u,
+			withTooltip: p,
+			ref: h
+		}), /* @__PURE__ */ a(n, {
+			onChange: (e) => {
+				e >= _ + l && f({
+					min: _,
+					max: e
+				});
+			},
+			value: v,
+			min: s,
+			max: c,
+			step: l,
+			disabled: u,
+			withTooltip: p,
+			ref: g
+		})]
+	});
 };
+//#endregion
+export { s as RangeSlider };

package/dist/components/Slider/RangeSlider/RangeSlider.utils.js

@@ -1,11 +1,11 @@
-import { getPercent as c } from "../Slider.utils.js";
-const s = (n, o, t, e) => {
-  const r = c(n, t, e), i = c(o, t, e);
-  return {
-    left: `${r}%`,
-    width: `calc(${i - r}% + var(--slider-thumb-width)/2)`
-  };
-};
-export {
-  s as getTrackStyle
+import { getPercent as e } from "../Slider.utils.js";
+//#region src/components/Slider/RangeSlider/RangeSlider.utils.ts
+var t = (t, n, r, i) => {
+	let a = e(t, r, i), o = e(n, r, i);
+	return {
+		left: `${a}%`,
+		width: `calc(${o - a}% + var(--slider-thumb-width)/2)`
+	};
 };
+//#endregion
+export { t as getTrackStyle };

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

@@ -1,48 +1,32 @@
-import { jsx as f } from "react/jsx-runtime";
-import { getTrackStyle as u } from "./Slider.utils.js";
-import { SliderBase as S } from "../SliderBase/SliderBase.js";
-import { calculateSliderValue as T } from "../Slider.utils.js";
-import { Thumb as s } from "../Thumb/Thumb.js";
-const j = ({
-  label: i = "",
-  counter: a = "",
-  min: r = 0,
-  max: e = 100,
-  value: o,
-  step: t = 1,
-  onChange: c,
-  disabled: l = !1,
-  marks: k,
-  withTooltip: n = !1
-}) => /* @__PURE__ */ f(
-  S,
-  {
-    min: r,
-    max: e,
-    label: i,
-    counter: a,
-    disabled: l,
-    onTrackClick: (m) => {
-      if (l) return;
-      const p = T(m, r, e, t);
-      c(p);
-    },
-    rangeStyle: u(o, r, e),
-    marks: k,
-    children: /* @__PURE__ */ f(
-      s,
-      {
-        disabled: l,
-        value: o,
-        min: r,
-        max: e,
-        step: t,
-        onChange: c,
-        withTooltip: n
-      }
-    )
-  }
-);
-export {
-  j as Slider
+import { calculateSliderValue as e } from "../Slider.utils.js";
+import { getTrackStyle as t } from "./Slider.utils.js";
+import { SliderBase as n } from "../SliderBase/SliderBase.js";
+import { Thumb as r } from "../Thumb/Thumb.js";
+import { useRef as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/Slider/Slider/Slider.tsx
+var o = ({ min: o = 0, max: s = 100, value: c, step: l = 1, onChange: u, disabled: d = !1, marks: f, withTooltip: p = !1 }) => {
+	let m = i(null);
+	return /* @__PURE__ */ a(n, {
+		min: o,
+		max: s,
+		disabled: d,
+		onTrackClick: (t) => {
+			d || (u(e(t, o, s, l)), m.current?.focus());
+		},
+		rangeStyle: t(c, o, s),
+		marks: f,
+		children: /* @__PURE__ */ a(r, {
+			disabled: d,
+			value: c,
+			min: o,
+			max: s,
+			step: l,
+			onChange: u,
+			withTooltip: p,
+			ref: m
+		})
+	});
 };
+//#endregion
+export { o as Slider };

package/dist/components/Slider/Slider/Slider.utils.js

@@ -1,8 +1,8 @@
-import { getPercent as c } from "../Slider.utils.js";
-const m = (t, e, r) => ({
-  left: "0%",
-  width: `calc(${c(t, e, r)}% + var(--slider-thumb-width)/2)`
+import { getPercent as e } from "../Slider.utils.js";
+//#region src/components/Slider/Slider/Slider.utils.ts
+var t = (t, n, r) => ({
+	left: "0%",
+	width: `calc(${e(t, n, r)}% + var(--slider-thumb-width)/2)`
 });
-export {
-  m as getTrackStyle
-};
+//#endregion
+export { t as getTrackStyle };

package/dist/components/Slider/Slider.module.js

@@ -0,0 +1,17 @@
+var e = {
+	root: "_root_1nzzw_1",
+	sliderContainer: "_sliderContainer_1nzzw_33",
+	disabled: "_disabled_1nzzw_42",
+	marksContainer: "_marksContainer_1nzzw_46",
+	mark: "_mark_1nzzw_46",
+	disabledMark: "_disabledMark_1nzzw_58",
+	slider: "_slider_1nzzw_33",
+	sliderTrack: "_sliderTrack_1nzzw_66",
+	sliderRange: "_sliderRange_1nzzw_67",
+	sliderDisabledTrack: "_sliderDisabledTrack_1nzzw_80",
+	sliderDisabledRange: "_sliderDisabledRange_1nzzw_84",
+	thumb: "_thumb_1nzzw_93",
+	tooltipTrigger: "_tooltipTrigger_1nzzw_128"
+};
+//#endregion
+export { e as default };

package/dist/components/Slider/Slider.utils.js

@@ -1,16 +1,14 @@
-const d = (e, t, c) => {
-  const n = Math.round((e - t) / (c - t) * 100);
-  return Math.max(0, Math.min(100, n));
-}, l = (e, t, c, n) => {
-  if (!t) return e;
-  const r = Math.round(e / t) * t;
-  return Math.max(c, Math.min(n, r));
-}, h = (e, t, c, n, r) => {
-  const a = r || e.currentTarget.getBoundingClientRect(), o = (e.clientX - a.left) / a.width, u = t + (c - t) * o;
-  return l(u, n, t, c);
-};
-export {
-  h as calculateSliderValue,
-  d as getPercent,
-  l as getSteppedValue
+//#region src/components/Slider/Slider.utils.ts
+var e = (e, t, n) => {
+	let r = (e - t) / (n - t) * 100;
+	return Math.max(0, Math.min(100, r));
+}, t = (e, t, n, r) => {
+	if (!t) return e;
+	let i = Math.round((e - n) / t) * t + n;
+	return Math.max(n, Math.min(r, i));
+}, n = (e, n, r, i, a) => {
+	let o = a || e.currentTarget.getBoundingClientRect(), s = (e.clientX - o.left) / o.width;
+	return t(n + (r - n) * s, i, n, r);
 };
+//#endregion
+export { n as calculateSliderValue, e as getPercent };