dishui 0.0.79 → 0.0.80

package/dist/components/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport { CardMetric, type CardMetricProps } from './Metric';\nexport type { CardMetricProps, CardMetricItem } from './Metric';\n\nexport type CardProps = {\n  children: React.ReactNode;\n  variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n  bordered?: boolean;\n  dash?: boolean;\n  side?: boolean;\n  imageFull?: boolean;\n  compact?: boolean;\n  hover?: boolean;\n  glass?: boolean; // 毛玻璃效果\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  className?: string;\n};\n\nconst Card = ({\n  children,\n  variant,\n  bordered = false,\n  dash = false,\n  side = false,\n  imageFull = false,\n  compact = false,\n  hover = true, // 默认启用 hover 效果\n  glass = true, // 默认启用毛玻璃效果\n  size = 'sm',\n  className = '',\n}: CardProps) => {\n  const baseClass = 'card';\n\n  // 默认样式：如果没有指定 variant，则应用毛玻璃效果和阴影\n  // 同时添加边界样式 (border + shadow)\n  const defaultStyles = glass && !variant ? 'glass shadow-lg' : '';\n\n  // 如果指定了 variant，使用该 variant 的背景色，并添加阴影\n  const variantClass = variant ? `bg-${variant} text-${variant}-content shadow-md` : '';\n\n  const borderedClass = bordered ? 'card-bordered' : '';\n  const dashClass = dash ? 'card-dash' : '';\n  const sideClass = side ? 'card-side' : '';\n  const imageFullClass = imageFull ? 'image-full' : '';\n  const compactClass = compact ? 'card-compact' : '';\n  const hoverClass = hover ? 'hover:shadow-xl transition-shadow duration-300' : '';\n  const sizeClass = size ? `card-${size}` : '';\n\n  // 宽度策略：\n  // 1. 如果用户指定了 w-/max-w-/min-w-，则完全使用用户的设置\n  // 2. 否则不设置固定宽度，让 Card 自然适应父容器（Grid 中自动填充，Flex 中根据内容）\n  const hasWidthClass = className.includes('w-') || className.match(/max-w-|min-w-/);\n  const widthClass = ''; // 不设置默认宽度，让布局决定\n\n  const cardClasses = cn(\n    baseClass,\n    widthClass,\n    defaultStyles,\n    variantClass,\n    borderedClass,\n    dashClass,\n    sideClass,\n    imageFullClass,\n    compactClass,\n    hoverClass,\n    sizeClass,\n    className\n  );\n\n  return (\n    <div className={cardClasses}>\n      {children}\n    </div>\n  );\n};\n\n// Card.Title 组件\nexport type CardTitleProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nconst CardTitle = ({\n  children,\n  className = '',\n}: CardTitleProps) => {\n  const titleClasses = cn('card-title', className);\n\n  return (\n    <h2 className={titleClasses}>\n      {children}\n    </h2>\n  );\n};\n\n// Card.Body 组件\nexport type CardBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nconst CardBody = ({\n  children,\n  className = '',\n}: CardBodyProps) => {\n  const bodyClasses = cn('card-body', className);\n\n  return (\n    <div className={bodyClasses}>\n      {children}\n    </div>\n  );\n};\n\n// Card.Actions 组件\nexport type CardActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n};\n\nconst CardActions = ({\n  children,\n  className = '',\n  justify = 'end',\n}: CardActionsProps) => {\n  const actionsClasses = cn(\n    'card-actions',\n    justify && `justify-${justify}`,\n    className\n  );\n\n  return (\n    <div className={actionsClasses}>\n      {children}\n    </div>\n  );\n};\n\n// Card.Figure 组件\nexport type CardFigureProps = {\n  children: React.ReactNode;\n  className?: string;\n  /**\n   * 图片填充方式（作用于内部 <img>）：\n   * - `cover`   等比裁切填满（默认，“撑满”）\n   * - `contain` 等比完整展示，可能留白\n   * - `fill`    拉伸填满（不保持比例）\n   */\n  fit?: 'cover' | 'contain' | 'fill';\n  /** 图片撑满整个 figure（w/h 100%）。card-side 时建议开启。 */\n  fill?: boolean;\n  /** 指定 figure 高度（数字按 px，支持 \"16rem\"/\"50%\" 等）；内部图片自动填满该高度 */\n  height?: number | string;\n};\n\nconst FIT_CLASS: Record<NonNullable<CardFigureProps['fit']>, string> = {\n  cover: '[&>img]:object-cover',\n  contain: '[&>img]:object-contain',\n  fill: '[&>img]:object-fill',\n};\n\nconst toCssSize = (value: number | string | undefined): string | undefined =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst CardFigure = ({\n  children,\n  className = '',\n  fit = 'cover',\n  fill = false,\n  height,\n}: CardFigureProps) => {\n  const figureClasses = cn(\n    'figure',\n    FIT_CLASS[fit],\n    // 撑满：figure 与内部 img 都占满可用空间\n    fill && 'w-full h-full [&>img]:h-full [&>img]:w-full',\n    // 指定高度：figure 定高，内部图片自动填满\n    height !== undefined && 'w-full [&>img]:h-full [&>img]:w-full',\n    className\n  );\n\n  return (\n    <figure className={figureClasses} style={height !== undefined ? { height: toCssSize(height) } : undefined}>\n      {children}\n    </figure>\n  );\n};\n\n// ─── 内部工具：复用基础 Card 的类名拼装逻辑 ──────────────────\n\ninterface CardClassOptions {\n    variant?: CardProps['variant'];\n    bordered?: boolean;\n    glass?: boolean;\n    className?: string;\n}\n\nconst buildCardClasses = ({ variant, bordered = false, glass = true, className = '' }: CardClassOptions) => {\n    const defaultStyles = glass && !variant ? 'glass shadow-lg' : '';\n    const variantClass = variant ? `bg-${variant} text-${variant}-content shadow-md` : '';\n    return cn('card', defaultStyles, variantClass, bordered && 'card-bordered', className);\n};\n\nconst ClockGlyph: React.FC<{ className?: string }> = ({ className }) => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" className={cn('h-4 w-4', className)} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path strokeLinecap=\"round\" d=\"M12 7v5l3 2\" />\n    </svg>\n);\n\n// ─── Card.Feature：特性卡（图标 + 标题 + 描述） ───────────────\n\nexport type CardFeatureProps = {\n    /** Icon node (usually a lucide / inline svg), rendered inside a tinted container. */\n    icon?: React.ReactNode;\n    /** Feature title. */\n    title: React.ReactNode;\n    /** Feature description rendered under the title. */\n    description?: React.ReactNode;\n    /** `vertical` centers everything with the icon on top; `horizontal` puts the icon at the left. */\n    layout?: 'vertical' | 'horizontal';\n    /** Icon container shape. Defaults to `circle` (vertical) / `square` (horizontal). */\n    iconShape?: 'circle' | 'square';\n    /** Extra content rendered under the description. */\n    children?: React.ReactNode;\n    /** Color variant (daisyUI). */\n    variant?: CardProps['variant'];\n    /** Show a border. */\n    bordered?: boolean;\n    /** Disable the default glass background. */\n    glass?: boolean;\n    /** Extra class names on the card. */\n    className?: string;\n    /** Click handler. */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst CardFeature: React.FC<CardFeatureProps> = ({\n    icon,\n    title,\n    description,\n    layout = 'vertical',\n    iconShape,\n    children,\n    variant,\n    bordered,\n    glass = true,\n    className = '',\n    onClick,\n}) => {\n    const shape = iconShape ?? (layout === 'vertical' ? 'circle' : 'square');\n    const iconBox = icon && (\n        <span\n            className={cn(\n                'flex shrink-0 items-center justify-center bg-primary/10 text-primary',\n                layout === 'vertical' ? 'size-16' : 'size-12',\n                shape === 'circle' ? 'rounded-full' : 'rounded-xl',\n            )}\n        >\n            {icon}\n        </span>\n    );\n\n    return (\n        <div\n            className={buildCardClasses({ variant, bordered, glass, className })}\n            onClick={onClick}\n        >\n            {layout === 'horizontal' ? (\n                <div className=\"card-body flex-row items-center gap-4\">\n                    {iconBox}\n                    <div className=\"min-w-0 flex-1\">\n                        <h3 className=\"font-semibold text-base-content\">{title}</h3>\n                        {description && (\n                            <p className=\"mt-0.5 text-sm text-base-content/70\">{description}</p>\n                        )}\n                        {children}\n                    </div>\n                </div>\n            ) : (\n                <div className=\"card-body items-center gap-3 text-center\">\n                    {iconBox}\n                    <h3 className=\"text-lg font-bold text-base-content\">{title}</h3>\n                    {description && (\n                        <p className=\"text-sm leading-relaxed text-base-content/70\">{description}</p>\n                    )}\n                    {children}\n                </div>\n            )}\n        </div>\n    );\n};\n\n// ─── Card.Quote：引用卡（引用文本 + 作者 / 日期 + 装饰引号） ──\n\nexport type CardQuoteProps = {\n    /** The quoted text. */\n    children: React.ReactNode;\n    /** Author name (rendered in primary color). */\n    author?: React.ReactNode;\n    /** Avatar node (e.g. an `<img>` or initial circle) shown before the author. */\n    avatar?: React.ReactNode;\n    /** Date string/node rendered at the right side of the footer. */\n    date?: React.ReactNode;\n    /** Hide the decorative quote glyph in the top-right corner. */\n    quoteMark?: boolean;\n    /** Hide the divider between quote and footer. */\n    divider?: boolean;\n    /** Color variant (daisyUI). */\n    variant?: CardProps['variant'];\n    /** Show a border. */\n    bordered?: boolean;\n    /** Disable the default glass background. */\n    glass?: boolean;\n    /** Extra class names on the card. */\n    className?: string;\n    /** Click handler. */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst CardQuote: React.FC<CardQuoteProps> = ({\n    children,\n    author,\n    avatar,\n    date,\n    quoteMark = true,\n    divider = true,\n    variant,\n    bordered,\n    glass = true,\n    className = '',\n    onClick,\n}) => (\n    <div\n        className={cn(\n            buildCardClasses({ variant, bordered, glass, className }),\n            'relative overflow-hidden',\n        )}\n        onClick={onClick}\n    >\n        {quoteMark && (\n            <span\n                aria-hidden=\"true\"\n                className=\"pointer-events-none absolute right-5 top-2 select-none font-serif text-6xl leading-none text-primary/25\"\n            >\n                ”\n            </span>\n        )}\n        <div className=\"card-body gap-0 p-6\">\n            <div className=\"relative z-10 text-lg text-base-content\">{children}</div>\n            <div\n                className={cn(\n                    'mt-4 flex items-center justify-between gap-3',\n                    divider && 'border-t border-base-300 pt-3.5',\n                )}\n            >\n                <div className=\"flex min-w-0 items-center gap-2.5\">\n                    {avatar && <span className=\"size-8 shrink-0 overflow-hidden rounded-full\">{avatar}</span>}\n                    {author && (\n                        <span className=\"truncate text-sm font-medium text-primary\">{author}</span>\n                    )}\n                </div>\n                {date && (\n                    <span className=\"flex shrink-0 items-center gap-1.5 text-sm text-base-content/55\">\n                        <ClockGlyph />\n                        {date}\n                    </span>\n                )}\n            </div>\n        </div>\n    </div>\n);\n\n// ─── Card.Meta：元信息卡（标题 + 徽章 + 描述 + 左右页脚） ────\n\nexport type CardMetaProps = {\n    /** Card title (top-left). */\n    title: React.ReactNode;\n    /** Badge / tag node (top-right, e.g. a visibility badge). */\n    badge?: React.ReactNode;\n    /** Body content under the title row. */\n    children?: React.ReactNode;\n    /** Footer left slot (e.g. `@author`). */\n    footerLeft?: React.ReactNode;\n    /** Footer right slot (e.g. a date). */\n    footerRight?: React.ReactNode;\n    /** Color variant (daisyUI). */\n    variant?: CardProps['variant'];\n    /** Show a border. */\n    bordered?: boolean;\n    /** Disable the default glass background. */\n    glass?: boolean;\n    /** Extra class names on the card. */\n    className?: string;\n    /** Click handler. */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst CardMeta: React.FC<CardMetaProps> = ({\n    title,\n    badge,\n    children,\n    footerLeft,\n    footerRight,\n    variant,\n    bordered,\n    glass = true,\n    className = '',\n    onClick,\n}) => (\n    <div\n        className={buildCardClasses({ variant, bordered, glass, className })}\n        onClick={onClick}\n    >\n        <div className=\"card-body gap-2.5 p-6\">\n            <div className=\"flex items-center justify-between gap-3\">\n                <h3 className=\"min-w-0 flex-1 truncate text-lg font-bold text-base-content\">{title}</h3>\n                {badge && <span className=\"shrink-0\">{badge}</span>}\n            </div>\n            {children && <div className=\"text-sm text-base-content/75\">{children}</div>}\n            {(footerLeft || footerRight) && (\n                <div className=\"mt-1.5 flex items-center justify-between gap-3 text-sm text-base-content/55\">\n                    <span className=\"min-w-0 truncate\">{footerLeft}</span>\n                    <span className=\"shrink-0\">{footerRight}</span>\n                </div>\n            )}\n        </div>\n    </div>\n);\n\n// ─── Card.Info：指标卡（标签 + 数值 + 可选图标 / hint / 加载态） ──\n\nexport type CardInfoTone = 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral';\n\nexport type CardInfoProps = {\n    /** Metric name (top-left, small muted text). */\n    label: React.ReactNode;\n    /** Metric value (number or short text). */\n    value: React.ReactNode;\n    /** Icon node, auto-sized and tinted by tone. */\n    icon?: React.ReactNode;\n    /** `top` (default) puts the icon at the right of the label row; `left` puts it on the left (horizontal layout). */\n    iconPosition?: 'top' | 'left';\n    /** 图标底框形状：`square`（默认，方形圆角）/ `circle`（正圆）。 */\n    iconShape?: 'square' | 'circle';\n    /** 是否给图标加色调底框（默认 `true`）；`false` 时渲染不带底框、仅保留 tone 文字色的裸图标。 */\n    iconBoxed?: boolean;\n    /** Tone (icon text & background color). */\n    tone?: CardInfoTone;\n    /** Small hint text below the value (e.g. deltas, update time). */\n    hint?: React.ReactNode;\n    /** Loading state: value renders as a skeleton. */\n    loading?: boolean;\n    /** Color variant (daisyUI). */\n    variant?: CardProps['variant'];\n    /** Show a border (default true). */\n    bordered?: boolean;\n    /** Enable the glass background (default false — solid `bg-base-200`). */\n    glass?: boolean;\n    /** Extra class names on the card. */\n    className?: string;\n    /** Click handler. */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst INFO_TONE_CLASS: Record<NonNullable<CardInfoProps['tone']>, { text: string; bg: string }> = {\n    primary: { text: 'text-primary', bg: 'bg-primary/10' },\n    success: { text: 'text-success', bg: 'bg-success/10' },\n    warning: { text: 'text-warning', bg: 'bg-warning/10' },\n    info: { text: 'text-info', bg: 'bg-info/10' },\n    error: { text: 'text-error', bg: 'bg-error/10' },\n    neutral: { text: 'text-base-content/70', bg: 'bg-base-content/5' },\n};\n\nconst CardInfo: React.FC<CardInfoProps> = ({\n    label,\n    value,\n    icon,\n    iconPosition = 'top',\n    iconShape = 'square',\n    iconBoxed = true,\n    tone = 'primary',\n    hint,\n    loading = false,\n    variant,\n    bordered = true,\n    glass = false,\n    className = '',\n    onClick,\n}) => {\n    const t = INFO_TONE_CLASS[tone];\n    const cardClasses = buildCardClasses({ variant, bordered, glass, className: cn('bg-base-200 p-4', className) });\n\n    const iconShapeClass = iconShape === 'circle' ? 'rounded-full' : iconPosition === 'left' ? 'rounded-lg' : 'rounded-md';\n\n    // 带色调底框的图标容器\n    const boxedIcon = icon && (\n        <span\n            className={cn(\n                iconPosition === 'left'\n                    ? 'flex shrink-0 items-center justify-center p-2.5 [&>svg]:h-5 [&>svg]:w-5'\n                    : 'p-1.5 [&>svg]:h-4 [&>svg]:w-4',\n                iconShapeClass,\n                t.bg,\n                t.text,\n            )}\n        >\n            {icon}\n        </span>\n    );\n\n    // 裸图标：无底框，仅 tone 文字色\n    const bareIcon = icon && (\n        <span\n            className={cn(\n                iconPosition === 'left' ? 'flex shrink-0' : 'inline-flex',\n                '[&>svg]:h-6 [&>svg]:w-6',\n                t.text,\n            )}\n        >\n            {icon}\n        </span>\n    );\n\n    // 图标在左、文字居右的水平布局\n    if (iconPosition === 'left') {\n        return (\n            <div\n                className={cn(cardClasses, 'transition-shadow duration-300 hover:shadow-xl')}\n                onClick={onClick}\n            >\n                <div className=\"flex items-center gap-3\">\n                    {iconBoxed ? boxedIcon : bareIcon}\n                    <div className=\"min-w-0 flex-1\">\n                        <span className=\"block truncate text-xs font-medium text-base-content/60\">{label}</span>\n                        {loading ? (\n                            <div className=\"mt-1 h-6 w-14 animate-pulse rounded bg-base-content/10\" />\n                        ) : (\n                            <p className=\"truncate text-xl font-bold leading-tight text-base-content\">{value}</p>\n                        )}\n                        {hint && <p className=\"mt-0.5 truncate text-[11px] text-base-content/50\">{hint}</p>}\n                    </div>\n                </div>\n            </div>\n        );\n    }\n\n    return (\n        <div\n            className={cn(cardClasses, 'transition-shadow duration-300 hover:shadow-xl')}\n            onClick={onClick}\n        >\n            <div className=\"mb-2 flex items-center justify-between gap-2\">\n                <span className=\"truncate text-xs font-medium text-base-content/60\">{label}</span>\n                {iconBoxed ? boxedIcon : bareIcon}\n            </div>\n            {loading ? (\n                <div className=\"h-7 w-14 animate-pulse rounded bg-base-content/10\" />\n            ) : (\n                <p className=\"text-2xl font-bold leading-none text-base-content\">{value}</p>\n            )}\n            {hint && <p className=\"mt-1.5 text-[11px] text-base-content/50\">{hint}</p>}\n        </div>\n    );\n};\n\n// ─── Card.Stat：统计面板（Grafana 风格：超大数值 + 迷你图 / 角标 / 填充色） ───\n\nexport type CardStatProps = {\n    /** 面板标签 */\n    label: React.ReactNode;\n    /** 面板数值（数字或短文本） */\n    value: React.ReactNode;\n    /** 色调（决定数值文字色 / 角标三角 / filled 底色） */\n    tone?: CardInfoTone;\n    /** 加载态：值显示为骨架 */\n    loading?: boolean;\n    className?: string;\n    /** 数值单位后缀（如 `K`、`%`），以小号字体渲染在数值右侧。 */\n    unit?: React.ReactNode;\n    /** 面板数值字号，默认 `xl`。 */\n    valueSize?: 'md' | 'lg' | 'xl' | '2xl';\n    /** 面板内容对齐，默认 `left`。 */\n    align?: 'left' | 'center';\n    /** 直接传入迷你图节点（优先于 sparklineData）。 */\n    sparkline?: React.ReactNode;\n    /** 迷你图数据：传入数值数组后自动渲染 sparkline。 */\n    sparklineData?: number[];\n    /** 迷你图类型：折线 / 面积 / 柱状。 */\n    sparklineType?: 'line' | 'area' | 'bar';\n    /** 迷你图高度（px）。 */\n    sparklineHeight?: number;\n    /** 右上角状态三角（Grafana 阈值指示）。 */\n    indicator?: boolean;\n    /** 整卡填充 tone 底色、文字用对应 content 色（图 RabbitMQ 风格）。 */\n    filled?: boolean;\n    /** 点击回调（面板常用于跳转详情）。 */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst STAT_TONE_TEXT_CLASS: Record<NonNullable<CardStatProps['tone']>, string> = {\n    primary: 'text-primary',\n    success: 'text-success',\n    warning: 'text-warning',\n    info: 'text-info',\n    error: 'text-error',\n    neutral: 'text-base-content/70',\n};\n\n/** filled 模式：整卡 tone 底色 + 对应 content 文字色 */\nconst STAT_FILLED_CLASS: Record<NonNullable<CardStatProps['tone']>, string> = {\n    primary: 'bg-primary text-primary-content',\n    success: 'bg-success text-success-content',\n    warning: 'bg-warning text-warning-content',\n    info: 'bg-info text-info-content',\n    error: 'bg-error text-error-content',\n    neutral: 'bg-neutral text-neutral-content',\n};\n\nconst STAT_VALUE_SIZE_CLASS: Record<NonNullable<CardStatProps['valueSize']> & string, string> = {\n    md: 'text-2xl',\n    lg: 'text-4xl',\n    xl: 'text-5xl',\n    '2xl': 'text-6xl',\n};\n\nconst statCssVarColor = (tone: NonNullable<CardStatProps['tone']>) =>\n    tone === 'neutral' ? 'var(--color-base-content)' : `var(--color-${tone})`;\n\n/** 由数值数组生成迷你图（viewBox 拉伸铺满，描边不随宽度变形） */\nconst MiniSparkline: React.FC<{\n    data: number[];\n    type: 'line' | 'area' | 'bar';\n    height: number;\n}> = ({ data, type, height }) => {\n    if (!data || data.length < 2) return null;\n    const w = 100;\n    const pad = 3;\n    const min = Math.min(...data);\n    const max = Math.max(...data);\n    const range = max - min || 1;\n    const px = (i: number) => (i / (data.length - 1)) * w;\n    const py = (v: number) => height - pad - ((v - min) / range) * (height - pad * 2);\n    const points = data.map((v, i) => `${px(i).toFixed(2)},${py(v).toFixed(2)}`);\n\n    if (type === 'bar') {\n        const bw = w / data.length;\n        return (\n            <svg\n                viewBox={`0 0 ${w} ${height}`}\n                preserveAspectRatio=\"none\"\n                className=\"block w-full\"\n                style={{ height }}\n                aria-hidden=\"true\"\n            >\n                {data.map((v, i) => (\n                    <rect\n                        key={i}\n                        x={px(i) - bw / 2}\n                        y={py(v)}\n                        width={bw * 0.8}\n                        height={Math.max(1, height - pad - py(v))}\n                        fill=\"currentColor\"\n                    />\n                ))}\n            </svg>\n        );\n    }\n\n    if (type === 'area') {\n        return (\n            <svg\n                viewBox={`0 0 ${w} ${height}`}\n                preserveAspectRatio=\"none\"\n                className=\"block w-full\"\n                style={{ height }}\n                aria-hidden=\"true\"\n            >\n                <path\n                    d={`M0,${height} L${points.join(' L')} L${w},${height} Z`}\n                    fill=\"currentColor\"\n                    opacity={0.18}\n                />\n                <polyline\n                    points={points.join(' ')}\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={1.5}\n                    vectorEffect=\"non-scaling-stroke\"\n                />\n            </svg>\n        );\n    }\n\n    return (\n        <svg\n            viewBox={`0 0 ${w} ${height}`}\n            preserveAspectRatio=\"none\"\n            className=\"block w-full\"\n            style={{ height }}\n            aria-hidden=\"true\"\n        >\n            <polyline\n                points={points.join(' ')}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={1.5}\n                vectorEffect=\"non-scaling-stroke\"\n            />\n        </svg>\n    );\n};\n\n/**\n * 统计面板：Grafana stat panel 风格的「标签 + 超大数值 + 迷你图」小卡，\n * 支持单位后缀、折线 / 面积 / 柱状迷你图、角标状态三角与整卡填充色。\n *\n * 简单的「标签 + 数值 + 图标」指标卡请使用 `Card.Info`。\n */\nconst CardStat: React.FC<CardStatProps> = ({\n    label,\n    value,\n    tone = 'primary',\n    loading = false,\n    className = '',\n    unit,\n    valueSize = 'xl',\n    align = 'left',\n    sparkline,\n    sparklineData,\n    sparklineType = 'line',\n    sparklineHeight = 36,\n    indicator = false,\n    filled = false,\n    onClick,\n}) => {\n    const sparklineNode =\n        sparkline ??\n        (sparklineData && sparklineData.length >= 2 ? (\n            <MiniSparkline data={sparklineData} type={sparklineType} height={sparklineHeight} />\n        ) : null);\n\n    const textColor = filled ? '' : STAT_TONE_TEXT_CLASS[tone];\n    const mutedText = filled ? 'opacity-80' : 'text-base-content/60';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`relative flex flex-col overflow-hidden rounded-lg p-3 ${\n                filled ? STAT_FILLED_CLASS[tone] : 'border border-base-300/60 bg-base-200'\n            } ${onClick ? 'cursor-pointer transition-colors hover:border-primary/40' : ''} ${className}`.trim()}\n        >\n            {indicator && !filled && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"absolute right-0 top-0 h-0 w-0\"\n                    style={{\n                        borderTop: '14px solid ' + statCssVarColor(tone),\n                        borderLeft: '14px solid transparent',\n                    }}\n                />\n            )}\n            <div\n                className={`truncate text-xs font-medium ${mutedText} ${align === 'center' ? 'text-center' : ''}`.trim()}\n            >\n                {label}\n            </div>\n            <div\n                className={`flex min-h-[3rem] flex-1 items-center py-1 ${align === 'center' ? 'justify-center' : 'justify-start'}`}\n            >\n                {loading ? (\n                    <span\n                        className={`inline-block h-8 w-16 animate-pulse rounded ${\n                            filled ? 'bg-white/25' : 'bg-base-content/10'\n                        }`}\n                    />\n                ) : (\n                    <span className={`leading-none tracking-tight ${STAT_VALUE_SIZE_CLASS[valueSize]} font-semibold ${filled ? '' : textColor}`.trim()}>\n                        {value}\n                        {unit !== undefined && unit !== null && unit !== '' && (\n                            <span className=\"ml-0.5 text-[0.45em] font-semibold\">{unit}</span>\n                        )}\n                    </span>\n                )}\n            </div>\n            {sparklineNode && (\n                <div className={`-mx-3 -mb-3 mt-1 ${filled ? 'text-white' : STAT_TONE_TEXT_CLASS[tone]}`}>\n                    {sparklineNode}\n                </div>\n            )}\n        </div>\n    );\n};\n\n// 扩展Card组件，添加子组件\ninterface CardCompound extends React.FC<CardProps> {\n    Metric: React.FC<CardMetricProps>;\n    Title: React.FC<CardTitleProps>;\n    Body: React.FC<CardBodyProps>;\n    Actions: React.FC<CardActionsProps>;\n    Figure: React.FC<CardFigureProps>;\n    /** 特性卡：图标 + 标题 + 描述（垂直居中 / 横向两种布局） */\n    Feature: React.FC<CardFeatureProps>;\n    /** 引用卡：引用文本 + 作者头像 / 日期 + 装饰引号 */\n    Quote: React.FC<CardQuoteProps>;\n    /** 元信息卡：标题 + 徽章 + 描述 + 左右页脚 */\n    Meta: React.FC<CardMetaProps>;\n    /** 指标卡：标签 + 数值 + 可选图标 / hint / 加载态（仪表盘统计卡片） */\n    Info: React.FC<CardInfoProps>;\n    /** 统计面板：Grafana 风格超大数值 + 迷你折线 / 面积 / 柱状图 / 角标 / 填充色 */\n    Stat: React.FC<CardStatProps>;\n}\n\nconst CardWithCompounds = Card as CardCompound;\nCardWithCompounds.Title = CardTitle;\nCardWithCompounds.Body = CardBody;\nCardWithCompounds.Actions = CardActions;\nCardWithCompounds.Figure = CardFigure;\nCardWithCompounds.Feature = CardFeature;\nCardWithCompounds.Quote = CardQuote;\nCardWithCompounds.Meta = CardMeta;\nCardWithCompounds.Info = CardInfo;\nCardWithCompounds.Stat = CardStat;\nCardWithCompounds.Metric = CardMetric;\n\nexport default CardWithCompounds; "],"mappings":";;;;;AAmBA,IAAM,KAAQ,EACZ,aACA,YACA,cAAW,IACX,UAAO,IACP,UAAO,IACP,eAAY,IACZ,aAAU,IACV,WAAQ,IACR,WAAQ,IACR,UAAO,MACP,eAAY,SACG;CACf,IAIM,IAAgB,KAAS,CAAC,IAAU,oBAAoB,IAGxD,IAAe,IAAU,MAAM,EAAQ,QAAQ,EAAQ,sBAAsB,IAE7E,IAAgB,IAAW,kBAAkB,IAC7C,IAAY,IAAO,cAAc,IACjC,IAAY,IAAO,cAAc,IACjC,IAAiB,IAAY,eAAe,IAC5C,IAAe,IAAU,iBAAiB,IAC1C,IAAa,IAAQ,mDAAmD,IACxE,IAAY,IAAO,QAAQ,MAAS;CAKpB,EAAU,SAAS,IAAI,KAAK,EAAU,MAAM,eAAe;CAGjF,IAAM,IAAc,EAClB,QACA,IACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,GACA,CACF;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EACb;CACE,CAAA;AAET,GAQM,KAAa,EACjB,aACA,eAAY,SACQ;CACpB,IAAM,IAAe,EAAG,cAAc,CAAS;CAE/C,OACE,kBAAC,MAAD;EAAI,WAAW;EACZ;CACC,CAAA;AAER,GAQM,KAAY,EAChB,aACA,eAAY,SACO;CACnB,IAAM,IAAc,EAAG,aAAa,CAAS;CAE7C,OACE,kBAAC,OAAD;EAAK,WAAW;EACb;CACE,CAAA;AAET,GASM,KAAe,EACnB,aACA,eAAY,IACZ,aAAU,YACY;CACtB,IAAM,IAAiB,EACrB,gBACA,KAAW,WAAW,KACtB,CACF;CAEA,OACE,kBAAC,OAAD;EAAK,WAAW;EACb;CACE,CAAA;AAET,GAmBM,IAAiE;CACrE,OAAO;CACP,SAAS;CACT,MAAM;AACR,GAEM,KAAa,MACjB,OAAO,KAAU,WAAW,GAAG,EAAM,MAAM,GAEvC,KAAc,EAClB,aACA,eAAY,IACZ,SAAM,SACN,UAAO,IACP,gBACqB;CACrB,IAAM,IAAgB,EACpB,UACA,EAAU,IAEV,KAAQ,+CAER,MAAW,KAAA,KAAa,wCACxB,CACF;CAEA,OACE,kBAAC,UAAD;EAAQ,WAAW;EAAe,OAAO,MAAW,KAAA,IAA4C,KAAA,IAAhC,EAAE,QAAQ,EAAU,CAAM,EAAE;EACzF;CACK,CAAA;AAEZ,GAWM,KAAoB,EAAE,YAAS,cAAW,IAAO,WAAQ,IAAM,eAAY,SAA2B;CACxG,IAAM,IAAgB,KAAS,CAAC,IAAU,oBAAoB,IACxD,IAAe,IAAU,MAAM,EAAQ,QAAQ,EAAQ,sBAAsB;CACnF,OAAO,EAAG,QAAQ,GAAe,GAAc,KAAY,iBAAiB,CAAS;AACzF,GAEM,KAAgD,EAAE,mBACpD,kBAAC,OAAD;CAAK,OAAM;CAA6B,WAAW,EAAG,WAAW,CAAS;CAAG,MAAK;CAAO,SAAQ;CAAY,QAAO;CAAe,aAAa;CAAhJ,UAAA,CACI,kBAAC,UAAD;EAAQ,IAAG;EAAK,IAAG;EAAK,GAAE;CAAK,CAAA,GAC/B,kBAAC,QAAD;EAAM,eAAc;EAAQ,GAAE;CAAe,CAAA,CAC5C;IA8BH,KAA2C,EAC7C,SACA,UACA,gBACA,YAAS,YACT,cACA,aACA,YACA,aACA,WAAQ,IACR,eAAY,IACZ,iBACE;CAEF,IAAM,IAAU,KACZ,kBAAC,QAAD;EACI,WAAW,EACP,wEACA,MAAW,aAAa,YAAY,YALlC,MAAc,MAAW,aAAa,WAAW,eAMzC,WAAW,iBAAiB,YAC1C;EAEC,UAAA;CACC,CAAA;CAGV,OACI,kBAAC,OAAD;EACI,WAAW,EAAiB;GAAE;GAAS;GAAU;GAAO;EAAU,CAAC;EAC1D;EAER,UAAA,MAAW,eACR,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACK,GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,kBAAC,MAAD;MAAI,WAAU;MAAmC,UAAA;KAAU,CAAA;KAC1D,KACG,kBAAC,KAAD;MAAG,WAAU;MAAuC,UAAA;KAAe,CAAA;KAEtE;IACA;GACJ,CAAA,CAAA;EAEL,CAAA,IAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA;IACK;IACD,kBAAC,MAAD;KAAI,WAAU;KAAuC,UAAA;IAAU,CAAA;IAC9D,KACG,kBAAC,KAAD;KAAG,WAAU;KAAgD,UAAA;IAAe,CAAA;IAE/E;GACA;;CAER,CAAA;AAEb,GA6BM,KAAuC,EACzC,aACA,WACA,WACA,SACA,eAAY,IACZ,aAAU,IACV,YACA,aACA,WAAQ,IACR,eAAY,IACZ,iBAEA,kBAAC,OAAD;CACI,WAAW,EACP,EAAiB;EAAE;EAAS;EAAU;EAAO;CAAU,CAAC,GACxD,0BACJ;CACS;CALb,UAAA,CAOK,KACG,kBAAC,QAAD;EACI,eAAY;EACZ,WAAU;EACb,UAAA;CAEK,CAAA,GAEV,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA,CACI,kBAAC,OAAD;GAAK,WAAU;GAA2C;EAAc,CAAA,GACxE,kBAAC,OAAD;GACI,WAAW,EACP,gDACA,KAAW,iCACf;GAJJ,UAAA,CAMI,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACK,KAAU,kBAAC,QAAD;KAAM,WAAU;KAAgD,UAAA;IAAa,CAAA,GACvF,KACG,kBAAC,QAAD;KAAM,WAAU;KAA6C,UAAA;IAAa,CAAA,CAE7E;GACJ,CAAA,GAAA,KACG,kBAAC,QAAD;IAAM,WAAU;IAAhB,UAAA,CACI,kBAAC,GAAD,CAAa,CAAA,GACZ,CACC;GAET,CAAA,CAAA;EACJ,CAAA,CAAA;CACJ,CAAA,CAAA;IA4BH,KAAqC,EACvC,UACA,UACA,aACA,eACA,gBACA,YACA,aACA,WAAQ,IACR,eAAY,IACZ,iBAEA,kBAAC,OAAD;CACI,WAAW,EAAiB;EAAE;EAAS;EAAU;EAAO;CAAU,CAAC;CAC1D;CAET,UAAA,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;GACI,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,kBAAC,MAAD;KAAI,WAAU;KAA+D,UAAA;IAAU,CAAA,GACtF,KAAS,kBAAC,QAAD;KAAM,WAAU;KAAY,UAAA;IAAY,CAAA,CACjD;;GACJ,KAAY,kBAAC,OAAD;IAAK,WAAU;IAAgC;GAAc,CAAA;IACxE,KAAc,MACZ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,kBAAC,QAAD;KAAM,WAAU;KAAoB,UAAA;IAAiB,CAAA,GACrD,kBAAC,QAAD;KAAM,WAAU;KAAY,UAAA;IAAkB,CAAA,CAC7C;;EAER;;AACJ,CAAA,GAsCH,IAA4F;CAC9F,SAAS;EAAE,MAAM;EAAgB,IAAI;CAAgB;CACrD,SAAS;EAAE,MAAM;EAAgB,IAAI;CAAgB;CACrD,SAAS;EAAE,MAAM;EAAgB,IAAI;CAAgB;CACrD,MAAM;EAAE,MAAM;EAAa,IAAI;CAAa;CAC5C,OAAO;EAAE,MAAM;EAAc,IAAI;CAAc;CAC/C,SAAS;EAAE,MAAM;EAAwB,IAAI;CAAoB;AACrE,GAEM,KAAqC,EACvC,UACA,UACA,SACA,kBAAe,OACf,eAAY,UACZ,eAAY,IACZ,UAAO,WACP,SACA,aAAU,IACV,YACA,cAAW,IACX,WAAQ,IACR,eAAY,IACZ,iBACE;CACF,IAAM,IAAI,EAAgB,IACpB,IAAc,EAAiB;EAAE;EAAS;EAAU;EAAO,WAAW,EAAG,mBAAmB,CAAS;CAAE,CAAC,GAKxG,IAAY,KACd,kBAAC,QAAD;EACI,WAAW,EACP,MAAiB,SACX,4EACA,iCARK,MAAc,WAAW,iBAAiB,MAAiB,SAAS,eAAe,cAU9F,EAAE,IACF,EAAE,IACN;EAEC,UAAA;CACC,CAAA,GAIJ,IAAW,KACb,kBAAC,QAAD;EACI,WAAW,EACP,MAAiB,SAAS,kBAAkB,eAC5C,2BACA,EAAE,IACN;EAEC,UAAA;CACC,CAAA;CA0BV,OAtBI,MAAiB,SAEb,kBAAC,OAAD;EACI,WAAW,EAAG,GAAa,gDAAgD;EAClE;EAET,UAAA,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACK,IAAY,IAAY,GACzB,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA;KACI,kBAAC,QAAD;MAAM,WAAU;MAA2D,UAAA;KAAY,CAAA;KACtF,IACG,kBAAC,OAAD,EAAK,WAAU,yDAA0D,CAAA,IAEzE,kBAAC,KAAD;MAAG,WAAU;MAA8D,UAAA;KAAS,CAAA;KAEvF,KAAQ,kBAAC,KAAD;MAAG,WAAU;MAAoD,UAAA;KAAQ,CAAA;IACjF;GACJ,CAAA,CAAA;;CACJ,CAAA,IAKT,kBAAC,OAAD;EACI,WAAW,EAAG,GAAa,gDAAgD;EAClE;EAFb,UAAA;GAII,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACI,kBAAC,QAAD;KAAM,WAAU;KAAqD,UAAA;IAAY,CAAA,GAChF,IAAY,IAAY,CACxB;;GACJ,IACG,kBAAC,OAAD,EAAK,WAAU,oDAAqD,CAAA,IAEpE,kBAAC,KAAD;IAAG,WAAU;IAAqD,UAAA;GAAS,CAAA;GAE9E,KAAQ,kBAAC,KAAD;IAAG,WAAU;IAA2C,UAAA;GAAQ,CAAA;EACxE;;AAEb,GAoCM,IAA2E;CAC7E,SAAS;CACT,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO;CACP,SAAS;AACb,GAGM,IAAwE;CAC1E,SAAS;CACT,SAAS;CACT,SAAS;CACT,MAAM;CACN,OAAO;CACP,SAAS;AACb,GAEM,IAA0F;CAC5F,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,OAAO;AACX,GAEM,KAAmB,MACrB,MAAS,YAAY,8BAA8B,eAAe,EAAK,IAGrE,KAIA,EAAE,SAAM,SAAM,gBAAa;CAC7B,IAAI,CAAC,KAAQ,EAAK,SAAS,GAAG,OAAO;CACrC,IAEM,IAAM,KAAK,IAAI,GAAG,CAAI,GAEtB,IADM,KAAK,IAAI,GAAG,CACV,IAAM,KAAO,GACrB,KAAM,MAAe,KAAK,EAAK,SAAS,KAAM,KAC9C,KAAM,MAAc,IAAS,KAAQ,IAAI,KAAO,KAAU,IAAS,IACnE,IAAS,EAAK,KAAK,GAAG,MAAM,GAAG,EAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAG,CAAC,CAAC,CAAC,QAAQ,CAAC,GAAG;CAE3E,IAAI,MAAS,OAAO;EAChB,IAAM,IAAK,MAAI,EAAK;EACpB,OACI,kBAAC,OAAD;GACI,SAAS,WAAY;GACrB,qBAAoB;GACpB,WAAU;GACV,OAAO,EAAE,UAAO;GAChB,eAAY;GAEX,UAAA,EAAK,KAAK,GAAG,MACV,kBAAC,QAAD;IAEI,GAAG,EAAG,CAAC,IAAI,IAAK;IAChB,GAAG,EAAG,CAAC;IACP,OAAO,IAAK;IACZ,QAAQ,KAAK,IAAI,GAAG,IAAS,IAAM,EAAG,CAAC,CAAC;IACxC,MAAK;GACR,GANQ,CAMR,CACJ;EACA,CAAA;CAEb;CA2BA,OAzBI,MAAS,SAEL,kBAAC,OAAD;EACI,SAAS,WAAY;EACrB,qBAAoB;EACpB,WAAU;EACV,OAAO,EAAE,UAAO;EAChB,eAAY;EALhB,UAAA,CAOI,kBAAC,QAAD;GACI,GAAG,MAAM,EAAO,IAAI,EAAO,KAAK,IAAI,EAAE,QAAS,EAAO;GACtD,MAAK;GACL,SAAS;EACZ,CAAA,GACD,kBAAC,YAAD;GACI,QAAQ,EAAO,KAAK,GAAG;GACvB,MAAK;GACL,QAAO;GACP,aAAa;GACb,cAAa;EAChB,CAAA,CACA;MAKT,kBAAC,OAAD;EACI,SAAS,WAAY;EACrB,qBAAoB;EACpB,WAAU;EACV,OAAO,EAAE,UAAO;EAChB,eAAY;EAEZ,UAAA,kBAAC,YAAD;GACI,QAAQ,EAAO,KAAK,GAAG;GACvB,MAAK;GACL,QAAO;GACP,aAAa;GACb,cAAa;EAChB,CAAA;CACA,CAAA;AAEb,GAQM,KAAqC,EACvC,UACA,UACA,UAAO,WACP,aAAU,IACV,eAAY,IACZ,SACA,eAAY,MACZ,WAAQ,QACR,cACA,kBACA,mBAAgB,QAChB,qBAAkB,IAClB,eAAY,IACZ,YAAS,IACT,iBACE;CACF,IAAM,IACF,MACC,KAAiB,EAAc,UAAU,IACtC,kBAAC,GAAD;EAAe,MAAM;EAAe,MAAM;EAAe,QAAQ;CAAkB,CAAA,IACnF,OAEF,IAAY,IAAS,KAAK,EAAqB,IAC/C,IAAY,IAAS,eAAe;CAE1C,OACI,kBAAC,OAAD;EACa;EACT,WAAW,yDACP,IAAS,EAAkB,KAAQ,wCACtC,GAAG,IAAU,6DAA6D,GAAG,GAAG,IAAY,KAAK;EAJtG,UAAA;GAMK,KAAa,CAAC,KACX,kBAAC,QAAD;IACI,eAAY;IACZ,WAAU;IACV,OAAO;KACH,WAAW,gBAAgB,EAAgB,CAAI;KAC/C,YAAY;IAChB;GACH,CAAA;GAEL,kBAAC,OAAD;IACI,WAAW,gCAAgC,EAAU,GAAG,MAAU,WAAW,gBAAgB,KAAK,KAAK;IAEtG,UAAA;GACA,CAAA;GACL,kBAAC,OAAD;IACI,WAAW,8CAA8C,MAAU,WAAW,mBAAmB;IAEhG,UAAA,IACG,kBAAC,QAAD,EACI,WAAW,+CACP,IAAS,gBAAgB,uBAEhC,CAAA,IAED,kBAAC,QAAD;KAAM,WAAW,+BAA+B,EAAsB,GAAW,iBAAiB,IAAS,KAAK,IAAY,KAAK;KAAjI,UAAA,CACK,GACA,KAA+B,QAAQ,MAAS,MAC7C,kBAAC,QAAD;MAAM,WAAU;MAAsC,UAAA;KAAW,CAAA,CAEnE;;GAET,CAAA;GACJ,KACG,kBAAC,OAAD;IAAK,WAAW,oBAAoB,IAAS,eAAe,EAAqB;IAC5E,UAAA;GACA,CAAA;EAER;;AAEb,GAqBM,IAAoB;AAC1B,EAAkB,QAAQ,GAC1B,EAAkB,OAAO,GACzB,EAAkB,UAAU,GAC5B,EAAkB,SAAS,GAC3B,EAAkB,UAAU,GAC5B,EAAkB,QAAQ,GAC1B,EAAkB,OAAO,GACzB,EAAkB,OAAO,GACzB,EAAkB,OAAO,GACzB,EAAkB,SAAS"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Card/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport { CardMetric, type CardMetricProps } from './Metric';\nexport type { CardMetricProps, CardMetricItem } from './Metric';\n\nexport type CardProps = {\n  children: React.ReactNode;\n  variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';\n  bordered?: boolean;\n  dash?: boolean;\n  side?: boolean;\n  imageFull?: boolean;\n  compact?: boolean;\n  hover?: boolean;\n  glass?: boolean; // 毛玻璃效果\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  className?: string;\n};\n\nconst Card = ({\n  children,\n  variant,\n  bordered = false,\n  dash = false,\n  side = false,\n  imageFull = false,\n  compact = false,\n  hover = true, // 默认启用 hover 效果\n  glass = true, // 默认启用毛玻璃效果\n  size = 'sm',\n  className = '',\n}: CardProps) => {\n  const baseClass = 'card';\n\n  // 默认样式：如果没有指定 variant，则应用毛玻璃效果和阴影\n  // 同时添加边界样式 (border + shadow)\n  const defaultStyles = glass && !variant ? 'glass dishui-card-glass shadow-lg' : '';\n\n  // 如果指定了 variant，使用该 variant 的背景色，并添加阴影\n  const variantClass = variant ? `bg-${variant} text-${variant}-content shadow-md` : '';\n\n  const borderedClass = bordered ? 'card-bordered' : '';\n  const dashClass = dash ? 'card-dash' : '';\n  const sideClass = side ? 'card-side' : '';\n  const imageFullClass = imageFull ? 'image-full' : '';\n  const compactClass = compact ? 'card-compact' : '';\n  const hoverClass = hover ? 'hover:shadow-xl transition-shadow duration-300' : '';\n  const sizeClass = size ? `card-${size}` : '';\n\n  // 宽度策略：\n  // 1. 如果用户指定了 w-/max-w-/min-w-，则完全使用用户的设置\n  // 2. 否则不设置固定宽度，让 Card 自然适应父容器（Grid 中自动填充，Flex 中根据内容）\n  const hasWidthClass = className.includes('w-') || className.match(/max-w-|min-w-/);\n  const widthClass = ''; // 不设置默认宽度，让布局决定\n\n  const cardClasses = cn(\n    baseClass,\n    widthClass,\n    defaultStyles,\n    variantClass,\n    borderedClass,\n    dashClass,\n    sideClass,\n    imageFullClass,\n    compactClass,\n    hoverClass,\n    sizeClass,\n    className\n  );\n\n  return (\n    <div className={cardClasses}>\n      {children}\n    </div>\n  );\n};\n\n// Card.Title 组件\nexport type CardTitleProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nconst CardTitle = ({\n  children,\n  className = '',\n}: CardTitleProps) => {\n  const titleClasses = cn('card-title', className);\n\n  return (\n    <h2 className={titleClasses}>\n      {children}\n    </h2>\n  );\n};\n\n// Card.Body 组件\nexport type CardBodyProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nconst CardBody = ({\n  children,\n  className = '',\n}: CardBodyProps) => {\n  const bodyClasses = cn('card-body', className);\n\n  return (\n    <div className={bodyClasses}>\n      {children}\n    </div>\n  );\n};\n\n// Card.Actions 组件\nexport type CardActionsProps = {\n  children: React.ReactNode;\n  className?: string;\n  justify?: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';\n};\n\nconst CardActions = ({\n  children,\n  className = '',\n  justify = 'end',\n}: CardActionsProps) => {\n  const actionsClasses = cn(\n    'card-actions',\n    justify && `justify-${justify}`,\n    className\n  );\n\n  return (\n    <div className={actionsClasses}>\n      {children}\n    </div>\n  );\n};\n\n// Card.Figure 组件\nexport type CardFigureProps = {\n  children: React.ReactNode;\n  className?: string;\n  /**\n   * 图片填充方式（作用于内部 <img>）：\n   * - `cover`   等比裁切填满（默认，“撑满”）\n   * - `contain` 等比完整展示，可能留白\n   * - `fill`    拉伸填满（不保持比例）\n   */\n  fit?: 'cover' | 'contain' | 'fill';\n  /** 图片撑满整个 figure（w/h 100%）。card-side 时建议开启。 */\n  fill?: boolean;\n  /** 指定 figure 高度（数字按 px，支持 \"16rem\"/\"50%\" 等）；内部图片自动填满该高度 */\n  height?: number | string;\n};\n\nconst FIT_CLASS: Record<NonNullable<CardFigureProps['fit']>, string> = {\n  cover: '[&>img]:object-cover',\n  contain: '[&>img]:object-contain',\n  fill: '[&>img]:object-fill',\n};\n\nconst toCssSize = (value: number | string | undefined): string | undefined =>\n  typeof value === 'number' ? `${value}px` : value;\n\nconst CardFigure = ({\n  children,\n  className = '',\n  fit = 'cover',\n  fill = false,\n  height,\n}: CardFigureProps) => {\n  const figureClasses = cn(\n    'figure',\n    FIT_CLASS[fit],\n    // 撑满：figure 与内部 img 都占满可用空间\n    fill && 'w-full h-full [&>img]:h-full [&>img]:w-full',\n    // 指定高度：figure 定高，内部图片自动填满\n    height !== undefined && 'w-full [&>img]:h-full [&>img]:w-full',\n    className\n  );\n\n  return (\n    <figure className={figureClasses} style={height !== undefined ? { height: toCssSize(height) } : undefined}>\n      {children}\n    </figure>\n  );\n};\n\n// ─── 内部工具：复用基础 Card 的类名拼装逻辑 ──────────────────\n\ninterface CardClassOptions {\n    variant?: CardProps['variant'];\n    bordered?: boolean;\n    glass?: boolean;\n    className?: string;\n}\n\nconst buildCardClasses = ({ variant, bordered = false, glass = true, className = '' }: CardClassOptions) => {\n    const defaultStyles = glass && !variant ? 'glass dishui-card-glass shadow-lg' : '';\n    const variantClass = variant ? `bg-${variant} text-${variant}-content shadow-md` : '';\n    return cn('card', defaultStyles, variantClass, bordered && 'card-bordered', className);\n};\n\nconst ClockGlyph: React.FC<{ className?: string }> = ({ className }) => (\n    <svg xmlns=\"http://www.w3.org/2000/svg\" className={cn('h-4 w-4', className)} fill=\"none\" viewBox=\"0 0 24 24\" stroke=\"currentColor\" strokeWidth={2}>\n        <circle cx=\"12\" cy=\"12\" r=\"9\" />\n        <path strokeLinecap=\"round\" d=\"M12 7v5l3 2\" />\n    </svg>\n);\n\n// ─── Card.Feature：特性卡（图标 + 标题 + 描述） ───────────────\n\nexport type CardFeatureProps = {\n    /** Icon node (usually a lucide / inline svg), rendered inside a tinted container. */\n    icon?: React.ReactNode;\n    /** Feature title. */\n    title: React.ReactNode;\n    /** Feature description rendered under the title. */\n    description?: React.ReactNode;\n    /** `vertical` centers everything with the icon on top; `horizontal` puts the icon at the left. */\n    layout?: 'vertical' | 'horizontal';\n    /** Icon container shape. Defaults to `circle` (vertical) / `square` (horizontal). */\n    iconShape?: 'circle' | 'square';\n    /** Extra content rendered under the description. */\n    children?: React.ReactNode;\n    /** Color variant (daisyUI). */\n    variant?: CardProps['variant'];\n    /** Show a border. */\n    bordered?: boolean;\n    /** Disable the default glass background. */\n    glass?: boolean;\n    /** Extra class names on the card. */\n    className?: string;\n    /** Click handler. */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst CardFeature: React.FC<CardFeatureProps> = ({\n    icon,\n    title,\n    description,\n    layout = 'vertical',\n    iconShape,\n    children,\n    variant,\n    bordered,\n    glass = true,\n    className = '',\n    onClick,\n}) => {\n    const shape = iconShape ?? (layout === 'vertical' ? 'circle' : 'square');\n    const iconBox = icon && (\n        <span\n            className={cn(\n                'flex shrink-0 items-center justify-center bg-primary/10 text-primary',\n                layout === 'vertical' ? 'size-16' : 'size-12',\n                shape === 'circle' ? 'rounded-full' : 'rounded-xl',\n            )}\n        >\n            {icon}\n        </span>\n    );\n\n    return (\n        <div\n            className={buildCardClasses({ variant, bordered, glass, className })}\n            onClick={onClick}\n        >\n            {layout === 'horizontal' ? (\n                <div className=\"card-body flex-row items-center gap-4\">\n                    {iconBox}\n                    <div className=\"min-w-0 flex-1\">\n                        <h3 className=\"font-semibold text-base-content\">{title}</h3>\n                        {description && (\n                            <p className=\"mt-0.5 text-sm text-base-content/70\">{description}</p>\n                        )}\n                        {children}\n                    </div>\n                </div>\n            ) : (\n                <div className=\"card-body items-center gap-3 text-center\">\n                    {iconBox}\n                    <h3 className=\"text-lg font-bold text-base-content\">{title}</h3>\n                    {description && (\n                        <p className=\"text-sm leading-relaxed text-base-content/70\">{description}</p>\n                    )}\n                    {children}\n                </div>\n            )}\n        </div>\n    );\n};\n\n// ─── Card.Quote：引用卡（引用文本 + 作者 / 日期 + 装饰引号） ──\n\nexport type CardQuoteProps = {\n    /** The quoted text. */\n    children: React.ReactNode;\n    /** Author name (rendered in primary color). */\n    author?: React.ReactNode;\n    /** Avatar node (e.g. an `<img>` or initial circle) shown before the author. */\n    avatar?: React.ReactNode;\n    /** Date string/node rendered at the right side of the footer. */\n    date?: React.ReactNode;\n    /** Hide the decorative quote glyph in the top-right corner. */\n    quoteMark?: boolean;\n    /** Hide the divider between quote and footer. */\n    divider?: boolean;\n    /** Color variant (daisyUI). */\n    variant?: CardProps['variant'];\n    /** Show a border. */\n    bordered?: boolean;\n    /** Disable the default glass background. */\n    glass?: boolean;\n    /** Extra class names on the card. */\n    className?: string;\n    /** Click handler. */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst CardQuote: React.FC<CardQuoteProps> = ({\n    children,\n    author,\n    avatar,\n    date,\n    quoteMark = true,\n    divider = true,\n    variant,\n    bordered,\n    glass = true,\n    className = '',\n    onClick,\n}) => (\n    <div\n        className={cn(\n            buildCardClasses({ variant, bordered, glass, className }),\n            'relative overflow-hidden',\n        )}\n        onClick={onClick}\n    >\n        {quoteMark && (\n            <span\n                aria-hidden=\"true\"\n                className=\"pointer-events-none absolute right-5 top-2 select-none font-serif text-6xl leading-none text-primary/25\"\n            >\n                ”\n            </span>\n        )}\n        <div className=\"card-body gap-0 p-6\">\n            <div className={cn('relative z-10 min-w-0 wrap-anywhere text-lg text-base-content', quoteMark && 'pe-10')}>{children}</div>\n            <div\n                className={cn(\n                    'mt-4 flex flex-wrap items-center justify-between gap-3',\n                    divider && 'border-t border-base-300 pt-3.5',\n                )}\n            >\n                <div className=\"flex min-w-0 items-center gap-2.5\">\n                    {avatar && <span className=\"size-8 shrink-0 overflow-hidden rounded-full\">{avatar}</span>}\n                    {author && (\n                        <span className=\"truncate text-sm font-medium text-primary\">{author}</span>\n                    )}\n                </div>\n                {date && (\n                    <span className=\"flex shrink-0 items-center gap-1.5 text-sm text-base-content/55\">\n                        <ClockGlyph />\n                        {date}\n                    </span>\n                )}\n            </div>\n        </div>\n    </div>\n);\n\n// ─── Card.Meta：元信息卡（标题 + 徽章 + 描述 + 左右页脚） ────\n\nexport type CardMetaProps = {\n    /** Card title (top-left). */\n    title: React.ReactNode;\n    /** Badge / tag node (top-right, e.g. a visibility badge). */\n    badge?: React.ReactNode;\n    /** Body content under the title row. */\n    children?: React.ReactNode;\n    /** Footer left slot (e.g. `@author`). */\n    footerLeft?: React.ReactNode;\n    /** Footer right slot (e.g. a date). */\n    footerRight?: React.ReactNode;\n    /** Color variant (daisyUI). */\n    variant?: CardProps['variant'];\n    /** Show a border. */\n    bordered?: boolean;\n    /** Disable the default glass background. */\n    glass?: boolean;\n    /** Extra class names on the card. */\n    className?: string;\n    /** Click handler. */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst CardMeta: React.FC<CardMetaProps> = ({\n    title,\n    badge,\n    children,\n    footerLeft,\n    footerRight,\n    variant,\n    bordered,\n    glass = true,\n    className = '',\n    onClick,\n}) => (\n    <div\n        className={buildCardClasses({ variant, bordered, glass, className })}\n        onClick={onClick}\n    >\n        <div className=\"card-body gap-2.5 p-6\">\n            <div className=\"flex items-center justify-between gap-3\">\n                <h3 className=\"min-w-0 flex-1 truncate text-lg font-bold text-base-content\">{title}</h3>\n                {badge && <span className=\"shrink-0\">{badge}</span>}\n            </div>\n            {children && <div className=\"text-sm text-base-content/75\">{children}</div>}\n            {(footerLeft || footerRight) && (\n                <div className=\"mt-1.5 flex items-center justify-between gap-3 text-sm text-base-content/55\">\n                    <span className=\"min-w-0 truncate\">{footerLeft}</span>\n                    <span className=\"shrink-0\">{footerRight}</span>\n                </div>\n            )}\n        </div>\n    </div>\n);\n\n// ─── Card.Info：指标卡（标签 + 数值 + 可选图标 / hint / 加载态） ──\n\nexport type CardInfoTone = 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral';\n\nimport './Info.css';\n\nexport type CardInfoProps = {\n    /** Metric name. */\n    label: React.ReactNode;\n    /** Metric value (number or short text). */\n    value: React.ReactNode;\n    /** Icon slot. Use Icon to control its size, color and background independently. */\n    icon?: React.ReactNode;\n    /** `top` keeps the icon beside the label; `left` / `right` flank the content. */\n    iconPosition?: 'top' | 'left' | 'right';\n    /** Stacked content (default), compact horizontal row, or two-column summary. */\n    layout?: 'stacked' | 'horizontal' | 'split';\n    /** Content alignment (default left). */\n    align?: 'left' | 'center' | 'right';\n    /** Additional multi-line content below the summary. */\n    children?: React.ReactNode;\n    /** Footer slot separated by a subtle divider. */\n    footer?: React.ReactNode;\n    /** @deprecated Use Icon styles instead. Shape of the optional neutral compatibility box. */\n    iconShape?: 'square' | 'circle';\n    /** @deprecated Use Icon styles instead. Optional neutral icon box (default false). */\n    iconBoxed?: boolean;\n    /** Card surface and border tone (default neutral). Does not style the icon. */\n    tone?: CardInfoTone;\n    /** Small hint text below the value (e.g. deltas, update time). */\n    hint?: React.ReactNode;\n    /** Loading state: value renders as a skeleton. */\n    loading?: boolean;\n    /** Color variant (daisyUI). */\n    variant?: CardProps['variant'];\n    /** Show a border (default true). */\n    bordered?: boolean;\n    /** Enable the glass background (default true, matching Card). */\n    glass?: boolean;\n    /** Extra class names on the card. */\n    className?: string;\n    /** Click handler. */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\n\nconst CardInfo: React.FC<CardInfoProps> = ({\n    label,\n    value,\n    icon,\n    iconPosition = 'top',\n    iconShape = 'square',\n    iconBoxed = false,\n    tone = 'neutral',\n    layout = 'stacked',\n    align = 'left',\n    children,\n    footer,\n    hint,\n    loading = false,\n    variant,\n    bordered = true,\n    glass = true,\n    className = '',\n    onClick,\n}) => {\n    const cardClasses = buildCardClasses({\n        variant, bordered, glass,\n        className: cn('blade-card-info', 'p-4', className),\n    });\n    const iconNode = icon != null && (\n        <span className={cn(\n            'blade-card-info__icon',\n            iconBoxed && (iconShape === 'circle' ? 'rounded-full' : 'rounded-lg'),\n            iconBoxed && 'bg-base-content/5',\n        )}>\n            {icon}\n        </span>\n    );\n\n    return (\n        <div\n            className={cardClasses}\n            data-layout={layout}\n            data-align={align}\n            data-tone={variant ? undefined : tone}\n            data-bordered={bordered}\n            data-glass={glass}\n            role={onClick ? 'button' : undefined}\n            tabIndex={onClick ? 0 : undefined}\n            aria-busy={loading || undefined}\n            onClick={onClick}\n            onKeyDown={onClick ? (event) => {\n                // Let controls inside content/footer handle their own keyboard events.\n                if (event.target !== event.currentTarget) return;\n                if (event.key === 'Enter' || event.key === ' ') {\n                    event.preventDefault();\n                    if (!event.repeat) event.currentTarget.click();\n                }\n            } : undefined}\n        >\n            <div className=\"blade-card-info__body\">\n                {iconPosition === 'left' && iconNode}\n                <div className=\"blade-card-info__content\">\n                    <div className=\"blade-card-info__summary\">\n                        <div className=\"blade-card-info__header\">\n                            <div className=\"blade-card-info__label\">{label}</div>\n                            {iconPosition === 'top' && iconNode}\n                        </div>\n                        <div className=\"blade-card-info__reading\">\n                            <div className=\"blade-card-info__value\">\n                                {loading ? <span className=\"blade-card-info__skeleton\" aria-hidden=\"true\" /> : value}\n                            </div>\n                            {hint != null && <div className=\"blade-card-info__hint\">{hint}</div>}\n                        </div>\n                    </div>\n                    {children != null && <div className=\"blade-card-info__details\">{children}</div>}\n                </div>\n                {iconPosition === 'right' && iconNode}\n            </div>\n            {footer != null && <div className=\"blade-card-info__footer\">{footer}</div>}\n        </div>\n    );\n};\n\n// ─── Card.Stat：统计面板（Grafana 风格：超大数值 + 迷你图 / 角标 / 填充色） ───\n\nexport type CardStatProps = {\n    /** 面板标签 */\n    label: React.ReactNode;\n    /** 面板数值（数字或短文本） */\n    value: React.ReactNode;\n    /** 色调（决定数值文字色 / 角标三角 / filled 底色） */\n    tone?: CardInfoTone;\n    /** 加载态：值显示为骨架 */\n    loading?: boolean;\n    className?: string;\n    /** 数值单位后缀（如 `K`、`%`），以小号字体渲染在数值右侧。 */\n    unit?: React.ReactNode;\n    /** 面板数值字号，默认 `xl`。 */\n    valueSize?: 'md' | 'lg' | 'xl' | '2xl';\n    /** 面板内容对齐，默认 `left`。 */\n    align?: 'left' | 'center';\n    /** 直接传入迷你图节点（优先于 sparklineData）。 */\n    sparkline?: React.ReactNode;\n    /** 迷你图数据：传入数值数组后自动渲染 sparkline。 */\n    sparklineData?: number[];\n    /** 迷你图类型：折线 / 面积 / 柱状。 */\n    sparklineType?: 'line' | 'area' | 'bar';\n    /** 迷你图高度（px）。 */\n    sparklineHeight?: number;\n    /** 右上角状态三角（Grafana 阈值指示）。 */\n    indicator?: boolean;\n    /** 整卡填充 tone 底色、文字用对应 content 色（图 RabbitMQ 风格）。 */\n    filled?: boolean;\n    /** 点击回调（面板常用于跳转详情）。 */\n    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;\n};\n\nconst STAT_TONE_TEXT_CLASS: Record<NonNullable<CardStatProps['tone']>, string> = {\n    primary: 'text-primary',\n    success: 'text-success',\n    warning: 'text-warning',\n    info: 'text-info',\n    error: 'text-error',\n    neutral: 'text-base-content/70',\n};\n\n/** filled 模式：整卡 tone 底色 + 对应 content 文字色 */\nconst STAT_FILLED_CLASS: Record<NonNullable<CardStatProps['tone']>, string> = {\n    primary: 'bg-primary text-primary-content',\n    success: 'bg-success text-success-content',\n    warning: 'bg-warning text-warning-content',\n    info: 'bg-info text-info-content',\n    error: 'bg-error text-error-content',\n    neutral: 'bg-neutral text-neutral-content',\n};\n\nconst STAT_VALUE_SIZE_CLASS: Record<NonNullable<CardStatProps['valueSize']> & string, string> = {\n    md: 'text-2xl',\n    lg: 'text-4xl',\n    xl: 'text-5xl',\n    '2xl': 'text-6xl',\n};\n\nconst statCssVarColor = (tone: NonNullable<CardStatProps['tone']>) =>\n    tone === 'neutral' ? 'var(--color-base-content)' : `var(--color-${tone})`;\n\n/** 由数值数组生成迷你图（viewBox 拉伸铺满，描边不随宽度变形） */\nconst MiniSparkline: React.FC<{\n    data: number[];\n    type: 'line' | 'area' | 'bar';\n    height: number;\n}> = ({ data, type, height }) => {\n    if (!data || data.length < 2) return null;\n    const w = 100;\n    const pad = 3;\n    const min = Math.min(...data);\n    const max = Math.max(...data);\n    const range = max - min || 1;\n    const px = (i: number) => (i / (data.length - 1)) * w;\n    const py = (v: number) => height - pad - ((v - min) / range) * (height - pad * 2);\n    const points = data.map((v, i) => `${px(i).toFixed(2)},${py(v).toFixed(2)}`);\n\n    if (type === 'bar') {\n        const bw = w / data.length;\n        return (\n            <svg\n                viewBox={`0 0 ${w} ${height}`}\n                preserveAspectRatio=\"none\"\n                className=\"block w-full\"\n                style={{ height }}\n                aria-hidden=\"true\"\n            >\n                {data.map((v, i) => (\n                    <rect\n                        key={i}\n                        x={px(i) - bw / 2}\n                        y={py(v)}\n                        width={bw * 0.8}\n                        height={Math.max(1, height - pad - py(v))}\n                        fill=\"currentColor\"\n                    />\n                ))}\n            </svg>\n        );\n    }\n\n    if (type === 'area') {\n        return (\n            <svg\n                viewBox={`0 0 ${w} ${height}`}\n                preserveAspectRatio=\"none\"\n                className=\"block w-full\"\n                style={{ height }}\n                aria-hidden=\"true\"\n            >\n                <path\n                    d={`M0,${height} L${points.join(' L')} L${w},${height} Z`}\n                    fill=\"currentColor\"\n                    opacity={0.18}\n                />\n                <polyline\n                    points={points.join(' ')}\n                    fill=\"none\"\n                    stroke=\"currentColor\"\n                    strokeWidth={1.5}\n                    vectorEffect=\"non-scaling-stroke\"\n                />\n            </svg>\n        );\n    }\n\n    return (\n        <svg\n            viewBox={`0 0 ${w} ${height}`}\n            preserveAspectRatio=\"none\"\n            className=\"block w-full\"\n            style={{ height }}\n            aria-hidden=\"true\"\n        >\n            <polyline\n                points={points.join(' ')}\n                fill=\"none\"\n                stroke=\"currentColor\"\n                strokeWidth={1.5}\n                vectorEffect=\"non-scaling-stroke\"\n            />\n        </svg>\n    );\n};\n\n/**\n * 统计面板：Grafana stat panel 风格的「标签 + 超大数值 + 迷你图」小卡，\n * 支持单位后缀、折线 / 面积 / 柱状迷你图、角标状态三角与整卡填充色。\n *\n * 简单的「标签 + 数值 + 图标」指标卡请使用 `Card.Info`。\n */\nconst CardStat: React.FC<CardStatProps> = ({\n    label,\n    value,\n    tone = 'primary',\n    loading = false,\n    className = '',\n    unit,\n    valueSize = 'xl',\n    align = 'left',\n    sparkline,\n    sparklineData,\n    sparklineType = 'line',\n    sparklineHeight = 36,\n    indicator = false,\n    filled = false,\n    onClick,\n}) => {\n    const sparklineNode =\n        sparkline ??\n        (sparklineData && sparklineData.length >= 2 ? (\n            <MiniSparkline data={sparklineData} type={sparklineType} height={sparklineHeight} />\n        ) : null);\n\n    const textColor = filled ? '' : STAT_TONE_TEXT_CLASS[tone];\n    const mutedText = filled ? 'opacity-80' : 'text-base-content/60';\n\n    return (\n        <div\n            onClick={onClick}\n            className={`relative flex flex-col overflow-hidden rounded-lg p-3 ${\n                filled ? STAT_FILLED_CLASS[tone] : 'border border-base-300/60 bg-base-200'\n            } ${onClick ? 'cursor-pointer transition-colors hover:border-primary/40' : ''} ${className}`.trim()}\n        >\n            {indicator && !filled && (\n                <span\n                    aria-hidden=\"true\"\n                    className=\"absolute right-0 top-0 h-0 w-0\"\n                    style={{\n                        borderTop: '14px solid ' + statCssVarColor(tone),\n                        borderLeft: '14px solid transparent',\n                    }}\n                />\n            )}\n            <div\n                className={`truncate text-xs font-medium ${mutedText} ${align === 'center' ? 'text-center' : ''}`.trim()}\n            >\n                {label}\n            </div>\n            <div\n                className={`flex min-h-[3rem] flex-1 items-center py-1 ${align === 'center' ? 'justify-center' : 'justify-start'}`}\n            >\n                {loading ? (\n                    <span\n                        className={`inline-block h-8 w-16 animate-pulse rounded ${\n                            filled ? 'bg-white/25' : 'bg-base-content/10'\n                        }`}\n                    />\n                ) : (\n                    <span className={`leading-none tracking-tight ${STAT_VALUE_SIZE_CLASS[valueSize]} font-semibold ${filled ? '' : textColor}`.trim()}>\n                        {value}\n                        {unit !== undefined && unit !== null && unit !== '' && (\n                            <span className=\"ml-0.5 text-[0.45em] font-semibold\">{unit}</span>\n                        )}\n                    </span>\n                )}\n            </div>\n            {sparklineNode && (\n                <div className={`-mx-3 -mb-3 mt-1 ${filled ? 'text-white' : STAT_TONE_TEXT_CLASS[tone]}`}>\n                    {sparklineNode}\n                </div>\n            )}\n        </div>\n    );\n};\n\n// 扩展Card组件，添加子组件\ninterface CardCompound extends React.FC<CardProps> {\n    Metric: React.FC<CardMetricProps>;\n    Title: React.FC<CardTitleProps>;\n    Body: React.FC<CardBodyProps>;\n    Actions: React.FC<CardActionsProps>;\n    Figure: React.FC<CardFigureProps>;\n    /** 特性卡：图标 + 标题 + 描述（垂直居中 / 横向两种布局） */\n    Feature: React.FC<CardFeatureProps>;\n    /** 引用卡：引用文本 + 作者头像 / 日期 + 装饰引号 */\n    Quote: React.FC<CardQuoteProps>;\n    /** 元信息卡：标题 + 徽章 + 描述 + 左右页脚 */\n    Meta: React.FC<CardMetaProps>;\n    /** 指标卡：标签 + 数值 + 可选图标 / hint / 加载态（仪表盘统计卡片） */\n    Info: React.FC<CardInfoProps>;\n    /** 统计面板：Grafana 风格超大数值 + 迷你折线 / 面积 / 柱状图 / 角标 / 填充色 */\n    Stat: React.FC<CardStatProps>;\n}\n\nconst CardWithCompounds = Card as CardCompound;\nCardWithCompounds.Title = CardTitle;\nCardWithCompounds.Body = CardBody;\nCardWithCompounds.Actions = CardActions;\nCardWithCompounds.Figure = CardFigure;\nCardWithCompounds.Feature = CardFeature;\nCardWithCompounds.Quote = CardQuote;\nCardWithCompounds.Meta = CardMeta;\nCardWithCompounds.Info = CardInfo;\nCardWithCompounds.Stat = CardStat;\nCardWithCompounds.Metric = CardMetric;\n\nexport default CardWithCompounds; "],"mappings":"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"}

package/dist/components/DateTimeInput/index.js

@@ -1,4 +1,5 @@
 import { cn as e } from "../../utils/cn.js";
+/* empty css              */
 import { useCallback as t } from "react";
 import { jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/components/DateTimeInput/index.tsx
@@ -21,7 +22,7 @@ var i = {
 		l?.(e.target.value, e);
 	}, [l]), C = /* @__PURE__ */ n("input", {
 		type: o,
-		className: e("input w-full", i[h], a[g], b),
+		className: e("input dishui-datetime-input w-full", i[h], a[g], b),
 		value: s,
 		defaultValue: s === void 0 ? c : void 0,
 		min: u,
@@ -34,7 +35,7 @@ var i = {
 		onChange: S
 	});
 	return p == null || p === "" ? C : /* @__PURE__ */ r("div", {
-		className: "w-full",
+		className: "dishui-datetime-field w-full",
 		style: x,
 		children: [/* @__PURE__ */ n("label", {
 			className: "label-text mb-1 block text-sm text-base-content/80",

package/dist/components/DateTimeInput/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/DateTimeInput/index.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { cn } from '../../utils/cn';\n\nexport type DateTimeType = 'date' | 'time' | 'datetime-local' | 'month' | 'week';\n\nexport type DateTimeVariant =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport type DateTimeSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport type DateTimeInputProps = {\n  /** Which native picker to render. */\n  type?: DateTimeType;\n  /** Controlled value (`YYYY-MM-DD`, `HH:mm`, … per `type`). */\n  value?: string;\n  /** Uncontrolled initial value. */\n  defaultValue?: string;\n  /** Change handler with the raw input value. */\n  onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Minimum allowed value. */\n  min?: string;\n  /** Maximum allowed value. */\n  max?: string;\n  /** Step (seconds for time / datetime-local, days for date, …). */\n  step?: number | string;\n  /** Optional label rendered above the field. */\n  label?: React.ReactNode;\n  /** Placeholder (only shown by browsers that support it). */\n  placeholder?: string;\n  /** Color variant (daisyUI). */\n  variant?: DateTimeVariant;\n  /** Size (daisyUI). */\n  size?: DateTimeSize;\n  /** Disabled state. */\n  disabled?: boolean;\n  /** Read-only state. */\n  readOnly?: boolean;\n  /** Native name attribute. */\n  name?: string;\n  /** Extra class names on the input. */\n  className?: string;\n  /** Inline styles on the wrapper. */\n  style?: React.CSSProperties;\n};\n\nconst VARIANT_CLASS: Record<DateTimeVariant, string> = {\n  default: '',\n  primary: 'input-primary',\n  secondary: 'input-secondary',\n  accent: 'input-accent',\n  info: 'input-info',\n  success: 'input-success',\n  warning: 'input-warning',\n  error: 'input-error',\n};\n\nconst SIZE_CLASS: Record<DateTimeSize, string> = {\n  xs: 'input-xs',\n  sm: 'input-sm',\n  md: 'input-md',\n  lg: 'input-lg',\n};\n\n/**\n * DateTimeInput —— A2UI 交互组件：日期 / 时间选择输入。\n * 基于原生 `date / time / datetime-local / month / week` 输入，套用 daisyUI input 样式。\n */\nconst DateTimeInput: React.FC<DateTimeInputProps> = ({\n  type = 'date',\n  value,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  step,\n  label,\n  placeholder,\n  variant = 'default',\n  size = 'sm',\n  disabled = false,\n  readOnly = false,\n  name,\n  className = '',\n  style,\n}) => {\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.value, e);\n    },\n    [onChange],\n  );\n\n  const input = (\n    <input\n      type={type}\n      className={cn('input w-full', VARIANT_CLASS[variant], SIZE_CLASS[size], className)}\n      value={value}\n      defaultValue={value !== undefined ? undefined : defaultValue}\n      min={min}\n      max={max}\n      step={step}\n      placeholder={placeholder}\n      disabled={disabled}\n      readOnly={readOnly}\n      name={name}\n      onChange={handleChange}\n    />\n  );\n\n  if (label === undefined || label === null || label === '') {\n    return input;\n  }\n\n  return (\n    <div className=\"w-full\" style={style}>\n      <label className=\"label-text mb-1 block text-sm text-base-content/80\">\n        {label}\n      </label>\n      {input}\n    </div>\n  );\n};\n\nexport default DateTimeInput;\n"],"mappings":";;;;AAoDA,IAAM,IAAiD;CACrD,SAAS;CACT,SAAS;CACT,WAAW;CACX,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAEM,IAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAMM,KAA+C,EACnD,UAAO,QACP,UACA,iBACA,aACA,QACA,QACA,SACA,UACA,gBACA,aAAU,WACV,UAAO,MACP,cAAW,IACX,cAAW,IACX,SACA,eAAY,IACZ,eACI;CACJ,IAAM,IAAe,GAClB,MAA2C;EAC1C,IAAW,EAAE,OAAO,OAAO,CAAC;CAC9B,GACA,CAAC,CAAQ,CACX,GAEM,IACJ,kBAAC,SAAD;EACQ;EACN,WAAW,EAAG,gBAAgB,EAAc,IAAU,EAAW,IAAO,CAAS;EAC1E;EACP,cAAc,MAAU,KAAA,IAAwB,IAAZ,KAAA;EAC/B;EACA;EACC;EACO;EACH;EACA;EACJ;EACN,UAAU;CACX,CAAA;CAOH,OAJI,KAAiC,QAAQ,MAAU,KAC9C,IAIP,kBAAC,OAAD;EAAK,WAAU;EAAgB;EAA/B,UAAA,CACE,kBAAC,SAAD;GAAO,WAAU;GACd,UAAA;EACI,CAAA,GACN,CACE;;AAET"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/DateTimeInput/index.tsx"],"sourcesContent":["import React, { useCallback } from 'react';\nimport { cn } from '../../utils/cn';\nimport './DateTimeInput.css';\n\nexport type DateTimeType = 'date' | 'time' | 'datetime-local' | 'month' | 'week';\n\nexport type DateTimeVariant =\n  | 'default'\n  | 'primary'\n  | 'secondary'\n  | 'accent'\n  | 'info'\n  | 'success'\n  | 'warning'\n  | 'error';\n\nexport type DateTimeSize = 'xs' | 'sm' | 'md' | 'lg';\n\nexport type DateTimeInputProps = {\n  /** Which native picker to render. */\n  type?: DateTimeType;\n  /** Controlled value (`YYYY-MM-DD`, `HH:mm`, … per `type`). */\n  value?: string;\n  /** Uncontrolled initial value. */\n  defaultValue?: string;\n  /** Change handler with the raw input value. */\n  onChange?: (value: string, e: React.ChangeEvent<HTMLInputElement>) => void;\n  /** Minimum allowed value. */\n  min?: string;\n  /** Maximum allowed value. */\n  max?: string;\n  /** Step (seconds for time / datetime-local, days for date, …). */\n  step?: number | string;\n  /** Optional label rendered above the field. */\n  label?: React.ReactNode;\n  /** Placeholder (only shown by browsers that support it). */\n  placeholder?: string;\n  /** Color variant (daisyUI). */\n  variant?: DateTimeVariant;\n  /** Size (daisyUI). */\n  size?: DateTimeSize;\n  /** Disabled state. */\n  disabled?: boolean;\n  /** Read-only state. */\n  readOnly?: boolean;\n  /** Native name attribute. */\n  name?: string;\n  /** Extra class names on the input. */\n  className?: string;\n  /** Inline styles on the wrapper. */\n  style?: React.CSSProperties;\n};\n\nconst VARIANT_CLASS: Record<DateTimeVariant, string> = {\n  default: '',\n  primary: 'input-primary',\n  secondary: 'input-secondary',\n  accent: 'input-accent',\n  info: 'input-info',\n  success: 'input-success',\n  warning: 'input-warning',\n  error: 'input-error',\n};\n\nconst SIZE_CLASS: Record<DateTimeSize, string> = {\n  xs: 'input-xs',\n  sm: 'input-sm',\n  md: 'input-md',\n  lg: 'input-lg',\n};\n\n/**\n * DateTimeInput —— A2UI 交互组件：日期 / 时间选择输入。\n * 基于原生 `date / time / datetime-local / month / week` 输入，套用 daisyUI input 样式。\n */\nconst DateTimeInput: React.FC<DateTimeInputProps> = ({\n  type = 'date',\n  value,\n  defaultValue,\n  onChange,\n  min,\n  max,\n  step,\n  label,\n  placeholder,\n  variant = 'default',\n  size = 'sm',\n  disabled = false,\n  readOnly = false,\n  name,\n  className = '',\n  style,\n}) => {\n  const handleChange = useCallback(\n    (e: React.ChangeEvent<HTMLInputElement>) => {\n      onChange?.(e.target.value, e);\n    },\n    [onChange],\n  );\n\n  const input = (\n    <input\n      type={type}\n      className={cn('input dishui-datetime-input w-full', VARIANT_CLASS[variant], SIZE_CLASS[size], className)}\n      value={value}\n      defaultValue={value !== undefined ? undefined : defaultValue}\n      min={min}\n      max={max}\n      step={step}\n      placeholder={placeholder}\n      disabled={disabled}\n      readOnly={readOnly}\n      name={name}\n      onChange={handleChange}\n    />\n  );\n\n  if (label === undefined || label === null || label === '') {\n    return input;\n  }\n\n  return (\n    <div className=\"dishui-datetime-field w-full\" style={style}>\n      <label className=\"label-text mb-1 block text-sm text-base-content/80\">\n        {label}\n      </label>\n      {input}\n    </div>\n  );\n};\n\nexport default DateTimeInput;\n"],"mappings":";;;;;AAqDA,IAAM,IAAiD;CACrD,SAAS;CACT,SAAS;CACT,WAAW;CACX,QAAQ;CACR,MAAM;CACN,SAAS;CACT,SAAS;CACT,OAAO;AACT,GAEM,IAA2C;CAC/C,IAAI;CACJ,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAMM,KAA+C,EACnD,UAAO,QACP,UACA,iBACA,aACA,QACA,QACA,SACA,UACA,gBACA,aAAU,WACV,UAAO,MACP,cAAW,IACX,cAAW,IACX,SACA,eAAY,IACZ,eACI;CACJ,IAAM,IAAe,GAClB,MAA2C;EAC1C,IAAW,EAAE,OAAO,OAAO,CAAC;CAC9B,GACA,CAAC,CAAQ,CACX,GAEM,IACJ,kBAAC,SAAD;EACQ;EACN,WAAW,EAAG,sCAAsC,EAAc,IAAU,EAAW,IAAO,CAAS;EAChG;EACP,cAAc,MAAU,KAAA,IAAwB,IAAZ,KAAA;EAC/B;EACA;EACC;EACO;EACH;EACA;EACJ;EACN,UAAU;CACX,CAAA;CAOH,OAJI,KAAiC,QAAQ,MAAU,KAC9C,IAIP,kBAAC,OAAD;EAAK,WAAU;EAAsC;EAArD,UAAA,CACE,kBAAC,SAAD;GAAO,WAAU;GACd,UAAA;EACI,CAAA,GACN,CACE;;AAET"}

package/dist/components/GroupedTable/index.d.ts

@@ -20,6 +20,7 @@ export type GroupedTableProps<T> = {
     caption: React.ReactNode;
     'aria-label': string;
     collapsedKeys?: readonly string[];
+    defaultCollapsedKeys?: readonly string[];
     onToggleGroup?: (key: string) => void;
     footer?: {
         label: React.ReactNode;
@@ -35,4 +36,4 @@ export type GroupedTableProps<T> = {
     className?: string;
 };
 /** Scrollable, accessible grouped records. Formatting and aggregation stay with the caller. */
-export default function GroupedTable<T>({ columns, groups, rowKey, caption, 'aria-label': label, collapsedKeys, onToggleGroup, footer, density, stickyHeader, maxHeight, minWidth, loading, loadingLabel, loadingRows, className, }: GroupedTableProps<T>): React.JSX.Element;
+export default function GroupedTable<T>({ columns, groups, rowKey, caption, 'aria-label': label, collapsedKeys, defaultCollapsedKeys, onToggleGroup, footer, density, stickyHeader, maxHeight, minWidth, loading, loadingLabel, loadingRows, className, }: GroupedTableProps<T>): React.JSX.Element;

package/dist/components/GroupedTable/index.js

@@ -3,51 +3,104 @@ import t from "../Button/index.js";
 import n from "../Table/index.js";
 import r from "../Skeleton/index.js";
 /* empty css             */
-import i, { useId as a } from "react";
-import { Fragment as o, jsx as s, jsxs as c } from "react/jsx-runtime";
+import i, { useId as a, useLayoutEffect as o, useRef as s, useState as c } from "react";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/components/GroupedTable/index.tsx
-function l({ columns: l, groups: u, rowKey: d, caption: f, "aria-label": p, collapsedKeys: m = [], onToggleGroup: h, footer: g, density: _ = "compact", stickyHeader: v = !0, maxHeight: y = 560, minWidth: b = 800, loading: x = !1, loadingLabel: S = "Loading records…", loadingRows: C = 6, className: w }) {
-	let T = a(), E = (e) => l.slice(1).map((t) => /* @__PURE__ */ s("td", {
+function f({ expanded: e, id: t, label: n, children: r }) {
+	let i = s(null), a = s(e), l = s([]), [d, f] = c(!e);
+	return o(() => {
+		let t = i.current;
+		if (a.current === e) return;
+		a.current = e, !e && t.contains(document.activeElement) && (t.previousElementSibling?.querySelector("[aria-expanded]") ?? t.closest(".blade-grouped-table__scroll"))?.focus({ preventScroll: !0 });
+		let n = Array.from(t.querySelectorAll(":scope > tr > :is(td, th) > .blade-grouped-table__cell")), r = n.map((e) => ({
+			height: e.getBoundingClientRect().height,
+			opacity: t.hidden ? "0" : getComputedStyle(e).opacity
+		}));
+		l.current.forEach((e) => e.cancel()), t.hidden = !1, f(!1);
+		let o = window.matchMedia("(prefers-reduced-motion: reduce)"), s = () => {
+			l.current.forEach((e) => e.cancel()), l.current = [], t.hidden = !e, f(!e);
+		};
+		if (o.matches || !t.animate) {
+			s();
+			return;
+		}
+		let c = n.map((t) => e ? t.getBoundingClientRect().height : 0);
+		l.current = n.map((t, n) => t.animate([{
+			height: `${r[n].height}px`,
+			opacity: r[n].opacity
+		}, {
+			height: `${c[n]}px`,
+			opacity: +!!e
+		}], {
+			duration: 180,
+			easing: "ease-in-out",
+			fill: "both"
+		}));
+		let u = !0;
+		Promise.all(l.current.map((e) => e.finished)).then(() => {
+			u && s();
+		}).catch(() => {});
+		let d = () => {
+			o.matches && s();
+		};
+		return o.addEventListener("change", d), () => {
+			u = !1, o.removeEventListener("change", d);
+		};
+	}, [e]), o(() => () => l.current.forEach((e) => e.cancel()), []), /* @__PURE__ */ u("tbody", {
+		ref: i,
+		id: t,
+		className: "blade-grouped-table__body",
+		hidden: d,
+		inert: !e,
+		"aria-hidden": !e || void 0,
+		"aria-label": n,
+		children: r
+	});
+}
+function p({ columns: o, groups: s, rowKey: p, caption: m, "aria-label": h, collapsedKeys: g, defaultCollapsedKeys: _, onToggleGroup: v, footer: y, density: b = "compact", stickyHeader: x = !0, maxHeight: S = 560, minWidth: C = 800, loading: w = !1, loadingLabel: T = "Loading records…", loadingRows: E = 6, className: D }) {
+	let O = a(), [k, A] = c(() => _ ?? []), j = g ?? k, M = (e) => {
+		g === void 0 && A((t) => t.includes(e) ? t.filter((t) => t !== e) : [...t, e]), v?.(e);
+	}, N = (e) => o.slice(1).map((t) => /* @__PURE__ */ u("td", {
 		"data-numeric": t.numeric || void 0,
 		children: e?.[t.key]
 	}, t.key));
-	return /* @__PURE__ */ c("div", {
-		className: e("blade-grouped-table", w),
-		style: { "--grouped-table-min-width": typeof b == "number" ? `${b}px` : b },
-		children: [x && /* @__PURE__ */ s("p", {
+	return /* @__PURE__ */ d("div", {
+		className: e("blade-grouped-table", D),
+		style: { "--grouped-table-min-width": typeof C == "number" ? `${C}px` : C },
+		children: [w && /* @__PURE__ */ u("p", {
 			role: "status",
 			className: "blade-grouped-table__loading",
-			children: S
-		}), /* @__PURE__ */ s("div", {
+			children: T
+		}), /* @__PURE__ */ u("div", {
 			className: "blade-grouped-table__scroll",
 			role: "region",
-			"aria-label": p,
-			"aria-busy": x,
+			"aria-label": h,
+			"aria-busy": w,
 			tabIndex: 0,
-			style: { maxHeight: y },
-			children: /* @__PURE__ */ c(n, {
-				className: e("blade-grouped-table__table", `blade-grouped-table--${_}`, v && "blade-grouped-table--sticky"),
+			style: { maxHeight: S },
+			children: /* @__PURE__ */ d(n, {
+				className: e("blade-grouped-table__table", `blade-grouped-table--${b}`, x && "blade-grouped-table--sticky"),
 				children: [
-					/* @__PURE__ */ s("caption", { children: f }),
-					/* @__PURE__ */ s("colgroup", { children: l.map((e) => /* @__PURE__ */ s("col", {}, e.key)) }),
-					/* @__PURE__ */ s("thead", { children: /* @__PURE__ */ s("tr", { children: l.map((e) => /* @__PURE__ */ s("th", {
+					/* @__PURE__ */ u("caption", { children: m }),
+					/* @__PURE__ */ u("colgroup", { children: o.map((e) => /* @__PURE__ */ u("col", {}, e.key)) }),
+					/* @__PURE__ */ u("thead", { children: /* @__PURE__ */ u("tr", { children: o.map((e) => /* @__PURE__ */ u("th", {
 						scope: "col",
 						"data-numeric": e.numeric || void 0,
 						children: e.header
 					}, e.key)) }) }),
-					x ? /* @__PURE__ */ s("tbody", { children: Array.from({ length: C }, (e, t) => /* @__PURE__ */ s("tr", { children: l.map((e) => /* @__PURE__ */ s("td", { children: /* @__PURE__ */ s(r, {}) }, e.key)) }, t)) }) : u.filter((e) => e.rows.length > 0).map((e, n) => {
-						let r = !m.includes(e.key), a = `${T}-group-${n}`;
-						return /* @__PURE__ */ c(i.Fragment, { children: [/* @__PURE__ */ s("tbody", { children: /* @__PURE__ */ c("tr", {
+					w ? /* @__PURE__ */ u("tbody", { children: Array.from({ length: E }, (e, t) => /* @__PURE__ */ u("tr", { children: o.map((e) => /* @__PURE__ */ u("td", { children: /* @__PURE__ */ u(r, {}) }, e.key)) }, t)) }) : s.filter((e) => e.rows.length > 0).map((e, n) => {
+						let r = !j.includes(e.key), a = `${O}-group-${n}`;
+						return /* @__PURE__ */ d(i.Fragment, { children: [/* @__PURE__ */ u("tbody", { children: /* @__PURE__ */ d("tr", {
 							className: "blade-grouped-table__summary",
-							children: [/* @__PURE__ */ s("th", {
+							children: [/* @__PURE__ */ u("th", {
 								scope: "row",
-								children: h ? /* @__PURE__ */ c(t, {
+								children: g === void 0 || v ? /* @__PURE__ */ d(t, {
 									type: "button",
 									variant: "ghost",
 									size: "xs",
 									"aria-expanded": r,
 									"aria-controls": a,
-									onClick: () => h(e.key),
+									onClick: () => M(e.key),
 									children: [
 										r ? "−" : "+",
 										" ",
@@ -56,37 +109,43 @@ function l({ columns: l, groups: u, rowKey: d, caption: f, "aria-label": p, coll
 										e.rows.length,
 										")"
 									]
-								}) : /* @__PURE__ */ c(o, { children: [
+								}) : /* @__PURE__ */ d(l, { children: [
 									e.label,
 									" (",
 									e.rows.length,
 									")"
 								] })
-							}), E(e.summary)]
-						}) }), /* @__PURE__ */ s("tbody", {
+							}), N(e.summary)]
+						}) }), /* @__PURE__ */ u(f, {
 							id: a,
-							hidden: !r,
-							"aria-label": typeof e.label == "string" ? e.label : void 0,
-							children: e.rows.map((e) => /* @__PURE__ */ s("tr", { children: l.map((t) => {
+							expanded: r,
+							label: typeof e.label == "string" ? e.label : void 0,
+							children: e.rows.map((e) => /* @__PURE__ */ u("tr", { children: o.map((t) => {
 								let n = t.rowHeader ? "th" : "td";
-								return /* @__PURE__ */ s(n, {
+								return /* @__PURE__ */ u(n, {
 									scope: t.rowHeader ? "row" : void 0,
 									"data-numeric": t.numeric || void 0,
-									children: t.render(e)
+									children: /* @__PURE__ */ u("div", {
+										className: "blade-grouped-table__cell",
+										children: /* @__PURE__ */ u("div", {
+											className: "blade-grouped-table__content",
+											children: t.render(e)
+										})
+									})
 								}, t.key);
-							}) }, d(e)))
+							}) }, p(e)))
 						})] }, e.key);
 					}),
-					!x && g && /* @__PURE__ */ s("tfoot", { children: /* @__PURE__ */ c("tr", { children: [/* @__PURE__ */ s("th", {
+					!w && y && /* @__PURE__ */ u("tfoot", { children: /* @__PURE__ */ d("tr", { children: [/* @__PURE__ */ u("th", {
 						scope: "row",
-						children: g.label
-					}), E(g.summary)] }) })
+						children: y.label
+					}), N(y.summary)] }) })
 				]
 			})
 		})]
 	});
 }
 //#endregion
-export { l as default };
+export { p as default };
 
 //# sourceMappingURL=index.js.map

package/dist/components/GroupedTable/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/GroupedTable/index.tsx"],"sourcesContent":["import React, { useId } from 'react';\nimport Table from '../Table';\nimport Button from '../Button';\nimport Skeleton from '../Skeleton';\nimport { cn } from '../../utils/cn';\nimport './GroupedTable.css';\n\nexport type GroupedTableColumn<T> = {\n    key: string;\n    header: React.ReactNode;\n    render: (row: T) => React.ReactNode;\n    numeric?: boolean;\n    rowHeader?: boolean;\n};\n\nexport type GroupedTableGroup<T> = {\n    key: string;\n    label: React.ReactNode;\n    rows: readonly T[];\n    /** Summary cells keyed by column key; the first column is the group label. */\n    summary?: Record<string, React.ReactNode>;\n};\n\nexport type GroupedTableProps<T> = {\n    columns: readonly GroupedTableColumn<T>[];\n    groups: readonly GroupedTableGroup<T>[];\n    rowKey: (row: T) => React.Key;\n    caption: React.ReactNode;\n    'aria-label': string;\n    collapsedKeys?: readonly string[];\n    onToggleGroup?: (key: string) => void;\n    footer?: { label: React.ReactNode; summary: Record<string, React.ReactNode> };\n    density?: 'compact' | 'comfortable';\n    stickyHeader?: boolean;\n    maxHeight?: React.CSSProperties['maxHeight'];\n    minWidth?: React.CSSProperties['minWidth'];\n    loading?: boolean;\n    loadingLabel?: string;\n    loadingRows?: number;\n    className?: string;\n};\n\n/** Scrollable, accessible grouped records. Formatting and aggregation stay with the caller. */\nexport default function GroupedTable<T>({\n    columns, groups, rowKey, caption, 'aria-label': label,\n    collapsedKeys = [], onToggleGroup, footer, density = 'compact', stickyHeader = true,\n    maxHeight = 560, minWidth = 800, loading = false, loadingLabel = 'Loading records…',\n    loadingRows = 6, className,\n}: GroupedTableProps<T>) {\n    const id = useId();\n    const summaryCells = (summary?: Record<string, React.ReactNode>) => columns.slice(1).map(column => (\n        <td key={column.key} data-numeric={column.numeric || undefined}>{summary?.[column.key]}</td>\n    ));\n    return (\n        <div className={cn('blade-grouped-table', className)} style={{ '--grouped-table-min-width': typeof minWidth === 'number' ? `${minWidth}px` : minWidth } as React.CSSProperties}>\n            {loading && <p role=\"status\" className=\"blade-grouped-table__loading\">{loadingLabel}</p>}\n            <div className=\"blade-grouped-table__scroll\" role=\"region\" aria-label={label} aria-busy={loading} tabIndex={0} style={{ maxHeight }}>\n                <Table className={cn('blade-grouped-table__table', `blade-grouped-table--${density}`, stickyHeader && 'blade-grouped-table--sticky')}>\n                    <caption>{caption}</caption>\n                    <colgroup>{columns.map(column => <col key={column.key} />)}</colgroup>\n                    <thead><tr>{columns.map(column => <th key={column.key} scope=\"col\" data-numeric={column.numeric || undefined}>{column.header}</th>)}</tr></thead>\n                    {loading ? <tbody>{Array.from({ length: loadingRows }, (_, index) => <tr key={index}>{columns.map(column => <td key={column.key}><Skeleton /></td>)}</tr>)}</tbody>\n                        : groups.filter(group => group.rows.length > 0).map((group, index) => {\n                            const expanded = !collapsedKeys.includes(group.key);\n                            const bodyId = `${id}-group-${index}`;\n                            return <React.Fragment key={group.key}>\n                                <tbody><tr className=\"blade-grouped-table__summary\">\n                                    <th scope=\"row\">\n                                        {onToggleGroup ? <Button type=\"button\" variant=\"ghost\" size=\"xs\" aria-expanded={expanded} aria-controls={bodyId} onClick={() => onToggleGroup(group.key)}>\n                                            {expanded ? '−' : '+'} {group.label} ({group.rows.length})\n                                        </Button> : <>{group.label} ({group.rows.length})</>}\n                                    </th>\n                                    {summaryCells(group.summary)}\n                                </tr></tbody>\n                                <tbody id={bodyId} hidden={!expanded} aria-label={typeof group.label === 'string' ? group.label : undefined}>\n                                    {group.rows.map(row => <tr key={rowKey(row)}>{columns.map(column => {\n                                        const Cell = column.rowHeader ? 'th' : 'td';\n                                        return <Cell key={column.key} scope={column.rowHeader ? 'row' : undefined} data-numeric={column.numeric || undefined}>{column.render(row)}</Cell>;\n                                    })}</tr>)}\n                                </tbody>\n                            </React.Fragment>;\n                        })}\n                    {!loading && footer && <tfoot><tr><th scope=\"row\">{footer.label}</th>{summaryCells(footer.summary)}</tr></tfoot>}\n                </Table>\n            </div>\n\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/GroupedTable/index.tsx"],"sourcesContent":["import React, { useId, useLayoutEffect, useRef, useState } from 'react';\nimport Table from '../Table';\nimport Button from '../Button';\nimport Skeleton from '../Skeleton';\nimport { cn } from '../../utils/cn';\nimport './GroupedTable.css';\n\nexport type GroupedTableColumn<T> = {\n    key: string;\n    header: React.ReactNode;\n    render: (row: T) => React.ReactNode;\n    numeric?: boolean;\n    rowHeader?: boolean;\n};\n\nexport type GroupedTableGroup<T> = {\n    key: string;\n    label: React.ReactNode;\n    rows: readonly T[];\n    /** Summary cells keyed by column key; the first column is the group label. */\n    summary?: Record<string, React.ReactNode>;\n};\n\nexport type GroupedTableProps<T> = {\n    columns: readonly GroupedTableColumn<T>[];\n    groups: readonly GroupedTableGroup<T>[];\n    rowKey: (row: T) => React.Key;\n    caption: React.ReactNode;\n    'aria-label': string;\n    collapsedKeys?: readonly string[];\n    defaultCollapsedKeys?: readonly string[];\n    onToggleGroup?: (key: string) => void;\n    footer?: { label: React.ReactNode; summary: Record<string, React.ReactNode> };\n    density?: 'compact' | 'comfortable';\n    stickyHeader?: boolean;\n    maxHeight?: React.CSSProperties['maxHeight'];\n    minWidth?: React.CSSProperties['minWidth'];\n    loading?: boolean;\n    loadingLabel?: string;\n    loadingRows?: number;\n    className?: string;\n};\n\nfunction AnimatedBody({ expanded, id, label, children }: {\n    expanded: boolean; id: string; label?: string; children: React.ReactNode;\n}) {\n    const ref = useRef<HTMLTableSectionElement>(null);\n    const previous = useRef(expanded);\n    const animations = useRef<Animation[]>([]);\n    const [hidden, setHidden] = useState(!expanded);\n\n    useLayoutEffect(() => {\n        const body = ref.current!;\n        if (previous.current === expanded) return;\n        previous.current = expanded;\n        if (!expanded && body.contains(document.activeElement)) {\n            const toggle = body.previousElementSibling?.querySelector<HTMLButtonElement>('[aria-expanded]');\n            (toggle ?? body.closest<HTMLElement>('.blade-grouped-table__scroll'))?.focus({ preventScroll: true });\n        }\n        const cells = Array.from(body.querySelectorAll<HTMLElement>(':scope > tr > :is(td, th) > .blade-grouped-table__cell'));\n        // Capture the current frame before cancelling, so rapid reversals never jump.\n        const starts = cells.map(cell => ({ height: cell.getBoundingClientRect().height, opacity: body.hidden ? '0' : getComputedStyle(cell).opacity }));\n        animations.current.forEach(animation => animation.cancel());\n        body.hidden = false;\n        setHidden(false);\n        const media = window.matchMedia('(prefers-reduced-motion: reduce)');\n        const finish = () => {\n            animations.current.forEach(animation => animation.cancel());\n            animations.current = [];\n            body.hidden = !expanded;\n            setHidden(!expanded);\n        };\n        if (media.matches || !body.animate) {\n            finish();\n            return;\n        }\n        // Measure all natural heights before applying any animation styles.\n        const heights = cells.map(cell => expanded ? cell.getBoundingClientRect().height : 0);\n        animations.current = cells.map((cell, index) => cell.animate([\n            { height: `${starts[index].height}px`, opacity: starts[index].opacity },\n            { height: `${heights[index]}px`, opacity: expanded ? 1 : 0 },\n        ], { duration: 180, easing: 'ease-in-out', fill: 'both' }));\n        let active = true;\n        Promise.all(animations.current.map(animation => animation.finished)).then(() => {\n            if (active) finish();\n        }).catch(() => { /* Cancellation is expected when the direction changes. */ });\n        const reduce = () => { if (media.matches) finish(); };\n        media.addEventListener('change', reduce);\n        return () => { active = false; media.removeEventListener('change', reduce); };\n    }, [expanded]);\n\n    useLayoutEffect(() => () => animations.current.forEach(animation => animation.cancel()), []);\n    return <tbody ref={ref} id={id} className=\"blade-grouped-table__body\" hidden={hidden}\n        inert={!expanded} aria-hidden={!expanded || undefined} aria-label={label}>{children}</tbody>;\n}\n\n/** Scrollable, accessible grouped records. Formatting and aggregation stay with the caller. */\nexport default function GroupedTable<T>({\n    columns, groups, rowKey, caption, 'aria-label': label,\n    collapsedKeys, defaultCollapsedKeys, onToggleGroup, footer, density = 'compact', stickyHeader = true,\n    maxHeight = 560, minWidth = 800, loading = false, loadingLabel = 'Loading records…',\n    loadingRows = 6, className,\n}: GroupedTableProps<T>) {\n    const id = useId();\n    const [internalCollapsed, setInternalCollapsed] = useState<readonly string[]>(() => defaultCollapsedKeys ?? []);\n    const collapsed = collapsedKeys ?? internalCollapsed;\n    const toggleGroup = (key: string) => {\n        if (collapsedKeys === undefined) {\n            setInternalCollapsed(current => current.includes(key) ? current.filter(value => value !== key) : [...current, key]);\n        }\n        onToggleGroup?.(key);\n    };\n    const summaryCells = (summary?: Record<string, React.ReactNode>) => columns.slice(1).map(column => (\n        <td key={column.key} data-numeric={column.numeric || undefined}>{summary?.[column.key]}</td>\n    ));\n    return (\n        <div className={cn('blade-grouped-table', className)} style={{ '--grouped-table-min-width': typeof minWidth === 'number' ? `${minWidth}px` : minWidth } as React.CSSProperties}>\n            {loading && <p role=\"status\" className=\"blade-grouped-table__loading\">{loadingLabel}</p>}\n            <div className=\"blade-grouped-table__scroll\" role=\"region\" aria-label={label} aria-busy={loading} tabIndex={0} style={{ maxHeight }}>\n                <Table className={cn('blade-grouped-table__table', `blade-grouped-table--${density}`, stickyHeader && 'blade-grouped-table--sticky')}>\n                    <caption>{caption}</caption>\n                    <colgroup>{columns.map(column => <col key={column.key} />)}</colgroup>\n                    <thead><tr>{columns.map(column => <th key={column.key} scope=\"col\" data-numeric={column.numeric || undefined}>{column.header}</th>)}</tr></thead>\n                    {loading ? <tbody>{Array.from({ length: loadingRows }, (_, index) => <tr key={index}>{columns.map(column => <td key={column.key}><Skeleton /></td>)}</tr>)}</tbody>\n                        : groups.filter(group => group.rows.length > 0).map((group, index) => {\n                            const expanded = !collapsed.includes(group.key);\n                            const bodyId = `${id}-group-${index}`;\n                            return <React.Fragment key={group.key}>\n                                <tbody><tr className=\"blade-grouped-table__summary\">\n                                    <th scope=\"row\">\n                                        {collapsedKeys === undefined || onToggleGroup ? <Button type=\"button\" variant=\"ghost\" size=\"xs\" aria-expanded={expanded} aria-controls={bodyId} onClick={() => toggleGroup(group.key)}>\n                                            {expanded ? '−' : '+'} {group.label} ({group.rows.length})\n                                        </Button> : <>{group.label} ({group.rows.length})</>}\n                                    </th>\n                                    {summaryCells(group.summary)}\n                                </tr></tbody>\n                                <AnimatedBody id={bodyId} expanded={expanded} label={typeof group.label === 'string' ? group.label : undefined}>\n                                    {group.rows.map(row => <tr key={rowKey(row)}>{columns.map(column => {\n                                        const Cell = column.rowHeader ? 'th' : 'td';\n                                        return <Cell key={column.key} scope={column.rowHeader ? 'row' : undefined} data-numeric={column.numeric || undefined}><div className=\"blade-grouped-table__cell\"><div className=\"blade-grouped-table__content\">{column.render(row)}</div></div></Cell>;\n                                    })}</tr>)}\n                                </AnimatedBody>\n                            </React.Fragment>;\n                        })}\n                    {!loading && footer && <tfoot><tr><th scope=\"row\">{footer.label}</th>{summaryCells(footer.summary)}</tr></tfoot>}\n                </Table>\n            </div>\n\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Input/index.d.ts

@@ -1,5 +1,5 @@
 import React from 'react';
-export type InputProps = {
+export type InputProps = Pick<React.InputHTMLAttributes<HTMLInputElement>, 'id' | 'name' | 'readOnly' | 'aria-label' | 'aria-labelledby' | 'aria-describedby' | 'aria-invalid'> & {
     placeholder?: string;
     value?: string;
     onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
@@ -21,5 +21,5 @@ export type InputProps = {
         message: string;
     }[];
 };
-declare const Input: ({ placeholder, value, onChange, type, variant, size, disabled, required, label, labelPosition, leftSection, rightSection, pattern, className, validator, validatorHint, validationRules, }: InputProps) => React.JSX.Element;
+declare const Input: ({ placeholder, value, onChange, type, variant, size, disabled, required, label, labelPosition, leftSection, rightSection, pattern, className, validator, validatorHint, validationRules, id, readOnly, ...inputAttributes }: InputProps) => React.JSX.Element;
 export default Input;