@webstudio-is/sdk-components-react-radix 0.0.0-021f2d4

package/lib/dialog.ws.js

@@ -0,0 +1,138 @@
+import { TriggerIcon as t, OverlayIcon as n, ContentIcon as e, HeadingIcon as i, TextIcon as a, ButtonElementIcon as r, DialogIcon as s } from "@webstudio-is/icons/svg";
+import { defaultStates as p } from "@webstudio-is/sdk";
+import { div as o, h2 as l, p as c, button as g } from "@webstudio-is/sdk/normalize.css";
+import { propsDialog as D, propsDialogTrigger as m, propsDialogContent as y, propsDialogOverlay as C, propsDialogClose as d, propsDialogTitle as q, propsDialogDescription as $ } from "./__generated__/dialog.props.js";
+import { buttonReset as T } from "./shared/preset-styles.js";
+const O = {
+  type: "container",
+  icon: t,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Dialog" }
+  }
+}, P = {
+  type: "container",
+  presetStyle: {
+    div: o
+  },
+  icon: n,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "Dialog" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "DialogContent" }
+    }
+  ]
+}, S = {
+  type: "container",
+  presetStyle: {
+    div: o
+  },
+  icon: e,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "DialogOverlay" }
+    },
+    // often deleted by users
+    // though radix starts throwing warnings in console
+    /*
+    {
+      relation: "descendant",
+      component: { $eq: "DialogTitle" },
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "DialogDescription" },
+    },
+    */
+    {
+      relation: "descendant",
+      component: { $eq: "DialogClose" }
+    }
+  ]
+}, b = {
+  type: "container",
+  presetStyle: {
+    h2: l
+  },
+  icon: i,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "DialogContent" }
+  }
+}, x = {
+  type: "container",
+  presetStyle: {
+    p: c
+  },
+  icon: a,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "DialogContent" }
+  }
+}, B = {
+  type: "container",
+  presetStyle: {
+    button: [T, g].flat()
+  },
+  states: p,
+  icon: r,
+  label: "Close Button",
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "DialogContent" }
+  }
+}, h = {
+  type: "container",
+  icon: s,
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "DialogTrigger" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "DialogOverlay" }
+    }
+  ]
+}, E = {
+  props: D,
+  initialProps: []
+}, H = {
+  props: m
+}, R = {
+  props: y,
+  initialProps: []
+}, j = {
+  props: C,
+  initialProps: []
+}, k = {
+  props: d,
+  initialProps: []
+}, w = {
+  props: q,
+  initialProps: []
+}, z = {
+  props: $,
+  initialProps: []
+};
+export {
+  h as metaDialog,
+  B as metaDialogClose,
+  S as metaDialogContent,
+  x as metaDialogDescription,
+  P as metaDialogOverlay,
+  b as metaDialogTitle,
+  O as metaDialogTrigger,
+  E as propsMetaDialog,
+  k as propsMetaDialogClose,
+  R as propsMetaDialogContent,
+  z as propsMetaDialogDescription,
+  j as propsMetaDialogOverlay,
+  w as propsMetaDialogTitle,
+  H as propsMetaDialogTrigger
+};

package/lib/hooks.js

@@ -0,0 +1,21 @@
+import { hooksCollapsible as o } from "./collapsible.js";
+import { hooksTabs as r } from "./tabs.js";
+import { hooksDialog as m } from "./dialog.js";
+import { hooksPopover as i } from "./popover.js";
+import { hooksTooltip as t } from "./tooltip.js";
+import { hooksAccordion as p } from "./accordion.js";
+import { hooksNavigationMenu as s } from "./navigation-menu.js";
+import { hooksSelect as h } from "./select.js";
+const g = [
+  o,
+  r,
+  m,
+  i,
+  t,
+  p,
+  s,
+  h
+];
+export {
+  g as hooks
+};

package/lib/label.js

@@ -0,0 +1,7 @@
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import * as i from "@radix-ui/react-label";
+const a = t((o, r) => /* @__PURE__ */ m(i.Root, { ref: r, ...o }));
+export {
+  a as Label
+};

package/lib/label.template.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import { css as t, PlaceholderValue as o } from "@webstudio-is/template";
+import { radix as i } from "./shared/proxy.js";
+import { fontSize as r, lineHeight as n, weights as h } from "./shared/theme.js";
+const p = {
+  category: "radix",
+  description: "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
+  order: 102,
+  template: /* @__PURE__ */ e(
+    i.Label,
+    {
+      "ws:style": t`
+        font-size: ${r.sm};
+        line-height: ${n.none};
+        font-weight: ${h.medium};
+      `,
+      children: new o("Form Label")
+    }
+  )
+};
+export {
+  p as meta
+};

package/lib/label.ws.js

@@ -0,0 +1,19 @@
+import { LabelIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/sdk";
+import { label as r } from "@webstudio-is/sdk/normalize.css";
+import { props as e } from "./__generated__/label.props.js";
+const p = {
+  label: r
+}, l = {
+  type: "container",
+  icon: t,
+  presetStyle: p,
+  states: o
+}, n = {
+  props: e,
+  initialProps: ["id", "className", "htmlFor"]
+};
+export {
+  l as meta,
+  n as propsMeta
+};

package/lib/metas.js

@@ -0,0 +1,62 @@
+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 { 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 {
+  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,
+  n as Dialog,
+  m as DialogClose,
+  s as DialogContent,
+  l as DialogDescription,
+  g as DialogOverlay,
+  c as DialogTitle,
+  p 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,
+  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.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.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
+};