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

package/dist/components/Snackbar/SnackbarSlot/SnackbarSlot.js

@@ -0,0 +1,37 @@
+import { removeSnackbar as e } from "../Snackbar.utils.js";
+import { slotTransition as t } from "./SnackbarSlot.utils.js";
+import { SnackbarCard as n } from "../SnackbarCard/SnackbarCard.js";
+import { useEffect as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/Snackbar/SnackbarSlot/SnackbarSlot.tsx
+var o = ({ item: o, onDismiss: s }) => {
+	let [c, l] = i(!1), [u, d] = i(!1);
+	r(() => {
+		let e = requestAnimationFrame(() => l(!0));
+		return () => cancelAnimationFrame(e);
+	}, []), r(() => {
+		o.mounted || d(!0);
+	}, [o.mounted]);
+	let f = !c || u;
+	return /* @__PURE__ */ a("div", {
+		style: {
+			display: "grid",
+			gridTemplateRows: f ? "0fr" : "1fr",
+			opacity: +!f,
+			transition: c ? t(u) : "none",
+			willChange: "grid-template-rows, opacity"
+		},
+		onTransitionEnd: (t) => {
+			u && t.propertyName === "grid-template-rows" && e(o.id);
+		},
+		children: /* @__PURE__ */ a("div", {
+			style: { minHeight: 0 },
+			children: /* @__PURE__ */ a(n, {
+				item: o,
+				onDismiss: s
+			})
+		})
+	});
+};
+//#endregion
+export { o as SnackbarSlot };

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

@@ -0,0 +1,4 @@
+//#region src/components/Snackbar/SnackbarSlot/SnackbarSlot.utils.ts
+var e = 260, t = 140, n = 100, r = (r) => r ? `grid-template-rows ${t}ms ease, opacity ${n}ms ease` : `grid-template-rows ${e}ms cubic-bezier(0.34, 1.2, 0.64, 1), opacity ${e}ms ease`;
+//#endregion
+export { r as slotTransition };

package/dist/components/Snackbar/SnackbarTimer/SnackbarTimer.js

@@ -1,31 +1,69 @@
-import { jsxs as l, jsx as r } from "react/jsx-runtime";
-import { useState as p, useEffect as a } from "react";
-import s from "./SnackbarTimer.module.css.js";
-import { Typography as d } from "../../Typography/Typography.js";
-const m = 50, o = 2 * Math.PI * m, T = ({ duration: n = 3e3 }) => {
-  const i = n / 1e3, [e, c] = p(i), h = e / i * o - o;
-  return a(() => c((t) => Math.max(t - 0.4, 0)), []), a(() => {
-    if (e <= 0) return;
-    const t = setTimeout(() => {
-      c((f) => Math.max(f - 1, 0));
-    }, 1e3);
-    return () => clearTimeout(t);
-  }, [e]), /* @__PURE__ */ l("div", { className: s.timerContainer, children: [
-    /* @__PURE__ */ r("svg", { width: "120", height: "120", viewBox: "0 0 120 120", children: /* @__PURE__ */ r(
-      "circle",
-      {
-        className: s.progressCircle,
-        cx: "60",
-        cy: "60",
-        r: m,
-        strokeWidth: "10",
-        strokeDasharray: o,
-        strokeDashoffset: h
-      }
-    ) }),
-    /* @__PURE__ */ r(d, { className: s.timeText, category: "body", proportions: "m", children: Math.ceil(e) })
-  ] });
-};
-export {
-  T as SnackbarTimer
+import { Typography as e } from "../../Typography/Typography.js";
+import t from "../Snackbar.module.js";
+import { useEffect as n, useRef as r, useState as i } from "react";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Snackbar/SnackbarTimer/SnackbarTimer.tsx
+var s = 24, c = 2, l = (s - c) / 2, u = 2 * Math.PI * l, d = ({ duration: d }) => {
+	let [f, p] = i(d), m = r(Date.now());
+	n(() => {
+		m.current = Date.now(), p(d);
+		let e = setInterval(() => {
+			let t = d - (Date.now() - m.current);
+			t <= 0 ? (p(0), clearInterval(e)) : p(t);
+		}, 100);
+		return () => clearInterval(e);
+	}, [d]);
+	let h = u * (1 - f / d), g = Math.ceil(f / 1e3);
+	return /* @__PURE__ */ o("div", {
+		className: t.timer,
+		style: {
+			position: "relative",
+			width: s,
+			height: s,
+			flexShrink: 0
+		},
+		children: [/* @__PURE__ */ o("svg", {
+			width: s,
+			height: s,
+			style: {
+				transform: "rotate(-90deg)",
+				display: "block"
+			},
+			children: [/* @__PURE__ */ a("circle", {
+				cx: s / 2,
+				cy: s / 2,
+				r: l,
+				fill: "none",
+				stroke: "currentColor",
+				strokeOpacity: 0,
+				strokeWidth: c
+			}), /* @__PURE__ */ a("circle", {
+				cx: s / 2,
+				cy: s / 2,
+				r: l,
+				fill: "none",
+				stroke: "currentColor",
+				strokeWidth: c,
+				strokeDasharray: u,
+				strokeDashoffset: h,
+				strokeLinecap: "round",
+				style: { transition: "stroke-dashoffset 0.1s linear" }
+			})]
+		}), /* @__PURE__ */ a(e, {
+			variant: "body",
+			size: "m",
+			style: {
+				position: "absolute",
+				inset: 0,
+				display: "flex",
+				alignItems: "center",
+				justifyContent: "center",
+				margin: 0,
+				color: "currentColor"
+			},
+			children: g
+		})]
+	});
 };
+//#endregion
+export { d as SnackbarTimer };

package/dist/components/Switch/Switch.js

@@ -1,28 +1,34 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-import s from "./Switch.module.css.js";
-import { getSwitchStyles as n } from "./Switch.utils.js";
-import { classNames as m } from "../../utils/class-names.js";
-const x = ({
-  className: a,
-  label: t,
-  description: i,
-  size: r = "m",
-  ...c
-}) => /* @__PURE__ */ e(
-  "div",
-  {
-    className: m(s.root, a),
-    style: n(r),
-    children: /* @__PURE__ */ l("label", { tabIndex: 0, role: "input", children: [
-      /* @__PURE__ */ e("input", { hidden: !0, tabIndex: -1, type: "checkbox", ...c }),
-      /* @__PURE__ */ e("div", { className: s.inputContainer, children: /* @__PURE__ */ e("div", { className: s.ellipse }) }),
-      /* @__PURE__ */ l("div", { className: s.text, children: [
-        t && /* @__PURE__ */ e("span", { className: s.label, children: t }),
-        i && /* @__PURE__ */ e("span", { className: s.description, children: i })
-      ] })
-    ] })
-  }
-);
-export {
-  x as Switch
+import { classNames as e } from "../../utils/class-names.js";
+import { InlineInput as t } from "../InlineInput/InlineInput.js";
+import { useComponentId as n } from "../../hooks/useComponentId/useComponentId.js";
+import r from "./Switch.module.js";
+import { getSwitchStyles as i } from "./Switch.utils.js";
+import { jsx as a, jsxs as o } from "react/jsx-runtime";
+//#region src/components/Switch/Switch.tsx
+var s = ({ className: s, label: c, description: l, size: u = "m", labelPosition: d = "right", rootRef: f, id: p, ...m }) => {
+	let h = n(p);
+	return /* @__PURE__ */ o(t, {
+		className: e(r.root, s),
+		style: i(u),
+		label: c,
+		description: l,
+		size: u,
+		id: h,
+		bodyElement: "label",
+		disabled: m.disabled,
+		labelPosition: d,
+		rootRef: f,
+		children: [/* @__PURE__ */ a("input", {
+			id: h,
+			role: "switch",
+			type: "checkbox",
+			...m
+		}), /* @__PURE__ */ a("div", {
+			className: r.inputContainer,
+			"aria-hidden": "true",
+			children: /* @__PURE__ */ a("div", { className: r.ellipse })
+		})]
+	});
 };
+//#endregion
+export { s as Switch };

package/dist/components/Switch/Switch.module.js

@@ -0,0 +1,7 @@
+var e = {
+	root: "_root_1t2gu_1",
+	inputContainer: "_inputContainer_1t2gu_46",
+	ellipse: "_ellipse_1t2gu_87"
+};
+//#endregion
+export { e as default };

package/dist/components/Switch/Switch.utils.js

@@ -1,40 +1,12 @@
 import { getSize as e } from "../../utils/get-size.js";
-import { resolveTypography as s } from "../../utils/typography.js";
-const h = (t) => {
-  switch (t) {
-    case "m":
-      return s("body", "m");
-    case "s":
-      return s("body", "s");
-  }
-}, l = (t) => {
-  switch (t) {
-    case "m":
-      return s("description", "l");
-    case "s":
-      return s("description", "m");
-  }
-}, w = (t) => {
-  const i = h(t), c = l(t);
-  return {
-    "--switch-border-radius": e(t, "switch-border-radius"),
-    "--switch-width-track": e(t, "switch-width-track"),
-    "--switch-height-track": e(t, "switch-height-track"),
-    "--switch-border-width": e(t, "switch-border-width"),
-    "--switch-spacing-between": e(t, "switch-spacing-between"),
-    "--switch-height-bullet": e(t, "switch-height-bullet"),
-    "--switch-label-font-family": i.fontFamily,
-    "--switch-label-font-weight": i.fontWeight,
-    "--switch-label-font-size": i.fontSize,
-    "--switch-label-line-height": i.lineHeight,
-    "--switch-label-letter-spacing": i.letterSpacing,
-    "--switch-description-font-family": c.fontFamily,
-    "--switch-description-font-weight": c.fontWeight,
-    "--switch-description-font-size": c.fontSize,
-    "--switch-description-line-height": c.lineHeight,
-    "--switch-description-letter-spacing": c.letterSpacing
-  };
-};
-export {
-  w as getSwitchStyles
-};
+//#region src/components/Switch/Switch.utils.ts
+var t = (t) => ({
+	"--switch-track-width": e(t, "switch-track-width"),
+	"--switch-track-height": e(t, "switch-track-height"),
+	"--switch-spacing-between": e(t, "switch-spacing-between"),
+	"--switch-bullet-height": e(t, "switch-bullet-height"),
+	"--switch-bullet-width": e(t, "switch-bullet-width"),
+	"--switch-track-spacing-horizontal": e(t, "switch-track-spacing-horizontal")
+});
+//#endregion
+export { t as getSwitchStyles };

package/dist/components/Tab/Tab.js

@@ -1,61 +1,49 @@
-import { jsxs as a, jsx as s } from "react/jsx-runtime";
-import { useId as y } from "react";
-import e from "./Tab.module.css.js";
-import { getTabStyles as u } from "./Tab.utils.js";
-import { classNames as T } from "../../utils/class-names.js";
-const I = ({
-  className: i,
-  value: l,
-  onChange: m,
-  label: n,
-  leftIcon: c,
-  rightIcon: p,
-  counter: r,
-  variant: t = "primary",
-  size: h = "m",
-  rounded: d = !1,
-  isAlert: f = !1,
-  selectionType: g = "single",
-  withBackground: x = !1,
-  ...N
-}) => {
-  const o = y(), b = g === "single" ? "radio" : "checkbox";
-  return /* @__PURE__ */ a(
-    "div",
-    {
-      className: T(
-        e.root,
-        t === "text" && e.text,
-        i
-      ),
-      style: u(t, h, d, x),
-      children: [
-        /* @__PURE__ */ s(
-          "input",
-          {
-            hidden: !0,
-            id: o,
-            type: b,
-            className: e.tab,
-            value: l,
-            onChange: () => m?.(String(l)),
-            ...N
-          }
-        ),
-        /* @__PURE__ */ a("label", { htmlFor: o, children: [
-          c,
-          /* @__PURE__ */ a("span", { className: e.labelContainer, children: [
-            n,
-            r && /* @__PURE__ */ s("span", { className: e.counter, children: r }),
-            f && /* @__PURE__ */ s("span", { className: e.alert })
-          ] }),
-          p
-        ] }),
-        t === "text" && /* @__PURE__ */ s("span", { className: e.highlight })
-      ]
-    }
-  );
-};
-export {
-  I as Tab
+import { classNames as e } from "../../utils/class-names.js";
+import { useComponentId as t } from "../../hooks/useComponentId/useComponentId.js";
+import n from "./Tab.module.js";
+import { getTabStyles as r } from "./Tab.utils.js";
+import { useTabGroupContext as i } from "./TabGroup/TabGroup.context.js";
+import { TabGroup as a } from "./TabGroup/TabGroup.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/components/Tab/Tab.tsx
+var c = ({ className: a, style: c, leftIcon: l, rightIcon: u, variant: d = "main", size: f = "m", rounded: p = !1, type: m = "checkbox", id: h, children: g, value: _, disabled: v, checked: y, ...b }) => {
+	let x = t(h), S = i(), C = S?.variant ?? d, w = S?.size ?? f, T = S?.rounded ?? p, E = S?.disabled || v, D = S ? S.type : m, O = {
+		checked: S ? Array.isArray(S.value) ? S.value.includes(String(_)) : S.value === _ : y,
+		onChange: (e) => {
+			S?.onChange?.(String(_)), b.onChange?.(e);
+		}
+	};
+	return /* @__PURE__ */ s("div", {
+		className: e(n.root, C === "text" && n.text, a),
+		style: {
+			...r(C, w, T),
+			...c
+		},
+		children: [
+			/* @__PURE__ */ o("input", {
+				id: x,
+				type: D,
+				className: n.input,
+				disabled: E,
+				value: _,
+				...b,
+				...O
+			}),
+			/* @__PURE__ */ s("label", {
+				htmlFor: x,
+				children: [
+					l,
+					/* @__PURE__ */ o("span", {
+						className: e("uiFont", n.labelContainer),
+						children: g
+					}),
+					u
+				]
+			}),
+			d === "text" && /* @__PURE__ */ o("span", { className: n.highlight })
+		]
+	});
 };
+c.Group = a;
+//#endregion
+export { c as Tab };

package/dist/components/Tab/Tab.module.js

@@ -0,0 +1,9 @@
+var e = {
+	root: "_root_1iktr_1",
+	labelContainer: "_labelContainer_1iktr_124",
+	text: "_text_1iktr_131",
+	input: "_input_1iktr_142",
+	highlight: "_highlight_1iktr_181"
+};
+//#endregion
+export { e as default };

package/dist/components/Tab/Tab.utils.js

@@ -1,128 +1,42 @@
-import { resolveTypography as l } from "../../utils/typography.js";
-import { getSize as r } from "../../utils/get-size.js";
-const g = (e, t) => ({
-  background: `var(--tab-bg-color-${e}-default${t ? "-bg" : ""})`,
-  backgroundHover: `var(--tab-bg-color-${e}-hover)`,
-  backgroundDisabled: `var(--tab-bg-color-${e}-disabled)`,
-  backgroundSelected: `var(--tab-bg-color-${e}-active)`,
-  backgroundSelectedHover: `var(--tab-bg-color-${e}-active-hover)`,
-  backgroundDisabledSelected: `var(--tab-bg-color-${e}-disabled-active)`,
-  color: `var(--tab-label-color-${e}-default${t ? "-bg" : ""})`,
-  colorHover: `var(--tab-label-color-${e}-hover)`,
-  colorDisabled: `var(--tab-label-color-${e}-disabled)`,
-  colorSelected: `var(--tab-label-color-${e}-active)`,
-  colorSelectedHover: `var(--tab-label-color-${e}-active-hover)`,
-  colorDisabledSelected: `var(--tab-label-color-${e}-disabled-active)`,
-  iconColor: `var(--tab-icon-color-${e}-default${t ? "-bg" : ""})`,
-  iconColorHover: `var(--tab-icon-color-${e}-hover)`,
-  iconColorSelected: `var(--tab-icon-color-${e}-active)`,
-  iconColorSelectedHover: `var(--tab-icon-color-${e}-active-hover)`,
-  iconColorDisabled: `var(--tab-icon-color-${e}-disabled)`,
-  iconColorDisabledSelected: `var(--tab-icon-color-${e}-disabled-active)`,
-  borderColor: `var(--tab-border-color-${e}-default)`,
-  borderColorHover: `var(--tab-border-color-${e}-hover)`,
-  borderColorSelected: `var(--tab-border-color-${e}-active)`,
-  borderColorDisabled: `var(--tab-border-color-${e}-disabled)`,
-  borderColorDisabledSelected: `var(--tab-border-color-${e}-disabled-active)`,
-  borderColorSelectedHover: `var(--tab-border-color-${e}-active-hover)`,
-  counterColor: `var( --tab-counter-label-color-${e}-default${t ? "-bg" : ""})`,
-  counterColorHover: `var(--tab-counter-label-color-${e}-hover)`,
-  counterColorActive: `var(--tab-counter-label-color-${e}-active)`,
-  counterColorActiveHover: `var(--tab-counter-label-color-${e}-active-hover)`,
-  counterColorDisabled: `var(--tab-counter-label-color-${e}-disabled)`,
-  counterColorDisabledActive: `var(--tab-counter-label-color-${e}-disabled-active)`
-}), s = (e) => ({
-  height: r(e, "tab-height"),
-  borderWidth: r(e, "tab-border-width"),
-  iconWidth: r(e, "tab-icon-width"),
-  iconHeight: r(e, "tab-icon-height"),
-  paddingX: r(e, "tab-spacing-horizontal"),
-  paddingY: r(e, "tab-spacing-vertical"),
-  counterSpacingBottom: r(e, "tab-counter-spacing-bottom"),
-  highlightHeight: r(e, "tab-highlight-height"),
-  labelSize: r(e, "tab-label-size"),
-  fontWeight: r(e, "tab-font-weight"),
-  spacingBetween: r(e, "tab-spacing-between"),
-  spacingBetweenText: `var(--tab-spacing-between-${e}-text)`,
-  labelContainerPaddingX: r(
-    e,
-    "tab-label-spacing-container-horizontal"
-  ),
-  labelContainerSpacingBetween: r(
-    e,
-    "tab-label-spacing-container-between"
-  )
-}), h = (e, t) => {
-  switch (e) {
-    case "s":
-      return t === "text" ? l("body", "s") : l("body", "xs");
-    case "m":
-      return t === "text" ? l("body", "m") : l("body", "s");
-    case "l":
-      return t === "text" ? l("heading", "h3") : l("body", "m");
-  }
-}, C = (e, t, a, d) => {
-  const i = g(e, d), n = s(t), b = h(t, e), c = l("description", "m"), o = { ...i, ...n };
-  return {
-    "--tab-bg-color": o.background,
-    "--tab-bg-color-hover": o.backgroundHover,
-    "--tab-bg-color-selected": o.backgroundSelected,
-    "--tab-bg-color-selected-hover": o.backgroundSelectedHover,
-    "--tab-bg-color-disabled": o.backgroundDisabled,
-    "--tab-bg-color-disabled-selected": o.backgroundDisabledSelected,
-    "--tab-border-color": o.borderColor,
-    "--tab-border-color-hover": o.borderColorHover,
-    "--tab-border-color-selected": o.borderColorSelected,
-    "--tab-border-color-selected-hover": o.borderColorSelectedHover,
-    "--tab-border-color-disabled": o.borderColorDisabled,
-    "--tab-border-color-disabled-selected": o.borderColorDisabledSelected,
-    "--tab-border-style": e === "outline" ? "solid" : "none",
-    "--tab-border-width": e === "outline" ? o.borderWidth : "",
-    "--tab-label-color": o.color,
-    "--tab-label-color-hover": o.colorHover,
-    "--tab-label-color-selected": o.colorSelected,
-    "--tab-label-color-selected-hover": o.colorSelectedHover,
-    "--tab-label-color-disabled": o.colorDisabled,
-    "--tab-label-color-disabled-selected": o.colorDisabledSelected,
-    "--tab-border-radius": r(
-      `${t}${a ? "-rounded" : ""}`,
-      "tab-border-radius"
-    ),
-    "--tab-height": o.height,
-    "--tab-icon-color": o.iconColor,
-    "--tab-icon-color-hover": o.iconColorHover,
-    "--tab-icon-color-selected": o.iconColorSelected,
-    "--tab-icon-color-selected-hover": o.iconColorSelectedHover,
-    "--tab-icon-color-disabled": o.iconColorDisabled,
-    "--tab-icon-color-disabled-selected": o.iconColorDisabledSelected,
-    "--tab-icon-width": o.iconWidth,
-    "--tab-icon-height": o.iconHeight,
-    "--tab-padding-x": o.paddingX,
-    "--tab-padding-y": o.paddingY,
-    "--tab-counter-color": o.counterColor,
-    "--tab-counter-color-hover": o.counterColorHover,
-    "--tab-counter-color-active": o.counterColorActive,
-    "--tab-counter-color-active-hover": o.counterColorActiveHover,
-    "--tab-counter-color-disabled": o.counterColorDisabled,
-    "--tab-counter-color-disabled-active": o.counterColorDisabledActive,
-    "--tab-counter-spacing-bottom": o.counterSpacingBottom,
-    "--tab-highlight-height": o.highlightHeight,
-    "--tab-font-family": b.fontFamily,
-    "--tab-font-weight": b.fontWeight,
-    "--tab-font-size": b.fontSize,
-    "--tab-line-height": b.lineHeight,
-    "--tab-letter-spacing": b.letterSpacing,
-    "--tab-badge-font-family": c.fontFamily,
-    "--tab-badge-font-weight": c.fontWeight,
-    "--tab-badge-font-size": c.fontSize,
-    "--tab-badge-line-height": c.lineHeight,
-    "--tab-badge-letter-spacing": c.letterSpacing,
-    "--tab-spacing-between-text": o.spacingBetweenText,
-    "--tab-spacing-between": o.spacingBetween,
-    "--tab-label-spacing-container-between": o.labelContainerSpacingBetween,
-    "--tab-label-spacing-container-horizontal": o.labelContainerPaddingX
-  };
-};
-export {
-  C as getTabStyles
-};
+import { getSize as e } from "../../utils/get-size.js";
+import { resolveTypography as t } from "../../utils/typography.js";
+//#region src/components/Tab/Tab.utils.ts
+var n = (e, n) => {
+	switch (e) {
+		case "s": return n === "text" ? t("body", "s") : t("body", "xs");
+		case "m": return n === "text" ? t("body", "m") : t("body", "s");
+		case "l": return n === "text" ? t("heading", "h3", "bold") : t("body", "m");
+	}
+}, r = (t, r, i) => ({
+	...n(r, t),
+	"--tab-bg-color": `var(--tab-${t}-bg-color-default)`,
+	"--tab-bg-color-hover": `var(--tab-${t}-bg-color-hover)`,
+	"--tab-bg-color-selected": `var(--tab-${t}-bg-color-active)`,
+	"--tab-bg-color-selected-hover": `var(--tab-${t}-bg-color-active-hover)`,
+	"--tab-bg-color-disabled": `var(--tab-${t}-bg-color-disabled)`,
+	"--tab-bg-color-disabled-selected": `var(--tab-${t}-bg-color-disabled-active)`,
+	"--tab-border-color": `var(--tab-${t}-border-color-default)`,
+	"--tab-border-color-hover": `var(--tab-${t}-border-color-hover)`,
+	"--tab-border-color-selected": `var(--tab-${t}-border-color-active)`,
+	"--tab-border-color-selected-hover": `var(--tab-${t}-border-color-active-hover)`,
+	"--tab-border-color-disabled": `var(--tab-${t}-border-color-disabled)`,
+	"--tab-border-color-disabled-selected": `var(--tab-${t}-border-color-disabled-active)`,
+	"--tab-border-style": t === "outline" ? "solid" : "none",
+	"--tab-border-width": t === "outline" ? e(r, "tab-border-width") : "0",
+	"--tab-content-color": `var(--tab-${t}-content-color-default)`,
+	"--tab-content-color-hover": `var(--tab-${t}-content-color-hover)`,
+	"--tab-content-color-selected": `var(--tab-${t}-content-color-active)`,
+	"--tab-content-color-selected-hover": `var(--tab-${t}-content-color-active-hover)`,
+	"--tab-content-color-disabled": `var(--tab-${t}-content-color-disabled)`,
+	"--tab-content-color-disabled-selected": `var(--tab-${t}-content-color-disabled-active)`,
+	"--tab-border-radius": e(r, `tab-border-radius${i ? "-rounded" : ""}`),
+	"--tab-height": e(r, "tab-height"),
+	"--tab-icon-size": e(r, "tab-icon-size"),
+	"--tab-spacing-horizontal": e(r, "tab-spacing-horizontal"),
+	"--tab-line-height": e(r, "tab-line-height"),
+	"--tab-text-spacing-between-content-line": e(r, "tab-text-spacing-between-content-line"),
+	"--tab-spacing-between": e(r, "tab-spacing-between"),
+	"--tab-content-container-spacing-horizontal": e(r, "tab-content-container-spacing-horizontal")
+});
+//#endregion
+export { r as getTabStyles };

package/dist/components/Tab/TabGroup/TabGroup.context.js

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