@aloudata/aloudata-design 3.0.19 → 3.0.21

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-transparent tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n          'hover:tw-bg-[var(--action-primary-hover)]',\n          'active:tw-bg-[var(--action-primary-active)]',\n        ],\n        secondary: [\n          `${btnPrefix}-secondary`,\n          'tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n          'hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]',\n          'active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]',\n        ],\n        dangerous: [\n          `${btnPrefix}-dangerous`,\n          'tw-border-transparent tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n          'hover:tw-bg-[var(--action-destructive-hover)]',\n          'active:tw-bg-[var(--action-destructive-active)]',\n        ],\n        text: [\n          `${btnPrefix}-text`,\n          'tw-border-transparent tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]',\n          'hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n          'active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]',\n        ],\n        inverse: [\n          `${btnPrefix}-inverse`,\n          'tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--alias-colors-text-inverse-default)]',\n          'hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]',\n          'active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]',\n        ],\n        link: [\n          `${btnPrefix}-link`,\n          'tw-border-transparent tw-bg-transparent tw-text-[var(--action-primary-normal)]',\n          'hover:tw-text-[var(--action-primary-hover)]',\n          'active:tw-text-[var(--action-primary-active)]',\n        ],\n      },\n      size: {\n        small: [\n          `${btnPrefix}-small`,\n          'tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4',\n          'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n        ],\n        middle: [\n          `${btnPrefix}-middle`,\n          'tw-h-8 tw-min-w-8 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5',\n          'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n        ],\n        large: [\n          `${btnPrefix}-large`,\n          'tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6',\n          'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n        ],\n      },\n      disabled: {\n        true: 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n        false: '',\n      },\n      block: {\n        true: 'tw-w-full',\n        false: '',\n      },\n      shape: {\n        circle: 'tw-min-w-0 tw-rounded-full tw-p-0',\n        default: '',\n      },\n    },\n    defaultVariants: {\n      type: 'secondary',\n      size: 'middle',\n      disabled: false,\n      block: false,\n      shape: 'default',\n    },\n  },\n);\n\nconst VALID_TYPES: ButtonType[] = [\n  'primary',\n  'secondary',\n  'dangerous',\n  'text',\n  'inverse',\n  '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-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent',\n    ghost &&\n      type === 'primary' &&\n      size === 'middle' &&\n      '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n    ghost &&\n      type === 'dangerous' &&\n      size === 'middle' &&\n      '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n    ghost &&\n      type === 'secondary' &&\n      size === 'middle' &&\n      '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n    ghost &&\n      type === 'inverse' &&\n      size === 'middle' &&\n      '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0',\n    ghost &&\n      type === 'primary' &&\n      '!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]',\n    ghost &&\n      type === 'dangerous' &&\n      '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]',\n    ghost &&\n      type === 'secondary' &&\n      '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]',\n    ghost &&\n      type === 'inverse' &&\n      '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]',\n    ghost && type === 'primary' && '!tw-text-[var(--action-primary-normal)]',\n    ghost &&\n      type === 'dangerous' &&\n      '!tw-text-[var(--action-destructive-normal)]',\n    ghost && type === 'secondary' && '!tw-text-[var(--action-neutral-normal)]',\n    ghost && type === 'inverse' && '!tw-text-[var(--action-inverted-normal)]',\n    // icon-only 方形按钮：宽度由 aspect-ratio 从 height 反推，但该反推值\n    // 不构成 flex shrink 的下限——父行 max-content 被低估时（同行存在\n    // width:auto Select / RangePicker 等子树时 Chromium 恒少算几 px），\n    // 缺口会全压到本按钮上把它压扁。必须按 size 显式钳 min-width 兜底\n    // （v2/antd 的 icon-only 即固定 width）；带 ! 以盖过 shape=circle\n    // 的 tw-min-w-0\n    isIconOnly && 'tw-aspect-square !tw-px-0',\n    isIconOnly && size === 'small' && '!tw-min-w-7',\n    isIconOnly && size === 'middle' && '!tw-min-w-8',\n    isIconOnly && size === 'large' && '!tw-min-w-10',\n    compactClasses,\n    className,\n  );\n\n  const contentClasses = cn(\n    'tw-inline-flex tw-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,2GACF,SACE,SAAS,aACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,aACT,SAAS,YACT,4JACF,SACE,SAAS,aACT,sEACF,SACE,SAAS,eACT,yEACF,SACE,SAAS,eACT,6DACF,SACE,SAAS,aACT,sEACF,SAAS,SAAS,aAAa,2CAC/B,SACE,SAAS,eACT,+CACF,SAAS,SAAS,eAAe,2CACjC,SAAS,SAAS,aAAa,4CAO/B,cAAc,6BACd,cAAc,SAAS,WAAW,eAClC,cAAc,SAAS,YAAY,eACnC,cAAc,SAAS,WAAW,gBAClC,gBACA,UACD;CAED,MAAM,iBAAiB,GACrB,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) => {\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"}

package/dist/Card/index.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 function Card(props) {
 	const { title, extra, bordered = true, hoverable, size, type, className, style, bodyStyle, headStyle, children, cover, actions } = props;
 	return /* @__PURE__ */ jsxs("div", {
-		className: cn("ald-card tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-150 tw-bg-[var(--background-default)] tw-shadow-[0_2px_2px_-1px_rgba(27,36,44,0.04),0_2px_8px_-1px_rgba(27,36,44,0.08)] tw-outline tw-outline-1 tw-outline-[var(--border-default-alpha)]", !bordered && "!tw-outline-transparent", hoverable && "tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]", size === "small" && "ald-card-small", type === "inner" && "ald-card-inner", className),
+		className: cn("ald-card tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-150 tw-bg-[var(--background-default)] tw-shadow-[var(--elevation-bottom-bottom-md)] tw-outline tw-outline-1 tw-outline-[var(--border-default-alpha)]", !bordered && "!tw-outline-transparent", hoverable && "tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[var(--elevation-bottom-bottom-lg)]", size === "small" && "ald-card-small", type === "inner" && "ald-card-inner", className),
 		style,
 		children: [
 			(title || extra) && /* @__PURE__ */ jsxs("div", {
@@ -24,7 +24,7 @@ function Card(props) {
 				children: cover
 			}),
 			/* @__PURE__ */ jsx("div", {
-				className: cn("ald-card-body ant-card-body tw-flex tw-flex-col tw-items-stretch tw-gap-5 tw-self-stretch tw-p-6", size === "small" && "!tw-gap-3 !tw-p-4"),
+				className: cn("ald-card-body ant-card-body tw-flex tw-flex-col tw-items-start tw-gap-5 tw-self-stretch tw-p-6", size === "small" && "!tw-gap-3 !tw-p-4"),
 				style: bodyStyle,
 				children
 			}),

package/dist/Card/index.js.map

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

package/dist/Checkbox/index.js

@@ -38,10 +38,10 @@ function Checkbox(props) {
 		onClick: handleLabelClick,
 		"data-testid": dataTestid,
 		"aria-label": ariaLabel,
-		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(--interaction-border-hover)]", !mergedDisabled && checked && "[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]", className),
+		className: cn("ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-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-transparent tw-bg-[var(--interaction-default-normal)]", mergedDisabled && !checked && !indeterminate && "tw-opacity-50", !checked && !indeterminate && !alert && "tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--interaction-background-form-field)]", !checked && !indeterminate && alert && "tw-border-[var(--interaction-border-alert)] tw-bg-[var(--interaction-background-form-field)]", indeterminate && !checked && "ald-checkbox-indeterminate tw-border-transparent tw-bg-[var(--interaction-default-normal)]"),
+			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)]"),
 			children: [/* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				type: "checkbox",
@@ -60,7 +60,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(--alias-colors-text-default)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0", size === "small" ? "tw-text-xs" : "tw-text-sm", bold && "tw-font-medium", mergedDisabled && "tw-cursor-default"),
+			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"),
 			children
 		})]
 	});

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(--interaction-border-hover)]',\n        !mergedDisabled &&\n          checked &&\n          '[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]',\n        className,\n      )}\n      style={style}\n    >\n      <span\n        className={cn(\n          'ald-checkbox-inner tw-relative tw-box-border tw-flex tw-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-all tw-duration-200',\n          checked &&\n            'ald-checkbox-checked tw-border-transparent tw-bg-[var(--interaction-default-normal)]',\n          mergedDisabled && !checked && !indeterminate && 'tw-opacity-50',\n          !checked &&\n            !indeterminate &&\n            !alert &&\n            'tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--interaction-background-form-field)]',\n          !checked &&\n            !indeterminate &&\n            alert &&\n            'tw-border-[var(--interaction-border-alert)] tw-bg-[var(--interaction-background-form-field)]',\n          indeterminate &&\n            !checked &&\n            'ald-checkbox-indeterminate tw-border-transparent tw-bg-[var(--interaction-default-normal)]',\n        )}\n      >\n        <input\n          ref={inputRef}\n          type=\"checkbox\"\n          className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n          checked={!!checked}\n          disabled={mergedDisabled}\n          onChange={handleChange}\n          autoFocus={autoFocus}\n          name={name}\n          value={value as string}\n        />\n        {(checked || (indeterminate && !checked)) && (\n          <span\n            className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n            style={{\n              backgroundImage:\n                indeterminate && !checked\n                  ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n                  : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n              backgroundSize:\n                indeterminate && !checked ? '10px 2px' : '10px 8px',\n            }}\n          />\n        )}\n      </span>\n      {children && (\n        <span\n          className={cn(\n            'ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--alias-colors-text-default)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0',\n            size === 'small' ? 'tw-text-xs' : 'tw-text-sm',\n            bold && 'tw-font-medium',\n            mergedDisabled && 'tw-cursor-default',\n          )}\n        >\n          {children}\n        </span>\n      )}\n    </label>\n  );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n  const {\n    className,\n    disabled: customDisabled,\n    size,\n    options,\n    value: controlledValue,\n    defaultValue,\n    onChange,\n    direction,\n    name,\n    children,\n    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, { 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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"}

package/dist/Collapse/index.js

@@ -117,7 +117,7 @@ var CollapsePanelView = React.forwardRef((props, ref) => {
 	};
 	const iconNode = expandIcon ? expandIcon({ isActive }) : /* @__PURE__ */ jsx(Memo, {
 		size: 20,
-		color: "var(--alias-colors-icon-subtle)"
+		color: "var(--content-secondary)"
 	});
 	const iconElement = /* @__PURE__ */ jsx("span", {
 		className: "ald-collapse-expand-icon ant-collapse-expand-icon tw-flex tw-items-center",

package/dist/Collapse/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/Collapse/index.tsx"],"sourcesContent":["import React, { useContext, useRef, useState } from 'react';\nimport { ArrowRightLightLine } from '../Icon';\nimport { cn } from '../lib/utils';\n\n/**\n * Compound Components 模式：Collapse 通过 Context 注入受控状态 + 视觉配置，\n * Panel 始终自渲染（header + 折叠交互），靠 `panelKey` 与父协调 activeKey /\n * accordion。设计对齐 Radix / Mantine：Item 自渲染，靠声明式 value 与 Root 通信。\n *\n * 这里不再做\"扫描 children 提 Panel props 再替换渲染\"的 hack——后者无法穿透\n * forwardRef / 业务包装组件边界，是 ald v3 升级回归\"包装 Panel 丢 header\"的根因。\n */\ninterface CollapseContextValue {\n  // 视觉配置\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  expandIconPosition: 'start' | 'end';\n  bordered: boolean;\n  size: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n  // 受控状态协调\n  activeKeys: string[];\n  toggleKey: (key: string) => void;\n}\n\nconst CollapseContext = React.createContext<CollapseContextValue | null>(null);\n\nexport interface CollapsePanelProps {\n  /**\n   * 与父 Collapse 协调 activeKey / accordion 的 key。\n   * 不提供时 Panel 走内部 state（视觉一致但不参与父协调）。\n   * Radix Accordion 等同 prop 名是 `value`；这里沿用 `panelKey` 与已有\n   * `Collapse items[].key` 命名一致，迁移成本最低。\n   */\n  panelKey?: string;\n  header?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  forceRender?: boolean;\n  collapsible?: 'header' | 'icon' | 'disabled';\n  showArrow?: boolean;\n}\n\nexport interface CollapseProps {\n  activeKey?: string | string[];\n  defaultActiveKey?: string | string[];\n  accordion?: boolean;\n  onChange?: (key: string | string[]) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  bordered?: boolean;\n  expandIconPosition?: 'start' | 'end' | 'left' | 'right';\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  ghost?: boolean;\n  size?: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n  children?: React.ReactNode;\n  items?: Array<{\n    key: string;\n    label: React.ReactNode;\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    extra?: React.ReactNode;\n    disabled?: boolean;\n    collapsible?: 'header' | 'icon' | 'disabled';\n    forceRender?: boolean;\n  }>;\n}\n\nconst normalizeKeys = (keys: string | string[] | undefined): string[] => {\n  if (!keys) return [];\n  return Array.isArray(keys) ? keys : [keys];\n};\n\nconst Collapse = (props: CollapseProps) => {\n  const {\n    defaultActiveKey = [],\n    activeKey: controlledActiveKey,\n    accordion,\n    onChange,\n    className,\n    style,\n    bordered = true,\n    ghost,\n    size = 'middle',\n    collapsible,\n    expandIconPosition,\n    expandIcon,\n    items: itemsProp,\n    children,\n  } = props;\n\n  const resolvedPosition =\n    expandIconPosition === 'left'\n      ? 'start'\n      : expandIconPosition === 'right'\n      ? 'end'\n      : expandIconPosition ?? 'start';\n\n  const [internalActiveKey, setInternalActiveKey] = useState<string[]>(\n    normalizeKeys(defaultActiveKey),\n  );\n\n  const activeKeys =\n    controlledActiveKey !== undefined\n      ? normalizeKeys(controlledActiveKey)\n      : internalActiveKey;\n\n  const toggleKey = (key: string) => {\n    let newKeys: string[];\n    if (accordion) {\n      newKeys = activeKeys.includes(key) ? [] : [key];\n    } else {\n      newKeys = activeKeys.includes(key)\n        ? activeKeys.filter((k) => k !== key)\n        : [...activeKeys, key];\n    }\n    if (controlledActiveKey === undefined) {\n      setInternalActiveKey(newKeys);\n    }\n    onChange?.(accordion ? newKeys[0] || '' : newKeys);\n  };\n\n  const contextValue: CollapseContextValue = {\n    expandIcon,\n    expandIconPosition: resolvedPosition,\n    bordered: bordered && !ghost,\n    size,\n    collapsible,\n    activeKeys,\n    toggleKey,\n  };\n\n  /**\n   * children 路径：向后兼容老用法 `<Collapse><Collapse.Panel key=\"1\" ...>`\n   * ——React `key` 是保留字不会进 Panel props，所以把它读出来 cloneElement\n   * 注入到 `panelKey` 上（只对直接子元素生效；包装组件需要业务侧自己透传）。\n   */\n  const enhancedChildren = React.Children.map(children, (child) => {\n    if (!React.isValidElement<CollapsePanelProps>(child)) return child;\n    if ((child.type as any)?.__COLLAPSE_PANEL !== true) return child;\n    if (child.props.panelKey !== undefined) return child;\n    if (child.key === null || child.key === undefined) return child;\n    return React.cloneElement(child, { panelKey: String(child.key) });\n  });\n\n  return (\n    <CollapseContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          // 相邻 .ald-collapse-item 用 CSS 兄弟选择器画分隔线，避免在 React 树里\n          // 注入 <div .ald-collapse-divider /> 节点——后者在\"业务包装 Panel\"场景\n          // 需要 Collapse 知道子元素拓扑，与 Compound Components 解耦原则冲突。\n          'ald-collapse ant-collapse tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-75 [&>.ald-collapse-item+.ald-collapse-item]:tw-border-0 [&>.ald-collapse-item+.ald-collapse-item]:tw-border-t [&>.ald-collapse-item+.ald-collapse-item]:tw-border-solid [&>.ald-collapse-item+.ald-collapse-item]:tw-border-[var(--border-default)]',\n          !ghost && !bordered && 'tw-bg-[var(--background-neutral-subtle)]',\n          !ghost &&\n            bordered &&\n            'tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)]',\n          `ald-collapse-${size}`,\n          className,\n        )}\n        style={style}\n      >\n        {itemsProp && itemsProp.length > 0\n          ? itemsProp.map((item) => (\n              <Panel\n                key={item.key}\n                panelKey={item.key}\n                header={item.label}\n                disabled={item.disabled}\n                collapsible={item.collapsible ?? collapsible}\n                extra={item.extra}\n                className={item.className}\n                style={item.style}\n                forceRender={item.forceRender}\n              >\n                {item.children}\n              </Panel>\n            ))\n          : enhancedChildren}\n      </div>\n    </CollapseContext.Provider>\n  );\n};\n\n/**\n * Panel —— 始终自渲染。\n *\n * - 在 `<Collapse>` 内（ctx 存在）+ 提供 `panelKey`：受控渲染（参与父 activeKey\n *   / accordion 协调），点击调 `ctx.toggleKey`，`isActive` 来自 `ctx.activeKeys`。\n * - 在 `<Collapse>` 内（ctx 存在）+ 未提供 `panelKey`：自渲染 + 独立 state，视觉\n *   配置仍来自 ctx，但与父受控状态隔离（业务包装组件没透传 panelKey 时的退化）。\n * - `<Collapse>` 外使用（ctx 不存在）：完全自给自足，视觉配置走默认值。\n *\n * 用 forwardRef 转发 ref 到 `.ald-collapse-item` root div——业务侧包装组件常\n * 需要拿到 panel 容器引用做滚动定位等，向后兼容旧版本 Panel 暴露的 ref API。\n */\nconst Panel = React.forwardRef<HTMLDivElement, CollapsePanelProps>(\n  (props, ref) => {\n    const ctx = useContext(CollapseContext);\n    const {\n      panelKey,\n      header,\n      children,\n      className,\n      style,\n      extra,\n      disabled,\n      collapsible,\n      forceRender,\n    } = props;\n\n    const isControlled = ctx !== null && panelKey !== undefined;\n\n    const [internalActive, setInternalActive] = useState(false);\n\n    const isActive = isControlled\n      ? ctx!.activeKeys.includes(panelKey!)\n      : internalActive;\n\n    const onToggle = () => {\n      if (isControlled) {\n        ctx!.toggleKey(panelKey!);\n      } else {\n        setInternalActive((v) => !v);\n      }\n    };\n\n    const expandIcon = ctx?.expandIcon;\n    const expandIconPosition = ctx?.expandIconPosition ?? 'start';\n    const bordered = ctx?.bordered ?? true;\n    const size = ctx?.size ?? 'middle';\n    const mergedCollapsible = collapsible ?? ctx?.collapsible;\n\n    return (\n      <CollapsePanelView\n        ref={ref}\n        header={header}\n        isActive={isActive}\n        onToggle={onToggle}\n        disabled={disabled || mergedCollapsible === 'disabled'}\n        extra={extra}\n        className={className}\n        style={style}\n        forceRender={forceRender}\n        expandIcon={expandIcon}\n        expandIconPosition={expandIconPosition}\n        bordered={bordered}\n        size={size}\n        collapsible={mergedCollapsible}\n      >\n        {children}\n      </CollapsePanelView>\n    );\n  },\n);\n\n(Panel as any).__COLLAPSE_PANEL = true;\n\ninterface CollapsePanelViewProps {\n  header: React.ReactNode;\n  isActive: boolean;\n  onToggle: () => void;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  forceRender?: boolean;\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  expandIconPosition?: 'start' | 'end';\n  bordered?: boolean;\n  size?: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n}\n\n/** 哑视图组件，承担 DOM 结构 + 折叠动画；不持有受控状态，ref 转发到 root div。 */\nconst CollapsePanelView = React.forwardRef<\n  HTMLDivElement,\n  CollapsePanelViewProps\n>((props, ref) => {\n  const {\n    header,\n    isActive,\n    onToggle,\n    disabled,\n    extra,\n    className,\n    style,\n    children,\n    forceRender,\n    expandIcon,\n    expandIconPosition = 'start',\n    bordered,\n    size = 'middle',\n    collapsible = 'header',\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [rendered, setRendered] = useState(isActive || !!forceRender);\n\n  if (isActive && !rendered) {\n    setRendered(true);\n  }\n\n  const handleTransitionEnd = () => {\n    if (!isActive && !forceRender) {\n      setRendered(false);\n    }\n  };\n\n  const iconNode = expandIcon ? (\n    expandIcon({ isActive })\n  ) : (\n    <ArrowRightLightLine size={20} color=\"var(--alias-colors-icon-subtle)\" />\n  );\n\n  const iconElement = (\n    <span\n      className=\"ald-collapse-expand-icon ant-collapse-expand-icon tw-flex tw-items-center\"\n      style={{\n        transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)',\n        transition: 'transform 200ms',\n      }}\n      onClick={\n        disabled || collapsible !== 'icon'\n          ? undefined\n          : (e) => {\n              e.stopPropagation();\n              onToggle();\n            }\n      }\n    >\n      {iconNode}\n    </span>\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'ald-collapse-item ant-collapse-item tw-w-full',\n        isActive && 'ald-collapse-item-active',\n        disabled && 'tw-pointer-events-none tw-opacity-50',\n        `ald-collapse-item-${size}`,\n        className,\n      )}\n      style={style}\n    >\n      <div\n        className={cn(\n          'ald-collapse-header ant-collapse-header tw-flex tw-items-center tw-gap-2 tw-p-3',\n          !disabled && collapsible !== 'icon' && 'tw-cursor-pointer',\n        )}\n        onClick={disabled || collapsible === 'icon' ? undefined : onToggle}\n      >\n        {expandIconPosition === 'start' && iconElement}\n        <span className=\"ald-collapse-header-text ant-collapse-header-text tw-flex-1 tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--content-primary)]\">\n          {header}\n        </span>\n        {extra && (\n          // extra 区域里常放 Switch / Button 等交互控件，点击不该冒泡触发 panel\n          // 切展开/收起。antd Collapse 也是同样行为；不强制消费方在每个 extra\n          // 控件上自己写 stopPropagation。\n          <span\n            className=\"ald-collapse-extra ant-collapse-extra\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {extra}\n          </span>\n        )}\n        {expandIconPosition === 'end' && iconElement}\n      </div>\n      <div\n        className=\"tw-grid tw-transition-[grid-template-rows] tw-duration-200\"\n        style={{ gridTemplateRows: isActive ? '1fr' : '0fr' }}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <div className=\"tw-overflow-hidden\">\n          {rendered && (\n            <div\n              ref={contentRef}\n              className={cn(\n                'ald-collapse-content ant-collapse-content tw-flex tw-flex-col tw-items-stretch tw-gap-2.5 tw-self-stretch',\n                bordered\n                  ? 'tw-bg-[var(--background-default)] tw-p-4'\n                  : 'tw-px-4 tw-pb-4 tw-pt-0',\n              )}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nCollapse.Panel = Panel;\n\nexport default Collapse;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/Collapse/index.tsx"],"sourcesContent":["import React, { useContext, useRef, useState } from 'react';\nimport { ArrowRightLightLine } from '../Icon';\nimport { cn } from '../lib/utils';\n\n/**\n * Compound Components 模式：Collapse 通过 Context 注入受控状态 + 视觉配置，\n * Panel 始终自渲染（header + 折叠交互），靠 `panelKey` 与父协调 activeKey /\n * accordion。设计对齐 Radix / Mantine：Item 自渲染，靠声明式 value 与 Root 通信。\n *\n * 这里不再做\"扫描 children 提 Panel props 再替换渲染\"的 hack——后者无法穿透\n * forwardRef / 业务包装组件边界，是 ald v3 升级回归\"包装 Panel 丢 header\"的根因。\n */\ninterface CollapseContextValue {\n  // 视觉配置\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  expandIconPosition: 'start' | 'end';\n  bordered: boolean;\n  size: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n  // 受控状态协调\n  activeKeys: string[];\n  toggleKey: (key: string) => void;\n}\n\nconst CollapseContext = React.createContext<CollapseContextValue | null>(null);\n\nexport interface CollapsePanelProps {\n  /**\n   * 与父 Collapse 协调 activeKey / accordion 的 key。\n   * 不提供时 Panel 走内部 state（视觉一致但不参与父协调）。\n   * Radix Accordion 等同 prop 名是 `value`；这里沿用 `panelKey` 与已有\n   * `Collapse items[].key` 命名一致，迁移成本最低。\n   */\n  panelKey?: string;\n  header?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  forceRender?: boolean;\n  collapsible?: 'header' | 'icon' | 'disabled';\n  showArrow?: boolean;\n}\n\nexport interface CollapseProps {\n  activeKey?: string | string[];\n  defaultActiveKey?: string | string[];\n  accordion?: boolean;\n  onChange?: (key: string | string[]) => void;\n  className?: string;\n  style?: React.CSSProperties;\n  bordered?: boolean;\n  expandIconPosition?: 'start' | 'end' | 'left' | 'right';\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  ghost?: boolean;\n  size?: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n  children?: React.ReactNode;\n  items?: Array<{\n    key: string;\n    label: React.ReactNode;\n    children?: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n    extra?: React.ReactNode;\n    disabled?: boolean;\n    collapsible?: 'header' | 'icon' | 'disabled';\n    forceRender?: boolean;\n  }>;\n}\n\nconst normalizeKeys = (keys: string | string[] | undefined): string[] => {\n  if (!keys) return [];\n  return Array.isArray(keys) ? keys : [keys];\n};\n\nconst Collapse = (props: CollapseProps) => {\n  const {\n    defaultActiveKey = [],\n    activeKey: controlledActiveKey,\n    accordion,\n    onChange,\n    className,\n    style,\n    bordered = true,\n    ghost,\n    size = 'middle',\n    collapsible,\n    expandIconPosition,\n    expandIcon,\n    items: itemsProp,\n    children,\n  } = props;\n\n  const resolvedPosition =\n    expandIconPosition === 'left'\n      ? 'start'\n      : expandIconPosition === 'right'\n      ? 'end'\n      : expandIconPosition ?? 'start';\n\n  const [internalActiveKey, setInternalActiveKey] = useState<string[]>(\n    normalizeKeys(defaultActiveKey),\n  );\n\n  const activeKeys =\n    controlledActiveKey !== undefined\n      ? normalizeKeys(controlledActiveKey)\n      : internalActiveKey;\n\n  const toggleKey = (key: string) => {\n    let newKeys: string[];\n    if (accordion) {\n      newKeys = activeKeys.includes(key) ? [] : [key];\n    } else {\n      newKeys = activeKeys.includes(key)\n        ? activeKeys.filter((k) => k !== key)\n        : [...activeKeys, key];\n    }\n    if (controlledActiveKey === undefined) {\n      setInternalActiveKey(newKeys);\n    }\n    onChange?.(accordion ? newKeys[0] || '' : newKeys);\n  };\n\n  const contextValue: CollapseContextValue = {\n    expandIcon,\n    expandIconPosition: resolvedPosition,\n    bordered: bordered && !ghost,\n    size,\n    collapsible,\n    activeKeys,\n    toggleKey,\n  };\n\n  /**\n   * children 路径：向后兼容老用法 `<Collapse><Collapse.Panel key=\"1\" ...>`\n   * ——React `key` 是保留字不会进 Panel props，所以把它读出来 cloneElement\n   * 注入到 `panelKey` 上（只对直接子元素生效；包装组件需要业务侧自己透传）。\n   */\n  const enhancedChildren = React.Children.map(children, (child) => {\n    if (!React.isValidElement<CollapsePanelProps>(child)) return child;\n    if ((child.type as any)?.__COLLAPSE_PANEL !== true) return child;\n    if (child.props.panelKey !== undefined) return child;\n    if (child.key === null || child.key === undefined) return child;\n    return React.cloneElement(child, { panelKey: String(child.key) });\n  });\n\n  return (\n    <CollapseContext.Provider value={contextValue}>\n      <div\n        className={cn(\n          // antd 兼容：保留 ant-* class，消费方 CSS 可能依赖该选择器\n          // 相邻 .ald-collapse-item 用 CSS 兄弟选择器画分隔线，避免在 React 树里\n          // 注入 <div .ald-collapse-divider /> 节点——后者在\"业务包装 Panel\"场景\n          // 需要 Collapse 知道子元素拓扑，与 Compound Components 解耦原则冲突。\n          'ald-collapse ant-collapse tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-75 [&>.ald-collapse-item+.ald-collapse-item]:tw-border-0 [&>.ald-collapse-item+.ald-collapse-item]:tw-border-t [&>.ald-collapse-item+.ald-collapse-item]:tw-border-solid [&>.ald-collapse-item+.ald-collapse-item]:tw-border-[var(--border-default)]',\n          !ghost && !bordered && 'tw-bg-[var(--background-neutral-subtle)]',\n          !ghost &&\n            bordered &&\n            'tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)]',\n          `ald-collapse-${size}`,\n          className,\n        )}\n        style={style}\n      >\n        {itemsProp && itemsProp.length > 0\n          ? itemsProp.map((item) => (\n              <Panel\n                key={item.key}\n                panelKey={item.key}\n                header={item.label}\n                disabled={item.disabled}\n                collapsible={item.collapsible ?? collapsible}\n                extra={item.extra}\n                className={item.className}\n                style={item.style}\n                forceRender={item.forceRender}\n              >\n                {item.children}\n              </Panel>\n            ))\n          : enhancedChildren}\n      </div>\n    </CollapseContext.Provider>\n  );\n};\n\n/**\n * Panel —— 始终自渲染。\n *\n * - 在 `<Collapse>` 内（ctx 存在）+ 提供 `panelKey`：受控渲染（参与父 activeKey\n *   / accordion 协调），点击调 `ctx.toggleKey`，`isActive` 来自 `ctx.activeKeys`。\n * - 在 `<Collapse>` 内（ctx 存在）+ 未提供 `panelKey`：自渲染 + 独立 state，视觉\n *   配置仍来自 ctx，但与父受控状态隔离（业务包装组件没透传 panelKey 时的退化）。\n * - `<Collapse>` 外使用（ctx 不存在）：完全自给自足，视觉配置走默认值。\n *\n * 用 forwardRef 转发 ref 到 `.ald-collapse-item` root div——业务侧包装组件常\n * 需要拿到 panel 容器引用做滚动定位等，向后兼容旧版本 Panel 暴露的 ref API。\n */\nconst Panel = React.forwardRef<HTMLDivElement, CollapsePanelProps>(\n  (props, ref) => {\n    const ctx = useContext(CollapseContext);\n    const {\n      panelKey,\n      header,\n      children,\n      className,\n      style,\n      extra,\n      disabled,\n      collapsible,\n      forceRender,\n    } = props;\n\n    const isControlled = ctx !== null && panelKey !== undefined;\n\n    const [internalActive, setInternalActive] = useState(false);\n\n    const isActive = isControlled\n      ? ctx!.activeKeys.includes(panelKey!)\n      : internalActive;\n\n    const onToggle = () => {\n      if (isControlled) {\n        ctx!.toggleKey(panelKey!);\n      } else {\n        setInternalActive((v) => !v);\n      }\n    };\n\n    const expandIcon = ctx?.expandIcon;\n    const expandIconPosition = ctx?.expandIconPosition ?? 'start';\n    const bordered = ctx?.bordered ?? true;\n    const size = ctx?.size ?? 'middle';\n    const mergedCollapsible = collapsible ?? ctx?.collapsible;\n\n    return (\n      <CollapsePanelView\n        ref={ref}\n        header={header}\n        isActive={isActive}\n        onToggle={onToggle}\n        disabled={disabled || mergedCollapsible === 'disabled'}\n        extra={extra}\n        className={className}\n        style={style}\n        forceRender={forceRender}\n        expandIcon={expandIcon}\n        expandIconPosition={expandIconPosition}\n        bordered={bordered}\n        size={size}\n        collapsible={mergedCollapsible}\n      >\n        {children}\n      </CollapsePanelView>\n    );\n  },\n);\n\n(Panel as any).__COLLAPSE_PANEL = true;\n\ninterface CollapsePanelViewProps {\n  header: React.ReactNode;\n  isActive: boolean;\n  onToggle: () => void;\n  disabled?: boolean;\n  extra?: React.ReactNode;\n  className?: string;\n  style?: React.CSSProperties;\n  children?: React.ReactNode;\n  forceRender?: boolean;\n  expandIcon?: (props: { isActive: boolean }) => React.ReactNode;\n  expandIconPosition?: 'start' | 'end';\n  bordered?: boolean;\n  size?: 'large' | 'middle' | 'small';\n  collapsible?: 'header' | 'icon' | 'disabled';\n}\n\n/** 哑视图组件，承担 DOM 结构 + 折叠动画；不持有受控状态，ref 转发到 root div。 */\nconst CollapsePanelView = React.forwardRef<\n  HTMLDivElement,\n  CollapsePanelViewProps\n>((props, ref) => {\n  const {\n    header,\n    isActive,\n    onToggle,\n    disabled,\n    extra,\n    className,\n    style,\n    children,\n    forceRender,\n    expandIcon,\n    expandIconPosition = 'start',\n    bordered,\n    size = 'middle',\n    collapsible = 'header',\n  } = props;\n\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [rendered, setRendered] = useState(isActive || !!forceRender);\n\n  if (isActive && !rendered) {\n    setRendered(true);\n  }\n\n  const handleTransitionEnd = () => {\n    if (!isActive && !forceRender) {\n      setRendered(false);\n    }\n  };\n\n  const iconNode = expandIcon ? (\n    expandIcon({ isActive })\n  ) : (\n    <ArrowRightLightLine size={20} color=\"var(--content-secondary)\" />\n  );\n\n  const iconElement = (\n    <span\n      className=\"ald-collapse-expand-icon ant-collapse-expand-icon tw-flex tw-items-center\"\n      style={{\n        transform: isActive ? 'rotate(90deg)' : 'rotate(0deg)',\n        transition: 'transform 200ms',\n      }}\n      onClick={\n        disabled || collapsible !== 'icon'\n          ? undefined\n          : (e) => {\n              e.stopPropagation();\n              onToggle();\n            }\n      }\n    >\n      {iconNode}\n    </span>\n  );\n\n  return (\n    <div\n      ref={ref}\n      className={cn(\n        'ald-collapse-item ant-collapse-item tw-w-full',\n        isActive && 'ald-collapse-item-active',\n        disabled && 'tw-pointer-events-none tw-opacity-50',\n        `ald-collapse-item-${size}`,\n        className,\n      )}\n      style={style}\n    >\n      <div\n        className={cn(\n          'ald-collapse-header ant-collapse-header tw-flex tw-items-center tw-gap-2 tw-p-3',\n          !disabled && collapsible !== 'icon' && 'tw-cursor-pointer',\n        )}\n        onClick={disabled || collapsible === 'icon' ? undefined : onToggle}\n      >\n        {expandIconPosition === 'start' && iconElement}\n        <span className=\"ald-collapse-header-text ant-collapse-header-text tw-flex-1 tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--content-primary)]\">\n          {header}\n        </span>\n        {extra && (\n          // extra 区域里常放 Switch / Button 等交互控件，点击不该冒泡触发 panel\n          // 切展开/收起。antd Collapse 也是同样行为；不强制消费方在每个 extra\n          // 控件上自己写 stopPropagation。\n          <span\n            className=\"ald-collapse-extra ant-collapse-extra\"\n            onClick={(e) => e.stopPropagation()}\n          >\n            {extra}\n          </span>\n        )}\n        {expandIconPosition === 'end' && iconElement}\n      </div>\n      <div\n        className=\"tw-grid tw-transition-[grid-template-rows] tw-duration-200\"\n        style={{ gridTemplateRows: isActive ? '1fr' : '0fr' }}\n        onTransitionEnd={handleTransitionEnd}\n      >\n        <div className=\"tw-overflow-hidden\">\n          {rendered && (\n            <div\n              ref={contentRef}\n              className={cn(\n                'ald-collapse-content ant-collapse-content tw-flex tw-flex-col tw-items-stretch tw-gap-2.5 tw-self-stretch',\n                bordered\n                  ? 'tw-bg-[var(--background-default)] tw-p-4'\n                  : 'tw-px-4 tw-pb-4 tw-pt-0',\n              )}\n            >\n              {children}\n            </div>\n          )}\n        </div>\n      </div>\n    </div>\n  );\n});\n\nCollapse.Panel = Panel;\n\nexport default Collapse;\n"],"mappings":"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"}

package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js

@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
 //#region src/ColorPicker/ComplexColorPicker/ColorAlphaInput.tsx
 var ColorAlphaInput = ({ prefixCls, value, onChange }) => {
 	const colorAlphaInputPrefixCls = `${prefixCls}-alpha-input`;
-	const [alphaValue, setAlphaValue] = useState(generateColor(value || "#000"));
+	const [alphaValue, setAlphaValue] = useState(generateColor(value || ""));
 	useEffect(() => {
 		if (value) setAlphaValue(value);
 	}, [value]);

package/dist/ColorPicker/ComplexColorPicker/ColorAlphaInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorAlphaInput.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/ColorAlphaInput.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\n\nimport type { AggregationColor } from '../color';\nimport { generateColor, getColorAlpha } from '../util';\nimport ColorSteppers from './ColorSteppers';\n\ninterface ColorAlphaInputProps {\n  prefixCls: string;\n  value?: AggregationColor;\n  onChange?: (value: AggregationColor) => void;\n}\n\nconst ColorAlphaInput: FC<ColorAlphaInputProps> = ({\n  prefixCls,\n  value,\n  onChange,\n}) => {\n  const colorAlphaInputPrefixCls = `${prefixCls}-alpha-input`;\n  const [alphaValue, setAlphaValue] = useState<AggregationColor>(\n    generateColor(value || '#000'),\n  );\n\n  useEffect(() => {\n    if (value) {\n      setAlphaValue(value);\n    }\n  }, [value]);\n\n  const handleAlphaChange = (step: number | null) => {\n    const hsba = alphaValue.toHsb();\n    hsba.a = (step || 0) / 100;\n    const genColor = generateColor(hsba);\n    if (!value) {\n      setAlphaValue(genColor);\n    }\n    onChange?.(genColor);\n  };\n\n  return (\n    <ColorSteppers\n      value={getColorAlpha(alphaValue)}\n      prefixCls={prefixCls}\n      formatter={(step) => `${step}%`}\n      className={`${colorAlphaInputPrefixCls} tw-w-11`}\n      onChange={handleAlphaChange}\n    />\n  );\n};\n\nexport default ColorAlphaInput;\n"],"mappings":";;;;;AAaA,IAAM,mBAA6C,EACjD,WACA,OACA,eACI;CACJ,MAAM,2BAA2B,GAAG,UAAU;CAC9C,MAAM,CAAC,YAAY,iBAAiB,SAClC,cAAc,SAAS,OAAO,CAC/B;AAED,iBAAgB;AACd,MAAI,MACF,eAAc,MAAM;IAErB,CAAC,MAAM,CAAC;CAEX,MAAM,qBAAqB,SAAwB;EACjD,MAAM,OAAO,WAAW,OAAO;AAC/B,OAAK,KAAK,QAAQ,KAAK;EACvB,MAAM,WAAW,cAAc,KAAK;AACpC,MAAI,CAAC,MACH,eAAc,SAAS;AAEzB,aAAW,SAAS;;AAGtB,QACE,oBAAC,eAAD;EACE,OAAO,cAAc,WAAW;EACrB;EACX,YAAY,SAAS,GAAG,KAAK;EAC7B,WAAW,GAAG,yBAAyB;EACvC,UAAU;EACV,CAAA"}
+{"version":3,"file":"ColorAlphaInput.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/ColorAlphaInput.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\n\nimport type { AggregationColor } from '../color';\nimport { generateColor, getColorAlpha } from '../util';\nimport ColorSteppers from './ColorSteppers';\n\ninterface ColorAlphaInputProps {\n  prefixCls: string;\n  value?: AggregationColor;\n  onChange?: (value: AggregationColor) => void;\n}\n\nconst ColorAlphaInput: FC<ColorAlphaInputProps> = ({\n  prefixCls,\n  value,\n  onChange,\n}) => {\n  const colorAlphaInputPrefixCls = `${prefixCls}-alpha-input`;\n  const [alphaValue, setAlphaValue] = useState<AggregationColor>(\n    generateColor(value || ''),\n  );\n\n  useEffect(() => {\n    if (value) {\n      setAlphaValue(value);\n    }\n  }, [value]);\n\n  const handleAlphaChange = (step: number | null) => {\n    const hsba = alphaValue.toHsb();\n    hsba.a = (step || 0) / 100;\n    const genColor = generateColor(hsba);\n    if (!value) {\n      setAlphaValue(genColor);\n    }\n    onChange?.(genColor);\n  };\n\n  return (\n    <ColorSteppers\n      value={getColorAlpha(alphaValue)}\n      prefixCls={prefixCls}\n      formatter={(step) => `${step}%`}\n      className={`${colorAlphaInputPrefixCls} tw-w-11`}\n      onChange={handleAlphaChange}\n    />\n  );\n};\n\nexport default ColorAlphaInput;\n"],"mappings":";;;;;AAaA,IAAM,mBAA6C,EACjD,WACA,OACA,eACI;CACJ,MAAM,2BAA2B,GAAG,UAAU;CAC9C,MAAM,CAAC,YAAY,iBAAiB,SAClC,cAAc,SAAS,GAAG,CAC3B;AAED,iBAAgB;AACd,MAAI,MACF,eAAc,MAAM;IAErB,CAAC,MAAM,CAAC;CAEX,MAAM,qBAAqB,SAAwB;EACjD,MAAM,OAAO,WAAW,OAAO;AAC/B,OAAK,KAAK,QAAQ,KAAK;EACvB,MAAM,WAAW,cAAc,KAAK;AACpC,MAAI,CAAC,MACH,eAAc,SAAS;AAEzB,aAAW,SAAS;;AAGtB,QACE,oBAAC,eAAD;EACE,OAAO,cAAc,WAAW;EACrB;EACX,YAAY,SAAS,GAAG,KAAK;EAC7B,WAAW,GAAG,yBAAyB;EACvC,UAAU;EACV,CAAA"}

package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ColorPicker/ComplexColorPicker/ColorHsbInput.tsx
 var ColorHsbInput = ({ prefixCls, value, onChange }) => {
 	const colorHsbInputPrefixCls = `${prefixCls}-hsb-input`;
-	const [hsbValue, setHsbValue] = useState(generateColor(value || "#000"));
+	const [hsbValue, setHsbValue] = useState(generateColor(value || ""));
 	useEffect(() => {
 		if (value) setHsbValue(value);
 	}, [value]);

package/dist/ColorPicker/ComplexColorPicker/ColorHsbInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorHsbInput.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/ColorHsbInput.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport type { HSB } from '@rc-component/color-picker';\n\nimport type { AggregationColor } from '../color';\nimport { generateColor, getRoundNumber } from '../util';\nimport ColorSteppers from './ColorSteppers';\n\ninterface ColorHsbInputProps {\n  prefixCls: string;\n  value?: AggregationColor;\n  onChange?: (value: AggregationColor) => void;\n}\n\nconst ColorHsbInput: FC<ColorHsbInputProps> = ({\n  prefixCls,\n  value,\n  onChange,\n}) => {\n  const colorHsbInputPrefixCls = `${prefixCls}-hsb-input`;\n  const [hsbValue, setHsbValue] = useState<AggregationColor>(\n    generateColor(value || '#000'),\n  );\n\n  useEffect(() => {\n    if (value) {\n      setHsbValue(value);\n    }\n  }, [value]);\n\n  const handleHsbChange = (step: number, type: keyof HSB) => {\n    const hsb = hsbValue.toHsb();\n    hsb[type] = type === 'h' ? step : (step || 0) / 100;\n    const genColor = generateColor(hsb);\n    if (!value) {\n      setHsbValue(genColor);\n    }\n    onChange?.(genColor);\n  };\n\n  return (\n    <div\n      className={`${colorHsbInputPrefixCls} tw-flex tw-items-center tw-gap-1`}\n    >\n      <ColorSteppers\n        max={360}\n        min={0}\n        value={Number(hsbValue.toHsb().h)}\n        prefixCls={prefixCls}\n        className={colorHsbInputPrefixCls}\n        formatter={(step) => getRoundNumber(step || 0).toString()}\n        onChange={(step) => handleHsbChange(Number(step), 'h')}\n      />\n      <ColorSteppers\n        max={100}\n        min={0}\n        value={Number(hsbValue.toHsb().s) * 100}\n        prefixCls={prefixCls}\n        className={colorHsbInputPrefixCls}\n        formatter={(step) => `${getRoundNumber(step || 0)}%`}\n        onChange={(step) => handleHsbChange(Number(step), 's')}\n      />\n      <ColorSteppers\n        max={100}\n        min={0}\n        value={Number(hsbValue.toHsb().b) * 100}\n        prefixCls={prefixCls}\n        className={colorHsbInputPrefixCls}\n        formatter={(step) => `${getRoundNumber(step || 0)}%`}\n        onChange={(step) => handleHsbChange(Number(step), 'b')}\n      />\n    </div>\n  );\n};\n\nexport default ColorHsbInput;\n"],"mappings":";;;;;AAcA,IAAM,iBAAyC,EAC7C,WACA,OACA,eACI;CACJ,MAAM,yBAAyB,GAAG,UAAU;CAC5C,MAAM,CAAC,UAAU,eAAe,SAC9B,cAAc,SAAS,OAAO,CAC/B;AAED,iBAAgB;AACd,MAAI,MACF,aAAY,MAAM;IAEnB,CAAC,MAAM,CAAC;CAEX,MAAM,mBAAmB,MAAc,SAAoB;EACzD,MAAM,MAAM,SAAS,OAAO;AAC5B,MAAI,QAAQ,SAAS,MAAM,QAAQ,QAAQ,KAAK;EAChD,MAAM,WAAW,cAAc,IAAI;AACnC,MAAI,CAAC,MACH,aAAY,SAAS;AAEvB,aAAW,SAAS;;AAGtB,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,uBAAuB;YADvC;GAGE,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE;IACtB;IACX,WAAW;IACX,YAAY,SAAS,eAAe,QAAQ,EAAE,CAAC,UAAU;IACzD,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE,GAAG;IACzB;IACX,WAAW;IACX,YAAY,SAAS,GAAG,eAAe,QAAQ,EAAE,CAAC;IAClD,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE,GAAG;IACzB;IACX,WAAW;IACX,YAAY,SAAS,GAAG,eAAe,QAAQ,EAAE,CAAC;IAClD,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACE"}
+{"version":3,"file":"ColorHsbInput.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/ColorHsbInput.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport type { HSB } from '@rc-component/color-picker';\n\nimport type { AggregationColor } from '../color';\nimport { generateColor, getRoundNumber } from '../util';\nimport ColorSteppers from './ColorSteppers';\n\ninterface ColorHsbInputProps {\n  prefixCls: string;\n  value?: AggregationColor;\n  onChange?: (value: AggregationColor) => void;\n}\n\nconst ColorHsbInput: FC<ColorHsbInputProps> = ({\n  prefixCls,\n  value,\n  onChange,\n}) => {\n  const colorHsbInputPrefixCls = `${prefixCls}-hsb-input`;\n  const [hsbValue, setHsbValue] = useState<AggregationColor>(\n    generateColor(value || ''),\n  );\n\n  useEffect(() => {\n    if (value) {\n      setHsbValue(value);\n    }\n  }, [value]);\n\n  const handleHsbChange = (step: number, type: keyof HSB) => {\n    const hsb = hsbValue.toHsb();\n    hsb[type] = type === 'h' ? step : (step || 0) / 100;\n    const genColor = generateColor(hsb);\n    if (!value) {\n      setHsbValue(genColor);\n    }\n    onChange?.(genColor);\n  };\n\n  return (\n    <div\n      className={`${colorHsbInputPrefixCls} tw-flex tw-items-center tw-gap-1`}\n    >\n      <ColorSteppers\n        max={360}\n        min={0}\n        value={Number(hsbValue.toHsb().h)}\n        prefixCls={prefixCls}\n        className={colorHsbInputPrefixCls}\n        formatter={(step) => getRoundNumber(step || 0).toString()}\n        onChange={(step) => handleHsbChange(Number(step), 'h')}\n      />\n      <ColorSteppers\n        max={100}\n        min={0}\n        value={Number(hsbValue.toHsb().s) * 100}\n        prefixCls={prefixCls}\n        className={colorHsbInputPrefixCls}\n        formatter={(step) => `${getRoundNumber(step || 0)}%`}\n        onChange={(step) => handleHsbChange(Number(step), 's')}\n      />\n      <ColorSteppers\n        max={100}\n        min={0}\n        value={Number(hsbValue.toHsb().b) * 100}\n        prefixCls={prefixCls}\n        className={colorHsbInputPrefixCls}\n        formatter={(step) => `${getRoundNumber(step || 0)}%`}\n        onChange={(step) => handleHsbChange(Number(step), 'b')}\n      />\n    </div>\n  );\n};\n\nexport default ColorHsbInput;\n"],"mappings":";;;;;AAcA,IAAM,iBAAyC,EAC7C,WACA,OACA,eACI;CACJ,MAAM,yBAAyB,GAAG,UAAU;CAC5C,MAAM,CAAC,UAAU,eAAe,SAC9B,cAAc,SAAS,GAAG,CAC3B;AAED,iBAAgB;AACd,MAAI,MACF,aAAY,MAAM;IAEnB,CAAC,MAAM,CAAC;CAEX,MAAM,mBAAmB,MAAc,SAAoB;EACzD,MAAM,MAAM,SAAS,OAAO;AAC5B,MAAI,QAAQ,SAAS,MAAM,QAAQ,QAAQ,KAAK;EAChD,MAAM,WAAW,cAAc,IAAI;AACnC,MAAI,CAAC,MACH,aAAY,SAAS;AAEvB,aAAW,SAAS;;AAGtB,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,uBAAuB;YADvC;GAGE,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE;IACtB;IACX,WAAW;IACX,YAAY,SAAS,eAAe,QAAQ,EAAE,CAAC,UAAU;IACzD,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE,GAAG;IACzB;IACX,WAAW;IACX,YAAY,SAAS,GAAG,eAAe,QAAQ,EAAE,CAAC;IAClD,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE,GAAG;IACzB;IACX,WAAW;IACX,YAAY,SAAS,GAAG,eAAe,QAAQ,EAAE,CAAC;IAClD,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACE"}

package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.js

@@ -5,7 +5,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/ColorPicker/ComplexColorPicker/ColorRgbInput.tsx
 var ColorRgbInput = ({ prefixCls, value, onChange }) => {
 	const colorRgbInputPrefixCls = `${prefixCls}-rgb-input`;
-	const [rgbValue, setRgbValue] = useState(generateColor(value || "#000"));
+	const [rgbValue, setRgbValue] = useState(generateColor(value || ""));
 	useEffect(() => {
 		if (value) setRgbValue(value);
 	}, [value]);

package/dist/ColorPicker/ComplexColorPicker/ColorRgbInput.js.map

@@ -1 +1 @@
-{"version":3,"file":"ColorRgbInput.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/ColorRgbInput.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport type { RGB } from '@rc-component/color-picker';\n\nimport type { AggregationColor } from '../color';\nimport { generateColor } from '../util';\nimport ColorSteppers from './ColorSteppers';\n\ninterface ColorRgbInputProps {\n  prefixCls: string;\n  value?: AggregationColor;\n  onChange?: (value: AggregationColor) => void;\n}\n\nconst ColorRgbInput: FC<ColorRgbInputProps> = ({\n  prefixCls,\n  value,\n  onChange,\n}) => {\n  const colorRgbInputPrefixCls = `${prefixCls}-rgb-input`;\n  const [rgbValue, setRgbValue] = useState<AggregationColor>(\n    generateColor(value || '#000'),\n  );\n\n  useEffect(() => {\n    if (value) {\n      setRgbValue(value);\n    }\n  }, [value]);\n\n  const handleRgbChange = (step: number | null, type: keyof RGB) => {\n    const rgb = rgbValue.toRgb();\n    rgb[type] = step || 0;\n    const genColor = generateColor(rgb);\n    if (!value) {\n      setRgbValue(genColor);\n    }\n    onChange?.(genColor);\n  };\n\n  return (\n    <div\n      className={`${colorRgbInputPrefixCls} tw-flex tw-items-center tw-gap-1`}\n    >\n      <ColorSteppers\n        max={255}\n        min={0}\n        value={Number(rgbValue.toRgb().r)}\n        prefixCls={prefixCls}\n        className={colorRgbInputPrefixCls}\n        onChange={(step) => handleRgbChange(Number(step), 'r')}\n      />\n      <ColorSteppers\n        max={255}\n        min={0}\n        value={Number(rgbValue.toRgb().g)}\n        prefixCls={prefixCls}\n        className={colorRgbInputPrefixCls}\n        onChange={(step) => handleRgbChange(Number(step), 'g')}\n      />\n      <ColorSteppers\n        max={255}\n        min={0}\n        value={Number(rgbValue.toRgb().b)}\n        prefixCls={prefixCls}\n        className={colorRgbInputPrefixCls}\n        onChange={(step) => handleRgbChange(Number(step), 'b')}\n      />\n    </div>\n  );\n};\n\nexport default ColorRgbInput;\n"],"mappings":";;;;;AAcA,IAAM,iBAAyC,EAC7C,WACA,OACA,eACI;CACJ,MAAM,yBAAyB,GAAG,UAAU;CAC5C,MAAM,CAAC,UAAU,eAAe,SAC9B,cAAc,SAAS,OAAO,CAC/B;AAED,iBAAgB;AACd,MAAI,MACF,aAAY,MAAM;IAEnB,CAAC,MAAM,CAAC;CAEX,MAAM,mBAAmB,MAAqB,SAAoB;EAChE,MAAM,MAAM,SAAS,OAAO;AAC5B,MAAI,QAAQ,QAAQ;EACpB,MAAM,WAAW,cAAc,IAAI;AACnC,MAAI,CAAC,MACH,aAAY,SAAS;AAEvB,aAAW,SAAS;;AAGtB,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,uBAAuB;YADvC;GAGE,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE;IACtB;IACX,WAAW;IACX,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE;IACtB;IACX,WAAW;IACX,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE;IACtB;IACX,WAAW;IACX,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACE"}
+{"version":3,"file":"ColorRgbInput.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/ColorRgbInput.tsx"],"sourcesContent":["import type { FC } from 'react';\nimport React, { useEffect, useState } from 'react';\nimport type { RGB } from '@rc-component/color-picker';\n\nimport type { AggregationColor } from '../color';\nimport { generateColor } from '../util';\nimport ColorSteppers from './ColorSteppers';\n\ninterface ColorRgbInputProps {\n  prefixCls: string;\n  value?: AggregationColor;\n  onChange?: (value: AggregationColor) => void;\n}\n\nconst ColorRgbInput: FC<ColorRgbInputProps> = ({\n  prefixCls,\n  value,\n  onChange,\n}) => {\n  const colorRgbInputPrefixCls = `${prefixCls}-rgb-input`;\n  const [rgbValue, setRgbValue] = useState<AggregationColor>(\n    generateColor(value || ''),\n  );\n\n  useEffect(() => {\n    if (value) {\n      setRgbValue(value);\n    }\n  }, [value]);\n\n  const handleRgbChange = (step: number | null, type: keyof RGB) => {\n    const rgb = rgbValue.toRgb();\n    rgb[type] = step || 0;\n    const genColor = generateColor(rgb);\n    if (!value) {\n      setRgbValue(genColor);\n    }\n    onChange?.(genColor);\n  };\n\n  return (\n    <div\n      className={`${colorRgbInputPrefixCls} tw-flex tw-items-center tw-gap-1`}\n    >\n      <ColorSteppers\n        max={255}\n        min={0}\n        value={Number(rgbValue.toRgb().r)}\n        prefixCls={prefixCls}\n        className={colorRgbInputPrefixCls}\n        onChange={(step) => handleRgbChange(Number(step), 'r')}\n      />\n      <ColorSteppers\n        max={255}\n        min={0}\n        value={Number(rgbValue.toRgb().g)}\n        prefixCls={prefixCls}\n        className={colorRgbInputPrefixCls}\n        onChange={(step) => handleRgbChange(Number(step), 'g')}\n      />\n      <ColorSteppers\n        max={255}\n        min={0}\n        value={Number(rgbValue.toRgb().b)}\n        prefixCls={prefixCls}\n        className={colorRgbInputPrefixCls}\n        onChange={(step) => handleRgbChange(Number(step), 'b')}\n      />\n    </div>\n  );\n};\n\nexport default ColorRgbInput;\n"],"mappings":";;;;;AAcA,IAAM,iBAAyC,EAC7C,WACA,OACA,eACI;CACJ,MAAM,yBAAyB,GAAG,UAAU;CAC5C,MAAM,CAAC,UAAU,eAAe,SAC9B,cAAc,SAAS,GAAG,CAC3B;AAED,iBAAgB;AACd,MAAI,MACF,aAAY,MAAM;IAEnB,CAAC,MAAM,CAAC;CAEX,MAAM,mBAAmB,MAAqB,SAAoB;EAChE,MAAM,MAAM,SAAS,OAAO;AAC5B,MAAI,QAAQ,QAAQ;EACpB,MAAM,WAAW,cAAc,IAAI;AACnC,MAAI,CAAC,MACH,aAAY,SAAS;AAEvB,aAAW,SAAS;;AAGtB,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,uBAAuB;YADvC;GAGE,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE;IACtB;IACX,WAAW;IACX,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE;IACtB;IACX,WAAW;IACX,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACF,oBAAC,eAAD;IACE,KAAK;IACL,KAAK;IACL,OAAO,OAAO,SAAS,OAAO,CAAC,EAAE;IACtB;IACX,WAAW;IACX,WAAW,SAAS,gBAAgB,OAAO,KAAK,EAAE,IAAI;IACtD,CAAA;GACE"}

package/dist/ColorPicker/ComplexColorPicker/index.js

@@ -58,9 +58,9 @@ function ColorPicker(props) {
 			});
 		},
 		children: /* @__PURE__ */ jsx("div", {
-			className: cn("tw-inline-flex tw-border tw-border-solid tw-border-[var(--alias-colors-border-strong)] tw-bg-[var(--background-default)] tw-p-[3px]", size && triggerSizeClasses[size]),
+			className: cn("tw-inline-flex tw-border tw-border-solid tw-border-[var(--border-neutral-strong)] tw-bg-[var(--background-default)] tw-p-[3px]", size && triggerSizeClasses[size]),
 			children: /* @__PURE__ */ jsx("div", {
-				className: "ald-color-picker-complex-trigger-inner tw-border tw-border-solid tw-border-[var(--alias-colors-border-subtle)]",
+				className: "ald-color-picker-complex-trigger-inner tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]",
 				style: { backgroundColor: mergedColor.toCssString() }
 			})
 		})

package/dist/ColorPicker/ComplexColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { ColorPickerProps } from '../interface';\nimport RcColorPicker from '@rc-component/color-picker';\nimport { AggregationColor } from '../color';\nimport ColorInput from './ColorInput';\nimport useColor from '../hooks/useColor';\nimport { genAlphaColor, generateColor, getColorAlpha } from '../util';\nimport Dropdown from '../../Dropdown';\nimport { cn } from '../../lib/utils';\nimport '../color-picker.css';\n\nconst prefixCls = 'ald-color-picker-complex';\n\nconst triggerSizeClasses = {\n  small:\n    'tw-w-7 tw-h-7 tw-rounded [&>.ald-color-picker-complex-trigger-inner]:tw-w-5 [&>.ald-color-picker-complex-trigger-inner]:tw-h-5 [&>.ald-color-picker-complex-trigger-inner]:tw-rounded-sm',\n  middle:\n    'tw-w-8 tw-h-8 tw-rounded-md [&>.ald-color-picker-complex-trigger-inner]:tw-w-6 [&>.ald-color-picker-complex-trigger-inner]:tw-h-6 [&>.ald-color-picker-complex-trigger-inner]:tw-rounded-[3px]',\n  large:\n    'tw-w-9 tw-h-9 tw-rounded-lg [&>.ald-color-picker-complex-trigger-inner]:tw-w-7 [&>.ald-color-picker-complex-trigger-inner]:tw-h-7 [&>.ald-color-picker-complex-trigger-inner]:tw-rounded',\n};\n\nexport default function ColorPicker(props: ColorPickerProps) {\n  const {\n    value,\n    onChange,\n    defaultValue,\n    disabledAlpha,\n    onChangeComplete,\n    trigger,\n    open,\n    onOpenChange,\n    size = 'middle',\n  } = props;\n  const [mergedColor, setColor] = useColor(defaultValue, value);\n  const isAlphaColor = useMemo(\n    () => getColorAlpha(mergedColor) < 100,\n    [mergedColor],\n  );\n  const onInternalChangeComplete: ColorPickerProps['onChangeComplete'] = (\n    color,\n  ) => {\n    if (onChangeComplete) {\n      let changeColor = generateColor(color);\n\n      if (disabledAlpha && isAlphaColor) {\n        changeColor = genAlphaColor(color);\n      }\n      onChangeComplete(changeColor);\n    }\n  };\n  const onInternalChange: ColorPickerProps['onChange'] = (data) => {\n    let color: AggregationColor = generateColor(data as AggregationColor);\n\n    if (disabledAlpha && isAlphaColor) {\n      color = genAlphaColor(color);\n    }\n\n    setColor(color);\n\n    if (onChange) {\n      onChange(color, color.toCssString());\n    }\n\n    onInternalChangeComplete(color);\n  };\n\n  return (\n    <Dropdown\n      open={open}\n      trigger={trigger}\n      onOpenChange={onOpenChange}\n      overlayClassName={`${prefixCls}-overlay-wrapper`}\n      dropdownRender={() => {\n        return (\n          <div className={`${prefixCls}-wrapper`}>\n            <RcColorPicker\n              prefixCls={prefixCls}\n              value={mergedColor?.toHsb()}\n              onChange={(color) => {\n                const nextColor = generateColor(color);\n                onInternalChange(nextColor, nextColor.toCssString());\n              }}\n            ></RcColorPicker>\n            <ColorInput\n              prefixCls={prefixCls}\n              value={mergedColor}\n              onChange={(color) => {\n                onInternalChange(color, color.toCssString());\n              }}\n              disabledAlpha={disabledAlpha}\n            />\n          </div>\n        );\n      }}\n    >\n      <div\n        className={cn(\n          'tw-inline-flex tw-border tw-border-solid tw-border-[var(--alias-colors-border-strong)] tw-bg-[var(--background-default)] tw-p-[3px]',\n          size && triggerSizeClasses[size],\n        )}\n      >\n        <div\n          className=\"ald-color-picker-complex-trigger-inner tw-border tw-border-solid tw-border-[var(--alias-colors-border-subtle)]\"\n          style={{ backgroundColor: mergedColor.toCssString() }}\n        ></div>\n      </div>\n    </Dropdown>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,YAAY;AAElB,IAAM,qBAAqB;CACzB,OACE;CACF,QACE;CACF,OACE;CACH;AAED,SAAwB,YAAY,OAAyB;CAC3D,MAAM,EACJ,OACA,UACA,cACA,eACA,kBACA,SACA,MACA,cACA,OAAO,aACL;CACJ,MAAM,CAAC,aAAa,YAAY,aAAS,cAAc,MAAM;CAC7D,MAAM,eAAe,cACb,cAAc,YAAY,GAAG,KACnC,CAAC,YAAY,CACd;CACD,MAAM,4BACJ,UACG;AACH,MAAI,kBAAkB;GACpB,IAAI,cAAc,cAAc,MAAM;AAEtC,OAAI,iBAAiB,aACnB,eAAc,cAAc,MAAM;AAEpC,oBAAiB,YAAY;;;CAGjC,MAAM,oBAAkD,SAAS;EAC/D,IAAI,QAA0B,cAAc,KAAyB;AAErE,MAAI,iBAAiB,aACnB,SAAQ,cAAc,MAAM;AAG9B,WAAS,MAAM;AAEf,MAAI,SACF,UAAS,OAAO,MAAM,aAAa,CAAC;AAGtC,2BAAyB,MAAM;;AAGjC,QACE,oBAAC,UAAD;EACQ;EACG;EACK;EACd,kBAAkB,GAAG,UAAU;EAC/B,sBAAsB;AACpB,UACE,qBAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAA7B,CACE,oBAAC,eAAD;KACa;KACX,OAAO,aAAa,OAAO;KAC3B,WAAW,UAAU;MACnB,MAAM,YAAY,cAAc,MAAM;AACtC,uBAAiB,WAAW,UAAU,aAAa,CAAC;;KAEvC,CAAA,EACjB,oBAAC,YAAD;KACa;KACX,OAAO;KACP,WAAW,UAAU;AACnB,uBAAiB,OAAO,MAAM,aAAa,CAAC;;KAE/B;KACf,CAAA,CACE;;;YAIV,oBAAC,OAAD;GACE,WAAW,GACT,uIACA,QAAQ,mBAAmB,MAC5B;aAED,oBAAC,OAAD;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,YAAY,aAAa,EAAE;IAChD,CAAA;GACH,CAAA;EACG,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/ColorPicker/ComplexColorPicker/index.tsx"],"sourcesContent":["import React, { useMemo } from 'react';\nimport { ColorPickerProps } from '../interface';\nimport RcColorPicker from '@rc-component/color-picker';\nimport { AggregationColor } from '../color';\nimport ColorInput from './ColorInput';\nimport useColor from '../hooks/useColor';\nimport { genAlphaColor, generateColor, getColorAlpha } from '../util';\nimport Dropdown from '../../Dropdown';\nimport { cn } from '../../lib/utils';\nimport '../color-picker.css';\n\nconst prefixCls = 'ald-color-picker-complex';\n\nconst triggerSizeClasses = {\n  small:\n    'tw-w-7 tw-h-7 tw-rounded [&>.ald-color-picker-complex-trigger-inner]:tw-w-5 [&>.ald-color-picker-complex-trigger-inner]:tw-h-5 [&>.ald-color-picker-complex-trigger-inner]:tw-rounded-sm',\n  middle:\n    'tw-w-8 tw-h-8 tw-rounded-md [&>.ald-color-picker-complex-trigger-inner]:tw-w-6 [&>.ald-color-picker-complex-trigger-inner]:tw-h-6 [&>.ald-color-picker-complex-trigger-inner]:tw-rounded-[3px]',\n  large:\n    'tw-w-9 tw-h-9 tw-rounded-lg [&>.ald-color-picker-complex-trigger-inner]:tw-w-7 [&>.ald-color-picker-complex-trigger-inner]:tw-h-7 [&>.ald-color-picker-complex-trigger-inner]:tw-rounded',\n};\n\nexport default function ColorPicker(props: ColorPickerProps) {\n  const {\n    value,\n    onChange,\n    defaultValue,\n    disabledAlpha,\n    onChangeComplete,\n    trigger,\n    open,\n    onOpenChange,\n    size = 'middle',\n  } = props;\n  const [mergedColor, setColor] = useColor(defaultValue, value);\n  const isAlphaColor = useMemo(\n    () => getColorAlpha(mergedColor) < 100,\n    [mergedColor],\n  );\n  const onInternalChangeComplete: ColorPickerProps['onChangeComplete'] = (\n    color,\n  ) => {\n    if (onChangeComplete) {\n      let changeColor = generateColor(color);\n\n      if (disabledAlpha && isAlphaColor) {\n        changeColor = genAlphaColor(color);\n      }\n      onChangeComplete(changeColor);\n    }\n  };\n  const onInternalChange: ColorPickerProps['onChange'] = (data) => {\n    let color: AggregationColor = generateColor(data as AggregationColor);\n\n    if (disabledAlpha && isAlphaColor) {\n      color = genAlphaColor(color);\n    }\n\n    setColor(color);\n\n    if (onChange) {\n      onChange(color, color.toCssString());\n    }\n\n    onInternalChangeComplete(color);\n  };\n\n  return (\n    <Dropdown\n      open={open}\n      trigger={trigger}\n      onOpenChange={onOpenChange}\n      overlayClassName={`${prefixCls}-overlay-wrapper`}\n      dropdownRender={() => {\n        return (\n          <div className={`${prefixCls}-wrapper`}>\n            <RcColorPicker\n              prefixCls={prefixCls}\n              value={mergedColor?.toHsb()}\n              onChange={(color) => {\n                const nextColor = generateColor(color);\n                onInternalChange(nextColor, nextColor.toCssString());\n              }}\n            ></RcColorPicker>\n            <ColorInput\n              prefixCls={prefixCls}\n              value={mergedColor}\n              onChange={(color) => {\n                onInternalChange(color, color.toCssString());\n              }}\n              disabledAlpha={disabledAlpha}\n            />\n          </div>\n        );\n      }}\n    >\n      <div\n        className={cn(\n          'tw-inline-flex tw-border tw-border-solid tw-border-[var(--border-neutral-strong)] tw-bg-[var(--background-default)] tw-p-[3px]',\n          size && triggerSizeClasses[size],\n        )}\n      >\n        <div\n          className=\"ald-color-picker-complex-trigger-inner tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)]\"\n          style={{ backgroundColor: mergedColor.toCssString() }}\n        ></div>\n      </div>\n    </Dropdown>\n  );\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,YAAY;AAElB,IAAM,qBAAqB;CACzB,OACE;CACF,QACE;CACF,OACE;CACH;AAED,SAAwB,YAAY,OAAyB;CAC3D,MAAM,EACJ,OACA,UACA,cACA,eACA,kBACA,SACA,MACA,cACA,OAAO,aACL;CACJ,MAAM,CAAC,aAAa,YAAY,aAAS,cAAc,MAAM;CAC7D,MAAM,eAAe,cACb,cAAc,YAAY,GAAG,KACnC,CAAC,YAAY,CACd;CACD,MAAM,4BACJ,UACG;AACH,MAAI,kBAAkB;GACpB,IAAI,cAAc,cAAc,MAAM;AAEtC,OAAI,iBAAiB,aACnB,eAAc,cAAc,MAAM;AAEpC,oBAAiB,YAAY;;;CAGjC,MAAM,oBAAkD,SAAS;EAC/D,IAAI,QAA0B,cAAc,KAAyB;AAErE,MAAI,iBAAiB,aACnB,SAAQ,cAAc,MAAM;AAG9B,WAAS,MAAM;AAEf,MAAI,SACF,UAAS,OAAO,MAAM,aAAa,CAAC;AAGtC,2BAAyB,MAAM;;AAGjC,QACE,oBAAC,UAAD;EACQ;EACG;EACK;EACd,kBAAkB,GAAG,UAAU;EAC/B,sBAAsB;AACpB,UACE,qBAAC,OAAD;IAAK,WAAW,GAAG,UAAU;cAA7B,CACE,oBAAC,eAAD;KACa;KACX,OAAO,aAAa,OAAO;KAC3B,WAAW,UAAU;MACnB,MAAM,YAAY,cAAc,MAAM;AACtC,uBAAiB,WAAW,UAAU,aAAa,CAAC;;KAEvC,CAAA,EACjB,oBAAC,YAAD;KACa;KACX,OAAO;KACP,WAAW,UAAU;AACnB,uBAAiB,OAAO,MAAM,aAAa,CAAC;;KAE/B;KACf,CAAA,CACE;;;YAIV,oBAAC,OAAD;GACE,WAAW,GACT,kIACA,QAAQ,mBAAmB,MAC5B;aAED,oBAAC,OAAD;IACE,WAAU;IACV,OAAO,EAAE,iBAAiB,YAAY,aAAa,EAAE;IAChD,CAAA;GACH,CAAA;EACG,CAAA"}

package/dist/ColorPicker/index.js

@@ -78,7 +78,7 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 								if (color === value) return;
 								onColorSelect(color);
 							},
-							style: { borderColor: isSelected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--alias-colors-border-subtle)" : color },
+							style: { borderColor: isSelected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--border-neutral-subtle)" : color },
 							children: /* @__PURE__ */ jsx("div", {
 								className: cn("tw-h-full tw-w-full", { "tw-m-px tw-h-[17px] tw-w-[17px]": isSelected }),
 								style: { backgroundColor: color }
@@ -99,7 +99,7 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 								if (color === value) return;
 								onColorSelect(color);
 							},
-							style: { borderColor: isSelected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--alias-colors-border-subtle)" : color },
+							style: { borderColor: isSelected ? "var(--border-neutral-strong)" : specialColors.includes(color) ? "var(--border-neutral-subtle)" : color },
 							children: /* @__PURE__ */ jsx("div", {
 								className: cn("tw-h-full tw-w-full", { "tw-m-px tw-h-[17px] tw-w-[17px]": isSelected }),
 								style: { backgroundColor: color }
@@ -123,12 +123,12 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 				return overlay;
 			},
 			children: /* @__PURE__ */ jsxs("div", {
-				className: cn("ald-color-picker-wrapper", "tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out", {
-					"tw-border-[var(--interaction-border-normal)]": open && bordered !== false,
-					"tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--global-cool-gray-alpha-50)]": disabled,
-					"tw-border-transparent": bordered === false,
-					"hover:tw-border-[var(--interaction-border-normal)]": !disabled && bordered !== false,
-					"hover:tw-border-transparent": bordered === false
+				className: cn("ald-color-picker-wrapper", "tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out", {
+					"tw-border-[var(--border-brand-subtle)]": open && bordered !== false,
+					"tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]": disabled,
+					"tw-border-[var(--action-ghost-normal)]": bordered === false,
+					"hover:tw-border-[var(--border-brand-subtle)]": !disabled && bordered !== false,
+					"hover:tw-border-[var(--action-ghost-normal)]": bordered === false
 				}),
 				onClick: (e) => {
 					if (disabled) e.stopPropagation();
@@ -140,17 +140,17 @@ function ColorPicker({ className, value, icon, onChange, defaultColor = colors[0
 						children: icon
 					}), /* @__PURE__ */ jsx("div", {
 						className: "tw-absolute tw-bottom-[3px] tw-left-1/2 tw-h-0.5 tw-w-2.5 -tw-translate-x-1/2",
-						style: { backgroundColor: value ?? "#4B5563" }
+						style: { backgroundColor: value ?? "var(--content-secondary)" }
 					})]
 				}) : /* @__PURE__ */ jsxs("div", {
 					className: "tw-relative -tw-top-px tw-ml-0.5 tw-mr-[3px]",
 					children: ["A", /* @__PURE__ */ jsx("div", {
 						className: "tw-absolute tw-bottom-[3px] tw-h-0.5 tw-w-2.5",
-						style: { backgroundColor: value ?? "#4B5563" }
+						style: { backgroundColor: value ?? "var(--content-secondary)" }
 					})]
 				}), /* @__PURE__ */ jsx(Memo, {
 					size: 14,
-					color: "var(--alias-colors-icon-subtle)"
+					color: "var(--content-secondary)"
 				})]
 			})
 		})

package/dist/ColorPicker/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../src/ColorPicker/index.tsx"],"sourcesContent":["import { cn as cls } from '../lib/utils';\nimport React, { useContext, useEffect, useRef, useState } from 'react';\nimport Dropdown from '../Dropdown';\nimport { FoldDownFill } from '../Icon';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { colors as defaultColors, specialColors } from './constant';\nimport type { ColorPickerProps } from './interface';\nimport InnerColorPicker from './ComplexColorPicker';\nimport './color-picker.css';\n\nexport interface IColorPickerProps {\n  className?: string;\n  value?: string;\n  defaultColor?: string;\n  localStorageKey?: string;\n  onChange?: (color: string) => void;\n  icon?: React.ReactNode;\n  bordered?: boolean;\n  disabled?: boolean;\n  mode?: 'simple' | 'complex';\n  complexModeProps?: ColorPickerProps;\n}\n\nfunction getLocalRecentColors(localStorageKey: string) {\n  if (!window.localStorage) {\n    return [];\n  }\n  const colorStr = localStorage.getItem(localStorageKey);\n  if (!colorStr) {\n    return [];\n  }\n\n  return colorStr.split(',');\n}\n\nfunction setLocalRecentColors(localStorageKey: string, colors: string[]) {\n  if (!window.localStorage) {\n    return;\n  }\n  localStorage.setItem(localStorageKey, colors.join(','));\n}\n\nconst MAX_RECENT_COLORS = 10;\nexport default function ColorPicker({\n  className,\n  value,\n  icon,\n  onChange,\n  defaultColor = defaultColors[0],\n  localStorageKey = 'ald_recent_colors',\n  disabled = false,\n  mode = 'simple',\n  complexModeProps,\n  bordered = true,\n}: IColorPickerProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const [open, setOpen] = useState(false);\n  const [recentColors, setRecentColors] = useState<string[]>([]);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setRecentColors(getLocalRecentColors(localStorageKey));\n  }, [localStorageKey]);\n\n  const onColorSelect = (color: string) => {\n    const newRecentColors = [color, ...recentColors.filter((c) => c !== color)];\n    if (newRecentColors.length > MAX_RECENT_COLORS) {\n      newRecentColors.pop();\n    }\n\n    setRecentColors(newRecentColors);\n    setLocalRecentColors(localStorageKey, newRecentColors);\n    onChange?.(color);\n    setOpen(false);\n  };\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (wrapRef.current?.contains(e.target as Node)) {\n        return setOpen(!open);\n      }\n      if (!overlayRef.current?.contains(e.target as Node)) {\n        return setOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, [open]);\n\n  const overlay = (\n    <div\n      className=\"tw-relative tw-box-border tw-w-[253px] tw-rounded-sm tw-bg-[var(--background-default)] tw-p-[8px_7px]\"\n      ref={overlayRef}\n    >\n      <div className=\"tw-flex tw-items-center tw-text-xs\">\n        <div\n          className={cls(\n            'tw-mr-2 tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]',\n            {\n              'tw-border-[var(--border-neutral-strong)]':\n                defaultColor === value,\n            },\n          )}\n          onClick={() => {\n            if (disabled) return;\n            if (defaultColor === value) return;\n            onColorSelect(defaultColor);\n          }}\n        >\n          <div\n            className=\"tw-size-full\"\n            style={{ backgroundColor: defaultColor }}\n          />\n        </div>\n        {t.ColorPicker.default}\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.standardColor}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-evenly tw-gap-[4px_2px] tw-text-[0px]\">\n          {defaultColors.map((color) => {\n            const isSelected = color === value;\n            return (\n              <div\n                key={color}\n                className={cls(\n                  'tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]',\n                  {\n                    'tw-border-[var(--border-neutral-strong)]': isSelected,\n                  },\n                )}\n                onClick={() => {\n                  if (color === value) return;\n                  onColorSelect(color);\n                }}\n                style={{\n                  borderColor: isSelected\n                    ? 'var(--border-neutral-strong)'\n                    : specialColors.includes(color)\n                    ? 'var(--alias-colors-border-subtle)'\n                    : color,\n                }}\n              >\n                <div\n                  className={cls('tw-h-full tw-w-full', {\n                    'tw-m-px tw-h-[17px] tw-w-[17px]': isSelected,\n                  })}\n                  style={{ backgroundColor: color }}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.recentlyUsed}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]\">\n          {recentColors.map((color) => {\n            const isSelected = color === value;\n            return (\n              <div\n                key={color}\n                className={cls(\n                  'tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]',\n                  {\n                    'tw-border-[var(--border-neutral-strong)]': isSelected,\n                  },\n                )}\n                onClick={() => {\n                  if (color === value) return;\n                  onColorSelect(color);\n                }}\n                style={{\n                  borderColor: isSelected\n                    ? 'var(--border-neutral-strong)'\n                    : specialColors.includes(color)\n                    ? 'var(--alias-colors-border-subtle)'\n                    : color,\n                }}\n              >\n                <div\n                  className={cls('tw-h-full tw-w-full', {\n                    'tw-m-px tw-h-[17px] tw-w-[17px]': isSelected,\n                  })}\n                  style={{ backgroundColor: color }}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n  if (mode === 'simple') {\n    return (\n      <div\n        className={cls(className, 'tw-relative tw-w-14', {\n          'tw-cursor-default [&_.ald-color-picker-wrapper]:tw-cursor-default':\n            disabled,\n        })}\n        ref={wrapRef}\n      >\n        <Dropdown\n          trigger={'click'}\n          open={open}\n          disabled={disabled}\n          placement={'bottom-start'}\n          overlayClassName={'ald-color-picker-overlay-wrapper'}\n          dropdownRender={() => {\n            return overlay;\n          }}\n        >\n          <div\n            className={cls(\n              'ald-color-picker-wrapper',\n              'tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--interaction-border-neutral-normal)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out',\n              {\n                'tw-border-[var(--interaction-border-normal)]':\n                  open && bordered !== false,\n                'tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--global-cool-gray-alpha-50)]':\n                  disabled,\n                'tw-border-transparent': bordered === false,\n                'hover:tw-border-[var(--interaction-border-normal)]':\n                  !disabled && bordered !== false,\n                'hover:tw-border-transparent': bordered === false,\n              },\n            )}\n            onClick={(e) => {\n              if (disabled) {\n                e.stopPropagation();\n              }\n            }}\n          >\n            {icon ? (\n              <div className=\"tw-relative -tw-top-px\">\n                <div className=\"tw-mb-px\">{icon}</div>\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-left-1/2 tw-h-0.5 tw-w-2.5 -tw-translate-x-1/2\"\n                  style={{ backgroundColor: value ?? '#4B5563' }}\n                />\n              </div>\n            ) : (\n              <div className=\"tw-relative -tw-top-px tw-ml-0.5 tw-mr-[3px]\">\n                A\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-h-0.5 tw-w-2.5\"\n                  style={{ backgroundColor: value ?? '#4B5563' }}\n                />\n              </div>\n            )}\n            <FoldDownFill size={14} color={'var(--alias-colors-icon-subtle)'} />\n          </div>\n        </Dropdown>\n      </div>\n    );\n  }\n  if (mode === 'complex') {\n    return <InnerColorPicker {...complexModeProps} />;\n  }\n\n  return null;\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../src/ColorPicker/index.tsx"],"sourcesContent":["import { cn as cls } from '../lib/utils';\nimport React, { useContext, useEffect, useRef, useState } from 'react';\nimport Dropdown from '../Dropdown';\nimport { FoldDownFill } from '../Icon';\nimport { LocaleContext, getTranslator } from '../locale/default';\nimport { colors as defaultColors, specialColors } from './constant';\nimport type { ColorPickerProps } from './interface';\nimport InnerColorPicker from './ComplexColorPicker';\nimport './color-picker.css';\n\nexport interface IColorPickerProps {\n  className?: string;\n  value?: string;\n  defaultColor?: string;\n  localStorageKey?: string;\n  onChange?: (color: string) => void;\n  icon?: React.ReactNode;\n  bordered?: boolean;\n  disabled?: boolean;\n  mode?: 'simple' | 'complex';\n  complexModeProps?: ColorPickerProps;\n}\n\nfunction getLocalRecentColors(localStorageKey: string) {\n  if (!window.localStorage) {\n    return [];\n  }\n  const colorStr = localStorage.getItem(localStorageKey);\n  if (!colorStr) {\n    return [];\n  }\n\n  return colorStr.split(',');\n}\n\nfunction setLocalRecentColors(localStorageKey: string, colors: string[]) {\n  if (!window.localStorage) {\n    return;\n  }\n  localStorage.setItem(localStorageKey, colors.join(','));\n}\n\nconst MAX_RECENT_COLORS = 10;\nexport default function ColorPicker({\n  className,\n  value,\n  icon,\n  onChange,\n  defaultColor = defaultColors[0],\n  localStorageKey = 'ald_recent_colors',\n  disabled = false,\n  mode = 'simple',\n  complexModeProps,\n  bordered = true,\n}: IColorPickerProps) {\n  const { locale } = useContext(LocaleContext);\n  const t = getTranslator(locale);\n\n  const [open, setOpen] = useState(false);\n  const [recentColors, setRecentColors] = useState<string[]>([]);\n  const overlayRef = useRef<HTMLDivElement>(null);\n  const wrapRef = useRef<HTMLDivElement>(null);\n\n  useEffect(() => {\n    setRecentColors(getLocalRecentColors(localStorageKey));\n  }, [localStorageKey]);\n\n  const onColorSelect = (color: string) => {\n    const newRecentColors = [color, ...recentColors.filter((c) => c !== color)];\n    if (newRecentColors.length > MAX_RECENT_COLORS) {\n      newRecentColors.pop();\n    }\n\n    setRecentColors(newRecentColors);\n    setLocalRecentColors(localStorageKey, newRecentColors);\n    onChange?.(color);\n    setOpen(false);\n  };\n\n  useEffect(() => {\n    const handleClick = (e: MouseEvent) => {\n      if (wrapRef.current?.contains(e.target as Node)) {\n        return setOpen(!open);\n      }\n      if (!overlayRef.current?.contains(e.target as Node)) {\n        return setOpen(false);\n      }\n    };\n\n    document.addEventListener('click', handleClick);\n\n    return () => {\n      document.removeEventListener('click', handleClick);\n    };\n  }, [open]);\n\n  const overlay = (\n    <div\n      className=\"tw-relative tw-box-border tw-w-[253px] tw-rounded-sm tw-bg-[var(--background-default)] tw-p-[8px_7px]\"\n      ref={overlayRef}\n    >\n      <div className=\"tw-flex tw-items-center tw-text-xs\">\n        <div\n          className={cls(\n            'tw-mr-2 tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]',\n            {\n              'tw-border-[var(--border-neutral-strong)]':\n                defaultColor === value,\n            },\n          )}\n          onClick={() => {\n            if (disabled) return;\n            if (defaultColor === value) return;\n            onColorSelect(defaultColor);\n          }}\n        >\n          <div\n            className=\"tw-size-full\"\n            style={{ backgroundColor: defaultColor }}\n          />\n        </div>\n        {t.ColorPicker.default}\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.standardColor}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-evenly tw-gap-[4px_2px] tw-text-[0px]\">\n          {defaultColors.map((color) => {\n            const isSelected = color === value;\n            return (\n              <div\n                key={color}\n                className={cls(\n                  'tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]',\n                  {\n                    'tw-border-[var(--border-neutral-strong)]': isSelected,\n                  },\n                )}\n                onClick={() => {\n                  if (color === value) return;\n                  onColorSelect(color);\n                }}\n                style={{\n                  borderColor: isSelected\n                    ? 'var(--border-neutral-strong)'\n                    : specialColors.includes(color)\n                    ? 'var(--border-neutral-subtle)'\n                    : color,\n                }}\n              >\n                <div\n                  className={cls('tw-h-full tw-w-full', {\n                    'tw-m-px tw-h-[17px] tw-w-[17px]': isSelected,\n                  })}\n                  style={{ backgroundColor: color }}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n      <div className=\"tw-mt-1.5 tw-text-xs\">\n        <p>{t.ColorPicker.recentlyUsed}</p>\n        <div className=\"tw-mt-0.5 tw-flex tw-flex-wrap tw-justify-start tw-gap-[4px_2px] tw-text-[0px]\">\n          {recentColors.map((color) => {\n            const isSelected = color === value;\n            return (\n              <div\n                key={color}\n                className={cls(\n                  'tw-box-border tw-h-[21px] tw-w-[21px] tw-cursor-pointer tw-border tw-border-solid tw-border-[var(--background-default)]',\n                  {\n                    'tw-border-[var(--border-neutral-strong)]': isSelected,\n                  },\n                )}\n                onClick={() => {\n                  if (color === value) return;\n                  onColorSelect(color);\n                }}\n                style={{\n                  borderColor: isSelected\n                    ? 'var(--border-neutral-strong)'\n                    : specialColors.includes(color)\n                    ? 'var(--border-neutral-subtle)'\n                    : color,\n                }}\n              >\n                <div\n                  className={cls('tw-h-full tw-w-full', {\n                    'tw-m-px tw-h-[17px] tw-w-[17px]': isSelected,\n                  })}\n                  style={{ backgroundColor: color }}\n                />\n              </div>\n            );\n          })}\n        </div>\n      </div>\n    </div>\n  );\n  if (mode === 'simple') {\n    return (\n      <div\n        className={cls(className, 'tw-relative tw-w-14', {\n          'tw-cursor-default [&_.ald-color-picker-wrapper]:tw-cursor-default':\n            disabled,\n        })}\n        ref={wrapRef}\n      >\n        <Dropdown\n          trigger={'click'}\n          open={open}\n          disabled={disabled}\n          placement={'bottom-start'}\n          overlayClassName={'ald-color-picker-overlay-wrapper'}\n          dropdownRender={() => {\n            return overlay;\n          }}\n        >\n          <div\n            className={cls(\n              'ald-color-picker-wrapper',\n              'tw-flex tw-flex-row tw-items-center tw-justify-between tw-gap-1 tw-h-7 tw-px-2.5 tw-py-1.5 tw-bg-[var(--background-default)] tw-border tw-border-solid tw-border-[var(--border-neutral-subtle)] tw-box-border tw-cursor-pointer tw-rounded tw-text-[var(--content-primary)] tw-transition-[border] tw-duration-500 tw-ease-in-out',\n              {\n                'tw-border-[var(--border-brand-subtle)]':\n                  open && bordered !== false,\n                'tw-border-[var(--border-neutral-subtle)] tw-bg-[var(--background-neutral-on-subtle)]':\n                  disabled,\n                'tw-border-[var(--action-ghost-normal)]': bordered === false,\n                'hover:tw-border-[var(--border-brand-subtle)]':\n                  !disabled && bordered !== false,\n                'hover:tw-border-[var(--action-ghost-normal)]':\n                  bordered === false,\n              },\n            )}\n            onClick={(e) => {\n              if (disabled) {\n                e.stopPropagation();\n              }\n            }}\n          >\n            {icon ? (\n              <div className=\"tw-relative -tw-top-px\">\n                <div className=\"tw-mb-px\">{icon}</div>\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-left-1/2 tw-h-0.5 tw-w-2.5 -tw-translate-x-1/2\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            ) : (\n              <div className=\"tw-relative -tw-top-px tw-ml-0.5 tw-mr-[3px]\">\n                A\n                <div\n                  className=\"tw-absolute tw-bottom-[3px] tw-h-0.5 tw-w-2.5\"\n                  style={{\n                    backgroundColor: value ?? 'var(--content-secondary)',\n                  }}\n                />\n              </div>\n            )}\n            <FoldDownFill size={14} color={'var(--content-secondary)'} />\n          </div>\n        </Dropdown>\n      </div>\n    );\n  }\n  if (mode === 'complex') {\n    return <InnerColorPicker {...complexModeProps} />;\n  }\n\n  return null;\n}\n"],"mappings":"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"}

package/dist/ColorPicker/util.d.ts

@@ -7,7 +7,7 @@ export declare const getColorAlpha: (color: AggregationColor) => number;
 /** Return the color whose `alpha` is 1 */
 export declare const genAlphaColor: (color: AggregationColor, alpha?: number) => AggregationColor;
 /**
- * Get percent position color. e.g. [10%-#fff, 20%-#000], 15% => #888
+ * Get percent position color from neighboring color stops.
  */
 export declare const getGradientPercentColor: (colors: {
     percent: number;