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

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

@@ -1,514 +0,0 @@
-"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
-};

package/lib/cjs/package.json

@@ -1 +0,0 @@
-{"type":"commonjs"}

package/lib/cjs/popover.js

@@ -1,90 +0,0 @@
-"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 popover_exports = {};
-__export(popover_exports, {
-  Popover: () => Popover,
-  PopoverContent: () => PopoverContent,
-  PopoverTrigger: () => PopoverTrigger,
-  hooksPopover: () => hooksPopover
-});
-module.exports = __toCommonJS(popover_exports);
-var import_jsx_runtime = require("react/jsx-runtime");
-var import_react = require("react");
-var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var import_react_sdk = require("@webstudio-is/react-sdk");
-const Popover = (0, import_react.forwardRef)((props, _ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Root, { ...props });
-});
-const PopoverTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
-  const firstChild = import_react.Children.toArray(children)[0];
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button or link" }) });
-});
-const PopoverContent = (0, import_react.forwardRef)(
-  ({ sideOffset = 4, align = "center", hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(PopoverPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-    PopoverPrimitive.Content,
-    {
-      ref,
-      align: "center",
-      sideOffset,
-      hideWhenDetached,
-      ...props
-    }
-  ) })
-);
-const namespace = "@webstudio-is/sdk-components-react-radix";
-const hooksPopover = {
-  onNavigatorUnselect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:PopoverContent`) {
-        const popover = (0, import_react_sdk.getClosestInstance)(
-          event.instancePath,
-          instance,
-          `${namespace}:Popover`
-        );
-        if (popover) {
-          context.setPropVariable(popover.id, "open", false);
-        }
-      }
-    }
-  },
-  onNavigatorSelect: (context, event) => {
-    for (const instance of event.instancePath) {
-      if (instance.component === `${namespace}:PopoverContent`) {
-        const popover = (0, import_react_sdk.getClosestInstance)(
-          event.instancePath,
-          instance,
-          `${namespace}:Popover`
-        );
-        if (popover) {
-          context.setPropVariable(popover.id, "open", true);
-        }
-      }
-    }
-  }
-};