@webstudio-is/sdk-components-react-radix 0.87.1 → 0.89.0

package/lib/cjs/select.ws.js

@@ -0,0 +1,350 @@
+"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.ws.js

@@ -28,99 +28,24 @@ var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__ge
 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
+  meta: () => meta
 });
 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");
-var import_button = require("./button.ws");
-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",
-  icon: import_svg.TriggerIcon,
-  stylable: false,
-  detachable: false
-};
-const metaSheetContent = {
-  category: "hidden",
-  type: "container",
-  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,
-  icon: import_svg.OverlayIcon,
-  detachable: false
-};
-const metaSheetTitle = {
-  category: "hidden",
-  type: "container",
-  presetStyle: titlePresetStyle,
-  icon: import_svg.HeadingIcon
-};
-const metaSheetDescription = {
-  category: "hidden",
-  type: "container",
-  presetStyle: descriptionPresetStyle,
-  icon: import_svg.TextIcon
-};
-const metaSheetClose = {
-  category: "hidden",
-  type: "container",
-  presetStyle: buttonPresetStyle,
-  icon: import_svg.ButtonElementIcon
-};
-const metaSheet = {
+var import_styles = require("./theme/styles");
+const meta = {
   category: "radix",
+  order: 1,
   type: "container",
   icon: import_svg.HamburgerMenuIcon,
-  order: 15,
   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: "Sheet",
+      component: "Dialog",
+      label: "Sheet",
       dataSources: {
         sheetOpen: { type: "variable", initialValue: false }
       },
@@ -141,32 +66,35 @@ const metaSheet = {
       children: [
         {
           type: "instance",
-          component: "SheetTrigger",
-          children: (0, import_button.template)({
-            props: [
-              { name: "variant", type: "string", value: "ghost" },
-              { name: "size", type: "string", value: "icon" }
-            ],
-            children: [
-              {
-                type: "instance",
-                component: "HtmlEmbed",
-                label: "Hamburger Menu Svg",
-                props: [
-                  {
-                    type: "string",
-                    name: "code",
-                    value: import_svg.HamburgerMenuIcon
-                  }
-                ],
-                children: []
-              }
-            ]
-          })
+          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: "SheetOverlay",
+          component: "DialogOverlay",
+          label: "Sheet Overlay",
           /**
            * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
            * flex
@@ -185,7 +113,8 @@ const metaSheet = {
           children: [
             {
               type: "instance",
-              component: "SheetContent",
+              component: "DialogContent",
+              label: "Sheet Content",
               /**
                * fixed w-full z-50
                * grid gap-4 max-w-lg
@@ -203,71 +132,81 @@ const metaSheet = {
                 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]")
+                // side=left
+                tc.mr("auto"),
+                tc.maxW("sm"),
+                tc.grow()
               ].flat(),
               children: [
                 {
                   type: "instance",
                   component: "Box",
-                  label: "Sheet Header",
-                  styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
+                  label: "Navigation",
+                  props: [
+                    { name: "tag", type: "string", value: "nav" },
+                    { name: "role", type: "string", value: "navigation" }
+                  ],
                   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(),
+                      component: "Box",
+                      label: "Sheet Header",
+                      styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
                       children: [
                         {
-                          type: "text",
-                          value: "Sheet Title"
+                          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: "SheetDescription",
-                      /**
-                       * text-sm text-muted-foreground
-                       **/
-                      styles: [
-                        tc.my(0),
-                        tc.text("sm"),
-                        tc.text("mutedForeground")
-                      ].flat(),
+                      component: "Text",
                       children: [
-                        {
-                          type: "text",
-                          value: "sheet description text you can edit"
-                        }
+                        { type: "text", value: "The text you can edit" }
                       ]
                     }
                   ]
                 },
                 {
                   type: "instance",
-                  component: "Text",
-                  children: [{ type: "text", value: "The text you can edit" }]
-                },
-                {
-                  type: "instance",
-                  component: "SheetClose",
+                  component: "DialogClose",
+                  label: "Close Button",
                   /**
                    * absolute right-4 top-4
                    * rounded-sm opacity-70
@@ -302,30 +241,3 @@ const metaSheet = {
     }
   ]
 };
-const propsMetaSheet = {
-  props: import_sheet.propsSheet,
-  initialProps: ["open", "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: []
-};