@yahoo/uds-v5-wip 1.1.3 → 1.2.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/components/dist/accordion.js +9 -9
- package/dist/components/dist/alert.js +2 -2
- package/dist/components/dist/avatar-group.js +6 -6
- package/dist/components/dist/avatar.js +3 -3
- package/dist/components/dist/badge.js +2 -2
- package/dist/components/dist/breadcrumb.js +17 -17
- package/dist/components/dist/button.js +5 -5
- package/dist/components/dist/card.js +4 -4
- package/dist/components/dist/collapsible.js +3 -3
- package/dist/components/dist/command.js +21 -21
- package/dist/components/dist/control-color.js +6 -6
- package/dist/components/dist/control-curve.js +4 -4
- package/dist/components/dist/control-folder.js +6 -6
- package/dist/components/dist/control-group.js +3 -3
- package/dist/components/dist/control-knob.js +8 -8
- package/dist/components/dist/control-panel.js +3 -3
- package/dist/components/dist/control-select.js +8 -8
- package/dist/components/dist/control-slider.js +8 -8
- package/dist/components/dist/control-spring.js +12 -12
- package/dist/components/dist/control-stepper.js +6 -6
- package/dist/components/dist/control-toggle.js +3 -3
- package/dist/components/dist/createSlot.js +2 -2
- package/dist/components/dist/dropdown.js +10 -10
- package/dist/components/dist/empty-state.js +6 -6
- package/dist/components/dist/grid.js +2 -2
- package/dist/components/dist/hstack.js +1 -1
- package/dist/components/dist/input.js +1 -1
- package/dist/components/dist/item.js +8 -8
- package/dist/components/dist/list.js +1 -1
- package/dist/components/dist/modal.js +8 -8
- package/dist/components/dist/nav-header.js +3 -3
- package/dist/components/dist/preset-bar.js +10 -10
- package/dist/components/dist/presets/index.js +1 -1
- package/dist/components/dist/progress.js +6 -6
- package/dist/components/dist/sheet.js +8 -8
- package/dist/components/dist/sidebar.js +42 -42
- package/dist/components/dist/skeleton.js +1 -1
- package/dist/components/dist/slider.js +5 -5
- package/dist/components/dist/spinner.js +2 -2
- package/dist/components/dist/switch.js +5 -5
- package/dist/components/dist/tabs.js +8 -8
- package/dist/components/dist/toast.js +7 -7
- package/dist/components/dist/tooltip.js +3 -3
- package/dist/components/dist/vstack.js +1 -1
- package/dist/components/presets/index.js +1 -1
- package/dist/config.d.ts +976 -976
- package/dist/core/dist/createComponent.d.ts +2 -1
- package/dist/core/dist/createComponentExample.d.ts +2 -1
- package/dist/core/dist/createProvider.d.ts +2 -1
- package/dist/core/dist/generated/stylePropsTwMap.d.ts +2 -1
- package/dist/core/dist/getComponentStyles.d.ts +2 -1
- package/dist/core/dist/getStyles.d.ts +2 -1
- package/dist/core/dist/macros.d.ts +2 -1
- package/dist/core/dist/propMappings.d.ts +2 -1
- package/dist/core/dist/resolveMotionState.d.ts +2 -1
- package/dist/core/dist/transformPreset.d.ts +2 -1
- package/dist/core/dist/withDefaultStyleProps.d.ts +2 -1
- package/dist/foundational-presets/dist/boldVibrant.d.ts +991 -990
- package/dist/foundational-presets/dist/brutalist.d.ts +991 -990
- package/dist/foundational-presets/dist/candy.d.ts +991 -990
- package/dist/foundational-presets/dist/cleanMinimalist.d.ts +991 -990
- package/dist/foundational-presets/dist/corporate.d.ts +991 -990
- package/dist/foundational-presets/dist/darkMoody.d.ts +991 -990
- package/dist/foundational-presets/dist/defaultPreset.d.ts +977 -976
- package/dist/foundational-presets/dist/forest.d.ts +991 -990
- package/dist/foundational-presets/dist/highContrast.d.ts +991 -990
- package/dist/foundational-presets/dist/lavender.d.ts +991 -990
- package/dist/foundational-presets/dist/luxury.d.ts +991 -990
- package/dist/foundational-presets/dist/monochrome.d.ts +991 -990
- package/dist/foundational-presets/dist/motion.d.ts +2 -1
- package/dist/foundational-presets/dist/neonCyber.d.ts +991 -990
- package/dist/foundational-presets/dist/newspaper.d.ts +991 -990
- package/dist/foundational-presets/dist/ocean.d.ts +991 -990
- package/dist/foundational-presets/dist/slate.d.ts +991 -990
- package/dist/foundational-presets/dist/sunset.d.ts +991 -990
- package/dist/foundational-presets/dist/terminal.d.ts +991 -990
- package/dist/foundational-presets/dist/warmOrganic.d.ts +991 -990
- package/dist/loader/dist/loader.d.ts +2 -1
- package/dist/loader/dist/next.d.ts +2 -1
- package/dist/presets/dist/boldVibrant.d.ts +1 -2
- package/dist/presets/dist/brutalist.d.ts +1 -2
- package/dist/presets/dist/candy.d.ts +1 -2
- package/dist/presets/dist/cleanMinimalist.d.ts +1 -2
- package/dist/presets/dist/corporate.d.ts +1 -2
- package/dist/presets/dist/darkMoody.d.ts +1 -2
- package/dist/presets/dist/defaultPreset.d.ts +1 -2
- package/dist/presets/dist/defaultPreset.js +1 -1
- package/dist/presets/dist/forest.d.ts +1 -2
- package/dist/presets/dist/highContrast.d.ts +1 -2
- package/dist/presets/dist/lavender.d.ts +1 -2
- package/dist/presets/dist/luxury.d.ts +1 -2
- package/dist/presets/dist/monochrome.d.ts +1 -2
- package/dist/presets/dist/neonCyber.d.ts +1 -2
- package/dist/presets/dist/newspaper.d.ts +1 -2
- package/dist/presets/dist/ocean.d.ts +1 -2
- package/dist/presets/dist/slate.d.ts +1 -2
- package/dist/presets/dist/sunset.d.ts +1 -2
- package/dist/presets/dist/terminal.d.ts +1 -2
- package/dist/presets/dist/warmOrganic.d.ts +1 -2
- package/dist/tsconfig.tsbuildinfo +1 -1
- package/package.json +3 -3
|
@@ -26,32 +26,32 @@ const ControlSelect = createComponent(({ props, label, value, options, onChange
|
|
|
26
26
|
return () => document.removeEventListener("mousedown", handleClickOutside);
|
|
27
27
|
}, [isOpen]);
|
|
28
28
|
const activeLabel = options.find((o) => o.id === value)?.label ?? value;
|
|
29
|
-
return
|
|
29
|
+
return jsxs("div", {
|
|
30
30
|
ref: containerRef,
|
|
31
31
|
...props.root,
|
|
32
|
-
children: [
|
|
32
|
+
children: [jsxs("div", {
|
|
33
33
|
...props.header,
|
|
34
|
-
children: [
|
|
34
|
+
children: [jsx("span", {
|
|
35
35
|
...props.label,
|
|
36
36
|
children: label
|
|
37
|
-
}),
|
|
37
|
+
}), jsx("button", {
|
|
38
38
|
type: "button",
|
|
39
39
|
onClick: toggleOpen,
|
|
40
40
|
"aria-expanded": isOpen,
|
|
41
41
|
...props.trigger,
|
|
42
|
-
children:
|
|
42
|
+
children: jsx("span", {
|
|
43
43
|
...props.triggerLabel,
|
|
44
44
|
children: activeLabel
|
|
45
45
|
})
|
|
46
46
|
})]
|
|
47
|
-
}), isOpen &&
|
|
47
|
+
}), isOpen && jsx("div", {
|
|
48
48
|
...props.dropdown,
|
|
49
|
-
children: options.map((option) =>
|
|
49
|
+
children: options.map((option) => jsx("button", {
|
|
50
50
|
type: "button",
|
|
51
51
|
onClick: () => handleSelect(option.id),
|
|
52
52
|
style: { backgroundColor: option.id === value ? "var(--uds-bg-tertiary)" : void 0 },
|
|
53
53
|
...props.option,
|
|
54
|
-
children:
|
|
54
|
+
children: jsx("span", {
|
|
55
55
|
...props.optionLabel,
|
|
56
56
|
children: option.label
|
|
57
57
|
})
|
|
@@ -48,35 +48,35 @@ const ControlSlider = createComponent(({ props, label, value, min, max, step, on
|
|
|
48
48
|
const onPointerUp = useCallback(() => {
|
|
49
49
|
dragging.current = false;
|
|
50
50
|
}, []);
|
|
51
|
-
return
|
|
51
|
+
return jsxs("div", {
|
|
52
52
|
...props.root,
|
|
53
53
|
children: [
|
|
54
|
-
|
|
54
|
+
jsxs("div", {
|
|
55
55
|
...props.lane,
|
|
56
56
|
ref: trackRef,
|
|
57
57
|
onPointerDown,
|
|
58
58
|
onPointerMove,
|
|
59
59
|
onPointerUp,
|
|
60
60
|
children: [
|
|
61
|
-
dotCount > 0 &&
|
|
61
|
+
dotCount > 0 && jsx("div", {
|
|
62
62
|
...props.markers,
|
|
63
|
-
children: Array.from({ length: dotCount }, (_, i) => i + 1).map((n) =>
|
|
63
|
+
children: Array.from({ length: dotCount }, (_, i) => i + 1).map((n) => jsx("span", { ...props.marker }, n))
|
|
64
64
|
}),
|
|
65
|
-
|
|
65
|
+
jsx("div", {
|
|
66
66
|
...props.fill,
|
|
67
67
|
style: { width: `${pct}%` }
|
|
68
68
|
}),
|
|
69
|
-
|
|
69
|
+
jsx("div", {
|
|
70
70
|
...props.thumb,
|
|
71
71
|
style: { left: `${pct}%` }
|
|
72
72
|
})
|
|
73
73
|
]
|
|
74
74
|
}),
|
|
75
|
-
|
|
75
|
+
jsx("span", {
|
|
76
76
|
...props.label,
|
|
77
77
|
children: label
|
|
78
78
|
}),
|
|
79
|
-
|
|
79
|
+
jsxs("span", {
|
|
80
80
|
...props.value,
|
|
81
81
|
children: [value, unit]
|
|
82
82
|
})
|
|
@@ -66,24 +66,24 @@ const ControlSpring = createComponent(({ props, label, value, onChange }) => {
|
|
|
66
66
|
mass: val
|
|
67
67
|
});
|
|
68
68
|
}, [onChange, value]);
|
|
69
|
-
return
|
|
69
|
+
return jsxs("div", {
|
|
70
70
|
...props.root,
|
|
71
71
|
children: [
|
|
72
|
-
|
|
72
|
+
jsxs("div", {
|
|
73
73
|
...props.header,
|
|
74
|
-
children: [
|
|
74
|
+
children: [jsx("span", {
|
|
75
75
|
...props.label,
|
|
76
76
|
children: label
|
|
77
|
-
}),
|
|
77
|
+
}), jsx(ControlGroup, {
|
|
78
78
|
options: MODE_OPTIONS,
|
|
79
79
|
value: mode,
|
|
80
80
|
onChange: (id) => setMode(id),
|
|
81
81
|
size: "sm"
|
|
82
82
|
})]
|
|
83
83
|
}),
|
|
84
|
-
mode === "simple" ?
|
|
84
|
+
mode === "simple" ? jsxs("div", {
|
|
85
85
|
...props.fields,
|
|
86
|
-
children: [
|
|
86
|
+
children: [jsx(ControlSlider, {
|
|
87
87
|
label: "Duration",
|
|
88
88
|
value: Math.round(simple.visualDuration * 100) / 100,
|
|
89
89
|
onChange: handleVisualDuration,
|
|
@@ -91,7 +91,7 @@ const ControlSpring = createComponent(({ props, label, value, onChange }) => {
|
|
|
91
91
|
max: 5,
|
|
92
92
|
step: .05,
|
|
93
93
|
unit: "s"
|
|
94
|
-
}),
|
|
94
|
+
}), jsx(ControlSlider, {
|
|
95
95
|
label: "Bounce",
|
|
96
96
|
value: Math.round(simple.bounce * 100) / 100,
|
|
97
97
|
onChange: handleBounce,
|
|
@@ -99,10 +99,10 @@ const ControlSpring = createComponent(({ props, label, value, onChange }) => {
|
|
|
99
99
|
max: 1,
|
|
100
100
|
step: .05
|
|
101
101
|
})]
|
|
102
|
-
}) :
|
|
102
|
+
}) : jsxs("div", {
|
|
103
103
|
...props.fields,
|
|
104
104
|
children: [
|
|
105
|
-
|
|
105
|
+
jsx(ControlSlider, {
|
|
106
106
|
label: "Stiffness",
|
|
107
107
|
value: Math.round(safeValue.stiffness),
|
|
108
108
|
onChange: handleStiffness,
|
|
@@ -110,7 +110,7 @@ const ControlSpring = createComponent(({ props, label, value, onChange }) => {
|
|
|
110
110
|
max: 1e3,
|
|
111
111
|
step: 1
|
|
112
112
|
}),
|
|
113
|
-
|
|
113
|
+
jsx(ControlSlider, {
|
|
114
114
|
label: "Damping",
|
|
115
115
|
value: Math.round(safeValue.damping * 10) / 10,
|
|
116
116
|
onChange: handleDamping,
|
|
@@ -118,7 +118,7 @@ const ControlSpring = createComponent(({ props, label, value, onChange }) => {
|
|
|
118
118
|
max: 100,
|
|
119
119
|
step: .5
|
|
120
120
|
}),
|
|
121
|
-
|
|
121
|
+
jsx(ControlSlider, {
|
|
122
122
|
label: "Mass",
|
|
123
123
|
value: Math.round(safeValue.mass * 10) / 10,
|
|
124
124
|
onChange: handleMass,
|
|
@@ -128,7 +128,7 @@ const ControlSpring = createComponent(({ props, label, value, onChange }) => {
|
|
|
128
128
|
})
|
|
129
129
|
]
|
|
130
130
|
}),
|
|
131
|
-
|
|
131
|
+
jsx(ControlCurve, { config: safeValue })
|
|
132
132
|
]
|
|
133
133
|
});
|
|
134
134
|
});
|
|
@@ -57,19 +57,19 @@ const ControlStepper = createComponent(({ props, value, onChange, min = Number.N
|
|
|
57
57
|
handleIncrement,
|
|
58
58
|
handleDecrement
|
|
59
59
|
]);
|
|
60
|
-
return
|
|
60
|
+
return jsxs("div", {
|
|
61
61
|
"data-disabled": disabled || void 0,
|
|
62
62
|
...props.root,
|
|
63
|
-
children: [label &&
|
|
63
|
+
children: [label && jsx("span", {
|
|
64
64
|
...props.label,
|
|
65
65
|
children: label
|
|
66
|
-
}),
|
|
66
|
+
}), jsxs("div", {
|
|
67
67
|
style: {
|
|
68
68
|
display: "flex",
|
|
69
69
|
gap: "1px"
|
|
70
70
|
},
|
|
71
71
|
children: [
|
|
72
|
-
|
|
72
|
+
jsx("button", {
|
|
73
73
|
type: "button",
|
|
74
74
|
onClick: handleDecrement,
|
|
75
75
|
disabled: disabled || value <= min,
|
|
@@ -78,7 +78,7 @@ const ControlStepper = createComponent(({ props, value, onChange, min = Number.N
|
|
|
78
78
|
...props.decrement,
|
|
79
79
|
children: "-"
|
|
80
80
|
}),
|
|
81
|
-
|
|
81
|
+
jsx("input", {
|
|
82
82
|
type: "text",
|
|
83
83
|
inputMode: "decimal",
|
|
84
84
|
value,
|
|
@@ -92,7 +92,7 @@ const ControlStepper = createComponent(({ props, value, onChange, min = Number.N
|
|
|
92
92
|
role: "spinbutton",
|
|
93
93
|
...props.input
|
|
94
94
|
}),
|
|
95
|
-
|
|
95
|
+
jsx("button", {
|
|
96
96
|
type: "button",
|
|
97
97
|
onClick: handleIncrement,
|
|
98
98
|
disabled: disabled || value >= max,
|
|
@@ -19,12 +19,12 @@ const ControlToggle = createComponent(({ props, label, value, onChange }) => {
|
|
|
19
19
|
const handleChange = useCallback((id) => {
|
|
20
20
|
onChange(id === "on");
|
|
21
21
|
}, [onChange]);
|
|
22
|
-
return
|
|
22
|
+
return jsxs("div", {
|
|
23
23
|
...props.root,
|
|
24
|
-
children: [
|
|
24
|
+
children: [jsx("span", {
|
|
25
25
|
...props.label,
|
|
26
26
|
children: label
|
|
27
|
-
}),
|
|
27
|
+
}), jsx(ControlGroup, {
|
|
28
28
|
options: OPTIONS,
|
|
29
29
|
value: value ? "on" : "off",
|
|
30
30
|
onChange: handleChange,
|
|
@@ -34,13 +34,13 @@ function createSlot() {
|
|
|
34
34
|
}
|
|
35
35
|
return child;
|
|
36
36
|
});
|
|
37
|
-
return
|
|
37
|
+
return jsx(SlotClone, {
|
|
38
38
|
...slotProps,
|
|
39
39
|
ref,
|
|
40
40
|
children: hasChildren ? cloneElement(newElement, void 0, newChildren) : null
|
|
41
41
|
});
|
|
42
42
|
}
|
|
43
|
-
return
|
|
43
|
+
return jsx(SlotClone, {
|
|
44
44
|
...slotProps,
|
|
45
45
|
ref,
|
|
46
46
|
children
|
|
@@ -22,10 +22,10 @@ const Dropdown = createComponent(({ props, children, trigger, items = [], align
|
|
|
22
22
|
document.addEventListener("mousedown", handleClick);
|
|
23
23
|
return () => document.removeEventListener("mousedown", handleClick);
|
|
24
24
|
}, []);
|
|
25
|
-
return
|
|
25
|
+
return jsxs("div", {
|
|
26
26
|
ref,
|
|
27
27
|
...props.trigger,
|
|
28
|
-
children: [
|
|
28
|
+
children: [jsx("div", {
|
|
29
29
|
role: "button",
|
|
30
30
|
tabIndex: 0,
|
|
31
31
|
onClick: () => setOpen(!open),
|
|
@@ -39,12 +39,12 @@ const Dropdown = createComponent(({ props, children, trigger, items = [], align
|
|
|
39
39
|
WebkitUserSelect: "none"
|
|
40
40
|
},
|
|
41
41
|
children: trigger
|
|
42
|
-
}), open &&
|
|
42
|
+
}), open && jsx("div", {
|
|
43
43
|
"data-state": state,
|
|
44
44
|
...props.menu,
|
|
45
45
|
style: menuStyle,
|
|
46
46
|
children: [...items.map((entry, i) => {
|
|
47
|
-
if ("type" in entry && entry.type === "separator") return
|
|
47
|
+
if ("type" in entry && entry.type === "separator") return jsx("div", { ...props.separator }, `sep-${i}`);
|
|
48
48
|
const item = entry;
|
|
49
49
|
const handleClick = () => {
|
|
50
50
|
item.onClick?.();
|
|
@@ -56,30 +56,30 @@ const Dropdown = createComponent(({ props, children, trigger, items = [], align
|
|
|
56
56
|
setOpen(false);
|
|
57
57
|
}
|
|
58
58
|
};
|
|
59
|
-
if (item.destructive) return
|
|
59
|
+
if (item.destructive) return jsxs("div", {
|
|
60
60
|
...props.destructiveItem,
|
|
61
61
|
role: "menuitem",
|
|
62
62
|
tabIndex: 0,
|
|
63
63
|
onClick: handleClick,
|
|
64
64
|
onKeyDown: handleKeyDown,
|
|
65
|
-
children: [
|
|
65
|
+
children: [jsx("span", {
|
|
66
66
|
...props.itemText,
|
|
67
67
|
children: item.label
|
|
68
|
-
}), item.shortcut &&
|
|
68
|
+
}), item.shortcut && jsx("span", {
|
|
69
69
|
...props.shortcut,
|
|
70
70
|
children: item.shortcut
|
|
71
71
|
})]
|
|
72
72
|
}, item.label);
|
|
73
|
-
return
|
|
73
|
+
return jsxs("div", {
|
|
74
74
|
...props.item,
|
|
75
75
|
role: "menuitem",
|
|
76
76
|
tabIndex: 0,
|
|
77
77
|
onClick: handleClick,
|
|
78
78
|
onKeyDown: handleKeyDown,
|
|
79
|
-
children: [
|
|
79
|
+
children: [jsx("span", {
|
|
80
80
|
...props.itemText,
|
|
81
81
|
children: item.label
|
|
82
|
-
}), item.shortcut &&
|
|
82
|
+
}), item.shortcut && jsx("span", {
|
|
83
83
|
...props.shortcut,
|
|
84
84
|
children: item.shortcut
|
|
85
85
|
})]
|
|
@@ -5,25 +5,25 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
5
5
|
/**
|
|
6
6
|
* @description A centered placeholder shown when a view has no content, with optional icon, title, description, and actions
|
|
7
7
|
*/
|
|
8
|
-
const EmptyState = createComponent(({ props, children, icon, title, description, actions }) =>
|
|
8
|
+
const EmptyState = createComponent(({ props, children, icon, title, description, actions }) => jsxs("div", {
|
|
9
9
|
...props.root,
|
|
10
10
|
children: [
|
|
11
|
-
icon &&
|
|
11
|
+
icon && jsx("div", {
|
|
12
12
|
...props.icon,
|
|
13
13
|
children: icon
|
|
14
14
|
}),
|
|
15
|
-
(title || description) &&
|
|
15
|
+
(title || description) && jsxs("div", {
|
|
16
16
|
...props.content,
|
|
17
|
-
children: [title &&
|
|
17
|
+
children: [title && jsx("div", {
|
|
18
18
|
...props.title,
|
|
19
19
|
children: title
|
|
20
|
-
}), description &&
|
|
20
|
+
}), description && jsx("div", {
|
|
21
21
|
...props.description,
|
|
22
22
|
children: description
|
|
23
23
|
})]
|
|
24
24
|
}),
|
|
25
25
|
children,
|
|
26
|
-
actions &&
|
|
26
|
+
actions && jsx("div", {
|
|
27
27
|
...props.actions,
|
|
28
28
|
children: actions
|
|
29
29
|
})
|
|
@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
* @description A CSS Grid layout primitive
|
|
8
8
|
*/
|
|
9
9
|
const Grid = createComponent(({ children, columns, rows, autoFit, autoFill, inline, display, gridTemplateColumns, gridTemplateRows, ...rest }) => {
|
|
10
|
-
return
|
|
10
|
+
return jsx(Box, {
|
|
11
11
|
display: display ?? (inline ? "inline-grid" : "grid"),
|
|
12
12
|
gridTemplateColumns: gridTemplateColumns ?? (autoFit ? `[repeat(auto-fit,minmax(${autoFit},1fr))]` : autoFill ? `[repeat(auto-fill,minmax(${autoFill},1fr))]` : columns),
|
|
13
13
|
gridTemplateRows: gridTemplateRows ?? rows,
|
|
@@ -19,7 +19,7 @@ const Grid = createComponent(({ children, columns, rows, autoFit, autoFill, inli
|
|
|
19
19
|
* @description A grid item that controls span and position within a Grid
|
|
20
20
|
*/
|
|
21
21
|
const GridItem = createComponent(({ children, colSpan, rowSpan, colStart, colEnd, rowStart, rowEnd, gridColumnSpan, gridRowSpan, gridColumnStart, gridColumnEnd, gridRowStart, gridRowEnd, ...rest }) => {
|
|
22
|
-
return
|
|
22
|
+
return jsx(Box, {
|
|
23
23
|
gridColumnSpan: gridColumnSpan ?? colSpan,
|
|
24
24
|
gridRowSpan: gridRowSpan ?? rowSpan,
|
|
25
25
|
gridColumnStart: gridColumnStart ?? colStart,
|
|
@@ -7,7 +7,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
7
7
|
* @description A primitive that arranges its children horizontally
|
|
8
8
|
*/
|
|
9
9
|
const HStack = createComponent(({ children, as, gap, gapX, display = "flex", flexDirection = display === "flex" ? "row" : void 0, alignItems = display === "flex" ? "center" : void 0, ...rest }) => {
|
|
10
|
-
return
|
|
10
|
+
return jsx(Box, {
|
|
11
11
|
as,
|
|
12
12
|
display,
|
|
13
13
|
flexDirection,
|
|
@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
5
5
|
/**
|
|
6
6
|
* A primitive that renders a text input
|
|
7
7
|
*/
|
|
8
|
-
const Input = createComponent(({ props }) =>
|
|
8
|
+
const Input = createComponent(({ props }) => jsx("input", {
|
|
9
9
|
type: "text",
|
|
10
10
|
"data-1p-ignore": true,
|
|
11
11
|
...props.root
|
|
@@ -15,33 +15,33 @@ const Item = createComponent(({ props, children, media, title, description, acti
|
|
|
15
15
|
backgroundColor: "var(--uds-bg-secondary)"
|
|
16
16
|
}
|
|
17
17
|
} : rootProps;
|
|
18
|
-
const content =
|
|
19
|
-
media &&
|
|
18
|
+
const content = jsxs(Fragment, { children: [
|
|
19
|
+
media && jsx("div", {
|
|
20
20
|
...props.media,
|
|
21
21
|
children: media
|
|
22
22
|
}),
|
|
23
|
-
(title || description) &&
|
|
23
|
+
(title || description) && jsxs("div", {
|
|
24
24
|
...props.content,
|
|
25
|
-
children: [title &&
|
|
25
|
+
children: [title && jsx("div", {
|
|
26
26
|
...props.title,
|
|
27
27
|
children: title
|
|
28
|
-
}), description &&
|
|
28
|
+
}), description && jsx("div", {
|
|
29
29
|
...props.description,
|
|
30
30
|
children: description
|
|
31
31
|
})]
|
|
32
32
|
}),
|
|
33
33
|
children,
|
|
34
|
-
actions &&
|
|
34
|
+
actions && jsx("div", {
|
|
35
35
|
...props.actions,
|
|
36
36
|
children: actions
|
|
37
37
|
})
|
|
38
38
|
] });
|
|
39
|
-
if (asChild) return
|
|
39
|
+
if (asChild) return jsx(DivSlot, {
|
|
40
40
|
...rootStyle,
|
|
41
41
|
...nativeProps,
|
|
42
42
|
children: content
|
|
43
43
|
});
|
|
44
|
-
return
|
|
44
|
+
return jsx("div", {
|
|
45
45
|
...rootStyle,
|
|
46
46
|
...nativeProps,
|
|
47
47
|
children: content
|
|
@@ -8,7 +8,7 @@ const Ol = createComponent("ol");
|
|
|
8
8
|
* @description A primitive that renders a list of items
|
|
9
9
|
*/
|
|
10
10
|
const List = createComponent(({ children, as = "ul", ...rest }) => {
|
|
11
|
-
return
|
|
11
|
+
return jsx(as === "ol" ? Ol : Ul, {
|
|
12
12
|
...rest,
|
|
13
13
|
children
|
|
14
14
|
});
|
|
@@ -29,7 +29,7 @@ const Modal = createComponent(({ props, children, open: controlledOpen, onOpenCh
|
|
|
29
29
|
document.body.style.overflow = "";
|
|
30
30
|
};
|
|
31
31
|
}, [open]);
|
|
32
|
-
return
|
|
32
|
+
return jsxs(Fragment, { children: [trigger && jsx("div", {
|
|
33
33
|
role: "button",
|
|
34
34
|
tabIndex: 0,
|
|
35
35
|
onClick: () => setOpen(true),
|
|
@@ -38,31 +38,31 @@ const Modal = createComponent(({ props, children, open: controlledOpen, onOpenCh
|
|
|
38
38
|
},
|
|
39
39
|
...props.trigger,
|
|
40
40
|
children: trigger
|
|
41
|
-
}), open &&
|
|
41
|
+
}), open && jsxs("div", {
|
|
42
42
|
...props.overlay,
|
|
43
|
-
children: [
|
|
43
|
+
children: [jsx("button", {
|
|
44
44
|
type: "button",
|
|
45
45
|
"aria-label": "Close modal",
|
|
46
46
|
tabIndex: -1,
|
|
47
47
|
onClick: () => setOpen(false),
|
|
48
48
|
...props.dismiss
|
|
49
|
-
}),
|
|
49
|
+
}), jsxs("div", {
|
|
50
50
|
ref: panelRef,
|
|
51
51
|
role: "dialog",
|
|
52
52
|
"aria-modal": "true",
|
|
53
53
|
tabIndex: -1,
|
|
54
54
|
...props.panel,
|
|
55
55
|
children: [
|
|
56
|
-
title ?
|
|
56
|
+
title ? jsx("div", {
|
|
57
57
|
...props.title,
|
|
58
58
|
children: title
|
|
59
59
|
}) : null,
|
|
60
|
-
description ?
|
|
60
|
+
description ? jsx("div", {
|
|
61
61
|
...props.description,
|
|
62
62
|
children: description
|
|
63
63
|
}) : null,
|
|
64
64
|
children ?? null,
|
|
65
|
-
actions ?
|
|
65
|
+
actions ? jsx("div", {
|
|
66
66
|
...props.actions,
|
|
67
67
|
children: actions
|
|
68
68
|
}) : null
|
|
@@ -109,7 +109,7 @@ const [ModalProvider, useModal] = createProvider("Modal", ({ children }) => {
|
|
|
109
109
|
close,
|
|
110
110
|
closeAll
|
|
111
111
|
},
|
|
112
|
-
render:
|
|
112
|
+
render: jsxs(Fragment, { children: [children, modals.map(({ id, content, title, description, actions }) => jsx(Modal, {
|
|
113
113
|
open: true,
|
|
114
114
|
onOpenChange: (isOpen) => {
|
|
115
115
|
if (!isOpen) close(id);
|
|
@@ -5,15 +5,15 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
5
5
|
/**
|
|
6
6
|
* @description A navigation header bar with title and optional action areas
|
|
7
7
|
*/
|
|
8
|
-
const NavHeader = createComponent(({ props, children, title, actions }) =>
|
|
8
|
+
const NavHeader = createComponent(({ props, children, title, actions }) => jsxs("div", {
|
|
9
9
|
...props.root,
|
|
10
10
|
children: [
|
|
11
|
-
title &&
|
|
11
|
+
title && jsx("span", {
|
|
12
12
|
...props.title,
|
|
13
13
|
children: title
|
|
14
14
|
}),
|
|
15
15
|
children,
|
|
16
|
-
actions &&
|
|
16
|
+
actions && jsx("div", {
|
|
17
17
|
...props.actions,
|
|
18
18
|
children: actions
|
|
19
19
|
})
|
|
@@ -23,40 +23,40 @@ const PresetBar = createComponent(({ props, presets, onSave, onLoad, onDelete, p
|
|
|
23
23
|
const handleKeyDown = useCallback((e) => {
|
|
24
24
|
if (e.key === "Enter") handleSave();
|
|
25
25
|
}, [handleSave]);
|
|
26
|
-
return
|
|
26
|
+
return jsxs("div", {
|
|
27
27
|
...props.root,
|
|
28
|
-
children: [
|
|
28
|
+
children: [jsxs("div", {
|
|
29
29
|
...props.inputRow,
|
|
30
|
-
children: [
|
|
30
|
+
children: [jsx("div", {
|
|
31
31
|
...props.inputWrapper,
|
|
32
|
-
children:
|
|
32
|
+
children: jsx(Input, {
|
|
33
33
|
value: name,
|
|
34
34
|
onChange: handleChange,
|
|
35
35
|
onKeyDown: handleKeyDown,
|
|
36
36
|
placeholder
|
|
37
37
|
})
|
|
38
|
-
}),
|
|
38
|
+
}), jsx(Button, {
|
|
39
39
|
variant: "brand",
|
|
40
40
|
size: "sm",
|
|
41
41
|
onClick: handleSave,
|
|
42
42
|
children: "Save"
|
|
43
43
|
})]
|
|
44
|
-
}), presets?.length > 0 &&
|
|
44
|
+
}), presets?.length > 0 && jsx("div", {
|
|
45
45
|
...props.list,
|
|
46
|
-
children: presets.map((preset) =>
|
|
46
|
+
children: presets.map((preset) => jsxs("div", {
|
|
47
47
|
...props.item,
|
|
48
48
|
children: [
|
|
49
|
-
|
|
49
|
+
jsx("span", {
|
|
50
50
|
...props.itemName,
|
|
51
51
|
children: preset.name
|
|
52
52
|
}),
|
|
53
|
-
|
|
53
|
+
jsx(Button, {
|
|
54
54
|
variant: "ghost",
|
|
55
55
|
size: "xs",
|
|
56
56
|
onClick: () => onLoad(preset.id),
|
|
57
57
|
children: "Load"
|
|
58
58
|
}),
|
|
59
|
-
|
|
59
|
+
jsx(Button, {
|
|
60
60
|
variant: "ghost",
|
|
61
61
|
size: "xs",
|
|
62
62
|
onClick: () => onDelete(preset.id),
|
|
@@ -2,8 +2,8 @@ import { textConfig } from "../text.config.js";
|
|
|
2
2
|
import { accordionConfig } from "../accordion.config.js";
|
|
3
3
|
import { alertConfig } from "../alert.config.js";
|
|
4
4
|
import { anchorConfig } from "../anchor.config.js";
|
|
5
|
-
import { avatarGroupConfig } from "../avatar-group.config.js";
|
|
6
5
|
import { avatarConfig } from "../avatar.config.js";
|
|
6
|
+
import { avatarGroupConfig } from "../avatar-group.config.js";
|
|
7
7
|
import { badgeConfig } from "../badge.config.js";
|
|
8
8
|
import { breadcrumbConfig } from "../breadcrumb.config.js";
|
|
9
9
|
import { buttonConfig } from "../button.config.js";
|
|
@@ -15,24 +15,24 @@ const Progress = createComponent(({ props, value, label }) => {
|
|
|
15
15
|
...props.fill.style,
|
|
16
16
|
width: `${value}%`
|
|
17
17
|
};
|
|
18
|
-
return
|
|
18
|
+
return jsxs("div", {
|
|
19
19
|
...props.root,
|
|
20
20
|
style: rootStyle,
|
|
21
|
-
children: [label &&
|
|
21
|
+
children: [label && jsxs("div", {
|
|
22
22
|
style: {
|
|
23
23
|
display: "flex",
|
|
24
24
|
justifyContent: "space-between"
|
|
25
25
|
},
|
|
26
|
-
children: [
|
|
26
|
+
children: [jsx("span", {
|
|
27
27
|
...props.label,
|
|
28
28
|
children: label
|
|
29
|
-
}),
|
|
29
|
+
}), jsxs("span", {
|
|
30
30
|
...props.value,
|
|
31
31
|
children: [value, "%"]
|
|
32
32
|
})]
|
|
33
|
-
}),
|
|
33
|
+
}), jsx("div", {
|
|
34
34
|
...props.track,
|
|
35
|
-
children:
|
|
35
|
+
children: jsx("div", {
|
|
36
36
|
...props.fill,
|
|
37
37
|
style: fillStyle
|
|
38
38
|
})
|
|
@@ -12,36 +12,36 @@ const Sheet = createComponent(({ props, children, open: controlledOpen, onOpenCh
|
|
|
12
12
|
const open = controlledOpen ?? internalOpen;
|
|
13
13
|
const setOpen = onOpenChange ?? setInternalOpen;
|
|
14
14
|
const state = open ? "open" : "closed";
|
|
15
|
-
return
|
|
15
|
+
return jsxs("div", {
|
|
16
16
|
"data-state": state,
|
|
17
17
|
...props.root,
|
|
18
|
-
children: [
|
|
18
|
+
children: [jsx("button", {
|
|
19
19
|
type: "button",
|
|
20
20
|
"data-state": state,
|
|
21
21
|
onClick: () => setOpen(false),
|
|
22
22
|
"aria-label": "Close sheet",
|
|
23
23
|
...props.overlay
|
|
24
|
-
}),
|
|
24
|
+
}), jsxs("div", {
|
|
25
25
|
"data-state": state,
|
|
26
26
|
...props.panel,
|
|
27
27
|
children: [
|
|
28
|
-
|
|
28
|
+
jsxs("div", {
|
|
29
29
|
...props.header,
|
|
30
|
-
children: [title &&
|
|
30
|
+
children: [title && jsx("div", {
|
|
31
31
|
...props.title,
|
|
32
32
|
children: title
|
|
33
|
-
}),
|
|
33
|
+
}), jsx("button", {
|
|
34
34
|
type: "button",
|
|
35
35
|
onClick: () => setOpen(false),
|
|
36
36
|
...props.close,
|
|
37
37
|
children: "✕"
|
|
38
38
|
})]
|
|
39
39
|
}),
|
|
40
|
-
|
|
40
|
+
jsx("div", {
|
|
41
41
|
...props.content,
|
|
42
42
|
children
|
|
43
43
|
}),
|
|
44
|
-
footer &&
|
|
44
|
+
footer && jsx("div", {
|
|
45
45
|
...props.footer,
|
|
46
46
|
children: footer
|
|
47
47
|
})
|