@webstudio-is/sdk-components-react-radix 0.90.0 → 0.92.0

package/lib/metas.js

@@ -1,122 +1,72 @@
-import {
-  metaCollapsible,
-  metaCollapsibleTrigger,
-  metaCollapsibleContent
+"use strict";
+export {
+  metaCollapsible as Collapsible,
+  metaCollapsibleTrigger as CollapsibleTrigger,
+  metaCollapsibleContent as CollapsibleContent
 } from "./collapsible.ws";
-import {
-  metaDialog,
-  metaDialogTrigger,
-  metaDialogOverlay,
-  metaDialogContent,
-  metaDialogClose,
-  metaDialogTitle,
-  metaDialogDescription
+export {
+  metaDialog as Dialog,
+  metaDialogTrigger as DialogTrigger,
+  metaDialogOverlay as DialogOverlay,
+  metaDialogContent as DialogContent,
+  metaDialogClose as DialogClose,
+  metaDialogTitle as DialogTitle,
+  metaDialogDescription as DialogDescription
 } from "./dialog.ws";
-import { meta } from "./sheet.ws";
-import {
-  metaPopover,
-  metaPopoverTrigger,
-  metaPopoverContent
+export { meta as Sheet } from "./sheet.ws";
+export {
+  metaPopover as Popover,
+  metaPopoverTrigger as PopoverTrigger,
+  metaPopoverContent as PopoverContent
 } from "./popover.ws";
-import {
-  metaTooltip,
-  metaTooltipTrigger,
-  metaTooltipContent
+export {
+  metaTooltip as Tooltip,
+  metaTooltipTrigger as TooltipTrigger,
+  metaTooltipContent as TooltipContent
 } from "./tooltip.ws";
-import {
-  metaTabs,
-  metaTabsList,
-  metaTabsTrigger,
-  metaTabsContent
+export {
+  metaTabs as Tabs,
+  metaTabsList as TabsList,
+  metaTabsTrigger as TabsTrigger,
+  metaTabsContent as TabsContent
 } from "./tabs.ws";
-import { meta as meta2 } from "./label.ws";
-import {
-  metaAccordion,
-  metaAccordionItem,
-  metaAccordionHeader,
-  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 { meta as Label } from "./label.ws";
 export {
   metaAccordion as Accordion,
-  metaAccordionContent as AccordionContent,
-  metaAccordionHeader as AccordionHeader,
   metaAccordionItem as AccordionItem,
+  metaAccordionHeader as AccordionHeader,
   metaAccordionTrigger as AccordionTrigger,
-  metaCheckbox as Checkbox,
-  metaCheckboxIndicator as CheckboxIndicator,
-  metaCollapsible as Collapsible,
-  metaCollapsibleContent as CollapsibleContent,
-  metaCollapsibleTrigger as CollapsibleTrigger,
-  metaDialog as Dialog,
-  metaDialogClose as DialogClose,
-  metaDialogContent as DialogContent,
-  metaDialogDescription as DialogDescription,
-  metaDialogOverlay as DialogOverlay,
-  metaDialogTitle as DialogTitle,
-  metaDialogTrigger as DialogTrigger,
-  meta2 as Label,
+  metaAccordionContent as AccordionContent
+} from "./accordion.ws";
+export {
   metaNavigationMenu as NavigationMenu,
-  metaNavigationMenuContent as NavigationMenuContent,
-  metaNavigationMenuItem as NavigationMenuItem,
-  metaNavigationMenuLink as NavigationMenuLink,
   metaNavigationMenuList as NavigationMenuList,
+  metaNavigationMenuItem as NavigationMenuItem,
   metaNavigationMenuTrigger as NavigationMenuTrigger,
-  metaNavigationMenuViewport as NavigationMenuViewport,
-  metaPopover as Popover,
-  metaPopoverContent as PopoverContent,
-  metaPopoverTrigger as PopoverTrigger,
-  metaRadioGroup as RadioGroup,
-  metaRadioGroupIndicator as RadioGroupIndicator,
-  metaRadioGroupItem as RadioGroupItem,
+  metaNavigationMenuContent as NavigationMenuContent,
+  metaNavigationMenuLink as NavigationMenuLink,
+  metaNavigationMenuViewport as NavigationMenuViewport
+} from "./navigation-menu.ws";
+export {
   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,
+  metaSelectContent as SelectContent,
+  metaSelectItem as SelectItem,
+  metaSelectItemIndicator as SelectItemIndicator,
+  metaSelectItemText as SelectItemText
+} from "./select.ws";
+export {
   metaSwitch as Switch,
-  metaSwitchThumb as SwitchThumb,
-  metaTabs as Tabs,
-  metaTabsContent as TabsContent,
-  metaTabsList as TabsList,
-  metaTabsTrigger as TabsTrigger,
-  metaTooltip as Tooltip,
-  metaTooltipContent as TooltipContent,
-  metaTooltipTrigger as TooltipTrigger
-};
+  metaSwitchThumb as SwitchThumb
+} from "./switch.ws";
+export {
+  metaCheckbox as Checkbox,
+  metaCheckboxIndicator as CheckboxIndicator
+} from "./checkbox.ws";
+export {
+  metaRadioGroup as RadioGroup,
+  metaRadioGroupItem as RadioGroupItem,
+  metaRadioGroupIndicator as RadioGroupIndicator
+} from "./radio-group.ws";

package/lib/navigation-menu.js

@@ -1,3 +1,4 @@
+"use strict";
 import { jsx } from "react/jsx-runtime";
 import * as NavigationMenuPrimitive from "@radix-ui/react-navigation-menu";
 import {
@@ -10,7 +11,7 @@ import {
   forwardRef,
   useContext
 } from "react";
-const NavigationMenu = forwardRef(({ value: propsValue, ...props }, ref) => {
+export const NavigationMenu = forwardRef(({ value: propsValue, ...props }, ref) => {
   const { renderer } = useContext(ReactSdkContext);
   let value = propsValue;
   if (renderer === "canvas") {
@@ -18,23 +19,23 @@ const NavigationMenu = forwardRef(({ value: propsValue, ...props }, ref) => {
   }
   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) => {
+export const NavigationMenuList = NavigationMenuPrimitive.List;
+export const NavigationMenuViewport = NavigationMenuPrimitive.Viewport;
+export const NavigationMenuContent = NavigationMenuPrimitive.Content;
+export 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) => {
+export 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) => {
+export 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 = {
+export const hooksNavigationMenu = {
   onNavigatorUnselect: (context, event) => {
     for (const instance of event.instancePath) {
       if (instance.component === `${namespace}:NavigationMenuContent`) {
@@ -73,13 +74,3 @@ const hooksNavigationMenu = {
     }
   }
 };
-export {
-  NavigationMenu,
-  NavigationMenuContent,
-  NavigationMenuItem,
-  NavigationMenuLink,
-  NavigationMenuList,
-  NavigationMenuTrigger,
-  NavigationMenuViewport,
-  hooksNavigationMenu
-};

package/{src/navigation-menu.stories.tsx → lib/navigation-menu.stories.js}

@@ -1,21 +1,18 @@
-import type { Meta, StoryObj } from "@storybook/react";
+"use strict";
 import { renderComponentTemplate } from "@webstudio-is/react-sdk";
 import { NavigationMenu as NavigationMenuPrimitive } from "./navigation-menu";
 import * as baseComponents from "@webstudio-is/sdk-components-react";
 import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
 import * as radixComponents from "./components";
 import * as radixMetas from "./metas";
-
 export default {
   title: "Components/NavigationMenu",
-  component: NavigationMenuPrimitive,
-} satisfies Meta<typeof NavigationMenuPrimitive>;
-
-export const NavigationMenu: StoryObj<typeof NavigationMenuPrimitive> = {
-  render: () =>
-    renderComponentTemplate({
-      name: "NavigationMenu",
-      components: { ...baseComponents, ...radixComponents },
-      metas: { ...baseMetas, ...radixMetas },
-    }),
+  component: NavigationMenuPrimitive
+};
+export const NavigationMenu = {
+  render: () => renderComponentTemplate({
+    name: "NavigationMenu",
+    components: { ...baseComponents, ...radixComponents },
+    metas: { ...baseMetas, ...radixMetas }
+  })
 };

package/lib/navigation-menu.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import {
   ContentIcon,
   ListIcon,
@@ -271,7 +272,7 @@ const menuItem = (props) => [
     ]
   }
 ];
-const metaNavigationMenu = {
+export const metaNavigationMenu = {
   category: "radix",
   order: 2,
   type: "container",
@@ -402,7 +403,7 @@ const metaNavigationMenu = {
     }
   ]
 };
-const metaNavigationMenuList = {
+export const metaNavigationMenuList = {
   category: "hidden",
   detachable: false,
   type: "container",
@@ -411,7 +412,7 @@ const metaNavigationMenuList = {
   presetStyle,
   label: "Menu List"
 };
-const metaNavigationMenuItem = {
+export const metaNavigationMenuItem = {
   category: "hidden",
   type: "container",
   icon: ListItemIcon,
@@ -420,7 +421,7 @@ const metaNavigationMenuItem = {
   indexWithinAncestor: "NavigationMenu",
   label: "Menu Item"
 };
-const metaNavigationMenuTrigger = {
+export const metaNavigationMenuTrigger = {
   category: "hidden",
   detachable: false,
   stylable: false,
@@ -430,7 +431,7 @@ const metaNavigationMenuTrigger = {
   presetStyle,
   label: "Menu Trigger"
 };
-const metaNavigationMenuContent = {
+export const metaNavigationMenuContent = {
   category: "hidden",
   detachable: false,
   type: "container",
@@ -440,20 +441,20 @@ const metaNavigationMenuContent = {
   presetStyle,
   label: "Menu Content"
 };
-const metaNavigationMenuLink = {
+export const metaNavigationMenuLink = {
   category: "hidden",
   detachable: true,
   type: "container",
   stylable: false,
   icon: BoxIcon,
-  // https://github.com/webstudio-is/webstudio-builder/issues/2193
+  // https://github.com/webstudio-is/webstudio/issues/2193
   // requiredAncestors: ["NavigationMenuContent", "NavigationMenuItem"],
   // Temporary restrict to NavigationMenu
   requiredAncestors: ["NavigationMenu"],
   presetStyle,
   label: "Accessible Link Wrapper"
 };
-const metaNavigationMenuViewport = {
+export const metaNavigationMenuViewport = {
   category: "hidden",
   detachable: true,
   type: "container",
@@ -462,40 +463,24 @@ const metaNavigationMenuViewport = {
   presetStyle,
   label: "Menu Viewport"
 };
-const propsMetaNavigationMenu = {
+export const propsMetaNavigationMenu = {
   props: propsNavigationMenu
 };
-const propsMetaNavigationMenuItem = {
+export const propsMetaNavigationMenuItem = {
   props: propsNavigationMenuItem
 };
-const propsMetaNavigationMenuTrigger = {
+export const propsMetaNavigationMenuTrigger = {
   props: propsNavigationMenuTrigger
 };
-const propsMetaNavigationMenuContent = {
+export const propsMetaNavigationMenuContent = {
   props: propsNavigationMenuContent
 };
-const propsMetaNavigationMenuLink = {
+export const propsMetaNavigationMenuLink = {
   props: propsNavigationMenuLink
 };
-const propsMetaNavigationMenuList = {
+export const propsMetaNavigationMenuList = {
   props: propsNavigationMenuList
 };
-const propsMetaNavigationMenuViewport = {
+export const propsMetaNavigationMenuViewport = {
   props: propsNavigationMenuViewport
 };
-export {
-  metaNavigationMenu,
-  metaNavigationMenuContent,
-  metaNavigationMenuItem,
-  metaNavigationMenuLink,
-  metaNavigationMenuList,
-  metaNavigationMenuTrigger,
-  metaNavigationMenuViewport,
-  propsMetaNavigationMenu,
-  propsMetaNavigationMenuContent,
-  propsMetaNavigationMenuItem,
-  propsMetaNavigationMenuLink,
-  propsMetaNavigationMenuList,
-  propsMetaNavigationMenuTrigger,
-  propsMetaNavigationMenuViewport
-};

package/lib/popover.js

@@ -1,3 +1,4 @@
+"use strict";
 import { jsx } from "react/jsx-runtime";
 import {
   forwardRef,
@@ -5,14 +6,14 @@ import {
 } from "react";
 import * as PopoverPrimitive from "@radix-ui/react-popover";
 import { getClosestInstance } from "@webstudio-is/react-sdk";
-const Popover = forwardRef((props, _ref) => {
+export const Popover = forwardRef((props, _ref) => {
   return /* @__PURE__ */ jsx(PopoverPrimitive.Root, { ...props });
 });
-const PopoverTrigger = forwardRef(({ children, ...props }, ref) => {
+export const PopoverTrigger = forwardRef(({ children, ...props }, ref) => {
   const firstChild = Children.toArray(children)[0];
   return /* @__PURE__ */ jsx(PopoverPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ jsx("button", { children: "Add button or link" }) });
 });
-const PopoverContent = forwardRef(
+export const PopoverContent = forwardRef(
   ({ sideOffset = 4, align = "center", hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ jsx(PopoverPrimitive.Portal, { children: /* @__PURE__ */ jsx(
     PopoverPrimitive.Content,
     {
@@ -25,7 +26,7 @@ const PopoverContent = forwardRef(
   ) })
 );
 const namespace = "@webstudio-is/sdk-components-react-radix";
-const hooksPopover = {
+export const hooksPopover = {
   onNavigatorUnselect: (context, event) => {
     for (const instance of event.instancePath) {
       if (instance.component === `${namespace}:PopoverContent`) {
@@ -55,9 +56,3 @@ const hooksPopover = {
     }
   }
 };
-export {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-  hooksPopover
-};

package/{src/popover.stories.tsx → lib/popover.stories.js}

@@ -1,21 +1,18 @@
-import type { Meta, StoryObj } from "@storybook/react";
+"use strict";
 import { renderComponentTemplate } from "@webstudio-is/react-sdk";
 import { Popover as PopoverPrimitive } from "./popover";
 import * as baseComponents from "@webstudio-is/sdk-components-react";
 import * as baseMetas from "@webstudio-is/sdk-components-react/metas";
 import * as radixComponents from "./components";
 import * as radixMetas from "./metas";
-
 export default {
   title: "Components/Popover",
-  component: PopoverPrimitive,
-} satisfies Meta<typeof PopoverPrimitive>;
-
-export const Popover: StoryObj<typeof PopoverPrimitive> = {
-  render: () =>
-    renderComponentTemplate({
-      name: "Popover",
-      components: { ...baseComponents, ...radixComponents },
-      metas: { ...baseMetas, ...radixMetas },
-    }),
+  component: PopoverPrimitive
+};
+export const Popover = {
+  render: () => renderComponentTemplate({
+    name: "Popover",
+    components: { ...baseComponents, ...radixComponents },
+    metas: { ...baseMetas, ...radixMetas }
+  })
 };

package/lib/popover.ws.js

@@ -1,3 +1,4 @@
+"use strict";
 import { PopoverIcon, TriggerIcon, ContentIcon } from "@webstudio-is/icons/svg";
 import {
 } from "@webstudio-is/react-sdk";
@@ -12,21 +13,21 @@ import {
 const presetStyle = {
   div
 };
-const metaPopoverTrigger = {
+export const metaPopoverTrigger = {
   category: "hidden",
   type: "container",
   icon: TriggerIcon,
   stylable: false,
   detachable: false
 };
-const metaPopoverContent = {
+export const metaPopoverContent = {
   category: "hidden",
   type: "container",
   presetStyle,
   icon: ContentIcon,
   detachable: false
 };
-const metaPopover = {
+export const metaPopover = {
   category: "radix",
   order: 6,
   type: "container",
@@ -96,22 +97,14 @@ const metaPopover = {
     }
   ]
 };
-const propsMetaPopover = {
+export const propsMetaPopover = {
   props: propsPopover,
   initialProps: ["open"]
 };
-const propsMetaPopoverTrigger = {
+export const propsMetaPopoverTrigger = {
   props: propsPopoverTrigger
 };
-const propsMetaPopoverContent = {
+export const propsMetaPopoverContent = {
   props: propsPopoverContent,
   initialProps: ["side", "sideOffset", "align", "alignOffset"]
 };
-export {
-  metaPopover,
-  metaPopoverContent,
-  metaPopoverTrigger,
-  propsMetaPopover,
-  propsMetaPopoverContent,
-  propsMetaPopoverTrigger
-};

package/lib/props-descriptions.js

@@ -1,8 +1,9 @@
+"use strict";
 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 = {
+export const propsDescriptions = {
   Dialog: {
     open
   },
@@ -31,6 +32,3 @@ const propsDescriptions = {
     side
   }
 };
-export {
-  propsDescriptions
-};