@webstudio-is/sdk-components-react-radix 0.191.4 → 0.192.0

package/lib/navigation-menu.ws.js

@@ -0,0 +1,475 @@
+import { NavigationMenuIcon as x, ListIcon as w, ListItemIcon as I, TriggerIcon as k, ContentIcon as L, BoxIcon as C, ViewportIcon as A, ChevronDownIcon as T } from "@webstudio-is/icons/svg";
+import { div as B } from "@webstudio-is/sdk/normalize.css";
+import { relative as m, maxW as $, p as a, m as h, flex as n, list as V, items as q, justify as g, 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: B
+}, 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 }]
+          }
+        ]
+      }
+    ]
+  }
+], u = (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: T
+                      }
+                    ],
+                    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(), $("max")].flat(),
+      children: [
+        {
+          type: "instance",
+          component: "NavigationMenuList",
+          styles: [
+            // ul defaults in tailwind
+            a(0),
+            h(0),
+            // shadcdn styles
+            n(),
+            n(1),
+            V("none"),
+            q("center"),
+            g("center"),
+            s(1)
+          ].flat(),
+          children: [
+            ...u({
+              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 })
+              ]
+            }),
+            ...u({
+              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(),
+            g("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: []
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, ge = {
+  category: "hidden",
+  detachable: !1,
+  type: "container",
+  icon: w,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenu" }
+  },
+  presetStyle: o,
+  label: "Menu List"
+}, ue = {
+  category: "hidden",
+  type: "container",
+  icon: I,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenu" }
+  },
+  presetStyle: o,
+  indexWithinAncestor: "NavigationMenu",
+  label: "Menu Item"
+}, he = {
+  category: "hidden",
+  detachable: !1,
+  stylable: !1,
+  type: "container",
+  icon: k,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenuItem" }
+  },
+  presetStyle: o,
+  label: "Menu Trigger"
+}, ve = {
+  category: "hidden",
+  detachable: !1,
+  type: "container",
+  icon: L,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "NavigationMenuItem" }
+  },
+  indexWithinAncestor: "NavigationMenu",
+  presetStyle: o,
+  label: "Menu Content"
+}, ye = {
+  category: "hidden",
+  detachable: !0,
+  type: "container",
+  stylable: !1,
+  icon: C,
+  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: A,
+  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
+}, ke = {
+  props: ne
+};
+export {
+  me as metaNavigationMenu,
+  ve as metaNavigationMenuContent,
+  ue as metaNavigationMenuItem,
+  ye as metaNavigationMenuLink,
+  ge 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,
+  ke 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
+};

package/lib/props.js

@@ -0,0 +1,62 @@
+import { propsMetaCollapsible as a, propsMetaCollapsibleContent as t, propsMetaCollapsibleTrigger as r } from "./collapsible.ws.js";
+import { propsMetaDialog as s, propsMetaDialogClose as i, propsMetaDialogContent as n, propsMetaDialogDescription as l, propsMetaDialogOverlay as M, propsMetaDialogTitle as g, propsMetaDialogTrigger as c } from "./dialog.ws.js";
+import { propsMetaPopover as C, propsMetaPopoverContent as m, propsMetaPopoverTrigger as d } from "./popover.ws.js";
+import { propsMetaTooltip as v, propsMetaTooltipContent as b, propsMetaTooltipTrigger as S } from "./tooltip.ws.js";
+import { propsMetaTabs as I, propsMetaTabsContent as D, propsMetaTabsList as N, propsMetaTabsTrigger as f } from "./tabs.ws.js";
+import { propsMeta as A } from "./label.ws.js";
+import { propsMetaAccordion as L, propsMetaAccordionContent as k, propsMetaAccordionHeader as G, propsMetaAccordionItem as P, propsMetaAccordionTrigger as R } from "./accordion.ws.js";
+import { propsMetaNavigationMenu as y, propsMetaNavigationMenuContent as H, propsMetaNavigationMenuItem as O, propsMetaNavigationMenuLink as j, propsMetaNavigationMenuList as q, propsMetaNavigationMenuTrigger as z, propsMetaNavigationMenuViewport as B } from "./navigation-menu.ws.js";
+import { propsMetaSelect as F, propsMetaSelectContent as J, propsMetaSelectItem as K, propsMetaSelectItemIndicator as Q, propsMetaSelectItemText as U, propsMetaSelectTrigger as W, propsMetaSelectValue as X, propsMetaSelectViewport as Y } from "./select.ws.js";
+import { propsMetaSwitch as _, propsMetaSwitchThumb as $ } from "./switch.ws.js";
+import { propsMetaCheckbox as eo, propsMetaCheckboxIndicator as ao } from "./checkbox.ws.js";
+import { propsMetaRadioGroup as ro, propsMetaRadioGroupIndicator as po, propsMetaRadioGroupItem as so } from "./radio-group.ws.js";
+export {
+  L as Accordion,
+  k as AccordionContent,
+  G as AccordionHeader,
+  P as AccordionItem,
+  R as AccordionTrigger,
+  eo as Checkbox,
+  ao as CheckboxIndicator,
+  a as Collapsible,
+  t as CollapsibleContent,
+  r as CollapsibleTrigger,
+  s as Dialog,
+  i as DialogClose,
+  n as DialogContent,
+  l as DialogDescription,
+  M as DialogOverlay,
+  g as DialogTitle,
+  c as DialogTrigger,
+  A as Label,
+  y as NavigationMenu,
+  H as NavigationMenuContent,
+  O as NavigationMenuItem,
+  j as NavigationMenuLink,
+  q as NavigationMenuList,
+  z as NavigationMenuTrigger,
+  B as NavigationMenuViewport,
+  C as Popover,
+  m as PopoverContent,
+  d as PopoverTrigger,
+  ro as RadioGroup,
+  po as RadioGroupIndicator,
+  so as RadioGroupItem,
+  F as Select,
+  J as SelectContent,
+  K as SelectItem,
+  Q as SelectItemIndicator,
+  U as SelectItemText,
+  W as SelectTrigger,
+  X as SelectValue,
+  Y as SelectViewport,
+  _ as Switch,
+  $ as SwitchThumb,
+  I as Tabs,
+  D as TabsContent,
+  N as TabsList,
+  f as TabsTrigger,
+  v as Tooltip,
+  b as TooltipContent,
+  S as TooltipTrigger
+};

package/lib/radio-group.js

@@ -0,0 +1,9 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Root as d, Item as p, Indicator as e } from "@radix-ui/react-radio-group";
+const u = m(({ value: o, defaultValue: r, ...t }, a) => /* @__PURE__ */ i(d, { ...t, defaultValue: o ?? r, ref: a })), R = p, s = e;
+export {
+  u as RadioGroup,
+  s as RadioGroupIndicator,
+  R as RadioGroupItem
+};