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

package/lib/cjs/popover.ws.js

@@ -38,10 +38,10 @@ __export(popover_ws_exports, {
 module.exports = __toCommonJS(popover_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_popover = require("./__generated__/popover.props");
-var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
-var import_button = require("./button.ws");
 const presetStyle = {
   div: import_css_normalize.div
 };
@@ -61,10 +61,11 @@ const metaPopoverContent = {
 };
 const metaPopover = {
   category: "radix",
+  order: 6,
   type: "container",
   icon: import_svg.PopoverIcon,
-  order: 15,
   stylable: false,
+  description: "Displays rich content in a portal, triggered by a button.",
   template: [
     {
       type: "instance",
@@ -90,15 +91,18 @@ const metaPopover = {
         {
           type: "instance",
           component: "PopoverTrigger",
-          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: "PopoverContent",
-          props: [],
           /**
            *  z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
            **/
@@ -127,7 +131,7 @@ const metaPopover = {
 };
 const propsMetaPopover = {
   props: import_popover.propsPopover,
-  initialProps: ["open", "modal"]
+  initialProps: ["open"]
 };
 const propsMetaPopoverTrigger = {
   props: import_popover.propsPopoverTrigger

package/lib/cjs/props-descriptions.js

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var props_descriptions_exports = {};
+__export(props_descriptions_exports, {
+  propsDescriptions: () => propsDescriptions
+});
+module.exports = __toCommonJS(props_descriptions_exports);
+const open = "Show or hide the content of this component on the canvas. This will not affect the initial state of the component.";
+const alignOffset = "The offset in pixels from the \u201Cstart\u201C or \u201Cend\u201C alignment options.";
+const sideOffset = "The distance in pixels between the Content and the Trigger.";
+const side = "The preferred alignment against the Trigger. May change when collisions occur.";
+const propsDescriptions = {
+  Dialog: {
+    open
+  },
+  Sheet: {
+    open
+  },
+  Collapsible: {
+    open
+  },
+  Popover: {
+    open
+  },
+  PopoverContent: {
+    alignOffset,
+    sideOffset,
+    side
+  },
+  Tooltip: {
+    open,
+    delayDuration: "The delay before the Tooltip shows after the Trigger is hovered, in milliseconds. If no value is specified, the default is 700ms",
+    disableHoverableContent: "When toggled, prevents the Tooltip content from showing when the Trigger is hovered."
+  },
+  TooltipContent: {
+    alignOffset,
+    sideOffset,
+    side
+  }
+};

package/lib/cjs/props.js

@@ -23,7 +23,8 @@ __export(props_exports, {
   AccordionHeader: () => import_accordion.propsMetaAccordionHeader,
   AccordionItem: () => import_accordion.propsMetaAccordionItem,
   AccordionTrigger: () => import_accordion.propsMetaAccordionTrigger,
-  Button: () => import_button.propsMeta,
+  Checkbox: () => import_checkbox.propsMetaCheckbox,
+  CheckboxIndicator: () => import_checkbox.propsMetaCheckboxIndicator,
   Collapsible: () => import_collapsible.propsMetaCollapsible,
   CollapsibleContent: () => import_collapsible.propsMetaCollapsibleContent,
   CollapsibleTrigger: () => import_collapsible.propsMetaCollapsibleTrigger,
@@ -34,23 +35,34 @@ __export(props_exports, {
   DialogOverlay: () => import_dialog.propsMetaDialogOverlay,
   DialogTitle: () => import_dialog.propsMetaDialogTitle,
   DialogTrigger: () => import_dialog.propsMetaDialogTrigger,
-  Input: () => import_input.propsMeta,
   Label: () => import_label.propsMeta,
+  NavigationMenu: () => import_navigation_menu.propsMetaNavigationMenu,
+  NavigationMenuContent: () => import_navigation_menu.propsMetaNavigationMenuContent,
+  NavigationMenuItem: () => import_navigation_menu.propsMetaNavigationMenuItem,
+  NavigationMenuLink: () => import_navigation_menu.propsMetaNavigationMenuLink,
+  NavigationMenuList: () => import_navigation_menu.propsMetaNavigationMenuList,
+  NavigationMenuTrigger: () => import_navigation_menu.propsMetaNavigationMenuTrigger,
+  NavigationMenuViewport: () => import_navigation_menu.propsMetaNavigationMenuViewport,
   Popover: () => import_popover.propsMetaPopover,
   PopoverContent: () => import_popover.propsMetaPopoverContent,
   PopoverTrigger: () => import_popover.propsMetaPopoverTrigger,
-  Sheet: () => import_sheet.propsMetaSheet,
-  SheetClose: () => import_sheet.propsMetaSheetClose,
-  SheetContent: () => import_sheet.propsMetaSheetContent,
-  SheetDescription: () => import_sheet.propsMetaSheetDescription,
-  SheetOverlay: () => import_sheet.propsMetaSheetOverlay,
-  SheetTitle: () => import_sheet.propsMetaSheetTitle,
-  SheetTrigger: () => import_sheet.propsMetaSheetTrigger,
+  RadioGroup: () => import_radio_group.propsMetaRadioGroup,
+  RadioGroupIndicator: () => import_radio_group.propsMetaRadioGroupIndicator,
+  RadioGroupItem: () => import_radio_group.propsMetaRadioGroupItem,
+  Select: () => import_select.propsMetaSelect,
+  SelectContent: () => import_select.propsMetaSelectContent,
+  SelectItem: () => import_select.propsMetaSelectItem,
+  SelectItemIndicator: () => import_select.propsMetaSelectItemIndicator,
+  SelectItemText: () => import_select.propsMetaSelectItemText,
+  SelectTrigger: () => import_select.propsMetaSelectTrigger,
+  SelectValue: () => import_select.propsMetaSelectValue,
+  SelectViewport: () => import_select.propsMetaSelectViewport,
+  Switch: () => import_switch.propsMetaSwitch,
+  SwitchThumb: () => import_switch.propsMetaSwitchThumb,
   Tabs: () => import_tabs.propsMetaTabs,
   TabsContent: () => import_tabs.propsMetaTabsContent,
   TabsList: () => import_tabs.propsMetaTabsList,
   TabsTrigger: () => import_tabs.propsMetaTabsTrigger,
-  Textarea: () => import_textarea.propsMeta,
   Tooltip: () => import_tooltip.propsMetaTooltip,
   TooltipContent: () => import_tooltip.propsMetaTooltipContent,
   TooltipTrigger: () => import_tooltip.propsMetaTooltipTrigger
@@ -60,10 +72,11 @@ var import_collapsible = require("./collapsible.ws");
 var import_dialog = require("./dialog.ws");
 var import_popover = require("./popover.ws");
 var import_tooltip = require("./tooltip.ws");
-var import_sheet = require("./sheet.ws");
 var import_tabs = require("./tabs.ws");
-var import_button = require("./button.ws");
-var import_input = require("./input.ws");
-var import_textarea = require("./textarea.ws");
 var import_label = require("./label.ws");
 var import_accordion = require("./accordion.ws");
+var import_navigation_menu = require("./navigation-menu.ws");
+var import_select = require("./select.ws");
+var import_switch = require("./switch.ws");
+var import_checkbox = require("./checkbox.ws");
+var import_radio_group = require("./radio-group.ws");

package/lib/cjs/{button.js → radio-group.js}

@@ -16,13 +16,15 @@ var __copyProps = (to, from, except, desc) => {
   return to;
 };
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var button_exports = {};
-__export(button_exports, {
-  Button: () => Button
+var radio_group_exports = {};
+__export(radio_group_exports, {
+  RadioGroup: () => RadioGroup,
+  RadioGroupIndicator: () => RadioGroupIndicator,
+  RadioGroupItem: () => RadioGroupItem
 });
-module.exports = __toCommonJS(button_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
+module.exports = __toCommonJS(radio_group_exports);
 var import_react = require("react");
-const Button = (0, import_react.forwardRef)(({ variant = "default", size = "default", ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { ref, "data-size": size, "data-variant": variant, ...props });
-});
+var import_react_radio_group = require("@radix-ui/react-radio-group");
+const RadioGroup = import_react_radio_group.Root;
+const RadioGroupItem = import_react_radio_group.Item;
+const RadioGroupIndicator = import_react_radio_group.Indicator;

package/lib/cjs/radio-group.ws.js

@@ -0,0 +1,191 @@
+"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 radio_group_ws_exports = {};
+__export(radio_group_ws_exports, {
+  metaRadioGroup: () => metaRadioGroup,
+  metaRadioGroupIndicator: () => metaRadioGroupIndicator,
+  metaRadioGroupItem: () => metaRadioGroupItem,
+  propsMetaRadioGroup: () => propsMetaRadioGroup,
+  propsMetaRadioGroupIndicator: () => propsMetaRadioGroupIndicator,
+  propsMetaRadioGroupItem: () => propsMetaRadioGroupItem
+});
+module.exports = __toCommonJS(radio_group_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_radio_group = require("./__generated__/radio-group.props");
+const createRadioGroupItem = ({
+  value,
+  label
+}) => ({
+  type: "instance",
+  component: "Label",
+  // flex items-center space-x-2
+  styles: [tc.flex(), tc.items("center"), tc.gap(2)].flat(),
+  children: [
+    {
+      type: "instance",
+      component: "RadioGroupItem",
+      props: [{ name: "value", type: "string", value }],
+      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
+      // focus:outline-none
+      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
+      // disabled:cursor-not-allowed disabled:opacity-50
+      styles: [
+        tc.aspect("square"),
+        tc.h(4),
+        tc.w(4),
+        tc.rounded("full"),
+        tc.border(),
+        tc.border("primary"),
+        tc.text("primary"),
+        tc.focusVisible(
+          [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: "RadioGroupIndicator",
+          children: [
+            {
+              type: "instance",
+              component: "HtmlEmbed",
+              label: "Indicator Icon",
+              props: [
+                {
+                  type: "string",
+                  name: "code",
+                  value: import_svg.RadioDotIcon
+                }
+              ],
+              children: []
+            }
+          ]
+        }
+      ]
+    },
+    {
+      type: "instance",
+      component: "Text",
+      children: [{ type: "text", value: label }]
+    }
+  ]
+});
+const metaRadioGroup = {
+  category: "radix",
+  order: 100,
+  type: "container",
+  description: "A set of checkable buttons\u2014known as radio buttons\u2014where no more than one of the buttons can be checked at a time.",
+  icon: import_svg.RadioCheckedIcon,
+  states: [
+    ...import_react_sdk.defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    div: import_css_normalize.div
+  },
+  template: [
+    {
+      type: "instance",
+      component: "RadioGroup",
+      dataSources: {
+        radioGroupValue: { type: "variable", initialValue: "" }
+      },
+      // grid gap-2
+      styles: [tc.flex(), tc.flex("col"), tc.gap(2)].flat(),
+      props: [
+        {
+          type: "dataSource",
+          name: "value",
+          dataSourceName: "radioGroupValue"
+        },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: `radioGroupValue = value`
+            }
+          ]
+        }
+      ],
+      children: [
+        createRadioGroupItem({ value: "default", label: "Default" }),
+        createRadioGroupItem({ value: "comfortable", label: "Comfortable" }),
+        createRadioGroupItem({ value: "compact", label: "Compact" })
+      ]
+    }
+  ]
+};
+const metaRadioGroupItem = {
+  category: "hidden",
+  type: "container",
+  requiredAncestors: ["RadioGroup"],
+  icon: import_svg.ItemIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle: {
+    button: [import_css_normalize.button, import_styles.buttonReset].flat()
+  }
+};
+const metaRadioGroupIndicator = {
+  category: "hidden",
+  type: "container",
+  detachable: false,
+  icon: import_svg.TriggerIcon,
+  states: import_react_sdk.defaultStates,
+  presetStyle: {
+    span: import_css_normalize.span
+  }
+};
+const propsMetaRadioGroup = {
+  props: import_radio_group.propsRadioGroup,
+  initialProps: ["id", "value", "name", "required"]
+};
+const propsMetaRadioGroupItem = {
+  props: import_radio_group.propsRadioGroupItem,
+  initialProps: ["value"]
+};
+const propsMetaRadioGroupIndicator = {
+  props: import_radio_group.propsRadioGroupIndicator
+};

package/lib/cjs/select.js

@@ -0,0 +1,83 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+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 __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var select_exports = {};
+__export(select_exports, {
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectItem: () => SelectItem,
+  SelectItemIndicator: () => SelectItemIndicator,
+  SelectItemText: () => SelectItemText,
+  SelectTrigger: () => SelectTrigger,
+  SelectValue: () => SelectValue,
+  SelectViewport: () => SelectViewport,
+  hooksSelect: () => hooksSelect
+});
+module.exports = __toCommonJS(select_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = require("react");
+var import_react_select = require("@radix-ui/react-select");
+var import_react_sdk = require("@webstudio-is/react-sdk");
+const Select = (0, import_react.forwardRef)(({ value, ...props }, _ref) => {
+  if (value === "") {
+    value = void 0;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Root, { value, ...props });
+});
+const SelectTrigger = import_react_select.Trigger;
+const SelectValue = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Value, { ref, ...props });
+});
+const SelectContent = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_react_select.Content, { ref, ...props, position: "popper" }) });
+});
+const SelectViewport = import_react_select.Viewport;
+const SelectItem = import_react_select.Item;
+const SelectItemIndicator = import_react_select.ItemIndicator;
+const SelectItemText = import_react_select.ItemText;
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksSelect = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SelectContent`) {
+        const select = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:Select`
+        );
+        if (select) {
+          context.setPropVariable(select.id, "open", false);
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:SelectContent`) {
+        const select = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:Select`
+        );
+        if (select) {
+          context.setPropVariable(select.id, "open", true);
+        }
+      }
+    }
+  }
+};