@spear-ai/spectral 1.4.23 → 1.4.25

package/dist/Tabs.js

@@ -1,52 +1,53 @@
 import "./styles/main.css";
-import { jsx as a, jsxs as m } from "react/jsx-runtime";
-import { TabsBase as N, TabsList as T, TabsTrigger as z, TabsContent as k } from "./Tabs/TabsBase.js";
-import { validateTabValues as j, getTabKeys as C } from "./Tabs/tabsUtils.js";
+import { jsx as l, jsxs as p } from "react/jsx-runtime";
+import { TabsBase as T, TabsList as z, TabsTrigger as k, TabsContentContainer as C, TabsContent as j } from "./Tabs/TabsBase.js";
+import { validateTabValues as V, getTabKeys as E } from "./Tabs/tabsUtils.js";
 import { cn as r } from "./utils/twUtils.js";
 import "react";
-const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ m("div", { className: "flex flex-col relative w-full", role: "status", children: [
-  /* @__PURE__ */ a("div", { className: r("inline-flex items-center justify-start w-full", s === "horizontal" && "border-b border-neutral-600", s === "vertical" && "flex-col items-stretch border-r border-neutral-600"), children: Array.from({ length: Math.min(d, 5) }, (i, t) => /* @__PURE__ */ a("div", { className: r("animate-pulse bg-neutral-600 rounded", s === "horizontal" ? "h-6 w-16 mx-2 my-2" : "h-6 w-full mx-2 my-1"), "aria-hidden": "true" }, t)) }),
-  /* @__PURE__ */ a("div", { className: "animate-pulse bg-neutral-600 h-32 w-full mt-4 rounded", "aria-hidden": "true" }),
-  /* @__PURE__ */ a("span", { className: "sr-only", children: "Loading tabs…" })
-] }), L = ({ ariaLabel: d, className: s, openOnLoad: i, orientation: t = "horizontal", tabValues: f = [], variant: l = "default", activationMode: x = "automatic", loading: p = !1, onError: n, onBeforeChange: h, onValueChange: v, ...y }) => {
-  const o = f.filter((e) => e.key !== void 0);
-  if (!j(o)) {
+const K = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ p("div", { className: "flex flex-col relative w-full", role: "status", children: [
+  /* @__PURE__ */ l("div", { className: r("inline-flex items-center justify-start w-full", s === "horizontal" && "border-b border-neutral-600", s === "vertical" && "flex-col items-stretch border-r border-neutral-600"), children: Array.from({ length: Math.min(d, 5) }, (h, n) => /* @__PURE__ */ l("div", { className: r("animate-pulse bg-neutral-600 rounded", s === "horizontal" ? "h-6 w-16 mx-2 my-2" : "h-6 w-full mx-2 my-1"), "aria-hidden": "true" }, n)) }),
+  /* @__PURE__ */ l("div", { className: "animate-pulse bg-neutral-600 h-32 w-full mt-4 rounded", "aria-hidden": "true" }),
+  /* @__PURE__ */ l("span", { className: "sr-only", children: "Loading tabs…" })
+] }), R = ({ activationMode: d = "automatic", ariaLabel: s, className: h, loading: n = !1, onBeforeChange: v, onError: b, onValueChange: x, openOnLoad: i, orientation: t = "horizontal", rightSlot: y, tabValues: m = [], variant: a = "default", ...g }) => {
+  const c = m.filter((e) => e.key !== void 0);
+  if (!V(c)) {
     const e = new Error("Invalid tabValues provided to Tabs component");
-    return n?.(e), /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full p-4 text-center text-gray-500", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ a("p", { children: "No valid tabs provided" }) });
+    return b?.(e), /* @__PURE__ */ l("div", { className: "flex flex-col relative w-full p-4 text-center text-gray-500", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ l("p", { children: "No valid tabs provided" }) });
   }
-  if (p)
-    return /* @__PURE__ */ a(V, { tabCount: f.length || 3, orientation: t });
-  const b = C(o);
-  let c = i ?? b[0];
-  if (i && !b.includes(i) && (console.warn(`Tabs: openOnLoad value '${i}' is not a valid tab key`), c = b[0]), !c) {
+  if (n)
+    return /* @__PURE__ */ l(K, { tabCount: m.length || 3, orientation: t });
+  const u = E(c);
+  let o = i ?? u[0];
+  if (i && !u.includes(i) && (console.warn(`Tabs: openOnLoad value '${i}' is not a valid tab key`), o = u[0]), !o) {
     const e = new Error("No valid default tab available");
-    return n?.(e), /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full p-4 text-center text-text-secondary", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ a("p", { children: "Unable to render tabs" }) });
+    return b?.(e), /* @__PURE__ */ l("div", { className: "flex flex-col relative w-full p-4 text-center text-text-secondary", role: "alert", "aria-live": "polite", children: /* @__PURE__ */ l("p", { children: "Unable to render tabs" }) });
   }
-  const g = async (e) => {
-    if (h && v) {
-      const w = c;
+  const w = async (e) => {
+    if (v && x) {
+      const N = o;
       try {
-        if (await h(e, w) === !1) return;
-      } catch (u) {
-        n?.(u instanceof Error ? u : new Error("Before change callback failed"));
+        if (await v(e, N) === !1) return;
+      } catch (f) {
+        b?.(f instanceof Error ? f : new Error("Before change callback failed"));
         return;
       }
     }
-    v?.(e);
+    x?.(e);
   };
-  return /* @__PURE__ */ a("div", { className: "flex flex-col relative w-full", children: /* @__PURE__ */ m(N, { "aria-label": d, className: r("relative w-full data-[orientation=vertical]:flex", l, s), defaultValue: c, orientation: t, activationMode: x, onValueChange: g, ...y, children: [
-    /* @__PURE__ */ a(
-      T,
+  return /* @__PURE__ */ l("div", { className: "flex flex-col relative w-full", children: /* @__PURE__ */ p(T, { "aria-label": s, className: r("relative w-full data-[orientation=vertical]:flex", a, h), defaultValue: o, orientation: t, activationMode: d, onValueChange: w, ...g, children: [
+    /* @__PURE__ */ l(
+      z,
       {
         className: r(
-          "inline-flex items-center justify-start w-full",
-          t === "horizontal" && l === "default" && ["border-b border-tabs-border"],
-          t === "vertical" && l === "default" && ["flex-col items-stretch border-r border-tabs-border h-auto m-0 py-1 w-auto relative"],
-          t === "horizontal" && l === "enclosed" && ["bg-tabs-group-bg border-0 rounded-lg p-1 relative"],
-          t === "vertical" && l === "enclosed" && ["bg-tabs-group-bg rounded-lg border-0 p-1 w-auto flex-col"]
+          "inline-flex items-center justify-between w-full",
+          t === "horizontal" && a === "default" && ["border-b border-tabs-border"],
+          t === "vertical" && a === "default" && ["flex-col items-stretch border-r border-tabs-border h-auto m-0 py-1 w-auto relative"],
+          t === "horizontal" && a === "enclosed" && ["bg-tabs-group-bg border-0 rounded-lg p-1 relative"],
+          t === "vertical" && a === "enclosed" && ["bg-tabs-group-bg rounded-lg border-0 p-1 w-auto flex-col"]
         ),
-        children: o.map((e) => /* @__PURE__ */ a(
-          z,
+        rightSlot: y,
+        children: c.map((e) => /* @__PURE__ */ l(
+          k,
           {
             value: e.key,
             disabled: e.disabled,
@@ -54,10 +55,10 @@ const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ m("div", { classN
             "aria-describedby": e["aria-describedby"],
             className: r(
               "relative whitespace-nowrap font-semibold transition-all duration-500 ease-in-out focus:outline-none focus-visible:outline-none",
-              t === "horizontal" && l === "default" && ["text-text-primary hover:text-accent py-2 px-4 hover:bg-tabs-bg--hover"],
-              t === "vertical" && l === "default" && ["text-text-primary flex items-center h-10 px-4 py-2 data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover"],
-              t === "horizontal" && l === "enclosed" && ["text-text-primary inline-flex items-center justify-center px-4 py-2 data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover z-[1]"],
-              t === "vertical" && l === "enclosed" && ["text-text-primary px-4 py-2 z-[1] data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover"],
+              t === "horizontal" && a === "default" && ["text-text-primary hover:text-accent py-2 px-4 hover:bg-tabs-bg--hover"],
+              t === "vertical" && a === "default" && ["text-text-primary flex items-center h-10 px-4 py-2 data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover"],
+              t === "horizontal" && a === "enclosed" && ["text-text-primary inline-flex items-center justify-center px-4 py-2 data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover z-[1]"],
+              t === "vertical" && a === "enclosed" && ["text-text-primary px-4 py-2 z-[1] data-[state=active]:text-accent hover:text-accent hover:bg-tabs-bg--hover"],
               "disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:text-text-primary disabled:hover:bg-transparent"
             ),
             children: e.label
@@ -66,21 +67,14 @@ const V = ({ tabCount: d, orientation: s }) => /* @__PURE__ */ m("div", { classN
         ))
       }
     ),
-    o.map((e) => /* @__PURE__ */ a(
-      k,
-      {
-        value: e.key,
-        className: r("focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent text-text-primary", t === "horizontal" && "pb-4", t === "vertical" && "py-8", "data-[state=active]:animate-fade-in-tabs"),
-        children: e.children
-      },
-      e.key
-    ))
+    /* @__PURE__ */ l(C, { className: r(t === "vertical" && "flex-1"), children: c.map((e) => /* @__PURE__ */ l(j, { value: e.key, className: r("focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent text-text-primary", t === "horizontal" && "pb-4", t === "vertical" && "py-2 px-4"), children: e.children }, e.key)) })
   ] }) });
 };
 export {
-  L as Tabs,
-  k as TabsContent,
-  T as TabsList,
-  N as TabsRoot,
-  z as TabsTrigger
+  R as Tabs,
+  j as TabsContent,
+  C as TabsContentContainer,
+  z as TabsList,
+  T as TabsRoot,
+  k as TabsTrigger
 };

package/dist/ToggleGroup.js

@@ -18,18 +18,18 @@ const m = w({
     "data-size": e,
     "data-layout": a,
     className: c(
-      "group/toggle-group [&[data-variant='outline']]:bg-toggle-group-bg flex h-fit w-fit [&[data-layout='expanded']]:w-full items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md [&[data-variant='outline']]:gap-0.25",
+      "group/toggle-group [&[data-variant='outline']]:bg-toggle-group-bg flex h-fit w-fit [&[data-layout='expanded']]:w-full items-center rounded-md [&_button:first-of-type]:rounded-l-md [&_button:last-of-type]:rounded-r-md [&[data-variant='outline']]:gap-0.25 px-2",
       r
     ),
     ...i,
     children: /* @__PURE__ */ s(m.Provider, { value: { variant: o, size: e, layout: a, activeColor: l, activeTextColor: d }, children: n })
   }
-), I = h(({ className: r, children: o, variant: e, size: a, value: l, layout: d, activeColor: n, activeTextColor: i, style: v, ...f }, y) => {
-  const t = A(m), g = t.variant ?? e, u = t.size ?? a, p = t.layout ?? d, x = n ?? t.activeColor, b = i ?? t.activeTextColor;
+), I = h(({ className: r, children: o, variant: e, size: a, value: l, layout: d, activeColor: n, activeTextColor: i, style: v, ...f }, x) => {
+  const t = A(m), g = t.variant ?? e, u = t.size ?? a, p = t.layout ?? d, y = n ?? t.activeColor, b = i ?? t.activeTextColor;
   return /* @__PURE__ */ s(
     C,
     {
-      ref: y,
+      ref: x,
       "data-slot": "toggle-group-item",
       "data-testid": "spectral-toggle-group-item",
       "data-variant": g,
@@ -45,7 +45,7 @@ const m = w({
         "group data-[variant=outline]:border-togglegroup-border rounded-none shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0",
         r
       ),
-      style: { ...z(x, b), ...v },
+      style: { ...z(y, b), ...v },
       ...f,
       children: o
     }