@lobehub/ui 5.33.3 → 5.34.1

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.
@@ -0,0 +1,7 @@
1
+ import { AccordionProps } from "./type.mjs";
2
+ import { FC } from "react";
3
+ //#region src/base-ui/Accordion/Accordion.d.ts
4
+ declare const Accordion: FC<AccordionProps>;
5
+ //#endregion
6
+ export { Accordion as default };
7
+ //# sourceMappingURL=Accordion.d.mts.map
@@ -0,0 +1,58 @@
1
+ "use client";
2
+ import { actionVariants } from "./style.mjs";
3
+ import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger } from "./atoms.mjs";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { cx } from "antd-style";
6
+ //#region src/base-ui/Accordion/Accordion.tsx
7
+ const Accordion = ({ className, classNames, defaultValue, gap, hideIndicator, indicatorPlacement = "start", items, keepMounted, multiple = true, onValueChange, ref, style, styles: customStyles, value, variant = "borderless" }) => {
8
+ return /* @__PURE__ */ jsx(AccordionRoot, {
9
+ className: cx(classNames?.root, className),
10
+ defaultValue,
11
+ hideIndicator,
12
+ indicatorPlacement,
13
+ multiple,
14
+ ref,
15
+ style: {
16
+ gap,
17
+ ...style,
18
+ ...customStyles?.root
19
+ },
20
+ value,
21
+ variant,
22
+ onValueChange: onValueChange ? (next) => onValueChange(next) : void 0,
23
+ children: items?.map((item) => /* @__PURE__ */ jsxs(AccordionItem, {
24
+ className: classNames?.item,
25
+ disabled: item.disabled,
26
+ style: customStyles?.item,
27
+ value: item.key,
28
+ children: [/* @__PURE__ */ jsxs(AccordionHeader, {
29
+ className: classNames?.header,
30
+ style: customStyles?.header,
31
+ children: [/* @__PURE__ */ jsx(AccordionTrigger, {
32
+ className: classNames?.trigger,
33
+ style: customStyles?.trigger,
34
+ children: item.title
35
+ }), item.action && /* @__PURE__ */ jsx("div", {
36
+ style: customStyles?.action,
37
+ className: cx("accordion-action", actionVariants({
38
+ alwaysVisible: item.alwaysShowAction,
39
+ variant
40
+ }), classNames?.action),
41
+ children: item.action
42
+ })]
43
+ }), /* @__PURE__ */ jsx(AccordionPanel, {
44
+ className: classNames?.panel,
45
+ contentClassName: classNames?.content,
46
+ contentStyle: customStyles?.content,
47
+ keepMounted,
48
+ style: customStyles?.panel,
49
+ children: item.children
50
+ })]
51
+ }, item.key))
52
+ });
53
+ };
54
+ Accordion.displayName = "Accordion";
55
+ //#endregion
56
+ export { Accordion as default };
57
+
58
+ //# sourceMappingURL=Accordion.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Accordion.mjs","names":[],"sources":["../../../src/base-ui/Accordion/Accordion.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { type FC } from 'react';\n\nimport {\n AccordionHeader,\n AccordionItem,\n AccordionPanel,\n AccordionRoot,\n AccordionTrigger,\n} from './atoms';\nimport { actionVariants } from './style';\nimport type { AccordionProps } from './type';\n\nconst Accordion: FC<AccordionProps> = ({\n className,\n classNames,\n defaultValue,\n gap,\n hideIndicator,\n indicatorPlacement = 'start',\n items,\n keepMounted,\n multiple = true,\n onValueChange,\n ref,\n style,\n styles: customStyles,\n value,\n variant = 'borderless',\n}) => {\n return (\n <AccordionRoot\n className={cx(classNames?.root, className)}\n defaultValue={defaultValue}\n hideIndicator={hideIndicator}\n indicatorPlacement={indicatorPlacement}\n multiple={multiple}\n ref={ref}\n style={{ gap, ...style, ...customStyles?.root }}\n value={value}\n variant={variant}\n onValueChange={onValueChange ? (next) => onValueChange(next as string[]) : undefined}\n >\n {items?.map((item) => (\n <AccordionItem\n className={classNames?.item}\n disabled={item.disabled}\n key={item.key}\n style={customStyles?.item}\n value={item.key}\n >\n <AccordionHeader className={classNames?.header} style={customStyles?.header}>\n <AccordionTrigger className={classNames?.trigger} style={customStyles?.trigger}>\n {item.title}\n </AccordionTrigger>\n {item.action && (\n <div\n style={customStyles?.action}\n className={cx(\n 'accordion-action',\n actionVariants({ alwaysVisible: item.alwaysShowAction, variant }),\n classNames?.action,\n )}\n >\n {item.action}\n </div>\n )}\n </AccordionHeader>\n <AccordionPanel\n className={classNames?.panel}\n contentClassName={classNames?.content}\n contentStyle={customStyles?.content}\n keepMounted={keepMounted}\n style={customStyles?.panel}\n >\n {item.children}\n </AccordionPanel>\n </AccordionItem>\n ))}\n </AccordionRoot>\n );\n};\n\nAccordion.displayName = 'Accordion';\n\nexport default Accordion;\n"],"mappings":";;;;;;AAeA,MAAM,aAAiC,EACrC,WACA,YACA,cACA,KACA,eACA,qBAAqB,SACrB,OACA,aACA,WAAW,MACX,eACA,KACA,OACA,QAAQ,cACR,OACA,UAAU,mBACN;CACJ,OACE,oBAAC,eAAD;EACE,WAAW,GAAG,YAAY,MAAM,SAAS;EAC3B;EACC;EACK;EACV;EACL;EACL,OAAO;GAAE;GAAK,GAAG;GAAO,GAAG,cAAc;EAAK;EACvC;EACE;EACT,eAAe,iBAAiB,SAAS,cAAc,IAAgB,IAAI,KAAA;EAE1E,UAAA,OAAO,KAAK,SACX,qBAAC,eAAD;GACE,WAAW,YAAY;GACvB,UAAU,KAAK;GAEf,OAAO,cAAc;GACrB,OAAO,KAAK;GALd,UAAA,CAOE,qBAAC,iBAAD;IAAiB,WAAW,YAAY;IAAQ,OAAO,cAAc;IAArE,UAAA,CACE,oBAAC,kBAAD;KAAkB,WAAW,YAAY;KAAS,OAAO,cAAc;KACpE,UAAA,KAAK;IACU,CAAA,GACjB,KAAK,UACJ,oBAAC,OAAD;KACE,OAAO,cAAc;KACrB,WAAW,GACT,oBACA,eAAe;MAAE,eAAe,KAAK;MAAkB;KAAQ,CAAC,GAChE,YAAY,MACd;KAEC,UAAA,KAAK;IACH,CAAA,CAEQ;GACjB,CAAA,GAAA,oBAAC,gBAAD;IACE,WAAW,YAAY;IACvB,kBAAkB,YAAY;IAC9B,cAAc,cAAc;IACf;IACb,OAAO,cAAc;IAEpB,UAAA,KAAK;GACQ,CAAA,CACH;EA9BR,GAAA,KAAK,GA8BG,CAChB;CACY,CAAA;AAEnB;AAEA,UAAU,cAAc"}
@@ -0,0 +1,18 @@
1
+ import { AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionPanelProps, AccordionRootProps, AccordionTriggerProps, AccordionVariant } from "./type.mjs";
2
+ import { styles } from "./style.mjs";
3
+ import { FC } from "react";
4
+ //#region src/base-ui/Accordion/atoms.d.ts
5
+ interface AccordionContextValue {
6
+ hideIndicator: boolean;
7
+ indicatorPlacement: AccordionIndicatorPlacement;
8
+ variant: AccordionVariant;
9
+ }
10
+ declare const useAccordionContext: () => AccordionContextValue;
11
+ declare const AccordionRoot: FC<AccordionRootProps>;
12
+ declare const AccordionItem: FC<AccordionItemProps>;
13
+ declare const AccordionHeader: FC<AccordionHeaderProps>;
14
+ declare const AccordionTrigger: FC<AccordionTriggerProps>;
15
+ declare const AccordionPanel: FC<AccordionPanelProps>;
16
+ //#endregion
17
+ export { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, styles as accordionStyles, useAccordionContext };
18
+ //# sourceMappingURL=atoms.d.mts.map
@@ -0,0 +1,96 @@
1
+ "use client";
2
+ import { contentVariants, headerVariants, indicatorVariants, itemVariants, rootVariants, styles, triggerVariants } from "./style.mjs";
3
+ import { createContext, use, useMemo } from "react";
4
+ import { jsx, jsxs } from "react/jsx-runtime";
5
+ import { cx } from "antd-style";
6
+ import { ChevronDown, ChevronRight } from "lucide-react";
7
+ import { Accordion } from "@base-ui/react/accordion";
8
+ //#region src/base-ui/Accordion/atoms.tsx
9
+ const AccordionContext = createContext({
10
+ hideIndicator: false,
11
+ indicatorPlacement: "start",
12
+ variant: "borderless"
13
+ });
14
+ const useAccordionContext = () => use(AccordionContext);
15
+ const AccordionRoot = ({ children, className, hideIndicator = false, indicatorPlacement = "start", variant = "borderless", ...rest }) => {
16
+ const contextValue = useMemo(() => ({
17
+ hideIndicator,
18
+ indicatorPlacement,
19
+ variant
20
+ }), [
21
+ hideIndicator,
22
+ indicatorPlacement,
23
+ variant
24
+ ]);
25
+ return /* @__PURE__ */ jsx(AccordionContext, {
26
+ value: contextValue,
27
+ children: /* @__PURE__ */ jsx(Accordion.Root, {
28
+ className: cx(rootVariants({ variant }), className),
29
+ ...rest,
30
+ children
31
+ })
32
+ });
33
+ };
34
+ AccordionRoot.displayName = "AccordionRoot";
35
+ const AccordionItem = ({ className, variant: variantProp, ...rest }) => {
36
+ const ctx = useAccordionContext();
37
+ const variant = variantProp ?? ctx.variant;
38
+ return /* @__PURE__ */ jsx(Accordion.Item, {
39
+ className: cx(itemVariants({ variant }), className),
40
+ ...rest
41
+ });
42
+ };
43
+ AccordionItem.displayName = "AccordionItem";
44
+ const AccordionHeader = ({ className, variant: variantProp, ...rest }) => {
45
+ const ctx = useAccordionContext();
46
+ const variant = variantProp ?? ctx.variant;
47
+ return /* @__PURE__ */ jsx(Accordion.Header, {
48
+ className: cx(headerVariants({ variant }), className),
49
+ ...rest
50
+ });
51
+ };
52
+ AccordionHeader.displayName = "AccordionHeader";
53
+ const AccordionTrigger = ({ children, className, hideIndicator: hideIndicatorProp, indicatorPlacement: placementProp, variant: variantProp, ...rest }) => {
54
+ const ctx = useAccordionContext();
55
+ const variant = variantProp ?? ctx.variant;
56
+ const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;
57
+ const placement = placementProp ?? ctx.indicatorPlacement;
58
+ const indicator = !hideIndicator && /* @__PURE__ */ jsx("span", {
59
+ className: indicatorVariants({ placement }),
60
+ children: placement === "start" ? /* @__PURE__ */ jsx(ChevronRight, { size: 16 }) : /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
61
+ });
62
+ return /* @__PURE__ */ jsxs(Accordion.Trigger, {
63
+ className: cx(triggerVariants({ variant }), className),
64
+ ...rest,
65
+ children: [
66
+ placement === "start" && indicator,
67
+ children,
68
+ placement === "end" && indicator
69
+ ]
70
+ });
71
+ };
72
+ AccordionTrigger.displayName = "AccordionTrigger";
73
+ const AccordionPanel = ({ children, className, contentClassName, contentStyle, hideIndicator: hideIndicatorProp, indicatorPlacement: placementProp, variant: variantProp, ...rest }) => {
74
+ const ctx = useAccordionContext();
75
+ const variant = variantProp ?? ctx.variant;
76
+ const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;
77
+ const placement = placementProp ?? ctx.indicatorPlacement;
78
+ const indent = !hideIndicator && placement === "start";
79
+ return /* @__PURE__ */ jsx(Accordion.Panel, {
80
+ className: cx(styles.panel, className),
81
+ ...rest,
82
+ children: /* @__PURE__ */ jsx("div", {
83
+ className: cx(contentVariants({
84
+ indent,
85
+ variant
86
+ }), contentClassName),
87
+ style: contentStyle,
88
+ children
89
+ })
90
+ });
91
+ };
92
+ AccordionPanel.displayName = "AccordionPanel";
93
+ //#endregion
94
+ export { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, styles as accordionStyles, useAccordionContext };
95
+
96
+ //# sourceMappingURL=atoms.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"atoms.mjs","names":["BaseUIAccordion"],"sources":["../../../src/base-ui/Accordion/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Accordion as BaseUIAccordion } from '@base-ui/react/accordion';\nimport { cx } from 'antd-style';\nimport { ChevronDown, ChevronRight } from 'lucide-react';\nimport { createContext, type FC, use, useMemo } from 'react';\n\nimport {\n contentVariants,\n headerVariants,\n indicatorVariants,\n itemVariants,\n rootVariants,\n styles,\n triggerVariants,\n} from './style';\nimport type {\n AccordionHeaderProps,\n AccordionIndicatorPlacement,\n AccordionItemProps,\n AccordionPanelProps,\n AccordionRootProps,\n AccordionTriggerProps,\n AccordionVariant,\n} from './type';\n\ninterface AccordionContextValue {\n hideIndicator: boolean;\n indicatorPlacement: AccordionIndicatorPlacement;\n variant: AccordionVariant;\n}\n\nconst AccordionContext = createContext<AccordionContextValue>({\n hideIndicator: false,\n indicatorPlacement: 'start',\n variant: 'borderless',\n});\n\nexport const useAccordionContext = () => use(AccordionContext);\n\nexport const AccordionRoot: FC<AccordionRootProps> = ({\n children,\n className,\n hideIndicator = false,\n indicatorPlacement = 'start',\n variant = 'borderless',\n ...rest\n}) => {\n const contextValue = useMemo(\n () => ({ hideIndicator, indicatorPlacement, variant }),\n [hideIndicator, indicatorPlacement, variant],\n );\n\n return (\n <AccordionContext value={contextValue}>\n <BaseUIAccordion.Root className={cx(rootVariants({ variant }), className)} {...rest}>\n {children}\n </BaseUIAccordion.Root>\n </AccordionContext>\n );\n};\n\nAccordionRoot.displayName = 'AccordionRoot';\n\nexport const AccordionItem: FC<AccordionItemProps> = ({\n className,\n variant: variantProp,\n ...rest\n}) => {\n const ctx = useAccordionContext();\n const variant = variantProp ?? ctx.variant;\n\n return <BaseUIAccordion.Item className={cx(itemVariants({ variant }), className)} {...rest} />;\n};\n\nAccordionItem.displayName = 'AccordionItem';\n\nexport const AccordionHeader: FC<AccordionHeaderProps> = ({\n className,\n variant: variantProp,\n ...rest\n}) => {\n const ctx = useAccordionContext();\n const variant = variantProp ?? ctx.variant;\n\n return (\n <BaseUIAccordion.Header className={cx(headerVariants({ variant }), className)} {...rest} />\n );\n};\n\nAccordionHeader.displayName = 'AccordionHeader';\n\nexport const AccordionTrigger: FC<AccordionTriggerProps> = ({\n children,\n className,\n hideIndicator: hideIndicatorProp,\n indicatorPlacement: placementProp,\n variant: variantProp,\n ...rest\n}) => {\n const ctx = useAccordionContext();\n const variant = variantProp ?? ctx.variant;\n const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;\n const placement = placementProp ?? ctx.indicatorPlacement;\n\n const indicator = !hideIndicator && (\n <span className={indicatorVariants({ placement })}>\n {placement === 'start' ? <ChevronRight size={16} /> : <ChevronDown size={16} />}\n </span>\n );\n\n return (\n <BaseUIAccordion.Trigger className={cx(triggerVariants({ variant }), className)} {...rest}>\n {placement === 'start' && indicator}\n {children}\n {placement === 'end' && indicator}\n </BaseUIAccordion.Trigger>\n );\n};\n\nAccordionTrigger.displayName = 'AccordionTrigger';\n\nexport const AccordionPanel: FC<AccordionPanelProps> = ({\n children,\n className,\n contentClassName,\n contentStyle,\n hideIndicator: hideIndicatorProp,\n indicatorPlacement: placementProp,\n variant: variantProp,\n ...rest\n}) => {\n const ctx = useAccordionContext();\n const variant = variantProp ?? ctx.variant;\n const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;\n const placement = placementProp ?? ctx.indicatorPlacement;\n const indent = !hideIndicator && placement === 'start';\n\n return (\n <BaseUIAccordion.Panel className={cx(styles.panel, className)} {...rest}>\n <div\n className={cx(contentVariants({ indent, variant }), contentClassName)}\n style={contentStyle}\n >\n {children}\n </div>\n </BaseUIAccordion.Panel>\n );\n};\n\nAccordionPanel.displayName = 'AccordionPanel';\n\nexport { styles as accordionStyles } from './style';\n"],"mappings":";;;;;;;;AAgCA,MAAM,mBAAmB,cAAqC;CAC5D,eAAe;CACf,oBAAoB;CACpB,SAAS;AACX,CAAC;AAED,MAAa,4BAA4B,IAAI,gBAAgB;AAE7D,MAAa,iBAAyC,EACpD,UACA,WACA,gBAAgB,OAChB,qBAAqB,SACrB,UAAU,cACV,GAAG,WACC;CACJ,MAAM,eAAe,eACZ;EAAE;EAAe;EAAoB;CAAQ,IACpD;EAAC;EAAe;EAAoB;CAAO,CAC7C;CAEA,OACE,oBAAC,kBAAD;EAAkB,OAAO;EACvB,UAAA,oBAACA,UAAgB,MAAjB;GAAsB,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;GAAG,GAAI;GAC5E;EACmB,CAAA;CACN,CAAA;AAEtB;AAEA,cAAc,cAAc;AAE5B,MAAa,iBAAyC,EACpD,WACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,eAAe,IAAI;CAEnC,OAAO,oBAACA,UAAgB,MAAjB;EAAsB,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAC/F;AAEA,cAAc,cAAc;AAE5B,MAAa,mBAA6C,EACxD,WACA,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,eAAe,IAAI;CAEnC,OACE,oBAACA,UAAgB,QAAjB;EAAwB,WAAW,GAAG,eAAe,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAE9F;AAEA,gBAAgB,cAAc;AAE9B,MAAa,oBAA+C,EAC1D,UACA,WACA,eAAe,mBACf,oBAAoB,eACpB,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,eAAe,IAAI;CACnC,MAAM,gBAAgB,qBAAqB,IAAI;CAC/C,MAAM,YAAY,iBAAiB,IAAI;CAEvC,MAAM,YAAY,CAAC,iBACjB,oBAAC,QAAD;EAAM,WAAW,kBAAkB,EAAE,UAAU,CAAC;EAC7C,UAAA,cAAc,UAAU,oBAAC,cAAD,EAAc,MAAM,GAAK,CAAA,IAAI,oBAAC,aAAD,EAAa,MAAM,GAAK,CAAA;CAC1E,CAAA;CAGR,OACE,qBAACA,UAAgB,SAAjB;EAAyB,WAAW,GAAG,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;EAArF,UAAA;GACG,cAAc,WAAW;GACzB;GACA,cAAc,SAAS;EACD;;AAE7B;AAEA,iBAAiB,cAAc;AAE/B,MAAa,kBAA2C,EACtD,UACA,WACA,kBACA,cACA,eAAe,mBACf,oBAAoB,eACpB,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,eAAe,IAAI;CACnC,MAAM,gBAAgB,qBAAqB,IAAI;CAC/C,MAAM,YAAY,iBAAiB,IAAI;CACvC,MAAM,SAAS,CAAC,iBAAiB,cAAc;CAE/C,OACE,oBAACA,UAAgB,OAAjB;EAAuB,WAAW,GAAG,OAAO,OAAO,SAAS;EAAG,GAAI;EACjE,UAAA,oBAAC,OAAD;GACE,WAAW,GAAG,gBAAgB;IAAE;IAAQ;GAAQ,CAAC,GAAG,gBAAgB;GACpE,OAAO;GAEN;EACE,CAAA;CACgB,CAAA;AAE3B;AAEA,eAAe,cAAc"}
@@ -0,0 +1,5 @@
1
+ import { AccordionClassNames, AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionItemType, AccordionPanelProps, AccordionProps, AccordionRootProps, AccordionStyles, AccordionTriggerProps, AccordionVariant } from "./type.mjs";
2
+ import Accordion from "./Accordion.mjs";
3
+ import { styles } from "./style.mjs";
4
+ import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, useAccordionContext } from "./atoms.mjs";
5
+ export { type AccordionClassNames, AccordionHeader, type AccordionHeaderProps, type AccordionIndicatorPlacement, AccordionItem, type AccordionItemProps, type AccordionItemType, AccordionPanel, type AccordionPanelProps, type AccordionProps, AccordionRoot, type AccordionRootProps, type AccordionStyles, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, styles as accordionStyles, Accordion as default, useAccordionContext };
@@ -0,0 +1,28 @@
1
+ //#region src/base-ui/Accordion/style.d.ts
2
+ declare const styles: {
3
+ action: string;
4
+ actionAlwaysVisible: string;
5
+ actionBorderless: string;
6
+ actionOutlined: string;
7
+ content: string;
8
+ contentBorderless: string;
9
+ contentIndent: string;
10
+ contentIndentOutlined: string;
11
+ contentOutlined: string;
12
+ header: string;
13
+ headerBorderless: string;
14
+ indicator: string;
15
+ indicatorEnd: string;
16
+ indicatorStart: string;
17
+ item: string;
18
+ itemOutlined: string;
19
+ panel: string;
20
+ root: string;
21
+ rootOutlined: string;
22
+ trigger: string;
23
+ triggerBorderless: string;
24
+ triggerOutlined: string;
25
+ };
26
+ //#endregion
27
+ export { styles };
28
+ //# sourceMappingURL=style.d.mts.map
@@ -0,0 +1,245 @@
1
+ import { createStaticStyles } from "antd-style";
2
+ import { cva } from "class-variance-authority";
3
+ //#region src/base-ui/Accordion/style.ts
4
+ const styles = createStaticStyles(({ css, cssVar }) => ({
5
+ action: css`
6
+ display: flex;
7
+ flex-shrink: 0;
8
+ gap: 4px;
9
+ align-items: center;
10
+
11
+ opacity: 0;
12
+
13
+ transition: opacity 150ms ${cssVar.motionEaseOut};
14
+ `,
15
+ actionAlwaysVisible: css`
16
+ opacity: 1;
17
+ `,
18
+ actionBorderless: css`
19
+ padding-inline-end: var(--accordion-hover-inset, 8px);
20
+ `,
21
+ actionOutlined: css`
22
+ padding-inline-end: 16px;
23
+ `,
24
+ content: css`
25
+ font-size: 14px;
26
+ line-height: 1.6;
27
+ `,
28
+ contentBorderless: css`
29
+ padding-block: 0 12px;
30
+ `,
31
+ contentIndent: css`
32
+ padding-inline-start: 24px;
33
+ `,
34
+ contentIndentOutlined: css`
35
+ padding-inline-start: 40px;
36
+ `,
37
+ contentOutlined: css`
38
+ padding-block: 0 14px;
39
+ padding-inline: 16px;
40
+ `,
41
+ header: css`
42
+ position: relative;
43
+
44
+ display: flex;
45
+ align-items: center;
46
+
47
+ margin: 0;
48
+
49
+ font-size: inherit;
50
+ font-weight: inherit;
51
+
52
+ transition: background 150ms ${cssVar.motionEaseOut};
53
+
54
+ &:hover:not(:has([data-disabled])) {
55
+ background: ${cssVar.colorFillTertiary};
56
+ }
57
+
58
+ &:hover .accordion-action,
59
+ &:focus-within .accordion-action {
60
+ opacity: 1;
61
+ }
62
+ `,
63
+ headerBorderless: css`
64
+ margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);
65
+ border-radius: ${cssVar.borderRadius};
66
+ `,
67
+ indicator: css`
68
+ display: flex;
69
+ flex-shrink: 0;
70
+ align-items: center;
71
+
72
+ color: ${cssVar.colorTextDescription};
73
+
74
+ transition: transform 200ms ${cssVar.motionEaseOut};
75
+
76
+ @media (prefers-reduced-motion: reduce) {
77
+ transition-duration: 0s;
78
+ }
79
+ `,
80
+ indicatorEnd: css`
81
+ margin-inline-start: auto;
82
+
83
+ [data-panel-open] & {
84
+ transform: rotate(180deg);
85
+ }
86
+ `,
87
+ indicatorStart: css`
88
+ [data-panel-open] & {
89
+ transform: rotate(90deg);
90
+ }
91
+ `,
92
+ item: css`
93
+ display: flex;
94
+ flex-direction: column;
95
+ `,
96
+ itemOutlined: css`
97
+ & + & {
98
+ border-block-start: 1px solid ${cssVar.colorBorderSecondary};
99
+ }
100
+ `,
101
+ panel: css`
102
+ overflow: hidden;
103
+ height: var(--accordion-panel-height);
104
+ transition: height 200ms ${cssVar.motionEaseOut};
105
+
106
+ &[data-starting-style],
107
+ &[data-ending-style] {
108
+ height: 0;
109
+ }
110
+
111
+ @media (prefers-reduced-motion: reduce) {
112
+ transition-duration: 0s;
113
+ }
114
+ `,
115
+ root: css`
116
+ display: flex;
117
+ flex-direction: column;
118
+ width: 100%;
119
+ `,
120
+ rootOutlined: css`
121
+ overflow: hidden;
122
+ border: 1px solid ${cssVar.colorBorderSecondary};
123
+ border-radius: ${cssVar.borderRadiusLG};
124
+ `,
125
+ trigger: css`
126
+ cursor: pointer;
127
+ user-select: none;
128
+
129
+ display: flex;
130
+ flex: 1;
131
+ gap: 8px;
132
+ align-items: center;
133
+
134
+ min-width: 0;
135
+ border: 0;
136
+ border-radius: inherit;
137
+
138
+ font: inherit;
139
+ font-size: 14px;
140
+ font-weight: 500;
141
+ color: ${cssVar.colorText};
142
+ text-align: start;
143
+
144
+ background: none;
145
+ outline: none;
146
+
147
+ &:focus-visible {
148
+ outline: 2px solid ${cssVar.colorPrimaryBorder};
149
+ outline-offset: -2px;
150
+ }
151
+
152
+ &[data-disabled] {
153
+ cursor: not-allowed;
154
+ color: ${cssVar.colorTextDisabled};
155
+ }
156
+ `,
157
+ triggerBorderless: css`
158
+ padding-block: 8px;
159
+ padding-inline: var(--accordion-hover-inset, 8px);
160
+ `,
161
+ triggerOutlined: css`
162
+ padding-block: 12px;
163
+ padding-inline: 16px;
164
+ `
165
+ }));
166
+ const rootVariants = cva(styles.root, {
167
+ defaultVariants: { variant: "borderless" },
168
+ variants: { variant: {
169
+ borderless: null,
170
+ outlined: styles.rootOutlined
171
+ } }
172
+ });
173
+ const itemVariants = cva(styles.item, {
174
+ defaultVariants: { variant: "borderless" },
175
+ variants: { variant: {
176
+ borderless: null,
177
+ outlined: styles.itemOutlined
178
+ } }
179
+ });
180
+ const headerVariants = cva(styles.header, {
181
+ defaultVariants: { variant: "borderless" },
182
+ variants: { variant: {
183
+ borderless: styles.headerBorderless,
184
+ outlined: null
185
+ } }
186
+ });
187
+ const triggerVariants = cva(styles.trigger, {
188
+ defaultVariants: { variant: "borderless" },
189
+ variants: { variant: {
190
+ borderless: styles.triggerBorderless,
191
+ outlined: styles.triggerOutlined
192
+ } }
193
+ });
194
+ const indicatorVariants = cva(styles.indicator, {
195
+ defaultVariants: { placement: "start" },
196
+ variants: { placement: {
197
+ end: styles.indicatorEnd,
198
+ start: styles.indicatorStart
199
+ } }
200
+ });
201
+ const contentVariants = cva(styles.content, {
202
+ compoundVariants: [{
203
+ class: styles.contentIndent,
204
+ indent: true,
205
+ variant: "borderless"
206
+ }, {
207
+ class: styles.contentIndentOutlined,
208
+ indent: true,
209
+ variant: "outlined"
210
+ }],
211
+ defaultVariants: {
212
+ indent: true,
213
+ variant: "borderless"
214
+ },
215
+ variants: {
216
+ indent: {
217
+ false: null,
218
+ true: null
219
+ },
220
+ variant: {
221
+ borderless: styles.contentBorderless,
222
+ outlined: styles.contentOutlined
223
+ }
224
+ }
225
+ });
226
+ const actionVariants = cva(styles.action, {
227
+ defaultVariants: {
228
+ alwaysVisible: false,
229
+ variant: "borderless"
230
+ },
231
+ variants: {
232
+ alwaysVisible: {
233
+ false: null,
234
+ true: styles.actionAlwaysVisible
235
+ },
236
+ variant: {
237
+ borderless: styles.actionBorderless,
238
+ outlined: styles.actionOutlined
239
+ }
240
+ }
241
+ });
242
+ //#endregion
243
+ export { actionVariants, contentVariants, headerVariants, indicatorVariants, itemVariants, rootVariants, styles, triggerVariants };
244
+
245
+ //# sourceMappingURL=style.mjs.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/Accordion/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n action: css`\n display: flex;\n flex-shrink: 0;\n gap: 4px;\n align-items: center;\n\n opacity: 0;\n\n transition: opacity 150ms ${cssVar.motionEaseOut};\n `,\n actionAlwaysVisible: css`\n opacity: 1;\n `,\n actionBorderless: css`\n padding-inline-end: var(--accordion-hover-inset, 8px);\n `,\n actionOutlined: css`\n padding-inline-end: 16px;\n `,\n content: css`\n font-size: 14px;\n line-height: 1.6;\n `,\n contentBorderless: css`\n padding-block: 0 12px;\n `,\n contentIndent: css`\n padding-inline-start: 24px;\n `,\n contentIndentOutlined: css`\n padding-inline-start: 40px;\n `,\n contentOutlined: css`\n padding-block: 0 14px;\n padding-inline: 16px;\n `,\n header: css`\n position: relative;\n\n display: flex;\n align-items: center;\n\n margin: 0;\n\n font-size: inherit;\n font-weight: inherit;\n\n transition: background 150ms ${cssVar.motionEaseOut};\n\n &:hover:not(:has([data-disabled])) {\n background: ${cssVar.colorFillTertiary};\n }\n\n &:hover .accordion-action,\n &:focus-within .accordion-action {\n opacity: 1;\n }\n `,\n headerBorderless: css`\n margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);\n border-radius: ${cssVar.borderRadius};\n `,\n indicator: css`\n display: flex;\n flex-shrink: 0;\n align-items: center;\n\n color: ${cssVar.colorTextDescription};\n\n transition: transform 200ms ${cssVar.motionEaseOut};\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n indicatorEnd: css`\n margin-inline-start: auto;\n\n [data-panel-open] & {\n transform: rotate(180deg);\n }\n `,\n indicatorStart: css`\n [data-panel-open] & {\n transform: rotate(90deg);\n }\n `,\n item: css`\n display: flex;\n flex-direction: column;\n `,\n itemOutlined: css`\n & + & {\n border-block-start: 1px solid ${cssVar.colorBorderSecondary};\n }\n `,\n panel: css`\n overflow: hidden;\n height: var(--accordion-panel-height);\n transition: height 200ms ${cssVar.motionEaseOut};\n\n &[data-starting-style],\n &[data-ending-style] {\n height: 0;\n }\n\n @media (prefers-reduced-motion: reduce) {\n transition-duration: 0s;\n }\n `,\n root: css`\n display: flex;\n flex-direction: column;\n width: 100%;\n `,\n rootOutlined: css`\n overflow: hidden;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: ${cssVar.borderRadiusLG};\n `,\n trigger: css`\n cursor: pointer;\n user-select: none;\n\n display: flex;\n flex: 1;\n gap: 8px;\n align-items: center;\n\n min-width: 0;\n border: 0;\n border-radius: inherit;\n\n font: inherit;\n font-size: 14px;\n font-weight: 500;\n color: ${cssVar.colorText};\n text-align: start;\n\n background: none;\n outline: none;\n\n &:focus-visible {\n outline: 2px solid ${cssVar.colorPrimaryBorder};\n outline-offset: -2px;\n }\n\n &[data-disabled] {\n cursor: not-allowed;\n color: ${cssVar.colorTextDisabled};\n }\n `,\n triggerBorderless: css`\n padding-block: 8px;\n padding-inline: var(--accordion-hover-inset, 8px);\n `,\n triggerOutlined: css`\n padding-block: 12px;\n padding-inline: 16px;\n `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: null,\n outlined: styles.rootOutlined,\n },\n },\n});\n\nexport const itemVariants = cva(styles.item, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: null,\n outlined: styles.itemOutlined,\n },\n },\n});\n\nexport const headerVariants = cva(styles.header, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: styles.headerBorderless,\n outlined: null,\n },\n },\n});\n\nexport const triggerVariants = cva(styles.trigger, {\n defaultVariants: { variant: 'borderless' },\n variants: {\n variant: {\n borderless: styles.triggerBorderless,\n outlined: styles.triggerOutlined,\n },\n },\n});\n\nexport const indicatorVariants = cva(styles.indicator, {\n defaultVariants: { placement: 'start' },\n variants: {\n placement: {\n end: styles.indicatorEnd,\n start: styles.indicatorStart,\n },\n },\n});\n\nexport const contentVariants = cva(styles.content, {\n compoundVariants: [\n {\n class: styles.contentIndent,\n indent: true,\n variant: 'borderless',\n },\n {\n class: styles.contentIndentOutlined,\n indent: true,\n variant: 'outlined',\n },\n ],\n defaultVariants: { indent: true, variant: 'borderless' },\n variants: {\n indent: {\n false: null,\n true: null,\n },\n variant: {\n borderless: styles.contentBorderless,\n outlined: styles.contentOutlined,\n },\n },\n});\n\nexport const actionVariants = cva(styles.action, {\n defaultVariants: { alwaysVisible: false, variant: 'borderless' },\n variants: {\n alwaysVisible: {\n false: null,\n true: styles.actionAlwaysVisible,\n },\n variant: {\n borderless: styles.actionBorderless,\n outlined: styles.actionOutlined,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,QAAQ,GAAG;;;;;;;;gCAQmB,OAAO,cAAc;;CAEnD,qBAAqB,GAAG;;;CAGxB,kBAAkB,GAAG;;;CAGrB,gBAAgB,GAAG;;;CAGnB,SAAS,GAAG;;;;CAIZ,mBAAmB,GAAG;;;CAGtB,eAAe,GAAG;;;CAGlB,uBAAuB,GAAG;;;CAG1B,iBAAiB,GAAG;;;;CAIpB,QAAQ,GAAG;;;;;;;;;;;mCAWsB,OAAO,cAAc;;;oBAGpC,OAAO,kBAAkB;;;;;;;;CAQ3C,kBAAkB,GAAG;;qBAEF,OAAO,aAAa;;CAEvC,WAAW,GAAG;;;;;aAKH,OAAO,qBAAqB;;kCAEP,OAAO,cAAc;;;;;;CAMrD,cAAc,GAAG;;;;;;;CAOjB,gBAAgB,GAAG;;;;;CAKnB,MAAM,GAAG;;;;CAIT,cAAc,GAAG;;sCAEmB,OAAO,qBAAqB;;;CAGhE,OAAO,GAAG;;;+BAGmB,OAAO,cAAc;;;;;;;;;;;CAWlD,MAAM,GAAG;;;;;CAKT,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,eAAe;;CAEzC,SAAS,GAAG;;;;;;;;;;;;;;;;aAgBD,OAAO,UAAU;;;;;;;2BAOH,OAAO,mBAAmB;;;;;;eAMtC,OAAO,kBAAkB;;;CAGtC,mBAAmB,GAAG;;;;CAItB,iBAAiB,GAAG;;;;AAItB,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY;EACZ,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU;CACZ,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,iBAAiB,EAAE,SAAS,aAAa;CACzC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,oBAAoB,IAAI,OAAO,WAAW;CACrD,iBAAiB,EAAE,WAAW,QAAQ;CACtC,UAAU,EACR,WAAW;EACT,KAAK,OAAO;EACZ,OAAO,OAAO;CAChB,EACF;AACF,CAAC;AAED,MAAa,kBAAkB,IAAI,OAAO,SAAS;CACjD,kBAAkB,CAChB;EACE,OAAO,OAAO;EACd,QAAQ;EACR,SAAS;CACX,GACA;EACE,OAAO,OAAO;EACd,QAAQ;EACR,SAAS;CACX,CACF;CACA,iBAAiB;EAAE,QAAQ;EAAM,SAAS;CAAa;CACvD,UAAU;EACR,QAAQ;GACN,OAAO;GACP,MAAM;EACR;EACA,SAAS;GACP,YAAY,OAAO;GACnB,UAAU,OAAO;EACnB;CACF;AACF,CAAC;AAED,MAAa,iBAAiB,IAAI,OAAO,QAAQ;CAC/C,iBAAiB;EAAE,eAAe;EAAO,SAAS;CAAa;CAC/D,UAAU;EACR,eAAe;GACb,OAAO;GACP,MAAM,OAAO;EACf;EACA,SAAS;GACP,YAAY,OAAO;GACnB,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
@@ -0,0 +1,79 @@
1
+ import { CSSProperties, ComponentProps, ReactNode, Ref } from "react";
2
+ import { Accordion } from "@base-ui/react/accordion";
3
+ //#region src/base-ui/Accordion/type.d.ts
4
+ type AccordionVariant = 'borderless' | 'outlined';
5
+ type AccordionIndicatorPlacement = 'end' | 'start';
6
+ interface AccordionClassNames {
7
+ action?: string;
8
+ content?: string;
9
+ header?: string;
10
+ item?: string;
11
+ panel?: string;
12
+ root?: string;
13
+ trigger?: string;
14
+ }
15
+ interface AccordionStyles {
16
+ action?: CSSProperties;
17
+ content?: CSSProperties;
18
+ header?: CSSProperties;
19
+ item?: CSSProperties;
20
+ panel?: CSSProperties;
21
+ root?: CSSProperties;
22
+ trigger?: CSSProperties;
23
+ }
24
+ interface AccordionItemType {
25
+ action?: ReactNode;
26
+ alwaysShowAction?: boolean;
27
+ children?: ReactNode;
28
+ disabled?: boolean;
29
+ key: string;
30
+ title: ReactNode;
31
+ }
32
+ type AccordionRootProps = Omit<ComponentProps<typeof Accordion.Root>, 'className' | 'render'> & {
33
+ className?: string;
34
+ hideIndicator?: boolean;
35
+ indicatorPlacement?: AccordionIndicatorPlacement;
36
+ variant?: AccordionVariant;
37
+ };
38
+ type AccordionItemProps = Omit<ComponentProps<typeof Accordion.Item>, 'className' | 'render'> & {
39
+ className?: string;
40
+ variant?: AccordionVariant;
41
+ };
42
+ type AccordionHeaderProps = Omit<ComponentProps<typeof Accordion.Header>, 'className' | 'render'> & {
43
+ className?: string;
44
+ variant?: AccordionVariant;
45
+ };
46
+ type AccordionTriggerProps = Omit<ComponentProps<typeof Accordion.Trigger>, 'className' | 'render'> & {
47
+ className?: string;
48
+ hideIndicator?: boolean;
49
+ indicatorPlacement?: AccordionIndicatorPlacement;
50
+ variant?: AccordionVariant;
51
+ };
52
+ type AccordionPanelProps = Omit<ComponentProps<typeof Accordion.Panel>, 'className' | 'render'> & {
53
+ className?: string;
54
+ contentClassName?: string;
55
+ contentStyle?: CSSProperties;
56
+ hideIndicator?: boolean;
57
+ indicatorPlacement?: AccordionIndicatorPlacement;
58
+ variant?: AccordionVariant;
59
+ };
60
+ interface AccordionProps {
61
+ className?: string;
62
+ classNames?: AccordionClassNames;
63
+ defaultValue?: string[];
64
+ gap?: number;
65
+ hideIndicator?: boolean;
66
+ indicatorPlacement?: AccordionIndicatorPlacement;
67
+ items?: AccordionItemType[];
68
+ keepMounted?: boolean;
69
+ multiple?: boolean;
70
+ onValueChange?: (value: string[]) => void;
71
+ ref?: Ref<HTMLDivElement>;
72
+ style?: CSSProperties;
73
+ styles?: AccordionStyles;
74
+ value?: string[];
75
+ variant?: AccordionVariant;
76
+ }
77
+ //#endregion
78
+ export { AccordionClassNames, AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionItemType, AccordionPanelProps, AccordionProps, AccordionRootProps, AccordionStyles, AccordionTriggerProps, AccordionVariant };
79
+ //# sourceMappingURL=type.d.mts.map
@@ -46,6 +46,7 @@ const ActionIcon = memo(({ active, className, classNames, color, danger, disable
46
46
  "aria-label": popupTriggerLabel,
47
47
  className: cx(variants({
48
48
  active,
49
+ danger,
49
50
  glass,
50
51
  shadow
51
52
  }), classNames?.root, className),
@@ -1 +1 @@
1
- {"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../../src/base-ui/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { MouseEvent, Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport type { ButtonProps } from '@/base-ui/Button';\nimport Button from '@/base-ui/Button';\nimport Tooltip from '@/base-ui/Tooltip';\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport { type ActionIconProps } from './type';\nimport { calcSize } from './utils';\n\nconst resolveButtonType = (variant: ActionIconProps['variant']) => {\n if (variant === 'filled') return 'fill' as const;\n if (variant === 'outlined') return 'default' as const;\n return 'text' as const;\n};\n\nconst resolveButtonSize = (size: ActionIconProps['size']) => {\n if (size === 'small') return 'small' as const;\n if (size === 'large') return 'large' as const;\n return 'middle' as const;\n};\n\nconst ActionIcon = memo<ActionIconProps>(\n ({\n active,\n className,\n classNames,\n color,\n danger,\n disabled,\n fill,\n fillOpacity,\n fillRule,\n focusable,\n glass,\n icon,\n loading,\n onClick,\n ref,\n shadow,\n size = 'middle',\n spin: iconSpinning,\n style,\n styles,\n title,\n tooltipProps,\n variant = 'borderless',\n ...rest\n }) => {\n const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\n const popupTriggerAria = rest as {\n 'aria-expanded'?: unknown;\n 'aria-haspopup'?: unknown;\n 'aria-label'?: string;\n };\n const isPopupTrigger =\n popupTriggerAria['aria-haspopup'] !== undefined ||\n popupTriggerAria['aria-expanded'] !== undefined;\n const popupTriggerLabel =\n popupTriggerAria['aria-label'] ??\n (isPopupTrigger && typeof title === 'string' ? title : undefined);\n\n const handleClick: ButtonProps['onClick'] = (event) => {\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n };\n\n const iconNode = icon ? (\n <Icon\n className={classNames?.icon}\n color={color}\n fill={fill}\n fillOpacity={fillOpacity}\n fillRule={fillRule}\n focusable={focusable}\n icon={icon}\n size={size}\n spin={iconSpinning}\n style={{ pointerEvents: 'none', ...styles?.icon }}\n />\n ) : undefined;\n\n const node = (\n <Button\n {...(rest as unknown as ButtonProps)}\n aria-label={popupTriggerLabel}\n className={cx(variants({ active, glass, shadow }), classNames?.root, className)}\n danger={danger}\n disabled={disabled}\n htmlType=\"button\"\n icon={iconNode}\n loading={loading}\n ref={ref as unknown as Ref<HTMLButtonElement>}\n size={resolveButtonSize(size)}\n tabIndex={disabled ? -1 : 0}\n type={resolveButtonType(variant)}\n style={{\n borderRadius,\n height: blockSize,\n width: blockSize,\n ...styles?.root,\n ...style,\n }}\n onClick={handleClick}\n />\n );\n\n if (!title) return node;\n\n return (\n <Tooltip\n title={title}\n {...tooltipProps}\n styles={{\n ...tooltipProps?.styles,\n container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\n }}\n >\n {node}\n </Tooltip>\n );\n },\n);\n\nActionIcon.displayName = 'BaseActionIcon';\n\nexport default ActionIcon;\n"],"mappings":";;;;;;;;;;AAeA,MAAM,qBAAqB,YAAwC;CACjE,IAAI,YAAY,UAAU,OAAO;CACjC,IAAI,YAAY,YAAY,OAAO;CACnC,OAAO;AACT;AAEA,MAAM,qBAAqB,SAAkC;CAC3D,IAAI,SAAS,SAAS,OAAO;CAC7B,IAAI,SAAS,SAAS,OAAO;CAC7B,OAAO;AACT;AAEA,MAAM,aAAa,MAChB,EACC,QACA,WACA,YACA,OACA,QACA,UACA,MACA,aACA,UACA,WACA,OACA,MACA,SACA,SACA,KACA,QACA,OAAO,UACP,MAAM,cACN,OACA,QACA,OACA,cACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC;CACxE,MAAM,mBAAmB;CAKzB,MAAM,iBACJ,iBAAiB,qBAAqB,KAAA,KACtC,iBAAiB,qBAAqB,KAAA;CACxC,MAAM,oBACJ,iBAAiB,kBAChB,kBAAkB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAEzD,MAAM,eAAuC,UAAU;EACrD,UAAU,KAA8C;CAC1D;CAEA,MAAM,WAAW,OACf,oBAAC,MAAD;EACE,WAAW,YAAY;EAChB;EACD;EACO;EACH;EACC;EACL;EACA;EACN,MAAM;EACN,OAAO;GAAE,eAAe;GAAQ,GAAG,QAAQ;EAAK;CACjD,CAAA,IACC,KAAA;CAEJ,MAAM,OACJ,oBAAC,QAAD;EACE,GAAK;EACL,cAAY;EACZ,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAO;EAAO,CAAC,GAAG,YAAY,MAAM,SAAS;EACtE;EACE;EACV,UAAS;EACT,MAAM;EACG;EACJ;EACL,MAAM,kBAAkB,IAAI;EAC5B,UAAU,WAAW,KAAK;EAC1B,MAAM,kBAAkB,OAAO;EAC/B,OAAO;GACL;GACA,QAAQ;GACR,OAAO;GACP,GAAG,QAAQ;GACX,GAAG;EACL;EACA,SAAS;CACV,CAAA;CAGH,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QAAQ;GACN,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAEC,UAAA;CACM,CAAA;AAEb,CACF;AAEA,WAAW,cAAc"}
1
+ {"version":3,"file":"ActionIcon.mjs","names":[],"sources":["../../../src/base-ui/ActionIcon/ActionIcon.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport type { MouseEvent, Ref } from 'react';\nimport { memo, useMemo } from 'react';\n\nimport type { ButtonProps } from '@/base-ui/Button';\nimport Button from '@/base-ui/Button';\nimport Tooltip from '@/base-ui/Tooltip';\nimport Icon from '@/Icon';\n\nimport { variants } from './style';\nimport { type ActionIconProps } from './type';\nimport { calcSize } from './utils';\n\nconst resolveButtonType = (variant: ActionIconProps['variant']) => {\n if (variant === 'filled') return 'fill' as const;\n if (variant === 'outlined') return 'default' as const;\n return 'text' as const;\n};\n\nconst resolveButtonSize = (size: ActionIconProps['size']) => {\n if (size === 'small') return 'small' as const;\n if (size === 'large') return 'large' as const;\n return 'middle' as const;\n};\n\nconst ActionIcon = memo<ActionIconProps>(\n ({\n active,\n className,\n classNames,\n color,\n danger,\n disabled,\n fill,\n fillOpacity,\n fillRule,\n focusable,\n glass,\n icon,\n loading,\n onClick,\n ref,\n shadow,\n size = 'middle',\n spin: iconSpinning,\n style,\n styles,\n title,\n tooltipProps,\n variant = 'borderless',\n ...rest\n }) => {\n const { blockSize, borderRadius } = useMemo(() => calcSize(size), [size]);\n const popupTriggerAria = rest as {\n 'aria-expanded'?: unknown;\n 'aria-haspopup'?: unknown;\n 'aria-label'?: string;\n };\n const isPopupTrigger =\n popupTriggerAria['aria-haspopup'] !== undefined ||\n popupTriggerAria['aria-expanded'] !== undefined;\n const popupTriggerLabel =\n popupTriggerAria['aria-label'] ??\n (isPopupTrigger && typeof title === 'string' ? title : undefined);\n\n const handleClick: ButtonProps['onClick'] = (event) => {\n onClick?.(event as unknown as MouseEvent<HTMLDivElement>);\n };\n\n const iconNode = icon ? (\n <Icon\n className={classNames?.icon}\n color={color}\n fill={fill}\n fillOpacity={fillOpacity}\n fillRule={fillRule}\n focusable={focusable}\n icon={icon}\n size={size}\n spin={iconSpinning}\n style={{ pointerEvents: 'none', ...styles?.icon }}\n />\n ) : undefined;\n\n const node = (\n <Button\n {...(rest as unknown as ButtonProps)}\n aria-label={popupTriggerLabel}\n className={cx(variants({ active, danger, glass, shadow }), classNames?.root, className)}\n danger={danger}\n disabled={disabled}\n htmlType=\"button\"\n icon={iconNode}\n loading={loading}\n ref={ref as unknown as Ref<HTMLButtonElement>}\n size={resolveButtonSize(size)}\n tabIndex={disabled ? -1 : 0}\n type={resolveButtonType(variant)}\n style={{\n borderRadius,\n height: blockSize,\n width: blockSize,\n ...styles?.root,\n ...style,\n }}\n onClick={handleClick}\n />\n );\n\n if (!title) return node;\n\n return (\n <Tooltip\n title={title}\n {...tooltipProps}\n styles={{\n ...tooltipProps?.styles,\n container: { pointerEvents: 'none', ...tooltipProps?.styles?.container },\n }}\n >\n {node}\n </Tooltip>\n );\n },\n);\n\nActionIcon.displayName = 'BaseActionIcon';\n\nexport default ActionIcon;\n"],"mappings":";;;;;;;;;;AAeA,MAAM,qBAAqB,YAAwC;CACjE,IAAI,YAAY,UAAU,OAAO;CACjC,IAAI,YAAY,YAAY,OAAO;CACnC,OAAO;AACT;AAEA,MAAM,qBAAqB,SAAkC;CAC3D,IAAI,SAAS,SAAS,OAAO;CAC7B,IAAI,SAAS,SAAS,OAAO;CAC7B,OAAO;AACT;AAEA,MAAM,aAAa,MAChB,EACC,QACA,WACA,YACA,OACA,QACA,UACA,MACA,aACA,UACA,WACA,OACA,MACA,SACA,SACA,KACA,QACA,OAAO,UACP,MAAM,cACN,OACA,QACA,OACA,cACA,UAAU,cACV,GAAG,WACC;CACJ,MAAM,EAAE,WAAW,iBAAiB,cAAc,SAAS,IAAI,GAAG,CAAC,IAAI,CAAC;CACxE,MAAM,mBAAmB;CAKzB,MAAM,iBACJ,iBAAiB,qBAAqB,KAAA,KACtC,iBAAiB,qBAAqB,KAAA;CACxC,MAAM,oBACJ,iBAAiB,kBAChB,kBAAkB,OAAO,UAAU,WAAW,QAAQ,KAAA;CAEzD,MAAM,eAAuC,UAAU;EACrD,UAAU,KAA8C;CAC1D;CAEA,MAAM,WAAW,OACf,oBAAC,MAAD;EACE,WAAW,YAAY;EAChB;EACD;EACO;EACH;EACC;EACL;EACA;EACN,MAAM;EACN,OAAO;GAAE,eAAe;GAAQ,GAAG,QAAQ;EAAK;CACjD,CAAA,IACC,KAAA;CAEJ,MAAM,OACJ,oBAAC,QAAD;EACE,GAAK;EACL,cAAY;EACZ,WAAW,GAAG,SAAS;GAAE;GAAQ;GAAQ;GAAO;EAAO,CAAC,GAAG,YAAY,MAAM,SAAS;EAC9E;EACE;EACV,UAAS;EACT,MAAM;EACG;EACJ;EACL,MAAM,kBAAkB,IAAI;EAC5B,UAAU,WAAW,KAAK;EAC1B,MAAM,kBAAkB,OAAO;EAC/B,OAAO;GACL;GACA,QAAQ;GACR,OAAO;GACP,GAAG,QAAQ;GACX,GAAG;EACL;EACA,SAAS;CACV,CAAA;CAGH,IAAI,CAAC,OAAO,OAAO;CAEnB,OACE,oBAAC,SAAD;EACS;EACP,GAAI;EACJ,QAAQ;GACN,GAAG,cAAc;GACjB,WAAW;IAAE,eAAe;IAAQ,GAAG,cAAc,QAAQ;GAAU;EACzE;EAEC,UAAA;CACM,CAAA;AAEb,CACF;AAEA,WAAW,cAAc"}
@@ -1,7 +1,9 @@
1
1
  //#region src/base-ui/ActionIcon/style.d.ts
2
2
  declare const styles: {
3
3
  active: string;
4
+ dangerRoot: string;
4
5
  glass: string;
6
+ root: string;
5
7
  shadow: string;
6
8
  };
7
9
  //#endregion