@webstudio-is/sdk-components-react 0.81.0 → 0.83.0

package/lib/cjs/radix-popover.ws.js

@@ -0,0 +1,139 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radix_popover_ws_exports = {};
+__export(radix_popover_ws_exports, {
+  metaPopover: () => metaPopover,
+  metaPopoverContent: () => metaPopoverContent,
+  metaPopoverTrigger: () => metaPopoverTrigger,
+  propsMetaPopover: () => propsMetaPopover,
+  propsMetaPopoverContent: () => propsMetaPopoverContent,
+  propsMetaPopoverTrigger: () => propsMetaPopoverTrigger
+});
+module.exports = __toCommonJS(radix_popover_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+var import_radix_popover = require("./__generated__/radix-popover.props");
+const metaPopoverTrigger = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "PopoverTrigger",
+  icon: import_svg.RadioCheckedIcon,
+  stylable: false,
+  detachable: false
+};
+const metaPopoverContent = {
+  category: "hidden",
+  invalidAncestors: [],
+  type: "container",
+  label: "PopoverContent",
+  icon: import_svg.RadioCheckedIcon,
+  detachable: false
+};
+const metaPopover = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Popover",
+  icon: import_svg.RadioCheckedIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Popover",
+      label: "Popover",
+      props: [
+        {
+          name: "isOpen",
+          // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "isOpen"
+          }
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "PopoverTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "PopoverContent",
+          label: "Popover Content",
+          props: [],
+          /**
+           *  z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
+           **/
+          styles: [
+            tc.z(50),
+            tc.w(72),
+            tc.rounded("md"),
+            tc.border(),
+            tc.bg("popover"),
+            tc.p(4),
+            tc.text("popoverForeground"),
+            tc.shadow("md"),
+            tc.outline("none")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "The text you can edit" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const propsMetaPopover = {
+  props: import_radix_popover.propsPopover,
+  initialProps: ["isOpen", "modal"]
+};
+const propsMetaPopoverTrigger = {
+  props: import_radix_popover.propsPopoverTrigger
+};
+const propsMetaPopoverContent = {
+  props: import_radix_popover.propsPopoverContent,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+};

package/lib/cjs/radix-tooltip.js

@@ -0,0 +1,51 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radix_tooltip_exports = {};
+__export(radix_tooltip_exports, {
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipTrigger: () => TooltipTrigger
+});
+module.exports = __toCommonJS(radix_tooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_react = require("react");
+const DisplayContentsStyle = { display: "contents" };
+const Tooltip = (0, import_react.forwardRef)(({ open: openProp, isOpen, ...props }, ref) => {
+  const [webstudioAttributes, restProps] = (0, import_react_sdk.splitPropsWithWebstudioAttributes)(props);
+  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Root, { open, ...restProps }) });
+});
+const TooltipTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
+  const firstChild = import_react.Children.toArray(children)[0];
+  const [webstudioAttributes, restProps] = (0, import_react_sdk.splitPropsWithWebstudioAttributes)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { ref, style: DisplayContentsStyle, ...webstudioAttributes, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Trigger, { asChild: true, ...restProps, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button or link" }) }) });
+});
+const TooltipContent = (0, import_react.forwardRef)(({ sideOffset = 4, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Content, { ref, sideOffset, ...props }) }));

package/lib/cjs/radix-tooltip.ws.js

@@ -0,0 +1,140 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radix_tooltip_ws_exports = {};
+__export(radix_tooltip_ws_exports, {
+  metaTooltip: () => metaTooltip,
+  metaTooltipContent: () => metaTooltipContent,
+  metaTooltipTrigger: () => metaTooltipTrigger,
+  propsMetaTooltip: () => propsMetaTooltip,
+  propsMetaTooltipContent: () => propsMetaTooltipContent,
+  propsMetaTooltipTrigger: () => propsMetaTooltipTrigger
+});
+module.exports = __toCommonJS(radix_tooltip_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+var import_radix_tooltip = require("./__generated__/radix-tooltip.props");
+const metaTooltipTrigger = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  label: "TooltipTrigger",
+  icon: import_svg.RadioCheckedIcon,
+  stylable: false
+};
+const metaTooltipContent = {
+  category: "hidden",
+  detachable: false,
+  invalidAncestors: [],
+  type: "container",
+  label: "TooltipContent",
+  icon: import_svg.RadioCheckedIcon
+};
+const metaTooltip = {
+  category: "radix",
+  invalidAncestors: [],
+  type: "container",
+  label: "Tooltip",
+  icon: import_svg.RadioCheckedIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Tooltip",
+      label: "Tooltip",
+      props: [
+        {
+          name: "isOpen",
+          // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+          type: "string",
+          value: "initial",
+          dataSourceRef: {
+            type: "variable",
+            name: "isOpen"
+          }
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "TooltipTrigger",
+          props: [],
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "TooltipContent",
+          label: "Tooltip Content",
+          props: [],
+          /**
+           *  z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md
+           **/
+          styles: [
+            tc.z(50),
+            tc.overflow("hidden"),
+            tc.rounded("md"),
+            tc.border(),
+            tc.bg("popover"),
+            tc.px(3),
+            tc.py(1.5),
+            tc.text("sm"),
+            tc.text("popoverForeground"),
+            tc.shadow("md")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [{ type: "text", value: "The text you can edit" }]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const propsMetaTooltip = {
+  props: import_radix_tooltip.propsTooltip,
+  initialProps: ["isOpen", "delayDuration", "disableHoverableContent"]
+};
+const propsMetaTooltipTrigger = {
+  props: import_radix_tooltip.propsTooltipTrigger
+};
+const propsMetaTooltipContent = {
+  props: import_radix_tooltip.propsTooltipContent,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+};

package/lib/cjs/theme/radix-common-types.js

@@ -0,0 +1,16 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var radix_common_types_exports = {};
+module.exports = __toCommonJS(radix_common_types_exports);