dishui 0.0.65 → 0.0.67

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import React, { ReactElement, useState, useCallback } from 'react';\n\n// 状态项定义\nexport type ButtonState = {\n  label: string;          // 显示的字符/文本\n  key: string;            // 状态的唯一标识\n  variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link';\n  icon?: React.ReactNode; // 可选的图标\n};\n\nexport type ButtonProps = {\n  children?: React.ReactNode;\n  variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link';\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  outline?: boolean;\n  dash?: boolean;\n  soft?: boolean;\n  active?: boolean;\n  disabled?: boolean;\n  wide?: boolean;\n  block?: boolean;\n  square?: boolean;\n  circle?: boolean;\n  leftSection?: React.ReactNode;\n  rightSection?: React.ReactNode;\n  onClick?: () => void;\n  /** 原生 button type；不传时保持浏览器默认行为（表单内默认 submit） */\n  type?: 'button' | 'submit' | 'reset';\n  className?: string;\n\n  // 状态切换相关\n  states?: ButtonState[];           // 状态列表\n  initialStateIndex?: number;       // 初始状态索引\n  onStateChange?: (state: ButtonState, clickCount: number, stateIndex: number) => void;  // 状态改变回调\n};\n\nconst Button = ({\n  children,\n  variant = 'primary',\n  size = 'sm',\n  outline = false,\n  dash = false,\n  soft = false,\n  active = false,\n  disabled = false,\n  wide = false,\n  block = false,\n  square = false,\n  circle = false,\n  leftSection,\n  rightSection,\n  onClick,\n  type,\n  className = '',\n  states,\n  initialStateIndex = 0,\n  onStateChange,\n}: ButtonProps) => {\n  // 状态管理\n  const [currentStateIndex, setCurrentStateIndex] = useState(initialStateIndex);\n  const [clickCount, setClickCount] = useState(0);\n\n  // 是否是状态按钮\n  const isStateful = states && states.length > 0;\n\n  // 获取当前状态\n  const currentState = isStateful ? states[currentStateIndex] : null;\n\n  // 处理点击\n  const handleClick = useCallback(() => {\n    if (isStateful) {\n      const newClickCount = clickCount + 1;\n      const newStateIndex = (currentStateIndex + 1) % states.length;\n      const newState = states[newStateIndex];\n\n      setClickCount(newClickCount);\n      setCurrentStateIndex(newStateIndex);\n\n      // 调用状态改变回调\n      if (onStateChange) {\n        onStateChange(newState, newClickCount, newStateIndex);\n      }\n    }\n\n    // 调用原始 onClick\n    if (onClick) {\n      onClick();\n    }\n  }, [isStateful, states, currentStateIndex, clickCount, onStateChange, onClick]);\n\n  // 确定使用的 variant\n  const effectiveVariant = currentState?.variant || variant;\n\n  // 确定显示的内容\n  const displayContent = isStateful ? (\n    <>\n      {currentState?.icon && <span className=\"mr-1\">{currentState.icon}</span>}\n      {currentState?.label}\n    </>\n  ) : children;\n\n  const baseClass = 'btn';\n  const variantClass = effectiveVariant ? `btn-${effectiveVariant}` : '';\n  const sizeClass = size ? `btn-${size}` : '';\n  const outlineClass = outline ? 'btn-outline' : '';\n  const dashClass = dash ? 'btn-dash' : '';\n  const softClass = soft ? 'btn-soft' : '';\n  const activeClass = active || isStateful ? 'btn-active' : '';\n  const wideClass = wide ? 'btn-wide' : '';\n  const blockClass = block ? 'btn-block' : '';\n  const squareClass = square ? 'btn-square' : '';\n  const circleClass = circle ? 'btn-circle' : '';\n\n  const buttonClasses = [\n    baseClass,\n    variantClass,\n    sizeClass,\n    outlineClass,\n    dashClass,\n    softClass,\n    activeClass,\n    wideClass,\n    blockClass,\n    squareClass,\n    circleClass,\n    className\n  ].filter(Boolean).join(' ');\n\n  return (\n    <button\n      type={type}\n      className={buttonClasses}\n      disabled={disabled}\n      onClick={handleClick}\n      title={isStateful ? `当前状态: ${currentState?.key} (点击次数: ${clickCount})` : undefined}\n    >\n      {!isStateful && leftSection && <span className=\"mr-2\">{leftSection}</span>}\n      {displayContent}\n      {!isStateful && rightSection && <span className=\"ml-2\">{rightSection}</span>}\n    </button>\n  );\n};\n\n// Button.Group 组件\nexport type ButtonGroupProps = {\n  children: React.ReactNode;\n  vertical?: boolean;\n  className?: string;\n  rounded?: 'left' | 'right' | 'both' | 'none' | 'top' | 'bottom';\n  radius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';\n  roundedStyle?: {\n    left?: string;\n    right?: string;\n    top?: string;\n    bottom?: string;\n  };\n};\n\nconst ButtonGroup = ({\n  children,\n  vertical = false,\n  className = '',\n  rounded = 'none',\n  radius = 'full',\n  roundedStyle,\n}: ButtonGroupProps) => {\n  const joinClasses = [\n    'join',\n    vertical ? 'join-vertical' : 'join-horizontal',\n    className\n  ].filter(Boolean).join(' ');\n\n  // 当rounded不为'none'时，强制使用'full'作为radius值\n  const effectiveRadius = rounded !== 'none' ? 'full' : radius;\n\n  return (\n    <div className={joinClasses}>\n      {React.Children.map(children, (child, index) => {\n        // 只处理有效的React元素\n        if (!React.isValidElement(child)) return child;\n\n        const childElement = child as ReactElement<{ className?: string }>;\n        const childClassName = childElement.props.className || '';\n        const isFirstChild = index === 0;\n        const isLastChild = index === React.Children.count(children) - 1;\n\n        // 根据rounded属性添加额外的圆角类\n        let roundedClasses = '';\n\n        if (roundedStyle) {\n          // 使用自定义圆角样式\n          if (vertical) {\n            if ((rounded === 'left' || rounded === 'top') && isFirstChild && roundedStyle.top) {\n              roundedClasses = roundedStyle.top;\n            } else if ((rounded === 'right' || rounded === 'bottom') && isLastChild && roundedStyle.bottom) {\n              roundedClasses = roundedStyle.bottom;\n            } else if (rounded === 'both') {\n              if (isFirstChild && roundedStyle.top) roundedClasses = roundedStyle.top;\n              if (isLastChild && roundedStyle.bottom) roundedClasses = roundedStyle.bottom;\n            }\n          } else {\n            if ((rounded === 'left' || rounded === 'top') && isFirstChild && roundedStyle.left) {\n              roundedClasses = roundedStyle.left;\n            } else if ((rounded === 'right' || rounded === 'bottom') && isLastChild && roundedStyle.right) {\n              roundedClasses = roundedStyle.right;\n            } else if (rounded === 'both') {\n              if (isFirstChild && roundedStyle.left) roundedClasses = roundedStyle.left;\n              if (isLastChild && roundedStyle.right) roundedClasses = roundedStyle.right;\n            }\n          }\n        } else {\n          // 使用默认的圆角大小\n          if (vertical) {\n            // 垂直布局时，圆角应用在上下方\n            if (rounded === 'left' || rounded === 'top') {\n              if (isFirstChild) roundedClasses = `rounded-t-${effectiveRadius}`;\n            } else if (rounded === 'right' || rounded === 'bottom') {\n              if (isLastChild) roundedClasses = `rounded-b-${effectiveRadius}`;\n            } else if (rounded === 'both') {\n              if (isFirstChild) roundedClasses = `rounded-t-${effectiveRadius}`;\n              if (isLastChild) roundedClasses = `rounded-b-${effectiveRadius}`;\n            }\n          } else {\n            // 水平布局时，圆角应用在左右方\n            if (rounded === 'left' || rounded === 'top') {\n              if (isFirstChild) roundedClasses = `rounded-l-${effectiveRadius}`;\n            } else if (rounded === 'right' || rounded === 'bottom') {\n              if (isLastChild) roundedClasses = `rounded-r-${effectiveRadius}`;\n            } else if (rounded === 'both') {\n              if (isFirstChild) roundedClasses = `rounded-l-${effectiveRadius}`;\n              if (isLastChild) roundedClasses = `rounded-r-${effectiveRadius}`;\n            }\n          }\n        }\n\n        const newClassName = `${childClassName} join-item ${roundedClasses}`.trim();\n\n        return React.cloneElement(childElement, {\n          className: newClassName,\n        });\n      })}\n    </div>\n  );\n};\n\n// Button.GroupSection 组件\nexport type ButtonGroupSectionProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nconst ButtonGroupSection = ({\n  children,\n  className = '',\n}: ButtonGroupSectionProps) => {\n  const sectionClasses = [\n    'join-item',\n    'flex',\n    'items-center',\n    'px-4',\n    'bg-base-200',\n    'border',\n    'border-base-300',\n    className\n  ].filter(Boolean).join(' ');\n\n  return (\n    <div className={sectionClasses}>\n      {children}\n    </div>\n  );\n};\n\n// 扩展Button组件，添加Group和GroupSection子组件\ninterface ButtonCompound extends React.FC<ButtonProps> {\n  Group: React.FC<ButtonGroupProps>;\n  GroupSection: React.FC<ButtonGroupSectionProps>;\n}\n\nconst ButtonWithCompounds = Button as ButtonCompound;\nButtonWithCompounds.Group = ButtonGroup;\nButtonWithCompounds.GroupSection = ButtonGroupSection;\n\nexport default ButtonWithCompounds; "],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/Button/index.tsx"],"sourcesContent":["import React, { ReactElement, useState, useCallback } from 'react';\nimport { cn } from '../../utils/cn';\n\n// 状态项定义\nexport type ButtonState = {\n  label: string;          // 显示的字符/文本\n  key: string;            // 状态的唯一标识\n  variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link';\n  icon?: React.ReactNode; // 可选的图标\n};\n\nexport type ButtonProps = {\n  children?: React.ReactNode;\n  variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link';\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';\n  outline?: boolean;\n  dash?: boolean;\n  soft?: boolean;\n  active?: boolean;\n  disabled?: boolean;\n  wide?: boolean;\n  block?: boolean;\n  square?: boolean;\n  circle?: boolean;\n  leftSection?: React.ReactNode;\n  rightSection?: React.ReactNode;\n  onClick?: () => void;\n  /** 原生 button type；不传时保持浏览器默认行为（表单内默认 submit） */\n  type?: 'button' | 'submit' | 'reset';\n  className?: string;\n\n  // 状态切换相关\n  states?: ButtonState[];           // 状态列表\n  initialStateIndex?: number;       // 初始状态索引\n  onStateChange?: (state: ButtonState, clickCount: number, stateIndex: number) => void;  // 状态改变回调\n};\n\nconst Button = ({\n  children,\n  variant = 'primary',\n  size = 'sm',\n  outline = false,\n  dash = false,\n  soft = false,\n  active = false,\n  disabled = false,\n  wide = false,\n  block = false,\n  square = false,\n  circle = false,\n  leftSection,\n  rightSection,\n  onClick,\n  type,\n  className = '',\n  states,\n  initialStateIndex = 0,\n  onStateChange,\n}: ButtonProps) => {\n  // 状态管理\n  const [currentStateIndex, setCurrentStateIndex] = useState(initialStateIndex);\n  const [clickCount, setClickCount] = useState(0);\n\n  // 是否是状态按钮\n  const isStateful = states && states.length > 0;\n\n  // 获取当前状态\n  const currentState = isStateful ? states[currentStateIndex] : null;\n\n  // 处理点击\n  const handleClick = useCallback(() => {\n    if (isStateful) {\n      const newClickCount = clickCount + 1;\n      const newStateIndex = (currentStateIndex + 1) % states.length;\n      const newState = states[newStateIndex];\n\n      setClickCount(newClickCount);\n      setCurrentStateIndex(newStateIndex);\n\n      // 调用状态改变回调\n      if (onStateChange) {\n        onStateChange(newState, newClickCount, newStateIndex);\n      }\n    }\n\n    // 调用原始 onClick\n    if (onClick) {\n      onClick();\n    }\n  }, [isStateful, states, currentStateIndex, clickCount, onStateChange, onClick]);\n\n  // 确定使用的 variant\n  const effectiveVariant = currentState?.variant || variant;\n\n  // 确定显示的内容\n  const displayContent = isStateful ? (\n    <>\n      {currentState?.icon && <span className=\"mr-1\">{currentState.icon}</span>}\n      {currentState?.label}\n    </>\n  ) : children;\n\n  const baseClass = 'btn';\n  const variantClass = effectiveVariant ? `btn-${effectiveVariant}` : '';\n  const sizeClass = size ? `btn-${size}` : '';\n  const outlineClass = outline ? 'btn-outline' : '';\n  const dashClass = dash ? 'btn-dash' : '';\n  const softClass = soft ? 'btn-soft' : '';\n  const activeClass = active || isStateful ? 'btn-active' : '';\n  const wideClass = wide ? 'btn-wide' : '';\n  const blockClass = block ? 'btn-block' : '';\n  const squareClass = square ? 'btn-square' : '';\n  const circleClass = circle ? 'btn-circle' : '';\n\n  const buttonClasses = cn(\n    baseClass,\n    variantClass,\n    sizeClass,\n    outlineClass,\n    dashClass,\n    softClass,\n    activeClass,\n    wideClass,\n    blockClass,\n    squareClass,\n    circleClass,\n    className\n  );\n\n  return (\n    <button\n      type={type}\n      className={buttonClasses}\n      disabled={disabled}\n      onClick={handleClick}\n      title={isStateful ? `当前状态: ${currentState?.key} (点击次数: ${clickCount})` : undefined}\n    >\n      {!isStateful && leftSection && <span className=\"mr-2\">{leftSection}</span>}\n      {displayContent}\n      {!isStateful && rightSection && <span className=\"ml-2\">{rightSection}</span>}\n    </button>\n  );\n};\n\n// Button.Group 组件\nexport type ButtonGroupProps = {\n  children: React.ReactNode;\n  vertical?: boolean;\n  className?: string;\n  rounded?: 'left' | 'right' | 'both' | 'none' | 'top' | 'bottom';\n  radius?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';\n  roundedStyle?: {\n    left?: string;\n    right?: string;\n    top?: string;\n    bottom?: string;\n  };\n};\n\nconst ButtonGroup = ({\n  children,\n  vertical = false,\n  className = '',\n  rounded = 'none',\n  radius = 'full',\n  roundedStyle,\n}: ButtonGroupProps) => {\n  const joinClasses = cn(\n    'join',\n    vertical ? 'join-vertical' : 'join-horizontal',\n    className\n  );\n\n  // 当rounded不为'none'时，强制使用'full'作为radius值\n  const effectiveRadius = rounded !== 'none' ? 'full' : radius;\n\n  return (\n    <div className={joinClasses}>\n      {React.Children.map(children, (child, index) => {\n        // 只处理有效的React元素\n        if (!React.isValidElement(child)) return child;\n\n        const childElement = child as ReactElement<{ className?: string }>;\n        const childClassName = childElement.props.className || '';\n        const isFirstChild = index === 0;\n        const isLastChild = index === React.Children.count(children) - 1;\n\n        // 根据rounded属性添加额外的圆角类\n        let roundedClasses = '';\n\n        if (roundedStyle) {\n          // 使用自定义圆角样式\n          if (vertical) {\n            if ((rounded === 'left' || rounded === 'top') && isFirstChild && roundedStyle.top) {\n              roundedClasses = roundedStyle.top;\n            } else if ((rounded === 'right' || rounded === 'bottom') && isLastChild && roundedStyle.bottom) {\n              roundedClasses = roundedStyle.bottom;\n            } else if (rounded === 'both') {\n              if (isFirstChild && roundedStyle.top) roundedClasses = roundedStyle.top;\n              if (isLastChild && roundedStyle.bottom) roundedClasses = roundedStyle.bottom;\n            }\n          } else {\n            if ((rounded === 'left' || rounded === 'top') && isFirstChild && roundedStyle.left) {\n              roundedClasses = roundedStyle.left;\n            } else if ((rounded === 'right' || rounded === 'bottom') && isLastChild && roundedStyle.right) {\n              roundedClasses = roundedStyle.right;\n            } else if (rounded === 'both') {\n              if (isFirstChild && roundedStyle.left) roundedClasses = roundedStyle.left;\n              if (isLastChild && roundedStyle.right) roundedClasses = roundedStyle.right;\n            }\n          }\n        } else {\n          // 使用默认的圆角大小\n          if (vertical) {\n            // 垂直布局时，圆角应用在上下方\n            if (rounded === 'left' || rounded === 'top') {\n              if (isFirstChild) roundedClasses = `rounded-t-${effectiveRadius}`;\n            } else if (rounded === 'right' || rounded === 'bottom') {\n              if (isLastChild) roundedClasses = `rounded-b-${effectiveRadius}`;\n            } else if (rounded === 'both') {\n              if (isFirstChild) roundedClasses = `rounded-t-${effectiveRadius}`;\n              if (isLastChild) roundedClasses = `rounded-b-${effectiveRadius}`;\n            }\n          } else {\n            // 水平布局时，圆角应用在左右方\n            if (rounded === 'left' || rounded === 'top') {\n              if (isFirstChild) roundedClasses = `rounded-l-${effectiveRadius}`;\n            } else if (rounded === 'right' || rounded === 'bottom') {\n              if (isLastChild) roundedClasses = `rounded-r-${effectiveRadius}`;\n            } else if (rounded === 'both') {\n              if (isFirstChild) roundedClasses = `rounded-l-${effectiveRadius}`;\n              if (isLastChild) roundedClasses = `rounded-r-${effectiveRadius}`;\n            }\n          }\n        }\n\n        const newClassName = `${childClassName} join-item ${roundedClasses}`.trim();\n\n        return React.cloneElement(childElement, {\n          className: newClassName,\n        });\n      })}\n    </div>\n  );\n};\n\n// Button.GroupSection 组件\nexport type ButtonGroupSectionProps = {\n  children: React.ReactNode;\n  className?: string;\n};\n\nconst ButtonGroupSection = ({\n  children,\n  className = '',\n}: ButtonGroupSectionProps) => {\n  const sectionClasses = cn(\n    'join-item',\n    'flex',\n    'items-center',\n    'px-4',\n    'bg-base-200',\n    'border',\n    'border-base-300',\n    className\n  );\n\n  return (\n    <div className={sectionClasses}>\n      {children}\n    </div>\n  );\n};\n\n// 扩展Button组件，添加Group和GroupSection子组件\ninterface ButtonCompound extends React.FC<ButtonProps> {\n  Group: React.FC<ButtonGroupProps>;\n  GroupSection: React.FC<ButtonGroupSectionProps>;\n}\n\nconst ButtonWithCompounds = Button as ButtonCompound;\nButtonWithCompounds.Group = ButtonGroup;\nButtonWithCompounds.GroupSection = ButtonGroupSection;\n\nexport default ButtonWithCompounds; "],"mappings":"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"}

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

@@ -40,11 +40,153 @@ export type CardFigureProps = {
     /** 指定 figure 高度（数字按 px，支持 "16rem"/"50%" 等）；内部图片自动填满该高度 */
     height?: number | string;
 };
+export type CardFeatureProps = {
+    /** Icon node (usually a lucide / inline svg), rendered inside a tinted container. */
+    icon?: React.ReactNode;
+    /** Feature title. */
+    title: React.ReactNode;
+    /** Feature description rendered under the title. */
+    description?: React.ReactNode;
+    /** `vertical` centers everything with the icon on top; `horizontal` puts the icon at the left. */
+    layout?: 'vertical' | 'horizontal';
+    /** Icon container shape. Defaults to `circle` (vertical) / `square` (horizontal). */
+    iconShape?: 'circle' | 'square';
+    /** Extra content rendered under the description. */
+    children?: React.ReactNode;
+    /** Color variant (daisyUI). */
+    variant?: CardProps['variant'];
+    /** Show a border. */
+    bordered?: boolean;
+    /** Disable the default glass background. */
+    glass?: boolean;
+    /** Extra class names on the card. */
+    className?: string;
+    /** Click handler. */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export type CardQuoteProps = {
+    /** The quoted text. */
+    children: React.ReactNode;
+    /** Author name (rendered in primary color). */
+    author?: React.ReactNode;
+    /** Avatar node (e.g. an `<img>` or initial circle) shown before the author. */
+    avatar?: React.ReactNode;
+    /** Date string/node rendered at the right side of the footer. */
+    date?: React.ReactNode;
+    /** Hide the decorative quote glyph in the top-right corner. */
+    quoteMark?: boolean;
+    /** Hide the divider between quote and footer. */
+    divider?: boolean;
+    /** Color variant (daisyUI). */
+    variant?: CardProps['variant'];
+    /** Show a border. */
+    bordered?: boolean;
+    /** Disable the default glass background. */
+    glass?: boolean;
+    /** Extra class names on the card. */
+    className?: string;
+    /** Click handler. */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export type CardMetaProps = {
+    /** Card title (top-left). */
+    title: React.ReactNode;
+    /** Badge / tag node (top-right, e.g. a visibility badge). */
+    badge?: React.ReactNode;
+    /** Body content under the title row. */
+    children?: React.ReactNode;
+    /** Footer left slot (e.g. `@author`). */
+    footerLeft?: React.ReactNode;
+    /** Footer right slot (e.g. a date). */
+    footerRight?: React.ReactNode;
+    /** Color variant (daisyUI). */
+    variant?: CardProps['variant'];
+    /** Show a border. */
+    bordered?: boolean;
+    /** Disable the default glass background. */
+    glass?: boolean;
+    /** Extra class names on the card. */
+    className?: string;
+    /** Click handler. */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export type CardInfoTone = 'primary' | 'success' | 'warning' | 'info' | 'error' | 'neutral';
+export type CardInfoProps = {
+    /** Metric name (top-left, small muted text). */
+    label: React.ReactNode;
+    /** Metric value (number or short text). */
+    value: React.ReactNode;
+    /** Icon node, auto-sized and tinted by tone. */
+    icon?: React.ReactNode;
+    /** `top` (default) puts the icon at the right of the label row; `left` puts it on the left (horizontal layout). */
+    iconPosition?: 'top' | 'left';
+    /** 图标底框形状：`square`（默认，方形圆角）/ `circle`（正圆）。 */
+    iconShape?: 'square' | 'circle';
+    /** 是否给图标加色调底框（默认 `true`）；`false` 时渲染不带底框、仅保留 tone 文字色的裸图标。 */
+    iconBoxed?: boolean;
+    /** Tone (icon text & background color). */
+    tone?: CardInfoTone;
+    /** Small hint text below the value (e.g. deltas, update time). */
+    hint?: React.ReactNode;
+    /** Loading state: value renders as a skeleton. */
+    loading?: boolean;
+    /** Color variant (daisyUI). */
+    variant?: CardProps['variant'];
+    /** Show a border (default true). */
+    bordered?: boolean;
+    /** Enable the glass background (default false — solid `bg-base-200`). */
+    glass?: boolean;
+    /** Extra class names on the card. */
+    className?: string;
+    /** Click handler. */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
+export type CardStatProps = {
+    /** 面板标签 */
+    label: React.ReactNode;
+    /** 面板数值（数字或短文本） */
+    value: React.ReactNode;
+    /** 色调（决定数值文字色 / 角标三角 / filled 底色） */
+    tone?: CardInfoTone;
+    /** 加载态：值显示为骨架 */
+    loading?: boolean;
+    className?: string;
+    /** 数值单位后缀（如 `K`、`%`），以小号字体渲染在数值右侧。 */
+    unit?: React.ReactNode;
+    /** 面板数值字号，默认 `xl`。 */
+    valueSize?: 'md' | 'lg' | 'xl' | '2xl';
+    /** 面板内容对齐，默认 `left`。 */
+    align?: 'left' | 'center';
+    /** 直接传入迷你图节点（优先于 sparklineData）。 */
+    sparkline?: React.ReactNode;
+    /** 迷你图数据：传入数值数组后自动渲染 sparkline。 */
+    sparklineData?: number[];
+    /** 迷你图类型：折线 / 面积 / 柱状。 */
+    sparklineType?: 'line' | 'area' | 'bar';
+    /** 迷你图高度（px）。 */
+    sparklineHeight?: number;
+    /** 右上角状态三角（Grafana 阈值指示）。 */
+    indicator?: boolean;
+    /** 整卡填充 tone 底色、文字用对应 content 色（图 RabbitMQ 风格）。 */
+    filled?: boolean;
+    /** 点击回调（面板常用于跳转详情）。 */
+    onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
+};
 interface CardCompound extends React.FC<CardProps> {
     Title: React.FC<CardTitleProps>;
     Body: React.FC<CardBodyProps>;
     Actions: React.FC<CardActionsProps>;
     Figure: React.FC<CardFigureProps>;
+    /** 特性卡：图标 + 标题 + 描述（垂直居中 / 横向两种布局） */
+    Feature: React.FC<CardFeatureProps>;
+    /** 引用卡：引用文本 + 作者头像 / 日期 + 装饰引号 */
+    Quote: React.FC<CardQuoteProps>;
+    /** 元信息卡：标题 + 徽章 + 描述 + 左右页脚 */
+    Meta: React.FC<CardMetaProps>;
+    /** 指标卡：标签 + 数值 + 可选图标 / hint / 加载态（仪表盘统计卡片） */
+    Info: React.FC<CardInfoProps>;
+    /** 统计面板：Grafana 风格超大数值 + 迷你折线 / 面积 / 柱状图 / 角标 / 填充色 */
+    Stat: React.FC<CardStatProps>;
 }
 declare const CardWithCompounds: CardCompound;
 export default CardWithCompounds;

package/dist/components/Card/index.js

@@ -1,72 +1,371 @@
+import { cn as e } from "../../utils/cn.js";
 import "react";
-import { jsx as r } from "react/jsx-runtime";
-var x = ({ children: s, variant: a, bordered: o = !1, dash: e = !1, side: l = !1, imageFull: i = !1, compact: d = !1, hover: f = !0, glass: m = !0, size: n = "sm", className: c = "" }) => {
-  const u = "card", C = m && !a ? "glass shadow-lg" : "", g = a ? `bg-${a} text-${a}-content shadow-md` : "", v = o ? "card-bordered" : "", h = e ? "card-dash" : "", w = l ? "card-side" : "", b = i ? "image-full" : "", j = d ? "card-compact" : "", p = f ? "hover:shadow-xl transition-shadow duration-300" : "", y = n ? `card-${n}` : "";
-  c.includes("w-") || c.match(/max-w-|min-w-/);
-  const B = [
-    u,
-    "",
-    C,
-    g,
-    v,
-    h,
-    w,
-    b,
-    j,
-    p,
-    y,
-    c
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("div", {
-    className: B,
-    children: s
-  });
-}, $ = ({ children: s, className: a = "" }) => {
-  const o = ["card-title", a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("h2", {
-    className: o,
-    children: s
-  });
-}, F = ({ children: s, className: a = "" }) => {
-  const o = ["card-body", a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("div", {
-    className: o,
-    children: s
-  });
-}, S = ({ children: s, className: a = "", justify: o = "end" }) => {
-  const e = [
-    "card-actions",
-    o ? `justify-${o}` : "",
-    a
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("div", {
-    className: e,
-    children: s
-  });
-}, A = {
-  cover: "[&>img]:object-cover",
-  contain: "[&>img]:object-contain",
-  fill: "[&>img]:object-fill"
-}, N = (s) => typeof s == "number" ? `${s}px` : s, T = ({ children: s, className: a = "", fit: o = "cover", fill: e = !1, height: l }) => {
-  const i = [
-    "figure",
-    A[o],
-    e ? "w-full h-full [&>img]:h-full [&>img]:w-full" : "",
-    l !== void 0 ? "w-full [&>img]:h-full [&>img]:w-full" : "",
-    a
-  ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ r("figure", {
-    className: i,
-    style: l !== void 0 ? { height: N(l) } : void 0,
-    children: s
-  });
-}, t = x;
-t.Title = $;
-t.Body = F;
-t.Actions = S;
-t.Figure = T;
-export {
-  t as default
-};
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Card/index.tsx
+var r = ({ children: n, variant: r, bordered: i = !1, dash: a = !1, side: o = !1, imageFull: s = !1, compact: c = !1, hover: l = !0, glass: u = !0, size: d = "sm", className: f = "" }) => {
+	let p = u && !r ? "glass shadow-lg" : "", m = r ? `bg-${r} text-${r}-content shadow-md` : "", h = i ? "card-bordered" : "", g = a ? "card-dash" : "", _ = o ? "card-side" : "", v = s ? "image-full" : "", y = c ? "card-compact" : "", b = l ? "hover:shadow-xl transition-shadow duration-300" : "", x = d ? `card-${d}` : "";
+	f.includes("w-") || f.match(/max-w-|min-w-/);
+	let S = e("card", "", p, m, h, g, _, v, y, b, x, f);
+	return /* @__PURE__ */ t("div", {
+		className: S,
+		children: n
+	});
+}, i = ({ children: n, className: r = "" }) => {
+	let i = e("card-title", r);
+	return /* @__PURE__ */ t("h2", {
+		className: i,
+		children: n
+	});
+}, a = ({ children: n, className: r = "" }) => {
+	let i = e("card-body", r);
+	return /* @__PURE__ */ t("div", {
+		className: i,
+		children: n
+	});
+}, o = ({ children: n, className: r = "", justify: i = "end" }) => {
+	let a = e("card-actions", i && `justify-${i}`, r);
+	return /* @__PURE__ */ t("div", {
+		className: a,
+		children: n
+	});
+}, s = {
+	cover: "[&>img]:object-cover",
+	contain: "[&>img]:object-contain",
+	fill: "[&>img]:object-fill"
+}, c = (e) => typeof e == "number" ? `${e}px` : e, l = ({ children: n, className: r = "", fit: i = "cover", fill: a = !1, height: o }) => {
+	let l = e("figure", s[i], a && "w-full h-full [&>img]:h-full [&>img]:w-full", o !== void 0 && "w-full [&>img]:h-full [&>img]:w-full", r);
+	return /* @__PURE__ */ t("figure", {
+		className: l,
+		style: o === void 0 ? void 0 : { height: c(o) },
+		children: n
+	});
+}, u = ({ variant: t, bordered: n = !1, glass: r = !0, className: i = "" }) => {
+	let a = r && !t ? "glass shadow-lg" : "", o = t ? `bg-${t} text-${t}-content shadow-md` : "";
+	return e("card", a, o, n && "card-bordered", i);
+}, d = ({ className: r }) => /* @__PURE__ */ n("svg", {
+	xmlns: "http://www.w3.org/2000/svg",
+	className: e("h-4 w-4", r),
+	fill: "none",
+	viewBox: "0 0 24 24",
+	stroke: "currentColor",
+	strokeWidth: 2,
+	children: [/* @__PURE__ */ t("circle", {
+		cx: "12",
+		cy: "12",
+		r: "9"
+	}), /* @__PURE__ */ t("path", {
+		strokeLinecap: "round",
+		d: "M12 7v5l3 2"
+	})]
+}), f = ({ icon: r, title: i, description: a, layout: o = "vertical", iconShape: s, children: c, variant: l, bordered: d, glass: f = !0, className: p = "", onClick: m }) => {
+	let h = r && /* @__PURE__ */ t("span", {
+		className: e("flex shrink-0 items-center justify-center bg-primary/10 text-primary", o === "vertical" ? "size-16" : "size-12", (s ?? (o === "vertical" ? "circle" : "square")) === "circle" ? "rounded-full" : "rounded-xl"),
+		children: r
+	});
+	return /* @__PURE__ */ t("div", {
+		className: u({
+			variant: l,
+			bordered: d,
+			glass: f,
+			className: p
+		}),
+		onClick: m,
+		children: o === "horizontal" ? /* @__PURE__ */ n("div", {
+			className: "card-body flex-row items-center gap-4",
+			children: [h, /* @__PURE__ */ n("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ t("h3", {
+						className: "font-semibold text-base-content",
+						children: i
+					}),
+					a && /* @__PURE__ */ t("p", {
+						className: "mt-0.5 text-sm text-base-content/70",
+						children: a
+					}),
+					c
+				]
+			})]
+		}) : /* @__PURE__ */ n("div", {
+			className: "card-body items-center gap-3 text-center",
+			children: [
+				h,
+				/* @__PURE__ */ t("h3", {
+					className: "text-lg font-bold text-base-content",
+					children: i
+				}),
+				a && /* @__PURE__ */ t("p", {
+					className: "text-sm leading-relaxed text-base-content/70",
+					children: a
+				}),
+				c
+			]
+		})
+	});
+}, p = ({ children: r, author: i, avatar: a, date: o, quoteMark: s = !0, divider: c = !0, variant: l, bordered: f, glass: p = !0, className: m = "", onClick: h }) => /* @__PURE__ */ n("div", {
+	className: e(u({
+		variant: l,
+		bordered: f,
+		glass: p,
+		className: m
+	}), "relative overflow-hidden"),
+	onClick: h,
+	children: [s && /* @__PURE__ */ t("span", {
+		"aria-hidden": "true",
+		className: "pointer-events-none absolute right-5 top-2 select-none font-serif text-6xl leading-none text-primary/25",
+		children: "”"
+	}), /* @__PURE__ */ n("div", {
+		className: "card-body gap-0 p-6",
+		children: [/* @__PURE__ */ t("div", {
+			className: "relative z-10 text-lg text-base-content",
+			children: r
+		}), /* @__PURE__ */ n("div", {
+			className: e("mt-4 flex items-center justify-between gap-3", c && "border-t border-base-300 pt-3.5"),
+			children: [/* @__PURE__ */ n("div", {
+				className: "flex min-w-0 items-center gap-2.5",
+				children: [a && /* @__PURE__ */ t("span", {
+					className: "size-8 shrink-0 overflow-hidden rounded-full",
+					children: a
+				}), i && /* @__PURE__ */ t("span", {
+					className: "truncate text-sm font-medium text-primary",
+					children: i
+				})]
+			}), o && /* @__PURE__ */ n("span", {
+				className: "flex shrink-0 items-center gap-1.5 text-sm text-base-content/55",
+				children: [/* @__PURE__ */ t(d, {}), o]
+			})]
+		})]
+	})]
+}), m = ({ title: e, badge: r, children: i, footerLeft: a, footerRight: o, variant: s, bordered: c, glass: l = !0, className: d = "", onClick: f }) => /* @__PURE__ */ t("div", {
+	className: u({
+		variant: s,
+		bordered: c,
+		glass: l,
+		className: d
+	}),
+	onClick: f,
+	children: /* @__PURE__ */ n("div", {
+		className: "card-body gap-2.5 p-6",
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "flex items-center justify-between gap-3",
+				children: [/* @__PURE__ */ t("h3", {
+					className: "min-w-0 flex-1 truncate text-lg font-bold text-base-content",
+					children: e
+				}), r && /* @__PURE__ */ t("span", {
+					className: "shrink-0",
+					children: r
+				})]
+			}),
+			i && /* @__PURE__ */ t("div", {
+				className: "text-sm text-base-content/75",
+				children: i
+			}),
+			(a || o) && /* @__PURE__ */ n("div", {
+				className: "mt-1.5 flex items-center justify-between gap-3 text-sm text-base-content/55",
+				children: [/* @__PURE__ */ t("span", {
+					className: "min-w-0 truncate",
+					children: a
+				}), /* @__PURE__ */ t("span", {
+					className: "shrink-0",
+					children: o
+				})]
+			})
+		]
+	})
+}), h = {
+	primary: {
+		text: "text-primary",
+		bg: "bg-primary/10"
+	},
+	success: {
+		text: "text-success",
+		bg: "bg-success/10"
+	},
+	warning: {
+		text: "text-warning",
+		bg: "bg-warning/10"
+	},
+	info: {
+		text: "text-info",
+		bg: "bg-info/10"
+	},
+	error: {
+		text: "text-error",
+		bg: "bg-error/10"
+	},
+	neutral: {
+		text: "text-base-content/70",
+		bg: "bg-base-content/5"
+	}
+}, g = ({ label: r, value: i, icon: a, iconPosition: o = "top", iconShape: s = "square", iconBoxed: c = !0, tone: l = "primary", hint: d, loading: f = !1, variant: p, bordered: m = !0, glass: g = !1, className: _ = "", onClick: v }) => {
+	let y = h[l], b = u({
+		variant: p,
+		bordered: m,
+		glass: g,
+		className: e("bg-base-200 p-4", _)
+	}), x = a && /* @__PURE__ */ t("span", {
+		className: e(o === "left" ? "flex shrink-0 items-center justify-center p-2.5 [&>svg]:h-5 [&>svg]:w-5" : "p-1.5 [&>svg]:h-4 [&>svg]:w-4", s === "circle" ? "rounded-full" : o === "left" ? "rounded-lg" : "rounded-md", y.bg, y.text),
+		children: a
+	}), S = a && /* @__PURE__ */ t("span", {
+		className: e(o === "left" ? "flex shrink-0" : "inline-flex", "[&>svg]:h-6 [&>svg]:w-6", y.text),
+		children: a
+	});
+	return o === "left" ? /* @__PURE__ */ t("div", {
+		className: e(b, "transition-shadow duration-300 hover:shadow-xl"),
+		onClick: v,
+		children: /* @__PURE__ */ n("div", {
+			className: "flex items-center gap-3",
+			children: [c ? x : S, /* @__PURE__ */ n("div", {
+				className: "min-w-0 flex-1",
+				children: [
+					/* @__PURE__ */ t("span", {
+						className: "block truncate text-xs font-medium text-base-content/60",
+						children: r
+					}),
+					f ? /* @__PURE__ */ t("div", { className: "mt-1 h-6 w-14 animate-pulse rounded bg-base-content/10" }) : /* @__PURE__ */ t("p", {
+						className: "truncate text-xl font-bold leading-tight text-base-content",
+						children: i
+					}),
+					d && /* @__PURE__ */ t("p", {
+						className: "mt-0.5 truncate text-[11px] text-base-content/50",
+						children: d
+					})
+				]
+			})]
+		})
+	}) : /* @__PURE__ */ n("div", {
+		className: e(b, "transition-shadow duration-300 hover:shadow-xl"),
+		onClick: v,
+		children: [
+			/* @__PURE__ */ n("div", {
+				className: "mb-2 flex items-center justify-between gap-2",
+				children: [/* @__PURE__ */ t("span", {
+					className: "truncate text-xs font-medium text-base-content/60",
+					children: r
+				}), c ? x : S]
+			}),
+			f ? /* @__PURE__ */ t("div", { className: "h-7 w-14 animate-pulse rounded bg-base-content/10" }) : /* @__PURE__ */ t("p", {
+				className: "text-2xl font-bold leading-none text-base-content",
+				children: i
+			}),
+			d && /* @__PURE__ */ t("p", {
+				className: "mt-1.5 text-[11px] text-base-content/50",
+				children: d
+			})
+		]
+	});
+}, _ = {
+	primary: "text-primary",
+	success: "text-success",
+	warning: "text-warning",
+	info: "text-info",
+	error: "text-error",
+	neutral: "text-base-content/70"
+}, v = {
+	primary: "bg-primary text-primary-content",
+	success: "bg-success text-success-content",
+	warning: "bg-warning text-warning-content",
+	info: "bg-info text-info-content",
+	error: "bg-error text-error-content",
+	neutral: "bg-neutral text-neutral-content"
+}, y = {
+	md: "text-2xl",
+	lg: "text-4xl",
+	xl: "text-5xl",
+	"2xl": "text-6xl"
+}, b = (e) => e === "neutral" ? "var(--color-base-content)" : `var(--color-${e})`, x = ({ data: e, type: r, height: i }) => {
+	if (!e || e.length < 2) return null;
+	let a = Math.min(...e), o = Math.max(...e) - a || 1, s = (t) => t / (e.length - 1) * 100, c = (e) => i - 3 - (e - a) / o * (i - 6), l = e.map((e, t) => `${s(t).toFixed(2)},${c(e).toFixed(2)}`);
+	if (r === "bar") {
+		let n = 100 / e.length;
+		return /* @__PURE__ */ t("svg", {
+			viewBox: `0 0 100 ${i}`,
+			preserveAspectRatio: "none",
+			className: "block w-full",
+			style: { height: i },
+			"aria-hidden": "true",
+			children: e.map((e, r) => /* @__PURE__ */ t("rect", {
+				x: s(r) - n / 2,
+				y: c(e),
+				width: n * .8,
+				height: Math.max(1, i - 3 - c(e)),
+				fill: "currentColor"
+			}, r))
+		});
+	}
+	return r === "area" ? /* @__PURE__ */ n("svg", {
+		viewBox: `0 0 100 ${i}`,
+		preserveAspectRatio: "none",
+		className: "block w-full",
+		style: { height: i },
+		"aria-hidden": "true",
+		children: [/* @__PURE__ */ t("path", {
+			d: `M0,${i} L${l.join(" L")} L100,${i} Z`,
+			fill: "currentColor",
+			opacity: .18
+		}), /* @__PURE__ */ t("polyline", {
+			points: l.join(" "),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			vectorEffect: "non-scaling-stroke"
+		})]
+	}) : /* @__PURE__ */ t("svg", {
+		viewBox: `0 0 100 ${i}`,
+		preserveAspectRatio: "none",
+		className: "block w-full",
+		style: { height: i },
+		"aria-hidden": "true",
+		children: /* @__PURE__ */ t("polyline", {
+			points: l.join(" "),
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: 1.5,
+			vectorEffect: "non-scaling-stroke"
+		})
+	});
+}, S = ({ label: e, value: r, tone: i = "primary", loading: a = !1, className: o = "", unit: s, valueSize: c = "xl", align: l = "left", sparkline: u, sparklineData: d, sparklineType: f = "line", sparklineHeight: p = 36, indicator: m = !1, filled: h = !1, onClick: g }) => {
+	let S = u ?? (d && d.length >= 2 ? /* @__PURE__ */ t(x, {
+		data: d,
+		type: f,
+		height: p
+	}) : null), C = h ? "" : _[i], w = h ? "opacity-80" : "text-base-content/60";
+	return /* @__PURE__ */ n("div", {
+		onClick: g,
+		className: `relative flex flex-col overflow-hidden rounded-lg p-3 ${h ? v[i] : "border border-base-300/60 bg-base-200"} ${g ? "cursor-pointer transition-colors hover:border-primary/40" : ""} ${o}`.trim(),
+		children: [
+			m && !h && /* @__PURE__ */ t("span", {
+				"aria-hidden": "true",
+				className: "absolute right-0 top-0 h-0 w-0",
+				style: {
+					borderTop: "14px solid " + b(i),
+					borderLeft: "14px solid transparent"
+				}
+			}),
+			/* @__PURE__ */ t("div", {
+				className: `truncate text-xs font-medium ${w} ${l === "center" ? "text-center" : ""}`.trim(),
+				children: e
+			}),
+			/* @__PURE__ */ t("div", {
+				className: `flex min-h-[3rem] flex-1 items-center py-1 ${l === "center" ? "justify-center" : "justify-start"}`,
+				children: a ? /* @__PURE__ */ t("span", { className: `inline-block h-8 w-16 animate-pulse rounded ${h ? "bg-white/25" : "bg-base-content/10"}` }) : /* @__PURE__ */ n("span", {
+					className: `leading-none tracking-tight ${y[c]} font-semibold ${h ? "" : C}`.trim(),
+					children: [r, s != null && s !== "" && /* @__PURE__ */ t("span", {
+						className: "ml-0.5 text-[0.45em] font-semibold",
+						children: s
+					})]
+				})
+			}),
+			S && /* @__PURE__ */ t("div", {
+				className: `-mx-3 -mb-3 mt-1 ${h ? "text-white" : _[i]}`,
+				children: S
+			})
+		]
+	});
+}, C = r;
+C.Title = i, C.Body = a, C.Actions = o, C.Figure = l, C.Feature = f, C.Quote = p, C.Meta = m, C.Info = g, C.Stat = S;
+//#endregion
+export { C as default };
 
 //# sourceMappingURL=index.js.map