@webstudio-is/sdk-components-react-radix 0.87.0 → 0.88.0

package/lib/sheet.ws.js

@@ -1,97 +1,17 @@
-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,
   template: [
     {
       type: "instance",
-      component: "Sheet",
+      component: "Dialog",
+      label: "Sheet",
       dataSources: {
         sheetOpen: { type: "variable", initialValue: false }
       },
@@ -112,32 +32,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 +79,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 +98,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 +207,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
+};

package/lib/switch.ws.js

@@ -0,0 +1,143 @@
+import { SwitchIcon, TriggerIcon } from "@webstudio-is/icons/svg";
+import {
+  defaultStates
+} from "@webstudio-is/react-sdk";
+import { button, span } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
+import { propsSwitch, propsSwitchThumb } from "./__generated__/switch.props";
+const metaSwitch = {
+  category: "radix",
+  order: 11,
+  type: "container",
+  icon: SwitchIcon,
+  states: [
+    ...defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  },
+  template: [
+    {
+      type: "instance",
+      component: "Switch",
+      dataSources: {
+        switchChecked: { type: "variable", initialValue: false }
+      },
+      props: [
+        {
+          name: "checked",
+          type: "dataSource",
+          dataSourceName: "switchChecked"
+        },
+        {
+          name: "onCheckedChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["checked"],
+              code: `switchChecked = checked`
+            }
+          ]
+        }
+      ],
+      // peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors
+      // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background
+      // disabled:cursor-not-allowed disabled:opacity-50
+      // data-[state=checked]:bg-primary
+      // data-[state=unchecked]:bg-input
+      styles: [
+        // We are not supporting peer like styles yet
+        tc.inlineFlex(),
+        tc.property("height", "24px"),
+        tc.property("width", "44px"),
+        tc.shrink(0),
+        tc.cursor("pointer"),
+        tc.items("center"),
+        tc.rounded("full"),
+        tc.border(2),
+        tc.border("transparent"),
+        tc.transition("all"),
+        tc.focusVisible(
+          [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+        ),
+        tc.disabled([tc.cursor("not-allowed"), tc.opacity(50)].flat()),
+        tc.state([tc.bg("primary")].flat(), "[data-state=checked]"),
+        tc.state([tc.bg("input")].flat(), "[data-state=unchecked]")
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "SwitchThumb",
+          // pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform
+          // data-[state=checked]:translate-x-5
+          // data-[state=unchecked]:translate-x-0
+          styles: [
+            tc.pointerEvents("none"),
+            tc.block(),
+            tc.h(5),
+            tc.w(5),
+            tc.rounded("full"),
+            tc.bg("background"),
+            tc.shadow("lg"),
+            tc.transition("transform"),
+            tc.state(
+              [tc.property("transform", "translateX(20px)")].flat(),
+              "[data-state=checked]"
+            ),
+            tc.state(
+              [tc.property("transform", "translateX(0px)")].flat(),
+              "[data-state=unchecked]"
+            )
+          ].flat(),
+          children: []
+        }
+      ]
+    }
+  ]
+};
+const metaSwitchThumb = {
+  category: "hidden",
+  type: "container",
+  icon: TriggerIcon,
+  states: [
+    ...defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    span
+  }
+};
+const propsMetaSwitch = {
+  props: propsSwitch,
+  initialProps: ["id", "checked", "name", "required"]
+};
+const propsMetaSwitchThumb = {
+  props: propsSwitchThumb
+};
+export {
+  metaSwitch,
+  metaSwitchThumb,
+  propsMetaSwitch,
+  propsMetaSwitchThumb
+};

package/lib/tabs.js

@@ -1,7 +1,6 @@
 import { jsx } from "react/jsx-runtime";
 import {
-  forwardRef,
-  Children
+  forwardRef
 } from "react";
 import { Root, List, Trigger, Content } from "@radix-ui/react-tabs";
 import {
@@ -10,10 +9,9 @@ import {
 } from "@webstudio-is/react-sdk";
 const Tabs = Root;
 const TabsList = List;
-const TabsTrigger = forwardRef(({ value, children, ...props }, ref) => {
-  const firstChild = Children.toArray(children)[0];
+const TabsTrigger = forwardRef(({ value, ...props }, ref) => {
   const index = getIndexWithinAncestorFromComponentProps(props);
-  return /* @__PURE__ */ jsx(Trigger, { ref, value: value ?? index, asChild: true, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button" }) });
+  return /* @__PURE__ */ jsx(Trigger, { ref, value: value ?? index, ...props });
 });
 const TabsContent = forwardRef(({ value, ...props }, ref) => {
   const index = getIndexWithinAncestorFromComponentProps(props);

package/lib/tabs.ws.js

@@ -4,8 +4,9 @@ import {
   TabsIcon,
   TriggerIcon
 } from "@webstudio-is/icons/svg";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { button, div } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
 import {
   propsTabs,
   propsTabsList,
@@ -43,6 +44,7 @@ const tabsContentStyles = [
 ].flat();
 const metaTabs = {
   category: "radix",
+  order: 2,
   type: "container",
   icon: TabsIcon,
   presetStyle,
@@ -82,26 +84,14 @@ const metaTabs = {
             {
               type: "instance",
               component: "TabsTrigger",
-              children: [
-                {
-                  type: "instance",
-                  component: "Button",
-                  styles: tabsTriggerStyles,
-                  children: [{ type: "text", value: "Account" }]
-                }
-              ]
+              styles: tabsTriggerStyles,
+              children: [{ type: "text", value: "Account" }]
             },
             {
               type: "instance",
               component: "TabsTrigger",
-              children: [
-                {
-                  type: "instance",
-                  component: "Button",
-                  styles: tabsTriggerStyles,
-                  children: [{ type: "text", value: "Password" }]
-                }
-              ]
+              styles: tabsTriggerStyles,
+              children: [{ type: "text", value: "Password" }]
             }
           ]
         },
@@ -137,7 +127,11 @@ const metaTabsTrigger = {
   icon: TriggerIcon,
   requiredAncestors: ["TabsList"],
   invalidAncestors: ["TabsTrigger"],
-  indexWithinAncestor: "Tabs"
+  indexWithinAncestor: "Tabs",
+  label: "Tab Trigger",
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  }
 };
 const metaTabsContent = {
   category: "hidden",
@@ -145,7 +139,8 @@ const metaTabsContent = {
   icon: ContentIcon,
   requiredAncestors: ["Tabs"],
   indexWithinAncestor: "Tabs",
-  presetStyle
+  presetStyle,
+  label: "Tab Content"
 };
 const propsMetaTabs = {
   props: propsTabs

package/lib/theme/styles.js

@@ -0,0 +1,70 @@
+import * as tc from "./tailwind-classes";
+const getButtonStyles = (variant, size = "default") => {
+  const styles = [
+    // 'inline-flex items-center justify-center rounded-md text-sm font-medium
+    // ring-offset-background transition-colors
+    // focus-visible:outline-none focus-visible:ring-2
+    // focus-visible:ring-ring focus-visible:ring-offset-2
+    // disabled:pointer-events-none disabled:opacity-50'
+    tc.border(0),
+    tc.bg("transparent"),
+    tc.inlineFlex(),
+    tc.items("center"),
+    tc.justify("center"),
+    tc.rounded("md"),
+    tc.text("sm"),
+    tc.font("medium"),
+    tc.focusVisible(
+      [tc.outline("none"), tc.ring("ring", 2, "background", 2)].flat()
+    ),
+    tc.state([tc.pointerEvents("none"), tc.opacity(50)].flat(), ":disabled")
+  ].flat();
+  let variantStyles = [];
+  if (variant === "ghost") {
+    variantStyles = [
+      tc.state([tc.bg("accent"), tc.text("accentForeground")].flat(), ":hover")
+    ].flat();
+  }
+  if (variant === "outline") {
+    variantStyles = [
+      tc.border(),
+      tc.border("input"),
+      tc.bg("background"),
+      tc.state(
+        [tc.bg("accent", 90), tc.text("accentForeground")].flat(),
+        ":hover"
+      )
+    ].flat();
+  }
+  let sizeStyles = [];
+  if (size === "icon") {
+    sizeStyles = [tc.h(10), tc.w(10)].flat();
+  }
+  if (size === "sm") {
+    sizeStyles = [tc.h(10), tc.px(3)].flat();
+  }
+  if (size === "default") {
+    sizeStyles = [tc.h(10), tc.px(4), tc.py(2)].flat();
+  }
+  return [...styles, ...variantStyles, ...sizeStyles];
+};
+const buttonReset = [
+  {
+    property: "backgroundColor",
+    value: { type: "keyword", value: "transparent" }
+  },
+  {
+    property: "backgroundImage",
+    value: { type: "keyword", value: "none" }
+  },
+  {
+    property: "cursor",
+    value: { type: "keyword", value: "pointer" }
+  },
+  tc.border(0),
+  tc.p(0)
+].flat();
+export {
+  buttonReset,
+  getButtonStyles
+};