dishui 0.0.72 → 0.0.73

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

@@ -2,12 +2,12 @@ import React from 'react';
 export type ButtonState = {
     label: string;
     key: string;
-    variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link';
+    variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'destructive' | 'ghost' | 'link';
     icon?: React.ReactNode;
 };
-export type ButtonProps = {
+export type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
     children?: React.ReactNode;
-    variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'ghost' | 'link';
+    variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'destructive' | 'ghost' | 'link';
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     outline?: boolean;
     dash?: boolean;
@@ -20,7 +20,7 @@ export type ButtonProps = {
     circle?: boolean;
     leftSection?: React.ReactNode;
     rightSection?: React.ReactNode;
-    onClick?: () => void;
+    onClick?: React.MouseEventHandler<HTMLButtonElement>;
     /** 原生 button type；不传时保持浏览器默认行为（表单内默认 submit） */
     type?: 'button' | 'submit' | 'reset';
     className?: string;

package/dist/components/Button/index.js

@@ -2,37 +2,38 @@ import { cn as e } from "../../utils/cn.js";
 import t, { useCallback as n, useState as r } from "react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/Button/index.tsx
-var s = ({ children: t, variant: s = "primary", size: c = "sm", outline: l = !1, dash: u = !1, soft: d = !1, active: f = !1, disabled: p = !1, wide: m = !1, block: h = !1, square: g = !1, circle: _ = !1, leftSection: v, rightSection: y, onClick: b, type: x, className: S = "", states: C, initialStateIndex: w = 0, onStateChange: T }) => {
-	let [E, D] = r(w), [O, k] = r(0), A = C && C.length > 0, j = A ? C[E] : null, M = n(() => {
-		if (A) {
-			let e = O + 1, t = (E + 1) % C.length, n = C[t];
-			k(e), D(t), T && T(n, e, t);
+var s = ({ children: t, variant: s = "primary", size: c = "sm", outline: l = !1, dash: u = !1, soft: d = !1, active: f = !1, disabled: p = !1, wide: m = !1, block: h = !1, square: g = !1, circle: _ = !1, leftSection: v, rightSection: y, onClick: b, type: x, className: S = "", states: C, initialStateIndex: w = 0, onStateChange: T, title: E, ...D }) => {
+	let [O, k] = r(w), [A, j] = r(0), M = C && C.length > 0, N = M ? C[O] : null, P = n((e) => {
+		if (M) {
+			let e = A + 1, t = (O + 1) % C.length, n = C[t];
+			j(e), k(t), T && T(n, e, t);
 		}
-		b && b();
+		b && b(e);
 	}, [
-		A,
+		M,
 		C,
-		E,
 		O,
+		A,
 		T,
 		b
-	]), N = j?.variant || s, P = A ? /* @__PURE__ */ o(i, { children: [j?.icon && /* @__PURE__ */ a("span", {
+	]), F = N?.variant || s, I = M ? /* @__PURE__ */ o(i, { children: [N?.icon && /* @__PURE__ */ a("span", {
 		className: "mr-1",
-		children: j.icon
-	}), j?.label] }) : t, F = N ? `btn-${N}` : "", I = c ? `btn-${c}` : "", L = e("btn", F, I, l ? "btn-outline" : "", u ? "btn-dash" : "", d ? "btn-soft" : "", f || A ? "btn-active" : "", m ? "btn-wide" : "", h ? "btn-block" : "", g ? "btn-square" : "", _ ? "btn-circle" : "", S);
+		children: N.icon
+	}), N?.label] }) : t, L = F === "destructive" ? "btn-error btn-destructive" : F ? `btn-${F}` : "", R = c ? `btn-${c}` : "", z = e("btn", L, R, l ? "btn-outline" : "", u ? "btn-dash" : "", d ? "btn-soft" : "", f || M ? "btn-active" : "", m ? "btn-wide" : "", h ? "btn-block" : "", g ? "btn-square" : "", _ ? "btn-circle" : "", S);
 	return /* @__PURE__ */ o("button", {
+		...D,
 		type: x,
-		className: L,
+		className: z,
 		disabled: p,
-		onClick: M,
-		title: A ? `当前状态: ${j?.key} (点击次数: ${O})` : void 0,
+		onClick: P,
+		title: E ?? (M ? `当前状态: ${N?.key} (点击次数: ${A})` : void 0),
 		children: [
-			!A && v && /* @__PURE__ */ a("span", {
+			!M && v && /* @__PURE__ */ a("span", {
 				className: "mr-2",
 				children: v
 			}),
-			P,
-			!A && y && /* @__PURE__ */ a("span", {
+			I,
+			!M && y && /* @__PURE__ */ a("span", {
 				className: "ml-2",
 				children: y
 			})

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';\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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"}
+{"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' | 'destructive' | 'ghost' | 'link';\n  icon?: React.ReactNode; // 可选的图标\n};\n\nexport type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {\n  children?: React.ReactNode;\n  variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error' | 'destructive' | '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?: React.MouseEventHandler<HTMLButtonElement>;\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  title,\n  ...rest\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((event: React.MouseEvent<HTMLButtonElement>) => {\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(event);\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 === 'destructive' ? 'btn-error btn-destructive' : 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      {...rest}\n      type={type}\n      className={buttonClasses}\n      disabled={disabled}\n      onClick={handleClick}\n      title={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/Metric.d.ts

@@ -0,0 +1,17 @@
+import React from 'react';
+export type CardMetricItem = {
+    /** Stable identity for items that may be reordered. */
+    key?: React.Key;
+    label: React.ReactNode;
+    value: React.ReactNode;
+};
+export type CardMetricProps = Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'children'> & {
+    title: React.ReactNode;
+    meta?: React.ReactNode;
+    period?: React.ReactNode;
+    value: React.ReactNode;
+    description?: React.ReactNode;
+    items?: CardMetricItem[];
+    loading?: boolean;
+};
+export declare const CardMetric: ({ title, meta, period, value, description, items, loading, className, ...rest }: CardMetricProps) => React.JSX.Element;

package/dist/components/Card/Metric2.js

@@ -0,0 +1,50 @@
+import { cn as e } from "../../utils/cn.js";
+/* empty css       */
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/components/Card/Metric.tsx
+var r = [], i = ({ title: i, meta: a, period: o, value: s, description: c, items: l = r, loading: u = !1, className: d, ...f }) => /* @__PURE__ */ n("article", {
+	...f,
+	className: e("blade-card-metric", d),
+	"aria-busy": u || void 0,
+	children: [/* @__PURE__ */ n("div", {
+		className: "blade-card-metric__body",
+		children: [
+			(a != null || o != null) && /* @__PURE__ */ n("div", {
+				className: "blade-card-metric__meta",
+				children: [/* @__PURE__ */ t("span", { children: a }), /* @__PURE__ */ t("span", {
+					className: "blade-card-metric__period",
+					children: o
+				})]
+			}),
+			/* @__PURE__ */ t("h3", {
+				className: "blade-card-metric__title",
+				children: i
+			}),
+			/* @__PURE__ */ t("div", {
+				className: "blade-card-metric__value",
+				children: u ? /* @__PURE__ */ t("span", {
+					className: "blade-card-metric__skeleton",
+					"aria-hidden": "true"
+				}) : s
+			}),
+			c != null && /* @__PURE__ */ t("div", {
+				className: "blade-card-metric__description",
+				children: c
+			})
+		]
+	}), l.length > 0 && /* @__PURE__ */ t("dl", {
+		className: "blade-card-metric__footer",
+		children: l.map((e, r) => /* @__PURE__ */ n("div", {
+			className: "blade-card-metric__item",
+			children: [/* @__PURE__ */ t("dt", { children: e.label }), /* @__PURE__ */ t("dd", { children: u ? /* @__PURE__ */ t("span", {
+				className: "blade-card-metric__skeleton",
+				"aria-hidden": "true"
+			}) : e.value })]
+		}, e.key ?? r))
+	})]
+});
+//#endregion
+export { i as CardMetric };
+
+//# sourceMappingURL=Metric2.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Metric2.js","names":[],"sources":["../../../src/components/Card/Metric.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../../utils/cn';\nimport './Metric.css';\n\nexport type CardMetricItem = {\n  /** Stable identity for items that may be reordered. */\n  key?: React.Key;\n  label: React.ReactNode;\n  value: React.ReactNode;\n};\n\nexport type CardMetricProps = Omit<React.HTMLAttributes<HTMLElement>, 'title' | 'children'> & {\n  title: React.ReactNode;\n  meta?: React.ReactNode;\n  period?: React.ReactNode;\n  value: React.ReactNode;\n  description?: React.ReactNode;\n  items?: CardMetricItem[];\n  loading?: boolean;\n};\n\nconst EMPTY_ITEMS: CardMetricItem[] = [];\n\nexport const CardMetric = ({\n  title, meta, period, value, description, items = EMPTY_ITEMS, loading = false,\n  className, ...rest\n}: CardMetricProps) => (\n  <article {...rest} className={cn('blade-card-metric', className)} aria-busy={loading || undefined}>\n    <div className=\"blade-card-metric__body\">\n      {((meta !== null && meta !== undefined) || (period !== null && period !== undefined)) && (\n        <div className=\"blade-card-metric__meta\">\n          <span>{meta}</span>\n          <span className=\"blade-card-metric__period\">{period}</span>\n        </div>\n      )}\n      <h3 className=\"blade-card-metric__title\">{title}</h3>\n      <div className=\"blade-card-metric__value\">\n        {loading ? <span className=\"blade-card-metric__skeleton\" aria-hidden=\"true\" /> : value}\n      </div>\n      {description !== null && description !== undefined && <div className=\"blade-card-metric__description\">{description}</div>}\n    </div>\n    {items.length > 0 && (\n      <dl className=\"blade-card-metric__footer\">\n        {items.map((item, index) => (\n          <div className=\"blade-card-metric__item\" key={item.key ?? index}>\n            <dt>{item.label}</dt>\n            <dd>{loading ? <span className=\"blade-card-metric__skeleton\" aria-hidden=\"true\" /> : item.value}</dd>\n          </div>\n        ))}\n      </dl>\n    )}\n  </article>\n);\n"],"mappings":";;;;;AAqBA,IAAM,IAAgC,CAAC,GAE1B,KAAc,EACzB,UAAO,SAAM,WAAQ,UAAO,gBAAa,WAAQ,GAAa,aAAU,IACxE,cAAW,GAAG,QAEd,kBAAC,WAAD;CAAS,GAAI;CAAM,WAAW,EAAG,qBAAqB,CAAS;CAAG,aAAW,KAAW,KAAA;CAAxF,UAAA,CACE,kBAAC,OAAD;EAAK,WAAU;EAAf,UAAA;IACK,KAAS,QAAgC,KAAW,SACrD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,kBAAC,QAAD,EAAA,UAAO,EAAW,CAAA,GAClB,kBAAC,QAAD;KAAM,WAAU;KAA6B,UAAA;IAAa,CAAA,CACvD;;GAEP,kBAAC,MAAD;IAAI,WAAU;IAA4B,UAAA;GAAU,CAAA;GACpD,kBAAC,OAAD;IAAK,WAAU;IACZ,UAAA,IAAU,kBAAC,QAAD;KAAM,WAAU;KAA8B,eAAY;IAAQ,CAAA,IAAI;GAC9E,CAAA;GACJ,KAAgB,QAAqC,kBAAC,OAAD;IAAK,WAAU;IAAkC,UAAA;GAAiB,CAAA;EACrH;CACJ,CAAA,GAAA,EAAM,SAAS,KACd,kBAAC,MAAD;EAAI,WAAU;EACX,UAAA,EAAM,KAAK,GAAM,MAChB,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,kBAAC,MAAD,EAAA,UAAK,EAAK,MAAU,CAAA,GACpB,kBAAC,MAAD,EAAA,UAAK,IAAU,kBAAC,QAAD;IAAM,WAAU;IAA8B,eAAY;GAAQ,CAAA,IAAI,EAAK,MAAU,CAAA,CACjG;EAHyC,GAAA,EAAK,OAAO,CAGrD,CACN;CACC,CAAA,CAEC"}

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

@@ -1,4 +1,6 @@
 import React from 'react';
+import { type CardMetricProps } from './Metric';
+export type { CardMetricProps, CardMetricItem } from './Metric';
 export type CardProps = {
     children: React.ReactNode;
     variant?: 'neutral' | 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error';
@@ -173,6 +175,7 @@ export type CardStatProps = {
     onClick?: (e: React.MouseEvent<HTMLDivElement>) => void;
 };
 interface CardCompound extends React.FC<CardProps> {
+    Metric: React.FC<CardMetricProps>;
     Title: React.FC<CardTitleProps>;
     Body: React.FC<CardBodyProps>;
     Actions: React.FC<CardActionsProps>;