@lablup/ui-common 0.1.0-alpha.9 → 0.2.0-alpha.16

package/dist/components/ProgressBar/ProgressBar.d.ts

@@ -1,22 +0,0 @@
-export type ProgressBarVariant = "primary" | "success" | "error" | "warning";
-export type ProgressBarSize = "sm" | "md" | "lg";
-export interface ProgressBarProps {
-    /** Progress value (0-100). Pass null for indeterminate state. */
-    value: number | null;
-    /** Color variant */
-    variant?: ProgressBarVariant;
-    /** Size of the progress bar */
-    size?: ProgressBarSize;
-    /** Whether to show percentage label */
-    showLabel?: boolean;
-    /** Custom label text (overrides percentage) */
-    label?: string;
-    /** Additional CSS class names */
-    className?: string;
-    /** Whether to animate the progress fill transition */
-    animated?: boolean;
-    /** Aria label for accessibility */
-    ariaLabel?: string;
-}
-export declare function ProgressBar({ value, variant, size, showLabel, label, className, animated, ariaLabel, }: ProgressBarProps): import("react").JSX.Element;
-export default ProgressBar;

package/dist/components/ProgressBar/ProgressBar2.js

@@ -1,37 +0,0 @@
-/* empty css            */
-import { jsx as e, jsxs as t } from "react/jsx-runtime";
-//#region src/components/ProgressBar/ProgressBar.tsx
-function n({ value: n, variant: r = "primary", size: i = "md", showLabel: a = !1, label: o, className: s = "", animated: c = !0, ariaLabel: l }) {
-	let u = n === null, d = n === null ? 0 : Math.max(0, Math.min(100, n)), f = [
-		"progress-bar",
-		`progress-bar--${r}`,
-		`progress-bar--${i}`,
-		u ? "progress-bar--indeterminate" : "",
-		c ? "progress-bar--animated" : "",
-		s
-	].filter(Boolean).join(" "), p = o ?? (a && !u ? `${d.toFixed(0)}%` : null);
-	return /* @__PURE__ */ t("div", {
-		className: "progress-bar-wrapper",
-		children: [/* @__PURE__ */ e("div", {
-			className: f,
-			role: "progressbar",
-			"aria-valuenow": u ? void 0 : d,
-			"aria-valuemin": 0,
-			"aria-valuemax": 100,
-			"aria-label": l,
-			"aria-busy": u,
-			children: /* @__PURE__ */ e("div", {
-				className: "progress-bar__fill",
-				style: u ? void 0 : { width: `${String(d)}%` }
-			})
-		}), p && /* @__PURE__ */ e("span", {
-			className: "progress-bar__label",
-			children: p
-		})]
-	});
-}
-//#endregion
-export { n as ProgressBar, n as default };
-
-//# sourceMappingURL=ProgressBar2.js.map
-import "../../assets/components/ProgressBar/ProgressBar.css";

package/dist/components/ProgressBar/ProgressBar2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"ProgressBar2.js","names":[],"sources":["../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["/**\n * ProgressBar Component\n *\n * A reusable progress bar component that supports both determinate and\n * indeterminate states, with multiple color variants and sizes.\n *\n * @example\n * ```tsx\n * // Determinate progress\n * <ProgressBar value={75} />\n *\n * // Indeterminate (loading state)\n * <ProgressBar value={null} />\n *\n * // With variant and label\n * <ProgressBar value={100} variant=\"success\" showLabel />\n * ```\n */\n\nimport \"./ProgressBar.css\";\n\nexport type ProgressBarVariant = \"primary\" | \"success\" | \"error\" | \"warning\";\nexport type ProgressBarSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ProgressBarProps {\n  /** Progress value (0-100). Pass null for indeterminate state. */\n  value: number | null;\n  /** Color variant */\n  variant?: ProgressBarVariant;\n  /** Size of the progress bar */\n  size?: ProgressBarSize;\n  /** Whether to show percentage label */\n  showLabel?: boolean;\n  /** Custom label text (overrides percentage) */\n  label?: string;\n  /** Additional CSS class names */\n  className?: string;\n  /** Whether to animate the progress fill transition */\n  animated?: boolean;\n  /** Aria label for accessibility */\n  ariaLabel?: string;\n}\n\nexport function ProgressBar({\n  value,\n  variant = \"primary\",\n  size = \"md\",\n  showLabel = false,\n  label,\n  className = \"\",\n  animated = true,\n  ariaLabel,\n}: ProgressBarProps) {\n  const isIndeterminate = value === null;\n  const clampedValue = value === null ? 0 : Math.max(0, Math.min(100, value));\n\n  const containerClasses = [\n    \"progress-bar\",\n    `progress-bar--${variant}`,\n    `progress-bar--${size}`,\n    isIndeterminate ? \"progress-bar--indeterminate\" : \"\",\n    animated ? \"progress-bar--animated\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n\n  const displayLabel =\n    label ?? (showLabel && !isIndeterminate ? `${clampedValue.toFixed(0)}%` : null);\n\n  return (\n    <div className=\"progress-bar-wrapper\">\n      <div\n        className={containerClasses}\n        role=\"progressbar\"\n        aria-valuenow={isIndeterminate ? undefined : clampedValue}\n        aria-valuemin={0}\n        aria-valuemax={100}\n        aria-label={ariaLabel}\n        aria-busy={isIndeterminate}\n      >\n        <div\n          className=\"progress-bar__fill\"\n          style={isIndeterminate ? undefined : { width: `${String(clampedValue)}%` }}\n        />\n      </div>\n      {displayLabel && <span className=\"progress-bar__label\">{displayLabel}</span>}\n    </div>\n  );\n}\n\nexport default ProgressBar;\n"],"mappings":";;;AA2CA,SAAgB,EAAY,EAC1B,UACA,aAAU,WACV,UAAO,MACP,eAAY,IACZ,UACA,eAAY,IACZ,cAAW,IACX,gBACmB;CACnB,IAAM,IAAkB,MAAU,MAC5B,IAAe,MAAU,OAAO,IAAI,KAAK,IAAI,GAAG,KAAK,IAAI,KAAK,CAAK,CAAC,GAEpE,IAAmB;EACvB;EACA,iBAAiB;EACjB,iBAAiB;EACjB,IAAkB,gCAAgC;EAClD,IAAW,2BAA2B;EACtC;CACF,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG,GAEL,IACJ,MAAU,KAAa,CAAC,IAAkB,GAAG,EAAa,QAAQ,CAAC,EAAE,KAAK;CAE5E,OACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACE,kBAAC,OAAD;GACE,WAAW;GACX,MAAK;GACL,iBAAe,IAAkB,KAAA,IAAY;GAC7C,iBAAe;GACf,iBAAe;GACf,cAAY;GACZ,aAAW;GAEX,UAAA,kBAAC,OAAD;IACE,WAAU;IACV,OAAO,IAAkB,KAAA,IAAY,EAAE,OAAO,GAAG,OAAO,CAAY,EAAE,GAAG;GAC1E,CAAA;EACE,CAAA,GACJ,KAAgB,kBAAC,QAAD;GAAM,WAAU;GAAuB,UAAA;EAAmB,CAAA,CACxE;;AAET"}

package/dist/components/ProgressBar/index.d.ts

@@ -1,2 +0,0 @@
-export { ProgressBar, default } from './ProgressBar';
-export type { ProgressBarProps, ProgressBarVariant, ProgressBarSize, } from './ProgressBar';

package/dist/components/ProgressBar/index.js

@@ -1,2 +0,0 @@
-import { ProgressBar as e } from "./ProgressBar2.js";
-export { e as ProgressBar, e as default };

package/dist/components/Skeleton/Skeleton.d.ts

@@ -1,25 +0,0 @@
-export interface SkeletonProps {
-    /** Width of the skeleton (CSS value) */
-    width?: string;
-    /** Height of the skeleton (CSS value) */
-    height?: string;
-    /** Visual variant */
-    variant?: "rect" | "circle" | "text";
-    /** Additional CSS class names */
-    className?: string;
-    /** Test ID for testing */
-    testId?: string;
-    /** Accessible label announced while the skeleton is visible. Default: "Loading" */
-    loadingLabel?: string;
-}
-/**
- * Skeleton provides a loading placeholder with shimmer animation.
- *
- * Features:
- * - Shimmer effect using CSS animation
- * - Reduced motion preference support
- * - Multiple shape variants
- * - Accessible via aria-busy and aria-label
- */
-export declare function Skeleton({ width, height, variant, className, testId, loadingLabel, }: SkeletonProps): import("react").JSX.Element;
-export default Skeleton;

package/dist/components/Skeleton/Skeleton2.js

@@ -1,27 +0,0 @@
-/* empty css         */
-import { jsx as e } from "react/jsx-runtime";
-//#region src/components/Skeleton/Skeleton.tsx
-function t({ width: t = "100%", height: n = "20px", variant: r = "rect", className: i = "", testId: a, loadingLabel: o = "Loading" }) {
-	let s = [
-		"skeleton",
-		`skeleton--${r}`,
-		i
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ e("div", {
-		className: s,
-		style: {
-			width: t,
-			height: n
-		},
-		role: "status",
-		"aria-busy": "true",
-		"aria-label": o,
-		"data-testid": a,
-		children: /* @__PURE__ */ e("span", { className: "skeleton__shimmer" })
-	});
-}
-//#endregion
-export { t as Skeleton, t as default };
-
-//# sourceMappingURL=Skeleton2.js.map
-import "../../assets/components/Skeleton/Skeleton.css";

package/dist/components/Skeleton/Skeleton2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"Skeleton2.js","names":[],"sources":["../../../src/components/Skeleton/Skeleton.tsx"],"sourcesContent":["/**\n * Skeleton Component\n *\n * Base skeleton component for loading states.\n * Provides a shimmer animation effect that respects prefers-reduced-motion.\n *\n * @example\n * // Basic usage\n * <Skeleton width=\"100%\" height=\"20px\" />\n *\n * @example\n * // Circle skeleton\n * <Skeleton width=\"40px\" height=\"40px\" variant=\"circle\" />\n */\n\nimport \"./Skeleton.css\";\n\nexport interface SkeletonProps {\n  /** Width of the skeleton (CSS value) */\n  width?: string;\n  /** Height of the skeleton (CSS value) */\n  height?: string;\n  /** Visual variant */\n  variant?: \"rect\" | \"circle\" | \"text\";\n  /** Additional CSS class names */\n  className?: string;\n  /** Test ID for testing */\n  testId?: string;\n  /** Accessible label announced while the skeleton is visible. Default: \"Loading\" */\n  loadingLabel?: string;\n}\n\n/**\n * Skeleton provides a loading placeholder with shimmer animation.\n *\n * Features:\n * - Shimmer effect using CSS animation\n * - Reduced motion preference support\n * - Multiple shape variants\n * - Accessible via aria-busy and aria-label\n */\nexport function Skeleton({\n  width = \"100%\",\n  height = \"20px\",\n  variant = \"rect\",\n  className = \"\",\n  testId,\n  loadingLabel = \"Loading\",\n}: SkeletonProps) {\n  const classNames = [\"skeleton\", `skeleton--${variant}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <div\n      className={classNames}\n      style={{ width, height }}\n      role=\"status\"\n      aria-busy=\"true\"\n      aria-label={loadingLabel}\n      data-testid={testId}\n    >\n      <span className=\"skeleton__shimmer\" />\n    </div>\n  );\n}\n\nexport default Skeleton;\n"],"mappings":";;;AAyCA,SAAgB,EAAS,EACvB,WAAQ,QACR,YAAS,QACT,aAAU,QACV,eAAY,IACZ,WACA,kBAAe,aACC;CAChB,IAAM,IAAa;EAAC;EAAY,aAAa;EAAW;CAAS,CAAC,CAC/D,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,OAAD;EACE,WAAW;EACX,OAAO;GAAE;GAAO;EAAO;EACvB,MAAK;EACL,aAAU;EACV,cAAY;EACZ,eAAa;EAEb,UAAA,kBAAC,QAAD,EAAM,WAAU,oBAAqB,CAAA;CAClC,CAAA;AAET"}

package/dist/components/StatusTag/StatusTag.d.ts

@@ -1,38 +0,0 @@
-import { BadgeProps } from '../Badge';
-/**
- * Canonical lifecycle state surface accepted by {@link StatusTag}.
- *
- * The names are deliberately broad so domain types can map onto them:
- * - SessionState `"starting"`           → `"preparing"`
- * - SessionState `"running"` (healthy)  → `"running"`
- * - SessionState `"idle"`               → `"idle"`
- * - SessionState `"busy"`               → `"busy"`
- * - SessionState `"stopping"`           → `"stopping"`
- * - SessionState `"terminated"`         → `"terminated"`
- * - SessionState `"error"`              → `"error"`
- */
-export type StatusKind = "running" | "preparing" | "idle" | "busy" | "stopping" | "terminated" | "error";
-export interface StatusTagProps {
-    /** Canonical lifecycle state. Drives color and indicator behavior. */
-    state: StatusKind;
-    /** Display label. Callers are responsible for i18n at the call site. */
-    label: string;
-    /** Override the underlying Badge size. Defaults to `"small"`. */
-    size?: BadgeProps["size"];
-    /**
-     * When `true`, render a small pulsing dot before the label to
-     * communicate that the state is in motion. Defaults to a sensible
-     * choice based on `state` (transient states pulse, terminal ones
-     * don't).
-     */
-    pulse?: boolean;
-    /** Extra class names appended to the root span. */
-    className?: string;
-}
-declare function StatusTagComponent({ state, label, size, pulse, className, }: StatusTagProps): import("react").JSX.Element;
-/**
- * Memoized to avoid re-rendering rows that didn't change. The component
- * is a pure function of its props.
- */
-export declare const StatusTag: import('react').MemoExoticComponent<typeof StatusTagComponent>;
-export default StatusTag;

package/dist/components/StatusTag/StatusTag2.js

@@ -1,45 +0,0 @@
-import { Badge as e } from "../Badge/Badge2.js";
-/* empty css          */
-import { memo as t } from "react";
-import { jsx as n, jsxs as r } from "react/jsx-runtime";
-//#region src/components/StatusTag/StatusTag.tsx
-function i(e) {
-	switch (e) {
-		case "running": return "success";
-		case "preparing": return "info";
-		case "idle": return "default";
-		case "busy": return "primary";
-		case "stopping": return "warning";
-		case "terminated": return "default";
-		case "error": return "danger";
-	}
-}
-function a(e) {
-	return e === "preparing" || e === "stopping" || e === "busy";
-}
-function o({ state: t, label: o, size: s = "small", pulse: c, className: l = "" }) {
-	let u = c ?? a(t), d = [
-		"status-tag",
-		`status-tag--${t}`,
-		l
-	].filter(Boolean).join(" ");
-	return /* @__PURE__ */ r(e, {
-		variant: i(t),
-		size: s,
-		className: d,
-		children: [u && /* @__PURE__ */ n("span", {
-			className: "status-tag__indicator",
-			"aria-hidden": "true",
-			"data-testid": "status-tag-indicator"
-		}), /* @__PURE__ */ n("span", {
-			className: "status-tag__label",
-			children: o
-		})]
-	});
-}
-var s = t(o);
-//#endregion
-export { s as StatusTag, s as default };
-
-//# sourceMappingURL=StatusTag2.js.map
-import "../../assets/components/StatusTag/StatusTag.css";

package/dist/components/StatusTag/StatusTag2.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"StatusTag2.js","names":[],"sources":["../../../src/components/StatusTag/StatusTag.tsx"],"sourcesContent":["/**\n * StatusTag Component (epic #2730 / issue #2738)\n *\n * Status badge with the canonical color semantics shared by every list /\n * table that has to render lifecycle state. Mirrors the Backend.AI WebUI\n * `SessionStatusTag` color choices so users carry a single mental model\n * across products: blue for transient/preparing, green for healthy\n * running, red for error, neutral for terminated, yellow for stopping.\n *\n * The component intentionally builds on the existing {@link Badge}\n * primitive — it does not duplicate Badge's color tokens. Instead it\n * adds:\n *\n * 1. A canonical `state` enum surface (`running`, `preparing`,\n *    `stopping`, `error`, `terminated`, `idle`, `busy`) so callers\n *    don't have to map their domain state onto Badge variants by hand.\n * 2. An optional pulsing dot indicator for transient states (preparing,\n *    stopping) so the UI visibly communicates \"in motion\" alongside\n *    the static color.\n *\n * This is a domain-agnostic primitive — it MUST NOT carry Session,\n * Model, Agent, or Squad-specific knowledge.\n */\n\nimport { memo } from \"react\";\nimport { Badge } from \"../Badge\";\nimport type { BadgeProps } from \"../Badge\";\nimport \"./StatusTag.css\";\n\n/**\n * Canonical lifecycle state surface accepted by {@link StatusTag}.\n *\n * The names are deliberately broad so domain types can map onto them:\n * - SessionState `\"starting\"`           → `\"preparing\"`\n * - SessionState `\"running\"` (healthy)  → `\"running\"`\n * - SessionState `\"idle\"`               → `\"idle\"`\n * - SessionState `\"busy\"`               → `\"busy\"`\n * - SessionState `\"stopping\"`           → `\"stopping\"`\n * - SessionState `\"terminated\"`         → `\"terminated\"`\n * - SessionState `\"error\"`              → `\"error\"`\n */\nexport type StatusKind =\n  \"running\" | \"preparing\" | \"idle\" | \"busy\" | \"stopping\" | \"terminated\" | \"error\";\n\nexport interface StatusTagProps {\n  /** Canonical lifecycle state. Drives color and indicator behavior. */\n  state: StatusKind;\n  /** Display label. Callers are responsible for i18n at the call site. */\n  label: string;\n  /** Override the underlying Badge size. Defaults to `\"small\"`. */\n  size?: BadgeProps[\"size\"];\n  /**\n   * When `true`, render a small pulsing dot before the label to\n   * communicate that the state is in motion. Defaults to a sensible\n   * choice based on `state` (transient states pulse, terminal ones\n   * don't).\n   */\n  pulse?: boolean;\n  /** Extra class names appended to the root span. */\n  className?: string;\n}\n\n/**\n * Map a {@link StatusKind} onto a {@link BadgeProps.variant}. Centralizes\n * the canonical color mapping so consumers can't drift.\n */\nfunction variantForState(state: StatusKind): BadgeProps[\"variant\"] {\n  switch (state) {\n    case \"running\":\n      return \"success\";\n    case \"preparing\":\n      return \"info\";\n    case \"idle\":\n      return \"default\";\n    case \"busy\":\n      return \"primary\";\n    case \"stopping\":\n      return \"warning\";\n    case \"terminated\":\n      return \"default\";\n    case \"error\":\n      return \"danger\";\n  }\n}\n\n/**\n * Default for the dot-pulse indicator. Transient states pulse, terminal\n * ones don't. Callers can override via the `pulse` prop.\n */\nfunction defaultPulseForState(state: StatusKind): boolean {\n  return state === \"preparing\" || state === \"stopping\" || state === \"busy\";\n}\n\nfunction StatusTagComponent({\n  state,\n  label,\n  size = \"small\",\n  pulse,\n  className = \"\",\n}: StatusTagProps) {\n  const showPulse = pulse ?? defaultPulseForState(state);\n  const composedClassName = [\"status-tag\", `status-tag--${state}`, className]\n    .filter(Boolean)\n    .join(\" \");\n\n  return (\n    <Badge variant={variantForState(state)} size={size} className={composedClassName}>\n      {showPulse && (\n        <span\n          className=\"status-tag__indicator\"\n          aria-hidden=\"true\"\n          data-testid=\"status-tag-indicator\"\n        />\n      )}\n      <span className=\"status-tag__label\">{label}</span>\n    </Badge>\n  );\n}\n\n/**\n * Memoized to avoid re-rendering rows that didn't change. The component\n * is a pure function of its props.\n */\nexport const StatusTag = memo(StatusTagComponent);\nexport default StatusTag;\n"],"mappings":";;;;;AAkEA,SAAS,EAAgB,GAA0C;CACjE,QAAQ,GAAR;EACE,KAAK,WACH,OAAO;EACT,KAAK,aACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,KAAK,QACH,OAAO;EACT,KAAK,YACH,OAAO;EACT,KAAK,cACH,OAAO;EACT,KAAK,SACH,OAAO;CACX;AACF;AAMA,SAAS,EAAqB,GAA4B;CACxD,OAAO,MAAU,eAAe,MAAU,cAAc,MAAU;AACpE;AAEA,SAAS,EAAmB,EAC1B,UACA,UACA,UAAO,SACP,UACA,eAAY,MACK;CACjB,IAAM,IAAY,KAAS,EAAqB,CAAK,GAC/C,IAAoB;EAAC;EAAc,eAAe;EAAS;CAAS,CAAC,CACxE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;CAEX,OACE,kBAAC,GAAD;EAAO,SAAS,EAAgB,CAAK;EAAS;EAAM,WAAW;EAA/D,UAAA,CACG,KACC,kBAAC,QAAD;GACE,WAAU;GACV,eAAY;GACZ,eAAY;EACb,CAAA,GAEH,kBAAC,QAAD;GAAM,WAAU;GAAqB,UAAA;EAAY,CAAA,CAC5C;;AAEX;AAMA,IAAa,IAAY,EAAK,CAAkB"}

package/dist/components/StatusTag/index.d.ts

@@ -1,2 +0,0 @@
-export { StatusTag, default } from './StatusTag';
-export type { StatusTagProps, StatusKind } from './StatusTag';

package/dist/components/StatusTag/index.js

@@ -1,2 +0,0 @@
-import { StatusTag as e } from "./StatusTag2.js";
-export { e as StatusTag, e as default };

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

@@ -1,94 +0,0 @@
-import { ReactNode } from 'react';
-export interface TabItem {
-    id: string;
-    label: string;
-    content: ReactNode;
-    /**
-     * Trailing node rendered next to the tab label: a count pill, a status
-     * badge, whatever the consumer's vocabulary calls for.
-     *
-     * This used to sit beside a `tag` prop that took one of four fixed names,
-     * required / recommended / beta / experimental, and rendered a Badge for
-     * it. Those are one product's guide vocabulary, and the arrangement had
-     * already split across the boundary: the badge variant lived here while the
-     * label text had to be passed in from the consumer's locale bundle. A
-     * consumer that wants that badge renders it here, and owns both halves.
-     */
-    labelExtra?: ReactNode;
-    /**
-     * Optional leading node rendered before the tab label (e.g. an icon).
-     * Useful when migrating segmented controls that prefix the label with
-     * an SVG glyph (e.g. ImportExportDialog source toggle: File / Paste / URL).
-     */
-    labelPrefix?: ReactNode;
-    /** Assign this tab to a group (used with the `groups` prop) */
-    groupId?: string;
-}
-export interface TabGroupMeta {
-    id: string;
-    label: string;
-}
-export type TabOverflowMode = "dropdown" | "menu";
-/**
- * Visual variant of the tab bar.
- *
- * - `"underlined"` (default): pill container with raised active tab and scroll
- *   arrows; used for primary page-level navigation that may overflow.
- * - `"segmented"`: gray-background segmented control with raised active tab;
- *   intended for short, fixed-arity in-page mode toggles.
- * - `"compact"`: smaller segmented control with reduced padding; used where
- *   the tab bar shares a row with other controls (e.g. StatisticsPage).
- */
-export type TabVariant = "underlined" | "segmented" | "compact";
-export interface TabsProps {
-    tabs: TabItem[];
-    /** Group definitions for organizing tabs with separators and labels */
-    groups?: TabGroupMeta[];
-    defaultTab?: string;
-    activeTab?: string;
-    onTabChange?: (tabId: string) => void;
-    className?: string;
-    panelClassName?: string;
-    ariaLabel?: string;
-    /** Show scroll arrows and overflow controls (default: true) */
-    showOverflowControls?: boolean;
-    /** Show group labels in the tab bar and overflow menu (default: true) */
-    showGroupLabels?: boolean;
-    /**
-     * Overflow strategy for small screens:
-     * - "dropdown": mobile dropdown trigger (< 480px) — default when no groups
-     * - "menu": overflow menu button (< 768px) — default when groups are provided
-     */
-    overflowMode?: TabOverflowMode;
-    /**
-     * Visual variant. Defaults to `"underlined"` (the original Tabs look).
-     * Use `"segmented"` for iOS-style pill toggles, `"compact"` for a smaller
-     * variant suitable for in-header use alongside other controls.
-     */
-    variant?: TabVariant;
-    /**
-     * When using `variant="segmented"` or `"compact"`, make each tab fill the
-     * container evenly (flex: 1 per tab). Useful for short, equal-arity mode
-     * toggles like the Models page tab bar. Defaults to false.
-     */
-    fillContainer?: boolean;
-    /**
-     * Render the tab panel (the active tab's `content`) below the tab list.
-     * Defaults to true. Set to false when the consumer manages its own panel
-     * rendering outside the Tabs component (e.g. pages that interleave panels
-     * with other in-header elements).
-     *
-     * When false, each `TabItem.content` is ignored — the consumer is expected
-     * to inspect `activeTab` / `onTabChange` and render its own panel.
-     */
-    renderPanel?: boolean;
-    /** Accessible label for the overflow-menu trigger button. Default: "More tabs" */
-    moreTabsLabel?: string;
-    /** Accessible label for the mobile dropdown trigger. Default: "Select tab" */
-    selectTabLabel?: string;
-    /** Accessible label for the left scroll-arrow button. Default: "Scroll left" */
-    scrollLeftLabel?: string;
-    /** Accessible label for the right scroll-arrow button. Default: "Scroll right" */
-    scrollRightLabel?: string;
-}
-export declare function Tabs({ tabs, groups, defaultTab, activeTab: controlledTab, onTabChange, className, panelClassName, ariaLabel, showOverflowControls, showGroupLabels, overflowMode: explicitOverflowMode, variant, fillContainer, renderPanel, moreTabsLabel, selectTabLabel, scrollLeftLabel, scrollRightLabel, }: TabsProps): import("react").JSX.Element;