@aloudata/aloudata-design 3.0.0-beta.13 → 3.0.0-beta.15

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (78) hide show
  1. package/dist/AProgress/index.d.ts +1 -1
  2. package/dist/AProgress/index.js +19 -5
  3. package/dist/AProgress/index.js.map +1 -1
  4. package/dist/Alert/index.d.ts +1 -1
  5. package/dist/Alert/index.js +22 -8
  6. package/dist/Alert/index.js.map +1 -1
  7. package/dist/Avatar/component/Avatar/index.d.ts +1 -1
  8. package/dist/Avatar/component/Avatar/index.js +4 -4
  9. package/dist/Avatar/component/Avatar/index.js.map +1 -1
  10. package/dist/Avatar/component/Avatar/type.d.ts +1 -1
  11. package/dist/Avatar/component/Avatar/type.js +6 -1
  12. package/dist/Avatar/component/Avatar/type.js.map +1 -1
  13. package/dist/Avatar/index.js +67 -8
  14. package/dist/Avatar/index.js.map +1 -1
  15. package/dist/Badge/index.d.ts +1 -0
  16. package/dist/Badge/index.js +32 -9
  17. package/dist/Badge/index.js.map +1 -1
  18. package/dist/Breadcrumb/index.js +21 -12
  19. package/dist/Breadcrumb/index.js.map +1 -1
  20. package/dist/Button/index.d.ts +2 -0
  21. package/dist/Button/index.js +39 -32
  22. package/dist/Button/index.js.map +1 -1
  23. package/dist/Card/index.js +5 -5
  24. package/dist/Card/index.js.map +1 -1
  25. package/dist/Checkbox/index.js +4 -11
  26. package/dist/Checkbox/index.js.map +1 -1
  27. package/dist/Checkbox/type.d.ts +2 -0
  28. package/dist/Collapse/index.js +38 -22
  29. package/dist/Collapse/index.js.map +1 -1
  30. package/dist/DataPreviewTable/index.js +1 -1
  31. package/dist/DataPreviewTable/index.js.map +1 -1
  32. package/dist/Drawer/index.d.ts +1 -0
  33. package/dist/Drawer/index.js +45 -33
  34. package/dist/Drawer/index.js.map +1 -1
  35. package/dist/Dropdown/index.d.ts +5 -0
  36. package/dist/Dropdown/index.js +151 -34
  37. package/dist/Dropdown/index.js.map +1 -1
  38. package/dist/LogicTree/DisplayLogicTree.d.ts +1 -1
  39. package/dist/LogicTree/DisplayLogicTree.js.map +1 -1
  40. package/dist/LogicTree/components/DisplayLogicItem/index.d.ts +1 -1
  41. package/dist/LogicTree/components/DisplayLogicItem/index.js +1 -1
  42. package/dist/LogicTree/components/DisplayLogicItem/index.js.map +1 -1
  43. package/dist/LogicTree/components/LogicItem/index.js +2 -3
  44. package/dist/LogicTree/components/LogicItem/index.js.map +1 -1
  45. package/dist/LogicTree/index.d.ts +1 -1
  46. package/dist/LogicTree/index.js.map +1 -1
  47. package/dist/MemberPicker/components/NickLabel.js +1 -1
  48. package/dist/MemberPicker/components/NickLabel.js.map +1 -1
  49. package/dist/MemberPicker/components/Panel.js +13 -14
  50. package/dist/MemberPicker/components/Panel.js.map +1 -1
  51. package/dist/MemberPicker/index.js +6 -3
  52. package/dist/MemberPicker/index.js.map +1 -1
  53. package/dist/Menu/index.d.ts +4 -0
  54. package/dist/Menu/index.js +34 -12
  55. package/dist/Menu/index.js.map +1 -1
  56. package/dist/Popover/index.js +3 -2
  57. package/dist/Popover/index.js.map +1 -1
  58. package/dist/Progress/index.d.ts +0 -3
  59. package/dist/Progress/index.js +0 -3
  60. package/dist/Progress/index.js.map +1 -1
  61. package/dist/Select/BaseSelect.js +2 -1
  62. package/dist/Select/BaseSelect.js.map +1 -1
  63. package/dist/Select/interface.d.ts +4 -0
  64. package/dist/Table/components/Footer/index.js +1 -1
  65. package/dist/Table/components/Footer/index.js.map +1 -1
  66. package/dist/Table/hooks/useRowSelection.d.ts +1 -1
  67. package/dist/Table/hooks/useRowSelection.js +7 -9
  68. package/dist/Table/hooks/useRowSelection.js.map +1 -1
  69. package/dist/Table/index.js +1 -1
  70. package/dist/Table/index.js.map +1 -1
  71. package/dist/Tree/Tree2.js +1 -1
  72. package/dist/Tree/Tree2.js.map +1 -1
  73. package/dist/_utils/storybookArgTypes.d.ts +11 -0
  74. package/dist/_utils/storybookArgTypes.js +2 -0
  75. package/dist/aloudata-design.css +1 -1
  76. package/dist/index.d.ts +3 -2
  77. package/dist/index.js +1 -1
  78. package/package.json +2 -2
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nconst DEFAULT_SEPARATOR_SVG =\n 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjQ0NzE5IDAuMTA1NzkyQzkuOTQxMTcgMC4zNTI3ODEgMTAuMTQxNCAwLjk1MzQ1NCA5Ljg5NDQgMS40NDc0M0wxLjg5NDQgMTkuNDQ3NEMxLjY0NzQxIDE5Ljk0MTQgMS4wNDY3NCAyMC4xNDE2IDAuNTUyNzYxIDE5Ljg5NDZDMC4wNTg3ODI5IDE5LjY0NzcgLTAuMTQxNDQyIDE5LjA0NyAwLjEwNTU0OCAxOC41NTNMOC4xMDU1NSAwLjU1MzAwNkM4LjM1MjU0IDAuMDU5MDI3IDguOTUzMjEgLTAuMTQxMTk3IDkuNDQ3MTkgMC4xMDU3OTJaIiBmaWxsPSIjMDAxQTMzIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4=';\n\nconst DefaultSeparator = () => (\n <span\n className=\"default-separator tw-mx-2 tw-inline-block tw-h-[14px] tw-w-[7px] tw-opacity-60\"\n style={{\n background: `url('${DEFAULT_SEPARATOR_SVG}') no-repeat center`,\n backgroundSize: '100% 100%',\n }}\n />\n);\n\nexport interface BreadcrumbProps {\n className?: string;\n style?: React.CSSProperties;\n separator?: React.ReactNode;\n items?: Array<{\n title: React.ReactNode;\n href?: string;\n onClick?: (e: React.MouseEvent) => void;\n className?: string;\n }>;\n children?: React.ReactNode;\n}\n\nexport interface BreadcrumbItemProps {\n className?: string;\n children?: React.ReactNode;\n href?: string;\n onClick?: (e: React.MouseEvent) => void;\n}\n\ninterface IBreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {\n __ANT_BREADCRUMB_ITEM: boolean;\n}\n\nconst Breadcrumb = (props: BreadcrumbProps) => {\n const {\n className,\n style,\n separator = <DefaultSeparator />,\n items,\n children,\n } = props;\n\n const renderItems = () => {\n if (items) {\n return items.map((item, index) => {\n const isLast = index === items.length - 1;\n return (\n <React.Fragment key={index}>\n <span\n className={cn(\n 'ald-breadcrumb-item tw-cursor-pointer tw-text-sm',\n isLast\n ? 'tw-text-[var(--content-primary)]'\n : 'tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]',\n item.className,\n )}\n >\n {item.href ? (\n <a\n className=\"ald-breadcrumb-link tw-text-inherit\"\n href={item.href}\n onClick={item.onClick}\n >\n {item.title}\n </a>\n ) : (\n <span onClick={item.onClick}>{item.title}</span>\n )}\n </span>\n {separator !== null && !isLast && (\n <span className=\"ald-breadcrumb-separator\">{separator}</span>\n )}\n </React.Fragment>\n );\n });\n }\n\n const childArray = React.Children.toArray(children);\n return childArray.map((child, index) => {\n const isLast = index === childArray.length - 1;\n return (\n <React.Fragment key={index}>\n {React.isValidElement(child)\n ? React.cloneElement(child as React.ReactElement, {\n 'data-last': isLast ? 'true' : undefined,\n })\n : child}\n {separator !== null && !isLast && (\n <span className=\"ald-breadcrumb-separator\">{separator}</span>\n )}\n </React.Fragment>\n );\n });\n };\n\n return (\n <nav\n className={cn(\n 'ald-breadcrumb tw-flex tw-items-center tw-text-sm',\n className,\n )}\n style={style}\n >\n {renderItems()}\n </nav>\n );\n};\n\nconst BreadcrumbItem: IBreadcrumbItemInterface = (\n props: BreadcrumbItemProps & { 'data-last'?: string },\n) => {\n const { className, children, href, onClick, ...rest } = props;\n const isLast = rest['data-last'] === 'true';\n return (\n <span\n className={cn(\n 'ald-breadcrumb-item tw-cursor-pointer tw-text-sm',\n isLast\n ? 'tw-text-[var(--content-primary)]'\n : 'tw-text-[var(--content-secondary)] hover:tw-text-[var(--content-primary)]',\n className,\n )}\n onClick={onClick}\n >\n {href ? (\n <a className=\"ald-breadcrumb-link tw-text-inherit\" href={href}>\n {children}\n </a>\n ) : (\n children\n )}\n </span>\n );\n};\n\nBreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;\n\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n"],"mappings":";;;;AAGA,IAAM,wBACJ;AAEF,IAAM,yBACJ,oBAAC,QAAD;CACE,WAAU;CACV,OAAO;EACL,YAAY,QAAQ,sBAAsB;EAC1C,gBAAgB;EACjB;CACD,CAAA;AA2BJ,IAAM,cAAc,UAA2B;CAC7C,MAAM,EACJ,WACA,OACA,YAAY,oBAAC,kBAAD,EAAoB,CAAA,EAChC,OACA,aACE;CAEJ,MAAM,oBAAoB;AACxB,MAAI,MACF,QAAO,MAAM,KAAK,MAAM,UAAU;GAChC,MAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,GACT,oDACA,SACI,qCACA,6EACJ,KAAK,UACN;cAEA,KAAK,OACJ,oBAAC,KAAD;KACE,WAAU;KACV,MAAM,KAAK;KACX,SAAS,KAAK;eAEb,KAAK;KACJ,CAAA,GAEJ,oBAAC,QAAD;KAAM,SAAS,KAAK;eAAU,KAAK;KAAa,CAAA;IAE7C,CAAA,EACN,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cAA4B;IAAiB,CAAA,CAEhD,EAAA,EAzBI,MAyBJ;IAEnB;EAGJ,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;AACnD,SAAO,WAAW,KAAK,OAAO,UAAU;GACtC,MAAM,SAAS,UAAU,WAAW,SAAS;AAC7C,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,MAAM,eAAe,MAAM,GACxB,MAAM,aAAa,OAA6B,EAC9C,aAAa,SAAS,SAAS,QAChC,CAAC,GACF,OACH,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cAA4B;IAAiB,CAAA,CAEhD,EAAA,EATI,MASJ;IAEnB;;AAGJ,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,UACD;EACM;YAEN,aAAa;EACV,CAAA;;AAIV,IAAM,kBACJ,UACG;CACH,MAAM,EAAE,WAAW,UAAU,MAAM,SAAS,GAAG,SAAS;AAExD,QACE,oBAAC,QAAD;EACE,WAAW,GACT,oDAJS,KAAK,iBAAiB,SAM3B,qCACA,6EACJ,UACD;EACQ;YAER,OACC,oBAAC,KAAD;GAAG,WAAU;GAA4C;GACtD;GACC,CAAA,GAEJ;EAEG,CAAA;;AAIX,eAAe,wBAAwB;AAEvC,WAAW,OAAO"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/Breadcrumb/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nconst DefaultSeparator = () => (\n <span className=\"default-separator tw-mx-1 tw-inline-flex tw-items-center tw-text-[var(--content-tertiary)]\">\n <svg\n width=\"16\"\n height=\"16\"\n viewBox=\"0 0 16 16\"\n fill=\"none\"\n xmlns=\"http://www.w3.org/2000/svg\"\n >\n <path\n d=\"M6 3.5L10.5 8L6 12.5\"\n stroke=\"currentColor\"\n strokeWidth=\"1.5\"\n strokeLinecap=\"round\"\n strokeLinejoin=\"round\"\n />\n </svg>\n </span>\n);\n\nexport interface BreadcrumbProps {\n className?: string;\n style?: React.CSSProperties;\n separator?: React.ReactNode;\n items?: Array<{\n title: React.ReactNode;\n href?: string;\n onClick?: (e: React.MouseEvent) => void;\n className?: string;\n }>;\n children?: React.ReactNode;\n}\n\nexport interface BreadcrumbItemProps {\n className?: string;\n children?: React.ReactNode;\n href?: string;\n onClick?: (e: React.MouseEvent) => void;\n}\n\ninterface IBreadcrumbItemInterface extends React.FC<BreadcrumbItemProps> {\n __ANT_BREADCRUMB_ITEM: boolean;\n}\n\nconst Breadcrumb = (props: BreadcrumbProps) => {\n const {\n className,\n style,\n separator = <DefaultSeparator />,\n items,\n children,\n } = props;\n\n const renderItems = () => {\n if (items) {\n return items.map((item, index) => {\n const isLast = index === items.length - 1;\n return (\n <React.Fragment key={index}>\n <span\n className={cn(\n 'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]',\n isLast\n ? 'tw-text-[var(--content-primary)]'\n : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n item.className,\n )}\n >\n {item.href ? (\n <a\n className=\"ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]\"\n href={item.href}\n onClick={item.onClick}\n >\n {item.title}\n </a>\n ) : (\n <span onClick={item.onClick}>{item.title}</span>\n )}\n </span>\n {separator !== null && !isLast && (\n <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n {separator}\n </span>\n )}\n </React.Fragment>\n );\n });\n }\n\n const childArray = React.Children.toArray(children);\n return childArray.map((child, index) => {\n const isLast = index === childArray.length - 1;\n return (\n <React.Fragment key={index}>\n {React.isValidElement(child)\n ? React.cloneElement(child as React.ReactElement, {\n 'data-last': isLast ? 'true' : undefined,\n })\n : child}\n {separator !== null && !isLast && (\n <span className=\"ald-breadcrumb-separator tw-inline-flex tw-items-center\">\n {separator}\n </span>\n )}\n </React.Fragment>\n );\n });\n };\n\n return (\n <nav\n className={cn(\n 'ald-breadcrumb tw-flex tw-items-center tw-text-sm',\n className,\n )}\n style={style}\n >\n {renderItems()}\n </nav>\n );\n};\n\nconst BreadcrumbItem: IBreadcrumbItemInterface = (\n props: BreadcrumbItemProps & { 'data-last'?: string },\n) => {\n const { className, children, href, onClick, ...rest } = props;\n const isLast = rest['data-last'] === 'true';\n return (\n <span\n className={cn(\n 'ald-breadcrumb-item tw-cursor-pointer tw-text-sm [&_a]:tw-text-[var(--alias-colors-link-default)] [&_a:hover]:tw-text-[var(--alias-colors-link-hover)]',\n isLast\n ? 'tw-text-[var(--content-primary)]'\n : 'tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]',\n className,\n )}\n onClick={onClick}\n >\n {href ? (\n <a\n className=\"ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]\"\n href={href}\n >\n {children}\n </a>\n ) : (\n children\n )}\n </span>\n );\n};\n\nBreadcrumbItem.__ANT_BREADCRUMB_ITEM = true;\n\nBreadcrumb.Item = BreadcrumbItem;\n\nexport default Breadcrumb;\n"],"mappings":";;;;AAGA,IAAM,yBACJ,oBAAC,QAAD;CAAM,WAAU;WACd,oBAAC,OAAD;EACE,OAAM;EACN,QAAO;EACP,SAAQ;EACR,MAAK;EACL,OAAM;YAEN,oBAAC,QAAD;GACE,GAAE;GACF,QAAO;GACP,aAAY;GACZ,eAAc;GACd,gBAAe;GACf,CAAA;EACE,CAAA;CACD,CAAA;AA2BT,IAAM,cAAc,UAA2B;CAC7C,MAAM,EACJ,WACA,OACA,YAAY,oBAAC,kBAAD,EAAoB,CAAA,EAChC,OACA,aACE;CAEJ,MAAM,oBAAoB;AACxB,MAAI,MACF,QAAO,MAAM,KAAK,MAAM,UAAU;GAChC,MAAM,SAAS,UAAU,MAAM,SAAS;AACxC,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACE,oBAAC,QAAD;IACE,WAAW,GACT,0JACA,SACI,qCACA,4EACJ,KAAK,UACN;cAEA,KAAK,OACJ,oBAAC,KAAD;KACE,WAAU;KACV,MAAM,KAAK;KACX,SAAS,KAAK;eAEb,KAAK;KACJ,CAAA,GAEJ,oBAAC,QAAD;KAAM,SAAS,KAAK;eAAU,KAAK;KAAa,CAAA;IAE7C,CAAA,EACN,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EA3BI,MA2BJ;IAEnB;EAGJ,MAAM,aAAa,MAAM,SAAS,QAAQ,SAAS;AACnD,SAAO,WAAW,KAAK,OAAO,UAAU;GACtC,MAAM,SAAS,UAAU,WAAW,SAAS;AAC7C,UACE,qBAAC,MAAM,UAAP,EAAA,UAAA,CACG,MAAM,eAAe,MAAM,GACxB,MAAM,aAAa,OAA6B,EAC9C,aAAa,SAAS,SAAS,QAChC,CAAC,GACF,OACH,cAAc,QAAQ,CAAC,UACtB,oBAAC,QAAD;IAAM,WAAU;cACb;IACI,CAAA,CAEM,EAAA,EAXI,MAWJ;IAEnB;;AAGJ,QACE,oBAAC,OAAD;EACE,WAAW,GACT,qDACA,UACD;EACM;YAEN,aAAa;EACV,CAAA;;AAIV,IAAM,kBACJ,UACG;CACH,MAAM,EAAE,WAAW,UAAU,MAAM,SAAS,GAAG,SAAS;AAExD,QACE,oBAAC,QAAD;EACE,WAAW,GACT,0JAJS,KAAK,iBAAiB,SAM3B,qCACA,4EACJ,UACD;EACQ;YAER,OACC,oBAAC,KAAD;GACE,WAAU;GACJ;GAEL;GACC,CAAA,GAEJ;EAEG,CAAA;;AAIX,eAAe,wBAAwB;AAEvC,WAAW,OAAO"}
@@ -22,9 +22,11 @@ export interface IButtonProps {
22
22
  id?: string;
23
23
  tabIndex?: number;
24
24
  title?: string;
25
+ 'aria-label'?: string;
25
26
  ghost?: boolean;
26
27
  danger?: boolean;
27
28
  color?: string;
29
+ showArrow?: boolean;
28
30
  }
29
31
  export declare function getButtonType(buttonType: ButtonType): string;
30
32
  export declare function getDangerStatus(buttonType: ButtonType): boolean;
@@ -1,5 +1,6 @@
1
1
  import { cn } from "../lib/utils.js";
2
- import Memo from "../Icon/components/LoadingLine.js";
2
+ import Memo from "../Icon/components/ChevronDownLine.js";
3
+ import Memo$1 from "../Icon/components/LoadingLine.js";
3
4
  import DisabledContext from "../ConfigProvider/DisabledContext.js";
4
5
  import SizeContext from "../ConfigProvider/sizeContext.js";
5
6
  import { useCompactItemContext } from "../Space/CompactContext.js";
@@ -9,6 +10,11 @@ import { cva } from "class-variance-authority";
9
10
  //#region src/Button/index.tsx
10
11
  var btnPrefix = "ald-btn";
11
12
  var setIcon = (iconNode, loading) => {
13
+ if (loading) return /* @__PURE__ */ jsx(Memo$1, {
14
+ className: "ald-loading-spin tw-shrink-0 tw-animate-spin",
15
+ size: "1em",
16
+ color: "currentColor"
17
+ });
12
18
  if (iconNode) {
13
19
  const p = {
14
20
  className: "",
@@ -18,11 +24,6 @@ var setIcon = (iconNode, loading) => {
18
24
  p.size = "1em";
19
25
  return React.cloneElement(iconNode, p);
20
26
  }
21
- if (loading) return /* @__PURE__ */ jsx(Memo, {
22
- className: "ald-loading-spin tw-shrink-0 tw-animate-spin",
23
- size: "1em",
24
- color: "currentColor"
25
- });
26
27
  return /* @__PURE__ */ jsx(Fragment, {});
27
28
  };
28
29
  var buttonVariants = cva([
@@ -35,21 +36,21 @@ var buttonVariants = cva([
35
36
  type: {
36
37
  primary: [
37
38
  `${btnPrefix}-primary`,
38
- "tw-border-[var(--action-primary-normal)] tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)]",
39
- "hover:tw-border-[var(--action-primary-hover)] hover:tw-bg-[var(--action-primary-hover)] hover:tw-text-[var(--action-inverted-hover)]",
40
- "active:tw-border-[var(--action-primary-active)] active:tw-bg-[var(--action-primary-active)]"
39
+ "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)]",
40
+ "hover:tw-bg-[var(--action-primary-hover)]",
41
+ "active:tw-bg-[var(--action-primary-active)]"
41
42
  ],
42
43
  secondary: [
43
44
  `${btnPrefix}-secondary`,
44
- "tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)]",
45
- "hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-hover)] hover:tw-text-[var(--action-neutral-hover)]",
45
+ "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)]",
46
+ "hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]",
46
47
  "active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]"
47
48
  ],
48
49
  dangerous: [
49
50
  `${btnPrefix}-dangerous`,
50
- "tw-border-[var(--action-destructive-normal)] tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)]",
51
- "hover:tw-border-[var(--action-destructive-hover)] hover:tw-bg-[var(--action-destructive-hover)]",
52
- "active:tw-border-[var(--action-destructive-active)] active:tw-bg-[var(--action-destructive-active)]"
51
+ "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)]",
52
+ "hover:tw-bg-[var(--action-destructive-hover)]",
53
+ "active:tw-bg-[var(--action-destructive-active)]"
53
54
  ],
54
55
  text: [
55
56
  `${btnPrefix}-text`,
@@ -59,8 +60,8 @@ var buttonVariants = cva([
59
60
  ],
60
61
  inverse: [
61
62
  `${btnPrefix}-inverse`,
62
- "tw-border-transparent tw-bg-[var(--alias-colors-bg-skeleton-inverse-subtle)] tw-text-[var(--alias-colors-text-inverse-default)]",
63
- "hover:tw-bg-[var(--alias-colors-bg-skeleton-inverse-strong)]",
63
+ "tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--alias-colors-text-inverse-default)]",
64
+ "hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]",
64
65
  "active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]"
65
66
  ],
66
67
  link: [
@@ -73,17 +74,17 @@ var buttonVariants = cva([
73
74
  size: {
74
75
  small: [
75
76
  `${btnPrefix}-small`,
76
- "tw-h-7 tw-min-w-[48px] tw-gap-[var(--alias-radius-50)] tw-rounded-r-50 tw-text-xs tw-leading-4",
77
+ "tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4",
77
78
  "tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]"
78
79
  ],
79
80
  middle: [
80
81
  `${btnPrefix}-middle`,
81
- "tw-h-8 tw-min-w-[52px] tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5",
82
+ "tw-h-8 tw-min-w-8 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5",
82
83
  "tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]"
83
84
  ],
84
85
  large: [
85
86
  `${btnPrefix}-large`,
86
- "tw-h-9 tw-min-w-[56px] tw-gap-2 tw-rounded-r-100 tw-text-sm tw-leading-6",
87
+ "tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6",
87
88
  "tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]"
88
89
  ]
89
90
  },
@@ -116,7 +117,7 @@ var VALID_TYPES = [
116
117
  "inverse"
117
118
  ];
118
119
  function Button(props, ref) {
119
- const { type: rawType = "secondary", size: customSize, shape = "default", loading = false, disabled, icon, className, children, href, target, onClick, block, htmlType = "button", style, ghost, ...rest } = props;
120
+ const { type: rawType = "secondary", size: customSize, shape = "default", loading = false, disabled, icon, className, children, href, target, onClick, block, htmlType = "button", style, ghost, showArrow = false, ...rest } = props;
120
121
  const type = VALID_TYPES.includes(rawType) ? rawType : "secondary";
121
122
  const contextDisabled = useContext(DisabledContext);
122
123
  const mergedDisabled = disabled ?? contextDisabled;
@@ -134,15 +135,27 @@ function Button(props, ref) {
134
135
  const isDisabled = innerLoading || mergedDisabled;
135
136
  const iconNode = setIcon(icon, innerLoading);
136
137
  const compactClasses = compactItemClassnames ? cn(!compactItemClassnames[`ald-btn-compact-first-item`] && "!tw-rounded-l-none", !compactItemClassnames[`ald-btn-compact-last-item`] && "!tw-rounded-r-none", !compactItemClassnames[`ald-btn-compact-first-item`] && "-tw-ml-px") : void 0;
137
- const isIconOnly = !!icon && !children;
138
+ const isIconOnly = !!icon && !children && !showArrow;
138
139
  const classes = cn(buttonVariants({
139
140
  type,
140
141
  size,
141
142
  disabled: !!isDisabled,
142
143
  block: !!block,
143
144
  shape
144
- }), ghost && "!tw-border-current !tw-bg-transparent", isIconOnly && "tw-aspect-square !tw-min-w-0 !tw-px-0", compactClasses, className);
145
- if (href) return /* @__PURE__ */ jsxs("a", {
145
+ }), ghost && "!tw-border-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent", ghost && type === "primary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "dangerous" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "secondary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "inverse" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0 !tw-bg-[var(--action-ghost-normal)]", ghost && type === "primary" && "!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-primary-subtle-hover)]", ghost && type === "dangerous" && "!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-destructive-hover)]", ghost && type === "secondary" && "!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-hover)]", ghost && type === "inverse" && "!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-inverted-hover)]", ghost && type === "primary" && "!tw-text-[var(--action-primary-normal)]", ghost && type === "dangerous" && "!tw-text-[var(--action-destructive-normal)]", ghost && type === "secondary" && "!tw-text-[var(--action-neutral-normal)]", ghost && type === "inverse" && "!tw-text-[var(--action-inverted-normal)]", isIconOnly && "tw-aspect-square !tw-min-w-0 !tw-px-0", compactClasses, className);
146
+ const contentClasses = cn("tw-inline-flex tw-items-center tw-gap-1", ghost && type === "inverse" && size === "middle" && "tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]");
147
+ const buttonContent = /* @__PURE__ */ jsxs(Fragment, { children: [
148
+ iconNode,
149
+ children && /* @__PURE__ */ jsx("span", {
150
+ className: contentClasses,
151
+ children
152
+ }),
153
+ showArrow ? /* @__PURE__ */ jsx("span", {
154
+ className: "ald-btn-arrow tw-inline-flex tw-shrink-0 tw-items-center",
155
+ children: /* @__PURE__ */ jsx(Memo, { size: 16 })
156
+ }) : null
157
+ ] });
158
+ if (href) return /* @__PURE__ */ jsx("a", {
146
159
  ...rest,
147
160
  className: classes,
148
161
  style,
@@ -151,12 +164,9 @@ function Button(props, ref) {
151
164
  ref,
152
165
  onClick: isDisabled ? void 0 : onClick,
153
166
  "aria-disabled": isDisabled || void 0,
154
- children: [iconNode, children && /* @__PURE__ */ jsx("span", {
155
- className: "tw-inline-flex tw-items-center tw-gap-1",
156
- children
157
- })]
167
+ children: buttonContent
158
168
  });
159
- return /* @__PURE__ */ jsxs("button", {
169
+ return /* @__PURE__ */ jsx("button", {
160
170
  ...rest,
161
171
  type: htmlType === "submit" ? "submit" : htmlType === "reset" ? "reset" : "button",
162
172
  className: classes,
@@ -165,10 +175,7 @@ function Button(props, ref) {
165
175
  "aria-disabled": isDisabled || void 0,
166
176
  ref,
167
177
  onClick,
168
- children: [iconNode, children && /* @__PURE__ */ jsx("span", {
169
- className: "tw-inline-flex tw-items-center tw-gap-1",
170
- children
171
- })]
178
+ children: buttonContent
172
179
  });
173
180
  }
174
181
  var Button_default = forwardRef(Button);
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/Button/index.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority';\nimport React, { forwardRef, useContext, useEffect, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport SizeContext from '../ConfigProvider/sizeContext';\nimport { LoadingLine } from '../Icon';\nimport { cn } from '../lib/utils';\nimport { useCompactItemContext } from '../Space/CompactContext';\n\nexport const btnPrefix = 'ald-btn';\n\nexport type ButtonType =\n | 'primary'\n | 'secondary'\n | 'dangerous'\n | 'text'\n | 'inverse'\n | 'link';\nexport type Size = 'small' | 'middle' | 'large';\nexport interface IButtonProps {\n type?: ButtonType;\n size?: Size;\n disabled?: boolean;\n icon?: React.ReactNode;\n shape?: 'circle' | 'default';\n href?: string;\n target?: string;\n onClick?: React.MouseEventHandler<HTMLElement>;\n loading?: boolean | { delay?: number };\n children?: React.ReactNode;\n className?: string;\n style?: React.CSSProperties;\n block?: boolean;\n htmlType?: 'submit' | 'button' | 'reset';\n id?: string;\n tabIndex?: number;\n title?: string;\n ghost?: boolean;\n danger?: boolean;\n color?: string;\n}\n\nexport function getButtonType(buttonType: ButtonType): string {\n return buttonType;\n}\nexport function getDangerStatus(buttonType: ButtonType): boolean {\n return buttonType === 'dangerous';\n}\nexport function getButtonSizeClass(s: Size): string {\n return ['small', 'large'].includes(s)\n ? `${btnPrefix}-${s}`\n : `${btnPrefix}-middle`;\n}\nexport function getShape(s: 'circle' | 'default'): 'circle' | 'default' {\n return s;\n}\nexport const setIcon = (\n iconNode: React.ReactElement,\n loading: boolean | { delay?: number },\n) => {\n if (iconNode) {\n const p: Record<string, string | number> = {\n className: '',\n fill: 'currentColor',\n ...iconNode.props,\n };\n p.size = '1em';\n return React.cloneElement(iconNode, p);\n }\n if (loading) {\n return (\n <LoadingLine\n className=\"ald-loading-spin tw-shrink-0 tw-animate-spin\"\n size={'1em'}\n color=\"currentColor\"\n />\n );\n }\n return <></>;\n};\n\nconst buttonVariants = cva(\n [\n btnPrefix,\n 'tw-inline-flex tw-cursor-pointer tw-appearance-none tw-items-center tw-justify-center tw-font-medium tw-no-underline tw-transition-colors [&_.i-icon]:tw-inline-flex [&_.i-icon]:tw-items-center',\n 'tw-border tw-border-solid',\n 'focus-visible:tw-outline-none',\n ],\n {\n variants: {\n type: {\n primary: [\n `${btnPrefix}-primary`,\n 'tw-border-[var(--action-primary-normal)] tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)]',\n 'hover:tw-border-[var(--action-primary-hover)] hover:tw-bg-[var(--action-primary-hover)] hover:tw-text-[var(--action-inverted-hover)]',\n 'active:tw-border-[var(--action-primary-active)] active:tw-bg-[var(--action-primary-active)]',\n ],\n secondary: [\n `${btnPrefix}-secondary`,\n 'tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)]',\n 'hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n 'active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n dangerous: [\n `${btnPrefix}-dangerous`,\n 'tw-border-[var(--action-destructive-normal)] tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)]',\n 'hover:tw-border-[var(--action-destructive-hover)] hover:tw-bg-[var(--action-destructive-hover)]',\n 'active:tw-border-[var(--action-destructive-active)] active:tw-bg-[var(--action-destructive-active)]',\n ],\n text: [\n `${btnPrefix}-text`,\n 'tw-border-transparent tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]',\n 'hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n 'active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n inverse: [\n `${btnPrefix}-inverse`,\n 'tw-border-transparent tw-bg-[var(--alias-colors-bg-skeleton-inverse-subtle)] tw-text-[var(--alias-colors-text-inverse-default)]',\n 'hover:tw-bg-[var(--alias-colors-bg-skeleton-inverse-strong)]',\n 'active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]',\n ],\n link: [\n `${btnPrefix}-link`,\n 'tw-border-transparent tw-bg-transparent tw-text-[var(--action-primary-normal)]',\n 'hover:tw-text-[var(--action-primary-hover)]',\n 'active:tw-text-[var(--action-primary-active)]',\n ],\n },\n size: {\n small: [\n `${btnPrefix}-small`,\n 'tw-h-7 tw-min-w-[48px] tw-gap-[var(--alias-radius-50)] tw-rounded-r-50 tw-text-xs tw-leading-4',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n middle: [\n `${btnPrefix}-middle`,\n 'tw-h-8 tw-min-w-[52px] tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n large: [\n `${btnPrefix}-large`,\n 'tw-h-9 tw-min-w-[56px] tw-gap-2 tw-rounded-r-100 tw-text-sm tw-leading-6',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n },\n disabled: {\n true: 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n false: '',\n },\n block: {\n true: 'tw-w-full',\n false: '',\n },\n shape: {\n circle: 'tw-min-w-0 tw-rounded-full tw-p-0',\n default: '',\n },\n },\n defaultVariants: {\n type: 'secondary',\n size: 'middle',\n disabled: false,\n block: false,\n shape: 'default',\n },\n },\n);\n\nconst VALID_TYPES: ButtonType[] = [\n 'primary',\n 'secondary',\n 'dangerous',\n 'text',\n 'inverse',\n];\n\nfunction Button(props: IButtonProps, ref: React.Ref<HTMLElement>) {\n const {\n type: rawType = 'secondary',\n size: customSize,\n shape = 'default',\n loading = false,\n disabled,\n icon,\n className,\n children,\n href,\n target,\n onClick,\n block,\n htmlType = 'button',\n style,\n ghost,\n ...rest\n } = props;\n\n // Radix Trigger asChild 会传入 type=\"button\"(HTML button type),与组件的 type 变体冲突\n // 当收到非法变体值时回退到 'secondary'\n const type: ButtonType = VALID_TYPES.includes(rawType as ButtonType)\n ? (rawType as ButtonType)\n : 'secondary';\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext(btnPrefix);\n const size = customSize || compactSize || contentSize || 'middle';\n\n const [innerLoading, setInnerLoading] = useState(false);\n\n useEffect(() => {\n if (typeof loading === 'object' && loading.delay) {\n const timer = setTimeout(() => setInnerLoading(true), loading.delay);\n return () => clearTimeout(timer);\n }\n setInnerLoading(!!loading);\n }, [loading]);\n\n const isDisabled = innerLoading || mergedDisabled;\n const iconNode = setIcon(icon as React.ReactElement, innerLoading);\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n // all compact items: remove border-radius on inner edges\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '!tw-rounded-l-none',\n !compactItemClassnames[`${btnPrefix}-compact-last-item`] &&\n '!tw-rounded-r-none',\n // merge borders via negative margin (except first item)\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '-tw-ml-px',\n )\n : undefined;\n\n const isIconOnly = !!icon && !children;\n\n const classes = cn(\n buttonVariants({\n type,\n size,\n disabled: !!isDisabled,\n block: !!block,\n shape,\n }),\n ghost && '!tw-border-current !tw-bg-transparent',\n // icon-only: square button, no min-width, centered padding\n isIconOnly && 'tw-aspect-square !tw-min-w-0 !tw-px-0',\n compactClasses,\n className,\n );\n\n if (href) {\n return (\n <a\n {...rest}\n className={classes}\n style={style}\n href={isDisabled ? undefined : href}\n target={target}\n ref={ref as React.Ref<HTMLAnchorElement>}\n onClick={isDisabled ? undefined : onClick}\n aria-disabled={isDisabled || undefined}\n >\n {iconNode}\n {children && (\n <span className=\"tw-inline-flex tw-items-center tw-gap-1\">\n {children}\n </span>\n )}\n </a>\n );\n }\n\n return (\n <button\n {...rest}\n type={\n htmlType === 'submit'\n ? 'submit'\n : htmlType === 'reset'\n ? 'reset'\n : 'button'\n }\n className={classes}\n style={style}\n disabled={isDisabled}\n aria-disabled={isDisabled || undefined}\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n >\n {iconNode}\n {children && (\n <span className=\"tw-inline-flex tw-items-center tw-gap-1\">\n {children}\n </span>\n )}\n </button>\n );\n}\n\nexport default forwardRef(Button);\n"],"mappings":";;;;;;;;;AAQA,IAAa,YAAY;AA+CzB,IAAa,WACX,UACA,YACG;AACH,KAAI,UAAU;EACZ,MAAM,IAAqC;GACzC,WAAW;GACX,MAAM;GACN,GAAG,SAAS;GACb;AACD,IAAE,OAAO;AACT,SAAO,MAAM,aAAa,UAAU,EAAE;;AAExC,KAAI,QACF,QACE,oBAAC,MAAD;EACE,WAAU;EACV,MAAM;EACN,OAAM;EACN,CAAA;AAGN,QAAO,oBAAA,UAAA,EAAK,CAAA;;AAGd,IAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,MAAM;GACJ,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACD,QAAQ;IACN,GAAG,UAAU;IACb;IACA;IACD;GACD,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,OAAO;EACP,OAAO;EACR;CACF,CACF;AAED,IAAM,cAA4B;CAChC;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,OAAO,OAAqB,KAA6B;CAChE,MAAM,EACJ,MAAM,UAAU,aAChB,MAAM,YACN,QAAQ,WACR,UAAU,OACV,UACA,MACA,WACA,UACA,MACA,QACA,SACA,OACA,WAAW,UACX,OACA,OACA,GAAG,SACD;CAIJ,MAAM,OAAmB,YAAY,SAAS,QAAsB,GAC/D,UACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,UAAU;CAClC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,OAAO,YAAY,YAAY,QAAQ,OAAO;GAChD,MAAM,QAAQ,iBAAiB,gBAAgB,KAAK,EAAE,QAAQ,MAAM;AACpE,gBAAa,aAAa,MAAM;;AAElC,kBAAgB,CAAC,CAAC,QAAQ;IACzB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,QAAQ,MAA4B,aAAa;CAGlE,MAAM,iBAAiB,wBACnB,GAEE,CAAC,sBAAsB,iCACrB,sBACF,CAAC,sBAAsB,gCACrB,sBAEF,CAAC,sBAAsB,iCACrB,YACH,GACD;CAEJ,MAAM,aAAa,CAAC,CAAC,QAAQ,CAAC;CAE9B,MAAM,UAAU,GACd,eAAe;EACb;EACA;EACA,UAAU,CAAC,CAAC;EACZ,OAAO,CAAC,CAAC;EACT;EACD,CAAC,EACF,SAAS,yCAET,cAAc,yCACd,gBACA,UACD;AAED,KAAI,KACF,QACE,qBAAC,KAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,aAAa,SAAY;EACvB;EACH;EACL,SAAS,aAAa,SAAY;EAClC,iBAAe,cAAc;YAR/B,CAUG,UACA,YACC,oBAAC,QAAD;GAAM,WAAU;GACb;GACI,CAAA,CAEP;;AAIR,QACE,qBAAC,UAAD;EACE,GAAI;EACJ,MACE,aAAa,WACT,WACA,aAAa,UACb,UACA;EAEN,WAAW;EACJ;EACP,UAAU;EACV,iBAAe,cAAc;EACxB;EACI;YAdX,CAgBG,UACA,YACC,oBAAC,QAAD;GAAM,WAAU;GACb;GACI,CAAA,CAEF;;;AAIb,IAAA,iBAAe,WAAW,OAAO"}
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 ghost?: boolean;\n danger?: boolean;\n color?: string;\n showArrow?: boolean;\n}\n\nexport function getButtonType(buttonType: ButtonType): string {\n return buttonType;\n}\nexport function getDangerStatus(buttonType: ButtonType): boolean {\n return buttonType === 'dangerous';\n}\nexport function getButtonSizeClass(s: Size): string {\n return ['small', 'large'].includes(s)\n ? `${btnPrefix}-${s}`\n : `${btnPrefix}-middle`;\n}\nexport function getShape(s: 'circle' | 'default'): 'circle' | 'default' {\n return s;\n}\nexport const setIcon = (\n iconNode: React.ReactElement,\n loading: boolean | { delay?: number },\n) => {\n if (loading) {\n return (\n <LoadingLine\n className=\"ald-loading-spin tw-shrink-0 tw-animate-spin\"\n size={'1em'}\n color=\"currentColor\"\n />\n );\n }\n\n if (iconNode) {\n const p: Record<string, string | number> = {\n className: '',\n fill: 'currentColor',\n ...iconNode.props,\n };\n p.size = '1em';\n return React.cloneElement(iconNode, p);\n }\n return <></>;\n};\n\nconst buttonVariants = cva(\n [\n btnPrefix,\n 'tw-inline-flex tw-cursor-pointer tw-appearance-none tw-items-center tw-justify-center tw-font-medium tw-no-underline tw-transition-colors [&_.i-icon]:tw-inline-flex [&_.i-icon]:tw-items-center',\n 'tw-border tw-border-solid',\n 'focus-visible:tw-outline-none',\n ],\n {\n variants: {\n type: {\n primary: [\n `${btnPrefix}-primary`,\n 'tw-border-transparent tw-bg-[var(--action-primary-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-bg-[var(--action-primary-hover)]',\n 'active:tw-bg-[var(--action-primary-active)]',\n ],\n secondary: [\n `${btnPrefix}-secondary`,\n 'tw-border-[var(--action-outline-normal)] tw-bg-[var(--action-inverted-normal)] tw-text-[var(--action-neutral-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-border-[var(--action-outline-hover)] hover:tw-bg-[var(--action-inverted-normal)]',\n 'active:tw-border-[var(--action-outline-active)] active:tw-bg-[var(--action-inverted-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n dangerous: [\n `${btnPrefix}-dangerous`,\n 'tw-border-transparent tw-bg-[var(--action-destructive-normal)] tw-text-[var(--action-inverted-normal)] tw-shadow-[0_1px_2px_0_rgba(27,36,44,0.12)]',\n 'hover:tw-bg-[var(--action-destructive-hover)]',\n 'active:tw-bg-[var(--action-destructive-active)]',\n ],\n text: [\n `${btnPrefix}-text`,\n 'tw-border-transparent tw-bg-[var(--action-ghost-normal)] tw-text-[var(--action-neutral-normal)]',\n 'hover:tw-bg-[var(--action-ghost-hover)] hover:tw-text-[var(--action-neutral-hover)]',\n 'active:tw-bg-[var(--action-ghost-active)] active:tw-text-[var(--action-neutral-active)]',\n ],\n inverse: [\n `${btnPrefix}-inverse`,\n 'tw-border-[var(--action-neutral-normal)] tw-bg-[var(--action-ghost-normal)] tw-text-[var(--alias-colors-text-inverse-default)]',\n 'hover:tw-border-[var(--action-ghost-inverted-hover)] hover:tw-bg-[var(--action-ghost-normal)]',\n 'active:tw-bg-[var(--alias-colors-bg-skeleton-inverse-stronger)]',\n ],\n link: [\n `${btnPrefix}-link`,\n 'tw-border-transparent tw-bg-transparent tw-text-[var(--action-primary-normal)]',\n 'hover:tw-text-[var(--action-primary-hover)]',\n 'active:tw-text-[var(--action-primary-active)]',\n ],\n },\n size: {\n small: [\n `${btnPrefix}-small`,\n 'tw-h-7 tw-min-w-7 tw-gap-1 tw-rounded-r-75 tw-text-xs tw-leading-4',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n middle: [\n `${btnPrefix}-middle`,\n 'tw-h-8 tw-min-w-8 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-5',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n large: [\n `${btnPrefix}-large`,\n 'tw-h-10 tw-min-w-10 tw-gap-1 tw-rounded-r-75 tw-text-sm tw-leading-6',\n 'tw-px-[var(--alias-padding-150-minus-1)] tw-py-[var(--alias-padding-75-minus-1)]',\n ],\n },\n disabled: {\n true: 'tw-pointer-events-none tw-cursor-default tw-opacity-50',\n false: '',\n },\n block: {\n true: 'tw-w-full',\n false: '',\n },\n shape: {\n circle: 'tw-min-w-0 tw-rounded-full tw-p-0',\n default: '',\n },\n },\n defaultVariants: {\n type: 'secondary',\n size: 'middle',\n disabled: false,\n block: false,\n shape: 'default',\n },\n },\n);\n\nconst VALID_TYPES: ButtonType[] = [\n 'primary',\n 'secondary',\n 'dangerous',\n 'text',\n 'inverse',\n];\n\nfunction Button(props: IButtonProps, ref: React.Ref<HTMLElement>) {\n const {\n type: rawType = 'secondary',\n size: customSize,\n shape = 'default',\n loading = false,\n disabled,\n icon,\n className,\n children,\n href,\n target,\n onClick,\n block,\n htmlType = 'button',\n style,\n ghost,\n showArrow = false,\n ...rest\n } = props;\n\n // Radix Trigger asChild 会传入 type=\"button\"(HTML button type),与组件的 type 变体冲突\n // 当收到非法变体值时回退到 'secondary'\n const type: ButtonType = VALID_TYPES.includes(rawType as ButtonType)\n ? (rawType as ButtonType)\n : 'secondary';\n\n const contextDisabled = useContext(DisabledContext);\n const mergedDisabled = disabled ?? contextDisabled;\n\n const contentSize = useContext(SizeContext);\n const { compactSize, compactItemClassnames } =\n useCompactItemContext(btnPrefix);\n const size = customSize || compactSize || contentSize || 'middle';\n\n const [innerLoading, setInnerLoading] = useState(false);\n\n useEffect(() => {\n if (typeof loading === 'object' && loading.delay) {\n const timer = setTimeout(() => setInnerLoading(true), loading.delay);\n return () => clearTimeout(timer);\n }\n setInnerLoading(!!loading);\n }, [loading]);\n\n const isDisabled = innerLoading || mergedDisabled;\n const iconNode = setIcon(icon as React.ReactElement, innerLoading);\n\n // Build compact-mode border-radius and margin overrides\n const compactClasses = compactItemClassnames\n ? cn(\n // all compact items: remove border-radius on inner edges\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '!tw-rounded-l-none',\n !compactItemClassnames[`${btnPrefix}-compact-last-item`] &&\n '!tw-rounded-r-none',\n // merge borders via negative margin (except first item)\n !compactItemClassnames[`${btnPrefix}-compact-first-item`] &&\n '-tw-ml-px',\n )\n : undefined;\n\n const isIconOnly = !!icon && !children && !showArrow;\n\n const classes = cn(\n buttonVariants({\n type,\n size,\n disabled: !!isDisabled,\n block: !!block,\n shape,\n }),\n ghost &&\n '!tw-border-transparent !tw-bg-[var(--action-ghost-normal)] !tw-shadow-none hover:!tw-border-transparent',\n ghost &&\n type === 'primary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-[var(--alias-radius-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-[var(--alias-radius-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-[var(--alias-radius-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-[var(--alias-radius-75)] !tw-px-[var(--component-padding-md)] !tw-py-0 !tw-bg-[var(--action-ghost-normal)]',\n ghost &&\n type === 'primary' &&\n '!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-primary-subtle-hover)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-destructive-hover)]',\n ghost &&\n type === 'secondary' &&\n '!tw-rounded-[var(--alias-radius-75)] hover:!tw-bg-[var(--action-ghost-hover)]',\n ghost &&\n type === 'inverse' &&\n '!tw-rounded-[var(--alias-radius-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: square button, no min-width, centered padding\n isIconOnly && 'tw-aspect-square !tw-min-w-0 !tw-px-0',\n compactClasses,\n className,\n );\n\n const contentClasses = cn(\n 'tw-inline-flex tw-items-center tw-gap-1',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n 'tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]',\n );\n\n const arrowNode = showArrow ? (\n <span className=\"ald-btn-arrow tw-inline-flex tw-shrink-0 tw-items-center\">\n <ChevronDownLine size={16} />\n </span>\n ) : null;\n\n const buttonContent = (\n <>\n {iconNode}\n {children && <span className={contentClasses}>{children}</span>}\n {arrowNode}\n </>\n );\n\n if (href) {\n return (\n <a\n {...rest}\n className={classes}\n style={style}\n href={isDisabled ? undefined : href}\n target={target}\n ref={ref as React.Ref<HTMLAnchorElement>}\n onClick={isDisabled ? undefined : onClick}\n aria-disabled={isDisabled || undefined}\n >\n {buttonContent}\n </a>\n );\n }\n\n return (\n <button\n {...rest}\n type={\n htmlType === 'submit'\n ? 'submit'\n : htmlType === 'reset'\n ? 'reset'\n : 'button'\n }\n className={classes}\n style={style}\n disabled={isDisabled}\n aria-disabled={isDisabled || undefined}\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n >\n {buttonContent}\n </button>\n );\n}\n\nexport default forwardRef(Button);\n"],"mappings":";;;;;;;;;;AAQA,IAAa,YAAY;AAiDzB,IAAa,WACX,UACA,YACG;AACH,KAAI,QACF,QACE,oBAAC,QAAD;EACE,WAAU;EACV,MAAM;EACN,OAAM;EACN,CAAA;AAIN,KAAI,UAAU;EACZ,MAAM,IAAqC;GACzC,WAAW;GACX,MAAM;GACN,GAAG,SAAS;GACb;AACD,IAAE,OAAO;AACT,SAAO,MAAM,aAAa,UAAU,EAAE;;AAExC,QAAO,oBAAA,UAAA,EAAK,CAAA;;AAGd,IAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,MAAM;GACJ,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACD,QAAQ;IACN,GAAG,UAAU;IACb;IACA;IACD;GACD,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,OAAO;EACP,OAAO;EACR;CACF,CACF;AAED,IAAM,cAA4B;CAChC;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,OAAO,OAAqB,KAA6B;CAChE,MAAM,EACJ,MAAM,UAAU,aAChB,MAAM,YACN,QAAQ,WACR,UAAU,OACV,UACA,MACA,WACA,UACA,MACA,QACA,SACA,OACA,WAAW,UACX,OACA,OACA,YAAY,OACZ,GAAG,SACD;CAIJ,MAAM,OAAmB,YAAY,SAAS,QAAsB,GAC/D,UACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,UAAU;CAClC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,OAAO,YAAY,YAAY,QAAQ,OAAO;GAChD,MAAM,QAAQ,iBAAiB,gBAAgB,KAAK,EAAE,QAAQ,MAAM;AACpE,gBAAa,aAAa,MAAM;;AAElC,kBAAgB,CAAC,CAAC,QAAQ;IACzB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,QAAQ,MAA4B,aAAa;CAGlE,MAAM,iBAAiB,wBACnB,GAEE,CAAC,sBAAsB,iCACrB,sBACF,CAAC,sBAAsB,gCACrB,sBAEF,CAAC,sBAAsB,iCACrB,YACH,GACD;CAEJ,MAAM,aAAa,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;CAE3C,MAAM,UAAU,GACd,eAAe;EACb;EACA;EACA,UAAU,CAAC,CAAC;EACZ,OAAO,CAAC,CAAC;EACT;EACD,CAAC,EACF,SACE,2GACF,SACE,SAAS,aACT,SAAS,YACT,4IACF,SACE,SAAS,eACT,SAAS,YACT,4IACF,SACE,SAAS,eACT,SAAS,YACT,4IACF,SACE,SAAS,aACT,SAAS,YACT,gLACF,SACE,SAAS,aACT,0FACF,SACE,SAAS,eACT,6FACF,SACE,SAAS,eACT,iFACF,SACE,SAAS,aACT,0FACF,SAAS,SAAS,aAAa,2CAC/B,SACE,SAAS,eACT,+CACF,SAAS,SAAS,eAAe,2CACjC,SAAS,SAAS,aAAa,4CAE/B,cAAc,yCACd,gBACA,UACD;CAED,MAAM,iBAAiB,GACrB,2CACA,SACE,SAAS,aACT,SAAS,YACT,iGACH;CAQD,MAAM,gBACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,YAAY,oBAAC,QAAD;GAAM,WAAW;GAAiB;GAAgB,CAAA;EATjD,YAChB,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,MAAD,EAAiB,MAAM,IAAM,CAAA;GACxB,CAAA,GACL;EAOC,EAAA,CAAA;AAGL,KAAI,KACF,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,aAAa,SAAY;EACvB;EACH;EACL,SAAS,aAAa,SAAY;EAClC,iBAAe,cAAc;YAE5B;EACC,CAAA;AAIR,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,MACE,aAAa,WACT,WACA,aAAa,UACb,UACA;EAEN,WAAW;EACJ;EACP,UAAU;EACV,iBAAe,cAAc;EACxB;EACI;YAER;EACM,CAAA;;AAIb,IAAA,iBAAe,WAAW,OAAO"}
@@ -5,17 +5,17 @@ import { jsx, jsxs } from "react/jsx-runtime";
5
5
  function Card(props) {
6
6
  const { title, extra, bordered = true, hoverable, size, className, style, bodyStyle, headStyle, children, cover, actions } = props;
7
7
  return /* @__PURE__ */ jsxs("div", {
8
- className: cn("ald-card tw-overflow-hidden tw-rounded-lg tw-bg-[var(--background-default)] tw-shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_6px_-1px_rgba(0,0,0,0.02),0_2px_4px_0_rgba(0,0,0,0.02)]", bordered && "tw-border tw-border-solid tw-border-[#f0f0f0]", hoverable && "tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]", size === "small" && "ald-card-small", className),
8
+ className: cn("ald-card tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-150 tw-outline tw-outline-1 tw-outline-[var(--border-default-alpha)] tw-bg-[var(--background-default)] tw-shadow-[0_2px_2px_-1px_rgba(27,36,44,0.04),0_2px_8px_-1px_rgba(27,36,44,0.08)]", !bordered && "!tw-outline-transparent", hoverable && "tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]", size === "small" && "ald-card-small", className),
9
9
  style,
10
10
  children: [
11
11
  (title || extra) && /* @__PURE__ */ jsxs("div", {
12
- className: "ald-card-head tw-flex tw-min-h-[48px] tw-items-center tw-justify-between tw-px-6 tw-py-0 tw-shadow-[inset_0_-1px_0_#f0f0f0]",
12
+ className: cn("ald-card-head tw-flex tw-items-center tw-justify-between tw-gap-4 tw-self-stretch tw-border-0 tw-border-b tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4", size === "small" && "!tw-px-4 !tw-py-3"),
13
13
  style: headStyle,
14
14
  children: [title && /* @__PURE__ */ jsx("div", {
15
- className: "ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]",
15
+ className: cn("ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]", size === "small" && "!tw-text-sm"),
16
16
  children: title
17
17
  }), extra && /* @__PURE__ */ jsx("div", {
18
- className: "ald-card-extra",
18
+ className: "ald-card-extra tw-text-sm",
19
19
  children: extra
20
20
  })]
21
21
  }),
@@ -24,7 +24,7 @@ function Card(props) {
24
24
  children: cover
25
25
  }),
26
26
  /* @__PURE__ */ jsx("div", {
27
- className: cn("ald-card-body ant-card-body tw-p-6", size === "small" && "tw-p-3"),
27
+ 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"),
28
28
  style: bodyStyle,
29
29
  children
30
30
  }),
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface CardProps {\n title?: React.ReactNode;\n extra?: React.ReactNode;\n bordered?: boolean;\n hoverable?: boolean;\n loading?: boolean;\n size?: 'default' | 'small';\n type?: 'inner';\n className?: string;\n style?: React.CSSProperties;\n bodyStyle?: React.CSSProperties;\n headStyle?: React.CSSProperties;\n children?: React.ReactNode;\n cover?: React.ReactNode;\n actions?: React.ReactNode[];\n}\n\nexport interface CardGridProps {\n className?: string;\n style?: React.CSSProperties;\n hoverable?: boolean;\n children?: React.ReactNode;\n}\n\nexport interface CardMetaProps {\n className?: string;\n style?: React.CSSProperties;\n avatar?: React.ReactNode;\n title?: React.ReactNode;\n description?: React.ReactNode;\n}\n\nfunction Card(props: CardProps) {\n const {\n title,\n extra,\n bordered = true,\n hoverable,\n size,\n className,\n style,\n bodyStyle,\n headStyle,\n children,\n cover,\n actions,\n } = props;\n\n return (\n <div\n className={cn(\n 'ald-card tw-overflow-hidden tw-rounded-lg tw-bg-[var(--background-default)] tw-shadow-[0_1px_2px_0_rgba(0,0,0,0.03),0_1px_6px_-1px_rgba(0,0,0,0.02),0_2px_4px_0_rgba(0,0,0,0.02)]',\n bordered && 'tw-border tw-border-solid tw-border-[#f0f0f0]',\n hoverable &&\n 'tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]',\n size === 'small' && 'ald-card-small',\n className,\n )}\n style={style}\n >\n {(title || extra) && (\n <div\n className=\"ald-card-head tw-flex tw-min-h-[48px] tw-items-center tw-justify-between tw-px-6 tw-py-0 tw-shadow-[inset_0_-1px_0_#f0f0f0]\"\n style={headStyle}\n >\n {title && (\n <div className=\"ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]\">\n {title}\n </div>\n )}\n {extra && <div className=\"ald-card-extra\">{extra}</div>}\n </div>\n )}\n {cover && <div className=\"ald-card-cover\">{cover}</div>}\n <div\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n className={cn(\n 'ald-card-body ant-card-body tw-p-6',\n size === 'small' && 'tw-p-3',\n )}\n style={bodyStyle}\n >\n {children}\n </div>\n {actions && actions.length > 0 && (\n <div className=\"ald-card-actions tw-flex tw-border-t tw-border-solid tw-border-[var(--border-default)]\">\n {actions.map((action, i) => (\n <div\n key={i}\n className=\"ald-card-action tw-flex-1 tw-py-3 tw-text-center\"\n >\n {action}\n </div>\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction Grid({ className, style, hoverable, children }: CardGridProps) {\n return (\n <div\n className={cn(\n 'ald-card-grid tw-w-1/3 tw-border-0 tw-border-b tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-p-6',\n hoverable && 'tw-transition-shadow hover:tw-shadow-md',\n className,\n )}\n style={style}\n >\n {children}\n </div>\n );\n}\n\nfunction Meta({ className, style, avatar, title, description }: CardMetaProps) {\n return (\n <div\n className={cn('ald-card-meta tw-flex tw-items-start tw-gap-4', className)}\n style={style}\n >\n {avatar && (\n <div className=\"ald-card-meta-avatar tw-flex-none\">{avatar}</div>\n )}\n <div className=\"ald-card-meta-detail tw-flex-1 tw-overflow-hidden\">\n {title && (\n <div className=\"ald-card-meta-title tw-truncate tw-text-base tw-font-medium tw-text-[var(--content-primary)]\">\n {title}\n </div>\n )}\n {description && (\n <div className=\"ald-card-meta-description tw-text-sm tw-text-[var(--content-secondary)]\">\n {description}\n </div>\n )}\n </div>\n </div>\n );\n}\n\nCard.Grid = Grid;\nCard.Meta = Meta;\n\nexport default Card;\n"],"mappings":";;;;AAmCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OACA,OACA,WAAW,MACX,WACA,MACA,WACA,OACA,WACA,WACA,UACA,OACA,YACE;AAEJ,QACE,qBAAC,OAAD;EACE,WAAW,GACT,qLACA,YAAY,iDACZ,aACE,yJACF,SAAS,WAAW,kBACpB,UACD;EACM;YATT;IAWI,SAAS,UACT,qBAAC,OAAD;IACE,WAAU;IACV,OAAO;cAFT,CAIG,SACC,oBAAC,OAAD;KAAK,WAAU;eACZ;KACG,CAAA,EAEP,SAAS,oBAAC,OAAD;KAAK,WAAU;eAAkB;KAAY,CAAA,CACnD;;GAEP,SAAS,oBAAC,OAAD;IAAK,WAAU;cAAkB;IAAY,CAAA;GACvD,oBAAC,OAAD;IAEE,WAAW,GACT,sCACA,SAAS,WAAW,SACrB;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"}
1
+ {"version":3,"file":"index.js","names":[],"sources":["../../src/Card/index.tsx"],"sourcesContent":["import React from 'react';\nimport { cn } from '../lib/utils';\n\nexport interface CardProps {\n title?: React.ReactNode;\n extra?: React.ReactNode;\n bordered?: boolean;\n hoverable?: boolean;\n loading?: boolean;\n size?: 'default' | 'small';\n type?: 'inner';\n className?: string;\n style?: React.CSSProperties;\n bodyStyle?: React.CSSProperties;\n headStyle?: React.CSSProperties;\n children?: React.ReactNode;\n cover?: React.ReactNode;\n actions?: React.ReactNode[];\n}\n\nexport interface CardGridProps {\n className?: string;\n style?: React.CSSProperties;\n hoverable?: boolean;\n children?: React.ReactNode;\n}\n\nexport interface CardMetaProps {\n className?: string;\n style?: React.CSSProperties;\n avatar?: React.ReactNode;\n title?: React.ReactNode;\n description?: React.ReactNode;\n}\n\nfunction Card(props: CardProps) {\n const {\n title,\n extra,\n bordered = true,\n hoverable,\n size,\n className,\n style,\n bodyStyle,\n headStyle,\n children,\n cover,\n actions,\n } = props;\n\n return (\n <div\n className={cn(\n 'ald-card tw-flex tw-flex-col tw-items-stretch tw-overflow-hidden tw-rounded-r-150 tw-outline tw-outline-1 tw-outline-[var(--border-default-alpha)] tw-bg-[var(--background-default)] tw-shadow-[0_2px_2px_-1px_rgba(27,36,44,0.04),0_2px_8px_-1px_rgba(27,36,44,0.08)]',\n !bordered && '!tw-outline-transparent',\n hoverable &&\n 'tw-cursor-pointer tw-transition-shadow hover:tw-shadow-[0_1px_2px_-2px_rgba(0,0,0,0.16),0_3px_6px_0_rgba(0,0,0,0.12),0_5px_12px_4px_rgba(0,0,0,0.09)]',\n size === 'small' && 'ald-card-small',\n className,\n )}\n style={style}\n >\n {(title || extra) && (\n <div\n className={cn(\n 'ald-card-head tw-flex tw-items-center tw-justify-between tw-gap-4 tw-self-stretch tw-border-0 tw-border-b tw-border-solid tw-border-[var(--border-default)] tw-px-6 tw-py-4',\n size === 'small' && '!tw-px-4 !tw-py-3',\n )}\n style={headStyle}\n >\n {title && (\n <div\n className={cn(\n 'ald-card-head-title tw-text-base tw-font-semibold tw-text-[var(--content-primary)]',\n size === 'small' && '!tw-text-sm',\n )}\n >\n {title}\n </div>\n )}\n {extra && <div className=\"ald-card-extra tw-text-sm\">{extra}</div>}\n </div>\n )}\n {cover && <div className=\"ald-card-cover\">{cover}</div>}\n <div\n // antd 兼容:保留 ant-* class,消费方 CSS 可能依赖该选择器\n className={cn(\n 'ald-card-body ant-card-body tw-flex tw-flex-col tw-items-start tw-gap-5 tw-self-stretch tw-p-6',\n size === 'small' && '!tw-gap-3 !tw-p-4',\n )}\n style={bodyStyle}\n >\n {children}\n </div>\n {actions && actions.length > 0 && (\n <div className=\"ald-card-actions tw-flex tw-border-t tw-border-solid tw-border-[var(--border-default)]\">\n {actions.map((action, i) => (\n <div\n key={i}\n className=\"ald-card-action tw-flex-1 tw-py-3 tw-text-center\"\n >\n {action}\n </div>\n ))}\n </div>\n )}\n </div>\n );\n}\n\nfunction Grid({ className, style, hoverable, children }: CardGridProps) {\n return (\n <div\n className={cn(\n 'ald-card-grid tw-w-1/3 tw-border-0 tw-border-b tw-border-r tw-border-solid tw-border-[var(--border-default)] tw-p-6',\n hoverable && 'tw-transition-shadow hover:tw-shadow-md',\n className,\n )}\n style={style}\n >\n {children}\n </div>\n );\n}\n\nfunction Meta({ className, style, avatar, title, description }: CardMetaProps) {\n return (\n <div\n className={cn('ald-card-meta tw-flex tw-items-start tw-gap-4', className)}\n style={style}\n >\n {avatar && (\n <div className=\"ald-card-meta-avatar tw-flex-none\">{avatar}</div>\n )}\n <div className=\"ald-card-meta-detail tw-flex-1 tw-overflow-hidden\">\n {title && (\n <div className=\"ald-card-meta-title tw-truncate tw-text-base tw-font-medium tw-text-[var(--content-primary)]\">\n {title}\n </div>\n )}\n {description && (\n <div className=\"ald-card-meta-description tw-text-sm tw-text-[var(--content-secondary)]\">\n {description}\n </div>\n )}\n </div>\n </div>\n );\n}\n\nCard.Grid = Grid;\nCard.Meta = Meta;\n\nexport default Card;\n"],"mappings":";;;;AAmCA,SAAS,KAAK,OAAkB;CAC9B,MAAM,EACJ,OACA,OACA,WAAW,MACX,WACA,MACA,WACA,OACA,WACA,WACA,UACA,OACA,YACE;AAEJ,QACE,qBAAC,OAAD;EACE,WAAW,GACT,0QACA,CAAC,YAAY,2BACb,aACE,yJACF,SAAS,WAAW,kBACpB,UACD;EACM;YATT;IAWI,SAAS,UACT,qBAAC,OAAD;IACE,WAAW,GACT,+KACA,SAAS,WAAW,oBACrB;IACD,OAAO;cALT,CAOG,SACC,oBAAC,OAAD;KACE,WAAW,GACT,sFACA,SAAS,WAAW,cACrB;eAEA;KACG,CAAA,EAEP,SAAS,oBAAC,OAAD;KAAK,WAAU;eAA6B;KAAY,CAAA,CAC9D;;GAEP,SAAS,oBAAC,OAAD;IAAK,WAAU;cAAkB;IAAY,CAAA;GACvD,oBAAC,OAAD;IAEE,WAAW,GACT,kGACA,SAAS,WAAW,oBACrB;IACD,OAAO;IAEN;IACG,CAAA;GACL,WAAW,QAAQ,SAAS,KAC3B,oBAAC,OAAD;IAAK,WAAU;cACZ,QAAQ,KAAK,QAAQ,MACpB,oBAAC,OAAD;KAEE,WAAU;eAET;KACG,EAJC,EAID,CACN;IACE,CAAA;GAEJ;;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,WAAW,YAA2B;AACtE,QACE,oBAAC,OAAD;EACE,WAAW,GACT,uHACA,aAAa,2CACb,UACD;EACM;EAEN;EACG,CAAA;;AAIV,SAAS,KAAK,EAAE,WAAW,OAAO,QAAQ,OAAO,eAA8B;AAC7E,QACE,qBAAC,OAAD;EACE,WAAW,GAAG,iDAAiD,UAAU;EAClE;YAFT,CAIG,UACC,oBAAC,OAAD;GAAK,WAAU;aAAqC;GAAa,CAAA,EAEnE,qBAAC,OAAD;GAAK,WAAU;aAAf,CACG,SACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,EAEP,eACC,oBAAC,OAAD;IAAK,WAAU;cACZ;IACG,CAAA,CAEJ;KACF;;;AAIV,KAAK,OAAO;AACZ,KAAK,OAAO"}
@@ -4,7 +4,7 @@ import { useContext, useEffect, useRef, useState } from "react";
4
4
  import { jsx, jsxs } from "react/jsx-runtime";
5
5
  //#region src/Checkbox/index.tsx
6
6
  function Checkbox(props) {
7
- const { className, disabled: customDisabled, size, checked: controlledChecked, defaultChecked, indeterminate, onChange, onClick, autoFocus, children, value, name, style } = props;
7
+ const { className, disabled: customDisabled, alert, bold, size, checked: controlledChecked, defaultChecked, indeterminate, onChange, onClick, autoFocus, children, value, name, style } = props;
8
8
  const disabled = useContext(DisabledContext);
9
9
  const mergedDisabled = customDisabled ?? disabled;
10
10
  const isControlled = "checked" in props;
@@ -36,17 +36,10 @@ function Checkbox(props) {
36
36
  };
37
37
  return /* @__PURE__ */ jsxs("label", {
38
38
  onClick: handleLabelClick,
39
- className: cn("ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-leading-5", mergedDisabled && "tw-cursor-default", size === "small" && "ald-checkbox-small", !mergedDisabled && "[&:hover_.ald-checkbox-inner]:tw-border-[var(--interaction-border-hover)]", !mergedDisabled && checked && "[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]", className),
39
+ className: cn("ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-leading-5", mergedDisabled && "tw-cursor-default", size === "small" && "ald-checkbox-small", !mergedDisabled && "[&:hover_.ald-checkbox-inner]:tw-border-2 [&:hover_.ald-checkbox-inner]:tw-border-[var(--interaction-border-hover)]", !mergedDisabled && checked && "[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]", className),
40
40
  style,
41
41
  children: [/* @__PURE__ */ jsxs("span", {
42
- className: cn("ald-checkbox-inner tw-relative tw-box-border tw-block tw-rounded-sm", checked && !mergedDisabled && "ald-checkbox-checked tw-bg-[var(--interaction-default-normal)]", checked && mergedDisabled && "ald-checkbox-checked tw-bg-[var(--alias-colors-bg-selected-default)]", !checked && !indeterminate && "tw-bg-[var(--interaction-background-form-field)]", indeterminate && !checked && "ald-checkbox-indeterminate tw-bg-[var(--interaction-default-normal)]"),
43
- style: {
44
- width: 14,
45
- height: 14,
46
- minWidth: 14,
47
- minHeight: 14,
48
- border: checked || indeterminate && !checked ? mergedDisabled && checked ? "1px solid var(--alias-colors-border-disabled)" : "none" : "1px solid var(--interaction-border-neutral-normal)"
49
- },
42
+ className: cn("ald-checkbox-inner tw-relative tw-box-border tw-flex tw-h-4 tw-w-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-all tw-duration-200", checked && "ald-checkbox-checked tw-border-transparent tw-bg-[var(--interaction-default-normal)]", mergedDisabled && "tw-opacity-50", !checked && !indeterminate && !alert && "tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--interaction-background-form-field)]", !checked && !indeterminate && alert && "tw-border-[var(--interaction-border-alert)] tw-bg-[var(--interaction-background-form-field)]", indeterminate && !checked && "ald-checkbox-indeterminate tw-border-transparent tw-bg-[var(--interaction-default-normal)]"),
50
43
  children: [/* @__PURE__ */ jsx("input", {
51
44
  ref: inputRef,
52
45
  type: "checkbox",
@@ -65,7 +58,7 @@ function Checkbox(props) {
65
58
  }
66
59
  })]
67
60
  }), children && /* @__PURE__ */ jsx("span", {
68
- className: cn("ald-checkbox-label tw-select-none tw-pl-1.5 tw-text-[var(--alias-colors-text-default)]", size === "small" ? "tw-text-xs" : "tw-text-sm", mergedDisabled && "tw-cursor-default"),
61
+ className: cn("ald-checkbox-label tw-select-none tw-text-[var(--alias-colors-text-default)]", size === "small" ? "tw-text-xs" : "tw-text-sm", bold && "tw-font-medium", mergedDisabled && "tw-cursor-default"),
69
62
  children
70
63
  })]
71
64
  });
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","names":[],"sources":["../../src/Checkbox/index.tsx"],"sourcesContent":["import React, { useContext, useEffect, useRef, useState } from 'react';\nimport DisabledContext from '../ConfigProvider/DisabledContext';\nimport { cn } from '../lib/utils';\nimport {\n CheckboxChangeEvent,\n CheckboxValueType,\n ICheckboxGroupProps,\n ICheckboxProps,\n} from './type';\n\nexport type { CheckboxChangeEvent, CheckboxValueType };\nexport type { CheckboxOptionType } from './type';\nexport type { ICheckboxProps, ICheckboxGroupProps };\n\nfunction Checkbox(props: ICheckboxProps) {\n const {\n className,\n disabled: customDisabled,\n size,\n checked: controlledChecked,\n defaultChecked,\n indeterminate,\n onChange,\n onClick,\n autoFocus,\n children,\n value,\n name,\n style,\n } = props;\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const isControlled = 'checked' in props;\n const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);\n const checked = isControlled ? controlledChecked : innerChecked;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = !!indeterminate;\n }\n }, [indeterminate]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (mergedDisabled) return;\n const newChecked = e.target.checked;\n if (!isControlled) {\n setInnerChecked(newChecked);\n }\n onChange?.({\n target: { checked: newChecked, value },\n nativeEvent: e.nativeEvent,\n });\n };\n\n const handleLabelClick = (e: React.MouseEvent) => {\n if (mergedDisabled) return;\n if (onClick) {\n // Table row selection uses onClick — prevent label from also toggling input\n e.preventDefault();\n e.stopPropagation();\n onClick(e);\n }\n };\n\n return (\n <label\n onClick={handleLabelClick}\n className={cn(\n 'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-leading-5',\n mergedDisabled && 'tw-cursor-default',\n size === 'small' && 'ald-checkbox-small',\n !mergedDisabled &&\n '[&:hover_.ald-checkbox-inner]:tw-border-[var(--interaction-border-hover)]',\n !mergedDisabled &&\n checked &&\n '[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]',\n className,\n )}\n style={style}\n >\n <span\n className={cn(\n 'ald-checkbox-inner tw-relative tw-box-border tw-block tw-rounded-sm',\n checked &&\n !mergedDisabled &&\n 'ald-checkbox-checked tw-bg-[var(--interaction-default-normal)]',\n checked &&\n mergedDisabled &&\n 'ald-checkbox-checked tw-bg-[var(--alias-colors-bg-selected-default)]',\n !checked &&\n !indeterminate &&\n 'tw-bg-[var(--interaction-background-form-field)]',\n indeterminate &&\n !checked &&\n 'ald-checkbox-indeterminate tw-bg-[var(--interaction-default-normal)]',\n )}\n style={{\n width: 14,\n height: 14,\n minWidth: 14,\n minHeight: 14,\n border:\n checked || (indeterminate && !checked)\n ? mergedDisabled && checked\n ? '1px solid var(--alias-colors-border-disabled)'\n : 'none'\n : '1px solid var(--interaction-border-neutral-normal)',\n }}\n >\n <input\n ref={inputRef}\n type=\"checkbox\"\n className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n checked={!!checked}\n disabled={mergedDisabled}\n onChange={handleChange}\n autoFocus={autoFocus}\n name={name}\n value={value as string}\n />\n {(checked || (indeterminate && !checked)) && (\n <span\n className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n style={{\n backgroundImage:\n indeterminate && !checked\n ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n backgroundSize:\n indeterminate && !checked ? '10px 2px' : '10px 8px',\n }}\n />\n )}\n </span>\n {children && (\n <span\n className={cn(\n 'ald-checkbox-label tw-select-none tw-pl-1.5 tw-text-[var(--alias-colors-text-default)]',\n size === 'small' ? 'tw-text-xs' : 'tw-text-sm',\n mergedDisabled && 'tw-cursor-default',\n )}\n >\n {children}\n </span>\n )}\n </label>\n );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n const {\n className,\n disabled: customDisabled,\n size,\n options,\n value: controlledValue,\n defaultValue,\n onChange,\n direction,\n name,\n children,\n } = props;\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState<CheckboxValueType[]>(\n defaultValue ?? [],\n );\n const value = isControlled ? controlledValue ?? [] : innerValue;\n\n const handleGroupChange = (\n itemValue: CheckboxValueType,\n itemChecked: boolean,\n ) => {\n const newValue = itemChecked\n ? [...value, itemValue]\n : value.filter((v) => v !== itemValue);\n if (!isControlled) {\n setInnerValue(newValue);\n }\n onChange?.(newValue);\n };\n\n const renderOptions = () => {\n if (!options) return children;\n return options.map((opt) => {\n const optObj =\n typeof opt === 'object' ? opt : { label: String(opt), value: opt };\n return (\n <Checkbox\n key={String(optObj.value)}\n value={optObj.value}\n disabled={mergedDisabled || optObj.disabled}\n checked={value.includes(optObj.value)}\n size={size}\n name={name}\n onChange={(e) => handleGroupChange(optObj.value, e.target.checked)}\n >\n {optObj.label}\n </Checkbox>\n );\n });\n };\n\n return (\n <div\n className={cn(\n 'ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3',\n direction === 'vertical' && 'ald-checkbox-group-vertical tw-flex-col',\n size === 'small' && 'ald-checkbox-group-small',\n className,\n )}\n >\n {renderOptions()}\n </div>\n );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}
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 } = props;\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const isControlled = 'checked' in props;\n const [innerChecked, setInnerChecked] = useState(defaultChecked ?? false);\n const checked = isControlled ? controlledChecked : innerChecked;\n\n const inputRef = useRef<HTMLInputElement>(null);\n\n useEffect(() => {\n if (inputRef.current) {\n inputRef.current.indeterminate = !!indeterminate;\n }\n }, [indeterminate]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (mergedDisabled) return;\n const newChecked = e.target.checked;\n if (!isControlled) {\n setInnerChecked(newChecked);\n }\n onChange?.({\n target: { checked: newChecked, value },\n nativeEvent: e.nativeEvent,\n });\n };\n\n const handleLabelClick = (e: React.MouseEvent) => {\n if (mergedDisabled) return;\n if (onClick) {\n // Table row selection uses onClick — prevent label from also toggling input\n e.preventDefault();\n e.stopPropagation();\n onClick(e);\n }\n };\n\n return (\n <label\n onClick={handleLabelClick}\n className={cn(\n 'ald-checkbox-wrapper ald-checkbox tw-inline-flex tw-cursor-pointer tw-items-center tw-gap-1 tw-leading-5',\n mergedDisabled && 'tw-cursor-default',\n size === 'small' && 'ald-checkbox-small',\n !mergedDisabled &&\n '[&:hover_.ald-checkbox-inner]:tw-border-2 [&:hover_.ald-checkbox-inner]:tw-border-[var(--interaction-border-hover)]',\n !mergedDisabled &&\n checked &&\n '[&:hover_.ald-checkbox-inner]:tw-border-transparent [&:hover_.ald-checkbox-inner]:tw-bg-[var(--interaction-default-hover)]',\n className,\n )}\n style={style}\n >\n <span\n className={cn(\n 'ald-checkbox-inner tw-relative tw-box-border tw-flex tw-h-4 tw-w-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-all tw-duration-200',\n checked &&\n 'ald-checkbox-checked tw-border-transparent tw-bg-[var(--interaction-default-normal)]',\n mergedDisabled && 'tw-opacity-50',\n !checked &&\n !indeterminate &&\n !alert &&\n 'tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--interaction-background-form-field)]',\n !checked &&\n !indeterminate &&\n alert &&\n 'tw-border-[var(--interaction-border-alert)] tw-bg-[var(--interaction-background-form-field)]',\n indeterminate &&\n !checked &&\n 'ald-checkbox-indeterminate tw-border-transparent tw-bg-[var(--interaction-default-normal)]',\n )}\n >\n <input\n ref={inputRef}\n type=\"checkbox\"\n className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n checked={!!checked}\n disabled={mergedDisabled}\n onChange={handleChange}\n autoFocus={autoFocus}\n name={name}\n value={value as string}\n />\n {(checked || (indeterminate && !checked)) && (\n <span\n className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n style={{\n backgroundImage:\n indeterminate && !checked\n ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n backgroundSize:\n indeterminate && !checked ? '10px 2px' : '10px 8px',\n }}\n />\n )}\n </span>\n {children && (\n <span\n className={cn(\n 'ald-checkbox-label tw-select-none tw-text-[var(--alias-colors-text-default)]',\n size === 'small' ? 'tw-text-xs' : 'tw-text-sm',\n bold && 'tw-font-medium',\n mergedDisabled && 'tw-cursor-default',\n )}\n >\n {children}\n </span>\n )}\n </label>\n );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n const {\n className,\n disabled: customDisabled,\n size,\n options,\n value: controlledValue,\n defaultValue,\n onChange,\n direction,\n name,\n children,\n } = props;\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState<CheckboxValueType[]>(\n defaultValue ?? [],\n );\n const value = isControlled ? controlledValue ?? [] : innerValue;\n\n const handleGroupChange = (\n itemValue: CheckboxValueType,\n itemChecked: boolean,\n ) => {\n const newValue = itemChecked\n ? [...value, itemValue]\n : value.filter((v) => v !== itemValue);\n if (!isControlled) {\n setInnerValue(newValue);\n }\n onChange?.(newValue);\n };\n\n const renderOptions = () => {\n if (!options) return children;\n return options.map((opt) => {\n const optObj =\n typeof opt === 'object' ? opt : { label: String(opt), value: opt };\n return (\n <Checkbox\n key={String(optObj.value)}\n value={optObj.value}\n disabled={mergedDisabled || optObj.disabled}\n checked={value.includes(optObj.value)}\n size={size}\n name={name}\n onChange={(e) => handleGroupChange(optObj.value, e.target.checked)}\n >\n {optObj.label}\n </Checkbox>\n );\n });\n };\n\n return (\n <div\n className={cn(\n 'ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3',\n direction === 'vertical' && 'ald-checkbox-group-vertical tw-flex-col',\n size === 'small' && 'ald-checkbox-group-small',\n className,\n )}\n >\n {renderOptions()}\n </div>\n );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}
@@ -23,6 +23,8 @@ export interface ICheckboxProps {
23
23
  checked?: boolean;
24
24
  defaultChecked?: boolean;
25
25
  disabled?: boolean;
26
+ alert?: boolean;
27
+ bold?: boolean;
26
28
  indeterminate?: boolean;
27
29
  onChange?: (e: CheckboxChangeEvent) => void;
28
30
  onClick?: (e: React.MouseEvent) => void;
@@ -1,32 +1,39 @@
1
1
  import { cn } from "../lib/utils.js";
2
- import Memo from "../Icon/components/ArrowDownLightLine.js";
3
- import Memo$1 from "../Icon/components/ArrowRightLightLine.js";
4
- import React, { useState } from "react";
2
+ import Memo from "../Icon/components/ArrowRightLightLine.js";
3
+ import React, { useRef, useState } from "react";
5
4
  import { Fragment, jsx, jsxs } from "react/jsx-runtime";
6
5
  //#region src/Collapse/index.tsx
7
6
  /** Internal rendering component for a single panel */
8
7
  function CollapsePanelInternal(props) {
9
- const { header, isActive, onToggle, disabled, extra, className, style, children, forceRender, expandIcon, expandIconPosition = "start" } = props;
8
+ const { header, isActive, onToggle, disabled, extra, className, style, children, forceRender, expandIcon, expandIconPosition = "start", bordered } = props;
9
+ const contentRef = useRef(null);
10
+ const [rendered, setRendered] = useState(isActive || !!forceRender);
11
+ if (isActive && !rendered) setRendered(true);
12
+ const handleTransitionEnd = () => {
13
+ if (!isActive && !forceRender) setRendered(false);
14
+ };
15
+ const iconNode = expandIcon ? expandIcon({ isActive }) : /* @__PURE__ */ jsx(Memo, {
16
+ size: 20,
17
+ color: "var(--alias-colors-icon-subtle)"
18
+ });
10
19
  const iconElement = /* @__PURE__ */ jsx("span", {
11
20
  className: "ald-collapse-expand-icon ant-collapse-expand-icon tw-flex tw-items-center",
12
- children: expandIcon ? expandIcon({ isActive }) : isActive ? /* @__PURE__ */ jsx(Memo, {
13
- size: 20,
14
- color: "var(--alias-colors-icon-subtle)"
15
- }) : /* @__PURE__ */ jsx(Memo$1, {
16
- size: 20,
17
- color: "var(--alias-colors-icon-subtle)"
18
- })
21
+ style: {
22
+ transform: isActive ? "rotate(90deg)" : "rotate(0deg)",
23
+ transition: "transform 200ms"
24
+ },
25
+ children: iconNode
19
26
  });
20
27
  return /* @__PURE__ */ jsxs("div", {
21
- className: cn("ald-collapse-item ant-collapse-item tw-border-b tw-border-solid tw-border-[var(--border-default)]", isActive && "ald-collapse-item-active", disabled && "tw-pointer-events-none tw-opacity-50", className),
28
+ className: cn("ald-collapse-item ant-collapse-item tw-w-full", isActive && "ald-collapse-item-active", disabled && "tw-pointer-events-none tw-opacity-50", className),
22
29
  style,
23
30
  children: [/* @__PURE__ */ jsxs("div", {
24
- className: "ald-collapse-header ant-collapse-header tw-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-px-4 tw-py-3",
31
+ className: "ald-collapse-header ant-collapse-header tw-flex tw-cursor-pointer tw-items-center tw-gap-2 tw-p-3",
25
32
  onClick: disabled ? void 0 : onToggle,
26
33
  children: [
27
34
  expandIconPosition === "start" && iconElement,
28
35
  /* @__PURE__ */ jsx("span", {
29
- className: "ald-collapse-header-text ant-collapse-header-text tw-flex-1",
36
+ 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)]",
30
37
  children: header
31
38
  }),
32
39
  extra && /* @__PURE__ */ jsx("span", {
@@ -35,10 +42,18 @@ function CollapsePanelInternal(props) {
35
42
  }),
36
43
  expandIconPosition === "end" && iconElement
37
44
  ]
38
- }), (isActive || forceRender) && /* @__PURE__ */ jsx("div", {
39
- className: "ald-collapse-content ant-collapse-content tw-px-4 tw-pb-4",
40
- style: !isActive && forceRender ? { display: "none" } : void 0,
41
- children
45
+ }), /* @__PURE__ */ jsx("div", {
46
+ className: "tw-grid tw-transition-[grid-template-rows] tw-duration-200",
47
+ style: { gridTemplateRows: isActive ? "1fr" : "0fr" },
48
+ onTransitionEnd: handleTransitionEnd,
49
+ children: /* @__PURE__ */ jsx("div", {
50
+ className: "tw-overflow-hidden",
51
+ children: rendered && /* @__PURE__ */ jsx("div", {
52
+ ref: contentRef,
53
+ className: cn("ald-collapse-content ant-collapse-content tw-flex tw-items-start tw-gap-2.5 tw-self-stretch", bordered ? "tw-bg-[var(--background-default)] tw-p-4" : "tw-pb-4 tw-pl-10 tw-pr-4 tw-pt-0"),
54
+ children
55
+ })
56
+ })
42
57
  })]
43
58
  });
44
59
  }
@@ -75,7 +90,7 @@ function panelChildrenToItems(children) {
75
90
  return items;
76
91
  }
77
92
  var Collapse = (props) => {
78
- const { defaultActiveKey = [], activeKey: controlledActiveKey, accordion, onChange, className, style, bordered = true, expandIconPosition, expandIcon, items: itemsProp, children } = props;
93
+ const { defaultActiveKey = [], activeKey: controlledActiveKey, accordion, onChange, className, style, bordered = true, ghost, expandIconPosition, expandIcon, items: itemsProp, children } = props;
79
94
  const resolvedPosition = expandIconPosition === "left" ? "start" : expandIconPosition === "right" ? "end" : expandIconPosition ?? "start";
80
95
  const normalizeKeys = (keys) => {
81
96
  if (!keys) return [];
@@ -92,7 +107,7 @@ var Collapse = (props) => {
92
107
  };
93
108
  const items = itemsProp || (children ? panelChildrenToItems(children) : void 0);
94
109
  const renderItems = () => {
95
- if (items && items.length > 0) return items.map((item) => /* @__PURE__ */ jsx(CollapsePanelInternal, {
110
+ if (items && items.length > 0) return items.map((item, index) => /* @__PURE__ */ jsxs(React.Fragment, { children: [index > 0 && /* @__PURE__ */ jsx("div", { className: "ald-collapse-divider" }), /* @__PURE__ */ jsx(CollapsePanelInternal, {
96
111
  panelKey: item.key,
97
112
  header: item.label,
98
113
  isActive: activeKeys.includes(item.key),
@@ -104,12 +119,13 @@ var Collapse = (props) => {
104
119
  forceRender: item.forceRender,
105
120
  expandIcon,
106
121
  expandIconPosition: resolvedPosition,
122
+ bordered,
107
123
  children: item.children
108
- }, item.key));
124
+ })] }, item.key));
109
125
  return children;
110
126
  };
111
127
  return /* @__PURE__ */ jsx("div", {
112
- className: cn("ald-collapse ant-collapse", bordered && "tw-rounded-[6px] tw-border tw-border-solid tw-border-[var(--alias-colors-border-default)] tw-bg-[var(--alias-colors-bg-skeleton-subtle)]", className),
128
+ className: cn("ald-collapse ant-collapse tw-flex tw-flex-col tw-items-start tw-overflow-hidden tw-rounded-r-75 [&>.ald-collapse-divider]:tw-h-px [&>.ald-collapse-divider]:tw-w-full [&>.ald-collapse-divider]:tw-bg-[var(--border-default)]", !bordered && !ghost && "tw-bg-[var(--background-neutral-subtle)]", bordered && "tw-border tw-border-solid tw-border-[var(--border-default)] tw-bg-[var(--background-neutral-subtle)]", className),
113
129
  style,
114
130
  children: renderItems()
115
131
  });