@cystackapp/ui 1.5.0 → 2.0.1

package/dist/components/table/TablePagination.js

@@ -0,0 +1,69 @@
+import { jsxs as r, jsx as n } from "react/jsx-runtime";
+import { ChevronDown as u } from "@untitled-ui/icons-react";
+import { forwardRef as h } from "react";
+import { useTranslation as f } from "react-i18next";
+import { Button as i } from "../button/Button.js";
+import { Dropdown as y } from "../dropdown/Dropdown.js";
+const v = [10, 25, 50, 100], x = h(
+  ({ pagination: d }, g) => {
+    const { t: e } = f("components/table"), { total: s, page: t, pageSize: o, onPageChange: l, onPageSizeChange: c } = d, m = Math.max(1, Math.ceil(s / o)), p = v.map((a) => ({
+      id: String(a),
+      label: e("perPage", { count: a })
+    }));
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: g,
+        className: "flex items-center justify-between px-3 py-2 h-14.5 border-t border-gray-v2-200",
+        children: [
+          /* @__PURE__ */ r("div", { className: "text-sm font-medium text-gray-v2-700", children: [
+            /* @__PURE__ */ r("b", { children: [
+              e("numOfResults", { count: s }),
+              " |"
+            ] }),
+            " ",
+            e("pageNumber", { current: t, total: m })
+          ] }),
+          /* @__PURE__ */ r("div", { className: "flex items-center gap-2", children: [
+            t > 1 ? /* @__PURE__ */ n(
+              i,
+              {
+                variant: "secondary",
+                color: "gray",
+                size: "sm",
+                onClick: () => l(t - 1),
+                children: e("previous")
+              }
+            ) : null,
+            t < m ? /* @__PURE__ */ n(
+              i,
+              {
+                variant: "secondary",
+                color: "gray",
+                size: "sm",
+                onClick: () => l(t + 1),
+                children: e("next")
+              }
+            ) : null,
+            c ? /* @__PURE__ */ n(
+              y,
+              {
+                items: p,
+                selected: String(o),
+                onSelect: (a) => c(Number(a.id)),
+                children: /* @__PURE__ */ r(i, { variant: "secondary", color: "gray", size: "sm", children: [
+                  e("perPage", { count: o }),
+                  /* @__PURE__ */ n(u, { className: "h-4 w-4 text-gray-v2-400" })
+                ] })
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+x.displayName = "TablePagination";
+export {
+  x as TablePagination
+};

package/dist/components/table/TableRow.d.ts

@@ -0,0 +1,12 @@
+import { HTMLAttributes, ReactNode } from 'react';
+import { To } from 'react-router-dom';
+interface Props extends HTMLAttributes<HTMLElement> {
+    href?: To;
+    children?: ReactNode;
+}
+/**
+ * Renders a row as either a `<Link>` (when `href` is provided) or a `<div>`.
+ * Both forms participate in the parent grid via `grid-cols-subgrid`.
+ */
+export declare const TableRow: ({ href, className, ...props }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/table/TableRow.js

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+import { Link as l } from "react-router-dom";
+import { cn as n } from "../../utils/cn.js";
+const t = "grid grid-cols-subgrid col-span-full relative no-underline bg-white text-current transition-colors duration-200 hover:bg-gray-v2-50 last:rounded-b-xl", d = ({ href: r, className: e, ...o }) => r !== void 0 ? (o.onClick !== void 0 && console.warn(
+  "TableRow: onClick is ignored when href is set. Use one or the other."
+), /* @__PURE__ */ i(l, { to: r, ...o, className: n(t, e) })) : /* @__PURE__ */ i("div", { ...o, className: n(t, e) });
+export {
+  d as TableRow
+};

package/dist/components/table/expandable/ExpandableTable.d.ts

@@ -0,0 +1,30 @@
+import { ReactNode } from 'react';
+import { ColumnDef, SelectionState, SortState, PaginationState, EmptyStateConfig } from '../types';
+interface Props<TData> {
+    data?: TData[];
+    /** Returns the unique key for a row. */
+    rowKey: (row: TData) => string;
+    isLoading?: boolean;
+    columns: ColumnDef<TData>[];
+    selection?: SelectionState;
+    sort?: SortState;
+    pagination?: PaginationState;
+    /**
+     * When true, the table body height is calculated so the table never causes
+     * the page to scroll — it fits exactly within the remaining viewport height.
+     */
+    fitPageHeight?: boolean;
+    maxHeight?: string;
+    /** Configures the empty-state view. Falls back to a generic message. */
+    emptyState?: EmptyStateConfig;
+    /** Renders the expanded content below a row when it is toggled open. */
+    expandContent: (item: TData) => ReactNode;
+}
+/**
+ * Data table with accordion-style expandable rows.
+ *
+ * Pass `fitPageHeight` to make the body fill the remaining viewport height
+ * without causing the page to scroll.
+ */
+export declare const ExpandableTable: <TData>({ data, rowKey, isLoading, columns, selection, sort, pagination, fitPageHeight, maxHeight, emptyState, expandContent, }: Props<TData>) => import("react").JSX.Element;
+export {};

package/dist/components/table/expandable/ExpandableTable.js

@@ -0,0 +1,156 @@
+import { jsx as e, jsxs as f, Fragment as $ } from "react/jsx-runtime";
+import { useState as C, useMemo as q, useCallback as z } from "react";
+import { ChevronDown as B } from "@untitled-ui/icons-react";
+import { Collapsible as J } from "../../collapsible/Collapsible.js";
+import { Checkbox as O } from "../../checkbox/Checkbox.js";
+import { EmptyState as Q } from "../../empty-state/EmptyState.js";
+import { LoadingState as U } from "../../loading-state/LoadingState.js";
+import { cn as a } from "../../../utils/cn.js";
+import { TableCell as m } from "../TableCell.js";
+import { TableHeader as V } from "../TableHeader.js";
+import { TablePagination as W } from "../TablePagination.js";
+import { TableRow as X } from "../TableRow.js";
+import { useRowSelection as Y } from "../hooks/use-row-selection.js";
+import { buildGridTemplate as Z } from "../table-utils.js";
+import { useFitPageHeight as _ } from "../hooks/use-fit-page-height.js";
+const te = ({
+  data: n = [],
+  rowKey: b,
+  isLoading: h,
+  columns: c,
+  selection: g,
+  sort: N,
+  pagination: x,
+  fitPageHeight: T,
+  maxHeight: w,
+  emptyState: r,
+  expandContent: H
+}) => {
+  const {
+    bodyRef: R,
+    paginationRef: E,
+    maxHeight: j
+  } = _(), k = T ? j : w, { toggleRow: K, selectAllProps: M, isSelected: u } = Y({
+    selection: g,
+    data: n,
+    rowKey: b,
+    isLoading: h
+  }), [t, P] = C(null), [A, p] = C([]), F = q(
+    () => Z(c, {
+      prefixColumns: ["3.25rem"],
+      hasSelection: !!g
+    }),
+    [c, g]
+  ), v = h || n.length === 0, D = z(
+    (i) => {
+      setTimeout(() => {
+        p((l) => l.filter((o) => o !== t));
+      }, 300), P((l) => l === i ? null : i), p((l) => t !== i ? [...l, i] : l);
+    },
+    [t]
+  );
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      className: a(
+        "border border-gray-v2-200 shadow-xs rounded-xl flex flex-col overflow-hidden",
+        { "items-center justify-center flex-1": v }
+      ),
+      children: v ? /* @__PURE__ */ e("div", { className: "flex flex-1 items-center justify-center", children: h ? /* @__PURE__ */ e(U, {}) : /* @__PURE__ */ e(
+        Q,
+        {
+          title: (r == null ? void 0 : r.title) ?? "No data",
+          supportingText: r == null ? void 0 : r.supportingText,
+          type: r == null ? void 0 : r.type,
+          buttons: r == null ? void 0 : r.actions
+        }
+      ) }) : /* @__PURE__ */ f($, { children: [
+        /* @__PURE__ */ f("div", { className: "grid overflow-x-auto", style: { gridTemplateColumns: F }, children: [
+          /* @__PURE__ */ e(
+            V,
+            {
+              columns: c,
+              sort: N,
+              selectAll: M,
+              leadingCells: 1
+            }
+          ),
+          /* @__PURE__ */ e(
+            "div",
+            {
+              ref: R,
+              className: "grid grid-cols-subgrid col-span-full overflow-x-hidden overflow-y-auto",
+              style: { maxHeight: k },
+              children: n.map((i, l) => {
+                const o = b(i), d = t === o;
+                return /* @__PURE__ */ f(
+                  "div",
+                  {
+                    className: a("grid grid-cols-subgrid col-span-full", {
+                      "border-b border-gray-v2-200": l !== n.length - 1
+                    }),
+                    children: [
+                      /* @__PURE__ */ f(
+                        X,
+                        {
+                          className: a("cursor-pointer", {
+                            "bg-gray-v2-100": d,
+                            "bg-gray-v2-50": !d && u(o)
+                          }),
+                          onClick: () => D(o),
+                          children: [
+                            /* @__PURE__ */ e(m, { align: "center", children: /* @__PURE__ */ e(
+                              B,
+                              {
+                                className: a(
+                                  "h-4 w-4 min-w-4 text-gray-v2-400 transition-all",
+                                  { "rotate-180": d }
+                                )
+                              }
+                            ) }),
+                            g ? /* @__PURE__ */ e(m, { align: "center", children: /* @__PURE__ */ e(
+                              O,
+                              {
+                                checked: u(o),
+                                onClick: (s) => K(o, s)
+                              }
+                            ) }) : null,
+                            c.map((s, G) => /* @__PURE__ */ e(
+                              m,
+                              {
+                                align: s.align,
+                                className: s.cellClassName,
+                                children: s.cell(i, l)
+                              },
+                              s.id ? s.id : G
+                            ))
+                          ]
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        J,
+                        {
+                          className: a(
+                            "col-span-full bg-gray-v2-100 border-t",
+                            d ? "border-gray-v2-200" : "border-transparent"
+                          ),
+                          expanded: d,
+                          children: A.includes(o) ? H(i) : null
+                        }
+                      )
+                    ]
+                  },
+                  `table-${o}`
+                );
+              })
+            }
+          )
+        ] }),
+        x && n.length > 0 ? /* @__PURE__ */ e(W, { ref: E, pagination: x }) : null
+      ] })
+    }
+  );
+};
+export {
+  te as ExpandableTable
+};

package/dist/components/table/hooks/use-fit-page-height.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Computes a table body height so the table fits within the viewport without
+ * causing the page to scroll.
+ *
+ * Automatically re-measures when the body or pagination elements resize
+ * (e.g. when data loads) or when the window is resized.
+ *
+ * Uses refs instead of DOM IDs so multiple tables on the same page won't collide.
+ */
+export declare function useFitPageHeight(): {
+    bodyRef: import('react').RefObject<HTMLDivElement>;
+    paginationRef: import('react').RefObject<HTMLDivElement>;
+    maxHeight: string;
+};

package/dist/components/table/hooks/use-fit-page-height.js

@@ -0,0 +1,21 @@
+import { useRef as o, useState as f, useMemo as g, useLayoutEffect as a } from "react";
+function d() {
+  const e = o(null), t = o(null), [n, s] = f(), c = g(
+    () => n ? `calc(100vh - ${n}px - 2rem)` : "65vh",
+    [n]
+  );
+  return a(() => {
+    const r = () => {
+      let u = 0;
+      e.current && (u += e.current.getBoundingClientRect().top), t.current && (u += t.current.getBoundingClientRect().height), s(u);
+    };
+    r();
+    const i = new ResizeObserver(r);
+    return e.current && i.observe(e.current), t.current && i.observe(t.current), window.addEventListener("resize", r), () => {
+      i.disconnect(), window.removeEventListener("resize", r);
+    };
+  }, []), { bodyRef: e, paginationRef: t, maxHeight: c };
+}
+export {
+  d as useFitPageHeight
+};

package/dist/components/table/hooks/use-row-selection.d.ts

@@ -0,0 +1,27 @@
+import { SelectionState } from '../types';
+interface UseRowSelectionProps<TData> {
+    selection?: SelectionState;
+    data: TData[];
+    rowKey: (row: TData) => string;
+    isLoading?: boolean;
+}
+/**
+ * Centralises row-selection logic for the Table component.
+ *
+ * Returns:
+ * - `isSelected` — whether a given key is in the current selection
+ * - `toggleRow` — toggle a single row's selection (stops event propagation
+ *   so it works correctly inside link rows)
+ * - `selectAllProps` — props for the header "select all" checkbox; undefined
+ *   when selection is disabled
+ */
+export declare function useRowSelection<TData>({ selection, data, rowKey, isLoading, }: UseRowSelectionProps<TData>): {
+    isSelected: (key: string) => boolean;
+    toggleRow: (key: string, e: React.MouseEvent) => void;
+    selectAllProps: {
+        checked: boolean;
+        ready: boolean;
+        onChange: () => void;
+    } | undefined;
+};
+export {};

package/dist/components/table/hooks/use-row-selection.js

@@ -0,0 +1,35 @@
+import { useCallback as g, useMemo as l } from "react";
+function m({
+  selection: e,
+  data: t,
+  rowKey: u,
+  isLoading: d
+}) {
+  const n = g(
+    (r) => (e == null ? void 0 : e.selectedKeys.includes(r)) ?? !1,
+    [e]
+  ), f = g(
+    (r, s) => {
+      if (!e) return;
+      s.preventDefault(), s.stopPropagation();
+      const p = e.selectedKeys.includes(r) ? e.selectedKeys.filter((a) => a !== r) : [...e.selectedKeys, r];
+      e.onChange(p);
+    },
+    [e]
+  ), h = l(() => {
+    if (e)
+      return {
+        checked: e.selectedKeys.length > 0,
+        ready: !d && t.length > 0,
+        onChange: () => {
+          e.onChange(
+            e.selectedKeys.length === 0 ? t.map(u) : []
+          );
+        }
+      };
+  }, [e, t, u, d]);
+  return { isSelected: n, toggleRow: f, selectAllProps: h };
+}
+export {
+  m as useRowSelection
+};

package/dist/components/table/locale/en.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "emptyState": "No data",
+  "numOfResults_one": "{{count}} result",
+  "numOfResults_other": "{{count}} results",
+  "pageNumber": "Page {{current}} of {{total}}",
+  "previous": "Previous",
+  "next": "Next",
+  "perPage_one": "{{count}} / page",
+  "perPage_other": "{{count}} / pages"
+}
+;
+
+export default _default;

package/dist/components/table/locale/en.json.js

@@ -0,0 +1,21 @@
+const t = "No data", e = "{{count}} result", o = "{{count}} results", n = "Page {{current}} of {{total}}", s = "Previous", u = "Next", c = "{{count}} / page", a = "{{count}} / pages", r = {
+  emptyState: t,
+  numOfResults_one: e,
+  numOfResults_other: o,
+  pageNumber: n,
+  previous: s,
+  next: u,
+  perPage_one: c,
+  perPage_other: a
+};
+export {
+  r as default,
+  t as emptyState,
+  u as next,
+  e as numOfResults_one,
+  o as numOfResults_other,
+  n as pageNumber,
+  c as perPage_one,
+  a as perPage_other,
+  s as previous
+};

package/dist/components/table/locale/vi.json.d.ts

@@ -0,0 +1,13 @@
+declare const _default: {
+  "emptyState": "Không có dữ liệu",
+  "numOfResults_one": "{{count}} kết quả",
+  "numOfResults_other": "{{count}} kết quả",
+  "pageNumber": "Trang {{current}} / {{total}}",
+  "previous": "Trước",
+  "next": "Sau",
+  "perPage_one": "{{count}} / trang",
+  "perPage_other": "{{count}} / trang"
+}
+;
+
+export default _default;

package/dist/components/table/locale/vi.json.js

@@ -0,0 +1,21 @@
+const t = "Không có dữ liệu", n = "{{count}} kết quả", e = "{{count}} kết quả", o = "Trang {{current}} / {{total}}", c = "Trước", r = "Sau", s = "{{count}} / trang", u = "{{count}} / trang", a = {
+  emptyState: t,
+  numOfResults_one: n,
+  numOfResults_other: e,
+  pageNumber: o,
+  previous: c,
+  next: "Sau",
+  perPage_one: s,
+  perPage_other: u
+};
+export {
+  a as default,
+  t as emptyState,
+  r as next,
+  n as numOfResults_one,
+  e as numOfResults_other,
+  o as pageNumber,
+  s as perPage_one,
+  u as perPage_other,
+  c as previous
+};

package/dist/components/table/table-utils.d.ts

@@ -0,0 +1,10 @@
+import { ColumnDef } from './types';
+interface BuildGridOptions {
+    /** Extra columns prepended before the data columns (e.g. expand chevron, drag handle). */
+    prefixColumns?: string[];
+    /** When true, prepends a 4rem selection-checkbox column. */
+    hasSelection?: boolean;
+}
+/** Builds a CSS `grid-template-columns` string from column definitions. */
+export declare function buildGridTemplate<TData>(columns: ColumnDef<TData>[], options?: BuildGridOptions): string;
+export {};

package/dist/components/table/table-utils.js

@@ -0,0 +1,10 @@
+function l(u, e) {
+  const r = [];
+  e != null && e.prefixColumns && r.push(...e.prefixColumns), e != null && e.hasSelection && r.push("4rem");
+  for (const f of u)
+    r.push(f.size ?? "1fr");
+  return r.join(" ");
+}
+export {
+  l as buildGridTemplate
+};

package/dist/components/table/types.d.ts

@@ -0,0 +1,84 @@
+import { ReactNode } from 'react';
+export type ColumnAlign = "left" | "center" | "right";
+/**
+ * Definition for a single table column.
+ *
+ * @todo (breaking) Make generic: `ColumnDef<TData, TSort extends string = string>`.
+ * Change `sortKeys` to use template literals so TypeScript can infer `TSort`
+ * from the literal values:
+ * ```ts
+ * sortKeys?: { asc: `${TSort}_asc`; desc: `${TSort}_desc` };
+ * ```
+ * Wire `Table` and `TableHeader` as `<TData, TSort extends string = string>`
+ * and type the `sort` prop as `SortState<SortParam<TSort>>` (where
+ * `SortParam<T>` lives in `#ui/api/types`). `SortState.value` becomes
+ * `TSort | undefined` instead of `string`.
+ *
+ * Note: when passing multiple sort attributes in a story or callsite, TypeScript
+ * cannot union template-literal inferences across heterogeneous array elements,
+ * so explicit generic args are required:
+ * `<Table<TData, "name" | "role"> ... />`.
+ */
+export interface ColumnDef<TData> {
+    /** Optional stable identifier — used as React key and for future sort/visibility features. Falls back to column index. */
+    id?: string;
+    /** Header cell content. */
+    header?: ReactNode;
+    /** Horizontal alignment of the header and body cells. Defaults to "left". */
+    align?: ColumnAlign;
+    /** Renders the cell content for a given row. */
+    cell: (row: TData, index: number) => ReactNode;
+    /**
+     * CSS grid column size, e.g. "2fr", "150px", "minmax(100px, 2fr)".
+     * Defaults to "1fr".
+     */
+    size?: string;
+    /**
+     * Backend sort param values for ascending and descending order.
+     * When present, the header becomes clickable and shows sort controls.
+     */
+    sortKeys?: {
+        asc: string;
+        desc: string;
+    };
+    /** Extra className applied to every cell in this column. */
+    cellClassName?: string;
+}
+/** Controlled row-selection state passed to the Table. */
+export interface SelectionState {
+    selectedKeys: string[];
+    /** Keys that cannot be selected. Their checkboxes render as disabled. */
+    disabledKeys?: string[];
+    onChange: (keys: string[]) => void;
+}
+/**
+ * Controlled sort state passed to the Table.
+ *
+ * @todo (breaking) Make generic: `SortState<TSort extends string = string>`.
+ * Change `value` to `TSort | undefined` (undefined = unsorted, replacing the
+ * current empty-string sentinel) and `onChange` to
+ * `(key: TSort | undefined) => void`.
+ */
+export interface SortState {
+    /** Active sort param, e.g. "name_asc". Empty string means unsorted. */
+    value: string;
+    onChange: (key: string) => void;
+}
+/** Controlled pagination state passed to the Table. */
+export interface PaginationState {
+    /** Total number of records across all pages. */
+    total: number;
+    page: number;
+    pageSize: number;
+    onPageChange: (page: number) => void;
+    /** When omitted, the page-size selector is hidden. */
+    onPageSizeChange?: (size: number) => void;
+}
+/** Configuration for the empty-state view shown when data is an empty array. */
+export interface EmptyStateConfig {
+    title: string;
+    supportingText?: string;
+    type?: "featured-icon" | "illustration";
+    /** Action buttons rendered below the empty-state message. */
+    actions?: ReactNode;
+}

package/dist/components/tabs/Tabs.d.ts

@@ -0,0 +1,27 @@
+import { ReactNode } from 'react';
+export type TabsVariant = "underline" | "button";
+export interface TabItem {
+    key: string;
+    label: ReactNode;
+    /** Optional counter/badge rendered after the label. */
+    badge?: ReactNode;
+    disabled?: boolean;
+}
+interface Props {
+    items: TabItem[];
+    /** Key of the active tab. */
+    value: string;
+    onValueChange: (key: string) => void;
+    variant?: TabsVariant;
+    className?: string;
+}
+/**
+ * Horizontal tab navigation. Two visual variants:
+ * - `underline` — bottom-bordered tabs on a hairline rule
+ * - `button` — segmented buttons on a gray well
+ *
+ * Keyboard: ArrowLeft/ArrowRight move between enabled tabs, Home/End jump to
+ * the first/last enabled tab.
+ */
+export declare const Tabs: ({ items, value, onValueChange, variant, className, }: Props) => import("react").JSX.Element;
+export {};

package/dist/components/tabs/Tabs.js

@@ -0,0 +1,75 @@
+import { jsx as v, jsxs as x } from "react/jsx-runtime";
+import { useRef as g } from "react";
+import { cn as u } from "../../utils/cn.js";
+const p = {
+  underline: {
+    base: "px-1 pb-3 -mb-px border-b-2 font-semibold text-sm transition-colors",
+    active: "border-brand-v2-600 text-brand-v2-700",
+    inactive: "border-transparent text-gray-v2-500 hover:text-gray-v2-700 hover:border-gray-v2-300"
+  },
+  button: {
+    base: "px-3 py-2 rounded-md font-semibold text-sm transition-colors",
+    active: "bg-white text-gray-v2-700 shadow-xs",
+    inactive: "text-gray-v2-500 hover:text-gray-v2-700"
+  }
+}, S = ({
+  items: a,
+  value: l,
+  onValueChange: i,
+  variant: o = "underline",
+  className: f
+}) => {
+  const d = g(null);
+  return /* @__PURE__ */ v(
+    "div",
+    {
+      ref: d,
+      role: "tablist",
+      onKeyDown: (e) => {
+        var c, y;
+        const t = a.filter((s) => !s.disabled);
+        if (t.length === 0) return;
+        const r = t.findIndex((s) => s.key === l);
+        let n = null;
+        if (e.key === "ArrowRight" ? n = (r + 1) % t.length : e.key === "ArrowLeft" ? n = (r - 1 + t.length) % t.length : e.key === "Home" ? n = 0 : e.key === "End" && (n = t.length - 1), n === null) return;
+        e.preventDefault();
+        const b = t[n].key;
+        i(b), (y = (c = d.current) == null ? void 0 : c.querySelector(`[data-tab-key="${CSS.escape(b)}"]`)) == null || y.focus();
+      },
+      className: u(
+        "flex items-center gap-1",
+        o === "underline" && "gap-3 border-b border-gray-v2-200",
+        o === "button" && "w-fit p-1 rounded-lg bg-gray-v2-50 border border-gray-v2-200",
+        f
+      ),
+      children: a.map((e) => {
+        const t = e.key === l, r = p[o];
+        return /* @__PURE__ */ x(
+          "button",
+          {
+            type: "button",
+            role: "tab",
+            "data-tab-key": e.key,
+            "aria-selected": t,
+            disabled: e.disabled,
+            tabIndex: t ? 0 : -1,
+            onClick: () => i(e.key),
+            className: u(
+              "inline-flex items-center gap-2 whitespace-nowrap cursor-pointer focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-brand-v2-400 disabled:cursor-not-allowed disabled:text-gray-v2-300",
+              r.base,
+              t ? r.active : r.inactive
+            ),
+            children: [
+              e.label,
+              e.badge
+            ]
+          },
+          e.key
+        );
+      })
+    }
+  );
+};
+export {
+  S as Tabs
+};

package/dist/components/tabs/TabsTestStory.d.ts

@@ -0,0 +1,4 @@
+import { TabsVariant } from './Tabs';
+export declare function TabsControlled({ variant, }: {
+    variant?: TabsVariant;
+}): import("react").JSX.Element;