@marigold/components 10.2.1 → 11.0.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/dist/index.d.mts +55 -75
- package/dist/index.d.ts +55 -75
- package/dist/index.js +1172 -1325
- package/dist/index.mjs +936 -1112
- package/package.json +3 -3
package/dist/index.mjs
CHANGED
|
@@ -2,282 +2,209 @@
|
|
|
2
2
|
import { useAsyncList, useListData } from "@react-stately/data";
|
|
3
3
|
|
|
4
4
|
// src/Accordion/Accordion.tsx
|
|
5
|
-
import {
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
5
|
+
import { DisclosureGroup } from "react-aria-components";
|
|
6
|
+
import { useClassNames as useClassNames2 } from "@marigold/system";
|
|
7
|
+
|
|
8
|
+
// src/Accordion/AccordionContext.tsx
|
|
9
|
+
import { createContext, useContext } from "react";
|
|
10
|
+
var Context = createContext(null);
|
|
11
|
+
var AccordionProvider = Context.Provider;
|
|
12
|
+
var useAccordionContext = () => {
|
|
13
|
+
const ctx = useContext(Context);
|
|
14
|
+
if (ctx === null) {
|
|
15
|
+
throw Error(
|
|
16
|
+
'You can only use "useAccordionContext" within the <Accordion> component.'
|
|
17
|
+
);
|
|
18
|
+
}
|
|
19
|
+
return ctx;
|
|
20
|
+
};
|
|
14
21
|
|
|
15
|
-
// src/Accordion/
|
|
16
|
-
import {
|
|
17
|
-
import {
|
|
18
|
-
import { mergeProps as mergeProps2 } from "@react-aria/utils";
|
|
19
|
-
import { cn, useClassNames, useStateProps } from "@marigold/system";
|
|
22
|
+
// src/Accordion/AccordionHeading.tsx
|
|
23
|
+
import { Heading } from "react-aria-components";
|
|
24
|
+
import { cn as cn2 } from "@marigold/system";
|
|
20
25
|
|
|
21
|
-
// src/
|
|
26
|
+
// src/Button/Button.tsx
|
|
22
27
|
import { forwardRef } from "react";
|
|
28
|
+
import { Button } from "react-aria-components";
|
|
29
|
+
import { cn, useClassNames } from "@marigold/system";
|
|
30
|
+
|
|
31
|
+
// src/ProgressCycle/ProgressCycle.tsx
|
|
32
|
+
import { ProgressBar } from "react-aria-components";
|
|
23
33
|
import { SVG } from "@marigold/system";
|
|
24
|
-
import { jsx } from "react/jsx-runtime";
|
|
25
|
-
var
|
|
26
|
-
|
|
27
|
-
|
|
34
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
35
|
+
var ProgressCycle = ({
|
|
36
|
+
size = "16",
|
|
37
|
+
...props
|
|
38
|
+
}) => {
|
|
39
|
+
let strokeWidth = 3;
|
|
40
|
+
if (size <= "24") {
|
|
41
|
+
strokeWidth = 2;
|
|
42
|
+
} else if (size >= "32") {
|
|
43
|
+
strokeWidth = 4;
|
|
44
|
+
}
|
|
45
|
+
const radius = `calc(50% - ${strokeWidth / 2}px)`;
|
|
46
|
+
return /* @__PURE__ */ jsx(ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ jsxs(
|
|
47
|
+
SVG,
|
|
48
|
+
{
|
|
49
|
+
className: "animate-rotate-spinner origin-center fill-none",
|
|
50
|
+
size,
|
|
51
|
+
"aria-hidden": "true",
|
|
52
|
+
role: "img",
|
|
53
|
+
children: [
|
|
54
|
+
/* @__PURE__ */ jsx(
|
|
55
|
+
"circle",
|
|
56
|
+
{
|
|
57
|
+
cx: "50%",
|
|
58
|
+
cy: "50%",
|
|
59
|
+
r: radius,
|
|
60
|
+
strokeWidth,
|
|
61
|
+
className: "stroke-transparent"
|
|
62
|
+
}
|
|
63
|
+
),
|
|
64
|
+
/* @__PURE__ */ jsx(
|
|
65
|
+
"circle",
|
|
66
|
+
{
|
|
67
|
+
cx: "50%",
|
|
68
|
+
cy: "50%",
|
|
69
|
+
r: radius,
|
|
70
|
+
strokeWidth,
|
|
71
|
+
pathLength: "100",
|
|
72
|
+
strokeDasharray: "100 200",
|
|
73
|
+
strokeDashoffset: "0",
|
|
74
|
+
strokeLinecap: "round",
|
|
75
|
+
className: "animate-progress-cycle origin-center -rotate-90 stroke-gray-800"
|
|
76
|
+
}
|
|
77
|
+
)
|
|
78
|
+
]
|
|
79
|
+
}
|
|
80
|
+
) });
|
|
81
|
+
};
|
|
28
82
|
|
|
29
|
-
// src/
|
|
30
|
-
import {
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
83
|
+
// src/Button/Button.tsx
|
|
84
|
+
import { Fragment, jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
|
|
85
|
+
var _Button = forwardRef(
|
|
86
|
+
({
|
|
87
|
+
children,
|
|
88
|
+
variant,
|
|
89
|
+
size,
|
|
90
|
+
className,
|
|
91
|
+
disabled,
|
|
92
|
+
loading,
|
|
93
|
+
fullWidth,
|
|
94
|
+
...props
|
|
95
|
+
}, ref) => {
|
|
96
|
+
const classNames2 = useClassNames({
|
|
97
|
+
component: "Button",
|
|
98
|
+
variant,
|
|
99
|
+
size,
|
|
100
|
+
className
|
|
101
|
+
});
|
|
102
|
+
return /* @__PURE__ */ jsx2(
|
|
103
|
+
Button,
|
|
104
|
+
{
|
|
105
|
+
...props,
|
|
106
|
+
ref,
|
|
107
|
+
className: cn(
|
|
108
|
+
"inline-flex items-center justify-center gap-[0.5ch]",
|
|
109
|
+
classNames2,
|
|
110
|
+
fullWidth ? "w-full" : void 0,
|
|
111
|
+
loading && "cursor-progress!"
|
|
112
|
+
),
|
|
113
|
+
isPending: loading,
|
|
114
|
+
isDisabled: disabled,
|
|
115
|
+
children: loading ? /* @__PURE__ */ jsxs2(Fragment, { children: [
|
|
116
|
+
/* @__PURE__ */ jsx2("span", { className: "absolute", children: /* @__PURE__ */ jsx2(ProgressCycle, {}) }),
|
|
117
|
+
/* @__PURE__ */ jsx2("span", { className: "invisible flex gap-[inherit]", children })
|
|
118
|
+
] }) : children
|
|
119
|
+
}
|
|
120
|
+
);
|
|
121
|
+
}
|
|
35
122
|
);
|
|
36
123
|
|
|
37
124
|
// src/icons/ChevronRight.tsx
|
|
38
|
-
import { forwardRef as
|
|
39
|
-
import { SVG as
|
|
125
|
+
import { forwardRef as forwardRef2 } from "react";
|
|
126
|
+
import { SVG as SVG2 } from "@marigold/system";
|
|
40
127
|
import { jsx as jsx3 } from "react/jsx-runtime";
|
|
41
|
-
var ChevronRight =
|
|
42
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsx3(
|
|
43
|
-
);
|
|
44
|
-
|
|
45
|
-
// src/icons/ChevronLeft.tsx
|
|
46
|
-
import { forwardRef as forwardRef4 } from "react";
|
|
47
|
-
import { SVG as SVG4 } from "@marigold/system";
|
|
48
|
-
import { jsx as jsx4 } from "react/jsx-runtime";
|
|
49
|
-
var ChevronLeft = forwardRef4(
|
|
50
|
-
({ className, ...props }, ref) => /* @__PURE__ */ jsx4(SVG4, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx4("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
|
|
128
|
+
var ChevronRight = forwardRef2(
|
|
129
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx3(SVG2, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx3("path", { d: "M7.125 18.0244L13.1363 12L7.125 5.97563L8.97563 4.125L16.8506 12L8.97563 19.875L7.125 18.0244Z" }) })
|
|
51
130
|
);
|
|
52
131
|
|
|
53
|
-
// src/
|
|
54
|
-
import {
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
var SortUp = forwardRef6((props, ref) => /* @__PURE__ */ jsx6(SVG6, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx6("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
|
|
64
|
-
|
|
65
|
-
// src/Accordion/useAccordionItem.ts
|
|
66
|
-
import { useButton } from "@react-aria/button";
|
|
67
|
-
import { useSelectableItem } from "@react-aria/selection";
|
|
68
|
-
import { isAppleDevice, isMac, mergeProps, useId } from "@react-aria/utils";
|
|
69
|
-
function isNonContiguousSelectionModifier(e) {
|
|
70
|
-
return isAppleDevice() ? e.altKey : e.ctrlKey;
|
|
71
|
-
}
|
|
72
|
-
function isCtrlKeyPressed(e) {
|
|
73
|
-
if (isMac()) {
|
|
74
|
-
return e.metaKey;
|
|
75
|
-
}
|
|
76
|
-
return e.ctrlKey;
|
|
77
|
-
}
|
|
78
|
-
function useAccordionItem(props, state, ref) {
|
|
79
|
-
let { item } = props;
|
|
80
|
-
let key = item.key;
|
|
81
|
-
let manager = state.selectionManager;
|
|
82
|
-
let buttonId = useId();
|
|
83
|
-
let regionId = useId();
|
|
84
|
-
let isDisabled = state.disabledKeys.has(item.key);
|
|
85
|
-
let { itemProps } = useSelectableItem({
|
|
86
|
-
selectionManager: manager,
|
|
87
|
-
key,
|
|
88
|
-
ref
|
|
89
|
-
});
|
|
90
|
-
const isDefaultExpanded = state.expandedKeys.has(item.key);
|
|
91
|
-
let onSelect = (e) => {
|
|
92
|
-
if (e.pointerType === "keyboard" && isNonContiguousSelectionModifier(e)) {
|
|
93
|
-
if (isDefaultExpanded) {
|
|
94
|
-
state.expandedKeys.clear();
|
|
95
|
-
}
|
|
96
|
-
manager.toggleSelection(key);
|
|
97
|
-
} else {
|
|
98
|
-
if (manager.selectionMode === "none") {
|
|
99
|
-
return;
|
|
100
|
-
}
|
|
101
|
-
if (manager.selectionMode === "single") {
|
|
102
|
-
if (manager.isSelected(key) && !manager.disallowEmptySelection) {
|
|
103
|
-
if (isDefaultExpanded) {
|
|
104
|
-
state.expandedKeys.clear();
|
|
105
|
-
}
|
|
106
|
-
manager.toggleSelection(key);
|
|
107
|
-
} else {
|
|
108
|
-
if (isDefaultExpanded) {
|
|
109
|
-
state.expandedKeys.clear();
|
|
110
|
-
}
|
|
111
|
-
manager.replaceSelection(key);
|
|
112
|
-
}
|
|
113
|
-
} else if (e && e.shiftKey) {
|
|
114
|
-
if (isDefaultExpanded) {
|
|
115
|
-
state.expandedKeys.clear();
|
|
116
|
-
}
|
|
117
|
-
manager.extendSelection(key);
|
|
118
|
-
} else if (manager.selectionBehavior === "toggle" || e && (isCtrlKeyPressed(e) || e.pointerType === "touch" || e.pointerType === "virtual")) {
|
|
119
|
-
if (isDefaultExpanded) {
|
|
120
|
-
state.expandedKeys.clear();
|
|
121
|
-
manager.toggleSelection(key);
|
|
122
|
-
}
|
|
123
|
-
manager.toggleSelection(key);
|
|
124
|
-
} else {
|
|
125
|
-
if (isDefaultExpanded) {
|
|
126
|
-
state.expandedKeys.clear();
|
|
127
|
-
}
|
|
128
|
-
manager.replaceSelection(key);
|
|
132
|
+
// src/Accordion/AccordionHeading.tsx
|
|
133
|
+
import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
|
|
134
|
+
var AccordionHeader = ({ children }) => {
|
|
135
|
+
const { classNames: classNames2 } = useAccordionContext();
|
|
136
|
+
return /* @__PURE__ */ jsx4(Heading, { children: /* @__PURE__ */ jsxs3(_Button, { slot: "trigger", className: cn2("group", classNames2.header), children: [
|
|
137
|
+
children,
|
|
138
|
+
/* @__PURE__ */ jsx4(
|
|
139
|
+
ChevronRight,
|
|
140
|
+
{
|
|
141
|
+
className: cn2(classNames2.icon, "group-aria-expanded:rotate-90")
|
|
129
142
|
}
|
|
130
|
-
|
|
131
|
-
};
|
|
132
|
-
|
|
133
|
-
mergeProps(itemProps, {
|
|
134
|
-
id: buttonId,
|
|
135
|
-
elementType: "button",
|
|
136
|
-
isDisabled,
|
|
137
|
-
// if remove than everything click
|
|
138
|
-
onPress: onSelect
|
|
139
|
-
}),
|
|
140
|
-
ref
|
|
141
|
-
);
|
|
142
|
-
return {
|
|
143
|
-
buttonProps: {
|
|
144
|
-
...buttonProps,
|
|
145
|
-
role: "button",
|
|
146
|
-
"aria-expanded": manager.isSelected(key) || isDefaultExpanded,
|
|
147
|
-
"aria-controls": manager.isSelected(key) || isDefaultExpanded ? regionId : void 0
|
|
148
|
-
},
|
|
149
|
-
regionProps: {
|
|
150
|
-
id: regionId,
|
|
151
|
-
role: "region",
|
|
152
|
-
"aria-labelledby": buttonId
|
|
153
|
-
}
|
|
154
|
-
};
|
|
155
|
-
}
|
|
143
|
+
)
|
|
144
|
+
] }) });
|
|
145
|
+
};
|
|
156
146
|
|
|
157
147
|
// src/Accordion/AccordionItem.tsx
|
|
158
|
-
import {
|
|
148
|
+
import { Disclosure } from "react-aria-components";
|
|
149
|
+
import { jsx as jsx5 } from "react/jsx-runtime";
|
|
159
150
|
var AccordionItem = ({
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
variant,
|
|
164
|
-
size,
|
|
151
|
+
children,
|
|
152
|
+
disabled,
|
|
153
|
+
expanded,
|
|
165
154
|
...props
|
|
166
155
|
}) => {
|
|
167
|
-
const
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
});
|
|
171
|
-
const expanded = state.selectionManager.isSelected(item.key);
|
|
172
|
-
useEffect(() => {
|
|
173
|
-
if (defaultExpanded) {
|
|
174
|
-
if (state.selectionManager.selectionMode === "multiple") {
|
|
175
|
-
state.selectionManager.setSelectedKeys([
|
|
176
|
-
...state.selectionManager.selectedKeys,
|
|
177
|
-
item.key
|
|
178
|
-
]);
|
|
179
|
-
} else {
|
|
180
|
-
state.expandedKeys.clear();
|
|
181
|
-
state.selectionManager.toggleSelection(item.key);
|
|
182
|
-
}
|
|
183
|
-
}
|
|
184
|
-
}, [defaultExpanded, item.key, state.expandedKeys, state.selectionManager]);
|
|
185
|
-
const { buttonProps, regionProps } = useAccordionItem(
|
|
156
|
+
const { classNames: classNames2 } = useAccordionContext();
|
|
157
|
+
return /* @__PURE__ */ jsx5(
|
|
158
|
+
Disclosure,
|
|
186
159
|
{
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
|
|
190
|
-
|
|
160
|
+
isDisabled: disabled,
|
|
161
|
+
isExpanded: expanded,
|
|
162
|
+
className: classNames2.item,
|
|
163
|
+
...props,
|
|
164
|
+
children
|
|
165
|
+
}
|
|
191
166
|
);
|
|
192
|
-
|
|
193
|
-
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
"button",
|
|
201
|
-
{
|
|
202
|
-
className: cn(
|
|
203
|
-
"inline-flex items-center justify-center gap-[0.5ch]",
|
|
204
|
-
classNames2.button
|
|
205
|
-
),
|
|
206
|
-
...mergeProps2(buttonProps, stateProps, props),
|
|
207
|
-
ref,
|
|
208
|
-
"aria-label": item.textValue,
|
|
209
|
-
children: [
|
|
210
|
-
title,
|
|
211
|
-
expanded ? /* @__PURE__ */ jsx7(ChevronUp, { className: "h3 w-6" }) : /* @__PURE__ */ jsx7(ChevronDown, { className: "h3 w-6" })
|
|
212
|
-
]
|
|
213
|
-
}
|
|
214
|
-
),
|
|
215
|
-
/* @__PURE__ */ jsx7(
|
|
216
|
-
"div",
|
|
217
|
-
{
|
|
218
|
-
...mergeProps2(regionProps, focusProps, stateProps),
|
|
219
|
-
className: expanded || defaultExpanded ? classNames2.item : cn(classNames2.item, "hidden"),
|
|
220
|
-
children: item.props.children
|
|
221
|
-
}
|
|
222
|
-
)
|
|
223
|
-
] });
|
|
167
|
+
};
|
|
168
|
+
|
|
169
|
+
// src/Accordion/AccordionPanel.tsx
|
|
170
|
+
import { DisclosurePanel } from "react-aria-components";
|
|
171
|
+
import { jsx as jsx6 } from "react/jsx-runtime";
|
|
172
|
+
var AccordionPanel = ({ children }) => {
|
|
173
|
+
const { classNames: classNames2 } = useAccordionContext();
|
|
174
|
+
return /* @__PURE__ */ jsx6(DisclosurePanel, { className: classNames2.content, children });
|
|
224
175
|
};
|
|
225
176
|
|
|
226
177
|
// src/Accordion/Accordion.tsx
|
|
227
|
-
import { jsx as
|
|
228
|
-
var Accordion = ({
|
|
229
|
-
|
|
230
|
-
|
|
231
|
-
|
|
232
|
-
|
|
233
|
-
|
|
234
|
-
|
|
235
|
-
|
|
236
|
-
|
|
237
|
-
|
|
238
|
-
hasChildItems: false
|
|
239
|
-
});
|
|
240
|
-
ownProps.children.push(clone);
|
|
241
|
-
return;
|
|
242
|
-
}
|
|
243
|
-
ownProps.children.push(child);
|
|
244
|
-
});
|
|
245
|
-
const ref = useRef2(null);
|
|
246
|
-
const state = useTreeState({
|
|
247
|
-
selectionMode: "single",
|
|
248
|
-
...ownProps
|
|
249
|
-
});
|
|
250
|
-
const { accordionProps } = useAccordion(
|
|
251
|
-
/**
|
|
252
|
-
* Disable "cmd+a" (open all) hotkey for now, since it will not work
|
|
253
|
-
* with forms inside the accordion. (see DSTSUP-22)
|
|
254
|
-
*/
|
|
255
|
-
{ ...ownProps, disallowSelectAll: true },
|
|
256
|
-
state,
|
|
257
|
-
ref
|
|
258
|
-
);
|
|
259
|
-
delete accordionProps.onKeyDownCapture;
|
|
260
|
-
return /* @__PURE__ */ jsx8("div", { ...accordionProps, ref, children: [...state.collection].map((item) => /* @__PURE__ */ jsx8(
|
|
261
|
-
AccordionItem,
|
|
178
|
+
import { jsx as jsx7 } from "react/jsx-runtime";
|
|
179
|
+
var Accordion = ({
|
|
180
|
+
children,
|
|
181
|
+
disabled,
|
|
182
|
+
variant,
|
|
183
|
+
size,
|
|
184
|
+
...props
|
|
185
|
+
}) => {
|
|
186
|
+
const classNames2 = useClassNames2({ component: "Accordion", variant, size });
|
|
187
|
+
return /* @__PURE__ */ jsx7(AccordionProvider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx7(
|
|
188
|
+
DisclosureGroup,
|
|
262
189
|
{
|
|
263
|
-
|
|
264
|
-
|
|
265
|
-
|
|
266
|
-
|
|
267
|
-
|
|
268
|
-
|
|
269
|
-
item.key
|
|
270
|
-
)) });
|
|
190
|
+
...props,
|
|
191
|
+
isDisabled: disabled,
|
|
192
|
+
className: classNames2.container,
|
|
193
|
+
children
|
|
194
|
+
}
|
|
195
|
+
) });
|
|
271
196
|
};
|
|
272
|
-
Accordion.
|
|
197
|
+
Accordion.Header = AccordionHeader;
|
|
198
|
+
Accordion.Content = AccordionPanel;
|
|
199
|
+
Accordion.Item = AccordionItem;
|
|
273
200
|
|
|
274
201
|
// src/Aside/Aside.tsx
|
|
275
|
-
import { Children
|
|
276
|
-
import { cn as
|
|
277
|
-
import { jsx as
|
|
202
|
+
import { Children } from "react";
|
|
203
|
+
import { cn as cn3, createVar, gapSpace } from "@marigold/system";
|
|
204
|
+
import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
|
|
278
205
|
var classNames = {
|
|
279
|
-
aside: "grow basis-
|
|
280
|
-
content: "basis-0 grow-
|
|
206
|
+
aside: "grow basis-(--sideWidth)",
|
|
207
|
+
content: "basis-0 grow-999 [min-inline-size:var(--wrap)]"
|
|
281
208
|
};
|
|
282
209
|
var Aside = ({
|
|
283
210
|
children,
|
|
@@ -286,13 +213,13 @@ var Aside = ({
|
|
|
286
213
|
side = "left",
|
|
287
214
|
wrap = "50%"
|
|
288
215
|
}) => {
|
|
289
|
-
const [left, right] =
|
|
216
|
+
const [left, right] = Children.toArray(children);
|
|
290
217
|
const vars = {
|
|
291
218
|
aside: createVar({ sideWidth }),
|
|
292
219
|
content: createVar({ wrap })
|
|
293
220
|
};
|
|
294
|
-
return /* @__PURE__ */
|
|
295
|
-
/* @__PURE__ */
|
|
221
|
+
return /* @__PURE__ */ jsxs4("div", { className: cn3("flex flex-wrap", gapSpace[space]), children: [
|
|
222
|
+
/* @__PURE__ */ jsx8(
|
|
296
223
|
"div",
|
|
297
224
|
{
|
|
298
225
|
className: classNames[side === "left" ? "aside" : "content"],
|
|
@@ -300,7 +227,7 @@ var Aside = ({
|
|
|
300
227
|
children: left
|
|
301
228
|
}
|
|
302
229
|
),
|
|
303
|
-
/* @__PURE__ */
|
|
230
|
+
/* @__PURE__ */ jsx8(
|
|
304
231
|
"div",
|
|
305
232
|
{
|
|
306
233
|
className: classNames[side === "right" ? "aside" : "content"],
|
|
@@ -312,17 +239,17 @@ var Aside = ({
|
|
|
312
239
|
};
|
|
313
240
|
|
|
314
241
|
// src/Aspect/Aspect.tsx
|
|
315
|
-
import { aspect, cn as
|
|
316
|
-
import { jsx as
|
|
242
|
+
import { aspect, cn as cn4, createVar as createVar2 } from "@marigold/system";
|
|
243
|
+
import { jsx as jsx9 } from "react/jsx-runtime";
|
|
317
244
|
var Aspect = ({
|
|
318
245
|
ratio = "square",
|
|
319
246
|
maxWidth,
|
|
320
247
|
children
|
|
321
248
|
}) => {
|
|
322
|
-
return /* @__PURE__ */
|
|
249
|
+
return /* @__PURE__ */ jsx9(
|
|
323
250
|
"div",
|
|
324
251
|
{
|
|
325
|
-
className:
|
|
252
|
+
className: cn4(
|
|
326
253
|
"overflow-hidden",
|
|
327
254
|
aspect[ratio],
|
|
328
255
|
"max-w-[var(--maxWidth)]"
|
|
@@ -334,29 +261,29 @@ var Aspect = ({
|
|
|
334
261
|
};
|
|
335
262
|
|
|
336
263
|
// src/Autocomplete/Autocomplete.tsx
|
|
337
|
-
import
|
|
338
|
-
forwardRef as
|
|
264
|
+
import React, {
|
|
265
|
+
forwardRef as forwardRef8
|
|
339
266
|
} from "react";
|
|
340
267
|
import { ComboBox, ComboBoxStateContext } from "react-aria-components";
|
|
341
|
-
import { cn as
|
|
268
|
+
import { cn as cn14, useClassNames as useClassNames10 } from "@marigold/system";
|
|
342
269
|
|
|
343
270
|
// src/FieldBase/FieldBase.tsx
|
|
344
|
-
import { forwardRef as
|
|
345
|
-
import { cn as
|
|
271
|
+
import { forwardRef as forwardRef3 } from "react";
|
|
272
|
+
import { cn as cn7, width as twWidth, useClassNames as useClassNames5 } from "@marigold/system";
|
|
346
273
|
|
|
347
274
|
// src/HelpText/HelpText.tsx
|
|
348
|
-
import { useContext } from "react";
|
|
275
|
+
import { useContext as useContext2 } from "react";
|
|
349
276
|
import { FieldError, FieldErrorContext, Text } from "react-aria-components";
|
|
350
|
-
import { cn as
|
|
351
|
-
import { jsx as
|
|
352
|
-
var Icon = ({ className }) => /* @__PURE__ */
|
|
277
|
+
import { cn as cn5, useClassNames as useClassNames3 } from "@marigold/system";
|
|
278
|
+
import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
|
|
279
|
+
var Icon = ({ className }) => /* @__PURE__ */ jsx10(
|
|
353
280
|
"svg",
|
|
354
281
|
{
|
|
355
|
-
className:
|
|
282
|
+
className: cn5("h-4 w-4 shrink-0", className),
|
|
356
283
|
viewBox: "0 0 24 24",
|
|
357
284
|
role: "presentation",
|
|
358
285
|
fill: "currentColor",
|
|
359
|
-
children: /* @__PURE__ */
|
|
286
|
+
children: /* @__PURE__ */ jsx10("path", { d: "M2.25 20.3097H21.75L12 3.46875L2.25 20.3097ZM12.8864 17.2606H11.1136V15.4879H12.8864V17.2606ZM12.8864 13.7151H11.1136V10.1697H12.8864V13.7151Z" })
|
|
360
287
|
}
|
|
361
288
|
);
|
|
362
289
|
var HelpText = ({
|
|
@@ -366,64 +293,64 @@ var HelpText = ({
|
|
|
366
293
|
errorMessage,
|
|
367
294
|
...props
|
|
368
295
|
}) => {
|
|
369
|
-
const classNames2 =
|
|
296
|
+
const classNames2 = useClassNames3({
|
|
370
297
|
component: "HelpText",
|
|
371
298
|
variant,
|
|
372
299
|
size
|
|
373
300
|
});
|
|
374
|
-
const ctx =
|
|
301
|
+
const ctx = useContext2(FieldErrorContext);
|
|
375
302
|
if (!description && ctx && !ctx.isInvalid) {
|
|
376
303
|
return null;
|
|
377
304
|
}
|
|
378
|
-
return /* @__PURE__ */
|
|
379
|
-
/* @__PURE__ */
|
|
305
|
+
return /* @__PURE__ */ jsxs5("div", { className: cn5(classNames2.container), children: [
|
|
306
|
+
/* @__PURE__ */ jsx10(FieldError, { ...props, className: "flex flex-col", children: (validation) => {
|
|
380
307
|
const messages = (typeof errorMessage === "function" ? errorMessage(validation) : errorMessage) || validation.validationErrors;
|
|
381
|
-
return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */
|
|
382
|
-
/* @__PURE__ */
|
|
308
|
+
return Array.isArray(messages) ? messages.map((msg, idx) => /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-start gap-1", children: [
|
|
309
|
+
/* @__PURE__ */ jsx10(Icon, { className: classNames2.icon }),
|
|
383
310
|
msg
|
|
384
|
-
] }, idx)) : /* @__PURE__ */
|
|
385
|
-
/* @__PURE__ */
|
|
311
|
+
] }, idx)) : /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-start gap-1", children: [
|
|
312
|
+
/* @__PURE__ */ jsx10(Icon, { className: classNames2.icon }),
|
|
386
313
|
messages
|
|
387
314
|
] });
|
|
388
315
|
} }),
|
|
389
|
-
ctx && ctx.isInvalid ? null : /* @__PURE__ */
|
|
316
|
+
ctx && ctx.isInvalid ? null : /* @__PURE__ */ jsx10(Text, { slot: "description", children: description })
|
|
390
317
|
] });
|
|
391
318
|
};
|
|
392
319
|
|
|
393
320
|
// src/Label/Label.tsx
|
|
394
321
|
import { Label } from "react-aria-components";
|
|
395
|
-
import { SVG as
|
|
322
|
+
import { SVG as SVG3, cn as cn6, createVar as createVar3, useClassNames as useClassNames4 } from "@marigold/system";
|
|
396
323
|
|
|
397
324
|
// src/FieldBase/FieldGroup.tsx
|
|
398
|
-
import { createContext, useContext as
|
|
399
|
-
import { jsx as
|
|
400
|
-
var FieldGroupContext =
|
|
401
|
-
var useFieldGroupContext = () =>
|
|
325
|
+
import { createContext as createContext2, useContext as useContext3 } from "react";
|
|
326
|
+
import { jsx as jsx11 } from "react/jsx-runtime";
|
|
327
|
+
var FieldGroupContext = createContext2({});
|
|
328
|
+
var useFieldGroupContext = () => useContext3(FieldGroupContext);
|
|
402
329
|
var FieldGroup = ({ labelWidth, children }) => {
|
|
403
|
-
return /* @__PURE__ */
|
|
330
|
+
return /* @__PURE__ */ jsx11(FieldGroupContext.Provider, { value: { labelWidth }, children });
|
|
404
331
|
};
|
|
405
332
|
|
|
406
333
|
// src/Label/Label.tsx
|
|
407
|
-
import { jsx as
|
|
334
|
+
import { jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
|
|
408
335
|
var _Label = ({ size, variant, children, ...props }) => {
|
|
409
|
-
const classNames2 =
|
|
336
|
+
const classNames2 = useClassNames4({ component: "Label", size, variant });
|
|
410
337
|
const { labelWidth } = useFieldGroupContext();
|
|
411
|
-
return /* @__PURE__ */
|
|
338
|
+
return /* @__PURE__ */ jsxs6(
|
|
412
339
|
Label,
|
|
413
340
|
{
|
|
414
341
|
...props,
|
|
415
|
-
className:
|
|
342
|
+
className: cn6(classNames2.container, "flex w-[var(--labelWidth)]"),
|
|
416
343
|
style: createVar3({ labelWidth }),
|
|
417
344
|
children: [
|
|
418
345
|
children,
|
|
419
|
-
/* @__PURE__ */
|
|
420
|
-
|
|
346
|
+
/* @__PURE__ */ jsx12(
|
|
347
|
+
SVG3,
|
|
421
348
|
{
|
|
422
349
|
viewBox: "0 0 24 24",
|
|
423
350
|
role: "presentation",
|
|
424
351
|
size: 16,
|
|
425
|
-
className:
|
|
426
|
-
children: /* @__PURE__ */
|
|
352
|
+
className: cn6("hidden", classNames2.indicator),
|
|
353
|
+
children: /* @__PURE__ */ jsx12("path", { d: "M10.8 3.84003H13.2V9.85259L18.1543 7.01815L19.3461 9.10132L14.3584 11.9549L19.3371 14.7999L18.1463 16.8836L13.2 14.0572V20.16H10.8V13.9907L5.76116 16.8735L4.56935 14.7903L9.5232 11.9561L4.56 9.12003L5.75073 7.03624L10.8 9.92154V3.84003Z" })
|
|
427
354
|
}
|
|
428
355
|
)
|
|
429
356
|
]
|
|
@@ -432,8 +359,8 @@ var _Label = ({ size, variant, children, ...props }) => {
|
|
|
432
359
|
};
|
|
433
360
|
|
|
434
361
|
// src/FieldBase/FieldBase.tsx
|
|
435
|
-
import { jsx as
|
|
436
|
-
var fixedForwardRef =
|
|
362
|
+
import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
|
|
363
|
+
var fixedForwardRef = forwardRef3;
|
|
437
364
|
var _FieldBase = (props, ref) => {
|
|
438
365
|
const {
|
|
439
366
|
as: Component = "div",
|
|
@@ -448,16 +375,16 @@ var _FieldBase = (props, ref) => {
|
|
|
448
375
|
stateProps,
|
|
449
376
|
...rest
|
|
450
377
|
} = props;
|
|
451
|
-
const classNames2 =
|
|
378
|
+
const classNames2 = useClassNames5({
|
|
452
379
|
component: "Field",
|
|
453
380
|
variant,
|
|
454
381
|
size
|
|
455
382
|
});
|
|
456
|
-
return /* @__PURE__ */
|
|
383
|
+
return /* @__PURE__ */ jsxs7(
|
|
457
384
|
Component,
|
|
458
385
|
{
|
|
459
386
|
ref,
|
|
460
|
-
className:
|
|
387
|
+
className: cn7(
|
|
461
388
|
"group/field",
|
|
462
389
|
twWidth[width],
|
|
463
390
|
classNames2,
|
|
@@ -468,9 +395,9 @@ var _FieldBase = (props, ref) => {
|
|
|
468
395
|
"data-error": props.isInvalid ? true : void 0,
|
|
469
396
|
...rest,
|
|
470
397
|
children: [
|
|
471
|
-
label ? /* @__PURE__ */
|
|
398
|
+
label ? /* @__PURE__ */ jsx13(_Label, { variant, size, children: label }) : /* @__PURE__ */ jsx13("span", { "aria-hidden": "true" }),
|
|
472
399
|
children,
|
|
473
|
-
/* @__PURE__ */
|
|
400
|
+
/* @__PURE__ */ jsx13(
|
|
474
401
|
HelpText,
|
|
475
402
|
{
|
|
476
403
|
variant,
|
|
@@ -486,40 +413,40 @@ var _FieldBase = (props, ref) => {
|
|
|
486
413
|
var FieldBase = fixedForwardRef(_FieldBase);
|
|
487
414
|
|
|
488
415
|
// src/Input/SearchInput.tsx
|
|
489
|
-
import { forwardRef as
|
|
490
|
-
import { Button } from "react-aria-components";
|
|
416
|
+
import { forwardRef as forwardRef5 } from "react";
|
|
417
|
+
import { Button as Button2 } from "react-aria-components";
|
|
491
418
|
import { useLocalizedStringFormatter } from "@react-aria/i18n";
|
|
492
|
-
import { cn as
|
|
419
|
+
import { cn as cn9 } from "@marigold/system";
|
|
493
420
|
|
|
494
421
|
// src/Input/Input.tsx
|
|
495
|
-
import { cloneElement
|
|
422
|
+
import { cloneElement, forwardRef as forwardRef4 } from "react";
|
|
496
423
|
import { Input } from "react-aria-components";
|
|
497
|
-
import { cn as
|
|
498
|
-
import { jsx as
|
|
499
|
-
var _Input =
|
|
424
|
+
import { cn as cn8, useClassNames as useClassNames6 } from "@marigold/system";
|
|
425
|
+
import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
426
|
+
var _Input = forwardRef4(
|
|
500
427
|
({ type, icon, action, variant, size, className, ...props }, ref) => {
|
|
501
|
-
const classNames2 =
|
|
428
|
+
const classNames2 = useClassNames6({
|
|
502
429
|
component: "Input",
|
|
503
430
|
variant,
|
|
504
431
|
size
|
|
505
432
|
});
|
|
506
|
-
const inputIcon = icon ?
|
|
433
|
+
const inputIcon = icon ? cloneElement(icon, {
|
|
507
434
|
...icon.props,
|
|
508
|
-
className:
|
|
435
|
+
className: cn8(
|
|
509
436
|
"pointer-events-none absolute",
|
|
510
437
|
classNames2.icon,
|
|
511
438
|
icon.props.className
|
|
512
439
|
)
|
|
513
440
|
}) : null;
|
|
514
|
-
const inputAction = action && !props.readOnly ?
|
|
441
|
+
const inputAction = action && !props.readOnly ? cloneElement(action, {
|
|
515
442
|
...action.props,
|
|
516
|
-
className:
|
|
443
|
+
className: cn8(
|
|
517
444
|
"absolute right-0",
|
|
518
445
|
classNames2.action,
|
|
519
446
|
action.props.className
|
|
520
447
|
)
|
|
521
448
|
}) : null;
|
|
522
|
-
return /* @__PURE__ */
|
|
449
|
+
return /* @__PURE__ */ jsxs8(
|
|
523
450
|
"div",
|
|
524
451
|
{
|
|
525
452
|
className: "group/input relative flex items-center",
|
|
@@ -527,11 +454,11 @@ var _Input = forwardRef8(
|
|
|
527
454
|
"data-action": action && "",
|
|
528
455
|
children: [
|
|
529
456
|
inputIcon,
|
|
530
|
-
/* @__PURE__ */
|
|
457
|
+
/* @__PURE__ */ jsx14(
|
|
531
458
|
Input,
|
|
532
459
|
{
|
|
533
460
|
...props,
|
|
534
|
-
className:
|
|
461
|
+
className: cn8(
|
|
535
462
|
"w-full flex-1",
|
|
536
463
|
"disabled:cursor-not-allowed",
|
|
537
464
|
"[&[type=file]]:border-none [&[type=file]]:p-0",
|
|
@@ -551,7 +478,7 @@ var _Input = forwardRef8(
|
|
|
551
478
|
);
|
|
552
479
|
|
|
553
480
|
// src/Input/SearchInput.tsx
|
|
554
|
-
import { jsx as
|
|
481
|
+
import { jsx as jsx15 } from "react/jsx-runtime";
|
|
555
482
|
var intlMessages = {
|
|
556
483
|
"de-DE": {
|
|
557
484
|
"Clear search": "Suche zur\xFCcksetzen"
|
|
@@ -563,7 +490,7 @@ var intlMessages = {
|
|
|
563
490
|
"Clear search": "Effacer la recherche"
|
|
564
491
|
}
|
|
565
492
|
};
|
|
566
|
-
var SearchIcon = (props) => /* @__PURE__ */
|
|
493
|
+
var SearchIcon = (props) => /* @__PURE__ */ jsx15(
|
|
567
494
|
"svg",
|
|
568
495
|
{
|
|
569
496
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -572,31 +499,31 @@ var SearchIcon = (props) => /* @__PURE__ */ jsx16(
|
|
|
572
499
|
width: 24,
|
|
573
500
|
height: 24,
|
|
574
501
|
...props,
|
|
575
|
-
children: /* @__PURE__ */
|
|
502
|
+
children: /* @__PURE__ */ jsx15("path", { d: "M16.1865 14.5142H15.3057L14.9936 14.2131C16.0862 12.9421 16.744 11.292 16.744 9.497C16.744 5.49443 13.4996 2.25 9.497 2.25C5.49443 2.25 2.25 5.49443 2.25 9.497C2.25 13.4996 5.49443 16.744 9.497 16.744C11.292 16.744 12.9421 16.0862 14.2131 14.9936L14.5142 15.3057V16.1865L20.0888 21.75L21.75 20.0888L16.1865 14.5142ZM9.49701 14.5142C6.72085 14.5142 4.47986 12.2732 4.47986 9.49701C4.47986 6.72085 6.72085 4.47986 9.49701 4.47986C12.2732 4.47986 14.5142 6.72085 14.5142 9.49701C14.5142 12.2732 12.2732 14.5142 9.49701 14.5142Z" })
|
|
576
503
|
}
|
|
577
504
|
);
|
|
578
|
-
var SearchInput =
|
|
505
|
+
var SearchInput = forwardRef5(
|
|
579
506
|
({ className, onClear, ...props }, ref) => {
|
|
580
507
|
const stringFormatter = useLocalizedStringFormatter(intlMessages);
|
|
581
|
-
return /* @__PURE__ */
|
|
508
|
+
return /* @__PURE__ */ jsx15(
|
|
582
509
|
_Input,
|
|
583
510
|
{
|
|
584
511
|
type: "search",
|
|
585
|
-
className:
|
|
512
|
+
className: cn9(
|
|
586
513
|
"[&::-webkit-search-cancel-button]:hidden",
|
|
587
514
|
className == null ? void 0 : className.input
|
|
588
515
|
),
|
|
589
516
|
ref,
|
|
590
|
-
icon: /* @__PURE__ */
|
|
591
|
-
action: /* @__PURE__ */
|
|
592
|
-
|
|
517
|
+
icon: /* @__PURE__ */ jsx15(SearchIcon, {}),
|
|
518
|
+
action: /* @__PURE__ */ jsx15(
|
|
519
|
+
Button2,
|
|
593
520
|
{
|
|
594
521
|
className: className == null ? void 0 : className.action,
|
|
595
522
|
onPress: () => onClear == null ? void 0 : onClear(),
|
|
596
523
|
"aria-label": stringFormatter.format("Clear search"),
|
|
597
524
|
excludeFromTabOrder: true,
|
|
598
525
|
preventFocusOnPress: true,
|
|
599
|
-
children: /* @__PURE__ */
|
|
526
|
+
children: /* @__PURE__ */ jsx15(
|
|
600
527
|
"svg",
|
|
601
528
|
{
|
|
602
529
|
xmlns: "http://www.w3.org/2000/svg",
|
|
@@ -604,7 +531,7 @@ var SearchInput = forwardRef9(
|
|
|
604
531
|
fill: "currentColor",
|
|
605
532
|
width: 20,
|
|
606
533
|
height: 20,
|
|
607
|
-
children: /* @__PURE__ */
|
|
534
|
+
children: /* @__PURE__ */ jsx15("path", { d: "M6.28 5.22a.75.75 0 00-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 101.06 1.06L10 11.06l3.72 3.72a.75.75 0 101.06-1.06L11.06 10l3.72-3.72a.75.75 0 00-1.06-1.06L10 8.94 6.28 5.22z" })
|
|
608
535
|
}
|
|
609
536
|
)
|
|
610
537
|
}
|
|
@@ -617,37 +544,37 @@ var SearchInput = forwardRef9(
|
|
|
617
544
|
|
|
618
545
|
// src/ListBox/ListBox.tsx
|
|
619
546
|
import {
|
|
620
|
-
forwardRef as
|
|
547
|
+
forwardRef as forwardRef6
|
|
621
548
|
} from "react";
|
|
622
549
|
import { ListBox } from "react-aria-components";
|
|
623
|
-
import { cn as
|
|
550
|
+
import { cn as cn11, useClassNames as useClassNames7 } from "@marigold/system";
|
|
624
551
|
|
|
625
552
|
// src/ListBox/Context.ts
|
|
626
|
-
import { createContext as
|
|
627
|
-
var ListBoxContext =
|
|
628
|
-
var useListBoxContext = () =>
|
|
553
|
+
import { createContext as createContext3, useContext as useContext4 } from "react";
|
|
554
|
+
var ListBoxContext = createContext3({});
|
|
555
|
+
var useListBoxContext = () => useContext4(ListBoxContext);
|
|
629
556
|
|
|
630
557
|
// src/ListBox/ListBoxItem.tsx
|
|
631
558
|
import { ListBoxItem } from "react-aria-components";
|
|
632
|
-
import { jsx as
|
|
559
|
+
import { jsx as jsx16 } from "react/jsx-runtime";
|
|
633
560
|
var _ListBoxItem = ({ ...props }) => {
|
|
634
561
|
const { classNames: classNames2 } = useListBoxContext();
|
|
635
|
-
return /* @__PURE__ */
|
|
562
|
+
return /* @__PURE__ */ jsx16(ListBoxItem, { ...props, className: classNames2.option });
|
|
636
563
|
};
|
|
637
564
|
|
|
638
565
|
// src/ListBox/ListBoxSection.tsx
|
|
639
566
|
import { Header, ListBoxSection } from "react-aria-components";
|
|
640
|
-
import { cn as
|
|
641
|
-
import { jsx as
|
|
642
|
-
var _Section = ({ header
|
|
567
|
+
import { cn as cn10 } from "@marigold/system";
|
|
568
|
+
import { jsx as jsx17, jsxs as jsxs9 } from "react/jsx-runtime";
|
|
569
|
+
var _Section = ({ header, children, ...props }) => {
|
|
643
570
|
const { classNames: classNames2 } = useListBoxContext();
|
|
644
|
-
return /* @__PURE__ */
|
|
571
|
+
return /* @__PURE__ */ jsxs9(
|
|
645
572
|
ListBoxSection,
|
|
646
573
|
{
|
|
647
574
|
...props,
|
|
648
|
-
className:
|
|
575
|
+
className: cn10(classNames2.section, classNames2.header),
|
|
649
576
|
children: [
|
|
650
|
-
/* @__PURE__ */
|
|
577
|
+
/* @__PURE__ */ jsx17(Header, { children: header }),
|
|
651
578
|
children
|
|
652
579
|
]
|
|
653
580
|
}
|
|
@@ -655,16 +582,16 @@ var _Section = ({ header: header2, children, ...props }) => {
|
|
|
655
582
|
};
|
|
656
583
|
|
|
657
584
|
// src/ListBox/ListBox.tsx
|
|
658
|
-
import { jsx as
|
|
659
|
-
var _ListBox =
|
|
585
|
+
import { jsx as jsx18 } from "react/jsx-runtime";
|
|
586
|
+
var _ListBox = forwardRef6(
|
|
660
587
|
({ variant, size, ...props }, ref) => {
|
|
661
|
-
const classNames2 =
|
|
588
|
+
const classNames2 = useClassNames7({ component: "ListBox", variant, size });
|
|
662
589
|
const listBoxProps = { shouldSelectOnPressUp: false };
|
|
663
|
-
return /* @__PURE__ */
|
|
590
|
+
return /* @__PURE__ */ jsx18(ListBoxContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx18("div", { className: classNames2.container, children: /* @__PURE__ */ jsx18(
|
|
664
591
|
ListBox,
|
|
665
592
|
{
|
|
666
593
|
...props,
|
|
667
|
-
className:
|
|
594
|
+
className: cn11(
|
|
668
595
|
"overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
|
|
669
596
|
classNames2.list
|
|
670
597
|
),
|
|
@@ -679,17 +606,17 @@ _ListBox.Item = _ListBoxItem;
|
|
|
679
606
|
_ListBox.Section = _Section;
|
|
680
607
|
|
|
681
608
|
// src/Overlay/Popover.tsx
|
|
682
|
-
import { forwardRef as
|
|
609
|
+
import { forwardRef as forwardRef7 } from "react";
|
|
683
610
|
import { Popover } from "react-aria-components";
|
|
684
|
-
import { cn as
|
|
611
|
+
import { cn as cn13, useClassNames as useClassNames9, useSmallScreen } from "@marigold/system";
|
|
685
612
|
|
|
686
613
|
// src/Provider/OverlayContainerProvider.tsx
|
|
687
|
-
import { createContext as
|
|
614
|
+
import { createContext as createContext4, useContext as useContext5 } from "react";
|
|
688
615
|
import { useIsSSR } from "@react-aria/ssr";
|
|
689
|
-
var OverlayContainerContext =
|
|
616
|
+
var OverlayContainerContext = createContext4(void 0);
|
|
690
617
|
var OverlayContainerProvider = OverlayContainerContext.Provider;
|
|
691
618
|
var usePortalContainer = () => {
|
|
692
|
-
const portalContainer =
|
|
619
|
+
const portalContainer = useContext5(OverlayContainerContext);
|
|
693
620
|
const isSSR = useIsSSR();
|
|
694
621
|
const portal = isSSR ? null : portalContainer ? document.getElementById(portalContainer) : document.body;
|
|
695
622
|
return portal;
|
|
@@ -697,7 +624,7 @@ var usePortalContainer = () => {
|
|
|
697
624
|
|
|
698
625
|
// src/Overlay/Underlay.tsx
|
|
699
626
|
import { ModalOverlay } from "react-aria-components";
|
|
700
|
-
import { cn as
|
|
627
|
+
import { cn as cn12, useClassNames as useClassNames8 } from "@marigold/system";
|
|
701
628
|
|
|
702
629
|
// src/Provider/index.ts
|
|
703
630
|
import { useTheme, ThemeProvider as ThemeProvider2 } from "@marigold/system";
|
|
@@ -705,17 +632,17 @@ import { I18nProvider } from "@react-aria/i18n";
|
|
|
705
632
|
|
|
706
633
|
// src/Provider/MarigoldProvider.tsx
|
|
707
634
|
import { ThemeProvider } from "@marigold/system";
|
|
708
|
-
import { jsx as
|
|
635
|
+
import { jsx as jsx19 } from "react/jsx-runtime";
|
|
709
636
|
function MarigoldProvider({
|
|
710
637
|
children,
|
|
711
638
|
className,
|
|
712
639
|
theme
|
|
713
640
|
}) {
|
|
714
|
-
return /* @__PURE__ */
|
|
641
|
+
return /* @__PURE__ */ jsx19(ThemeProvider, { theme, className, children });
|
|
715
642
|
}
|
|
716
643
|
|
|
717
644
|
// src/Overlay/Underlay.tsx
|
|
718
|
-
import { jsx as
|
|
645
|
+
import { jsx as jsx20 } from "react/jsx-runtime";
|
|
719
646
|
var Underlay = ({
|
|
720
647
|
size,
|
|
721
648
|
variant,
|
|
@@ -724,7 +651,7 @@ var Underlay = ({
|
|
|
724
651
|
keyboardDismissable,
|
|
725
652
|
...rest
|
|
726
653
|
}) => {
|
|
727
|
-
const classNames2 =
|
|
654
|
+
const classNames2 = useClassNames8({ component: "Underlay", size, variant });
|
|
728
655
|
const props = {
|
|
729
656
|
isOpen: open,
|
|
730
657
|
isDismissable: dismissable,
|
|
@@ -732,11 +659,11 @@ var Underlay = ({
|
|
|
732
659
|
...rest
|
|
733
660
|
};
|
|
734
661
|
const portal = usePortalContainer();
|
|
735
|
-
return /* @__PURE__ */
|
|
662
|
+
return /* @__PURE__ */ jsx20(
|
|
736
663
|
ModalOverlay,
|
|
737
664
|
{
|
|
738
|
-
className: ({ isEntering, isExiting }) =>
|
|
739
|
-
"fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur",
|
|
665
|
+
className: ({ isEntering, isExiting }) => cn12(
|
|
666
|
+
"fixed inset-0 z-40 flex min-h-full items-center justify-center overflow-y-auto backdrop-blur-xs",
|
|
740
667
|
isEntering ? "animate-in fade-in duration-300 ease-out" : "",
|
|
741
668
|
isExiting ? "animate-out fade-out duration-200 ease-in" : "",
|
|
742
669
|
classNames2
|
|
@@ -750,8 +677,8 @@ var Underlay = ({
|
|
|
750
677
|
};
|
|
751
678
|
|
|
752
679
|
// src/Overlay/Popover.tsx
|
|
753
|
-
import { Fragment, jsx as
|
|
754
|
-
var _Popover =
|
|
680
|
+
import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
681
|
+
var _Popover = forwardRef7(
|
|
755
682
|
({ keyboardDismissDisabled, placement, open, children, container, ...rest }, ref) => {
|
|
756
683
|
const props = {
|
|
757
684
|
isKeyboardDismissDisabled: keyboardDismissDisabled,
|
|
@@ -759,29 +686,29 @@ var _Popover = forwardRef11(
|
|
|
759
686
|
placement,
|
|
760
687
|
...rest
|
|
761
688
|
};
|
|
762
|
-
const classNames2 =
|
|
689
|
+
const classNames2 = useClassNames9({
|
|
763
690
|
component: "Popover",
|
|
764
691
|
variant: placement,
|
|
765
692
|
// Make Popover as wide as trigger element
|
|
766
|
-
className: "min-w-
|
|
693
|
+
className: "min-w-(--trigger-width)"
|
|
767
694
|
});
|
|
768
695
|
const isSmallScreen = useSmallScreen();
|
|
769
696
|
const portal = usePortalContainer();
|
|
770
|
-
return /* @__PURE__ */
|
|
771
|
-
/* @__PURE__ */
|
|
772
|
-
/* @__PURE__ */
|
|
697
|
+
return /* @__PURE__ */ jsx21(Fragment2, { children: isSmallScreen ? /* @__PURE__ */ jsxs10(Fragment2, { children: [
|
|
698
|
+
/* @__PURE__ */ jsx21(Underlay, { open, variant: "modal" }),
|
|
699
|
+
/* @__PURE__ */ jsx21(
|
|
773
700
|
Popover,
|
|
774
701
|
{
|
|
775
702
|
ref,
|
|
776
703
|
...props,
|
|
777
|
-
className:
|
|
778
|
-
"!
|
|
704
|
+
className: cn13(
|
|
705
|
+
"fixed! top-auto! bottom-0! left-0! max-h-fit! w-full"
|
|
779
706
|
),
|
|
780
707
|
UNSTABLE_portalContainer: portal,
|
|
781
708
|
children
|
|
782
709
|
}
|
|
783
710
|
)
|
|
784
|
-
] }) : /* @__PURE__ */
|
|
711
|
+
] }) : /* @__PURE__ */ jsx21(
|
|
785
712
|
Popover,
|
|
786
713
|
{
|
|
787
714
|
ref,
|
|
@@ -797,20 +724,20 @@ var _Popover = forwardRef11(
|
|
|
797
724
|
);
|
|
798
725
|
|
|
799
726
|
// src/Autocomplete/Autocomplete.tsx
|
|
800
|
-
import { jsx as
|
|
727
|
+
import { jsx as jsx22, jsxs as jsxs11 } from "react/jsx-runtime";
|
|
801
728
|
var AutocompleteInput = ({
|
|
802
729
|
onSubmit,
|
|
803
730
|
onClear,
|
|
804
731
|
ref
|
|
805
732
|
}) => {
|
|
806
|
-
const state =
|
|
807
|
-
const classNames2 =
|
|
808
|
-
return /* @__PURE__ */
|
|
733
|
+
const state = React.useContext(ComboBoxStateContext);
|
|
734
|
+
const classNames2 = useClassNames10({ component: "ComboBox" });
|
|
735
|
+
return /* @__PURE__ */ jsx22(
|
|
809
736
|
SearchInput,
|
|
810
737
|
{
|
|
811
738
|
ref,
|
|
812
739
|
className: {
|
|
813
|
-
action:
|
|
740
|
+
action: cn14(
|
|
814
741
|
(state == null ? void 0 : state.inputValue) === "" ? "invisible" : "visible",
|
|
815
742
|
classNames2
|
|
816
743
|
)
|
|
@@ -833,7 +760,7 @@ var AutocompleteInput = ({
|
|
|
833
760
|
}
|
|
834
761
|
);
|
|
835
762
|
};
|
|
836
|
-
var _Autocomplete =
|
|
763
|
+
var _Autocomplete = forwardRef8(
|
|
837
764
|
({
|
|
838
765
|
children,
|
|
839
766
|
defaultValue,
|
|
@@ -859,9 +786,9 @@ var _Autocomplete = forwardRef12(
|
|
|
859
786
|
isRequired: required,
|
|
860
787
|
...rest
|
|
861
788
|
};
|
|
862
|
-
return /* @__PURE__ */
|
|
863
|
-
/* @__PURE__ */
|
|
864
|
-
/* @__PURE__ */
|
|
789
|
+
return /* @__PURE__ */ jsxs11(FieldBase, { as: ComboBox, ref, ...props, children: [
|
|
790
|
+
/* @__PURE__ */ jsx22(AutocompleteInput, { onSubmit, onClear, ref }),
|
|
791
|
+
/* @__PURE__ */ jsx22(_Popover, { children: /* @__PURE__ */ jsx22(_ListBox, { children }) })
|
|
865
792
|
] });
|
|
866
793
|
}
|
|
867
794
|
);
|
|
@@ -869,111 +796,41 @@ _Autocomplete.Option = _ListBox.Item;
|
|
|
869
796
|
_Autocomplete.Section = _ListBox.Section;
|
|
870
797
|
|
|
871
798
|
// src/ComboBox/ComboBox.tsx
|
|
872
|
-
import { forwardRef as
|
|
799
|
+
import { forwardRef as forwardRef13 } from "react";
|
|
873
800
|
import { ComboBox as ComboBox2 } from "react-aria-components";
|
|
874
801
|
import { useClassNames as useClassNames11 } from "@marigold/system";
|
|
875
802
|
|
|
876
|
-
// src/
|
|
877
|
-
import { forwardRef as
|
|
878
|
-
import {
|
|
879
|
-
import {
|
|
880
|
-
|
|
881
|
-
|
|
882
|
-
|
|
883
|
-
import { SVG as SVG8 } from "@marigold/system";
|
|
884
|
-
import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
|
|
885
|
-
var ProgressCycle = ({
|
|
886
|
-
size = "16",
|
|
887
|
-
...props
|
|
888
|
-
}) => {
|
|
889
|
-
let strokeWidth = 3;
|
|
890
|
-
if (size <= "24") {
|
|
891
|
-
strokeWidth = 2;
|
|
892
|
-
} else if (size >= "32") {
|
|
893
|
-
strokeWidth = 4;
|
|
894
|
-
}
|
|
895
|
-
const radius = `calc(50% - ${strokeWidth / 2}px)`;
|
|
896
|
-
return /* @__PURE__ */ jsx24(ProgressBar, { ...props, "aria-label": "loading", isIndeterminate: true, children: /* @__PURE__ */ jsxs10(
|
|
897
|
-
SVG8,
|
|
898
|
-
{
|
|
899
|
-
className: "animate-rotate-spinner origin-center fill-none",
|
|
900
|
-
size,
|
|
901
|
-
"aria-hidden": "true",
|
|
902
|
-
role: "img",
|
|
903
|
-
children: [
|
|
904
|
-
/* @__PURE__ */ jsx24(
|
|
905
|
-
"circle",
|
|
906
|
-
{
|
|
907
|
-
cx: "50%",
|
|
908
|
-
cy: "50%",
|
|
909
|
-
r: radius,
|
|
910
|
-
strokeWidth,
|
|
911
|
-
className: "stroke-transparent"
|
|
912
|
-
}
|
|
913
|
-
),
|
|
914
|
-
/* @__PURE__ */ jsx24(
|
|
915
|
-
"circle",
|
|
916
|
-
{
|
|
917
|
-
cx: "50%",
|
|
918
|
-
cy: "50%",
|
|
919
|
-
r: radius,
|
|
920
|
-
strokeWidth,
|
|
921
|
-
pathLength: "100",
|
|
922
|
-
strokeDasharray: "100 200",
|
|
923
|
-
strokeDashoffset: "0",
|
|
924
|
-
strokeLinecap: "round",
|
|
925
|
-
className: "animate-progress-cycle origin-center -rotate-90 stroke-gray-800"
|
|
926
|
-
}
|
|
927
|
-
)
|
|
928
|
-
]
|
|
929
|
-
}
|
|
930
|
-
) });
|
|
931
|
-
};
|
|
803
|
+
// src/icons/ChevronDown.tsx
|
|
804
|
+
import { forwardRef as forwardRef9 } from "react";
|
|
805
|
+
import { SVG as SVG4 } from "@marigold/system";
|
|
806
|
+
import { jsx as jsx23 } from "react/jsx-runtime";
|
|
807
|
+
var ChevronDown = forwardRef9(
|
|
808
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx23(SVG4, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx23("path", { d: "M5.97563 7.125L12 13.1363L18.0244 7.125L19.875 8.97563L12 16.8506L4.125 8.97563L5.97563 7.125Z" }) })
|
|
809
|
+
);
|
|
932
810
|
|
|
933
|
-
// src/
|
|
934
|
-
import {
|
|
935
|
-
|
|
936
|
-
|
|
937
|
-
|
|
938
|
-
|
|
939
|
-
size,
|
|
940
|
-
className,
|
|
941
|
-
disabled,
|
|
942
|
-
loading,
|
|
943
|
-
fullWidth,
|
|
944
|
-
...props
|
|
945
|
-
}, ref) => {
|
|
946
|
-
const classNames2 = useClassNames10({
|
|
947
|
-
component: "Button",
|
|
948
|
-
variant,
|
|
949
|
-
size,
|
|
950
|
-
className
|
|
951
|
-
});
|
|
952
|
-
return /* @__PURE__ */ jsx25(
|
|
953
|
-
Button2,
|
|
954
|
-
{
|
|
955
|
-
...props,
|
|
956
|
-
ref,
|
|
957
|
-
className: cn14(
|
|
958
|
-
"inline-flex items-center justify-center gap-[0.5ch]",
|
|
959
|
-
classNames2,
|
|
960
|
-
fullWidth ? "w-full" : void 0,
|
|
961
|
-
loading && "!cursor-progress"
|
|
962
|
-
),
|
|
963
|
-
isPending: loading,
|
|
964
|
-
isDisabled: disabled,
|
|
965
|
-
children: loading ? /* @__PURE__ */ jsxs11(Fragment2, { children: [
|
|
966
|
-
/* @__PURE__ */ jsx25("span", { className: "absolute", children: /* @__PURE__ */ jsx25(ProgressCycle, {}) }),
|
|
967
|
-
/* @__PURE__ */ jsx25("span", { className: "invisible flex gap-[inherit]", children })
|
|
968
|
-
] }) : children
|
|
969
|
-
}
|
|
970
|
-
);
|
|
971
|
-
}
|
|
811
|
+
// src/icons/ChevronLeft.tsx
|
|
812
|
+
import { forwardRef as forwardRef10 } from "react";
|
|
813
|
+
import { SVG as SVG5 } from "@marigold/system";
|
|
814
|
+
import { jsx as jsx24 } from "react/jsx-runtime";
|
|
815
|
+
var ChevronLeft = forwardRef10(
|
|
816
|
+
({ className, ...props }, ref) => /* @__PURE__ */ jsx24(SVG5, { className, ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx24("path", { d: "M16.8506 18.0244L10.8394 12L16.8506 5.97563L15 4.125L7.125 12L15 19.875L16.8506 18.0244Z" }) })
|
|
972
817
|
);
|
|
973
818
|
|
|
819
|
+
// src/icons/SortDown.tsx
|
|
820
|
+
import { forwardRef as forwardRef11 } from "react";
|
|
821
|
+
import { SVG as SVG6 } from "@marigold/system";
|
|
822
|
+
import { jsx as jsx25 } from "react/jsx-runtime";
|
|
823
|
+
var SortDown = forwardRef11((props, ref) => /* @__PURE__ */ jsx25(SVG6, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx25("path", { d: "M17.3962 10.0496L12.5042 14.9416C12.3731 15.0727 12.1984 15.1492 12.0128 15.1492C11.8272 15.1492 11.6524 15.0727 11.5214 14.9416L6.62934 10.0496C6.49827 9.91854 6.42188 9.7439 6.42188 9.55816C6.42188 9.17606 6.73856 8.85938 7.12078 8.85938H16.9048C17.287 8.85938 17.6037 9.17606 17.6037 9.55816C17.6037 9.7439 17.5273 9.91854 17.3962 10.0496Z" }) }));
|
|
824
|
+
|
|
825
|
+
// src/icons/SortUp.tsx
|
|
826
|
+
import { forwardRef as forwardRef12 } from "react";
|
|
827
|
+
import { SVG as SVG7 } from "@marigold/system";
|
|
828
|
+
import { jsx as jsx26 } from "react/jsx-runtime";
|
|
829
|
+
var SortUp = forwardRef12((props, ref) => /* @__PURE__ */ jsx26(SVG7, { ...props, viewBox: "0 0 24 24", ref, children: /* @__PURE__ */ jsx26("path", { d: "M16.9048 15.1491H7.12078C6.73856 15.1491 6.42188 14.8324 6.42188 14.4503C6.42188 14.2645 6.49827 14.0899 6.62934 13.9588L11.5214 9.06684C11.6524 8.93577 11.8272 8.85938 12.0128 8.85938C12.1984 8.85938 12.3731 8.93577 12.5042 9.06684L17.3962 13.9588C17.5273 14.0899 17.6037 14.2645 17.6037 14.4503C17.6037 14.8324 17.287 15.1491 16.9048 15.1491Z" }) }));
|
|
830
|
+
|
|
974
831
|
// src/ComboBox/ComboBox.tsx
|
|
975
|
-
import { jsx as
|
|
976
|
-
var _ComboBox =
|
|
832
|
+
import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
|
|
833
|
+
var _ComboBox = forwardRef13(
|
|
977
834
|
({
|
|
978
835
|
variant,
|
|
979
836
|
size,
|
|
@@ -999,13 +856,13 @@ var _ComboBox = forwardRef14(
|
|
|
999
856
|
};
|
|
1000
857
|
const classNames2 = useClassNames11({ component: "ComboBox", variant, size });
|
|
1001
858
|
return /* @__PURE__ */ jsxs12(FieldBase, { as: ComboBox2, ref, ...props, children: [
|
|
1002
|
-
/* @__PURE__ */
|
|
859
|
+
/* @__PURE__ */ jsx27(
|
|
1003
860
|
_Input,
|
|
1004
861
|
{
|
|
1005
|
-
action: /* @__PURE__ */
|
|
862
|
+
action: /* @__PURE__ */ jsx27(_Button, { className: classNames2, children: /* @__PURE__ */ jsx27(ChevronDown, { className: "size-4" }) })
|
|
1006
863
|
}
|
|
1007
864
|
),
|
|
1008
|
-
/* @__PURE__ */
|
|
865
|
+
/* @__PURE__ */ jsx27(_Popover, { children: /* @__PURE__ */ jsx27(_ListBox, { children }) })
|
|
1009
866
|
] });
|
|
1010
867
|
}
|
|
1011
868
|
);
|
|
@@ -1014,49 +871,29 @@ _ComboBox.Section = _ListBox.Section;
|
|
|
1014
871
|
|
|
1015
872
|
// src/Badge/Badge.tsx
|
|
1016
873
|
import { useClassNames as useClassNames12 } from "@marigold/system";
|
|
1017
|
-
import { jsx as
|
|
874
|
+
import { jsx as jsx28 } from "react/jsx-runtime";
|
|
1018
875
|
var Badge = ({ variant, size, children, ...props }) => {
|
|
1019
876
|
const classNames2 = useClassNames12({ component: "Badge", variant, size });
|
|
1020
|
-
return /* @__PURE__ */
|
|
877
|
+
return /* @__PURE__ */ jsx28("div", { className: classNames2, ...props, children });
|
|
1021
878
|
};
|
|
1022
879
|
|
|
1023
880
|
// src/Breakout/Breakout.tsx
|
|
1024
|
-
import {
|
|
1025
|
-
|
|
1026
|
-
|
|
1027
|
-
height,
|
|
1028
|
-
children,
|
|
1029
|
-
alignX = "left",
|
|
1030
|
-
alignY = "center"
|
|
1031
|
-
}) => {
|
|
1032
|
-
var _a, _b, _c, _d;
|
|
1033
|
-
return /* @__PURE__ */ jsx28(
|
|
1034
|
-
"div",
|
|
1035
|
-
{
|
|
1036
|
-
className: cn15(
|
|
1037
|
-
"col-start-[1_!important] col-end-[-1_!important] w-full",
|
|
1038
|
-
alignX && ((_b = (_a = alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
|
|
1039
|
-
alignY && ((_d = (_c = alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY]),
|
|
1040
|
-
alignX || alignY ? "flex" : "block",
|
|
1041
|
-
"h-[--height]"
|
|
1042
|
-
),
|
|
1043
|
-
style: createVar4({ height }),
|
|
1044
|
-
children
|
|
1045
|
-
}
|
|
1046
|
-
);
|
|
881
|
+
import { jsx as jsx29 } from "react/jsx-runtime";
|
|
882
|
+
var Breakout = ({ children }) => {
|
|
883
|
+
return /* @__PURE__ */ jsx29("div", { className: "![grid-column:1/-1]", children });
|
|
1047
884
|
};
|
|
1048
885
|
|
|
1049
886
|
// src/Body/Body.tsx
|
|
1050
887
|
import { useClassNames as useClassNames13 } from "@marigold/system";
|
|
1051
|
-
import { jsx as
|
|
888
|
+
import { jsx as jsx30 } from "react/jsx-runtime";
|
|
1052
889
|
var Body = ({ children, variant, size, ...props }) => {
|
|
1053
890
|
const classNames2 = useClassNames13({ component: "Body", variant, size });
|
|
1054
|
-
return /* @__PURE__ */
|
|
891
|
+
return /* @__PURE__ */ jsx30("section", { ...props, className: classNames2, children });
|
|
1055
892
|
};
|
|
1056
893
|
|
|
1057
894
|
// src/Card/Card.tsx
|
|
1058
895
|
import {
|
|
1059
|
-
cn as
|
|
896
|
+
cn as cn15,
|
|
1060
897
|
gapSpace as gapSpace2,
|
|
1061
898
|
paddingBottom,
|
|
1062
899
|
paddingLeft,
|
|
@@ -1067,7 +904,7 @@ import {
|
|
|
1067
904
|
paddingTop,
|
|
1068
905
|
useClassNames as useClassNames14
|
|
1069
906
|
} from "@marigold/system";
|
|
1070
|
-
import { jsx as
|
|
907
|
+
import { jsx as jsx31 } from "react/jsx-runtime";
|
|
1071
908
|
var Card = ({
|
|
1072
909
|
children,
|
|
1073
910
|
variant,
|
|
@@ -1083,11 +920,11 @@ var Card = ({
|
|
|
1083
920
|
...props
|
|
1084
921
|
}) => {
|
|
1085
922
|
const classNames2 = useClassNames14({ component: "Card", variant, size });
|
|
1086
|
-
return /* @__PURE__ */
|
|
923
|
+
return /* @__PURE__ */ jsx31(
|
|
1087
924
|
"div",
|
|
1088
925
|
{
|
|
1089
926
|
...props,
|
|
1090
|
-
className:
|
|
927
|
+
className: cn15(
|
|
1091
928
|
"flex flex-col",
|
|
1092
929
|
classNames2,
|
|
1093
930
|
gapSpace2[space],
|
|
@@ -1105,56 +942,56 @@ var Card = ({
|
|
|
1105
942
|
};
|
|
1106
943
|
|
|
1107
944
|
// src/Center/Center.tsx
|
|
1108
|
-
import { cn as
|
|
1109
|
-
import { jsx as
|
|
945
|
+
import { cn as cn16, createVar as createVar4, gapSpace as gapSpace3 } from "@marigold/system";
|
|
946
|
+
import { jsx as jsx32 } from "react/jsx-runtime";
|
|
1110
947
|
var Center = ({
|
|
1111
948
|
maxWidth = "100%",
|
|
1112
949
|
space = 0,
|
|
1113
950
|
children,
|
|
1114
951
|
...props
|
|
1115
952
|
}) => {
|
|
1116
|
-
return /* @__PURE__ */
|
|
953
|
+
return /* @__PURE__ */ jsx32(
|
|
1117
954
|
"div",
|
|
1118
955
|
{
|
|
1119
956
|
...props,
|
|
1120
|
-
className:
|
|
1121
|
-
"
|
|
957
|
+
className: cn16(
|
|
958
|
+
"ms-[auto] me-[auto] box-content flex flex-col items-center justify-center",
|
|
1122
959
|
gapSpace3[space],
|
|
1123
|
-
"max-w-
|
|
960
|
+
"max-w-(--maxWidth)"
|
|
1124
961
|
),
|
|
1125
|
-
style:
|
|
962
|
+
style: createVar4({ maxWidth }),
|
|
1126
963
|
children
|
|
1127
964
|
}
|
|
1128
965
|
);
|
|
1129
966
|
};
|
|
1130
967
|
|
|
1131
968
|
// src/Checkbox/Checkbox.tsx
|
|
1132
|
-
import { forwardRef as
|
|
969
|
+
import { forwardRef as forwardRef14 } from "react";
|
|
1133
970
|
import { Checkbox } from "react-aria-components";
|
|
1134
|
-
import { cn as
|
|
971
|
+
import { cn as cn18, useClassNames as useClassNames17 } from "@marigold/system";
|
|
1135
972
|
|
|
1136
973
|
// src/Checkbox/CheckBoxField.tsx
|
|
1137
|
-
import { createVar as
|
|
1138
|
-
import { jsx as
|
|
974
|
+
import { createVar as createVar5, useClassNames as useClassNames15 } from "@marigold/system";
|
|
975
|
+
import { jsx as jsx33, jsxs as jsxs13 } from "react/jsx-runtime";
|
|
1139
976
|
var CheckboxField = ({ children, labelWidth }) => {
|
|
1140
977
|
const classNames2 = useClassNames15({ component: "Field" });
|
|
1141
978
|
return /* @__PURE__ */ jsxs13("div", { className: classNames2, children: [
|
|
1142
|
-
/* @__PURE__ */
|
|
979
|
+
/* @__PURE__ */ jsx33("div", { className: "w-(--labelWidth)", style: createVar5({ labelWidth }) }),
|
|
1143
980
|
children
|
|
1144
981
|
] });
|
|
1145
982
|
};
|
|
1146
983
|
|
|
1147
984
|
// src/Checkbox/CheckboxGroup.tsx
|
|
1148
985
|
import { CheckboxGroup } from "react-aria-components";
|
|
1149
|
-
import { cn as
|
|
986
|
+
import { cn as cn17, useClassNames as useClassNames16 } from "@marigold/system";
|
|
1150
987
|
|
|
1151
988
|
// src/Checkbox/Context.tsx
|
|
1152
|
-
import { createContext as
|
|
1153
|
-
var CheckboxGroupContext =
|
|
1154
|
-
var useCheckboxGroupContext = () =>
|
|
989
|
+
import { createContext as createContext5, useContext as useContext6 } from "react";
|
|
990
|
+
var CheckboxGroupContext = createContext5(null);
|
|
991
|
+
var useCheckboxGroupContext = () => useContext6(CheckboxGroupContext);
|
|
1155
992
|
|
|
1156
993
|
// src/Checkbox/CheckboxGroup.tsx
|
|
1157
|
-
import { jsx as
|
|
994
|
+
import { jsx as jsx34 } from "react/jsx-runtime";
|
|
1158
995
|
var _CheckboxGroup = ({
|
|
1159
996
|
children,
|
|
1160
997
|
variant,
|
|
@@ -1181,24 +1018,24 @@ var _CheckboxGroup = ({
|
|
|
1181
1018
|
isInvalid: error,
|
|
1182
1019
|
...rest
|
|
1183
1020
|
};
|
|
1184
|
-
return /* @__PURE__ */
|
|
1021
|
+
return /* @__PURE__ */ jsx34(FieldBase, { as: CheckboxGroup, width, ...props, children: /* @__PURE__ */ jsx34(
|
|
1185
1022
|
"div",
|
|
1186
1023
|
{
|
|
1187
1024
|
role: "presentation",
|
|
1188
1025
|
"data-orientation": orientation,
|
|
1189
|
-
className:
|
|
1026
|
+
className: cn17(
|
|
1190
1027
|
classNames2.group,
|
|
1191
1028
|
"flex items-start",
|
|
1192
1029
|
orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
|
|
1193
1030
|
),
|
|
1194
|
-
children: /* @__PURE__ */
|
|
1031
|
+
children: /* @__PURE__ */ jsx34(CheckboxGroupContext.Provider, { value: { width, variant, size }, children })
|
|
1195
1032
|
}
|
|
1196
1033
|
) });
|
|
1197
1034
|
};
|
|
1198
1035
|
|
|
1199
1036
|
// src/Checkbox/Checkbox.tsx
|
|
1200
|
-
import { Fragment as Fragment3, jsx as
|
|
1201
|
-
var CheckMark = () => /* @__PURE__ */
|
|
1037
|
+
import { Fragment as Fragment3, jsx as jsx35, jsxs as jsxs14 } from "react/jsx-runtime";
|
|
1038
|
+
var CheckMark = () => /* @__PURE__ */ jsx35("svg", { width: "12px", height: "10px", viewBox: "0 0 12 10", children: /* @__PURE__ */ jsx35(
|
|
1202
1039
|
"path",
|
|
1203
1040
|
{
|
|
1204
1041
|
fill: "currentColor",
|
|
@@ -1206,7 +1043,7 @@ var CheckMark = () => /* @__PURE__ */ jsx34("svg", { width: "12px", height: "10p
|
|
|
1206
1043
|
d: "M11.915 1.548 10.367 0 4.045 6.315 1.557 3.827 0 5.373l4.045 4.046 7.87-7.871Z"
|
|
1207
1044
|
}
|
|
1208
1045
|
) });
|
|
1209
|
-
var IndeterminateMark = () => /* @__PURE__ */
|
|
1046
|
+
var IndeterminateMark = () => /* @__PURE__ */ jsx35("svg", { width: "12px", height: "3px", viewBox: "0 0 12 3", children: /* @__PURE__ */ jsx35(
|
|
1210
1047
|
"path",
|
|
1211
1048
|
{
|
|
1212
1049
|
fill: "currentColor",
|
|
@@ -1215,11 +1052,11 @@ var IndeterminateMark = () => /* @__PURE__ */ jsx34("svg", { width: "12px", heig
|
|
|
1215
1052
|
}
|
|
1216
1053
|
) });
|
|
1217
1054
|
var Icon2 = ({ className, checked, indeterminate, ...props }) => {
|
|
1218
|
-
return /* @__PURE__ */
|
|
1055
|
+
return /* @__PURE__ */ jsx35(
|
|
1219
1056
|
"div",
|
|
1220
1057
|
{
|
|
1221
1058
|
"aria-hidden": "true",
|
|
1222
|
-
className:
|
|
1059
|
+
className: cn18(
|
|
1223
1060
|
"flex shrink-0 grow-0 basis-4 items-center justify-center",
|
|
1224
1061
|
"h-4 w-4 p-px",
|
|
1225
1062
|
"bg-white",
|
|
@@ -1227,11 +1064,11 @@ var Icon2 = ({ className, checked, indeterminate, ...props }) => {
|
|
|
1227
1064
|
className
|
|
1228
1065
|
),
|
|
1229
1066
|
...props,
|
|
1230
|
-
children: indeterminate ? /* @__PURE__ */
|
|
1067
|
+
children: indeterminate ? /* @__PURE__ */ jsx35(IndeterminateMark, {}) : checked ? /* @__PURE__ */ jsx35(CheckMark, {}) : null
|
|
1231
1068
|
}
|
|
1232
1069
|
);
|
|
1233
1070
|
};
|
|
1234
|
-
var _Checkbox =
|
|
1071
|
+
var _Checkbox = forwardRef14(
|
|
1235
1072
|
({
|
|
1236
1073
|
error,
|
|
1237
1074
|
disabled,
|
|
@@ -1262,18 +1099,18 @@ var _Checkbox = forwardRef15(
|
|
|
1262
1099
|
variant: variant || (group == null ? void 0 : group.variant),
|
|
1263
1100
|
size: size || (group == null ? void 0 : group.size)
|
|
1264
1101
|
});
|
|
1265
|
-
const component = /* @__PURE__ */
|
|
1102
|
+
const component = /* @__PURE__ */ jsx35(
|
|
1266
1103
|
Checkbox,
|
|
1267
1104
|
{
|
|
1268
1105
|
ref,
|
|
1269
|
-
className:
|
|
1106
|
+
className: cn18(
|
|
1270
1107
|
"group/checkbox flex items-center gap-[0.5rem]",
|
|
1271
|
-
"cursor-pointer data-
|
|
1108
|
+
"cursor-pointer data-disabled:cursor-not-allowed",
|
|
1272
1109
|
classNames2.container
|
|
1273
1110
|
),
|
|
1274
1111
|
...props,
|
|
1275
1112
|
children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs14(Fragment3, { children: [
|
|
1276
|
-
/* @__PURE__ */
|
|
1113
|
+
/* @__PURE__ */ jsx35(
|
|
1277
1114
|
Icon2,
|
|
1278
1115
|
{
|
|
1279
1116
|
checked: isSelected,
|
|
@@ -1281,19 +1118,19 @@ var _Checkbox = forwardRef15(
|
|
|
1281
1118
|
className: classNames2.checkbox
|
|
1282
1119
|
}
|
|
1283
1120
|
),
|
|
1284
|
-
children ? /* @__PURE__ */
|
|
1121
|
+
children ? /* @__PURE__ */ jsx35("div", { className: classNames2.label, children }) : null
|
|
1285
1122
|
] })
|
|
1286
1123
|
}
|
|
1287
1124
|
);
|
|
1288
|
-
return !group && !!labelWidth ? /* @__PURE__ */
|
|
1125
|
+
return !group && !!labelWidth ? /* @__PURE__ */ jsx35(CheckboxField, { labelWidth, children: component }) : component;
|
|
1289
1126
|
}
|
|
1290
1127
|
);
|
|
1291
1128
|
_Checkbox.Group = _CheckboxGroup;
|
|
1292
1129
|
|
|
1293
1130
|
// src/Columns/Columns.tsx
|
|
1294
|
-
import { Children as
|
|
1295
|
-
import { cn as
|
|
1296
|
-
import { jsx as
|
|
1131
|
+
import { Children as Children2 } from "react";
|
|
1132
|
+
import { cn as cn19, createVar as createVar6, gapSpace as gapSpace4 } from "@marigold/system";
|
|
1133
|
+
import { jsx as jsx36 } from "react/jsx-runtime";
|
|
1297
1134
|
var Columns = ({
|
|
1298
1135
|
space = 0,
|
|
1299
1136
|
columns,
|
|
@@ -1302,30 +1139,30 @@ var Columns = ({
|
|
|
1302
1139
|
children,
|
|
1303
1140
|
...props
|
|
1304
1141
|
}) => {
|
|
1305
|
-
if (
|
|
1142
|
+
if (Children2.count(children) !== columns.length) {
|
|
1306
1143
|
throw new Error(
|
|
1307
|
-
`Columns: expected ${columns.length} children, got ${
|
|
1144
|
+
`Columns: expected ${columns.length} children, got ${Children2.count(
|
|
1308
1145
|
children
|
|
1309
1146
|
)}`
|
|
1310
1147
|
);
|
|
1311
1148
|
}
|
|
1312
|
-
return /* @__PURE__ */
|
|
1149
|
+
return /* @__PURE__ */ jsx36(
|
|
1313
1150
|
"div",
|
|
1314
1151
|
{
|
|
1315
|
-
className:
|
|
1152
|
+
className: cn19(
|
|
1316
1153
|
"flex flex-wrap items-stretch",
|
|
1317
1154
|
stretch && "h-full",
|
|
1318
1155
|
gapSpace4[space]
|
|
1319
1156
|
),
|
|
1320
1157
|
...props,
|
|
1321
|
-
children:
|
|
1158
|
+
children: Children2.map(children, (child, idx) => /* @__PURE__ */ jsx36(
|
|
1322
1159
|
"div",
|
|
1323
1160
|
{
|
|
1324
|
-
className:
|
|
1325
|
-
columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-
|
|
1161
|
+
className: cn19(
|
|
1162
|
+
columns[idx] === "fit" ? "flex h-fit w-fit" : "flex-(--columnSize)",
|
|
1326
1163
|
"basis-[calc((var(--collapseAt)_-_100%)_*_999)]"
|
|
1327
1164
|
),
|
|
1328
|
-
style:
|
|
1165
|
+
style: createVar6({
|
|
1329
1166
|
collapseAt,
|
|
1330
1167
|
columnSize: columns[idx]
|
|
1331
1168
|
}),
|
|
@@ -1337,101 +1174,99 @@ var Columns = ({
|
|
|
1337
1174
|
};
|
|
1338
1175
|
|
|
1339
1176
|
// src/Container/Container.tsx
|
|
1340
|
-
import {
|
|
1341
|
-
|
|
1342
|
-
|
|
1343
|
-
|
|
1344
|
-
|
|
1345
|
-
|
|
1346
|
-
}
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
|
|
1350
|
-
|
|
1351
|
-
large: "60ch"
|
|
1177
|
+
import { cn as cn20, createVar as createVar7, gapSpace as gapSpace5, placeItems } from "@marigold/system";
|
|
1178
|
+
import { jsx as jsx37 } from "react/jsx-runtime";
|
|
1179
|
+
var containerTextLength = {
|
|
1180
|
+
short: "40ch",
|
|
1181
|
+
default: "60ch",
|
|
1182
|
+
long: "80ch"
|
|
1183
|
+
};
|
|
1184
|
+
var containerHeadlineLength = {
|
|
1185
|
+
short: "20ch",
|
|
1186
|
+
default: "25ch",
|
|
1187
|
+
long: "35ch"
|
|
1352
1188
|
};
|
|
1353
|
-
var
|
|
1354
|
-
|
|
1355
|
-
|
|
1356
|
-
|
|
1189
|
+
var gridColsAlign = {
|
|
1190
|
+
left: "grid-cols-[minmax(0,max-content)_1fr_1fr]",
|
|
1191
|
+
center: "grid-cols-[1fr_minmax(0,max-content)_1fr]",
|
|
1192
|
+
right: " grid-cols-[1fr_1fr_minmax(0,max-content)]"
|
|
1193
|
+
};
|
|
1194
|
+
var gridColumn = {
|
|
1195
|
+
left: "*:col-[1]",
|
|
1196
|
+
center: "*:col-[2]",
|
|
1197
|
+
right: "*:col-[3]"
|
|
1357
1198
|
};
|
|
1358
1199
|
var Container = ({
|
|
1359
|
-
|
|
1360
|
-
size = "medium",
|
|
1200
|
+
contentLength = "default",
|
|
1361
1201
|
align = "left",
|
|
1362
1202
|
alignItems = "none",
|
|
1203
|
+
space = 0,
|
|
1363
1204
|
children,
|
|
1364
1205
|
...props
|
|
1365
|
-
}) =>
|
|
1366
|
-
|
|
1367
|
-
|
|
1368
|
-
|
|
1369
|
-
|
|
1370
|
-
|
|
1371
|
-
|
|
1372
|
-
|
|
1373
|
-
|
|
1374
|
-
|
|
1375
|
-
|
|
1376
|
-
|
|
1377
|
-
|
|
1378
|
-
|
|
1379
|
-
}
|
|
1380
|
-
|
|
1381
|
-
}
|
|
1206
|
+
}) => /* @__PURE__ */ jsx37(
|
|
1207
|
+
"div",
|
|
1208
|
+
{
|
|
1209
|
+
...props,
|
|
1210
|
+
className: cn20(
|
|
1211
|
+
"grid",
|
|
1212
|
+
placeItems[alignItems],
|
|
1213
|
+
gridColsAlign[align],
|
|
1214
|
+
gridColumn[align],
|
|
1215
|
+
gapSpace5[space]
|
|
1216
|
+
),
|
|
1217
|
+
style: createVar7({
|
|
1218
|
+
maxTextWidth: containerTextLength[contentLength],
|
|
1219
|
+
maxHeadlineWidth: containerHeadlineLength[contentLength]
|
|
1220
|
+
}),
|
|
1221
|
+
children
|
|
1222
|
+
}
|
|
1223
|
+
);
|
|
1382
1224
|
|
|
1383
1225
|
// src/Dialog/Dialog.tsx
|
|
1384
|
-
import { useContext as
|
|
1226
|
+
import { useContext as useContext7 } from "react";
|
|
1385
1227
|
import { Dialog, OverlayTriggerStateContext } from "react-aria-components";
|
|
1386
|
-
import { cn as
|
|
1228
|
+
import { cn as cn25, useClassNames as useClassNames23 } from "@marigold/system";
|
|
1387
1229
|
|
|
1388
1230
|
// src/Dialog/DialogActions.tsx
|
|
1389
|
-
import { cn as
|
|
1390
|
-
import { jsx as
|
|
1231
|
+
import { cn as cn21, useClassNames as useClassNames18 } from "@marigold/system";
|
|
1232
|
+
import { jsx as jsx38 } from "react/jsx-runtime";
|
|
1391
1233
|
var DialogActions = ({ variant, size, children }) => {
|
|
1392
1234
|
const classNames2 = useClassNames18({ component: "Dialog", variant, size });
|
|
1393
|
-
return /* @__PURE__ */
|
|
1235
|
+
return /* @__PURE__ */ jsx38("div", { className: cn21("[grid-area:actions]", classNames2.actions), children });
|
|
1394
1236
|
};
|
|
1395
1237
|
|
|
1396
1238
|
// src/Dialog/DialogContent.tsx
|
|
1397
|
-
import { cn as
|
|
1398
|
-
import { jsx as
|
|
1239
|
+
import { cn as cn22, useClassNames as useClassNames19 } from "@marigold/system";
|
|
1240
|
+
import { jsx as jsx39 } from "react/jsx-runtime";
|
|
1399
1241
|
var DialogContent = ({
|
|
1400
1242
|
variant,
|
|
1401
1243
|
size,
|
|
1402
1244
|
children
|
|
1403
1245
|
}) => {
|
|
1404
1246
|
const classNames2 = useClassNames19({ component: "Dialog", variant, size });
|
|
1405
|
-
return /* @__PURE__ */
|
|
1247
|
+
return /* @__PURE__ */ jsx39("div", { className: cn22("[grid-area:content]", classNames2.content), children });
|
|
1406
1248
|
};
|
|
1407
1249
|
|
|
1408
1250
|
// src/Dialog/DialogTitle.tsx
|
|
1409
|
-
import { cn as
|
|
1251
|
+
import { cn as cn24, useClassNames as useClassNames22 } from "@marigold/system";
|
|
1410
1252
|
|
|
1411
1253
|
// src/Header/Header.tsx
|
|
1412
1254
|
import { Header as Header2 } from "react-aria-components";
|
|
1413
1255
|
import { useClassNames as useClassNames20 } from "@marigold/system";
|
|
1414
|
-
import { jsx as
|
|
1256
|
+
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
1415
1257
|
var _Header = ({ variant, size, ...props }) => {
|
|
1416
1258
|
const classNames2 = useClassNames20({
|
|
1417
1259
|
component: "Header",
|
|
1418
1260
|
variant,
|
|
1419
1261
|
size
|
|
1420
1262
|
});
|
|
1421
|
-
return /* @__PURE__ */
|
|
1263
|
+
return /* @__PURE__ */ jsx40(Header2, { className: classNames2, ...props, children: props.children });
|
|
1422
1264
|
};
|
|
1423
1265
|
|
|
1424
1266
|
// src/Headline/Headline.tsx
|
|
1425
|
-
import { Heading } from "react-aria-components";
|
|
1426
|
-
import {
|
|
1427
|
-
|
|
1428
|
-
createVar as createVar9,
|
|
1429
|
-
getColor,
|
|
1430
|
-
textAlign,
|
|
1431
|
-
useClassNames as useClassNames21,
|
|
1432
|
-
useTheme as useTheme2
|
|
1433
|
-
} from "@marigold/system";
|
|
1434
|
-
import { jsx as jsx40 } from "react/jsx-runtime";
|
|
1267
|
+
import { Heading as Heading2 } from "react-aria-components";
|
|
1268
|
+
import { cn as cn23, textAlign, useClassNames as useClassNames21 } from "@marigold/system";
|
|
1269
|
+
import { jsx as jsx41 } from "react/jsx-runtime";
|
|
1435
1270
|
var _Headline = ({
|
|
1436
1271
|
variant,
|
|
1437
1272
|
size,
|
|
@@ -1441,33 +1276,30 @@ var _Headline = ({
|
|
|
1441
1276
|
level = "1",
|
|
1442
1277
|
...props
|
|
1443
1278
|
}) => {
|
|
1444
|
-
const theme = useTheme2();
|
|
1445
1279
|
const classNames2 = useClassNames21({
|
|
1446
1280
|
component: "Headline",
|
|
1447
1281
|
variant,
|
|
1448
1282
|
size: size != null ? size : `level-${level}`
|
|
1449
1283
|
});
|
|
1450
|
-
return /* @__PURE__ */
|
|
1451
|
-
|
|
1284
|
+
return /* @__PURE__ */ jsx41(
|
|
1285
|
+
Heading2,
|
|
1452
1286
|
{
|
|
1453
1287
|
level: Number(level),
|
|
1454
1288
|
...props,
|
|
1455
|
-
className:
|
|
1456
|
-
|
|
1457
|
-
|
|
1458
|
-
|
|
1459
|
-
|
|
1460
|
-
|
|
1461
|
-
|
|
1462
|
-
)
|
|
1463
|
-
}),
|
|
1289
|
+
className: cn23(
|
|
1290
|
+
classNames2,
|
|
1291
|
+
"max-w-(--maxHeadlineWidth)",
|
|
1292
|
+
// possibly set by a <Container>
|
|
1293
|
+
textAlign[align]
|
|
1294
|
+
),
|
|
1295
|
+
style: { color: color && `var(--color-${color})` },
|
|
1464
1296
|
children
|
|
1465
1297
|
}
|
|
1466
1298
|
);
|
|
1467
1299
|
};
|
|
1468
1300
|
|
|
1469
1301
|
// src/Dialog/DialogTitle.tsx
|
|
1470
|
-
import { jsx as
|
|
1302
|
+
import { jsx as jsx42 } from "react/jsx-runtime";
|
|
1471
1303
|
var DialogTitle = ({
|
|
1472
1304
|
level = "2",
|
|
1473
1305
|
variant,
|
|
@@ -1475,32 +1307,32 @@ var DialogTitle = ({
|
|
|
1475
1307
|
children
|
|
1476
1308
|
}) => {
|
|
1477
1309
|
const classNames2 = useClassNames22({ component: "Dialog", variant, size });
|
|
1478
|
-
return /* @__PURE__ */
|
|
1310
|
+
return /* @__PURE__ */ jsx42(_Header, { className: cn24("[grid-area:title]", classNames2.header), children: /* @__PURE__ */ jsx42(_Headline, { slot: "title", level, children }) });
|
|
1479
1311
|
};
|
|
1480
1312
|
|
|
1481
1313
|
// src/Dialog/DialogTrigger.tsx
|
|
1482
|
-
import { Children as
|
|
1314
|
+
import { Children as Children3 } from "react";
|
|
1483
1315
|
import { DialogTrigger } from "react-aria-components";
|
|
1484
1316
|
|
|
1485
1317
|
// src/Overlay/Modal.tsx
|
|
1486
|
-
import { forwardRef as
|
|
1318
|
+
import { forwardRef as forwardRef15 } from "react";
|
|
1487
1319
|
import { Modal } from "react-aria-components";
|
|
1488
|
-
import { jsx as
|
|
1489
|
-
var _Modal =
|
|
1320
|
+
import { jsx as jsx43 } from "react/jsx-runtime";
|
|
1321
|
+
var _Modal = forwardRef15(({ open, dismissable, keyboardDismissable, ...rest }, ref) => {
|
|
1490
1322
|
const props = {
|
|
1491
1323
|
isOpen: open,
|
|
1492
1324
|
isDismissable: dismissable,
|
|
1493
1325
|
isKeyboardDismissDisabled: keyboardDismissable,
|
|
1494
1326
|
...rest
|
|
1495
1327
|
};
|
|
1496
|
-
return /* @__PURE__ */
|
|
1328
|
+
return /* @__PURE__ */ jsx43(
|
|
1497
1329
|
Underlay,
|
|
1498
1330
|
{
|
|
1499
1331
|
dismissable,
|
|
1500
1332
|
keyboardDismissable,
|
|
1501
1333
|
open,
|
|
1502
1334
|
variant: "modal",
|
|
1503
|
-
children: /* @__PURE__ */
|
|
1335
|
+
children: /* @__PURE__ */ jsx43(
|
|
1504
1336
|
Modal,
|
|
1505
1337
|
{
|
|
1506
1338
|
ref,
|
|
@@ -1514,7 +1346,7 @@ var _Modal = forwardRef16(({ open, dismissable, keyboardDismissable, ...rest },
|
|
|
1514
1346
|
});
|
|
1515
1347
|
|
|
1516
1348
|
// src/Dialog/DialogTrigger.tsx
|
|
1517
|
-
import { jsx as
|
|
1349
|
+
import { jsx as jsx44, jsxs as jsxs15 } from "react/jsx-runtime";
|
|
1518
1350
|
var _DialogTrigger = ({
|
|
1519
1351
|
open,
|
|
1520
1352
|
dismissable,
|
|
@@ -1526,15 +1358,15 @@ var _DialogTrigger = ({
|
|
|
1526
1358
|
isOpen: open,
|
|
1527
1359
|
...rest
|
|
1528
1360
|
};
|
|
1529
|
-
const children =
|
|
1361
|
+
const children = Children3.toArray(props.children);
|
|
1530
1362
|
const [dialogTrigger, dialog] = children;
|
|
1531
1363
|
const hasDialogTrigger = dialogTrigger.type !== _Dialog;
|
|
1532
1364
|
const currentDialog = children.length < 2 ? !hasDialogTrigger && dialogTrigger : dialog;
|
|
1533
1365
|
if (isNonModal)
|
|
1534
|
-
return /* @__PURE__ */
|
|
1366
|
+
return /* @__PURE__ */ jsx44(DialogTrigger, { ...props, children: props.children });
|
|
1535
1367
|
return /* @__PURE__ */ jsxs15(DialogTrigger, { ...props, children: [
|
|
1536
1368
|
hasDialogTrigger && dialogTrigger,
|
|
1537
|
-
/* @__PURE__ */
|
|
1369
|
+
/* @__PURE__ */ jsx44(
|
|
1538
1370
|
_Modal,
|
|
1539
1371
|
{
|
|
1540
1372
|
dismissable,
|
|
@@ -1546,19 +1378,19 @@ var _DialogTrigger = ({
|
|
|
1546
1378
|
};
|
|
1547
1379
|
|
|
1548
1380
|
// src/Dialog/Dialog.tsx
|
|
1549
|
-
import { jsx as
|
|
1381
|
+
import { jsx as jsx45, jsxs as jsxs16 } from "react/jsx-runtime";
|
|
1550
1382
|
var CloseButton = ({ className }) => {
|
|
1551
|
-
const ctx =
|
|
1552
|
-
return /* @__PURE__ */
|
|
1383
|
+
const ctx = useContext7(OverlayTriggerStateContext);
|
|
1384
|
+
return /* @__PURE__ */ jsx45("div", { className: "absolute top-4 right-4 ml-4", children: /* @__PURE__ */ jsx45(
|
|
1553
1385
|
"button",
|
|
1554
1386
|
{
|
|
1555
|
-
className:
|
|
1387
|
+
className: cn25(
|
|
1556
1388
|
"h-4 w-4 cursor-pointer border-none p-0 leading-normal outline-0",
|
|
1557
1389
|
className
|
|
1558
1390
|
),
|
|
1559
1391
|
onClick: ctx == null ? void 0 : ctx.close,
|
|
1560
1392
|
slot: "dismiss-button",
|
|
1561
|
-
children: /* @__PURE__ */
|
|
1393
|
+
children: /* @__PURE__ */ jsx45("svg", { viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx45(
|
|
1562
1394
|
"path",
|
|
1563
1395
|
{
|
|
1564
1396
|
fillRule: "evenodd",
|
|
@@ -1578,7 +1410,7 @@ var _Dialog = ({
|
|
|
1578
1410
|
}) => {
|
|
1579
1411
|
var _a;
|
|
1580
1412
|
const classNames2 = useClassNames23({ component: "Dialog", variant, size });
|
|
1581
|
-
const state =
|
|
1413
|
+
const state = useContext7(OverlayTriggerStateContext);
|
|
1582
1414
|
const children = typeof props.children === "function" ? props.children({
|
|
1583
1415
|
close: (_a = state == null ? void 0 : state.close) != null ? _a : () => {
|
|
1584
1416
|
}
|
|
@@ -1587,13 +1419,13 @@ var _Dialog = ({
|
|
|
1587
1419
|
Dialog,
|
|
1588
1420
|
{
|
|
1589
1421
|
...props,
|
|
1590
|
-
className:
|
|
1591
|
-
"relative outline-
|
|
1422
|
+
className: cn25(
|
|
1423
|
+
"relative outline-hidden [&>*:not(:last-child)]:mb-4",
|
|
1592
1424
|
"grid [grid-template-areas:'title'_'content'_'actions']",
|
|
1593
1425
|
classNames2.container
|
|
1594
1426
|
),
|
|
1595
1427
|
children: [
|
|
1596
|
-
closeButton && /* @__PURE__ */
|
|
1428
|
+
closeButton && /* @__PURE__ */ jsx45(CloseButton, { className: classNames2.closeButton }),
|
|
1597
1429
|
children
|
|
1598
1430
|
]
|
|
1599
1431
|
}
|
|
@@ -1606,33 +1438,33 @@ _Dialog.Actions = DialogActions;
|
|
|
1606
1438
|
|
|
1607
1439
|
// src/Divider/Divider.tsx
|
|
1608
1440
|
import { Separator } from "react-aria-components";
|
|
1609
|
-
import { cn as
|
|
1610
|
-
import { jsx as
|
|
1441
|
+
import { cn as cn26, useClassNames as useClassNames24 } from "@marigold/system";
|
|
1442
|
+
import { jsx as jsx46 } from "react/jsx-runtime";
|
|
1611
1443
|
var _Divider = ({ variant, ...props }) => {
|
|
1612
1444
|
const classNames2 = useClassNames24({ component: "Divider", variant });
|
|
1613
|
-
return /* @__PURE__ */
|
|
1445
|
+
return /* @__PURE__ */ jsx46(Separator, { className: cn26("border-none", classNames2), ...props });
|
|
1614
1446
|
};
|
|
1615
1447
|
|
|
1616
1448
|
// src/Footer/Footer.tsx
|
|
1617
1449
|
import { useClassNames as useClassNames25 } from "@marigold/system";
|
|
1618
|
-
import { jsx as
|
|
1450
|
+
import { jsx as jsx47 } from "react/jsx-runtime";
|
|
1619
1451
|
var Footer = ({ children, variant, size, ...props }) => {
|
|
1620
1452
|
const classNames2 = useClassNames25({ component: "Footer", variant, size });
|
|
1621
|
-
return /* @__PURE__ */
|
|
1453
|
+
return /* @__PURE__ */ jsx47("footer", { ...props, className: classNames2, children });
|
|
1622
1454
|
};
|
|
1623
1455
|
|
|
1624
1456
|
// src/Form/Form.tsx
|
|
1625
1457
|
import { Form } from "react-aria-components";
|
|
1626
1458
|
|
|
1627
1459
|
// src/Grid/Grid.tsx
|
|
1628
|
-
import { cn as
|
|
1460
|
+
import { cn as cn27, gapSpace as gapSpace6, height as twHeight } from "@marigold/system";
|
|
1629
1461
|
|
|
1630
1462
|
// src/Grid/GridArea.tsx
|
|
1631
|
-
import { jsx as
|
|
1632
|
-
var GridArea = ({ name, children }) => /* @__PURE__ */
|
|
1463
|
+
import { jsx as jsx48 } from "react/jsx-runtime";
|
|
1464
|
+
var GridArea = ({ name, children }) => /* @__PURE__ */ jsx48("div", { style: { gridArea: name }, children });
|
|
1633
1465
|
|
|
1634
1466
|
// src/Grid/Grid.tsx
|
|
1635
|
-
import { jsx as
|
|
1467
|
+
import { jsx as jsx49 } from "react/jsx-runtime";
|
|
1636
1468
|
var parseGridAreas = (areas) => areas.map((area) => `"${area}"`).join("\n");
|
|
1637
1469
|
var parseTemplateValue = (values) => values.map((val) => typeof val === "number" ? `${val}fr` : val).join(" ");
|
|
1638
1470
|
var Grid = ({
|
|
@@ -1644,10 +1476,10 @@ var Grid = ({
|
|
|
1644
1476
|
space = 0,
|
|
1645
1477
|
...props
|
|
1646
1478
|
}) => {
|
|
1647
|
-
return /* @__PURE__ */
|
|
1479
|
+
return /* @__PURE__ */ jsx49(
|
|
1648
1480
|
"div",
|
|
1649
1481
|
{
|
|
1650
|
-
className:
|
|
1482
|
+
className: cn27("grid", gapSpace6[space], twHeight[height]),
|
|
1651
1483
|
style: {
|
|
1652
1484
|
gridTemplateAreas: parseGridAreas(areas),
|
|
1653
1485
|
gridTemplateColumns: parseTemplateValue(columns),
|
|
@@ -1662,12 +1494,12 @@ Grid.Area = GridArea;
|
|
|
1662
1494
|
|
|
1663
1495
|
// src/Image/Image.tsx
|
|
1664
1496
|
import {
|
|
1665
|
-
cn as
|
|
1497
|
+
cn as cn28,
|
|
1666
1498
|
objectFit,
|
|
1667
1499
|
objectPosition,
|
|
1668
1500
|
useClassNames as useClassNames26
|
|
1669
1501
|
} from "@marigold/system";
|
|
1670
|
-
import { jsx as
|
|
1502
|
+
import { jsx as jsx50 } from "react/jsx-runtime";
|
|
1671
1503
|
var Image = ({
|
|
1672
1504
|
variant,
|
|
1673
1505
|
size,
|
|
@@ -1676,12 +1508,12 @@ var Image = ({
|
|
|
1676
1508
|
...props
|
|
1677
1509
|
}) => {
|
|
1678
1510
|
const classNames2 = useClassNames26({ component: "Image", variant, size });
|
|
1679
|
-
return /* @__PURE__ */
|
|
1511
|
+
return /* @__PURE__ */ jsx50(
|
|
1680
1512
|
"img",
|
|
1681
1513
|
{
|
|
1682
1514
|
...props,
|
|
1683
1515
|
alt: props.alt,
|
|
1684
|
-
className:
|
|
1516
|
+
className: cn28(
|
|
1685
1517
|
fit !== "none" && "h-full w-full",
|
|
1686
1518
|
classNames2,
|
|
1687
1519
|
objectFit[fit],
|
|
@@ -1692,8 +1524,8 @@ var Image = ({
|
|
|
1692
1524
|
};
|
|
1693
1525
|
|
|
1694
1526
|
// src/Inline/Inline.tsx
|
|
1695
|
-
import { alignment
|
|
1696
|
-
import { jsx as
|
|
1527
|
+
import { alignment, cn as cn29, gapSpace as gapSpace7 } from "@marigold/system";
|
|
1528
|
+
import { jsx as jsx51 } from "react/jsx-runtime";
|
|
1697
1529
|
var Inline = ({
|
|
1698
1530
|
space = 0,
|
|
1699
1531
|
alignX,
|
|
@@ -1702,15 +1534,15 @@ var Inline = ({
|
|
|
1702
1534
|
...props
|
|
1703
1535
|
}) => {
|
|
1704
1536
|
var _a, _b, _c, _d;
|
|
1705
|
-
return /* @__PURE__ */
|
|
1537
|
+
return /* @__PURE__ */ jsx51(
|
|
1706
1538
|
"div",
|
|
1707
1539
|
{
|
|
1708
1540
|
...props,
|
|
1709
|
-
className:
|
|
1541
|
+
className: cn29(
|
|
1710
1542
|
"flex flex-wrap",
|
|
1711
|
-
|
|
1712
|
-
alignX && ((_b = (_a =
|
|
1713
|
-
alignY && ((_d = (_c =
|
|
1543
|
+
gapSpace7[space],
|
|
1544
|
+
alignX && ((_b = (_a = alignment) == null ? void 0 : _a.horizontal) == null ? void 0 : _b.alignmentX[alignX]),
|
|
1545
|
+
alignY && ((_d = (_c = alignment) == null ? void 0 : _c.horizontal) == null ? void 0 : _d.alignmentY[alignY])
|
|
1714
1546
|
),
|
|
1715
1547
|
children
|
|
1716
1548
|
}
|
|
@@ -1718,7 +1550,7 @@ var Inline = ({
|
|
|
1718
1550
|
};
|
|
1719
1551
|
|
|
1720
1552
|
// src/DateField/DateField.tsx
|
|
1721
|
-
import { forwardRef as
|
|
1553
|
+
import { forwardRef as forwardRef16 } from "react";
|
|
1722
1554
|
import { DateField } from "react-aria-components";
|
|
1723
1555
|
|
|
1724
1556
|
// src/DateField/DateInput.tsx
|
|
@@ -1727,10 +1559,10 @@ import { useClassNames as useClassNames27 } from "@marigold/system";
|
|
|
1727
1559
|
|
|
1728
1560
|
// src/DateField/DateSegment.tsx
|
|
1729
1561
|
import { DateSegment } from "react-aria-components";
|
|
1730
|
-
import { cn as
|
|
1731
|
-
import { Fragment as Fragment4, jsx as
|
|
1562
|
+
import { cn as cn30 } from "@marigold/system";
|
|
1563
|
+
import { Fragment as Fragment4, jsx as jsx52, jsxs as jsxs17 } from "react/jsx-runtime";
|
|
1732
1564
|
var _DateSegment = ({ segment, ...props }) => {
|
|
1733
|
-
return /* @__PURE__ */
|
|
1565
|
+
return /* @__PURE__ */ jsx52(
|
|
1734
1566
|
DateSegment,
|
|
1735
1567
|
{
|
|
1736
1568
|
...props,
|
|
@@ -1739,30 +1571,30 @@ var _DateSegment = ({ segment, ...props }) => {
|
|
|
1739
1571
|
minWidth: segment.maxValue != null ? `${String(segment.maxValue).length}ch` : void 0
|
|
1740
1572
|
},
|
|
1741
1573
|
children: ({ text, placeholder, isPlaceholder }) => /* @__PURE__ */ jsxs17(Fragment4, { children: [
|
|
1742
|
-
/* @__PURE__ */
|
|
1574
|
+
/* @__PURE__ */ jsx52(
|
|
1743
1575
|
"span",
|
|
1744
1576
|
{
|
|
1745
1577
|
"aria-hidden": "true",
|
|
1746
|
-
className:
|
|
1578
|
+
className: cn30(
|
|
1747
1579
|
isPlaceholder ? "visible block" : "invisible hidden",
|
|
1748
1580
|
"pointer-events-none w-full text-center"
|
|
1749
1581
|
),
|
|
1750
1582
|
children: isPlaceholder && (placeholder == null ? void 0 : placeholder.toUpperCase())
|
|
1751
1583
|
}
|
|
1752
1584
|
),
|
|
1753
|
-
/* @__PURE__ */
|
|
1585
|
+
/* @__PURE__ */ jsx52("span", { children: isPlaceholder ? "" : segment.type === "month" || segment.type === "day" ? segment.text.padStart(2, "0") : text })
|
|
1754
1586
|
] })
|
|
1755
1587
|
}
|
|
1756
1588
|
);
|
|
1757
1589
|
};
|
|
1758
1590
|
|
|
1759
1591
|
// src/DateField/DateInput.tsx
|
|
1760
|
-
import { jsx as
|
|
1592
|
+
import { jsx as jsx53, jsxs as jsxs18 } from "react/jsx-runtime";
|
|
1761
1593
|
var _DateInput = ({ variant, size, action, ...props }) => {
|
|
1762
1594
|
const classNames2 = useClassNames27({ component: "DateField", variant, size });
|
|
1763
1595
|
return /* @__PURE__ */ jsxs18(Group, { className: classNames2.field, children: [
|
|
1764
|
-
/* @__PURE__ */
|
|
1765
|
-
action ? action : /* @__PURE__ */
|
|
1596
|
+
/* @__PURE__ */ jsx53(DateInput, { className: "flex flex-1 items-center", ...props, children: (segment) => /* @__PURE__ */ jsx53(_DateSegment, { className: classNames2.segment, segment }) }),
|
|
1597
|
+
action ? action : /* @__PURE__ */ jsx53("div", { className: "flex items-center justify-center", children: /* @__PURE__ */ jsx53(
|
|
1766
1598
|
"svg",
|
|
1767
1599
|
{
|
|
1768
1600
|
"data-testid": "action",
|
|
@@ -1770,15 +1602,15 @@ var _DateInput = ({ variant, size, action, ...props }) => {
|
|
|
1770
1602
|
viewBox: "0 0 24 24",
|
|
1771
1603
|
width: 24,
|
|
1772
1604
|
height: 24,
|
|
1773
|
-
children: /* @__PURE__ */
|
|
1605
|
+
children: /* @__PURE__ */ jsx53("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
|
|
1774
1606
|
}
|
|
1775
1607
|
) })
|
|
1776
1608
|
] });
|
|
1777
1609
|
};
|
|
1778
1610
|
|
|
1779
1611
|
// src/DateField/DateField.tsx
|
|
1780
|
-
import { jsx as
|
|
1781
|
-
var _DateField =
|
|
1612
|
+
import { jsx as jsx54 } from "react/jsx-runtime";
|
|
1613
|
+
var _DateField = forwardRef16(
|
|
1782
1614
|
({
|
|
1783
1615
|
variant,
|
|
1784
1616
|
size,
|
|
@@ -1796,7 +1628,7 @@ var _DateField = forwardRef17(
|
|
|
1796
1628
|
isRequired: required,
|
|
1797
1629
|
...rest
|
|
1798
1630
|
};
|
|
1799
|
-
return /* @__PURE__ */
|
|
1631
|
+
return /* @__PURE__ */ jsx54(
|
|
1800
1632
|
FieldBase,
|
|
1801
1633
|
{
|
|
1802
1634
|
as: DateField,
|
|
@@ -1804,7 +1636,7 @@ var _DateField = forwardRef17(
|
|
|
1804
1636
|
size,
|
|
1805
1637
|
ref,
|
|
1806
1638
|
...props,
|
|
1807
|
-
children: /* @__PURE__ */
|
|
1639
|
+
children: /* @__PURE__ */ jsx54(_DateInput, { action })
|
|
1808
1640
|
}
|
|
1809
1641
|
);
|
|
1810
1642
|
}
|
|
@@ -1813,7 +1645,7 @@ var _DateField = forwardRef17(
|
|
|
1813
1645
|
// src/Calendar/Calendar.tsx
|
|
1814
1646
|
import { useState } from "react";
|
|
1815
1647
|
import { Calendar } from "react-aria-components";
|
|
1816
|
-
import { cn as
|
|
1648
|
+
import { cn as cn34, useClassNames as useClassNames32 } from "@marigold/system";
|
|
1817
1649
|
|
|
1818
1650
|
// src/Calendar/CalendarGrid.tsx
|
|
1819
1651
|
import {
|
|
@@ -1821,18 +1653,18 @@ import {
|
|
|
1821
1653
|
CalendarGrid,
|
|
1822
1654
|
CalendarGridBody
|
|
1823
1655
|
} from "react-aria-components";
|
|
1824
|
-
import { cn as
|
|
1656
|
+
import { cn as cn31, useClassNames as useClassNames29 } from "@marigold/system";
|
|
1825
1657
|
|
|
1826
1658
|
// src/Calendar/CalendarGridHeader.tsx
|
|
1827
1659
|
import { startOfWeek, today } from "@internationalized/date";
|
|
1828
|
-
import { useContext as
|
|
1660
|
+
import { useContext as useContext8, useMemo } from "react";
|
|
1829
1661
|
import { CalendarStateContext } from "react-aria-components";
|
|
1830
1662
|
import { useCalendarGrid } from "@react-aria/calendar";
|
|
1831
1663
|
import { useDateFormatter, useLocale } from "@react-aria/i18n";
|
|
1832
1664
|
import { useClassNames as useClassNames28 } from "@marigold/system";
|
|
1833
|
-
import { jsx as
|
|
1665
|
+
import { jsx as jsx55 } from "react/jsx-runtime";
|
|
1834
1666
|
function CalendarGridHeader(props) {
|
|
1835
|
-
const state =
|
|
1667
|
+
const state = useContext8(CalendarStateContext);
|
|
1836
1668
|
const { headerProps } = useCalendarGrid(props, state);
|
|
1837
1669
|
const { locale } = useLocale();
|
|
1838
1670
|
const dayFormatter = useDateFormatter({
|
|
@@ -1848,20 +1680,20 @@ function CalendarGridHeader(props) {
|
|
|
1848
1680
|
});
|
|
1849
1681
|
}, [locale, state.timeZone, dayFormatter]);
|
|
1850
1682
|
const classNames2 = useClassNames28({ component: "Calendar" });
|
|
1851
|
-
return /* @__PURE__ */
|
|
1683
|
+
return /* @__PURE__ */ jsx55("thead", { ...headerProps, children: /* @__PURE__ */ jsx55("tr", { children: weekDays.map((day, index) => /* @__PURE__ */ jsx55("th", { className: classNames2.calendarHeader, children: day.substring(0, 2) }, index)) }) });
|
|
1852
1684
|
}
|
|
1853
1685
|
|
|
1854
1686
|
// src/Calendar/CalendarGrid.tsx
|
|
1855
|
-
import { jsx as
|
|
1687
|
+
import { jsx as jsx56, jsxs as jsxs19 } from "react/jsx-runtime";
|
|
1856
1688
|
var _CalendarGrid = () => {
|
|
1857
1689
|
const classNames2 = useClassNames29({ component: "Calendar" });
|
|
1858
1690
|
return /* @__PURE__ */ jsxs19(CalendarGrid, { className: classNames2.calendarGrid, children: [
|
|
1859
|
-
/* @__PURE__ */
|
|
1860
|
-
/* @__PURE__ */
|
|
1691
|
+
/* @__PURE__ */ jsx56(CalendarGridHeader, {}),
|
|
1692
|
+
/* @__PURE__ */ jsx56(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx56(
|
|
1861
1693
|
CalendarCell,
|
|
1862
1694
|
{
|
|
1863
1695
|
date,
|
|
1864
|
-
className:
|
|
1696
|
+
className: cn31(
|
|
1865
1697
|
"flex h-[30px] w-[30px] cursor-pointer items-center justify-center rounded-full p-[5.3px] text-sm font-normal aria-disabled:cursor-default",
|
|
1866
1698
|
classNames2.calendarCell
|
|
1867
1699
|
)
|
|
@@ -1871,9 +1703,9 @@ var _CalendarGrid = () => {
|
|
|
1871
1703
|
};
|
|
1872
1704
|
|
|
1873
1705
|
// src/Calendar/CalendarListBox.tsx
|
|
1874
|
-
import { useContext as
|
|
1706
|
+
import { useContext as useContext9 } from "react";
|
|
1875
1707
|
import { CalendarStateContext as CalendarStateContext2 } from "react-aria-components";
|
|
1876
|
-
import { cn as
|
|
1708
|
+
import { cn as cn32, useClassNames as useClassNames30 } from "@marigold/system";
|
|
1877
1709
|
|
|
1878
1710
|
// src/Calendar/useFormattedMonths.tsx
|
|
1879
1711
|
import { useDateFormatter as useDateFormatter2 } from "@react-aria/i18n";
|
|
@@ -1892,13 +1724,13 @@ function useFormattedMonths(timeZone, focusedDate) {
|
|
|
1892
1724
|
}
|
|
1893
1725
|
|
|
1894
1726
|
// src/Calendar/CalendarListBox.tsx
|
|
1895
|
-
import { jsx as
|
|
1727
|
+
import { jsx as jsx57, jsxs as jsxs20 } from "react/jsx-runtime";
|
|
1896
1728
|
function CalendarListBox({
|
|
1897
1729
|
type,
|
|
1898
1730
|
isDisabled,
|
|
1899
1731
|
setSelectedDropdown
|
|
1900
1732
|
}) {
|
|
1901
|
-
const state =
|
|
1733
|
+
const state = useContext9(CalendarStateContext2);
|
|
1902
1734
|
const months = useFormattedMonths(state.timeZone, state.focusedDate);
|
|
1903
1735
|
const buttonStyles = "flex items-center justify-between gap-1 overflow-hidden";
|
|
1904
1736
|
const { select: selectClassNames } = useClassNames30({ component: "Select" });
|
|
@@ -1907,11 +1739,11 @@ function CalendarListBox({
|
|
|
1907
1739
|
{
|
|
1908
1740
|
disabled: isDisabled,
|
|
1909
1741
|
onClick: () => setSelectedDropdown(type),
|
|
1910
|
-
className:
|
|
1742
|
+
className: cn32(buttonStyles, selectClassNames),
|
|
1911
1743
|
"data-testid": type,
|
|
1912
1744
|
children: [
|
|
1913
1745
|
type === "month" ? months[state.focusedDate.month - 1].substring(0, 3) : state.focusedDate.year,
|
|
1914
|
-
/* @__PURE__ */
|
|
1746
|
+
/* @__PURE__ */ jsx57(ChevronDown, {})
|
|
1915
1747
|
]
|
|
1916
1748
|
}
|
|
1917
1749
|
);
|
|
@@ -1919,39 +1751,39 @@ function CalendarListBox({
|
|
|
1919
1751
|
|
|
1920
1752
|
// src/Calendar/MonthControls.tsx
|
|
1921
1753
|
import { Button as Button3 } from "react-aria-components";
|
|
1922
|
-
import { cn as
|
|
1923
|
-
import { jsx as
|
|
1754
|
+
import { cn as cn33, useClassNames as useClassNames31 } from "@marigold/system";
|
|
1755
|
+
import { jsx as jsx58, jsxs as jsxs21 } from "react/jsx-runtime";
|
|
1924
1756
|
function MonthControls() {
|
|
1925
1757
|
const classNames2 = useClassNames31({ component: "Calendar" });
|
|
1926
1758
|
const buttonClassNames = useClassNames31({ component: "Button" });
|
|
1927
1759
|
return /* @__PURE__ */ jsxs21(
|
|
1928
1760
|
"div",
|
|
1929
1761
|
{
|
|
1930
|
-
className:
|
|
1762
|
+
className: cn33(
|
|
1931
1763
|
"flex w-full flex-nowrap justify-end gap-[10px] [&_button:disabled]:cursor-not-allowed [&_button]:px-2 [&_button]:py-1",
|
|
1932
1764
|
classNames2.calendarControllers
|
|
1933
1765
|
),
|
|
1934
1766
|
children: [
|
|
1935
|
-
/* @__PURE__ */
|
|
1767
|
+
/* @__PURE__ */ jsx58(
|
|
1936
1768
|
Button3,
|
|
1937
1769
|
{
|
|
1938
|
-
className:
|
|
1770
|
+
className: cn33(
|
|
1939
1771
|
"inline-flex items-center justify-center gap-[0.5ch]",
|
|
1940
1772
|
buttonClassNames
|
|
1941
1773
|
),
|
|
1942
1774
|
slot: "previous",
|
|
1943
|
-
children: /* @__PURE__ */
|
|
1775
|
+
children: /* @__PURE__ */ jsx58(ChevronLeft, {})
|
|
1944
1776
|
}
|
|
1945
1777
|
),
|
|
1946
|
-
/* @__PURE__ */
|
|
1778
|
+
/* @__PURE__ */ jsx58(
|
|
1947
1779
|
Button3,
|
|
1948
1780
|
{
|
|
1949
|
-
className:
|
|
1781
|
+
className: cn33(
|
|
1950
1782
|
"inline-flex items-center justify-center gap-[0.5ch]",
|
|
1951
1783
|
buttonClassNames
|
|
1952
1784
|
),
|
|
1953
1785
|
slot: "next",
|
|
1954
|
-
children: /* @__PURE__ */
|
|
1786
|
+
children: /* @__PURE__ */ jsx58(ChevronRight, {})
|
|
1955
1787
|
}
|
|
1956
1788
|
)
|
|
1957
1789
|
]
|
|
@@ -1961,24 +1793,24 @@ function MonthControls() {
|
|
|
1961
1793
|
var MonthControls_default = MonthControls;
|
|
1962
1794
|
|
|
1963
1795
|
// src/Calendar/MonthListBox.tsx
|
|
1964
|
-
import { useContext as
|
|
1796
|
+
import { useContext as useContext10 } from "react";
|
|
1965
1797
|
import { CalendarStateContext as CalendarStateContext3 } from "react-aria-components";
|
|
1966
|
-
import { jsx as
|
|
1798
|
+
import { jsx as jsx59 } from "react/jsx-runtime";
|
|
1967
1799
|
var MonthListBox = ({ setSelectedDropdown }) => {
|
|
1968
|
-
const state =
|
|
1800
|
+
const state = useContext10(CalendarStateContext3);
|
|
1969
1801
|
const months = useFormattedMonths(state.timeZone, state.focusedDate);
|
|
1970
1802
|
let onChange = (index) => {
|
|
1971
1803
|
let value = Number(index) + 1;
|
|
1972
1804
|
let date = state.focusedDate.set({ month: value });
|
|
1973
1805
|
state.setFocusedDate(date);
|
|
1974
1806
|
};
|
|
1975
|
-
return /* @__PURE__ */
|
|
1807
|
+
return /* @__PURE__ */ jsx59(
|
|
1976
1808
|
"ul",
|
|
1977
1809
|
{
|
|
1978
1810
|
"data-testid": "monthOptions",
|
|
1979
1811
|
className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
|
|
1980
1812
|
children: months.map((month, index) => {
|
|
1981
|
-
return /* @__PURE__ */
|
|
1813
|
+
return /* @__PURE__ */ jsx59("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx59(
|
|
1982
1814
|
_Button,
|
|
1983
1815
|
{
|
|
1984
1816
|
slot: "previous",
|
|
@@ -2000,15 +1832,15 @@ var MonthListBox_default = MonthListBox;
|
|
|
2000
1832
|
|
|
2001
1833
|
// src/Calendar/YearListBox.tsx
|
|
2002
1834
|
import {
|
|
2003
|
-
useContext as
|
|
2004
|
-
useEffect
|
|
2005
|
-
useRef
|
|
1835
|
+
useContext as useContext11,
|
|
1836
|
+
useEffect,
|
|
1837
|
+
useRef
|
|
2006
1838
|
} from "react";
|
|
2007
1839
|
import { CalendarStateContext as CalendarStateContext4 } from "react-aria-components";
|
|
2008
1840
|
import { useDateFormatter as useDateFormatter3 } from "@react-aria/i18n";
|
|
2009
|
-
import { jsx as
|
|
1841
|
+
import { jsx as jsx60 } from "react/jsx-runtime";
|
|
2010
1842
|
var YearListBox = ({ setSelectedDropdown }) => {
|
|
2011
|
-
const state =
|
|
1843
|
+
const state = useContext11(CalendarStateContext4);
|
|
2012
1844
|
const years = [];
|
|
2013
1845
|
let formatter = useDateFormatter3({
|
|
2014
1846
|
year: "numeric",
|
|
@@ -2021,8 +1853,8 @@ var YearListBox = ({ setSelectedDropdown }) => {
|
|
|
2021
1853
|
formatted: formatter.format(date.toDate(state.timeZone))
|
|
2022
1854
|
});
|
|
2023
1855
|
}
|
|
2024
|
-
const activeButtonRef =
|
|
2025
|
-
|
|
1856
|
+
const activeButtonRef = useRef(null);
|
|
1857
|
+
useEffect(() => {
|
|
2026
1858
|
if (activeButtonRef.current) {
|
|
2027
1859
|
const activeButton = activeButtonRef.current;
|
|
2028
1860
|
activeButton == null ? void 0 : activeButton.scrollIntoView({
|
|
@@ -2036,19 +1868,19 @@ var YearListBox = ({ setSelectedDropdown }) => {
|
|
|
2036
1868
|
let date = years[index].value;
|
|
2037
1869
|
state.setFocusedDate(date);
|
|
2038
1870
|
};
|
|
2039
|
-
return /* @__PURE__ */
|
|
1871
|
+
return /* @__PURE__ */ jsx60(
|
|
2040
1872
|
"ul",
|
|
2041
1873
|
{
|
|
2042
1874
|
"data-testid": "yearOptions",
|
|
2043
1875
|
className: "grid h-full max-h-[300px] min-w-[300px] grid-cols-3 gap-y-10 overflow-y-scroll p-2",
|
|
2044
1876
|
children: years.map((year, index) => {
|
|
2045
1877
|
const isActive = +year.formatted === state.focusedDate.year;
|
|
2046
|
-
return /* @__PURE__ */
|
|
1878
|
+
return /* @__PURE__ */ jsx60("li", { className: "flex justify-center", children: /* @__PURE__ */ jsx60(
|
|
2047
1879
|
"div",
|
|
2048
1880
|
{
|
|
2049
1881
|
ref: isActive ? activeButtonRef : null,
|
|
2050
1882
|
style: { height: "100%", width: "100%" },
|
|
2051
|
-
children: /* @__PURE__ */
|
|
1883
|
+
children: /* @__PURE__ */ jsx60(
|
|
2052
1884
|
_Button,
|
|
2053
1885
|
{
|
|
2054
1886
|
slot: "previous",
|
|
@@ -2073,7 +1905,7 @@ var YearListBox = ({ setSelectedDropdown }) => {
|
|
|
2073
1905
|
var YearListBox_default = YearListBox;
|
|
2074
1906
|
|
|
2075
1907
|
// src/Calendar/Calendar.tsx
|
|
2076
|
-
import { Fragment as Fragment5, jsx as
|
|
1908
|
+
import { Fragment as Fragment5, jsx as jsx61, jsxs as jsxs22 } from "react/jsx-runtime";
|
|
2077
1909
|
var _Calendar = ({
|
|
2078
1910
|
disabled,
|
|
2079
1911
|
readOnly,
|
|
@@ -2091,21 +1923,21 @@ var _Calendar = ({
|
|
|
2091
1923
|
const classNames2 = useClassNames32({ component: "Calendar" });
|
|
2092
1924
|
const [selectedDropdown, setSelectedDropdown] = useState();
|
|
2093
1925
|
const ViewMap = {
|
|
2094
|
-
month: /* @__PURE__ */
|
|
2095
|
-
year: /* @__PURE__ */
|
|
1926
|
+
month: /* @__PURE__ */ jsx61(MonthListBox_default, { setSelectedDropdown }),
|
|
1927
|
+
year: /* @__PURE__ */ jsx61(YearListBox_default, { setSelectedDropdown })
|
|
2096
1928
|
};
|
|
2097
|
-
return /* @__PURE__ */
|
|
1929
|
+
return /* @__PURE__ */ jsx61(
|
|
2098
1930
|
Calendar,
|
|
2099
1931
|
{
|
|
2100
|
-
className:
|
|
2101
|
-
"flex min-h-[350px] w-[360px] flex-col rounded-
|
|
1932
|
+
className: cn34(
|
|
1933
|
+
"flex min-h-[350px] w-[360px] flex-col rounded-xs p-4",
|
|
2102
1934
|
classNames2.calendar
|
|
2103
1935
|
),
|
|
2104
1936
|
...props,
|
|
2105
1937
|
children: selectedDropdown ? ViewMap[selectedDropdown] : /* @__PURE__ */ jsxs22(Fragment5, { children: [
|
|
2106
1938
|
/* @__PURE__ */ jsxs22("div", { className: "mb-4 flex items-center justify-between", children: [
|
|
2107
1939
|
/* @__PURE__ */ jsxs22("div", { className: "flex w-full gap-4", children: [
|
|
2108
|
-
/* @__PURE__ */
|
|
1940
|
+
/* @__PURE__ */ jsx61(
|
|
2109
1941
|
CalendarListBox,
|
|
2110
1942
|
{
|
|
2111
1943
|
type: "month",
|
|
@@ -2113,7 +1945,7 @@ var _Calendar = ({
|
|
|
2113
1945
|
setSelectedDropdown
|
|
2114
1946
|
}
|
|
2115
1947
|
),
|
|
2116
|
-
/* @__PURE__ */
|
|
1948
|
+
/* @__PURE__ */ jsx61(
|
|
2117
1949
|
CalendarListBox,
|
|
2118
1950
|
{
|
|
2119
1951
|
type: "year",
|
|
@@ -2122,9 +1954,9 @@ var _Calendar = ({
|
|
|
2122
1954
|
}
|
|
2123
1955
|
)
|
|
2124
1956
|
] }),
|
|
2125
|
-
/* @__PURE__ */
|
|
1957
|
+
/* @__PURE__ */ jsx61(MonthControls_default, {})
|
|
2126
1958
|
] }),
|
|
2127
|
-
/* @__PURE__ */
|
|
1959
|
+
/* @__PURE__ */ jsx61(_CalendarGrid, {})
|
|
2128
1960
|
] })
|
|
2129
1961
|
}
|
|
2130
1962
|
);
|
|
@@ -2134,7 +1966,7 @@ var _Calendar = ({
|
|
|
2134
1966
|
import React6 from "react";
|
|
2135
1967
|
import { DatePicker } from "react-aria-components";
|
|
2136
1968
|
import { useClassNames as useClassNames33 } from "@marigold/system";
|
|
2137
|
-
import { jsx as
|
|
1969
|
+
import { jsx as jsx62, jsxs as jsxs23 } from "react/jsx-runtime";
|
|
2138
1970
|
var _DatePicker = React6.forwardRef(
|
|
2139
1971
|
({
|
|
2140
1972
|
dateUnavailable,
|
|
@@ -2172,16 +2004,16 @@ var _DatePicker = React6.forwardRef(
|
|
|
2172
2004
|
...props,
|
|
2173
2005
|
ref,
|
|
2174
2006
|
children: [
|
|
2175
|
-
/* @__PURE__ */
|
|
2007
|
+
/* @__PURE__ */ jsx62(
|
|
2176
2008
|
_DateInput,
|
|
2177
2009
|
{
|
|
2178
|
-
action: /* @__PURE__ */
|
|
2010
|
+
action: /* @__PURE__ */ jsx62("div", { className: classNames2.container, children: /* @__PURE__ */ jsx62(
|
|
2179
2011
|
_Button,
|
|
2180
2012
|
{
|
|
2181
2013
|
size: "small",
|
|
2182
2014
|
disabled,
|
|
2183
2015
|
className: classNames2.button,
|
|
2184
|
-
children: /* @__PURE__ */
|
|
2016
|
+
children: /* @__PURE__ */ jsx62(
|
|
2185
2017
|
"svg",
|
|
2186
2018
|
{
|
|
2187
2019
|
"data-testid": "action",
|
|
@@ -2189,14 +2021,14 @@ var _DatePicker = React6.forwardRef(
|
|
|
2189
2021
|
width: 24,
|
|
2190
2022
|
height: 24,
|
|
2191
2023
|
fill: "currentColor",
|
|
2192
|
-
children: /* @__PURE__ */
|
|
2024
|
+
children: /* @__PURE__ */ jsx62("path", { d: "M20.0906 19.2V6.6C20.0906 5.61 19.2806 4.8 18.2906 4.8H17.3906V3H15.5906V4.8H8.39062V3H6.59062V4.8H5.69063C4.69163 4.8 3.89962 5.61 3.89962 6.6L3.89062 19.2C3.89062 20.19 4.69163 21 5.69063 21H18.2906C19.2806 21 20.0906 20.19 20.0906 19.2ZM9.29062 11.1001H7.49061V12.9001H9.29062V11.1001ZM5.69062 8.40009H18.2906V6.60008H5.69062V8.40009ZM18.2906 10.2V19.2H5.69062V10.2H18.2906ZM14.6906 12.9001H16.4906V11.1001H14.6906V12.9001ZM12.8906 12.9001H11.0906V11.1001H12.8906V12.9001Z" })
|
|
2193
2025
|
}
|
|
2194
2026
|
)
|
|
2195
2027
|
}
|
|
2196
2028
|
) })
|
|
2197
2029
|
}
|
|
2198
2030
|
),
|
|
2199
|
-
/* @__PURE__ */
|
|
2031
|
+
/* @__PURE__ */ jsx62(_Popover, { children: /* @__PURE__ */ jsx62(_Calendar, { disabled }) })
|
|
2200
2032
|
]
|
|
2201
2033
|
}
|
|
2202
2034
|
);
|
|
@@ -2205,16 +2037,16 @@ var _DatePicker = React6.forwardRef(
|
|
|
2205
2037
|
|
|
2206
2038
|
// src/Inset/Inset.tsx
|
|
2207
2039
|
import {
|
|
2208
|
-
cn as
|
|
2040
|
+
cn as cn35,
|
|
2209
2041
|
paddingSpace as paddingSpace2,
|
|
2210
2042
|
paddingSpaceX as paddingSpaceX2,
|
|
2211
2043
|
paddingSpaceY as paddingSpaceY2
|
|
2212
2044
|
} from "@marigold/system";
|
|
2213
|
-
import { jsx as
|
|
2214
|
-
var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */
|
|
2045
|
+
import { jsx as jsx63 } from "react/jsx-runtime";
|
|
2046
|
+
var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx63(
|
|
2215
2047
|
"div",
|
|
2216
2048
|
{
|
|
2217
|
-
className:
|
|
2049
|
+
className: cn35(
|
|
2218
2050
|
space && paddingSpace2[space],
|
|
2219
2051
|
!space && spaceX && paddingSpaceX2[spaceX],
|
|
2220
2052
|
!space && spaceY && paddingSpaceY2[spaceY]
|
|
@@ -2224,18 +2056,18 @@ var Inset = ({ space, spaceX, spaceY, children }) => /* @__PURE__ */ jsx62(
|
|
|
2224
2056
|
);
|
|
2225
2057
|
|
|
2226
2058
|
// src/Link/Link.tsx
|
|
2227
|
-
import { forwardRef as
|
|
2059
|
+
import { forwardRef as forwardRef17 } from "react";
|
|
2228
2060
|
import { Link } from "react-aria-components";
|
|
2229
2061
|
import { useClassNames as useClassNames34 } from "@marigold/system";
|
|
2230
|
-
import { jsx as
|
|
2231
|
-
var _Link =
|
|
2062
|
+
import { jsx as jsx64 } from "react/jsx-runtime";
|
|
2063
|
+
var _Link = forwardRef17(
|
|
2232
2064
|
({ variant, size, disabled, children, ...props }, ref) => {
|
|
2233
2065
|
const classNames2 = useClassNames34({
|
|
2234
2066
|
component: "Link",
|
|
2235
2067
|
variant,
|
|
2236
2068
|
size
|
|
2237
2069
|
});
|
|
2238
|
-
return /* @__PURE__ */
|
|
2070
|
+
return /* @__PURE__ */ jsx64(Link, { ...props, ref, className: classNames2, isDisabled: disabled, children });
|
|
2239
2071
|
}
|
|
2240
2072
|
);
|
|
2241
2073
|
|
|
@@ -2243,19 +2075,19 @@ var _Link = forwardRef18(
|
|
|
2243
2075
|
import { useClassNames as useClassNames35 } from "@marigold/system";
|
|
2244
2076
|
|
|
2245
2077
|
// src/List/Context.ts
|
|
2246
|
-
import { createContext as
|
|
2247
|
-
var ListContext =
|
|
2248
|
-
var useListContext = () =>
|
|
2078
|
+
import { createContext as createContext6, useContext as useContext12 } from "react";
|
|
2079
|
+
var ListContext = createContext6({});
|
|
2080
|
+
var useListContext = () => useContext12(ListContext);
|
|
2249
2081
|
|
|
2250
2082
|
// src/List/ListItem.tsx
|
|
2251
|
-
import { jsx as
|
|
2083
|
+
import { jsx as jsx65 } from "react/jsx-runtime";
|
|
2252
2084
|
var ListItem = ({ children, ...props }) => {
|
|
2253
2085
|
const { classNames: classNames2 } = useListContext();
|
|
2254
|
-
return /* @__PURE__ */
|
|
2086
|
+
return /* @__PURE__ */ jsx65("li", { ...props, className: classNames2, children });
|
|
2255
2087
|
};
|
|
2256
2088
|
|
|
2257
2089
|
// src/List/List.tsx
|
|
2258
|
-
import { jsx as
|
|
2090
|
+
import { jsx as jsx66 } from "react/jsx-runtime";
|
|
2259
2091
|
var List = ({
|
|
2260
2092
|
as = "ul",
|
|
2261
2093
|
children,
|
|
@@ -2265,7 +2097,7 @@ var List = ({
|
|
|
2265
2097
|
}) => {
|
|
2266
2098
|
const Component = as;
|
|
2267
2099
|
const classNames2 = useClassNames35({ component: "List", variant, size });
|
|
2268
|
-
return /* @__PURE__ */
|
|
2100
|
+
return /* @__PURE__ */ jsx66(Component, { ...props, className: classNames2[as], children: /* @__PURE__ */ jsx66(ListContext.Provider, { value: { classNames: classNames2.item }, children }) });
|
|
2269
2101
|
};
|
|
2270
2102
|
List.Item = ListItem;
|
|
2271
2103
|
|
|
@@ -2276,26 +2108,26 @@ import { useClassNames as useClassNames38 } from "@marigold/system";
|
|
|
2276
2108
|
// src/Menu/MenuItem.tsx
|
|
2277
2109
|
import { MenuItem } from "react-aria-components";
|
|
2278
2110
|
import { useClassNames as useClassNames36 } from "@marigold/system";
|
|
2279
|
-
import { jsx as
|
|
2111
|
+
import { jsx as jsx67 } from "react/jsx-runtime";
|
|
2280
2112
|
var _MenuItem = ({ children, ...props }) => {
|
|
2281
2113
|
const classNames2 = useClassNames36({ component: "Menu" });
|
|
2282
|
-
return /* @__PURE__ */
|
|
2114
|
+
return /* @__PURE__ */ jsx67(MenuItem, { ...props, className: classNames2.item, children });
|
|
2283
2115
|
};
|
|
2284
2116
|
|
|
2285
2117
|
// src/Menu/MenuSection.tsx
|
|
2286
2118
|
import { MenuSection } from "react-aria-components";
|
|
2287
2119
|
import { useClassNames as useClassNames37 } from "@marigold/system";
|
|
2288
|
-
import { jsx as
|
|
2120
|
+
import { jsx as jsx68, jsxs as jsxs24 } from "react/jsx-runtime";
|
|
2289
2121
|
var _MenuSection = ({ children, title, ...props }) => {
|
|
2290
2122
|
const className = useClassNames37({ component: "Menu" });
|
|
2291
2123
|
return /* @__PURE__ */ jsxs24(MenuSection, { ...props, children: [
|
|
2292
|
-
/* @__PURE__ */
|
|
2124
|
+
/* @__PURE__ */ jsx68(_Header, { className: className.section, children: title }),
|
|
2293
2125
|
children
|
|
2294
2126
|
] });
|
|
2295
2127
|
};
|
|
2296
2128
|
|
|
2297
2129
|
// src/Menu/Menu.tsx
|
|
2298
|
-
import { jsx as
|
|
2130
|
+
import { jsx as jsx69, jsxs as jsxs25 } from "react/jsx-runtime";
|
|
2299
2131
|
var _Menu = ({
|
|
2300
2132
|
children,
|
|
2301
2133
|
label,
|
|
@@ -2309,8 +2141,8 @@ var _Menu = ({
|
|
|
2309
2141
|
}) => {
|
|
2310
2142
|
const classNames2 = useClassNames38({ component: "Menu", variant, size });
|
|
2311
2143
|
return /* @__PURE__ */ jsxs25(MenuTrigger, { ...props, children: [
|
|
2312
|
-
/* @__PURE__ */
|
|
2313
|
-
/* @__PURE__ */
|
|
2144
|
+
/* @__PURE__ */ jsx69(_Button, { variant: "menu", disabled, "aria-label": ariaLabel, children: label }),
|
|
2145
|
+
/* @__PURE__ */ jsx69(_Popover, { open, placement, children: /* @__PURE__ */ jsx69(Menu, { ...props, className: classNames2.container, children }) })
|
|
2314
2146
|
] });
|
|
2315
2147
|
};
|
|
2316
2148
|
_Menu.Item = _MenuItem;
|
|
@@ -2318,8 +2150,8 @@ _Menu.Section = _MenuSection;
|
|
|
2318
2150
|
|
|
2319
2151
|
// src/Menu/ActionMenu.tsx
|
|
2320
2152
|
import { Menu as Menu2, MenuTrigger as MenuTrigger2 } from "react-aria-components";
|
|
2321
|
-
import { SVG as
|
|
2322
|
-
import { jsx as
|
|
2153
|
+
import { SVG as SVG8, useClassNames as useClassNames39 } from "@marigold/system";
|
|
2154
|
+
import { jsx as jsx70, jsxs as jsxs26 } from "react/jsx-runtime";
|
|
2323
2155
|
var ActionMenu = ({
|
|
2324
2156
|
variant,
|
|
2325
2157
|
size,
|
|
@@ -2328,49 +2160,49 @@ var ActionMenu = ({
|
|
|
2328
2160
|
}) => {
|
|
2329
2161
|
const classNames2 = useClassNames39({ component: "Menu", variant, size });
|
|
2330
2162
|
return /* @__PURE__ */ jsxs26(MenuTrigger2, { children: [
|
|
2331
|
-
/* @__PURE__ */
|
|
2332
|
-
/* @__PURE__ */
|
|
2163
|
+
/* @__PURE__ */ jsx70(_Button, { variant: "menu", size: "small", disabled, children: /* @__PURE__ */ jsx70(SVG8, { viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx70("path", { d: "M12.0117 7.47656C13.2557 7.47656 14.2734 6.45879 14.2734 5.21484C14.2734 3.9709 13.2557 2.95312 12.0117 2.95312C10.7678 2.95312 9.75 3.9709 9.75 5.21484C9.75 6.45879 10.7678 7.47656 12.0117 7.47656ZM12.0117 9.73828C10.7678 9.73828 9.75 10.7561 9.75 12C9.75 13.2439 10.7678 14.2617 12.0117 14.2617C13.2557 14.2617 14.2734 13.2439 14.2734 12C14.2734 10.7561 13.2557 9.73828 12.0117 9.73828ZM12.0117 16.5234C10.7678 16.5234 9.75 17.5412 9.75 18.7852C9.75 20.0291 10.7678 21.0469 12.0117 21.0469C13.2557 21.0469 14.2734 20.0291 14.2734 18.7852C14.2734 17.5412 13.2557 16.5234 12.0117 16.5234Z" }) }) }),
|
|
2164
|
+
/* @__PURE__ */ jsx70(_Popover, { children: /* @__PURE__ */ jsx70(Menu2, { ...props, className: classNames2.container, children: props.children }) })
|
|
2333
2165
|
] });
|
|
2334
2166
|
};
|
|
2335
2167
|
|
|
2336
2168
|
// src/SectionMessage/SectionMessage.tsx
|
|
2337
|
-
import { useRef as
|
|
2338
|
-
import { useButton
|
|
2339
|
-
import { cn as
|
|
2169
|
+
import { useRef as useRef2, useState as useState2 } from "react";
|
|
2170
|
+
import { useButton } from "@react-aria/button";
|
|
2171
|
+
import { cn as cn38, useClassNames as useClassNames40 } from "@marigold/system";
|
|
2340
2172
|
|
|
2341
2173
|
// src/SectionMessage/Context.tsx
|
|
2342
|
-
import { createContext as
|
|
2343
|
-
var SectionMessageContext =
|
|
2344
|
-
var useSectionMessageContext = () =>
|
|
2174
|
+
import { createContext as createContext7, useContext as useContext13 } from "react";
|
|
2175
|
+
var SectionMessageContext = createContext7({});
|
|
2176
|
+
var useSectionMessageContext = () => useContext13(SectionMessageContext);
|
|
2345
2177
|
|
|
2346
2178
|
// src/SectionMessage/SectionMessageContent.tsx
|
|
2347
|
-
import { cn as
|
|
2348
|
-
import { jsx as
|
|
2179
|
+
import { cn as cn36 } from "@marigold/system";
|
|
2180
|
+
import { jsx as jsx71 } from "react/jsx-runtime";
|
|
2349
2181
|
var SectionMessageContent = ({
|
|
2350
2182
|
children
|
|
2351
2183
|
}) => {
|
|
2352
2184
|
const { classNames: classNames2 } = useSectionMessageContext();
|
|
2353
|
-
return /* @__PURE__ */
|
|
2185
|
+
return /* @__PURE__ */ jsx71("div", { className: cn36("[grid-area:content]", classNames2.content), children });
|
|
2354
2186
|
};
|
|
2355
2187
|
|
|
2356
2188
|
// src/SectionMessage/SectionMessageTitle.tsx
|
|
2357
|
-
import { cn as
|
|
2358
|
-
import { jsx as
|
|
2189
|
+
import { cn as cn37 } from "@marigold/system";
|
|
2190
|
+
import { jsx as jsx72 } from "react/jsx-runtime";
|
|
2359
2191
|
var SectionMessageTitle = ({ children }) => {
|
|
2360
2192
|
const { classNames: classNames2 } = useSectionMessageContext();
|
|
2361
|
-
return /* @__PURE__ */
|
|
2193
|
+
return /* @__PURE__ */ jsx72("div", { className: cn37("[grid-area:title]", classNames2.title), children });
|
|
2362
2194
|
};
|
|
2363
2195
|
|
|
2364
2196
|
// src/SectionMessage/SectionMessage.tsx
|
|
2365
|
-
import { jsx as
|
|
2197
|
+
import { jsx as jsx73, jsxs as jsxs27 } from "react/jsx-runtime";
|
|
2366
2198
|
var icons = {
|
|
2367
|
-
success: () => /* @__PURE__ */
|
|
2199
|
+
success: () => /* @__PURE__ */ jsx73(
|
|
2368
2200
|
"svg",
|
|
2369
2201
|
{
|
|
2370
2202
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2371
2203
|
viewBox: "0 0 24 24",
|
|
2372
2204
|
fill: "currentColor",
|
|
2373
|
-
children: /* @__PURE__ */
|
|
2205
|
+
children: /* @__PURE__ */ jsx73(
|
|
2374
2206
|
"path",
|
|
2375
2207
|
{
|
|
2376
2208
|
fillRule: "evenodd",
|
|
@@ -2380,13 +2212,13 @@ var icons = {
|
|
|
2380
2212
|
)
|
|
2381
2213
|
}
|
|
2382
2214
|
),
|
|
2383
|
-
info: () => /* @__PURE__ */
|
|
2215
|
+
info: () => /* @__PURE__ */ jsx73(
|
|
2384
2216
|
"svg",
|
|
2385
2217
|
{
|
|
2386
2218
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2387
2219
|
viewBox: "0 0 24 24",
|
|
2388
2220
|
fill: "currentColor",
|
|
2389
|
-
children: /* @__PURE__ */
|
|
2221
|
+
children: /* @__PURE__ */ jsx73(
|
|
2390
2222
|
"path",
|
|
2391
2223
|
{
|
|
2392
2224
|
fillRule: "evenodd",
|
|
@@ -2396,13 +2228,13 @@ var icons = {
|
|
|
2396
2228
|
)
|
|
2397
2229
|
}
|
|
2398
2230
|
),
|
|
2399
|
-
warning: () => /* @__PURE__ */
|
|
2231
|
+
warning: () => /* @__PURE__ */ jsx73(
|
|
2400
2232
|
"svg",
|
|
2401
2233
|
{
|
|
2402
2234
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2403
2235
|
viewBox: "0 0 24 24",
|
|
2404
2236
|
fill: "currentColor",
|
|
2405
|
-
children: /* @__PURE__ */
|
|
2237
|
+
children: /* @__PURE__ */ jsx73(
|
|
2406
2238
|
"path",
|
|
2407
2239
|
{
|
|
2408
2240
|
fillRule: "evenodd",
|
|
@@ -2412,13 +2244,13 @@ var icons = {
|
|
|
2412
2244
|
)
|
|
2413
2245
|
}
|
|
2414
2246
|
),
|
|
2415
|
-
error: () => /* @__PURE__ */
|
|
2247
|
+
error: () => /* @__PURE__ */ jsx73(
|
|
2416
2248
|
"svg",
|
|
2417
2249
|
{
|
|
2418
2250
|
xmlns: "http://www.w3.org/2000/svg",
|
|
2419
2251
|
viewBox: "0 0 24 24",
|
|
2420
2252
|
fill: "currentColor",
|
|
2421
|
-
children: /* @__PURE__ */
|
|
2253
|
+
children: /* @__PURE__ */ jsx73(
|
|
2422
2254
|
"path",
|
|
2423
2255
|
{
|
|
2424
2256
|
fillRule: "evenodd",
|
|
@@ -2438,7 +2270,7 @@ var SectionMessage = ({
|
|
|
2438
2270
|
onCloseChange,
|
|
2439
2271
|
...props
|
|
2440
2272
|
}) => {
|
|
2441
|
-
const buttonRef =
|
|
2273
|
+
const buttonRef = useRef2(null);
|
|
2442
2274
|
const classNames2 = useClassNames40({
|
|
2443
2275
|
component: "SectionMessage",
|
|
2444
2276
|
variant,
|
|
@@ -2447,7 +2279,7 @@ var SectionMessage = ({
|
|
|
2447
2279
|
const Icon4 = icons[variant];
|
|
2448
2280
|
const [internalVisible, setInternalVisible] = useState2(true);
|
|
2449
2281
|
const isCurrentlyVisible = close != null ? close : internalVisible;
|
|
2450
|
-
const { buttonProps } =
|
|
2282
|
+
const { buttonProps } = useButton(props, buttonRef);
|
|
2451
2283
|
const handleClose = () => {
|
|
2452
2284
|
onCloseChange && close && onCloseChange(close);
|
|
2453
2285
|
if (close === void 0) {
|
|
@@ -2455,24 +2287,24 @@ var SectionMessage = ({
|
|
|
2455
2287
|
}
|
|
2456
2288
|
};
|
|
2457
2289
|
if (!isCurrentlyVisible) return null;
|
|
2458
|
-
return /* @__PURE__ */
|
|
2290
|
+
return /* @__PURE__ */ jsx73(SectionMessageContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsxs27(
|
|
2459
2291
|
"div",
|
|
2460
2292
|
{
|
|
2461
2293
|
role: variant === "error" ? "alert" : void 0,
|
|
2462
2294
|
...props,
|
|
2463
|
-
className:
|
|
2295
|
+
className: cn38("grid auto-rows-min", classNames2.container),
|
|
2464
2296
|
children: [
|
|
2465
|
-
/* @__PURE__ */
|
|
2297
|
+
/* @__PURE__ */ jsx73(
|
|
2466
2298
|
"div",
|
|
2467
2299
|
{
|
|
2468
|
-
className:
|
|
2300
|
+
className: cn38(
|
|
2469
2301
|
"h-5 w-5 self-center [grid-area:icon]",
|
|
2470
2302
|
classNames2.icon
|
|
2471
2303
|
),
|
|
2472
|
-
children: Icon4 && /* @__PURE__ */
|
|
2304
|
+
children: Icon4 && /* @__PURE__ */ jsx73(Icon4, {})
|
|
2473
2305
|
}
|
|
2474
2306
|
),
|
|
2475
|
-
closeButton && /* @__PURE__ */
|
|
2307
|
+
closeButton && /* @__PURE__ */ jsx73(
|
|
2476
2308
|
"button",
|
|
2477
2309
|
{
|
|
2478
2310
|
...buttonProps,
|
|
@@ -2480,7 +2312,7 @@ var SectionMessage = ({
|
|
|
2480
2312
|
"aria-label": "close",
|
|
2481
2313
|
className: "h-5 w-5 cursor-pointer border-none p-0 leading-normal outline-0 [grid-area:close]",
|
|
2482
2314
|
onClick: handleClose,
|
|
2483
|
-
children: /* @__PURE__ */
|
|
2315
|
+
children: /* @__PURE__ */ jsx73("svg", { viewBox: "0 0 20 20", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(
|
|
2484
2316
|
"path",
|
|
2485
2317
|
{
|
|
2486
2318
|
fillRule: "evenodd",
|
|
@@ -2499,17 +2331,17 @@ SectionMessage.Title = SectionMessageTitle;
|
|
|
2499
2331
|
SectionMessage.Content = SectionMessageContent;
|
|
2500
2332
|
|
|
2501
2333
|
// src/Multiselect/Multiselect.tsx
|
|
2502
|
-
import { Children as
|
|
2334
|
+
import { Children as Children4, useState as useState3 } from "react";
|
|
2503
2335
|
import { useListData as useListData2 } from "@react-stately/data";
|
|
2504
2336
|
|
|
2505
2337
|
// src/TagGroup/Tag.tsx
|
|
2506
2338
|
import { Button as Button4, Tag } from "react-aria-components";
|
|
2507
|
-
import { cn as
|
|
2339
|
+
import { cn as cn39, useClassNames as useClassNames42 } from "@marigold/system";
|
|
2508
2340
|
|
|
2509
2341
|
// src/TagGroup/TagGroup.tsx
|
|
2510
2342
|
import { TagGroup, TagList } from "react-aria-components";
|
|
2511
2343
|
import { useClassNames as useClassNames41 } from "@marigold/system";
|
|
2512
|
-
import { jsx as
|
|
2344
|
+
import { jsx as jsx74 } from "react/jsx-runtime";
|
|
2513
2345
|
var _TagGroup = ({
|
|
2514
2346
|
width,
|
|
2515
2347
|
items,
|
|
@@ -2520,7 +2352,7 @@ var _TagGroup = ({
|
|
|
2520
2352
|
...rest
|
|
2521
2353
|
}) => {
|
|
2522
2354
|
const classNames2 = useClassNames41({ component: "Tag", variant, size });
|
|
2523
|
-
return /* @__PURE__ */
|
|
2355
|
+
return /* @__PURE__ */ jsx74(FieldBase, { as: TagGroup, ...rest, children: /* @__PURE__ */ jsx74(
|
|
2524
2356
|
TagList,
|
|
2525
2357
|
{
|
|
2526
2358
|
items,
|
|
@@ -2532,25 +2364,25 @@ var _TagGroup = ({
|
|
|
2532
2364
|
};
|
|
2533
2365
|
|
|
2534
2366
|
// src/TagGroup/Tag.tsx
|
|
2535
|
-
import { Fragment as Fragment6, jsx as
|
|
2367
|
+
import { Fragment as Fragment6, jsx as jsx75, jsxs as jsxs28 } from "react/jsx-runtime";
|
|
2536
2368
|
var CloseButton2 = ({ className }) => {
|
|
2537
|
-
return /* @__PURE__ */
|
|
2369
|
+
return /* @__PURE__ */ jsx75(Button4, { slot: "remove", className, children: /* @__PURE__ */ jsx75("svg", { viewBox: "0 0 20 20", fill: "currentColor", width: 20, height: 20, children: /* @__PURE__ */ jsx75("path", { d: "M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" }) }) });
|
|
2538
2370
|
};
|
|
2539
2371
|
var _Tag = ({ variant, size, children, ...props }) => {
|
|
2540
2372
|
let textValue = typeof children === "string" ? children : void 0;
|
|
2541
2373
|
const classNames2 = useClassNames42({ component: "Tag", variant, size });
|
|
2542
|
-
return /* @__PURE__ */
|
|
2374
|
+
return /* @__PURE__ */ jsx75(
|
|
2543
2375
|
Tag,
|
|
2544
2376
|
{
|
|
2545
2377
|
textValue,
|
|
2546
2378
|
...props,
|
|
2547
|
-
className:
|
|
2379
|
+
className: cn39("data-selection-mode:cursor-pointer", classNames2.tag),
|
|
2548
2380
|
children: ({ allowsRemoving }) => /* @__PURE__ */ jsxs28(Fragment6, { children: [
|
|
2549
2381
|
children,
|
|
2550
|
-
allowsRemoving && /* @__PURE__ */
|
|
2382
|
+
allowsRemoving && /* @__PURE__ */ jsx75(
|
|
2551
2383
|
CloseButton2,
|
|
2552
2384
|
{
|
|
2553
|
-
className:
|
|
2385
|
+
className: cn39("flex items-center", classNames2.closeButton)
|
|
2554
2386
|
}
|
|
2555
2387
|
)
|
|
2556
2388
|
] })
|
|
@@ -2560,14 +2392,14 @@ var _Tag = ({ variant, size, children, ...props }) => {
|
|
|
2560
2392
|
_Tag.Group = _TagGroup;
|
|
2561
2393
|
|
|
2562
2394
|
// src/Multiselect/Multiselect.tsx
|
|
2563
|
-
import { jsx as
|
|
2564
|
-
var
|
|
2395
|
+
import { jsx as jsx76, jsxs as jsxs29 } from "react/jsx-runtime";
|
|
2396
|
+
var Item = (_) => null;
|
|
2565
2397
|
var Multiselect = ({
|
|
2566
2398
|
label,
|
|
2567
2399
|
children,
|
|
2568
2400
|
...props
|
|
2569
2401
|
}) => {
|
|
2570
|
-
const items =
|
|
2402
|
+
const items = Children4.map(children, ({ props: props2 }) => props2);
|
|
2571
2403
|
const list = useListData2({
|
|
2572
2404
|
initialItems: items,
|
|
2573
2405
|
initialSelectedKeys: props.defaultSelectedKeys,
|
|
@@ -2599,17 +2431,17 @@ var Multiselect = ({
|
|
|
2599
2431
|
input.focus();
|
|
2600
2432
|
};
|
|
2601
2433
|
return /* @__PURE__ */ jsxs29("div", { className: "flex flex-wrap gap-1", children: [
|
|
2602
|
-
/* @__PURE__ */
|
|
2434
|
+
/* @__PURE__ */ jsx76(
|
|
2603
2435
|
_Tag.Group,
|
|
2604
2436
|
{
|
|
2605
2437
|
items: selected,
|
|
2606
2438
|
allowsRemoving: true,
|
|
2607
2439
|
onRemove: setUnselected,
|
|
2608
2440
|
renderEmptyState: () => null,
|
|
2609
|
-
children: (item) => /* @__PURE__ */
|
|
2441
|
+
children: (item) => /* @__PURE__ */ jsx76(_Tag, { id: item.id, children: item.children }, item.id)
|
|
2610
2442
|
}
|
|
2611
2443
|
),
|
|
2612
|
-
/* @__PURE__ */
|
|
2444
|
+
/* @__PURE__ */ jsx76(
|
|
2613
2445
|
_ComboBox,
|
|
2614
2446
|
{
|
|
2615
2447
|
value,
|
|
@@ -2619,23 +2451,23 @@ var Multiselect = ({
|
|
|
2619
2451
|
disabled: unselected.length === 0,
|
|
2620
2452
|
placeholder: unselected.length === 0 ? "All items selected" : "",
|
|
2621
2453
|
...props,
|
|
2622
|
-
children: unselected.map((item) => /* @__PURE__ */
|
|
2454
|
+
children: unselected.map((item) => /* @__PURE__ */ jsx76(_ComboBox.Option, { id: item.id, children: item.children }, item.id))
|
|
2623
2455
|
}
|
|
2624
2456
|
)
|
|
2625
2457
|
] });
|
|
2626
2458
|
};
|
|
2627
|
-
Multiselect.Item =
|
|
2459
|
+
Multiselect.Item = Item;
|
|
2628
2460
|
|
|
2629
2461
|
// src/NumberField/NumberField.tsx
|
|
2630
|
-
import { forwardRef as
|
|
2462
|
+
import { forwardRef as forwardRef18 } from "react";
|
|
2631
2463
|
import { Group as Group2, NumberField } from "react-aria-components";
|
|
2632
|
-
import { cn as
|
|
2464
|
+
import { cn as cn41, useClassNames as useClassNames43 } from "@marigold/system";
|
|
2633
2465
|
|
|
2634
2466
|
// src/NumberField/StepButton.tsx
|
|
2635
2467
|
import { Button as Button5 } from "react-aria-components";
|
|
2636
|
-
import { cn as
|
|
2637
|
-
import { jsx as
|
|
2638
|
-
var Plus = () => /* @__PURE__ */
|
|
2468
|
+
import { cn as cn40 } from "@marigold/system";
|
|
2469
|
+
import { jsx as jsx77 } from "react/jsx-runtime";
|
|
2470
|
+
var Plus = () => /* @__PURE__ */ jsx77("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx77(
|
|
2639
2471
|
"path",
|
|
2640
2472
|
{
|
|
2641
2473
|
fillRule: "evenodd",
|
|
@@ -2643,7 +2475,7 @@ var Plus = () => /* @__PURE__ */ jsx76("svg", { width: 16, height: 16, viewBox:
|
|
|
2643
2475
|
d: "M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"
|
|
2644
2476
|
}
|
|
2645
2477
|
) });
|
|
2646
|
-
var Minus = () => /* @__PURE__ */
|
|
2478
|
+
var Minus = () => /* @__PURE__ */ jsx77("svg", { width: 16, height: 16, viewBox: "0 0 20 20", fill: "currentColor", children: /* @__PURE__ */ jsx77(
|
|
2647
2479
|
"path",
|
|
2648
2480
|
{
|
|
2649
2481
|
fillRule: "evenodd",
|
|
@@ -2653,25 +2485,25 @@ var Minus = () => /* @__PURE__ */ jsx76("svg", { width: 16, height: 16, viewBox:
|
|
|
2653
2485
|
) });
|
|
2654
2486
|
var _StepButton = ({ direction, className, ...props }) => {
|
|
2655
2487
|
const Icon4 = direction === "up" ? Plus : Minus;
|
|
2656
|
-
return /* @__PURE__ */
|
|
2488
|
+
return /* @__PURE__ */ jsx77(
|
|
2657
2489
|
Button5,
|
|
2658
2490
|
{
|
|
2659
|
-
className:
|
|
2491
|
+
className: cn40(
|
|
2660
2492
|
[
|
|
2661
2493
|
"flex items-center justify-center",
|
|
2662
|
-
"cursor-pointer data-
|
|
2494
|
+
"cursor-pointer data-disabled:cursor-not-allowed"
|
|
2663
2495
|
],
|
|
2664
2496
|
className
|
|
2665
2497
|
),
|
|
2666
2498
|
...props,
|
|
2667
|
-
children: /* @__PURE__ */
|
|
2499
|
+
children: /* @__PURE__ */ jsx77(Icon4, {})
|
|
2668
2500
|
}
|
|
2669
2501
|
);
|
|
2670
2502
|
};
|
|
2671
2503
|
|
|
2672
2504
|
// src/NumberField/NumberField.tsx
|
|
2673
|
-
import { jsx as
|
|
2674
|
-
var _NumberField =
|
|
2505
|
+
import { jsx as jsx78, jsxs as jsxs30 } from "react/jsx-runtime";
|
|
2506
|
+
var _NumberField = forwardRef18(
|
|
2675
2507
|
({
|
|
2676
2508
|
variant,
|
|
2677
2509
|
size,
|
|
@@ -2695,8 +2527,8 @@ var _NumberField = forwardRef19(
|
|
|
2695
2527
|
...rest
|
|
2696
2528
|
};
|
|
2697
2529
|
const showStepper = !hideStepper;
|
|
2698
|
-
return /* @__PURE__ */
|
|
2699
|
-
showStepper && /* @__PURE__ */
|
|
2530
|
+
return /* @__PURE__ */ jsx78(FieldBase, { as: NumberField, ...props, children: /* @__PURE__ */ jsxs30(Group2, { className: cn41("flex items-stretch", classNames2.group), children: [
|
|
2531
|
+
showStepper && /* @__PURE__ */ jsx78(
|
|
2700
2532
|
_StepButton,
|
|
2701
2533
|
{
|
|
2702
2534
|
className: classNames2.stepper,
|
|
@@ -2704,7 +2536,7 @@ var _NumberField = forwardRef19(
|
|
|
2704
2536
|
slot: "decrement"
|
|
2705
2537
|
}
|
|
2706
2538
|
),
|
|
2707
|
-
/* @__PURE__ */
|
|
2539
|
+
/* @__PURE__ */ jsx78("div", { className: "flex-1", children: /* @__PURE__ */ jsx78(
|
|
2708
2540
|
_Input,
|
|
2709
2541
|
{
|
|
2710
2542
|
ref,
|
|
@@ -2713,7 +2545,7 @@ var _NumberField = forwardRef19(
|
|
|
2713
2545
|
className: classNames2.input
|
|
2714
2546
|
}
|
|
2715
2547
|
) }),
|
|
2716
|
-
showStepper && /* @__PURE__ */
|
|
2548
|
+
showStepper && /* @__PURE__ */ jsx78(
|
|
2717
2549
|
_StepButton,
|
|
2718
2550
|
{
|
|
2719
2551
|
className: classNames2.stepper,
|
|
@@ -2726,12 +2558,12 @@ var _NumberField = forwardRef19(
|
|
|
2726
2558
|
);
|
|
2727
2559
|
|
|
2728
2560
|
// src/Pagination/Pagination.tsx
|
|
2729
|
-
import { useEffect as
|
|
2561
|
+
import { useEffect as useEffect4, useRef as useRef5, useState as useState5 } from "react";
|
|
2730
2562
|
|
|
2731
2563
|
// src/Pagination/Ellipsis.tsx
|
|
2732
|
-
import { jsx as
|
|
2564
|
+
import { jsx as jsx79 } from "react/jsx-runtime";
|
|
2733
2565
|
var Ellipsis = () => {
|
|
2734
|
-
return /* @__PURE__ */
|
|
2566
|
+
return /* @__PURE__ */ jsx79(
|
|
2735
2567
|
"span",
|
|
2736
2568
|
{
|
|
2737
2569
|
className: "text-text-base flex h-8 w-8 items-center justify-center",
|
|
@@ -2742,16 +2574,16 @@ var Ellipsis = () => {
|
|
|
2742
2574
|
};
|
|
2743
2575
|
|
|
2744
2576
|
// src/Pagination/NavigationButton.tsx
|
|
2745
|
-
import React7, { useEffect as
|
|
2746
|
-
import { useButton as
|
|
2747
|
-
import { cn as
|
|
2577
|
+
import React7, { useEffect as useEffect2 } from "react";
|
|
2578
|
+
import { useButton as useButton2 } from "@react-aria/button";
|
|
2579
|
+
import { cn as cn42, useClassNames as useClassNames44 } from "@marigold/system";
|
|
2748
2580
|
import { jsxs as jsxs31 } from "react/jsx-runtime";
|
|
2749
2581
|
var NavigationButton = (props) => {
|
|
2750
2582
|
const ref = React7.useRef(null);
|
|
2751
2583
|
const classNames2 = useClassNames44({
|
|
2752
2584
|
component: "Pagination"
|
|
2753
2585
|
});
|
|
2754
|
-
let { buttonProps } =
|
|
2586
|
+
let { buttonProps } = useButton2(props, ref);
|
|
2755
2587
|
let {
|
|
2756
2588
|
children,
|
|
2757
2589
|
isSelected,
|
|
@@ -2761,7 +2593,7 @@ var NavigationButton = (props) => {
|
|
|
2761
2593
|
position,
|
|
2762
2594
|
...rest
|
|
2763
2595
|
} = props;
|
|
2764
|
-
|
|
2596
|
+
useEffect2(() => {
|
|
2765
2597
|
if (registerRef) {
|
|
2766
2598
|
registerRef(ref.current);
|
|
2767
2599
|
return () => registerRef(null);
|
|
@@ -2774,7 +2606,7 @@ var NavigationButton = (props) => {
|
|
|
2774
2606
|
...buttonProps,
|
|
2775
2607
|
...rest,
|
|
2776
2608
|
disabled: isDisabled,
|
|
2777
|
-
className:
|
|
2609
|
+
className: cn42(classNames2, controlLabel && "w-24 px-2"),
|
|
2778
2610
|
"data-selected": isSelected,
|
|
2779
2611
|
children: [
|
|
2780
2612
|
position === "left" && children,
|
|
@@ -2786,24 +2618,24 @@ var NavigationButton = (props) => {
|
|
|
2786
2618
|
};
|
|
2787
2619
|
|
|
2788
2620
|
// src/Pagination/PageButton.tsx
|
|
2789
|
-
import { useEffect as
|
|
2790
|
-
import { useButton as
|
|
2621
|
+
import { useEffect as useEffect3, useRef as useRef3 } from "react";
|
|
2622
|
+
import { useButton as useButton3 } from "@react-aria/button";
|
|
2791
2623
|
import { useClassNames as useClassNames45 } from "@marigold/system";
|
|
2792
|
-
import { jsx as
|
|
2624
|
+
import { jsx as jsx80 } from "react/jsx-runtime";
|
|
2793
2625
|
var PageButton = (props) => {
|
|
2794
|
-
const ref =
|
|
2626
|
+
const ref = useRef3(null);
|
|
2795
2627
|
const classNames2 = useClassNames45({
|
|
2796
2628
|
component: "Pagination"
|
|
2797
2629
|
});
|
|
2798
|
-
let { buttonProps } =
|
|
2630
|
+
let { buttonProps } = useButton3(props, ref);
|
|
2799
2631
|
let { page, selected, registerRef, isDisabled } = props;
|
|
2800
|
-
|
|
2632
|
+
useEffect3(() => {
|
|
2801
2633
|
if (registerRef) {
|
|
2802
2634
|
registerRef(ref.current);
|
|
2803
2635
|
return () => registerRef(null);
|
|
2804
2636
|
}
|
|
2805
2637
|
}, [registerRef]);
|
|
2806
|
-
return /* @__PURE__ */
|
|
2638
|
+
return /* @__PURE__ */ jsx80(
|
|
2807
2639
|
"button",
|
|
2808
2640
|
{
|
|
2809
2641
|
ref,
|
|
@@ -2820,7 +2652,7 @@ var PageButton = (props) => {
|
|
|
2820
2652
|
};
|
|
2821
2653
|
|
|
2822
2654
|
// src/Pagination/useKeyboardNavigation.tsx
|
|
2823
|
-
import { useCallback, useRef as
|
|
2655
|
+
import { useCallback, useRef as useRef4, useState as useState4 } from "react";
|
|
2824
2656
|
import { useKeyboard } from "@react-aria/interactions";
|
|
2825
2657
|
var NavigationTypes = {
|
|
2826
2658
|
Prev: "prev",
|
|
@@ -2834,13 +2666,13 @@ var useKeyboardNavigation = ({
|
|
|
2834
2666
|
onChange = () => {
|
|
2835
2667
|
}
|
|
2836
2668
|
}) => {
|
|
2837
|
-
const containerRef =
|
|
2669
|
+
const containerRef = useRef4(null);
|
|
2838
2670
|
const [focusedItem, setFocusedItem] = useState4({
|
|
2839
2671
|
type: "page",
|
|
2840
2672
|
value: page
|
|
2841
2673
|
});
|
|
2842
|
-
const navigationItems =
|
|
2843
|
-
const buttonRefs =
|
|
2674
|
+
const navigationItems = useRef4([]);
|
|
2675
|
+
const buttonRefs = useRef4(/* @__PURE__ */ new Map());
|
|
2844
2676
|
const isItemDisabled = useCallback(
|
|
2845
2677
|
(item) => {
|
|
2846
2678
|
if (item.type === NavigationTypes.Prev) return page <= 1;
|
|
@@ -2966,7 +2798,7 @@ var usePageRange = ({ currentPage, totalPages }) => {
|
|
|
2966
2798
|
};
|
|
2967
2799
|
|
|
2968
2800
|
// src/Pagination/Pagination.tsx
|
|
2969
|
-
import { jsx as
|
|
2801
|
+
import { jsx as jsx81, jsxs as jsxs32 } from "react/jsx-runtime";
|
|
2970
2802
|
var _Pagination = ({
|
|
2971
2803
|
defaultPage = 1,
|
|
2972
2804
|
page,
|
|
@@ -2978,8 +2810,8 @@ var _Pagination = ({
|
|
|
2978
2810
|
}) => {
|
|
2979
2811
|
const [currentPage, setCurrentPage] = useState5(page != null ? page : defaultPage);
|
|
2980
2812
|
const totalPages = Math.ceil(totalItems / pageSize);
|
|
2981
|
-
const isFirstRender =
|
|
2982
|
-
|
|
2813
|
+
const isFirstRender = useRef5(true);
|
|
2814
|
+
useEffect4(() => {
|
|
2983
2815
|
if (isFirstRender.current) {
|
|
2984
2816
|
isFirstRender.current = false;
|
|
2985
2817
|
return;
|
|
@@ -2996,7 +2828,7 @@ var _Pagination = ({
|
|
|
2996
2828
|
onChange: handlePageChange
|
|
2997
2829
|
});
|
|
2998
2830
|
const pageRange = usePageRange({ currentPage, totalPages });
|
|
2999
|
-
|
|
2831
|
+
useEffect4(() => {
|
|
3000
2832
|
const items = [
|
|
3001
2833
|
{ type: NavigationTypes.Prev, value: currentPage - 1 },
|
|
3002
2834
|
...pageRange.map((value) => ({
|
|
@@ -3007,7 +2839,7 @@ var _Pagination = ({
|
|
|
3007
2839
|
];
|
|
3008
2840
|
setNavigationItems(items);
|
|
3009
2841
|
}, [pageRange, currentPage, setNavigationItems]);
|
|
3010
|
-
|
|
2842
|
+
useEffect4(() => {
|
|
3011
2843
|
setFocusedItem({ type: NavigationTypes.Page, value: currentPage });
|
|
3012
2844
|
}, [currentPage, setFocusedItem]);
|
|
3013
2845
|
const isFirstPage = currentPage === 1;
|
|
@@ -3019,7 +2851,7 @@ var _Pagination = ({
|
|
|
3019
2851
|
"aria-label": `Page ${currentPage} of ${totalPages}`,
|
|
3020
2852
|
...keyboardProps,
|
|
3021
2853
|
children: [
|
|
3022
|
-
/* @__PURE__ */
|
|
2854
|
+
/* @__PURE__ */ jsx81(
|
|
3023
2855
|
NavigationButton,
|
|
3024
2856
|
{
|
|
3025
2857
|
onPress: () => handlePageChange(Math.max(1, currentPage - 1)),
|
|
@@ -3028,11 +2860,11 @@ var _Pagination = ({
|
|
|
3028
2860
|
registerRef: (ref) => registerRef(NavigationTypes.Prev, currentPage - 1, ref),
|
|
3029
2861
|
controlLabel: controlLabels == null ? void 0 : controlLabels[0],
|
|
3030
2862
|
position: "left",
|
|
3031
|
-
children: /* @__PURE__ */
|
|
2863
|
+
children: /* @__PURE__ */ jsx81(ChevronLeft, { className: "h-5 w-5" })
|
|
3032
2864
|
}
|
|
3033
2865
|
),
|
|
3034
|
-
/* @__PURE__ */
|
|
3035
|
-
(pageNumber, index) => pageNumber === "ellipsis" ? /* @__PURE__ */
|
|
2866
|
+
/* @__PURE__ */ jsx81("div", { className: "flex items-center space-x-2", children: totalPages > 0 ? pageRange.map(
|
|
2867
|
+
(pageNumber, index) => pageNumber === "ellipsis" ? /* @__PURE__ */ jsx81(Ellipsis, {}, `ellipsis-${index}`) : /* @__PURE__ */ jsx81(
|
|
3036
2868
|
PageButton,
|
|
3037
2869
|
{
|
|
3038
2870
|
page: pageNumber,
|
|
@@ -3042,8 +2874,8 @@ var _Pagination = ({
|
|
|
3042
2874
|
},
|
|
3043
2875
|
pageNumber
|
|
3044
2876
|
)
|
|
3045
|
-
) : /* @__PURE__ */
|
|
3046
|
-
/* @__PURE__ */
|
|
2877
|
+
) : /* @__PURE__ */ jsx81(PageButton, { page: 1, isDisabled: true }, 1) }),
|
|
2878
|
+
/* @__PURE__ */ jsx81(
|
|
3047
2879
|
NavigationButton,
|
|
3048
2880
|
{
|
|
3049
2881
|
onPress: () => handlePageChange(Math.min(totalPages, currentPage + 1)),
|
|
@@ -3052,7 +2884,7 @@ var _Pagination = ({
|
|
|
3052
2884
|
registerRef: (ref) => registerRef(NavigationTypes.Next, currentPage + 1, ref),
|
|
3053
2885
|
controlLabel: controlLabels == null ? void 0 : controlLabels[1],
|
|
3054
2886
|
position: "right",
|
|
3055
|
-
children: /* @__PURE__ */
|
|
2887
|
+
children: /* @__PURE__ */ jsx81(ChevronRight, { className: "h-5 w-5" })
|
|
3056
2888
|
}
|
|
3057
2889
|
)
|
|
3058
2890
|
]
|
|
@@ -3062,22 +2894,22 @@ var _Pagination = ({
|
|
|
3062
2894
|
|
|
3063
2895
|
// src/Radio/Radio.tsx
|
|
3064
2896
|
import {
|
|
3065
|
-
forwardRef as
|
|
2897
|
+
forwardRef as forwardRef19
|
|
3066
2898
|
} from "react";
|
|
3067
2899
|
import { Radio } from "react-aria-components";
|
|
3068
|
-
import { cn as
|
|
2900
|
+
import { cn as cn44, useClassNames as useClassNames47 } from "@marigold/system";
|
|
3069
2901
|
|
|
3070
2902
|
// src/Radio/Context.ts
|
|
3071
|
-
import { createContext as
|
|
3072
|
-
var RadioGroupContext =
|
|
2903
|
+
import { createContext as createContext8, useContext as useContext14 } from "react";
|
|
2904
|
+
var RadioGroupContext = createContext8(
|
|
3073
2905
|
null
|
|
3074
2906
|
);
|
|
3075
|
-
var useRadioGroupContext = () =>
|
|
2907
|
+
var useRadioGroupContext = () => useContext14(RadioGroupContext);
|
|
3076
2908
|
|
|
3077
2909
|
// src/Radio/RadioGroup.tsx
|
|
3078
2910
|
import { RadioGroup } from "react-aria-components";
|
|
3079
|
-
import { cn as
|
|
3080
|
-
import { jsx as
|
|
2911
|
+
import { cn as cn43, useClassNames as useClassNames46 } from "@marigold/system";
|
|
2912
|
+
import { jsx as jsx82 } from "react/jsx-runtime";
|
|
3081
2913
|
var _RadioGroup = ({
|
|
3082
2914
|
variant,
|
|
3083
2915
|
size,
|
|
@@ -3101,7 +2933,7 @@ var _RadioGroup = ({
|
|
|
3101
2933
|
isInvalid: error,
|
|
3102
2934
|
...rest
|
|
3103
2935
|
};
|
|
3104
|
-
return /* @__PURE__ */
|
|
2936
|
+
return /* @__PURE__ */ jsx82(
|
|
3105
2937
|
FieldBase,
|
|
3106
2938
|
{
|
|
3107
2939
|
as: RadioGroup,
|
|
@@ -3112,18 +2944,18 @@ var _RadioGroup = ({
|
|
|
3112
2944
|
variant,
|
|
3113
2945
|
size,
|
|
3114
2946
|
...props,
|
|
3115
|
-
children: /* @__PURE__ */
|
|
2947
|
+
children: /* @__PURE__ */ jsx82(
|
|
3116
2948
|
"div",
|
|
3117
2949
|
{
|
|
3118
2950
|
role: "presentation",
|
|
3119
2951
|
"data-testid": "group",
|
|
3120
2952
|
"data-orientation": orientation,
|
|
3121
|
-
className:
|
|
2953
|
+
className: cn43(
|
|
3122
2954
|
classNames2.group,
|
|
3123
2955
|
"flex items-start",
|
|
3124
2956
|
orientation === "vertical" ? "flex-col gap-[0.5ch]" : "flex-row gap-[1.5ch]"
|
|
3125
2957
|
),
|
|
3126
|
-
children: /* @__PURE__ */
|
|
2958
|
+
children: /* @__PURE__ */ jsx82(RadioGroupContext.Provider, { value: { width, variant, size }, children })
|
|
3127
2959
|
}
|
|
3128
2960
|
)
|
|
3129
2961
|
}
|
|
@@ -3131,21 +2963,21 @@ var _RadioGroup = ({
|
|
|
3131
2963
|
};
|
|
3132
2964
|
|
|
3133
2965
|
// src/Radio/Radio.tsx
|
|
3134
|
-
import { Fragment as Fragment7, jsx as
|
|
3135
|
-
var Dot = () => /* @__PURE__ */
|
|
3136
|
-
var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */
|
|
2966
|
+
import { Fragment as Fragment7, jsx as jsx83, jsxs as jsxs33 } from "react/jsx-runtime";
|
|
2967
|
+
var Dot = () => /* @__PURE__ */ jsx83("svg", { viewBox: "0 0 6 6", children: /* @__PURE__ */ jsx83("circle", { fill: "currentColor", cx: "3", cy: "3", r: "3" }) });
|
|
2968
|
+
var Icon3 = ({ checked, className, ...props }) => /* @__PURE__ */ jsx83(
|
|
3137
2969
|
"div",
|
|
3138
2970
|
{
|
|
3139
|
-
className:
|
|
2971
|
+
className: cn44(
|
|
3140
2972
|
"bg-secondary-50 flex h-4 w-4 items-center justify-center rounded-[50%] border p-1",
|
|
3141
2973
|
className
|
|
3142
2974
|
),
|
|
3143
2975
|
"aria-hidden": "true",
|
|
3144
2976
|
...props,
|
|
3145
|
-
children: checked ? /* @__PURE__ */
|
|
2977
|
+
children: checked ? /* @__PURE__ */ jsx83(Dot, {}) : null
|
|
3146
2978
|
}
|
|
3147
2979
|
);
|
|
3148
|
-
var _Radio =
|
|
2980
|
+
var _Radio = forwardRef19(
|
|
3149
2981
|
({ value, disabled, width, children, ...props }, ref) => {
|
|
3150
2982
|
const { variant, size, width: groupWidth } = useRadioGroupContext();
|
|
3151
2983
|
const classNames2 = useClassNames47({
|
|
@@ -3153,11 +2985,11 @@ var _Radio = forwardRef20(
|
|
|
3153
2985
|
variant: variant || props.variant,
|
|
3154
2986
|
size: size || props.size
|
|
3155
2987
|
});
|
|
3156
|
-
return /* @__PURE__ */
|
|
2988
|
+
return /* @__PURE__ */ jsx83(
|
|
3157
2989
|
Radio,
|
|
3158
2990
|
{
|
|
3159
2991
|
ref,
|
|
3160
|
-
className:
|
|
2992
|
+
className: cn44(
|
|
3161
2993
|
"group/radio",
|
|
3162
2994
|
"relative flex items-center gap-[1ch]",
|
|
3163
2995
|
width || groupWidth || "w-full",
|
|
@@ -3167,17 +2999,17 @@ var _Radio = forwardRef20(
|
|
|
3167
2999
|
isDisabled: disabled,
|
|
3168
3000
|
...props,
|
|
3169
3001
|
children: ({ isSelected }) => /* @__PURE__ */ jsxs33(Fragment7, { children: [
|
|
3170
|
-
/* @__PURE__ */
|
|
3002
|
+
/* @__PURE__ */ jsx83(
|
|
3171
3003
|
Icon3,
|
|
3172
3004
|
{
|
|
3173
3005
|
checked: isSelected,
|
|
3174
|
-
className:
|
|
3006
|
+
className: cn44(
|
|
3175
3007
|
disabled ? "cursor-not-allowed" : "cursor-pointer",
|
|
3176
3008
|
classNames2.radio
|
|
3177
3009
|
)
|
|
3178
3010
|
}
|
|
3179
3011
|
),
|
|
3180
|
-
/* @__PURE__ */
|
|
3012
|
+
/* @__PURE__ */ jsx83("div", { className: classNames2.label, children })
|
|
3181
3013
|
] })
|
|
3182
3014
|
}
|
|
3183
3015
|
);
|
|
@@ -3186,10 +3018,10 @@ var _Radio = forwardRef20(
|
|
|
3186
3018
|
_Radio.Group = _RadioGroup;
|
|
3187
3019
|
|
|
3188
3020
|
// src/SearchField/SearchField.tsx
|
|
3189
|
-
import { forwardRef as
|
|
3021
|
+
import { forwardRef as forwardRef20 } from "react";
|
|
3190
3022
|
import { SearchField } from "react-aria-components";
|
|
3191
|
-
import { jsx as
|
|
3192
|
-
var _SearchField =
|
|
3023
|
+
import { jsx as jsx84 } from "react/jsx-runtime";
|
|
3024
|
+
var _SearchField = forwardRef20(
|
|
3193
3025
|
({ disabled, required, readOnly, error, action, ...rest }, ref) => {
|
|
3194
3026
|
const props = {
|
|
3195
3027
|
...rest,
|
|
@@ -3198,7 +3030,7 @@ var _SearchField = forwardRef21(
|
|
|
3198
3030
|
isReadOnly: readOnly,
|
|
3199
3031
|
isInvalid: error
|
|
3200
3032
|
};
|
|
3201
|
-
return /* @__PURE__ */
|
|
3033
|
+
return /* @__PURE__ */ jsx84(FieldBase, { as: SearchField, ...props, children: /* @__PURE__ */ jsx84(
|
|
3202
3034
|
SearchInput,
|
|
3203
3035
|
{
|
|
3204
3036
|
ref,
|
|
@@ -3209,15 +3041,15 @@ var _SearchField = forwardRef21(
|
|
|
3209
3041
|
);
|
|
3210
3042
|
|
|
3211
3043
|
// src/Select/Select.tsx
|
|
3212
|
-
import { forwardRef as
|
|
3044
|
+
import { forwardRef as forwardRef21 } from "react";
|
|
3213
3045
|
import {
|
|
3214
3046
|
Button as Button6,
|
|
3215
3047
|
Select,
|
|
3216
3048
|
SelectValue
|
|
3217
3049
|
} from "react-aria-components";
|
|
3218
|
-
import { cn as
|
|
3219
|
-
import { jsx as
|
|
3220
|
-
var _Select =
|
|
3050
|
+
import { cn as cn45, useClassNames as useClassNames48 } from "@marigold/system";
|
|
3051
|
+
import { jsx as jsx85, jsxs as jsxs34 } from "react/jsx-runtime";
|
|
3052
|
+
var _Select = forwardRef21(
|
|
3221
3053
|
({
|
|
3222
3054
|
disabled,
|
|
3223
3055
|
required,
|
|
@@ -3242,17 +3074,17 @@ var _Select = forwardRef22(
|
|
|
3242
3074
|
/* @__PURE__ */ jsxs34(
|
|
3243
3075
|
Button6,
|
|
3244
3076
|
{
|
|
3245
|
-
className:
|
|
3077
|
+
className: cn45(
|
|
3246
3078
|
"flex w-full items-center justify-between gap-1 overflow-hidden",
|
|
3247
3079
|
classNames2.select
|
|
3248
3080
|
),
|
|
3249
3081
|
children: [
|
|
3250
|
-
/* @__PURE__ */
|
|
3251
|
-
/* @__PURE__ */
|
|
3082
|
+
/* @__PURE__ */ jsx85(SelectValue, { className: "[&>[slot=description]]:hidden" }),
|
|
3083
|
+
/* @__PURE__ */ jsx85(ChevronDown, { className: cn45("size-4", classNames2.icon) })
|
|
3252
3084
|
]
|
|
3253
3085
|
}
|
|
3254
3086
|
),
|
|
3255
|
-
/* @__PURE__ */
|
|
3087
|
+
/* @__PURE__ */ jsx85(_Popover, { children: /* @__PURE__ */ jsx85(_ListBox, { items, children: props.children }) })
|
|
3256
3088
|
] });
|
|
3257
3089
|
}
|
|
3258
3090
|
);
|
|
@@ -3261,39 +3093,39 @@ _Select.Section = _ListBox.Section;
|
|
|
3261
3093
|
|
|
3262
3094
|
// src/SelectList/SelectList.tsx
|
|
3263
3095
|
import {
|
|
3264
|
-
forwardRef as
|
|
3096
|
+
forwardRef as forwardRef23
|
|
3265
3097
|
} from "react";
|
|
3266
3098
|
import { GridList as SelectList } from "react-aria-components";
|
|
3267
|
-
import { cn as
|
|
3099
|
+
import { cn as cn47, useClassNames as useClassNames49 } from "@marigold/system";
|
|
3268
3100
|
|
|
3269
3101
|
// src/SelectList/Context.ts
|
|
3270
|
-
import { createContext as
|
|
3271
|
-
var SelectListContext =
|
|
3102
|
+
import { createContext as createContext9, useContext as useContext15 } from "react";
|
|
3103
|
+
var SelectListContext = createContext9(
|
|
3272
3104
|
{}
|
|
3273
3105
|
);
|
|
3274
|
-
var useSelectListContext = () =>
|
|
3106
|
+
var useSelectListContext = () => useContext15(SelectListContext);
|
|
3275
3107
|
|
|
3276
3108
|
// src/SelectList/SelectListItem.tsx
|
|
3277
|
-
import { forwardRef as
|
|
3109
|
+
import { forwardRef as forwardRef22 } from "react";
|
|
3278
3110
|
import { GridListItem as SelectListItem } from "react-aria-components";
|
|
3279
|
-
import { cn as
|
|
3280
|
-
import { Fragment as Fragment8, jsx as
|
|
3281
|
-
var _SelectListItem =
|
|
3111
|
+
import { cn as cn46 } from "@marigold/system";
|
|
3112
|
+
import { Fragment as Fragment8, jsx as jsx86, jsxs as jsxs35 } from "react/jsx-runtime";
|
|
3113
|
+
var _SelectListItem = forwardRef22(
|
|
3282
3114
|
({ children, ...props }, ref) => {
|
|
3283
3115
|
let textValue = typeof children === "string" ? children : void 0;
|
|
3284
3116
|
const { classNames: classNames2 } = useSelectListContext();
|
|
3285
|
-
return /* @__PURE__ */
|
|
3117
|
+
return /* @__PURE__ */ jsx86(
|
|
3286
3118
|
SelectListItem,
|
|
3287
3119
|
{
|
|
3288
3120
|
textValue,
|
|
3289
3121
|
...props,
|
|
3290
|
-
className:
|
|
3291
|
-
"items-center group-
|
|
3122
|
+
className: cn46(
|
|
3123
|
+
"items-center group-[layout=grid]/list:flex-row",
|
|
3292
3124
|
classNames2 == null ? void 0 : classNames2.option
|
|
3293
3125
|
),
|
|
3294
3126
|
ref,
|
|
3295
3127
|
children: ({ selectionMode }) => /* @__PURE__ */ jsxs35(Fragment8, { children: [
|
|
3296
|
-
selectionMode === "multiple" && /* @__PURE__ */
|
|
3128
|
+
selectionMode === "multiple" && /* @__PURE__ */ jsx86(_Checkbox, { slot: "selection" }),
|
|
3297
3129
|
children
|
|
3298
3130
|
] })
|
|
3299
3131
|
}
|
|
@@ -3302,21 +3134,21 @@ var _SelectListItem = forwardRef23(
|
|
|
3302
3134
|
);
|
|
3303
3135
|
|
|
3304
3136
|
// src/SelectList/SelectList.tsx
|
|
3305
|
-
import { jsx as
|
|
3306
|
-
var _SelectList =
|
|
3137
|
+
import { jsx as jsx87 } from "react/jsx-runtime";
|
|
3138
|
+
var _SelectList = forwardRef23(
|
|
3307
3139
|
({ onChange, ...rest }, ref) => {
|
|
3308
3140
|
const classNames2 = useClassNames49({ component: "ListBox" });
|
|
3309
3141
|
const props = {
|
|
3310
3142
|
onSelectionChange: onChange,
|
|
3311
3143
|
...rest
|
|
3312
3144
|
};
|
|
3313
|
-
return /* @__PURE__ */
|
|
3145
|
+
return /* @__PURE__ */ jsx87(SelectListContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx87("div", { className: classNames2.container, children: /* @__PURE__ */ jsx87(
|
|
3314
3146
|
SelectList,
|
|
3315
3147
|
{
|
|
3316
3148
|
...props,
|
|
3317
3149
|
layout: "grid",
|
|
3318
3150
|
ref,
|
|
3319
|
-
className:
|
|
3151
|
+
className: cn47(
|
|
3320
3152
|
"group/list overflow-y-auto sm:max-h-[75vh] lg:max-h-[45vh]",
|
|
3321
3153
|
classNames2.list
|
|
3322
3154
|
),
|
|
@@ -3328,25 +3160,25 @@ var _SelectList = forwardRef24(
|
|
|
3328
3160
|
_SelectList.Item = _SelectListItem;
|
|
3329
3161
|
|
|
3330
3162
|
// src/Scrollable/Scrollable.tsx
|
|
3331
|
-
import { cn as
|
|
3332
|
-
import { jsx as
|
|
3163
|
+
import { cn as cn48, createVar as createVar8, width as twWidth2 } from "@marigold/system";
|
|
3164
|
+
import { jsx as jsx88 } from "react/jsx-runtime";
|
|
3333
3165
|
var Scrollable = ({
|
|
3334
3166
|
children,
|
|
3335
3167
|
width = "full",
|
|
3336
3168
|
height,
|
|
3337
3169
|
...props
|
|
3338
|
-
}) => /* @__PURE__ */
|
|
3170
|
+
}) => /* @__PURE__ */ jsx88(
|
|
3339
3171
|
"div",
|
|
3340
3172
|
{
|
|
3341
3173
|
...props,
|
|
3342
|
-
className:
|
|
3343
|
-
style:
|
|
3174
|
+
className: cn48(["sticky h-(--height) overflow-auto", twWidth2[width]]),
|
|
3175
|
+
style: createVar8({ height }),
|
|
3344
3176
|
children
|
|
3345
3177
|
}
|
|
3346
3178
|
);
|
|
3347
3179
|
|
|
3348
3180
|
// src/Slider/Slider.tsx
|
|
3349
|
-
import { forwardRef as
|
|
3181
|
+
import { forwardRef as forwardRef24 } from "react";
|
|
3350
3182
|
import {
|
|
3351
3183
|
Slider,
|
|
3352
3184
|
SliderOutput,
|
|
@@ -3354,12 +3186,12 @@ import {
|
|
|
3354
3186
|
SliderTrack
|
|
3355
3187
|
} from "react-aria-components";
|
|
3356
3188
|
import {
|
|
3357
|
-
cn as
|
|
3189
|
+
cn as cn49,
|
|
3358
3190
|
width as twWidth3,
|
|
3359
3191
|
useClassNames as useClassNames50
|
|
3360
3192
|
} from "@marigold/system";
|
|
3361
|
-
import { Fragment as Fragment9, jsx as
|
|
3362
|
-
var _Slider =
|
|
3193
|
+
import { Fragment as Fragment9, jsx as jsx89, jsxs as jsxs36 } from "react/jsx-runtime";
|
|
3194
|
+
var _Slider = forwardRef24(
|
|
3363
3195
|
({
|
|
3364
3196
|
thumbLabels,
|
|
3365
3197
|
variant,
|
|
@@ -3382,7 +3214,7 @@ var _Slider = forwardRef25(
|
|
|
3382
3214
|
FieldBase,
|
|
3383
3215
|
{
|
|
3384
3216
|
as: Slider,
|
|
3385
|
-
className:
|
|
3217
|
+
className: cn49(
|
|
3386
3218
|
"grid grid-cols-[auto_1fr] gap-y-1",
|
|
3387
3219
|
classNames2.container,
|
|
3388
3220
|
twWidth3[width]
|
|
@@ -3390,26 +3222,26 @@ var _Slider = forwardRef25(
|
|
|
3390
3222
|
ref,
|
|
3391
3223
|
...props,
|
|
3392
3224
|
children: [
|
|
3393
|
-
/* @__PURE__ */
|
|
3394
|
-
/* @__PURE__ */
|
|
3395
|
-
/* @__PURE__ */
|
|
3225
|
+
/* @__PURE__ */ jsx89(_Label, { children: props.children && props.children || label && label }),
|
|
3226
|
+
/* @__PURE__ */ jsx89(SliderOutput, { className: cn49("flex justify-end", classNames2.output), children: ({ state }) => state.values.map((_, i) => state.getThumbValueLabel(i)).join(" \u2013 ") }),
|
|
3227
|
+
/* @__PURE__ */ jsx89(
|
|
3396
3228
|
SliderTrack,
|
|
3397
3229
|
{
|
|
3398
|
-
className:
|
|
3230
|
+
className: cn49("relative col-span-2 h-2 w-full", classNames2.track),
|
|
3399
3231
|
children: ({ state }) => /* @__PURE__ */ jsxs36(Fragment9, { children: [
|
|
3400
|
-
/* @__PURE__ */
|
|
3232
|
+
/* @__PURE__ */ jsx89(
|
|
3401
3233
|
"div",
|
|
3402
3234
|
{
|
|
3403
|
-
className:
|
|
3235
|
+
className: cn49(
|
|
3404
3236
|
"absolute top-[50%] h-2 w-full translate-y-[-50%]",
|
|
3405
3237
|
classNames2.track
|
|
3406
3238
|
)
|
|
3407
3239
|
}
|
|
3408
3240
|
),
|
|
3409
|
-
/* @__PURE__ */
|
|
3241
|
+
/* @__PURE__ */ jsx89(
|
|
3410
3242
|
"div",
|
|
3411
3243
|
{
|
|
3412
|
-
className:
|
|
3244
|
+
className: cn49(
|
|
3413
3245
|
"absolute top-[50%] h-2 translate-y-[-50%]",
|
|
3414
3246
|
classNames2.selectedTrack
|
|
3415
3247
|
),
|
|
@@ -3419,10 +3251,10 @@ var _Slider = forwardRef25(
|
|
|
3419
3251
|
}
|
|
3420
3252
|
}
|
|
3421
3253
|
),
|
|
3422
|
-
state.values.map((_, i) => /* @__PURE__ */
|
|
3254
|
+
state.values.map((_, i) => /* @__PURE__ */ jsx89(
|
|
3423
3255
|
SliderThumb,
|
|
3424
3256
|
{
|
|
3425
|
-
className:
|
|
3257
|
+
className: cn49("top-1/2 cursor-pointer", classNames2.thumb),
|
|
3426
3258
|
index: i,
|
|
3427
3259
|
"aria-label": thumbLabels == null ? void 0 : thumbLabels[i],
|
|
3428
3260
|
name: thumbLabels == null ? void 0 : thumbLabels[i]
|
|
@@ -3439,12 +3271,12 @@ var _Slider = forwardRef25(
|
|
|
3439
3271
|
);
|
|
3440
3272
|
|
|
3441
3273
|
// src/Split/Split.tsx
|
|
3442
|
-
import { jsx as
|
|
3443
|
-
var Split = () => /* @__PURE__ */
|
|
3274
|
+
import { jsx as jsx90 } from "react/jsx-runtime";
|
|
3275
|
+
var Split = () => /* @__PURE__ */ jsx90("div", { role: "separator", className: "grow" });
|
|
3444
3276
|
|
|
3445
3277
|
// src/Stack/Stack.tsx
|
|
3446
|
-
import { alignment as
|
|
3447
|
-
import { jsx as
|
|
3278
|
+
import { alignment as alignment2, cn as cn50, gapSpace as gapSpace8 } from "@marigold/system";
|
|
3279
|
+
import { jsx as jsx91 } from "react/jsx-runtime";
|
|
3448
3280
|
var Stack = ({
|
|
3449
3281
|
children,
|
|
3450
3282
|
space = 0,
|
|
@@ -3454,14 +3286,14 @@ var Stack = ({
|
|
|
3454
3286
|
...props
|
|
3455
3287
|
}) => {
|
|
3456
3288
|
var _a, _b, _c, _d;
|
|
3457
|
-
return /* @__PURE__ */
|
|
3289
|
+
return /* @__PURE__ */ jsx91(
|
|
3458
3290
|
"div",
|
|
3459
3291
|
{
|
|
3460
|
-
className:
|
|
3292
|
+
className: cn50(
|
|
3461
3293
|
"flex flex-col",
|
|
3462
|
-
|
|
3463
|
-
alignX && ((_b = (_a =
|
|
3464
|
-
alignY && ((_d = (_c =
|
|
3294
|
+
gapSpace8[space],
|
|
3295
|
+
alignX && ((_b = (_a = alignment2) == null ? void 0 : _a.vertical) == null ? void 0 : _b.alignmentX[alignX]),
|
|
3296
|
+
alignY && ((_d = (_c = alignment2) == null ? void 0 : _c.vertical) == null ? void 0 : _d.alignmentY[alignY]),
|
|
3465
3297
|
stretch && "h-full w-full"
|
|
3466
3298
|
),
|
|
3467
3299
|
...props,
|
|
@@ -3471,15 +3303,15 @@ var Stack = ({
|
|
|
3471
3303
|
};
|
|
3472
3304
|
|
|
3473
3305
|
// src/Switch/Switch.tsx
|
|
3474
|
-
import { forwardRef as
|
|
3306
|
+
import { forwardRef as forwardRef25 } from "react";
|
|
3475
3307
|
import { Switch } from "react-aria-components";
|
|
3476
3308
|
import {
|
|
3477
|
-
cn as
|
|
3309
|
+
cn as cn51,
|
|
3478
3310
|
width as twWidth4,
|
|
3479
3311
|
useClassNames as useClassNames51
|
|
3480
3312
|
} from "@marigold/system";
|
|
3481
|
-
import { jsx as
|
|
3482
|
-
var _Switch =
|
|
3313
|
+
import { jsx as jsx92, jsxs as jsxs37 } from "react/jsx-runtime";
|
|
3314
|
+
var _Switch = forwardRef25(
|
|
3483
3315
|
({
|
|
3484
3316
|
variant,
|
|
3485
3317
|
size,
|
|
@@ -3502,28 +3334,28 @@ var _Switch = forwardRef26(
|
|
|
3502
3334
|
{
|
|
3503
3335
|
...props,
|
|
3504
3336
|
ref,
|
|
3505
|
-
className:
|
|
3337
|
+
className: cn51(
|
|
3506
3338
|
twWidth4[width],
|
|
3507
3339
|
"group/switch",
|
|
3508
3340
|
"flex items-center gap-[1ch]",
|
|
3509
3341
|
classNames2.container
|
|
3510
3342
|
),
|
|
3511
3343
|
children: [
|
|
3512
|
-
/* @__PURE__ */
|
|
3513
|
-
/* @__PURE__ */
|
|
3344
|
+
/* @__PURE__ */ jsx92(_Label, { elementType: "span", children }),
|
|
3345
|
+
/* @__PURE__ */ jsx92("div", { className: "relative", children: /* @__PURE__ */ jsx92(
|
|
3514
3346
|
"div",
|
|
3515
3347
|
{
|
|
3516
|
-
className:
|
|
3348
|
+
className: cn51(
|
|
3517
3349
|
"h-6 w-12 basis-12 rounded-3xl group-disabled/switch:cursor-not-allowed",
|
|
3518
3350
|
classNames2.track
|
|
3519
3351
|
),
|
|
3520
|
-
children: /* @__PURE__ */
|
|
3352
|
+
children: /* @__PURE__ */ jsx92(
|
|
3521
3353
|
"div",
|
|
3522
3354
|
{
|
|
3523
|
-
className:
|
|
3355
|
+
className: cn51(
|
|
3524
3356
|
"h-[22px] w-[22px]",
|
|
3525
3357
|
"cubic-bezier(.7,0,.3,1)",
|
|
3526
|
-
"absolute left-0
|
|
3358
|
+
"absolute top-px left-0",
|
|
3527
3359
|
"block translate-x-[1px] rounded-full transition-all duration-100 ease-in-out will-change-transform",
|
|
3528
3360
|
"group-selected/switch:translate-x-[calc(47px_-_100%)]",
|
|
3529
3361
|
classNames2.thumb
|
|
@@ -3539,7 +3371,7 @@ var _Switch = forwardRef26(
|
|
|
3539
3371
|
);
|
|
3540
3372
|
|
|
3541
3373
|
// src/Table/Table.tsx
|
|
3542
|
-
import { useRef as
|
|
3374
|
+
import { useRef as useRef12 } from "react";
|
|
3543
3375
|
import { useTable } from "@react-aria/table";
|
|
3544
3376
|
import {
|
|
3545
3377
|
TableBody as Body2,
|
|
@@ -3549,21 +3381,21 @@ import {
|
|
|
3549
3381
|
Row,
|
|
3550
3382
|
useTableState
|
|
3551
3383
|
} from "@react-stately/table";
|
|
3552
|
-
import { cn as
|
|
3384
|
+
import { cn as cn57, useClassNames as useClassNames53 } from "@marigold/system";
|
|
3553
3385
|
|
|
3554
3386
|
// src/Table/Context.tsx
|
|
3555
|
-
import { createContext as
|
|
3556
|
-
var TableContext =
|
|
3557
|
-
var useTableContext = () =>
|
|
3387
|
+
import { createContext as createContext10, useContext as useContext16 } from "react";
|
|
3388
|
+
var TableContext = createContext10({});
|
|
3389
|
+
var useTableContext = () => useContext16(TableContext);
|
|
3558
3390
|
|
|
3559
3391
|
// src/Table/TableBody.tsx
|
|
3560
3392
|
import { useTableRowGroup } from "@react-aria/table";
|
|
3561
|
-
import { jsx as
|
|
3393
|
+
import { jsx as jsx93 } from "react/jsx-runtime";
|
|
3562
3394
|
var TableBody = ({ children, emptyState }) => {
|
|
3563
3395
|
const { rowGroupProps } = useTableRowGroup();
|
|
3564
3396
|
const { state, classNames: classNames2 } = useTableContext();
|
|
3565
3397
|
if (state.collection.size === 0 && emptyState) {
|
|
3566
|
-
return /* @__PURE__ */
|
|
3398
|
+
return /* @__PURE__ */ jsx93("tbody", { children: /* @__PURE__ */ jsx93("tr", { className: classNames2 == null ? void 0 : classNames2.row, role: "row", children: /* @__PURE__ */ jsx93(
|
|
3567
3399
|
"td",
|
|
3568
3400
|
{
|
|
3569
3401
|
className: classNames2 == null ? void 0 : classNames2.cell,
|
|
@@ -3573,18 +3405,18 @@ var TableBody = ({ children, emptyState }) => {
|
|
|
3573
3405
|
}
|
|
3574
3406
|
) }) });
|
|
3575
3407
|
}
|
|
3576
|
-
return /* @__PURE__ */
|
|
3408
|
+
return /* @__PURE__ */ jsx93("tbody", { ...rowGroupProps, children });
|
|
3577
3409
|
};
|
|
3578
3410
|
|
|
3579
3411
|
// src/Table/TableCell.tsx
|
|
3580
|
-
import { useRef as
|
|
3581
|
-
import { useFocusRing
|
|
3412
|
+
import { useRef as useRef6 } from "react";
|
|
3413
|
+
import { useFocusRing } from "@react-aria/focus";
|
|
3582
3414
|
import { useTableCell } from "@react-aria/table";
|
|
3583
|
-
import { mergeProps
|
|
3584
|
-
import { cn as
|
|
3585
|
-
import { jsx as
|
|
3415
|
+
import { mergeProps } from "@react-aria/utils";
|
|
3416
|
+
import { cn as cn52, useStateProps } from "@marigold/system";
|
|
3417
|
+
import { jsx as jsx94 } from "react/jsx-runtime";
|
|
3586
3418
|
var TableCell = ({ cell, align = "left" }) => {
|
|
3587
|
-
const ref =
|
|
3419
|
+
const ref = useRef6(null);
|
|
3588
3420
|
const { interactive, state, classNames: classNames2 } = useTableContext();
|
|
3589
3421
|
const disabled = state.disabledKeys.has(cell.parentKey);
|
|
3590
3422
|
const { gridCellProps } = useTableCell(
|
|
@@ -3603,14 +3435,14 @@ var TableCell = ({ cell, align = "left" }) => {
|
|
|
3603
3435
|
onMouseDown: (e) => e.stopPropagation(),
|
|
3604
3436
|
onPointerDown: (e) => e.stopPropagation()
|
|
3605
3437
|
};
|
|
3606
|
-
const { focusProps, isFocusVisible } =
|
|
3607
|
-
const stateProps =
|
|
3608
|
-
return /* @__PURE__ */
|
|
3438
|
+
const { focusProps, isFocusVisible } = useFocusRing();
|
|
3439
|
+
const stateProps = useStateProps({ disabled, focusVisible: isFocusVisible });
|
|
3440
|
+
return /* @__PURE__ */ jsx94(
|
|
3609
3441
|
"td",
|
|
3610
3442
|
{
|
|
3611
3443
|
ref,
|
|
3612
|
-
className:
|
|
3613
|
-
...
|
|
3444
|
+
className: cn52(classNames2 == null ? void 0 : classNames2.cell),
|
|
3445
|
+
...mergeProps(cellProps, focusProps),
|
|
3614
3446
|
...stateProps,
|
|
3615
3447
|
align,
|
|
3616
3448
|
children: cell.rendered
|
|
@@ -3619,11 +3451,11 @@ var TableCell = ({ cell, align = "left" }) => {
|
|
|
3619
3451
|
};
|
|
3620
3452
|
|
|
3621
3453
|
// src/Table/TableCheckboxCell.tsx
|
|
3622
|
-
import { useRef as
|
|
3623
|
-
import { useFocusRing as
|
|
3454
|
+
import { useRef as useRef7 } from "react";
|
|
3455
|
+
import { useFocusRing as useFocusRing2 } from "@react-aria/focus";
|
|
3624
3456
|
import { useTableCell as useTableCell2, useTableSelectionCheckbox } from "@react-aria/table";
|
|
3625
|
-
import { mergeProps as
|
|
3626
|
-
import { cn as
|
|
3457
|
+
import { mergeProps as mergeProps2 } from "@react-aria/utils";
|
|
3458
|
+
import { cn as cn53, useStateProps as useStateProps2 } from "@marigold/system";
|
|
3627
3459
|
|
|
3628
3460
|
// src/Table/utils.ts
|
|
3629
3461
|
var mapCheckboxProps = ({
|
|
@@ -3646,9 +3478,9 @@ var mapCheckboxProps = ({
|
|
|
3646
3478
|
};
|
|
3647
3479
|
|
|
3648
3480
|
// src/Table/TableCheckboxCell.tsx
|
|
3649
|
-
import { jsx as
|
|
3481
|
+
import { jsx as jsx95 } from "react/jsx-runtime";
|
|
3650
3482
|
var TableCheckboxCell = ({ cell }) => {
|
|
3651
|
-
const ref =
|
|
3483
|
+
const ref = useRef7(null);
|
|
3652
3484
|
const { state, classNames: classNames2 } = useTableContext();
|
|
3653
3485
|
const disabled = state.disabledKeys.has(cell.parentKey);
|
|
3654
3486
|
const { gridCellProps } = useTableCell2(
|
|
@@ -3661,35 +3493,35 @@ var TableCheckboxCell = ({ cell }) => {
|
|
|
3661
3493
|
const { checkboxProps } = mapCheckboxProps(
|
|
3662
3494
|
useTableSelectionCheckbox({ key: cell.parentKey }, state)
|
|
3663
3495
|
);
|
|
3664
|
-
const { focusProps, isFocusVisible } =
|
|
3665
|
-
const stateProps =
|
|
3666
|
-
return /* @__PURE__ */
|
|
3496
|
+
const { focusProps, isFocusVisible } = useFocusRing2();
|
|
3497
|
+
const stateProps = useStateProps2({ disabled, focusVisible: isFocusVisible });
|
|
3498
|
+
return /* @__PURE__ */ jsx95(
|
|
3667
3499
|
"td",
|
|
3668
3500
|
{
|
|
3669
3501
|
ref,
|
|
3670
|
-
className:
|
|
3671
|
-
...
|
|
3502
|
+
className: cn53("text-center align-middle leading-none", classNames2 == null ? void 0 : classNames2.cell),
|
|
3503
|
+
...mergeProps2(gridCellProps, focusProps),
|
|
3672
3504
|
...stateProps,
|
|
3673
|
-
children: /* @__PURE__ */
|
|
3505
|
+
children: /* @__PURE__ */ jsx95(_Checkbox, { ...checkboxProps })
|
|
3674
3506
|
}
|
|
3675
3507
|
);
|
|
3676
3508
|
};
|
|
3677
3509
|
|
|
3678
3510
|
// src/Table/TableColumnHeader.tsx
|
|
3679
|
-
import { useRef as
|
|
3680
|
-
import { useFocusRing as
|
|
3511
|
+
import { useRef as useRef8 } from "react";
|
|
3512
|
+
import { useFocusRing as useFocusRing3 } from "@react-aria/focus";
|
|
3681
3513
|
import { useHover } from "@react-aria/interactions";
|
|
3682
3514
|
import { useTableColumnHeader } from "@react-aria/table";
|
|
3683
|
-
import { mergeProps as
|
|
3684
|
-
import { cn as
|
|
3685
|
-
import { jsx as
|
|
3515
|
+
import { mergeProps as mergeProps3 } from "@react-aria/utils";
|
|
3516
|
+
import { cn as cn54, width as twWidth5, useStateProps as useStateProps3 } from "@marigold/system";
|
|
3517
|
+
import { jsx as jsx96, jsxs as jsxs38 } from "react/jsx-runtime";
|
|
3686
3518
|
var TableColumnHeader = ({
|
|
3687
3519
|
column,
|
|
3688
3520
|
width = "auto",
|
|
3689
3521
|
align = "left"
|
|
3690
3522
|
}) => {
|
|
3691
3523
|
var _a, _b;
|
|
3692
|
-
const ref =
|
|
3524
|
+
const ref = useRef8(null);
|
|
3693
3525
|
const { state, classNames: classNames2 } = useTableContext();
|
|
3694
3526
|
const { columnHeaderProps } = useTableColumnHeader(
|
|
3695
3527
|
{
|
|
@@ -3699,8 +3531,8 @@ var TableColumnHeader = ({
|
|
|
3699
3531
|
ref
|
|
3700
3532
|
);
|
|
3701
3533
|
const { hoverProps, isHovered } = useHover({});
|
|
3702
|
-
const { focusProps, isFocusVisible } =
|
|
3703
|
-
const stateProps =
|
|
3534
|
+
const { focusProps, isFocusVisible } = useFocusRing3();
|
|
3535
|
+
const stateProps = useStateProps3({
|
|
3704
3536
|
hover: isHovered,
|
|
3705
3537
|
focusVisible: isFocusVisible
|
|
3706
3538
|
});
|
|
@@ -3709,13 +3541,13 @@ var TableColumnHeader = ({
|
|
|
3709
3541
|
{
|
|
3710
3542
|
colSpan: column.colspan,
|
|
3711
3543
|
ref,
|
|
3712
|
-
className:
|
|
3713
|
-
...
|
|
3544
|
+
className: cn54("cursor-default", twWidth5[width], classNames2 == null ? void 0 : classNames2.header),
|
|
3545
|
+
...mergeProps3(columnHeaderProps, hoverProps, focusProps),
|
|
3714
3546
|
...stateProps,
|
|
3715
3547
|
align,
|
|
3716
3548
|
children: [
|
|
3717
3549
|
column.rendered,
|
|
3718
|
-
column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */
|
|
3550
|
+
column.props.allowsSorting && (((_a = state.sortDescriptor) == null ? void 0 : _a.column) === column.key ? ((_b = state.sortDescriptor) == null ? void 0 : _b.direction) === "ascending" ? /* @__PURE__ */ jsx96(SortUp, { className: "inline-block" }) : /* @__PURE__ */ jsx96(SortDown, { className: "inline-block" }) : /* @__PURE__ */ jsx96("span", { className: "invisible", children: /* @__PURE__ */ jsx96(SortDown, { className: "inline-block" }) }))
|
|
3719
3551
|
]
|
|
3720
3552
|
}
|
|
3721
3553
|
);
|
|
@@ -3723,10 +3555,10 @@ var TableColumnHeader = ({
|
|
|
3723
3555
|
|
|
3724
3556
|
// src/Table/TableHeader.tsx
|
|
3725
3557
|
import { useTableRowGroup as useTableRowGroup2 } from "@react-aria/table";
|
|
3726
|
-
import { jsx as
|
|
3558
|
+
import { jsx as jsx97 } from "react/jsx-runtime";
|
|
3727
3559
|
var TableHeader = ({ stickyHeader, children }) => {
|
|
3728
3560
|
const { rowGroupProps } = useTableRowGroup2();
|
|
3729
|
-
return /* @__PURE__ */
|
|
3561
|
+
return /* @__PURE__ */ jsx97(
|
|
3730
3562
|
"thead",
|
|
3731
3563
|
{
|
|
3732
3564
|
...rowGroupProps,
|
|
@@ -3737,26 +3569,26 @@ var TableHeader = ({ stickyHeader, children }) => {
|
|
|
3737
3569
|
};
|
|
3738
3570
|
|
|
3739
3571
|
// src/Table/TableHeaderRow.tsx
|
|
3740
|
-
import { useRef as
|
|
3572
|
+
import { useRef as useRef9 } from "react";
|
|
3741
3573
|
import { useTableHeaderRow } from "@react-aria/table";
|
|
3742
|
-
import { jsx as
|
|
3574
|
+
import { jsx as jsx98 } from "react/jsx-runtime";
|
|
3743
3575
|
var TableHeaderRow = ({ item, children }) => {
|
|
3744
3576
|
const { state } = useTableContext();
|
|
3745
|
-
const ref =
|
|
3577
|
+
const ref = useRef9(null);
|
|
3746
3578
|
const { rowProps } = useTableHeaderRow({ node: item }, state, ref);
|
|
3747
|
-
return /* @__PURE__ */
|
|
3579
|
+
return /* @__PURE__ */ jsx98("tr", { ...rowProps, ref, children });
|
|
3748
3580
|
};
|
|
3749
3581
|
|
|
3750
3582
|
// src/Table/TableRow.tsx
|
|
3751
|
-
import { useRef as
|
|
3752
|
-
import { useFocusRing as
|
|
3583
|
+
import { useRef as useRef10 } from "react";
|
|
3584
|
+
import { useFocusRing as useFocusRing4 } from "@react-aria/focus";
|
|
3753
3585
|
import { useHover as useHover2 } from "@react-aria/interactions";
|
|
3754
3586
|
import { useTableRow } from "@react-aria/table";
|
|
3755
|
-
import { mergeProps as
|
|
3756
|
-
import { cn as
|
|
3757
|
-
import { jsx as
|
|
3587
|
+
import { mergeProps as mergeProps4 } from "@react-aria/utils";
|
|
3588
|
+
import { cn as cn55, useClassNames as useClassNames52, useStateProps as useStateProps4 } from "@marigold/system";
|
|
3589
|
+
import { jsx as jsx99 } from "react/jsx-runtime";
|
|
3758
3590
|
var TableRow = ({ children, row }) => {
|
|
3759
|
-
const ref =
|
|
3591
|
+
const ref = useRef10(null);
|
|
3760
3592
|
const { interactive, state, ...ctx } = useTableContext();
|
|
3761
3593
|
const { variant, size } = row.props;
|
|
3762
3594
|
const classNames2 = useClassNames52({
|
|
@@ -3773,28 +3605,28 @@ var TableRow = ({ children, row }) => {
|
|
|
3773
3605
|
);
|
|
3774
3606
|
const disabled = state.disabledKeys.has(row.key);
|
|
3775
3607
|
const selected = state.selectionManager.isSelected(row.key);
|
|
3776
|
-
const { focusProps, isFocusVisible } =
|
|
3608
|
+
const { focusProps, isFocusVisible } = useFocusRing4();
|
|
3777
3609
|
const { hoverProps, isHovered } = useHover2({
|
|
3778
3610
|
isDisabled: disabled || !interactive
|
|
3779
3611
|
});
|
|
3780
|
-
const stateProps =
|
|
3612
|
+
const stateProps = useStateProps4({
|
|
3781
3613
|
disabled,
|
|
3782
3614
|
selected,
|
|
3783
3615
|
hover: isHovered,
|
|
3784
3616
|
focusVisible: isFocusVisible,
|
|
3785
3617
|
active: isPressed
|
|
3786
3618
|
});
|
|
3787
|
-
return /* @__PURE__ */
|
|
3619
|
+
return /* @__PURE__ */ jsx99(
|
|
3788
3620
|
"tr",
|
|
3789
3621
|
{
|
|
3790
3622
|
ref,
|
|
3791
|
-
className:
|
|
3623
|
+
className: cn55(
|
|
3792
3624
|
[
|
|
3793
3625
|
!interactive ? "cursor-text" : disabled ? "cursor-default" : "cursor-pointer"
|
|
3794
3626
|
],
|
|
3795
3627
|
classNames2 == null ? void 0 : classNames2.row
|
|
3796
3628
|
),
|
|
3797
|
-
...
|
|
3629
|
+
...mergeProps4(rowProps, focusProps, hoverProps),
|
|
3798
3630
|
...stateProps,
|
|
3799
3631
|
children
|
|
3800
3632
|
}
|
|
@@ -3802,26 +3634,26 @@ var TableRow = ({ children, row }) => {
|
|
|
3802
3634
|
};
|
|
3803
3635
|
|
|
3804
3636
|
// src/Table/TableSelectAllCell.tsx
|
|
3805
|
-
import { useRef as
|
|
3806
|
-
import { useFocusRing as
|
|
3637
|
+
import { useRef as useRef11 } from "react";
|
|
3638
|
+
import { useFocusRing as useFocusRing5 } from "@react-aria/focus";
|
|
3807
3639
|
import { useHover as useHover3 } from "@react-aria/interactions";
|
|
3808
3640
|
import {
|
|
3809
3641
|
useTableColumnHeader as useTableColumnHeader2,
|
|
3810
3642
|
useTableSelectAllCheckbox
|
|
3811
3643
|
} from "@react-aria/table";
|
|
3812
|
-
import { mergeProps as
|
|
3644
|
+
import { mergeProps as mergeProps5 } from "@react-aria/utils";
|
|
3813
3645
|
import {
|
|
3814
|
-
cn as
|
|
3646
|
+
cn as cn56,
|
|
3815
3647
|
width as twWidth6,
|
|
3816
|
-
useStateProps as
|
|
3648
|
+
useStateProps as useStateProps5
|
|
3817
3649
|
} from "@marigold/system";
|
|
3818
|
-
import { jsx as
|
|
3650
|
+
import { jsx as jsx100 } from "react/jsx-runtime";
|
|
3819
3651
|
var TableSelectAllCell = ({
|
|
3820
3652
|
column,
|
|
3821
3653
|
width = "auto",
|
|
3822
3654
|
align = "left"
|
|
3823
3655
|
}) => {
|
|
3824
|
-
const ref =
|
|
3656
|
+
const ref = useRef11(null);
|
|
3825
3657
|
const { state, classNames: classNames2 } = useTableContext();
|
|
3826
3658
|
const { columnHeaderProps } = useTableColumnHeader2(
|
|
3827
3659
|
{
|
|
@@ -3832,26 +3664,26 @@ var TableSelectAllCell = ({
|
|
|
3832
3664
|
);
|
|
3833
3665
|
const { checkboxProps } = mapCheckboxProps(useTableSelectAllCheckbox(state));
|
|
3834
3666
|
const { hoverProps, isHovered } = useHover3({});
|
|
3835
|
-
const { focusProps, isFocusVisible } =
|
|
3836
|
-
const stateProps =
|
|
3667
|
+
const { focusProps, isFocusVisible } = useFocusRing5();
|
|
3668
|
+
const stateProps = useStateProps5({
|
|
3837
3669
|
hover: isHovered,
|
|
3838
3670
|
focusVisible: isFocusVisible
|
|
3839
3671
|
});
|
|
3840
|
-
return /* @__PURE__ */
|
|
3672
|
+
return /* @__PURE__ */ jsx100(
|
|
3841
3673
|
"th",
|
|
3842
3674
|
{
|
|
3843
3675
|
ref,
|
|
3844
|
-
className:
|
|
3845
|
-
...
|
|
3676
|
+
className: cn56(twWidth6[width], ["leading-none"], classNames2 == null ? void 0 : classNames2.header),
|
|
3677
|
+
...mergeProps5(columnHeaderProps, hoverProps, focusProps),
|
|
3846
3678
|
...stateProps,
|
|
3847
3679
|
align,
|
|
3848
|
-
children: /* @__PURE__ */
|
|
3680
|
+
children: /* @__PURE__ */ jsx100(_Checkbox, { ...checkboxProps })
|
|
3849
3681
|
}
|
|
3850
3682
|
);
|
|
3851
3683
|
};
|
|
3852
3684
|
|
|
3853
3685
|
// src/Table/Table.tsx
|
|
3854
|
-
import { jsx as
|
|
3686
|
+
import { jsx as jsx101, jsxs as jsxs39 } from "react/jsx-runtime";
|
|
3855
3687
|
var Table = ({
|
|
3856
3688
|
variant,
|
|
3857
3689
|
size,
|
|
@@ -3863,7 +3695,7 @@ var Table = ({
|
|
|
3863
3695
|
...props
|
|
3864
3696
|
}) => {
|
|
3865
3697
|
const interactive = selectionMode !== "none";
|
|
3866
|
-
const tableRef =
|
|
3698
|
+
const tableRef = useRef12(null);
|
|
3867
3699
|
const state = useTableState({
|
|
3868
3700
|
...props,
|
|
3869
3701
|
selectionMode,
|
|
@@ -3880,7 +3712,7 @@ var Table = ({
|
|
|
3880
3712
|
size
|
|
3881
3713
|
});
|
|
3882
3714
|
const { collection } = state;
|
|
3883
|
-
return /* @__PURE__ */
|
|
3715
|
+
return /* @__PURE__ */ jsx101(
|
|
3884
3716
|
TableContext.Provider,
|
|
3885
3717
|
{
|
|
3886
3718
|
value: { state, interactive, classNames: classNames2, variant, size },
|
|
@@ -3888,7 +3720,7 @@ var Table = ({
|
|
|
3888
3720
|
"table",
|
|
3889
3721
|
{
|
|
3890
3722
|
ref: tableRef,
|
|
3891
|
-
className:
|
|
3723
|
+
className: cn57(
|
|
3892
3724
|
"group/table",
|
|
3893
3725
|
"border-collapse",
|
|
3894
3726
|
stretch ? "table w-full" : "block",
|
|
@@ -3896,10 +3728,10 @@ var Table = ({
|
|
|
3896
3728
|
),
|
|
3897
3729
|
...gridProps,
|
|
3898
3730
|
children: [
|
|
3899
|
-
/* @__PURE__ */
|
|
3731
|
+
/* @__PURE__ */ jsx101(TableHeader, { stickyHeader, children: collection.headerRows.map((headerRow) => /* @__PURE__ */ jsx101(TableHeaderRow, { item: headerRow, children: [...collection.getChildren(headerRow.key)].map(
|
|
3900
3732
|
(column) => {
|
|
3901
3733
|
var _a, _b, _c, _d, _e;
|
|
3902
|
-
return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */
|
|
3734
|
+
return ((_a = column.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx101(
|
|
3903
3735
|
TableSelectAllCell,
|
|
3904
3736
|
{
|
|
3905
3737
|
width: (_b = column.props) == null ? void 0 : _b.width,
|
|
@@ -3907,7 +3739,7 @@ var Table = ({
|
|
|
3907
3739
|
align: (_c = column.props) == null ? void 0 : _c.align
|
|
3908
3740
|
},
|
|
3909
3741
|
column.key
|
|
3910
|
-
) : /* @__PURE__ */
|
|
3742
|
+
) : /* @__PURE__ */ jsx101(
|
|
3911
3743
|
TableColumnHeader,
|
|
3912
3744
|
{
|
|
3913
3745
|
width: (_d = column.props) == null ? void 0 : _d.width,
|
|
@@ -3920,10 +3752,10 @@ var Table = ({
|
|
|
3920
3752
|
) }, headerRow.key)) }),
|
|
3921
3753
|
/* @__PURE__ */ jsxs39(TableBody, { emptyState, children: [
|
|
3922
3754
|
...collection.rows.map(
|
|
3923
|
-
(row) => row.type === "item" && /* @__PURE__ */
|
|
3755
|
+
(row) => row.type === "item" && /* @__PURE__ */ jsx101(TableRow, { row, children: [...collection.getChildren(row.key)].map((cell, index) => {
|
|
3924
3756
|
var _a, _b;
|
|
3925
3757
|
const currentColumn = collection.columns[index];
|
|
3926
|
-
return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */
|
|
3758
|
+
return ((_a = cell.props) == null ? void 0 : _a.isSelectionCell) ? /* @__PURE__ */ jsx101(TableCheckboxCell, { cell }, cell.key) : /* @__PURE__ */ jsx101(
|
|
3927
3759
|
TableCell,
|
|
3928
3760
|
{
|
|
3929
3761
|
align: (_b = currentColumn.props) == null ? void 0 : _b.align,
|
|
@@ -3949,18 +3781,15 @@ Table.Row = Row;
|
|
|
3949
3781
|
// src/Text/Text.tsx
|
|
3950
3782
|
import { Text as Text2 } from "react-aria-components";
|
|
3951
3783
|
import {
|
|
3952
|
-
cn as
|
|
3953
|
-
createVar as createVar11,
|
|
3784
|
+
cn as cn58,
|
|
3954
3785
|
cursorStyle,
|
|
3955
3786
|
fontWeight,
|
|
3956
|
-
getColor as getColor2,
|
|
3957
3787
|
textAlign as textAlign2,
|
|
3958
3788
|
textSize,
|
|
3959
3789
|
textStyle,
|
|
3960
|
-
useClassNames as useClassNames54
|
|
3961
|
-
useTheme as useTheme3
|
|
3790
|
+
useClassNames as useClassNames54
|
|
3962
3791
|
} from "@marigold/system";
|
|
3963
|
-
import { jsx as
|
|
3792
|
+
import { jsx as jsx102 } from "react/jsx-runtime";
|
|
3964
3793
|
var _Text = ({
|
|
3965
3794
|
variant,
|
|
3966
3795
|
size,
|
|
@@ -3974,7 +3803,6 @@ var _Text = ({
|
|
|
3974
3803
|
as = "div",
|
|
3975
3804
|
...props
|
|
3976
3805
|
}) => {
|
|
3977
|
-
const theme = useTheme3();
|
|
3978
3806
|
const classNames2 = useClassNames54({
|
|
3979
3807
|
component: "Text",
|
|
3980
3808
|
variant,
|
|
@@ -3982,13 +3810,14 @@ var _Text = ({
|
|
|
3982
3810
|
});
|
|
3983
3811
|
const Component = props.slot ? Text2 : as;
|
|
3984
3812
|
const elementType = props.slot ? { elementType: as } : {};
|
|
3985
|
-
return /* @__PURE__ */
|
|
3813
|
+
return /* @__PURE__ */ jsx102(
|
|
3986
3814
|
Component,
|
|
3987
3815
|
{
|
|
3988
3816
|
...props,
|
|
3989
3817
|
...elementType,
|
|
3990
|
-
className:
|
|
3991
|
-
"
|
|
3818
|
+
className: cn58(
|
|
3819
|
+
"max-w-(--maxTextWidth)",
|
|
3820
|
+
// possibly set by a <Container>
|
|
3992
3821
|
classNames2,
|
|
3993
3822
|
fontStyle && textStyle[fontStyle],
|
|
3994
3823
|
align && textAlign2[align],
|
|
@@ -3996,25 +3825,18 @@ var _Text = ({
|
|
|
3996
3825
|
weight && fontWeight[weight],
|
|
3997
3826
|
fontSize && textSize[fontSize]
|
|
3998
3827
|
),
|
|
3999
|
-
style:
|
|
4000
|
-
color: color && getColor2(
|
|
4001
|
-
theme,
|
|
4002
|
-
color,
|
|
4003
|
-
color
|
|
4004
|
-
/* fallback */
|
|
4005
|
-
)
|
|
4006
|
-
}),
|
|
3828
|
+
style: { color: color && `var(--color-${color})` },
|
|
4007
3829
|
children
|
|
4008
3830
|
}
|
|
4009
3831
|
);
|
|
4010
3832
|
};
|
|
4011
3833
|
|
|
4012
3834
|
// src/TextArea/TextArea.tsx
|
|
4013
|
-
import { forwardRef as
|
|
3835
|
+
import { forwardRef as forwardRef26 } from "react";
|
|
4014
3836
|
import { TextArea, TextField } from "react-aria-components";
|
|
4015
3837
|
import { useClassNames as useClassNames55 } from "@marigold/system";
|
|
4016
|
-
import { jsx as
|
|
4017
|
-
var _TextArea =
|
|
3838
|
+
import { jsx as jsx103 } from "react/jsx-runtime";
|
|
3839
|
+
var _TextArea = forwardRef26(
|
|
4018
3840
|
({
|
|
4019
3841
|
variant,
|
|
4020
3842
|
size,
|
|
@@ -4033,15 +3855,15 @@ var _TextArea = forwardRef27(
|
|
|
4033
3855
|
isRequired: required,
|
|
4034
3856
|
...rest
|
|
4035
3857
|
};
|
|
4036
|
-
return /* @__PURE__ */
|
|
3858
|
+
return /* @__PURE__ */ jsx103(FieldBase, { as: TextField, ...props, variant, size, children: /* @__PURE__ */ jsx103(TextArea, { className: classNames2, ref, rows }) });
|
|
4037
3859
|
}
|
|
4038
3860
|
);
|
|
4039
3861
|
|
|
4040
3862
|
// src/TextField/TextField.tsx
|
|
4041
|
-
import { forwardRef as
|
|
3863
|
+
import { forwardRef as forwardRef27 } from "react";
|
|
4042
3864
|
import { TextField as TextField2 } from "react-aria-components";
|
|
4043
|
-
import { jsx as
|
|
4044
|
-
var _TextField =
|
|
3865
|
+
import { jsx as jsx104 } from "react/jsx-runtime";
|
|
3866
|
+
var _TextField = forwardRef27(
|
|
4045
3867
|
({ required, disabled, readOnly, error, ...rest }, ref) => {
|
|
4046
3868
|
const props = {
|
|
4047
3869
|
isDisabled: disabled,
|
|
@@ -4050,13 +3872,13 @@ var _TextField = forwardRef28(
|
|
|
4050
3872
|
isRequired: required,
|
|
4051
3873
|
...rest
|
|
4052
3874
|
};
|
|
4053
|
-
return /* @__PURE__ */
|
|
3875
|
+
return /* @__PURE__ */ jsx104(FieldBase, { as: TextField2, ...props, children: /* @__PURE__ */ jsx104(_Input, { ref }) });
|
|
4054
3876
|
}
|
|
4055
3877
|
);
|
|
4056
3878
|
|
|
4057
3879
|
// src/Tiles/Tiles.tsx
|
|
4058
|
-
import { cn as
|
|
4059
|
-
import { jsx as
|
|
3880
|
+
import { cn as cn59, createVar as createVar9, gapSpace as gapSpace9 } from "@marigold/system";
|
|
3881
|
+
import { jsx as jsx105 } from "react/jsx-runtime";
|
|
4060
3882
|
var Tiles = ({
|
|
4061
3883
|
space = 0,
|
|
4062
3884
|
stretch = false,
|
|
@@ -4069,17 +3891,17 @@ var Tiles = ({
|
|
|
4069
3891
|
if (stretch) {
|
|
4070
3892
|
column = `minmax(${column}, 1fr)`;
|
|
4071
3893
|
}
|
|
4072
|
-
return /* @__PURE__ */
|
|
3894
|
+
return /* @__PURE__ */ jsx105(
|
|
4073
3895
|
"div",
|
|
4074
3896
|
{
|
|
4075
3897
|
...props,
|
|
4076
|
-
className:
|
|
3898
|
+
className: cn59(
|
|
4077
3899
|
"grid",
|
|
4078
|
-
|
|
3900
|
+
gapSpace9[space],
|
|
4079
3901
|
"grid-cols-[repeat(auto-fit,var(--column))]",
|
|
4080
3902
|
equalHeight && "auto-rows-[1fr]"
|
|
4081
3903
|
),
|
|
4082
|
-
style:
|
|
3904
|
+
style: createVar9({ column, tilesWidth }),
|
|
4083
3905
|
children
|
|
4084
3906
|
}
|
|
4085
3907
|
);
|
|
@@ -4087,11 +3909,11 @@ var Tiles = ({
|
|
|
4087
3909
|
|
|
4088
3910
|
// src/Tooltip/Tooltip.tsx
|
|
4089
3911
|
import { OverlayArrow, Tooltip } from "react-aria-components";
|
|
4090
|
-
import { cn as
|
|
3912
|
+
import { cn as cn60, useClassNames as useClassNames56 } from "@marigold/system";
|
|
4091
3913
|
|
|
4092
3914
|
// src/Tooltip/TooltipTrigger.tsx
|
|
4093
3915
|
import { TooltipTrigger } from "react-aria-components";
|
|
4094
|
-
import { jsx as
|
|
3916
|
+
import { jsx as jsx106 } from "react/jsx-runtime";
|
|
4095
3917
|
var _TooltipTrigger = ({
|
|
4096
3918
|
delay = 1e3,
|
|
4097
3919
|
children,
|
|
@@ -4105,11 +3927,11 @@ var _TooltipTrigger = ({
|
|
|
4105
3927
|
isOpen: open,
|
|
4106
3928
|
delay
|
|
4107
3929
|
};
|
|
4108
|
-
return /* @__PURE__ */
|
|
3930
|
+
return /* @__PURE__ */ jsx106(TooltipTrigger, { ...props, children });
|
|
4109
3931
|
};
|
|
4110
3932
|
|
|
4111
3933
|
// src/Tooltip/Tooltip.tsx
|
|
4112
|
-
import { jsx as
|
|
3934
|
+
import { jsx as jsx107, jsxs as jsxs40 } from "react/jsx-runtime";
|
|
4113
3935
|
var _Tooltip = ({ children, variant, size, open, ...rest }) => {
|
|
4114
3936
|
const props = {
|
|
4115
3937
|
...rest,
|
|
@@ -4121,10 +3943,10 @@ var _Tooltip = ({ children, variant, size, open, ...rest }) => {
|
|
|
4121
3943
|
Tooltip,
|
|
4122
3944
|
{
|
|
4123
3945
|
...props,
|
|
4124
|
-
className:
|
|
3946
|
+
className: cn60("group/tooltip", classNames2.container),
|
|
4125
3947
|
UNSTABLE_portalContainer: portal,
|
|
4126
3948
|
children: [
|
|
4127
|
-
/* @__PURE__ */
|
|
3949
|
+
/* @__PURE__ */ jsx107(OverlayArrow, { className: classNames2.arrow, children: /* @__PURE__ */ jsx107("svg", { width: 8, height: 8, viewBox: "0 0 8 8", children: /* @__PURE__ */ jsx107("path", { d: "M0 0 L4 4 L8 0" }) }) }),
|
|
4128
3950
|
children
|
|
4129
3951
|
]
|
|
4130
3952
|
}
|
|
@@ -4136,7 +3958,7 @@ _Tooltip.Trigger = _TooltipTrigger;
|
|
|
4136
3958
|
import { VisuallyHidden } from "@react-aria/visually-hidden";
|
|
4137
3959
|
|
|
4138
3960
|
// src/XLoader/XLoader.tsx
|
|
4139
|
-
import { useId
|
|
3961
|
+
import { useId } from "react";
|
|
4140
3962
|
import { Dialog as Dialog2, Modal as Modal2 } from "react-aria-components";
|
|
4141
3963
|
import { useClassNames as useClassNames58 } from "@marigold/system";
|
|
4142
3964
|
|
|
@@ -4156,7 +3978,7 @@ var intlMessages2 = {
|
|
|
4156
3978
|
};
|
|
4157
3979
|
|
|
4158
3980
|
// src/XLoader/BaseLoader.tsx
|
|
4159
|
-
import { jsx as
|
|
3981
|
+
import { jsx as jsx108, jsxs as jsxs41 } from "react/jsx-runtime";
|
|
4160
3982
|
var BaseLoader = ({
|
|
4161
3983
|
variant,
|
|
4162
3984
|
size,
|
|
@@ -4182,13 +4004,13 @@ var BaseLoader = ({
|
|
|
4182
4004
|
fill: "currentColor",
|
|
4183
4005
|
className: className.loader,
|
|
4184
4006
|
children: [
|
|
4185
|
-
/* @__PURE__ */
|
|
4186
|
-
/* @__PURE__ */
|
|
4007
|
+
/* @__PURE__ */ jsx108("path", { id: "XMLID_1_", d: "M35.3 27h26.5l54 74.1H88.7z" }),
|
|
4008
|
+
/* @__PURE__ */ jsx108(
|
|
4187
4009
|
"path",
|
|
4188
4010
|
{
|
|
4189
4011
|
id: "XMLID_5_",
|
|
4190
4012
|
d: "M124.3 12.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
|
|
4191
|
-
children: /* @__PURE__ */
|
|
4013
|
+
children: /* @__PURE__ */ jsx108(
|
|
4192
4014
|
"animate",
|
|
4193
4015
|
{
|
|
4194
4016
|
attributeName: "opacity",
|
|
@@ -4201,12 +4023,12 @@ var BaseLoader = ({
|
|
|
4201
4023
|
)
|
|
4202
4024
|
}
|
|
4203
4025
|
),
|
|
4204
|
-
/* @__PURE__ */
|
|
4026
|
+
/* @__PURE__ */ jsx108(
|
|
4205
4027
|
"path",
|
|
4206
4028
|
{
|
|
4207
4029
|
id: "XMLID_18_",
|
|
4208
4030
|
d: "M115.9 24.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
|
|
4209
|
-
children: /* @__PURE__ */
|
|
4031
|
+
children: /* @__PURE__ */ jsx108(
|
|
4210
4032
|
"animate",
|
|
4211
4033
|
{
|
|
4212
4034
|
attributeName: "opacity",
|
|
@@ -4219,12 +4041,12 @@ var BaseLoader = ({
|
|
|
4219
4041
|
)
|
|
4220
4042
|
}
|
|
4221
4043
|
),
|
|
4222
|
-
/* @__PURE__ */
|
|
4044
|
+
/* @__PURE__ */ jsx108(
|
|
4223
4045
|
"path",
|
|
4224
4046
|
{
|
|
4225
4047
|
id: "XMLID_19_",
|
|
4226
4048
|
d: "M107.5 35.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
|
|
4227
|
-
children: /* @__PURE__ */
|
|
4049
|
+
children: /* @__PURE__ */ jsx108(
|
|
4228
4050
|
"animate",
|
|
4229
4051
|
{
|
|
4230
4052
|
attributeName: "opacity",
|
|
@@ -4237,12 +4059,12 @@ var BaseLoader = ({
|
|
|
4237
4059
|
)
|
|
4238
4060
|
}
|
|
4239
4061
|
),
|
|
4240
|
-
/* @__PURE__ */
|
|
4062
|
+
/* @__PURE__ */ jsx108(
|
|
4241
4063
|
"path",
|
|
4242
4064
|
{
|
|
4243
4065
|
id: "XMLID_20_",
|
|
4244
4066
|
d: "M99.1 47.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
|
|
4245
|
-
children: /* @__PURE__ */
|
|
4067
|
+
children: /* @__PURE__ */ jsx108(
|
|
4246
4068
|
"animate",
|
|
4247
4069
|
{
|
|
4248
4070
|
attributeName: "opacity",
|
|
@@ -4255,12 +4077,12 @@ var BaseLoader = ({
|
|
|
4255
4077
|
)
|
|
4256
4078
|
}
|
|
4257
4079
|
),
|
|
4258
|
-
/* @__PURE__ */
|
|
4080
|
+
/* @__PURE__ */ jsx108(
|
|
4259
4081
|
"path",
|
|
4260
4082
|
{
|
|
4261
4083
|
id: "XMLID_21_",
|
|
4262
4084
|
d: "M90.7 59H90c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.8-2.2 4.9-4.9 4.9z",
|
|
4263
|
-
children: /* @__PURE__ */
|
|
4085
|
+
children: /* @__PURE__ */ jsx108(
|
|
4264
4086
|
"animate",
|
|
4265
4087
|
{
|
|
4266
4088
|
attributeName: "opacity",
|
|
@@ -4273,12 +4095,12 @@ var BaseLoader = ({
|
|
|
4273
4095
|
)
|
|
4274
4096
|
}
|
|
4275
4097
|
),
|
|
4276
|
-
/* @__PURE__ */
|
|
4098
|
+
/* @__PURE__ */ jsx108(
|
|
4277
4099
|
"path",
|
|
4278
4100
|
{
|
|
4279
4101
|
id: "XMLID_22_",
|
|
4280
4102
|
d: "M68 89.8h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.8c0 2.6-2.2 4.8-4.9 4.8z",
|
|
4281
|
-
children: /* @__PURE__ */
|
|
4103
|
+
children: /* @__PURE__ */ jsx108(
|
|
4282
4104
|
"animate",
|
|
4283
4105
|
{
|
|
4284
4106
|
attributeName: "opacity",
|
|
@@ -4291,12 +4113,12 @@ var BaseLoader = ({
|
|
|
4291
4113
|
)
|
|
4292
4114
|
}
|
|
4293
4115
|
),
|
|
4294
|
-
/* @__PURE__ */
|
|
4116
|
+
/* @__PURE__ */ jsx108(
|
|
4295
4117
|
"path",
|
|
4296
4118
|
{
|
|
4297
4119
|
id: "XMLID_23_",
|
|
4298
4120
|
d: "M59.6 101.4h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c0 2.7-2.2 4.9-4.9 4.9z",
|
|
4299
|
-
children: /* @__PURE__ */
|
|
4121
|
+
children: /* @__PURE__ */ jsx108(
|
|
4300
4122
|
"animate",
|
|
4301
4123
|
{
|
|
4302
4124
|
attributeName: "opacity",
|
|
@@ -4309,12 +4131,12 @@ var BaseLoader = ({
|
|
|
4309
4131
|
)
|
|
4310
4132
|
}
|
|
4311
4133
|
),
|
|
4312
|
-
/* @__PURE__ */
|
|
4134
|
+
/* @__PURE__ */ jsx108(
|
|
4313
4135
|
"path",
|
|
4314
4136
|
{
|
|
4315
4137
|
id: "XMLID_24_",
|
|
4316
4138
|
d: "M51.2 112.9h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
|
|
4317
|
-
children: /* @__PURE__ */
|
|
4139
|
+
children: /* @__PURE__ */ jsx108(
|
|
4318
4140
|
"animate",
|
|
4319
4141
|
{
|
|
4320
4142
|
attributeName: "opacity",
|
|
@@ -4327,12 +4149,12 @@ var BaseLoader = ({
|
|
|
4327
4149
|
)
|
|
4328
4150
|
}
|
|
4329
4151
|
),
|
|
4330
|
-
/* @__PURE__ */
|
|
4152
|
+
/* @__PURE__ */ jsx108(
|
|
4331
4153
|
"path",
|
|
4332
4154
|
{
|
|
4333
4155
|
id: "XMLID_25_",
|
|
4334
4156
|
d: "M42.8 124.5h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
|
|
4335
|
-
children: /* @__PURE__ */
|
|
4157
|
+
children: /* @__PURE__ */ jsx108(
|
|
4336
4158
|
"animate",
|
|
4337
4159
|
{
|
|
4338
4160
|
attributeName: "opacity",
|
|
@@ -4345,12 +4167,12 @@ var BaseLoader = ({
|
|
|
4345
4167
|
)
|
|
4346
4168
|
}
|
|
4347
4169
|
),
|
|
4348
|
-
/* @__PURE__ */
|
|
4170
|
+
/* @__PURE__ */ jsx108(
|
|
4349
4171
|
"path",
|
|
4350
4172
|
{
|
|
4351
4173
|
id: "XMLID_26_",
|
|
4352
4174
|
d: "M34.4 136h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.7-2.2 4.9-4.9 4.9z",
|
|
4353
|
-
children: /* @__PURE__ */
|
|
4175
|
+
children: /* @__PURE__ */ jsx108(
|
|
4354
4176
|
"animate",
|
|
4355
4177
|
{
|
|
4356
4178
|
attributeName: "opacity",
|
|
@@ -4363,12 +4185,12 @@ var BaseLoader = ({
|
|
|
4363
4185
|
)
|
|
4364
4186
|
}
|
|
4365
4187
|
),
|
|
4366
|
-
/* @__PURE__ */
|
|
4188
|
+
/* @__PURE__ */ jsx108(
|
|
4367
4189
|
"path",
|
|
4368
4190
|
{
|
|
4369
4191
|
id: "XMLID_27_",
|
|
4370
4192
|
d: "M26 147.6h-.7c-2.7 0-4.9-2.2-4.9-4.9v-.7c0-2.7 2.2-4.9 4.9-4.9h.7c2.7 0 4.9 2.2 4.9 4.9v.7c-.1 2.8-2.2 4.9-4.9 4.9z",
|
|
4371
|
-
children: /* @__PURE__ */
|
|
4193
|
+
children: /* @__PURE__ */ jsx108(
|
|
4372
4194
|
"animate",
|
|
4373
4195
|
{
|
|
4374
4196
|
attributeName: "opacity",
|
|
@@ -4384,48 +4206,48 @@ var BaseLoader = ({
|
|
|
4384
4206
|
]
|
|
4385
4207
|
}
|
|
4386
4208
|
),
|
|
4387
|
-
children ? /* @__PURE__ */
|
|
4209
|
+
children ? /* @__PURE__ */ jsx108(Label2, { className: className.label, children }) : null
|
|
4388
4210
|
]
|
|
4389
4211
|
}
|
|
4390
4212
|
);
|
|
4391
4213
|
};
|
|
4392
4214
|
|
|
4393
4215
|
// src/XLoader/XLoader.tsx
|
|
4394
|
-
import { jsx as
|
|
4395
|
-
var
|
|
4396
|
-
const id =
|
|
4397
|
-
return /* @__PURE__ */
|
|
4216
|
+
import { jsx as jsx109 } from "react/jsx-runtime";
|
|
4217
|
+
var LoaderFullScreen = (props) => {
|
|
4218
|
+
const id = useId();
|
|
4219
|
+
return /* @__PURE__ */ jsx109(Underlay, { defaultOpen: true, keyboardDismissable: true, variant: "modal", children: /* @__PURE__ */ jsx109(Modal2, { className: "grid h-(--visual-viewport-height) cursor-progress place-items-center", children: /* @__PURE__ */ jsx109(Dialog2, { className: "outline-0", "aria-labelledby": id, children: /* @__PURE__ */ jsx109(BaseLoader, { id, ...props }) }) }) });
|
|
4398
4220
|
};
|
|
4399
|
-
var
|
|
4221
|
+
var LoaderSection = (props) => {
|
|
4400
4222
|
const className = useClassNames58({
|
|
4401
4223
|
component: "Underlay",
|
|
4402
4224
|
variant: "modal",
|
|
4403
4225
|
className: "flex size-full items-center justify-center"
|
|
4404
4226
|
});
|
|
4405
|
-
return /* @__PURE__ */
|
|
4227
|
+
return /* @__PURE__ */ jsx109("div", { className, children: /* @__PURE__ */ jsx109(BaseLoader, { ...props }) });
|
|
4406
4228
|
};
|
|
4407
|
-
var XLoader = ({ mode, variant, ...props }) => mode === "
|
|
4229
|
+
var XLoader = ({ mode, variant, ...props }) => mode === "fullscreen" ? /* @__PURE__ */ jsx109(LoaderFullScreen, { variant: variant != null ? variant : "inverted", ...props }) : mode === "section" ? /* @__PURE__ */ jsx109(LoaderSection, { variant: variant != null ? variant : "inverted", ...props }) : /* @__PURE__ */ jsx109(BaseLoader, { variant, ...props });
|
|
4408
4230
|
|
|
4409
4231
|
// src/Tabs/Tabs.tsx
|
|
4410
4232
|
import { Tabs } from "react-aria-components";
|
|
4411
4233
|
import { useClassNames as useClassNames59 } from "@marigold/system";
|
|
4412
4234
|
|
|
4413
4235
|
// src/Tabs/Context.ts
|
|
4414
|
-
import { createContext as
|
|
4415
|
-
var TabContext =
|
|
4416
|
-
var useTabContext = () =>
|
|
4236
|
+
import { createContext as createContext11, useContext as useContext17 } from "react";
|
|
4237
|
+
var TabContext = createContext11({});
|
|
4238
|
+
var useTabContext = () => useContext17(TabContext);
|
|
4417
4239
|
|
|
4418
4240
|
// src/Tabs/Tab.tsx
|
|
4419
4241
|
import { Tab } from "react-aria-components";
|
|
4420
|
-
import { cn as
|
|
4421
|
-
import { jsx as
|
|
4242
|
+
import { cn as cn61 } from "@marigold/system";
|
|
4243
|
+
import { jsx as jsx110 } from "react/jsx-runtime";
|
|
4422
4244
|
var _Tab = (props) => {
|
|
4423
4245
|
const { classNames: classNames2 } = useTabContext();
|
|
4424
|
-
return /* @__PURE__ */
|
|
4246
|
+
return /* @__PURE__ */ jsx110(
|
|
4425
4247
|
Tab,
|
|
4426
4248
|
{
|
|
4427
4249
|
...props,
|
|
4428
|
-
className:
|
|
4250
|
+
className: cn61(
|
|
4429
4251
|
"flex cursor-pointer justify-center aria-disabled:cursor-not-allowed",
|
|
4430
4252
|
classNames2.tab
|
|
4431
4253
|
),
|
|
@@ -4436,15 +4258,15 @@ var _Tab = (props) => {
|
|
|
4436
4258
|
|
|
4437
4259
|
// src/Tabs/TabList.tsx
|
|
4438
4260
|
import { TabList } from "react-aria-components";
|
|
4439
|
-
import { cn as
|
|
4440
|
-
import { jsx as
|
|
4261
|
+
import { cn as cn62, gapSpace as gapSpace10 } from "@marigold/system";
|
|
4262
|
+
import { jsx as jsx111 } from "react/jsx-runtime";
|
|
4441
4263
|
var _TabList = ({ space = 2, ...props }) => {
|
|
4442
4264
|
const { classNames: classNames2 } = useTabContext();
|
|
4443
|
-
return /* @__PURE__ */
|
|
4265
|
+
return /* @__PURE__ */ jsx111(
|
|
4444
4266
|
TabList,
|
|
4445
4267
|
{
|
|
4446
4268
|
...props,
|
|
4447
|
-
className:
|
|
4269
|
+
className: cn62("flex", gapSpace10[space], classNames2.tabsList),
|
|
4448
4270
|
children: props.children
|
|
4449
4271
|
}
|
|
4450
4272
|
);
|
|
@@ -4452,14 +4274,14 @@ var _TabList = ({ space = 2, ...props }) => {
|
|
|
4452
4274
|
|
|
4453
4275
|
// src/Tabs/TabPanel.tsx
|
|
4454
4276
|
import { TabPanel } from "react-aria-components";
|
|
4455
|
-
import { jsx as
|
|
4277
|
+
import { jsx as jsx112 } from "react/jsx-runtime";
|
|
4456
4278
|
var _TabPanel = (props) => {
|
|
4457
4279
|
const { classNames: classNames2 } = useTabContext();
|
|
4458
|
-
return /* @__PURE__ */
|
|
4280
|
+
return /* @__PURE__ */ jsx112(TabPanel, { ...props, className: classNames2.tabpanel, children: props.children });
|
|
4459
4281
|
};
|
|
4460
4282
|
|
|
4461
4283
|
// src/Tabs/Tabs.tsx
|
|
4462
|
-
import { jsx as
|
|
4284
|
+
import { jsx as jsx113 } from "react/jsx-runtime";
|
|
4463
4285
|
var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
|
|
4464
4286
|
const props = {
|
|
4465
4287
|
isDisabled: disabled,
|
|
@@ -4470,7 +4292,7 @@ var _Tabs = ({ disabled, variant, size = "medium", ...rest }) => {
|
|
|
4470
4292
|
size,
|
|
4471
4293
|
variant
|
|
4472
4294
|
});
|
|
4473
|
-
return /* @__PURE__ */
|
|
4295
|
+
return /* @__PURE__ */ jsx113(TabContext.Provider, { value: { classNames: classNames2 }, children: /* @__PURE__ */ jsx113(Tabs, { ...props, className: classNames2.container, children: props.children }) });
|
|
4474
4296
|
};
|
|
4475
4297
|
_Tabs.List = _TabList;
|
|
4476
4298
|
_Tabs.TabPanel = _TabPanel;
|
|
@@ -4551,6 +4373,8 @@ export {
|
|
|
4551
4373
|
VisuallyHidden,
|
|
4552
4374
|
XLoader,
|
|
4553
4375
|
_Calendar,
|
|
4376
|
+
gridColsAlign,
|
|
4377
|
+
gridColumn,
|
|
4554
4378
|
useAsyncList,
|
|
4555
4379
|
useFieldGroupContext,
|
|
4556
4380
|
useListData,
|