@bug-on/md3-react 2.0.2 → 3.0.0

package/dist/ui/app-bar/hooks/use-flexible-app-bar.d.ts

@@ -1,37 +0,0 @@
-/**
- * @file use-flexible-app-bar.ts
- * Shared animation hook for MediumFlexibleAppBar and LargeFlexibleAppBar.
- *
- * Extracts common scroll-driven animation state to avoid duplication.
- */
-import type { MotionValue } from "motion/react";
-import type { RefObject } from "react";
-import type { AppBarColors } from "../app-bar.types";
-interface UseFlexibleAppBarOptions {
-    collapsedHeight: number;
-    expandedHeight: number;
-    scrollElement?: RefObject<HTMLElement | null>;
-    colors?: AppBarColors;
-    /** [start, end] progress range where large title fades from 1 → 0 */
-    largeTitleFadeRange: [number, number];
-    /** [start, end] progress range where small title fades from 0 → 1 */
-    smallTitleFadeRange: [number, number];
-    /** [start, end] progress range where subtitle fades from 1 → 0 */
-    subtitleFadeRange: [number, number];
-    /** [start, end] progress range where headerContent fades from 1 → 0 */
-    headerContentFadeRange: [number, number];
-    /** [expanded, collapsed] Y offset for large title */
-    largeTitleYRange: [number, number];
-}
-export interface FlexibleAppBarAnimationState {
-    height: MotionValue<number>;
-    currentBg: string;
-    cssTransition: string | undefined;
-    largeTitleOpacity: MotionValue<number>;
-    largeTitleY: MotionValue<number>;
-    smallTitleOpacity: MotionValue<number>;
-    subtitleOpacity: MotionValue<number>;
-    headerContentOpacity: MotionValue<number>;
-}
-export declare function useFlexibleAppBar({ collapsedHeight, expandedHeight, scrollElement, colors, largeTitleFadeRange, smallTitleFadeRange, subtitleFadeRange, headerContentFadeRange, largeTitleYRange, }: UseFlexibleAppBarOptions): FlexibleAppBarAnimationState;
-export {};

package/dist/ui/app-bar/large-flexible-app-bar.d.ts

@@ -1,26 +0,0 @@
-/**
- * @file large-flexible-app-bar.tsx
- * MD3 Expressive Large Flexible App Bar.
- *
- * Like MediumFlexibleAppBar but with larger typography.
- * Expanded height: 120px (no subtitle) / 152px (with subtitle)
- * Collapsed height: 64px
- * Title crossfade: DisplaySmall (expanded) ↔ TitleLarge (collapsed)
- *
- * @see docs/m3/app-bars/AppBarLargeFlexibleTokens.kt
- */
-import type { FlexibleAppBarProps } from "./app-bar.types";
-/**
- * MD3 Expressive Large Flexible App Bar.
- *
- * @example
- * ```tsx
- * <LargeFlexibleAppBar
- *   title="Discover"
- *   subtitle="Trending today"
- *   navigationIcon={<IconButton aria-label="Open menu"><Icon>menu</Icon></IconButton>}
- *   headerContent={<img src="/banner.jpg" alt="" className="rounded-xl h-20 w-full object-cover" />}
- * />
- * ```
- */
-export declare function LargeFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, }: FlexibleAppBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/app-bar/medium-flexible-app-bar.d.ts

@@ -1,28 +0,0 @@
-/**
- * @file medium-flexible-app-bar.tsx
- * MD3 Expressive Medium Flexible App Bar.
- *
- * Two-row layout in expanded state, collapses to single row on scroll.
- * Expanded height: 112px (no subtitle) / 136px (with subtitle)
- * Collapsed height: 64px
- * Title crossfade: HeadlineMedium (expanded) ↔ TitleLarge (collapsed)
- *
- * Supports `exitUntilCollapsed` scroll behavior only.
- *
- * @see docs/m3/app-bars/AppBarMediumFlexibleTokens.kt
- */
-import type { FlexibleAppBarProps } from "./app-bar.types";
-/**
- * MD3 Expressive Medium Flexible App Bar.
- *
- * @example
- * ```tsx
- * <MediumFlexibleAppBar
- *   title="Settings"
- *   subtitle="Manage your preferences"
- *   navigationIcon={<IconButton aria-label="Go back"><Icon>arrow_back</Icon></IconButton>}
- *   actions={<IconButton aria-label="More options"><Icon>more_vert</Icon></IconButton>}
- * />
- * ```
- */
-export declare function MediumFlexibleAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollElement, headerContent, collapsedHeight, expandedHeight, className, }: FlexibleAppBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,43 +0,0 @@
-/**
- * @file search-app-bar.tsx
- * MD3 Expressive Search App Bar.
- *
- * New variant in MD3 Expressive (May 2025).
- * Replaces the title area with a pill-shaped search bar.
- * Uses Framer Motion layoutId to enable shared element transition with <SearchView>.
- *
- * @see docs/m3/app-bars/AppBar.kt — SearchAppBar
- */
-import type { SearchAppBarProps } from "./app-bar.types";
-/**
- * MD3 Expressive Search App Bar.
- *
- * When the search bar is clicked, callers should open a `<SearchView>` overlay.
- * Uses Framer Motion `layoutId` (via `searchBarId`) for a smooth shared-element
- * transition between this bar and the search view.
- *
- * @example
- * ```tsx
- * const [searchOpen, setSearchOpen] = useState(false);
- *
- * <SearchAppBar
- *   searchBarId="main-search"
- *   searchPlaceholder="Search messages..."
- *   onSearchFocus={() => setSearchOpen(true)}
- *   trailingSearchActions={
- *     <IconButton aria-label="Voice search"><Icon>mic</Icon></IconButton>
- *   }
- *   externalActions={<Avatar src={user.avatar} />}
- * />
- *
- * <AnimatePresence>
- *   {searchOpen && (
- *     <SearchView
- *       searchBarId="main-search"
- *       onClose={() => setSearchOpen(false)}
- *     />
- *   )}
- * </AnimatePresence>
- * ```
- */
-export declare function SearchAppBar({ searchPlaceholder, searchValue, onSearchFocus, leadingSearchIcon, trailingSearchActions, externalActions, navigationIcon, colors, scrollBehavior, scrollElement, searchBarId, className, }: SearchAppBarProps): import("react/jsx-runtime").JSX.Element;

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

@@ -1,54 +0,0 @@
-/**
- * @file search-view.tsx
- * MD3 Expressive Search View.
- *
- * Full-screen overlay activated when a SearchAppBar's search bar is clicked.
- * Shares a Framer Motion `layoutId` with the SearchAppBar search bar for a
- * smooth shared element transition.
- *
- * Usage pattern:
- * ```tsx
- * const [open, setOpen] = useState(false);
- *
- * // In render:
- * <SearchAppBar searchBarId="main" onSearchFocus={() => setOpen(true)} />
- * <AnimatePresence>
- *   {open && <SearchView searchBarId="main" onClose={() => setOpen(false)} />}
- * </AnimatePresence>
- * ```
- *
- * Design notes:
- * - The SearchView is intentionally separate from SearchAppBar to allow consumers
- *   to customize the results/suggestions content without coupling.
- * - The `searchBarId` prop must match between SearchAppBar and SearchView to
- *   enable the shared element transition.
- * - Focus is moved to the search input when the view opens.
- * - Escape key closes the view and returns focus to the search bar.
- */
-import type { SearchViewProps } from "./app-bar.types";
-/**
- * MD3 Expressive Search View.
- *
- * Renders a full-screen search overlay with a shared element transition
- * from the triggering `<SearchAppBar>` search bar.
- *
- * Mount/unmount this component via `<AnimatePresence>` in the consumer.
- */
-export declare function SearchView({ searchBarId, value, onChange, onClose, placeholder, children, leadingIcon, trailingAction, className, }: SearchViewProps): import("react/jsx-runtime").JSX.Element;
-/**
- * Convenience wrapper that handles the AnimatePresence + open state.
- *
- * @example
- * ```tsx
- * <SearchBar
- *   isOpen={searchOpen}
- *   onClose={() => setSearchOpen(false)}
- *   searchBarId="main-search"
- * >
- *   <SearchResultsList results={results} />
- * </SearchBar>
- * ```
- */
-export declare function SearchViewContainer({ isOpen, ...props }: SearchViewProps & {
-    isOpen: boolean;
-}): import("react/jsx-runtime").JSX.Element;

package/dist/ui/app-bar/small-app-bar.d.ts

@@ -1,37 +0,0 @@
-/**
- * @file small-app-bar.tsx
- * MD3 Expressive Small App Bar.
- *
- * Single-row layout: [navigationIcon][title + subtitle][actions]
- * Height: 64px | Title: TitleLarge (22sp) | Subtitle: LabelMedium (12sp)
- *
- * Scroll behaviors:
- * - pinned: changes background color surface → surface-container
- * - enterAlways: slides up when scrolling down, slides down when scrolling up
- *
- * @see docs/m3/app-bars/AppBarSmallTokens.kt
- */
-import type { SmallAppBarProps } from "./app-bar.types";
-/**
- * MD3 Expressive Small App Bar.
- *
- * @example
- * ```tsx
- * // Left-aligned (default)
- * <SmallAppBar
- *   title="Inbox"
- *   navigationIcon={<IconButton aria-label="Go back"><Icon>arrow_back</Icon></IconButton>}
- *   actions={<IconButton aria-label="Search"><Icon>search</Icon></IconButton>}
- *   scrollBehavior="pinned"
- * />
- *
- * // Center-aligned with subtitle
- * <SmallAppBar
- *   title="Profile"
- *   subtitle="@username"
- *   titleAlignment="center"
- *   scrollBehavior="enterAlways"
- * />
- * ```
- */
-export declare function SmallAppBar({ title, subtitle, titleAlignment, navigationIcon, actions, colors, scrollBehavior, scrollElement, className, }: SmallAppBarProps): import("react/jsx-runtime").JSX.Element;

package/dist/ui/badge.d.ts

@@ -1,125 +0,0 @@
-/**
- * @file badge.tsx
- *
- * MD3 Expressive Badge component.
- *
- * - `Badge`      → A small status indicator. Can be a dot (no content) or labeled (with content).
- * - `BadgedBox`  → Positions a Badge at the top-trailing corner of an anchor element.
- *
- * @remarks
- * Token references (Kotlin source):
- * BadgeTokens — Size=6dp (→ 6px), LargeSize=16dp (→ 16px), Shape=CornerFull, Color=Error,
- * LargeLabelTextFont=LabelSmall, LargeLabelTextColor=OnError
- *
- * BadgedBox offsets:
- * - Small (dot):  BadgeOffset = 6dp             → translate(50%, -50%)
- * - Large (text): HOffset=12dp, VOffset=14dp   → translate(35%, -35%)
- *
- * Architecture:
- * - Styling: `cn` (clsx/tailwind-merge) + static Tailwind classes
- * - Animation: Framer Motion (`LazyMotion` + `domMax`) spring mount/unmount
- * - A11y: `role="status"` with `aria-label`, decorative dots use `aria-hidden="true"`
- *
- * @see https://m3.material.io/components/badge/overview
- */
-import * as React from "react";
-type SafeHTMLSpanAttrs = Omit<React.HTMLAttributes<HTMLSpanElement>, "onDrag" | "onDragStart" | "onDragEnd" | "onDragEnter" | "onDragLeave" | "onDragOver" | "onDrop">;
-export interface BadgeProps extends SafeHTMLSpanAttrs {
-    /**
-     * The content to display inside the badge.
-     * - Omitted / undefined → renders as a small 6×6px dot (decorative).
-     * - string | number    → renders as a large badge (min 16px height) with label.
-     *
-     * Numbers exceeding `max` are displayed as `{max}+`.
-     * Strings longer than 4 characters are truncated to 4.
-     */
-    children?: React.ReactNode;
-    /**
-     * Maximum numeric value to display before appending "+".
-     * Only applies when `children` is a number.
-     * @example max={99} + children={150} → "99+"
-     */
-    max?: number;
-    /**
-     * Override the background (container) color.
-     * Accepts any valid CSS color value.
-     * Defaults to MD3 `error` token — `bg-m3-error`.
-     */
-    containerColor?: string;
-    /**
-     * Override the text/content color.
-     * Accepts any valid CSS color value.
-     * Defaults to MD3 `on-error` token — `text-m3-on-error`.
-     */
-    contentColor?: string;
-}
-export interface BadgedBoxProps {
-    /**
-     * The badge element to overlay on the anchor.
-     * Typically a `<Badge />`.
-     */
-    badge: React.ReactNode;
-    /**
-     * The anchor content that the badge is attached to.
-     */
-    children: React.ReactNode;
-    /**
-     * Additional className applied to the outer wrapper `span`.
-     */
-    className?: string;
-    /**
-     * Explicitly override size detection for badge positioning.
-     * - `'small'` → BadgeOffset = 6dp → translate(50%, -50%)
-     * - `'large'` → HOffset=12dp/VOffset=14dp → translate(35%, -35%)
-     * When omitted, BadgedBox auto-detects by inspecting `badge` children prop.
-     */
-    badgeSize?: "small" | "large";
-}
-/**
- * MD3 Expressive Badge — dynamic status indicator.
- *
- * @example
- * ```tsx
- * // Small dot badge (no content) — decorative
- * <Badge />
- *
- * // Large badge with number (truncated at max)
- * <Badge max={99}>150</Badge>
- * // → displays "99+"
- *
- * // Large badge with text label
- * <Badge>NEW</Badge>
- *
- * // Custom colors
- * <Badge containerColor="#6750A4" contentColor="#FFFFFF">3</Badge>
- * ```
- *
- * @see https://m3.material.io/components/badge/overview
- */
-export declare const Badge: React.NamedExoticComponent<BadgeProps & React.RefAttributes<HTMLSpanElement>>;
-/**
- * MD3 BadgedBox — positions a Badge at the top-trailing corner of an anchor.
- *
- * Implements MD3 offset specs from Badge.kt:
- * - Small badge (dot): `BadgeOffset = 6dp` → translate(50%, -50%)
- * - Large badge (text): `BadgeWithContentHorizontalOffset = 12dp` / `VerticalOffset = 14dp`
- *   → translate(35%, -35%)
- *
- * Auto-detects badge size by inspecting the badge element's children prop,
- * or accepts an explicit `badgeSize` override.
- *
- * @example
- * ```tsx
- * // Small dot on mail icon
- * <BadgedBox badge={<Badge />}>
- *   <Icon name="mail" />
- * </BadgedBox>
- *
- * // Count badge on notification icon
- * <BadgedBox badge={<Badge max={99}>{count}</Badge>}>
- *   <Icon name="notifications" />
- * </BadgedBox>
- * ```
- */
-export declare function BadgedBox({ badge, children, className, badgeSize, }: BadgedBoxProps): import("react/jsx-runtime").JSX.Element;
-export {};

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

@@ -1,59 +0,0 @@
-import * as React from "react";
-/**
- * Thuộc tính truyền vào cho thành phần nhóm nút (Button Group).
- */
-export interface ButtonGroupProps extends React.FieldsetHTMLAttributes<HTMLFieldSetElement> {
-    /**
-     * Cấu trúc hiển thị của nhóm nút:
-     * - `standard`: Các nút cách xa và có khoảng cách độc lập với nhau (gap).
-     * - `connected`: Các nút nối liền khung viền với nhau để tạo thành dạng Segmented Button.
-     * @default "standard"
-     */
-    variant?: "standard" | "connected";
-    /**
-     * Hướng sắp xếp của các nút trong nhóm.
-     * @default "horizontal"
-     */
-    orientation?: "horizontal" | "vertical";
-    /**
-     * Đặt thành `true` nếu bạn muốn nhóm hiển thị dạng `standard` giãn đều lấp đầy toàn bộ khu vực chứa (container).
-     * @default false
-     */
-    fullWidth?: boolean;
-    /**
-     * Áp dụng thống nhất chung một kích thước (`size`) cho tất cả các con trong nhóm (ghi đè kích thước lẻ từng nút).
-     */
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
-    /**
-     * Bật/tắt hiệu ứng thu phóng độ rộng / khoảng đệm (Morphing Width) khi nhấn vào các nút (áp dụng cho nhóm `standard`).
-     * @default true
-     */
-    morphingWidth?: boolean;
-    /**
-     * Tự động hiển thị biểu tượng (icon) Check khi một nút trạng thái nằm trong nhóm được chỉ định là `selected={true}`.
-     * @default false
-     */
-    showCheck?: boolean;
-}
-/**
- * Component Nhóm Nút (Button Group) được sử dụng để gom nhóm nhiều nút có công năng tương tự lại với nhau.
- * Hỗ trợ tạo các bộ nút độc lập (Standard) hoặc khối liên kết liền mạch (Connected/Segmented Buttons).
- * Kế thừa cơ chế chuyển động kết hợp liền mạch của MD3 Expressive.
- *
- * @example
- * ```tsx
- * // Nhóm nút tiêu chuẩn rời rạc (Standard)
- * <ButtonGroup variant="standard">
- *   <Button>Lựa chọn 1</Button>
- *   <Button>Lựa chọn 2</Button>
- * </ButtonGroup>
- *
- * // Nhóm nút liền khối (Connected Segmented Button)
- * <ButtonGroup variant="connected" showCheck fullWidth>
- *   <Button variant="toggle" selected={view === "day"} onClick={() => setView("day")}>Ngày</Button>
- *   <Button variant="toggle" selected={view === "week"} onClick={() => setView("week")}>Tuần</Button>
- *   <Button variant="toggle" selected={view === "month"} onClick={() => setView("month")}>Tháng</Button>
- * </ButtonGroup>
- * ```
- */
-export declare const ButtonGroup: React.NamedExoticComponent<ButtonGroupProps & React.RefAttributes<HTMLFieldSetElement>>;

package/dist/ui/button.d.ts

@@ -1,148 +0,0 @@
-/**
- * @file button.tsx
- *
- * MD3 Expressive Button component.
- *
- * Spec: https://m3.material.io/components/buttons/overview
- * Sizing (May 2025):
- *   XS → h:32dp  | px: 12dp | icon: 18dp | gap: 8dp
- *   SM → h:40dp  | px: 16dp | icon: 20dp | gap: 8dp
- *   MD → h:56dp  | px: 24dp | icon: 24dp | gap: 8dp
- *   LG → h:96dp  | px: 48dp | icon: 32dp | gap: 12dp
- *   XL → h:136dp | px: 48dp | icon: 40dp | gap: 12dp
- */
-import type { HTMLMotionProps } from "motion/react";
-import * as React from "react";
-type MotionButtonProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
-/**
- * Base props shared between the standard and toggle button variants.
- *
- * @see {@link ButtonProps} for the complete discriminated union type.
- * @see https://m3.material.io/components/buttons/overview
- */
-export interface BaseButtonProps extends MotionButtonProps {
-    /**
-     * Visual style variant following MD3 color roles.
-     * @default "filled"
-     */
-    colorStyle?: "elevated" | "filled" | "tonal" | "outlined" | "text";
-    /**
-     * Color style applied when the toggle button is in the *selected* state.
-     * Only meaningful when `variant="toggle"`.
-     * Falls back to `"filled"` when not specified.
-     */
-    selectedColorStyle?: "elevated" | "filled" | "tonal" | "outlined" | "text";
-    /**
-     * Button size following MD3 Expressive size scale.
-     * @default "sm"
-     */
-    size?: "xs" | "sm" | "md" | "lg" | "xl";
-    /**
-     * Container shape — controls border-radius morphing.
-     * - `round`: pill shape (CornerFull), morphs to rounded-square when toggled.
-     * - `square`: rounded-square, morphs to pill when toggled.
-     * @default "round"
-     */
-    shape?: "round" | "square";
-    /**
-     * Optional leading or trailing icon node.
-     * Size is automatically scaled to match the button's `size` prop.
-     */
-    icon?: React.ReactNode;
-    /**
-     * Position of the icon relative to the label text.
-     * @default "leading"
-     */
-    iconPosition?: "leading" | "trailing";
-    /**
-     * When `true`, replaces the icon with an animated loading indicator
-     * and prevents interaction.
-     * @default false
-     */
-    loading?: boolean;
-    /**
-     * Controls which loading spinner is shown while `loading={true}`.
-     * - `loading-indicator`: MD3 Expressive morphing shape (default).
-     * - `circular`: Classic circular spinner.
-     * @default "loading-indicator"
-     */
-    loadingVariant?: "loading-indicator" | "circular";
-    /**
-     * When `true`, the Button renders its child element directly (using Radix Slot),
-     * merging all button props (className, style, event handlers) onto it.
-     * Useful for rendering a Next.js `<Link>` with Button styles.
-     *
-     * @example
-     * ```tsx
-     * <Button asChild size="lg">
-     *   <Link href="/components">Explore Components</Link>
-     * </Button>
-     * ```
-     * @default false
-     */
-    asChild?: boolean;
-    /** Button label — any React content, typically a string. */
-    children: React.ReactNode;
-}
-/**
- * Complete `Button` props — discriminated union that enforces
- * `selected` is only valid for `variant="toggle"`.
- *
- * @example
- * ```tsx
- * // Standard button
- * <Button colorStyle="filled" size="md">Confirm</Button>
- *
- * // Toggle button (selected state required)
- * <Button variant="toggle" selected={isActive} onClick={toggle}>Filter</Button>
- *
- * // With leading icon and loading state
- * <Button icon={<CheckIcon />} loading={isSubmitting}>Save</Button>
- * ```
- *
- * @see https://m3.material.io/components/buttons/overview
- */
-export type ButtonProps = BaseButtonProps & ({
-    variant?: "default";
-    selected?: never;
-} | {
-    variant: "toggle";
-    selected: boolean;
-});
-/**
- * MD3 Expressive Button component.
- *
- * Supports all five MD3 color styles, five sizes, shape morphing on toggle,
- * leading/trailing icons, and an animated loading state.
- *
- * @remarks
- * - `variant="toggle"` requires `selected: boolean` — enforced by the type system.
- * - When `loading={true}`, the button is visually dimmed, pointer events are
- *   blocked, and `aria-busy` is set for screen readers.
- * - Shape morphs smoothly between pill ↔ rounded-square when toggle state changes,
- *   using a critically-damped spring (no overshoot artefacts).
- *
- * @example
- * ```tsx
- * // Standard filled button
- * <Button colorStyle="filled" size="md">Confirm</Button>
- *
- * // Button with icon
- * <Button icon={<CheckIcon />} loading={isSubmitting}>Save</Button>
- *
- * // Toggle button
- * <Button variant="toggle" selected={isActive} onClick={toggle}>
- *   Filter
- * </Button>
- * ```
- *
- * @see https://m3.material.io/components/buttons/overview
- */
-export declare const Button: React.NamedExoticComponent<(Omit<BaseButtonProps & {
-    variant?: "default";
-    selected?: never;
-}, "ref"> | Omit<BaseButtonProps & {
-    variant: "toggle";
-    selected: boolean;
-}, "ref">) & React.RefAttributes<HTMLButtonElement>>;
-export {};

package/dist/ui/card.d.ts

@@ -1,62 +0,0 @@
-/**
- * @file card.tsx
- *
- * Thẻ Card của bộ khung MD3 Expressive.
- *
- * Phân chia làm hai khía cạnh chức năng (cấu trúc tham khảo từ con ruột Android Card.kt):
- * - **Tĩnh Lặng (Static)**    → đơn thuần mang thẻ `<div>`, yên tĩnh và không hề mảy may phản hồi có tương tác nào.
- * - **Có phản ứng (Interactive)** → được phù phép bằng `<motion.button>` hoặc `<motion.a>`, mang bùa Ripple vẫy sống cùng khả năng nhảy vọt elevation khi lướt lên.
- *
- * Nấc độ bóng Elevation levels (dịch từ các file mã ElevatedCardTokens / FilledCardTokens / OutlinedCardTokens / Elevation.kt):
- * - Level 0 = "none" (Bằng phẳng)
- * - Level 1 = box-shadow ~1dp (Hơi nhỉnh nổi nhẹ)
- * - Level 2 = box-shadow ~2dp (Bay lên cao xíu)
- *
- * @example
- * ```tsx
- * // Card tĩnh
- * <Card variant="elevated">
- *   <div className="p-4">Nội dung thẻ Card nhẹ nhàng</div>
- * </Card>
- *
- * // Card button tương tác
- * <Card variant="filled" onClick={() => alert('Đã nhấn!')}>
- *   <div className="p-4">Click vào đây em ei</div>
- * </Card>
- *
- * // Card làm thẻ Link a
- * <Card variant="outlined" href="/home">
- *   <div className="p-4">Click để chuyển trang</div>
- * </Card>
- * ```
- *
- * @see https://m3.material.io/components/cards/overview
- */
-import { type VariantProps } from "class-variance-authority";
-import type { HTMLMotionProps } from "motion/react";
-import * as React from "react";
-declare const cardVariants: (props?: ({
-    variant?: "outlined" | "elevated" | "filled" | null | undefined;
-} & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type MotionDivProps = Omit<HTMLMotionProps<"button">, "children" | "color">;
-export interface CardProps extends MotionDivProps, VariantProps<typeof cardVariants> {
-    /** Vô hiệu hóa tương tác và giảm opacity (MD3 disabled state). */
-    disabled?: boolean;
-    /**
-     * Buộc card trở thành interactive dù không có `onClick`.
-     * Hữu ích khi card chứa các element con là interactive.
-     */
-    interactive?: boolean;
-    /**
-     * Nếu có, card render thành thẻ `<a>`. Tự động kích hoạt interactive mode.
-     * Ưu tiên dùng `href` thay vì `onClick` khi điều hướng trang.
-     */
-    href?: string;
-    /** Target cho thẻ `<a>` (chỉ có hiệu lực khi `href` được cung cấp). */
-    target?: React.AnchorHTMLAttributes<HTMLAnchorElement>["target"];
-    /** rel cho thẻ `<a>` (tự động thêm `noreferrer` khi `target="_blank"`). */
-    rel?: string;
-    children?: React.ReactNode;
-}
-export declare const Card: React.NamedExoticComponent<Omit<CardProps, "ref"> & React.RefAttributes<HTMLElement>>;
-export {};