@aloudata/aloudata-design 3.0.0-beta.2 → 3.0.0-beta.20
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.
- package/dist/AMenu.d.ts +2 -0
- package/dist/AProgress/index.d.ts +1 -1
- package/dist/AProgress/index.js +19 -5
- package/dist/AProgress/index.js.map +1 -1
- package/dist/AProgress.d.ts +2 -0
- package/dist/Alert/index.d.ts +1 -1
- package/dist/Alert/index.js +22 -8
- package/dist/Alert/index.js.map +1 -1
- package/dist/Alert.d.ts +2 -0
- package/dist/App.d.ts +2 -0
- package/dist/Avatar/component/Avatar/index.d.ts +1 -1
- package/dist/Avatar/component/Avatar/index.js +4 -4
- package/dist/Avatar/component/Avatar/index.js.map +1 -1
- package/dist/Avatar/component/Avatar/type.d.ts +1 -1
- package/dist/Avatar/component/Avatar/type.js +6 -1
- package/dist/Avatar/component/Avatar/type.js.map +1 -1
- package/dist/Avatar/component/Avatar.d.ts +2 -0
- package/dist/Avatar/index.js +67 -8
- package/dist/Avatar/index.js.map +1 -1
- package/dist/Avatar.d.ts +2 -0
- package/dist/Badge/index.d.ts +1 -0
- package/dist/Badge/index.js +32 -9
- package/dist/Badge/index.js.map +1 -1
- package/dist/Badge.d.ts +2 -0
- package/dist/Breadcrumb/index.js +21 -12
- package/dist/Breadcrumb/index.js.map +1 -1
- package/dist/Breadcrumb.d.ts +2 -0
- package/dist/Button/index.d.ts +4 -0
- package/dist/Button/index.js +39 -32
- package/dist/Button/index.js.map +1 -1
- package/dist/Button.d.ts +2 -0
- package/dist/Card/index.js +5 -5
- package/dist/Card/index.js.map +1 -1
- package/dist/Card.d.ts +2 -0
- package/dist/Carousel.d.ts +2 -0
- package/dist/Checkbox/component/CheckboxGroup.d.ts +2 -0
- package/dist/Checkbox/index.js +5 -12
- package/dist/Checkbox/index.js.map +1 -1
- package/dist/Checkbox/type.d.ts +4 -1
- package/dist/Checkbox.d.ts +2 -0
- package/dist/Col.d.ts +2 -0
- package/dist/Collapse/index.d.ts +2 -0
- package/dist/Collapse/index.js +40 -24
- package/dist/Collapse/index.js.map +1 -1
- package/dist/Collapse.d.ts +2 -0
- package/dist/ColorPicker/ComplexColorPicker.d.ts +2 -0
- package/dist/ColorPicker.d.ts +2 -0
- package/dist/ConfigProvider.d.ts +2 -0
- package/dist/DataPreviewTable/components/Body.d.ts +2 -0
- package/dist/DataPreviewTable/components/DragBar.d.ts +2 -0
- package/dist/DataPreviewTable/components/Header.d.ts +2 -0
- package/dist/DataPreviewTable/index.js +1 -1
- package/dist/DataPreviewTable/index.js.map +1 -1
- package/dist/DataPreviewTable.d.ts +2 -0
- package/dist/DatePicker/index.d.ts +38 -3
- package/dist/DatePicker/index.js +55 -9
- package/dist/DatePicker/index.js.map +1 -1
- package/dist/DatePicker.d.ts +2 -0
- package/dist/Divider.d.ts +2 -0
- package/dist/DoubleCircleIcon.d.ts +2 -0
- package/dist/Drawer/index.d.ts +2 -0
- package/dist/Drawer/index.js +102 -47
- package/dist/Drawer/index.js.map +1 -1
- package/dist/Drawer.d.ts +2 -0
- package/dist/Dropdown/index.d.ts +5 -0
- package/dist/Dropdown/index.js +155 -34
- package/dist/Dropdown/index.js.map +1 -1
- package/dist/Dropdown.d.ts +2 -0
- package/dist/Empty.d.ts +2 -0
- package/dist/Form/index.d.ts +54 -4
- package/dist/Form/index.js +61 -34
- package/dist/Form/index.js.map +1 -1
- package/dist/Form.d.ts +2 -0
- package/dist/HighlightText/index.js +1 -1
- package/dist/HighlightText/index.js.map +1 -1
- package/dist/HighlightText.d.ts +2 -0
- package/dist/Icon.d.ts +2 -0
- package/dist/IconButton.d.ts +2 -0
- package/dist/Input/components/Input/index.d.ts +8 -2
- package/dist/Input/components/Input/index.js +18 -6
- package/dist/Input/components/Input/index.js.map +1 -1
- package/dist/Input/components/Input.d.ts +2 -0
- package/dist/Input/components/Password.d.ts +2 -0
- package/dist/Input/components/TextArea/index.d.ts +4 -0
- package/dist/Input/components/TextArea/index.js.map +1 -1
- package/dist/Input/components/TextArea.d.ts +2 -0
- package/dist/Input.d.ts +2 -0
- package/dist/InputNumber/type.d.ts +3 -2
- package/dist/InputNumber.d.ts +2 -0
- package/dist/InputSearch/index.js +0 -1
- package/dist/InputSearch/index.js.map +1 -1
- package/dist/InputSearch.d.ts +2 -0
- package/dist/Layout/index.js +1 -1
- package/dist/Layout/index.js.map +1 -1
- package/dist/Layout.d.ts +2 -0
- package/dist/List.d.ts +2 -0
- package/dist/LogicTree/DisplayLogicTree.d.ts +1 -1
- package/dist/LogicTree/DisplayLogicTree.js.map +1 -1
- package/dist/LogicTree/components/DisplayLogicItem/index.d.ts +1 -1
- package/dist/LogicTree/components/DisplayLogicItem/index.js +1 -1
- package/dist/LogicTree/components/DisplayLogicItem/index.js.map +1 -1
- package/dist/LogicTree/components/DisplayLogicItem.d.ts +2 -0
- package/dist/LogicTree/components/LogicItem/index.js +2 -3
- package/dist/LogicTree/components/LogicItem/index.js.map +1 -1
- package/dist/LogicTree/components/LogicItem.d.ts +2 -0
- package/dist/LogicTree/index.d.ts +1 -1
- package/dist/LogicTree/index.js +26 -10
- package/dist/LogicTree/index.js.map +1 -1
- package/dist/LogicTree.d.ts +2 -0
- package/dist/MemberPicker/components/NickLabel.js +1 -1
- package/dist/MemberPicker/components/NickLabel.js.map +1 -1
- package/dist/MemberPicker/components/Panel.js +13 -14
- package/dist/MemberPicker/components/Panel.js.map +1 -1
- package/dist/MemberPicker/index.js +10 -5
- package/dist/MemberPicker/index.js.map +1 -1
- package/dist/MemberPicker/utils.d.ts +2 -0
- package/dist/MemberPicker.d.ts +2 -0
- package/dist/Menu/index.d.ts +4 -0
- package/dist/Menu/index.js +35 -13
- package/dist/Menu/index.js.map +1 -1
- package/dist/Menu.d.ts +2 -0
- package/dist/Modal/index.d.ts +6 -2
- package/dist/Modal/index.js +119 -66
- package/dist/Modal/index.js.map +1 -1
- package/dist/Modal.d.ts +2 -0
- package/dist/OverflowCount.d.ts +2 -0
- package/dist/Pagination.d.ts +2 -0
- package/dist/Popconfirm/index.js +6 -1
- package/dist/Popconfirm/index.js.map +1 -1
- package/dist/Popconfirm.d.ts +2 -0
- package/dist/Popover/index.d.ts +1 -0
- package/dist/Popover/index.js +5 -3
- package/dist/Popover/index.js.map +1 -1
- package/dist/Popover.d.ts +2 -0
- package/dist/Progress/index.d.ts +0 -3
- package/dist/Progress/index.js +0 -3
- package/dist/Progress/index.js.map +1 -1
- package/dist/Progress.d.ts +2 -0
- package/dist/Radio/components/Group.d.ts +2 -0
- package/dist/Radio/components/Radio/index.js +14 -25
- package/dist/Radio/components/Radio/index.js.map +1 -1
- package/dist/Radio/components/Radio.d.ts +2 -0
- package/dist/Radio.d.ts +2 -0
- package/dist/RenameInput/index.js +0 -1
- package/dist/RenameInput/index.js.map +1 -1
- package/dist/RenameInput.d.ts +2 -0
- package/dist/Result.d.ts +2 -0
- package/dist/Row.d.ts +2 -0
- package/dist/ScrollArea.d.ts +2 -0
- package/dist/Select/BaseSelect.js +12 -7
- package/dist/Select/BaseSelect.js.map +1 -1
- package/dist/Select/Selector/MultipleSelector.js +10 -6
- package/dist/Select/Selector/MultipleSelector.js.map +1 -1
- package/dist/Select/Selector/index.d.ts +2 -0
- package/dist/Select/Selector/index.js +1 -1
- package/dist/Select/Selector/index.js.map +1 -1
- package/dist/Select/Selector.d.ts +2 -0
- package/dist/Select/components/Suffix.js +1 -1
- package/dist/Select/components/Suffix.js.map +1 -1
- package/dist/Select/interface.d.ts +4 -0
- package/dist/Select/utils/getWidthStyle.js.map +1 -1
- package/dist/Select.d.ts +2 -0
- package/dist/Skeleton.d.ts +2 -0
- package/dist/Slider.d.ts +2 -0
- package/dist/Space.d.ts +2 -0
- package/dist/Spin/CustomIcon.d.ts +2 -0
- package/dist/Spin.d.ts +2 -0
- package/dist/StatusLight.d.ts +2 -0
- package/dist/Steps/components/CustomDot.d.ts +2 -0
- package/dist/Steps/components/ProcessIcon.d.ts +2 -0
- package/dist/Steps/components/Step.d.ts +2 -0
- package/dist/Steps/index.js +6 -6
- package/dist/Steps/index.js.map +1 -1
- package/dist/Steps.d.ts +2 -0
- package/dist/Switch/index.js +2 -2
- package/dist/Switch/index.js.map +1 -1
- package/dist/Switch/test.d.ts +2 -0
- package/dist/Switch.d.ts +2 -0
- package/dist/Table/components/Footer/index.js +1 -1
- package/dist/Table/components/Footer/index.js.map +1 -1
- package/dist/Table/components/Footer.d.ts +2 -0
- package/dist/Table/hooks/useRowDnd.js +2 -8
- package/dist/Table/hooks/useRowDnd.js.map +1 -1
- package/dist/Table/hooks/useRowSelection.d.ts +1 -1
- package/dist/Table/hooks/useRowSelection.js +7 -9
- package/dist/Table/hooks/useRowSelection.js.map +1 -1
- package/dist/Table/index.js +1 -1
- package/dist/Table/index.js.map +1 -1
- package/dist/Table.d.ts +2 -0
- package/dist/Tabs/index.d.ts +1 -0
- package/dist/Tabs/index.js +37 -30
- package/dist/Tabs/index.js.map +1 -1
- package/dist/Tabs.d.ts +2 -0
- package/dist/Tag.d.ts +2 -0
- package/dist/TextLink.d.ts +2 -0
- package/dist/Tooltip/index.d.ts +7 -1
- package/dist/Tooltip/index.js +5 -3
- package/dist/Tooltip/index.js.map +1 -1
- package/dist/Tooltip.d.ts +2 -0
- package/dist/Tour/index.js +48 -38
- package/dist/Tour/index.js.map +1 -1
- package/dist/Tour.d.ts +2 -0
- package/dist/Tree/DirectoryTree.d.ts +2 -2
- package/dist/Tree/DirectoryTree.js.map +1 -1
- package/dist/Tree/Tree.d.ts +2 -2
- package/dist/Tree/Tree2.js +2 -2
- package/dist/Tree/Tree2.js.map +1 -1
- package/dist/Tree/index.d.ts +5 -2
- package/dist/Tree/index.js.map +1 -1
- package/dist/Tree.d.ts +2 -0
- package/dist/Typography.d.ts +2 -0
- package/dist/Upload/index.d.ts +15 -2
- package/dist/Upload/index.js +4 -2
- package/dist/Upload/index.js.map +1 -1
- package/dist/Upload.d.ts +2 -0
- package/dist/User.d.ts +2 -0
- package/dist/Watermark.d.ts +2 -0
- package/dist/_utils/floatingLayer.d.ts +15 -0
- package/dist/_utils/floatingLayer.js +30 -0
- package/dist/_utils/floatingLayer.js.map +1 -0
- package/dist/_utils/storybookArgTypes.d.ts +11 -0
- package/dist/_utils/storybookArgTypes.js +2 -0
- package/dist/aloudata-design.css +1 -1
- package/dist/index.d.ts +15 -6
- package/dist/index.js +8 -3
- package/dist/message.d.ts +2 -0
- package/dist/notification.d.ts +2 -0
- package/dist/theme/createTheme.d.ts +2 -0
- package/dist/theme/createTheme.js +46 -0
- package/dist/theme/createTheme.js.map +1 -0
- package/dist/theme/defaultTheme.d.ts +2 -0
- package/dist/theme/defaultTheme.js +19 -0
- package/dist/theme/defaultTheme.js.map +1 -0
- package/dist/theme/index.d.ts +5 -0
- package/dist/theme/index.js +4 -0
- package/dist/theme/initAldTheme.d.ts +2 -0
- package/dist/theme/initAldTheme.js +26 -0
- package/dist/theme/initAldTheme.js.map +1 -0
- package/dist/theme/themeToCssVars.d.ts +2 -0
- package/dist/theme/themeToCssVars.js +144 -0
- package/dist/theme/themeToCssVars.js.map +1 -0
- package/dist/theme/tokenMap.d.ts +5 -0
- package/dist/theme/tokenMap.js +12 -0
- package/dist/theme/tokenMap.js.map +1 -0
- package/dist/theme/types.d.ts +20 -0
- package/dist/theme/types.js +2 -0
- package/dist/theme.d.ts +2 -0
- package/package.json +10 -4
- package/dist/_utils/SimpleOverflow.d.ts +0 -14
- package/dist/_utils/SimpleOverflow.js +0 -61
- package/dist/_utils/SimpleOverflow.js.map +0 -1
package/dist/Breadcrumb/index.js
CHANGED
|
@@ -2,13 +2,22 @@ import { cn } from "../lib/utils.js";
|
|
|
2
2
|
import React from "react";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
4
|
//#region src/Breadcrumb/index.tsx
|
|
5
|
-
var DEFAULT_SEPARATOR_SVG = "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgMCAxMCAyMCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik05LjQ0NzE5IDAuMTA1NzkyQzkuOTQxMTcgMC4zNTI3ODEgMTAuMTQxNCAwLjk1MzQ1NCA5Ljg5NDQgMS40NDc0M0wxLjg5NDQgMTkuNDQ3NEMxLjY0NzQxIDE5Ljk0MTQgMS4wNDY3NCAyMC4xNDE2IDAuNTUyNzYxIDE5Ljg5NDZDMC4wNTg3ODI5IDE5LjY0NzcgLTAuMTQxNDQyIDE5LjA0NyAwLjEwNTU0OCAxOC41NTNMOC4xMDU1NSAwLjU1MzAwNkM4LjM1MjU0IDAuMDU5MDI3IDguOTUzMjEgLTAuMTQxMTk3IDkuNDQ3MTkgMC4xMDU3OTJaIiBmaWxsPSIjMDAxQTMzIiBmaWxsLW9wYWNpdHk9IjAuNSIvPgo8L3N2Zz4=";
|
|
6
5
|
var DefaultSeparator = () => /* @__PURE__ */ jsx("span", {
|
|
7
|
-
className: "default-separator tw-mx-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
6
|
+
className: "default-separator tw-mx-1 tw-inline-flex tw-items-center tw-text-[var(--content-tertiary)]",
|
|
7
|
+
children: /* @__PURE__ */ jsx("svg", {
|
|
8
|
+
width: "16",
|
|
9
|
+
height: "16",
|
|
10
|
+
viewBox: "0 0 16 16",
|
|
11
|
+
fill: "none",
|
|
12
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
13
|
+
children: /* @__PURE__ */ jsx("path", {
|
|
14
|
+
d: "M6 3.5L10.5 8L6 12.5",
|
|
15
|
+
stroke: "currentColor",
|
|
16
|
+
strokeWidth: "1.5",
|
|
17
|
+
strokeLinecap: "round",
|
|
18
|
+
strokeLinejoin: "round"
|
|
19
|
+
})
|
|
20
|
+
})
|
|
12
21
|
});
|
|
13
22
|
var Breadcrumb = (props) => {
|
|
14
23
|
const { className, style, separator = /* @__PURE__ */ jsx(DefaultSeparator, {}), items, children } = props;
|
|
@@ -16,9 +25,9 @@ var Breadcrumb = (props) => {
|
|
|
16
25
|
if (items) return items.map((item, index) => {
|
|
17
26
|
const isLast = index === items.length - 1;
|
|
18
27
|
return /* @__PURE__ */ jsxs(React.Fragment, { children: [/* @__PURE__ */ jsx("span", {
|
|
19
|
-
className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm", isLast ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-
|
|
28
|
+
className: cn("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)]", isLast ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", item.className),
|
|
20
29
|
children: item.href ? /* @__PURE__ */ jsx("a", {
|
|
21
|
-
className: "ald-breadcrumb-link tw-text-
|
|
30
|
+
className: "ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]",
|
|
22
31
|
href: item.href,
|
|
23
32
|
onClick: item.onClick,
|
|
24
33
|
children: item.title
|
|
@@ -27,7 +36,7 @@ var Breadcrumb = (props) => {
|
|
|
27
36
|
children: item.title
|
|
28
37
|
})
|
|
29
38
|
}), separator !== null && !isLast && /* @__PURE__ */ jsx("span", {
|
|
30
|
-
className: "ald-breadcrumb-separator",
|
|
39
|
+
className: "ald-breadcrumb-separator tw-inline-flex tw-items-center",
|
|
31
40
|
children: separator
|
|
32
41
|
})] }, index);
|
|
33
42
|
});
|
|
@@ -35,7 +44,7 @@ var Breadcrumb = (props) => {
|
|
|
35
44
|
return childArray.map((child, index) => {
|
|
36
45
|
const isLast = index === childArray.length - 1;
|
|
37
46
|
return /* @__PURE__ */ jsxs(React.Fragment, { children: [React.isValidElement(child) ? React.cloneElement(child, { "data-last": isLast ? "true" : void 0 }) : child, separator !== null && !isLast && /* @__PURE__ */ jsx("span", {
|
|
38
|
-
className: "ald-breadcrumb-separator",
|
|
47
|
+
className: "ald-breadcrumb-separator tw-inline-flex tw-items-center",
|
|
39
48
|
children: separator
|
|
40
49
|
})] }, index);
|
|
41
50
|
});
|
|
@@ -49,10 +58,10 @@ var Breadcrumb = (props) => {
|
|
|
49
58
|
var BreadcrumbItem = (props) => {
|
|
50
59
|
const { className, children, href, onClick, ...rest } = props;
|
|
51
60
|
return /* @__PURE__ */ jsx("span", {
|
|
52
|
-
className: cn("ald-breadcrumb-item tw-cursor-pointer tw-text-sm", rest["data-last"] === "true" ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-
|
|
61
|
+
className: cn("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)]", rest["data-last"] === "true" ? "tw-text-[var(--content-primary)]" : "tw-text-[var(--content-tertiary)] hover:tw-text-[var(--content-primary)]", className),
|
|
53
62
|
onClick,
|
|
54
63
|
children: href ? /* @__PURE__ */ jsx("a", {
|
|
55
|
-
className: "ald-breadcrumb-link tw-text-
|
|
64
|
+
className: "ald-breadcrumb-link tw-text-[var(--alias-colors-link-default)] hover:tw-text-[var(--alias-colors-link-hover)]",
|
|
56
65
|
href,
|
|
57
66
|
children
|
|
58
67
|
}) : children
|
|
@@ -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
|
|
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"}
|
package/dist/Button/index.d.ts
CHANGED
|
@@ -22,7 +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;
|
|
27
|
+
danger?: boolean;
|
|
28
|
+
color?: string;
|
|
29
|
+
showArrow?: boolean;
|
|
26
30
|
}
|
|
27
31
|
export declare function getButtonType(buttonType: ButtonType): string;
|
|
28
32
|
export declare function getDangerStatus(buttonType: ButtonType): boolean;
|
package/dist/Button/index.js
CHANGED
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { cn } from "../lib/utils.js";
|
|
2
|
-
import Memo from "../Icon/components/
|
|
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-
|
|
39
|
-
"hover:tw-
|
|
40
|
-
"active:tw-
|
|
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-
|
|
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-
|
|
51
|
-
"hover:tw-
|
|
52
|
-
"active:tw-
|
|
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-
|
|
63
|
-
"hover:tw-
|
|
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-
|
|
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-
|
|
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-
|
|
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-
|
|
145
|
-
|
|
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-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "dangerous" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "secondary" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "inverse" && size === "middle" && "!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0", ghost && type === "primary" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]", ghost && type === "dangerous" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]", ghost && type === "secondary" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]", ghost && type === "inverse" && "!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]", ghost && type === "primary" && "!tw-text-[var(--action-primary-normal)]", ghost && type === "dangerous" && "!tw-text-[var(--action-destructive-normal)]", ghost && type === "secondary" && "!tw-text-[var(--action-neutral-normal)]", ghost && type === "inverse" && "!tw-text-[var(--action-inverted-normal)]", isIconOnly && "tw-aspect-square !tw-px-0", isIconOnly && size === "small" && "!tw-min-w-7", isIconOnly && size === "middle" && "!tw-min-w-8", isIconOnly && size === "large" && "!tw-min-w-10", compactClasses, className);
|
|
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:
|
|
155
|
-
className: "tw-inline-flex tw-items-center tw-gap-1",
|
|
156
|
-
children
|
|
157
|
-
})]
|
|
167
|
+
children: buttonContent
|
|
158
168
|
});
|
|
159
|
-
return /* @__PURE__ */
|
|
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:
|
|
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);
|
package/dist/Button/index.js.map
CHANGED
|
@@ -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}\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;AA6CzB,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-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'dangerous' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'secondary' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n '!tw-h-8 !tw-min-w-8 !tw-gap-[var(--component-gap-xs)] !tw-rounded-r-75 !tw-bg-[var(--action-ghost-normal)] !tw-px-[var(--component-padding-md)] !tw-py-0',\n ghost &&\n type === 'primary' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-primary-subtle-hover)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-destructive-hover)]',\n ghost &&\n type === 'secondary' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-hover)]',\n ghost &&\n type === 'inverse' &&\n '!tw-rounded-r-75 hover:!tw-bg-[var(--action-ghost-inverted-hover)]',\n ghost && type === 'primary' && '!tw-text-[var(--action-primary-normal)]',\n ghost &&\n type === 'dangerous' &&\n '!tw-text-[var(--action-destructive-normal)]',\n ghost && type === 'secondary' && '!tw-text-[var(--action-neutral-normal)]',\n ghost && type === 'inverse' && '!tw-text-[var(--action-inverted-normal)]',\n // icon-only 方形按钮:宽度由 aspect-ratio 从 height 反推,但该反推值\n // 不构成 flex shrink 的下限——父行 max-content 被低估时(同行存在\n // width:auto Select / RangePicker 等子树时 Chromium 恒少算几 px),\n // 缺口会全压到本按钮上把它压扁。必须按 size 显式钳 min-width 兜底\n // (v2/antd 的 icon-only 即固定 width);带 ! 以盖过 shape=circle\n // 的 tw-min-w-0\n isIconOnly && 'tw-aspect-square !tw-px-0',\n isIconOnly && size === 'small' && '!tw-min-w-7',\n isIconOnly && size === 'middle' && '!tw-min-w-8',\n isIconOnly && size === 'large' && '!tw-min-w-10',\n compactClasses,\n className,\n );\n\n const contentClasses = cn(\n 'tw-inline-flex tw-items-center tw-gap-1',\n ghost &&\n type === 'inverse' &&\n size === 'middle' &&\n 'tw-flex-[1_0_0] tw-text-sm tw-font-medium tw-leading-5 tw-text-[var(--action-inverted-normal)]',\n );\n\n const arrowNode = showArrow ? (\n <span className=\"ald-btn-arrow tw-inline-flex tw-shrink-0 tw-items-center\">\n <ChevronDownLine size={16} />\n </span>\n ) : null;\n\n const buttonContent = (\n <>\n {iconNode}\n {children && <span className={contentClasses}>{children}</span>}\n {arrowNode}\n </>\n );\n\n if (href) {\n return (\n <a\n {...rest}\n className={classes}\n style={style}\n href={isDisabled ? undefined : href}\n target={target}\n ref={ref as React.Ref<HTMLAnchorElement>}\n onClick={isDisabled ? undefined : onClick}\n aria-disabled={isDisabled || undefined}\n >\n {buttonContent}\n </a>\n );\n }\n\n return (\n <button\n {...rest}\n type={\n htmlType === 'submit'\n ? 'submit'\n : htmlType === 'reset'\n ? 'reset'\n : 'button'\n }\n className={classes}\n style={style}\n disabled={isDisabled}\n aria-disabled={isDisabled || undefined}\n ref={ref as React.Ref<HTMLButtonElement>}\n onClick={onClick}\n >\n {buttonContent}\n </button>\n );\n}\n\nexport default forwardRef(Button);\n"],"mappings":";;;;;;;;;;AAQA,IAAa,YAAY;AAiDzB,IAAa,WACX,UACA,YACG;AACH,KAAI,QACF,QACE,oBAAC,QAAD;EACE,WAAU;EACV,MAAM;EACN,OAAM;EACN,CAAA;AAIN,KAAI,UAAU;EACZ,MAAM,IAAqC;GACzC,WAAW;GACX,MAAM;GACN,GAAG,SAAS;GACb;AACD,IAAE,OAAO;AACT,SAAO,MAAM,aAAa,UAAU,EAAE;;AAExC,QAAO,oBAAA,UAAA,EAAK,CAAA;;AAGd,IAAM,iBAAiB,IACrB;CACE;CACA;CACA;CACA;CACD,EACD;CACE,UAAU;EACR,MAAM;GACJ,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,WAAW;IACT,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,SAAS;IACP,GAAG,UAAU;IACb;IACA;IACA;IACD;GACD,MAAM;IACJ,GAAG,UAAU;IACb;IACA;IACA;IACD;GACF;EACD,MAAM;GACJ,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACD,QAAQ;IACN,GAAG,UAAU;IACb;IACA;IACD;GACD,OAAO;IACL,GAAG,UAAU;IACb;IACA;IACD;GACF;EACD,UAAU;GACR,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,MAAM;GACN,OAAO;GACR;EACD,OAAO;GACL,QAAQ;GACR,SAAS;GACV;EACF;CACD,iBAAiB;EACf,MAAM;EACN,MAAM;EACN,UAAU;EACV,OAAO;EACP,OAAO;EACR;CACF,CACF;AAED,IAAM,cAA4B;CAChC;CACA;CACA;CACA;CACA;CACD;AAED,SAAS,OAAO,OAAqB,KAA6B;CAChE,MAAM,EACJ,MAAM,UAAU,aAChB,MAAM,YACN,QAAQ,WACR,UAAU,OACV,UACA,MACA,WACA,UACA,MACA,QACA,SACA,OACA,WAAW,UACX,OACA,OACA,YAAY,OACZ,GAAG,SACD;CAIJ,MAAM,OAAmB,YAAY,SAAS,QAAsB,GAC/D,UACD;CAEJ,MAAM,kBAAkB,WAAW,gBAAgB;CACnD,MAAM,iBAAiB,YAAY;CAEnC,MAAM,cAAc,WAAW,YAAY;CAC3C,MAAM,EAAE,aAAa,0BACnB,sBAAsB,UAAU;CAClC,MAAM,OAAO,cAAc,eAAe,eAAe;CAEzD,MAAM,CAAC,cAAc,mBAAmB,SAAS,MAAM;AAEvD,iBAAgB;AACd,MAAI,OAAO,YAAY,YAAY,QAAQ,OAAO;GAChD,MAAM,QAAQ,iBAAiB,gBAAgB,KAAK,EAAE,QAAQ,MAAM;AACpE,gBAAa,aAAa,MAAM;;AAElC,kBAAgB,CAAC,CAAC,QAAQ;IACzB,CAAC,QAAQ,CAAC;CAEb,MAAM,aAAa,gBAAgB;CACnC,MAAM,WAAW,QAAQ,MAA4B,aAAa;CAGlE,MAAM,iBAAiB,wBACnB,GAEE,CAAC,sBAAsB,iCACrB,sBACF,CAAC,sBAAsB,gCACrB,sBAEF,CAAC,sBAAsB,iCACrB,YACH,GACD;CAEJ,MAAM,aAAa,CAAC,CAAC,QAAQ,CAAC,YAAY,CAAC;CAE3C,MAAM,UAAU,GACd,eAAe;EACb;EACA;EACA,UAAU,CAAC,CAAC;EACZ,OAAO,CAAC,CAAC;EACT;EACD,CAAC,EACF,SACE,2GACF,SACE,SAAS,aACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,eACT,SAAS,YACT,wHACF,SACE,SAAS,aACT,SAAS,YACT,4JACF,SACE,SAAS,aACT,sEACF,SACE,SAAS,eACT,yEACF,SACE,SAAS,eACT,6DACF,SACE,SAAS,aACT,sEACF,SAAS,SAAS,aAAa,2CAC/B,SACE,SAAS,eACT,+CACF,SAAS,SAAS,eAAe,2CACjC,SAAS,SAAS,aAAa,4CAO/B,cAAc,6BACd,cAAc,SAAS,WAAW,eAClC,cAAc,SAAS,YAAY,eACnC,cAAc,SAAS,WAAW,gBAClC,gBACA,UACD;CAED,MAAM,iBAAiB,GACrB,2CACA,SACE,SAAS,aACT,SAAS,YACT,iGACH;CAQD,MAAM,gBACJ,qBAAA,UAAA,EAAA,UAAA;EACG;EACA,YAAY,oBAAC,QAAD;GAAM,WAAW;GAAiB;GAAgB,CAAA;EATjD,YAChB,oBAAC,QAAD;GAAM,WAAU;aACd,oBAAC,MAAD,EAAiB,MAAM,IAAM,CAAA;GACxB,CAAA,GACL;EAOC,EAAA,CAAA;AAGL,KAAI,KACF,QACE,oBAAC,KAAD;EACE,GAAI;EACJ,WAAW;EACJ;EACP,MAAM,aAAa,SAAY;EACvB;EACH;EACL,SAAS,aAAa,SAAY;EAClC,iBAAe,cAAc;YAE5B;EACC,CAAA;AAIR,QACE,oBAAC,UAAD;EACE,GAAI;EACJ,MACE,aAAa,WACT,WACA,aAAa,UACb,UACA;EAEN,WAAW;EACJ;EACP,UAAU;EACV,iBAAe,cAAc;EACxB;EACI;YAER;EACM,CAAA;;AAIb,IAAA,iBAAe,WAAW,OAAO"}
|
package/dist/Button.d.ts
ADDED
package/dist/Card/index.js
CHANGED
|
@@ -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-
|
|
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-
|
|
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 tw-p-6", size === "small" && "tw-p-
|
|
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
|
}),
|
package/dist/Card/index.js.map
CHANGED
|
@@ -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-
|
|
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"}
|
package/dist/Card.d.ts
ADDED
package/dist/Checkbox/index.js
CHANGED
|
@@ -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-
|
|
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-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-all tw-duration-200", checked && "ald-checkbox-checked tw-border-transparent tw-bg-[var(--interaction-default-normal)]", mergedDisabled && "tw-opacity-50", !checked && !indeterminate && !alert && "tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--interaction-background-form-field)]", !checked && !indeterminate && alert && "tw-border-[var(--interaction-border-alert)] tw-bg-[var(--interaction-background-form-field)]", indeterminate && !checked && "ald-checkbox-indeterminate tw-border-transparent tw-bg-[var(--interaction-default-normal)]"),
|
|
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-
|
|
61
|
+
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"),
|
|
69
62
|
children
|
|
70
63
|
})]
|
|
71
64
|
});
|
|
@@ -101,7 +94,7 @@ function CheckboxGroup(props) {
|
|
|
101
94
|
});
|
|
102
95
|
};
|
|
103
96
|
return /* @__PURE__ */ jsx("div", {
|
|
104
|
-
className: cn("ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3", direction === "vertical" && "ald-
|
|
97
|
+
className: cn("ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3", direction === "vertical" && "ald-checkbox-group-vertical tw-flex-col", size === "small" && "ald-checkbox-group-small", className),
|
|
105
98
|
children: renderOptions()
|
|
106
99
|
});
|
|
107
100
|
}
|
|
@@ -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-checkout-group-vertical tw-flex-col',\n size === 'small' && 'ald-checkbox-group-small',\n className,\n )}\n >\n {renderOptions()}\n </div>\n );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}
|
|
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-size-4 tw-min-h-4 tw-min-w-4 tw-items-center tw-justify-center tw-rounded-r-50 tw-border-2 tw-border-solid tw-transition-all tw-duration-200',\n checked &&\n 'ald-checkbox-checked tw-border-transparent tw-bg-[var(--interaction-default-normal)]',\n mergedDisabled && 'tw-opacity-50',\n !checked &&\n !indeterminate &&\n !alert &&\n 'tw-border-[var(--interaction-border-neutral-normal)] tw-bg-[var(--interaction-background-form-field)]',\n !checked &&\n !indeterminate &&\n alert &&\n 'tw-border-[var(--interaction-border-alert)] tw-bg-[var(--interaction-background-form-field)]',\n indeterminate &&\n !checked &&\n 'ald-checkbox-indeterminate tw-border-transparent tw-bg-[var(--interaction-default-normal)]',\n )}\n >\n <input\n ref={inputRef}\n type=\"checkbox\"\n className=\"tw-absolute tw-inset-0 tw-m-0 tw-cursor-pointer tw-opacity-0 disabled:tw-cursor-default\"\n checked={!!checked}\n disabled={mergedDisabled}\n onChange={handleChange}\n autoFocus={autoFocus}\n name={name}\n value={value as string}\n />\n {(checked || (indeterminate && !checked)) && (\n <span\n className=\"tw-absolute tw-inset-0 tw-bg-center tw-bg-no-repeat\"\n style={{\n backgroundImage:\n indeterminate && !checked\n ? 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iMiIgdmlld0JveD0iMCAwIDEwIDIiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJWZWN0b3IgMSAoU3Ryb2tlKSIgZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik0wLjc1IDFDMC43NSAwLjU4NTc4NiAxLjA4NTc5IDAuMjUgMS41IDAuMjVIOC41QzguOTE0MjEgMC4yNSA5LjI1IDAuNTg1Nzg2IDkuMjUgMUM5LjI1IDEuNDE0MjEgOC45MTQyMSAxLjc1IDguNSAxLjc1SDEuNUMxLjA4NTc5IDEuNzUgMC43NSAxLjQxNDIxIDAuNzUgMVoiIGZpbGw9IndoaXRlIi8+Cjwvc3ZnPgo=\")'\n : 'url(\"data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDEwIDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGlkPSJJY29uIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTkuNTMwMzMgMC45Njk2N0M5LjgyMzIyIDEuMjYyNTYgOS44MjMyMiAxLjczNzQ0IDkuNTMwMzMgMi4wMzAzM0w0LjUzMDMzIDcuMDMwMzNDNC4yMzc0NCA3LjMyMzIyIDMuNzYyNTYgNy4zMjMyMiAzLjQ2OTY3IDcuMDMwMzNMMC45Njk2NyA0LjUzMDMzQzAuNjc2Nzc3IDQuMjM3NDQgMC42NzY3NzcgMy43NjI1NiAwLjk2OTY3IDMuNDY5NjdDMS4yNjI1NiAzLjE3Njc4IDEuNzM3NDQgMy4xNzY3OCAyLjAzMDMzIDMuNDY5NjdMNCA1LjQzOTM0TDguNDY5NjcgMC45Njk2N0M4Ljc2MjU2IDAuNjc2Nzc3IDkuMjM3NDQgMC42NzY3NzcgOS41MzAzMyAwLjk2OTY3WiIgZmlsbD0id2hpdGUiLz4KPC9zdmc+Cg==\")',\n backgroundSize:\n indeterminate && !checked ? '10px 2px' : '10px 8px',\n }}\n />\n )}\n </span>\n {children && (\n <span\n className={cn(\n 'ald-checkbox-label tw-inline-flex tw-select-none tw-items-center tw-gap-1 tw-text-[var(--alias-colors-text-default)] [&_svg]:tw-inline-block [&_svg]:tw-shrink-0',\n size === 'small' ? 'tw-text-xs' : 'tw-text-sm',\n bold && 'tw-font-medium',\n mergedDisabled && 'tw-cursor-default',\n )}\n >\n {children}\n </span>\n )}\n </label>\n );\n}\n\nfunction CheckboxGroup(props: ICheckboxGroupProps) {\n const {\n className,\n disabled: customDisabled,\n size,\n options,\n value: controlledValue,\n defaultValue,\n onChange,\n direction,\n name,\n children,\n } = props;\n\n const disabled = useContext(DisabledContext);\n const mergedDisabled = customDisabled ?? disabled;\n\n const isControlled = 'value' in props;\n const [innerValue, setInnerValue] = useState<CheckboxValueType[]>(\n defaultValue ?? [],\n );\n const value = isControlled ? controlledValue ?? [] : innerValue;\n\n const handleGroupChange = (\n itemValue: CheckboxValueType,\n itemChecked: boolean,\n ) => {\n const newValue = itemChecked\n ? [...value, itemValue]\n : value.filter((v) => v !== itemValue);\n if (!isControlled) {\n setInnerValue(newValue);\n }\n onChange?.(newValue);\n };\n\n const renderOptions = () => {\n if (!options) return children;\n return options.map((opt) => {\n const optObj =\n typeof opt === 'object' ? opt : { label: String(opt), value: opt };\n return (\n <Checkbox\n key={String(optObj.value)}\n value={optObj.value}\n disabled={mergedDisabled || optObj.disabled}\n checked={value.includes(optObj.value)}\n size={size}\n name={name}\n onChange={(e) => handleGroupChange(optObj.value, e.target.checked)}\n >\n {optObj.label}\n </Checkbox>\n );\n });\n };\n\n return (\n <div\n className={cn(\n 'ald-checkbox-group tw-flex tw-flex-wrap tw-gap-3',\n direction === 'vertical' && 'ald-checkbox-group-vertical tw-flex-col',\n size === 'small' && 'ald-checkbox-group-small',\n className,\n )}\n >\n {renderOptions()}\n </div>\n );\n}\n\nCheckbox.Group = CheckboxGroup;\n\nexport default Checkbox;\n"],"mappings":"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"}
|
package/dist/Checkbox/type.d.ts
CHANGED
|
@@ -23,10 +23,13 @@ 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
|
-
onClick?: (e
|
|
30
|
+
onClick?: (e: React.MouseEvent) => void;
|
|
29
31
|
size?: TSize;
|
|
32
|
+
type?: string;
|
|
30
33
|
className?: string;
|
|
31
34
|
style?: React.CSSProperties;
|
|
32
35
|
children?: React.ReactNode;
|
package/dist/Col.d.ts
ADDED
package/dist/Collapse/index.d.ts
CHANGED
|
@@ -9,6 +9,8 @@ export interface CollapsePanelProps {
|
|
|
9
9
|
extra?: React.ReactNode;
|
|
10
10
|
forceRender?: boolean;
|
|
11
11
|
collapsible?: 'header' | 'icon' | 'disabled';
|
|
12
|
+
showArrow?: boolean;
|
|
13
|
+
ref?: React.Ref<HTMLDivElement>;
|
|
12
14
|
}
|
|
13
15
|
export interface CollapseProps {
|
|
14
16
|
activeKey?: string | string[];
|