@aloudata/aloudata-design 3.0.22 → 3.0.24

package/dist/App/index.js

@@ -1,4 +1,5 @@
 import { cn } from "../lib/utils.js";
+import { useTopModalContentZIndex } from "../_utils/overlayCoordinator.js";
 import "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createPortal } from "react-dom";
@@ -10,6 +11,8 @@ var OverlayPortal = ({ children }) => {
 	return createPortal(children, document.body);
 };
 var AldApp = ({ children, className, style, overlayZIndex = DEFAULT_OVERLAY_Z_INDEX, ...restProps }) => {
+	const topModalContentZIndex = useTopModalContentZIndex();
+	const effectiveOverlayZIndex = topModalContentZIndex === void 0 ? overlayZIndex : Math.max(overlayZIndex, topModalContentZIndex + 1e3);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("ald-app", className),
 		style,
@@ -17,10 +20,10 @@ var AldApp = ({ children, className, style, overlayZIndex = DEFAULT_OVERLAY_Z_IN
 		children: [/* @__PURE__ */ jsxs(OverlayPortal, { children: [/* @__PURE__ */ jsx(ToastContainer, {
 			containerId: "message-container",
 			limit: 1,
-			style: { zIndex: overlayZIndex }
+			style: { zIndex: effectiveOverlayZIndex }
 		}), /* @__PURE__ */ jsx(ToastContainer, {
 			containerId: "notification-container",
-			style: { zIndex: overlayZIndex }
+			style: { zIndex: effectiveOverlayZIndex }
 		})] }), children]
 	});
 };

package/dist/App/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/App/index.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastContainer } from 'react-toastify';\nimport { cn } from '../lib/utils';\n\ninterface AppProps {\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  /** z-index used by the global message and notification containers. */\n  overlayZIndex?: number;\n}\n\nexport const DEFAULT_OVERLAY_Z_INDEX = 11000;\n\nconst OverlayPortal: React.FC<{ children: React.ReactNode }> = ({\n  children,\n}) => {\n  if (typeof document === 'undefined') return null;\n  return createPortal(children, document.body);\n};\n\nconst AldApp: React.FC<AppProps> = ({\n  children,\n  className,\n  style,\n  overlayZIndex = DEFAULT_OVERLAY_Z_INDEX,\n  ...restProps\n}) => {\n  return (\n    <div className={cn('ald-app', className)} style={style} {...restProps}>\n      <OverlayPortal>\n        <ToastContainer\n          containerId={'message-container'}\n          limit={1}\n          style={{ zIndex: overlayZIndex }}\n        />\n        <ToastContainer\n          containerId={'notification-container'}\n          style={{ zIndex: overlayZIndex }}\n        />\n      </OverlayPortal>\n      {children}\n    </div>\n  );\n};\n\nexport default AldApp;\n"],"mappings":";;;;;;AAaA,IAAa,0BAA0B;AAEvC,IAAM,iBAA0D,EAC9D,eACI;AACJ,KAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAO,aAAa,UAAU,SAAS,KAAK;;AAG9C,IAAM,UAA8B,EAClC,UACA,WACA,OACA,gBAAgB,yBAChB,GAAG,gBACC;AACJ,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,UAAU;EAAS;EAAO,GAAI;YAA5D,CACE,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;GACE,aAAa;GACb,OAAO;GACP,OAAO,EAAE,QAAQ,eAAe;GAChC,CAAA,EACF,oBAAC,gBAAD;GACE,aAAa;GACb,OAAO,EAAE,QAAQ,eAAe;GAChC,CAAA,CACY,EAAA,CAAA,EACf,SACG"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/App/index.tsx"],"sourcesContent":["import React from 'react';\nimport { createPortal } from 'react-dom';\nimport { ToastContainer } from 'react-toastify';\nimport { useTopModalContentZIndex } from '../_utils/overlayCoordinator';\nimport { cn } from '../lib/utils';\n\ninterface AppProps {\n  children?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  /** z-index used by the global message and notification containers. */\n  overlayZIndex?: number;\n}\n\nexport const DEFAULT_OVERLAY_Z_INDEX = 11000;\n\nconst OverlayPortal: React.FC<{ children: React.ReactNode }> = ({\n  children,\n}) => {\n  if (typeof document === 'undefined') return null;\n  return createPortal(children, document.body);\n};\n\nconst AldApp: React.FC<AppProps> = ({\n  children,\n  className,\n  style,\n  overlayZIndex = DEFAULT_OVERLAY_Z_INDEX,\n  ...restProps\n}) => {\n  const topModalContentZIndex = useTopModalContentZIndex();\n  const effectiveOverlayZIndex =\n    topModalContentZIndex === undefined\n      ? overlayZIndex\n      : Math.max(overlayZIndex, topModalContentZIndex + 1000);\n\n  return (\n    <div className={cn('ald-app', className)} style={style} {...restProps}>\n      <OverlayPortal>\n        <ToastContainer\n          containerId={'message-container'}\n          limit={1}\n          style={{ zIndex: effectiveOverlayZIndex }}\n        />\n        <ToastContainer\n          containerId={'notification-container'}\n          style={{ zIndex: effectiveOverlayZIndex }}\n        />\n      </OverlayPortal>\n      {children}\n    </div>\n  );\n};\n\nexport default AldApp;\n"],"mappings":";;;;;;;AAcA,IAAa,0BAA0B;AAEvC,IAAM,iBAA0D,EAC9D,eACI;AACJ,KAAI,OAAO,aAAa,YAAa,QAAO;AAC5C,QAAO,aAAa,UAAU,SAAS,KAAK;;AAG9C,IAAM,UAA8B,EAClC,UACA,WACA,OACA,gBAAgB,yBAChB,GAAG,gBACC;CACJ,MAAM,wBAAwB,0BAA0B;CACxD,MAAM,yBACJ,0BAA0B,SACtB,gBACA,KAAK,IAAI,eAAe,wBAAwB,IAAK;AAE3D,QACE,qBAAC,OAAD;EAAK,WAAW,GAAG,WAAW,UAAU;EAAS;EAAO,GAAI;YAA5D,CACE,qBAAC,eAAD,EAAA,UAAA,CACE,oBAAC,gBAAD;GACE,aAAa;GACb,OAAO;GACP,OAAO,EAAE,QAAQ,wBAAwB;GACzC,CAAA,EACF,oBAAC,gBAAD;GACE,aAAa;GACb,OAAO,EAAE,QAAQ,wBAAwB;GACzC,CAAA,CACY,EAAA,CAAA,EACf,SACG"}

package/dist/Button/index.d.ts

@@ -36,6 +36,6 @@ export declare function getButtonSizeClass(s: Size): string;
 export declare function getShape(s: 'circle' | 'default'): 'circle' | 'default';
 export declare const setIcon: (iconNode: React.ReactElement, loading: boolean | {
     delay?: number;
-}) => import("react/jsx-runtime").JSX.Element;
+}, size?: string | number) => import("react/jsx-runtime").JSX.Element;
 declare const _default: React.ForwardRefExoticComponent<IButtonProps & React.RefAttributes<HTMLElement>>;
 export default _default;

package/dist/Button/index.js

@@ -9,10 +9,10 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/Button/index.tsx
 var btnPrefix = "ald-btn";
-var setIcon = (iconNode, loading) => {
+var setIcon = (iconNode, loading, size = "1em") => {
 	if (loading) return /* @__PURE__ */ jsx(Memo$1, {
 		className: "ald-loading-spin tw-shrink-0 tw-animate-spin",
-		size: "1em",
+		size,
 		color: "currentColor"
 	});
 	if (iconNode) {
@@ -21,14 +21,14 @@ var setIcon = (iconNode, loading) => {
 			fill: "currentColor",
 			...iconNode.props
 		};
-		p.size = "1em";
+		p.size = size;
 		return React.cloneElement(iconNode, p);
 	}
 	return /* @__PURE__ */ jsx(Fragment, {});
 };
 var buttonVariants = cva([
 	btnPrefix,
-	"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",
+	"tw-inline-flex tw-cursor-pointer tw-appearance-none tw-items-center tw-justify-center tw-no-underline tw-transition-colors [&_.i-icon]:tw-inline-flex [&_.i-icon]:tw-items-center",
 	"tw-border tw-border-solid",
 	"focus-visible:tw-outline-none"
 ], {
@@ -74,17 +74,17 @@ var buttonVariants = cva([
 		size: {
 			small: [
 				`${btnPrefix}-small`,
-				"tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4",
+				"tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75",
 				"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-8 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-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]"
 			],
 			large: [
 				`${btnPrefix}-large`,
-				"tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6",
+				"tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75",
 				"tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]"
 			]
 		},
@@ -134,7 +134,7 @@ function Button(props, ref) {
 		setInnerLoading(!!loading);
 	}, [loading]);
 	const isDisabled = innerLoading || mergedDisabled;
-	const iconNode = setIcon(icon, innerLoading);
+	const iconNode = setIcon(icon, innerLoading, size === "small" ? 12 : 14);
 	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 && !showArrow;
 	const classes = cn(buttonVariants({
@@ -144,7 +144,7 @@ function Button(props, ref) {
 		block: !!block,
 		shape
 	}), ghost && "!tw-border-[var(--action-ghost-normal)] !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-[var(--action-ghost-normal)]", 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-min-w-0 tw-items-center tw-gap-1 tw-truncate", 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 contentClasses = cn("tw-inline-flex tw-min-w-0 tw-items-center tw-gap-1 tw-truncate tw-text-typography-label", ghost && type === "inverse" && size === "middle" && "tw-flex-[1_0_0] tw-text-[var(--action-inverted-normal)]");
 	const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
 		iconNode,
 		children && /* @__PURE__ */ jsx("span", {

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 { 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  /** 透传到 button 元素的 data-testid，用于自动化测试定位（经 rest props 透传） */\n  'data-testid'?: 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-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]',\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-[var(--elevation-bottom-bottom-sm)]',\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-[var(--action-ghost-normal)] tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]',\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-[var(--action-ghost-normal)] 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(--content-inverted-primary)]',\n          'hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]',\n          'active:tw-bg-[var(--action-ghost-inverted-active)]',\n        ],\n        link: [\n          `${btnPrefix}-link`,\n          'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-ghost-normal)] 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  'link',\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-[var(--action-ghost-normal)] !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-[var(--action-ghost-normal)]',\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-min-w-0 tw-items-center tw-gap-1 tw-truncate',\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;AAmDzB,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;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,6IACF,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,kEACA,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"}
+{"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  /** 透传到 button 元素的 data-testid，用于自动化测试定位（经 rest props 透传） */\n  'data-testid'?: 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  size: string | number = '1em',\n) => {\n  if (loading) {\n    return (\n      <LoadingLine\n        className=\"ald-loading-spin tw-shrink-0 tw-animate-spin\"\n        size={size}\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 = size;\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-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-ghost-normal)] tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]',\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-[var(--elevation-bottom-bottom-sm)]',\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-[var(--action-ghost-normal)] tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[var(--elevation-bottom-bottom-sm)]',\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-[var(--action-ghost-normal)] 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(--content-inverted-primary)]',\n          'hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]',\n          'active:tw-bg-[var(--action-ghost-inverted-active)]',\n        ],\n        link: [\n          `${btnPrefix}-link`,\n          'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-ghost-normal)] 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        // Component Geometry: size variants own the control envelope. The\n        // inline gap remains relationship-preserving implementation while the\n        // Action Association Constraint has no Primitive Resolution.\n        small: [\n          `${btnPrefix}-small`,\n          'tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75',\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',\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',\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  'link',\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 iconSize = size === 'small' ? 12 : 14;\n  const iconNode = setIcon(icon as React.ReactElement, innerLoading, iconSize);\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-[var(--action-ghost-normal)] !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-[var(--action-ghost-normal)]',\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    // Typography: the approved Label utility belongs to the text-bearing\n    // element. Icon-only controls intentionally have no label Typography.\n    'tw-inline-flex tw-min-w-0 tw-items-center tw-gap-1 tw-truncate tw-text-typography-label',\n    ghost &&\n      type === 'inverse' &&\n      size === 'middle' &&\n      'tw-flex-[1_0_0] 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;AAmDzB,IAAa,WACX,UACA,SACA,OAAwB,UACrB;AACH,KAAI,QACF,QACE,oBAAC,QAAD;EACE,WAAU;EACJ;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;GAIJ,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;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;CAEnC,MAAM,WAAW,QAAQ,MAA4B,cADpC,SAAS,UAAU,KAAK,GACmC;CAG5E,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,6IACF,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,GAGrB,2FACA,SACE,SAAS,aACT,SAAS,YACT,0DACH;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/Checkbox/index.js

@@ -1,15 +1,18 @@
 import { cn } from "../lib/utils.js";
 import DisabledContext from "../ConfigProvider/DisabledContext.js";
-import { useContext, useEffect, useRef, useState } from "react";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/Checkbox/index.tsx
+var CheckboxGroupContext = createContext(null);
 function Checkbox(props) {
 	const { className, disabled: customDisabled, alert, bold, size, checked: controlledChecked, defaultChecked, indeterminate, onChange, onClick, autoFocus, children, value, name, style, "data-testid": dataTestid, "aria-label": ariaLabel } = props;
 	const disabled = useContext(DisabledContext);
-	const mergedDisabled = customDisabled ?? disabled;
-	const isControlled = "checked" in props;
+	const group = useContext(CheckboxGroupContext);
+	const isGroupCheckbox = group !== null && value !== void 0;
+	const mergedDisabled = group?.disabled || customDisabled || disabled;
+	const isControlled = isGroupCheckbox || "checked" in props;
 	const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);
-	const checked = isControlled ? controlledChecked : innerChecked;
+	const checked = isGroupCheckbox ? group.value.includes(value) : isControlled ? controlledChecked : innerChecked;
 	const inputRef = useRef(null);
 	useEffect(() => {
 		if (inputRef.current) inputRef.current.indeterminate = !!indeterminate;
@@ -17,7 +20,8 @@ function Checkbox(props) {
 	const handleChange = (e) => {
 		if (mergedDisabled) return;
 		const newChecked = e.target.checked;
-		if (!isControlled) setInnerChecked(newChecked);
+		if (isGroupCheckbox) group.toggleOption(value, newChecked);
+		else if (!isControlled) setInnerChecked(newChecked);
 		onChange?.({
 			target: {
 				checked: newChecked,
@@ -41,7 +45,7 @@ function Checkbox(props) {
 		className: cn("ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-2 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(--border-brand-strong)]", !mergedDisabled && checked && "[&:hover_.ald-checkbox-inner]:tw-border-[var(--action-ghost-normal)] [&:hover_.ald-checkbox-inner]:tw-bg-[var(--action-primary-hover)]", className),
 		style,
 		children: [/* @__PURE__ */ jsxs("span", {
-			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-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]", mergedDisabled && "tw-opacity-50", !checked && !indeterminate && !alert && "tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]", !checked && !indeterminate && alert && "tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]", indeterminate && !checked && "ald-checkbox-indeterminate tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-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-colors tw-duration-200", checked && "ald-checkbox-checked", checked && !mergedDisabled && "tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]", checked && mergedDisabled && "tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]", !checked && !indeterminate && mergedDisabled && "tw-border-[var(--content-disabled)] tw-bg-[var(--background-neutral-on-subtle)]", !checked && !indeterminate && !mergedDisabled && !alert && "tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]", !checked && !indeterminate && !mergedDisabled && alert && "tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]", indeterminate && !checked && "ald-checkbox-indeterminate", indeterminate && !checked && !mergedDisabled && "tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]", indeterminate && !checked && mergedDisabled && "tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]"),
 			children: [/* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				type: "checkbox",
@@ -50,7 +54,7 @@ function Checkbox(props) {
 				disabled: mergedDisabled,
 				onChange: handleChange,
 				autoFocus,
-				name,
+				name: group?.name ?? name,
 				value
 			}), (checked || indeterminate && !checked) && /* @__PURE__ */ jsx("span", {
 				className: "tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat",
@@ -60,7 +64,7 @@ function Checkbox(props) {
 				}
 			})]
 		}), children && /* @__PURE__ */ jsx("span", {
-			className: cn("ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--content-primary)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0", size === "small" ? "tw-text-xs" : "tw-text-sm", bold && "tw-font-medium", mergedDisabled && "tw-cursor-default"),
+			className: cn("ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--content-primary)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0", "tw-text-typography-label", bold && "tw-font-medium", mergedDisabled && "tw-cursor-default tw-text-[var(--content-disabled)]"),
 			children
 		})]
 	});
@@ -86,11 +90,9 @@ function CheckboxGroup(props) {
 			};
 			return /* @__PURE__ */ jsx(Checkbox, {
 				value: optObj.value,
-				disabled: mergedDisabled || optObj.disabled,
-				checked: value.includes(optObj.value),
+				disabled: optObj.disabled,
 				size,
-				name,
-				onChange: (e) => handleGroupChange(optObj.value, e.target.checked),
+				onChange: optObj.onChange,
 				children: optObj.label
 			}, String(optObj.value));
 		});
@@ -98,7 +100,15 @@ function CheckboxGroup(props) {
 	return /* @__PURE__ */ jsx("div", {
 		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),
 		style,
-		children: renderOptions()
+		children: /* @__PURE__ */ jsx(CheckboxGroupContext.Provider, {
+			value: {
+				value,
+				disabled: mergedDisabled,
+				name,
+				toggleOption: handleGroupChange
+			},
+			children: renderOptions()
+		})
 	});
 }
 Checkbox.Group = CheckboxGroup;

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    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    'data-testid': dataTestid,\n    'aria-label': ariaLabel,\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      data-testid={dataTestid}\n      aria-label={ariaLabel}\n      className={cn(\n        'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-2 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(--border-brand-strong)]',\n        !mergedDisabled &&\n          checked &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-[var(--action-ghost-normal)] [&:hover_.ald-checkbox-inner]:tw-bg-[var(--action-primary-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-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          mergedDisabled && 'tw-opacity-50',\n          !checked &&\n            !indeterminate &&\n            !alert &&\n            'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]',\n          !checked &&\n            !indeterminate &&\n            alert &&\n            'tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]',\n          indeterminate &&\n            !checked &&\n            'ald-checkbox-indeterminate tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-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(--content-primary)] [&_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    style,\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      style={style}\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, {\n  createContext,\n  useContext,\n  useEffect,\n  useRef,\n  useState,\n} 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\ninterface CheckboxGroupContextValue {\n  value: CheckboxValueType[];\n  disabled?: boolean;\n  name?: string;\n  toggleOption: (value: CheckboxValueType, checked: boolean) => void;\n}\n\nconst CheckboxGroupContext = createContext<CheckboxGroupContextValue | null>(\n  null,\n);\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    'data-testid': dataTestid,\n    'aria-label': ariaLabel,\n  } = props;\n\n  const disabled = useContext(DisabledContext);\n  const group = useContext(CheckboxGroupContext);\n  const isGroupCheckbox = group !== null && value !== undefined;\n  const mergedDisabled = group?.disabled || customDisabled || disabled;\n\n  const isControlled = isGroupCheckbox || 'checked' in props;\n  const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);\n  const checked = isGroupCheckbox\n    ? group.value.includes(value)\n    : isControlled\n    ? controlledChecked\n    : 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 (isGroupCheckbox) {\n      group.toggleOption(value, newChecked);\n    } else 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      data-testid={dataTestid}\n      aria-label={ariaLabel}\n      className={cn(\n        'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-2 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(--border-brand-strong)]',\n        !mergedDisabled &&\n          checked &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-[var(--action-ghost-normal)] [&:hover_.ald-checkbox-inner]:tw-bg-[var(--action-primary-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-colors tw-duration-200',\n          checked && 'ald-checkbox-checked',\n          checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\n          !checked &&\n            !indeterminate &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--background-neutral-on-subtle)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            !alert &&\n            'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-default)]',\n          !checked &&\n            !indeterminate &&\n            !mergedDisabled &&\n            alert &&\n            'tw-border-[var(--border-negative-strong)] tw-bg-[var(--background-default)]',\n          indeterminate && !checked && 'ald-checkbox-indeterminate',\n          indeterminate &&\n            !checked &&\n            !mergedDisabled &&\n            'tw-border-[var(--action-ghost-normal)] tw-bg-[var(--action-primary-normal)]',\n          indeterminate &&\n            !checked &&\n            mergedDisabled &&\n            'tw-border-[var(--content-disabled)] tw-bg-[var(--content-disabled)]',\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={group?.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(--content-primary)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0',\n            'tw-text-typography-label',\n            bold && 'tw-font-medium',\n            mergedDisabled &&\n              'tw-cursor-default tw-text-[var(--content-disabled)]',\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    style,\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={optObj.disabled}\n          size={size}\n          onChange={optObj.onChange}\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      style={style}\n    >\n      <CheckboxGroupContext.Provider\n        value={{\n          value,\n          disabled: mergedDisabled,\n          name,\n          toggleOption: handleGroupChange,\n        }}\n      >\n        {renderOptions()}\n      </CheckboxGroupContext.Provider>\n    </div>\n  );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}

package/dist/Drawer/index.d.ts

@@ -25,7 +25,7 @@ export interface DrawerProps {
     children?: React.ReactNode;
     zIndex?: number;
     keyboard?: boolean;
-    getContainer?: () => HTMLElement;
+    getContainer?: string | Element | DocumentFragment | (() => Element | DocumentFragment) | false;
 }
 declare function Drawer(props: DrawerProps): import("react/jsx-runtime").JSX.Element;
 export default Drawer;

package/dist/Drawer/index.js

@@ -1,7 +1,8 @@
 import { cn } from "../lib/utils.js";
 import Memo from "../Icon/components/CloseLightLine.js";
 import { FloatingLayerProvider, useFloatingLayer } from "../_utils/floatingLayer.js";
-import { useEffect, useRef } from "react";
+import { useBodyScrollLock } from "../_utils/overlayCoordinator.js";
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { hideOthers } from "aria-hidden";
@@ -23,16 +24,17 @@ var slideAnimationStyles = {
 	bottom: "data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom"
 };
 function Drawer(props) {
-	const { open = false, onClose, title, description, placement = "right", width, height, size = "default", closable = true, mask = true, maskClosable = true, className, rootClassName, style, contentWrapperStyle, bodyStyle, headerStyle, footer, footerStyle, extra, children, zIndex = 1e3 } = props;
+	const { open = false, onClose, title, description, placement = "right", width, height, size = "default", closable = true, mask = true, maskClosable = true, className, rootClassName, style, contentWrapperStyle, bodyStyle, headerStyle, footer, footerStyle, extra, children, zIndex = 1e3, getContainer } = props;
 	const contentRef = useRef(null);
-	useEffect(() => {
-		if (!open) return;
-		const prev = document.body.style.overflow;
-		document.body.style.overflow = "hidden";
-		return () => {
-			document.body.style.overflow = prev;
-		};
-	}, [open]);
+	const [portalContainer, setPortalContainer] = useState();
+	const inline = getContainer === false;
+	useBodyScrollLock(open);
+	useLayoutEffect(() => {
+		if (getContainer === void 0 || getContainer === false) setPortalContainer(void 0);
+		else if (typeof getContainer === "string") setPortalContainer(document.querySelector(getContainer) ?? void 0);
+		else if (typeof getContainer === "function") setPortalContainer(getContainer());
+		else setPortalContainer(getContainer);
+	}, [getContainer]);
 	useEffect(() => {
 		if (!open || !contentRef.current) return;
 		return hideOthers(contentRef.current);
@@ -69,20 +71,16 @@ function Drawer(props) {
 		maxHeight: "100vh"
 	};
 	const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);
-	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
-		open,
-		modal: false,
-		onOpenChange: (val) => {
-			if (!val) onClose?.();
-		},
-		children: /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [mask && /* @__PURE__ */ jsx("div", {
+	const drawerNode = /* @__PURE__ */ jsxs("div", {
+		className: cn("ald-drawer-root tw-pointer-events-none tw-inset-0", inline ? "tw-absolute" : "tw-fixed", rootClassName),
+		children: [mask && /* @__PURE__ */ jsx("div", {
 			"data-state": open ? "open" : "closed",
-			className: "ald-drawer-mask tw-fixed tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
+			className: "ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in",
 			style: { zIndex: maskZIndex },
 			onClick: maskClosable ? () => onClose?.() : void 0
 		}), /* @__PURE__ */ jsx(DialogPrimitive.Content, {
 			ref: contentRef,
-			className: cn("ald-drawer tw-fixed tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl", placementStyles[placement], slideAnimationStyles[placement], rootClassName, className),
+			className: cn("ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl", placementStyles[placement], slideAnimationStyles[placement], className),
 			style: {
 				zIndex: contentZIndex,
 				...sizeStyle,
@@ -139,7 +137,18 @@ function Drawer(props) {
 					})] })
 				]
 			})
-		})] })
+		})]
+	});
+	return /* @__PURE__ */ jsx(DialogPrimitive.Root, {
+		open,
+		modal: false,
+		onOpenChange: (val) => {
+			if (!val) onClose?.();
+		},
+		children: inline ? open ? drawerNode : null : /* @__PURE__ */ jsx(DialogPrimitive.Portal, {
+			container: portalContainer,
+			children: drawerNode
+		})
 	});
 }
 //#endregion

package/dist/Drawer/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useRef } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?: () => HTMLElement;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n\n  // ---- modal={false} 补偿：锁定背景滚动 ----\n  useEffect(() => {\n    if (!open) return;\n    const prev = document.body.style.overflow;\n    document.body.style.overflow = 'hidden';\n    return () => {\n      document.body.style.overflow = prev;\n    };\n  }, [open]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [open]);\n\n  // ---- modal={false} 补偿：Tab 焦点循环（不使用 MutationObserver，避免 FocusScope 劫持焦点）----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    const container = contentRef.current;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const focusable = container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (\n          document.activeElement === last ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      modal={false}\n      onOpenChange={(val) => {\n        if (!val) onClose?.();\n      }}\n    >\n      <DialogPrimitive.Portal>\n        {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n        {mask && (\n          <div\n            data-state={open ? 'open' : 'closed'}\n            className=\"ald-drawer-mask tw-fixed tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n            style={{ zIndex: maskZIndex }}\n            onClick={maskClosable ? () => onClose?.() : undefined}\n          />\n        )}\n        <DialogPrimitive.Content\n          ref={contentRef}\n          className={cn(\n            'ald-drawer tw-fixed tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl',\n            placementStyles[placement],\n            slideAnimationStyles[placement],\n            rootClassName,\n            className,\n          )}\n          style={{\n            zIndex: contentZIndex,\n            ...sizeStyle,\n            ...contentWrapperStyle,\n            ...style,\n          }}\n          onEscapeKeyDown={() => onClose?.()}\n          onInteractOutside={(event) => {\n            if (!maskClosable) {\n              event.preventDefault();\n            }\n          }}\n        >\n          <FloatingLayerProvider value={nextLevel}>\n            {(title || description || closable || extra) && (\n              <>\n                {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n                <div\n                  className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                  style={headerStyle}\n                >\n                  <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                    <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                      <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                        {title}\n                      </DialogPrimitive.Title>\n                      {extra || closable ? (\n                        <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                          {extra}\n                          {closable && (\n                            <DialogPrimitive.Close asChild>\n                              <button\n                                type=\"button\"\n                                className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]\"\n                                onClick={() => onClose?.()}\n                              >\n                                <CloseLightLine\n                                  size={20}\n                                  color=\"var(--content-secondary)\"\n                                />\n                              </button>\n                            </DialogPrimitive.Close>\n                          )}\n                        </div>\n                      ) : null}\n                    </div>\n                    {description ? (\n                      <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                        {description}\n                      </div>\n                    ) : null}\n                  </div>\n                </div>\n              </>\n            )}\n            {/* antd 兼容：保留 ant-drawer-body class */}\n            <div\n              className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n              style={bodyStyle}\n            >\n              {children}\n            </div>\n            {footer && (\n              <>\n                <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n                {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n                <div\n                  className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                  style={footerStyle}\n                >\n                  {footer}\n                </div>\n              </>\n            )}\n          </FloatingLayerProvider>\n        </DialogPrimitive.Content>\n      </DialogPrimitive.Portal>\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":";;;;;;;;AAuCA,IAAM,cAAsC;CAC1C,SAAS;CACT,OAAO;CACR;AAED,IAAM,kBAA0C;CAC9C,OAAO;CACP,MAAM;CACN,KAAK;CACL,QAAQ;CACT;AAED,IAAM,uBAA+C;CACnD,OACE;CACF,MAAM;CACN,KAAK;CACL,QACE;CACH;AAED,SAAS,OAAO,OAAoB;CAClC,MAAM,EACJ,OAAO,OACP,SACA,OACA,aACA,YAAY,SACZ,OACA,QACA,OAAO,WACP,WAAW,MACX,OAAO,MACP,eAAe,MACf,WACA,eACA,OACA,qBACA,WACA,aACA,QACA,aACA,OACA,UACA,SAAS,QACP;CAEJ,MAAM,aAAa,OAAuB,KAAK;AAG/C,iBAAgB;AACd,MAAI,CAAC,KAAM;EACX,MAAM,OAAO,SAAS,KAAK,MAAM;AACjC,WAAS,KAAK,MAAM,WAAW;AAC/B,eAAa;AACX,YAAS,KAAK,MAAM,WAAW;;IAEhC,CAAC,KAAK,CAAC;AAGV,iBAAgB;AACd,MAAI,CAAC,QAAQ,CAAC,WAAW,QAAS;AAClC,SAAO,WAAW,WAAW,QAAQ;IACpC,CAAC,KAAK,CAAC;AAGV,iBAAgB;AACd,MAAI,CAAC,QAAQ,CAAC,WAAW,QAAS;EAClC,MAAM,YAAY,WAAW;EAC7B,MAAM,iBAAiB,MAAqB;AAC1C,OAAI,EAAE,QAAQ,MAAO;GACrB,MAAM,YAAY,UAAU,iBAC1B,8JACD;AACD,OAAI,UAAU,WAAW,EAAG;GAC5B,MAAM,QAAQ,UAAU;GACxB,MAAM,OAAO,UAAU,UAAU,SAAS;AAC1C,OAAI,EAAE,UACJ;QACE,SAAS,kBAAkB,SAC3B,CAAC,UAAU,SAAS,SAAS,cAAc,EAC3C;AACA,OAAE,gBAAgB;AAClB,UAAK,OAAO;;cAIZ,SAAS,kBAAkB,QAC3B,CAAC,UAAU,SAAS,SAAS,cAAc,EAC3C;AACA,MAAE,gBAAgB;AAClB,UAAM,OAAO;;;AAInB,WAAS,iBAAiB,WAAW,cAAc;AACnD,eAAa,SAAS,oBAAoB,WAAW,cAAc;IAClE,CAAC,KAAK,CAAC;CAEV,MAAM,eAAe,cAAc,UAAU,cAAc;CAC3D,MAAM,SAAS,YAAY,SAAS,YAAY;CAGhD,MAAM,YAAY,eACd;EAAE,OAHiB,SAAS;EAGH,UAAU;EAAS,GAC5C;EAAE,QAHkB,UAAU;EAGH,WAAW;EAAS;CACnD,MAAM,EAAE,YAAY,eAAe,cAAc,iBAAiB,OAAO;AAIzE,QACE,oBAAC,gBAAgB,MAAjB;EACQ;EACN,OAAO;EACP,eAAe,QAAQ;AACrB,OAAI,CAAC,IAAK,YAAW;;YAGvB,qBAAC,gBAAgB,QAAjB,EAAA,UAAA,CAEG,QACC,oBAAC,OAAD;GACE,cAAY,OAAO,SAAS;GAC5B,WAAU;GACV,OAAO,EAAE,QAAQ,YAAY;GAC7B,SAAS,qBAAqB,WAAW,GAAG;GAC5C,CAAA,EAEJ,oBAAC,gBAAgB,SAAjB;GACE,KAAK;GACL,WAAW,GACT,0FACA,gBAAgB,YAChB,qBAAqB,YACrB,eACA,UACD;GACD,OAAO;IACL,QAAQ;IACR,GAAG;IACH,GAAG;IACH,GAAG;IACJ;GACD,uBAAuB,WAAW;GAClC,oBAAoB,UAAU;AAC5B,QAAI,CAAC,aACH,OAAM,gBAAgB;;aAI1B,qBAAC,uBAAD;IAAuB,OAAO;cAA9B;MACI,SAAS,eAAe,YAAY,UACpC,oBAAA,UAAA,EAAA,UAEE,oBAAC,OAAD;MACE,WAAU;MACV,OAAO;gBAEP,qBAAC,OAAD;OAAK,WAAU;iBAAf,CACE,qBAAC,OAAD;QAAK,WAAU;kBAAf,CACE,oBAAC,gBAAgB,OAAjB;SAAuB,WAAU;mBAC9B;SACqB,CAAA,EACvB,SAAS,WACR,qBAAC,OAAD;SAAK,WAAU;mBAAf,CACG,OACA,YACC,oBAAC,gBAAgB,OAAjB;UAAuB,SAAA;oBACrB,oBAAC,UAAD;WACE,MAAK;WACL,WAAU;WACV,eAAe,WAAW;qBAE1B,oBAAC,MAAD;YACE,MAAM;YACN,OAAM;YACN,CAAA;WACK,CAAA;UACa,CAAA,CAEtB;aACJ,KACA;WACL,cACC,oBAAC,OAAD;QAAK,WAAU;kBACZ;QACG,CAAA,GACJ,KACA;;MACF,CAAA,EACL,CAAA;KAGL,oBAAC,OAAD;MACE,WAAU;MACV,OAAO;MAEN;MACG,CAAA;KACL,UACC,qBAAA,UAAA,EAAA,UAAA,CACE,oBAAC,OAAD,EAAK,WAAU,mEAAoE,CAAA,EAGnF,oBAAC,OAAD;MACE,WAAU;MACV,OAAO;gBAEN;MACG,CAAA,CACL,EAAA,CAAA;KAEiB;;GACA,CAAA,CACH,EAAA,CAAA;EACJ,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Drawer/index.tsx"],"sourcesContent":["import * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { hideOthers } from 'aria-hidden';\nimport React, { useEffect, useLayoutEffect, useRef, useState } from 'react';\nimport { CloseLightLine } from '../Icon';\nimport {\n  FloatingLayerProvider,\n  useFloatingLayer,\n} from '../_utils/floatingLayer';\nimport { useBodyScrollLock } from '../_utils/overlayCoordinator';\nimport { cn } from '../lib/utils';\n\nexport interface DrawerProps {\n  open?: boolean;\n  onClose?: (e?: React.MouseEvent | React.KeyboardEvent) => void;\n  title?: React.ReactNode;\n  description?: React.ReactNode;\n  placement?: 'top' | 'right' | 'bottom' | 'left';\n  width?: number | string;\n  height?: number | string;\n  size?: 'default' | 'large';\n  closable?: boolean;\n  mask?: boolean;\n  maskClosable?: boolean;\n  destroyOnClose?: boolean;\n  className?: string;\n  rootClassName?: string;\n  style?: React.CSSProperties;\n  contentWrapperStyle?: React.CSSProperties;\n  bodyStyle?: React.CSSProperties;\n  headerStyle?: React.CSSProperties;\n  maskStyle?: React.CSSProperties;\n  footer?: React.ReactNode;\n  footerStyle?: React.CSSProperties;\n  extra?: React.ReactNode;\n  children?: React.ReactNode;\n  zIndex?: number;\n  keyboard?: boolean;\n  getContainer?:\n    | string\n    | Element\n    | DocumentFragment\n    | (() => Element | DocumentFragment)\n    | false;\n}\n\nconst sizePresets: Record<string, number> = {\n  default: 378,\n  large: 736,\n};\n\nconst placementStyles: Record<string, string> = {\n  right: 'tw-inset-y-0 tw-right-0 tw-h-full',\n  left: 'tw-inset-y-0 tw-left-0 tw-h-full',\n  top: 'tw-inset-x-0 tw-top-0 tw-w-full',\n  bottom: 'tw-inset-x-0 tw-bottom-0 tw-w-full',\n};\n\nconst slideAnimationStyles: Record<string, string> = {\n  right:\n    'data-[state=open]:tw-animate-drawer-in-right data-[state=closed]:tw-animate-drawer-out-right',\n  left: 'data-[state=open]:tw-animate-drawer-in-left data-[state=closed]:tw-animate-drawer-out-left',\n  top: 'data-[state=open]:tw-animate-drawer-in-top data-[state=closed]:tw-animate-drawer-out-top',\n  bottom:\n    'data-[state=open]:tw-animate-drawer-in-bottom data-[state=closed]:tw-animate-drawer-out-bottom',\n};\n\nfunction Drawer(props: DrawerProps) {\n  const {\n    open = false,\n    onClose,\n    title,\n    description,\n    placement = 'right',\n    width,\n    height,\n    size = 'default',\n    closable = true,\n    mask = true,\n    maskClosable = true,\n    className,\n    rootClassName,\n    style,\n    contentWrapperStyle,\n    bodyStyle,\n    headerStyle,\n    footer,\n    footerStyle,\n    extra,\n    children,\n    zIndex = 1000,\n    getContainer,\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [portalContainer, setPortalContainer] = useState<\n    Element | DocumentFragment\n  >();\n  const inline = getContainer === false;\n  useBodyScrollLock(open);\n\n  useLayoutEffect(() => {\n    if (getContainer === undefined || getContainer === false) {\n      setPortalContainer(undefined);\n    } else if (typeof getContainer === 'string') {\n      setPortalContainer(document.querySelector(getContainer) ?? undefined);\n    } else if (typeof getContainer === 'function') {\n      setPortalContainer(getContainer());\n    } else {\n      setPortalContainer(getContainer);\n    }\n  }, [getContainer]);\n\n  // ---- modal={false} 补偿：aria-hidden（屏幕阅读器只感知抽屉） ----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    return hideOthers(contentRef.current);\n  }, [open]);\n\n  // ---- modal={false} 补偿：Tab 焦点循环（不使用 MutationObserver，避免 FocusScope 劫持焦点）----\n  useEffect(() => {\n    if (!open || !contentRef.current) return;\n    const container = contentRef.current;\n    const handleKeyDown = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab') return;\n      const focusable = container.querySelectorAll<HTMLElement>(\n        'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])',\n      );\n      if (focusable.length === 0) return;\n      const first = focusable[0];\n      const last = focusable[focusable.length - 1];\n      if (e.shiftKey) {\n        if (\n          document.activeElement === first ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          last.focus();\n        }\n      } else {\n        if (\n          document.activeElement === last ||\n          !container.contains(document.activeElement)\n        ) {\n          e.preventDefault();\n          first.focus();\n        }\n      }\n    };\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [open]);\n\n  const isHorizontal = placement === 'left' || placement === 'right';\n  const preset = sizePresets[size] || sizePresets.default;\n  const effectiveWidth = width ?? preset;\n  const effectiveHeight = height ?? preset;\n  const sizeStyle = isHorizontal\n    ? { width: effectiveWidth, maxWidth: '100vw' }\n    : { height: effectiveHeight, maxHeight: '100vh' };\n  const { maskZIndex, contentZIndex, nextLevel } = useFloatingLayer(zIndex);\n\n  const drawerNode = (\n    <div\n      className={cn(\n        'ald-drawer-root tw-pointer-events-none tw-inset-0',\n        inline ? 'tw-absolute' : 'tw-fixed',\n        rootClassName,\n      )}\n    >\n      {/* modal={false} 时 DialogPrimitive.Overlay 不渲染，用普通 div 替代 */}\n      {mask && (\n        <div\n          data-state={open ? 'open' : 'closed'}\n          className=\"ald-drawer-mask tw-pointer-events-auto tw-absolute tw-inset-0 tw-bg-[var(--background-inverted)] tw-opacity-45 data-[state=closed]:tw-animate-mask-out data-[state=open]:tw-animate-mask-in\"\n          style={{ zIndex: maskZIndex }}\n          onClick={maskClosable ? () => onClose?.() : undefined}\n        />\n      )}\n      <DialogPrimitive.Content\n        ref={contentRef}\n        className={cn(\n          'ald-drawer tw-pointer-events-auto tw-absolute tw-flex tw-flex-col tw-bg-[var(--background-default)] tw-shadow-xl',\n          placementStyles[placement],\n          slideAnimationStyles[placement],\n          className,\n        )}\n        style={{\n          zIndex: contentZIndex,\n          ...sizeStyle,\n          ...contentWrapperStyle,\n          ...style,\n        }}\n        onEscapeKeyDown={() => onClose?.()}\n        onInteractOutside={(event) => {\n          if (!maskClosable) {\n            event.preventDefault();\n          }\n        }}\n      >\n        <FloatingLayerProvider value={nextLevel}>\n          {(title || description || closable || extra) && (\n            <>\n              {/* antd 兼容：保留 ant-drawer-header / ant-drawer-header-title class，消费方 CSS 可能依赖这些选择器 */}\n              <div\n                className=\"ald-drawer-header ant-drawer-header tw-flex tw-flex-col tw-items-start tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-bg-[var(--background-default)] tw-px-6 tw-pb-0 tw-pt-4\"\n                style={headerStyle}\n              >\n                <div className=\"tw-flex tw-w-full tw-flex-col tw-gap-[6px]\">\n                  <div className=\"tw-flex tw-w-full tw-items-start tw-justify-between tw-gap-[var(--component-gap-sm)]\">\n                    <DialogPrimitive.Title className='ald-drawer-title ant-drawer-header-title tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-m-0 tw-flex-[1_0_0] tw-text-lg tw-font-semibold tw-leading-7 tw-text-[var(--content-primary)]'>\n                      {title}\n                    </DialogPrimitive.Title>\n                    {extra || closable ? (\n                      <div className=\"ald-drawer-actions tw-flex tw-items-center tw-gap-[var(--component-gap-sm)]\">\n                        {extra}\n                        {closable && (\n                          <DialogPrimitive.Close asChild>\n                            <button\n                              type=\"button\"\n                              className=\"ald-drawer-close tw-flex tw-size-8 tw-cursor-pointer tw-items-center tw-justify-center tw-rounded-r-50 tw-border-0 tw-bg-[var(--action-ghost-normal)] hover:tw-bg-[var(--action-ghost-hover)]\"\n                              onClick={() => onClose?.()}\n                            >\n                              <CloseLightLine\n                                size={20}\n                                color=\"var(--content-secondary)\"\n                              />\n                            </button>\n                          </DialogPrimitive.Close>\n                        )}\n                      </div>\n                    ) : null}\n                  </div>\n                  {description ? (\n                    <div className='ald-drawer-description tw-[font-feature-settings:\"liga\"_off,\"clig\"_off] tw-self-stretch tw-text-sm tw-font-normal tw-leading-5 tw-text-[var(--content-secondary)]'>\n                      {description}\n                    </div>\n                  ) : null}\n                </div>\n              </div>\n            </>\n          )}\n          {/* antd 兼容：保留 ant-drawer-body class */}\n          <div\n            className=\"ald-drawer-body ant-drawer-body tw-min-w-0 tw-flex-[1_0_0] tw-self-stretch tw-overflow-auto tw-p-[var(--component-padding-2xl)]\"\n            style={bodyStyle}\n          >\n            {children}\n          </div>\n          {footer && (\n            <>\n              <div className=\"ald-drawer-footer-divider tw-h-px tw-bg-[var(--border-default)]\" />\n              {/* antd 兼容：antd .ant-drawer-footer 使用 text-align:right 让 inline 按钮右对齐，\n                此处加 tw-text-right 保持消费方传入 width:100% 子容器时 inline 元素仍右对齐。 */}\n              <div\n                className=\"ald-drawer-footer ant-drawer-footer tw-flex tw-items-center tw-justify-end tw-gap-[var(--component-gap-lg)] tw-self-stretch tw-px-[var(--component-padding-2xl)] tw-py-[var(--component-padding-lg)]\"\n                style={footerStyle}\n              >\n                {footer}\n              </div>\n            </>\n          )}\n        </FloatingLayerProvider>\n      </DialogPrimitive.Content>\n    </div>\n  );\n\n  // modal={false}：禁用 Radix FocusScope 的 MutationObserver，\n  // 避免表单校验触发 DOM 变动时劫持焦点。手动补偿滚动锁定、aria-hidden、Tab 循环。\n  return (\n    <DialogPrimitive.Root\n      open={open}\n      modal={false}\n      onOpenChange={(val) => {\n        if (!val) onClose?.();\n      }}\n    >\n      {inline ? (\n        open ? (\n          drawerNode\n        ) : null\n      ) : (\n        <DialogPrimitive.Portal container={portalContainer}>\n          {drawerNode}\n        </DialogPrimitive.Portal>\n      )}\n    </DialogPrimitive.Root>\n  );\n}\n\nexport default Drawer;\n"],"mappings":"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"}

package/dist/Dropdown/index.js

@@ -1,7 +1,7 @@
 import { cn } from "../lib/utils.js";
+import { useFloatingPopupZIndex } from "../_utils/floatingLayer.js";
 /* empty css         */
 import Menu from "../Menu/index.js";
-import { useFloatingPopupZIndex } from "../_utils/floatingLayer.js";
 import { ensureWeakRefFallback } from "../_utils/weakRefFallback.js";
 import { cloneElement, useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
@@ -98,9 +98,11 @@ function Dropdown(props) {
 		};
 	}, []);
 	const onChangeOpen = useCallback((newOpen) => {
-		if (newOpen) stopCloseAnimation();
-		else startCloseAnimation();
-		if (!isOpenControlled) setIsOpen(newOpen);
+		if (!isOpenControlled) {
+			if (newOpen) stopCloseAnimation();
+			else startCloseAnimation();
+			setIsOpen(newOpen);
+		}
 		onOpenChangeFn(newOpen);
 	}, [
 		isOpenControlled,
@@ -117,11 +119,16 @@ function Dropdown(props) {
 		middleware: [
 			offset(allowOverlap ? 0 : offsetProps),
 			flip({
+				altBoundary: true,
 				fallbackAxisSideDirection: "end",
 				...allowOverlap && { fallbackStrategy: "bestFit" }
 			}),
-			shift(allowOverlap ? { mainAxis: true } : void 0),
+			shift({
+				altBoundary: true,
+				...allowOverlap && { mainAxis: true }
+			}),
 			size({
+				altBoundary: true,
 				...allowOverlap && { padding: 8 },
 				apply({ availableHeight, elements }) {
 					if (!allowOverlap) return;
@@ -235,7 +242,7 @@ function Dropdown(props) {
 				} : void 0,
 				...menu?.menuStyle
 			},
-			onBeforeLeafItemClick: markRootClosing,
+			onBeforeLeafItemClick: isOpenControlled ? void 0 : markRootClosing,
 			rootClosing: isAnimatingOut,
 			onClick: onMenuItemClick,
 			externalOverflow: allowOverlap
@@ -243,6 +250,7 @@ function Dropdown(props) {
 	}, [
 		allowOverlap,
 		isAnimatingOut,
+		isOpenControlled,
 		markRootClosing,
 		menu,
 		onMenuItemClick,