@gtivr4/a1-design-system-react 0.4.0 → 0.5.0

package/src/components/icon-button/IconButton.d.ts

@@ -0,0 +1,14 @@
+import * as React from "react";
+
+export interface IconButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  /** Material Symbols icon name */
+  icon: string;
+  /** Accessible label (used as `aria-label` and visible tooltip) */
+  label: string;
+  /** Visual style. Default: "tertiary" */
+  variant?: "tertiary" | "secondary" | "destructive" | "success";
+  disabled?: boolean;
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+}
+
+export declare function IconButton(props: IconButtonProps): React.ReactElement;

package/src/components/inset/Inset.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+type SpacingToken = 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 64 | 96 | 128;
+
+export interface InsetProps extends React.HTMLAttributes<HTMLElement> {
+  /** Underlying element. Default: "div" */
+  as?: React.ElementType;
+  /** Base padding applied to all axes when no axis-specific value is set. Default: 16 */
+  space?: SpacingToken;
+  /** Block-axis (top/bottom) padding override. Falls back to `space`. */
+  block?: SpacingToken;
+  /** Inline-axis (left/right) padding override. Falls back to `space`. */
+  inline?: SpacingToken;
+  children?: React.ReactNode;
+}
+
+export declare function Inset(props: InsetProps): React.ReactElement;

package/src/components/inverse/Inverse.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+
+export interface InverseProps extends React.HTMLAttributes<HTMLElement> {
+  /** Underlying element. Default: "div" */
+  as?: React.ElementType;
+  children?: React.ReactNode;
+}
+
+export declare function Inverse(props: InverseProps): React.ReactElement;

package/src/components/link/Link.d.ts

@@ -0,0 +1,15 @@
+import * as React from "react";
+
+export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  /** Font size. Inherits from context when omitted. */
+  size?: "xs" | "sm" | "md" | "lg" | "xl";
+  /** Font weight override. */
+  weight?: "normal" | "medium" | "semibold" | "bold";
+  /** Material Symbols icon name to show alongside the link text. */
+  icon?: string;
+  /** Position of the icon relative to the text. Default: "start" */
+  iconPosition?: "start" | "end";
+  children?: React.ReactNode;
+}
+
+export declare function Link(props: LinkProps): React.ReactElement;

package/src/components/list/List.d.ts

@@ -0,0 +1,40 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type ListSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface ListProps extends React.HTMLAttributes<HTMLUListElement | HTMLOListElement> {
+  /** Underlying element — "ol" switches to ordered variant automatically. Default: "ul" */
+  as?: "ul" | "ol";
+  /**
+   * Font size. Responsive object syntax supported. Default: "md"
+   */
+  size?: ListSize | Partial<Record<Breakpoints, ListSize>>;
+  /** Text colour. Default: "default" */
+  color?: "default" | "muted";
+  /**
+   * Material Symbols icon name applied to all list items.
+   * Setting `icon` automatically switches `variant` to "icon".
+   */
+  icon?: string | null;
+  /**
+   * List style. Auto-detected from `as` and `icon` when not set.
+   * "divider" renders items separated by horizontal rules.
+   */
+  variant?: "unordered" | "ordered" | "icon" | "divider";
+  /** Bottom margin. */
+  marginBottom?: "sm" | "md" | "lg";
+  children?: React.ReactNode;
+}
+
+export interface ListItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+  /**
+   * Per-item icon override. Pass `null` to suppress the list-level icon for this item.
+   * Omit to inherit from the parent `List`.
+   */
+  icon?: string | null;
+  children?: React.ReactNode;
+}
+
+export declare function List(props: ListProps): React.ReactElement;
+export declare function ListItem(props: ListItemProps): React.ReactElement;

package/src/components/menu/Menu.d.ts

@@ -0,0 +1,41 @@
+import * as React from "react";
+
+export interface MenuProps {
+  /** Whether the menu is open */
+  open: boolean;
+  /** Called when the menu should close */
+  onClose?: () => void;
+  /** Ref to the trigger element — used to position the menu below it */
+  anchorRef?: React.RefObject<HTMLElement>;
+  /** Accessible label for the menu `dialog` element */
+  "aria-label"?: string;
+  /** Additional CSS class names for the menu dialog */
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface MenuSectionProps {
+  /** Optional section label shown above the items */
+  label?: string;
+  children?: React.ReactNode;
+}
+
+export interface MenuItemProps extends React.HTMLAttributes<HTMLElement> {
+  /** Material Symbols icon name shown before the label */
+  icon?: string;
+  /** Keyboard shortcut hint displayed at the trailing end */
+  shortcut?: string;
+  /** Visual style. Default: "default" */
+  variant?: "default" | "destructive";
+  /** Marks this item as the current page. Adds a left-border indicator and aria-current="page". */
+  active?: boolean;
+  disabled?: boolean;
+  /** Renders as an anchor `<a>` when provided */
+  href?: string;
+  onClick?: React.MouseEventHandler;
+  children?: React.ReactNode;
+}
+
+export declare function Menu(props: MenuProps): React.ReactElement;
+export declare function MenuSection(props: MenuSectionProps): React.ReactElement;
+export declare function MenuItem(props: MenuItemProps): React.ReactElement;

package/src/components/message/Message.d.ts

@@ -0,0 +1,34 @@
+import * as React from "react";
+
+export interface MessageBadgeProps {
+  /** Semantic status colour. Default: "neutral" */
+  status?: "neutral" | "info" | "success" | "warn" | "error";
+  /** Reduce background opacity for a softer appearance. Default: false */
+  subtle?: boolean;
+  /** Size. Default: "md" */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Override the default status icon. Pass `null` to suppress the icon entirely.
+   */
+  icon?: string | null;
+  children?: React.ReactNode;
+}
+
+export interface MessageEmptyStateProps {
+  /**
+   * Visual scale — matches the container this empty state lives in. Default: "section"
+   * page = largest (h1), section = medium (h2), card = compact (h3)
+   */
+  scale?: "page" | "section" | "card";
+  /** Material Symbols icon name shown above the title. Default: "inbox" */
+  icon?: string;
+  /** Primary message */
+  title?: string;
+  /** Supporting description text */
+  description?: string;
+  /** Action element (e.g. a Button) */
+  action?: React.ReactNode;
+}
+
+export declare function MessageBadge(props: MessageBadgeProps): React.ReactElement;
+export declare function MessageEmptyState(props: MessageEmptyStateProps): React.ReactElement;

package/src/components/notification/Notification.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export interface NotificationProps {
+  /** Element the badge is anchored to */
+  children?: React.ReactNode;
+  /** Numeric count displayed in the badge */
+  count?: number;
+  /** Short text label — used when count is not set */
+  label?: string;
+  /** Show a dot with no content. Default: false */
+  dot?: boolean;
+  /**
+   * Visual status colour. Default: "neutral"
+   * neutral | error | success | warn | info
+   */
+  status?: "neutral" | "error" | "success" | "warn" | "info";
+  /** Badge anchor position. Default: "top-right" */
+  position?: "top-right" | "top-left" | "bottom-right" | "bottom-left";
+  /** Count above this value shows as {max}+. Default: 99 */
+  max?: number;
+}
+
+export declare function Notification(props: NotificationProps): React.ReactElement;

package/src/components/page-layout/PageLayout.d.ts

@@ -0,0 +1,24 @@
+import * as React from "react";
+
+export interface PageLayoutProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Top header slot — rendered in a `<header>` landmark */
+  header?: React.ReactNode;
+  /** Bottom footer slot — rendered in a `<footer>` landmark */
+  footer?: React.ReactNode;
+  /** Side navigation panel — rendered in an `<aside>` landmark */
+  sidebar?: React.ReactNode;
+  /** Which side the sidebar occupies. Default: "start" */
+  sidebarPlacement?: "start" | "end";
+  /** Supplemental content panel (e.g. a table of contents) */
+  aside?: React.ReactNode;
+  /** Which side the aside occupies. Default: "end" */
+  asidePlacement?: "start" | "end";
+  /** Keep the header fixed at the top while content scrolls. Default: false */
+  stickyHeader?: boolean;
+  /** Constrain the layout to 100vh. Default: false */
+  viewportHeight?: boolean;
+  /** Main content */
+  children?: React.ReactNode;
+}
+
+export declare function PageLayout(props: PageLayoutProps): React.ReactElement;

package/src/components/page-nav/PageNav.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export interface PageNavSection {
+  /** Unique ID that matches the `id` on the corresponding heading/section element */
+  id: string;
+  /** Label shown in the nav */
+  label: string;
+  /** Heading nesting level for indentation. Default: 1 */
+  level?: 1 | 2;
+}
+
+export interface PageNavProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** List of page sections to link to */
+  sections?: PageNavSection[];
+  /** Accessible label for the `<nav>` and the visible heading. Default: "On this page" */
+  label?: string;
+}
+
+export declare function PageNav(props: PageNavProps): React.ReactElement;

package/src/components/pagination/Pagination.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+
+export interface PaginationProps {
+  /** Current page number (1-based) */
+  page: number;
+  /** Total number of pages */
+  totalPages: number;
+  /** Called with the new page number when a page button is clicked */
+  onChange?: (page: number) => void;
+  /**
+   * How many page numbers to show on each side of the current page.
+   * Default: 1
+   */
+  siblings?: number;
+  /** Size of the pagination buttons. Default: "md" */
+  size?: "sm" | "md" | "lg";
+}
+
+export declare function Pagination(props: PaginationProps): React.ReactElement;

package/src/components/paragraph/Paragraph.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type ParagraphSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+export interface ParagraphProps extends React.HTMLAttributes<HTMLParagraphElement> {
+  /** Underlying element. Default: "p" */
+  as?: React.ElementType;
+  /**
+   * Font size. Responsive object syntax supported. Default: "md"
+   * @example size={{ xs: "sm", md: "md" }}
+   */
+  size?: ParagraphSize | Partial<Record<Breakpoints, ParagraphSize>>;
+  /** Text colour. Default: "default" */
+  color?: "default" | "muted";
+  /** Apply text-wrap. "balance" distributes line lengths evenly — use for short intro copy. */
+  textWrap?: "balance";
+  /** Horizontal text alignment. "start"/"end" are logical aliases for LTR/RTL-safe alignment. */
+  align?: "left" | "center" | "right" | "start" | "end";
+  children?: React.ReactNode;
+}
+
+export declare function Paragraph(props: ParagraphProps): React.ReactElement;

package/src/components/radio-group/RadioGroup.d.ts

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+export interface RadioOption {
+  value: string;
+  label: string;
+  hint?: string;
+  disabled?: boolean;
+}
+
+export interface RadioGroupProps {
+  /** Group legend */
+  label?: string;
+  /** Helper text */
+  hint?: string;
+  /** Error message */
+  error?: string;
+  /** Size density. Inherits from parent `Fieldset` when omitted. Default: "default" */
+  size?: "comfortable" | "default" | "compact";
+  required?: boolean;
+  disabled?: boolean;
+  /** Render radios side by side. Default: false */
+  inline?: boolean;
+  /** Input name attribute shared by all radios */
+  name?: string;
+  /** Array of radio options */
+  options?: RadioOption[];
+  /** Controlled selected value */
+  value?: string | null;
+  /** Default selected value (uncontrolled). Default: null */
+  defaultValue?: string | null;
+  /** Called with the selected value string on change */
+  onChange?: (value: string) => void;
+  id?: string;
+  className?: string;
+}
+
+export declare function RadioGroup(props: RadioGroupProps): React.ReactElement;

package/src/components/section/Section.d.ts

@@ -0,0 +1,33 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type PaddingSize = "lg" | "md" | "sm" | "xs" | "none";
+type ResponsivePadding = PaddingSize | Partial<Record<Breakpoints, PaddingSize>>;
+type AlignmentValue = "left" | "center" | "right";
+type ResponsiveAlignment = AlignmentValue | Partial<Record<Breakpoints, AlignmentValue>>;
+
+export interface SectionProps extends React.HTMLAttributes<HTMLElement> {
+  /** Underlying element. Default: "section" */
+  as?: React.ElementType;
+  /** Block padding scale. Responsive object syntax supported. Default: "md" */
+  padding?: ResponsivePadding;
+  /** Background surface treatment */
+  surface?: "page" | "panel" | "raised";
+  /** Gap between direct children */
+  gap?: "xs" | "sm" | "md" | "lg";
+  /** Gradient overlay colour */
+  gradient?: "accent" | "highlight" | "info" | "success" | "warn";
+  /** Gradient origin. Default: "center" */
+  gradientPosition?: "top" | "top-right" | "right" | "bottom-right" | "bottom" | "bottom-left" | "left" | "top-left" | "center";
+  /** Apply inverse (dark) colour scheme to this section */
+  inverse?: boolean;
+  /** Constrain inner content to a max-width and centre it */
+  contentWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+  /** Force a specific height. "hero" fills 90svh minus the sticky header height and vertically centres content. */
+  height?: "screen" | "hero";
+  /** Horizontal layout alignment for direct children. Responsive object syntax supported. */
+  align?: ResponsiveAlignment;
+  children?: React.ReactNode;
+}
+
+export declare function Section(props: SectionProps): React.ReactElement;

package/src/components/segmented-control/SegmentedControl.d.ts

@@ -0,0 +1,23 @@
+import * as React from "react";
+
+export interface SegmentOption {
+  value: string;
+  label?: string;
+  icon?: string;
+  ariaLabel?: string;
+}
+
+export interface SegmentedControlProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Option list. Pass strings or `{ value, label, icon }` objects. */
+  options?: (string | SegmentOption)[];
+  /** Currently selected value (controlled) */
+  value?: string;
+  /** Called with the new value when an option is selected */
+  onChange?: (value: string) => void;
+  /** Stretch to fill the container width. Default: false */
+  fullWidth?: boolean;
+  /** Height scale. Default: "md" */
+  size?: "sm" | "md" | "lg";
+}
+
+export declare function SegmentedControl(props: SegmentedControlProps): React.ReactElement;

package/src/components/side-nav/SideNav.d.ts

@@ -0,0 +1,62 @@
+import * as React from "react";
+
+export interface SideNavProps {
+  /**
+   * Header slot. Pass a render function to receive the current `collapsed` state:
+   * `header={(collapsed) => <Logo collapsed={collapsed} />}`
+   */
+  header?: React.ReactNode | ((collapsed: boolean) => React.ReactNode);
+  /** Footer slot — hidden when collapsed */
+  footer?: React.ReactNode | ((collapsed: boolean) => React.ReactNode);
+  /** `SideNavItem` and `SideNavGroup` elements */
+  children?: React.ReactNode;
+  /** Controls overlay visibility on xs/sm/md viewports. Default: false */
+  open?: boolean;
+  /** Called when the scrim, Escape key, or close button is triggered */
+  onClose?: () => void;
+  /** Initial collapsed state for lg/xl (uncontrolled). Default: false */
+  defaultCollapsed?: boolean;
+  /** Controlled collapsed state for lg/xl */
+  collapsed?: boolean;
+  /** Called with next boolean when collapsed state changes */
+  onCollapsedChange?: (collapsed: boolean) => void;
+  /** Where the desktop collapse toggle appears. Default: "header" */
+  collapseButtonPlacement?: "header" | "footer";
+  /** Side of the layout the nav occupies. Default: "start" */
+  placement?: "start" | "end";
+  className?: string;
+}
+
+export interface SideNavGroupProps {
+  /** Material Symbols icon (recommended for collapsed state) */
+  icon?: string;
+  /** Trigger label */
+  label: string;
+  /** Initial expanded state (uncontrolled). Default: false */
+  defaultOpen?: boolean;
+  /** Controlled expanded state */
+  open?: boolean;
+  /** Called with next boolean when toggled */
+  onOpenChange?: (open: boolean) => void;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface SideNavItemProps {
+  /** Underlying element. Default: "a" */
+  as?: React.ElementType;
+  /** Material Symbols icon name */
+  icon?: string;
+  /** Visible label (also used as tooltip when collapsed) */
+  label: string;
+  /** Badge count shown next to the label */
+  badge?: string | number;
+  /** Mark as the current page. Default: false */
+  active?: boolean;
+  className?: string;
+  [key: string]: any;
+}
+
+export declare function SideNav(props: SideNavProps): React.ReactElement;
+export declare function SideNavGroup(props: SideNavGroupProps): React.ReactElement;
+export declare function SideNavItem(props: SideNavItemProps): React.ReactElement;

package/src/components/spacer/Spacer.d.ts

@@ -0,0 +1,16 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type SpacerSize = "xs" | "sm" | "md" | "lg" | "xl" | "xxl";
+
+export interface SpacerProps extends React.HTMLAttributes<HTMLDivElement> {
+  /**
+   * Space height. Responsive object syntax supported.
+   * xs=8px · sm=16px · md=24px · lg=40px · xl=64px · xxl=96px
+   * Default: "md"
+   * @example size={{ xs: "sm", md: "lg" }}
+   */
+  size?: SpacerSize | Partial<Record<Breakpoints, SpacerSize>>;
+}
+
+export declare function Spacer(props: SpacerProps): React.ReactElement;

package/src/components/stack/Stack.d.ts

@@ -0,0 +1,38 @@
+import * as React from "react";
+
+type Breakpoints = "xs" | "sm" | "md" | "lg" | "xl";
+type Direction = "column" | "column-reverse" | "row" | "row-reverse";
+type Justify = "start" | "center" | "end" | "between" | "around" | "evenly";
+type Align = "stretch" | "start" | "center" | "end" | "baseline";
+type SemanticGap = "xs" | "sm" | "md" | "lg";
+type SpacingToken = 1 | 2 | 4 | 6 | 8 | 12 | 16 | 20 | 24 | 32 | 40 | 64 | 96 | 128;
+
+export interface StackProps extends React.HTMLAttributes<HTMLElement> {
+  /** Underlying element. Default: "div" */
+  as?: React.ElementType;
+  /**
+   * Flex direction. Responsive object syntax supported.
+   * Default: "column"
+   * @example direction={{ xs: "column", md: "row" }}
+   */
+  direction?: Direction | Partial<Record<Breakpoints, Direction>>;
+  /**
+   * Gap between children. Use a semantic token ("xs"–"lg") or a numeric spacing value.
+   * Default: 16
+   */
+  gap?: SemanticGap | SpacingToken;
+  /**
+   * Align-items. Default: "stretch"
+   */
+  align?: Align;
+  /**
+   * Justify-content. Responsive object syntax supported.
+   * Default: "start"
+   */
+  justify?: Justify | Partial<Record<Breakpoints, Justify>>;
+  /** Allow children to wrap. Default: false */
+  wrap?: boolean;
+  children?: React.ReactNode;
+}
+
+export declare function Stack(props: StackProps): React.ReactElement;

package/src/components/status-bar/StatusBar.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+
+export interface StatusBarProps {
+  /**
+   * Current value. Combined with max to compute the fill percentage.
+   * Ignored when indeterminate is true. Default: 0
+   */
+  value?: number;
+  /**
+   * Maximum value. Default: 100
+   */
+  max?: number;
+  /**
+   * Label displayed adjacent to the bar. Accepts any ReactNode — plain string,
+   * bold/inline markup, or composed components. Also provides the accessible
+   * name for the progressbar via aria-labelledby.
+   *
+   * @example <StatusBar label="Storage used" />
+   * @example <StatusBar label={<><strong>73%</strong> used</>} />
+   */
+  label?: React.ReactNode;
+  /**
+   * Position of the label relative to the bar.
+   * "above" and "below" use a column layout; "before" and "after" use a row
+   * layout and are RTL-aware ("before" = inline-start side). Default: "above"
+   */
+  labelPosition?: "above" | "below" | "before" | "after";
+  /**
+   * Bar height. Default: "md"
+   */
+  size?: "sm" | "md" | "lg";
+  /**
+   * Shows an animated loading sweep instead of a value-based fill.
+   * Removes aria-valuenow so assistive technology announces an indeterminate
+   * state. After 3 seconds a pause/resume button appears. Default: false
+   */
+  indeterminate?: boolean;
+  /** Additional CSS class names applied to the root element. */
+  className?: string;
+}
+
+export declare function StatusBar(props: StatusBarProps & React.HTMLAttributes<HTMLDivElement>): React.ReactElement;

package/src/components/switch/Switch.d.ts

@@ -0,0 +1,27 @@
+import * as React from "react";
+
+export interface SwitchProps {
+  /** Visible label text */
+  label?: string;
+  /** Helper text shown below the switch */
+  hint?: string;
+  /** Error message */
+  error?: string;
+  /** Size density. Inherits from parent `Fieldset` when omitted. Default: "default" */
+  size?: "comfortable" | "default" | "compact";
+  /** Position of the label relative to the toggle. Default: "end" */
+  labelPosition?: "start" | "end";
+  disabled?: boolean;
+  /** Controlled checked state */
+  checked?: boolean;
+  /** Initial checked state (uncontrolled). Default: false */
+  defaultChecked?: boolean;
+  /** Called with (checked, event) when the value changes */
+  onChange?: (checked: boolean, event: React.ChangeEvent<HTMLInputElement>) => void;
+  id?: string;
+  name?: string;
+  value?: string;
+  className?: string;
+}
+
+export declare function Switch(props: SwitchProps): React.ReactElement;

package/src/components/system-banner/SystemBanner.d.ts

@@ -0,0 +1,17 @@
+import * as React from "react";
+
+export interface SystemBannerProps {
+  /** Semantic status colour. Default: "neutral" */
+  status?: "neutral" | "info" | "success" | "warn" | "error";
+  /** Bold title text */
+  title?: string;
+  /** Override the default status icon with any Material Symbols name */
+  icon?: string;
+  /** Action element rendered at the trailing end */
+  action?: React.ReactNode;
+  /** Called when the dismiss button is clicked. Omit to hide the dismiss button. */
+  onDismiss?: () => void;
+  children?: React.ReactNode;
+}
+
+export declare function SystemBanner(props: SystemBannerProps): React.ReactElement;

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

@@ -0,0 +1,53 @@
+import * as React from "react";
+
+export interface TabsProps {
+  /** Currently active tab value (controlled) */
+  value: string;
+  /** Called with the new value when a tab is clicked */
+  onChange?: (value: string) => void;
+  /**
+   * Visual style. Default: "line"
+   * line     — underline indicator
+   * pills    — filled pill buttons
+   * segment  — segmented control style
+   * progress — step-progress indicator
+   * folder   — browser-tab style folders
+   */
+  variant?: "line" | "pills" | "segment" | "progress" | "folder";
+  /**
+   * Heading level for accessibility. Tabs at level 1 sit above level 2 tabs.
+   * Default: 1
+   */
+  level?: 1 | 2;
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export interface TabListProps {
+  children?: React.ReactNode;
+}
+
+export interface TabProps {
+  /** Value identifier — must match the corresponding `TabPanel` value */
+  value: string;
+  /** Badge count shown next to the label */
+  count?: number;
+  /** Material Symbols icon name */
+  icon?: string;
+  /** Icon placement relative to the label. Default: "start" */
+  iconPosition?: "start" | "end" | "above";
+  /** Status indicator (used in "progress" variant) */
+  status?: "completed" | "error" | "warn";
+  children?: React.ReactNode;
+}
+
+export interface TabPanelProps {
+  /** Value identifier — panel renders only when this matches the active `Tabs` value */
+  value: string;
+  children?: React.ReactNode;
+}
+
+export declare function Tabs(props: TabsProps): React.ReactElement;
+export declare function TabList(props: TabListProps): React.ReactElement;
+export declare function Tab(props: TabProps): React.ReactElement;
+export declare function TabPanel(props: TabPanelProps): React.ReactElement;