@bug-on/md3-react 2.0.3 → 3.0.1

package/dist/ui/progress-indicator/linear-flat.d.ts

@@ -1,10 +0,0 @@
-import * as React from "react";
-export declare const FlatLinearTrack: React.NamedExoticComponent<{
-    trackHeight: number;
-    activeColor: string;
-    trackColor: string;
-    value?: number;
-    isRtl: boolean;
-    gapSize: number;
-    crawlerSpeed: number;
-}>;

package/dist/ui/progress-indicator/linear-wavy.d.ts

@@ -1,18 +0,0 @@
-import * as React from "react";
-export declare const WavyLinearTrack: React.NamedExoticComponent<{
-    trackHeight: number;
-    svgHeight: number;
-    amplitude: number;
-    wavelength: number;
-    indeterminateWavelength: number;
-    activeColor: string;
-    trackColor: string;
-    value?: number;
-    isRtl: boolean;
-    gapSize: number;
-    waveSpeed: number;
-    crawlerSpeed: number;
-    determinateAnimation: "md3" | "continuous";
-    indeterminateAnimation: "md3" | "continuous";
-    trackShape: "flat" | "wavy";
-}>;

package/dist/ui/progress-indicator/linear.d.ts

@@ -1,3 +0,0 @@
-import * as React from "react";
-import type { LinearProgressProps } from "./types";
-export declare const LinearProgress: React.ForwardRefExoticComponent<LinearProgressProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/progress-indicator/types.d.ts

@@ -1,151 +0,0 @@
-import type * as React from "react";
-export interface ProgressBaseProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
-    /**
-     * Giá trị phần trăm tiến trình hiện tại (từ 0 đến 100).
-     * Nếu truyền giá trị này, tiến trình sẽ hiển thị ở trạng thái Determinate.
-     * Nếu bỏ trống (undefined), tiến trình sẽ tự động ở trạng thái Indeterminate.
-     *
-     * @example
-     * ```tsx
-     * <ProgressIndicator value={45} aria-label="Loading profile..." />
-     * ```
-     */
-    value?: number;
-    /**
-     * Nhan đề mô tả mục đích của thanh tiến trình dành cho screen readers (bắt buộc).
-     */
-    "aria-label": string;
-    /**
-     * Độ dày của track (đường nền) của thanh tiến trình (đơn vị: px).
-     * - Với Linear: là chiều cao của thanh.
-     * - Với Circular: là độ dày của viền hình tròn.
-     *
-     * @example
-     * trackHeight={8} // Dày hơn bình thường
-     */
-    trackHeight?: number;
-    /**
-     * Màu sắc của phần tiến trình (phần đã hoàn thành).
-     * Mặc định mượn màu `currentColor` của thẻ wrap, để dễ dàng tuỳ biến qua utility class.
-     *
-     * @example
-     * color="var(--md-sys-color-primary)" // Sử dụng custom token
-     */
-    color?: string;
-    /**
-     * Màu sắc của thanh nền (phần chưa hoàn thành).
-     * Mặc định sử dụng màu được tính toán từ bề mặt hoặc transparency để tạo sự tinh tế.
-     */
-    trackColor?: string;
-}
-export interface LinearProgressProps extends ProgressBaseProps {
-    /** Phân loại component sang kiểu dáng Linear (đường thẳng ngang). */
-    variant: "linear";
-    /**
-     * Hình dáng của vạch tiến trình (phần đã hoàn thành).
-     * - `flat`: Đường nét liền phẳng (mặc định)
-     * - `wavy`: Đường lượn sóng động
-     */
-    shape?: "flat" | "wavy";
-    /**
-     * Hình dáng của thanh nền chờ (track).
-     * - `flat`: Đường nét liền phẳng (mặc định)
-     * - `wavy`: Đường lượn sóng cố định hoặc động
-     */
-    trackShape?: "flat" | "wavy";
-    /**
-     * Biên độ sóng (áp dụng khi `shape` hoặc `trackShape` là "wavy").
-     * Chỉ định độ lượn cao thấp của con sóng.
-     */
-    amplitude?: number;
-    /**
-     * Chiều dài một nhịp sóng (áp dụng khi `shape` là "wavy" theo determinate).
-     * Khoảng cách giữa 2 đỉnh sóng kề nhau.
-     */
-    wavelength?: number;
-    /**
-     * Nhịp sóng dành riêng cho trạng thái chạy liên tục (Indeterminate Wavy).
-     */
-    indeterminateWavelength?: number;
-    /**
-     * Khoảng hở kết dính giữa cụm vạch đang chạy và thanh nền.
-     * Cho phép truyền \`0\` để hai thanh chạm sát vào nhau liền mạch.
-     *
-     * @example
-     * ```tsx
-     * <ProgressIndicator variant="linear" shape="wavy" gapSize={0} /> // Sóng chạm track liền nét
-     * ```
-     */
-    gapSize?: number;
-    /**
-     * Tốc độ dao động vỗ của sóng (Multiplier). Mặc định là \`1\`.
-     * Tăng giá trị (VD: 1.5, 2) để sóng dao động nhanh hơn.
-     */
-    waveSpeed?: number;
-    /**
-     * Tốc độ lướt / cuộn dải màu dọc trên track (Crawler) đối với trạng thái Indeterminate.
-     * Mặc định là \`1\`.
-     */
-    crawlerSpeed?: number;
-    /**
-     * Cấu hình hiệu ứng gợn khi thanh determinate ở mức xấp xỉ mép viền (<= 10% hoặc >= 90%).
-     * - `md3`: Tự động ép phẳng biên độ sóng thành số 0 một cách mềm mại (Chuẩn Google MD3).
-     * - `continuous`: Bỏ qua các ràng buộc ép phẳng, con sóng vẫn gợn lấp lóa trên mọi giá trị phần trăm.
-     *
-     * @example
-     * ```tsx
-     * <ProgressIndicator variant="linear" shape="wavy" determinateAnimation="continuous" />
-     * ```
-     */
-    determinateAnimation?: "md3" | "continuous";
-    /**
-     * Kiểu kịch bản tịnh tiến cho thanh Indeterminate.
-     * - `md3`: Render 2 vạch song song vọt tới & co giãn mô phỏng vật lý (Chuẩn Google MD3).
-     * - `continuous`: Vạch không ngắt quãng mà tràn lướt vòng lặp mượt mà.
-     *
-     * @example
-     * ```tsx
-     * <ProgressIndicator variant="linear" indeterminateAnimation="continuous" />
-     * ```
-     */
-    indeterminateAnimation?: "md3" | "continuous";
-    /**
-     * Bật/tắt dấm chấm điểm báo kết thúc ở cuối track (Stop Indicator).
-     * - `true`: Luôn thấy một chấm tròn bé xíu ở cuối đường đi
-     * - `false`: Tắt hoàn toàn
-     * - `"auto"`: Chấm tròn chỉ hiển thị và hòa trộn khi progress đạt 100%
-     */
-    showStopIndicator?: boolean | "auto";
-}
-export interface CircularProgressProps extends ProgressBaseProps {
-    /** Phân loại component sang kiểu dáng Circular (hình tròn khép kín). */
-    variant: "circular";
-    /**
-     * Đường kính hiển thị của vòng biểu đồ, đơn vị px.
-     *
-     * @example
-     * ```tsx
-     * <ProgressIndicator variant="circular" size={48} aria-label="Loading..." />
-     * ```
-     */
-    size?: number;
-    /**
-     * Phong cách nét vẽ của đường viền trong trạng thái trượt.
-     * - `flat`: Đường nét cứng, vuốt tròn hai đầu stroke.
-     * - `wavy`: Vệt màu chuyển động rung tạo hình răng cưa/gợn sóng.
-     */
-    shape?: "flat" | "wavy";
-    /**
-     * Biên độ gợn của trạng thái `wavy` cho vòng tròn.
-     */
-    amplitude?: number;
-    /** Bước sóng bao trọn chu vi hình tròn. */
-    wavelength?: number;
-    /** Khoảng hở khe đứt ngang nối đỉnh nét vẽ. */
-    gapSize?: number;
-    /**
-     * Xoay nhanh hay chậm theo số nhân cho Crawler Circular quay Indeterminate.
-     */
-    crawlerSpeed?: number;
-}
-export type ProgressIndicatorProps = LinearProgressProps | CircularProgressProps;

package/dist/ui/progress-indicator/utils.d.ts

@@ -1,3 +0,0 @@
-export declare function easeInOutCubic(x: number): number;
-export declare function generateWavyCircularPath(center: number, radius: number, amplitude: number, wavelength: number): string;
-export declare function getSinePath(startX: number, endX: number, phase: number, wl: number, amp: number): string;

package/dist/ui/radio-button.d.ts

@@ -1,106 +0,0 @@
-/**
- * @file radio-button.tsx
- * MD3 Expressive RadioButton — single-select with RadioGroup support.
- * Spec: https://m3.material.io/components/radio-button/overview
- */
-import * as React from "react";
-/**
- * Color variant for `RadioButton`.
- * - `"primary"` — standard selection (default)
- * - `"error"` — error/invalid state
- */
-export type RadioButtonColors = "primary" | "error";
-/** Props for `RadioButton`. */
-export interface RadioButtonProps {
-    /** Whether this radio is selected. */
-    selected?: boolean;
-    /** Initial selected state (uncontrolled). @default false */
-    defaultSelected?: boolean;
-    /** Called when user clicks. Pass `null` to disable interaction. */
-    onClick?: (() => void) | null;
-    /** Disables the radio — visual disabled state + no interaction. @default false */
-    disabled?: boolean;
-    /** Color variant. @default "primary" */
-    color?: RadioButtonColors;
-    /** Error state — changes colors to `m3-error`. @default false */
-    error?: boolean;
-    /** Adjacent label text. Renders a `<label>` wrapper. */
-    label?: string;
-    /** Value used for form submission. */
-    value?: string;
-    /** Name for grouping (used in RadioGroup context). */
-    name?: string;
-    /** ID for the hidden `<input>`. Auto-generated when `label` is set. */
-    id?: string;
-    /** Extra class names on the outermost wrapper. */
-    className?: string;
-    /** ARIA label for the radio when no visible label exists. */
-    "aria-label"?: string;
-    "aria-labelledby"?: string;
-    "aria-describedby"?: string;
-    /** Whether the radio is required for form submission. */
-    required?: boolean;
-    /** Ref to the hidden `<input type="radio">`. */
-    ref?: React.Ref<HTMLInputElement>;
-}
-/** Props for `RadioGroup`. */
-export interface RadioGroupProps {
-    /** The name attribute shared across all child RadioButtons. */
-    name: string;
-    /** The currently selected value (controlled). */
-    value?: string;
-    /** Default value (uncontrolled). */
-    defaultValue?: string;
-    /** Called when selection changes. */
-    onValueChange?: (value: string) => void;
-    /** Disables all radio buttons in the group. */
-    disabled?: boolean;
-    /** Error state for the entire group. */
-    error?: boolean;
-    /** Label for the group (renders as visually hidden or visible heading). */
-    label?: string;
-    /** ID of an external element that labels this group. */
-    "aria-labelledby"?: string;
-    /** Direction of layout. @default "vertical" */
-    orientation?: "horizontal" | "vertical";
-    /** Whether at least one radio in the group must be selected. */
-    required?: boolean;
-    children: React.ReactNode;
-    className?: string;
-}
-/**
- * MD3 Expressive RadioButton component.
- *
- * Single-select control. Supports standalone (controlled/uncontrolled) and
- * `RadioGroup` context. Animated per MD3 spec: inner dot radius morph,
- * outer ring color transition, state layer, and ripple.
- *
- * @example
- * ```tsx
- * <RadioButton selected={isSelected} onClick={() => setSelected(true)} label="Option A" />
- *
- * <RadioGroup name="plan" value={plan} onValueChange={setPlan}>
- *   <RadioButton value="free" label="Free" />
- *   <RadioButton value="pro" label="Pro" />
- * </RadioGroup>
- * ```
- * @see https://m3.material.io/components/radio-button/overview
- */
-export declare const RadioButton: React.NamedExoticComponent<Omit<RadioButtonProps, "ref"> & React.RefAttributes<HTMLInputElement>>;
-/**
- * MD3 Expressive RadioGroup component.
- *
- * Groups multiple `RadioButton` components under a shared `name` with keyboard
- * navigation (Arrow keys with wrapping) and ARIA `radiogroup` semantics.
- *
- * @example
- * ```tsx
- * <RadioGroup name="theme" value={theme} onValueChange={setTheme} label="Theme">
- *   <RadioButton value="light" label="Light" />
- *   <RadioButton value="dark" label="Dark" />
- *   <RadioButton value="system" label="System" />
- * </RadioGroup>
- * ```
- * @see https://m3.material.io/components/radio-button/overview
- */
-export declare const RadioGroup: React.NamedExoticComponent<RadioGroupProps & React.RefAttributes<HTMLDivElement>>;

package/dist/ui/ripple.d.ts

@@ -1,126 +0,0 @@
-import * as React from "react";
-/**
- * Represents a single ripple wave instance with position and size metadata.
- *
- * @example
- * ```tsx
- * const ripple: RippleOrigin = { id: Date.now(), x: 50, y: 30, size: 200 };
- * ```
- */
-export interface RippleOrigin {
-    /** Unique identifier used as React key and for removal. */
-    id: number;
-    /** X coordinate of the pointer event relative to the container's left edge (px). */
-    x: number;
-    /** Y coordinate of the pointer event relative to the container's top edge (px). */
-    y: number;
-    /**
-     * Diameter of the ripple circle (px).
-     * Typically `Math.hypot(width, height) * 2` to ensure it fills the container.
-     */
-    size: number;
-}
-/**
- * Props for the `Ripple` presentation component.
- */
-export interface RippleProps {
-    /** Active ripple instances to render. Managed by the parent via `useRipple`. */
-    ripples: RippleOrigin[];
-    /** Called when a ripple's exit animation completes — remove it from state. */
-    onRippleDone: (id: number) => void;
-    /**
-     * Completely disables the ripple effect.
-     * Use this when the parent element is disabled or interaction is not desired.
-     * @default false
-     */
-    disabled?: boolean;
-    /**
-     * When `true`, the ripple respects the user's OS-level
-     * `prefers-reduced-motion` accessibility setting and renders nothing if active.
-     *
-     * Set to `false` to always show ripples regardless of system preference.
-     * @default true
-     */
-    respectSystemMotion?: boolean;
-}
-/**
- * MD3 Expressive Ripple — animated touch-feedback wave layer.
- *
- * Renders absolutely-positioned ripple circles inside an `overflow-hidden`
- * container. Must be placed as a direct child of the interactive element.
- *
- * @remarks
- * - The parent element **must** have `overflow: hidden` and `position: relative`
- *   (or equivalent) for clipping to work correctly.
- * - Set `disabled` to `true` on parent's disabled state to avoid stale ripples.
- * - The ripple color is `currentColor` at 12% opacity — matching MD3 state layer spec.
- *
- * @example
- * ```tsx
- * const { ripples, onPointerDown, removeRipple } = useRippleState();
- *
- * <button onPointerDown={onPointerDown} className="relative overflow-hidden">
- *   <Ripple ripples={ripples} onRippleDone={removeRipple} />
- *   Click me
- * </button>
- * ```
- *
- * @see {@link useRippleState} for the state management hook
- * @see https://m3.material.io/foundations/interaction/states/overview
- */
-export declare function Ripple({ ripples, onRippleDone, disabled, respectSystemMotion, }: RippleProps): import("react/jsx-runtime").JSX.Element | null;
-/**
- * Options for configuring `useRippleState` behaviour.
- */
-export interface UseRippleStateOptions {
-    /**
-     * When `true`, the ripple is suppressed — `onPointerDown` becomes a no-op.
-     * Use this to sync the ripple with the parent element's `disabled` state.
-     * @default false
-     */
-    disabled?: boolean;
-}
-/**
- * `useRippleState` — state manager for MD3 Expressive ripple waves.
- *
- * Tracks active ripple instances and provides pointer event handlers.
- * Pair with the `<Ripple>` component for rendering.
- *
- * @remarks
- * This hook only manages ripple *state* (coordinates, size, lifecycle).
- * The actual animation is handled by `<Ripple>` via Framer Motion.
- * Respecting `prefers-reduced-motion` is handled by `<Ripple>` itself.
- *
- * @param options - Configuration options. See {@link UseRippleStateOptions}.
- * @returns `{ ripples, onPointerDown, removeRipple }` — bind to the interactive element.
- *
- * @example
- * ```tsx
- * function MyButton({ disabled, children }) {
- *   const { ripples, onPointerDown, removeRipple } = useRippleState({ disabled });
- *
- *   return (
- *     <button
- *       disabled={disabled}
- *       onPointerDown={onPointerDown}
- *       className="relative overflow-hidden"
- *     >
- *       <Ripple ripples={ripples} onRippleDone={removeRipple} disabled={disabled} />
- *       {children}
- *     </button>
- *   );
- * }
- * ```
- *
- * @see {@link Ripple} for the rendering component
- */
-export declare function useRippleState(options?: UseRippleStateOptions): {
-    ripples: RippleOrigin[];
-    onPointerDown: (e: React.PointerEvent<HTMLElement>) => void;
-    removeRipple: (id: number) => void;
-};
-/**
- * @deprecated Use `useRippleState` instead. This alias will be removed in a future version.
- * @see {@link useRippleState}
- */
-export declare const useRipple: typeof useRippleState;

package/dist/ui/scroll-area.d.ts

@@ -1,27 +0,0 @@
-import * as RadixScrollArea from "@radix-ui/react-scroll-area";
-import * as React from "react";
-/** Radix accepts hover/scroll/always/auto. We add 'none' as a UI-only hide. */
-export type ScrollAreaType = "hover" | "scroll" | "always" | "none";
-export type ScrollAreaOrientation = "vertical" | "horizontal" | "both";
-export interface ScrollAreaProps extends Omit<React.ComponentPropsWithoutRef<typeof RadixScrollArea.Root>, "type"> {
-    /**
-     * Controls when the scrollbars are visible.
-     * - `hover`: Show on hover (default, recommended for desktop)
-     * - `scroll`: Show only while scrolling (recommended for mobile)
-     * - `always`: Always visible
-     * - `none`: Never visible
-     */
-    type?: ScrollAreaType;
-    /**
-     * The scrollbar orientation to render.
-     * @default "vertical"
-     */
-    orientation?: ScrollAreaOrientation;
-    /** Delay in ms before scrollbars hide when `type` is `hover` or `scroll`. */
-    scrollHideDelay?: number;
-    /** Extra classes applied to the inner viewport element. */
-    viewportClassName?: string;
-}
-declare const ScrollArea: React.ForwardRefExoticComponent<ScrollAreaProps & React.RefAttributes<HTMLDivElement>>;
-declare const ScrollAreaScrollbar: React.ForwardRefExoticComponent<Omit<RadixScrollArea.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
-export { ScrollArea, ScrollAreaScrollbar };

package/dist/ui/search/animated-placeholder.d.ts

@@ -1,54 +0,0 @@
-/**
- * @file animated-placeholder.tsx
- * MD3 Expressive Search — Animated placeholder overlay.
- *
- * Replaces the native `::placeholder` with a GPU-accelerated `translateX`
- * animation so the placeholder text can smoothly slide from its alignment
- * position (center / right) to left when the search input is focused.
- *
- * Implementation notes:
- * - Only `transform: translateX` is animated → no layout triggers, no paint.
- * - Container width is measured once via `useLayoutEffect` (before paint) to
- *   avoid a first-render flash, then kept fresh via `ResizeObserver`.
- * - xOffset is stored in `useState` so Framer Motion picks up changes and
- *   re-animates smoothly on container resize.
- * - The span is never unmounted — only opacity-toggled — to preserve the
- *   measurement ref between renders.
- */
-import * as React from "react";
-interface AnimatedPlaceholderProps {
-    /** Placeholder text to display. */
-    text: string;
-    /** Alignment of the placeholder when idle (not focused). @default "left" */
-    textAlign: "left" | "center" | "right";
-    /**
-     * Whether the placeholder should be visible.
-     * Pass `!query` — hide when the user has typed something.
-     */
-    visible: boolean;
-    /**
-     * Whether the search is in an active/focused state.
-     * When `true`, the placeholder snaps to `left` regardless of `textAlign`.
-     */
-    focused: boolean;
-    /**
-     * The `<input>` element that this component wraps.
-     * It should have `w-full` instead of `flex-1` since this wrapper
-     * takes over the `flex-1` role in the parent flex layout.
-     */
-    children: React.ReactNode;
-    /** Extra className forwarded to the wrapper div. */
-    className?: string;
-}
-/**
- * Wraps a search `<input>` with an animated placeholder overlay.
- *
- * The wrapper div occupies `flex-1` so it fits seamlessly in the
- * horizontal flex layout used by search bar headers. The children
- * (the `<input>`) should use `w-full` to fill the wrapper.
- *
- * Accessibility: `aria-label` on the `<input>` carries the placeholder
- * text for screen readers; this span is `aria-hidden="true"`.
- */
-export declare function AnimatedPlaceholder({ text, textAlign, visible, focused, children, className, }: AnimatedPlaceholderProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/ui/search/hooks/use-search-keyboard.d.ts

@@ -1,32 +0,0 @@
-/**
- * @file use-search-keyboard.ts
- * Keyboard navigation hook for the MD3 Search component.
- *
- * Handles:
- * - ArrowDown / ArrowUp → navigate through suggestions (role="option")
- * - Enter → submit search or select active suggestion
- * - Escape → close the SearchView
- */
-import type { UseSearchKeyboardReturn } from "../search.types";
-interface UseSearchKeyboardOptions {
-    /** Whether the SearchView is currently open. */
-    active: boolean;
-    /** Callback to close the SearchView. */
-    onActiveChange: (active: boolean) => void;
-    /** Callback for search submission. */
-    onSearch: (query: string) => void;
-    /** Current search query. */
-    query: string;
-    /** Total number of suggestion items in the listbox. */
-    itemCount: number;
-    /** Called when user selects a specific suggestion by index. */
-    onSelectSuggestion?: (index: number) => void;
-}
-/**
- * Manages keyboard navigation for the Search component.
- *
- * Complies with WAI-ARIA Combobox pattern:
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
- */
-export declare function useSearchKeyboard({ active, onActiveChange, onSearch, query, itemCount, onSelectSuggestion, }: UseSearchKeyboardOptions): UseSearchKeyboardReturn;
-export {};

package/dist/ui/search/hooks/use-search-view-focus.d.ts

@@ -1,6 +0,0 @@
-import * as React from "react";
-/**
- * Focuses `inputRef` when `active` becomes true, using a double-rAF
- * to wait for Framer Motion's layout animation to finish painting.
- */
-export declare function useSearchViewFocus(inputRef: React.RefObject<HTMLInputElement | null>, active: boolean): void;

package/dist/ui/search/index.d.ts

@@ -1,27 +0,0 @@
-/**
- * @file index.ts
- * MD3 Expressive Search — Public API exports.
- *
- * Components:
- * - Search: Orchestrator (SearchBar + SearchView)
- * - SearchBar: Collapsed pill state (standalone use)
- * - SearchViewDocked: Expanded docked popup (standalone use)
- * - SearchViewFullScreen: Expanded full-screen overlay (standalone use)
- *
- * Hook:
- * - useSearchKeyboard: WAI-ARIA combobox keyboard navigation
- *
- * Tokens:
- * - SearchTokens: Dimensional tokens (heights, sizes)
- * - SEARCH_COLORS: CSS custom property color references
- * - SEARCH_TYPOGRAPHY: Typography class strings
- * - Animation constants
- */
-export { useSearchKeyboard } from "./hooks/use-search-keyboard";
-export { Search } from "./search";
-export { SEARCH_BAR_EXIT_SPRING, SEARCH_BAR_EXPAND_SPRING, SEARCH_COLORS, SEARCH_DOCKED_REVEAL_SPRING, SEARCH_FULLSCREEN_SPRING, SEARCH_TYPOGRAPHY, SearchTokens, } from "./search.tokens";
-export type { SearchProps, SearchStyleType, SearchVariant, } from "./search.types";
-export { SearchBar } from "./search-bar";
-export { useSearch } from "./search-context";
-export { SearchViewDocked } from "./search-view-docked";
-export { SearchViewFullScreen } from "./search-view-fullscreen";

package/dist/ui/search/search-bar.d.ts

@@ -1,32 +0,0 @@
-/**
- * @file search-bar.tsx
- * MD3 Expressive SearchBar — Collapsed state.
- *
- * Renders a pill-shaped search bar (CornerFull, h-56px).
- * When focused/clicked → calls onActiveChange(true) to open SearchView.
- *
- * Option B (MD3 morphing): SearchBar is wrapped in its own AnimatePresence
- * with mode="popLayout". When SearchView opens, SearchBar plays an exit
- * animation (opacity → 0, scale → 0.95) before unmounting, releasing the
- * shared layoutId so SearchView can claim it and morph from the same origin.
- *
- * Role: combobox (WAI-ARIA Search Combobox pattern).
- * @see https://www.w3.org/WAI/ARIA/apg/patterns/combobox/
- */
-import * as React from "react";
-import type { SearchInternalProps, SearchProps } from "./search.types";
-type SearchBarProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "className" | "aria-label"> & SearchInternalProps & {
-    /** KeyDown handler from useSearchKeyboard. */
-    onKeyDown: (e: React.KeyboardEvent) => void;
-    /** Currently highlighted suggestion index (-1 = none). */
-    activeIndex: number;
-};
-/**
- * SearchBar — collapsed state of the MD3 Search component.
- *
- * Uses Framer Motion `layout` + shared `layoutId` to morph into
- * SearchView when active. Wrapped in AnimatePresence with mode="popLayout"
- * so it exits (fades/scales out) before SearchView claims the layoutId.
- */
-export declare function SearchBar({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, placeholder, textAlign, className, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchBarProps): import("react/jsx-runtime").JSX.Element;
-export {};

package/dist/ui/search/search-context.d.ts

@@ -1,24 +0,0 @@
-import * as React from "react";
-/**
- * MD3 Expressive Search Context
- * Shared state for the Search orchestrator and its children.
- */
-interface SearchContextValue {
-    /** Unique ID for the results listbox, used for aria-controls. */
-    listboxId: string;
-    /** Currently highlighted suggestion index. -1 = none. */
-    activeIndex: number;
-}
-/**
- * Provider for Search component state.
- * Internal use only within the library.
- */
-export declare function SearchProvider({ children, value, }: {
-    children: React.ReactNode;
-    value: SearchContextValue;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * Hook to access Search state from children (e.g., search items).
- */
-export declare function useSearch(): SearchContextValue;
-export {};

package/dist/ui/search/search-view-docked.d.ts

@@ -1,25 +0,0 @@
-/**
- * @file search-view-docked.tsx
- * MD3 Expressive SearchView — Docked variant.
- *
- * Displays as a popup dropdown below the SearchBar.
- * Recommended for medium and large screens (tablets, desktops).
- *
- * Shape: CornerExtraLarge (rounded-[28px]) per SearchViewTokens.DockedContainerShape.
- * Header height: 56dp per SearchViewTokens.DockedHeaderContainerHeight.
- *
- * Animation (Option B — MD3 morphing):
- * - Shares `layoutId` with SearchBar. After SearchBar exits via its own
- *   AnimatePresence (mode="popLayout"), this view claims the layoutId and
- *   Framer Motion morphs the pill shape → rounded-[28px] container.
- * - Uses mode="popLayout" so SearchBar can re-enter after this exits.
- * - Focus: double-rAF pattern syncs focus with layout animation frame.
- */
-import * as React from "react";
-import type { SearchInternalProps, SearchProps } from "./search.types";
-type SearchViewDockedProps = Pick<SearchProps, "query" | "onQueryChange" | "onSearch" | "active" | "onActiveChange" | "leadingIcon" | "trailingIcon" | "placeholder" | "textAlign" | "styleType" | "hasGap" | "children" | "viewClassName" | "aria-label"> & SearchInternalProps & {
-    onKeyDown: (e: React.KeyboardEvent) => void;
-    activeIndex: number;
-};
-export declare function SearchViewDocked({ query, onQueryChange, onSearch, active, onActiveChange, leadingIcon, trailingIcon, placeholder, textAlign, styleType, hasGap, children, viewClassName, "aria-label": ariaLabel, searchId, listboxId, onKeyDown, activeIndex, }: SearchViewDockedProps): import("react/jsx-runtime").JSX.Element;
-export {};