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

package/lib/cjs/metas.js

@@ -23,7 +23,8 @@ __export(metas_exports, {
   AccordionHeader: () => import_accordion.metaAccordionHeader,
   AccordionItem: () => import_accordion.metaAccordionItem,
   AccordionTrigger: () => import_accordion.metaAccordionTrigger,
-  Button: () => import_button.meta,
+  Checkbox: () => import_checkbox.metaCheckbox,
+  CheckboxIndicator: () => import_checkbox.metaCheckboxIndicator,
   Collapsible: () => import_collapsible.metaCollapsible,
   CollapsibleContent: () => import_collapsible.metaCollapsibleContent,
   CollapsibleTrigger: () => import_collapsible.metaCollapsibleTrigger,
@@ -34,23 +35,35 @@ __export(metas_exports, {
   DialogOverlay: () => import_dialog.metaDialogOverlay,
   DialogTitle: () => import_dialog.metaDialogTitle,
   DialogTrigger: () => import_dialog.metaDialogTrigger,
-  Input: () => import_input.meta,
   Label: () => import_label.meta,
+  NavigationMenu: () => import_navigation_menu.metaNavigationMenu,
+  NavigationMenuContent: () => import_navigation_menu.metaNavigationMenuContent,
+  NavigationMenuItem: () => import_navigation_menu.metaNavigationMenuItem,
+  NavigationMenuLink: () => import_navigation_menu.metaNavigationMenuLink,
+  NavigationMenuList: () => import_navigation_menu.metaNavigationMenuList,
+  NavigationMenuTrigger: () => import_navigation_menu.metaNavigationMenuTrigger,
+  NavigationMenuViewport: () => import_navigation_menu.metaNavigationMenuViewport,
   Popover: () => import_popover.metaPopover,
   PopoverContent: () => import_popover.metaPopoverContent,
   PopoverTrigger: () => import_popover.metaPopoverTrigger,
-  Sheet: () => import_sheet.metaSheet,
-  SheetClose: () => import_sheet.metaSheetClose,
-  SheetContent: () => import_sheet.metaSheetContent,
-  SheetDescription: () => import_sheet.metaSheetDescription,
-  SheetOverlay: () => import_sheet.metaSheetOverlay,
-  SheetTitle: () => import_sheet.metaSheetTitle,
-  SheetTrigger: () => import_sheet.metaSheetTrigger,
+  RadioGroup: () => import_radio_group.metaRadioGroup,
+  RadioGroupIndicator: () => import_radio_group.metaRadioGroupIndicator,
+  RadioGroupItem: () => import_radio_group.metaRadioGroupItem,
+  Select: () => import_select.metaSelect,
+  SelectContent: () => import_select.metaSelectContent,
+  SelectItem: () => import_select.metaSelectItem,
+  SelectItemIndicator: () => import_select.metaSelectItemIndicator,
+  SelectItemText: () => import_select.metaSelectItemText,
+  SelectTrigger: () => import_select.metaSelectTrigger,
+  SelectValue: () => import_select.metaSelectValue,
+  SelectViewport: () => import_select.metaSelectViewport,
+  Sheet: () => import_sheet.meta,
+  Switch: () => import_switch.metaSwitch,
+  SwitchThumb: () => import_switch.metaSwitchThumb,
   Tabs: () => import_tabs.metaTabs,
   TabsContent: () => import_tabs.metaTabsContent,
   TabsList: () => import_tabs.metaTabsList,
   TabsTrigger: () => import_tabs.metaTabsTrigger,
-  Textarea: () => import_textarea.meta,
   Tooltip: () => import_tooltip.metaTooltip,
   TooltipContent: () => import_tooltip.metaTooltipContent,
   TooltipTrigger: () => import_tooltip.metaTooltipTrigger
@@ -58,12 +71,14 @@ __export(metas_exports, {
 module.exports = __toCommonJS(metas_exports);
 var import_collapsible = require("./collapsible.ws");
 var import_dialog = require("./dialog.ws");
+var import_sheet = require("./sheet.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/navigation-menu.js

@@ -0,0 +1,107 @@
+"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 navigation_menu_exports = {};
+__export(navigation_menu_exports, {
+  NavigationMenu: () => NavigationMenu,
+  NavigationMenuContent: () => NavigationMenuContent,
+  NavigationMenuItem: () => NavigationMenuItem,
+  NavigationMenuLink: () => NavigationMenuLink,
+  NavigationMenuList: () => NavigationMenuList,
+  NavigationMenuTrigger: () => NavigationMenuTrigger,
+  NavigationMenuViewport: () => NavigationMenuViewport,
+  hooksNavigationMenu: () => hooksNavigationMenu
+});
+module.exports = __toCommonJS(navigation_menu_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var NavigationMenuPrimitive = __toESM(require("@radix-ui/react-navigation-menu"), 1);
+var import_react_sdk = require("@webstudio-is/react-sdk");
+var import_react = require("react");
+const NavigationMenu = (0, import_react.forwardRef)(({ value: propsValue, ...props }, ref) => {
+  const { renderer } = (0, import_react.useContext)(import_react_sdk.ReactSdkContext);
+  let value = propsValue;
+  if (renderer === "canvas") {
+    value = value === "" ? "-1" : value;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuPrimitive.Root, { ref, value, ...props });
+});
+const NavigationMenuList = NavigationMenuPrimitive.List;
+const NavigationMenuViewport = NavigationMenuPrimitive.Viewport;
+const NavigationMenuContent = NavigationMenuPrimitive.Content;
+const NavigationMenuItem = (0, import_react.forwardRef)(({ value, ...props }, ref) => {
+  const index = (0, import_react_sdk.getIndexWithinAncestorFromComponentProps)(props);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuPrimitive.Item, { ref, value: value ?? index, ...props });
+});
+const NavigationMenuLink = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
+  const firstChild = import_react.Children.toArray(children)[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuPrimitive.Link, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", { children: "Add link component" }) });
+});
+const NavigationMenuTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
+  const firstChild = import_react.Children.toArray(children)[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(NavigationMenuPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_react_sdk.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 = (0, import_react_sdk.getClosestInstance)(
+          event.instancePath,
+          instance,
+          `${namespace}:NavigationMenu`
+        );
+        const menuItem = (0, import_react_sdk.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);
+        }
+      }
+    }
+  }
+};

package/lib/cjs/navigation-menu.ws.js

@@ -0,0 +1,514 @@
+"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 navigation_menu_ws_exports = {};
+__export(navigation_menu_ws_exports, {
+  metaNavigationMenu: () => metaNavigationMenu,
+  metaNavigationMenuContent: () => metaNavigationMenuContent,
+  metaNavigationMenuItem: () => metaNavigationMenuItem,
+  metaNavigationMenuLink: () => metaNavigationMenuLink,
+  metaNavigationMenuList: () => metaNavigationMenuList,
+  metaNavigationMenuTrigger: () => metaNavigationMenuTrigger,
+  metaNavigationMenuViewport: () => metaNavigationMenuViewport,
+  propsMetaNavigationMenu: () => propsMetaNavigationMenu,
+  propsMetaNavigationMenuContent: () => propsMetaNavigationMenuContent,
+  propsMetaNavigationMenuItem: () => propsMetaNavigationMenuItem,
+  propsMetaNavigationMenuLink: () => propsMetaNavigationMenuLink,
+  propsMetaNavigationMenuList: () => propsMetaNavigationMenuList,
+  propsMetaNavigationMenuTrigger: () => propsMetaNavigationMenuTrigger,
+  propsMetaNavigationMenuViewport: () => propsMetaNavigationMenuViewport
+});
+module.exports = __toCommonJS(navigation_menu_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_navigation_menu = require("./__generated__/navigation-menu.props");
+const presetStyle = {
+  div: import_css_normalize.div
+};
+const components = [
+  {
+    title: "Sheet",
+    href: "/docs/components/sheet",
+    description: "Extends the Dialog component to display content that complements the main content of the screen."
+  },
+  {
+    title: "Navigation Menu",
+    href: "/docs/components/navigation-menu",
+    description: "A collection of links for navigating websites."
+  },
+  {
+    title: "Tabs",
+    href: "/docs/components/tabs",
+    description: "A set of layered sections of content\u2014known as tab panels\u2014that are displayed one at a time."
+  },
+  {
+    title: "Accordion",
+    href: "/docs/components/accordion",
+    description: "A vertically stacked set of interactive headings that each reveal a section of content."
+  },
+  {
+    title: "Dialog",
+    href: "/docs/components/dialog",
+    description: "A window overlaid on either the primary window or another dialog window, rendering the content underneath inert."
+  },
+  {
+    title: "Collapsible",
+    href: "/docs/components/collapsible",
+    description: "An interactive component which expands/collapses a panel."
+  },
+  {
+    title: "Popover",
+    href: "/docs/components/popover",
+    description: "Displays rich content in a portal, triggered by a button."
+  },
+  {
+    title: "Tooltip",
+    href: "/docs/components/tooltip",
+    description: "A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it."
+  },
+  {
+    title: "Button",
+    href: "/docs/components/button",
+    description: "Displays a button or a component that looks like a button."
+  }
+];
+const navItem = (props) => [
+  {
+    type: "instance",
+    component: "NavigationMenuLink",
+    children: [
+      {
+        type: "instance",
+        component: "Link",
+        // block select-none space-y-1 rounded-md p-3 leading-none
+        // no-underline outline-none transition-colors
+        // hover:bg-accent hover:text-accent-foreground
+        // focus:bg-accent focus:text-accent-foreground
+        styles: [
+          tc.text("inherit"),
+          tc.flex(),
+          tc.flex("col"),
+          tc.select("none"),
+          tc.gap(1),
+          tc.rounded("md"),
+          tc.p(3),
+          tc.leading("none"),
+          tc.noUnderline(),
+          tc.outline("none"),
+          tc.hover([tc.bg("accent"), tc.text("accentForeground")].flat()),
+          tc.focus([tc.bg("accent"), tc.text("accentForeground")].flat())
+        ].flat(),
+        props: [
+          {
+            name: "href",
+            type: "string",
+            value: `https://ui.shadcn.com${props.href}`
+          }
+        ],
+        children: [
+          {
+            type: "instance",
+            component: "Text",
+            // text-sm font-medium leading-none
+            styles: [
+              tc.text("sm"),
+              tc.font("medium"),
+              tc.leading("none")
+            ].flat(),
+            children: [
+              {
+                type: "text",
+                value: props.title
+              }
+            ]
+          },
+          {
+            type: "instance",
+            component: "Paragraph",
+            // line-clamp-2 text-sm leading-snug text-muted-foreground
+            styles: [
+              tc.m(0),
+              tc.lineClamp(2),
+              tc.text("sm"),
+              tc.leading("snug"),
+              tc.text("mutedForeground")
+            ].flat(),
+            children: [
+              {
+                type: "text",
+                value: props.description
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+];
+const navItemsList = (props) => [
+  {
+    type: "instance",
+    component: "Box",
+    label: "Flex Column",
+    styles: [tc.w(64), tc.flex(), tc.gap(4), tc.flex("col")].flat(),
+    children: Array.from(
+      Array(props.count),
+      (_, index) => navItem(components[index + props.offset])
+    ).flat()
+  }
+];
+const menuItemLink = (props) => [
+  {
+    type: "instance",
+    component: "NavigationMenuItem",
+    children: [
+      {
+        type: "instance",
+        component: "NavigationMenuLink",
+        children: [
+          {
+            type: "instance",
+            component: "Link",
+            styles: [
+              (0, import_styles.getButtonStyles)("ghost", "sm"),
+              tc.noUnderline(),
+              tc.text("current")
+            ].flat(),
+            children: [{ type: "text", value: props.title }]
+          }
+        ]
+      }
+    ]
+  }
+];
+const menuItem = (props) => [
+  {
+    type: "instance",
+    component: "NavigationMenuItem",
+    children: [
+      {
+        type: "instance",
+        component: "NavigationMenuTrigger",
+        children: [
+          {
+            type: "instance",
+            component: "Button",
+            styles: [
+              (0, import_styles.getButtonStyles)("ghost", "sm"),
+              tc.property("--navigation-menu-trigger-icon-transform", "0deg"),
+              tc.state(
+                [
+                  tc.property(
+                    "--navigation-menu-trigger-icon-transform",
+                    "180deg"
+                  )
+                ],
+                "[data-state=open]"
+              )
+            ].flat(),
+            children: [
+              {
+                type: "instance",
+                component: "Text",
+                children: [{ type: "text", value: props.title }]
+              },
+              {
+                type: "instance",
+                component: "Box",
+                label: "Icon Container",
+                // h-4 w-4 shrink-0 transition-transform duration-200
+                styles: [
+                  tc.ml(1),
+                  tc.property(
+                    "rotate",
+                    "--navigation-menu-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: []
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: "instance",
+        component: "NavigationMenuContent",
+        // left-0 top-0 absolute w-max
+        styles: [
+          tc.left(0),
+          tc.top(0),
+          tc.absolute(),
+          tc.w("max"),
+          tc.p(4)
+        ].flat(),
+        children: [
+          {
+            type: "instance",
+            component: "Box",
+            label: "Content",
+            styles: [tc.flex(), tc.gap(4), tc.p(props.padding)].flat(),
+            children: props.children
+          }
+        ]
+      }
+    ]
+  }
+];
+const metaNavigationMenu = {
+  category: "radix",
+  order: 2,
+  type: "container",
+  description: "A collection of links for navigating websites.",
+  icon: import_svg.NavigationMenuIcon,
+  presetStyle,
+  template: [
+    {
+      type: "instance",
+      component: "NavigationMenu",
+      dataSources: {
+        menuValue: { type: "variable", initialValue: "" }
+      },
+      props: [
+        { type: "dataSource", name: "value", dataSourceName: "menuValue" },
+        {
+          name: "onValueChange",
+          type: "action",
+          value: [
+            {
+              type: "execute",
+              args: ["value"],
+              code: `menuValue = value`
+            }
+          ]
+        }
+      ],
+      // relative
+      // Omiting this: z-10 flex max-w-max flex-1 items-center justify-center
+      styles: [tc.relative(), tc.maxW("max")].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "NavigationMenuList",
+          styles: [
+            // ul defaults in tailwind
+            tc.p(0),
+            tc.m(0),
+            // shadcdn styles
+            tc.flex(),
+            tc.flex(1),
+            tc.list("none"),
+            tc.items("center"),
+            tc.justify("center"),
+            tc.gap(1)
+          ].flat(),
+          children: [
+            ...menuItem({
+              title: "About",
+              padding: 2,
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  styles: [
+                    tc.bg("border"),
+                    tc.p(4),
+                    tc.w(48),
+                    tc.rounded("md")
+                  ].flat(),
+                  children: [
+                    {
+                      type: "text",
+                      value: ""
+                    }
+                  ]
+                },
+                ...navItemsList({ count: 3, offset: 0 })
+              ]
+            }),
+            ...menuItem({
+              title: "Components",
+              padding: 0,
+              children: [
+                ...navItemsList({ count: 3, offset: 3 }),
+                ...navItemsList({ count: 3, offset: 6 })
+              ]
+            }),
+            ...menuItemLink({ title: "Standalone" })
+          ]
+        },
+        {
+          type: "instance",
+          component: "Box",
+          label: "Viewport Container",
+          // absolute left-0 top-full flex justify-center
+          styles: [
+            tc.absolute(),
+            tc.left(0),
+            tc.top("full"),
+            tc.flex(),
+            tc.justify("center")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "NavigationMenuViewport",
+              /*
+                origin-top-center relative mt-1.5 w-full
+                overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-lg
+                h-[var(--radix-navigation-menu-viewport-height)]
+                w-[var(--radix-navigation-menu-viewport-width)]
+                // anims
+                [animation-duration:150ms!important] [transition-duration:150ms!important]
+                data-[state=open]:animate-in data-[state=closed]:animate-out
+                data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90
+              */
+              styles: [
+                tc.relative(),
+                tc.mt(1.5),
+                tc.overflow("hidden"),
+                tc.rounded("md"),
+                tc.border(),
+                tc.bg("popover"),
+                tc.text("popoverForeground"),
+                tc.shadow("lg"),
+                tc.property(
+                  "height",
+                  "--radix-navigation-menu-viewport-height"
+                ),
+                tc.property("width", "--radix-navigation-menu-viewport-width")
+              ].flat(),
+              children: []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+};
+const metaNavigationMenuList = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: import_svg.ListIcon,
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle,
+  label: "Menu List"
+};
+const metaNavigationMenuItem = {
+  category: "hidden",
+  type: "container",
+  icon: import_svg.ListItemIcon,
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle,
+  indexWithinAncestor: "NavigationMenu",
+  label: "Menu Item"
+};
+const metaNavigationMenuTrigger = {
+  category: "hidden",
+  detachable: false,
+  stylable: false,
+  type: "container",
+  icon: import_svg.TriggerIcon,
+  requiredAncestors: ["NavigationMenuItem"],
+  presetStyle,
+  label: "Menu Trigger"
+};
+const metaNavigationMenuContent = {
+  category: "hidden",
+  detachable: false,
+  type: "container",
+  icon: import_svg.ContentIcon,
+  requiredAncestors: ["NavigationMenuItem"],
+  indexWithinAncestor: "NavigationMenu",
+  presetStyle,
+  label: "Menu Content"
+};
+const metaNavigationMenuLink = {
+  category: "hidden",
+  detachable: true,
+  type: "container",
+  stylable: false,
+  icon: import_svg.BoxIcon,
+  // https://github.com/webstudio-is/webstudio-builder/issues/2193
+  // requiredAncestors: ["NavigationMenuContent", "NavigationMenuItem"],
+  // Temporary restrict to NavigationMenu
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle,
+  label: "Accessible Link Wrapper"
+};
+const metaNavigationMenuViewport = {
+  category: "hidden",
+  detachable: true,
+  type: "container",
+  icon: import_svg.ViewportIcon,
+  requiredAncestors: ["NavigationMenu"],
+  presetStyle,
+  label: "Menu Viewport"
+};
+const propsMetaNavigationMenu = {
+  props: import_navigation_menu.propsNavigationMenu
+};
+const propsMetaNavigationMenuItem = {
+  props: import_navigation_menu.propsNavigationMenuItem
+};
+const propsMetaNavigationMenuTrigger = {
+  props: import_navigation_menu.propsNavigationMenuTrigger
+};
+const propsMetaNavigationMenuContent = {
+  props: import_navigation_menu.propsNavigationMenuContent
+};
+const propsMetaNavigationMenuLink = {
+  props: import_navigation_menu.propsNavigationMenuLink
+};
+const propsMetaNavigationMenuList = {
+  props: import_navigation_menu.propsNavigationMenuList
+};
+const propsMetaNavigationMenuViewport = {
+  props: import_navigation_menu.propsNavigationMenuViewport
+};