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

package/lib/cjs/tooltip.ws.js

@@ -38,10 +38,10 @@ __export(tooltip_ws_exports, {
 module.exports = __toCommonJS(tooltip_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_tooltip = require("./__generated__/tooltip.props");
-var import_css_normalize = require("@webstudio-is/react-sdk/css-normalize");
-var import_button = require("./button.ws");
+var import_styles = require("./theme/styles");
 const presetStyle = {
   div: import_css_normalize.div
 };
@@ -61,10 +61,11 @@ const metaTooltipContent = {
 };
 const metaTooltip = {
   category: "radix",
+  order: 7,
   type: "container",
   icon: import_svg.TooltipIcon,
-  order: 15,
   stylable: false,
+  description: "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
   template: [
     {
       type: "instance",
@@ -90,15 +91,18 @@ const metaTooltip = {
         {
           type: "instance",
           component: "TooltipTrigger",
-          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: "TooltipContent",
-          props: [],
           /**
            *  z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md
            **/

package/lib/collapsible.ws.js

@@ -3,20 +3,23 @@ import {
   TriggerIcon,
   ContentIcon
 } from "@webstudio-is/icons/svg";
+import { div } from "@webstudio-is/react-sdk/css-normalize";
 import {
   propsCollapsible,
   propsCollapsibleContent,
   propsCollapsibleTrigger
 } from "./__generated__/collapsible.props";
-import { div } from "@webstudio-is/react-sdk/css-normalize";
+import { getButtonStyles } from "./theme/styles";
 const presetStyle = {
   div
 };
 const metaCollapsible = {
   category: "radix",
+  order: 5,
   type: "container",
   presetStyle,
   icon: CollapsibleIcon,
+  description: "An interactive component which expands and collapses some content, triggered by a button.",
   template: [
     {
       type: "instance",
@@ -46,6 +49,7 @@ const metaCollapsible = {
             {
               type: "instance",
               component: "Button",
+              styles: getButtonStyles("outline"),
               children: [{ type: "text", value: "Click to toggle content" }]
             }
           ]

package/lib/components.js

@@ -14,19 +14,7 @@ import {
 } from "./dialog";
 import { Popover, PopoverTrigger, PopoverContent } from "./popover";
 import { Tooltip, TooltipTrigger, TooltipContent } from "./tooltip";
-import {
-  Sheet,
-  SheetTrigger,
-  SheetOverlay,
-  SheetContent,
-  SheetClose,
-  SheetTitle,
-  SheetDescription
-} from "./sheet";
 import { Tabs, TabsList, TabsTrigger, TabsContent } from "./tabs";
-import { Button } from "./button";
-import { Input } from "./input";
-import { Textarea } from "./textarea";
 import { Label } from "./label";
 import {
   Accordion,
@@ -35,13 +23,36 @@ import {
   AccordionTrigger,
   AccordionContent
 } from "./accordion";
+import {
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  NavigationMenuViewport
+} from "./navigation-menu";
+import {
+  Select,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText
+} from "./select";
+import { Switch, SwitchThumb } from "./switch";
+import { Checkbox, CheckboxIndicator } from "./checkbox";
+import { RadioGroup, RadioGroupItem, RadioGroupIndicator } from "./radio-group";
 export {
   Accordion,
   AccordionContent,
   AccordionHeader,
   AccordionItem,
   AccordionTrigger,
-  Button,
+  Checkbox,
+  CheckboxIndicator,
   Collapsible,
   CollapsibleContent,
   CollapsibleTrigger,
@@ -52,23 +63,34 @@ export {
   DialogOverlay,
   DialogTitle,
   DialogTrigger,
-  Input,
   Label,
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
   Popover,
   PopoverContent,
   PopoverTrigger,
-  Sheet,
-  SheetClose,
-  SheetContent,
-  SheetDescription,
-  SheetOverlay,
-  SheetTitle,
-  SheetTrigger,
+  RadioGroup,
+  RadioGroupIndicator,
+  RadioGroupItem,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  Switch,
+  SwitchThumb,
   Tabs,
   TabsContent,
   TabsList,
   TabsTrigger,
-  Textarea,
   Tooltip,
   TooltipContent,
   TooltipTrigger

package/lib/dialog.ws.js

@@ -9,6 +9,7 @@ import {
 } from "@webstudio-is/icons/svg";
 import {
 } from "@webstudio-is/react-sdk";
+import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
 import * as tc from "./theme/tailwind-classes";
 import {
   propsDialog,
@@ -19,8 +20,7 @@ import {
   propsDialogTitle,
   propsDialogDescription
 } from "./__generated__/dialog.props";
-import { template as buttonTemplate } from "./button.ws";
-import { div, button, h2, p } from "@webstudio-is/react-sdk/css-normalize";
+import { getButtonStyles } from "./theme/styles";
 const presetStyle = {
   div
 };
@@ -70,14 +70,16 @@ const metaDialogClose = {
   category: "hidden",
   type: "container",
   presetStyle: buttonPresetStyle,
-  icon: ButtonElementIcon
+  icon: ButtonElementIcon,
+  label: "Close Button"
 };
 const metaDialog = {
   category: "radix",
+  order: 4,
   type: "container",
   icon: 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",
@@ -103,15 +105,18 @@ const metaDialog = {
         {
           type: "instance",
           component: "DialogTrigger",
-          props: [],
-          children: buttonTemplate({
-            children: [{ type: "text", value: "Button" }]
-          })
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              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
@@ -123,13 +128,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
@@ -155,13 +160,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
                        **/
@@ -181,7 +184,6 @@ const metaDialog = {
                     {
                       type: "instance",
                       component: "DialogDescription",
-                      props: [],
                       /**
                        * text-sm text-muted-foreground
                        **/
@@ -193,7 +195,7 @@ const metaDialog = {
                       children: [
                         {
                           type: "text",
-                          value: "dialog description text you can edit"
+                          value: "Dialog description text you can edit"
                         }
                       ]
                     }
@@ -207,7 +209,6 @@ const metaDialog = {
                 {
                   type: "instance",
                   component: "DialogClose",
-                  props: [],
                   /**
                    * absolute right-4 top-4
                    * rounded-sm opacity-70
@@ -244,7 +245,7 @@ const metaDialog = {
 };
 const propsMetaDialog = {
   props: propsDialog,
-  initialProps: ["open", "modal"]
+  initialProps: ["open"]
 };
 const propsMetaDialogTrigger = {
   props: propsDialogTrigger

package/lib/hooks.js

@@ -5,6 +5,8 @@ import { hooksPopover } from "./popover";
 import { hooksSheet } from "./sheet";
 import { hooksTooltip } from "./tooltip";
 import { hooksAccordion } from "./accordion";
+import { hooksNavigationMenu } from "./navigation-menu";
+import { hooksSelect } from "./select";
 const hooks = [
   hooksCollapsible,
   hooksTabs,
@@ -12,7 +14,9 @@ const hooks = [
   hooksPopover,
   hooksSheet,
   hooksTooltip,
-  hooksAccordion
+  hooksAccordion,
+  hooksNavigationMenu,
+  hooksSelect
 ];
 export {
   hooks

package/lib/label.ws.js

@@ -10,11 +10,12 @@ const presetStyle = {
 };
 const meta = {
   category: "radix",
+  order: 102,
   type: "container",
   icon: LabelIcon,
   presetStyle,
   states: 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",

package/lib/metas.js

@@ -12,6 +12,7 @@ import {
   metaDialogTitle,
   metaDialogDescription
 } from "./dialog.ws";
+import { meta } from "./sheet.ws";
 import {
   metaPopover,
   metaPopoverTrigger,
@@ -22,25 +23,13 @@ import {
   metaTooltipTrigger,
   metaTooltipContent
 } from "./tooltip.ws";
-import {
-  metaSheet,
-  metaSheetTrigger,
-  metaSheetOverlay,
-  metaSheetContent,
-  metaSheetClose,
-  metaSheetTitle,
-  metaSheetDescription
-} from "./sheet.ws";
 import {
   metaTabs,
   metaTabsList,
   metaTabsTrigger,
   metaTabsContent
 } from "./tabs.ws";
-import { meta } from "./button.ws";
-import { meta as meta2 } from "./input.ws";
-import { meta as meta3 } from "./textarea.ws";
-import { meta as meta4 } from "./label.ws";
+import { meta as meta2 } from "./label.ws";
 import {
   metaAccordion,
   metaAccordionItem,
@@ -48,13 +37,46 @@ import {
   metaAccordionTrigger,
   metaAccordionContent
 } from "./accordion.ws";
+import {
+  metaNavigationMenu,
+  metaNavigationMenuList,
+  metaNavigationMenuItem,
+  metaNavigationMenuTrigger,
+  metaNavigationMenuContent,
+  metaNavigationMenuLink,
+  metaNavigationMenuViewport
+} from "./navigation-menu.ws";
+import {
+  metaSelect,
+  metaSelectTrigger,
+  metaSelectValue,
+  metaSelectViewport,
+  metaSelectContent,
+  metaSelectItem,
+  metaSelectItemIndicator,
+  metaSelectItemText
+} from "./select.ws";
+import {
+  metaSwitch,
+  metaSwitchThumb
+} from "./switch.ws";
+import {
+  metaCheckbox,
+  metaCheckboxIndicator
+} from "./checkbox.ws";
+import {
+  metaRadioGroup,
+  metaRadioGroupItem,
+  metaRadioGroupIndicator
+} from "./radio-group.ws";
 export {
   metaAccordion as Accordion,
   metaAccordionContent as AccordionContent,
   metaAccordionHeader as AccordionHeader,
   metaAccordionItem as AccordionItem,
   metaAccordionTrigger as AccordionTrigger,
-  meta as Button,
+  metaCheckbox as Checkbox,
+  metaCheckboxIndicator as CheckboxIndicator,
   metaCollapsible as Collapsible,
   metaCollapsibleContent as CollapsibleContent,
   metaCollapsibleTrigger as CollapsibleTrigger,
@@ -65,23 +87,35 @@ export {
   metaDialogOverlay as DialogOverlay,
   metaDialogTitle as DialogTitle,
   metaDialogTrigger as DialogTrigger,
-  meta2 as Input,
-  meta4 as Label,
+  meta2 as Label,
+  metaNavigationMenu as NavigationMenu,
+  metaNavigationMenuContent as NavigationMenuContent,
+  metaNavigationMenuItem as NavigationMenuItem,
+  metaNavigationMenuLink as NavigationMenuLink,
+  metaNavigationMenuList as NavigationMenuList,
+  metaNavigationMenuTrigger as NavigationMenuTrigger,
+  metaNavigationMenuViewport as NavigationMenuViewport,
   metaPopover as Popover,
   metaPopoverContent as PopoverContent,
   metaPopoverTrigger as PopoverTrigger,
-  metaSheet as Sheet,
-  metaSheetClose as SheetClose,
-  metaSheetContent as SheetContent,
-  metaSheetDescription as SheetDescription,
-  metaSheetOverlay as SheetOverlay,
-  metaSheetTitle as SheetTitle,
-  metaSheetTrigger as SheetTrigger,
+  metaRadioGroup as RadioGroup,
+  metaRadioGroupIndicator as RadioGroupIndicator,
+  metaRadioGroupItem as RadioGroupItem,
+  metaSelect as Select,
+  metaSelectContent as SelectContent,
+  metaSelectItem as SelectItem,
+  metaSelectItemIndicator as SelectItemIndicator,
+  metaSelectItemText as SelectItemText,
+  metaSelectTrigger as SelectTrigger,
+  metaSelectValue as SelectValue,
+  metaSelectViewport as SelectViewport,
+  meta as Sheet,
+  metaSwitch as Switch,
+  metaSwitchThumb as SwitchThumb,
   metaTabs as Tabs,
   metaTabsContent as TabsContent,
   metaTabsList as TabsList,
   metaTabsTrigger as TabsTrigger,
-  meta3 as Textarea,
   metaTooltip as Tooltip,
   metaTooltipContent as TooltipContent,
   metaTooltipTrigger as TooltipTrigger

package/lib/navigation-menu.js

@@ -0,0 +1,85 @@
+import { jsx } from "react/jsx-runtime";
+import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
+import {
+  getClosestInstance,
+  getIndexWithinAncestorFromComponentProps,
+  ReactSdkContext
+} from "@webstudio-is/react-sdk";
+import {
+  Children,
+  forwardRef,
+  useContext
+} from "react";
+const NavigationMenu = forwardRef(({ value: propsValue, ...props }, ref) => {
+  const { renderer } = useContext(ReactSdkContext);
+  let value = propsValue;
+  if (renderer === "canvas") {
+    value = value === "" ? "-1" : value;
+  }
+  return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Root, { ref, value, ...props });
+});
+const NavigationMenuList = NavigationMenuPrimitive.List;
+const NavigationMenuViewport = NavigationMenuPrimitive.Viewport;
+const NavigationMenuContent = NavigationMenuPrimitive.Content;
+const NavigationMenuItem = forwardRef(({ value, ...props }, ref) => {
+  const index = getIndexWithinAncestorFromComponentProps(props);
+  return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Item, { ref, value: value ?? index, ...props });
+});
+const NavigationMenuLink = forwardRef(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Link, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("a", { children: "Add link component" }) });
+});
+const NavigationMenuTrigger = forwardRef(({ children, ...props }, ref) => {
+  const firstChild = Children.toArray(children)[0];
+  return /* @__PURE__ */ jsx(NavigationMenuPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
+});
+const namespace = "@webstudio-is/sdk-components-react-radix";
+const hooksNavigationMenu = {
+  onNavigatorUnselect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:NavigationMenuContent`) {
+        const menu = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:NavigationMenu`
+        );
+        if (menu) {
+          context.setPropVariable(menu.id, "value", "");
+        }
+      }
+    }
+  },
+  onNavigatorSelect: (context, event) => {
+    for (const instance of event.instancePath) {
+      if (instance.component === `${namespace}:NavigationMenuContent`) {
+        const menu = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:NavigationMenu`
+        );
+        const menuItem = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:NavigationMenuItem`
+        );
+        if (menuItem === void 0 || menu === void 0) {
+          return;
+        }
+        const contentValue = context.getPropValue(menuItem.id, "value") ?? context.indexesWithinAncestors.get(menuItem.id)?.toString();
+        if (contentValue) {
+          context.setPropVariable(menu.id, "value", contentValue);
+        }
+      }
+    }
+  }
+};
+export {
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuList,
+  NavigationMenuTrigger,
+  NavigationMenuViewport,
+  hooksNavigationMenu
+};