@spear-ai/spectral 1.3.48 → 1.3.49

package/dist/Select/SelectBase.js

@@ -1,152 +1,152 @@
 "use client";
 import "../styles/main.css";
-import { jsxs as p, jsx as n, Fragment as ee } from "react/jsx-runtime";
-import { c as b } from "../twUtils-CRiPKpXj.js";
+import { jsxs as g, jsx as s, Fragment as ee } from "react/jsx-runtime";
+import { c as p } from "../twUtils-CRiPKpXj.js";
 import { forwardRef as te, useId as re, useState as C, useRef as T, useMemo as _, useCallback as E, useEffect as S } from "react";
 import { L as $ } from "../loader-circle-CvdzOiQ_.js";
 import { C as se, a as ne } from "../chevron-down-UbkgS76q.js";
-const B = "h-4 w-4", G = "h-5 w-5", ae = (t) => ({
+const B = "h-4 w-4", G = "h-5 w-5", ae = (n) => ({
   error: "border-danger hover:border-danger focus-visible:border-danger focus-visible:ring-danger",
   loading: "cursor-wait pointer-events-none border-input-border--disabled",
   disabled: "cursor-not-allowed opacity-50 border-input-border--disabled bg-input-bg--disabled",
   default: ""
-})[t], de = (t, l, i) => b(
+})[n], de = (n, d, u) => p(
   "flex h-12 w-full items-center justify-between rounded-lg border border-input-border bg-input-bg px-4 py-3 text-sm",
   "hover:border-input-border--hover focus:border-input-border--focus focus:outline-none",
   "focus:ring-2 focus:ring-black focus:ring-offset-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-black focus-visible:ring-offset-2",
   "disabled:cursor-not-allowed disabled:opacity-50 disabled:border-input-border--disabled disabled:bg-input-bg--disabled",
   "transition duration-200 text-input-text [&>span]:line-clamp-1",
-  l && "border-input-border--focus ring-2 ring-black ring-offset-2",
-  ae(t),
-  i
-), le = (t) => b(
+  d && "border-input-border--focus ring-2 ring-black ring-offset-2",
+  ae(n),
+  u
+), le = (n) => p(
   "absolute top-full left-0 right-0 z-50 mt-1 max-h-96 min-w-[8rem] overflow-hidden rounded-lg border border-input-border bg-input-bg shadow-md",
   "transition-all duration-200 origin-top",
-  t ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none"
-), ie = (t) => {
-  const l = T(null);
+  n ? "scale-100 opacity-100 translate-y-0" : "scale-95 opacity-0 -translate-y-1 pointer-events-none"
+), ie = (n) => {
+  const d = T(null);
   return S(() => {
-    const i = (a) => {
-      l.current && !l.current.contains(a.target) && t();
+    const u = (t) => {
+      d.current && !d.current.contains(t.target) && n();
     };
-    return document.addEventListener("mousedown", i), () => document.removeEventListener("mousedown", i);
-  }, [t]), l;
-}, oe = (t, l, i, a, m) => {
-  const [r, c] = C(-1);
+    return document.addEventListener("mousedown", u), () => document.removeEventListener("mousedown", u);
+  }, [n]), d;
+}, oe = (n, d, u, t, v) => {
+  const [l, b] = C(-1);
   S(() => {
-    if (m) {
-      const s = t.findIndex((g) => g.value === l);
-      c(s >= 0 ? s : 0);
+    if (n) {
+      const r = t.findIndex((i) => i.value === v);
+      b(r >= 0 ? r : 0);
     } else
-      c(-1);
-  }, [m, l, t]);
-  const k = E(
-    (s) => {
-      if (!m)
-        return s.key === "ArrowDown" || s.key === "ArrowUp" || s.key === " " || s.key === "Enter" ? (s.preventDefault(), "open") : void 0;
-      const y = {
+      b(-1);
+  }, [n, v, t]);
+  const y = E(
+    (r) => {
+      if (!n)
+        return r.key === "ArrowDown" || r.key === "ArrowUp" || r.key === " " || r.key === "Enter" ? (r.preventDefault(), "open") : void 0;
+      const w = {
         ArrowDown: () => {
-          s.preventDefault(), c((h) => {
-            const o = Math.min(h + 1, t.length - 1);
+          r.preventDefault(), b((c) => {
+            const o = Math.min(c + 1, t.length - 1);
             return t[o]?.disabled && o < t.length - 1 ? Math.min(o + 1, t.length - 1) : o;
           });
         },
         ArrowUp: () => {
-          s.preventDefault(), c((h) => {
-            const o = Math.max(h - 1, 0);
+          r.preventDefault(), b((c) => {
+            const o = Math.max(c - 1, 0);
             return t[o]?.disabled && o > 0 ? Math.max(o - 1, 0) : o;
           });
         },
         Enter: () => {
-          s.preventDefault(), r >= 0 && t[r] && !t[r].disabled && (i(t[r].value), a());
+          r.preventDefault(), l >= 0 && t[l] && !t[l].disabled && (u(t[l].value), d());
         },
         " ": () => {
-          s.preventDefault(), r >= 0 && t[r] && !t[r].disabled && (i(t[r].value), a());
+          r.preventDefault(), l >= 0 && t[l] && !t[l].disabled && (u(t[l].value), d());
         },
         Escape: () => {
-          s.preventDefault(), a();
+          r.preventDefault(), d();
         },
         Home: () => {
-          s.preventDefault(), c(0);
+          r.preventDefault(), b(0);
         },
         End: () => {
-          s.preventDefault(), c(t.length - 1);
+          r.preventDefault(), b(t.length - 1);
         }
-      }[s.key];
-      y && y();
+      }[r.key];
+      w && w();
     },
-    [t, r, i, a, m]
+    [t, l, u, d, n]
   );
-  return { focusedIndex: r, setFocusedIndex: c, handleKeyDown: k };
+  return { focusedIndex: l, setFocusedIndex: b, handleKeyDown: y };
 }, ce = te(
   ({
-    value: t,
-    defaultValue: l,
-    onChange: i,
-    options: a = [],
-    placeholder: m = "Select an option",
-    state: r = "default",
-    errorMessage: c,
-    emptyMessage: k = "No options found",
-    loadingMessage: s = "Loading...",
-    name: g,
-    id: y,
-    label: h,
-    className: o,
+    className: n,
+    defaultValue: d,
+    emptyMessage: u = "No options found",
+    errorMessage: t,
+    loadingMessage: v = "Loading...",
+    id: l,
+    label: b,
+    name: y,
+    onChange: r,
+    options: i = [],
+    placeholder: w = "Select an option",
+    state: c = "default",
+    value: o,
     "aria-label": I,
     "aria-describedby": U,
     ...j
   }, Z) => {
-    const z = re(), L = y || `${g}-${z}`, M = `${L}-error`, [f, x] = C(!1), [P, W] = C(l || ""), A = t !== void 0, w = A ? t : P, q = ie(() => x(!1)), D = T(null), O = j.disabled || r === "disabled", J = r === "loading", Q = r === "error", v = _(() => {
-      const e = {}, u = [];
-      return a.forEach((d) => {
-        d.group ? (e[d.group] || (e[d.group] = []), e[d.group].push(d)) : u.push(d);
-      }), { groups: e, ungrouped: u, hasGroups: Object.keys(e).length > 0 };
-    }, [a]), K = _(() => a.find((e) => e.value === w), [a, w]), { focusedIndex: N, handleKeyDown: R } = oe(
-      a,
-      w,
+    const z = re(), L = l || `${y}-${z}`, M = `${L}-error`, [m, h] = C(!1), [P, W] = C(d || ""), A = o !== void 0, N = A ? o : P, q = ie(() => h(!1)), D = T(null), O = j.disabled || c === "disabled", J = c === "loading", Q = c === "error", x = _(() => {
+      const e = {}, f = [];
+      return i.forEach((a) => {
+        a.group ? (e[a.group] || (e[a.group] = []), e[a.group].push(a)) : f.push(a);
+      }), { groups: e, ungrouped: f, hasGroups: Object.keys(e).length > 0 };
+    }, [i]), K = _(() => i.find((e) => e.value === N), [i, N]), { focusedIndex: k, handleKeyDown: R } = oe(
+      m,
+      () => h(!1),
       F,
-      () => x(!1),
-      f
+      i,
+      N
     ), V = E(() => {
-      O || x((e) => !e);
+      O || h((e) => !e);
     }, [O]);
     function F(e) {
-      a.find((d) => d.value === e)?.disabled || (A || W(e), i?.(e), x(!1));
+      i.find((a) => a.value === e)?.disabled || (A || W(e), r?.(e), h(!1));
     }
     const X = E(
       (e) => {
-        R(e) === "open" && x(!0);
+        R(e) === "open" && h(!0);
       },
       [R]
     );
     S(() => {
-      if (f && N >= 0 && D.current) {
-        const e = D.current.children[N];
+      if (m && k >= 0 && D.current) {
+        const e = D.current.children[k];
         e && e.scrollIntoView({ block: "nearest" });
       }
-    }, [N, f]);
-    const H = (e, u) => {
-      const d = w === e.value;
-      return /* @__PURE__ */ p(
+    }, [k, m]);
+    const H = (e, f) => {
+      const a = N === e.value;
+      return /* @__PURE__ */ g(
         "button",
         {
           type: "button",
-          className: b(
+          className: p(
             "relative flex w-full cursor-default items-center rounded-sm py-1.5 pr-8 pl-2 text-sm outline-none select-none",
             "hover:bg-input-bg--hover focus:bg-input-bg--hover hover:cursor-pointer",
             "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-            u === N && "bg-input-bg--hover",
-            d && "bg-input-bg--selected text-input-text"
+            f === k && "bg-input-bg--hover",
+            a && "bg-input-bg--selected text-input-text"
           ),
           onClick: () => F(e.value),
           disabled: e.disabled,
           "data-disabled": e.disabled,
-          "aria-selected": d,
+          "aria-selected": a,
           role: "option",
           children: [
-            /* @__PURE__ */ n("span", { className: "block truncate", children: e.label }),
-            d && /* @__PURE__ */ n("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ n(ne, { className: b(B, "text-input-text") }) })
+            /* @__PURE__ */ s("span", { className: "block truncate", children: e.label }),
+            a && /* @__PURE__ */ s("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ s(ne, { className: p(B, "text-input-text") }) })
           ]
         },
         e.value
@@ -156,42 +156,42 @@ const B = "h-4 w-4", G = "h-5 w-5", ae = (t) => ({
       "--select-border-radius": "0.5rem",
       "--select-trigger-height": "3rem"
     });
-    return /* @__PURE__ */ p("div", { className: "w-full", "data-testid": "select-root", children: [
-      /* @__PURE__ */ p("div", { ref: q, className: "relative", "data-testid": "select-wrapper", children: [
-        /* @__PURE__ */ p(
+    return /* @__PURE__ */ g("div", { className: "w-full", "data-testid": "select-root", children: [
+      /* @__PURE__ */ g("div", { ref: q, className: "relative", "data-testid": "select-wrapper", children: [
+        /* @__PURE__ */ g(
           "button",
           {
             ref: Z,
             type: "button",
             id: L,
-            name: g,
-            className: de(r, f, o),
+            name: y,
+            className: de(c, m, n),
             onClick: V,
             onKeyDown: X,
             disabled: O,
-            "aria-label": I || h,
-            "aria-describedby": b(Q && M, U),
-            "aria-expanded": f,
+            "aria-label": I || b,
+            "aria-describedby": p(Q && M, U),
+            "aria-expanded": m,
             "aria-haspopup": "listbox",
-            "data-state": r,
+            "data-state": c,
             style: Y(),
             ...j,
             children: [
-              /* @__PURE__ */ n("span", { className: "block truncate", children: K ? K.label : /* @__PURE__ */ n("span", { className: "text-input-text-placeholder", children: m }) }),
-              /* @__PURE__ */ n("div", { className: "flex items-center", children: r === "loading" ? /* @__PURE__ */ n($, { className: b(G, "text-input-icon animate-spin") }) : /* @__PURE__ */ n(
+              /* @__PURE__ */ s("span", { className: "block truncate", children: K ? K.label : /* @__PURE__ */ s("span", { className: "text-input-text-placeholder", children: w }) }),
+              /* @__PURE__ */ s("div", { className: "flex items-center", children: c === "loading" ? /* @__PURE__ */ s($, { className: p(G, "text-input-icon animate-spin") }) : /* @__PURE__ */ s(
                 se,
                 {
-                  className: b(
+                  className: p(
                     G,
                     "text-input-icon transition-transform duration-200",
-                    f && "rotate-180"
+                    m && "rotate-180"
                   )
                 }
               ) })
             ]
           }
         ),
-        /* @__PURE__ */ n("div", { className: le(f), "data-testid": "select-dropdown", children: /* @__PURE__ */ n("div", { className: "p-1", children: /* @__PURE__ */ n(
+        /* @__PURE__ */ s("div", { className: le(m), "data-testid": "select-dropdown", children: /* @__PURE__ */ s("div", { className: "p-1", children: /* @__PURE__ */ s(
           "div",
           {
             ref: D,
@@ -199,21 +199,21 @@ const B = "h-4 w-4", G = "h-5 w-5", ae = (t) => ({
             role: "listbox",
             "aria-multiselectable": "false",
             tabIndex: -1,
-            children: J ? /* @__PURE__ */ p("div", { className: "text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", children: [
-              /* @__PURE__ */ n($, { className: b(B, "animate-spin") }),
-              s
-            ] }) : a.length === 0 ? /* @__PURE__ */ n("div", { className: "text-input-text-secondary py-6 text-center text-sm", children: k }) : /* @__PURE__ */ p(ee, { children: [
-              v.ungrouped.length > 0 && /* @__PURE__ */ n("div", { className: "mb-1", children: v.ungrouped.map((e) => H(e, a.indexOf(e))) }),
-              Object.entries(v.groups).map(([e, u]) => /* @__PURE__ */ p("div", { className: "mb-1", children: [
-                (v.ungrouped.length > 0 || Object.keys(v.groups).indexOf(e) > 0) && /* @__PURE__ */ n("div", { className: "bg-input-border -mx-1 my-1 h-px" }),
-                /* @__PURE__ */ n("div", { className: "text-input-text-secondary px-2 py-1.5 text-sm font-semibold", children: e }),
-                u.map((d) => H(d, a.indexOf(d)))
+            children: J ? /* @__PURE__ */ g("div", { className: "text-input-text-secondary flex items-center justify-center gap-2 py-6 text-sm", children: [
+              /* @__PURE__ */ s($, { className: p(B, "animate-spin") }),
+              v
+            ] }) : i.length === 0 ? /* @__PURE__ */ s("div", { className: "text-input-text-secondary py-6 text-center text-sm", children: u }) : /* @__PURE__ */ g(ee, { children: [
+              x.ungrouped.length > 0 && /* @__PURE__ */ s("div", { className: "mb-1", children: x.ungrouped.map((e) => H(e, i.indexOf(e))) }),
+              Object.entries(x.groups).map(([e, f]) => /* @__PURE__ */ g("div", { className: "mb-1", children: [
+                (x.ungrouped.length > 0 || Object.keys(x.groups).indexOf(e) > 0) && /* @__PURE__ */ s("div", { className: "bg-input-border -mx-1 my-1 h-px" }),
+                /* @__PURE__ */ s("div", { className: "text-input-text-secondary px-2 py-1.5 text-sm font-semibold", children: e }),
+                f.map((a) => H(a, i.indexOf(a)))
               ] }, e))
             ] })
           }
         ) }) })
       ] }),
-      r === "error" && c && /* @__PURE__ */ n(
+      c === "error" && t && /* @__PURE__ */ s(
         "p",
         {
           id: M,
@@ -221,7 +221,7 @@ const B = "h-4 w-4", G = "h-5 w-5", ae = (t) => ({
           "data-testid": "select-error-message",
           "aria-live": "polite",
           "aria-atomic": "true",
-          children: c
+          children: t
         }
       )
     ] });

package/dist/Select.d.ts

@@ -2,28 +2,28 @@ import { SelectBase, SelectBaseProps, SelectOption } from './SelectBase';
 import { ReactNode } from 'react';
 export type SelectState = 'default' | 'error' | 'disabled' | 'loading';
 export type SelectItem = {
-    label: string;
-    value: string;
-    disabled?: boolean;
+    readonly label: string;
+    readonly value: string;
+    readonly disabled?: boolean;
 };
 export interface SelectProps extends Omit<SelectBaseProps, 'options' | 'onChange'> {
-    contentClassName?: string;
+    readonly contentClassName?: string;
     defaultValue?: string;
-    itemClassName?: string;
-    items: SelectItem[];
+    readonly itemClassName?: string;
+    readonly items: readonly SelectItem[];
     onValueChange?: (value: string) => void;
-    placeholder: string;
-    triggerClassName?: string;
+    readonly placeholder: string;
+    readonly triggerClassName?: string;
     value?: string;
     disabled?: boolean;
-    name?: string;
-    id?: string;
-    state?: SelectState;
-    emptyMessage?: ReactNode;
-    errorMessage?: string;
-    label?: string;
-    'aria-label'?: string;
-    'aria-describedby'?: string;
+    readonly name?: string;
+    readonly id?: string;
+    readonly state?: SelectState;
+    readonly emptyMessage?: ReactNode;
+    readonly errorMessage?: string;
+    readonly label?: string;
+    readonly 'aria-label'?: string;
+    readonly 'aria-describedby'?: string;
 }
 declare const Select: import('react').ForwardRefExoticComponent<SelectProps & import('react').RefAttributes<HTMLButtonElement>> & {
     Root: ({ children, ...props }: {

package/dist/Tabs/TabsBase.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+export interface TabsContextValue {
+    onValueChange: (value: string) => void;
+    readonly activationMode: 'automatic' | 'manual';
+    readonly baseId: string;
+    readonly dir: 'ltr' | 'rtl';
+    readonly disabled: boolean;
+    readonly orientation: 'horizontal' | 'vertical';
+    readonly value: string;
+}
+export declare const TabsContext: import('react').Context<TabsContextValue | null>;
+export declare const useTabsContext: (componentName?: string) => TabsContextValue;
+export interface TabsBaseProps extends Omit<ComponentPropsWithoutRef<'div'>, 'dir' | 'defaultValue'> {
+    onValueChange?: (value: string) => void;
+    readonly activationMode?: 'automatic' | 'manual';
+    readonly defaultValue?: string;
+    readonly children: ReactNode;
+    readonly dir?: 'ltr' | 'rtl';
+    readonly disabled?: boolean;
+    readonly orientation?: 'horizontal' | 'vertical';
+    readonly value?: string;
+}
+export declare const TabsBase: import('react').ForwardRefExoticComponent<TabsBaseProps & import('react').RefAttributes<HTMLElement>>;
+export interface TabsListProps extends ComponentPropsWithoutRef<'div'> {
+    readonly loop?: boolean;
+}
+export declare const TabsList: import('react').ForwardRefExoticComponent<TabsListProps & import('react').RefAttributes<HTMLElement>>;
+export interface TabsTriggerProps extends ComponentPropsWithoutRef<'button'> {
+    readonly value: string;
+    readonly disabled?: boolean;
+}
+export declare const TabsTrigger: import('react').ForwardRefExoticComponent<TabsTriggerProps & import('react').RefAttributes<HTMLElement>>;
+export interface TabsContentProps extends ComponentPropsWithoutRef<'div'> {
+    readonly value: string;
+    readonly forceMount?: boolean;
+}
+export declare const TabsContent: import('react').ForwardRefExoticComponent<TabsContentProps & import('react').RefAttributes<HTMLElement>>;
+//# sourceMappingURL=TabsBase.d.ts.map

package/dist/Tabs/TabsBase.js

@@ -0,0 +1,209 @@
+"use client";
+import "../styles/main.css";
+import { jsx as x, jsxs as R } from "react/jsx-runtime";
+import { generateId as $, prefersReducedMotion as _, debounce as L, getIndicatorPosition as S, calculateIndicatorStyle as K } from "./tabsUtils.js";
+import { c as y } from "../twUtils-CRiPKpXj.js";
+import { createContext as M, forwardRef as z, useState as D, useId as N, useCallback as p, useRef as k, useEffect as O, useContext as P } from "react";
+const E = M(null), C = (I = "Tabs") => {
+  const d = P(E);
+  if (d === null)
+    throw new Error(`${I} components must be used within a Tabs.Root`);
+  return d;
+}, B = z(function({
+  value: d,
+  defaultValue: n,
+  onValueChange: f,
+  orientation: b = "horizontal",
+  activationMode: h = "automatic",
+  dir: u = "ltr",
+  disabled: o = !1,
+  children: m,
+  ...s
+}, l) {
+  const [v, g] = D(n ?? ""), c = N() ?? $("tabs"), r = d !== void 0, t = r ? d : v, e = p(
+    (w) => {
+      o || (r || g(w), f?.(w));
+    },
+    [r, f, o]
+  ), a = {
+    value: t,
+    onValueChange: e,
+    orientation: b,
+    activationMode: h,
+    dir: u,
+    disabled: o,
+    baseId: c
+  };
+  return /* @__PURE__ */ x(E.Provider, { value: a, children: /* @__PURE__ */ x(
+    "div",
+    {
+      ref: l,
+      "data-orientation": b,
+      "data-disabled": o ? "" : void 0,
+      dir: u,
+      ...s,
+      children: m
+    }
+  ) });
+}), H = z(function({ className: d, loop: n = !0, ...f }, b) {
+  const { orientation: h, disabled: u } = C("TabsList"), [o, m] = D(() => ({
+    left: 0,
+    top: 0,
+    width: 0,
+    height: 0,
+    orientation: "horizontal",
+    isEnclosed: !1
+  })), s = k(null), l = _(), v = p(
+    L(() => {
+      const c = K(s);
+      m(c);
+    }, 16),
+    // ~60fps
+    []
+  );
+  O(() => {
+    v();
+    const c = new ResizeObserver(v), r = new MutationObserver(v), t = s.current;
+    return t && (c.observe(t), r.observe(t, {
+      attributes: !0,
+      childList: !0,
+      subtree: !0
+    })), () => {
+      c.disconnect(), r.disconnect();
+    };
+  }, [v]);
+  const g = p(
+    (c) => {
+      if (u) return;
+      const r = Array.from(
+        s.current?.querySelectorAll(
+          "[role='tab']:not([disabled]):not([aria-disabled='true'])"
+        ) ?? []
+      );
+      if (r.length === 0) return;
+      const t = r.findIndex((T) => T === document.activeElement);
+      if (t === -1) return;
+      let e = null;
+      const { key: a, ctrlKey: w, metaKey: A } = c, i = w || A;
+      h === "horizontal" ? a === "ArrowLeft" || a === "ArrowUp" && i ? e = t > 0 ? t - 1 : n ? r.length - 1 : t : (a === "ArrowRight" || a === "ArrowDown" && i) && (e = t < r.length - 1 ? t + 1 : n ? 0 : t) : a === "ArrowUp" || a === "ArrowLeft" && i ? e = t > 0 ? t - 1 : n ? r.length - 1 : t : (a === "ArrowDown" || a === "ArrowRight" && i) && (e = t < r.length - 1 ? t + 1 : n ? 0 : t), a === "Home" ? e = 0 : a === "End" && (e = r.length - 1), e !== null && e !== t && (c.preventDefault(), c.stopPropagation(), r[e]?.focus());
+    },
+    [u, h, n]
+  );
+  return /* @__PURE__ */ R("div", { className: "relative", ref: s, children: [
+    /* @__PURE__ */ x(
+      "div",
+      {
+        ref: b,
+        role: "tablist",
+        "aria-orientation": h,
+        "aria-disabled": u,
+        className: y("tabs-list", d),
+        onKeyDown: g,
+        ...f
+      }
+    ),
+    /* @__PURE__ */ x(
+      "div",
+      {
+        className: y(
+          "pointer-events-none absolute select-none",
+          !l && "transition-all duration-300 ease-out",
+          o.orientation === "horizontal" && !o.isEnclosed && [
+            "bottom-[1px] after:absolute after:bottom-0 after:left-0 after:w-full after:content-['']",
+            "after:border-tabs-indicator z-10 after:rounded-t-[0.3rem] after:border-b-[0.3rem]"
+          ],
+          o.orientation === "vertical" && !o.isEnclosed && [
+            "right-[1px]",
+            !l && "transition-[top_300ms_ease,height_300ms_ease]",
+            "after:absolute after:top-0 after:right-0 after:h-full after:w-1 after:content-['']",
+            "after:border-tabs-indicator z-10 after:rounded-l-[0.3rem] after:border-r-[0.3rem]"
+          ],
+          o.orientation === "horizontal" && o.isEnclosed && [
+            "bg-tabs-enclosed-indicator top-[10%] bottom-[10%] z-0 rounded-lg shadow-lg",
+            !l && "transition-[left_300ms_ease,width_300ms_ease]"
+          ],
+          o.orientation === "vertical" && o.isEnclosed && [
+            "bg-tabs-enclosed-indicator right-1 left-1 z-0 max-h-10 w-auto rounded-lg shadow-lg"
+          ]
+        ),
+        style: {
+          ...S(o),
+          ...o.isEnclosed && o.orientation === "vertical" ? { height: "40px" } : {}
+        },
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+}), G = z(function({ className: d, value: n, onClick: f, onKeyDown: b, disabled: h = !1, ...u }, o) {
+  const { value: m, onValueChange: s, activationMode: l, disabled: v, baseId: g } = C("TabsTrigger"), c = `${g}-trigger-${n}`, r = `${g}-content-${n}`, t = m === n, e = v || h, a = p(
+    (i) => {
+      if (e) {
+        i.preventDefault();
+        return;
+      }
+      s(n), f?.(i);
+    },
+    [n, s, f, e]
+  ), w = p(
+    (i) => {
+      if (e) {
+        i.preventDefault();
+        return;
+      }
+      const { key: T } = i;
+      (T === "Enter" || T === " ") && (i.preventDefault(), i.stopPropagation(), s(n)), b?.(i);
+    },
+    [n, s, b, e]
+  ), A = p(() => {
+    e || l === "automatic" && s(n);
+  }, [l, s, n, e]);
+  return /* @__PURE__ */ x(
+    "button",
+    {
+      ref: o,
+      role: "tab",
+      type: "button",
+      id: c,
+      "aria-controls": r,
+      "aria-selected": t,
+      "aria-disabled": e,
+      disabled: e,
+      "data-state": t ? "active" : "inactive",
+      "data-disabled": e ? "" : void 0,
+      tabIndex: t ? 0 : -1,
+      className: y(
+        "tabs-trigger z-10 focus:outline-none focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-600",
+        e && ["cursor-not-allowed opacity-50"],
+        d
+      ),
+      onClick: a,
+      onKeyDown: w,
+      onFocus: A,
+      ...u
+    }
+  );
+}), J = z(function({ className: d, value: n, forceMount: f = !1, ...b }, h) {
+  const { value: u, baseId: o } = C("TabsContent"), m = `${o}-content-${n}`, s = `${o}-trigger-${n}`, l = u === n;
+  return !f && !l ? null : /* @__PURE__ */ x(
+    "div",
+    {
+      ref: h,
+      role: "tabpanel",
+      id: m,
+      "aria-labelledby": s,
+      "data-state": l ? "active" : "inactive",
+      tabIndex: 0,
+      className: y("tabs-content focus:outline-none focus-visible:outline-none", d),
+      hidden: !l,
+      ...b
+    }
+  );
+});
+export {
+  B as TabsBase,
+  J as TabsContent,
+  E as TabsContext,
+  H as TabsList,
+  G as TabsTrigger,
+  C as useTabsContext
+};

package/dist/Tabs/tabsStoryData.d.ts

@@ -0,0 +1,6 @@
+export declare const tabsData: {
+    key: string;
+    label: string;
+    children: import("react/jsx-runtime").JSX.Element;
+}[];
+//# sourceMappingURL=tabsStoryData.d.ts.map