@webstudio-is/sdk-components-react-radix 0.185.0 → 0.191.0

package/lib/navigation-menu.js

@@ -0,0 +1,59 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as a from "@radix-ui/react-navigation-menu";
+import { ReactSdkContext as v, getIndexWithinAncestorFromComponentProps as l, getClosestInstance as d } from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as c, useContext as f, Children as m } from "react";
+const p = c(({ value: o, ...n }, e) => {
+  const { renderer: t } = f(v);
+  let i = o;
+  return t === "canvas" && (i = i === "" ? "-1" : i), /* @__PURE__ */ r(a.Root, { ref: e, value: i, ...n });
+}), C = a.List, P = a.Viewport, k = a.Content, x = c(({ value: o, ...n }, e) => {
+  const t = l(n);
+  return /* @__PURE__ */ r(a.Item, { ref: e, value: o ?? t, ...n });
+}), A = c(({ children: o, ...n }, e) => {
+  const t = m.toArray(o)[0];
+  return /* @__PURE__ */ r(a.Link, { asChild: !0, ref: e, ...n, children: t ?? /* @__PURE__ */ r("a", { children: "Add link component" }) });
+}), I = c(({ children: o, ...n }, e) => {
+  const t = m.toArray(o)[0];
+  return /* @__PURE__ */ r(a.Trigger, { asChild: !0, ref: e, ...n, children: t ?? /* @__PURE__ */ r("button", { children: "Add button or link" }) });
+}), s = "@webstudio-is/sdk-components-react-radix", $ = {
+  onNavigatorUnselect: (o, n) => {
+    for (const e of n.instancePath)
+      if (e.component === `${s}:NavigationMenuContent`) {
+        const t = d(
+          n.instancePath,
+          e,
+          `${s}:NavigationMenu`
+        );
+        t && o.setMemoryProp(t, "value", void 0);
+      }
+  },
+  onNavigatorSelect: (o, n) => {
+    var e;
+    for (const t of n.instancePath)
+      if (t.component === `${s}:NavigationMenuContent`) {
+        const i = d(
+          n.instancePath,
+          t,
+          `${s}:NavigationMenu`
+        ), u = d(
+          n.instancePath,
+          t,
+          `${s}:NavigationMenuItem`
+        );
+        if (u === void 0 || i === void 0)
+          return;
+        const g = o.getPropValue(u, "value") ?? ((e = o.indexesWithinAncestors.get(u.id)) == null ? void 0 : e.toString());
+        g && o.setMemoryProp(i, "value", g);
+      }
+  }
+};
+export {
+  p as NavigationMenu,
+  k as NavigationMenuContent,
+  x as NavigationMenuItem,
+  A as NavigationMenuLink,
+  C as NavigationMenuList,
+  I as NavigationMenuTrigger,
+  P as NavigationMenuViewport,
+  $ as hooksNavigationMenu
+};

package/lib/navigation-menu.ws.js

@@ -0,0 +1,481 @@
+import { NavigationMenuIcon as x, ListIcon as w, ListItemIcon as I, TriggerIcon as A, ContentIcon as k, BoxIcon as L, ViewportIcon as C, ChevronDownIcon as q } from "@webstudio-is/icons/svg";
+import { div as T } from "@webstudio-is/sdk/normalize.css";
+import { relative as m, maxW as B, p as a, m as h, flex as n, list as $, items as V, justify as u, gap as s, bg as r, w as c, rounded as d, absolute as v, left as y, top as f, mt as D, overflow as F, border as S, text as t, shadow as W, property as i, noUnderline as M, state as E, ml as P, h as j, shrink as H, transition as U, duration as _, select as z, leading as l, outline as G, hover as J, focus as K, font as O, lineClamp as Q } from "./theme/tailwind-classes.js";
+import { getButtonStyles as N } from "./theme/styles.js";
+import { propsNavigationMenu as R, propsNavigationMenuItem as X, propsNavigationMenuTrigger as Y, propsNavigationMenuContent as Z, propsNavigationMenuLink as ee, propsNavigationMenuList as te, propsNavigationMenuViewport as ne } from "./__generated__/navigation-menu.props.js";
+const o = {
+  div: T
+}, oe = [
+  {
+    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—known as tab panels—that 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."
+  }
+], ie = (e) => [
+  {
+    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: [
+          t("inherit"),
+          n(),
+          n("col"),
+          z(),
+          s(1),
+          d("md"),
+          a(3),
+          l("none"),
+          M(),
+          G(),
+          J([r("accent"), t("accentForeground")].flat()),
+          K([r("accent"), t("accentForeground")].flat())
+        ].flat(),
+        props: [
+          {
+            name: "href",
+            type: "string",
+            value: `https://ui.shadcn.com${e.href}`
+          }
+        ],
+        children: [
+          {
+            type: "instance",
+            component: "Text",
+            // text-sm font-medium leading-none
+            styles: [
+              t("sm"),
+              O("medium"),
+              l("none")
+            ].flat(),
+            children: [
+              {
+                type: "text",
+                value: e.title,
+                placeholder: !0
+              }
+            ]
+          },
+          {
+            type: "instance",
+            component: "Paragraph",
+            // line-clamp-2 text-sm leading-snug text-muted-foreground
+            styles: [
+              h(0),
+              Q(2),
+              t("sm"),
+              l("snug"),
+              t("mutedForeground")
+            ].flat(),
+            children: [
+              {
+                type: "text",
+                value: e.description,
+                placeholder: !0
+              }
+            ]
+          }
+        ]
+      }
+    ]
+  }
+], p = (e) => [
+  {
+    type: "instance",
+    component: "Box",
+    label: "Flex Column",
+    styles: [c(64), n(), s(4), n("col")].flat(),
+    children: Array.from(
+      Array(e.count),
+      (re, b) => ie(oe[b + e.offset])
+    ).flat()
+  }
+], ae = (e) => [
+  {
+    type: "instance",
+    component: "NavigationMenuItem",
+    children: [
+      {
+        type: "instance",
+        component: "NavigationMenuLink",
+        children: [
+          {
+            type: "instance",
+            component: "Link",
+            styles: [
+              N("ghost", "sm"),
+              M(),
+              t("current")
+            ].flat(),
+            children: [{ type: "text", value: e.title, placeholder: !0 }]
+          }
+        ]
+      }
+    ]
+  }
+], g = (e) => [
+  {
+    type: "instance",
+    component: "NavigationMenuItem",
+    children: [
+      {
+        type: "instance",
+        component: "NavigationMenuTrigger",
+        children: [
+          {
+            type: "instance",
+            component: "Button",
+            styles: [
+              N("ghost", "sm"),
+              i("--navigation-menu-trigger-icon-transform", "0deg"),
+              E(
+                [
+                  i(
+                    "--navigation-menu-trigger-icon-transform",
+                    "180deg"
+                  )
+                ],
+                "[data-state=open]"
+              )
+            ].flat(),
+            children: [
+              {
+                type: "instance",
+                component: "Text",
+                children: [
+                  { type: "text", value: e.title, placeholder: !0 }
+                ]
+              },
+              {
+                type: "instance",
+                component: "Box",
+                label: "Icon Container",
+                // h-4 w-4 shrink-0 transition-transform duration-200
+                styles: [
+                  P(1),
+                  i(
+                    "rotate",
+                    "--navigation-menu-trigger-icon-transform"
+                  ),
+                  j(4),
+                  c(4),
+                  H(0),
+                  U("all"),
+                  _(200)
+                ].flat(),
+                children: [
+                  {
+                    type: "instance",
+                    component: "HtmlEmbed",
+                    label: "Chevron Icon",
+                    props: [
+                      {
+                        type: "string",
+                        name: "code",
+                        value: q
+                      }
+                    ],
+                    children: []
+                  }
+                ]
+              }
+            ]
+          }
+        ]
+      },
+      {
+        type: "instance",
+        component: "NavigationMenuContent",
+        // left-0 top-0 absolute w-max
+        styles: [
+          y(0),
+          f(0),
+          v(),
+          c("max"),
+          a(4)
+        ].flat(),
+        children: [
+          {
+            type: "instance",
+            component: "Box",
+            label: "Content",
+            styles: [n(), s(4), a(e.padding)].flat(),
+            children: e.children
+          }
+        ]
+      }
+    ]
+  }
+], me = {
+  category: "radix",
+  order: 2,
+  type: "container",
+  description: "A collection of links for navigating websites.",
+  icon: x,
+  presetStyle: o,
+  template: [
+    {
+      type: "instance",
+      component: "NavigationMenu",
+      props: [],
+      // relative
+      // Omiting this: z-10 flex max-w-max flex-1 items-center justify-center
+      styles: [m(), B("max")].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "NavigationMenuList",
+          styles: [
+            // ul defaults in tailwind
+            a(0),
+            h(0),
+            // shadcdn styles
+            n(),
+            n(1),
+            $("none"),
+            V("center"),
+            u("center"),
+            s(1)
+          ].flat(),
+          children: [
+            ...g({
+              title: "About",
+              padding: 2,
+              children: [
+                {
+                  type: "instance",
+                  component: "Box",
+                  styles: [
+                    r("border"),
+                    a(4),
+                    c(48),
+                    d("md")
+                  ].flat(),
+                  children: [
+                    {
+                      type: "text",
+                      value: "",
+                      placeholder: !0
+                    }
+                  ]
+                },
+                ...p({ count: 3, offset: 0 })
+              ]
+            }),
+            ...g({
+              title: "Components",
+              padding: 0,
+              children: [
+                ...p({ count: 3, offset: 3 }),
+                ...p({ count: 3, offset: 6 })
+              ]
+            }),
+            ...ae({ title: "Standalone" })
+          ]
+        },
+        {
+          type: "instance",
+          component: "Box",
+          label: "Viewport Container",
+          // absolute left-0 top-full flex justify-center
+          styles: [
+            v(),
+            y(0),
+            f("full"),
+            n(),
+            u("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: [
+                m(),
+                D(1.5),
+                F("hidden"),
+                d("md"),
+                S(),
+                r("popover"),
+                t("popoverForeground"),
+                W("lg"),
+                i(
+                  "height",
+                  "--radix-navigation-menu-viewport-height"
+                ),
+                i("width", "--radix-navigation-menu-viewport-width")
+              ].flat(),
+              children: []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, ue = {
+  category: "hidden",
+  detachable: !1,
+  type: "container",
+  icon: w,
+  requiredAncestors: ["NavigationMenu"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenu" }
+  },
+  presetStyle: o,
+  label: "Menu List"
+}, ge = {
+  category: "hidden",
+  type: "container",
+  icon: I,
+  requiredAncestors: ["NavigationMenu"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenu" }
+  },
+  presetStyle: o,
+  indexWithinAncestor: "NavigationMenu",
+  label: "Menu Item"
+}, he = {
+  category: "hidden",
+  detachable: !1,
+  stylable: !1,
+  type: "container",
+  icon: A,
+  requiredAncestors: ["NavigationMenuItem"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenuItem" }
+  },
+  presetStyle: o,
+  label: "Menu Trigger"
+}, ve = {
+  category: "hidden",
+  detachable: !1,
+  type: "container",
+  icon: k,
+  requiredAncestors: ["NavigationMenuItem"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenuItem" }
+  },
+  indexWithinAncestor: "NavigationMenu",
+  presetStyle: o,
+  label: "Menu Content"
+}, ye = {
+  category: "hidden",
+  detachable: !0,
+  type: "container",
+  stylable: !1,
+  icon: L,
+  requiredAncestors: ["NavigationMenu"],
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "NavigationMenu" }
+    },
+    {
+      relation: "ancestor",
+      component: { $in: ["NavigationMenuContent", "NavigationMenuItem"] }
+    }
+  ],
+  presetStyle: o,
+  label: "Accessible Link Wrapper"
+}, fe = {
+  category: "hidden",
+  detachable: !0,
+  type: "container",
+  icon: C,
+  requiredAncestors: ["NavigationMenu"],
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenu" }
+  },
+  presetStyle: o,
+  label: "Menu Viewport"
+}, Me = {
+  props: R
+}, Ne = {
+  props: X
+}, be = {
+  props: Y
+}, xe = {
+  props: Z
+}, we = {
+  props: ee
+}, Ie = {
+  props: te
+}, Ae = {
+  props: ne
+};
+export {
+  me as metaNavigationMenu,
+  ve as metaNavigationMenuContent,
+  ge as metaNavigationMenuItem,
+  ye as metaNavigationMenuLink,
+  ue as metaNavigationMenuList,
+  he as metaNavigationMenuTrigger,
+  fe as metaNavigationMenuViewport,
+  Me as propsMetaNavigationMenu,
+  xe as propsMetaNavigationMenuContent,
+  Ne as propsMetaNavigationMenuItem,
+  we as propsMetaNavigationMenuLink,
+  Ie as propsMetaNavigationMenuList,
+  be as propsMetaNavigationMenuTrigger,
+  Ae as propsMetaNavigationMenuViewport
+};

package/lib/popover.js

@@ -0,0 +1,48 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as c, Children as P } from "react";
+import * as s from "@radix-ui/react-popover";
+import { getClosestInstance as a } from "@webstudio-is/react-sdk/runtime";
+const l = c((o, t) => /* @__PURE__ */ n(s.Root, { ...o })), v = c(({ children: o, ...t }, e) => {
+  const r = P.toArray(o)[0];
+  return /* @__PURE__ */ n(s.Trigger, { asChild: !0, ref: e, ...t, children: r ?? /* @__PURE__ */ n("button", { children: "Add button or link" }) });
+}), h = c(
+  ({ sideOffset: o = 4, align: t = "center", hideWhenDetached: e = !0, ...r }, p) => /* @__PURE__ */ n(s.Portal, { children: /* @__PURE__ */ n(
+    s.Content,
+    {
+      ref: p,
+      align: "center",
+      sideOffset: o,
+      hideWhenDetached: e,
+      ...r
+    }
+  ) })
+), i = "@webstudio-is/sdk-components-react-radix", g = {
+  onNavigatorUnselect: (o, t) => {
+    for (const e of t.instancePath)
+      if (e.component === `${i}:PopoverContent`) {
+        const r = a(
+          t.instancePath,
+          e,
+          `${i}:Popover`
+        );
+        r && o.setMemoryProp(r, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (o, t) => {
+    for (const e of t.instancePath)
+      if (e.component === `${i}:PopoverContent`) {
+        const r = a(
+          t.instancePath,
+          e,
+          `${i}:Popover`
+        );
+        r && o.setMemoryProp(r, "open", !0);
+      }
+  }
+};
+export {
+  l as Popover,
+  h as PopoverContent,
+  v as PopoverTrigger,
+  g as hooksPopover
+};

package/lib/popover.ws.js

@@ -0,0 +1,96 @@
+import { TriggerIcon as e, ContentIcon as o, PopoverIcon as t } from "@webstudio-is/icons/svg";
+import "@webstudio-is/react-sdk";
+import { div as r } from "@webstudio-is/sdk/normalize.css";
+import { z as n, w as p, rounded as i, border as a, bg as s, p as c, text as l, shadow as d, outline as m } from "./theme/tailwind-classes.js";
+import { getButtonStyles as y } from "./theme/styles.js";
+import { propsPopover as g, propsPopoverTrigger as v, propsPopoverContent as P } from "./__generated__/popover.props.js";
+const f = {
+  div: r
+}, B = {
+  category: "hidden",
+  type: "container",
+  icon: e,
+  stylable: !1,
+  detachable: !1
+}, I = {
+  category: "hidden",
+  type: "container",
+  presetStyle: f,
+  icon: o,
+  detachable: !1
+}, M = {
+  category: "radix",
+  order: 6,
+  type: "container",
+  icon: t,
+  stylable: !1,
+  description: "Displays rich content in a portal, triggered by a button.",
+  template: [
+    {
+      type: "instance",
+      component: "Popover",
+      props: [],
+      children: [
+        {
+          type: "instance",
+          component: "PopoverTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: y("outline"),
+              children: [{ type: "text", value: "Button", placeholder: !0 }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "PopoverContent",
+          /**
+           *  z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none
+           **/
+          styles: [
+            n(50),
+            p(72),
+            i("md"),
+            a(),
+            s("popover"),
+            c(4),
+            l("popoverForeground"),
+            d("md"),
+            m()
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [
+                {
+                  type: "text",
+                  value: "The text you can edit",
+                  placeholder: !0
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, w = {
+  props: g,
+  initialProps: ["open"]
+}, O = {
+  props: v
+}, S = {
+  props: P,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+};
+export {
+  M as metaPopover,
+  I as metaPopoverContent,
+  B as metaPopoverTrigger,
+  w as propsMetaPopover,
+  S as propsMetaPopoverContent,
+  O as propsMetaPopoverTrigger
+};