@webstudio-is/sdk-components-react-radix 0.83.0 → 0.85.0

package/lib/cjs/sheet.js

@@ -0,0 +1,63 @@
+"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 sheet_exports = {};
+__export(sheet_exports, {
+  Sheet: () => Sheet,
+  SheetClose: () => SheetClose,
+  SheetContent: () => SheetContent,
+  SheetDescription: () => SheetDescription,
+  SheetOverlay: () => SheetOverlay,
+  SheetTitle: () => SheetTitle,
+  SheetTrigger: () => SheetTrigger
+});
+module.exports = __toCommonJS(sheet_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var Dialog = __toESM(require("./dialog"), 1);
+const Sheet = Dialog.Dialog;
+const SheetTrigger = Dialog.DialogTrigger;
+const SheetOverlay = Dialog.DialogOverlay;
+const SheetClose = Dialog.DialogClose;
+const SheetTitle = Dialog.DialogTitle;
+const SheetDescription = Dialog.DialogDescription;
+const SheetContent = (0, import_react.forwardRef)(
+  ({ tag = "nav", side = "left", role = "navigation", children, ...props }, ref) => {
+    const Tag = tag;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      Dialog.DialogContent,
+      {
+        asChild: true,
+        "data-side": side,
+        role,
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { ref, children })
+      }
+    );
+  }
+);

package/lib/cjs/sheet.ws.js

@@ -0,0 +1,317 @@
+"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 sheet_ws_exports = {};
+__export(sheet_ws_exports, {
+  metaSheet: () => metaSheet,
+  metaSheetClose: () => metaSheetClose,
+  metaSheetContent: () => metaSheetContent,
+  metaSheetDescription: () => metaSheetDescription,
+  metaSheetOverlay: () => metaSheetOverlay,
+  metaSheetTitle: () => metaSheetTitle,
+  metaSheetTrigger: () => metaSheetTrigger,
+  propsMetaSheet: () => propsMetaSheet,
+  propsMetaSheetClose: () => propsMetaSheetClose,
+  propsMetaSheetContent: () => propsMetaSheetContent,
+  propsMetaSheetDescription: () => propsMetaSheetDescription,
+  propsMetaSheetOverlay: () => propsMetaSheetOverlay,
+  propsMetaSheetTitle: () => propsMetaSheetTitle,
+  propsMetaSheetTrigger: () => propsMetaSheetTrigger
+});
+module.exports = __toCommonJS(sheet_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_sheet = require("./__generated__/sheet.props");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+const contentPresetStyle = {
+  div: import_css_normalize.div,
+  nav: import_css_normalize.nav
+};
+const presetStyle = {
+  div: import_css_normalize.div
+};
+const buttonPresetStyle = {
+  button: import_css_normalize.button
+};
+const titlePresetStyle = {
+  h2: import_css_normalize.h2
+};
+const descriptionPresetStyle = {
+  p: import_css_normalize.p
+};
+const metaSheetTrigger = {
+  category: "hidden",
+  type: "container",
+  label: "Sheet Trigger",
+  icon: import_svg.TriggerIcon,
+  stylable: false,
+  detachable: false
+};
+const metaSheetContent = {
+  category: "hidden",
+  type: "container",
+  label: "Sheet Content",
+  icon: import_svg.ContentIcon,
+  detachable: false,
+  presetStyle: contentPresetStyle,
+  states: [
+    { selector: "[data-side=top]", label: "Top Side" },
+    { selector: "[data-side=right]", label: "Right Side" },
+    { selector: "[data-side=bottom]", label: "Bottom Side" },
+    { selector: "[data-side=left]", label: "Left Side" }
+  ]
+};
+const metaSheetOverlay = {
+  category: "hidden",
+  type: "container",
+  presetStyle,
+  label: "Sheet Overlay",
+  icon: import_svg.OverlayIcon,
+  detachable: false
+};
+const metaSheetTitle = {
+  category: "hidden",
+  type: "container",
+  presetStyle: titlePresetStyle,
+  label: "Sheet Title",
+  icon: import_svg.HeadingIcon
+};
+const metaSheetDescription = {
+  category: "hidden",
+  type: "container",
+  presetStyle: descriptionPresetStyle,
+  label: "Sheet Description",
+  icon: import_svg.TextIcon
+};
+const metaSheetClose = {
+  category: "hidden",
+  type: "container",
+  presetStyle: buttonPresetStyle,
+  label: "Sheet Close",
+  icon: import_svg.ButtonElementIcon
+};
+const metaSheet = {
+  category: "radix",
+  type: "container",
+  label: "Sheet",
+  icon: import_svg.HamburgerMenuIcon,
+  order: 15,
+  stylable: false,
+  template: [
+    {
+      type: "instance",
+      component: "Sheet",
+      dataSources: {
+        // We don't have support for boolean or undefined, instead of binding on open we bind on a string
+        isOpen: { type: "variable", initialValue: "initial" }
+      },
+      props: [
+        {
+          type: "dataSource",
+          name: "isOpen",
+          dataSourceName: "isOpen"
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "SheetTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "SheetOverlay",
+          /**
+           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
+           * flex
+           **/
+          styles: [
+            tc.fixed(),
+            tc.inset(0),
+            tc.z(50),
+            tc.bg("background", 80),
+            tc.backdropBlur("sm"),
+            // To allow positioning Content
+            tc.flex(),
+            tc.flex("col"),
+            tc.overflow("auto")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "SheetContent",
+              /**
+               * fixed w-full z-50
+               * grid gap-4 max-w-lg
+               * m-auto
+               * border bg-background p-6 shadow-lg
+               **/
+              styles: [
+                tc.w("full"),
+                tc.z(50),
+                tc.flex(),
+                tc.flex("col"),
+                tc.gap(4),
+                tc.border(),
+                tc.bg("background"),
+                tc.p(6),
+                tc.shadow("lg"),
+                tc.relative(),
+                tc.state(
+                  [tc.mr("auto"), tc.maxW("sm"), tc.grow()].flat(),
+                  "[data-side=left]"
+                ),
+                tc.state(
+                  [tc.ml("auto"), tc.maxW("sm"), tc.grow()].flat(),
+                  "[data-side=right]"
+                ),
+                tc.state([tc.mb("auto")].flat(), "[data-side=top]"),
+                tc.state([tc.mt("auto")].flat(), "[data-side=bottom]")
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  label: "Sheet Header",
+                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
+                  children: [
+                    {
+                      type: "instance",
+                      component: "SheetTitle",
+                      /**
+                       * text-lg leading-none tracking-tight
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.leading("none"),
+                        tc.text("lg"),
+                        tc.tracking("tight")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "Sheet Title"
+                        }
+                      ]
+                    },
+                    {
+                      type: "instance",
+                      component: "SheetDescription",
+                      /**
+                       * text-sm text-muted-foreground
+                       **/
+                      styles: [
+                        tc.my(0),
+                        tc.text("sm"),
+                        tc.text("mutedForeground")
+                      ].flat(),
+                      children: [
+                        {
+                          type: "text",
+                          value: "sheet description text you can edit"
+                        }
+                      ]
+                    }
+                  ]
+                },
+                {
+                  type: "instance",
+                  component: "Text",
+                  children: [{ type: "text", value: "The text you can edit" }]
+                },
+                {
+                  type: "instance",
+                  component: "SheetClose",
+                  /**
+                   * absolute right-4 top-4
+                   * rounded-sm opacity-70
+                   * ring-offset-background
+                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
+                   * flex items-center justify-center h-4 w-4
+                   **/
+                  styles: [
+                    tc.absolute(),
+                    tc.right(4),
+                    tc.top(4),
+                    tc.rounded("sm"),
+                    tc.opacity(70),
+                    tc.flex(),
+                    tc.items("center"),
+                    tc.justify("center"),
+                    tc.h(4),
+                    tc.w(4),
+                    tc.border(0),
+                    tc.bg("transparent"),
+                    tc.outline("none"),
+                    tc.hover(tc.opacity(100)),
+                    tc.focus(tc.ring("ring", 2, "background", 2))
+                  ].flat(),
+                  children: [{ type: "text", value: "\u2715" }]
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const propsMetaSheet = {
+  props: import_sheet.propsSheet,
+  initialProps: ["isOpen", "modal"]
+};
+const propsMetaSheetTrigger = {
+  props: import_sheet.propsSheetTrigger
+};
+const propsMetaSheetContent = {
+  props: import_sheet.propsSheetContent,
+  initialProps: ["side", "role", "tag"]
+};
+const propsMetaSheetOverlay = {
+  props: import_sheet.propsSheetOverlay,
+  initialProps: []
+};
+const propsMetaSheetClose = {
+  props: import_sheet.propsSheetClose,
+  initialProps: []
+};
+const propsMetaSheetTitle = {
+  props: import_sheet.propsSheetTitle,
+  initialProps: []
+};
+const propsMetaSheetDescription = {
+  props: import_sheet.propsSheetDescription,
+  initialProps: []
+};

package/lib/cjs/tabs.js

@@ -0,0 +1,41 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tabs_exports = {};
+__export(tabs_exports, {
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger
+});
+module.exports = __toCommonJS(tabs_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_tabs = require("@radix-ui/react-tabs");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+const Tabs = import_react_tabs.Root;
+const TabsList = import_react_tabs.List;
+const TabsTrigger = (0, import_react.forwardRef)(({ value, children, ...props }, ref) => {
+  const firstChild = import_react.Children.toArray(children)[0];
+  const index = (0, import_react_sdk.getIndexWithinAncestorFromComponentProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_tabs.Trigger, { ref, value: value ?? index, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button" }) });
+});
+const TabsContent = (0, import_react.forwardRef)(({ value, ...props }, ref) => {
+  const index = (0, import_react_sdk.getIndexWithinAncestorFromComponentProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_tabs.Content, { ref, value: value ?? index, ...props });
+});

package/lib/cjs/tabs.ws.js

@@ -0,0 +1,213 @@
+"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 tabs_ws_exports = {};
+__export(tabs_ws_exports, {
+  metaTabs: () => metaTabs,
+  metaTabsContent: () => metaTabsContent,
+  metaTabsList: () => metaTabsList,
+  metaTabsTrigger: () => metaTabsTrigger,
+  propsMetaTabs: () => propsMetaTabs,
+  propsMetaTabsContent: () => propsMetaTabsContent,
+  propsMetaTabsList: () => propsMetaTabsList,
+  propsMetaTabsTrigger: () => propsMetaTabsTrigger
+});
+module.exports = __toCommonJS(tabs_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+var import_tabs = require("./__generated__/tabs.props");
+const presetStyle = {
+  div: import_css_normalize.div
+};
+const tabsTriggerStyles = [
+  tc.inlineFlex(),
+  tc.items("center"),
+  tc.justify("center"),
+  tc.whitespace("nowrap"),
+  tc.rounded("md"),
+  tc.px(3),
+  tc.py(1.5),
+  tc.text("sm"),
+  tc.font("medium"),
+  tc.transition("all"),
+  tc.focusVisible(
+    [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+  ),
+  tc.disabled([tc.pointerEvents("none"), tc.opacity(50)].flat()),
+  tc.state(
+    [tc.bg("background"), tc.text("foreground"), tc.shadow("sm")].flat(),
+    "[data-state=active]"
+  )
+].flat();
+const tabsContentStyles = [
+  tc.mt(2),
+  tc.focusVisible(
+    [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+  )
+].flat();
+const metaTabs = {
+  category: "radix",
+  type: "container",
+  label: "Tabs",
+  icon: import_svg.TabsIcon,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "Tabs",
+      dataSources: {
+        tabsValue: { type: "variable", initialValue: "0" }
+      },
+      props: [
+        { type: "dataSource", name: "value", dataSourceName: "tabsValue" },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: `tabsValue = value`
+            }
+          ]
+        }
+      ],
+      children: [
+        {
+          type: "instance",
+          component: "TabsList",
+          // inline-flex h-10 items-center justify-center rounded-md bg-muted p-1 text-muted-foreground
+          styles: [
+            tc.inlineFlex(),
+            tc.h(10),
+            tc.items("center"),
+            tc.justify("center"),
+            tc.rounded("md"),
+            tc.bg("muted"),
+            tc.p(1),
+            tc.text("mutedForeground")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "TabsTrigger",
+              children: [
+                {
+                  type: "instance",
+                  component: "Button",
+                  styles: tabsTriggerStyles,
+                  children: [{ type: "text", value: "Account" }]
+                }
+              ]
+            },
+            {
+              type: "instance",
+              component: "TabsTrigger",
+              children: [
+                {
+                  type: "instance",
+                  component: "Button",
+                  styles: tabsTriggerStyles,
+                  children: [{ type: "text", value: "Password" }]
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "TabsContent",
+          styles: tabsContentStyles,
+          children: [
+            { type: "text", value: "Make changes to your account here." }
+          ]
+        },
+        {
+          type: "instance",
+          component: "TabsContent",
+          styles: tabsContentStyles,
+          children: [{ type: "text", value: "Change your password here." }]
+        }
+      ]
+    }
+  ]
+};
+const metaTabsList = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  label: "Tabs List",
+  icon: import_svg.HeaderIcon,
+  requiredAncestors: ["Tabs"],
+  presetStyle
+};
+const metaTabsTrigger = {
+  category: "hidden",
+  type: "container",
+  label: "Tabs Trigger",
+  icon: import_svg.TriggerIcon,
+  requiredAncestors: ["TabsList"],
+  invalidAncestors: ["TabsTrigger"],
+  indexWithinAncestor: "Tabs",
+  template: [
+    {
+      type: "instance",
+      component: "TabsTrigger",
+      children: [{ type: "text", value: "New Tab" }]
+    }
+  ]
+};
+const metaTabsContent = {
+  category: "hidden",
+  type: "container",
+  label: "Tabs Content",
+  icon: import_svg.ContentIcon,
+  requiredAncestors: ["Tabs"],
+  indexWithinAncestor: "Tabs",
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "TabsContent",
+      children: [{ type: "text", value: "New Tab Content" }]
+    }
+  ]
+};
+const propsMetaTabs = {
+  props: import_tabs.propsTabs
+};
+const propsMetaTabsList = {
+  props: import_tabs.propsTabsList
+};
+const propsMetaTabsTrigger = {
+  props: import_tabs.propsTabsTrigger
+};
+const propsMetaTabsContent = {
+  props: import_tabs.propsTabsContent
+};

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);