@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.
Files changed (103) hide show
  1. package/lib/__generated__/dialog.props.js +2120 -0
  2. package/lib/__generated__/popover.props.js +468 -0
  3. package/lib/__generated__/sheet.props.js +2159 -0
  4. package/lib/__generated__/tabs.props.js +1286 -0
  5. package/lib/__generated__/tooltip.props.js +478 -0
  6. package/lib/cjs/__generated__/dialog.props.js +2140 -0
  7. package/lib/cjs/__generated__/popover.props.js +488 -0
  8. package/lib/cjs/__generated__/sheet.props.js +2179 -0
  9. package/lib/cjs/__generated__/tabs.props.js +1306 -0
  10. package/lib/cjs/__generated__/tooltip.props.js +498 -0
  11. package/lib/cjs/collapsible.js +34 -4
  12. package/lib/cjs/collapsible.ws.js +14 -9
  13. package/lib/cjs/components.js +30 -1
  14. package/lib/cjs/dialog.js +57 -0
  15. package/lib/cjs/dialog.ws.js +311 -0
  16. package/lib/cjs/hooks.js +25 -0
  17. package/lib/cjs/metas.js +30 -1
  18. package/lib/cjs/popover.js +58 -0
  19. package/lib/cjs/popover.ws.js +141 -0
  20. package/lib/cjs/props.js +30 -1
  21. package/lib/cjs/sheet.js +63 -0
  22. package/lib/cjs/sheet.ws.js +317 -0
  23. package/lib/cjs/tabs.js +41 -0
  24. package/lib/cjs/tabs.ws.js +213 -0
  25. package/lib/cjs/theme/radix-common-types.js +16 -0
  26. package/lib/cjs/theme/tailwind-classes.js +547 -0
  27. package/lib/cjs/theme/tailwind-colors.js +35 -0
  28. package/lib/cjs/theme/tailwind-theme.js +46 -0
  29. package/lib/cjs/tooltip.js +55 -0
  30. package/lib/cjs/tooltip.ws.js +142 -0
  31. package/lib/collapsible.js +35 -7
  32. package/lib/collapsible.ws.js +19 -10
  33. package/lib/components.js +46 -1
  34. package/lib/dialog.js +30 -0
  35. package/lib/dialog.ws.js +298 -0
  36. package/lib/hooks.js +5 -0
  37. package/lib/metas.js +59 -1
  38. package/lib/popover.js +31 -0
  39. package/lib/popover.ws.js +116 -0
  40. package/lib/props.js +59 -1
  41. package/lib/sheet.js +35 -0
  42. package/lib/sheet.ws.js +304 -0
  43. package/lib/tabs.js +24 -0
  44. package/lib/tabs.ws.js +193 -0
  45. package/lib/theme/radix-common-types.js +0 -0
  46. package/lib/theme/tailwind-classes.js +527 -0
  47. package/lib/theme/tailwind-colors.js +15 -0
  48. package/lib/theme/tailwind-theme.js +16 -0
  49. package/lib/tooltip.js +28 -0
  50. package/lib/tooltip.ws.js +117 -0
  51. package/lib/types/__generated__/dialog.props.d.ts +8 -0
  52. package/lib/types/__generated__/popover.props.d.ts +4 -0
  53. package/lib/types/__generated__/sheet.props.d.ts +8 -0
  54. package/lib/types/__generated__/tabs.props.d.ts +5 -0
  55. package/lib/types/__generated__/tooltip.props.d.ts +4 -0
  56. package/lib/types/collapsible.d.ts +4 -3
  57. package/lib/types/components.d.ts +5 -0
  58. package/lib/types/dialog.d.ts +25 -0
  59. package/lib/types/dialog.ws.d.ts +23 -0
  60. package/lib/types/hooks.d.ts +2 -0
  61. package/lib/types/metas.d.ts +5 -0
  62. package/lib/types/popover.d.ts +21 -0
  63. package/lib/types/popover.ws.d.ts +15 -0
  64. package/lib/types/props.d.ts +5 -0
  65. package/lib/types/sheet.d.ts +15 -0
  66. package/lib/types/sheet.ws.d.ts +23 -0
  67. package/lib/types/tabs.d.ts +15 -0
  68. package/lib/types/tabs.ws.d.ts +9 -0
  69. package/lib/types/theme/radix-common-types.d.ts +84 -0
  70. package/lib/types/theme/tailwind-classes.d.ts +83 -0
  71. package/lib/types/theme/tailwind-colors.d.ts +21 -0
  72. package/lib/types/theme/tailwind-theme.d.ts +72 -0
  73. package/lib/types/tooltip.d.ts +21 -0
  74. package/lib/types/tooltip.ws.d.ts +15 -0
  75. package/package.json +23 -6
  76. package/src/__generated__/dialog.props.ts +2363 -0
  77. package/src/__generated__/popover.props.ts +515 -0
  78. package/src/__generated__/sheet.props.ts +2402 -0
  79. package/src/__generated__/tabs.props.ts +1434 -0
  80. package/src/__generated__/tooltip.props.ts +526 -0
  81. package/src/collapsible.stories.tsx +21 -0
  82. package/src/collapsible.tsx +44 -21
  83. package/src/collapsible.ws.ts +21 -10
  84. package/src/components.ts +21 -0
  85. package/src/dialog.tsx +66 -0
  86. package/src/dialog.ws.tsx +315 -0
  87. package/src/hooks.ts +4 -0
  88. package/src/metas.ts +34 -0
  89. package/src/popover.tsx +70 -0
  90. package/src/popover.ws.tsx +127 -0
  91. package/src/props.ts +34 -0
  92. package/src/sheet.stories.tsx +21 -0
  93. package/src/sheet.tsx +40 -0
  94. package/src/sheet.ws.tsx +326 -0
  95. package/src/tabs.stories.tsx +21 -0
  96. package/src/tabs.tsx +46 -0
  97. package/src/tabs.ws.ts +211 -0
  98. package/src/theme/radix-common-types.ts +495 -0
  99. package/src/theme/tailwind-classes.ts +695 -0
  100. package/src/theme/tailwind-colors.ts +45 -0
  101. package/src/theme/tailwind-theme.ts +24 -0
  102. package/src/tooltip.tsx +69 -0
  103. 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
+ };
@@ -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");