asheeui 0.6.15 → 0.7.0

package/dist/components/tabs/Tabs.js

@@ -1,209 +1,94 @@
 "use client";
-import { jsxs as K, jsx as o } from "react/jsx-runtime";
-import { forwardRef as ae, useId as te, useRef as ne, useState as se, useCallback as de, useMemo as N } from "react";
-import { useAsheeConfig as oe } from "../../libs/context.js";
-import { resolveCascade as y, resolveRadiusKey as _, resolveClassKey as x } from "../../utils/resolve-token.js";
-import { Button as ce } from "../button/Button.js";
-import { FALLBACK_TABS_CONFIG as t } from "./tabs-config.js";
-import { TABS_HEIGHT_CLASS as ue, TABS_PADDING_X_CLASS as fe, TABS_FONT_CLASS as ve } from "./tabs-styles.js";
-import { RADIUS_CLASS as me } from "../../shared/radius.js";
-import { cn as g } from "../../utils/cn.js";
-const pe = ae(
-  ({
-    tabs: i = [],
-    activeId: I,
-    defaultActiveId: z,
-    onChange: c,
-    variant: C,
-    size: V,
-    radius: $,
-    activeRadius: L,
-    activeVariant: B,
-    activeColor: H,
-    fullWidth: j = !1,
-    tabListClassName: F,
-    tabClassName: G,
-    tabPanelClassName: E,
-    className: M,
-    style: O,
-    ...X
-  }, U) => {
-    var D;
-    const s = oe(), r = (D = s.components) == null ? void 0 : D.tabs, u = te(), S = ne(
-      /* @__PURE__ */ new Map()
-    ), [q, J] = se(
-      () => {
-        var e;
-        return z ?? ((e = i[0]) == null ? void 0 : e.id);
-      }
-    ), T = I !== void 0, w = T ? I : q, f = y(
-      V,
-      r == null ? void 0 : r.size,
-      void 0,
-      t.size
-    ), v = y(
-      C,
-      r == null ? void 0 : r.variant,
-      void 0,
-      t.variant
-    ), P = y(
-      B,
-      r == null ? void 0 : r.activeVariant,
-      s.defaultVariant,
-      t.activeVariant
-    ), Q = y(
-      H,
-      r == null ? void 0 : r.activeColor,
-      s.defaultColor,
-      t.activeColor
-    ), R = _(
-      $,
-      r == null ? void 0 : r.radius,
-      s.defaultRadius,
-      t.radius
-    ), W = _(
-      L,
-      r == null ? void 0 : r.activeRadius,
-      s.defaultRadius,
-      t.activeRadius
-    ), Y = x(
-      f,
-      ue,
-      t.size
-    ), Z = x(
-      f,
-      fe,
-      t.size
-    ), ee = x(
-      f,
-      ve,
-      t.size
-    ), ie = x(
-      R,
-      me,
-      t.radius
-    ), k = de(
-      (e) => {
-        T || J(e), c == null || c(e);
-      },
-      [T, c]
-    ), re = (e, m) => {
-      var p, h, A, b;
-      if (i.filter((l) => !l.disabled).length === 0) return;
-      let a = -1;
-      if (e.key === "ArrowRight")
-        for (e.preventDefault(), a = (m + 1) % i.length; (p = i[a]) != null && p.disabled; )
-          a = (a + 1) % i.length;
-      else if (e.key === "ArrowLeft")
-        for (e.preventDefault(), a = (m - 1 + i.length) % i.length; (h = i[a]) != null && h.disabled; )
-          a = (a - 1 + i.length) % i.length;
-      else if (e.key === "Home")
-        e.preventDefault(), a = i.findIndex((l) => !l.disabled);
-      else if (e.key === "End") {
-        e.preventDefault();
-        for (let l = i.length - 1; l >= 0; l--)
-          if (!((A = i[l]) != null && A.disabled)) {
-            a = l;
-            break;
-          }
-      }
-      if (a !== -1 && i[a]) {
-        const l = i[a];
-        k(l.id), (b = S.current.get(l.id)) == null || b.focus();
-      }
-    }, d = N(
-      () => i.find((e) => e.id === w) ?? i[0],
-      [i, w]
-    ), le = N(() => {
-      switch (v) {
-        case "bordered":
-          return "border border-border p-1 bg-background";
-        case "ghost":
-          return "bg-transparent gap-1";
-        default:
-          return "border-b border-border gap-2";
-      }
-    }, [v]);
-    return /* @__PURE__ */ K(
-      "div",
-      {
-        ref: U,
-        className: g("w-full h-full flex flex-col gap-4", M),
-        style: O,
-        ...X,
-        children: [
-          /* @__PURE__ */ o(
-            "div",
-            {
-              role: "tablist",
-              "aria-orientation": "horizontal",
-              className: g(
-                "flex flex-row w-full items-center overflow-x-auto scrollable-hidden shrink-0",
-                le,
-                v !== "underline" && ie,
-                F
-              ),
-              children: i.map((e, m) => {
-                const n = e.id === w, a = e.label ?? e.name, p = `${u}-tab-${e.id}`, h = `${u}-panel-${e.id}`, A = e.activeVariant ?? P, b = e.activeColor ?? Q;
-                return /* @__PURE__ */ K(
-                  ce,
-                  {
-                    ref: (l) => {
-                      l ? S.current.set(e.id, l) : S.current.delete(e.id);
-                    },
-                    id: p,
-                    type: "button",
-                    role: "tab",
-                    "aria-selected": n,
-                    "aria-controls": h,
-                    "aria-disabled": e.disabled,
-                    tabIndex: n ? 0 : -1,
-                    radius: n ? W : R,
-                    isDisabled: e.disabled,
-                    size: f,
-                    variant: n ? v === "underline" ? "underlined" : A : "ghost",
-                    color: n ? b : "none",
-                    onClick: () => k(e.id),
-                    onKeyDown: (l) => re(l, m),
-                    className: g(
-                      "relative flex items-center justify-center gap-2 font-medium transition-all duration-200 select-none outline-none active:scale-[0.98]",
-                      Y,
-                      Z,
-                      ee,
-                      j && "flex-1",
-                      G
-                    ),
-                    children: [
-                      e.icon && /* @__PURE__ */ o("span", { className: "shrink-0", children: e.icon }),
-                      /* @__PURE__ */ o("span", { children: a }),
-                      e.badge !== void 0 && /* @__PURE__ */ o("span", { className: "shrink-0 text-xs px-1.5 py-0.5 rounded-full bg-secondary text-foreground/70 font-normal", children: e.badge })
-                    ]
-                  },
-                  String(e.id)
-                );
-              })
-            }
-          ),
-          d && /* @__PURE__ */ o(
-            "div",
-            {
-              id: `${u}-panel-${d.id}`,
-              role: "tabpanel",
-              "aria-labelledby": `${u}-tab-${d.id}`,
-              className: g(
-                "w-full h-full flex-1 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-md transition-all duration-200 animate-in fade-in-50",
-                E
-              ),
-              children: d.content
-            },
-            String(d.id)
-          )
-        ]
-      }
-    );
-  }
-);
-pe.displayName = "Tabs";
-export {
-  pe as Tabs
-};
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { useAsheeConfig as t } from "../../libs/context.js";
+import { RADIUS_CLASS as n } from "../../shared/radius.js";
+import { resolveCascade as r, resolveClassKey as i, resolveRadiusKey as a } from "../../utils/resolve-token.js";
+import { Button as o } from "../button/Button.js";
+import { FALLBACK_TABS_CONFIG as s } from "./tabs-config.js";
+import { TABS_FONT_CLASS as c, TABS_HEIGHT_CLASS as l, TABS_PADDING_X_CLASS as u } from "./tabs-styles.js";
+import { forwardRef as d, useCallback as f, useId as p, useMemo as m, useRef as h, useState as g } from "react";
+import { jsx as _, jsxs as v } from "react/jsx-runtime";
+//#region src/components/tabs/Tabs.tsx
+var y = d(({ tabs: d = [], activeId: y, defaultActiveId: b, onChange: x, variant: S, size: C, radius: w, options: T, fullWidth: ee = !1, tabListClassName: te, tabPanelClassName: E, className: D, style: O, ...k }, A) => {
+	let j = t(), M = j.components?.tabs, N = p(), P = h(/* @__PURE__ */ new Map()), [F, I] = g(() => b ?? d[0]?.id), L = y !== void 0, R = L ? y : F, z = r(C, M?.size, void 0, s.size), B = r(S, M?.variant, void 0, s.variant), V = r(T?.active?.variant, M?.options?.active?.variant, j.defaultVariant, s.options.active.variant), H = r(T?.active?.color, M?.options?.active?.color, j.defaultColor, s.options.active.color), U = r(T?.inactive?.variant, M?.options?.inactive?.variant, void 0, s.options.inactive.variant), W = r(T?.inactive?.color, M?.options?.inactive?.color, void 0, s.options.inactive.color), G = a(w, M?.radius, j.defaultRadius, s.radius), K = a(T?.active?.radius, M?.options?.active?.radius, j.defaultRadius, s.options.active.radius), q = a(T?.inactive?.radius, M?.options?.inactive?.radius, G, s.options.inactive.radius), J = i(z, l, s.size), Y = i(z, u, s.size), X = i(z, c, s.size), Z = i(G, n, s.radius), Q = f((e) => {
+		L || I(e), x?.(e);
+	}, [L, x]), ne = (e, t) => {
+		if (d.filter((e) => !e.disabled).length === 0) return;
+		let n = -1;
+		if (e.key === "ArrowRight") for (e.preventDefault(), n = (t + 1) % d.length; d[n]?.disabled;) n = (n + 1) % d.length;
+		else if (e.key === "ArrowLeft") for (e.preventDefault(), n = (t - 1 + d.length) % d.length; d[n]?.disabled;) n = (n - 1 + d.length) % d.length;
+		else if (e.key === "Home") e.preventDefault(), n = d.findIndex((e) => !e.disabled);
+		else if (e.key === "End") {
+			e.preventDefault();
+			for (let e = d.length - 1; e >= 0; e--) if (!d[e]?.disabled) {
+				n = e;
+				break;
+			}
+		}
+		if (n !== -1 && d[n]) {
+			let e = d[n];
+			Q(e.id), P.current.get(e.id)?.focus();
+		}
+	}, $ = m(() => d.find((e) => e.id === R) ?? d[0], [d, R]), re = m(() => {
+		switch (B) {
+			case "bordered": return "border border-border p-1 bg-background";
+			case "ghost": return "bg-transparent gap-1";
+			default: return "border-b border-border gap-2";
+		}
+	}, [B]);
+	return /* @__PURE__ */ v("div", {
+		ref: A,
+		className: e("w-full h-full flex flex-col gap-4", D),
+		style: O,
+		...k,
+		children: [/* @__PURE__ */ _("div", {
+			role: "tablist",
+			"aria-orientation": "horizontal",
+			className: e("flex flex-row w-full items-center overflow-x-auto scrollable-hidden shrink-0", re, B !== "underline" && Z, te),
+			children: d.map((t, n) => {
+				let r = t.id === R, i = t.label ?? t.name, a = `${N}-tab-${t.id}`, s = `${N}-panel-${t.id}`, c = t.activeVariant ?? V, l = t.activeColor ?? H;
+				return /* @__PURE__ */ v(o, {
+					ref: (e) => {
+						e ? P.current.set(t.id, e) : P.current.delete(t.id);
+					},
+					id: a,
+					type: "button",
+					role: "tab",
+					"aria-selected": r,
+					"aria-controls": s,
+					"aria-disabled": t.disabled,
+					tabIndex: r ? 0 : -1,
+					radius: r ? K : q,
+					isDisabled: t.disabled,
+					size: z,
+					variant: r ? B === "underline" ? "underlined" : c : U,
+					color: r ? l : W,
+					onClick: () => Q(t.id),
+					onKeyDown: (e) => ne(e, n),
+					className: e("relative flex items-center justify-center gap-2 font-medium transition-all duration-200 select-none outline-none active:scale-[0.98]", J, Y, X, ee && "flex-1", T?.tabClassName),
+					children: [
+						t.icon && /* @__PURE__ */ _("span", {
+							className: "shrink-0",
+							children: t.icon
+						}),
+						/* @__PURE__ */ _("span", { children: i }),
+						t.badge !== void 0 && /* @__PURE__ */ _("span", {
+							className: "shrink-0 text-xs px-1.5 py-0.5 rounded-full bg-secondary text-foreground/70 font-normal",
+							children: t.badge
+						})
+					]
+				}, String(t.id));
+			})
+		}), $ && /* @__PURE__ */ _("div", {
+			id: `${N}-panel-${$.id}`,
+			role: "tabpanel",
+			"aria-labelledby": `${N}-tab-${$.id}`,
+			className: e("w-full h-full flex-1 outline-none focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 rounded-md transition-all duration-200 animate-in fade-in-50", E),
+			children: $.content
+		}, String($.id))]
+	});
+});
+y.displayName = "Tabs";
+//#endregion
+export { y as Tabs };

package/dist/components/tabs/tabs-config.d.ts

@@ -63,6 +63,29 @@ export interface TabItem {
      */
     [key: string]: unknown;
 }
+/**
+ * Visual styling of the active tab.
+ */
+export interface TabsActiveOptionConfig {
+    radius?: Radius;
+    variant?: Variant;
+    color?: Color;
+}
+/**
+ * Visual styling of inactive tabs.
+ */
+export interface TabsInactiveOptionConfig {
+    radius?: Radius;
+    variant?: Variant;
+    color?: Color;
+}
+/**
+ * Options configuration for the tab items.
+ */
+export interface TabsOptionsConfig {
+    active?: TabsActiveOptionConfig;
+    inactive?: TabsInactiveOptionConfig;
+}
 /**
  * Theme configuration options for the Tabs component.
  *
@@ -92,26 +115,9 @@ export interface TabsConfig {
      */
     radius?: Radius;
     /**
-     * Corner rounding of the active tab button.
-     * Controls the border-radius of the selected tab trigger.
-     *
-     * @default "md"
-     */
-    activeRadius?: Radius;
-    /**
-     * Visual variant for the active tab button.
-     * Controls the style of the selected tab trigger.
-     *
-     * @default "solid"
+     * Options configuration for the tab items.
      */
-    activeVariant?: Variant;
-    /**
-     * Theme color for the active tab button.
-     * Controls the color of the selected tab trigger.
-     *
-     * @default "primary"
-     */
-    activeColor?: Color;
+    options?: TabsOptionsConfig;
 }
 /**
  * Default config values registered for the Tabs component.
@@ -122,7 +128,23 @@ export declare const defaultTabsConfig: TabsConfig;
  * These values are used when instance props, component config,
  * and global defaults are all undefined.
  */
-export declare const FALLBACK_TABS_CONFIG: Required<TabsConfig>;
+export declare const FALLBACK_TABS_CONFIG: {
+    readonly size: "md";
+    readonly variant: "underline";
+    readonly radius: "md";
+    readonly options: {
+        readonly active: {
+            readonly radius: "md";
+            readonly variant: "solid";
+            readonly color: "primary";
+        };
+        readonly inactive: {
+            readonly radius: "md";
+            readonly variant: "ghost";
+            readonly color: "none";
+        };
+    };
+};
 declare module "../../libs/registry" {
     interface ComponentTypeConfigRegistry {
         tabs: TabsConfig;

package/dist/components/tabs/tabs-config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tabs-config.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE7D;;;GAGG;AACH,MAAM,WAAW,OAAO;IACtB;;;OAGG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;IAEpB;;;OAGG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;;;;GAKG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;;;OAKG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;;OAKG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;;;OAKG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;CACrB;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAK/B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB,EAAE,QAAQ,CAAC,UAAU,CAO5C,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,IAAI,EAAE,UAAU,CAAC;KAClB;CACF"}
+{"version":3,"file":"tabs-config.d.ts","sourceRoot":"","sources":["../../../src/components/tabs/tabs-config.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEjE;;;;;GAKG;AACH,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG,UAAU,GAAG,OAAO,CAAC;AAE7D;;;GAGG;AACH,MAAM,WAAW,OAAO;IACtB;;;OAGG;IACH,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IAEpB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;;OAGG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;OAEG;IACH,IAAI,CAAC,EAAE,SAAS,CAAC;IAEjB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAElB;;OAEG;IACH,OAAO,CAAC,EAAE,SAAS,CAAC;IAEpB;;;;;OAKG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;IAEpB;;;OAGG;IACH,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED;;GAEG;AACH,MAAM,WAAW,sBAAsB;IACrC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,KAAK,CAAC,EAAE,KAAK,CAAC;CACf;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,QAAQ,CAAC,EAAE,wBAAwB,CAAC;CACrC;AAED;;;;;GAKG;AACH,MAAM,WAAW,UAAU;IACzB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,IAAI,CAAC;IAEZ;;;;;OAKG;IACH,OAAO,CAAC,EAAE,WAAW,CAAC;IAEtB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;OAEG;IACH,OAAO,CAAC,EAAE,iBAAiB,CAAC;CAC7B;AAED;;GAEG;AACH,eAAO,MAAM,iBAAiB,EAAE,UAO/B,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;;;;;;;;;;;;;;;CAQvB,CAAC;AAEX,OAAO,QAAQ,qBAAqB,CAAC;IACnC,UAAU,2BAA2B;QACnC,IAAI,EAAE,UAAU,CAAC;KAClB;CACF"}

package/dist/components/tabs/tabs-config.js

@@ -1,20 +1,28 @@
 "use client";
-import { registerComponentDefaults as i } from "../../libs/registry.js";
-const a = {
-  size: "md",
-  variant: "underline",
-  radius: "md",
-  activeRadius: "md"
-}, t = {
-  size: "md",
-  variant: "underline",
-  radius: "md",
-  activeRadius: "md",
-  activeVariant: "solid",
-  activeColor: "primary"
-};
-i("tabs", a);
-export {
-  t as FALLBACK_TABS_CONFIG,
-  a as defaultTabsConfig
+import { registerComponentDefaults as e } from "../../libs/registry.js";
+//#region src/components/tabs/tabs-config.ts
+var t = {
+	size: "md",
+	variant: "underline",
+	radius: "md",
+	options: { active: { radius: "md" } }
+}, n = {
+	size: "md",
+	variant: "underline",
+	radius: "md",
+	options: {
+		active: {
+			radius: "md",
+			variant: "solid",
+			color: "primary"
+		},
+		inactive: {
+			radius: "md",
+			variant: "ghost",
+			color: "none"
+		}
+	}
 };
+e("tabs", t);
+//#endregion
+export { n as FALLBACK_TABS_CONFIG, t as defaultTabsConfig };

package/dist/components/tabs/tabs-styles.js

@@ -1,19 +1,17 @@
 "use client";
-const t = {
-  sm: "h-8",
-  md: "h-10",
-  lg: "h-12"
-}, s = {
-  sm: "px-2.5",
-  md: "px-3.5",
-  lg: "px-4"
-}, S = {
-  sm: "text-xs",
-  md: "text-sm",
-  lg: "text-base"
-};
-export {
-  S as TABS_FONT_CLASS,
-  t as TABS_HEIGHT_CLASS,
-  s as TABS_PADDING_X_CLASS
+//#region src/components/tabs/tabs-styles.ts
+var e = {
+	sm: "h-8",
+	md: "h-10",
+	lg: "h-12"
+}, t = {
+	sm: "px-2.5",
+	md: "px-3.5",
+	lg: "px-4"
+}, n = {
+	sm: "text-xs",
+	md: "text-sm",
+	lg: "text-base"
 };
+//#endregion
+export { n as TABS_FONT_CLASS, e as TABS_HEIGHT_CLASS, t as TABS_PADDING_X_CLASS };