@bug-on/md3-react 0.1.0

package/dist/ui/tabs/tabs.tokens.d.ts

@@ -0,0 +1,94 @@
+/**
+ * @file tabs.tokens.ts
+ * MD3 Expressive Tabs — Design tokens ported from:
+ *   - PrimaryNavigationTabTokens.kt (v0_162)
+ *   - SecondaryNavigationTabTokens.kt (v0_162)
+ *
+ * All dimensional values are in px (dp equivalent for web).
+ * @see docs/m3/tabs/PrimaryNavigationTabTokens.kt
+ * @see docs/m3/tabs/SecondaryNavigationTabTokens.kt
+ */
+/**
+ * Dimensional design tokens for the MD3 Tabs component.
+ *
+ * Maps directly from the `.kt` token files to CSS/JS values.
+ * Use as the single source of truth for sizing.
+ */
+export declare const TabsTokens: {
+    /** ContainerHeight = 48dp (text-only tab) */
+    readonly containerHeight: 48;
+    /** IconAndLabelTextContainerHeight = 64dp (tab with icon + label stacked) */
+    readonly containerHeightWithIcon: 64;
+    /** ActiveIndicatorHeight (Primary) = 3dp */
+    readonly primaryIndicatorHeight: 3;
+    /** ActiveIndicatorHeight (Secondary) = 2dp */
+    readonly secondaryIndicatorHeight: 2;
+    /**
+     * ActiveIndicatorShape = 3dp top-left and top-right (per MD3 token, not a full pill).
+     * Google reference: `var(--_active-indicator-shape)` resolves to `3px 3px 0 0` effectively.
+     */
+    readonly indicatorBorderRadius: "3px 3px 0 0";
+    /** IconSize = 24dp */
+    readonly iconSize: 24;
+    /**
+     * Edge start/end padding for scrollable mode = 52px.
+     * Per MD3 spec: tabs have padding on both leading and trailing edges.
+     */
+    readonly scrollableEdgePadding: 52;
+    /** Minimum tab width in scrollable mode = 90px. */
+    readonly scrollableMinTabWidth: 90;
+    /** DividerHeight = 1dp */
+    readonly dividerHeight: 1;
+    /**
+     * Focus ring border-radius = 8px.
+     * Google reference: `focus-ring.theme({ shape: 8px })` in _tab.scss.
+     */
+    readonly focusRingBorderRadius: 8;
+};
+/**
+ * CSS custom property references for Tabs colors.
+ * Maps to `--md-sys-color-*` tokens in the MD3 theme system.
+ *
+ * DO NOT hardcode hex values — use these references for automatic
+ * light/dark theme adaptation.
+ */
+export declare const TabsColors: {
+    /** Primary: ActiveLabelTextColor / ActiveIconColor = Primary */
+    readonly primaryActiveText: "var(--md-sys-color-primary)";
+    /** Primary: InactiveLabelTextColor / InactiveIconColor = OnSurfaceVariant */
+    readonly primaryInactiveText: "var(--md-sys-color-on-surface-variant)";
+    /** Primary: ActiveIndicatorColor = Primary */
+    readonly primaryIndicator: "var(--md-sys-color-primary)";
+    /** Secondary: ActiveLabelTextColor / ActiveIconColor = OnSurface */
+    readonly secondaryActiveText: "var(--md-sys-color-on-surface)";
+    /** Secondary: InactiveLabelTextColor / InactiveIconColor = OnSurfaceVariant */
+    readonly secondaryInactiveText: "var(--md-sys-color-on-surface-variant)";
+    /** Secondary: Indicator color = Primary (same as primary variant) */
+    readonly secondaryIndicator: "var(--md-sys-color-primary)";
+    /** Secondary: DividerColor = SurfaceVariant */
+    readonly divider: "var(--md-sys-color-surface-variant)";
+    /** ContainerColor = Surface */
+    readonly container: "var(--md-sys-color-surface)";
+    /** Focus ring indicator = Secondary */
+    readonly focusIndicator: "var(--md-sys-color-secondary)";
+    /** Hover state layer (primary active) */
+    readonly primaryActiveHover: "var(--md-sys-color-primary)";
+    /** Hover state layer (inactive, both variants) */
+    readonly inactiveHover: "var(--md-sys-color-on-surface)";
+};
+/** Spring transition for the sliding indicator (FastSpatial equivalent). */
+export declare const TABS_INDICATOR_SPRING: {
+    readonly type: "spring";
+    readonly stiffness: 500;
+    readonly damping: 40;
+};
+/** Color transition for label/icon color animate (active ↔ inactive). */
+export declare const TABS_COLOR_TRANSITION: {
+    readonly duration: 0.2;
+    readonly ease: "easeInOut";
+};
+/** Content fade transition when switching tabs. */
+export declare const TABS_CONTENT_TRANSITION: {
+    readonly duration: 0.15;
+    readonly ease: "easeInOut";
+};

package/dist/ui/tabs/tabs.types.d.ts

@@ -0,0 +1,172 @@
+/**
+ * @file tabs.types.ts
+ * MD3 Expressive Tabs — TypeScript prop definitions.
+ * Spec: https://m3.material.io/components/tabs/overview
+ */
+import type * as React from "react";
+/** Visual variant: primary (content-width indicator) or secondary (full-width indicator + divider). */
+export type TabsVariant = "primary" | "secondary";
+/**
+ * Internal context shared across all compound components.
+ * @internal
+ */
+export interface TabsContextValue {
+    /** Currently selected tab value. */
+    value: string;
+    /** Callback to change the selected tab. */
+    onValueChange: (value: string) => void;
+    /** Currently keyboard-focused tab value (for roving tabindex). */
+    focusedValue: string;
+    /** Sets the focused tab value (keyboard nav only — does NOT select). */
+    setFocusedValue: (value: string) => void;
+    /** Ordered list of all registered tab values (for ArrowKey nav). */
+    tabValues: string[];
+    /** Register a tab value when a <Tab> mounts. */
+    registerTab: (value: string) => void;
+    /** Unregister a tab value when a <Tab> unmounts. */
+    unregisterTab: (value: string) => void;
+    /** Unique layout group ID scoped to this Tabs instance. */
+    layoutGroupId: string;
+    /**
+     * Set of currently disabled tab values.
+     * Used by keyboard navigation to skip disabled tabs.
+     */
+    disabledValues: Set<string>;
+    /**
+     * Mark or unmark a tab value as disabled.
+     * Called by <Tab> on mount and when `disabled` prop changes.
+     */
+    markTabDisabled: (value: string, disabled: boolean) => void;
+    /**
+     * When true, focus moving via ArrowKey also selects the tab immediately.
+     * Mirrors Google's `autoActivate` attribute on <md-tabs>.
+     * @default false
+     */
+    autoActivate: boolean;
+}
+/**
+ * Props for the `<Tabs>` root component.
+ *
+ * Supports both controlled (`value` + `onValueChange`) and
+ * uncontrolled (`defaultValue`) usage patterns.
+ *
+ * @example
+ * ```tsx
+ * // Controlled
+ * <Tabs value={tab} onValueChange={setTab}>...</Tabs>
+ *
+ * // Uncontrolled
+ * <Tabs defaultValue="flights">...</Tabs>
+ *
+ * // Auto-activate (focus = select)
+ * <Tabs defaultValue="flights" autoActivate>...</Tabs>
+ * ```
+ */
+export interface TabsProps {
+    /** Controlled selected value. Use with `onValueChange`. */
+    value?: string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called when the selected tab changes. */
+    onValueChange?: (value: string) => void;
+    /**
+     * When true, ArrowKey navigation also selects the focused tab immediately.
+     * Mirrors Google's `auto-activate` attribute on `<md-tabs>`.
+     * @default false
+     */
+    autoActivate?: boolean;
+    /** Tab compound components as children. */
+    children: React.ReactNode;
+    /** Additional CSS class names for the root wrapper. */
+    className?: string;
+}
+/**
+ * Props for the `<TabsList>` container component.
+ *
+ * @example
+ * ```tsx
+ * <TabsList variant="primary" scrollable={false}>
+ *   <Tab value="tab1">Tab 1</Tab>
+ * </TabsList>
+ * ```
+ */
+export interface TabsListProps {
+    /** Visual style variant. @required */
+    variant: TabsVariant;
+    /**
+     * When true, tabs scroll horizontally with 52px edge padding (MD3 spec).
+     * When false, tabs divide the available width equally (flex-1).
+     * @default false
+     */
+    scrollable?: boolean;
+    /**
+     * Background color override for the tab bar.
+     * @default "var(--md-sys-color-surface)"
+     */
+    backgroundColor?: string;
+    /** Tab components as children. */
+    children: React.ReactNode;
+    /** Additional CSS class names. */
+    className?: string;
+    /** Forwarded aria-label for the tablist. */
+    "aria-label"?: string;
+}
+/**
+ * Props for an individual `<Tab>` component.
+ *
+ * @example
+ * ```tsx
+ * <Tab value="flights" icon={<Icon name="flight" />}>Flights</Tab>
+ * <Tab value="trips" disabled>Trips</Tab>
+ * <Tab value="hotels" icon={<Icon name="hotel" />} inlineIcon>Hotels</Tab>
+ * ```
+ */
+export interface TabProps {
+    /** Unique value identifying this tab. Must match a `<TabsContent value>`. */
+    value: string;
+    /**
+     * Optional icon rendered with the label text.
+     * - Default (stacked): icon above label, height increases to 64dp.
+     * - With `inlineIcon`: icon beside label (same row), height stays 48dp.
+     */
+    icon?: React.ReactNode;
+    /**
+     * When true, icon is placed inline (same row) with the label text.
+     * Container height stays at 48dp (does NOT increase to 64dp).
+     * Mirrors the `inline-icon` attribute on `<md-primary-tab>`.
+     * @default false
+     */
+    inlineIcon?: boolean;
+    /**
+     * When true, disables interaction.
+     * Disabled tabs are skipped entirely in keyboard navigation (ArrowKey).
+     */
+    disabled?: boolean;
+    /** Additional CSS class names. */
+    className?: string;
+    /**
+     * Optional badge element overlaid on the tab content.
+     * Handled via `BadgedBox`:
+     * - Stacked icon: Overlaps icon's top-trailing corner.
+     * - Inline/Text-only: Placed next to the text.
+     */
+    badge?: React.ReactNode;
+    /** Label text rendered inside the tab. */
+    children: React.ReactNode;
+}
+/**
+ * Props for the `<TabsContent>` panel component.
+ *
+ * @example
+ * ```tsx
+ * <TabsContent value="flights">Flight content here</TabsContent>
+ * ```
+ */
+export interface TabsContentProps {
+    /** Must match the `value` of a sibling `<Tab>`. */
+    value: string;
+    /** Additional CSS class names. */
+    className?: string;
+    /** Panel content. */
+    children: React.ReactNode;
+}

package/dist/ui/text-field/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @file index.ts
+ * Barrel export for the TextField component.
+ *
+ * @example
+ * ```tsx
+ * import { TextField } from '@bug-on/md3-react';
+ * ```
+ */
+export { TextField } from "./text-field";
+export type { TextFieldHandle, TextFieldInputType, TextFieldProps, TextFieldTrailingIconMode, TextFieldVariant, } from "./text-field.types";

package/dist/ui/text-field/subcomponents/active-indicator.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file active-indicator.tsx
+ * Animated bottom border line for the MD3 Filled TextField.
+ * Expands height from 1px → 2px and color changes on focus.
+ */
+import * as React from "react";
+export interface ActiveIndicatorProps {
+    isFocused: boolean;
+    isError: boolean;
+    isDisabled: boolean;
+    isHovered: boolean;
+    prefersReduced: boolean;
+}
+/**
+ * MD3 Active Indicator — the bottom border line for Filled TextField.
+ *
+ * Animates:
+ * - `height`: 1px (enabled) → 2px (focused)
+ * - `backgroundColor`: on-surface-variant → primary (focused) → error
+ * - `scaleX`: 0 → 1 expanding from center on focus in
+ *
+ * @see https://m3.material.io/components/text-fields/specs#filled-text-field
+ */
+export declare const ActiveIndicator: React.NamedExoticComponent<ActiveIndicatorProps>;

package/dist/ui/text-field/subcomponents/floating-label.d.ts

@@ -0,0 +1,43 @@
+/**
+ * @file floating-label.tsx
+ * Animated floating label for MD3 TextField.
+ * Animates between inline (body large) and floated (body small) positions.
+ */
+import * as React from "react";
+export interface FloatingLabelProps {
+    /** The label text content. */
+    text: string;
+    /** Whether the label is in the floated (small) position. */
+    isFloated: boolean;
+    /** Whether the field is currently focused. */
+    isFocused: boolean;
+    /** Whether the field is in error state. */
+    isError: boolean;
+    /** Whether the field is disabled. */
+    isDisabled: boolean;
+    /** 'filled' or 'outlined' — determines vertical y offset. */
+    variant: "filled" | "outlined";
+    /** Container height in px (56 normal, 48 dense). */
+    containerHeight: number;
+    /** Whether to skip animations (prefers-reduced-motion). */
+    prefersReduced: boolean;
+    /** Whether the required asterisk should be shown. */
+    showAsterisk: boolean;
+    /** ID of the label element, for associating with a containing element. */
+    htmlFor?: string;
+    /** Ref callback so the parent can measure label width for the outlined notch. */
+    labelRef?: React.Ref<HTMLSpanElement>;
+    /** Whether there is a leading icon. */
+    hasLeading?: boolean;
+}
+/**
+ * MD3 Expressive Floating Label.
+ *
+ * Animates y-position, scale, and color when the label floats.
+ * Uses `transformOrigin: 'left center'` so scaling anchors at the start.
+ *
+ * @accessibility
+ * Rendered as a `<label>` with `htmlFor` linking to the `<input>`.
+ * When floated, visual size changes but the semantic label is unchanged.
+ */
+export declare const FloatingLabel: React.NamedExoticComponent<FloatingLabelProps>;

package/dist/ui/text-field/subcomponents/leading-icon.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @file leading-icon.tsx
+ * Leading icon slot for MD3 TextField.
+ */
+import * as React from "react";
+export interface LeadingIconProps {
+    /** Icon node — should be 24×24px. */
+    children: React.ReactNode;
+    /** Whether the field is in error state (changes icon color). */
+    isError: boolean;
+    /** Whether the field is disabled. */
+    isDisabled: boolean;
+}
+/**
+ * MD3 Leading Icon wrapper.
+ *
+ * Decorative — `aria-hidden="true"`.
+ * Color: `on-surface-variant` (default), `error` (error state).
+ * Size: 24×24px icon, 48×56px touch target via flex alignment.
+ *
+ * @see https://m3.material.io/components/text-fields/specs#anatomy
+ */
+export declare const LeadingIcon: React.NamedExoticComponent<LeadingIconProps>;

package/dist/ui/text-field/subcomponents/outline-container.d.ts

@@ -0,0 +1,42 @@
+/**
+ * @file outline-container.tsx
+ * MD3-compliant outlined border with animated notch for the Outlined TextField.
+ *
+ * Implementation: 3-segment approach inspired by Material Web's fieldset/legend pattern.
+ * The top border is split into: [left-segment] [notch-gap] [right-segment].
+ * The notch-gap width animates from 0 → (labelWidth × scaleRatio + 8px) when label floats.
+ *
+ * This mirrors Material Web's implementation without requiring <fieldset> semantics.
+ *
+ * @see https://github.com/material-components/material-web/tree/main/textfield
+ * @see https://m3.material.io/components/text-fields/specs#outlined-text-field
+ */
+import * as React from "react";
+export interface OutlineContainerProps {
+    /** Whether the label is in the floated position. */
+    isFloated: boolean;
+    /** Whether the field is focused. */
+    isFocused: boolean;
+    /** Whether the field is in error state. */
+    isError: boolean;
+    /** Whether the field is disabled. */
+    isDisabled: boolean;
+    /** Whether the field is hovered. */
+    isHovered: boolean;
+    /**
+     * Measured width of the label element in its full (unfloated) size.
+     * The notch width = labelWidth × scaleRatio + 2×notchPadding.
+     */
+    labelWidth: number;
+    /** Whether to disable animations. */
+    prefersReduced: boolean;
+}
+/**
+ * MD3 Outlined TextField container with animated notch.
+ *
+ * The notch gap expands/collapses in sync with the FloatingLabel animation,
+ * creating the visual effect of the label breaking through the border.
+ *
+ * Accessibility: `aria-hidden="true"` — purely decorative border.
+ */
+export declare const OutlineContainer: React.NamedExoticComponent<OutlineContainerProps>;

package/dist/ui/text-field/subcomponents/prefix-suffix.d.ts

@@ -0,0 +1,24 @@
+/**
+ * @file prefix-suffix.tsx
+ * Prefix and suffix text for MD3 TextField.
+ * Visible only when the label is floated (or when there is no label).
+ */
+import * as React from "react";
+export interface PrefixSuffixProps {
+    text: string;
+    type: "prefix" | "suffix";
+    /** Whether the label is floated (controls visibility). */
+    visible: boolean;
+    /** Disable animations. */
+    prefersReduced: boolean;
+}
+/**
+ * MD3 Prefix / Suffix Text.
+ *
+ * Animates in/out in sync with the floating label using AnimatePresence.
+ * Hidden when label is in the inline position (would overlap the label).
+ *
+ * @accessibility
+ * `aria-hidden="true"` — decorative. Screen readers read the full value in context.
+ */
+export declare const PrefixSuffix: React.NamedExoticComponent<PrefixSuffixProps>;

package/dist/ui/text-field/subcomponents/supporting-text.d.ts

@@ -0,0 +1,37 @@
+/**
+ * @file supporting-text.tsx
+ * Supporting text, error text, and character counter for MD3 TextField.
+ *
+ * Animates in/out using AnimatePresence. Uses aria-live for accessibility.
+ */
+import * as React from "react";
+export interface SupportingTextProps {
+    /** Helper text shown in normal state. */
+    supportingText?: string;
+    /** Error message — shown instead of supportingText when isError=true. */
+    errorText?: string;
+    /** Whether field is in error state. */
+    isError: boolean;
+    /** Current character count (value.length). */
+    charCount?: number;
+    /** Maximum character limit. Counter shown only when maxLength is set. */
+    maxLength?: number;
+    /** ID for aria-describedby linking from the input. */
+    id: string;
+    /** Disable animations. */
+    prefersReduced: boolean;
+}
+/**
+ * MD3 Supporting Text area.
+ *
+ * Layout: [helper/error text] [character counter]
+ * - Error text replaces supporting text when isError=true.
+ * - Character counter shows only when maxLength is provided.
+ * - Both use aria-live="polite" to announce changes to screen readers.
+ * - Animates in/out with opacity + y-offset via AnimatePresence.
+ *
+ * @accessibility
+ * - Error text: `aria-live="polite"` — screen readers announce when error appears.
+ * - Counter: `aria-live="polite"` — announces count changes.
+ */
+export declare const SupportingText: React.NamedExoticComponent<SupportingTextProps>;

package/dist/ui/text-field/subcomponents/trailing-icon.d.ts

@@ -0,0 +1,41 @@
+/**
+ * @file trailing-icon.tsx
+ * Trailing icon slot for MD3 TextField.
+ *
+ * Supports three built-in modes:
+ * - 'clear': ✕ button, visible when field has value
+ * - 'password-toggle': eye icon, toggles password visibility
+ * - 'custom': renders the `children` prop
+ */
+import * as React from "react";
+import type { TextFieldTrailingIconMode } from "../text-field.types";
+export interface TrailingIconProps {
+    mode: TextFieldTrailingIconMode;
+    /** Custom icon content (used when mode='custom'). */
+    children?: React.ReactNode;
+    /** Current input value — used to determine if clear button is visible. */
+    value: string;
+    /** Whether password is currently visible (for password-toggle mode). */
+    showPassword?: boolean;
+    /** Fires when clear button is clicked. */
+    onClear?: () => void;
+    /** Fires when password visibility toggle is clicked. */
+    onPasswordToggle?: () => void;
+    /** Whether the field is in error state. */
+    isError: boolean;
+    /** Whether the field is disabled. */
+    isDisabled: boolean;
+    /** Disable animations. */
+    prefersReduced: boolean;
+}
+/**
+ * MD3 Trailing Icon.
+ *
+ * Touch target: 48×48px (padding extends the hit area beyond the 24×24 icon).
+ *
+ * @accessibility
+ * - Clear button: `aria-label="Clear input"`
+ * - Password toggle: `aria-label="Show password"` / `"Hide password"`
+ * - Custom: no aria — consumer provides accessible markup
+ */
+export declare const TrailingIcon: React.NamedExoticComponent<TrailingIconProps>;

package/dist/ui/text-field/text-field.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @file text-field.tsx
+ * MD3 Expressive TextField — Filled & Outlined variants.
+ *
+ * Features:
+ * - Floating label animation (Framer Motion)
+ * - Filled (active indicator) and Outlined (notch border) variants
+ * - Controlled & uncontrolled value handling
+ * - Built-in clear button, password toggle
+ * - Prefix / suffix text
+ * - Supporting text, error text, character counter
+ * - Leading & trailing icon slots
+ * - Textarea support
+ * - Native form validation + imperative handle
+ * - Full WCAG AA accessibility
+ * - prefers-reduced-motion support
+ *
+ * @see https://m3.material.io/components/text-fields/overview
+ */
+import * as React from "react";
+import type { TextFieldHandle, TextFieldProps } from "./text-field.types";
+/**
+ * MD3 Expressive TextField.
+ *
+ * Supports `filled` and `outlined` variants, floating label animation,
+ * prefix/suffix, leading/trailing icons, supporting text, character counter,
+ * textarea mode, clear button, password toggle, and native form validation.
+ *
+ * @example
+ * ```tsx
+ * // Filled (default)
+ * <TextField label="Email" type="email" />
+ *
+ * // Outlined with error
+ * <TextField variant="outlined" label="Username" error errorText="Already taken" />
+ *
+ * // With clear button
+ * <TextField label="Search" trailingIconMode="clear" />
+ *
+ * // Password with toggle
+ * <TextField label="Password" type="password" trailingIconMode="password-toggle" />
+ *
+ * // With character counter
+ * <TextField label="Bio" maxLength={140} supportingText="Describe yourself" />
+ * ```
+ *
+ * @see https://m3.material.io/components/text-fields/overview
+ */
+export declare const TextField: React.NamedExoticComponent<Omit<TextFieldProps, "ref"> & React.RefAttributes<TextFieldHandle>>;

package/dist/ui/text-field/text-field.tokens.d.ts

@@ -0,0 +1,76 @@
+/**
+ * @file text-field.tokens.ts
+ * MD3 design token mapping for the TextField component.
+ *
+ * All color values reference CSS custom properties defined by the MD3 theme.
+ * Do NOT use raw hex values — always use CSS variables.
+ *
+ * @see https://m3.material.io/components/text-fields/specs
+ */
+export declare const TF_COLORS: {
+    /** Filled container background */
+    readonly filledBg: "var(--color-m3-surface-container-highest)";
+    /** Input text color */
+    readonly inputText: "var(--color-m3-on-surface)";
+    /** Label (unfloated) + icons + prefix/suffix + supporting text */
+    readonly onSurfaceVariant: "var(--color-m3-on-surface-variant)";
+    /** Focused active indicator / outline, floated label */
+    readonly primary: "var(--color-m3-primary)";
+    /** Error indicator / outline / label / icon / supporting text */
+    readonly error: "var(--color-m3-error)";
+    /** Outlined border (enabled) */
+    readonly outline: "var(--color-m3-outline)";
+    /** Transparent */
+    readonly transparent: "transparent";
+};
+export declare const TF_SIZE: {
+    /** Container height — normal */
+    readonly height: 56;
+    /** Container height — dense variant */
+    readonly denseHeight: 48;
+    /** Active indicator height — enabled */
+    readonly indicatorThin: 1;
+    /** Active indicator height — focused */
+    readonly indicatorThick: 2;
+    /** Outline stroke width — enabled */
+    readonly outlineThin: 1;
+    /** Outline stroke width — focused */
+    readonly outlineThick: 2;
+    /** Corner radius — all variants */
+    readonly cornerRadius: 4;
+    /** Leading/Trailing icon size */
+    readonly iconSize: 24;
+    /** Padding inline start (no leading icon) */
+    readonly paddingStart: 16;
+    /** Padding inline start (with leading icon) */
+    readonly paddingStartWithIcon: 12;
+    /** Padding inline end */
+    readonly paddingEnd: 16;
+    /** Padding inline end (with trailing icon) */
+    readonly paddingEndWithIcon: 12;
+    /** Notch extra padding per side on outlined label gap */
+    readonly notchPadding: 4;
+};
+export declare const TF_TYPOGRAPHY: {
+    /** Body Large — input text, unfloated label */
+    readonly bodyLargePx: 16;
+    /** Body Small — floated label, supporting text, counter */
+    readonly bodySmallPx: 12;
+    /** Scale ratio when label floats: 12/16 = 0.75 */
+    readonly labelScaleRatio: number;
+};
+/**
+ * Tailwind utility classes for key TextField elements.
+ * Use via cn() — do NOT use these as standalone strings without merging.
+ */
+export declare const TF_CLASSES: {
+    readonly filledContainer: "bg-[var(--color-m3-surface-container-highest)] rounded-tl-[4px] rounded-tr-[4px] rounded-bl-none rounded-br-none";
+    readonly outlinedContainer: "bg-transparent rounded-[4px]";
+    readonly input: "bg-transparent outline-none w-full text-base text-[var(--color-m3-on-surface)] caret-[var(--color-m3-primary)] placeholder:text-[var(--color-m3-on-surface-variant)]";
+    readonly inputNoSpinner: "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none";
+    readonly disabled: "opacity-[0.38] pointer-events-none cursor-not-allowed";
+    readonly supportingText: "text-xs text-[var(--color-m3-on-surface-variant)] px-4";
+    readonly errorText: "text-xs text-[var(--color-m3-error)] px-4";
+    readonly prefixSuffix: "text-base text-[var(--color-m3-on-surface-variant)] select-none shrink-0";
+    readonly stateLayer: "absolute inset-0 bg-[var(--color-m3-on-surface)] opacity-0 transition-opacity duration-150 pointer-events-none rounded-[inherit]";
+};