@webstudio-is/sdk-components-react-radix 0.83.0 → 0.85.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/lib/__generated__/dialog.props.js +2120 -0
- package/lib/__generated__/popover.props.js +468 -0
- package/lib/__generated__/sheet.props.js +2159 -0
- package/lib/__generated__/tabs.props.js +1286 -0
- package/lib/__generated__/tooltip.props.js +478 -0
- package/lib/cjs/__generated__/dialog.props.js +2140 -0
- package/lib/cjs/__generated__/popover.props.js +488 -0
- package/lib/cjs/__generated__/sheet.props.js +2179 -0
- package/lib/cjs/__generated__/tabs.props.js +1306 -0
- package/lib/cjs/__generated__/tooltip.props.js +498 -0
- package/lib/cjs/collapsible.js +34 -4
- package/lib/cjs/collapsible.ws.js +14 -9
- package/lib/cjs/components.js +30 -1
- package/lib/cjs/dialog.js +57 -0
- package/lib/cjs/dialog.ws.js +311 -0
- package/lib/cjs/hooks.js +25 -0
- package/lib/cjs/metas.js +30 -1
- package/lib/cjs/popover.js +58 -0
- package/lib/cjs/popover.ws.js +141 -0
- package/lib/cjs/props.js +30 -1
- package/lib/cjs/sheet.js +63 -0
- package/lib/cjs/sheet.ws.js +317 -0
- package/lib/cjs/tabs.js +41 -0
- package/lib/cjs/tabs.ws.js +213 -0
- package/lib/cjs/theme/radix-common-types.js +16 -0
- package/lib/cjs/theme/tailwind-classes.js +547 -0
- package/lib/cjs/theme/tailwind-colors.js +35 -0
- package/lib/cjs/theme/tailwind-theme.js +46 -0
- package/lib/cjs/tooltip.js +55 -0
- package/lib/cjs/tooltip.ws.js +142 -0
- package/lib/collapsible.js +35 -7
- package/lib/collapsible.ws.js +19 -10
- package/lib/components.js +46 -1
- package/lib/dialog.js +30 -0
- package/lib/dialog.ws.js +298 -0
- package/lib/hooks.js +5 -0
- package/lib/metas.js +59 -1
- package/lib/popover.js +31 -0
- package/lib/popover.ws.js +116 -0
- package/lib/props.js +59 -1
- package/lib/sheet.js +35 -0
- package/lib/sheet.ws.js +304 -0
- package/lib/tabs.js +24 -0
- package/lib/tabs.ws.js +193 -0
- package/lib/theme/radix-common-types.js +0 -0
- package/lib/theme/tailwind-classes.js +527 -0
- package/lib/theme/tailwind-colors.js +15 -0
- package/lib/theme/tailwind-theme.js +16 -0
- package/lib/tooltip.js +28 -0
- package/lib/tooltip.ws.js +117 -0
- package/lib/types/__generated__/dialog.props.d.ts +8 -0
- package/lib/types/__generated__/popover.props.d.ts +4 -0
- package/lib/types/__generated__/sheet.props.d.ts +8 -0
- package/lib/types/__generated__/tabs.props.d.ts +5 -0
- package/lib/types/__generated__/tooltip.props.d.ts +4 -0
- package/lib/types/collapsible.d.ts +4 -3
- package/lib/types/components.d.ts +5 -0
- package/lib/types/dialog.d.ts +25 -0
- package/lib/types/dialog.ws.d.ts +23 -0
- package/lib/types/hooks.d.ts +2 -0
- package/lib/types/metas.d.ts +5 -0
- package/lib/types/popover.d.ts +21 -0
- package/lib/types/popover.ws.d.ts +15 -0
- package/lib/types/props.d.ts +5 -0
- package/lib/types/sheet.d.ts +15 -0
- package/lib/types/sheet.ws.d.ts +23 -0
- package/lib/types/tabs.d.ts +15 -0
- package/lib/types/tabs.ws.d.ts +9 -0
- package/lib/types/theme/radix-common-types.d.ts +84 -0
- package/lib/types/theme/tailwind-classes.d.ts +83 -0
- package/lib/types/theme/tailwind-colors.d.ts +21 -0
- package/lib/types/theme/tailwind-theme.d.ts +72 -0
- package/lib/types/tooltip.d.ts +21 -0
- package/lib/types/tooltip.ws.d.ts +15 -0
- package/package.json +23 -6
- package/src/__generated__/dialog.props.ts +2363 -0
- package/src/__generated__/popover.props.ts +515 -0
- package/src/__generated__/sheet.props.ts +2402 -0
- package/src/__generated__/tabs.props.ts +1434 -0
- package/src/__generated__/tooltip.props.ts +526 -0
- package/src/collapsible.stories.tsx +21 -0
- package/src/collapsible.tsx +44 -21
- package/src/collapsible.ws.ts +21 -10
- package/src/components.ts +21 -0
- package/src/dialog.tsx +66 -0
- package/src/dialog.ws.tsx +315 -0
- package/src/hooks.ts +4 -0
- package/src/metas.ts +34 -0
- package/src/popover.tsx +70 -0
- package/src/popover.ws.tsx +127 -0
- package/src/props.ts +34 -0
- package/src/sheet.stories.tsx +21 -0
- package/src/sheet.tsx +40 -0
- package/src/sheet.ws.tsx +326 -0
- package/src/tabs.stories.tsx +21 -0
- package/src/tabs.tsx +46 -0
- package/src/tabs.ws.ts +211 -0
- package/src/theme/radix-common-types.ts +495 -0
- package/src/theme/tailwind-classes.ts +695 -0
- package/src/theme/tailwind-colors.ts +45 -0
- package/src/theme/tailwind-theme.ts +24 -0
- package/src/tooltip.tsx +69 -0
- package/src/tooltip.ws.tsx +128 -0
|
@@ -0,0 +1,57 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var dialog_exports = {};
|
|
30
|
+
__export(dialog_exports, {
|
|
31
|
+
Dialog: () => Dialog,
|
|
32
|
+
DialogClose: () => DialogClose,
|
|
33
|
+
DialogContent: () => DialogContent,
|
|
34
|
+
DialogDescription: () => DialogDescription,
|
|
35
|
+
DialogOverlay: () => DialogOverlay,
|
|
36
|
+
DialogTitle: () => DialogTitle,
|
|
37
|
+
DialogTrigger: () => DialogTrigger
|
|
38
|
+
});
|
|
39
|
+
module.exports = __toCommonJS(dialog_exports);
|
|
40
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
41
|
+
var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
|
|
42
|
+
var import_react = require("react");
|
|
43
|
+
const Dialog = (0, import_react.forwardRef)(({ open: openProp, isOpen, ...props }, ref) => {
|
|
44
|
+
const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
|
|
45
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Root, { open, ...props });
|
|
46
|
+
});
|
|
47
|
+
const DialogTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
|
|
48
|
+
const firstChild = import_react.Children.toArray(children)[0];
|
|
49
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Trigger, { asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button or link" }) });
|
|
50
|
+
});
|
|
51
|
+
const DialogOverlay = (0, import_react.forwardRef)((props, ref) => {
|
|
52
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.DialogPortal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DialogPrimitive.Overlay, { ref, ...props }) });
|
|
53
|
+
});
|
|
54
|
+
const DialogContent = DialogPrimitive.Content;
|
|
55
|
+
const DialogClose = DialogPrimitive.Close;
|
|
56
|
+
const DialogTitle = DialogPrimitive.Title;
|
|
57
|
+
const DialogDescription = DialogPrimitive.Description;
|
|
@@ -0,0 +1,311 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var dialog_ws_exports = {};
|
|
30
|
+
__export(dialog_ws_exports, {
|
|
31
|
+
metaDialog: () => metaDialog,
|
|
32
|
+
metaDialogClose: () => metaDialogClose,
|
|
33
|
+
metaDialogContent: () => metaDialogContent,
|
|
34
|
+
metaDialogDescription: () => metaDialogDescription,
|
|
35
|
+
metaDialogOverlay: () => metaDialogOverlay,
|
|
36
|
+
metaDialogTitle: () => metaDialogTitle,
|
|
37
|
+
metaDialogTrigger: () => metaDialogTrigger,
|
|
38
|
+
propsMetaDialog: () => propsMetaDialog,
|
|
39
|
+
propsMetaDialogClose: () => propsMetaDialogClose,
|
|
40
|
+
propsMetaDialogContent: () => propsMetaDialogContent,
|
|
41
|
+
propsMetaDialogDescription: () => propsMetaDialogDescription,
|
|
42
|
+
propsMetaDialogOverlay: () => propsMetaDialogOverlay,
|
|
43
|
+
propsMetaDialogTitle: () => propsMetaDialogTitle,
|
|
44
|
+
propsMetaDialogTrigger: () => propsMetaDialogTrigger
|
|
45
|
+
});
|
|
46
|
+
module.exports = __toCommonJS(dialog_ws_exports);
|
|
47
|
+
var import_svg = require("@webstudio-is/icons/svg");
|
|
48
|
+
var import_react_sdk = require("@webstudio-is/react-sdk");
|
|
49
|
+
var tc = __toESM(require("./theme/tailwind-classes"), 1);
|
|
50
|
+
var import_dialog = require("./__generated__/dialog.props");
|
|
51
|
+
var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
|
|
52
|
+
const presetStyle = {
|
|
53
|
+
div: import_css_normalize.div
|
|
54
|
+
};
|
|
55
|
+
const buttonPresetStyle = {
|
|
56
|
+
button: import_css_normalize.button
|
|
57
|
+
};
|
|
58
|
+
const titlePresetStyle = {
|
|
59
|
+
h2: import_css_normalize.h2
|
|
60
|
+
};
|
|
61
|
+
const descriptionPresetStyle = {
|
|
62
|
+
p: import_css_normalize.p
|
|
63
|
+
};
|
|
64
|
+
const metaDialogTrigger = {
|
|
65
|
+
category: "hidden",
|
|
66
|
+
invalidAncestors: [],
|
|
67
|
+
type: "container",
|
|
68
|
+
label: "Dialog Trigger",
|
|
69
|
+
icon: import_svg.TriggerIcon,
|
|
70
|
+
stylable: false,
|
|
71
|
+
detachable: false
|
|
72
|
+
};
|
|
73
|
+
const metaDialogContent = {
|
|
74
|
+
category: "hidden",
|
|
75
|
+
invalidAncestors: [],
|
|
76
|
+
type: "container",
|
|
77
|
+
label: "Dialog Content",
|
|
78
|
+
presetStyle,
|
|
79
|
+
icon: import_svg.ContentIcon,
|
|
80
|
+
detachable: false
|
|
81
|
+
};
|
|
82
|
+
const metaDialogOverlay = {
|
|
83
|
+
category: "hidden",
|
|
84
|
+
invalidAncestors: [],
|
|
85
|
+
type: "container",
|
|
86
|
+
label: "Dialog Overlay",
|
|
87
|
+
presetStyle,
|
|
88
|
+
icon: import_svg.OverlayIcon,
|
|
89
|
+
detachable: false
|
|
90
|
+
};
|
|
91
|
+
const metaDialogTitle = {
|
|
92
|
+
category: "hidden",
|
|
93
|
+
invalidAncestors: [],
|
|
94
|
+
type: "container",
|
|
95
|
+
presetStyle: titlePresetStyle,
|
|
96
|
+
label: "Dialog Title",
|
|
97
|
+
icon: import_svg.HeadingIcon
|
|
98
|
+
};
|
|
99
|
+
const metaDialogDescription = {
|
|
100
|
+
category: "hidden",
|
|
101
|
+
invalidAncestors: [],
|
|
102
|
+
type: "container",
|
|
103
|
+
presetStyle: descriptionPresetStyle,
|
|
104
|
+
label: "Dialog Description",
|
|
105
|
+
icon: import_svg.TextIcon
|
|
106
|
+
};
|
|
107
|
+
const metaDialogClose = {
|
|
108
|
+
category: "hidden",
|
|
109
|
+
invalidAncestors: [],
|
|
110
|
+
type: "container",
|
|
111
|
+
presetStyle: buttonPresetStyle,
|
|
112
|
+
label: "Dialog Close",
|
|
113
|
+
icon: import_svg.ButtonElementIcon
|
|
114
|
+
};
|
|
115
|
+
const metaDialog = {
|
|
116
|
+
category: "radix",
|
|
117
|
+
invalidAncestors: [],
|
|
118
|
+
type: "container",
|
|
119
|
+
label: "Dialog",
|
|
120
|
+
icon: import_svg.DialogIcon,
|
|
121
|
+
order: 15,
|
|
122
|
+
stylable: false,
|
|
123
|
+
template: [
|
|
124
|
+
{
|
|
125
|
+
type: "instance",
|
|
126
|
+
component: "Dialog",
|
|
127
|
+
dataSources: {
|
|
128
|
+
// We don't have support for boolean or undefined, instead of binding on open we bind on a string
|
|
129
|
+
isOpen: { type: "variable", initialValue: "initial" }
|
|
130
|
+
},
|
|
131
|
+
props: [
|
|
132
|
+
{
|
|
133
|
+
type: "dataSource",
|
|
134
|
+
name: "isOpen",
|
|
135
|
+
dataSourceName: "isOpen"
|
|
136
|
+
}
|
|
137
|
+
],
|
|
138
|
+
children: [
|
|
139
|
+
{
|
|
140
|
+
type: "instance",
|
|
141
|
+
component: "DialogTrigger",
|
|
142
|
+
props: [],
|
|
143
|
+
children: [
|
|
144
|
+
{
|
|
145
|
+
type: "instance",
|
|
146
|
+
component: "Button",
|
|
147
|
+
children: [{ type: "text", value: "Button" }]
|
|
148
|
+
}
|
|
149
|
+
]
|
|
150
|
+
},
|
|
151
|
+
{
|
|
152
|
+
type: "instance",
|
|
153
|
+
component: "DialogOverlay",
|
|
154
|
+
props: [],
|
|
155
|
+
/**
|
|
156
|
+
* fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
|
|
157
|
+
* flex
|
|
158
|
+
**/
|
|
159
|
+
styles: [
|
|
160
|
+
tc.fixed(),
|
|
161
|
+
tc.inset(0),
|
|
162
|
+
tc.z(50),
|
|
163
|
+
tc.bg("background", 80),
|
|
164
|
+
tc.backdropBlur("sm"),
|
|
165
|
+
// To allow positioning Content
|
|
166
|
+
tc.flex()
|
|
167
|
+
].flat(),
|
|
168
|
+
children: [
|
|
169
|
+
{
|
|
170
|
+
type: "instance",
|
|
171
|
+
component: "DialogContent",
|
|
172
|
+
props: [],
|
|
173
|
+
/**
|
|
174
|
+
* fixed w-full z-50
|
|
175
|
+
* grid gap-4 max-w-lg
|
|
176
|
+
* m-auto
|
|
177
|
+
* border bg-background p-6 shadow-lg
|
|
178
|
+
**/
|
|
179
|
+
styles: [
|
|
180
|
+
tc.w("full"),
|
|
181
|
+
tc.z(50),
|
|
182
|
+
tc.flex(),
|
|
183
|
+
tc.flex("col"),
|
|
184
|
+
tc.gap(4),
|
|
185
|
+
tc.m("auto"),
|
|
186
|
+
tc.maxW("lg"),
|
|
187
|
+
tc.border(),
|
|
188
|
+
tc.bg("background"),
|
|
189
|
+
tc.p(6),
|
|
190
|
+
tc.shadow("lg"),
|
|
191
|
+
tc.relative()
|
|
192
|
+
].flat(),
|
|
193
|
+
children: [
|
|
194
|
+
{
|
|
195
|
+
type: "instance",
|
|
196
|
+
component: "Box",
|
|
197
|
+
label: "Dialog Header",
|
|
198
|
+
props: [],
|
|
199
|
+
styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
|
|
200
|
+
children: [
|
|
201
|
+
{
|
|
202
|
+
type: "instance",
|
|
203
|
+
component: "DialogTitle",
|
|
204
|
+
props: [],
|
|
205
|
+
/**
|
|
206
|
+
* text-lg leading-none tracking-tight
|
|
207
|
+
**/
|
|
208
|
+
styles: [
|
|
209
|
+
tc.my(0),
|
|
210
|
+
tc.leading("none"),
|
|
211
|
+
tc.text("lg"),
|
|
212
|
+
tc.tracking("tight")
|
|
213
|
+
].flat(),
|
|
214
|
+
children: [
|
|
215
|
+
{
|
|
216
|
+
type: "text",
|
|
217
|
+
value: "Dialog Title"
|
|
218
|
+
}
|
|
219
|
+
]
|
|
220
|
+
},
|
|
221
|
+
{
|
|
222
|
+
type: "instance",
|
|
223
|
+
component: "DialogDescription",
|
|
224
|
+
props: [],
|
|
225
|
+
/**
|
|
226
|
+
* text-sm text-muted-foreground
|
|
227
|
+
**/
|
|
228
|
+
styles: [
|
|
229
|
+
tc.my(0),
|
|
230
|
+
tc.text("sm"),
|
|
231
|
+
tc.text("mutedForeground")
|
|
232
|
+
].flat(),
|
|
233
|
+
children: [
|
|
234
|
+
{
|
|
235
|
+
type: "text",
|
|
236
|
+
value: "dialog description text you can edit"
|
|
237
|
+
}
|
|
238
|
+
]
|
|
239
|
+
}
|
|
240
|
+
]
|
|
241
|
+
},
|
|
242
|
+
{
|
|
243
|
+
type: "instance",
|
|
244
|
+
component: "Text",
|
|
245
|
+
children: [{ type: "text", value: "The text you can edit" }]
|
|
246
|
+
},
|
|
247
|
+
{
|
|
248
|
+
type: "instance",
|
|
249
|
+
component: "DialogClose",
|
|
250
|
+
props: [],
|
|
251
|
+
/**
|
|
252
|
+
* absolute right-4 top-4
|
|
253
|
+
* rounded-sm opacity-70
|
|
254
|
+
* ring-offset-background
|
|
255
|
+
* hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
|
|
256
|
+
* flex items-center justify-center h-4 w-4
|
|
257
|
+
**/
|
|
258
|
+
styles: [
|
|
259
|
+
tc.absolute(),
|
|
260
|
+
tc.right(4),
|
|
261
|
+
tc.top(4),
|
|
262
|
+
tc.rounded("sm"),
|
|
263
|
+
tc.opacity(70),
|
|
264
|
+
tc.flex(),
|
|
265
|
+
tc.items("center"),
|
|
266
|
+
tc.justify("center"),
|
|
267
|
+
tc.h(4),
|
|
268
|
+
tc.w(4),
|
|
269
|
+
tc.border(0),
|
|
270
|
+
tc.bg("transparent"),
|
|
271
|
+
tc.outline("none"),
|
|
272
|
+
tc.hover(tc.opacity(100)),
|
|
273
|
+
tc.focus(tc.ring("ring", 2, "background", 2))
|
|
274
|
+
].flat(),
|
|
275
|
+
children: [{ type: "text", value: "\u2715" }]
|
|
276
|
+
}
|
|
277
|
+
]
|
|
278
|
+
}
|
|
279
|
+
]
|
|
280
|
+
}
|
|
281
|
+
]
|
|
282
|
+
}
|
|
283
|
+
]
|
|
284
|
+
};
|
|
285
|
+
const propsMetaDialog = {
|
|
286
|
+
props: import_dialog.propsDialog,
|
|
287
|
+
initialProps: ["isOpen", "modal"]
|
|
288
|
+
};
|
|
289
|
+
const propsMetaDialogTrigger = {
|
|
290
|
+
props: import_dialog.propsDialogTrigger
|
|
291
|
+
};
|
|
292
|
+
const propsMetaDialogContent = {
|
|
293
|
+
props: import_dialog.propsDialogContent,
|
|
294
|
+
initialProps: []
|
|
295
|
+
};
|
|
296
|
+
const propsMetaDialogOverlay = {
|
|
297
|
+
props: import_dialog.propsDialogOverlay,
|
|
298
|
+
initialProps: []
|
|
299
|
+
};
|
|
300
|
+
const propsMetaDialogClose = {
|
|
301
|
+
props: import_dialog.propsDialogClose,
|
|
302
|
+
initialProps: []
|
|
303
|
+
};
|
|
304
|
+
const propsMetaDialogTitle = {
|
|
305
|
+
props: import_dialog.propsDialogTitle,
|
|
306
|
+
initialProps: []
|
|
307
|
+
};
|
|
308
|
+
const propsMetaDialogDescription = {
|
|
309
|
+
props: import_dialog.propsDialogDescription,
|
|
310
|
+
initialProps: []
|
|
311
|
+
};
|
package/lib/cjs/hooks.js
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var hooks_exports = {};
|
|
20
|
+
__export(hooks_exports, {
|
|
21
|
+
hooks: () => hooks
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(hooks_exports);
|
|
24
|
+
var import_collapsible = require("./collapsible");
|
|
25
|
+
const hooks = [import_collapsible.hooksCollapsible];
|
package/lib/cjs/metas.js
CHANGED
|
@@ -20,7 +20,36 @@ var metas_exports = {};
|
|
|
20
20
|
__export(metas_exports, {
|
|
21
21
|
Collapsible: () => import_collapsible.metaCollapsible,
|
|
22
22
|
CollapsibleContent: () => import_collapsible.metaCollapsibleContent,
|
|
23
|
-
CollapsibleTrigger: () => import_collapsible.metaCollapsibleTrigger
|
|
23
|
+
CollapsibleTrigger: () => import_collapsible.metaCollapsibleTrigger,
|
|
24
|
+
Dialog: () => import_dialog.metaDialog,
|
|
25
|
+
DialogClose: () => import_dialog.metaDialogClose,
|
|
26
|
+
DialogContent: () => import_dialog.metaDialogContent,
|
|
27
|
+
DialogDescription: () => import_dialog.metaDialogDescription,
|
|
28
|
+
DialogOverlay: () => import_dialog.metaDialogOverlay,
|
|
29
|
+
DialogTitle: () => import_dialog.metaDialogTitle,
|
|
30
|
+
DialogTrigger: () => import_dialog.metaDialogTrigger,
|
|
31
|
+
Popover: () => import_popover.metaPopover,
|
|
32
|
+
PopoverContent: () => import_popover.metaPopoverContent,
|
|
33
|
+
PopoverTrigger: () => import_popover.metaPopoverTrigger,
|
|
34
|
+
Sheet: () => import_sheet.metaSheet,
|
|
35
|
+
SheetClose: () => import_sheet.metaSheetClose,
|
|
36
|
+
SheetContent: () => import_sheet.metaSheetContent,
|
|
37
|
+
SheetDescription: () => import_sheet.metaSheetDescription,
|
|
38
|
+
SheetOverlay: () => import_sheet.metaSheetOverlay,
|
|
39
|
+
SheetTitle: () => import_sheet.metaSheetTitle,
|
|
40
|
+
SheetTrigger: () => import_sheet.metaSheetTrigger,
|
|
41
|
+
Tabs: () => import_tabs.metaTabs,
|
|
42
|
+
TabsContent: () => import_tabs.metaTabsContent,
|
|
43
|
+
TabsList: () => import_tabs.metaTabsList,
|
|
44
|
+
TabsTrigger: () => import_tabs.metaTabsTrigger,
|
|
45
|
+
Tooltip: () => import_tooltip.metaTooltip,
|
|
46
|
+
TooltipContent: () => import_tooltip.metaTooltipContent,
|
|
47
|
+
TooltipTrigger: () => import_tooltip.metaTooltipTrigger
|
|
24
48
|
});
|
|
25
49
|
module.exports = __toCommonJS(metas_exports);
|
|
26
50
|
var import_collapsible = require("./collapsible.ws");
|
|
51
|
+
var import_dialog = require("./dialog.ws");
|
|
52
|
+
var import_popover = require("./popover.ws");
|
|
53
|
+
var import_tooltip = require("./tooltip.ws");
|
|
54
|
+
var import_sheet = require("./sheet.ws");
|
|
55
|
+
var import_tabs = require("./tabs.ws");
|
|
@@ -0,0 +1,58 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var popover_exports = {};
|
|
30
|
+
__export(popover_exports, {
|
|
31
|
+
Popover: () => Popover,
|
|
32
|
+
PopoverContent: () => PopoverContent,
|
|
33
|
+
PopoverTrigger: () => PopoverTrigger
|
|
34
|
+
});
|
|
35
|
+
module.exports = __toCommonJS(popover_exports);
|
|
36
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
37
|
+
var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
|
|
38
|
+
var import_react = require("react");
|
|
39
|
+
const Popover = (0, import_react.forwardRef)(({ open: openProp, isOpen, ...props }, ref) => {
|
|
40
|
+
const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
|
|
41
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Root, { open, ...props });
|
|
42
|
+
});
|
|
43
|
+
const PopoverTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
|
|
44
|
+
const firstChild = import_react.Children.toArray(children)[0];
|
|
45
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button or link" }) });
|
|
46
|
+
});
|
|
47
|
+
const PopoverContent = (0, import_react.forwardRef)(
|
|
48
|
+
({ sideOffset = 4, align = "center", hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
49
|
+
PopoverPrimitive.Content,
|
|
50
|
+
{
|
|
51
|
+
ref,
|
|
52
|
+
align: "center",
|
|
53
|
+
sideOffset,
|
|
54
|
+
hideWhenDetached,
|
|
55
|
+
...props
|
|
56
|
+
}
|
|
57
|
+
) })
|
|
58
|
+
);
|
|
@@ -0,0 +1,141 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var popover_ws_exports = {};
|
|
30
|
+
__export(popover_ws_exports, {
|
|
31
|
+
metaPopover: () => metaPopover,
|
|
32
|
+
metaPopoverContent: () => metaPopoverContent,
|
|
33
|
+
metaPopoverTrigger: () => metaPopoverTrigger,
|
|
34
|
+
propsMetaPopover: () => propsMetaPopover,
|
|
35
|
+
propsMetaPopoverContent: () => propsMetaPopoverContent,
|
|
36
|
+
propsMetaPopoverTrigger: () => propsMetaPopoverTrigger
|
|
37
|
+
});
|
|
38
|
+
module.exports = __toCommonJS(popover_ws_exports);
|
|
39
|
+
var import_svg = require("@webstudio-is/icons/svg");
|
|
40
|
+
var import_react_sdk = require("@webstudio-is/react-sdk");
|
|
41
|
+
var tc = __toESM(require("./theme/tailwind-classes"), 1);
|
|
42
|
+
var import_popover = require("./__generated__/popover.props");
|
|
43
|
+
var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
|
|
44
|
+
const presetStyle = {
|
|
45
|
+
div: import_css_normalize.div
|
|
46
|
+
};
|
|
47
|
+
const metaPopoverTrigger = {
|
|
48
|
+
category: "hidden",
|
|
49
|
+
invalidAncestors: [],
|
|
50
|
+
type: "container",
|
|
51
|
+
label: "Popover Trigger",
|
|
52
|
+
icon: import_svg.TriggerIcon,
|
|
53
|
+
stylable: false,
|
|
54
|
+
detachable: false
|
|
55
|
+
};
|
|
56
|
+
const metaPopoverContent = {
|
|
57
|
+
category: "hidden",
|
|
58
|
+
invalidAncestors: [],
|
|
59
|
+
type: "container",
|
|
60
|
+
presetStyle,
|
|
61
|
+
label: "Popover Content",
|
|
62
|
+
icon: import_svg.ContentIcon,
|
|
63
|
+
detachable: false
|
|
64
|
+
};
|
|
65
|
+
const metaPopover = {
|
|
66
|
+
category: "radix",
|
|
67
|
+
invalidAncestors: [],
|
|
68
|
+
type: "container",
|
|
69
|
+
label: "Popover",
|
|
70
|
+
icon: import_svg.PopoverIcon,
|
|
71
|
+
order: 15,
|
|
72
|
+
stylable: false,
|
|
73
|
+
template: [
|
|
74
|
+
{
|
|
75
|
+
type: "instance",
|
|
76
|
+
component: "Popover",
|
|
77
|
+
dataSources: {
|
|
78
|
+
// We don't have support for boolean or undefined, instead of binding on open we bind on a string
|
|
79
|
+
isOpen: { type: "variable", initialValue: "initial" }
|
|
80
|
+
},
|
|
81
|
+
props: [
|
|
82
|
+
{
|
|
83
|
+
type: "dataSource",
|
|
84
|
+
name: "isOpen",
|
|
85
|
+
dataSourceName: "isOpen"
|
|
86
|
+
}
|
|
87
|
+
],
|
|
88
|
+
children: [
|
|
89
|
+
{
|
|
90
|
+
type: "instance",
|
|
91
|
+
component: "PopoverTrigger",
|
|
92
|
+
props: [],
|
|
93
|
+
children: [
|
|
94
|
+
{
|
|
95
|
+
type: "instance",
|
|
96
|
+
component: "Button",
|
|
97
|
+
children: [{ type: "text", value: "Button" }]
|
|
98
|
+
}
|
|
99
|
+
]
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
type: "instance",
|
|
103
|
+
component: "PopoverContent",
|
|
104
|
+
props: [],
|
|
105
|
+
/**
|
|
106
|
+
* z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
|
|
107
|
+
**/
|
|
108
|
+
styles: [
|
|
109
|
+
tc.z(50),
|
|
110
|
+
tc.w(72),
|
|
111
|
+
tc.rounded("md"),
|
|
112
|
+
tc.border(),
|
|
113
|
+
tc.bg("popover"),
|
|
114
|
+
tc.p(4),
|
|
115
|
+
tc.text("popoverForeground"),
|
|
116
|
+
tc.shadow("md"),
|
|
117
|
+
tc.outline("none")
|
|
118
|
+
].flat(),
|
|
119
|
+
children: [
|
|
120
|
+
{
|
|
121
|
+
type: "instance",
|
|
122
|
+
component: "Text",
|
|
123
|
+
children: [{ type: "text", value: "The text you can edit" }]
|
|
124
|
+
}
|
|
125
|
+
]
|
|
126
|
+
}
|
|
127
|
+
]
|
|
128
|
+
}
|
|
129
|
+
]
|
|
130
|
+
};
|
|
131
|
+
const propsMetaPopover = {
|
|
132
|
+
props: import_popover.propsPopover,
|
|
133
|
+
initialProps: ["isOpen", "modal"]
|
|
134
|
+
};
|
|
135
|
+
const propsMetaPopoverTrigger = {
|
|
136
|
+
props: import_popover.propsPopoverTrigger
|
|
137
|
+
};
|
|
138
|
+
const propsMetaPopoverContent = {
|
|
139
|
+
props: import_popover.propsPopoverContent,
|
|
140
|
+
initialProps: ["side", "sideOffset", "align", "alignOffset"]
|
|
141
|
+
};
|
package/lib/cjs/props.js
CHANGED
|
@@ -20,7 +20,36 @@ var props_exports = {};
|
|
|
20
20
|
__export(props_exports, {
|
|
21
21
|
Collapsible: () => import_collapsible.propsMetaCollapsible,
|
|
22
22
|
CollapsibleContent: () => import_collapsible.propsMetaCollapsibleContent,
|
|
23
|
-
CollapsibleTrigger: () => import_collapsible.propsMetaCollapsibleTrigger
|
|
23
|
+
CollapsibleTrigger: () => import_collapsible.propsMetaCollapsibleTrigger,
|
|
24
|
+
Dialog: () => import_dialog.propsMetaDialog,
|
|
25
|
+
DialogClose: () => import_dialog.propsMetaDialogClose,
|
|
26
|
+
DialogContent: () => import_dialog.propsMetaDialogContent,
|
|
27
|
+
DialogDescription: () => import_dialog.propsMetaDialogDescription,
|
|
28
|
+
DialogOverlay: () => import_dialog.propsMetaDialogOverlay,
|
|
29
|
+
DialogTitle: () => import_dialog.propsMetaDialogTitle,
|
|
30
|
+
DialogTrigger: () => import_dialog.propsMetaDialogTrigger,
|
|
31
|
+
Popover: () => import_popover.propsMetaPopover,
|
|
32
|
+
PopoverContent: () => import_popover.propsMetaPopoverContent,
|
|
33
|
+
PopoverTrigger: () => import_popover.propsMetaPopoverTrigger,
|
|
34
|
+
Sheet: () => import_sheet.propsMetaSheet,
|
|
35
|
+
SheetClose: () => import_sheet.propsMetaSheetClose,
|
|
36
|
+
SheetContent: () => import_sheet.propsMetaSheetContent,
|
|
37
|
+
SheetDescription: () => import_sheet.propsMetaSheetDescription,
|
|
38
|
+
SheetOverlay: () => import_sheet.propsMetaSheetOverlay,
|
|
39
|
+
SheetTitle: () => import_sheet.propsMetaSheetTitle,
|
|
40
|
+
SheetTrigger: () => import_sheet.propsMetaSheetTrigger,
|
|
41
|
+
Tabs: () => import_tabs.propsMetaTabs,
|
|
42
|
+
TabsContent: () => import_tabs.propsMetaTabsContent,
|
|
43
|
+
TabsList: () => import_tabs.propsMetaTabsList,
|
|
44
|
+
TabsTrigger: () => import_tabs.propsMetaTabsTrigger,
|
|
45
|
+
Tooltip: () => import_tooltip.propsMetaTooltip,
|
|
46
|
+
TooltipContent: () => import_tooltip.propsMetaTooltipContent,
|
|
47
|
+
TooltipTrigger: () => import_tooltip.propsMetaTooltipTrigger
|
|
24
48
|
});
|
|
25
49
|
module.exports = __toCommonJS(props_exports);
|
|
26
50
|
var import_collapsible = require("./collapsible.ws");
|
|
51
|
+
var import_dialog = require("./dialog.ws");
|
|
52
|
+
var import_popover = require("./popover.ws");
|
|
53
|
+
var import_tooltip = require("./tooltip.ws");
|
|
54
|
+
var import_sheet = require("./sheet.ws");
|
|
55
|
+
var import_tabs = require("./tabs.ws");
|