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

package/lib/select.ws.js

@@ -0,0 +1,338 @@
+import {
+  SelectIcon,
+  TriggerIcon,
+  FormTextFieldIcon,
+  ContentIcon,
+  ItemIcon,
+  ViewportIcon,
+  TextIcon,
+  CheckMarkIcon
+} from "@webstudio-is/icons/svg";
+import { button, div, span } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import {
+  propsSelect,
+  propsSelectContent,
+  propsSelectItem,
+  propsSelectItemIndicator,
+  propsSelectItemText,
+  propsSelectTrigger,
+  propsSelectValue,
+  propsSelectViewport
+} from "./__generated__/select.props";
+const presetStyle = {
+  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: CheckMarkIcon
+            }
+          ],
+          children: []
+        }
+      ]
+    },
+    {
+      type: "instance",
+      component: "SelectItemText",
+      children
+    }
+  ]
+});
+const metaSelect = {
+  category: "radix",
+  order: 10,
+  type: "container",
+  icon: 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: TriggerIcon,
+  detachable: false,
+  presetStyle: {
+    button
+  }
+};
+const metaSelectValue = {
+  category: "hidden",
+  type: "container",
+  label: "Value",
+  icon: FormTextFieldIcon,
+  detachable: false,
+  presetStyle: {
+    span
+  }
+};
+const metaSelectContent = {
+  category: "hidden",
+  type: "container",
+  icon: ContentIcon,
+  detachable: false,
+  presetStyle
+};
+const metaSelectViewport = {
+  category: "hidden",
+  type: "container",
+  icon: ViewportIcon,
+  detachable: false,
+  presetStyle
+};
+const metaSelectItem = {
+  category: "hidden",
+  type: "container",
+  icon: ItemIcon,
+  requiredAncestors: ["SelectViewport"],
+  presetStyle
+};
+const metaSelectItemIndicator = {
+  category: "hidden",
+  type: "container",
+  label: "Indicator",
+  icon: CheckMarkIcon,
+  detachable: false,
+  requiredAncestors: ["SelectItem"],
+  presetStyle: {
+    span
+  }
+};
+const metaSelectItemText = {
+  category: "hidden",
+  type: "container",
+  label: "Item Text",
+  icon: TextIcon,
+  detachable: false,
+  requiredAncestors: ["SelectItem"],
+  presetStyle: {
+    span
+  }
+};
+const propsMetaSelect = {
+  props: propsSelect,
+  initialProps: ["value", "open", "name", "required"]
+};
+const propsMetaSelectTrigger = {
+  props: propsSelectTrigger
+};
+const propsMetaSelectValue = {
+  props: propsSelectValue,
+  initialProps: ["placeholder"]
+};
+const propsMetaSelectContent = {
+  props: propsSelectContent
+};
+const propsMetaSelectViewport = {
+  props: propsSelectViewport
+};
+const propsMetaSelectItem = {
+  props: propsSelectItem,
+  initialProps: ["value"]
+};
+const propsMetaSelectItemIndicator = {
+  props: propsSelectItemIndicator
+};
+const propsMetaSelectItemText = {
+  props: propsSelectItemText
+};
+export {
+  metaSelect,
+  metaSelectContent,
+  metaSelectItem,
+  metaSelectItemIndicator,
+  metaSelectItemText,
+  metaSelectTrigger,
+  metaSelectValue,
+  metaSelectViewport,
+  propsMetaSelect,
+  propsMetaSelectContent,
+  propsMetaSelectItem,
+  propsMetaSelectItemIndicator,
+  propsMetaSelectItemText,
+  propsMetaSelectTrigger,
+  propsMetaSelectValue,
+  propsMetaSelectViewport
+};

package/lib/sheet.ws.js

@@ -1,97 +1,18 @@
-import {
-  HamburgerMenuIcon,
-  TriggerIcon,
-  ContentIcon,
-  OverlayIcon,
-  HeadingIcon,
-  TextIcon,
-  ButtonElementIcon
-} from "@webstudio-is/icons/svg";
-import {
-} from "@webstudio-is/react-sdk";
+import { HamburgerMenuIcon } from "@webstudio-is/icons/svg";
 import * as tc from "./theme/tailwind-classes";
-import {
-  propsSheet,
-  propsSheetContent,
-  propsSheetTrigger,
-  propsSheetOverlay,
-  propsSheetClose,
-  propsSheetTitle,
-  propsSheetDescription
-} from "./__generated__/sheet.props";
-import { div, nav, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
-import { template as buttonTemplate } from "./button.ws";
-const contentPresetStyle = {
-  div,
-  nav
-};
-const presetStyle = {
-  div
-};
-const buttonPresetStyle = {
-  button
-};
-const titlePresetStyle = {
-  h2
-};
-const descriptionPresetStyle = {
-  p
-};
-const metaSheetTrigger = {
-  category: "hidden",
-  type: "container",
-  icon: TriggerIcon,
-  stylable: false,
-  detachable: false
-};
-const metaSheetContent = {
-  category: "hidden",
-  type: "container",
-  icon: 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: OverlayIcon,
-  detachable: false
-};
-const metaSheetTitle = {
-  category: "hidden",
-  type: "container",
-  presetStyle: titlePresetStyle,
-  icon: HeadingIcon
-};
-const metaSheetDescription = {
-  category: "hidden",
-  type: "container",
-  presetStyle: descriptionPresetStyle,
-  icon: TextIcon
-};
-const metaSheetClose = {
-  category: "hidden",
-  type: "container",
-  presetStyle: buttonPresetStyle,
-  icon: ButtonElementIcon
-};
-const metaSheet = {
+import { getButtonStyles } from "./theme/styles";
+const meta = {
   category: "radix",
+  order: 1,
   type: "container",
   icon: 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 }
       },
@@ -112,32 +33,35 @@ const metaSheet = {
       children: [
         {
           type: "instance",
-          component: "SheetTrigger",
-          children: buttonTemplate({
-            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: HamburgerMenuIcon
-                  }
-                ],
-                children: []
-              }
-            ]
-          })
+          component: "DialogTrigger",
+          label: "Sheet Trigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: getButtonStyles("ghost", "icon"),
+              children: [
+                {
+                  type: "instance",
+                  component: "HtmlEmbed",
+                  label: "Hamburger Menu Svg",
+                  props: [
+                    {
+                      type: "string",
+                      name: "code",
+                      value: HamburgerMenuIcon
+                    }
+                  ],
+                  children: []
+                }
+              ]
+            }
+          ]
         },
         {
           type: "instance",
-          component: "SheetOverlay",
+          component: "DialogOverlay",
+          label: "Sheet Overlay",
           /**
            * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
            * flex
@@ -156,7 +80,8 @@ const metaSheet = {
           children: [
             {
               type: "instance",
-              component: "SheetContent",
+              component: "DialogContent",
+              label: "Sheet Content",
               /**
                * fixed w-full z-50
                * grid gap-4 max-w-lg
@@ -174,71 +99,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
@@ -273,46 +208,6 @@ const metaSheet = {
     }
   ]
 };
-const propsMetaSheet = {
-  props: propsSheet,
-  initialProps: ["open", "modal"]
-};
-const propsMetaSheetTrigger = {
-  props: propsSheetTrigger
-};
-const propsMetaSheetContent = {
-  props: propsSheetContent,
-  initialProps: ["side", "role", "tag"]
-};
-const propsMetaSheetOverlay = {
-  props: propsSheetOverlay,
-  initialProps: []
-};
-const propsMetaSheetClose = {
-  props: propsSheetClose,
-  initialProps: []
-};
-const propsMetaSheetTitle = {
-  props: propsSheetTitle,
-  initialProps: []
-};
-const propsMetaSheetDescription = {
-  props: propsSheetDescription,
-  initialProps: []
-};
 export {
-  metaSheet,
-  metaSheetClose,
-  metaSheetContent,
-  metaSheetDescription,
-  metaSheetOverlay,
-  metaSheetTitle,
-  metaSheetTrigger,
-  propsMetaSheet,
-  propsMetaSheetClose,
-  propsMetaSheetContent,
-  propsMetaSheetDescription,
-  propsMetaSheetOverlay,
-  propsMetaSheetTitle,
-  propsMetaSheetTrigger
+  meta
 };

package/lib/switch.js

@@ -0,0 +1,7 @@
+import { Root, Thumb } from "@radix-ui/react-switch";
+const Switch = Root;
+const SwitchThumb = Thumb;
+export {
+  Switch,
+  SwitchThumb
+};