@lobehub/ui 5.33.3 → 5.34.0
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/es/base-ui/Accordion/Accordion.d.mts +7 -0
- package/es/base-ui/Accordion/Accordion.mjs +58 -0
- package/es/base-ui/Accordion/Accordion.mjs.map +1 -0
- package/es/base-ui/Accordion/atoms.d.mts +18 -0
- package/es/base-ui/Accordion/atoms.mjs +96 -0
- package/es/base-ui/Accordion/atoms.mjs.map +1 -0
- package/es/base-ui/Accordion/index.d.mts +5 -0
- package/es/base-ui/Accordion/style.d.mts +28 -0
- package/es/base-ui/Accordion/style.mjs +245 -0
- package/es/base-ui/Accordion/style.mjs.map +1 -0
- package/es/base-ui/Accordion/type.d.mts +79 -0
- package/es/base-ui/Input/style.d.mts +1 -1
- package/es/base-ui/ToggleGroup/ToggleGroup.d.mts +9 -0
- package/es/base-ui/ToggleGroup/ToggleGroup.mjs +58 -0
- package/es/base-ui/ToggleGroup/ToggleGroup.mjs.map +1 -0
- package/es/base-ui/ToggleGroup/atoms.d.mts +33 -0
- package/es/base-ui/ToggleGroup/atoms.mjs +40 -0
- package/es/base-ui/ToggleGroup/atoms.mjs.map +1 -0
- package/es/base-ui/ToggleGroup/index.d.mts +5 -0
- package/es/base-ui/ToggleGroup/style.d.mts +15 -0
- package/es/base-ui/ToggleGroup/style.mjs +117 -0
- package/es/base-ui/ToggleGroup/style.mjs.map +1 -0
- package/es/base-ui/ToggleGroup/type.d.mts +41 -0
- package/es/base-ui/index.d.mts +22 -12
- package/es/base-ui/index.mjs +18 -12
- package/package.json +1 -1
|
@@ -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
|
|
@@ -24,7 +24,7 @@ declare const styles: {
|
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
26
|
size?: "large" | "middle" | "small" | null | undefined;
|
|
27
|
-
variant?: "filled" | "
|
|
27
|
+
variant?: "filled" | "outlined" | "borderless" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { rootVariants, styles };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { ToggleGroupProps } from "./type.mjs";
|
|
2
|
+
//#region src/base-ui/ToggleGroup/ToggleGroup.d.ts
|
|
3
|
+
declare const ToggleGroup: {
|
|
4
|
+
<Value extends string = string>({ className, classNames, defaultValue, disabled, onChange, options, ref, size, style, styles: customStyles, value, variant }: ToggleGroupProps<Value>): import("react").JSX.Element;
|
|
5
|
+
displayName: string;
|
|
6
|
+
};
|
|
7
|
+
//#endregion
|
|
8
|
+
export { ToggleGroup as default };
|
|
9
|
+
//# sourceMappingURL=ToggleGroup.d.mts.map
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot } from "./atoms.mjs";
|
|
3
|
+
import { useMemo } from "react";
|
|
4
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
5
|
+
import { cx } from "antd-style";
|
|
6
|
+
import useMergeState from "use-merge-value";
|
|
7
|
+
//#region src/base-ui/ToggleGroup/ToggleGroup.tsx
|
|
8
|
+
const normalizeOption = (option) => typeof option === "string" ? { value: option } : option;
|
|
9
|
+
const ToggleGroup = ({ className, classNames, defaultValue, disabled = false, onChange, options, ref, size = "middle", style, styles: customStyles, value, variant = "outlined" }) => {
|
|
10
|
+
const [innerValue, setInnerValue] = useMergeState(defaultValue, {
|
|
11
|
+
defaultValue,
|
|
12
|
+
onChange: (next) => {
|
|
13
|
+
if (next != null) onChange?.(next);
|
|
14
|
+
},
|
|
15
|
+
value
|
|
16
|
+
});
|
|
17
|
+
const normalizedOptions = useMemo(() => (options ?? []).map((o) => normalizeOption(o)), [options]);
|
|
18
|
+
const groupValue = useMemo(() => innerValue != null ? [innerValue] : [], [innerValue]);
|
|
19
|
+
return /* @__PURE__ */ jsx(ToggleGroupRoot, {
|
|
20
|
+
className: cx(classNames?.root, className),
|
|
21
|
+
disabled,
|
|
22
|
+
ref,
|
|
23
|
+
style: {
|
|
24
|
+
...style,
|
|
25
|
+
...customStyles?.root
|
|
26
|
+
},
|
|
27
|
+
value: groupValue,
|
|
28
|
+
variant,
|
|
29
|
+
onValueChange: (next) => {
|
|
30
|
+
const picked = next[0];
|
|
31
|
+
if (picked != null) setInnerValue(picked);
|
|
32
|
+
},
|
|
33
|
+
children: normalizedOptions.map((opt) => /* @__PURE__ */ jsxs(ToggleGroupItem, {
|
|
34
|
+
"aria-label": typeof opt.label === "string" ? opt.label : opt.title,
|
|
35
|
+
className: cx(classNames?.item, opt.className),
|
|
36
|
+
disabled: disabled || opt.disabled,
|
|
37
|
+
size,
|
|
38
|
+
style: customStyles?.item,
|
|
39
|
+
title: opt.title,
|
|
40
|
+
value: opt.value,
|
|
41
|
+
variant,
|
|
42
|
+
children: [opt.icon != null && /* @__PURE__ */ jsx(ToggleGroupItemIcon, {
|
|
43
|
+
className: classNames?.itemIcon,
|
|
44
|
+
style: customStyles?.itemIcon,
|
|
45
|
+
children: opt.icon
|
|
46
|
+
}), opt.label != null && /* @__PURE__ */ jsx(ToggleGroupItemLabel, {
|
|
47
|
+
className: classNames?.itemLabel,
|
|
48
|
+
style: customStyles?.itemLabel,
|
|
49
|
+
children: opt.label
|
|
50
|
+
})]
|
|
51
|
+
}, opt.value))
|
|
52
|
+
});
|
|
53
|
+
};
|
|
54
|
+
ToggleGroup.displayName = "ToggleGroup";
|
|
55
|
+
//#endregion
|
|
56
|
+
export { ToggleGroup as default };
|
|
57
|
+
|
|
58
|
+
//# sourceMappingURL=ToggleGroup.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ToggleGroup.mjs","names":["useControlledState"],"sources":["../../../src/base-ui/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["'use client';\n\nimport { cx } from 'antd-style';\nimport { useMemo } from 'react';\nimport useControlledState from 'use-merge-value';\n\nimport {\n ToggleGroupItem,\n ToggleGroupItemIcon,\n ToggleGroupItemLabel,\n ToggleGroupRoot,\n} from './atoms';\nimport type { ToggleGroupOption, ToggleGroupProps } from './type';\n\nconst normalizeOption = <Value extends string>(\n option: ToggleGroupOption<Value> | Value,\n): ToggleGroupOption<Value> => (typeof option === 'string' ? { value: option } : option);\n\nconst ToggleGroup = <Value extends string = string>({\n className,\n classNames,\n defaultValue,\n disabled = false,\n onChange,\n options,\n ref,\n size = 'middle',\n style,\n styles: customStyles,\n value,\n variant = 'outlined',\n}: ToggleGroupProps<Value>) => {\n const [innerValue, setInnerValue] = useControlledState<Value | undefined>(defaultValue, {\n defaultValue,\n onChange: (next) => {\n if (next != null) onChange?.(next);\n },\n value,\n });\n\n const normalizedOptions = useMemo(\n () => (options ?? []).map((o) => normalizeOption<Value>(o)),\n [options],\n );\n\n const groupValue = useMemo<Value[]>(() => (innerValue != null ? [innerValue] : []), [innerValue]);\n\n return (\n <ToggleGroupRoot<Value>\n className={cx(classNames?.root, className)}\n disabled={disabled}\n ref={ref}\n style={{ ...style, ...customStyles?.root }}\n value={groupValue}\n variant={variant}\n onValueChange={(next) => {\n const picked = next[0];\n if (picked != null) setInnerValue(picked);\n }}\n >\n {normalizedOptions.map((opt) => (\n <ToggleGroupItem<Value>\n aria-label={typeof opt.label === 'string' ? opt.label : opt.title}\n className={cx(classNames?.item, opt.className)}\n disabled={disabled || opt.disabled}\n key={opt.value}\n size={size}\n style={customStyles?.item}\n title={opt.title}\n value={opt.value}\n variant={variant}\n >\n {opt.icon != null && (\n <ToggleGroupItemIcon className={classNames?.itemIcon} style={customStyles?.itemIcon}>\n {opt.icon}\n </ToggleGroupItemIcon>\n )}\n {opt.label != null && (\n <ToggleGroupItemLabel className={classNames?.itemLabel} style={customStyles?.itemLabel}>\n {opt.label}\n </ToggleGroupItemLabel>\n )}\n </ToggleGroupItem>\n ))}\n </ToggleGroupRoot>\n );\n};\n\nToggleGroup.displayName = 'ToggleGroup';\n\nexport default ToggleGroup;\n"],"mappings":";;;;;;;AAcA,MAAM,mBACJ,WAC8B,OAAO,WAAW,WAAW,EAAE,OAAO,OAAO,IAAI;AAEjF,MAAM,eAA8C,EAClD,WACA,YACA,cACA,WAAW,OACX,UACA,SACA,KACA,OAAO,UACP,OACA,QAAQ,cACR,OACA,UAAU,iBACmB;CAC7B,MAAM,CAAC,YAAY,iBAAiBA,cAAsC,cAAc;EACtF;EACA,WAAW,SAAS;GAClB,IAAI,QAAQ,MAAM,WAAW,IAAI;EACnC;EACA;CACF,CAAC;CAED,MAAM,oBAAoB,eACjB,WAAW,CAAC,EAAA,CAAG,KAAK,MAAM,gBAAuB,CAAC,CAAC,GAC1D,CAAC,OAAO,CACV;CAEA,MAAM,aAAa,cAAwB,cAAc,OAAO,CAAC,UAAU,IAAI,CAAC,GAAI,CAAC,UAAU,CAAC;CAEhG,OACE,oBAAC,iBAAD;EACE,WAAW,GAAG,YAAY,MAAM,SAAS;EAC/B;EACL;EACL,OAAO;GAAE,GAAG;GAAO,GAAG,cAAc;EAAK;EACzC,OAAO;EACE;EACT,gBAAgB,SAAS;GACvB,MAAM,SAAS,KAAK;GACpB,IAAI,UAAU,MAAM,cAAc,MAAM;EAC1C;EAEC,UAAA,kBAAkB,KAAK,QACtB,qBAAC,iBAAD;GACE,cAAY,OAAO,IAAI,UAAU,WAAW,IAAI,QAAQ,IAAI;GAC5D,WAAW,GAAG,YAAY,MAAM,IAAI,SAAS;GAC7C,UAAU,YAAY,IAAI;GAEpB;GACN,OAAO,cAAc;GACrB,OAAO,IAAI;GACX,OAAO,IAAI;GACF;GATX,UAAA,CAWG,IAAI,QAAQ,QACX,oBAAC,qBAAD;IAAqB,WAAW,YAAY;IAAU,OAAO,cAAc;IACxE,UAAA,IAAI;GACc,CAAA,GAEtB,IAAI,SAAS,QACZ,oBAAC,sBAAD;IAAsB,WAAW,YAAY;IAAW,OAAO,cAAc;IAC1E,UAAA,IAAI;GACe,CAAA,CAET;EAjBV,GAAA,IAAI,KAiBM,CAClB;CACc,CAAA;AAErB;AAEA,YAAY,cAAc"}
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { ToggleGroupSize, ToggleGroupVariant } from "./type.mjs";
|
|
2
|
+
import { styles } from "./style.mjs";
|
|
3
|
+
import { CSSProperties, ComponentProps, FC, ReactNode } from "react";
|
|
4
|
+
import { Toggle } from "@base-ui/react/toggle";
|
|
5
|
+
import { ToggleGroup } from "@base-ui/react/toggle-group";
|
|
6
|
+
//#region src/base-ui/ToggleGroup/atoms.d.ts
|
|
7
|
+
type ToggleGroupRootProps<Value extends string = string> = Omit<ComponentProps<typeof ToggleGroup<Value>>, 'className' | 'render'> & {
|
|
8
|
+
className?: string;
|
|
9
|
+
variant?: ToggleGroupVariant;
|
|
10
|
+
};
|
|
11
|
+
declare const ToggleGroupRoot: {
|
|
12
|
+
<Value extends string = string>({ className, variant, ...rest }: ToggleGroupRootProps<Value>): import("react").JSX.Element;
|
|
13
|
+
displayName: string;
|
|
14
|
+
};
|
|
15
|
+
type ToggleGroupItemProps<Value extends string = string> = Omit<ComponentProps<typeof Toggle<Value>>, 'className' | 'render'> & {
|
|
16
|
+
className?: string;
|
|
17
|
+
size?: ToggleGroupSize;
|
|
18
|
+
variant?: ToggleGroupVariant;
|
|
19
|
+
};
|
|
20
|
+
declare const ToggleGroupItem: {
|
|
21
|
+
<Value extends string = string>({ className, size, variant, ...rest }: ToggleGroupItemProps<Value>): import("react").JSX.Element;
|
|
22
|
+
displayName: string;
|
|
23
|
+
};
|
|
24
|
+
interface SimpleSpanProps {
|
|
25
|
+
children?: ReactNode;
|
|
26
|
+
className?: string;
|
|
27
|
+
style?: CSSProperties;
|
|
28
|
+
}
|
|
29
|
+
declare const ToggleGroupItemIcon: FC<SimpleSpanProps>;
|
|
30
|
+
declare const ToggleGroupItemLabel: FC<SimpleSpanProps>;
|
|
31
|
+
//#endregion
|
|
32
|
+
export { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupItemProps, ToggleGroupRoot, ToggleGroupRootProps, styles as toggleGroupStyles };
|
|
33
|
+
//# sourceMappingURL=atoms.d.mts.map
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
"use client";
|
|
2
|
+
import { itemVariants, rootVariants, styles } from "./style.mjs";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
import { cx } from "antd-style";
|
|
5
|
+
import { Toggle } from "@base-ui/react/toggle";
|
|
6
|
+
import { ToggleGroup } from "@base-ui/react/toggle-group";
|
|
7
|
+
//#region src/base-ui/ToggleGroup/atoms.tsx
|
|
8
|
+
const ToggleGroupRoot = ({ className, variant = "outlined", ...rest }) => {
|
|
9
|
+
return /* @__PURE__ */ jsx(ToggleGroup, {
|
|
10
|
+
className: cx(rootVariants({ variant }), className),
|
|
11
|
+
...rest
|
|
12
|
+
});
|
|
13
|
+
};
|
|
14
|
+
ToggleGroupRoot.displayName = "ToggleGroupRoot";
|
|
15
|
+
const ToggleGroupItem = ({ className, size = "middle", variant = "outlined", ...rest }) => {
|
|
16
|
+
return /* @__PURE__ */ jsx(Toggle, {
|
|
17
|
+
className: cx(itemVariants({
|
|
18
|
+
size,
|
|
19
|
+
variant
|
|
20
|
+
}), className),
|
|
21
|
+
...rest
|
|
22
|
+
});
|
|
23
|
+
};
|
|
24
|
+
ToggleGroupItem.displayName = "ToggleGroupItem";
|
|
25
|
+
const ToggleGroupItemIcon = ({ children, className, style }) => /* @__PURE__ */ jsx("span", {
|
|
26
|
+
className: cx(styles.itemIcon, className),
|
|
27
|
+
style,
|
|
28
|
+
children
|
|
29
|
+
});
|
|
30
|
+
ToggleGroupItemIcon.displayName = "ToggleGroupItemIcon";
|
|
31
|
+
const ToggleGroupItemLabel = ({ children, className, style }) => /* @__PURE__ */ jsx("span", {
|
|
32
|
+
className: cx("toggle-group-item-label", styles.itemLabel, className),
|
|
33
|
+
style,
|
|
34
|
+
children
|
|
35
|
+
});
|
|
36
|
+
ToggleGroupItemLabel.displayName = "ToggleGroupItemLabel";
|
|
37
|
+
//#endregion
|
|
38
|
+
export { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, styles as toggleGroupStyles };
|
|
39
|
+
|
|
40
|
+
//# sourceMappingURL=atoms.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"atoms.mjs","names":["BaseUIToggleGroup","BaseUIToggle"],"sources":["../../../src/base-ui/ToggleGroup/atoms.tsx"],"sourcesContent":["'use client';\n\nimport { Toggle as BaseUIToggle } from '@base-ui/react/toggle';\nimport { ToggleGroup as BaseUIToggleGroup } from '@base-ui/react/toggle-group';\nimport { cx } from 'antd-style';\nimport { type ComponentProps, type CSSProperties, type FC, type ReactNode } from 'react';\n\nimport { itemVariants, rootVariants, styles } from './style';\nimport type { ToggleGroupSize, ToggleGroupVariant } from './type';\n\nexport type ToggleGroupRootProps<Value extends string = string> = Omit<\n ComponentProps<typeof BaseUIToggleGroup<Value>>,\n 'className' | 'render'\n> & {\n className?: string;\n variant?: ToggleGroupVariant;\n};\n\nexport const ToggleGroupRoot = <Value extends string = string>({\n className,\n variant = 'outlined',\n ...rest\n}: ToggleGroupRootProps<Value>) => {\n return (\n <BaseUIToggleGroup<Value> className={cx(rootVariants({ variant }), className)} {...rest} />\n );\n};\n\nToggleGroupRoot.displayName = 'ToggleGroupRoot';\n\nexport type ToggleGroupItemProps<Value extends string = string> = Omit<\n ComponentProps<typeof BaseUIToggle<Value>>,\n 'className' | 'render'\n> & {\n className?: string;\n size?: ToggleGroupSize;\n variant?: ToggleGroupVariant;\n};\n\nexport const ToggleGroupItem = <Value extends string = string>({\n className,\n size = 'middle',\n variant = 'outlined',\n ...rest\n}: ToggleGroupItemProps<Value>) => {\n return (\n <BaseUIToggle<Value> className={cx(itemVariants({ size, variant }), className)} {...rest} />\n );\n};\n\nToggleGroupItem.displayName = 'ToggleGroupItem';\n\ninterface SimpleSpanProps {\n children?: ReactNode;\n className?: string;\n style?: CSSProperties;\n}\n\nexport const ToggleGroupItemIcon: FC<SimpleSpanProps> = ({ children, className, style }) => (\n <span className={cx(styles.itemIcon, className)} style={style}>\n {children}\n </span>\n);\nToggleGroupItemIcon.displayName = 'ToggleGroupItemIcon';\n\nexport const ToggleGroupItemLabel: FC<SimpleSpanProps> = ({ children, className, style }) => (\n <span className={cx('toggle-group-item-label', styles.itemLabel, className)} style={style}>\n {children}\n </span>\n);\nToggleGroupItemLabel.displayName = 'ToggleGroupItemLabel';\n\nexport { styles as toggleGroupStyles } from './style';\n"],"mappings":";;;;;;;AAkBA,MAAa,mBAAkD,EAC7D,WACA,UAAU,YACV,GAAG,WAC8B;CACjC,OACE,oBAACA,aAAD;EAA0B,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAE9F;AAEA,gBAAgB,cAAc;AAW9B,MAAa,mBAAkD,EAC7D,WACA,OAAO,UACP,UAAU,YACV,GAAG,WAC8B;CACjC,OACE,oBAACC,QAAD;EAAqB,WAAW,GAAG,aAAa;GAAE;GAAM;EAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAO,CAAA;AAE/F;AAEA,gBAAgB,cAAc;AAQ9B,MAAa,uBAA4C,EAAE,UAAU,WAAW,YAC9E,oBAAC,QAAD;CAAM,WAAW,GAAG,OAAO,UAAU,SAAS;CAAU;CACrD;AACG,CAAA;AAER,oBAAoB,cAAc;AAElC,MAAa,wBAA6C,EAAE,UAAU,WAAW,YAC/E,oBAAC,QAAD;CAAM,WAAW,GAAG,2BAA2B,OAAO,WAAW,SAAS;CAAU;CACjF;AACG,CAAA;AAER,qBAAqB,cAAc"}
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { ToggleGroupClassNames, ToggleGroupOption, ToggleGroupProps, ToggleGroupSize, ToggleGroupStyles, ToggleGroupVariant } from "./type.mjs";
|
|
2
|
+
import { styles } from "./style.mjs";
|
|
3
|
+
import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupItemProps, ToggleGroupRoot, ToggleGroupRootProps } from "./atoms.mjs";
|
|
4
|
+
import ToggleGroup from "./ToggleGroup.mjs";
|
|
5
|
+
export { type ToggleGroupClassNames, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, type ToggleGroupItemProps, type ToggleGroupOption, type ToggleGroupProps, ToggleGroupRoot, type ToggleGroupRootProps, type ToggleGroupSize, type ToggleGroupStyles, type ToggleGroupVariant, ToggleGroup as default, styles as toggleGroupStyles };
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
//#region src/base-ui/ToggleGroup/style.d.ts
|
|
2
|
+
declare const styles: {
|
|
3
|
+
item: string;
|
|
4
|
+
itemIcon: string;
|
|
5
|
+
itemLabel: string;
|
|
6
|
+
itemMiddle: string;
|
|
7
|
+
itemSmall: string;
|
|
8
|
+
itemOutlined: string;
|
|
9
|
+
root: string;
|
|
10
|
+
rootBorderless: string;
|
|
11
|
+
rootOutlined: string;
|
|
12
|
+
};
|
|
13
|
+
//#endregion
|
|
14
|
+
export { styles };
|
|
15
|
+
//# sourceMappingURL=style.d.mts.map
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import { createStaticStyles } from "antd-style";
|
|
2
|
+
import { cva } from "class-variance-authority";
|
|
3
|
+
//#region src/base-ui/ToggleGroup/style.ts
|
|
4
|
+
const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
5
|
+
item: css`
|
|
6
|
+
cursor: pointer;
|
|
7
|
+
user-select: none;
|
|
8
|
+
|
|
9
|
+
display: inline-flex;
|
|
10
|
+
flex-shrink: 0;
|
|
11
|
+
gap: 4px;
|
|
12
|
+
align-items: center;
|
|
13
|
+
justify-content: center;
|
|
14
|
+
|
|
15
|
+
border: 0;
|
|
16
|
+
border-radius: ${cssVar.borderRadius};
|
|
17
|
+
|
|
18
|
+
font: inherit;
|
|
19
|
+
font-size: 12px;
|
|
20
|
+
color: ${cssVar.colorTextSecondary};
|
|
21
|
+
white-space: nowrap;
|
|
22
|
+
|
|
23
|
+
background: transparent;
|
|
24
|
+
outline: none;
|
|
25
|
+
|
|
26
|
+
transition:
|
|
27
|
+
background 120ms ${cssVar.motionEaseOut},
|
|
28
|
+
color 120ms ${cssVar.motionEaseOut};
|
|
29
|
+
|
|
30
|
+
&:hover:not([data-disabled]) {
|
|
31
|
+
color: ${cssVar.colorText};
|
|
32
|
+
background: ${cssVar.colorFillSecondary};
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
&[data-pressed] {
|
|
36
|
+
color: ${cssVar.colorText};
|
|
37
|
+
background: ${cssVar.colorFillSecondary};
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
&[data-pressed]:hover:not([data-disabled]) {
|
|
41
|
+
background: ${cssVar.colorFill};
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
&:focus-visible {
|
|
45
|
+
outline: 2px solid ${cssVar.colorPrimaryBorder};
|
|
46
|
+
outline-offset: -2px;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&[data-disabled] {
|
|
50
|
+
cursor: not-allowed;
|
|
51
|
+
color: ${cssVar.colorTextDisabled};
|
|
52
|
+
}
|
|
53
|
+
`,
|
|
54
|
+
itemIcon: css`
|
|
55
|
+
display: inline-flex;
|
|
56
|
+
flex-shrink: 0;
|
|
57
|
+
align-items: center;
|
|
58
|
+
`,
|
|
59
|
+
itemLabel: css`
|
|
60
|
+
display: inline-flex;
|
|
61
|
+
align-items: center;
|
|
62
|
+
`,
|
|
63
|
+
itemMiddle: css`
|
|
64
|
+
height: 28px;
|
|
65
|
+
padding-inline: 8px;
|
|
66
|
+
`,
|
|
67
|
+
itemSmall: css`
|
|
68
|
+
height: 24px;
|
|
69
|
+
padding-inline: 6px;
|
|
70
|
+
`,
|
|
71
|
+
itemOutlined: css`
|
|
72
|
+
border-radius: 0;
|
|
73
|
+
|
|
74
|
+
& + & {
|
|
75
|
+
border-inline-start: 1px solid ${cssVar.colorBorderSecondary};
|
|
76
|
+
}
|
|
77
|
+
`,
|
|
78
|
+
root: css`
|
|
79
|
+
display: inline-flex;
|
|
80
|
+
align-items: center;
|
|
81
|
+
`,
|
|
82
|
+
rootBorderless: css`
|
|
83
|
+
gap: 2px;
|
|
84
|
+
`,
|
|
85
|
+
rootOutlined: css`
|
|
86
|
+
overflow: hidden;
|
|
87
|
+
border: 1px solid ${cssVar.colorBorderSecondary};
|
|
88
|
+
border-radius: ${cssVar.borderRadius};
|
|
89
|
+
`
|
|
90
|
+
}));
|
|
91
|
+
const rootVariants = cva(styles.root, {
|
|
92
|
+
defaultVariants: { variant: "outlined" },
|
|
93
|
+
variants: { variant: {
|
|
94
|
+
borderless: styles.rootBorderless,
|
|
95
|
+
outlined: styles.rootOutlined
|
|
96
|
+
} }
|
|
97
|
+
});
|
|
98
|
+
const itemVariants = cva(styles.item, {
|
|
99
|
+
defaultVariants: {
|
|
100
|
+
size: "middle",
|
|
101
|
+
variant: "outlined"
|
|
102
|
+
},
|
|
103
|
+
variants: {
|
|
104
|
+
size: {
|
|
105
|
+
middle: styles.itemMiddle,
|
|
106
|
+
small: styles.itemSmall
|
|
107
|
+
},
|
|
108
|
+
variant: {
|
|
109
|
+
borderless: null,
|
|
110
|
+
outlined: styles.itemOutlined
|
|
111
|
+
}
|
|
112
|
+
}
|
|
113
|
+
});
|
|
114
|
+
//#endregion
|
|
115
|
+
export { itemVariants, rootVariants, styles };
|
|
116
|
+
|
|
117
|
+
//# sourceMappingURL=style.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"style.mjs","names":[],"sources":["../../../src/base-ui/ToggleGroup/style.ts"],"sourcesContent":["import { createStaticStyles } from 'antd-style';\nimport { cva } from 'class-variance-authority';\n\nexport const styles = createStaticStyles(({ css, cssVar }) => ({\n item: css`\n cursor: pointer;\n user-select: none;\n\n display: inline-flex;\n flex-shrink: 0;\n gap: 4px;\n align-items: center;\n justify-content: center;\n\n border: 0;\n border-radius: ${cssVar.borderRadius};\n\n font: inherit;\n font-size: 12px;\n color: ${cssVar.colorTextSecondary};\n white-space: nowrap;\n\n background: transparent;\n outline: none;\n\n transition:\n background 120ms ${cssVar.motionEaseOut},\n color 120ms ${cssVar.motionEaseOut};\n\n &:hover:not([data-disabled]) {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &[data-pressed] {\n color: ${cssVar.colorText};\n background: ${cssVar.colorFillSecondary};\n }\n\n &[data-pressed]:hover:not([data-disabled]) {\n background: ${cssVar.colorFill};\n }\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 itemIcon: css`\n display: inline-flex;\n flex-shrink: 0;\n align-items: center;\n `,\n itemLabel: css`\n display: inline-flex;\n align-items: center;\n `,\n itemMiddle: css`\n height: 28px;\n padding-inline: 8px;\n `,\n itemSmall: css`\n height: 24px;\n padding-inline: 6px;\n `,\n itemOutlined: css`\n border-radius: 0;\n\n & + & {\n border-inline-start: 1px solid ${cssVar.colorBorderSecondary};\n }\n `,\n root: css`\n display: inline-flex;\n align-items: center;\n `,\n rootBorderless: css`\n gap: 2px;\n `,\n rootOutlined: css`\n overflow: hidden;\n border: 1px solid ${cssVar.colorBorderSecondary};\n border-radius: ${cssVar.borderRadius};\n `,\n}));\n\nexport const rootVariants = cva(styles.root, {\n defaultVariants: { variant: 'outlined' },\n variants: {\n variant: {\n borderless: styles.rootBorderless,\n outlined: styles.rootOutlined,\n },\n },\n});\n\nexport const itemVariants = cva(styles.item, {\n defaultVariants: { size: 'middle', variant: 'outlined' },\n variants: {\n size: {\n middle: styles.itemMiddle,\n small: styles.itemSmall,\n },\n variant: {\n borderless: null,\n outlined: styles.itemOutlined,\n },\n },\n});\n"],"mappings":";;;AAGA,MAAa,SAAS,oBAAoB,EAAE,KAAK,cAAc;CAC7D,MAAM,GAAG;;;;;;;;;;;qBAWU,OAAO,aAAa;;;;aAI5B,OAAO,mBAAmB;;;;;;;yBAOd,OAAO,cAAc;oBAC1B,OAAO,cAAc;;;eAG1B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;eAI/B,OAAO,UAAU;oBACZ,OAAO,mBAAmB;;;;oBAI1B,OAAO,UAAU;;;;2BAIV,OAAO,mBAAmB;;;;;;eAMtC,OAAO,kBAAkB;;;CAGtC,UAAU,GAAG;;;;;CAKb,WAAW,GAAG;;;;CAId,YAAY,GAAG;;;;CAIf,WAAW,GAAG;;;;CAId,cAAc,GAAG;;;;uCAIoB,OAAO,qBAAqB;;;CAGjE,MAAM,GAAG;;;;CAIT,gBAAgB,GAAG;;;CAGnB,cAAc,GAAG;;wBAEK,OAAO,qBAAqB;qBAC/B,OAAO,aAAa;;AAEzC,EAAE;AAEF,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB,EAAE,SAAS,WAAW;CACvC,UAAU,EACR,SAAS;EACP,YAAY,OAAO;EACnB,UAAU,OAAO;CACnB,EACF;AACF,CAAC;AAED,MAAa,eAAe,IAAI,OAAO,MAAM;CAC3C,iBAAiB;EAAE,MAAM;EAAU,SAAS;CAAW;CACvD,UAAU;EACR,MAAM;GACJ,QAAQ,OAAO;GACf,OAAO,OAAO;EAChB;EACA,SAAS;GACP,YAAY;GACZ,UAAU,OAAO;EACnB;CACF;AACF,CAAC"}
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
import { CSSProperties, ReactNode, Ref } from "react";
|
|
2
|
+
//#region src/base-ui/ToggleGroup/type.d.ts
|
|
3
|
+
type ToggleGroupSize = 'middle' | 'small';
|
|
4
|
+
type ToggleGroupVariant = 'borderless' | 'outlined';
|
|
5
|
+
interface ToggleGroupClassNames {
|
|
6
|
+
item?: string;
|
|
7
|
+
itemIcon?: string;
|
|
8
|
+
itemLabel?: string;
|
|
9
|
+
root?: string;
|
|
10
|
+
}
|
|
11
|
+
interface ToggleGroupStyles {
|
|
12
|
+
item?: CSSProperties;
|
|
13
|
+
itemIcon?: CSSProperties;
|
|
14
|
+
itemLabel?: CSSProperties;
|
|
15
|
+
root?: CSSProperties;
|
|
16
|
+
}
|
|
17
|
+
interface ToggleGroupOption<Value extends string = string> {
|
|
18
|
+
className?: string;
|
|
19
|
+
disabled?: boolean;
|
|
20
|
+
icon?: ReactNode;
|
|
21
|
+
label?: ReactNode;
|
|
22
|
+
title?: string;
|
|
23
|
+
value: Value;
|
|
24
|
+
}
|
|
25
|
+
interface ToggleGroupProps<Value extends string = string> {
|
|
26
|
+
className?: string;
|
|
27
|
+
classNames?: ToggleGroupClassNames;
|
|
28
|
+
defaultValue?: Value;
|
|
29
|
+
disabled?: boolean;
|
|
30
|
+
onChange?: (value: Value) => void;
|
|
31
|
+
options?: (ToggleGroupOption<Value> | Value)[];
|
|
32
|
+
ref?: Ref<HTMLDivElement>;
|
|
33
|
+
size?: ToggleGroupSize;
|
|
34
|
+
style?: CSSProperties;
|
|
35
|
+
styles?: ToggleGroupStyles;
|
|
36
|
+
value?: Value;
|
|
37
|
+
variant?: ToggleGroupVariant;
|
|
38
|
+
}
|
|
39
|
+
//#endregion
|
|
40
|
+
export { ToggleGroupClassNames, ToggleGroupOption, ToggleGroupProps, ToggleGroupSize, ToggleGroupStyles, ToggleGroupVariant };
|
|
41
|
+
//# sourceMappingURL=type.d.mts.map
|
package/es/base-ui/index.d.mts
CHANGED
|
@@ -30,25 +30,30 @@ import "./ScrollArea/index.mjs";
|
|
|
30
30
|
import { ToastAPI, ToastInstance, ToastOptions, ToastPosition, ToastPromiseOptions, ToastProps, ToastType } from "./Toast/type.mjs";
|
|
31
31
|
import { ToastHost, ToastHostProps, toast, useToast } from "./Toast/imperative.mjs";
|
|
32
32
|
import "./Toast/index.mjs";
|
|
33
|
+
import { AccordionClassNames, AccordionHeaderProps, AccordionIndicatorPlacement, AccordionItemProps, AccordionItemType, AccordionPanelProps, AccordionProps, AccordionRootProps, AccordionStyles, AccordionTriggerProps, AccordionVariant } from "./Accordion/type.mjs";
|
|
34
|
+
import Accordion from "./Accordion/Accordion.mjs";
|
|
35
|
+
import { styles } from "./Accordion/style.mjs";
|
|
36
|
+
import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, useAccordionContext } from "./Accordion/atoms.mjs";
|
|
37
|
+
import "./Accordion/index.mjs";
|
|
33
38
|
import { ActionIconClassNames, ActionIconProps, ActionIconSize, ActionIconStyles } from "./ActionIcon/type.mjs";
|
|
34
39
|
import ActionIcon from "./ActionIcon/ActionIcon.mjs";
|
|
35
|
-
import { styles } from "./ActionIcon/style.mjs";
|
|
40
|
+
import { styles as styles$1 } from "./ActionIcon/style.mjs";
|
|
36
41
|
import "./ActionIcon/index.mjs";
|
|
37
42
|
import { AlertClassNames, AlertCloseConfig, AlertProps, AlertRef, AlertStyles, AlertType, AlertVariant } from "./Alert/type.mjs";
|
|
38
43
|
import Alert from "./Alert/Alert.mjs";
|
|
39
|
-
import { styles as styles$
|
|
44
|
+
import { styles as styles$2 } from "./Alert/style.mjs";
|
|
40
45
|
import "./Alert/index.mjs";
|
|
41
46
|
import { InputClassNames, InputNumberProps, InputOTPProps, InputPasswordProps, InputProps, InputSize, InputStyles, InputVariant, TextAreaAutoSize, TextAreaProps } from "./Input/type.mjs";
|
|
42
47
|
import Input from "./Input/Input.mjs";
|
|
43
48
|
import InputNumber from "./Input/InputNumber.mjs";
|
|
44
49
|
import InputOTP from "./Input/InputOTP.mjs";
|
|
45
50
|
import InputPassword from "./Input/InputPassword.mjs";
|
|
46
|
-
import { rootVariants, styles as styles$
|
|
51
|
+
import { rootVariants, styles as styles$6 } from "./Input/style.mjs";
|
|
47
52
|
import TextArea from "./Input/TextArea.mjs";
|
|
48
53
|
import "./Input/index.mjs";
|
|
49
54
|
import { AutoCompleteOption, AutoCompleteProps } from "./AutoComplete/type.mjs";
|
|
50
55
|
import AutoComplete from "./AutoComplete/AutoComplete.mjs";
|
|
51
|
-
import { styles as styles$
|
|
56
|
+
import { styles as styles$3 } from "./AutoComplete/style.mjs";
|
|
52
57
|
import "./AutoComplete/index.mjs";
|
|
53
58
|
import { AvatarClassNames, AvatarGroupItemType, AvatarGroupProps, AvatarProps, AvatarStyles } from "./Avatar/type.mjs";
|
|
54
59
|
import AvatarGroup from "./Avatar/AvatarGroup/index.mjs";
|
|
@@ -56,12 +61,12 @@ import Avatar from "./Avatar/index.mjs";
|
|
|
56
61
|
import { ButtonIconPosition, ButtonProps, ButtonShape, ButtonSize, ButtonType } from "./Button/type.mjs";
|
|
57
62
|
import Button from "./Button/Button.mjs";
|
|
58
63
|
import _default, { SplitButtonMenuProps, SplitButtonProps } from "./Button/SplitButton.mjs";
|
|
59
|
-
import { styles as styles$
|
|
64
|
+
import { styles as styles$4 } from "./Button/style.mjs";
|
|
60
65
|
import "./Button/index.mjs";
|
|
61
66
|
import { CheckboxGroupOption, CheckboxGroupProps, CheckboxProps, CheckboxShape } from "./Checkbox/type.mjs";
|
|
62
67
|
import Checkbox from "./Checkbox/Checkbox.mjs";
|
|
63
68
|
import CheckboxGroup from "./Checkbox/CheckboxGroup.mjs";
|
|
64
|
-
import { styles as styles$
|
|
69
|
+
import { styles as styles$5 } from "./Checkbox/style.mjs";
|
|
65
70
|
import "./Checkbox/index.mjs";
|
|
66
71
|
import { ControlSize, controlHeight } from "./controlSize.mjs";
|
|
67
72
|
import { DrawerPlacement, DrawerProps, DrawerPush, DrawerSemanticNames, DrawerSemanticStyles } from "./Drawer/type.mjs";
|
|
@@ -95,7 +100,7 @@ import { Form } from "./Form/index.mjs";
|
|
|
95
100
|
import { RadioGroupOption, RadioGroupProps, RadioProps } from "./Radio/type.mjs";
|
|
96
101
|
import Radio from "./Radio/Radio.mjs";
|
|
97
102
|
import RadioGroup from "./Radio/RadioGroup.mjs";
|
|
98
|
-
import { styles as styles$
|
|
103
|
+
import { styles as styles$7 } from "./Radio/style.mjs";
|
|
99
104
|
import "./Radio/index.mjs";
|
|
100
105
|
import { SegmentedClassNames, SegmentedOption, SegmentedOptions, SegmentedOrientation, SegmentedProps, SegmentedSize, SegmentedStyles, SegmentedVariant } from "./Segmented/type.mjs";
|
|
101
106
|
import { SegmentedIndicator, SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedItemProps, SegmentedRoot, SegmentedRootProps } from "./Segmented/atoms.mjs";
|
|
@@ -108,15 +113,15 @@ import "./Select/index.mjs";
|
|
|
108
113
|
import { SliderProps, SliderWithInputProps } from "./Slider/type.mjs";
|
|
109
114
|
import Slider from "./Slider/Slider.mjs";
|
|
110
115
|
import SliderWithInput from "./Slider/SliderWithInput.mjs";
|
|
111
|
-
import { styles as styles$
|
|
116
|
+
import { styles as styles$8 } from "./Slider/style.mjs";
|
|
112
117
|
import "./Slider/index.mjs";
|
|
113
118
|
import { SwitchChangeEventHandler, SwitchClassNames, SwitchClickEventHandler, SwitchContextType, SwitchIconPosition, SwitchIconProps, SwitchProps, SwitchRootProps, SwitchSize, SwitchStyles, SwitchThumbProps } from "./Switch/type.mjs";
|
|
114
|
-
import { styles as styles$
|
|
119
|
+
import { styles as styles$9 } from "./Switch/style.mjs";
|
|
115
120
|
import { SwitchIcon, SwitchRoot, SwitchThumb, useSwitchContext } from "./Switch/atoms.mjs";
|
|
116
121
|
import Switch from "./Switch/Switch.mjs";
|
|
117
122
|
import "./Switch/index.mjs";
|
|
118
123
|
import { TabsClassNames, TabsIndicatorProps, TabsItem, TabsListProps, TabsOrientation, TabsPanelProps, TabsProps, TabsRootProps, TabsSize, TabsStyles, TabsTabProps, TabsVariant } from "./Tabs/type.mjs";
|
|
119
|
-
import { styles as styles$
|
|
124
|
+
import { styles as styles$10 } from "./Tabs/style.mjs";
|
|
120
125
|
import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, useTabsContext } from "./Tabs/atoms.mjs";
|
|
121
126
|
import Tabs from "./Tabs/Tabs.mjs";
|
|
122
127
|
import "./Tabs/index.mjs";
|
|
@@ -124,8 +129,13 @@ import { TagClassNames, TagProps, TagShape, TagSize, TagStyles, TagVariant } fro
|
|
|
124
129
|
import Tag from "./Tag/Tag.mjs";
|
|
125
130
|
import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from "./Tag/utils.mjs";
|
|
126
131
|
import "./Tag/index.mjs";
|
|
127
|
-
import { styles as styles$
|
|
132
|
+
import { styles as styles$11, variants } from "./Text/style.mjs";
|
|
128
133
|
import { TextClassNames, TextProps, TextStyles } from "./Text/type.mjs";
|
|
129
134
|
import Text from "./Text/Text.mjs";
|
|
130
135
|
import "./Text/index.mjs";
|
|
131
|
-
|
|
136
|
+
import { ToggleGroupClassNames, ToggleGroupOption, ToggleGroupProps, ToggleGroupSize, ToggleGroupStyles, ToggleGroupVariant } from "./ToggleGroup/type.mjs";
|
|
137
|
+
import { styles as styles$12 } from "./ToggleGroup/style.mjs";
|
|
138
|
+
import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupItemProps, ToggleGroupRoot, ToggleGroupRootProps } from "./ToggleGroup/atoms.mjs";
|
|
139
|
+
import ToggleGroup from "./ToggleGroup/ToggleGroup.mjs";
|
|
140
|
+
import "./ToggleGroup/index.mjs";
|
|
141
|
+
export { Accordion, 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, ActionIcon, type ActionIconClassNames, type ActionIconProps, type ActionIconSize, type ActionIconStyles, Alert, type AlertClassNames, type AlertCloseConfig, type AlertProps, type AlertRef, type AlertStyles, type AlertType, type AlertVariant, AutoComplete, type AutoCompleteOption, type AutoCompleteProps, Avatar, type AvatarClassNames, AvatarGroup, type AvatarGroupItemType, type AvatarGroupProps, type AvatarProps, type AvatarStyles, type BaseModalProps, Button, type ButtonIconPosition, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonType, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, type CheckboxShape, type ContextMenuCheckboxItem, ContextMenuHost, type ContextMenuInterceptor, type ContextMenuItem, ContextMenuTrigger, type ControlSize, Drawer, DrawerBackdrop, type DrawerBackdropProps, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, type DrawerPlacement, DrawerPopup, type DrawerPopupProps, DrawerPortal, type DrawerPortalProps, type DrawerProps, type DrawerPush, DrawerRoot, type DrawerRootProps, type DrawerSemanticNames, type DrawerSemanticStyles, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, type DropdownItem, DropdownMenu, type DropdownMenuCheckboxItem, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, type DropdownMenuCheckboxItemProps, DropdownMenuFooter, type DropdownMenuFooterProps, DropdownMenuGroup, DropdownMenuGroupLabel, type DropdownMenuGroupLabelProps, DropdownMenuHeader, type DropdownMenuHeaderProps, DropdownMenuItem, DropdownMenuItemContent, type DropdownMenuItemContentProps, DropdownMenuItemDesc, type DropdownMenuItemDescProps, DropdownMenuItemExtra, type DropdownMenuItemExtraProps, DropdownMenuItemIcon, type DropdownMenuItemIconProps, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, type DropdownMenuItemLabelGroupProps, type DropdownMenuItemLabelProps, type DropdownMenuItemProps, type DropdownMenuPlacement, DropdownMenuPopup, type DropdownMenuPopupProps, DropdownMenuPortal, type DropdownMenuPortalProps, DropdownMenuPositioner, type DropdownMenuPositionerProps, type DropdownMenuProps, DropdownMenuRoot, DropdownMenuScrollViewport, type DropdownMenuScrollViewportProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuSubmenuArrow, type DropdownMenuSubmenuArrowProps, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, type DropdownMenuSubmenuTriggerProps, DropdownMenuSwitchItem, type DropdownMenuSwitchItemProps, type DropdownMenuSwitchItem$1 as DropdownMenuSwitchItemType, DropdownMenuTrigger, type DropdownMenuTriggerProps, FloatingPanel, type FloatingPanelOffset, type FloatingPanelPlacement, type FloatingPanelProps, FloatingSheet, type FloatingSheetProps, Form, type FormContextValue, FormDivider, type FormDividerProps, FormField, type FormFieldProps, FormFlatGroup, type FormFlatGroupProps, FormFooter, type FormFooterProps, FormGroup, type FormGroupItemType, type FormGroupProps, type FormLayout, type FormProps, FormSubmitFooter, type FormSubmitFooterProps, FormTitle, type FormTitleProps, type FormValues, type FormVariant, type IconSpaceMode, type ImperativeModalProps, Input, type InputClassNames, InputNumber, type InputNumberProps, InputOTP, type InputOTPProps, InputPassword, type InputPasswordProps, type InputProps, type InputSize, type InputStyles, type InputVariant, type ItemsType, Modal, ModalBackdrop, type ModalBackdropProps, ModalClose, type ModalCloseProps, type ModalComponentProps, type ModalConfirmConfig, ModalContent, type ModalContentProps, ModalContext, type ModalContextValue, ModalDescription, type ModalDescriptionProps, ModalFooter, type ModalFooterProps, ModalHeader, type ModalHeaderProps, ModalHost, type ModalHostProps, type ModalInstance, ModalPopup, type ModalPopupProps, ModalPortal, type ModalPortalProps, ModalRoot, type ModalRootProps, type ModalSystem, ModalTitle, type ModalTitleProps, ModalTrigger, type ModalTriggerProps, ModalViewport, type ModalViewportProps, Popover, PopoverArrow, type PopoverArrowAtomProps, PopoverArrowIcon, PopoverBackdrop, type PopoverBackdropProps, type PopoverContextValue, PopoverGroup, type PopoverGroupHandle, type PopoverGroupItem, type PopoverPlacement, PopoverPopup, type PopoverPopupAtomProps, type PopoverPopupProps, PopoverPortal, type PopoverPortalAtomProps, type PopoverPortalProps, PopoverPositioner, type PopoverPositionerAtomProps, type PopoverPositionerProps, type PopoverProps, PopoverProvider, PopoverRoot, type PopoverTrigger, type PopoverTriggerComponentProps, PopoverTriggerElement, type PopoverTriggerElementProps, PopoverViewport, type PopoverViewportAtomProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, ScrollArea, ScrollAreaContent, type ScrollAreaContentProps, ScrollAreaCorner, type ScrollAreaCornerProps, type ScrollAreaProps, ScrollAreaRoot, type ScrollAreaRootProps, ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb, type ScrollAreaThumbProps, ScrollAreaViewport, type ScrollAreaViewportProps, Segmented, type SegmentedClassNames, SegmentedIndicator, type SegmentedIndicatorProps, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, type SegmentedItemProps, type SegmentedOption, type SegmentedOptions, type SegmentedOrientation, type SegmentedProps, SegmentedRoot, type SegmentedRootProps, type SegmentedSize, type SegmentedStyles, type SegmentedVariant, Select, SelectArrow, type SelectArrowProps, SelectBackdrop, type SelectBehaviorVariant, type SelectClassNames, SelectGroup, SelectGroupLabel, type SelectGroupLabelProps, type SelectGroupProps, SelectIcon, type SelectIconProps, type SelectIndicatorVariant, SelectItem, SelectItemIndicator, type SelectItemIndicatorProps, type SelectItemProps, SelectItemText, type SelectItemTextProps, SelectList, type SelectListProps, type SelectOption, type SelectOptionGroup, type SelectOptions, SelectPopup, type SelectPopupProps, SelectPortal, type SelectPortalProps, SelectPositioner, type SelectPositionerProps, type SelectProps, SelectRoot, type SelectRootChangeEventDetails, SelectScrollDownArrow, type SelectScrollDownArrowProps, SelectScrollUpArrow, type SelectScrollUpArrowProps, SelectSeparator, type SelectSize, SelectTrigger, type SelectTriggerProps, SelectValue, type SelectValueProps, type SelectVariant, Slider, type SliderProps, SliderWithInput, type SliderWithInputProps, _default as SplitButton, type SplitButtonMenuProps, type SplitButtonProps, Switch, type SwitchChangeEventHandler, type SwitchClassNames, type SwitchClickEventHandler, type SwitchContextType, SwitchIcon, type SwitchIconPosition, type SwitchIconProps, type SwitchProps, SwitchRoot, type SwitchRootProps, type SwitchSize, type SwitchStyles, SwitchThumb, type SwitchThumbProps, Tabs, type TabsClassNames, TabsIndicator, type TabsIndicatorProps, type TabsItem, TabsList, type TabsListProps, type TabsOrientation, TabsPanel, type TabsPanelProps, type TabsProps, TabsRoot, type TabsRootProps, type TabsSize, type TabsStyles, TabsTab, type TabsTabProps, type TabsVariant, Tag, type TagClassNames, type TagProps, type TagShape, type TagSize, type TagStyles, type TagVariant, Text, TextArea, type TextAreaAutoSize, type TextAreaProps, type TextClassNames, type TextProps, type TextStyles, type ToastAPI, ToastHost, type ToastHostProps, type ToastInstance, type ToastOptions, type ToastPosition, type ToastPromiseOptions, type ToastProps, type ToastType, ToggleGroup, type ToggleGroupClassNames, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, type ToggleGroupItemProps, type ToggleGroupOption, type ToggleGroupProps, ToggleGroupRoot, type ToggleGroupRootProps, type ToggleGroupSize, type ToggleGroupStyles, type ToggleGroupVariant, Tooltip, TooltipGroup, type TooltipGroupProps, type TooltipPlacement, type TooltipPopupComponentProps, type TooltipPortalProps, type TooltipPositionerProps, type TooltipProps, type TooltipTriggerComponentProps, styles as accordionStyles, styles$1 as actionIconStyles, styles$2 as alertStyles, styles$3 as autoCompleteStyles, backdropTransition, styles$4 as buttonStyles, styles$5 as checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, confirmModal, controlHeight, createModal, createModalSystem, drawerBackdropTransition, getDrawerMotionConfig, styles$6 as inputStyles, rootVariants as inputVariants, modalMotionConfig, parseTrigger, presetColors, presetSystemColors, styles$7 as radioStyles, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, styles$8 as sliderStyles, styles$9 as switchStyles, styles$10 as tabsStyles, styles$11 as textStyles, variants as textVariants, toast, styles$12 as toggleGroupStyles, updateContextMenuItems, useAccordionContext, useDrawerActions, useDrawerOpen, useFormContext, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };
|
package/es/base-ui/index.mjs
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { Tooltip } from "./Tooltip/Tooltip.mjs";
|
|
2
2
|
import TooltipGroup from "./Tooltip/TooltipGroup.mjs";
|
|
3
|
-
import { styles as styles$
|
|
3
|
+
import { styles as styles$9 } from "./Switch/style.mjs";
|
|
4
4
|
import { SwitchIcon, SwitchRoot, SwitchThumb, useSwitchContext } from "./Switch/atoms.mjs";
|
|
5
5
|
import Switch from "./Switch/Switch.mjs";
|
|
6
6
|
import { DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger } from "./DropdownMenu/atoms.mjs";
|
|
@@ -20,25 +20,28 @@ import PopoverGroup from "./Popover/PopoverGroup.mjs";
|
|
|
20
20
|
import { ToastHost, toast, useToast } from "./Toast/imperative.mjs";
|
|
21
21
|
import { ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport } from "./ScrollArea/atoms.mjs";
|
|
22
22
|
import { ScrollArea } from "./ScrollArea/ScrollArea.mjs";
|
|
23
|
+
import { styles } from "./Accordion/style.mjs";
|
|
24
|
+
import { AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, useAccordionContext } from "./Accordion/atoms.mjs";
|
|
25
|
+
import Accordion from "./Accordion/Accordion.mjs";
|
|
23
26
|
import { controlHeight } from "./controlSize.mjs";
|
|
24
|
-
import { styles as styles$
|
|
27
|
+
import { styles as styles$4 } from "./Button/style.mjs";
|
|
25
28
|
import Button from "./Button/Button.mjs";
|
|
26
29
|
import SplitButton from "./Button/SplitButton.mjs";
|
|
27
|
-
import { styles } from "./ActionIcon/style.mjs";
|
|
30
|
+
import { styles as styles$1 } from "./ActionIcon/style.mjs";
|
|
28
31
|
import ActionIcon from "./ActionIcon/ActionIcon.mjs";
|
|
29
|
-
import { styles as styles$
|
|
32
|
+
import { styles as styles$2 } from "./Alert/style.mjs";
|
|
30
33
|
import Alert from "./Alert/Alert.mjs";
|
|
31
|
-
import { rootVariants, styles as styles$
|
|
34
|
+
import { rootVariants, styles as styles$6 } from "./Input/style.mjs";
|
|
32
35
|
import Input from "./Input/Input.mjs";
|
|
33
36
|
import InputNumber from "./Input/InputNumber.mjs";
|
|
34
37
|
import InputOTP from "./Input/InputOTP.mjs";
|
|
35
38
|
import InputPassword from "./Input/InputPassword.mjs";
|
|
36
39
|
import TextArea from "./Input/TextArea.mjs";
|
|
37
|
-
import { styles as styles$
|
|
40
|
+
import { styles as styles$3 } from "./AutoComplete/style.mjs";
|
|
38
41
|
import AutoComplete from "./AutoComplete/AutoComplete.mjs";
|
|
39
42
|
import AvatarGroup from "./Avatar/AvatarGroup/index.mjs";
|
|
40
43
|
import Avatar from "./Avatar/index.mjs";
|
|
41
|
-
import { styles as styles$
|
|
44
|
+
import { styles as styles$5 } from "./Checkbox/style.mjs";
|
|
42
45
|
import Checkbox from "./Checkbox/Checkbox.mjs";
|
|
43
46
|
import CheckboxGroup from "./Checkbox/CheckboxGroup.mjs";
|
|
44
47
|
import { drawerBackdropTransition, getDrawerMotionConfig } from "./Drawer/constants.mjs";
|
|
@@ -60,21 +63,24 @@ import FormFooter from "./Form/components/FormFooter.mjs";
|
|
|
60
63
|
import FormGroup from "./Form/components/FormGroup.mjs";
|
|
61
64
|
import FormSubmitFooter from "./Form/components/FormSubmitFooter.mjs";
|
|
62
65
|
import { Form } from "./Form/index.mjs";
|
|
63
|
-
import { styles as styles$
|
|
66
|
+
import { styles as styles$7 } from "./Radio/style.mjs";
|
|
64
67
|
import Radio from "./Radio/Radio.mjs";
|
|
65
68
|
import RadioGroup from "./Radio/RadioGroup.mjs";
|
|
66
69
|
import { SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot } from "./Segmented/atoms.mjs";
|
|
67
70
|
import Segmented from "./Segmented/Segmented.mjs";
|
|
68
71
|
import { SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue } from "./Select/atoms.mjs";
|
|
69
72
|
import Select from "./Select/Select.mjs";
|
|
70
|
-
import { styles as styles$
|
|
73
|
+
import { styles as styles$8 } from "./Slider/style.mjs";
|
|
71
74
|
import Slider from "./Slider/Slider.mjs";
|
|
72
75
|
import SliderWithInput from "./Slider/SliderWithInput.mjs";
|
|
73
|
-
import { styles as styles$
|
|
76
|
+
import { styles as styles$10 } from "./Tabs/style.mjs";
|
|
74
77
|
import { TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, useTabsContext } from "./Tabs/atoms.mjs";
|
|
75
78
|
import Tabs from "./Tabs/Tabs.mjs";
|
|
76
79
|
import { colorsPreset, colorsPresetSystem, presetColors, presetSystemColors } from "./Tag/utils.mjs";
|
|
77
80
|
import Tag from "./Tag/Tag.mjs";
|
|
78
|
-
import { styles as styles$
|
|
81
|
+
import { styles as styles$11, variants } from "./Text/style.mjs";
|
|
79
82
|
import Text from "./Text/Text.mjs";
|
|
80
|
-
|
|
83
|
+
import { styles as styles$12 } from "./ToggleGroup/style.mjs";
|
|
84
|
+
import { ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot } from "./ToggleGroup/atoms.mjs";
|
|
85
|
+
import ToggleGroup from "./ToggleGroup/ToggleGroup.mjs";
|
|
86
|
+
export { Accordion, AccordionHeader, AccordionItem, AccordionPanel, AccordionRoot, AccordionTrigger, ActionIcon, Alert, AutoComplete, Avatar, AvatarGroup, Button, Checkbox, CheckboxGroup, ContextMenuHost, ContextMenuTrigger, Drawer, DrawerBackdrop, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerPopup, DrawerPortal, DrawerRoot, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItemIndicator, DropdownMenuCheckboxItemPrimitive, DropdownMenuFooter, DropdownMenuGroup, DropdownMenuGroupLabel, DropdownMenuHeader, DropdownMenuItem, DropdownMenuItemContent, DropdownMenuItemDesc, DropdownMenuItemExtra, DropdownMenuItemIcon, DropdownMenuItemLabel, DropdownMenuItemLabelGroup, DropdownMenuPopup, DropdownMenuPortal, DropdownMenuPositioner, DropdownMenuRoot, DropdownMenuScrollViewport, DropdownMenuSeparator, DropdownMenuSubmenuArrow, DropdownMenuSubmenuRoot, DropdownMenuSubmenuTrigger, DropdownMenuSwitchItem, DropdownMenuTrigger, FloatingPanel, FloatingSheet, Form, FormDivider, FormField, FormFlatGroup, FormFooter, FormGroup, FormSubmitFooter, FormTitle, Input, InputNumber, InputOTP, InputPassword, Modal, ModalBackdrop, ModalClose, ModalContent, ModalContext, ModalDescription, ModalFooter, ModalHeader, ModalHost, ModalPopup, ModalPortal, ModalRoot, ModalTitle, ModalTrigger, ModalViewport, Popover, PopoverArrow, PopoverArrowIcon, PopoverBackdrop, PopoverGroup, PopoverPopup, PopoverPortal, PopoverPositioner, PopoverProvider, PopoverRoot, PopoverTriggerElement, PopoverViewport, Radio, RadioGroup, ScrollArea, ScrollAreaContent, ScrollAreaCorner, ScrollAreaRoot, ScrollAreaScrollbar, ScrollAreaThumb, ScrollAreaViewport, Segmented, SegmentedIndicator, SegmentedItem, SegmentedItemIcon, SegmentedItemLabel, SegmentedRoot, Select, SelectArrow, SelectBackdrop, SelectGroup, SelectGroupLabel, SelectIcon, SelectItem, SelectItemIndicator, SelectItemText, SelectList, SelectPopup, SelectPortal, SelectPositioner, SelectRoot, SelectScrollDownArrow, SelectScrollUpArrow, SelectSeparator, SelectTrigger, SelectValue, Slider, SliderWithInput, SplitButton, Switch, SwitchIcon, SwitchRoot, SwitchThumb, Tabs, TabsIndicator, TabsList, TabsPanel, TabsRoot, TabsTab, Tag, Text, TextArea, ToastHost, ToggleGroup, ToggleGroupItem, ToggleGroupItemIcon, ToggleGroupItemLabel, ToggleGroupRoot, Tooltip, TooltipGroup, styles as accordionStyles, styles$1 as actionIconStyles, styles$2 as alertStyles, styles$3 as autoCompleteStyles, backdropTransition, styles$4 as buttonStyles, styles$5 as checkboxStyles, closeContextMenu, colorsPreset, colorsPresetSystem, confirmModal, controlHeight, createModal, createModalSystem, drawerBackdropTransition, getDrawerMotionConfig, styles$6 as inputStyles, rootVariants as inputVariants, modalMotionConfig, parseTrigger, presetColors, presetSystemColors, styles$7 as radioStyles, renderDropdownMenuItems, setContextMenuInterceptor, showContextMenu, styles$8 as sliderStyles, styles$9 as switchStyles, styles$10 as tabsStyles, styles$11 as textStyles, variants as textVariants, toast, styles$12 as toggleGroupStyles, updateContextMenuItems, useAccordionContext, useDrawerActions, useDrawerOpen, useFormContext, useModalActions, useModalContext, useModalOpen, usePopoverContext, usePopoverGroupHandle, usePopoverPortalContainer, useSwitchContext, useTabsContext, useToast };
|