@webstudio-is/sdk-components-react-radix 0.91.0 → 0.92.0

package/lib/cjs/select.ws.js

@@ -1,350 +0,0 @@
-"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 select_ws_exports = {};
-__export(select_ws_exports, {
-  metaSelect: () => metaSelect,
-  metaSelectContent: () => metaSelectContent,
-  metaSelectItem: () => metaSelectItem,
-  metaSelectItemIndicator: () => metaSelectItemIndicator,
-  metaSelectItemText: () => metaSelectItemText,
-  metaSelectTrigger: () => metaSelectTrigger,
-  metaSelectValue: () => metaSelectValue,
-  metaSelectViewport: () => metaSelectViewport,
-  propsMetaSelect: () => propsMetaSelect,
-  propsMetaSelectContent: () => propsMetaSelectContent,
-  propsMetaSelectItem: () => propsMetaSelectItem,
-  propsMetaSelectItemIndicator: () => propsMetaSelectItemIndicator,
-  propsMetaSelectItemText: () => propsMetaSelectItemText,
-  propsMetaSelectTrigger: () => propsMetaSelectTrigger,
-  propsMetaSelectValue: () => propsMetaSelectValue,
-  propsMetaSelectViewport: () => propsMetaSelectViewport
-});
-module.exports = __toCommonJS(select_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_select = require("./__generated__/select.props");
-const presetStyle = {
-  div: import_css_normalize.div
-};
-const createSelectItem = ({
-  props,
-  children
-}) => ({
-  type: "instance",
-  component: "SelectItem",
-  props,
-  // relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none
-  // focus:bg-accent focus:text-accent-foreground
-  // data-[disabled]:pointer-events-none data-[disabled]:opacity-50
-  styles: [
-    tc.relative(),
-    tc.flex(),
-    tc.w("full"),
-    tc.cursor("default"),
-    tc.select("none"),
-    tc.items("center"),
-    tc.rounded("md"),
-    tc.py(1.5),
-    tc.pl(8),
-    tc.pr(2),
-    tc.text("sm"),
-    tc.outline("none"),
-    tc.focus([tc.bg("accent"), tc.text("accentForeground")].flat()),
-    tc.state(
-      [tc.pointerEvents("none"), tc.opacity(50)].flat(),
-      "[data-disabled]"
-    )
-  ].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "SelectItemIndicator",
-      // absolute left-2 flex h-3.5 w-3.5 items-center justify-center
-      styles: [
-        tc.absolute(),
-        tc.left(2),
-        tc.flex(),
-        tc.h(3.5),
-        tc.w(3.5),
-        tc.items("center"),
-        tc.justify("center")
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "HtmlEmbed",
-          label: "Indicator Icon",
-          props: [
-            {
-              type: "string",
-              name: "code",
-              value: import_svg.CheckMarkIcon
-            }
-          ],
-          children: []
-        }
-      ]
-    },
-    {
-      type: "instance",
-      component: "SelectItemText",
-      children
-    }
-  ]
-});
-const metaSelect = {
-  category: "radix",
-  order: 10,
-  type: "container",
-  icon: import_svg.SelectIcon,
-  stylable: false,
-  description: "Use within a form to give your users a list of options to choose from.",
-  template: [
-    {
-      type: "instance",
-      component: "Select",
-      dataSources: {
-        selectValue: { type: "variable", initialValue: "" },
-        selectOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          name: "value",
-          type: "dataSource",
-          dataSourceName: "selectValue"
-        },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["value"], code: `selectValue = value` }
-          ]
-        },
-        {
-          name: "open",
-          type: "dataSource",
-          dataSourceName: "selectOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `selectOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "SelectTrigger",
-          // flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background
-          // placeholder:text-muted-foreground
-          // focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
-          // disabled:cursor-not-allowed disabled:opacity-50
-          styles: [
-            tc.flex(),
-            tc.h(10),
-            tc.w("full"),
-            tc.items("center"),
-            tc.justify("between"),
-            tc.rounded("md"),
-            tc.border(),
-            tc.border("input"),
-            tc.bg("background"),
-            tc.px(3),
-            tc.py(2),
-            tc.text("sm"),
-            tc.state([tc.text("mutedForeground")].flat(), "::placeholder"),
-            tc.focus(
-              [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
-            ),
-            tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat())
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "SelectValue",
-              props: [{ name: "placeholder", type: "string", value: "Theme" }],
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "SelectContent",
-          // relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md
-          // data-[state=open]:animate-in
-          // data-[state=closed]:animate-out data-[state=closed]:fade-out-0
-          // data-[state=open]:fade-in-0
-          // data-[state=closed]:zoom-out-95
-          // data-[state=open]:zoom-in-95
-          // data-[side=bottom]:slide-in-from-top-2
-          // data-[side=left]:slide-in-from-right-2
-          // data-[side=right]:slide-in-from-left-2
-          // data-[side=top]:slide-in-from-bottom-2
-          // position=popper
-          // data-[side=bottom]:translate-y-1
-          // data-[side=left]:-translate-x-1
-          // data-[side=right]:translate-x-1
-          // data-[side=top]:-translate-y-1
-          styles: [
-            tc.relative(),
-            tc.z(50),
-            tc.property("minWidth", "8rem"),
-            tc.overflow("hidden"),
-            tc.rounded("md"),
-            tc.border(),
-            tc.bg("popover"),
-            tc.text("popoverForeground"),
-            tc.shadow("md")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "SelectViewport",
-              // p-1
-              // position=popper
-              // h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]
-              styles: [
-                tc.p(1),
-                tc.property("height", "--radix-select-trigger-height"),
-                tc.w("full"),
-                tc.property("minWidth", "--radix-select-trigger-width")
-              ].flat(),
-              children: [
-                createSelectItem({
-                  props: [{ name: "value", type: "string", value: "light" }],
-                  children: [{ type: "text", value: "Light" }]
-                }),
-                createSelectItem({
-                  props: [{ name: "value", type: "string", value: "dark" }],
-                  children: [{ type: "text", value: "Dark" }]
-                }),
-                createSelectItem({
-                  props: [{ name: "value", type: "string", value: "system" }],
-                  children: [{ type: "text", value: "System" }]
-                })
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};
-const metaSelectTrigger = {
-  category: "hidden",
-  type: "container",
-  icon: import_svg.TriggerIcon,
-  detachable: false,
-  presetStyle: {
-    button: import_css_normalize.button
-  }
-};
-const metaSelectValue = {
-  category: "hidden",
-  type: "container",
-  label: "Value",
-  icon: import_svg.FormTextFieldIcon,
-  detachable: false,
-  presetStyle: {
-    span: import_css_normalize.span
-  }
-};
-const metaSelectContent = {
-  category: "hidden",
-  type: "container",
-  icon: import_svg.ContentIcon,
-  detachable: false,
-  presetStyle
-};
-const metaSelectViewport = {
-  category: "hidden",
-  type: "container",
-  icon: import_svg.ViewportIcon,
-  detachable: false,
-  presetStyle
-};
-const metaSelectItem = {
-  category: "hidden",
-  type: "container",
-  icon: import_svg.ItemIcon,
-  requiredAncestors: ["SelectViewport"],
-  presetStyle
-};
-const metaSelectItemIndicator = {
-  category: "hidden",
-  type: "container",
-  label: "Indicator",
-  icon: import_svg.CheckMarkIcon,
-  detachable: false,
-  requiredAncestors: ["SelectItem"],
-  presetStyle: {
-    span: import_css_normalize.span
-  }
-};
-const metaSelectItemText = {
-  category: "hidden",
-  type: "container",
-  label: "Item Text",
-  icon: import_svg.TextIcon,
-  detachable: false,
-  requiredAncestors: ["SelectItem"],
-  presetStyle: {
-    span: import_css_normalize.span
-  }
-};
-const propsMetaSelect = {
-  props: import_select.propsSelect,
-  initialProps: ["value", "open", "name", "required"]
-};
-const propsMetaSelectTrigger = {
-  props: import_select.propsSelectTrigger
-};
-const propsMetaSelectValue = {
-  props: import_select.propsSelectValue,
-  initialProps: ["placeholder"]
-};
-const propsMetaSelectContent = {
-  props: import_select.propsSelectContent
-};
-const propsMetaSelectViewport = {
-  props: import_select.propsSelectViewport
-};
-const propsMetaSelectItem = {
-  props: import_select.propsSelectItem,
-  initialProps: ["value"]
-};
-const propsMetaSelectItemIndicator = {
-  props: import_select.propsSelectItemIndicator
-};
-const propsMetaSelectItemText = {
-  props: import_select.propsSelectItemText
-};

package/lib/cjs/sheet.js

@@ -1,96 +0,0 @@
-"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,
-  hooksSheet: () => hooksSheet
-});
-module.exports = __toCommonJS(sheet_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var import_react_sdk = require("@webstudio-is/react-sdk");
-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 })
-      }
-    );
-  }
-);
-const namespace = "@webstudio-is/sdk-components-react-radix";
-const hooksSheet = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SheetOverlay`) {
-        const sheet = (0, import_react_sdk.getClosestInstance)(
-          event.instancePath,
-          instance,
-          `${namespace}:Sheet`
-        );
-        if (sheet) {
-          context.setPropVariable(sheet.id, "open", false);
-        }
-      }
-    }
-  },
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:SheetOverlay`) {
-        const sheet = (0, import_react_sdk.getClosestInstance)(
-          event.instancePath,
-          instance,
-          `${namespace}:Sheet`
-        );
-        if (sheet) {
-          context.setPropVariable(sheet.id, "open", true);
-        }
-      }
-    }
-  }
-};

package/lib/cjs/sheet.ws.js

@@ -1,257 +0,0 @@
-"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, {
-  meta: () => meta
-});
-module.exports = __toCommonJS(sheet_ws_exports);
-var import_svg = require("@webstudio-is/icons/svg");
-var tc = __toESM(require("./theme/tailwind-classes"), 1);
-var import_styles = require("./theme/styles");
-const meta = {
-  category: "radix",
-  order: 1,
-  type: "container",
-  icon: import_svg.HamburgerMenuIcon,
-  stylable: false,
-  description: "Displays content in a menu that slides out from the side of the screen, triggered by a button. Use this component for a typical mobile hamburger menu.",
-  template: [
-    {
-      type: "instance",
-      component: "Dialog",
-      label: "Sheet",
-      dataSources: {
-        sheetOpen: { type: "variable", initialValue: false }
-      },
-      props: [
-        {
-          type: "dataSource",
-          name: "open",
-          dataSourceName: "sheetOpen"
-        },
-        {
-          name: "onOpenChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["open"], code: `sheetOpen = open` }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "DialogTrigger",
-          label: "Sheet Trigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: (0, import_styles.getButtonStyles)("ghost", "icon"),
-              children: [
-                {
-                  type: "instance",
-                  component: "HtmlEmbed",
-                  label: "Hamburger Menu Svg",
-                  props: [
-                    {
-                      type: "string",
-                      name: "code",
-                      value: import_svg.HamburgerMenuIcon
-                    }
-                  ],
-                  children: []
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "DialogOverlay",
-          label: "Sheet Overlay",
-          /**
-           * 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: "DialogContent",
-              label: "Sheet Content",
-              /**
-               * 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(),
-                // side=left
-                tc.mr("auto"),
-                tc.maxW("sm"),
-                tc.grow()
-              ].flat(),
-              children: [
-                {
-                  type: "instance",
-                  component: "Box",
-                  label: "Navigation",
-                  props: [
-                    { name: "tag", type: "string", value: "nav" },
-                    { name: "role", type: "string", value: "navigation" }
-                  ],
-                  children: [
-                    {
-                      type: "instance",
-                      component: "Box",
-                      label: "Sheet Header",
-                      styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
-                      children: [
-                        {
-                          type: "instance",
-                          component: "DialogTitle",
-                          label: "Sheet Title",
-                          /**
-                           * 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: "DialogDescription",
-                          label: "Sheet Description",
-                          /**
-                           * 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: "DialogClose",
-                  label: "Close Button",
-                  /**
-                   * 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: "instance",
-                      component: "HtmlEmbed",
-                      label: "Close Icon",
-                      props: [
-                        {
-                          type: "string",
-                          name: "code",
-                          value: import_svg.LargeXIcon
-                        }
-                      ],
-                      children: []
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-};