@haklex/rich-editor-ui 0.0.65 → 0.0.67
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/README.md +51 -117
- package/dist/components/action-button/index.d.ts +19 -0
- package/dist/components/action-button/index.d.ts.map +1 -0
- package/dist/components/action-button/styles.css.d.ts +101 -0
- package/dist/components/action-button/styles.css.d.ts.map +1 -0
- package/dist/components/animated-tabs/index.d.ts +4 -4
- package/dist/components/animated-tabs/index.d.ts.map +1 -1
- package/dist/components/checkbox/index.d.ts +4 -4
- package/dist/components/checkbox/index.d.ts.map +1 -1
- package/dist/components/color-picker/index.d.ts +2 -2
- package/dist/components/color-picker/index.d.ts.map +1 -1
- package/dist/components/combobox/index.d.ts.map +1 -1
- package/dist/components/dialog/sheet.d.ts.map +1 -1
- package/dist/components/dialog/stack.d.ts.map +1 -1
- package/dist/components/dialog/store.d.ts +6 -6
- package/dist/components/dialog/store.d.ts.map +1 -1
- package/dist/components/dropdown-menu/index.d.ts.map +1 -1
- package/dist/components/segmented-control/index.d.ts +5 -5
- package/dist/components/segmented-control/index.d.ts.map +1 -1
- package/dist/components/tooltip/index.d.ts.map +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.d.ts.map +1 -1
- package/dist/index.mjs +210 -224
- package/dist/rich-editor-ui.css +1 -1
- package/package.json +12 -7
package/dist/index.mjs
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
2
2
|
import { useState, useRef, useCallback, useEffect, createContext, use, createElement, useSyncExternalStore } from "react";
|
|
3
3
|
import { ChevronDown, Check, X } from "lucide-react";
|
|
4
4
|
import { Popover as Popover$1 } from "@base-ui/react/popover";
|
|
@@ -8,6 +8,150 @@ import { Combobox as Combobox$1 } from "@base-ui/react/combobox";
|
|
|
8
8
|
import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
|
|
9
9
|
import { Menu } from "@base-ui/react/menu";
|
|
10
10
|
import { Tooltip } from "@base-ui/react/tooltip";
|
|
11
|
+
function toPrimitive(t, r) {
|
|
12
|
+
if ("object" != typeof t || !t) return t;
|
|
13
|
+
var e = t[Symbol.toPrimitive];
|
|
14
|
+
if (void 0 !== e) {
|
|
15
|
+
var i = e.call(t, r);
|
|
16
|
+
if ("object" != typeof i) return i;
|
|
17
|
+
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
18
|
+
}
|
|
19
|
+
return ("string" === r ? String : Number)(t);
|
|
20
|
+
}
|
|
21
|
+
function toPropertyKey(t) {
|
|
22
|
+
var i = toPrimitive(t, "string");
|
|
23
|
+
return "symbol" == typeof i ? i : String(i);
|
|
24
|
+
}
|
|
25
|
+
function _defineProperty(obj, key, value) {
|
|
26
|
+
key = toPropertyKey(key);
|
|
27
|
+
if (key in obj) {
|
|
28
|
+
Object.defineProperty(obj, key, {
|
|
29
|
+
value,
|
|
30
|
+
enumerable: true,
|
|
31
|
+
configurable: true,
|
|
32
|
+
writable: true
|
|
33
|
+
});
|
|
34
|
+
} else {
|
|
35
|
+
obj[key] = value;
|
|
36
|
+
}
|
|
37
|
+
return obj;
|
|
38
|
+
}
|
|
39
|
+
function ownKeys(e, r) {
|
|
40
|
+
var t = Object.keys(e);
|
|
41
|
+
if (Object.getOwnPropertySymbols) {
|
|
42
|
+
var o = Object.getOwnPropertySymbols(e);
|
|
43
|
+
r && (o = o.filter(function(r2) {
|
|
44
|
+
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
45
|
+
})), t.push.apply(t, o);
|
|
46
|
+
}
|
|
47
|
+
return t;
|
|
48
|
+
}
|
|
49
|
+
function _objectSpread2(e) {
|
|
50
|
+
for (var r = 1; r < arguments.length; r++) {
|
|
51
|
+
var t = null != arguments[r] ? arguments[r] : {};
|
|
52
|
+
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
53
|
+
_defineProperty(e, r2, t[r2]);
|
|
54
|
+
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
55
|
+
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
return e;
|
|
59
|
+
}
|
|
60
|
+
function mapValues(input, fn) {
|
|
61
|
+
var result = {};
|
|
62
|
+
for (var _key in input) {
|
|
63
|
+
result[_key] = fn(input[_key], _key);
|
|
64
|
+
}
|
|
65
|
+
return result;
|
|
66
|
+
}
|
|
67
|
+
var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
|
|
68
|
+
for (var key of Object.keys(compoundCheck)) {
|
|
69
|
+
var _selections$key;
|
|
70
|
+
if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
|
|
71
|
+
return false;
|
|
72
|
+
}
|
|
73
|
+
}
|
|
74
|
+
return true;
|
|
75
|
+
};
|
|
76
|
+
var createRuntimeFn = (config) => {
|
|
77
|
+
var runtimeFn = (options) => {
|
|
78
|
+
var className = config.defaultClassName;
|
|
79
|
+
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
80
|
+
for (var variantName in selections) {
|
|
81
|
+
var _selections$variantNa;
|
|
82
|
+
var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
|
|
83
|
+
if (variantSelection != null) {
|
|
84
|
+
var selection = variantSelection;
|
|
85
|
+
if (typeof selection === "boolean") {
|
|
86
|
+
selection = selection === true ? "true" : "false";
|
|
87
|
+
}
|
|
88
|
+
var selectionClassName = (
|
|
89
|
+
// @ts-expect-error
|
|
90
|
+
config.variantClassNames[variantName][selection]
|
|
91
|
+
);
|
|
92
|
+
if (selectionClassName) {
|
|
93
|
+
className += " " + selectionClassName;
|
|
94
|
+
}
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
|
|
98
|
+
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
|
|
99
|
+
className += " " + compoundClassName;
|
|
100
|
+
}
|
|
101
|
+
}
|
|
102
|
+
return className;
|
|
103
|
+
};
|
|
104
|
+
runtimeFn.variants = () => Object.keys(config.variantClassNames);
|
|
105
|
+
runtimeFn.classNames = {
|
|
106
|
+
get base() {
|
|
107
|
+
return config.defaultClassName.split(" ")[0];
|
|
108
|
+
},
|
|
109
|
+
get variants() {
|
|
110
|
+
return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
|
|
111
|
+
}
|
|
112
|
+
};
|
|
113
|
+
return runtimeFn;
|
|
114
|
+
};
|
|
115
|
+
var semanticClassNames = { actionBar: "re-ui-action-bar", actionButton: "re-ui-action-btn", actionButtonEnd: "re-ui-action-btn--end", actionButtonDanger: "re-ui-action-btn--danger", actionButtonIcon: "re-ui-action-btn--icon" };
|
|
116
|
+
var actionBar = "_73ej2i0";
|
|
117
|
+
var actionButton = createRuntimeFn({ defaultClassName: "_73ej2i1", variantClassNames: { variant: { ghost: "_73ej2i2", solid: "_73ej2i3", outline: "_73ej2i4", accent: "_73ej2i5" }, size: { sm: "_73ej2i6", md: "_73ej2i7", lg: "_73ej2i8" }, icon: { true: "_73ej2i9", false: "_73ej2ia" }, end: { true: "_73ej2ib", false: "_73ej2ic" }, danger: { true: "_73ej2id", false: "_73ej2ie" } }, defaultVariants: { variant: "ghost", size: "sm", icon: false, end: false, danger: false }, compoundVariants: [[{ icon: true, size: "sm" }, "_73ej2if"], [{ icon: true, size: "md" }, "_73ej2ig"], [{ danger: true }, "_73ej2ih"]] });
|
|
118
|
+
function ActionBar({ className, gap, style, ...props }) {
|
|
119
|
+
return /* @__PURE__ */ jsx(
|
|
120
|
+
"div",
|
|
121
|
+
{
|
|
122
|
+
className: `${actionBar} ${semanticClassNames.actionBar}${className ? ` ${className}` : ""}`,
|
|
123
|
+
style: gap != null ? { ...style, gap } : style,
|
|
124
|
+
...props
|
|
125
|
+
}
|
|
126
|
+
);
|
|
127
|
+
}
|
|
128
|
+
function ActionButton({
|
|
129
|
+
variant,
|
|
130
|
+
size,
|
|
131
|
+
end = false,
|
|
132
|
+
danger = false,
|
|
133
|
+
icon = false,
|
|
134
|
+
className,
|
|
135
|
+
type = "button",
|
|
136
|
+
...props
|
|
137
|
+
}) {
|
|
138
|
+
const semanticParts = [semanticClassNames.actionButton];
|
|
139
|
+
if (end) semanticParts.push(semanticClassNames.actionButtonEnd);
|
|
140
|
+
if (danger) semanticParts.push(semanticClassNames.actionButtonDanger);
|
|
141
|
+
if (icon) semanticParts.push(semanticClassNames.actionButtonIcon);
|
|
142
|
+
const recipeClass = actionButton({ variant, size, end, danger, icon });
|
|
143
|
+
return /* @__PURE__ */ jsx(
|
|
144
|
+
"button",
|
|
145
|
+
{
|
|
146
|
+
className: `${recipeClass} ${semanticParts.join(" ")}${className ? ` ${className}` : ""}`,
|
|
147
|
+
type,
|
|
148
|
+
...props
|
|
149
|
+
}
|
|
150
|
+
);
|
|
151
|
+
}
|
|
152
|
+
function getActionButtonClassName(options) {
|
|
153
|
+
return `${actionButton(options)} ${semanticClassNames.actionButton}`;
|
|
154
|
+
}
|
|
11
155
|
var root$1 = "iryuae0";
|
|
12
156
|
var tablist = "iryuae1";
|
|
13
157
|
var tab = "iryuae2";
|
|
@@ -17,17 +161,9 @@ var indicator$1 = "iryuae5";
|
|
|
17
161
|
function cn(...parts) {
|
|
18
162
|
return parts.filter(Boolean).join(" ");
|
|
19
163
|
}
|
|
20
|
-
function AnimatedTabs({
|
|
21
|
-
tabs,
|
|
22
|
-
defaultTab,
|
|
23
|
-
value,
|
|
24
|
-
onChange,
|
|
25
|
-
className
|
|
26
|
-
}) {
|
|
164
|
+
function AnimatedTabs({ tabs, defaultTab, value, onChange, className }) {
|
|
27
165
|
const isControlled = value !== void 0;
|
|
28
|
-
const [internalTab, setInternalTab] = useState(
|
|
29
|
-
defaultTab ?? tabs[0]?.id ?? ""
|
|
30
|
-
);
|
|
166
|
+
const [internalTab, setInternalTab] = useState(defaultTab ?? tabs[0]?.id ?? "");
|
|
31
167
|
const activeTab = isControlled ? value : internalTab;
|
|
32
168
|
const [indicator2, setIndicator] = useState({
|
|
33
169
|
left: 0,
|
|
@@ -60,10 +196,14 @@ function AnimatedTabs({
|
|
|
60
196
|
}
|
|
61
197
|
onChange?.(tabId);
|
|
62
198
|
};
|
|
63
|
-
return /* @__PURE__ */ jsxs("div", {
|
|
64
|
-
/* @__PURE__ */ jsx("div", {
|
|
199
|
+
return /* @__PURE__ */ jsxs("div", { className: cn(root$1, className), ref: containerRef, children: [
|
|
200
|
+
/* @__PURE__ */ jsx("div", { "aria-orientation": "horizontal", className: tablist, role: "tablist", children: tabs.map((tab$1) => /* @__PURE__ */ jsx(
|
|
65
201
|
"button",
|
|
66
202
|
{
|
|
203
|
+
"aria-selected": activeTab === tab$1.id,
|
|
204
|
+
className: cn(tab, activeTab === tab$1.id ? tabActive : void 0),
|
|
205
|
+
role: "tab",
|
|
206
|
+
type: "button",
|
|
67
207
|
ref: (el) => {
|
|
68
208
|
if (el) {
|
|
69
209
|
tabRefs.current.set(tab$1.id, el);
|
|
@@ -71,24 +211,17 @@ function AnimatedTabs({
|
|
|
71
211
|
tabRefs.current.delete(tab$1.id);
|
|
72
212
|
}
|
|
73
213
|
},
|
|
74
|
-
role: "tab",
|
|
75
|
-
"aria-selected": activeTab === tab$1.id,
|
|
76
|
-
type: "button",
|
|
77
214
|
onClick: () => handleTabClick(tab$1.id),
|
|
78
|
-
className: cn(
|
|
79
|
-
tab,
|
|
80
|
-
activeTab === tab$1.id ? tabActive : void 0
|
|
81
|
-
),
|
|
82
215
|
children: tab$1.label
|
|
83
216
|
},
|
|
84
217
|
tab$1.id
|
|
85
218
|
)) }),
|
|
86
|
-
/* @__PURE__ */ jsx("div", {
|
|
219
|
+
/* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: border }),
|
|
87
220
|
/* @__PURE__ */ jsx(
|
|
88
221
|
"div",
|
|
89
222
|
{
|
|
90
|
-
className: indicator$1,
|
|
91
223
|
"aria-hidden": "true",
|
|
224
|
+
className: indicator$1,
|
|
92
225
|
style: {
|
|
93
226
|
left: indicator2.left,
|
|
94
227
|
width: indicator2.width
|
|
@@ -149,12 +282,12 @@ function AnimatedCheckbox({
|
|
|
149
282
|
return /* @__PURE__ */ jsxs(
|
|
150
283
|
"button",
|
|
151
284
|
{
|
|
152
|
-
type: "button",
|
|
153
|
-
role: "checkbox",
|
|
154
285
|
"aria-checked": isChecked,
|
|
155
286
|
"aria-disabled": disabled,
|
|
156
|
-
onClick: handleToggle,
|
|
157
287
|
className: cx(root, disabled && rootDisabled, className),
|
|
288
|
+
role: "checkbox",
|
|
289
|
+
type: "button",
|
|
290
|
+
onClick: handleToggle,
|
|
158
291
|
children: [
|
|
159
292
|
/* @__PURE__ */ jsxs(
|
|
160
293
|
"span",
|
|
@@ -168,20 +301,17 @@ function AnimatedCheckbox({
|
|
|
168
301
|
/* @__PURE__ */ jsx(
|
|
169
302
|
"svg",
|
|
170
303
|
{
|
|
171
|
-
|
|
304
|
+
className: cx(checkmark, isChecked ? checkmarkVisible : checkmarkHidden),
|
|
172
305
|
fill: "none",
|
|
173
|
-
|
|
174
|
-
checkmark,
|
|
175
|
-
isChecked ? checkmarkVisible : checkmarkHidden
|
|
176
|
-
),
|
|
306
|
+
viewBox: "0 0 12 10",
|
|
177
307
|
children: /* @__PURE__ */ jsx(
|
|
178
308
|
"path",
|
|
179
309
|
{
|
|
180
310
|
d: "M1 5.5L4 8.5L11 1.5",
|
|
181
311
|
stroke: "currentColor",
|
|
182
|
-
strokeWidth: "2",
|
|
183
312
|
strokeLinecap: "round",
|
|
184
313
|
strokeLinejoin: "round",
|
|
314
|
+
strokeWidth: "2",
|
|
185
315
|
style: {
|
|
186
316
|
color: "#fff",
|
|
187
317
|
strokeDasharray: 20,
|
|
@@ -192,13 +322,7 @@ function AnimatedCheckbox({
|
|
|
192
322
|
)
|
|
193
323
|
}
|
|
194
324
|
),
|
|
195
|
-
/* @__PURE__ */ jsx(
|
|
196
|
-
"span",
|
|
197
|
-
{
|
|
198
|
-
className: cx(ripple, bouncing && rippleActive)
|
|
199
|
-
},
|
|
200
|
-
rippleKey.current
|
|
201
|
-
)
|
|
325
|
+
/* @__PURE__ */ jsx("span", { className: cx(ripple, bouncing && rippleActive) }, rippleKey.current)
|
|
202
326
|
]
|
|
203
327
|
}
|
|
204
328
|
),
|
|
@@ -329,11 +453,7 @@ const TEXT_COLORS = [
|
|
|
329
453
|
{ name: "Indigo", value: "#6366f1" },
|
|
330
454
|
{ name: "Pink", value: "#ec4899" }
|
|
331
455
|
];
|
|
332
|
-
function ColorPicker({
|
|
333
|
-
currentColor,
|
|
334
|
-
onSelect,
|
|
335
|
-
className
|
|
336
|
-
}) {
|
|
456
|
+
function ColorPicker({ currentColor, onSelect, className }) {
|
|
337
457
|
const displayColor = currentColor === "inherit" || !currentColor ? "currentColor" : currentColor;
|
|
338
458
|
return /* @__PURE__ */ jsxs(Popover, { children: [
|
|
339
459
|
/* @__PURE__ */ jsxs(
|
|
@@ -344,24 +464,18 @@ function ColorPicker({
|
|
|
344
464
|
children: [
|
|
345
465
|
/* @__PURE__ */ jsxs("span", { className: triggerLabel, children: [
|
|
346
466
|
/* @__PURE__ */ jsx("span", { className: triggerLetter, style: { color: displayColor }, children: "A" }),
|
|
347
|
-
/* @__PURE__ */ jsx(
|
|
348
|
-
"span",
|
|
349
|
-
{
|
|
350
|
-
className: triggerBar,
|
|
351
|
-
style: { backgroundColor: displayColor }
|
|
352
|
-
}
|
|
353
|
-
)
|
|
467
|
+
/* @__PURE__ */ jsx("span", { className: triggerBar, style: { backgroundColor: displayColor } })
|
|
354
468
|
] }),
|
|
355
469
|
/* @__PURE__ */ jsx(ChevronDown, { className: triggerChevron })
|
|
356
470
|
]
|
|
357
471
|
}
|
|
358
472
|
),
|
|
359
|
-
/* @__PURE__ */ jsx(PopoverPanel, { side: "bottom", sideOffset: 6,
|
|
473
|
+
/* @__PURE__ */ jsx(PopoverPanel, { className: panel, side: "bottom", sideOffset: 6, children: /* @__PURE__ */ jsx("div", { className: grid, children: TEXT_COLORS.map((color) => /* @__PURE__ */ jsxs(
|
|
360
474
|
"button",
|
|
361
475
|
{
|
|
362
|
-
type: "button",
|
|
363
|
-
className: swatch,
|
|
364
476
|
"aria-label": color.name,
|
|
477
|
+
className: swatch,
|
|
478
|
+
type: "button",
|
|
365
479
|
onMouseDown: (e) => {
|
|
366
480
|
e.preventDefault();
|
|
367
481
|
onSelect(color.value);
|
|
@@ -408,9 +522,9 @@ function ComboboxContent({
|
|
|
408
522
|
return /* @__PURE__ */ jsx(ComboboxPortal, { children: /* @__PURE__ */ jsx(
|
|
409
523
|
Combobox$1.Positioner,
|
|
410
524
|
{
|
|
411
|
-
positionMethod,
|
|
412
525
|
align,
|
|
413
526
|
alignOffset,
|
|
527
|
+
positionMethod,
|
|
414
528
|
side,
|
|
415
529
|
sideOffset,
|
|
416
530
|
style: { zIndex: 50 },
|
|
@@ -575,9 +689,7 @@ function removeDialog(id) {
|
|
|
575
689
|
emit();
|
|
576
690
|
}
|
|
577
691
|
function dismissDialog(id) {
|
|
578
|
-
stack = stack.map(
|
|
579
|
-
(item2) => item2.id === id ? { ...item2, open: false } : item2
|
|
580
|
-
);
|
|
692
|
+
stack = stack.map((item2) => item2.id === id ? { ...item2, open: false } : item2);
|
|
581
693
|
emit();
|
|
582
694
|
}
|
|
583
695
|
function dismissTopDialog() {
|
|
@@ -698,25 +810,25 @@ const SheetStackEntry = ({ item: item2, index }) => {
|
|
|
698
810
|
/* @__PURE__ */ jsxs(
|
|
699
811
|
"div",
|
|
700
812
|
{
|
|
701
|
-
ref: sheetRef,
|
|
702
813
|
className: `${sheetContainer}${className ? ` ${className}` : ""}`,
|
|
703
|
-
"data-open": open ? "" : void 0,
|
|
704
814
|
"data-closed": !open ? "" : void 0,
|
|
815
|
+
"data-open": open ? "" : void 0,
|
|
816
|
+
ref: sheetRef,
|
|
705
817
|
style: {
|
|
706
818
|
zIndex: zIndex + 1,
|
|
707
819
|
transform: isDragging ? `translateY(${translateY}px)` : void 0,
|
|
708
820
|
transition: isDragging ? "none" : "transform 300ms cubic-bezier(0.32, 0.72, 0, 1)"
|
|
709
821
|
},
|
|
710
|
-
onTouchStart: handleTouchStart,
|
|
711
|
-
onTouchMove: handleTouchMove,
|
|
712
822
|
onTouchEnd: handleTouchEnd,
|
|
823
|
+
onTouchMove: handleTouchMove,
|
|
824
|
+
onTouchStart: handleTouchStart,
|
|
713
825
|
children: [
|
|
714
826
|
/* @__PURE__ */ jsx("div", { className: sheetDragHandle, children: /* @__PURE__ */ jsx("div", { className: sheetDragPill }) }),
|
|
715
827
|
(title$12 || description$12) && /* @__PURE__ */ jsxs("div", { className: sheetHeader, children: [
|
|
716
828
|
title$12 && /* @__PURE__ */ jsx("div", { className: title, children: title$12 }),
|
|
717
829
|
description$12 && /* @__PURE__ */ jsx("div", { className: description, children: description$12 })
|
|
718
830
|
] }),
|
|
719
|
-
/* @__PURE__ */ jsx("div", {
|
|
831
|
+
/* @__PURE__ */ jsx("div", { className: sheetContent, ref: contentRef, children: createElement(content, { dismiss }) })
|
|
720
832
|
]
|
|
721
833
|
}
|
|
722
834
|
)
|
|
@@ -766,25 +878,19 @@ const DialogStackEntry = ({ item: item2, index }) => {
|
|
|
766
878
|
return /* @__PURE__ */ jsx(
|
|
767
879
|
Dialog$1.Root,
|
|
768
880
|
{
|
|
769
|
-
open,
|
|
770
881
|
disablePointerDismissal: !clickOutsideToDismiss,
|
|
882
|
+
open,
|
|
771
883
|
onOpenChange: (open2) => {
|
|
772
884
|
if (!open2) dismiss();
|
|
773
885
|
},
|
|
774
886
|
children: /* @__PURE__ */ jsx(Dialog$1.Portal, { children: /* @__PURE__ */ jsx(PortalThemeProvider, { className: portalClassName ?? "", theme, children: /* @__PURE__ */ jsxs(PortalThemeWrapper, { children: [
|
|
775
|
-
/* @__PURE__ */ jsx(
|
|
776
|
-
Dialog$1.Backdrop,
|
|
777
|
-
{
|
|
778
|
-
className: backdrop,
|
|
779
|
-
style: { zIndex }
|
|
780
|
-
}
|
|
781
|
-
),
|
|
887
|
+
/* @__PURE__ */ jsx(Dialog$1.Backdrop, { className: backdrop, style: { zIndex } }),
|
|
782
888
|
/* @__PURE__ */ jsxs(
|
|
783
889
|
Dialog$1.Popup,
|
|
784
890
|
{
|
|
785
|
-
"data-theme": theme,
|
|
786
891
|
suppressHydrationWarning: true,
|
|
787
892
|
className: `${popup$2}${className ? ` ${className}` : ""}`,
|
|
893
|
+
"data-theme": theme,
|
|
788
894
|
style: { zIndex: zIndex + 1 },
|
|
789
895
|
children: [
|
|
790
896
|
(title$12 || description$12) && /* @__PURE__ */ jsxs("div", { className: header, children: [
|
|
@@ -806,7 +912,7 @@ const DialogStackProvider = ({ children }) => {
|
|
|
806
912
|
return /* @__PURE__ */ jsxs(Fragment, { children: [
|
|
807
913
|
children,
|
|
808
914
|
stack2.map(
|
|
809
|
-
(item2, index) => shouldUseSheet(item2.sheet, isMobile) ? /* @__PURE__ */ jsx(SheetStackEntry, { item: item2
|
|
915
|
+
(item2, index) => shouldUseSheet(item2.sheet, isMobile) ? /* @__PURE__ */ jsx(SheetStackEntry, { index, item: item2 }, item2.id) : /* @__PURE__ */ jsx(DialogStackEntry, { index, item: item2 }, item2.id)
|
|
810
916
|
)
|
|
811
917
|
] });
|
|
812
918
|
};
|
|
@@ -841,19 +947,19 @@ function DropdownMenuContent({
|
|
|
841
947
|
return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
|
|
842
948
|
Menu.Positioner,
|
|
843
949
|
{
|
|
950
|
+
align,
|
|
951
|
+
alignOffset,
|
|
844
952
|
className: positioner$1,
|
|
845
953
|
"data-slot": "dropdown-menu-positioner",
|
|
846
954
|
positionMethod,
|
|
847
|
-
align,
|
|
848
|
-
alignOffset,
|
|
849
955
|
side,
|
|
850
956
|
sideOffset,
|
|
851
957
|
style: { zIndex: 50 },
|
|
852
958
|
children: /* @__PURE__ */ jsx(
|
|
853
959
|
Menu.Popup,
|
|
854
960
|
{
|
|
855
|
-
"data-slot": "dropdown-menu-content",
|
|
856
961
|
className: `${popup$1}${className ? ` ${className}` : ""}`,
|
|
962
|
+
"data-slot": "dropdown-menu-content",
|
|
857
963
|
...popupProps,
|
|
858
964
|
children
|
|
859
965
|
}
|
|
@@ -864,53 +970,38 @@ function DropdownMenuContent({
|
|
|
864
970
|
function DropdownMenuGroup(props) {
|
|
865
971
|
return /* @__PURE__ */ jsx(Menu.Group, { "data-slot": "dropdown-menu-group", ...props });
|
|
866
972
|
}
|
|
867
|
-
function DropdownMenuLabel({
|
|
868
|
-
className,
|
|
869
|
-
...props
|
|
870
|
-
}) {
|
|
973
|
+
function DropdownMenuLabel({ className, ...props }) {
|
|
871
974
|
return /* @__PURE__ */ jsx(
|
|
872
975
|
Menu.GroupLabel,
|
|
873
976
|
{
|
|
874
|
-
"data-slot": "dropdown-menu-label",
|
|
875
977
|
className: `${label}${className ? ` ${className}` : ""}`,
|
|
978
|
+
"data-slot": "dropdown-menu-label",
|
|
876
979
|
...props
|
|
877
980
|
}
|
|
878
981
|
);
|
|
879
982
|
}
|
|
880
|
-
function DropdownMenuItem({
|
|
881
|
-
className,
|
|
882
|
-
...props
|
|
883
|
-
}) {
|
|
983
|
+
function DropdownMenuItem({ className, ...props }) {
|
|
884
984
|
return /* @__PURE__ */ jsx(
|
|
885
985
|
Menu.Item,
|
|
886
986
|
{
|
|
887
|
-
"data-slot": "dropdown-menu-item",
|
|
888
987
|
className: `${item$1}${className ? ` ${className}` : ""}`,
|
|
988
|
+
"data-slot": "dropdown-menu-item",
|
|
889
989
|
...props
|
|
890
990
|
}
|
|
891
991
|
);
|
|
892
992
|
}
|
|
893
|
-
function DropdownMenuSeparator({
|
|
894
|
-
className,
|
|
895
|
-
...props
|
|
896
|
-
}) {
|
|
993
|
+
function DropdownMenuSeparator({ className, ...props }) {
|
|
897
994
|
return /* @__PURE__ */ jsx(
|
|
898
995
|
Menu.Separator,
|
|
899
996
|
{
|
|
900
|
-
"data-slot": "dropdown-menu-separator",
|
|
901
997
|
className: `${separator}${className ? ` ${className}` : ""}`,
|
|
998
|
+
"data-slot": "dropdown-menu-separator",
|
|
902
999
|
...props
|
|
903
1000
|
}
|
|
904
1001
|
);
|
|
905
1002
|
}
|
|
906
1003
|
function DropdownMenuRadioGroup(props) {
|
|
907
|
-
return /* @__PURE__ */ jsx(
|
|
908
|
-
Menu.RadioGroup,
|
|
909
|
-
{
|
|
910
|
-
"data-slot": "dropdown-menu-radio-group",
|
|
911
|
-
...props
|
|
912
|
-
}
|
|
913
|
-
);
|
|
1004
|
+
return /* @__PURE__ */ jsx(Menu.RadioGroup, { "data-slot": "dropdown-menu-radio-group", ...props });
|
|
914
1005
|
}
|
|
915
1006
|
function DropdownMenuRadioItem({
|
|
916
1007
|
className,
|
|
@@ -920,16 +1011,16 @@ function DropdownMenuRadioItem({
|
|
|
920
1011
|
return /* @__PURE__ */ jsxs(
|
|
921
1012
|
Menu.RadioItem,
|
|
922
1013
|
{
|
|
923
|
-
"data-slot": "dropdown-menu-radio-item",
|
|
924
1014
|
className: `${item$1} ${radioItem}${className ? ` ${className}` : ""}`,
|
|
1015
|
+
"data-slot": "dropdown-menu-radio-item",
|
|
925
1016
|
...props,
|
|
926
1017
|
children: [
|
|
927
1018
|
children,
|
|
928
1019
|
/* @__PURE__ */ jsx(
|
|
929
1020
|
Menu.RadioItemIndicator,
|
|
930
1021
|
{
|
|
931
|
-
"data-slot": "dropdown-menu-radio-item-indicator",
|
|
932
1022
|
className: radioIndicator,
|
|
1023
|
+
"data-slot": "dropdown-menu-radio-item-indicator",
|
|
933
1024
|
children: /* @__PURE__ */ jsx(CheckIcon, {})
|
|
934
1025
|
}
|
|
935
1026
|
)
|
|
@@ -945,16 +1036,16 @@ function DropdownMenuCheckboxItem({
|
|
|
945
1036
|
return /* @__PURE__ */ jsxs(
|
|
946
1037
|
Menu.CheckboxItem,
|
|
947
1038
|
{
|
|
948
|
-
"data-slot": "dropdown-menu-checkbox-item",
|
|
949
1039
|
className: `${item$1} ${checkboxItem}${className ? ` ${className}` : ""}`,
|
|
1040
|
+
"data-slot": "dropdown-menu-checkbox-item",
|
|
950
1041
|
...props,
|
|
951
1042
|
children: [
|
|
952
1043
|
children,
|
|
953
1044
|
/* @__PURE__ */ jsx(
|
|
954
1045
|
Menu.CheckboxItemIndicator,
|
|
955
1046
|
{
|
|
956
|
-
"data-slot": "dropdown-menu-checkbox-item-indicator",
|
|
957
1047
|
className: checkboxIndicator,
|
|
1048
|
+
"data-slot": "dropdown-menu-checkbox-item-indicator",
|
|
958
1049
|
children: /* @__PURE__ */ jsx(CheckIcon, {})
|
|
959
1050
|
}
|
|
960
1051
|
)
|
|
@@ -965,110 +1056,6 @@ function DropdownMenuCheckboxItem({
|
|
|
965
1056
|
function CheckIcon() {
|
|
966
1057
|
return /* @__PURE__ */ jsx(Check, { size: 16 });
|
|
967
1058
|
}
|
|
968
|
-
function toPrimitive(t, r) {
|
|
969
|
-
if ("object" != typeof t || !t) return t;
|
|
970
|
-
var e = t[Symbol.toPrimitive];
|
|
971
|
-
if (void 0 !== e) {
|
|
972
|
-
var i = e.call(t, r);
|
|
973
|
-
if ("object" != typeof i) return i;
|
|
974
|
-
throw new TypeError("@@toPrimitive must return a primitive value.");
|
|
975
|
-
}
|
|
976
|
-
return ("string" === r ? String : Number)(t);
|
|
977
|
-
}
|
|
978
|
-
function toPropertyKey(t) {
|
|
979
|
-
var i = toPrimitive(t, "string");
|
|
980
|
-
return "symbol" == typeof i ? i : String(i);
|
|
981
|
-
}
|
|
982
|
-
function _defineProperty(obj, key, value) {
|
|
983
|
-
key = toPropertyKey(key);
|
|
984
|
-
if (key in obj) {
|
|
985
|
-
Object.defineProperty(obj, key, {
|
|
986
|
-
value,
|
|
987
|
-
enumerable: true,
|
|
988
|
-
configurable: true,
|
|
989
|
-
writable: true
|
|
990
|
-
});
|
|
991
|
-
} else {
|
|
992
|
-
obj[key] = value;
|
|
993
|
-
}
|
|
994
|
-
return obj;
|
|
995
|
-
}
|
|
996
|
-
function ownKeys(e, r) {
|
|
997
|
-
var t = Object.keys(e);
|
|
998
|
-
if (Object.getOwnPropertySymbols) {
|
|
999
|
-
var o = Object.getOwnPropertySymbols(e);
|
|
1000
|
-
r && (o = o.filter(function(r2) {
|
|
1001
|
-
return Object.getOwnPropertyDescriptor(e, r2).enumerable;
|
|
1002
|
-
})), t.push.apply(t, o);
|
|
1003
|
-
}
|
|
1004
|
-
return t;
|
|
1005
|
-
}
|
|
1006
|
-
function _objectSpread2(e) {
|
|
1007
|
-
for (var r = 1; r < arguments.length; r++) {
|
|
1008
|
-
var t = null != arguments[r] ? arguments[r] : {};
|
|
1009
|
-
r % 2 ? ownKeys(Object(t), true).forEach(function(r2) {
|
|
1010
|
-
_defineProperty(e, r2, t[r2]);
|
|
1011
|
-
}) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function(r2) {
|
|
1012
|
-
Object.defineProperty(e, r2, Object.getOwnPropertyDescriptor(t, r2));
|
|
1013
|
-
});
|
|
1014
|
-
}
|
|
1015
|
-
return e;
|
|
1016
|
-
}
|
|
1017
|
-
function mapValues(input, fn) {
|
|
1018
|
-
var result = {};
|
|
1019
|
-
for (var _key in input) {
|
|
1020
|
-
result[_key] = fn(input[_key], _key);
|
|
1021
|
-
}
|
|
1022
|
-
return result;
|
|
1023
|
-
}
|
|
1024
|
-
var shouldApplyCompound = (compoundCheck, selections, defaultVariants) => {
|
|
1025
|
-
for (var key of Object.keys(compoundCheck)) {
|
|
1026
|
-
var _selections$key;
|
|
1027
|
-
if (compoundCheck[key] !== ((_selections$key = selections[key]) !== null && _selections$key !== void 0 ? _selections$key : defaultVariants[key])) {
|
|
1028
|
-
return false;
|
|
1029
|
-
}
|
|
1030
|
-
}
|
|
1031
|
-
return true;
|
|
1032
|
-
};
|
|
1033
|
-
var createRuntimeFn = (config) => {
|
|
1034
|
-
var runtimeFn = (options) => {
|
|
1035
|
-
var className = config.defaultClassName;
|
|
1036
|
-
var selections = _objectSpread2(_objectSpread2({}, config.defaultVariants), options);
|
|
1037
|
-
for (var variantName in selections) {
|
|
1038
|
-
var _selections$variantNa;
|
|
1039
|
-
var variantSelection = (_selections$variantNa = selections[variantName]) !== null && _selections$variantNa !== void 0 ? _selections$variantNa : config.defaultVariants[variantName];
|
|
1040
|
-
if (variantSelection != null) {
|
|
1041
|
-
var selection = variantSelection;
|
|
1042
|
-
if (typeof selection === "boolean") {
|
|
1043
|
-
selection = selection === true ? "true" : "false";
|
|
1044
|
-
}
|
|
1045
|
-
var selectionClassName = (
|
|
1046
|
-
// @ts-expect-error
|
|
1047
|
-
config.variantClassNames[variantName][selection]
|
|
1048
|
-
);
|
|
1049
|
-
if (selectionClassName) {
|
|
1050
|
-
className += " " + selectionClassName;
|
|
1051
|
-
}
|
|
1052
|
-
}
|
|
1053
|
-
}
|
|
1054
|
-
for (var [compoundCheck, compoundClassName] of config.compoundVariants) {
|
|
1055
|
-
if (shouldApplyCompound(compoundCheck, selections, config.defaultVariants)) {
|
|
1056
|
-
className += " " + compoundClassName;
|
|
1057
|
-
}
|
|
1058
|
-
}
|
|
1059
|
-
return className;
|
|
1060
|
-
};
|
|
1061
|
-
runtimeFn.variants = () => Object.keys(config.variantClassNames);
|
|
1062
|
-
runtimeFn.classNames = {
|
|
1063
|
-
get base() {
|
|
1064
|
-
return config.defaultClassName.split(" ")[0];
|
|
1065
|
-
},
|
|
1066
|
-
get variants() {
|
|
1067
|
-
return mapValues(config.variantClassNames, (classNames) => mapValues(classNames, (className) => className.split(" ")[0]));
|
|
1068
|
-
}
|
|
1069
|
-
};
|
|
1070
|
-
return runtimeFn;
|
|
1071
|
-
};
|
|
1072
1059
|
var container = createRuntimeFn({ defaultClassName: "_6d8tz20", variantClassNames: { size: { sm: "_6d8tz21", md: "_6d8tz22" }, fullWidth: { true: "_6d8tz23", false: "_6d8tz24" } }, defaultVariants: { size: "sm", fullWidth: false }, compoundVariants: [] });
|
|
1073
1060
|
var indicator = createRuntimeFn({ defaultClassName: "_6d8tz25", variantClassNames: { ready: { true: "_6d8tz26", false: "_6d8tz27" } }, defaultVariants: { ready: true }, compoundVariants: [] });
|
|
1074
1061
|
var item = createRuntimeFn({ defaultClassName: "_6d8tz28", variantClassNames: { size: { sm: "_6d8tz29", md: "_6d8tz2a" }, active: { true: "_6d8tz2b", false: "_6d8tz2c" }, disabled: { true: "_6d8tz2d", false: "_6d8tz2e" }, fullWidth: { true: "_6d8tz2f", false: "_6d8tz2g" } }, defaultVariants: { size: "sm", active: false, disabled: false, fullWidth: false }, compoundVariants: [] });
|
|
@@ -1145,21 +1132,21 @@ function SegmentedControl({
|
|
|
1145
1132
|
return /* @__PURE__ */ jsxs(
|
|
1146
1133
|
"div",
|
|
1147
1134
|
{
|
|
1135
|
+
"aria-orientation": "horizontal",
|
|
1136
|
+
className: `${container({ size, fullWidth })} ${className || ""}`.trim(),
|
|
1148
1137
|
ref: containerRef,
|
|
1149
1138
|
role: "tablist",
|
|
1150
|
-
"aria-orientation": "horizontal",
|
|
1151
1139
|
onKeyDown: handleKeyDown,
|
|
1152
|
-
className: `${container({ size, fullWidth })} ${className || ""}`.trim(),
|
|
1153
1140
|
children: [
|
|
1154
1141
|
/* @__PURE__ */ jsx(
|
|
1155
1142
|
"div",
|
|
1156
1143
|
{
|
|
1144
|
+
"aria-hidden": "true",
|
|
1157
1145
|
className: indicator({ ready: isReady }),
|
|
1158
1146
|
style: {
|
|
1159
1147
|
left: indicator$12.left,
|
|
1160
1148
|
width: indicator$12.width
|
|
1161
|
-
}
|
|
1162
|
-
"aria-hidden": "true"
|
|
1149
|
+
}
|
|
1163
1150
|
}
|
|
1164
1151
|
),
|
|
1165
1152
|
items.map((item$12) => {
|
|
@@ -1167,23 +1154,23 @@ function SegmentedControl({
|
|
|
1167
1154
|
return /* @__PURE__ */ jsx(
|
|
1168
1155
|
"button",
|
|
1169
1156
|
{
|
|
1170
|
-
ref: (el) => {
|
|
1171
|
-
if (el) itemElementsRef.current.set(item$12.value, el);
|
|
1172
|
-
else itemElementsRef.current.delete(item$12.value);
|
|
1173
|
-
},
|
|
1174
|
-
role: "tab",
|
|
1175
|
-
type: "button",
|
|
1176
1157
|
"aria-selected": isActive,
|
|
1177
1158
|
"data-active": isActive || void 0,
|
|
1178
|
-
tabIndex: isActive ? 0 : -1,
|
|
1179
1159
|
disabled: item$12.disabled,
|
|
1180
|
-
|
|
1160
|
+
role: "tab",
|
|
1161
|
+
tabIndex: isActive ? 0 : -1,
|
|
1162
|
+
type: "button",
|
|
1181
1163
|
className: item({
|
|
1182
1164
|
size,
|
|
1183
1165
|
active: isActive,
|
|
1184
1166
|
disabled: Boolean(item$12.disabled),
|
|
1185
1167
|
fullWidth
|
|
1186
1168
|
}),
|
|
1169
|
+
ref: (el) => {
|
|
1170
|
+
if (el) itemElementsRef.current.set(item$12.value, el);
|
|
1171
|
+
else itemElementsRef.current.delete(item$12.value);
|
|
1172
|
+
},
|
|
1173
|
+
onClick: () => onChange(item$12.value),
|
|
1187
1174
|
children: item$12.label
|
|
1188
1175
|
},
|
|
1189
1176
|
item$12.value
|
|
@@ -1210,11 +1197,7 @@ function TooltipPortal({ children, ...props }) {
|
|
|
1210
1197
|
function TooltipPositioner(props) {
|
|
1211
1198
|
return /* @__PURE__ */ jsx(Tooltip.Positioner, { ...props });
|
|
1212
1199
|
}
|
|
1213
|
-
function TooltipPopup({
|
|
1214
|
-
className,
|
|
1215
|
-
children,
|
|
1216
|
-
...props
|
|
1217
|
-
}) {
|
|
1200
|
+
function TooltipPopup({ className, children, ...props }) {
|
|
1218
1201
|
return /* @__PURE__ */ jsx(
|
|
1219
1202
|
Tooltip.Popup,
|
|
1220
1203
|
{
|
|
@@ -1235,10 +1218,10 @@ function TooltipContent({
|
|
|
1235
1218
|
return /* @__PURE__ */ jsx(TooltipPortal, { children: /* @__PURE__ */ jsx(
|
|
1236
1219
|
TooltipPositioner,
|
|
1237
1220
|
{
|
|
1238
|
-
side,
|
|
1239
|
-
sideOffset,
|
|
1240
1221
|
align,
|
|
1241
1222
|
className: positioner,
|
|
1223
|
+
side,
|
|
1224
|
+
sideOffset,
|
|
1242
1225
|
children: /* @__PURE__ */ jsx(TooltipPopup, { className, ...popupProps, children })
|
|
1243
1226
|
}
|
|
1244
1227
|
) });
|
|
@@ -1271,6 +1254,8 @@ function ViewportGate({
|
|
|
1271
1254
|
return /* @__PURE__ */ jsx("div", { ref, children: fallback });
|
|
1272
1255
|
}
|
|
1273
1256
|
export {
|
|
1257
|
+
ActionBar,
|
|
1258
|
+
ActionButton,
|
|
1274
1259
|
AnimatedCheckbox,
|
|
1275
1260
|
AnimatedTabs,
|
|
1276
1261
|
ColorPicker,
|
|
@@ -1329,6 +1314,7 @@ export {
|
|
|
1329
1314
|
dismissAllDialogs,
|
|
1330
1315
|
dismissDialog,
|
|
1331
1316
|
dismissTopDialog,
|
|
1317
|
+
getActionButtonClassName,
|
|
1332
1318
|
presentDialog,
|
|
1333
1319
|
usePopover,
|
|
1334
1320
|
usePortalTheme
|