@alif-ui-test/core 1.11.0

package/dist/components/Snackbar/Snackbar.js

@@ -0,0 +1,105 @@
+import { jsx as r, jsxs as f } from "react/jsx-runtime";
+import { useState as N } from "react";
+import e from "./Snackbar.module.css.js";
+import { getSnackbarStyles as g, getSnackbarIconStyles as v } from "./Snackbar.utils.js";
+import { Typography as p } from "../Typography/Typography.js";
+import { FunctionButton as w } from "../FunctionButton/FunctionButton.js";
+import { SnackbarTimer as x } from "./SnackbarTimer/SnackbarTimer.js";
+import { SolidSystemExclamation as E } from "../../icons/components/SolidSystemExclamation.js";
+import { SolidSystemRemoveCircle as T } from "../../icons/components/SolidSystemRemoveCircle.js";
+import { classNames as I } from "../../utils/class-names.js";
+import { OutlineSystemClose as B } from "../../icons/components/OutlineSystemClose.js";
+import { SolidSystemInfo as j } from "../../icons/components/SolidSystemInfo.js";
+import { SolidSystemCheckCircle as A } from "../../icons/components/SolidSystemCheckCircle.js";
+const O = {
+  success: /* @__PURE__ */ r(A, {}),
+  error: /* @__PURE__ */ r(T, {}),
+  warning: /* @__PURE__ */ r(E, {}),
+  info: /* @__PURE__ */ r(j, {})
+}, R = { show: () => {
+} }, M = ({
+  position: i = "top-right"
+}) => {
+  const [b, m] = N([]), l = (t) => {
+    const s = document.getElementById(`snackbar-${t}`);
+    s && (s.classList.add(e.snackbarExit), setTimeout(() => {
+      m((a) => a.filter((o) => o.id !== t));
+    }, 100));
+  }, k = ({
+    duration: t = 3e3,
+    autoHide: s = !0,
+    ...a
+  }) => {
+    const o = {
+      id: Date.now(),
+      ...a,
+      duration: t
+    };
+    m(
+      (n) => i.includes("top") ? [o, ...n] : [...n, o]
+    ), s && setTimeout(() => l(o.id), t);
+  };
+  return R.show = k, /* @__PURE__ */ r("div", { className: e.root, style: g(i), children: b.map(
+    ({
+      id: t,
+      title: s,
+      subtitle: a,
+      withCloseButton: o,
+      withTimer: n,
+      leftSlot: y,
+      rightSlot: S,
+      type: c,
+      actions: h,
+      className: u,
+      duration: C
+    }) => {
+      const d = c ? O[c] : n ? /* @__PURE__ */ r(x, { duration: C }) : y;
+      return /* @__PURE__ */ f(
+        "div",
+        {
+          style: v(c),
+          id: `snackbar-${t}`,
+          className: I(e.snackbar, u),
+          children: [
+            d && /* @__PURE__ */ r("div", { className: e.leftSlot, children: d }),
+            /* @__PURE__ */ f("div", { className: e.titles, children: [
+              /* @__PURE__ */ r(
+                p,
+                {
+                  className: e.title,
+                  category: "body",
+                  proportions: "mStrong",
+                  children: s
+                }
+              ),
+              a && /* @__PURE__ */ r(
+                p,
+                {
+                  className: e.subtitle,
+                  category: "body",
+                  proportions: "xs",
+                  children: a
+                }
+              ),
+              h
+            ] }),
+            S,
+            o && !S && /* @__PURE__ */ r(
+              w,
+              {
+                variant: "tertiary",
+                onClick: () => l(t),
+                children: /* @__PURE__ */ r(B, {})
+              }
+            )
+          ]
+        },
+        t
+      );
+    }
+  ) });
+};
+export {
+  M as SnackbarContainer,
+  R as snackbar
+};

package/dist/components/Snackbar/Snackbar.module.css.js

@@ -0,0 +1,19 @@
+const t = "_root_uwrfh_1", s = "_snackbar_uwrfh_36", _ = "_leftSlot_uwrfh_51", o = "_snackbarExit_uwrfh_61", l = "_titles_uwrfh_65", r = "_title_uwrfh_65", e = "_subtitle_uwrfh_77", a = {
+  root: t,
+  snackbar: s,
+  leftSlot: _,
+  snackbarExit: o,
+  titles: l,
+  title: r,
+  subtitle: e
+};
+export {
+  a as default,
+  _ as leftSlot,
+  t as root,
+  s as snackbar,
+  o as snackbarExit,
+  e as subtitle,
+  r as title,
+  l as titles
+};

package/dist/components/Snackbar/Snackbar.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,52 @@
+const n = (a) => ({
+  "--snackbar-icon-color": a ? `var(--snackbar-icon-color-${a})` : "var(--snackbar-icon-color-default)"
+}), r = (a) => {
+  const t = {
+    top: "",
+    bottom: "",
+    right: "",
+    left: "",
+    transform: "",
+    animationTransform: "",
+    alignItems: ""
+  };
+  switch (a) {
+    case "top-right": {
+      t.top = "0", t.right = "0", t.transform = "translateX(0)", t.animationTransform = "translateX(50px)", t.alignItems = "end";
+      break;
+    }
+    case "top-center": {
+      t.top = "0", t.left = "50%", t.transform = "translateX(-50%)", t.animationTransform = "translateY(-50px)", t.alignItems = "center";
+      break;
+    }
+    case "top-left": {
+      t.top = "0", t.left = "0", t.transform = "translateX(0)", t.animationTransform = "translateX(-50px)", t.alignItems = "start";
+      break;
+    }
+    case "bottom-left": {
+      t.bottom = "0", t.left = "0", t.transform = "translateX(0)", t.animationTransform = "translateX(-50px)", t.alignItems = "start";
+      break;
+    }
+    case "bottom-center": {
+      t.bottom = "0", t.left = "50%", t.transform = "translateX(-50%)", t.animationTransform = "translateY(50px)", t.alignItems = "center";
+      break;
+    }
+    case "bottom-right": {
+      t.bottom = "0", t.right = "0", t.transform = "translateX(0)", t.animationTransform = "translateX(50px)", t.alignItems = "end";
+      break;
+    }
+  }
+  return {
+    "--snackbar-position-top": t.top,
+    "--snackbar-position-bottom": t.bottom,
+    "--snackbar-position-left": t.left,
+    "--snackbar-position-right": t.right,
+    "--snackbar-position-transform": t.transform,
+    "--snackbar-position-animation-transform": t.animationTransform,
+    "--snackbar-align-items": t.alignItems
+  };
+};
+export {
+  n as getSnackbarIconStyles,
+  r as getSnackbarStyles
+};

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

@@ -0,0 +1,31 @@
+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
+};

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

@@ -0,0 +1,11 @@
+const e = "_timerContainer_16n5r_1", r = "_progressCircle_16n5r_16", t = "_timeText_16n5r_24", n = {
+  timerContainer: e,
+  progressCircle: r,
+  timeText: t
+};
+export {
+  n as default,
+  r as progressCircle,
+  t as timeText,
+  e as timerContainer
+};

package/dist/components/Switch/Switch.js

@@ -0,0 +1,28 @@
+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
+};

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

@@ -0,0 +1,17 @@
+const t = "_root_1o3nv_1", o = "_inputContainer_1o3nv_55", n = "_ellipse_1o3nv_85", e = "_text_1o3nv_101", _ = "_label_1o3nv_108", s = "_description_1o3nv_117", i = {
+  root: t,
+  inputContainer: o,
+  ellipse: n,
+  text: e,
+  label: _,
+  description: s
+};
+export {
+  i as default,
+  s as description,
+  n as ellipse,
+  o as inputContainer,
+  _ as label,
+  t as root,
+  e as text
+};

package/dist/components/Switch/Switch.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,40 @@
+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
+};

package/dist/components/Tab/Tab.js

@@ -0,0 +1,61 @@
+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
+};

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

@@ -0,0 +1,19 @@
+const t = "_root_10br5_1", o = "_labelContainer_10br5_206", _ = "_text_10br5_214", r = "_tab_10br5_225", e = "_alert_10br5_277", n = "_counter_10br5_284", a = "_highlight_10br5_315", l = {
+  root: t,
+  labelContainer: o,
+  text: _,
+  tab: r,
+  alert: e,
+  counter: n,
+  highlight: a
+};
+export {
+  e as alert,
+  n as counter,
+  l as default,
+  a as highlight,
+  o as labelContainer,
+  t as root,
+  r as tab,
+  _ as text
+};

package/dist/components/Tab/Tab.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,128 @@
+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
+};

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

@@ -0,0 +1,61 @@
+import { jsx as l } from "react/jsx-runtime";
+import { Children as V, isValidElement as j } from "react";
+import t from "./TabGroup.module.css.js";
+import { Tab as m } from "../Tab.js";
+import { classNames as G } from "../../../utils/class-names.js";
+const O = ({
+  className: f,
+  value: a,
+  defaultValue: u,
+  onChange: o,
+  fullWidth: c,
+  children: d,
+  selectionType: p = "single",
+  disabled: g = !1,
+  variant: n = "primary",
+  rounded: y = !1,
+  size: b = "m",
+  justify: x = "flex-start",
+  spacing: A = "var(--spacing-2x)"
+}) => {
+  const C = G(
+    t.root,
+    f,
+    n === "text" && t.highlight,
+    c && t.fullWidth
+  ), h = p === "single", r = a || u, T = (s) => {
+    if (h) {
+      s !== r && o(s);
+      return;
+    }
+    const e = Array.isArray(a) ? [...a] : [], i = e.indexOf(s);
+    i >= 0 ? e.splice(i, 1) : e.push(s), o(e);
+  };
+  return /* @__PURE__ */ l(
+    "div",
+    {
+      className: C,
+      style: { justifyContent: x, gap: A },
+      children: V.map(
+        d,
+        (s) => j(s) && s.type === m ? /* @__PURE__ */ l(
+          m,
+          {
+            rounded: y,
+            size: b,
+            variant: n || s.props.variant,
+            checked: Array.isArray(r) ? r.includes(s.props.value) : r === s.props.value,
+            onChange: T,
+            disabled: g || s.props.disabled,
+            selectionType: p,
+            ...s.props
+          },
+          s.props.value
+        ) : null
+      )
+    }
+  );
+};
+export {
+  O as TabGroup
+};

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

@@ -0,0 +1,9 @@
+const o = "_root_1lio1_1", t = "_fullWidth_1lio1_7", l = {
+  root: o,
+  fullWidth: t
+};
+export {
+  l as default,
+  t as fullWidth,
+  o as root
+};

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

@@ -0,0 +1 @@
+

package/dist/components/Tab/TabMenu/TabMenu.js

@@ -0,0 +1,11 @@
+import { jsx as n } from "react/jsx-runtime";
+import { SegmentedControl as o } from "../../SegmentedControl/SegmentedControl.js";
+import { TabMenuNew as t } from "../../TabMenuNew/TabMenuNew.js";
+function f({ variant: e = "primary", ...r }) {
+  return e !== "text" ? (process.env.NODE_ENV === "development" && console.warn(
+    `[TabMenu] variant="${e}" is deprecated. Use <SegmentedControl variant="${e}" /> instead.`
+  ), /* @__PURE__ */ n(o, { variant: e, ...r })) : /* @__PURE__ */ n(t, { ...r });
+}
+export {
+  f as TabMenu
+};

package/dist/components/Tab/TabMenu/TabMenu.types.js

@@ -0,0 +1 @@
+

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

@@ -0,0 +1,13 @@
+import { getSize as t } from "../../../utils/get-size.js";
+const d = (e, a) => ({
+  "--tab-menu-border-radius": t(
+    `${e}${a ? "-rounded" : ""}`,
+    "tab-menu-border-radius"
+  ),
+  "--tab-menu-padding-x": t(e, "tab-menu-spacing-horizontal"),
+  "--tab-menu-padding-y": t(e, "tab-menu-spacing-vertical"),
+  "--tab-menu-divider-height": t(e, "tab-menu-divider-height")
+});
+export {
+  d as getTabMenuStyles
+};