@webstudio-is/sdk-components-react-radix 0.196.0 → 0.198.0

package/lib/metas.js

@@ -1,24 +1,23 @@
 import { metaCollapsible as t, metaCollapsibleContent as o, metaCollapsibleTrigger as i } from "./collapsible.ws.js";
 import { metaDialog as n, metaDialogClose as m, metaDialogContent as s, metaDialogDescription as l, metaDialogOverlay as g, metaDialogTitle as c, metaDialogTrigger as p } from "./dialog.ws.js";
-import { meta as C } from "./sheet.ws.js";
-import { metaPopover as u, metaPopoverContent as v, metaPopoverTrigger as b } from "./popover.ws.js";
-import { metaTooltip as x, metaTooltipContent as I, metaTooltipTrigger as D } from "./tooltip.ws.js";
-import { metaTabs as N, metaTabsContent as f, metaTabsList as h, metaTabsTrigger as A } from "./tabs.ws.js";
-import { meta as L } from "./label.ws.js";
-import { metaAccordion as G, metaAccordionContent as P, metaAccordionHeader as R, metaAccordionItem as V, metaAccordionTrigger as y } from "./accordion.ws.js";
-import { metaNavigationMenu as O, metaNavigationMenuContent as j, metaNavigationMenuItem as q, metaNavigationMenuLink as z, metaNavigationMenuList as B, metaNavigationMenuTrigger as E, metaNavigationMenuViewport as F } from "./navigation-menu.ws.js";
-import { metaSelect as K, metaSelectContent as Q, metaSelectItem as U, metaSelectItemIndicator as W, metaSelectItemText as X, metaSelectTrigger as Y, metaSelectValue as Z, metaSelectViewport as _ } from "./select.ws.js";
-import { metaSwitch as ee, metaSwitchThumb as ae } from "./switch.ws.js";
-import { metaCheckbox as oe, metaCheckboxIndicator as ie } from "./checkbox.ws.js";
-import { metaRadioGroup as ne, metaRadioGroupIndicator as me, metaRadioGroupItem as se } from "./radio-group.ws.js";
+import { metaPopover as C, metaPopoverContent as d, metaPopoverTrigger as u } from "./popover.ws.js";
+import { metaTooltip as b, metaTooltipContent as S, metaTooltipTrigger as x } from "./tooltip.ws.js";
+import { metaTabs as D, metaTabsContent as M, metaTabsList as N, metaTabsTrigger as f } from "./tabs.ws.js";
+import { meta as A } from "./label.ws.js";
+import { metaAccordion as L, metaAccordionContent as k, metaAccordionHeader as G, metaAccordionItem as P, metaAccordionTrigger as R } from "./accordion.ws.js";
+import { metaNavigationMenu as y, metaNavigationMenuContent as H, metaNavigationMenuItem as O, metaNavigationMenuLink as j, metaNavigationMenuList as q, metaNavigationMenuTrigger as z, metaNavigationMenuViewport as B } from "./navigation-menu.ws.js";
+import { metaSelect as F, metaSelectContent as J, metaSelectItem as K, metaSelectItemIndicator as Q, metaSelectItemText as U, metaSelectTrigger as W, metaSelectValue as X, metaSelectViewport as Y } from "./select.ws.js";
+import { metaSwitch as _, metaSwitchThumb as $ } from "./switch.ws.js";
+import { metaCheckbox as ae, metaCheckboxIndicator as te } from "./checkbox.ws.js";
+import { metaRadioGroup as ie, metaRadioGroupIndicator as re, metaRadioGroupItem as ne } from "./radio-group.ws.js";
 export {
-  G as Accordion,
-  P as AccordionContent,
-  R as AccordionHeader,
-  V as AccordionItem,
-  y as AccordionTrigger,
-  oe as Checkbox,
-  ie as CheckboxIndicator,
+  L as Accordion,
+  k as AccordionContent,
+  G as AccordionHeader,
+  P as AccordionItem,
+  R as AccordionTrigger,
+  ae as Checkbox,
+  te as CheckboxIndicator,
   t as Collapsible,
   o as CollapsibleContent,
   i as CollapsibleTrigger,
@@ -29,36 +28,35 @@ export {
   g as DialogOverlay,
   c as DialogTitle,
   p as DialogTrigger,
-  L as Label,
-  O as NavigationMenu,
-  j as NavigationMenuContent,
-  q as NavigationMenuItem,
-  z as NavigationMenuLink,
-  B as NavigationMenuList,
-  E as NavigationMenuTrigger,
-  F as NavigationMenuViewport,
-  u as Popover,
-  v as PopoverContent,
-  b as PopoverTrigger,
-  ne as RadioGroup,
-  me as RadioGroupIndicator,
-  se as RadioGroupItem,
-  K as Select,
-  Q as SelectContent,
-  U as SelectItem,
-  W as SelectItemIndicator,
-  X as SelectItemText,
-  Y as SelectTrigger,
-  Z as SelectValue,
-  _ as SelectViewport,
-  C as Sheet,
-  ee as Switch,
-  ae as SwitchThumb,
-  N as Tabs,
-  f as TabsContent,
-  h as TabsList,
-  A as TabsTrigger,
-  x as Tooltip,
-  I as TooltipContent,
-  D as TooltipTrigger
+  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,
+  d as PopoverContent,
+  u as PopoverTrigger,
+  ie as RadioGroup,
+  re as RadioGroupIndicator,
+  ne 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,
+  D as Tabs,
+  M as TabsContent,
+  N as TabsList,
+  f as TabsTrigger,
+  b as Tooltip,
+  S as TooltipContent,
+  x as TooltipTrigger
 };

package/lib/navigation-menu.template.js

@@ -0,0 +1,283 @@
+import { jsxs as s, jsx as e } from "react/jsx-runtime";
+import { ChevronDownIcon as w } from "@webstudio-is/icons/svg";
+import { $ as n, css as t, PlaceholderValue as l } from "@webstudio-is/template";
+import { radix as r } from "./shared/proxy.js";
+import { getButtonStyle as u } from "./shared/styles.js";
+import { spacing as i, colors as a, width as h, borderRadius as p, borderWidth as v, boxShadow as b, height as y, transition as x, lineHeight as c, fontSize as m, weights as $ } from "./shared/theme.js";
+const k = [
+  {
+    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."
+  }
+], M = (o) => /* @__PURE__ */ e(r.NavigationMenuLink, { children: /* @__PURE__ */ s(
+  n.Link,
+  {
+    href: `https://ui.shadcn.com${o.href}`,
+    "ws:style": t`
+        color: inherit;
+        display: flex;
+        flex-direction: column;
+        user-select: none;
+        gap: ${i[1]};
+        border-radius: ${p.md};
+        padding: ${i[3]};
+        line-height: ${c.none};
+        text-decoration-line: none;
+        outline: none;
+        &:hover,
+        &:focus {
+          background-color: ${a.accent};
+          color: ${a.accentForeground};
+        }
+      `,
+    children: [
+      /* @__PURE__ */ e(
+        n.Text,
+        {
+          "ws:style": t`
+          font-size: ${m.sm};
+          font-weight: ${$.medium};
+          line-height: ${c.none};
+        `,
+          children: new l(o.title)
+        }
+      ),
+      /* @__PURE__ */ e(
+        n.Paragraph,
+        {
+          "ws:style": t`
+          margin: 0;
+          overflow: hidden;
+          display: -webkit-box;
+          -webkit-box-orient: vertical;
+          -webkit-line-clamp: 2;
+          font-size: ${m.sm};
+          line-height: ${c.snug};
+          color: ${a.mutedForeground};
+        `,
+          children: new l(o.description)
+        }
+      )
+    ]
+  }
+) }, o.title), d = (o) => /* @__PURE__ */ e(
+  n.Box,
+  {
+    "ws:label": "Flex Column",
+    "ws:style": t`
+      width: ${h[64]};
+      display: flex;
+      gap: ${i[4]};
+      flex-direction: column;
+    `,
+    children: k.slice(o.offset, o.offset + o.count).map(M)
+  }
+), C = /* @__PURE__ */ s(
+  n.Box,
+  {
+    "ws:label": "Content",
+    "ws:style": t`
+      display: flex;
+      gap: ${i[4]};
+      padding: ${i[2]};
+    `,
+    children: [
+      /* @__PURE__ */ e(
+        n.Box,
+        {
+          "ws:style": t`
+        background-color: ${a.border};
+        padding: ${i[4]};
+        width: ${h[48]};
+        border-radius: ${p.md};
+      `,
+          children: new l("")
+        }
+      ),
+      d({ count: 3, offset: 0 })
+    ]
+  }
+), A = /* @__PURE__ */ s(
+  n.Box,
+  {
+    "ws:label": "Content",
+    "ws:style": t`
+      display: flex;
+      gap: ${i[4]};
+    `,
+    children: [
+      d({ count: 3, offset: 3 }),
+      d({ count: 3, offset: 6 })
+    ]
+  }
+), g = (o, f) => /* @__PURE__ */ s(r.NavigationMenuItem, { children: [
+  /* @__PURE__ */ e(r.NavigationMenuTrigger, { children: /* @__PURE__ */ s(
+    n.Button,
+    {
+      "ws:style": [
+        ...u("ghost", "sm"),
+        ...t`
+              --navigation-menu-trigger-icon-transform: 0deg;
+              &[data-state="open"] {
+                --navigation-menu-trigger-icon-transform: 180deg;
+              }
+            `
+      ],
+      children: [
+        /* @__PURE__ */ e(n.Text, { children: new l(o) }),
+        /* @__PURE__ */ e(
+          n.Box,
+          {
+            "ws:label": "Icon Container",
+            "ws:style": t`
+              margin-left: ${i[1]};
+              rotate: var(--navigation-menu-trigger-icon-transform);
+              height: ${y[4]};
+              width: ${h[4]};
+              flex-shrink: 0;
+              transition: ${x.all};
+              transition-duration: 200ms;
+            `,
+            children: /* @__PURE__ */ e(n.HtmlEmbed, { "ws:label": "Chevron Icon", code: w })
+          }
+        )
+      ]
+    }
+  ) }),
+  /* @__PURE__ */ e(
+    r.NavigationMenuContent,
+    {
+      "ws:style": t`
+          left: 0;
+          top: 0;
+          positon: absolute;
+          width: max-content;
+          padding: ${i[4]};
+        `,
+      children: f
+    }
+  )
+] }), N = (o) => /* @__PURE__ */ e(r.NavigationMenuItem, { children: /* @__PURE__ */ e(r.NavigationMenuLink, { children: /* @__PURE__ */ e(
+  n.Link,
+  {
+    "ws:style": [
+      ...u("ghost", "sm"),
+      ...t`
+              text-decoration-line: none;
+              color: currentColor;
+            `
+    ],
+    children: new l(o)
+  }
+) }) }), S = {
+  category: "radix",
+  description: "A collection of links for navigating websites.",
+  order: 2,
+  template: /* @__PURE__ */ s(
+    r.NavigationMenu,
+    {
+      "ws:style": t`
+        position: relative;
+        max-width: max-content;
+      `,
+      children: [
+        /* @__PURE__ */ s(
+          r.NavigationMenuList,
+          {
+            "ws:style": t`
+          /* ul defaults in tailwind */
+          padding: 0;
+          margin: 0;
+          /* shadcdn styles */
+          display: flex;
+          flex: 1 1 0;
+          list-style-type: none;
+          align-items: center;
+          justify-content: center;
+          gap: ${i[1]};
+        `,
+            children: [
+              g("About", C),
+              g("Components", A),
+              N("Standalone")
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          n.Box,
+          {
+            "ws:label": "Viewport Container",
+            "ws:style": t`
+          position: absolute;
+          left: 0;
+          top: 100%;
+          display: flex;
+          justify-content: center;
+        `,
+            children: /* @__PURE__ */ e(
+              r.NavigationMenuViewport,
+              {
+                "ws:style": t`
+            position: relative;
+            margin-top: ${i[1.5]};
+            overflow: hidden;
+            border-radius: ${p.md};
+            border: ${v.DEFAULT} solid ${a.border};
+            background-color: ${a.popover};
+            color: ${a.popoverForeground};
+            box-shadow: ${b.lg};
+            height: var(--radix-navigation-menu-viewport-height);
+            width: var(--radix-navigation-menu-viewport-width);
+          `
+              }
+            )
+          }
+        )
+      ]
+    }
+  )
+};
+export {
+  S as meta
+};