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

package/lib/cjs/accordion.ws.js

@@ -43,22 +43,77 @@ module.exports = __toCommonJS(accordion_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_styles = require("./theme/styles");
 var import_accordion = require("./__generated__/accordion.props");
 const presetStyle = {
   div: import_css_normalize.div
 };
 const accordionItemStyles = [tc.borderB()].flat();
-const accordionHeaderStyles = [tc.flex()].flat();
-const accordionTriggerStyles = [
-  tc.flex(),
-  tc.flex(1),
-  tc.items("center"),
-  tc.justify("between"),
-  tc.py(4),
-  tc.font("medium"),
-  tc.transition("all"),
-  tc.hover([tc.underline()].flat())
-].flat();
+const createAccordionTrigger = ({
+  children
+}) => ({
+  type: "instance",
+  component: "AccordionHeader",
+  // flex
+  styles: [tc.flex()].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "AccordionTrigger",
+      // flex flex-1 items-center justify-between py-4 font-medium transition-all hover:underline [&[data-state=open]>svg]:rotate-180
+      styles: [
+        tc.flex(),
+        tc.flex(1),
+        tc.items("center"),
+        tc.justify("between"),
+        tc.py(4),
+        tc.font("medium"),
+        tc.hover([tc.underline()].flat()),
+        tc.property("--accordion-trigger-icon-transform", "0deg"),
+        tc.state(
+          [tc.property("--accordion-trigger-icon-transform", "180deg")],
+          "[data-state=open]"
+        )
+      ].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "Text",
+          children
+        },
+        {
+          type: "instance",
+          component: "Box",
+          label: "Icon Container",
+          // h-4 w-4 shrink-0 transition-transform duration-200
+          styles: [
+            tc.property("rotate", "--accordion-trigger-icon-transform"),
+            tc.h(4),
+            tc.w(4),
+            tc.shrink(0),
+            tc.transition("all"),
+            tc.duration(200)
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              label: "Chevron Icon",
+              props: [
+                {
+                  type: "string",
+                  name: "code",
+                  value: import_svg.ChevronDownIcon
+                }
+              ],
+              children: []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+});
 const accordionContentStyles = [
   tc.overflow("hidden"),
   tc.text("sm"),
@@ -68,9 +123,11 @@ const accordionContentStyles = [
 ].flat();
 const metaAccordion = {
   category: "radix",
+  order: 3,
   type: "container",
   icon: import_svg.AccordionIcon,
   presetStyle,
+  description: "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
   template: [
     {
       type: "instance",
@@ -99,19 +156,9 @@ const metaAccordion = {
           component: "AccordionItem",
           styles: accordionItemStyles,
           children: [
-            {
-              type: "instance",
-              component: "AccordionHeader",
-              styles: accordionHeaderStyles,
-              children: [
-                {
-                  type: "instance",
-                  component: "AccordionTrigger",
-                  styles: accordionTriggerStyles,
-                  children: [{ type: "text", value: "Is it accessible?" }]
-                }
-              ]
-            },
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it accessible?" }]
+            }),
             {
               type: "instance",
               component: "AccordionContent",
@@ -130,19 +177,9 @@ const metaAccordion = {
           component: "AccordionItem",
           styles: accordionItemStyles,
           children: [
-            {
-              type: "instance",
-              component: "AccordionHeader",
-              styles: accordionHeaderStyles,
-              children: [
-                {
-                  type: "instance",
-                  component: "AccordionTrigger",
-                  styles: accordionTriggerStyles,
-                  children: [{ type: "text", value: "Is it styled?" }]
-                }
-              ]
-            },
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it styled?" }]
+            }),
             {
               type: "instance",
               component: "AccordionContent",
@@ -161,19 +198,9 @@ const metaAccordion = {
           component: "AccordionItem",
           styles: accordionItemStyles,
           children: [
-            {
-              type: "instance",
-              component: "AccordionHeader",
-              styles: accordionHeaderStyles,
-              children: [
-                {
-                  type: "instance",
-                  component: "AccordionTrigger",
-                  styles: accordionTriggerStyles,
-                  children: [{ type: "text", value: "Is it animated?" }]
-                }
-              ]
-            },
+            createAccordionTrigger({
+              children: [{ type: "text", value: "Is it animated?" }]
+            }),
             {
               type: "instance",
               component: "AccordionContent",
@@ -197,7 +224,8 @@ const metaAccordionItem = {
   icon: import_svg.ItemIcon,
   requiredAncestors: ["Accordion"],
   indexWithinAncestor: "Accordion",
-  presetStyle
+  presetStyle,
+  label: "Item"
 };
 const metaAccordionHeader = {
   category: "hidden",
@@ -207,7 +235,8 @@ const metaAccordionHeader = {
   detachable: false,
   presetStyle: {
     h3: [import_css_normalize.h3, tc.my(0)].flat()
-  }
+  },
+  label: "Item Header"
 };
 const metaAccordionTrigger = {
   category: "hidden",
@@ -216,24 +245,9 @@ const metaAccordionTrigger = {
   requiredAncestors: ["AccordionHeader"],
   detachable: false,
   presetStyle: {
-    button: [
-      import_css_normalize.button,
-      {
-        property: "backgroundColor",
-        value: { type: "keyword", value: "transparent" }
-      },
-      {
-        property: "backgroundImage",
-        value: { type: "keyword", value: "none" }
-      },
-      {
-        property: "cursor",
-        value: { type: "keyword", value: "pointer" }
-      },
-      tc.px(0),
-      tc.border(0)
-    ].flat()
-  }
+    button: [import_css_normalize.button, import_styles.buttonReset].flat()
+  },
+  label: "Item Trigger"
 };
 const metaAccordionContent = {
   category: "hidden",
@@ -241,7 +255,8 @@ const metaAccordionContent = {
   icon: import_svg.ContentIcon,
   requiredAncestors: ["AccordionItem"],
   detachable: false,
-  presetStyle
+  presetStyle,
+  label: "Item Content"
 };
 const propsMetaAccordion = {
   props: import_accordion.propsAccordion,

package/lib/cjs/{textarea.js → checkbox.js}

@@ -16,13 +16,16 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var textarea_exports = {};
-__export(textarea_exports, {
-  Textarea: () => Textarea
+var checkbox_exports = {};
+__export(checkbox_exports, {
+  Checkbox: () => Checkbox,
+  CheckboxIndicator: () => CheckboxIndicator
 });
-module.exports = __toCommonJS(textarea_exports);
+module.exports = __toCommonJS(checkbox_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
-const Textarea = (0, import_react.forwardRef)(({ children: _children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("textarea", { ref, ...props });
+var import_react_checkbox = require("@radix-ui/react-checkbox");
+const Checkbox = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_checkbox.Root, { ref, ...props });
 });
+const CheckboxIndicator = import_react_checkbox.Indicator;

package/lib/cjs/checkbox.ws.js

@@ -0,0 +1,174 @@
+"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 checkbox_ws_exports = {};
+__export(checkbox_ws_exports, {
+  metaCheckbox: () => metaCheckbox,
+  metaCheckboxIndicator: () => metaCheckboxIndicator,
+  propsMetaCheckbox: () => propsMetaCheckbox,
+  propsMetaCheckboxIndicator: () => propsMetaCheckboxIndicator
+});
+module.exports = __toCommonJS(checkbox_ws_exports);
+var import_svg = require("@webstudio-is/icons/svg");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var tc = __toESM(require("./theme/tailwind-classes"), 1);
+var import_styles = require("./theme/styles");
+var import_checkbox = require("./__generated__/checkbox.props");
+const metaCheckbox = {
+  category: "radix",
+  order: 101,
+  type: "container",
+  icon: import_svg.CheckboxCheckedIcon,
+  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their \u201CName\u201D properties. Unlike radios, any number of checkboxes in a group can be checked.",
+  states: [
+    ...import_react_sdk.defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    button: [import_css_normalize.button, import_styles.buttonReset].flat()
+  },
+  template: [
+    {
+      type: "instance",
+      component: "Label",
+      label: "Checkbox Field",
+      styles: [tc.flex(), tc.gap(2), tc.items("center")].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "Checkbox",
+          dataSources: {
+            checkboxChecked: { type: "variable", initialValue: false }
+          },
+          props: [
+            {
+              name: "checked",
+              type: "dataSource",
+              dataSourceName: "checkboxChecked"
+            },
+            {
+              name: "onCheckedChange",
+              type: "action",
+              value: [
+                {
+                  type: "execute",
+                  args: ["checked"],
+                  code: `checkboxChecked = checked`
+                }
+              ]
+            }
+          ],
+          // peer h-4 w-4 shrink-0 rounded-sm border border-primary ring-offset-background
+          // focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+          // disabled:cursor-not-allowed disabled:opacity-50
+          // data-[state=checked]:bg-primary
+          // data-[state=checked]:text-primary-foreground",
+          styles: [
+            // We are not supporting peer like styles yet
+            tc.h(4),
+            tc.w(4),
+            tc.shrink(0),
+            tc.rounded("sm"),
+            tc.border(),
+            tc.border("primary"),
+            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"), tc.text("primaryForeground")].flat(),
+              "[data-state=checked]"
+            )
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "CheckboxIndicator",
+              // flex items-center justify-center text-current
+              styles: [
+                tc.flex(),
+                tc.items("center"),
+                tc.justify("center"),
+                tc.text("current")
+              ].flat(),
+              children: [
+                {
+                  type: "instance",
+                  component: "HtmlEmbed",
+                  label: "Indicator Icon",
+                  props: [
+                    {
+                      type: "string",
+                      name: "code",
+                      value: import_svg.CheckMarkIcon
+                    }
+                  ],
+                  children: []
+                }
+              ]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "Text",
+          label: "Checkbox Label",
+          props: [{ name: "tag", type: "string", value: "span" }],
+          children: [{ type: "text", value: "Checkbox" }]
+        }
+      ]
+    }
+  ]
+};
+const metaCheckboxIndicator = {
+  category: "hidden",
+  type: "container",
+  detachable: false,
+  icon: import_svg.TriggerIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle: {
+    span: import_css_normalize.span
+  }
+};
+const propsMetaCheckbox = {
+  props: import_checkbox.propsCheckbox,
+  initialProps: ["id", "checked", "name", "required"]
+};
+const propsMetaCheckboxIndicator = {
+  props: import_checkbox.propsCheckboxIndicator
+};

package/lib/cjs/collapsible.ws.js

@@ -27,16 +27,19 @@ __export(collapsible_ws_exports, {
 });
 module.exports = __toCommonJS(collapsible_ws_exports);
 var import_svg = require("@webstudio-is/icons/svg");
-var import_collapsible = require("./__generated__/collapsible.props");
 var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_collapsible = require("./__generated__/collapsible.props");
+var import_styles = require("./theme/styles");
 const presetStyle = {
   div: import_css_normalize.div
 };
 const metaCollapsible = {
   category: "radix",
+  order: 5,
   type: "container",
   presetStyle,
   icon: import_svg.CollapsibleIcon,
+  description: "An interactive component which expands and collapses some content, triggered by a button.",
   template: [
     {
       type: "instance",
@@ -66,6 +69,7 @@ const metaCollapsible = {
             {
               type: "instance",
               component: "Button",
+              styles: (0, import_styles.getButtonStyles)("outline"),
               children: [{ type: "text", value: "Click to toggle content" }]
             }
           ]

package/lib/cjs/components.js

@@ -23,7 +23,8 @@ __export(components_exports, {
   AccordionHeader: () => import_accordion.AccordionHeader,
   AccordionItem: () => import_accordion.AccordionItem,
   AccordionTrigger: () => import_accordion.AccordionTrigger,
-  Button: () => import_button.Button,
+  Checkbox: () => import_checkbox.Checkbox,
+  CheckboxIndicator: () => import_checkbox.CheckboxIndicator,
   Collapsible: () => import_collapsible.Collapsible,
   CollapsibleContent: () => import_collapsible.CollapsibleContent,
   CollapsibleTrigger: () => import_collapsible.CollapsibleTrigger,
@@ -34,23 +35,34 @@ __export(components_exports, {
   DialogOverlay: () => import_dialog.DialogOverlay,
   DialogTitle: () => import_dialog.DialogTitle,
   DialogTrigger: () => import_dialog.DialogTrigger,
-  Input: () => import_input.Input,
   Label: () => import_label.Label,
+  NavigationMenu: () => import_navigation_menu.NavigationMenu,
+  NavigationMenuContent: () => import_navigation_menu.NavigationMenuContent,
+  NavigationMenuItem: () => import_navigation_menu.NavigationMenuItem,
+  NavigationMenuLink: () => import_navigation_menu.NavigationMenuLink,
+  NavigationMenuList: () => import_navigation_menu.NavigationMenuList,
+  NavigationMenuTrigger: () => import_navigation_menu.NavigationMenuTrigger,
+  NavigationMenuViewport: () => import_navigation_menu.NavigationMenuViewport,
   Popover: () => import_popover.Popover,
   PopoverContent: () => import_popover.PopoverContent,
   PopoverTrigger: () => import_popover.PopoverTrigger,
-  Sheet: () => import_sheet.Sheet,
-  SheetClose: () => import_sheet.SheetClose,
-  SheetContent: () => import_sheet.SheetContent,
-  SheetDescription: () => import_sheet.SheetDescription,
-  SheetOverlay: () => import_sheet.SheetOverlay,
-  SheetTitle: () => import_sheet.SheetTitle,
-  SheetTrigger: () => import_sheet.SheetTrigger,
+  RadioGroup: () => import_radio_group.RadioGroup,
+  RadioGroupIndicator: () => import_radio_group.RadioGroupIndicator,
+  RadioGroupItem: () => import_radio_group.RadioGroupItem,
+  Select: () => import_select.Select,
+  SelectContent: () => import_select.SelectContent,
+  SelectItem: () => import_select.SelectItem,
+  SelectItemIndicator: () => import_select.SelectItemIndicator,
+  SelectItemText: () => import_select.SelectItemText,
+  SelectTrigger: () => import_select.SelectTrigger,
+  SelectValue: () => import_select.SelectValue,
+  SelectViewport: () => import_select.SelectViewport,
+  Switch: () => import_switch.Switch,
+  SwitchThumb: () => import_switch.SwitchThumb,
   Tabs: () => import_tabs.Tabs,
   TabsContent: () => import_tabs.TabsContent,
   TabsList: () => import_tabs.TabsList,
   TabsTrigger: () => import_tabs.TabsTrigger,
-  Textarea: () => import_textarea.Textarea,
   Tooltip: () => import_tooltip.Tooltip,
   TooltipContent: () => import_tooltip.TooltipContent,
   TooltipTrigger: () => import_tooltip.TooltipTrigger
@@ -60,10 +72,11 @@ var import_collapsible = require("./collapsible");
 var import_dialog = require("./dialog");
 var import_popover = require("./popover");
 var import_tooltip = require("./tooltip");
-var import_sheet = require("./sheet");
 var import_tabs = require("./tabs");
-var import_button = require("./button");
-var import_input = require("./input");
-var import_textarea = require("./textarea");
 var import_label = require("./label");
 var import_accordion = require("./accordion");
+var import_navigation_menu = require("./navigation-menu");
+var import_select = require("./select");
+var import_switch = require("./switch");
+var import_checkbox = require("./checkbox");
+var import_radio_group = require("./radio-group");

package/lib/cjs/dialog.ws.js

@@ -46,10 +46,10 @@ __export(dialog_ws_exports, {
 module.exports = __toCommonJS(dialog_ws_exports);
 var import_svg = require("@webstudio-is/icons/svg");
 var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
 var tc = __toESM(require("./theme/tailwind-classes"), 1);
 var import_dialog = require("./__generated__/dialog.props");
-var import_button = require("./button.ws");
-var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
+var import_styles = require("./theme/styles");
 const presetStyle = {
   div: import_css_normalize.div
 };
@@ -99,14 +99,16 @@ const metaDialogClose = {
   category: "hidden",
   type: "container",
   presetStyle: buttonPresetStyle,
-  icon: import_svg.ButtonElementIcon
+  icon: import_svg.ButtonElementIcon,
+  label: "Close Button"
 };
 const metaDialog = {
   category: "radix",
+  order: 4,
   type: "container",
   icon: import_svg.DialogIcon,
-  order: 15,
   stylable: false,
+  description: "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
   template: [
     {
       type: "instance",
@@ -132,15 +134,18 @@ const metaDialog = {
         {
           type: "instance",
           component: "DialogTrigger",
-          props: [],
-          children: (0, import_button.template)({
-            children: [{ type: "text", value: "Button" }]
-          })
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: (0, import_styles.getButtonStyles)("outline"),
+              children: [{ type: "text", value: "Button" }]
+            }
+          ]
         },
         {
           type: "instance",
           component: "DialogOverlay",
-          props: [],
           /**
            * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
            * flex
@@ -152,13 +157,13 @@ const metaDialog = {
             tc.bg("background", 80),
             tc.backdropBlur("sm"),
             // To allow positioning Content
-            tc.flex()
+            tc.flex(),
+            tc.overflow("auto")
           ].flat(),
           children: [
             {
               type: "instance",
               component: "DialogContent",
-              props: [],
               /**
                * fixed w-full z-50
                * grid gap-4 max-w-lg
@@ -184,13 +189,11 @@ const metaDialog = {
                   type: "instance",
                   component: "Box",
                   label: "Dialog Header",
-                  props: [],
                   styles: [tc.flex(), tc.flex("col"), tc.gap(1)].flat(),
                   children: [
                     {
                       type: "instance",
                       component: "DialogTitle",
-                      props: [],
                       /**
                        * text-lg leading-none tracking-tight
                        **/
@@ -210,7 +213,6 @@ const metaDialog = {
                     {
                       type: "instance",
                       component: "DialogDescription",
-                      props: [],
                       /**
                        * text-sm text-muted-foreground
                        **/
@@ -222,7 +224,7 @@ const metaDialog = {
                       children: [
                         {
                           type: "text",
-                          value: "dialog description text you can edit"
+                          value: "Dialog description text you can edit"
                         }
                       ]
                     }
@@ -236,7 +238,6 @@ const metaDialog = {
                 {
                   type: "instance",
                   component: "DialogClose",
-                  props: [],
                   /**
                    * absolute right-4 top-4
                    * rounded-sm opacity-70
@@ -273,7 +274,7 @@ const metaDialog = {
 };
 const propsMetaDialog = {
   props: import_dialog.propsDialog,
-  initialProps: ["open", "modal"]
+  initialProps: ["open"]
 };
 const propsMetaDialogTrigger = {
   props: import_dialog.propsDialogTrigger

package/lib/cjs/hooks.js

@@ -28,6 +28,8 @@ var import_popover = require("./popover");
 var import_sheet = require("./sheet");
 var import_tooltip = require("./tooltip");
 var import_accordion = require("./accordion");
+var import_navigation_menu = require("./navigation-menu");
+var import_select = require("./select");
 const hooks = [
   import_collapsible.hooksCollapsible,
   import_tabs.hooksTabs,
@@ -35,5 +37,7 @@ const hooks = [
   import_popover.hooksPopover,
   import_sheet.hooksSheet,
   import_tooltip.hooksTooltip,
-  import_accordion.hooksAccordion
+  import_accordion.hooksAccordion,
+  import_navigation_menu.hooksNavigationMenu,
+  import_select.hooksSelect
 ];

package/lib/cjs/label.ws.js

@@ -42,11 +42,12 @@ const presetStyle = {
 };
 const meta = {
   category: "radix",
+  order: 102,
   type: "container",
   icon: import_svg.LabelIcon,
   presetStyle,
   states: import_react_sdk.defaultStates,
-  order: 1,
+  description: "An accessible label to describe the purpose of an input. Match the \u201CFor\u201D property on the label with the \u201CID\u201D of the input to connect them.",
   template: [
     {
       type: "instance",