@weichenlin/swell-ui 0.0.0-stage → 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,659 @@
+import { ClassValue } from "clsx";
+import { VariantProps } from "class-variance-authority";
+import { ComponentProps, MouseEvent, ReactElement, ReactNode } from "react";
+//#region src/components/badge/badge.d.ts
+type BadgeTone = 'neutral' | 'info' | 'success' | 'warning' | 'danger';
+type BadgeVariant = 'subtle' | 'outline' | 'solid';
+type BadgeSize = 'sm' | 'md';
+type BadgeProps = Omit<ComponentProps<'span'>, 'onClick'> & {
+  tone?: BadgeTone;
+  variant?: BadgeVariant;
+  size?: BadgeSize;
+  /** Leading, decorative glyph (hidden from assistive tech). Ignored while `busy`. */
+  icon?: ReactNode;
+  /** In-progress state: swaps the icon for a spinning ring (a static ring under reduced motion). */
+  busy?: boolean;
+  /** Visually-hidden prefix for screen readers, e.g. "Health" reads as "Health: Unknown". */
+  context?: string;
+};
+export declare function Badge({ tone, variant, size, icon, busy, context, className, children, ...props }: BadgeProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/tooltip.d.ts
+type Side = 'top' | 'bottom' | 'left' | 'right';
+type TriggerProps = {
+  'aria-describedby'?: string;
+};
+type TooltipProps = {
+  /** Nothing renders (and no aria-describedby is added) when empty. */
+  content?: ReactNode;
+  /** Preferred side; flips to the opposite one when it doesn't fit the viewport. */
+  side?: Side;
+  /**
+   * Link the tooltip to the trigger via aria-describedby. Turn off when the
+   * tooltip only repeats the trigger's accessible name (e.g. icon button labels).
+   */
+  describe?: boolean;
+  /** Classes for the wrapper that anchors the tooltip. */
+  className?: string;
+  children: ReactElement<TriggerProps>;
+};
+/**
+ * Hover/focus tooltip around any element. The bubble is portaled to `<body>` with
+ * fixed positioning, so scroll containers (tables, drawers) never clip it.
+ * Events are read on the wrapper, so aria-disabled triggers work; React still
+ * treats the portaled bubble as inside the wrapper, so the pointer can rest on it.
+ */
+export declare function Tooltip({ content, side, describe, className, children }: TooltipProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/button/button.d.ts
+declare const buttonVariants: (props?: ({
+  intent?: "surface" | "primary" | "secondary" | "dark" | "ghost" | null | undefined;
+  size?: "sm" | "md" | "lg" | null | undefined;
+  tone?: "danger" | "default" | null | undefined;
+  fullWidth?: boolean | null | undefined;
+  square?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type BaseProps = Omit<ComponentProps<'button'>, 'children'> & Omit<VariantProps<typeof buttonVariants>, 'square'> & {
+  /** Shows a spinner, keeps width and focus, blocks activation. */
+  loading?: boolean;
+  /** Announced through a polite live region while loading. */
+  loadingText?: string;
+  /** Tooltip explaining why the button is disabled; shown on hover and keyboard focus. */
+  disabledReason?: string;
+  /** Material-style press ripple; on by default. */
+  ripple?: boolean;
+};
+type TextButtonProps = BaseProps & {
+  icon?: never;
+  iconLeft?: ReactNode;
+  iconRight?: ReactNode;
+  children?: ReactNode;
+  tooltip?: never;
+  tooltipSide?: never;
+};
+type IconOnlyButtonProps = Omit<BaseProps, 'aria-label' | 'fullWidth'> & {
+  /** Renders a square icon-only button. */
+  icon: NonNullable<ReactNode>;
+  /** Required: an icon has no text to name the button. */
+  'aria-label': string;
+  /** Show the label as a tooltip on hover/focus. */
+  tooltip?: boolean;
+  tooltipSide?: TooltipProps['side'];
+  fullWidth?: never;
+  children?: never;
+  iconLeft?: never;
+  iconRight?: never;
+};
+type ButtonProps = TextButtonProps | IconOnlyButtonProps;
+export declare function Button(props: ButtonProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/card/card.d.ts
+type CardElement = 'div' | 'section' | 'article';
+type CardProps = ComponentProps<'div'> & {
+  /** `section`/`article` are named by their CardHeader title. */
+  as?: CardElement;
+};
+/**
+ * Bordered surface for a group of related content. No padding of its own: CardHeader and
+ * CardContent add it, so full-bleed rows (lists, tables) can sit edge to edge.
+ */
+export declare function Card({ as: Comp, className, ...props }: CardProps): import("react").JSX.Element;
+type CardHeaderProps = Omit<ComponentProps<'div'>, 'title' | 'children'> & {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Trailing control, e.g. a "View all" link. */
+  action?: ReactNode;
+  headingLevel?: 2 | 3;
+};
+export declare function CardHeader({ title, description, action, headingLevel, className, ...props }: CardHeaderProps): import("react").JSX.Element;
+export declare function CardContent({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+//#region src/components/checkbox/choice-row.d.ts
+/**
+ * Either a visible label, or only an aria-label when the context already names the control
+ * (a table row, a toolbar). Same idea as the input family's FieldLabelProps.
+ */
+type ChoiceLabelProps = {
+  label: ReactNode;
+  'aria-label'?: string;
+} | {
+  label?: never;
+  'aria-label': string;
+};
+//#endregion
+//#region src/components/checkbox/checkbox.d.ts
+type NativeCheckboxProps = Omit<ComponentProps<'input'>, 'type' | 'size' | 'children' | 'aria-label'>;
+type CheckboxProps = NativeCheckboxProps & ChoiceLabelProps & {
+  /** One muted line under the label, linked with aria-describedby. */
+  description?: ReactNode;
+  /** Truthy sets aria-invalid; text is shown under the label and linked with aria-describedby. */
+  error?: ReactNode;
+  /**
+   * Partly selected (a "select all" over some rows): drawn as a dash, announced as mixed.
+   * A visual state only; the form still submits `checked`. The browser clears it on click, so
+   * derive it from the children's state and it stays right after every change.
+   */
+  indeterminate?: boolean;
+  /** Classes for the `<input>`; `className` goes to the row. */
+  inputClassName?: string;
+};
+export declare function Checkbox({ label, description, error, indeterminate, className, inputClassName, ref, checked, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/checkbox/checkbox-group.d.ts
+type CheckboxGroupProps = Omit<ComponentProps<'fieldset'>, 'children'> & {
+  /** Names the group (fieldset legend); title case noun, no trailing colon. */
+  legend: ReactNode;
+  /** Muted line under the legend, linked to the group with aria-describedby. */
+  description?: ReactNode;
+  /**
+   * Group-level message (e.g. "Pick at least one"), linked with aria-describedby. Not aria-invalid:
+   * ARIA 1.2 doesn't support it on the group role. Native `required` can't express "one of", so
+   * validate in your submit handler and pass the message here.
+   */
+  error?: ReactNode;
+  orientation?: 'vertical' | 'horizontal';
+  /** Checkbox (or Switch) rows; each keeps its own name/checked. `disabled` reaches them natively. */
+  children: ReactNode;
+};
+/** A `<fieldset>` + `<legend>` around related checkboxes; holds no value of its own. */
+export declare function CheckboxGroup({ legend, description, error, orientation, className, 'aria-describedby': describedByProp, children, ...props }: CheckboxGroupProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/modal/modal-shell.d.ts
+/**
+ * Why the modal asks to close. `programmatic` is never sent by the modal itself; it is there for
+ * callers that route their own closes (e.g. after a successful submit) through the same handler.
+ */
+type ModalCloseReason = 'escape' | 'backdrop' | 'close-button' | 'programmatic';
+//#endregion
+//#region src/components/dialog/dialog.d.ts
+type DialogSize = 'sm' | 'md' | 'lg';
+/**
+ * Why the dialog asks to close. `programmatic` is never sent by the dialog itself; it is there for
+ * callers that route their own closes (e.g. after a successful submit) through the same handler.
+ */
+type DialogCloseReason = ModalCloseReason;
+type DialogProps = Omit<ComponentProps<'dialog'>, 'open'> & {
+  open: boolean;
+  onOpenChange: (open: boolean, reason: DialogCloseReason) => void;
+  /** Max width: sm 384px (confirmations), md 480px (default), lg 640px (wide forms). */
+  size?: DialogSize;
+  /**
+   * Destructive confirmation: role="alertdialog", no close button by default, and a backdrop
+   * click doesn't close (it bounces instead). Put `autoFocus` on the least destructive button.
+   */
+  alert?: boolean;
+  /** False blocks Esc, the backdrop and the close button (e.g. while a request is pending). */
+  dismissible?: boolean;
+};
+/**
+ * Modal dialog on the native `<dialog>` + showModal() (behavior in ModalShell). Controlled: `open`
+ * drives it and every close request goes through `onOpenChange`.
+ */
+export declare function Dialog({ size, className, children, ...props }: DialogProps): import("react").JSX.Element;
+type DialogHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {
+  title: ReactNode;
+  description?: ReactNode;
+  /** Top-right close button. Defaults to on, except for `alert` dialogs (answer with the footer). */
+  closeButton?: boolean;
+};
+export declare function DialogHeader({ title, description, closeButton, className, ...props }: DialogHeaderProps): import("react").JSX.Element;
+/** Scrolls when the content is taller than the space left between header and footer. */
+export declare function DialogBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Actions, right-aligned: Cancel first, the primary action last (rightmost). */
+export declare function DialogFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+//#endregion
+//#region src/components/drawer/drawer.d.ts
+type DrawerSide = 'left' | 'right';
+type DrawerSize = 'sm' | 'md' | 'lg';
+/** Same reasons as Dialog's; `programmatic` is for callers routing their own closes. */
+type DrawerCloseReason = ModalCloseReason;
+type DrawerProps = Omit<ComponentProps<'dialog'>, 'open'> & {
+  open: boolean;
+  onOpenChange: (open: boolean, reason: DrawerCloseReason) => void;
+  /** Edge it slides out of. Defaults to right (details, filters); navigation passes left. */
+  side?: DrawerSide;
+  /** Width: sm 280px (navigation), md 384px (default, filters), lg 480px (details, forms). */
+  size?: DrawerSize;
+};
+/**
+ * Modal side panel on the native `<dialog>` (behavior shared with Dialog through ModalShell).
+ * Controlled through `open` / `onOpenChange(open, reason)`; Esc, the backdrop, DrawerHeader's close
+ * button and DrawerClose all ask through `onOpenChange`. Needs a name: `aria-label` /
+ * `aria-labelledby`, or a DrawerHeader title.
+ */
+export declare function Drawer({ side, size, className, children, ref, ...props }: DrawerProps): import("react").JSX.Element;
+type DrawerHeaderProps = Omit<ComponentProps<'div'>, 'title'> & {
+  /** Also names the drawer. */
+  title: ReactNode;
+  description?: ReactNode;
+};
+/** Title, optional description and the close button, pinned above the body. */
+export declare function DrawerHeader({ title, description, className, ...props }: DrawerHeaderProps): import("react").JSX.Element;
+/** Fills the space between header and footer and scrolls on its own; they stay put. */
+export declare function DrawerBody({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Actions, right-aligned: Cancel first, the primary action last (rightmost). */
+export declare function DrawerFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+type DrawerCloseProps = Omit<ComponentProps<'button'>, 'children' | 'type' | 'aria-label' | 'onClick'> & {
+  /** Required: the button shows only an icon. */
+  'aria-label': string;
+  size?: 'sm' | 'md' | 'lg';
+  /** Defaults to X. */
+  icon?: ReactNode;
+};
+/** A ghost icon button that closes the drawer, for custom headers. */
+export declare function DrawerClose({ size, icon, ...props }: DrawerCloseProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/input/field.d.ts
+type FieldSize = 'sm' | 'md' | 'lg';
+type NativeInputProps = Omit<ComponentProps<'input'>, 'size' | 'children'>;
+/** Props every input in the family shares. */
+type FieldProps = NativeInputProps & {
+  /** Visible label, rendered as a real `<label>` above the field. */
+  label: string;
+  /** Outlined floating label: rests inside the field and moves onto the top border. */
+  floating?: boolean;
+  helperText?: ReactNode;
+  /** Truthy puts the field in the error state; the text replaces helperText. */
+  error?: ReactNode;
+  size?: FieldSize;
+  /** Decorative leading icon (aria-hidden) or plain text prefix such as `https://`. */
+  start?: ReactNode;
+  /** Decorative trailing icon (aria-hidden) or plain text suffix. */
+  end?: ReactNode;
+  /** Monospace with spellcheck/autocorrect off, for tags, SHAs and hostnames. */
+  mono?: boolean;
+  /** Shows a spinner and announces validatingText; the field stays editable. */
+  validating?: boolean;
+  validatingText?: string;
+  /** Classes for the `<input>`; `className` goes to the outer wrapper. */
+  inputClassName?: string;
+};
+/**
+ * Either a visible label, or only an aria-label when the context already names the field
+ * (a table cell, a toolbar filter). Floating needs a visible label.
+ */
+type FieldLabelProps = {
+  label: string;
+  floating?: boolean;
+} | {
+  label?: never;
+  floating?: never;
+  'aria-label': string;
+};
+//#endregion
+//#region src/components/input/copy-input.d.ts
+type CopyInputProps = Omit<FieldProps, 'type' | 'value' | 'defaultValue' | 'readOnly' | 'onChange'> & {
+  value: string;
+};
+export declare function CopyInput({ value, mono, size, onFocus, onClick, ...props }: CopyInputProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/input/input.d.ts
+/**
+ * Password and search have dedicated components (PasswordInput, SearchInput).
+ * No `number`: its spinners and wheel stepping misfire; use `inputMode="numeric"` instead.
+ */
+type InputType = 'text' | 'email' | 'url' | 'tel';
+type InputProps = Omit<FieldProps, 'type' | 'label' | 'floating'> & FieldLabelProps & {
+  type?: InputType;
+};
+export declare function Input({ type, ...props }: InputProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/input/password-input.d.ts
+type PasswordInputProps = Omit<FieldProps, 'type'> & {
+  type?: never;
+};
+export declare function PasswordInput({ autoComplete, size, ...props }: PasswordInputProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/input/search-input.d.ts
+type SearchInputProps = Omit<FieldProps, 'type' | 'label' | 'floating' | 'start'> & {
+  /** Required: a search field has no visible label. */
+  'aria-label': string;
+  /** Called after the clear button or Esc empties the field. */
+  onClear?: () => void;
+  label?: never;
+  floating?: never;
+  start?: never;
+  type?: never;
+};
+export declare function SearchInput({ onClear, onChange, onKeyDown, inputClassName, size, ...props }: SearchInputProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/meter/meter.d.ts
+type MeterTone = BadgeTone;
+type MeterSegment = {
+  label: string;
+  value: number;
+  tone: MeterTone;
+};
+type MeterProps = Omit<ComponentProps<'div'>, 'children'> & {
+  label: ReactNode;
+  /** Short trailing text on the label row, e.g. "9 of 13 report health". */
+  summary?: ReactNode;
+  /** Drawn in order; zero values are left out of both the bar and the legend. */
+  segments: MeterSegment[];
+};
+/**
+ * Stacked proportion bar with a legend. The bar is decorative; the legend list carries the
+ * numbers for assistive tech, so nothing is conveyed by color alone.
+ */
+export declare function Meter({ label, summary, segments, className, ...props }: MeterProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/select/select.d.ts
+/** `value` must be non-empty: `''` is reserved for "nothing chosen". */
+type SelectOption = {
+  value: string;
+  /** Also the option's text, which typeahead and screen readers use. */
+  label: string;
+  /** Decorative (aria-hidden); shown in the picker and on the trigger while selected. */
+  icon?: ReactNode;
+  disabled?: boolean;
+};
+type SelectGroup = {
+  label: string;
+  options: SelectOption[];
+};
+type NativeSelectProps = Omit<ComponentProps<'select'>, 'size' | 'children' | 'multiple' | 'value' | 'defaultValue'>;
+type SelectProps = NativeSelectProps & FieldLabelProps & {
+  options: (SelectOption | SelectGroup)[];
+  /** `''` means nothing chosen. */
+  value?: string;
+  defaultValue?: string;
+  /** Shown while nothing is chosen. Label-above only: a floating label takes its place (MUI). */
+  placeholder?: string;
+  helperText?: ReactNode;
+  /** Truthy puts the field in the error state; the text replaces helperText. */
+  error?: ReactNode;
+  size?: FieldSize;
+  /** Fixed decorative leading icon; the selected option's own icon wins when it has one. */
+  start?: ReactNode;
+  mono?: boolean;
+  /** Classes for the `<select>`; `className` goes to the outer wrapper. */
+  selectClassName?: string;
+  /** A native select can't be read-only; use disabled or a read-only Input. */
+  readOnly?: never;
+  /** Single choice only. */
+  multiple?: never;
+  /** The trailing slot belongs to the chevron. */
+  end?: never;
+};
+/**
+ * Single-choice select: a real `<select>` (native keyboard, typeahead, forms, validation and
+ * autofill), customized through `appearance: base-select` where supported. Same frame as Input.
+ */
+export declare function Select({ options, placeholder, helperText, error, size, start, mono, className, selectClassName, label, floating, id, required, disabled, value, defaultValue, onChange, ref, 'aria-describedby': describedByProp, 'aria-invalid': ariaInvalid, ...props }: SelectProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/sidebar/sidebar.d.ts
+/**
+ * Drawer open state shared by Sidebar and SidebarTrigger, which usually sit in different parts of
+ * the app shell. One per sidebar; no shortcuts, no persistence.
+ */
+export declare function SidebarProvider({ children }: {
+  children: ReactNode;
+}): import("react").JSX.Element;
+type SidebarLabel = {
+  'aria-label': string;
+  'aria-labelledby'?: never;
+} | {
+  'aria-labelledby': string;
+  'aria-label'?: never;
+};
+type SidebarProps = Omit<ComponentProps<'nav'>, 'aria-label' | 'aria-labelledby'> & SidebarLabel;
+/**
+ * App navigation. From 960px up it is docked at the start of the layout: 240px, full height, only
+ * the body scrolls. Below 960px it is hidden and SidebarTrigger opens the same content in a drawer.
+ * Needs a SidebarProvider around both.
+ */
+export declare function Sidebar({ className, children, ...props }: SidebarProps): import("react").JSX.Element;
+type SidebarTriggerProps = Omit<ComponentProps<'button'>, 'children' | 'type' | 'aria-label' | 'aria-expanded' | 'aria-controls'> & {
+  'aria-label'?: string;
+  size?: 'sm' | 'md' | 'lg';
+};
+/** Menu button that opens the drawer; only shown below 960px. Focus returns here on close. */
+export declare function SidebarTrigger({ 'aria-label': ariaLabel, className, onClick, ...props }: SidebarTriggerProps): import("react").JSX.Element;
+/** Brand row, pinned above the body. In the drawer it also holds the close button. */
+export declare function SidebarHeader({ className, children, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** The groups, between header and footer; the only part that scrolls. */
+export declare function SidebarBody({ className, ref, onPointerMove, onPointerLeave, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+/** Pinned below the body. */
+export declare function SidebarFooter({ className, ...props }: ComponentProps<'div'>): import("react").JSX.Element;
+type SidebarGroupProps = ComponentProps<'div'> & {
+  /** Short sentence-case label above the items; also names the list for screen readers. */
+  label?: ReactNode;
+};
+export declare function SidebarGroup({ label, className, children, ...props }: SidebarGroupProps): import("react").JSX.Element;
+type SidebarItemProps = ComponentProps<'a'> & {
+  /**
+   * Render the only child (usually a router Link) as the item, merging these props into it. The
+   * link sets href and aria-current="page"; the item is styled from them.
+   */
+  asChild?: boolean;
+};
+/**
+ * A sidebar link. Plain `<a>` by default; with `asChild`, your router's Link. Mark the current one
+ * aria-current="page". Inside the drawer, a click the link handles in place (preventDefault, as
+ * router links do) closes the drawer; a modified click opens a new tab and leaves it open.
+ */
+export declare function SidebarItem({ asChild, className, children, ...props }: SidebarItemProps): import("react").JSX.Element;
+/** Decorative 16px leading icon for a SidebarItem (hidden from assistive tech); takes the text color. */
+export declare function SidebarIcon({ className, ...props }: ComponentProps<'span'>): import("react").JSX.Element;
+/** Count at the end of a SidebarItem, as a small neutral Badge; part of the name ("Projects 8"). */
+export declare function SidebarBadge({ className, ...props }: BadgeProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/switch/switch.d.ts
+type SwitchSize = 'sm' | 'md';
+type NativeSwitchProps = Omit<ComponentProps<'input'>, 'type' | 'size' | 'children' | 'role' | 'aria-checked' | 'aria-label'>;
+type SwitchProps = NativeSwitchProps & ChoiceLabelProps & {
+  /** One muted line under the label (what is true while it's on), linked with aria-describedby. */
+  description?: ReactNode;
+  /** Truthy sets aria-invalid; text is shown under the label and linked with aria-describedby. */
+  error?: ReactNode;
+  /** sm 28x14 for dense rows and tables, md 36x20 for settings. */
+  size?: SwitchSize;
+  /**
+   * A spinner in the thumb while the change is being saved: aria-busy, and clicks/Space are
+   * swallowed without disabling, so focus stays put.
+   */
+  loading?: boolean;
+  /** `start`: label first and the switch pushed to the far end, as in a settings row. */
+  labelPosition?: 'end' | 'start';
+  /** Classes for the `<input>` (the track); `className` goes to the row. */
+  inputClassName?: string;
+};
+export declare function Switch({ label, description, error, size, loading, labelPosition, className, inputClassName, disabled, onChange, 'aria-describedby': describedBy, 'aria-invalid': ariaInvalid, ...props }: SwitchProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/tabs/shared.d.ts
+type TabsVariant = 'line' | 'segmented';
+type TabsSize = 'sm' | 'md';
+type TabContentProps = {
+  /** Decorative leading icon (hidden from assistive tech). */
+  icon?: ReactNode;
+  /** Trailing slot, usually a Badge; part of the accessible name (e.g. "Resources 12"). */
+  badge?: ReactNode;
+  children?: ReactNode;
+};
+//#endregion
+//#region src/components/tabs/tab-nav.d.ts
+type TabNavLabel = {
+  'aria-label': string;
+  'aria-labelledby'?: never;
+} | {
+  'aria-labelledby': string;
+  'aria-label'?: never;
+};
+type TabNavProps = Omit<ComponentProps<'nav'>, 'aria-label' | 'aria-labelledby'> & TabNavLabel & {
+  variant?: TabsVariant;
+  size?: TabsSize;
+  /** Classes for the inner `<ul>` (the scrolling bar); `className` goes to the `<nav>`. */
+  listClassName?: string;
+};
+/**
+ * Tabs that change the URL: a `<nav>` of links, the current one marked (by the router, usually)
+ * with aria-current="page". Same look as Tabs, but link semantics: Tab moves between links, Enter
+ * follows one, and each can be opened in a new tab. For in-page panels, use Tabs.
+ */
+export declare function TabNav({ variant, size, className, listClassName, children, ...props }: TabNavProps): import("react").JSX.Element;
+type TabNavLinkProps = ComponentProps<'a'> & TabContentProps & {
+  /**
+   * Render the only child (usually a router Link) as the tab, merging these props into it. The
+   * link sets href, aria-current="page" and aria-disabled; the tab is styled from them.
+   */
+  asChild?: boolean;
+};
+/**
+ * A link styled as a tab. Plain `<a>` by default; with `asChild`, your router's Link (for an index
+ * route, make it current only on an exact match, or it stays current on every child route).
+ */
+export declare function TabNavLink({ asChild, icon, badge, className, onFocus, children, ...props }: TabNavLinkProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/tabs/tabs.d.ts
+type TabsActivationMode = 'automatic' | 'manual';
+type TabsLabel = {
+  'aria-label': string;
+  'aria-labelledby'?: never;
+} | {
+  'aria-labelledby': string;
+  'aria-label'?: never;
+};
+type TabsState = {
+  value: string;
+  defaultValue?: never;
+  onValueChange?: (value: string) => void;
+} | {
+  value?: never;
+  defaultValue: string;
+  onValueChange?: (value: string) => void;
+};
+type TabsProps = Omit<ComponentProps<'div'>, 'defaultValue' | 'onChange' | 'aria-label' | 'aria-labelledby'> & TabsLabel & TabsState & {
+  /**
+   * `automatic` (default): arrow keys select as they move, for panels that show instantly.
+   * `manual`: arrows only move focus, Enter/Space selects; use it when a panel loads data.
+   */
+  activationMode?: TabsActivationMode;
+  variant?: TabsVariant;
+  size?: TabsSize;
+};
+/**
+ * In-page tabs (WAI-ARIA APG tabs pattern): a tablist that switches panels without changing the
+ * URL. For tabs that navigate between routes, use TabNav.
+ */
+export declare function Tabs({ value, defaultValue, onValueChange, activationMode, variant, size, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, children, ...props }: TabsProps): import("react").JSX.Element;
+type TabListProps = Omit<ComponentProps<'div'>, 'role'>;
+export declare function TabList({ className, ref, onKeyDown, onPointerMove, onPointerLeave, children, ...props }: TabListProps): import("react").JSX.Element;
+type TabProps = Omit<ComponentProps<'button'>, 'value' | 'role' | 'type' | 'children'> & TabContentProps & {
+  value: string;
+};
+export declare function Tab({ value, icon, badge, disabled, className, ref, onClick, onFocus, children, ...props }: TabProps): import("react").JSX.Element;
+type TabPanelProps = Omit<ComponentProps<'div'>, 'role' | 'hidden'> & {
+  value: string;
+  /** Keep the panel (and its state) mounted while hidden; by default only the selected panel renders. */
+  keepMounted?: boolean;
+};
+export declare function TabPanel({ value, keepMounted, className, ...props }: TabPanelProps): import("react").JSX.Element | null;
+//#endregion
+//#region src/components/theme-switcher/use-theme.d.ts
+type Theme = 'system' | 'light' | 'dark';
+type UseThemeOptions = {
+  /** localStorage key the choice is saved under. */
+  storageKey?: string;
+};
+/** Persisted color theme; `system` clears data-theme so prefers-color-scheme decides. */
+export declare function useTheme({ storageKey }?: UseThemeOptions): {
+  theme: Theme;
+  setTheme: import("react").Dispatch<import("react").SetStateAction<Theme>>;
+};
+//#endregion
+//#region src/components/theme-switcher/theme-switcher.d.ts
+type ThemeSwitcherProps = Omit<ComponentProps<'button'>, 'onChange' | 'value' | 'defaultValue' | 'children'> & {
+  value: Theme;
+  onChange: (value: Theme) => void;
+};
+/** Toggle the visible theme in one click, including when the initial choice follows the system. */
+export declare function ThemeSwitcher({ value, onChange, onClick, className, 'aria-label': ariaLabel, ...props }: ThemeSwitcherProps): import("react").JSX.Element;
+//#endregion
+//#region src/components/toast/store.d.ts
+type ToastType = 'neutral' | 'success' | 'info' | 'warning' | 'danger' | 'loading';
+/** A button rendered with the toast's Button styling. Clicking it dismisses the toast unless `onClick` calls `event.preventDefault()`. */
+type ToastActionButton = {
+  label: string;
+  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
+};
+type ToastOptions = {
+  /** Reusing the id of a toast still on screen updates that toast in place instead of adding one. */
+  id?: string;
+  title: ReactNode;
+  description?: ReactNode;
+  /** Default `neutral`. */
+  type?: ToastType;
+  /**
+   * `{ label, onClick }` renders a small secondary Button. Any other node (e.g. a router `<Link>`
+   * styled as a button) is rendered as-is and never dismisses the toast by itself.
+   */
+  action?: ToastActionButton | ReactNode;
+  /**
+   * Milliseconds on screen; `Infinity` keeps it until dismissed. Default: 5000, 10000 with an
+   * action, never for `danger` and `loading`.
+   */
+  duration?: number;
+  /** False hides the close button and turns off swipe and Esc. Default true. */
+  dismissible?: boolean;
+  /** The `<Toaster id>` that shows it. Left out, it goes to the Toaster without an id. */
+  toasterId?: string;
+};
+type ToastPatch = Partial<Omit<ToastOptions, 'id' | 'toasterId'>>;
+declare function update(id: string, patch: ToastPatch): void;
+type ShortcutOptions = Omit<ToastOptions, 'title' | 'type'>;
+type PromiseStep = ReactNode | Omit<ToastOptions, 'id' | 'type'>;
+type ToastPromiseOptions<T> = {
+  id?: string;
+  toasterId?: string;
+  loading: PromiseStep;
+  success: PromiseStep | ((data: T) => PromiseStep);
+  error: PromiseStep | ((error: unknown) => PromiseStep);
+};
+/**
+ * Imperative toasts, callable from anywhere (event handlers, mutations, loaders) once a
+ * `<Toaster />` is mounted. Every call returns the toast's id. `toasterId` routes a toast to a
+ * `<Toaster id>` instead.
+ */
+export declare const toast: ((options: ToastOptions) => string) & {
+  success: (title: ReactNode, options?: ShortcutOptions) => string;
+  info: (title: ReactNode, options?: ShortcutOptions) => string;
+  warning: (title: ReactNode, options?: ShortcutOptions) => string;
+  /** Renders as the `danger` type. Stays until dismissed. */
+  error: (title: ReactNode, options?: ShortcutOptions) => string;
+  /** Spinner; stays until updated or dismissed. */
+  loading: (title: ReactNode, options?: ShortcutOptions) => string;
+  /** Merges into a toast still on screen and restarts its timer. No-op for unknown ids. */
+  update: typeof update;
+  /** Plays the exit of one toast, or of all of them without an id. */
+  dismiss: (id?: string) => void;
+  /**
+   * Loading toast that turns into success or danger in place when the promise settles. Steps
+   * are a title or full options; success/error may be functions of the result / the error.
+   */
+  promise<T>(promise: Promise<T> | (() => Promise<T>), steps: ToastPromiseOptions<T>): string;
+};
+//#endregion
+//#region src/components/toast/toaster.d.ts
+type ToastPosition = 'bottom-right' | 'bottom-left' | 'bottom-center' | 'top-right' | 'top-left' | 'top-center';
+type ToasterProps = {
+  /**
+   * Shows only toasts created with this `toasterId`. Without one it shows toasts that have none:
+   * that's the app's single main Toaster. Ids let a separate area (or each Storybook docs story)
+   * keep its own stack and position.
+   */
+  id?: string;
+  /** Corner (or edge center) the stack grows from. Default `bottom-right`. */
+  position?: ToastPosition;
+  /** Cards shown in the collapsed stack; older ones wait hidden. Default 3, at most 2 on phones. */
+  visibleToasts?: number;
+};
+/**
+ * The single place toasts render: mount one near the app root (inside the router, so a `<Link>`
+ * action has its context). Toasts themselves come from `toast()` and friends.
+ */
+export declare function Toaster(props: ToasterProps): import("react").ReactPortal | null;
+//#endregion
+//#region src/lib/cn.d.ts
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+export type { BadgeProps, BadgeTone, ButtonProps, CardHeaderProps, CardProps, CheckboxGroupProps, CheckboxProps, CopyInputProps, DialogCloseReason, DialogHeaderProps, DialogProps, DialogSize, DrawerCloseProps, DrawerCloseReason, DrawerHeaderProps, DrawerProps, DrawerSide, DrawerSize, InputProps, MeterProps, MeterSegment, MeterTone, PasswordInputProps, SearchInputProps, SelectGroup, SelectOption, SelectProps, SidebarGroupProps, SidebarItemProps, SidebarProps, SidebarTriggerProps, SwitchProps, SwitchSize, TabListProps, TabNavLinkProps, TabNavProps, TabPanelProps, TabProps, TabsActivationMode, TabsProps, TabsSize, TabsVariant, Theme, ThemeSwitcherProps, ToastActionButton, ToastOptions, ToastPatch, ToastPosition, ToastPromiseOptions, ToastType, ToasterProps, TooltipProps, UseThemeOptions };