@lobehub/ui 5.45.0 → 5.45.2
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/atoms.mjs +16 -6
- package/es/base-ui/Accordion/atoms.mjs.map +1 -1
- package/es/base-ui/Accordion/style.d.mts +2 -0
- package/es/base-ui/Accordion/style.mjs +55 -17
- package/es/base-ui/Accordion/style.mjs.map +1 -1
- package/es/base-ui/Accordion/type.d.mts +1 -0
- package/es/base-ui/Input/style.d.mts +2 -2
- package/es/base-ui/Text/style.d.mts +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import { SubmenuArrowIcon } from "../SubmenuArrowIcon.mjs";
|
|
3
2
|
import { contentVariants, headerVariants, indicatorVariants, itemVariants, rootVariants, styles, triggerVariants } from "./style.mjs";
|
|
4
3
|
import { createContext, use, useMemo } from "react";
|
|
5
4
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
5
|
import { cx } from "antd-style";
|
|
7
|
-
import { ChevronDown, ChevronRight } from "lucide-react";
|
|
6
|
+
import { ChevronDown, ChevronRight, Play } from "lucide-react";
|
|
8
7
|
import { Accordion } from "@base-ui/react/accordion";
|
|
9
8
|
//#region src/base-ui/Accordion/atoms.tsx
|
|
10
9
|
const AccordionContext = createContext({
|
|
@@ -13,7 +12,7 @@ const AccordionContext = createContext({
|
|
|
13
12
|
variant: "borderless"
|
|
14
13
|
});
|
|
15
14
|
const useAccordionContext = () => use(AccordionContext);
|
|
16
|
-
const AccordionRoot = ({ children, className, hideIndicator = false, indicatorPlacement = "start", variant = "borderless", ...rest }) => {
|
|
15
|
+
const AccordionRoot = ({ children, className, hideIndicator = false, indicatorPlacement = "start", multiple = true, variant = "borderless", ...rest }) => {
|
|
17
16
|
const contextValue = useMemo(() => ({
|
|
18
17
|
hideIndicator,
|
|
19
18
|
indicatorPlacement,
|
|
@@ -27,6 +26,7 @@ const AccordionRoot = ({ children, className, hideIndicator = false, indicatorPl
|
|
|
27
26
|
value: contextValue,
|
|
28
27
|
children: /* @__PURE__ */ jsx(Accordion.Root, {
|
|
29
28
|
className: cx(rootVariants({ variant }), className),
|
|
29
|
+
multiple,
|
|
30
30
|
...rest,
|
|
31
31
|
children
|
|
32
32
|
})
|
|
@@ -42,11 +42,15 @@ const AccordionItem = ({ className, variant: variantProp, ...rest }) => {
|
|
|
42
42
|
});
|
|
43
43
|
};
|
|
44
44
|
AccordionItem.displayName = "AccordionItem";
|
|
45
|
-
const AccordionHeader = ({ className, variant: variantProp, ...rest }) => {
|
|
45
|
+
const AccordionHeader = ({ className, indicatorPlacement: placementProp, variant: variantProp, ...rest }) => {
|
|
46
46
|
const ctx = useAccordionContext();
|
|
47
47
|
const variant = variantProp ?? ctx.variant;
|
|
48
|
+
const inline = (placementProp ?? ctx.indicatorPlacement) === "inline";
|
|
48
49
|
return /* @__PURE__ */ jsx(Accordion.Header, {
|
|
49
|
-
className: cx(headerVariants({
|
|
50
|
+
className: cx(headerVariants({
|
|
51
|
+
inline,
|
|
52
|
+
variant
|
|
53
|
+
}), className),
|
|
50
54
|
...rest
|
|
51
55
|
});
|
|
52
56
|
};
|
|
@@ -60,7 +64,11 @@ const AccordionTrigger = ({ children, className, hideIndicator: hideIndicatorPro
|
|
|
60
64
|
className: indicatorVariants({ placement }),
|
|
61
65
|
children: [
|
|
62
66
|
placement === "start" && /* @__PURE__ */ jsx(ChevronRight, { size: 16 }),
|
|
63
|
-
placement === "inline" && /* @__PURE__ */ jsx(
|
|
67
|
+
placement === "inline" && /* @__PURE__ */ jsx(Play, {
|
|
68
|
+
fill: "currentColor",
|
|
69
|
+
size: 9,
|
|
70
|
+
strokeWidth: 1
|
|
71
|
+
}),
|
|
64
72
|
placement === "end" && /* @__PURE__ */ jsx(ChevronDown, { size: 16 })
|
|
65
73
|
]
|
|
66
74
|
});
|
|
@@ -81,12 +89,14 @@ const AccordionPanel = ({ children, className, contentClassName, contentStyle, h
|
|
|
81
89
|
const hideIndicator = hideIndicatorProp ?? ctx.hideIndicator;
|
|
82
90
|
const placement = placementProp ?? ctx.indicatorPlacement;
|
|
83
91
|
const indent = !hideIndicator && placement === "start";
|
|
92
|
+
const inline = placement === "inline";
|
|
84
93
|
return /* @__PURE__ */ jsx(Accordion.Panel, {
|
|
85
94
|
className: cx(styles.panel, className),
|
|
86
95
|
...rest,
|
|
87
96
|
children: /* @__PURE__ */ jsx("div", {
|
|
88
97
|
className: cx(contentVariants({
|
|
89
98
|
indent,
|
|
99
|
+
inline,
|
|
90
100
|
variant
|
|
91
101
|
}), contentClassName),
|
|
92
102
|
style: contentStyle,
|
|
@@ -1 +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 {
|
|
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, Play } 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 multiple = true,\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\n className={cx(rootVariants({ variant }), className)}\n multiple={multiple}\n {...rest}\n >\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 indicatorPlacement: placementProp,\n variant: variantProp,\n ...rest\n}) => {\n const ctx = useAccordionContext();\n const variant = variantProp ?? ctx.variant;\n const inline = (placementProp ?? ctx.indicatorPlacement) === 'inline';\n\n return (\n <BaseUIAccordion.Header\n className={cx(headerVariants({ inline, variant }), className)}\n {...rest}\n />\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} />}\n {placement === 'inline' && <Play fill=\"currentColor\" size={9} strokeWidth={1} />}\n {placement === 'end' && <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 !== 'start' && 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 const inline = placement === 'inline';\n\n return (\n <BaseUIAccordion.Panel className={cx(styles.panel, className)} {...rest}>\n <div\n className={cx(contentVariants({ indent, inline, 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,WAAW,MACX,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;GACE,WAAW,GAAG,aAAa,EAAE,QAAQ,CAAC,GAAG,SAAS;GACxC;GACV,GAAI;GAEH;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,oBAAoB,eACpB,SAAS,aACT,GAAG,WACC;CACJ,MAAM,MAAM,oBAAoB;CAChC,MAAM,UAAU,eAAe,IAAI;CACnC,MAAM,UAAU,iBAAiB,IAAI,wBAAwB;CAE7D,OACE,oBAACA,UAAgB,QAAjB;EACE,WAAW,GAAG,eAAe;GAAE;GAAQ;EAAQ,CAAC,GAAG,SAAS;EAC5D,GAAI;CACL,CAAA;AAEL;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,qBAAC,QAAD;EAAM,WAAW,kBAAkB,EAAE,UAAU,CAAC;EAAhD,UAAA;GACG,cAAc,WAAW,oBAAC,cAAD,EAAc,MAAM,GAAK,CAAA;GAClD,cAAc,YAAY,oBAAC,MAAD;IAAM,MAAK;IAAe,MAAM;IAAG,aAAa;GAAI,CAAA;GAC9E,cAAc,SAAS,oBAAC,aAAD,EAAa,MAAM,GAAK,CAAA;EAC5C;;CAGR,OACE,qBAACA,UAAgB,SAAjB;EAAyB,WAAW,GAAG,gBAAgB,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;EAArF,UAAA;GACG,cAAc,WAAW;GACzB;GACA,cAAc,WAAW;EACH;;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;CAC/C,MAAM,SAAS,cAAc;CAE7B,OACE,oBAACA,UAAgB,OAAjB;EAAuB,WAAW,GAAG,OAAO,OAAO,SAAS;EAAG,GAAI;EACjE,UAAA,oBAAC,OAAD;GACE,WAAW,GAAG,gBAAgB;IAAE;IAAQ;IAAQ;GAAQ,CAAC,GAAG,gBAAgB;GAC5E,OAAO;GAEN;EACE,CAAA;CACgB,CAAA;AAE3B;AAEA,eAAe,cAAc"}
|
|
@@ -64,6 +64,16 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
64
64
|
headerBorderless: css`
|
|
65
65
|
margin-inline: calc(var(--accordion-hover-inset, 8px) * -1);
|
|
66
66
|
border-radius: ${cssVar.borderRadius};
|
|
67
|
+
`,
|
|
68
|
+
headerInline: css`
|
|
69
|
+
margin-inline: 0;
|
|
70
|
+
|
|
71
|
+
> .accordion-action {
|
|
72
|
+
padding-block: 4px;
|
|
73
|
+
}
|
|
74
|
+
`,
|
|
75
|
+
contentInline: css`
|
|
76
|
+
padding-block: 0;
|
|
67
77
|
`,
|
|
68
78
|
indicator: css`
|
|
69
79
|
display: flex;
|
|
@@ -79,9 +89,10 @@ const styles = createStaticStyles(({ css, cssVar }) => ({
|
|
|
79
89
|
}
|
|
80
90
|
`,
|
|
81
91
|
indicatorInline: css`
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
92
|
+
justify-content: center;
|
|
93
|
+
width: 18px;
|
|
94
|
+
height: 18px;
|
|
95
|
+
margin-inline-start: -6px;
|
|
85
96
|
|
|
86
97
|
[data-panel-open] & {
|
|
87
98
|
transform: rotate(90deg);
|
|
@@ -185,11 +196,25 @@ const itemVariants = cva(styles.item, {
|
|
|
185
196
|
} }
|
|
186
197
|
});
|
|
187
198
|
const headerVariants = cva(styles.header, {
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
}
|
|
199
|
+
compoundVariants: [{
|
|
200
|
+
class: styles.headerInline,
|
|
201
|
+
inline: true,
|
|
202
|
+
variant: "borderless"
|
|
203
|
+
}],
|
|
204
|
+
defaultVariants: {
|
|
205
|
+
inline: false,
|
|
206
|
+
variant: "borderless"
|
|
207
|
+
},
|
|
208
|
+
variants: {
|
|
209
|
+
inline: {
|
|
210
|
+
false: null,
|
|
211
|
+
true: null
|
|
212
|
+
},
|
|
213
|
+
variant: {
|
|
214
|
+
borderless: styles.headerBorderless,
|
|
215
|
+
outlined: null
|
|
216
|
+
}
|
|
217
|
+
}
|
|
193
218
|
});
|
|
194
219
|
const triggerVariants = cva(styles.trigger, {
|
|
195
220
|
defaultVariants: { variant: "borderless" },
|
|
@@ -207,17 +232,26 @@ const indicatorVariants = cva(styles.indicator, {
|
|
|
207
232
|
} }
|
|
208
233
|
});
|
|
209
234
|
const contentVariants = cva(styles.content, {
|
|
210
|
-
compoundVariants: [
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
|
|
215
|
-
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
235
|
+
compoundVariants: [
|
|
236
|
+
{
|
|
237
|
+
class: styles.contentInline,
|
|
238
|
+
inline: true,
|
|
239
|
+
variant: "borderless"
|
|
240
|
+
},
|
|
241
|
+
{
|
|
242
|
+
class: styles.contentIndent,
|
|
243
|
+
indent: true,
|
|
244
|
+
variant: "borderless"
|
|
245
|
+
},
|
|
246
|
+
{
|
|
247
|
+
class: styles.contentIndentOutlined,
|
|
248
|
+
indent: true,
|
|
249
|
+
variant: "outlined"
|
|
250
|
+
}
|
|
251
|
+
],
|
|
219
252
|
defaultVariants: {
|
|
220
253
|
indent: true,
|
|
254
|
+
inline: false,
|
|
221
255
|
variant: "borderless"
|
|
222
256
|
},
|
|
223
257
|
variants: {
|
|
@@ -225,6 +259,10 @@ const contentVariants = cva(styles.content, {
|
|
|
225
259
|
false: null,
|
|
226
260
|
true: null
|
|
227
261
|
},
|
|
262
|
+
inline: {
|
|
263
|
+
false: null,
|
|
264
|
+
true: null
|
|
265
|
+
},
|
|
228
266
|
variant: {
|
|
229
267
|
borderless: styles.contentBorderless,
|
|
230
268
|
outlined: styles.contentOutlined
|
|
@@ -1 +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\nimport { focusRing } from '@/base-ui/focusRing';\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 indicatorInline: css`\n width:
|
|
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\nimport { focusRing } from '@/base-ui/focusRing';\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 headerInline: css`\n margin-inline: 0;\n\n > .accordion-action {\n padding-block: 4px;\n }\n `,\n contentInline: css`\n padding-block: 0;\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 indicatorInline: css`\n justify-content: center;\n width: 18px;\n height: 18px;\n margin-inline-start: -6px;\n\n [data-panel-open] & {\n transform: rotate(90deg);\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 ${focusRing};\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 compoundVariants: [{ class: styles.headerInline, inline: true, variant: 'borderless' }],\n defaultVariants: { inline: false, variant: 'borderless' },\n variants: {\n inline: {\n false: null,\n true: null,\n },\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 inline: styles.indicatorInline,\n start: styles.indicatorStart,\n },\n },\n});\n\nexport const contentVariants = cva(styles.content, {\n compoundVariants: [\n {\n class: styles.contentInline,\n inline: true,\n variant: 'borderless',\n },\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, inline: false, variant: 'borderless' },\n variants: {\n indent: {\n false: null,\n true: null,\n },\n inline: {\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":"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"}
|
|
@@ -41,6 +41,7 @@ type AccordionItemProps = Omit<ComponentProps<typeof Accordion.Item>, 'className
|
|
|
41
41
|
};
|
|
42
42
|
type AccordionHeaderProps = Omit<ComponentProps<typeof Accordion.Header>, 'className' | 'render'> & {
|
|
43
43
|
className?: string;
|
|
44
|
+
indicatorPlacement?: AccordionIndicatorPlacement;
|
|
44
45
|
variant?: AccordionVariant;
|
|
45
46
|
};
|
|
46
47
|
type AccordionTriggerProps = Omit<ComponentProps<typeof Accordion.Trigger>, 'className' | 'render'> & {
|
|
@@ -23,8 +23,8 @@ declare const styles: {
|
|
|
23
23
|
};
|
|
24
24
|
declare const rootVariants: (props?: ({
|
|
25
25
|
shadow?: boolean | null | undefined;
|
|
26
|
-
size?: "
|
|
27
|
-
variant?: "
|
|
26
|
+
size?: "large" | "middle" | "small" | null | undefined;
|
|
27
|
+
variant?: "borderless" | "filled" | "outlined" | null | undefined;
|
|
28
28
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
29
29
|
//#endregion
|
|
30
30
|
export { rootVariants, styles };
|
|
@@ -42,7 +42,7 @@ declare const variants: (props?: ({
|
|
|
42
42
|
mark?: boolean | null | undefined;
|
|
43
43
|
shiny?: boolean | null | undefined;
|
|
44
44
|
strong?: boolean | null | undefined;
|
|
45
|
-
type?: "danger" | "
|
|
45
|
+
type?: "danger" | "warning" | "success" | "info" | "secondary" | null | undefined;
|
|
46
46
|
underline?: boolean | null | undefined;
|
|
47
47
|
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
48
48
|
//#endregion
|