@spark-ui/components 10.9.0 → 10.10.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/CHANGELOG.md +6 -0
- package/dist/accordion/index.d.mts +13 -25
- package/dist/accordion/index.d.ts +13 -25
- package/dist/accordion/index.js +114 -250
- package/dist/accordion/index.js.map +1 -1
- package/dist/accordion/index.mjs +92 -134
- package/dist/accordion/index.mjs.map +1 -1
- package/dist/collapsible/index.d.mts +18 -35
- package/dist/collapsible/index.d.ts +18 -35
- package/dist/collapsible/index.js +47 -78
- package/dist/collapsible/index.js.map +1 -1
- package/dist/collapsible/index.mjs +73 -4
- package/dist/collapsible/index.mjs.map +1 -1
- package/package.json +6 -7
- package/dist/chunk-3LEFXZNI.mjs +0 -97
- package/dist/chunk-3LEFXZNI.mjs.map +0 -1
package/dist/accordion/index.js
CHANGED
|
@@ -1,9 +1,7 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __create = Object.create;
|
|
3
2
|
var __defProp = Object.defineProperty;
|
|
4
3
|
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
4
|
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
-
var __getProtoOf = Object.getPrototypeOf;
|
|
7
5
|
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
6
|
var __export = (target, all) => {
|
|
9
7
|
for (var name in all)
|
|
@@ -17,14 +15,6 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
17
15
|
}
|
|
18
16
|
return to;
|
|
19
17
|
};
|
|
20
|
-
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
-
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
-
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
-
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
-
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
-
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
-
mod
|
|
27
|
-
));
|
|
28
18
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
19
|
|
|
30
20
|
// src/accordion/index.ts
|
|
@@ -35,10 +25,9 @@ __export(accordion_exports, {
|
|
|
35
25
|
module.exports = __toCommonJS(accordion_exports);
|
|
36
26
|
|
|
37
27
|
// src/accordion/Accordion.tsx
|
|
38
|
-
var
|
|
39
|
-
var import_react2 = require("@zag-js/react");
|
|
28
|
+
var import_accordion = require("@base-ui-components/react/accordion");
|
|
40
29
|
var import_class_variance_authority = require("class-variance-authority");
|
|
41
|
-
var
|
|
30
|
+
var import_react2 = require("react");
|
|
42
31
|
|
|
43
32
|
// src/slot/Slot.tsx
|
|
44
33
|
var import_radix_ui = require("radix-ui");
|
|
@@ -49,49 +38,44 @@ var Slot = ({ ref, ...props }) => {
|
|
|
49
38
|
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_radix_ui.Slot.Root, { ref, ...props });
|
|
50
39
|
};
|
|
51
40
|
|
|
52
|
-
// src/accordion/
|
|
41
|
+
// src/accordion/useRenderSlot.tsx
|
|
53
42
|
var import_jsx_runtime2 = require("react/jsx-runtime");
|
|
54
|
-
|
|
43
|
+
function useRenderSlot(asChild, defaultTag) {
|
|
44
|
+
const Component = asChild ? Slot : defaultTag;
|
|
45
|
+
return asChild ? ({ ...props }) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { ...props }) : void 0;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// src/accordion/Accordion.tsx
|
|
49
|
+
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
50
|
+
var AccordionContext = (0, import_react2.createContext)(null);
|
|
55
51
|
var Accordion = ({
|
|
56
52
|
asChild = false,
|
|
57
53
|
children,
|
|
58
|
-
collapsible: collapsible2 = true,
|
|
59
|
-
className,
|
|
60
|
-
defaultValue,
|
|
61
54
|
design = "outlined",
|
|
62
|
-
|
|
55
|
+
hiddenUntilFound = true,
|
|
63
56
|
multiple = false,
|
|
64
|
-
|
|
65
|
-
onValueChange,
|
|
57
|
+
className,
|
|
66
58
|
ref,
|
|
67
59
|
...props
|
|
68
60
|
}) => {
|
|
69
|
-
const
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
value,
|
|
82
|
-
id: (0, import_react3.useId)(),
|
|
83
|
-
onValueChange(details) {
|
|
84
|
-
onValueChange?.(details.value);
|
|
61
|
+
const renderSlot = useRenderSlot(asChild, "div");
|
|
62
|
+
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AccordionContext.Provider, { value: { design }, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
|
|
63
|
+
import_accordion.Accordion.Root,
|
|
64
|
+
{
|
|
65
|
+
"data-spark-component": "accordion",
|
|
66
|
+
ref,
|
|
67
|
+
openMultiple: multiple,
|
|
68
|
+
hiddenUntilFound,
|
|
69
|
+
className: (0, import_class_variance_authority.cx)("bg-surface h-fit rounded-lg", className),
|
|
70
|
+
render: renderSlot,
|
|
71
|
+
...props,
|
|
72
|
+
children
|
|
85
73
|
}
|
|
86
|
-
});
|
|
87
|
-
const Component = asChild ? Slot : "div";
|
|
88
|
-
const api = accordion.connect(service, import_react2.normalizeProps);
|
|
89
|
-
const mergedProps = (0, import_react2.mergeProps)(api.getRootProps(), localProps);
|
|
90
|
-
return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(AccordionContext.Provider, { value: { ...api, design }, children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(Component, { "data-spark-component": "accordion", ref, ...mergedProps, children }) });
|
|
74
|
+
) });
|
|
91
75
|
};
|
|
92
76
|
Accordion.displayName = "Accordion";
|
|
93
77
|
var useAccordionContext = () => {
|
|
94
|
-
const context = (0,
|
|
78
|
+
const context = (0, import_react2.useContext)(AccordionContext);
|
|
95
79
|
if (!context) {
|
|
96
80
|
throw Error("useAccordionContext must be used within a Accordion provider");
|
|
97
81
|
}
|
|
@@ -99,165 +83,41 @@ var useAccordionContext = () => {
|
|
|
99
83
|
};
|
|
100
84
|
|
|
101
85
|
// src/accordion/AccordionItem.tsx
|
|
102
|
-
var
|
|
103
|
-
var import_class_variance_authority3 = require("class-variance-authority");
|
|
104
|
-
|
|
105
|
-
// src/collapsible/Collapsible.tsx
|
|
106
|
-
var collapsible = __toESM(require("@zag-js/collapsible"));
|
|
107
|
-
var import_react4 = require("@zag-js/react");
|
|
108
|
-
var import_react5 = require("react");
|
|
109
|
-
var import_jsx_runtime3 = require("react/jsx-runtime");
|
|
110
|
-
var CollapsibleContext = (0, import_react5.createContext)(null);
|
|
111
|
-
var Collapsible = ({
|
|
112
|
-
asChild = false,
|
|
113
|
-
children,
|
|
114
|
-
defaultOpen = false,
|
|
115
|
-
disabled = false,
|
|
116
|
-
onOpenChange,
|
|
117
|
-
open,
|
|
118
|
-
ids,
|
|
119
|
-
ref,
|
|
120
|
-
...props
|
|
121
|
-
}) => {
|
|
122
|
-
const service = (0, import_react4.useMachine)(collapsible.machine, {
|
|
123
|
-
open,
|
|
124
|
-
defaultOpen,
|
|
125
|
-
disabled,
|
|
126
|
-
id: (0, import_react5.useId)(),
|
|
127
|
-
ids,
|
|
128
|
-
onOpenChange(details) {
|
|
129
|
-
onOpenChange?.(details.open);
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
const api = collapsible.connect(service, import_react4.normalizeProps);
|
|
133
|
-
const Component = asChild ? Slot : "div";
|
|
134
|
-
const mergedProps = (0, import_react4.mergeProps)(api.getRootProps(), props);
|
|
135
|
-
return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(CollapsibleContext.Provider, { value: api, children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Component, { "data-spark-component": "collapsible", ref, ...mergedProps, children }) });
|
|
136
|
-
};
|
|
137
|
-
Collapsible.displayName = "Collapsible";
|
|
138
|
-
var useCollapsibleContext = () => {
|
|
139
|
-
const context = (0, import_react5.useContext)(CollapsibleContext);
|
|
140
|
-
if (!context) {
|
|
141
|
-
throw Error("useCollapsibleContext must be used within a Collapsible provider");
|
|
142
|
-
}
|
|
143
|
-
return context;
|
|
144
|
-
};
|
|
145
|
-
|
|
146
|
-
// src/collapsible/CollapsibleContent.tsx
|
|
147
|
-
var import_react6 = require("@zag-js/react");
|
|
86
|
+
var import_accordion2 = require("@base-ui-components/react/accordion");
|
|
148
87
|
var import_class_variance_authority2 = require("class-variance-authority");
|
|
149
88
|
var import_jsx_runtime4 = require("react/jsx-runtime");
|
|
150
|
-
var Content = ({
|
|
151
|
-
asChild = false,
|
|
152
|
-
className,
|
|
153
|
-
children,
|
|
154
|
-
ref,
|
|
155
|
-
...props
|
|
156
|
-
}) => {
|
|
157
|
-
const { getContentProps } = useCollapsibleContext();
|
|
158
|
-
const Component = asChild ? Slot : "div";
|
|
159
|
-
const contentProps = getContentProps();
|
|
160
|
-
const mergedProps = (0, import_react6.mergeProps)(contentProps, {
|
|
161
|
-
className: (0, import_class_variance_authority2.cx)(
|
|
162
|
-
"overflow-hidden",
|
|
163
|
-
"motion-reduce:animate-none!",
|
|
164
|
-
"[&[hidden]]:hidden",
|
|
165
|
-
"data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out",
|
|
166
|
-
className
|
|
167
|
-
),
|
|
168
|
-
...props
|
|
169
|
-
});
|
|
170
|
-
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(Component, { ref, "data-spark-component": "collapsible-content", ...mergedProps, children });
|
|
171
|
-
};
|
|
172
|
-
Content.displayName = "Collapsible.Content";
|
|
173
|
-
|
|
174
|
-
// src/collapsible/CollapsibleTrigger.tsx
|
|
175
|
-
var import_react7 = require("@zag-js/react");
|
|
176
|
-
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
177
|
-
var Trigger = ({ asChild = false, children, ref, ...props }) => {
|
|
178
|
-
const collapsibleContext = useCollapsibleContext();
|
|
179
|
-
const Component = asChild ? Slot : "button";
|
|
180
|
-
const mergedProps = (0, import_react7.mergeProps)(collapsibleContext.getTriggerProps(), props);
|
|
181
|
-
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Component, { ref, "data-spark-component": "collapsible-trigger", ...mergedProps, children });
|
|
182
|
-
};
|
|
183
|
-
Trigger.displayName = "Collapsible.Trigger";
|
|
184
|
-
|
|
185
|
-
// src/collapsible/index.ts
|
|
186
|
-
var Collapsible2 = Object.assign(Collapsible, {
|
|
187
|
-
Trigger,
|
|
188
|
-
Content
|
|
189
|
-
});
|
|
190
|
-
Collapsible2.displayName = "Collapsible";
|
|
191
|
-
Trigger.displayName = "Collapsible.Trigger";
|
|
192
|
-
Content.displayName = "Collapsible.Content";
|
|
193
|
-
|
|
194
|
-
// src/accordion/AccordionItemContext.tsx
|
|
195
|
-
var import_react8 = require("react");
|
|
196
|
-
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
197
|
-
var AccordionItemContext = (0, import_react8.createContext)(null);
|
|
198
|
-
var AccordionItemProvider = ({
|
|
199
|
-
value: valueProp,
|
|
200
|
-
disabled: disabledProp = false,
|
|
201
|
-
children
|
|
202
|
-
}) => {
|
|
203
|
-
const [value, setValue] = (0, import_react8.useState)(valueProp);
|
|
204
|
-
const [disabled, setDisabled] = (0, import_react8.useState)(disabledProp);
|
|
205
|
-
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(AccordionItemContext.Provider, { value: { value, setValue, disabled, setDisabled }, children });
|
|
206
|
-
};
|
|
207
|
-
var useAccordionItemContext = () => {
|
|
208
|
-
const context = (0, import_react8.useContext)(AccordionItemContext);
|
|
209
|
-
if (!context) {
|
|
210
|
-
throw Error("useAccordionItemContext must be used within a AccordionItem provider");
|
|
211
|
-
}
|
|
212
|
-
return context;
|
|
213
|
-
};
|
|
214
|
-
|
|
215
|
-
// src/accordion/AccordionItem.tsx
|
|
216
|
-
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
217
89
|
var Item = ({
|
|
218
90
|
asChild = false,
|
|
219
91
|
className,
|
|
220
92
|
children,
|
|
221
|
-
disabled = false,
|
|
222
|
-
value,
|
|
223
93
|
ref,
|
|
224
94
|
...props
|
|
225
95
|
}) => {
|
|
226
|
-
const
|
|
227
|
-
const
|
|
228
|
-
|
|
229
|
-
|
|
230
|
-
"not-last:border-b-0",
|
|
231
|
-
{ "border-sm border-outline": accordion2.design === "outlined" },
|
|
232
|
-
className
|
|
233
|
-
),
|
|
234
|
-
asChild,
|
|
235
|
-
...props
|
|
236
|
-
};
|
|
237
|
-
const itemProps = accordion2.getItemProps({ value, ...disabled && { disabled } });
|
|
238
|
-
const mergedProps = (0, import_react9.mergeProps)(itemProps, localProps);
|
|
239
|
-
const item = accordion2.getItemState({ value });
|
|
240
|
-
const itemContentProps = accordion2.getItemContentProps({ value });
|
|
241
|
-
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(AccordionItemProvider, { value, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
242
|
-
Collapsible2,
|
|
96
|
+
const accordion = useAccordionContext();
|
|
97
|
+
const renderSlot = useRenderSlot(asChild, "div");
|
|
98
|
+
return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
|
|
99
|
+
import_accordion2.Accordion.Item,
|
|
243
100
|
{
|
|
244
101
|
ref,
|
|
245
|
-
open: item.expanded,
|
|
246
102
|
"data-spark-component": "accordion-item",
|
|
247
|
-
|
|
248
|
-
|
|
103
|
+
render: renderSlot,
|
|
104
|
+
className: (0, import_class_variance_authority2.cx)(
|
|
105
|
+
"relative first:rounded-t-lg last:rounded-b-lg",
|
|
106
|
+
"not-last:border-b-0",
|
|
107
|
+
{ "border-sm border-outline": accordion.design === "outlined" },
|
|
108
|
+
className
|
|
109
|
+
),
|
|
110
|
+
...props,
|
|
249
111
|
children
|
|
250
112
|
}
|
|
251
|
-
)
|
|
113
|
+
);
|
|
252
114
|
};
|
|
253
115
|
Item.displayName = "Accordion.Item";
|
|
254
116
|
|
|
255
117
|
// src/accordion/AccordionItemContent.tsx
|
|
256
|
-
var
|
|
257
|
-
var
|
|
258
|
-
var
|
|
259
|
-
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
260
|
-
var splitVisibilityProps = (0, import_internal_utils.createSplitProps)();
|
|
118
|
+
var import_accordion3 = require("@base-ui-components/react/accordion");
|
|
119
|
+
var import_class_variance_authority3 = require("class-variance-authority");
|
|
120
|
+
var import_jsx_runtime5 = require("react/jsx-runtime");
|
|
261
121
|
var ItemContent = ({
|
|
262
122
|
asChild = false,
|
|
263
123
|
className,
|
|
@@ -265,26 +125,29 @@ var ItemContent = ({
|
|
|
265
125
|
ref,
|
|
266
126
|
...props
|
|
267
127
|
}) => {
|
|
268
|
-
const
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
|
|
272
|
-
|
|
273
|
-
|
|
274
|
-
|
|
275
|
-
|
|
276
|
-
|
|
277
|
-
|
|
278
|
-
|
|
279
|
-
|
|
280
|
-
|
|
281
|
-
|
|
128
|
+
const renderSlot = useRenderSlot(asChild, "div");
|
|
129
|
+
return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
|
|
130
|
+
import_accordion3.Accordion.Panel,
|
|
131
|
+
{
|
|
132
|
+
ref,
|
|
133
|
+
"data-spark-component": "accordion-item-content",
|
|
134
|
+
className: (0, import_class_variance_authority3.cx)(
|
|
135
|
+
"[&>:first-child]:p-lg overflow-hidden",
|
|
136
|
+
"h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0",
|
|
137
|
+
"text-body-1 text-on-surface",
|
|
138
|
+
className
|
|
139
|
+
),
|
|
140
|
+
render: renderSlot,
|
|
141
|
+
...props,
|
|
142
|
+
children
|
|
143
|
+
}
|
|
144
|
+
);
|
|
282
145
|
};
|
|
283
146
|
ItemContent.displayName = "Accordion.ItemContent";
|
|
284
147
|
|
|
285
148
|
// src/accordion/AccordionItemHeader.tsx
|
|
286
|
-
var
|
|
287
|
-
var
|
|
149
|
+
var import_class_variance_authority4 = require("class-variance-authority");
|
|
150
|
+
var import_jsx_runtime6 = require("react/jsx-runtime");
|
|
288
151
|
var ItemHeader = ({
|
|
289
152
|
asChild = false,
|
|
290
153
|
children,
|
|
@@ -292,12 +155,12 @@ var ItemHeader = ({
|
|
|
292
155
|
ref
|
|
293
156
|
}) => {
|
|
294
157
|
const Component = asChild ? Slot : "h3";
|
|
295
|
-
return /* @__PURE__ */ (0,
|
|
158
|
+
return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
|
|
296
159
|
Component,
|
|
297
160
|
{
|
|
298
161
|
ref,
|
|
299
162
|
"data-spark-component": "accordion-item-header",
|
|
300
|
-
className: (0,
|
|
163
|
+
className: (0, import_class_variance_authority4.cx)("rounded-[inherit]", className),
|
|
301
164
|
children
|
|
302
165
|
}
|
|
303
166
|
);
|
|
@@ -305,18 +168,18 @@ var ItemHeader = ({
|
|
|
305
168
|
ItemHeader.displayName = "Accordion.ItemHeader";
|
|
306
169
|
|
|
307
170
|
// src/accordion/AccordionItemTrigger.tsx
|
|
171
|
+
var import_accordion4 = require("@base-ui-components/react/accordion");
|
|
308
172
|
var import_ArrowHorizontalDown = require("@spark-ui/icons/ArrowHorizontalDown");
|
|
309
|
-
var
|
|
310
|
-
var import_class_variance_authority7 = require("class-variance-authority");
|
|
173
|
+
var import_class_variance_authority6 = require("class-variance-authority");
|
|
311
174
|
|
|
312
175
|
// src/icon/Icon.tsx
|
|
313
|
-
var
|
|
176
|
+
var import_react3 = require("react");
|
|
314
177
|
|
|
315
178
|
// src/visually-hidden/VisuallyHidden.tsx
|
|
316
|
-
var
|
|
179
|
+
var import_jsx_runtime7 = require("react/jsx-runtime");
|
|
317
180
|
var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
|
|
318
181
|
const Component = asChild ? Slot : "span";
|
|
319
|
-
return /* @__PURE__ */ (0,
|
|
182
|
+
return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
|
|
320
183
|
Component,
|
|
321
184
|
{
|
|
322
185
|
...props,
|
|
@@ -341,14 +204,14 @@ var VisuallyHidden = ({ asChild = false, ref, ...props }) => {
|
|
|
341
204
|
VisuallyHidden.displayName = "VisuallyHidden";
|
|
342
205
|
|
|
343
206
|
// src/icon/Icon.styles.tsx
|
|
344
|
-
var
|
|
345
|
-
var
|
|
346
|
-
var iconStyles = (0,
|
|
207
|
+
var import_internal_utils = require("@spark-ui/internal-utils");
|
|
208
|
+
var import_class_variance_authority5 = require("class-variance-authority");
|
|
209
|
+
var iconStyles = (0, import_class_variance_authority5.cva)(["fill-current shrink-0"], {
|
|
347
210
|
variants: {
|
|
348
211
|
/**
|
|
349
212
|
* Color scheme of the icon.
|
|
350
213
|
*/
|
|
351
|
-
intent: (0,
|
|
214
|
+
intent: (0, import_internal_utils.makeVariants)({
|
|
352
215
|
current: ["text-current"],
|
|
353
216
|
main: ["text-main"],
|
|
354
217
|
support: ["text-support"],
|
|
@@ -363,7 +226,7 @@ var iconStyles = (0, import_class_variance_authority6.cva)(["fill-current shrink
|
|
|
363
226
|
/**
|
|
364
227
|
* Sets the size of the icon.
|
|
365
228
|
*/
|
|
366
|
-
size: (0,
|
|
229
|
+
size: (0, import_internal_utils.makeVariants)({
|
|
367
230
|
current: ["u-current-font-size"],
|
|
368
231
|
sm: ["w-sz-16", "h-sz-16"],
|
|
369
232
|
md: ["w-sz-24", "h-sz-24"],
|
|
@@ -374,7 +237,7 @@ var iconStyles = (0, import_class_variance_authority6.cva)(["fill-current shrink
|
|
|
374
237
|
});
|
|
375
238
|
|
|
376
239
|
// src/icon/Icon.tsx
|
|
377
|
-
var
|
|
240
|
+
var import_jsx_runtime8 = require("react/jsx-runtime");
|
|
378
241
|
var Icon = ({
|
|
379
242
|
label,
|
|
380
243
|
className,
|
|
@@ -383,22 +246,22 @@ var Icon = ({
|
|
|
383
246
|
children,
|
|
384
247
|
...others
|
|
385
248
|
}) => {
|
|
386
|
-
const child =
|
|
387
|
-
return /* @__PURE__ */ (0,
|
|
388
|
-
(0,
|
|
249
|
+
const child = import_react3.Children.only(children);
|
|
250
|
+
return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
|
|
251
|
+
(0, import_react3.cloneElement)(child, {
|
|
389
252
|
className: iconStyles({ className, size, intent }),
|
|
390
253
|
"data-spark-component": "icon",
|
|
391
254
|
"aria-hidden": "true",
|
|
392
255
|
focusable: "false",
|
|
393
256
|
...others
|
|
394
257
|
}),
|
|
395
|
-
label && /* @__PURE__ */ (0,
|
|
258
|
+
label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VisuallyHidden, { children: label })
|
|
396
259
|
] });
|
|
397
260
|
};
|
|
398
261
|
Icon.displayName = "Icon";
|
|
399
262
|
|
|
400
263
|
// src/accordion/AccordionItemTrigger.tsx
|
|
401
|
-
var
|
|
264
|
+
var import_jsx_runtime9 = require("react/jsx-runtime");
|
|
402
265
|
var ItemTrigger = ({
|
|
403
266
|
asChild = false,
|
|
404
267
|
children,
|
|
@@ -406,39 +269,40 @@ var ItemTrigger = ({
|
|
|
406
269
|
ref,
|
|
407
270
|
...props
|
|
408
271
|
}) => {
|
|
409
|
-
const
|
|
410
|
-
|
|
411
|
-
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
|
|
416
|
-
|
|
417
|
-
|
|
418
|
-
|
|
419
|
-
|
|
420
|
-
|
|
421
|
-
|
|
422
|
-
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
272
|
+
const renderSlot = useRenderSlot(asChild, "button");
|
|
273
|
+
return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
|
|
274
|
+
import_accordion4.Accordion.Trigger,
|
|
275
|
+
{
|
|
276
|
+
ref,
|
|
277
|
+
"data-spark-component": "accordion-item-trigger",
|
|
278
|
+
render: renderSlot,
|
|
279
|
+
className: (0, import_class_variance_authority6.cx)(
|
|
280
|
+
"group",
|
|
281
|
+
"gap-lg min-h-sz-48 relative flex items-center justify-between",
|
|
282
|
+
"px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left",
|
|
283
|
+
"hover:enabled:bg-surface-hovered focus:bg-surface-hovered",
|
|
284
|
+
"focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden",
|
|
285
|
+
"disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed",
|
|
286
|
+
className
|
|
287
|
+
),
|
|
288
|
+
...props,
|
|
289
|
+
children: [
|
|
290
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "gap-lg flex grow items-center", children }),
|
|
291
|
+
/* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
|
|
292
|
+
Icon,
|
|
293
|
+
{
|
|
294
|
+
intent: "neutral",
|
|
295
|
+
className: (0, import_class_variance_authority6.cx)(
|
|
296
|
+
"shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none",
|
|
297
|
+
"group-data-[panel-open]:rotate-180"
|
|
298
|
+
),
|
|
299
|
+
size: "sm",
|
|
300
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
|
|
301
|
+
}
|
|
302
|
+
)
|
|
303
|
+
]
|
|
304
|
+
}
|
|
426
305
|
);
|
|
427
|
-
const isOpen = !!mergedProps["aria-expanded"];
|
|
428
|
-
return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(Component, { ref, "data-spark-component": "accordion-item-trigger", ...mergedProps, children: [
|
|
429
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "gap-lg flex grow items-center", children }),
|
|
430
|
-
/* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
|
|
431
|
-
Icon,
|
|
432
|
-
{
|
|
433
|
-
intent: "neutral",
|
|
434
|
-
className: (0, import_class_variance_authority7.cx)("shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none", {
|
|
435
|
-
"rotate-180": isOpen
|
|
436
|
-
}),
|
|
437
|
-
size: "sm",
|
|
438
|
-
children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_ArrowHorizontalDown.ArrowHorizontalDown, {})
|
|
439
|
-
}
|
|
440
|
-
)
|
|
441
|
-
] });
|
|
442
306
|
};
|
|
443
307
|
ItemTrigger.displayName = "Accordion.ItemTrigger";
|
|
444
308
|
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/accordion/index.ts","../../src/accordion/Accordion.tsx","../../src/slot/Slot.tsx","../../src/accordion/AccordionItem.tsx","../../src/collapsible/Collapsible.tsx","../../src/collapsible/CollapsibleContent.tsx","../../src/collapsible/CollapsibleTrigger.tsx","../../src/collapsible/index.ts","../../src/accordion/AccordionItemContext.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/icon/Icon.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx"],"sourcesContent":["import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\nexport const Accordion: typeof Root & {\n Item: typeof Item\n ItemHeader: typeof ItemHeader\n ItemTrigger: typeof ItemTrigger\n ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n Item,\n ItemHeader,\n ItemTrigger,\n ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n","import * as accordion from '@zag-js/accordion'\nimport { mergeProps, normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, createContext, Ref, useContext, useId } from 'react'\n\nimport { Slot } from '../slot'\n\ntype ExtentedZagInterface = Omit<\n accordion.Props,\n 'id' | 'ids' | 'orientation' | 'getRootNode' | 'onValueChange'\n> &\n Omit<ComponentPropsWithoutRef<'div'>, 'defaultChecked'>\n\nexport interface AccordionProps extends ExtentedZagInterface {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n /**\n * Whether an accordion item can be closed after it has been expanded.\n */\n collapsible?: boolean\n defaultValue?: accordion.Props['value']\n /**\n * Whether the accordion items are disabled\n */\n disabled?: boolean\n /**\n * Whether multiple accordion items can be expanded at the same time.\n */\n multiple?: boolean\n /**\n * The `value` of the accordion items that are currently being expanded.\n */\n value?: string[]\n /**\n * The callback fired when the state of expanded/collapsed accordion items changes.\n */\n onValueChange?: (value: string[]) => void\n design?: 'filled' | 'outlined'\n ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<\n | (accordion.Api<PropTypes> & {\n design: 'filled' | 'outlined'\n })\n | null\n>(null)\n\nexport const Accordion = ({\n asChild = false,\n children,\n collapsible = true,\n className,\n defaultValue,\n design = 'outlined',\n disabled = false,\n multiple = false,\n value,\n onValueChange,\n ref,\n ...props\n}: AccordionProps) => {\n const [machineProps, localProps] = accordion.splitProps({\n children,\n multiple,\n collapsible,\n value,\n disabled,\n className: cx('bg-surface rounded-lg h-fit', className),\n ...props,\n })\n\n const service = useMachine(accordion.machine, {\n ...machineProps,\n defaultValue,\n value,\n id: useId(),\n onValueChange(details) {\n onValueChange?.(details.value)\n },\n })\n\n const Component = asChild ? Slot : 'div'\n const api = accordion.connect(service, normalizeProps)\n\n const mergedProps = mergeProps(api.getRootProps(), localProps)\n\n return (\n <AccordionContext.Provider value={{ ...api, design }}>\n <Component data-spark-component=\"accordion\" ref={ref} {...mergedProps}>\n {children}\n </Component>\n </AccordionContext.Provider>\n )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n const context = useContext(AccordionContext)\n\n if (!context) {\n throw Error('useAccordionContext must be used within a Accordion provider')\n }\n\n return context\n}\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n asChild: boolean | undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Collapsible } from '../collapsible'\nimport { useAccordionContext } from './Accordion'\nimport { AccordionItemProvider } from './AccordionItemContext'\n\nexport interface AccordionItemProps extends ComponentPropsWithoutRef<'div'> {\n value: string\n asChild?: boolean\n disabled?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n asChild = false,\n className,\n children,\n disabled = false,\n value,\n ref,\n ...props\n}: AccordionItemProps) => {\n const accordion = useAccordionContext()\n\n const localProps = {\n className: cx(\n 'relative first:rounded-t-lg last:rounded-b-lg',\n 'not-last:border-b-0',\n { 'border-sm border-outline': accordion.design === 'outlined' },\n className\n ),\n asChild,\n ...props,\n }\n\n const itemProps = accordion.getItemProps({ value, ...(disabled && { disabled }) })\n const mergedProps = mergeProps(itemProps, localProps)\n\n const item = accordion.getItemState({ value })\n const itemContentProps = accordion.getItemContentProps({ value })\n\n return (\n <AccordionItemProvider value={value} disabled={disabled}>\n <Collapsible\n ref={ref}\n open={item.expanded}\n data-spark-component=\"accordion-item\"\n ids={{ content: itemContentProps.id }}\n {...mergedProps}\n >\n {children}\n </Collapsible>\n </AccordionItemProvider>\n )\n}\n\nItem.displayName = 'Accordion.Item'\n","import * as collapsible from '@zag-js/collapsible'\nimport { mergeProps, normalizeProps, type PropTypes, useMachine } from '@zag-js/react'\nimport { type ComponentProps, createContext, Ref, useContext, useId } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface CollapsibleProps extends ComponentProps<'div'> {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n /**\n * The open state of the collapsible when it is initially rendered. Use when you do not need to control its open state.\n */\n defaultOpen?: boolean\n /**\n * When `true`, prevents the user from interacting with the collapsible.\n */\n disabled?: boolean\n /**\n * Event handler called when the open state of the collapsible changes.\n */\n onOpenChange?: (open: boolean) => void\n /**\n * The controlled open state of the collapsible. Must be used in conjunction with `onOpenChange`.\n */\n open?: boolean\n /**\n * The ids of the elements in the collapsible. Useful for composition\n */\n ids?: collapsible.Props['ids']\n ref?: Ref<HTMLDivElement>\n}\n\nconst CollapsibleContext = createContext<collapsible.Api<PropTypes> | null>(null)\n\nexport const Collapsible = ({\n asChild = false,\n children,\n defaultOpen = false,\n disabled = false,\n onOpenChange,\n open,\n ids,\n ref,\n ...props\n}: CollapsibleProps) => {\n const service = useMachine(collapsible.machine, {\n open,\n defaultOpen,\n disabled,\n id: useId(),\n ids,\n onOpenChange(details) {\n onOpenChange?.(details.open)\n },\n })\n const api = collapsible.connect(service, normalizeProps)\n const Component = asChild ? Slot : 'div'\n\n const mergedProps = mergeProps(api.getRootProps(), props)\n\n return (\n <CollapsibleContext.Provider value={api}>\n <Component data-spark-component=\"collapsible\" ref={ref} {...mergedProps}>\n {children}\n </Component>\n </CollapsibleContext.Provider>\n )\n}\n\nCollapsible.displayName = 'Collapsible'\n\nexport const useCollapsibleContext = () => {\n const context = useContext(CollapsibleContext)\n\n if (!context) {\n throw Error('useCollapsibleContext must be used within a Collapsible provider')\n }\n\n return context\n}\n","import { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { useCollapsibleContext } from './Collapsible'\n\nexport interface CollapsibleContentProps extends ComponentPropsWithoutRef<'div'> {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Content = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: CollapsibleContentProps) => {\n const { getContentProps } = useCollapsibleContext()\n\n const Component = asChild ? Slot : 'div'\n const contentProps = getContentProps()\n const mergedProps = mergeProps(contentProps, {\n className: cx(\n 'overflow-hidden',\n 'motion-reduce:animate-none!',\n '[&[hidden]]:hidden',\n 'data-[state=open]:animate-standalone-collapse-in data-[state=closed]:animate-standalone-collapse-out',\n className\n ),\n ...props,\n })\n\n return (\n <Component ref={ref} data-spark-component=\"collapsible-content\" {...mergedProps}>\n {children}\n </Component>\n )\n}\n\nContent.displayName = 'Collapsible.Content'\n","import { mergeProps } from '@zag-js/react'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Slot } from '../slot'\nimport { useCollapsibleContext } from './Collapsible'\n\nexport interface CollapsibleTriggerProps extends ComponentPropsWithoutRef<'button'> {\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const Trigger = ({ asChild = false, children, ref, ...props }: CollapsibleTriggerProps) => {\n const collapsibleContext = useCollapsibleContext()\n const Component = asChild ? Slot : 'button'\n const mergedProps = mergeProps(collapsibleContext.getTriggerProps(), props)\n\n return (\n <Component ref={ref} data-spark-component=\"collapsible-trigger\" {...mergedProps}>\n {children}\n </Component>\n )\n}\n\nTrigger.displayName = 'Collapsible.Trigger'\n","import { Collapsible as Root } from './Collapsible'\nimport { Content } from './CollapsibleContent'\nimport { Trigger } from './CollapsibleTrigger'\n\nexport const Collapsible: typeof Root & {\n Trigger: typeof Trigger\n Content: typeof Content\n} = Object.assign(Root, {\n Trigger,\n Content,\n})\n\nCollapsible.displayName = 'Collapsible'\nTrigger.displayName = 'Collapsible.Trigger'\nContent.displayName = 'Collapsible.Content'\n\nexport { type CollapsibleProps } from './Collapsible'\nexport { type CollapsibleContentProps } from './CollapsibleContent'\nexport { type CollapsibleTriggerProps } from './CollapsibleTrigger'\n","import {\n createContext,\n Dispatch,\n type PropsWithChildren,\n SetStateAction,\n useContext,\n useState,\n} from 'react'\n\ninterface AccordionItemContextState {\n value: string\n setValue: Dispatch<SetStateAction<string>>\n disabled: boolean\n setDisabled: Dispatch<SetStateAction<boolean>>\n}\n\nconst AccordionItemContext = createContext<AccordionItemContextState | null>(null)\n\nexport const AccordionItemProvider = ({\n value: valueProp,\n disabled: disabledProp = false,\n children,\n}: PropsWithChildren<{ value: string; disabled?: boolean }>) => {\n const [value, setValue] = useState<string>(valueProp)\n const [disabled, setDisabled] = useState<boolean>(disabledProp)\n\n return (\n <AccordionItemContext.Provider value={{ value, setValue, disabled, setDisabled }}>\n {children}\n </AccordionItemContext.Provider>\n )\n}\n\nexport const useAccordionItemContext = () => {\n const context = useContext(AccordionItemContext)\n\n if (!context) {\n throw Error('useAccordionItemContext must be used within a AccordionItem provider')\n }\n\n return context\n}\n","import { createSplitProps } from '@spark-ui/internal-utils'\nimport { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Collapsible } from '../collapsible'\nimport { useAccordionContext } from './Accordion'\nimport { useAccordionItemContext } from './AccordionItemContext'\n\nexport interface AccordionItemContentProps extends ComponentPropsWithoutRef<'div'> {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nconst splitVisibilityProps = createSplitProps<{\n hidden?: boolean\n 'data-state'?: string\n}>()\n\nexport const ItemContent = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemContentProps) => {\n const accordion = useAccordionContext()\n const accordionItem = useAccordionItemContext()\n\n const localProps = {\n className: cx('[&>:first-child]:p-lg', 'text-body-1 text-on-surface', className),\n asChild,\n ...props,\n }\n const contentProps = accordion.getItemContentProps({\n value: accordionItem.value,\n ...(accordionItem.disabled && { disabled: accordionItem.disabled }),\n })\n\n const [, itemContentProps] = splitVisibilityProps(contentProps, ['hidden', 'data-state'])\n\n const mergedProps = mergeProps(itemContentProps, localProps)\n\n return (\n <Collapsible.Content ref={ref} data-spark-component=\"accordion-item-content\" {...mergedProps}>\n {children}\n </Collapsible.Content>\n )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n asChild?: boolean\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n asChild = false,\n children,\n className,\n ref,\n}: AccordionItemHeaderProps) => {\n const Component = asChild ? Slot : 'h3'\n\n return (\n <Component\n ref={ref}\n data-spark-component=\"accordion-item-header\"\n className={cx('rounded-[inherit]', className)}\n >\n {children}\n </Component>\n )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { mergeProps } from '@zag-js/react'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentPropsWithoutRef, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { Slot } from '../slot'\nimport { useAccordionContext } from './Accordion'\nimport { useAccordionItemContext } from './AccordionItemContext'\n\nexport interface AccordionItemTriggerProps extends ComponentPropsWithoutRef<'button'> {\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n asChild = false,\n children,\n className,\n ref,\n ...props\n}: AccordionItemTriggerProps) => {\n const { getItemTriggerProps } = useAccordionContext()\n const { value, disabled } = useAccordionItemContext()\n\n const Component = asChild ? Slot : 'button'\n\n const localProps = {\n ...props,\n className: cx(\n 'relative flex gap-lg justify-between items-center min-h-sz-48',\n 'w-full px-lg py-md text-left text-headline-2 text-on-surface rounded-[inherit] data-[state=open]:rounded-b-0',\n 'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n 'focus-visible:u-outline focus-visible:outline-hidden focus-visible:z-raised',\n 'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n className\n ),\n }\n\n const mergedProps = mergeProps(\n getItemTriggerProps({ value, ...(disabled && { disabled }) }),\n localProps\n )\n\n const isOpen = !!mergedProps['aria-expanded']\n\n return (\n <Component ref={ref} data-spark-component=\"accordion-item-trigger\" {...mergedProps}>\n <div className=\"gap-lg flex grow items-center\">{children}</div>\n <Icon\n intent=\"neutral\"\n className={cx('shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none', {\n 'rotate-180': isOpen,\n })}\n size=\"sm\"\n >\n <ArrowHorizontalDown />\n </Icon>\n </Component>\n )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n /**\n * The svg icon that will be wrapped\n */\n children: ReactNode\n /**\n * The accessible label for the icon. This label will be visually hidden but announced to screen\n * reader users, similar to `alt` text for `img` tags.\n */\n label?: string\n}\n\nexport const Icon = ({\n label,\n className,\n size = 'current',\n intent = 'current',\n children,\n ...others\n}: IconProps) => {\n const child = Children.only(children)\n\n return (\n <>\n {cloneElement(child as ReactElement<Record<string, any>>, {\n className: iconStyles({ className, size, intent }),\n 'data-spark-component': 'icon',\n 'aria-hidden': 'true',\n focusable: 'false',\n ...others,\n })}\n\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </>\n )\n}\n\nIcon.displayName = 'Icon'\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n variants: {\n /**\n * Color scheme of the icon.\n */\n intent: makeVariants<\n 'intent',\n [\n 'current',\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'error',\n 'info',\n 'neutral',\n ]\n >({\n current: ['text-current'],\n main: ['text-main'],\n support: ['text-support'],\n accent: ['text-accent'],\n basic: ['text-basic'],\n success: ['text-success'],\n alert: ['text-alert'],\n error: ['text-error'],\n info: ['text-info'],\n neutral: ['text-neutral'],\n }),\n /**\n * Sets the size of the icon.\n */\n size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n current: ['u-current-font-size'],\n sm: ['w-sz-16', 'h-sz-16'],\n md: ['w-sz-24', 'h-sz-24'],\n lg: ['w-sz-32', 'h-sz-32'],\n xl: ['w-sz-40', 'h-sz-40'],\n }),\n },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n"],"mappings":"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","names":["Accordion","import_react","RadixSlot","import_jsx_runtime","collapsible","import_react","import_class_variance_authority","import_react","import_jsx_runtime","import_react","import_class_variance_authority","import_jsx_runtime","import_react","import_jsx_runtime","Collapsible","import_react","import_jsx_runtime","import_jsx_runtime","accordion","Collapsible","import_react","import_class_variance_authority","import_jsx_runtime","accordion","Collapsible","import_class_variance_authority","import_jsx_runtime","import_react","import_class_variance_authority","import_react","import_jsx_runtime","import_internal_utils","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","Accordion"]}
|
|
1
|
+
{"version":3,"sources":["../../src/accordion/index.ts","../../src/accordion/Accordion.tsx","../../src/slot/Slot.tsx","../../src/accordion/useRenderSlot.tsx","../../src/accordion/AccordionItem.tsx","../../src/accordion/AccordionItemContent.tsx","../../src/accordion/AccordionItemHeader.tsx","../../src/accordion/AccordionItemTrigger.tsx","../../src/icon/Icon.tsx","../../src/visually-hidden/VisuallyHidden.tsx","../../src/icon/Icon.styles.tsx"],"sourcesContent":["import { Accordion as Root } from './Accordion'\nimport { Item } from './AccordionItem'\nimport { ItemContent } from './AccordionItemContent'\nimport { ItemHeader } from './AccordionItemHeader'\nimport { ItemTrigger } from './AccordionItemTrigger'\n\nexport const Accordion: typeof Root & {\n Item: typeof Item\n ItemHeader: typeof ItemHeader\n ItemTrigger: typeof ItemTrigger\n ItemContent: typeof ItemContent\n} = Object.assign(Root, {\n Item,\n ItemHeader,\n ItemTrigger,\n ItemContent,\n})\n\nAccordion.displayName = 'Accordion'\nItem.displayName = 'Item'\nItemHeader.displayName = 'ItemHeader'\nItemTrigger.displayName = 'Accordion.Trigger'\nItemContent.displayName = 'Accordion.Content'\n\nexport { type AccordionProps } from './Accordion'\nexport { type AccordionItemHeaderProps } from './AccordionItemHeader'\nexport { type AccordionItemContentProps } from './AccordionItemContent'\nexport { type AccordionItemTriggerProps } from './AccordionItemTrigger'\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { ComponentProps, createContext, Ref, useContext } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<\n ComponentProps<typeof BaseAccordion.Root>,\n 'openMultiple' | 'render'\n>\n\nexport interface AccordionProps extends ExtentedZagInterface {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n /**\n * Whether the accordion items are disabled\n */\n disabled?: boolean\n /**\n * Whether multiple items can be open at the same time.\n */\n multiple?: boolean\n design?: 'filled' | 'outlined'\n ref?: Ref<HTMLDivElement>\n}\n\nconst AccordionContext = createContext<{\n design: 'filled' | 'outlined'\n} | null>(null)\n\nexport const Accordion = ({\n asChild = false,\n children,\n design = 'outlined',\n hiddenUntilFound = true,\n multiple = false,\n className,\n ref,\n ...props\n}: AccordionProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <AccordionContext.Provider value={{ design }}>\n <BaseAccordion.Root\n data-spark-component=\"accordion\"\n ref={ref}\n openMultiple={multiple}\n hiddenUntilFound={hiddenUntilFound}\n className={cx('bg-surface h-fit rounded-lg', className)}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Root>\n </AccordionContext.Provider>\n )\n}\n\nAccordion.displayName = 'Accordion'\n\nexport const useAccordionContext = () => {\n const context = useContext(AccordionContext)\n\n if (!context) {\n throw Error('useAccordionContext must be used within a Accordion provider')\n }\n\n return context\n}\n","import { Slot as RadixSlot } from 'radix-ui'\nimport {\n cloneElement,\n HTMLAttributes,\n isValidElement,\n PropsWithChildren,\n ReactNode,\n Ref,\n} from 'react'\n\nexport const Slottable: typeof RadixSlot.Slottable = RadixSlot.Slottable\n\nexport type SlotProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n ref?: Ref<HTMLElement>\n}\n\nexport const Slot = ({ ref, ...props }: SlotProps) => {\n return <RadixSlot.Root ref={ref} {...props} />\n}\n\n/**\n * When using Radix `Slot` component, it will consider its first child to merge its props with.\n * In some cases, you might need to wrap the top child with additional markup without breaking this behaviour.\n */\nexport const wrapPolymorphicSlot = (\n asChild: boolean | undefined,\n children: ReactNode,\n callback: (children: ReactNode) => ReactNode\n) => {\n if (!asChild) return callback(children) // If polymorphic behaviour is not used, we keep the original children\n\n return isValidElement(children)\n ? cloneElement(\n children,\n undefined,\n callback((children.props as { children: ReactNode }).children)\n )\n : null\n}\n","import { Slot } from '../slot'\n\nexport function useRenderSlot(asChild: boolean, defaultTag: string) {\n const Component = asChild ? Slot : defaultTag\n\n return asChild ? ({ ...props }) => <Component {...props} /> : undefined\n}\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useAccordionContext } from './Accordion'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Item>, 'render'>\n\nexport interface AccordionItemProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const Item = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemProps) => {\n const accordion = useAccordionContext()\n\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Item\n ref={ref}\n data-spark-component=\"accordion-item\"\n render={renderSlot}\n className={cx(\n 'relative first:rounded-t-lg last:rounded-b-lg',\n 'not-last:border-b-0',\n { 'border-sm border-outline': accordion.design === 'outlined' },\n className\n )}\n {...props}\n >\n {children}\n </BaseAccordion.Item>\n )\n}\n\nItem.displayName = 'Accordion.Item'\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Panel>, 'render'>\n\nexport interface AccordionItemContentProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLDivElement>\n}\n\nexport const ItemContent = ({\n asChild = false,\n className,\n children,\n ref,\n ...props\n}: AccordionItemContentProps) => {\n const renderSlot = useRenderSlot(asChild, 'div')\n\n return (\n <BaseAccordion.Panel\n ref={ref}\n data-spark-component=\"accordion-item-content\"\n className={cx(\n '[&>:first-child]:p-lg overflow-hidden',\n 'h-[var(--accordion-panel-height)] transition-all duration-200 data-[ending-style]:h-0 data-[starting-style]:h-0',\n 'text-body-1 text-on-surface',\n className\n )}\n render={renderSlot}\n {...props}\n >\n {children}\n </BaseAccordion.Panel>\n )\n}\n\nItemContent.displayName = 'Accordion.ItemContent'\n","import { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport interface AccordionItemHeaderProps extends ComponentProps<'h3'> {\n asChild?: boolean\n ref?: Ref<HTMLHeadingElement>\n}\n\nexport const ItemHeader = ({\n asChild = false,\n children,\n className,\n ref,\n}: AccordionItemHeaderProps) => {\n const Component = asChild ? Slot : 'h3'\n\n return (\n <Component\n ref={ref}\n data-spark-component=\"accordion-item-header\"\n className={cx('rounded-[inherit]', className)}\n >\n {children}\n </Component>\n )\n}\n\nItemHeader.displayName = 'Accordion.ItemHeader'\n","import { Accordion as BaseAccordion } from '@base-ui-components/react/accordion'\nimport { ArrowHorizontalDown } from '@spark-ui/icons/ArrowHorizontalDown'\nimport { cx } from 'class-variance-authority'\nimport { type ComponentProps, Ref } from 'react'\n\nimport { Icon } from '../icon'\nimport { useRenderSlot } from './useRenderSlot'\n\ntype ExtentedZagInterface = Omit<ComponentProps<typeof BaseAccordion.Trigger>, 'render'>\n\nexport interface AccordionItemTriggerProps extends ExtentedZagInterface {\n asChild?: boolean\n ref?: Ref<HTMLButtonElement>\n}\n\nexport const ItemTrigger = ({\n asChild = false,\n children,\n className,\n ref,\n ...props\n}: AccordionItemTriggerProps) => {\n const renderSlot = useRenderSlot(asChild, 'button')\n\n return (\n <BaseAccordion.Trigger\n ref={ref}\n data-spark-component=\"accordion-item-trigger\"\n render={renderSlot}\n className={cx(\n 'group',\n 'gap-lg min-h-sz-48 relative flex items-center justify-between',\n 'px-lg py-md text-headline-2 text-on-surface data-[panel-open]:rounded-b-0 w-full rounded-[inherit] text-left',\n 'hover:enabled:bg-surface-hovered focus:bg-surface-hovered',\n 'focus-visible:u-outline focus-visible:z-raised focus-visible:outline-hidden',\n 'disabled:opacity-dim-3 cursor-pointer disabled:cursor-not-allowed',\n className\n )}\n {...props}\n >\n <div className=\"gap-lg flex grow items-center\">{children}</div>\n <Icon\n intent=\"neutral\"\n className={cx(\n 'shrink-0 rotate-0 duration-100 ease-in motion-reduce:transition-none',\n 'group-data-[panel-open]:rotate-180'\n )}\n size=\"sm\"\n >\n <ArrowHorizontalDown />\n </Icon>\n </BaseAccordion.Trigger>\n )\n}\n\nItemTrigger.displayName = 'Accordion.ItemTrigger'\n","import { Children, cloneElement, ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react'\n\nimport { VisuallyHidden } from '../visually-hidden'\nimport { iconStyles, IconVariantsProps } from './Icon.styles'\n\nexport interface IconProps extends IconVariantsProps, ComponentPropsWithoutRef<'svg'> {\n /**\n * The svg icon that will be wrapped\n */\n children: ReactNode\n /**\n * The accessible label for the icon. This label will be visually hidden but announced to screen\n * reader users, similar to `alt` text for `img` tags.\n */\n label?: string\n}\n\nexport const Icon = ({\n label,\n className,\n size = 'current',\n intent = 'current',\n children,\n ...others\n}: IconProps) => {\n const child = Children.only(children)\n\n return (\n <>\n {cloneElement(child as ReactElement<Record<string, any>>, {\n className: iconStyles({ className, size, intent }),\n 'data-spark-component': 'icon',\n 'aria-hidden': 'true',\n focusable: 'false',\n ...others,\n })}\n\n {label && <VisuallyHidden>{label}</VisuallyHidden>}\n </>\n )\n}\n\nIcon.displayName = 'Icon'\n","import { HTMLAttributes, PropsWithChildren, Ref } from 'react'\n\nimport { Slot } from '../slot'\n\nexport type VisuallyHiddenProps = PropsWithChildren<HTMLAttributes<HTMLElement>> & {\n /**\n * Change the default rendered element for the one passed as a child, merging their props and behavior.\n */\n asChild?: boolean\n ref?: Ref<HTMLElement>\n}\n\nexport const VisuallyHidden = ({ asChild = false, ref, ...props }: VisuallyHiddenProps) => {\n const Component = asChild ? Slot : 'span'\n\n return (\n <Component\n {...props}\n ref={ref}\n style={{\n // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss\n position: 'absolute',\n border: 0,\n width: 1,\n height: 1,\n padding: 0,\n margin: -1,\n overflow: 'hidden',\n clip: 'rect(0, 0, 0, 0)',\n whiteSpace: 'nowrap',\n wordWrap: 'normal',\n ...props.style,\n }}\n />\n )\n}\n\nVisuallyHidden.displayName = 'VisuallyHidden'\n","import { makeVariants } from '@spark-ui/internal-utils'\nimport { cva, VariantProps } from 'class-variance-authority'\n\nexport const iconStyles = cva(['fill-current shrink-0'], {\n variants: {\n /**\n * Color scheme of the icon.\n */\n intent: makeVariants<\n 'intent',\n [\n 'current',\n 'main',\n 'support',\n 'accent',\n 'basic',\n 'success',\n 'alert',\n 'error',\n 'info',\n 'neutral',\n ]\n >({\n current: ['text-current'],\n main: ['text-main'],\n support: ['text-support'],\n accent: ['text-accent'],\n basic: ['text-basic'],\n success: ['text-success'],\n alert: ['text-alert'],\n error: ['text-error'],\n info: ['text-info'],\n neutral: ['text-neutral'],\n }),\n /**\n * Sets the size of the icon.\n */\n size: makeVariants<'size', ['current', 'sm', 'md', 'lg', 'xl']>({\n current: ['u-current-font-size'],\n sm: ['w-sz-16', 'h-sz-16'],\n md: ['w-sz-24', 'h-sz-24'],\n lg: ['w-sz-32', 'h-sz-32'],\n xl: ['w-sz-40', 'h-sz-40'],\n }),\n },\n})\n\nexport type IconVariantsProps = VariantProps<typeof iconStyles>\n"],"mappings":"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","names":["Accordion","import_react","RadixSlot","import_jsx_runtime","import_jsx_runtime","BaseAccordion","import_accordion","import_class_variance_authority","import_jsx_runtime","BaseAccordion","import_accordion","import_class_variance_authority","import_jsx_runtime","BaseAccordion","import_class_variance_authority","import_jsx_runtime","import_accordion","import_class_variance_authority","import_react","import_jsx_runtime","import_class_variance_authority","import_jsx_runtime","import_jsx_runtime","BaseAccordion","Accordion"]}
|