@aloudata/aloudata-design 3.0.0-beta.8 → 3.0.0

package/dist/Breadcrumb/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nconst DEFAULT_SEPARATOR_SVG =\n  'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjQ0NzE5IDAuMTA1NzkyQzkuOTQxMTcgMC4zNTI3ODEgMTAuMTQxNCAwLjk1MzQ1NCA5Ljg5NDQgMS40NDc0M0wxLjg5NDQgMTkuNDQ3NEMxLjY0NzQxIDE5Ljk0MTQgMS4wNDY3NCAyMC4xNDE2IDAuNTUyNzYxIDE5Ljg5NDZDMC4wNTg3ODI5IDE5LjY0NzcgLTAuMTQxNDQyIDE5LjA0NyAwLjEwNTU0OCAxOC41NTNMOC4xMDU1NSAwLjU1MzAwNkM4LjM1MjU0IDAuMDU5MDI3IDguOTUzMjEgLTAuMTQxMTk3IDkuNDQ3MTkgMC4xMDU3OTJaIiBmaWxsPSIjMDAxQTMzIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4=';\n\nconst DefaultSeparator = () => (\n  <span\n    className=\"default-separator tw-mx-2 tw-inline-block tw-h-[14px] tw-w-[7px] tw-opacity-60\"\n    style={{\n      background: `url('${DEFAULT_SEPARATOR_SVG}') no-repeat center`,\n      backgroundSize: '100% 100%',\n    }}\n  />\n);\n\nexport interface BreadcrumbProps {\n  className?: string;\n  style?: React.CSSProperties;\n  separator?: React.ReactNode;\n  items?: Array<{\n    title: React.ReactNode;\n    href?: string;\n    onClick?: (e: React.MouseEvent) => void;\n    className?: string;\n  }>;\n  children?: React.ReactNode;\n}\n\nexport interface BreadcrumbItemProps {\n  className?: string;\n  children?: React.ReactNode;\n  href?: string;\n  onClick?: (e: React.MouseEvent) => void;\n}\n\ninterface IBreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {\n  __ANT_BREADCRUMB_ITEM: boolean;\n}\n\nconst Breadcrumb = (props: BreadcrumbProps) => {\n  const {\n    className,\n    style,\n    separator = <DefaultSeparator />,\n    items,\n    children,\n  } = props;\n\n  const renderItems = () => {\n    if (items) {\n      return items.map((item, index) => {\n        const isLast = index === items.length - 1;\n        return (\n          <React.Fragment key={index}>\n            <span\n              className={cn(\n                'ald-breadcrumb-item tw-cursor-pointer tw-text-sm',\n                isLast\n                  ? 'tw-text-[var(--content-primary)]'\n                  : 'tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]',\n                item.className,\n              )}\n            >\n              {item.href ? (\n                <a\n                  className=\"ald-breadcrumb-link tw-text-inherit\"\n                  href={item.href}\n                  onClick={item.onClick}\n                >\n                  {item.title}\n                </a>\n              ) : (\n                <span onClick={item.onClick}>{item.title}</span>\n              )}\n            </span>\n            {separator !== null && !isLast && (\n              <span className=\"ald-breadcrumb-separator\">{separator}</span>\n            )}\n          </React.Fragment>\n        );\n      });\n    }\n\n    const childArray = React.Children.toArray(children);\n    return childArray.map((child, index) => {\n      const isLast = index === childArray.length - 1;\n      return (\n        <React.Fragment key={index}>\n          {React.isValidElement(child)\n            ? React.cloneElement(child as React.ReactElement, {\n                'data-last': isLast ? 'true' : undefined,\n              })\n            : child}\n          {separator !== null && !isLast && (\n            <span className=\"ald-breadcrumb-separator\">{separator}</span>\n          )}\n        </React.Fragment>\n      );\n    });\n  };\n\n  return (\n    <nav\n      className={cn(\n        'ald-breadcrumb tw-flex tw-items-center tw-text-sm',\n        className,\n      )}\n      style={style}\n    >\n      {renderItems()}\n    </nav>\n  );\n};\n\nconst BreadcrumbItem: IBreadcrumbItemInterface = (\n  props: BreadcrumbItemProps & { 'data-last'?: string },\n) => {\n  const { className, children, href, onClick, ...rest } = props;\n  const isLast = rest['data-last'] === 'true';\n  return (\n    <span\n      className={cn(\n        'ald-breadcrumb-item tw-cursor-pointer tw-text-sm',\n        isLast\n          ? 'tw-text-[var(--content-primary)]'\n          : 'tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]',\n        className,\n      )}\n      onClick={onClick}\n    >\n      {href ? (\n        <a className=\"ald-breadcrumb-link tw-text-inherit\" href={href}>\n          {children}\n        </a>\n      ) : (\n        children\n      )}\n    </span>\n  );\n};\n\nBreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;\n\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n"],"mappings":";;;;AAGA,IAAM,wBACJ;AAEF,IAAM,yBACJ,oBAAC,QAAD;CACE,WAAU;CACV,OAAO;EACL,YAAY,QAAQ,sBAAsB;EAC1C,gBAAgB;EACjB;CACD,CAAA;AA2BJ,IAAM,cAAc,UAA2B;CAC7C,MAAM,EACJ,WACA,OACA,YAAY,oBAAC,kBAAD,EAAoB,CAAA,EAChC,OACA,aACE;CAEJ,MAAM,oBAAoB;AACxB,MAAI,MACF,QAAO,MAAM,KAAK,MAAM,UAAU;GAChC,MAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,GACT,oDACA,SACI,qCACA,6EACJ,KAAK,UACN;cAEA,KAAK,OACJ,oBAAC,KAAD;KACE,WAAU;KACV,MAAM,KAAK;KACX,SAAS,KAAK;eAEb,KAAK;KACJ,CAAA,GAEJ,oBAAC,QAAD;KAAM,SAAS,KAAK;eAAU,KAAK;KAAa,CAAA;IAE7C,CAAA,EACN,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cAA4B;IAAiB,CAAA,CAEhD,EAAA,EAzBI,MAyBJ;IAEnB;EAGJ,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;AACnD,SAAO,WAAW,KAAK,OAAO,UAAU;GACtC,MAAM,SAAS,UAAU,WAAW,SAAS;AAC7C,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,MAAM,eAAe,MAAM,GACxB,MAAM,aAAa,OAA6B,EAC9C,aAAa,SAAS,SAAS,QAChC,CAAC,GACF,OACH,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cAA4B;IAAiB,CAAA,CAEhD,EAAA,EATI,MASJ;IAEnB;;AAGJ,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,UACD;EACM;YAEN,aAAa;EACV,CAAA;;AAIV,IAAM,kBACJ,UACG;CACH,MAAM,EAAE,WAAW,UAAU,MAAM,SAAS,GAAG,SAAS;AAExD,QACE,oBAAC,QAAD;EACE,WAAW,GACT,oDAJS,KAAK,iBAAiB,SAM3B,qCACA,6EACJ,UACD;EACQ;YAER,OACC,oBAAC,KAAD;GAAG,WAAU;GAA4C;GACtD;GACC,CAAA,GAEJ;EAEG,CAAA;;AAIX,eAAe,wBAAwB;AAEvC,WAAW,OAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nconst DefaultSeparator = () => (\n  <span className=\"default-separator tw-mx-1 tw-inline-flex tw-items-center tw-text-[var(--content-tertiary)]\">\n    <svg\n      width=\"16\"\n      height=\"16\"\n      viewBox=\"0 0 16 16\"\n      fill=\"none\"\n      xmlns=\"http://www.w3.org/2000/svg\"\n    >\n      <path\n        d=\"M6 3.5L10.5 8L6 12.5\"\n        stroke=\"currentColor\"\n        strokeWidth=\"1.5\"\n        strokeLinecap=\"round\"\n        strokeLinejoin=\"round\"\n      />\n    </svg>\n  </span>\n);\n\nexport interface BreadcrumbProps {\n  className?: string;\n  style?: React.CSSProperties;\n  separator?: React.ReactNode;\n  items?: Array<{\n    title: React.ReactNode;\n    href?: string;\n    onClick?: (e: React.MouseEvent) => void;\n    className?: string;\n  }>;\n  children?: React.ReactNode;\n}\n\nexport interface BreadcrumbItemProps {\n  className?: string;\n  children?: React.ReactNode;\n  href?: string;\n  onClick?: (e: React.MouseEvent) => void;\n}\n\ninterface IBreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {\n  __ANT_BREADCRUMB_ITEM: boolean;\n}\n\nconst Breadcrumb = (props: BreadcrumbProps) => {\n  const {\n    className,\n    style,\n    separator = <DefaultSeparator />,\n    items,\n    children,\n  } = props;\n\n  const renderItems = () => {\n    if (items) {\n      return items.map((item, index) => {\n        const isLast = index === items.length - 1;\n        return (\n          <React.Fragment key={index}>\n            <span\n              className={cn(\n                'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]',\n                isLast\n                  ? 'tw-text-[var(--content-primary)]'\n                  : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n                item.className,\n              )}\n            >\n              {item.href ? (\n                <a\n                  className=\"ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]\"\n                  href={item.href}\n                  onClick={item.onClick}\n                >\n                  {item.title}\n                </a>\n              ) : (\n                <span onClick={item.onClick}>{item.title}</span>\n              )}\n            </span>\n            {separator !== null && !isLast && (\n              <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n                {separator}\n              </span>\n            )}\n          </React.Fragment>\n        );\n      });\n    }\n\n    const childArray = React.Children.toArray(children);\n    return childArray.map((child, index) => {\n      const isLast = index === childArray.length - 1;\n      return (\n        <React.Fragment key={index}>\n          {React.isValidElement(child)\n            ? React.cloneElement(child as React.ReactElement, {\n                'data-last': isLast ? 'true' : undefined,\n              })\n            : child}\n          {separator !== null && !isLast && (\n            <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n              {separator}\n            </span>\n          )}\n        </React.Fragment>\n      );\n    });\n  };\n\n  return (\n    <nav\n      className={cn(\n        'ald-breadcrumb tw-flex tw-items-center tw-text-sm',\n        className,\n      )}\n      style={style}\n    >\n      {renderItems()}\n    </nav>\n  );\n};\n\nconst BreadcrumbItem: IBreadcrumbItemInterface = (\n  props: BreadcrumbItemProps & { 'data-last'?: string },\n) => {\n  const { className, children, href, onClick, ...rest } = props;\n  const isLast = rest['data-last'] === 'true';\n  return (\n    <span\n      className={cn(\n        'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]',\n        isLast\n          ? 'tw-text-[var(--content-primary)]'\n          : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n        className,\n      )}\n      onClick={onClick}\n    >\n      {href ? (\n        <a\n          className=\"ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]\"\n          href={href}\n        >\n          {children}\n        </a>\n      ) : (\n        children\n      )}\n    </span>\n  );\n};\n\nBreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;\n\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n"],"mappings":";;;;AAGA,IAAM,yBACJ,oBAAC,QAAD;CAAM,WAAU;WACd,oBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,OAAM;YAEN,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,CAAA;EACE,CAAA;CACD,CAAA;AA2BT,IAAM,cAAc,UAA2B;CAC7C,MAAM,EACJ,WACA,OACA,YAAY,oBAAC,kBAAD,EAAoB,CAAA,EAChC,OACA,aACE;CAEJ,MAAM,oBAAoB;AACxB,MAAI,MACF,QAAO,MAAM,KAAK,MAAM,UAAU;GAChC,MAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,GACT,0JACA,SACI,qCACA,4EACJ,KAAK,UACN;cAEA,KAAK,OACJ,oBAAC,KAAD;KACE,WAAU;KACV,MAAM,KAAK;KACX,SAAS,KAAK;eAEb,KAAK;KACJ,CAAA,GAEJ,oBAAC,QAAD;KAAM,SAAS,KAAK;eAAU,KAAK;KAAa,CAAA;IAE7C,CAAA,EACN,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EA3BI,MA2BJ;IAEnB;EAGJ,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;AACnD,SAAO,WAAW,KAAK,OAAO,UAAU;GACtC,MAAM,SAAS,UAAU,WAAW,SAAS;AAC7C,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,MAAM,eAAe,MAAM,GACxB,MAAM,aAAa,OAA6B,EAC9C,aAAa,SAAS,SAAS,QAChC,CAAC,GACF,OACH,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EAXI,MAWJ;IAEnB;;AAGJ,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,UACD;EACM;YAEN,aAAa;EACV,CAAA;;AAIV,IAAM,kBACJ,UACG;CACH,MAAM,EAAE,WAAW,UAAU,MAAM,SAAS,GAAG,SAAS;AAExD,QACE,oBAAC,QAAD;EACE,WAAW,GACT,0JAJS,KAAK,iBAAiB,SAM3B,qCACA,4EACJ,UACD;EACQ;YAER,OACC,oBAAC,KAAD;GACE,WAAU;GACJ;GAEL;GACC,CAAA,GAEJ;EAEG,CAAA;;AAIX,eAAe,wBAAwB;AAEvC,WAAW,OAAO"}

package/dist/Button/index.d.ts

@@ -22,9 +22,11 @@ export interface IButtonProps {
     id?: string;
     tabIndex?: number;
     title?: string;
+    'aria-label'?: string;
     ghost?: boolean;
     danger?: boolean;
     color?: string;
+    showArrow?: boolean;
 }
 export declare function getButtonType(buttonType: ButtonType): string;
 export declare function getDangerStatus(buttonType: ButtonType): boolean;

package/dist/Button/index.js

@@ -1,5 +1,6 @@
 import { cn } from "../lib/utils.js";
-import Memo from "../Icon/components/LoadingLine.js";
+import Memo from "../Icon/components/ChevronDownLine.js";
+import Memo$1 from "../Icon/components/LoadingLine.js";
 import DisabledContext from "../ConfigProvider/DisabledContext.js";
 import SizeContext from "../ConfigProvider/sizeContext.js";
 import { useCompactItemContext } from "../Space/CompactContext.js";
@@ -9,6 +10,11 @@ import { cva } from "class-variance-authority";
 //#region src/Button/index.tsx
 var btnPrefix = "ald-btn";
 var setIcon = (iconNode, loading) => {
+	if (loading) return /* @__PURE__ */ jsx(Memo$1, {
+		className: "ald-loading-spin tw-shrink-0 tw-animate-spin",
+		size: "1em",
+		color: "currentColor"
+	});
 	if (iconNode) {
 		const p = {
 			className: "",
@@ -18,11 +24,6 @@ var setIcon = (iconNode, loading) => {
 		p.size = "1em";
 		return React.cloneElement(iconNode, p);
 	}
-	if (loading) return /* @__PURE__ */ jsx(Memo, {
-		className: "ald-loading-spin tw-shrink-0 tw-animate-spin",
-		size: "1em",
-		color: "currentColor"
-	});
 	return /* @__PURE__ */ jsx(Fragment, {});
 };
 var buttonVariants = cva([
@@ -35,21 +36,21 @@ var buttonVariants = cva([
 		type: {
 			primary: [
 				`${btnPrefix}-primary`,
-				"tw-border-[var(--action-primary-normal)] tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)]",
-				"hover:tw-border-[var(--action-primary-hover)] hover:tw-bg-[var(--action-primary-hover)] hover:tw-text-[var(--action-inverted-hover)]",
-				"active:tw-border-[var(--action-primary-active)] active:tw-bg-[var(--action-primary-active)]"
+				"tw-border-transparent tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]",
+				"hover:tw-bg-[var(--action-primary-hover)]",
+				"active:tw-bg-[var(--action-primary-active)]"
 			],
 			secondary: [
 				`${btnPrefix}-secondary`,
-				"tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)]",
-				"hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-hover)] hover:tw-text-[var(--action-neutral-hover)]",
+				"tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]",
+				"hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]",
 				"active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]"
 			],
 			dangerous: [
 				`${btnPrefix}-dangerous`,
-				"tw-border-[var(--action-destructive-normal)] tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)]",
-				"hover:tw-border-[var(--action-destructive-hover)] hover:tw-bg-[var(--action-destructive-hover)]",
-				"active:tw-border-[var(--action-destructive-active)] active:tw-bg-[var(--action-destructive-active)]"
+				"tw-border-transparent tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]",
+				"hover:tw-bg-[var(--action-destructive-hover)]",
+				"active:tw-bg-[var(--action-destructive-active)]"
 			],
 			text: [
 				`${btnPrefix}-text`,
@@ -59,8 +60,8 @@ var buttonVariants = cva([
 			],
 			inverse: [
 				`${btnPrefix}-inverse`,
-				"tw-border-transparent tw-bg-[var(--alias-colors-bg-skeleton-inverse-subtle)] tw-text-[var(--alias-colors-text-inverse-default)]",
-				"hover:tw-bg-[var(--alias-colors-bg-skeleton-inverse-strong)]",
+				"tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--alias-colors-text-inverse-default)]",
+				"hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]",
 				"active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]"
 			],
 			link: [
@@ -73,17 +74,17 @@ var buttonVariants = cva([
 		size: {
 			small: [
 				`${btnPrefix}-small`,
-				"tw-h-7 tw-min-w-[48px] tw-gap-[var(--alias-radius-50)] tw-rounded-r-50 tw-text-xs tw-leading-4",
+				"tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4",
 				"tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]"
 			],
 			middle: [
 				`${btnPrefix}-middle`,
-				"tw-h-8 tw-min-w-[52px] tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5",
+				"tw-h-8 tw-min-w-8 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5",
 				"tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]"
 			],
 			large: [
 				`${btnPrefix}-large`,
-				"tw-h-9 tw-min-w-[56px] tw-gap-2 tw-rounded-r-100 tw-text-sm tw-leading-6",
+				"tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6",
 				"tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]"
 			]
 		},
@@ -116,7 +117,7 @@ var VALID_TYPES = [
 	"inverse"
 ];
 function Button(props, ref) {
-	const { type: rawType = "secondary", size: customSize, shape = "default", loading = false, disabled, icon, className, children, href, target, onClick, block, htmlType = "button", style, ghost, ...rest } = props;
+	const { type: rawType = "secondary", size: customSize, shape = "default", loading = false, disabled, icon, className, children, href, target, onClick, block, htmlType = "button", style, ghost, showArrow = false, ...rest } = props;
 	const type = VALID_TYPES.includes(rawType) ? rawType : "secondary";
 	const contextDisabled = useContext(DisabledContext);
 	const mergedDisabled = disabled ?? contextDisabled;
@@ -134,15 +135,27 @@ function Button(props, ref) {
 	const isDisabled = innerLoading || mergedDisabled;
 	const iconNode = setIcon(icon, innerLoading);
 	const compactClasses = compactItemClassnames ? cn(!compactItemClassnames[`ald-btn-compact-first-item`] && "!tw-rounded-l-none", !compactItemClassnames[`ald-btn-compact-last-item`] && "!tw-rounded-r-none", !compactItemClassnames[`ald-btn-compact-first-item`] && "-tw-ml-px") : void 0;
-	const isIconOnly = !!icon && !children;
+	const isIconOnly = !!icon && !children && !showArrow;
 	const classes = cn(buttonVariants({
 		type,
 		size,
 		disabled: !!isDisabled,
 		block: !!block,
 		shape
-	}), ghost && "!tw-border-current !tw-bg-transparent", isIconOnly && "tw-aspect-square !tw-min-w-0 !tw-px-0", compactClasses, className);
-	if (href) return /* @__PURE__ */ jsxs("a", {
+	}), ghost && "!tw-border-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent", ghost && type === "primary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "dangerous" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "secondary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "inverse" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "primary" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]", ghost && type === "dangerous" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]", ghost && type === "secondary" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]", ghost && type === "inverse" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]", ghost && type === "primary" && "!tw-text-[var(--action-primary-normal)]", ghost && type === "dangerous" && "!tw-text-[var(--action-destructive-normal)]", ghost && type === "secondary" && "!tw-text-[var(--action-neutral-normal)]", ghost && type === "inverse" && "!tw-text-[var(--action-inverted-normal)]", isIconOnly && "tw-aspect-square !tw-px-0", isIconOnly && size === "small" && "!tw-min-w-7", isIconOnly && size === "middle" && "!tw-min-w-8", isIconOnly && size === "large" && "!tw-min-w-10", compactClasses, className);
+	const contentClasses = cn("tw-inline-flex tw-items-center tw-gap-1", ghost && type === "inverse" && size === "middle" && "tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]");
+	const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+		iconNode,
+		children && /* @__PURE__ */ jsx("span", {
+			className: contentClasses,
+			children
+		}),
+		showArrow ? /* @__PURE__ */ jsx("span", {
+			className: "ald-btn-arrow tw-inline-flex tw-shrink-0 tw-items-center",
+			children: /* @__PURE__ */ jsx(Memo, { size: 16 })
+		}) : null
+	] });
+	if (href) return /* @__PURE__ */ jsx("a", {
 		...rest,
 		className: classes,
 		style,
@@ -151,12 +164,9 @@ function Button(props, ref) {
 		ref,
 		onClick: isDisabled ? void 0 : onClick,
 		"aria-disabled": isDisabled || void 0,
-		children: [iconNode, children && /* @__PURE__ */ jsx("span", {
-			className: "tw-inline-flex tw-items-center tw-gap-1",
-			children
-		})]
+		children: buttonContent
 	});
-	return /* @__PURE__ */ jsxs("button", {
+	return /* @__PURE__ */ jsx("button", {
 		...rest,
 		type: htmlType === "submit" ? "submit" : htmlType === "reset" ? "reset" : "button",
 		className: classes,
@@ -165,10 +175,7 @@ function Button(props, ref) {
 		"aria-disabled": isDisabled || void 0,
 		ref,
 		onClick,
-		children: [iconNode, children && /* @__PURE__ */ jsx("span", {
-			className: "tw-inline-flex tw-items-center tw-gap-1",
-			children
-		})]
+		children: buttonContent
 	});
 }
 var Button_default = forwardRef(Button);

package/dist/Button/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React, { forwardRef, useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { LoadingLine } from '../Icon';\nimport { cn } from '../lib/utils';\nimport { useCompactItemContext } from '../Space/CompactContext';\n\nexport const btnPrefix = 'ald-btn';\n\nexport type ButtonType =\n  | 'primary'\n  | 'secondary'\n  | 'dangerous'\n  | 'text'\n  | 'inverse'\n  | 'link';\nexport type Size = 'small' | 'middle' | 'large';\nexport interface IButtonProps {\n  type?: ButtonType;\n  size?: Size;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n  shape?: 'circle' | 'default';\n  href?: string;\n  target?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  loading?: boolean | { delay?: number };\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  block?: boolean;\n  htmlType?: 'submit' | 'button' | 'reset';\n  id?: string;\n  tabIndex?: number;\n  title?: string;\n  ghost?: boolean;\n  danger?: boolean;\n  color?: string;\n}\n\nexport function getButtonType(buttonType: ButtonType): string {\n  return buttonType;\n}\nexport function getDangerStatus(buttonType: ButtonType): boolean {\n  return buttonType === 'dangerous';\n}\nexport function getButtonSizeClass(s: Size): string {\n  return ['small', 'large'].includes(s)\n    ? `${btnPrefix}-${s}`\n    : `${btnPrefix}-middle`;\n}\nexport function getShape(s: 'circle' | 'default'): 'circle' | 'default' {\n  return s;\n}\nexport const setIcon = (\n  iconNode: React.ReactElement,\n  loading: boolean | { delay?: number },\n) => {\n  if (iconNode) {\n    const p: Record<string, string | number> = {\n      className: '',\n      fill: 'currentColor',\n      ...iconNode.props,\n    };\n    p.size = '1em';\n    return React.cloneElement(iconNode, p);\n  }\n  if (loading) {\n    return (\n      <LoadingLine\n        className=\"ald-loading-spin tw-shrink-0 tw-animate-spin\"\n        size={'1em'}\n        color=\"currentColor\"\n      />\n    );\n  }\n  return <></>;\n};\n\nconst buttonVariants = cva(\n  [\n    btnPrefix,\n    'tw-inline-flex tw-cursor-pointer tw-appearance-none tw-items-center tw-justify-center tw-font-medium tw-no-underline tw-transition-colors [&_.i-icon]:tw-inline-flex [&_.i-icon]:tw-items-center',\n    'tw-border tw-border-solid',\n    'focus-visible:tw-outline-none',\n  ],\n  {\n    variants: {\n      type: {\n        primary: [\n          `${btnPrefix}-primary`,\n          'tw-border-[var(--action-primary-normal)] tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)]',\n          'hover:tw-border-[var(--action-primary-hover)] hover:tw-bg-[var(--action-primary-hover)] hover:tw-text-[var(--action-inverted-hover)]',\n          'active:tw-border-[var(--action-primary-active)] active:tw-bg-[var(--action-primary-active)]',\n        ],\n        secondary: [\n          `${btnPrefix}-secondary`,\n          'tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)]',\n          'hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n          'active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]',\n        ],\n        dangerous: [\n          `${btnPrefix}-dangerous`,\n          'tw-border-[var(--action-destructive-normal)] tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)]',\n          'hover:tw-border-[var(--action-destructive-hover)] hover:tw-bg-[var(--action-destructive-hover)]',\n          'active:tw-border-[var(--action-destructive-active)] active:tw-bg-[var(--action-destructive-active)]',\n        ],\n        text: [\n          `${btnPrefix}-text`,\n          'tw-border-transparent tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]',\n          'hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n          'active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]',\n        ],\n        inverse: [\n          `${btnPrefix}-inverse`,\n          'tw-border-transparent tw-bg-[var(--alias-colors-bg-skeleton-inverse-subtle)] tw-text-[var(--alias-colors-text-inverse-default)]',\n          'hover:tw-bg-[var(--alias-colors-bg-skeleton-inverse-strong)]',\n          'active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]',\n        ],\n        link: [\n          `${btnPrefix}-link`,\n          'tw-border-transparent tw-bg-transparent tw-text-[var(--action-primary-normal)]',\n          'hover:tw-text-[var(--action-primary-hover)]',\n          'active:tw-text-[var(--action-primary-active)]',\n        ],\n      },\n      size: {\n        small: [\n          `${btnPrefix}-small`,\n          'tw-h-7 tw-min-w-[48px] tw-gap-[var(--alias-radius-50)] tw-rounded-r-50 tw-text-xs tw-leading-4',\n          'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n        ],\n        middle: [\n          `${btnPrefix}-middle`,\n          'tw-h-8 tw-min-w-[52px] tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5',\n          'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n        ],\n        large: [\n          `${btnPrefix}-large`,\n          'tw-h-9 tw-min-w-[56px] tw-gap-2 tw-rounded-r-100 tw-text-sm tw-leading-6',\n          'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n        ],\n      },\n      disabled: {\n        true: 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n        false: '',\n      },\n      block: {\n        true: 'tw-w-full',\n        false: '',\n      },\n      shape: {\n        circle: 'tw-min-w-0 tw-rounded-full tw-p-0',\n        default: '',\n      },\n    },\n    defaultVariants: {\n      type: 'secondary',\n      size: 'middle',\n      disabled: false,\n      block: false,\n      shape: 'default',\n    },\n  },\n);\n\nconst VALID_TYPES: ButtonType[] = [\n  'primary',\n  'secondary',\n  'dangerous',\n  'text',\n  'inverse',\n];\n\nfunction Button(props: IButtonProps, ref: React.Ref<HTMLElement>) {\n  const {\n    type: rawType = 'secondary',\n    size: customSize,\n    shape = 'default',\n    loading = false,\n    disabled,\n    icon,\n    className,\n    children,\n    href,\n    target,\n    onClick,\n    block,\n    htmlType = 'button',\n    style,\n    ghost,\n    ...rest\n  } = props;\n\n  // Radix Trigger asChild 会传入 type=\"button\"（HTML button type），与组件的 type 变体冲突\n  // 当收到非法变体值时回退到 'secondary'\n  const type: ButtonType = VALID_TYPES.includes(rawType as ButtonType)\n    ? (rawType as ButtonType)\n    : 'secondary';\n\n  const contextDisabled = useContext(DisabledContext);\n  const mergedDisabled = disabled ?? contextDisabled;\n\n  const contentSize = useContext(SizeContext);\n  const { compactSize, compactItemClassnames } =\n    useCompactItemContext(btnPrefix);\n  const size = customSize || compactSize || contentSize || 'middle';\n\n  const [innerLoading, setInnerLoading] = useState(false);\n\n  useEffect(() => {\n    if (typeof loading === 'object' && loading.delay) {\n      const timer = setTimeout(() => setInnerLoading(true), loading.delay);\n      return () => clearTimeout(timer);\n    }\n    setInnerLoading(!!loading);\n  }, [loading]);\n\n  const isDisabled = innerLoading || mergedDisabled;\n  const iconNode = setIcon(icon as React.ReactElement, innerLoading);\n\n  // Build compact-mode border-radius and margin overrides\n  const compactClasses = compactItemClassnames\n    ? cn(\n        // all compact items: remove border-radius on inner edges\n        !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n          '!tw-rounded-l-none',\n        !compactItemClassnames[`${btnPrefix}-compact-last-item`] &&\n          '!tw-rounded-r-none',\n        // merge borders via negative margin (except first item)\n        !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n          '-tw-ml-px',\n      )\n    : undefined;\n\n  const isIconOnly = !!icon && !children;\n\n  const classes = cn(\n    buttonVariants({\n      type,\n      size,\n      disabled: !!isDisabled,\n      block: !!block,\n      shape,\n    }),\n    ghost && '!tw-border-current !tw-bg-transparent',\n    // icon-only: square button, no min-width, centered padding\n    isIconOnly && 'tw-aspect-square !tw-min-w-0 !tw-px-0',\n    compactClasses,\n    className,\n  );\n\n  if (href) {\n    return (\n      <a\n        {...rest}\n        className={classes}\n        style={style}\n        href={isDisabled ? undefined : href}\n        target={target}\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        onClick={isDisabled ? undefined : onClick}\n        aria-disabled={isDisabled || undefined}\n      >\n        {iconNode}\n        {children && (\n          <span className=\"tw-inline-flex tw-items-center tw-gap-1\">\n            {children}\n          </span>\n        )}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      {...rest}\n      type={\n        htmlType === 'submit'\n          ? 'submit'\n          : htmlType === 'reset'\n          ? 'reset'\n          : 'button'\n      }\n      className={classes}\n      style={style}\n      disabled={isDisabled}\n      aria-disabled={isDisabled || undefined}\n      ref={ref as React.Ref<HTMLButtonElement>}\n      onClick={onClick}\n    >\n      {iconNode}\n      {children && (\n        <span className=\"tw-inline-flex tw-items-center tw-gap-1\">\n          {children}\n        </span>\n      )}\n    </button>\n  );\n}\n\nexport default forwardRef(Button);\n"],"mappings":";;;;;;;;;AAQA,IAAa,YAAY;AA+CzB,IAAa,WACX,UACA,YACG;AACH,KAAI,UAAU;EACZ,MAAM,IAAqC;GACzC,WAAW;GACX,MAAM;GACN,GAAG,SAAS;GACb;AACD,IAAE,OAAO;AACT,SAAO,MAAM,aAAa,UAAU,EAAE;;AAExC,KAAI,QACF,QACE,oBAAC,MAAD;EACE,WAAU;EACV,MAAM;EACN,OAAM;EACN,CAAA;AAGN,QAAO,oBAAA,UAAA,EAAK,CAAA;;AAGd,IAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,MAAM;GACJ,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACD,QAAQ;IACN,GAAG,UAAU;IACb;IACA;IACD;GACD,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,OAAO;EACP,OAAO;EACR;CACF,CACF;AAED,IAAM,cAA4B;CAChC;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,OAAO,OAAqB,KAA6B;CAChE,MAAM,EACJ,MAAM,UAAU,aAChB,MAAM,YACN,QAAQ,WACR,UAAU,OACV,UACA,MACA,WACA,UACA,MACA,QACA,SACA,OACA,WAAW,UACX,OACA,OACA,GAAG,SACD;CAIJ,MAAM,OAAmB,YAAY,SAAS,QAAsB,GAC/D,UACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,UAAU;CAClC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,OAAO,YAAY,YAAY,QAAQ,OAAO;GAChD,MAAM,QAAQ,iBAAiB,gBAAgB,KAAK,EAAE,QAAQ,MAAM;AACpE,gBAAa,aAAa,MAAM;;AAElC,kBAAgB,CAAC,CAAC,QAAQ;IACzB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,QAAQ,MAA4B,aAAa;CAGlE,MAAM,iBAAiB,wBACnB,GAEE,CAAC,sBAAsB,iCACrB,sBACF,CAAC,sBAAsB,gCACrB,sBAEF,CAAC,sBAAsB,iCACrB,YACH,GACD;CAEJ,MAAM,aAAa,CAAC,CAAC,QAAQ,CAAC;CAE9B,MAAM,UAAU,GACd,eAAe;EACb;EACA;EACA,UAAU,CAAC,CAAC;EACZ,OAAO,CAAC,CAAC;EACT;EACD,CAAC,EACF,SAAS,yCAET,cAAc,yCACd,gBACA,UACD;AAED,KAAI,KACF,QACE,qBAAC,KAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,aAAa,SAAY;EACvB;EACH;EACL,SAAS,aAAa,SAAY;EAClC,iBAAe,cAAc;YAR/B,CAUG,UACA,YACC,oBAAC,QAAD;GAAM,WAAU;GACb;GACI,CAAA,CAEP;;AAIR,QACE,qBAAC,UAAD;EACE,GAAI;EACJ,MACE,aAAa,WACT,WACA,aAAa,UACb,UACA;EAEN,WAAW;EACJ;EACP,UAAU;EACV,iBAAe,cAAc;EACxB;EACI;YAdX,CAgBG,UACA,YACC,oBAAC,QAAD;GAAM,WAAU;GACb;GACI,CAAA,CAEF;;;AAIb,IAAA,iBAAe,WAAW,OAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React, { forwardRef, useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { ChevronDownLine, LoadingLine } from '../Icon';\nimport { cn } from '../lib/utils';\nimport { useCompactItemContext } from '../Space/CompactContext';\n\nexport const btnPrefix = 'ald-btn';\n\nexport type ButtonType =\n  | 'primary'\n  | 'secondary'\n  | 'dangerous'\n  | 'text'\n  | 'inverse'\n  | 'link';\nexport type Size = 'small' | 'middle' | 'large';\nexport interface IButtonProps {\n  type?: ButtonType;\n  size?: Size;\n  disabled?: boolean;\n  icon?: React.ReactNode;\n  shape?: 'circle' | 'default';\n  href?: string;\n  target?: string;\n  onClick?: React.MouseEventHandler<HTMLElement>;\n  loading?: boolean | { delay?: number };\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  block?: boolean;\n  htmlType?: 'submit' | 'button' | 'reset';\n  id?: string;\n  tabIndex?: number;\n  title?: string;\n  'aria-label'?: string;\n  ghost?: boolean;\n  danger?: boolean;\n  color?: string;\n  showArrow?: boolean;\n}\n\nexport function getButtonType(buttonType: ButtonType): string {\n  return buttonType;\n}\nexport function getDangerStatus(buttonType: ButtonType): boolean {\n  return buttonType === 'dangerous';\n}\nexport function getButtonSizeClass(s: Size): string {\n  return ['small', 'large'].includes(s)\n    ? `${btnPrefix}-${s}`\n    : `${btnPrefix}-middle`;\n}\nexport function getShape(s: 'circle' | 'default'): 'circle' | 'default' {\n  return s;\n}\nexport const setIcon = (\n  iconNode: React.ReactElement,\n  loading: boolean | { delay?: number },\n) => {\n  if (loading) {\n    return (\n      <LoadingLine\n        className=\"ald-loading-spin tw-shrink-0 tw-animate-spin\"\n        size={'1em'}\n        color=\"currentColor\"\n      />\n    );\n  }\n\n  if (iconNode) {\n    const p: Record<string, string | number> = {\n      className: '',\n      fill: 'currentColor',\n      ...iconNode.props,\n    };\n    p.size = '1em';\n    return React.cloneElement(iconNode, p);\n  }\n  return <></>;\n};\n\nconst buttonVariants = cva(\n  [\n    btnPrefix,\n    'tw-inline-flex tw-cursor-pointer tw-appearance-none tw-items-center tw-justify-center tw-font-medium tw-no-underline tw-transition-colors [&_.i-icon]:tw-inline-flex [&_.i-icon]:tw-items-center',\n    'tw-border tw-border-solid',\n    'focus-visible:tw-outline-none',\n  ],\n  {\n    variants: {\n      type: {\n        primary: [\n          `${btnPrefix}-primary`,\n          'tw-border-transparent tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n          'hover:tw-bg-[var(--action-primary-hover)]',\n          'active:tw-bg-[var(--action-primary-active)]',\n        ],\n        secondary: [\n          `${btnPrefix}-secondary`,\n          'tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n          'hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]',\n          'active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]',\n        ],\n        dangerous: [\n          `${btnPrefix}-dangerous`,\n          'tw-border-transparent tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n          'hover:tw-bg-[var(--action-destructive-hover)]',\n          'active:tw-bg-[var(--action-destructive-active)]',\n        ],\n        text: [\n          `${btnPrefix}-text`,\n          'tw-border-transparent tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]',\n          'hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n          'active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]',\n        ],\n        inverse: [\n          `${btnPrefix}-inverse`,\n          'tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--alias-colors-text-inverse-default)]',\n          'hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]',\n          'active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]',\n        ],\n        link: [\n          `${btnPrefix}-link`,\n          'tw-border-transparent tw-bg-transparent tw-text-[var(--action-primary-normal)]',\n          'hover:tw-text-[var(--action-primary-hover)]',\n          'active:tw-text-[var(--action-primary-active)]',\n        ],\n      },\n      size: {\n        small: [\n          `${btnPrefix}-small`,\n          'tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4',\n          'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n        ],\n        middle: [\n          `${btnPrefix}-middle`,\n          'tw-h-8 tw-min-w-8 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5',\n          'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n        ],\n        large: [\n          `${btnPrefix}-large`,\n          'tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6',\n          'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n        ],\n      },\n      disabled: {\n        true: 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n        false: '',\n      },\n      block: {\n        true: 'tw-w-full',\n        false: '',\n      },\n      shape: {\n        circle: 'tw-min-w-0 tw-rounded-full tw-p-0',\n        default: '',\n      },\n    },\n    defaultVariants: {\n      type: 'secondary',\n      size: 'middle',\n      disabled: false,\n      block: false,\n      shape: 'default',\n    },\n  },\n);\n\nconst VALID_TYPES: ButtonType[] = [\n  'primary',\n  'secondary',\n  'dangerous',\n  'text',\n  'inverse',\n];\n\nfunction Button(props: IButtonProps, ref: React.Ref<HTMLElement>) {\n  const {\n    type: rawType = 'secondary',\n    size: customSize,\n    shape = 'default',\n    loading = false,\n    disabled,\n    icon,\n    className,\n    children,\n    href,\n    target,\n    onClick,\n    block,\n    htmlType = 'button',\n    style,\n    ghost,\n    showArrow = false,\n    ...rest\n  } = props;\n\n  // Radix Trigger asChild 会传入 type=\"button\"（HTML button type），与组件的 type 变体冲突\n  // 当收到非法变体值时回退到 'secondary'\n  const type: ButtonType = VALID_TYPES.includes(rawType as ButtonType)\n    ? (rawType as ButtonType)\n    : 'secondary';\n\n  const contextDisabled = useContext(DisabledContext);\n  const mergedDisabled = disabled ?? contextDisabled;\n\n  const contentSize = useContext(SizeContext);\n  const { compactSize, compactItemClassnames } =\n    useCompactItemContext(btnPrefix);\n  const size = customSize || compactSize || contentSize || 'middle';\n\n  const [innerLoading, setInnerLoading] = useState(false);\n\n  useEffect(() => {\n    if (typeof loading === 'object' && loading.delay) {\n      const timer = setTimeout(() => setInnerLoading(true), loading.delay);\n      return () => clearTimeout(timer);\n    }\n    setInnerLoading(!!loading);\n  }, [loading]);\n\n  const isDisabled = innerLoading || mergedDisabled;\n  const iconNode = setIcon(icon as React.ReactElement, innerLoading);\n\n  // Build compact-mode border-radius and margin overrides\n  const compactClasses = compactItemClassnames\n    ? cn(\n        // all compact items: remove border-radius on inner edges\n        !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n          '!tw-rounded-l-none',\n        !compactItemClassnames[`${btnPrefix}-compact-last-item`] &&\n          '!tw-rounded-r-none',\n        // merge borders via negative margin (except first item)\n        !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n          '-tw-ml-px',\n      )\n    : undefined;\n\n  const isIconOnly = !!icon && !children && !showArrow;\n\n  const classes = cn(\n    buttonVariants({\n      type,\n      size,\n      disabled: !!isDisabled,\n      block: !!block,\n      shape,\n    }),\n    ghost &&\n      '!tw-border-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent',\n    ghost &&\n      type === 'primary' &&\n      size === 'middle' &&\n      '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n    ghost &&\n      type === 'dangerous' &&\n      size === 'middle' &&\n      '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n    ghost &&\n      type === 'secondary' &&\n      size === 'middle' &&\n      '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n    ghost &&\n      type === 'inverse' &&\n      size === 'middle' &&\n      '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0',\n    ghost &&\n      type === 'primary' &&\n      '!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]',\n    ghost &&\n      type === 'dangerous' &&\n      '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]',\n    ghost &&\n      type === 'secondary' &&\n      '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]',\n    ghost &&\n      type === 'inverse' &&\n      '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]',\n    ghost && type === 'primary' && '!tw-text-[var(--action-primary-normal)]',\n    ghost &&\n      type === 'dangerous' &&\n      '!tw-text-[var(--action-destructive-normal)]',\n    ghost && type === 'secondary' && '!tw-text-[var(--action-neutral-normal)]',\n    ghost && type === 'inverse' && '!tw-text-[var(--action-inverted-normal)]',\n    // icon-only 方形按钮：宽度由 aspect-ratio 从 height 反推，但该反推值\n    // 不构成 flex shrink 的下限——父行 max-content 被低估时（同行存在\n    // width:auto Select / RangePicker 等子树时 Chromium 恒少算几 px），\n    // 缺口会全压到本按钮上把它压扁。必须按 size 显式钳 min-width 兜底\n    // （v2/antd 的 icon-only 即固定 width）；带 ! 以盖过 shape=circle\n    // 的 tw-min-w-0\n    isIconOnly && 'tw-aspect-square !tw-px-0',\n    isIconOnly && size === 'small' && '!tw-min-w-7',\n    isIconOnly && size === 'middle' && '!tw-min-w-8',\n    isIconOnly && size === 'large' && '!tw-min-w-10',\n    compactClasses,\n    className,\n  );\n\n  const contentClasses = cn(\n    'tw-inline-flex tw-items-center tw-gap-1',\n    ghost &&\n      type === 'inverse' &&\n      size === 'middle' &&\n      'tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]',\n  );\n\n  const arrowNode = showArrow ? (\n    <span className=\"ald-btn-arrow tw-inline-flex tw-shrink-0 tw-items-center\">\n      <ChevronDownLine size={16} />\n    </span>\n  ) : null;\n\n  const buttonContent = (\n    <>\n      {iconNode}\n      {children && <span className={contentClasses}>{children}</span>}\n      {arrowNode}\n    </>\n  );\n\n  if (href) {\n    return (\n      <a\n        {...rest}\n        className={classes}\n        style={style}\n        href={isDisabled ? undefined : href}\n        target={target}\n        ref={ref as React.Ref<HTMLAnchorElement>}\n        onClick={isDisabled ? undefined : onClick}\n        aria-disabled={isDisabled || undefined}\n      >\n        {buttonContent}\n      </a>\n    );\n  }\n\n  return (\n    <button\n      {...rest}\n      type={\n        htmlType === 'submit'\n          ? 'submit'\n          : htmlType === 'reset'\n          ? 'reset'\n          : 'button'\n      }\n      className={classes}\n      style={style}\n      disabled={isDisabled}\n      aria-disabled={isDisabled || undefined}\n      ref={ref as React.Ref<HTMLButtonElement>}\n      onClick={onClick}\n    >\n      {buttonContent}\n    </button>\n  );\n}\n\nexport default forwardRef(Button);\n"],"mappings":";;;;;;;;;;AAQA,IAAa,YAAY;AAiDzB,IAAa,WACX,UACA,YACG;AACH,KAAI,QACF,QACE,oBAAC,QAAD;EACE,WAAU;EACV,MAAM;EACN,OAAM;EACN,CAAA;AAIN,KAAI,UAAU;EACZ,MAAM,IAAqC;GACzC,WAAW;GACX,MAAM;GACN,GAAG,SAAS;GACb;AACD,IAAE,OAAO;AACT,SAAO,MAAM,aAAa,UAAU,EAAE;;AAExC,QAAO,oBAAA,UAAA,EAAK,CAAA;;AAGd,IAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,MAAM;GACJ,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACD,QAAQ;IACN,GAAG,UAAU;IACb;IACA;IACD;GACD,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,OAAO;EACP,OAAO;EACR;CACF,CACF;AAED,IAAM,cAA4B;CAChC;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,OAAO,OAAqB,KAA6B;CAChE,MAAM,EACJ,MAAM,UAAU,aAChB,MAAM,YACN,QAAQ,WACR,UAAU,OACV,UACA,MACA,WACA,UACA,MACA,QACA,SACA,OACA,WAAW,UACX,OACA,OACA,YAAY,OACZ,GAAG,SACD;CAIJ,MAAM,OAAmB,YAAY,SAAS,QAAsB,GAC/D,UACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,UAAU;CAClC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,OAAO,YAAY,YAAY,QAAQ,OAAO;GAChD,MAAM,QAAQ,iBAAiB,gBAAgB,KAAK,EAAE,QAAQ,MAAM;AACpE,gBAAa,aAAa,MAAM;;AAElC,kBAAgB,CAAC,CAAC,QAAQ;IACzB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,QAAQ,MAA4B,aAAa;CAGlE,MAAM,iBAAiB,wBACnB,GAEE,CAAC,sBAAsB,iCACrB,sBACF,CAAC,sBAAsB,gCACrB,sBAEF,CAAC,sBAAsB,iCACrB,YACH,GACD;CAEJ,MAAM,aAAa,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;CAE3C,MAAM,UAAU,GACd,eAAe;EACb;EACA;EACA,UAAU,CAAC,CAAC;EACZ,OAAO,CAAC,CAAC;EACT;EACD,CAAC,EACF,SACE,2GACF,SACE,SAAS,aACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,aACT,SAAS,YACT,4JACF,SACE,SAAS,aACT,sEACF,SACE,SAAS,eACT,yEACF,SACE,SAAS,eACT,6DACF,SACE,SAAS,aACT,sEACF,SAAS,SAAS,aAAa,2CAC/B,SACE,SAAS,eACT,+CACF,SAAS,SAAS,eAAe,2CACjC,SAAS,SAAS,aAAa,4CAO/B,cAAc,6BACd,cAAc,SAAS,WAAW,eAClC,cAAc,SAAS,YAAY,eACnC,cAAc,SAAS,WAAW,gBAClC,gBACA,UACD;CAED,MAAM,iBAAiB,GACrB,2CACA,SACE,SAAS,aACT,SAAS,YACT,iGACH;CAQD,MAAM,gBACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,YAAY,oBAAC,QAAD;GAAM,WAAW;GAAiB;GAAgB,CAAA;EATjD,YAChB,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,MAAD,EAAiB,MAAM,IAAM,CAAA;GACxB,CAAA,GACL;EAOC,EAAA,CAAA;AAGL,KAAI,KACF,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,aAAa,SAAY;EACvB;EACH;EACL,SAAS,aAAa,SAAY;EAClC,iBAAe,cAAc;YAE5B;EACC,CAAA;AAIR,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,MACE,aAAa,WACT,WACA,aAAa,UACb,UACA;EAEN,WAAW;EACJ;EACP,UAAU;EACV,iBAAe,cAAc;EACxB;EACI;YAER;EACM,CAAA;;AAIb,IAAA,iBAAe,WAAW,OAAO"}

package/dist/Card/index.js

@@ -5,17 +5,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function Card(props) {
 	const { title, extra, bordered = true, hoverable, size, className, style, bodyStyle, headStyle, children, cover, actions } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("ald-card tw-overflow-hidden tw-rounded-lg tw-bg-[var(--background-default)] tw-shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_6px_-1px_rgba(0,0,0,0.02),0_2px_4px_0_rgba(0,0,0,0.02)]", bordered && "tw-border tw-border-solid tw-border-[#f0f0f0]", hoverable && "tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]", size === "small" && "ald-card-small", className),
+		className: cn("ald-card tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-150 tw-outline tw-outline-1 tw-outline-[var(--border-default-alpha)] tw-bg-[var(--background-default)] tw-shadow-[0_2px_2px_-1px_rgba(27,36,44,0.04),0_2px_8px_-1px_rgba(27,36,44,0.08)]", !bordered && "!tw-outline-transparent", hoverable && "tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]", size === "small" && "ald-card-small", className),
 		style,
 		children: [
 			(title || extra) && /* @__PURE__ */ jsxs("div", {
-				className: "ald-card-head tw-flex tw-min-h-[48px] tw-items-center tw-justify-between tw-px-6 tw-py-0 tw-shadow-[inset_0_-1px_0_#f0f0f0]",
+				className: cn("ald-card-head tw-flex tw-items-center tw-justify-between tw-gap-4 tw-self-stretch tw-border-0 tw-border-b tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4", size === "small" && "!tw-px-4 !tw-py-3"),
 				style: headStyle,
 				children: [title && /* @__PURE__ */ jsx("div", {
-					className: "ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]",
+					className: cn("ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]", size === "small" && "!tw-text-sm"),
 					children: title
 				}), extra && /* @__PURE__ */ jsx("div", {
-					className: "ald-card-extra",
+					className: "ald-card-extra tw-text-sm",
 					children: extra
 				})]
 			}),
@@ -24,7 +24,7 @@ function Card(props) {
 				children: cover
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn("ald-card-body tw-p-6", size === "small" && "tw-p-3"),
+				className: cn("ald-card-body ant-card-body tw-flex tw-flex-col tw-items-start tw-gap-5 tw-self-stretch tw-p-6", size === "small" && "!tw-gap-3 !tw-p-4"),
 				style: bodyStyle,
 				children
 			}),

package/dist/Card/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface CardProps {\n  title?: React.ReactNode;\n  extra?: React.ReactNode;\n  bordered?: boolean;\n  hoverable?: boolean;\n  loading?: boolean;\n  size?: 'default' | 'small';\n  type?: 'inner';\n  className?: string;\n  style?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headStyle?: React.CSSProperties;\n  children?: React.ReactNode;\n  cover?: React.ReactNode;\n  actions?: React.ReactNode[];\n}\n\nexport interface CardGridProps {\n  className?: string;\n  style?: React.CSSProperties;\n  hoverable?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface CardMetaProps {\n  className?: string;\n  style?: React.CSSProperties;\n  avatar?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nfunction Card(props: CardProps) {\n  const {\n    title,\n    extra,\n    bordered = true,\n    hoverable,\n    size,\n    className,\n    style,\n    bodyStyle,\n    headStyle,\n    children,\n    cover,\n    actions,\n  } = props;\n\n  return (\n    <div\n      className={cn(\n        'ald-card tw-overflow-hidden tw-rounded-lg tw-bg-[var(--background-default)] tw-shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_6px_-1px_rgba(0,0,0,0.02),0_2px_4px_0_rgba(0,0,0,0.02)]',\n        bordered && 'tw-border tw-border-solid tw-border-[#f0f0f0]',\n        hoverable &&\n          'tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]',\n        size === 'small' && 'ald-card-small',\n        className,\n      )}\n      style={style}\n    >\n      {(title || extra) && (\n        <div\n          className=\"ald-card-head tw-flex tw-min-h-[48px] tw-items-center tw-justify-between tw-px-6 tw-py-0 tw-shadow-[inset_0_-1px_0_#f0f0f0]\"\n          style={headStyle}\n        >\n          {title && (\n            <div className=\"ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]\">\n              {title}\n            </div>\n          )}\n          {extra && <div className=\"ald-card-extra\">{extra}</div>}\n        </div>\n      )}\n      {cover && <div className=\"ald-card-cover\">{cover}</div>}\n      <div\n        className={cn('ald-card-body tw-p-6', size === 'small' && 'tw-p-3')}\n        style={bodyStyle}\n      >\n        {children}\n      </div>\n      {actions && actions.length > 0 && (\n        <div className=\"ald-card-actions tw-flex tw-border-t tw-border-solid tw-border-[var(--border-default)]\">\n          {actions.map((action, i) => (\n            <div\n              key={i}\n              className=\"ald-card-action tw-flex-1 tw-py-3 tw-text-center\"\n            >\n              {action}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Grid({ className, style, hoverable, children }: CardGridProps) {\n  return (\n    <div\n      className={cn(\n        'ald-card-grid tw-w-1/3 tw-border-0 tw-border-b tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-p-6',\n        hoverable && 'tw-transition-shadow hover:tw-shadow-md',\n        className,\n      )}\n      style={style}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction Meta({ className, style, avatar, title, description }: CardMetaProps) {\n  return (\n    <div\n      className={cn('ald-card-meta tw-flex tw-items-start tw-gap-4', className)}\n      style={style}\n    >\n      {avatar && (\n        <div className=\"ald-card-meta-avatar tw-flex-none\">{avatar}</div>\n      )}\n      <div className=\"ald-card-meta-detail tw-flex-1 tw-overflow-hidden\">\n        {title && (\n          <div className=\"ald-card-meta-title tw-truncate tw-text-base tw-font-medium tw-text-[var(--content-primary)]\">\n            {title}\n          </div>\n        )}\n        {description && (\n          <div className=\"ald-card-meta-description tw-text-sm tw-text-[var(--content-secondary)]\">\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nCard.Grid = Grid;\nCard.Meta = Meta;\n\nexport default Card;\n"],"mappings":";;;;AAmCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OACA,OACA,WAAW,MACX,WACA,MACA,WACA,OACA,WACA,WACA,UACA,OACA,YACE;AAEJ,QACE,qBAAC,OAAD;EACE,WAAW,GACT,qLACA,YAAY,iDACZ,aACE,yJACF,SAAS,WAAW,kBACpB,UACD;EACM;YATT;IAWI,SAAS,UACT,qBAAC,OAAD;IACE,WAAU;IACV,OAAO;cAFT,CAIG,SACC,oBAAC,OAAD;KAAK,WAAU;eACZ;KACG,CAAA,EAEP,SAAS,oBAAC,OAAD;KAAK,WAAU;eAAkB;KAAY,CAAA,CACnD;;GAEP,SAAS,oBAAC,OAAD;IAAK,WAAU;cAAkB;IAAY,CAAA;GACvD,oBAAC,OAAD;IACE,WAAW,GAAG,wBAAwB,SAAS,WAAW,SAAS;IACnE,OAAO;IAEN;IACG,CAAA;GACL,WAAW,QAAQ,SAAS,KAC3B,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,QAAQ,MACpB,oBAAC,OAAD;KAEE,WAAU;eAET;KACG,EAJC,EAID,CACN;IACE,CAAA;GAEJ;;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,WAAW,YAA2B;AACtE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,uHACA,aAAa,2CACb,UACD;EACM;EAEN;EACG,CAAA;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,QAAQ,OAAO,eAA8B;AAC7E,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,iDAAiD,UAAU;EAClE;YAFT,CAIG,UACC,oBAAC,OAAD;GAAK,WAAU;aAAqC;GAAa,CAAA,EAEnE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,EAEP,eACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,CAEJ;KACF;;;AAIV,KAAK,OAAO;AACZ,KAAK,OAAO"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface CardProps {\n  title?: React.ReactNode;\n  extra?: React.ReactNode;\n  bordered?: boolean;\n  hoverable?: boolean;\n  loading?: boolean;\n  size?: 'default' | 'small';\n  type?: 'inner';\n  className?: string;\n  style?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headStyle?: React.CSSProperties;\n  children?: React.ReactNode;\n  cover?: React.ReactNode;\n  actions?: React.ReactNode[];\n}\n\nexport interface CardGridProps {\n  className?: string;\n  style?: React.CSSProperties;\n  hoverable?: boolean;\n  children?: React.ReactNode;\n}\n\nexport interface CardMetaProps {\n  className?: string;\n  style?: React.CSSProperties;\n  avatar?: React.ReactNode;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n}\n\nfunction Card(props: CardProps) {\n  const {\n    title,\n    extra,\n    bordered = true,\n    hoverable,\n    size,\n    className,\n    style,\n    bodyStyle,\n    headStyle,\n    children,\n    cover,\n    actions,\n  } = props;\n\n  return (\n    <div\n      className={cn(\n        'ald-card tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-150 tw-outline tw-outline-1 tw-outline-[var(--border-default-alpha)] tw-bg-[var(--background-default)] tw-shadow-[0_2px_2px_-1px_rgba(27,36,44,0.04),0_2px_8px_-1px_rgba(27,36,44,0.08)]',\n        !bordered && '!tw-outline-transparent',\n        hoverable &&\n          'tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]',\n        size === 'small' && 'ald-card-small',\n        className,\n      )}\n      style={style}\n    >\n      {(title || extra) && (\n        <div\n          className={cn(\n            'ald-card-head tw-flex tw-items-center tw-justify-between tw-gap-4 tw-self-stretch tw-border-0 tw-border-b tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4',\n            size === 'small' && '!tw-px-4 !tw-py-3',\n          )}\n          style={headStyle}\n        >\n          {title && (\n            <div\n              className={cn(\n                'ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]',\n                size === 'small' && '!tw-text-sm',\n              )}\n            >\n              {title}\n            </div>\n          )}\n          {extra && <div className=\"ald-card-extra tw-text-sm\">{extra}</div>}\n        </div>\n      )}\n      {cover && <div className=\"ald-card-cover\">{cover}</div>}\n      <div\n        // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n        className={cn(\n          'ald-card-body ant-card-body tw-flex tw-flex-col tw-items-start tw-gap-5 tw-self-stretch tw-p-6',\n          size === 'small' && '!tw-gap-3 !tw-p-4',\n        )}\n        style={bodyStyle}\n      >\n        {children}\n      </div>\n      {actions && actions.length > 0 && (\n        <div className=\"ald-card-actions tw-flex tw-border-t tw-border-solid tw-border-[var(--border-default)]\">\n          {actions.map((action, i) => (\n            <div\n              key={i}\n              className=\"ald-card-action tw-flex-1 tw-py-3 tw-text-center\"\n            >\n              {action}\n            </div>\n          ))}\n        </div>\n      )}\n    </div>\n  );\n}\n\nfunction Grid({ className, style, hoverable, children }: CardGridProps) {\n  return (\n    <div\n      className={cn(\n        'ald-card-grid tw-w-1/3 tw-border-0 tw-border-b tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-p-6',\n        hoverable && 'tw-transition-shadow hover:tw-shadow-md',\n        className,\n      )}\n      style={style}\n    >\n      {children}\n    </div>\n  );\n}\n\nfunction Meta({ className, style, avatar, title, description }: CardMetaProps) {\n  return (\n    <div\n      className={cn('ald-card-meta tw-flex tw-items-start tw-gap-4', className)}\n      style={style}\n    >\n      {avatar && (\n        <div className=\"ald-card-meta-avatar tw-flex-none\">{avatar}</div>\n      )}\n      <div className=\"ald-card-meta-detail tw-flex-1 tw-overflow-hidden\">\n        {title && (\n          <div className=\"ald-card-meta-title tw-truncate tw-text-base tw-font-medium tw-text-[var(--content-primary)]\">\n            {title}\n          </div>\n        )}\n        {description && (\n          <div className=\"ald-card-meta-description tw-text-sm tw-text-[var(--content-secondary)]\">\n            {description}\n          </div>\n        )}\n      </div>\n    </div>\n  );\n}\n\nCard.Grid = Grid;\nCard.Meta = Meta;\n\nexport default Card;\n"],"mappings":";;;;AAmCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OACA,OACA,WAAW,MACX,WACA,MACA,WACA,OACA,WACA,WACA,UACA,OACA,YACE;AAEJ,QACE,qBAAC,OAAD;EACE,WAAW,GACT,0QACA,CAAC,YAAY,2BACb,aACE,yJACF,SAAS,WAAW,kBACpB,UACD;EACM;YATT;IAWI,SAAS,UACT,qBAAC,OAAD;IACE,WAAW,GACT,+KACA,SAAS,WAAW,oBACrB;IACD,OAAO;cALT,CAOG,SACC,oBAAC,OAAD;KACE,WAAW,GACT,sFACA,SAAS,WAAW,cACrB;eAEA;KACG,CAAA,EAEP,SAAS,oBAAC,OAAD;KAAK,WAAU;eAA6B;KAAY,CAAA,CAC9D;;GAEP,SAAS,oBAAC,OAAD;IAAK,WAAU;cAAkB;IAAY,CAAA;GACvD,oBAAC,OAAD;IAEE,WAAW,GACT,kGACA,SAAS,WAAW,oBACrB;IACD,OAAO;IAEN;IACG,CAAA;GACL,WAAW,QAAQ,SAAS,KAC3B,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,QAAQ,MACpB,oBAAC,OAAD;KAEE,WAAU;eAET;KACG,EAJC,EAID,CACN;IACE,CAAA;GAEJ;;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,WAAW,YAA2B;AACtE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,uHACA,aAAa,2CACb,UACD;EACM;EAEN;EACG,CAAA;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,QAAQ,OAAO,eAA8B;AAC7E,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,iDAAiD,UAAU;EAClE;YAFT,CAIG,UACC,oBAAC,OAAD;GAAK,WAAU;aAAqC;GAAa,CAAA,EAEnE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,EAEP,eACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,CAEJ;KACF;;;AAIV,KAAK,OAAO;AACZ,KAAK,OAAO"}

package/dist/Checkbox/index.js

@@ -4,7 +4,7 @@ import { useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Checkbox/index.tsx
 function Checkbox(props) {
-	const { className, disabled: customDisabled, size, checked: controlledChecked, defaultChecked, indeterminate, onChange, onClick, autoFocus, children, value, name, style } = props;
+	const { className, disabled: customDisabled, alert, bold, size, checked: controlledChecked, defaultChecked, indeterminate, onChange, onClick, autoFocus, children, value, name, style } = props;
 	const disabled = useContext(DisabledContext);
 	const mergedDisabled = customDisabled ?? disabled;
 	const isControlled = "checked" in props;
@@ -36,17 +36,10 @@ function Checkbox(props) {
 	};
 	return /* @__PURE__ */ jsxs("label", {
 		onClick: handleLabelClick,
-		className: cn("ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-leading-5", mergedDisabled && "tw-cursor-default", size === "small" && "ald-checkbox-small", !mergedDisabled && "[&:hover_.ald-checkbox-inner]:tw-border-[var(--interaction-border-hover)]", !mergedDisabled && checked && "[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]", className),
+		className: cn("ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-leading-5", mergedDisabled && "tw-cursor-default", size === "small" && "ald-checkbox-small", !mergedDisabled && "[&:hover_.ald-checkbox-inner]:tw-border-2 [&:hover_.ald-checkbox-inner]:tw-border-[var(--interaction-border-hover)]", !mergedDisabled && checked && "[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]", className),
 		style,
 		children: [/* @__PURE__ */ jsxs("span", {
-			className: cn("ald-checkbox-inner tw-relative tw-box-border tw-block tw-rounded-sm", checked && !mergedDisabled && "ald-checkbox-checked tw-bg-[var(--interaction-default-normal)]", checked && mergedDisabled && "ald-checkbox-checked tw-bg-[var(--alias-colors-bg-selected-default)]", !checked && !indeterminate && "tw-bg-[var(--interaction-background-form-field)]", indeterminate && !checked && "ald-checkbox-indeterminate tw-bg-[var(--interaction-default-normal)]"),
-			style: {
-				width: 14,
-				height: 14,
-				minWidth: 14,
-				minHeight: 14,
-				border: checked || indeterminate && !checked ? mergedDisabled && checked ? "1px solid var(--alias-colors-border-disabled)" : "none" : "1px solid var(--interaction-border-neutral-normal)"
-			},
+			className: cn("ald-checkbox-inner tw-relative tw-box-border tw-flex tw-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-all tw-duration-200", checked && "ald-checkbox-checked tw-border-transparent tw-bg-[var(--interaction-default-normal)]", mergedDisabled && "tw-opacity-50", !checked && !indeterminate && !alert && "tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--interaction-background-form-field)]", !checked && !indeterminate && alert && "tw-border-[var(--interaction-border-alert)] tw-bg-[var(--interaction-background-form-field)]", indeterminate && !checked && "ald-checkbox-indeterminate tw-border-transparent tw-bg-[var(--interaction-default-normal)]"),
 			children: [/* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				type: "checkbox",
@@ -65,7 +58,7 @@ function Checkbox(props) {
 				}
 			})]
 		}), children && /* @__PURE__ */ jsx("span", {
-			className: cn("ald-checkbox-label tw-select-none tw-pl-1.5 tw-text-[var(--alias-colors-text-default)]", size === "small" ? "tw-text-xs" : "tw-text-sm", mergedDisabled && "tw-cursor-default"),
+			className: cn("ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--alias-colors-text-default)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0", size === "small" ? "tw-text-xs" : "tw-text-sm", bold && "tw-font-medium", mergedDisabled && "tw-cursor-default"),
 			children
 		})]
 	});
@@ -101,7 +94,7 @@ function CheckboxGroup(props) {
 		});
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3", direction === "vertical" && "ald-checkout-group-vertical tw-flex-col", size === "small" && "ald-checkbox-group-small", className),
+		className: cn("ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3", direction === "vertical" && "ald-checkbox-group-vertical tw-flex-col", size === "small" && "ald-checkbox-group-small", className),
 		children: renderOptions()
 	});
 }

package/dist/Checkbox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport { cn } from '../lib/utils';\nimport {\n  CheckboxChangeEvent,\n  CheckboxValueType,\n  ICheckboxGroupProps,\n  ICheckboxProps,\n} from './type';\n\nexport type { CheckboxChangeEvent, CheckboxValueType };\nexport type { CheckboxOptionType } from './type';\nexport type { ICheckboxProps, ICheckboxGroupProps };\n\nfunction Checkbox(props: ICheckboxProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size,\n    checked: controlledChecked,\n    defaultChecked,\n    indeterminate,\n    onChange,\n    onClick,\n    autoFocus,\n    children,\n    value,\n    name,\n    style,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const isControlled = 'checked' in props;\n  const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);\n  const checked = isControlled ? controlledChecked : innerChecked;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = !!indeterminate;\n    }\n  }, [indeterminate]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (mergedDisabled) return;\n    const newChecked = e.target.checked;\n    if (!isControlled) {\n      setInnerChecked(newChecked);\n    }\n    onChange?.({\n      target: { checked: newChecked, value },\n      nativeEvent: e.nativeEvent,\n    });\n  };\n\n  const handleLabelClick = (e: React.MouseEvent) => {\n    if (mergedDisabled) return;\n    if (onClick) {\n      // Table row selection uses onClick — prevent label from also toggling input\n      e.preventDefault();\n      e.stopPropagation();\n      onClick(e);\n    }\n  };\n\n  return (\n    <label\n      onClick={handleLabelClick}\n      className={cn(\n        'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-leading-5',\n        mergedDisabled && 'tw-cursor-default',\n        size === 'small' && 'ald-checkbox-small',\n        !mergedDisabled &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-[var(--interaction-border-hover)]',\n        !mergedDisabled &&\n          checked &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]',\n        className,\n      )}\n      style={style}\n    >\n      <span\n        className={cn(\n          'ald-checkbox-inner tw-relative tw-box-border tw-block tw-rounded-sm',\n          checked &&\n            !mergedDisabled &&\n            'ald-checkbox-checked tw-bg-[var(--interaction-default-normal)]',\n          checked &&\n            mergedDisabled &&\n            'ald-checkbox-checked tw-bg-[var(--alias-colors-bg-selected-default)]',\n          !checked &&\n            !indeterminate &&\n            'tw-bg-[var(--interaction-background-form-field)]',\n          indeterminate &&\n            !checked &&\n            'ald-checkbox-indeterminate tw-bg-[var(--interaction-default-normal)]',\n        )}\n        style={{\n          width: 14,\n          height: 14,\n          minWidth: 14,\n          minHeight: 14,\n          border:\n            checked || (indeterminate && !checked)\n              ? mergedDisabled && checked\n                ? '1px solid var(--alias-colors-border-disabled)'\n                : 'none'\n              : '1px solid var(--interaction-border-neutral-normal)',\n        }}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n          checked={!!checked}\n          disabled={mergedDisabled}\n          onChange={handleChange}\n          autoFocus={autoFocus}\n          name={name}\n          value={value as string}\n        />\n        {(checked || (indeterminate && !checked)) && (\n          <span\n            className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n            style={{\n              backgroundImage:\n                indeterminate && !checked\n                  ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n                  : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n              backgroundSize:\n                indeterminate && !checked ? '10px 2px' : '10px 8px',\n            }}\n          />\n        )}\n      </span>\n      {children && (\n        <span\n          className={cn(\n            'ald-checkbox-label tw-select-none tw-pl-1.5 tw-text-[var(--alias-colors-text-default)]',\n            size === 'small' ? 'tw-text-xs' : 'tw-text-sm',\n            mergedDisabled && 'tw-cursor-default',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size,\n    options,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    direction,\n    name,\n    children,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState<CheckboxValueType[]>(\n    defaultValue ?? [],\n  );\n  const value = isControlled ? controlledValue ?? [] : innerValue;\n\n  const handleGroupChange = (\n    itemValue: CheckboxValueType,\n    itemChecked: boolean,\n  ) => {\n    const newValue = itemChecked\n      ? [...value, itemValue]\n      : value.filter((v) => v !== itemValue);\n    if (!isControlled) {\n      setInnerValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const renderOptions = () => {\n    if (!options) return children;\n    return options.map((opt) => {\n      const optObj =\n        typeof opt === 'object' ? opt : { label: String(opt), value: opt };\n      return (\n        <Checkbox\n          key={String(optObj.value)}\n          value={optObj.value}\n          disabled={mergedDisabled || optObj.disabled}\n          checked={value.includes(optObj.value)}\n          size={size}\n          name={name}\n          onChange={(e) => handleGroupChange(optObj.value, e.target.checked)}\n        >\n          {optObj.label}\n        </Checkbox>\n      );\n    });\n  };\n\n  return (\n    <div\n      className={cn(\n        'ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3',\n        direction === 'vertical' && 'ald-checkout-group-vertical tw-flex-col',\n        size === 'small' && 'ald-checkbox-group-small',\n        className,\n      )}\n    >\n      {renderOptions()}\n    </div>\n  );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport { cn } from '../lib/utils';\nimport {\n  CheckboxChangeEvent,\n  CheckboxValueType,\n  ICheckboxGroupProps,\n  ICheckboxProps,\n} from './type';\n\nexport type { CheckboxChangeEvent, CheckboxValueType };\nexport type { CheckboxOptionType } from './type';\nexport type { ICheckboxProps, ICheckboxGroupProps };\n\nfunction Checkbox(props: ICheckboxProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    alert,\n    bold,\n    size,\n    checked: controlledChecked,\n    defaultChecked,\n    indeterminate,\n    onChange,\n    onClick,\n    autoFocus,\n    children,\n    value,\n    name,\n    style,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const isControlled = 'checked' in props;\n  const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);\n  const checked = isControlled ? controlledChecked : innerChecked;\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (inputRef.current) {\n      inputRef.current.indeterminate = !!indeterminate;\n    }\n  }, [indeterminate]);\n\n  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n    if (mergedDisabled) return;\n    const newChecked = e.target.checked;\n    if (!isControlled) {\n      setInnerChecked(newChecked);\n    }\n    onChange?.({\n      target: { checked: newChecked, value },\n      nativeEvent: e.nativeEvent,\n    });\n  };\n\n  const handleLabelClick = (e: React.MouseEvent) => {\n    if (mergedDisabled) return;\n    if (onClick) {\n      // Table row selection uses onClick — prevent label from also toggling input\n      e.preventDefault();\n      e.stopPropagation();\n      onClick(e);\n    }\n  };\n\n  return (\n    <label\n      onClick={handleLabelClick}\n      className={cn(\n        'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-leading-5',\n        mergedDisabled && 'tw-cursor-default',\n        size === 'small' && 'ald-checkbox-small',\n        !mergedDisabled &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-2 [&:hover_.ald-checkbox-inner]:tw-border-[var(--interaction-border-hover)]',\n        !mergedDisabled &&\n          checked &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]',\n        className,\n      )}\n      style={style}\n    >\n      <span\n        className={cn(\n          'ald-checkbox-inner tw-relative tw-box-border tw-flex tw-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-all tw-duration-200',\n          checked &&\n            'ald-checkbox-checked tw-border-transparent tw-bg-[var(--interaction-default-normal)]',\n          mergedDisabled && 'tw-opacity-50',\n          !checked &&\n            !indeterminate &&\n            !alert &&\n            'tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--interaction-background-form-field)]',\n          !checked &&\n            !indeterminate &&\n            alert &&\n            'tw-border-[var(--interaction-border-alert)] tw-bg-[var(--interaction-background-form-field)]',\n          indeterminate &&\n            !checked &&\n            'ald-checkbox-indeterminate tw-border-transparent tw-bg-[var(--interaction-default-normal)]',\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n          checked={!!checked}\n          disabled={mergedDisabled}\n          onChange={handleChange}\n          autoFocus={autoFocus}\n          name={name}\n          value={value as string}\n        />\n        {(checked || (indeterminate && !checked)) && (\n          <span\n            className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n            style={{\n              backgroundImage:\n                indeterminate && !checked\n                  ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n                  : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n              backgroundSize:\n                indeterminate && !checked ? '10px 2px' : '10px 8px',\n            }}\n          />\n        )}\n      </span>\n      {children && (\n        <span\n          className={cn(\n            'ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--alias-colors-text-default)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0',\n            size === 'small' ? 'tw-text-xs' : 'tw-text-sm',\n            bold && 'tw-font-medium',\n            mergedDisabled && 'tw-cursor-default',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size,\n    options,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    direction,\n    name,\n    children,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const mergedDisabled = customDisabled ?? disabled;\n\n  const isControlled = 'value' in props;\n  const [innerValue, setInnerValue] = useState<CheckboxValueType[]>(\n    defaultValue ?? [],\n  );\n  const value = isControlled ? controlledValue ?? [] : innerValue;\n\n  const handleGroupChange = (\n    itemValue: CheckboxValueType,\n    itemChecked: boolean,\n  ) => {\n    const newValue = itemChecked\n      ? [...value, itemValue]\n      : value.filter((v) => v !== itemValue);\n    if (!isControlled) {\n      setInnerValue(newValue);\n    }\n    onChange?.(newValue);\n  };\n\n  const renderOptions = () => {\n    if (!options) return children;\n    return options.map((opt) => {\n      const optObj =\n        typeof opt === 'object' ? opt : { label: String(opt), value: opt };\n      return (\n        <Checkbox\n          key={String(optObj.value)}\n          value={optObj.value}\n          disabled={mergedDisabled || optObj.disabled}\n          checked={value.includes(optObj.value)}\n          size={size}\n          name={name}\n          onChange={(e) => handleGroupChange(optObj.value, e.target.checked)}\n        >\n          {optObj.label}\n        </Checkbox>\n      );\n    });\n  };\n\n  return (\n    <div\n      className={cn(\n        'ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3',\n        direction === 'vertical' && 'ald-checkbox-group-vertical tw-flex-col',\n        size === 'small' && 'ald-checkbox-group-small',\n        className,\n      )}\n    >\n      {renderOptions()}\n    </div>\n  );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/Checkbox/type.d.ts

@@ -23,9 +23,11 @@ export interface ICheckboxProps {
     checked?: boolean;
     defaultChecked?: boolean;
     disabled?: boolean;
+    alert?: boolean;
+    bold?: boolean;
     indeterminate?: boolean;
     onChange?: (e: CheckboxChangeEvent) => void;
-    onClick?: (e?: React.MouseEvent) => void;
+    onClick?: (e: React.MouseEvent) => void;
     size?: TSize;
     type?: string;
     className?: string;

package/dist/Collapse/index.js

@@ -1,44 +1,59 @@
 import { cn } from "../lib/utils.js";
-import Memo from "../Icon/components/ArrowDownLightLine.js";
-import Memo$1 from "../Icon/components/ArrowRightLightLine.js";
-import React, { useState } from "react";
+import Memo from "../Icon/components/ArrowRightLightLine.js";
+import React, { useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Collapse/index.tsx
 /** Internal rendering component for a single panel */
 function CollapsePanelInternal(props) {
-	const { header, isActive, onToggle, disabled, extra, className, style, children, forceRender, expandIcon, expandIconPosition = "start" } = props;
+	const { header, isActive, onToggle, disabled, extra, className, style, children, forceRender, expandIcon, expandIconPosition = "start", bordered } = props;
+	const contentRef = useRef(null);
+	const [rendered, setRendered] = useState(isActive || !!forceRender);
+	if (isActive && !rendered) setRendered(true);
+	const handleTransitionEnd = () => {
+		if (!isActive && !forceRender) setRendered(false);
+	};
+	const iconNode = expandIcon ? expandIcon({ isActive }) : /* @__PURE__ */ jsx(Memo, {
+		size: 20,
+		color: "var(--alias-colors-icon-subtle)"
+	});
 	const iconElement = /* @__PURE__ */ jsx("span", {
-		className: "ald-collapse-expand-icon tw-flex tw-items-center",
-		children: expandIcon ? expandIcon({ isActive }) : isActive ? /* @__PURE__ */ jsx(Memo, {
-			size: 20,
-			color: "var(--alias-colors-icon-subtle)"
-		}) : /* @__PURE__ */ jsx(Memo$1, {
-			size: 20,
-			color: "var(--alias-colors-icon-subtle)"
-		})
+		className: "ald-collapse-expand-icon ant-collapse-expand-icon tw-flex tw-items-center",
+		style: {
+			transform: isActive ? "rotate(90deg)" : "rotate(0deg)",
+			transition: "transform 200ms"
+		},
+		children: iconNode
 	});
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("ald-collapse-item tw-border-b tw-border-solid tw-border-[var(--border-default)]", isActive && "ald-collapse-item-active", disabled && "tw-pointer-events-none tw-opacity-50", className),
+		className: cn("ald-collapse-item ant-collapse-item tw-w-full", isActive && "ald-collapse-item-active", disabled && "tw-pointer-events-none tw-opacity-50", className),
 		style,
 		children: [/* @__PURE__ */ jsxs("div", {
-			className: "ald-collapse-header tw-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-px-4 tw-py-3",
+			className: "ald-collapse-header ant-collapse-header tw-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-p-3",
 			onClick: disabled ? void 0 : onToggle,
 			children: [
 				expandIconPosition === "start" && iconElement,
 				/* @__PURE__ */ jsx("span", {
-					className: "ald-collapse-header-text tw-flex-1",
+					className: "ald-collapse-header-text ant-collapse-header-text tw-flex-1 tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--content-primary)]",
 					children: header
 				}),
 				extra && /* @__PURE__ */ jsx("span", {
-					className: "ald-collapse-extra",
+					className: "ald-collapse-extra ant-collapse-extra",
 					children: extra
 				}),
 				expandIconPosition === "end" && iconElement
 			]
-		}), (isActive || forceRender) && /* @__PURE__ */ jsx("div", {
-			className: "ald-collapse-content tw-px-4 tw-pb-4",
-			style: !isActive && forceRender ? { display: "none" } : void 0,
-			children
+		}), /* @__PURE__ */ jsx("div", {
+			className: "tw-grid tw-transition-[grid-template-rows] tw-duration-200",
+			style: { gridTemplateRows: isActive ? "1fr" : "0fr" },
+			onTransitionEnd: handleTransitionEnd,
+			children: /* @__PURE__ */ jsx("div", {
+				className: "tw-overflow-hidden",
+				children: rendered && /* @__PURE__ */ jsx("div", {
+					ref: contentRef,
+					className: cn("ald-collapse-content ant-collapse-content tw-flex tw-items-start tw-gap-2.5 tw-self-stretch", bordered ? "tw-bg-[var(--background-default)] tw-p-4" : "tw-pb-4 tw-pl-10 tw-pr-4 tw-pt-0"),
+					children
+				})
+			})
 		})]
 	});
 }
@@ -75,7 +90,7 @@ function panelChildrenToItems(children) {
 	return items;
 }
 var Collapse = (props) => {
-	const { defaultActiveKey = [], activeKey: controlledActiveKey, accordion, onChange, className, style, bordered = true, expandIconPosition, expandIcon, items: itemsProp, children } = props;
+	const { defaultActiveKey = [], activeKey: controlledActiveKey, accordion, onChange, className, style, bordered = true, ghost, expandIconPosition, expandIcon, items: itemsProp, children } = props;
 	const resolvedPosition = expandIconPosition === "left" ? "start" : expandIconPosition === "right" ? "end" : expandIconPosition ?? "start";
 	const normalizeKeys = (keys) => {
 		if (!keys) return [];
@@ -92,7 +107,7 @@ var Collapse = (props) => {
 	};
 	const items = itemsProp || (children ? panelChildrenToItems(children) : void 0);
 	const renderItems = () => {
-		if (items && items.length > 0) return items.map((item) => /* @__PURE__ */ jsx(CollapsePanelInternal, {
+		if (items && items.length > 0) return items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && /* @__PURE__ */ jsx("div", { className: "ald-collapse-divider" }), /* @__PURE__ */ jsx(CollapsePanelInternal, {
 			panelKey: item.key,
 			header: item.label,
 			isActive: activeKeys.includes(item.key),
@@ -104,12 +119,13 @@ var Collapse = (props) => {
 			forceRender: item.forceRender,
 			expandIcon,
 			expandIconPosition: resolvedPosition,
+			bordered,
 			children: item.children
-		}, item.key));
+		})] }, item.key));
 		return children;
 	};
 	return /* @__PURE__ */ jsx("div", {
-		className: cn("ald-collapse", bordered && "tw-rounded-[6px] tw-border tw-border-solid tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtle)]", className),
+		className: cn("ald-collapse ant-collapse tw-flex tw-flex-col tw-items-start tw-overflow-hidden tw-rounded-r-75 [&>.ald-collapse-divider]:tw-h-px [&>.ald-collapse-divider]:tw-w-full [&>.ald-collapse-divider]:tw-bg-[var(--border-default)]", !bordered && !ghost && "tw-bg-[var(--background-neutral-subtle)]", bordered && "tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)]", className),
 		style,
 		children: renderItems()
 	});