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

package/lib/props.js

@@ -22,25 +22,13 @@ import {
   propsMetaTooltipTrigger,
   propsMetaTooltipContent
 } from "./tooltip.ws";
-import {
-  propsMetaSheet,
-  propsMetaSheetTrigger,
-  propsMetaSheetOverlay,
-  propsMetaSheetContent,
-  propsMetaSheetClose,
-  propsMetaSheetTitle,
-  propsMetaSheetDescription
-} from "./sheet.ws";
 import {
   propsMetaTabs,
   propsMetaTabsList,
   propsMetaTabsTrigger,
   propsMetaTabsContent
 } from "./tabs.ws";
-import { propsMeta } from "./button.ws";
-import { propsMeta as propsMeta2 } from "./input.ws";
-import { propsMeta as propsMeta3 } from "./textarea.ws";
-import { propsMeta as propsMeta4 } from "./label.ws";
+import { propsMeta } from "./label.ws";
 import {
   propsMetaAccordion,
   propsMetaAccordionItem,
@@ -48,13 +36,46 @@ import {
   propsMetaAccordionTrigger,
   propsMetaAccordionContent
 } from "./accordion.ws";
+import {
+  propsMetaNavigationMenu,
+  propsMetaNavigationMenuList,
+  propsMetaNavigationMenuItem,
+  propsMetaNavigationMenuTrigger,
+  propsMetaNavigationMenuContent,
+  propsMetaNavigationMenuLink,
+  propsMetaNavigationMenuViewport
+} from "./navigation-menu.ws";
+import {
+  propsMetaSelect,
+  propsMetaSelectTrigger,
+  propsMetaSelectValue,
+  propsMetaSelectViewport,
+  propsMetaSelectContent,
+  propsMetaSelectItem,
+  propsMetaSelectItemIndicator,
+  propsMetaSelectItemText
+} from "./select.ws";
+import {
+  propsMetaSwitch,
+  propsMetaSwitchThumb
+} from "./switch.ws";
+import {
+  propsMetaCheckbox,
+  propsMetaCheckboxIndicator
+} from "./checkbox.ws";
+import {
+  propsMetaRadioGroup,
+  propsMetaRadioGroupItem,
+  propsMetaRadioGroupIndicator
+} from "./radio-group.ws";
 export {
   propsMetaAccordion as Accordion,
   propsMetaAccordionContent as AccordionContent,
   propsMetaAccordionHeader as AccordionHeader,
   propsMetaAccordionItem as AccordionItem,
   propsMetaAccordionTrigger as AccordionTrigger,
-  propsMeta as Button,
+  propsMetaCheckbox as Checkbox,
+  propsMetaCheckboxIndicator as CheckboxIndicator,
   propsMetaCollapsible as Collapsible,
   propsMetaCollapsibleContent as CollapsibleContent,
   propsMetaCollapsibleTrigger as CollapsibleTrigger,
@@ -65,23 +86,34 @@ export {
   propsMetaDialogOverlay as DialogOverlay,
   propsMetaDialogTitle as DialogTitle,
   propsMetaDialogTrigger as DialogTrigger,
-  propsMeta2 as Input,
-  propsMeta4 as Label,
+  propsMeta as Label,
+  propsMetaNavigationMenu as NavigationMenu,
+  propsMetaNavigationMenuContent as NavigationMenuContent,
+  propsMetaNavigationMenuItem as NavigationMenuItem,
+  propsMetaNavigationMenuLink as NavigationMenuLink,
+  propsMetaNavigationMenuList as NavigationMenuList,
+  propsMetaNavigationMenuTrigger as NavigationMenuTrigger,
+  propsMetaNavigationMenuViewport as NavigationMenuViewport,
   propsMetaPopover as Popover,
   propsMetaPopoverContent as PopoverContent,
   propsMetaPopoverTrigger as PopoverTrigger,
-  propsMetaSheet as Sheet,
-  propsMetaSheetClose as SheetClose,
-  propsMetaSheetContent as SheetContent,
-  propsMetaSheetDescription as SheetDescription,
-  propsMetaSheetOverlay as SheetOverlay,
-  propsMetaSheetTitle as SheetTitle,
-  propsMetaSheetTrigger as SheetTrigger,
+  propsMetaRadioGroup as RadioGroup,
+  propsMetaRadioGroupIndicator as RadioGroupIndicator,
+  propsMetaRadioGroupItem as RadioGroupItem,
+  propsMetaSelect as Select,
+  propsMetaSelectContent as SelectContent,
+  propsMetaSelectItem as SelectItem,
+  propsMetaSelectItemIndicator as SelectItemIndicator,
+  propsMetaSelectItemText as SelectItemText,
+  propsMetaSelectTrigger as SelectTrigger,
+  propsMetaSelectValue as SelectValue,
+  propsMetaSelectViewport as SelectViewport,
+  propsMetaSwitch as Switch,
+  propsMetaSwitchThumb as SwitchThumb,
   propsMetaTabs as Tabs,
   propsMetaTabsContent as TabsContent,
   propsMetaTabsList as TabsList,
   propsMetaTabsTrigger as TabsTrigger,
-  propsMeta3 as Textarea,
   propsMetaTooltip as Tooltip,
   propsMetaTooltipContent as TooltipContent,
   propsMetaTooltipTrigger as TooltipTrigger

package/lib/radio-group.js

@@ -0,0 +1,11 @@
+import {
+} from "react";
+import { Root, Item, Indicator } from "@radix-ui/react-radio-group";
+const RadioGroup = Root;
+const RadioGroupItem = Item;
+const RadioGroupIndicator = Indicator;
+export {
+  RadioGroup,
+  RadioGroupIndicator,
+  RadioGroupItem
+};

package/lib/radio-group.ws.js

@@ -0,0 +1,173 @@
+import {
+  ItemIcon,
+  RadioCheckedIcon,
+  RadioDotIcon,
+  TriggerIcon
+} from "@webstudio-is/icons/svg";
+import {
+  defaultStates,
+  WsEmbedTemplate
+} from "@webstudio-is/react-sdk";
+import { button, div, span } from "@webstudio-is/react-sdk/css-normalize";
+import * as tc from "./theme/tailwind-classes";
+import { buttonReset } from "./theme/styles";
+import {
+  propsRadioGroup,
+  propsRadioGroupIndicator,
+  propsRadioGroupItem
+} from "./__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: 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: RadioCheckedIcon,
+  states: [
+    ...defaultStates,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    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: ItemIcon,
+  states: defaultStates,
+  presetStyle: {
+    button: [button, buttonReset].flat()
+  }
+};
+const metaRadioGroupIndicator = {
+  category: "hidden",
+  type: "container",
+  detachable: false,
+  icon: TriggerIcon,
+  states: defaultStates,
+  presetStyle: {
+    span
+  }
+};
+const propsMetaRadioGroup = {
+  props: propsRadioGroup,
+  initialProps: ["id", "value", "name", "required"]
+};
+const propsMetaRadioGroupItem = {
+  props: propsRadioGroupItem,
+  initialProps: ["value"]
+};
+const propsMetaRadioGroupIndicator = {
+  props: propsRadioGroupIndicator
+};
+export {
+  metaRadioGroup,
+  metaRadioGroupIndicator,
+  metaRadioGroupItem,
+  propsMetaRadioGroup,
+  propsMetaRadioGroupIndicator,
+  propsMetaRadioGroupItem
+};

package/lib/select.js

@@ -0,0 +1,75 @@
+import { jsx } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import {
+  Root,
+  Value,
+  Trigger,
+  Content,
+  Item,
+  ItemIndicator,
+  ItemText,
+  Portal,
+  Viewport
+} from "@radix-ui/react-select";
+import { getClosestInstance } from "@webstudio-is/react-sdk";
+const Select = forwardRef(({ value, ...props }, _ref) => {
+  if (value === "") {
+    value = void 0;
+  }
+  return /* @__PURE__ */ jsx(Root, { value, ...props });
+});
+const SelectTrigger = Trigger;
+const SelectValue = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Value, { ref, ...props });
+});
+const SelectContent = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(Portal, { children: /* @__PURE__ */ jsx(Content, { ref, ...props, position: "popper" }) });
+});
+const SelectViewport = Viewport;
+const SelectItem = Item;
+const SelectItemIndicator = ItemIndicator;
+const SelectItemText = 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 = 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 = getClosestInstance(
+          event.instancePath,
+          instance,
+          `${namespace}:Select`
+        );
+        if (select) {
+          context.setPropVariable(select.id, "open", true);
+        }
+      }
+    }
+  }
+};
+export {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  SelectTrigger,
+  SelectValue,
+  SelectViewport,
+  hooksSelect
+};