@nwartz/design-system 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,698 @@
+import { TextStyle, ViewProps, TextProps as TextProps$1, StyleProp, PressableProps, ViewStyle, TextInputProps } from 'react-native';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as phosphor_react_native from 'phosphor-react-native';
+
+/**
+ * Nwartz DS — Dark Mode color tokens.
+ *
+ * Source: Figma "Nwartz DS | Foundations Dark Mode"
+ * These are the base neutrals; brand-specific colors (primary, accent)
+ * are supplied per-org via the theme provider.
+ */
+declare const darkColors: {
+    /** App background — the deepest layer. */
+    readonly backgroundScreen: "#131313";
+    /** Raised surfaces (cards, sheets, modals). */
+    readonly shapePrimary: "#1A1A1A";
+    /** Inset surfaces, secondary containers, chips. */
+    readonly shapeSecondary: "#2D2D2D";
+    /** Borders, dividers, disabled outlines. */
+    readonly shapeTertiary: "#404040";
+    /** Primary text on dark backgrounds. */
+    readonly textPrimary: "#FFFFFF";
+    /** Secondary / muted text. */
+    readonly textSecondary: "#E1E1E1";
+    /** Tertiary / placeholder text. */
+    readonly textTertiary: "#A0A0A0";
+    /** Brand primary — neon lime accent. */
+    readonly primaryPure: "#CEFE00";
+    /** Brand primary — darker shade for hover/pressed. */
+    readonly primaryMid: "#87AD00";
+    /** Destructive actions. */
+    readonly dangerMid: "#BB4355";
+};
+declare const lightColors: {
+    readonly backgroundScreen: "#F6F5F4";
+    readonly shapePrimary: "#FAF9F7";
+    readonly shapeSecondary: "#E9E8E7";
+    readonly shapeTertiary: "#D9D8D7";
+    readonly textPrimary: "#141414";
+    readonly textSecondary: "#737271";
+    readonly textTertiary: "#8E8D8B";
+    readonly primaryPure: "#CEFE00";
+    readonly primaryMid: "#87AD00";
+    readonly dangerMid: "#BB4355";
+};
+type ColorToken = keyof typeof darkColors;
+/** Semantic color set resolved by the active color mode. */
+type ResolvedColors = typeof darkColors;
+/** Brand colors supplied per-org. */
+interface BrandColors {
+    primaryPure: string;
+    primaryMid: string;
+    onPrimary?: string;
+}
+
+/** Base typography tokens as a plain object (safe to spread into StyleSheet). */
+declare const typography: Record<string, TextStyle>;
+type TypographyToken = keyof typeof typography;
+
+/**
+ * Nwartz DS — Elevation (shadow) tokens.
+ *
+ * Each level maps to a named token used across the system. On Android the
+ * numeric `elevation` property is used; on iOS/web the shadow properties
+ * are applied.
+ */
+interface ElevationEntry {
+    elevation?: number;
+    shadowColor?: string;
+    shadowOffset?: {
+        width: number;
+        height: number;
+    };
+    shadowOpacity?: number;
+    shadowRadius?: number;
+}
+declare const elevation: Record<string, ElevationEntry>;
+type ElevationToken = keyof typeof elevation;
+
+/**
+ * Nwartz DS — Spacing scale.
+ *
+ * Based on a 4px base unit. Use these values for padding, margin, and gaps
+ * to maintain consistent rhythm across the UI.
+ */
+declare const spacing: {
+    /** 0px */
+    readonly none: 0;
+    /** 2px — hairline gaps. */
+    readonly xxs: 2;
+    /** 4px — tight inset (icon-to-label). */
+    readonly xs: 4;
+    /** 8px — compact gaps, small padding. */
+    readonly sm: 8;
+    /** 12px — default inner padding for small controls. */
+    readonly md: 12;
+    /** 16px — standard card padding, list row gaps. */
+    readonly lg: 16;
+    /** 20px — generous spacing. */
+    readonly xl: 20;
+    /** 24px — section gaps, card outer padding. */
+    readonly '2xl': 24;
+    /** 32px — large section spacing. */
+    readonly '3xl': 32;
+    /** 40px — page-level horizontal padding. */
+    readonly '4xl': 40;
+    /** 48px — hero spacing. */
+    readonly '5xl': 48;
+    /** 64px — page-level vertical spacing. */
+    readonly '6xl': 64;
+    /** 80px — maximum spacing. */
+    readonly '7xl': 80;
+};
+type SpacingToken = keyof typeof spacing;
+
+/**
+ * Nwartz DS — Border radius tokens.
+ */
+declare const radius: {
+    /** 4px — tiny elements: badges, tags. */
+    readonly xs: 4;
+    /** 8px — small controls: inputs, chips. */
+    readonly sm: 8;
+    /** 12px — medium elements: tiles, list rows. */
+    readonly md: 12;
+    /** 16px — cards, panels. */
+    readonly lg: 16;
+    /** 24px — large cards, modals. */
+    readonly xl: 24;
+    /** Full circle / pill shape. */
+    readonly full: 9999;
+};
+type RadiusToken = keyof typeof radius;
+
+/**
+ * Token mapping: bridges the mobile app's legacy color token names to the
+ * design system's semantic token keys. Used when migrating mobile components
+ * from the old `useTheme()` to `@nwartz/design-system`'s `useTheme()`.
+ */
+
+/** Mobile-app color key → design-system color key. */
+declare const colorMap: Record<string, keyof ResolvedColors>;
+/** Mobile-app spacing value → design-system spacing token. */
+declare const spacingMap: Record<number, SpacingToken>;
+/** Mobile-app radius value → design-system radius token. */
+declare const radiusMap: Record<number, RadiusToken>;
+
+type ThemeMode = 'light' | 'dark';
+interface ThemeContextValue {
+    mode: ThemeMode;
+    colors: ResolvedColors;
+    /** Convenience: is the current mode dark? */
+    isDark: boolean;
+}
+interface ThemeProviderProps {
+    children: ReactNode;
+    /** Override the system color scheme. */
+    mode?: ThemeMode;
+    /** Override the full color set (e.g. from an org manifest). */
+    colors?: Partial<ResolvedColors>;
+}
+/**
+ * Wraps the app and provides the resolved color palette to all
+ * design-system components via `useTheme()`.
+ */
+declare function ThemeProvider({ children, mode: modeOverride, colors: colorOverrides }: ThemeProviderProps): react.JSX.Element;
+/**
+ * Access the current theme. Must be used inside a `<ThemeProvider>`.
+ *
+ * ```tsx
+ * const { colors, mode } = useTheme();
+ * ```
+ */
+declare function useTheme(): ThemeContextValue;
+
+interface BoxProps extends ViewProps {
+    /** Background color token key from the resolved theme. */
+    bg?: 'backgroundScreen' | 'shapePrimary' | 'shapeSecondary';
+    /** Apply a named spacing token as padding. */
+    p?: SpacingToken;
+    /** Apply a named spacing token as horizontal padding. */
+    px?: SpacingToken;
+    /** Apply a named spacing token as vertical padding. */
+    py?: SpacingToken;
+    /** Apply a named spacing token as margin. */
+    m?: SpacingToken;
+    /** Apply a named spacing token as horizontal margin. */
+    mx?: SpacingToken;
+    /** Apply a named spacing token as vertical margin. */
+    my?: SpacingToken;
+    /** Apply a named radius token as border radius. */
+    rounded?: RadiusToken;
+    /** Apply a named elevation token as shadow. */
+    elevation?: ElevationToken;
+    /** Flex direction shortcut. */
+    direction?: 'row' | 'column';
+    /** Align items shortcut. */
+    align?: 'flex-start' | 'center' | 'flex-end' | 'stretch';
+    /** Justify content shortcut. */
+    justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around';
+    /** Gap between children. Raw pixel value. */
+    gap?: number;
+    /** Full width. */
+    fullWidth?: boolean;
+    /** Full height. */
+    fullHeight?: boolean;
+}
+/**
+ * Primitive layout component that maps design tokens to React Native styles.
+ *
+ * ```tsx
+ * <Box bg="shapePrimary" p="lg" rounded="xl" elevation="md">
+ *   <Text>Hello</Text>
+ * </Box>
+ * ```
+ */
+declare function Box({ bg, p, px, py, m, mx, my, rounded, elevation: elev, direction, align, justify, gap, fullWidth, fullHeight, style, children, ...rest }: BoxProps): react.JSX.Element;
+
+interface TextProps extends TextProps$1 {
+    /** Preset typography token. Defaults to `body`. */
+    variant?: TypographyToken;
+    /** Override the text color from the resolved theme. */
+    color?: 'textPrimary' | 'textSecondary';
+    /** Additional style overrides. */
+    textStyle?: StyleProp<TextStyle>;
+}
+/**
+ * Theme-aware text component.
+ *
+ * ```tsx
+ * <Text variant="heading" color="textPrimary">Title</Text>
+ * ```
+ */
+declare function Text({ variant, color, textStyle, style, children, ...rest }: TextProps): react.JSX.Element;
+
+interface CardProps extends ViewProps {
+    /** Elevation level. Defaults to `sm`. */
+    level?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** Remove default padding. */
+    noPadding?: boolean;
+    /** Show a border around the card. */
+    bordered?: boolean;
+    /** Override the default border radius. */
+    radius?: RadiusToken;
+}
+/**
+ * Surface card component with design-system shadow and radius.
+ *
+ * ```tsx
+ * <Card level="md">
+ *   <Text>Content</Text>
+ * </Card>
+ * ```
+ */
+declare function Card({ level, noPadding, bordered, radius: radiusToken, style, children, ...rest }: CardProps): react.JSX.Element;
+
+type ButtonVariant = 'primary' | 'secondary' | 'outline' | 'danger' | 'ghost';
+interface ButtonProps extends Omit<PressableProps, 'style'> {
+    label: string;
+    variant?: ButtonVariant;
+    loading?: boolean;
+    size?: 'md' | 'sm';
+    style?: StyleProp<ViewStyle>;
+}
+/**
+ * Design-system button with variants and loading state.
+ *
+ * ```tsx
+ * <Button label="Save" variant="primary" />
+ * <Button label="Cancel" variant="ghost" />
+ * ```
+ */
+declare function Button({ label, variant, loading, size, style, disabled, ...rest }: ButtonProps): react.JSX.Element;
+
+/**
+ * Icon name registry. Maps a string name to a Phosphor icon component.
+ * Add new icons here as they're needed across the design system.
+ */
+declare const iconMap: {
+    readonly "caret-down": phosphor_react_native.Icon;
+    readonly "caret-up": phosphor_react_native.Icon;
+    readonly "caret-right": phosphor_react_native.Icon;
+    readonly check: phosphor_react_native.Icon;
+    readonly "x-circle": phosphor_react_native.Icon;
+    readonly x: phosphor_react_native.Icon;
+    readonly "warning-circle": phosphor_react_native.Icon;
+    readonly "warning-octagon": phosphor_react_native.Icon;
+    readonly house: phosphor_react_native.Icon;
+    readonly bell: phosphor_react_native.Icon;
+    readonly broadcast: phosphor_react_native.Icon;
+    readonly "chat-circle": phosphor_react_native.Icon;
+    readonly "check-circle": phosphor_react_native.Icon;
+    readonly truck: phosphor_react_native.Icon;
+    readonly "credit-card": phosphor_react_native.Icon;
+    readonly crown: phosphor_react_native.Icon;
+    readonly "crosshair-simple": phosphor_react_native.Icon;
+    readonly gauge: phosphor_react_native.Icon;
+    readonly lightning: phosphor_react_native.Icon;
+    readonly "thumbs-up": phosphor_react_native.Icon;
+    readonly "map-trifold": phosphor_react_native.Icon;
+    readonly "map-pin": phosphor_react_native.Icon;
+    readonly medal: phosphor_react_native.Icon;
+    readonly microphone: phosphor_react_native.Icon;
+    readonly "speaker-simple-x": phosphor_react_native.Icon;
+    readonly play: phosphor_react_native.Icon;
+    readonly plus: phosphor_react_native.Icon;
+    readonly "radio-button": phosphor_react_native.Icon;
+    readonly radio: phosphor_react_native.Icon;
+    readonly "chart-bar": phosphor_react_native.Icon;
+    readonly receipt: phosphor_react_native.Icon;
+    readonly path: phosphor_react_native.Icon;
+    readonly "magnifying-glass": phosphor_react_native.Icon;
+    readonly "gear-six": phosphor_react_native.Icon;
+    readonly "share-network": phosphor_react_native.Icon;
+    readonly star: phosphor_react_native.Icon;
+    readonly "sign-out": phosphor_react_native.Icon;
+    readonly "steering-wheel": phosphor_react_native.Icon;
+    readonly timer: phosphor_react_native.Icon;
+    readonly pencil: phosphor_react_native.Icon;
+    readonly user: phosphor_react_native.Icon;
+    readonly "user-minus": phosphor_react_native.Icon;
+    readonly users: phosphor_react_native.Icon;
+    readonly globe: phosphor_react_native.Icon;
+    readonly wallet: phosphor_react_native.Icon;
+    readonly lock: phosphor_react_native.Icon;
+};
+type IconName = keyof typeof iconMap;
+interface IconProps {
+    /** Icon name from the registry. */
+    name: IconName;
+    /** Icon size in pixels. Defaults to 16. */
+    size?: number;
+    /** Icon color. */
+    color?: string;
+    /** Icon weight / stroke thickness. */
+    weight?: "thin" | "light" | "regular" | "bold" | "fill" | "duotone";
+}
+/**
+ * Design-system icon component backed by Phosphor.
+ *
+ * ```tsx
+ * <Icon name="caret-down" size={16} color="#737271" />
+ * ```
+ */
+declare function Icon({ name, size, color, weight }: IconProps): react.JSX.Element | null;
+
+interface DropdownItem {
+    key: string;
+    label: string;
+    disabled?: boolean;
+}
+interface DropdownSelectProps extends ViewProps {
+    /** List of items to display. */
+    items: DropdownItem[];
+    /** Currently selected item key. */
+    value?: string | null;
+    /** Called when an item is selected. */
+    onSelect?: (item: DropdownItem) => void;
+    /** Show the dropdown list. */
+    open?: boolean;
+    /** Max visible items before scroll. */
+    maxVisible?: number;
+}
+/**
+ * Dropdown select list with check indicator and hover/focus states.
+ *
+ * ```tsx
+ * <DropdownSelect
+ *   items={[{ key: '1', label: 'Option 1' }]}
+ *   value="1"
+ *   onSelect={handleSelect}
+ * />
+ * ```
+ */
+declare function DropdownSelect({ items, value, onSelect, open, maxVisible, style, ...rest }: DropdownSelectProps): react.JSX.Element | null;
+
+type AutocompleteSize = 'sm' | 'md';
+type AutocompleteState = 'default' | 'hover' | 'focus' | 'typing' | 'selected' | 'filled' | 'error' | 'disabled';
+interface AutocompleteProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
+    /** Label displayed above the input. */
+    label: string;
+    /** Current input value. */
+    value?: string;
+    /** Called when text changes. */
+    onChangeText?: (text: string) => void;
+    /** Input size. */
+    size?: AutocompleteSize;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    /** Error message displayed below the input. */
+    errorMessage?: string;
+    /** Dropdown items. */
+    items?: DropdownItem[];
+    /** Selected item key. */
+    selectedItem?: string | null;
+    /** Called when a dropdown item is selected. */
+    onSelectItem?: (item: DropdownItem) => void;
+    /** Whether the dropdown is open. */
+    open?: boolean;
+    /** Called to toggle the dropdown. */
+    onToggle?: () => void;
+}
+/**
+ * Autocomplete input with dropdown, matching the Nwartz DS spec.
+ *
+ * Supports sizes (sm/md), states (default/hover/focus/typing/selected/filled/error/disabled),
+ * label, error message, and a dropdown list.
+ *
+ * ```tsx
+ * <Autocomplete
+ *   label="Country"
+ *   placeholder="Start typing..."
+ *   items={countries}
+ *   onSelectItem={handleSelect}
+ * />
+ * ```
+ */
+declare function Autocomplete({ label, value, onChangeText, size, disabled, errorMessage, items, selectedItem, onSelectItem, open, onToggle, placeholder, ...rest }: AutocompleteProps): react.JSX.Element;
+
+type SegmentedTabItem = {
+    id: string;
+    label: string;
+};
+interface SegmentedTabsProps {
+    tabs: SegmentedTabItem[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+}
+/**
+ * Horizontal segmented tab bar for switching between views.
+ *
+ * ```tsx
+ * <SegmentedTabs
+ *   tabs={[{ id: 'feed', label: 'Feed' }, { id: 'radio', label: 'Radio PX' }]}
+ *   activeTabId={activeTab}
+ *   onTabChange={setActiveTab}
+ * />
+ * ```
+ */
+declare function SegmentedTabs({ tabs, activeTabId, onTabChange }: SegmentedTabsProps): react.JSX.Element;
+
+type BadgeSize = 'sm' | 'md' | 'lg';
+type BadgeColor = 'primary' | 'secondary' | 'info' | 'warning' | 'success' | 'error' | 'gray';
+type BadgeMode = 'solid' | 'outline';
+interface BadgeProps extends ViewProps {
+    label: string;
+    size?: BadgeSize;
+    color?: BadgeColor;
+    mode?: BadgeMode;
+    icon?: IconName;
+    trailingIcon?: IconName;
+}
+/**
+ * Inline badge for status indicators, counts, and labels.
+ *
+ * ```tsx
+ * <Badge label="Active" color="success" />
+ * <Badge label="3" color="error" size="sm" />
+ * <Badge label="Info" color="info" mode="outline" />
+ * ```
+ */
+declare function Badge({ label, size, color, mode, icon, trailingIcon, style, ...rest }: BadgeProps): react.JSX.Element;
+
+type InputFieldSize = 'sm' | 'md';
+interface InputFieldProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
+    label?: string;
+    value?: string;
+    onChangeText?: (text: string) => void;
+    size?: InputFieldSize;
+    disabled?: boolean;
+    errorMessage?: string;
+    leadingIcon?: IconName;
+    trailingIcon?: IconName;
+    onTrailingIconPress?: () => void;
+    secureTextEntry?: boolean;
+}
+/**
+ * Text input field with label, helper text, icons, and error state.
+ *
+ * ```tsx
+ * <InputField label="Email" placeholder="you@example.com" />
+ * <InputField label="Password" secureTextEntry errorMessage="Required" />
+ * ```
+ */
+declare function InputField({ label, value, onChangeText, size, disabled, errorMessage, leadingIcon, trailingIcon, onTrailingIconPress, placeholder, secureTextEntry, ...rest }: InputFieldProps): react.JSX.Element;
+
+type TagSize = 'sm' | 'md' | 'lg';
+interface TagProps extends ViewProps {
+    label: string;
+    size?: TagSize;
+    icon?: IconName;
+    trailingIcon?: IconName;
+    count?: number;
+    onPress?: () => void;
+    onTrailingPress?: () => void;
+}
+/**
+ * Inline tag for filters, categories, and removable labels.
+ *
+ * ```tsx
+ * <Tag label="Sport" icon="star" />
+ * <Tag label="Filter" trailingIcon="x" onTrailingPress={clear} count={3} />
+ * ```
+ */
+declare function Tag({ label, size, icon, trailingIcon, count, onPress, onTrailingPress, style, ...rest }: TagProps): react.JSX.Element;
+
+type ToggleSize = 'sm' | 'md';
+interface ToggleProps {
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    size?: ToggleSize;
+}
+/**
+ * Toggle switch for boolean on/off state.
+ *
+ * ```tsx
+ * <Toggle value={enabled} onValueChange={setEnabled} label="Notifications" />
+ * <Toggle value={v} onValueChange={setV} size="sm" />
+ * ```
+ */
+declare function Toggle({ value, onValueChange, label, disabled, size }: ToggleProps): react.JSX.Element;
+
+interface DatePickerProps {
+    label?: string;
+    startDate?: Date | null;
+    endDate?: Date | null;
+    onChange?: (start: Date | null, end: Date | null) => void;
+    disabled?: boolean;
+    errorMessage?: string;
+    placeholder?: string;
+    open?: boolean;
+    onToggle?: () => void;
+}
+/**
+ * Date range picker with calendar grid, month navigation, input fields, and action buttons.
+ *
+ * ```tsx
+ * <DatePicker startDate={start} endDate={end} onChange={setDates} />
+ * ```
+ */
+declare function DatePicker({ startDate, endDate, onChange, disabled, errorMessage, placeholder, open, onToggle, }: DatePickerProps): react.JSX.Element;
+
+type CheckboxType = 'checkbox' | 'radio';
+type CheckboxSize = 'sm' | 'md';
+interface CheckboxProps {
+    value: boolean;
+    onValueChange: (value: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    size?: CheckboxSize;
+    type?: CheckboxType;
+    indeterminate?: boolean;
+}
+/**
+ * Checkbox or radio button for selection with label.
+ *
+ * ```tsx
+ * <Checkbox value={selected} onValueChange={setSelected} label="I agree" />
+ * <Checkbox value={v} onValueChange={setV} type="radio" label="Option A" />
+ * <Checkbox value={partial} onValueChange={setPartial} indeterminate />
+ * ```
+ */
+declare function Checkbox({ value, onValueChange, label, disabled, size, type, indeterminate, }: CheckboxProps): react.JSX.Element;
+
+interface TablePaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    totalItems?: number;
+    pageSize?: number;
+}
+/**
+ * Pagination control for tables with page numbers and navigation buttons.
+ *
+ * ```tsx
+ * <TablePagination currentPage={2} totalPages={10} onPageChange={setPage} />
+ * ```
+ */
+declare function TablePagination({ currentPage, totalPages, onPageChange, }: TablePaginationProps): react.JSX.Element;
+
+interface LinkButtonProps extends Omit<PressableProps, 'style'> {
+    label: string;
+    icon?: IconName;
+    color?: 'primary' | 'secondary';
+}
+/**
+ * Text-styled button that looks like a hyperlink, with optional icon.
+ *
+ * ```tsx
+ * <LinkButton label="Forgot password?" />
+ * <LinkButton label="View all" icon="caret-right" />
+ * ```
+ */
+declare function LinkButton({ label, icon, color, disabled, ...rest }: LinkButtonProps): react.JSX.Element;
+
+type BottomNavBarItem = {
+    id: string;
+    icon: IconName;
+    badge?: number;
+};
+interface BottomNavBarProps {
+    items: BottomNavBarItem[];
+    activeItemId: string;
+    onItemPress: (itemId: string) => void;
+}
+/**
+ * Bottom navigation bar with lime circle active item indicator.
+ *
+ * ```tsx
+ * <BottomNavBar
+ *   items={[
+ *     { id: 'home', icon: 'house' },
+ *     { id: 'stats', icon: 'chart-bar' },
+ *     { id: 'profile', icon: 'user' },
+ *   ]}
+ *   activeItemId="home"
+ *   onItemPress={navigate}
+ * />
+ * ```
+ */
+declare function BottomNavBar({ items, activeItemId, onItemPress }: BottomNavBarProps): react.JSX.Element;
+
+interface ProgressBarProps {
+    value: number;
+    showLabel?: boolean;
+    animated?: boolean;
+}
+/**
+ * Progress bar with percentage label.
+ *
+ * ```tsx
+ * <ProgressBar value={0.7} showLabel />
+ * <ProgressBar value={0.3} />
+ * ```
+ */
+declare function ProgressBar({ value, showLabel, animated }: ProgressBarProps): react.JSX.Element;
+
+interface SearchBarProps extends Omit<TextInputProps, 'value' | 'onChangeText'> {
+    label?: string;
+    value?: string;
+    onChangeText?: (text: string) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    onClear?: () => void;
+}
+/**
+ * Search input with magnifying glass icon, label, and clear button.
+ *
+ * ```tsx
+ * <SearchBar label="Search" value={query} onChangeText={setQuery} />
+ * ```
+ */
+declare function SearchBar({ label, value, onChangeText, placeholder, disabled, onClear, ...rest }: SearchBarProps): react.JSX.Element;
+
+interface SliderProps {
+    value: number;
+    minimumValue?: number;
+    maximumValue?: number;
+    step?: number;
+    onValueChange: (value: number) => void;
+    disabled?: boolean;
+    showValueLabel?: boolean;
+}
+/**
+ * Horizontal slider with draggable thumb and value label.
+ *
+ * ```tsx
+ * <Slider value={50} onValueChange={setValue} showValueLabel />
+ * ```
+ */
+declare function Slider({ value, minimumValue, maximumValue, step, onValueChange, disabled, showValueLabel, }: SliderProps): react.JSX.Element;
+
+type TabMenuItem = {
+    id: string;
+    label: string;
+};
+interface TabMenuProps {
+    tabs: TabMenuItem[];
+    activeTabId: string;
+    onTabChange: (tabId: string) => void;
+}
+/**
+ * Tab menu with underline indicator.
+ *
+ * ```tsx
+ * <TabMenu
+ *   tabs={[{ id: 'overview', label: 'Overview' }, { id: 'details', label: 'Details' }]}
+ *   activeTabId="overview"
+ *   onTabChange={setTab}
+ * />
+ * ```
+ */
+declare function TabMenu({ tabs, activeTabId, onTabChange }: TabMenuProps): react.JSX.Element;
+
+export { Autocomplete, type AutocompleteProps, type AutocompleteSize, type AutocompleteState, Badge, type BadgeColor, type BadgeMode, type BadgeProps, type BadgeSize, BottomNavBar, type BottomNavBarItem, type BottomNavBarProps, Box, type BoxProps, type BrandColors, Button, type ButtonProps, type ButtonVariant, Card, type CardProps, Checkbox, type CheckboxProps, type CheckboxSize, type CheckboxType, type ColorToken, DatePicker, type DatePickerProps, type DropdownItem, DropdownSelect, type DropdownSelectProps, type ElevationToken, Icon, type IconName, type IconProps, InputField, type InputFieldProps, type InputFieldSize, LinkButton, type LinkButtonProps, ProgressBar, type ProgressBarProps, type RadiusToken, type ResolvedColors, SearchBar, type SearchBarProps, type SegmentedTabItem, SegmentedTabs, type SegmentedTabsProps, Slider, type SliderProps, type SpacingToken, TabMenu, type TabMenuItem, type TabMenuProps, TablePagination, type TablePaginationProps, Tag, type TagProps, type TagSize, Text, type TextProps, type ThemeContextValue, type ThemeMode, ThemeProvider, type ThemeProviderProps, Toggle, type ToggleProps, type ToggleSize, type TypographyToken, colorMap, darkColors, elevation, lightColors, radius, radiusMap, spacing, spacingMap, typography, useTheme };