@webstudio-is/sdk-components-react-radix 0.0.0-017f1bd

package/lib/dialog.ws.js

@@ -0,0 +1,80 @@
+import { DialogIcon as t, TriggerIcon as n, OverlayIcon as i, ContentIcon as r, ButtonElementIcon as c, HeadingIcon as l, TextIcon as a } from "@webstudio-is/icons/svg";
+import { div as e, button as s, h2 as p, p as g } from "@webstudio-is/sdk/normalize.css";
+import { radix as o } from "./shared/meta.js";
+import { propsDialog as D, propsDialogTrigger as d, propsDialogOverlay as m, propsDialogContent as y, propsDialogClose as h, propsDialogTitle as C, propsDialogDescription as T } from "./__generated__/dialog.props.js";
+import { buttonReset as I } from "./shared/preset-styles.js";
+const S = {
+  icon: n,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  props: d
+}, b = {
+  icon: i,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [o.DialogContent]
+  },
+  presetStyle: { div: e },
+  props: m
+}, O = {
+  icon: r,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [
+      o.DialogTitle,
+      o.DialogDescription,
+      o.DialogClose
+    ]
+  },
+  presetStyle: { div: e },
+  props: y
+}, B = {
+  icon: l,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: { h2: p },
+  props: C
+}, E = {
+  icon: a,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: { p: g },
+  props: T
+}, H = {
+  icon: c,
+  label: "Close Button",
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    button: [I, s].flat()
+  },
+  props: h
+}, P = {
+  icon: t,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [o.DialogTrigger, o.DialogOverlay]
+  },
+  initialProps: ["open"],
+  props: D
+};
+export {
+  P as metaDialog,
+  H as metaDialogClose,
+  O as metaDialogContent,
+  E as metaDialogDescription,
+  b as metaDialogOverlay,
+  B as metaDialogTitle,
+  S as metaDialogTrigger
+};

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 { PlaceholderValue as t, css 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": o`
+        font-size: ${r.sm};
+        line-height: ${n.none};
+        font-weight: ${h.medium};
+      `,
+      children: new t("Form Label")
+    }
+  )
+};
+export {
+  p as meta
+};

package/lib/label.ws.js

@@ -0,0 +1,12 @@
+import { LabelIcon as o } from "@webstudio-is/icons/svg";
+import { label as r } from "@webstudio-is/sdk/normalize.css";
+import { props as t } from "./__generated__/label.props.js";
+const m = {
+  icon: o,
+  presetStyle: { label: r },
+  initialProps: ["id", "class", "for"],
+  props: t
+};
+export {
+  m as meta
+};

package/lib/metas.js

@@ -0,0 +1,63 @@
+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, metaPopoverClose as d, metaPopoverContent as u, metaPopoverTrigger as v } from "./popover.ws.js";
+import { metaTooltip as S, metaTooltipContent as x, metaTooltipTrigger as I } from "./tooltip.ws.js";
+import { metaTabs as M, metaTabsContent as N, metaTabsList as f, metaTabsTrigger as h } from "./tabs.ws.js";
+import { meta as w } from "./label.ws.js";
+import { metaAccordion as L, metaAccordionContent as k, metaAccordionHeader as G, metaAccordionItem as R, metaAccordionTrigger as V } from "./accordion.ws.js";
+import { metaNavigationMenu as H, metaNavigationMenuContent as O, metaNavigationMenuItem as j, metaNavigationMenuLink as q, metaNavigationMenuList as z, metaNavigationMenuTrigger as B, metaNavigationMenuViewport as E } from "./navigation-menu.ws.js";
+import { metaSelect as J, metaSelectContent as K, metaSelectItem as Q, metaSelectItemIndicator as U, metaSelectItemText as W, metaSelectTrigger as X, metaSelectValue as Y, metaSelectViewport as Z } from "./select.ws.js";
+import { metaSwitch as $, metaSwitchThumb as ee } from "./switch.ws.js";
+import { metaCheckbox as te, metaCheckboxIndicator as oe } from "./checkbox.ws.js";
+import { metaRadioGroup as re, metaRadioGroupIndicator as ne, metaRadioGroupItem as me } from "./radio-group.ws.js";
+export {
+  L as Accordion,
+  k as AccordionContent,
+  G as AccordionHeader,
+  R as AccordionItem,
+  V as AccordionTrigger,
+  te as Checkbox,
+  oe 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,
+  w as Label,
+  H as NavigationMenu,
+  O as NavigationMenuContent,
+  j as NavigationMenuItem,
+  q as NavigationMenuLink,
+  z as NavigationMenuList,
+  B as NavigationMenuTrigger,
+  E as NavigationMenuViewport,
+  C as Popover,
+  d as PopoverClose,
+  u as PopoverContent,
+  v as PopoverTrigger,
+  re as RadioGroup,
+  ne as RadioGroupIndicator,
+  me as RadioGroupItem,
+  J as Select,
+  K as SelectContent,
+  Q as SelectItem,
+  U as SelectItemIndicator,
+  W as SelectItemText,
+  X as SelectTrigger,
+  Y as SelectValue,
+  Z as SelectViewport,
+  $ as Switch,
+  ee as SwitchThumb,
+  M as Tabs,
+  N as TabsContent,
+  f as TabsList,
+  h as TabsTrigger,
+  S as Tooltip,
+  x as TooltipContent,
+  I as TooltipTrigger
+};

package/lib/navigation-menu.js

@@ -0,0 +1,60 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as c, useContext as v, Children as g } from "react";
+import * as a from "@radix-ui/react-navigation-menu";
+import { getIndexWithinAncestorFromProps as l } from "@webstudio-is/sdk/runtime";
+import { ReactSdkContext as f, getClosestInstance as d } from "@webstudio-is/react-sdk/runtime";
+const C = c(({ value: o, ...n }, e) => {
+  const { renderer: t } = v(f);
+  let i = o;
+  return t === "canvas" && (i = i === "" ? "-1" : i), /* @__PURE__ */ r(a.Root, { ref: e, value: i, ...n });
+}), P = a.List, k = a.Viewport, x = a.Content, A = c(({ value: o, ...n }, e) => {
+  const t = l(n);
+  return /* @__PURE__ */ r(a.Item, { ref: e, value: o ?? t, ...n });
+}), I = c(({ children: o, ...n }, e) => {
+  const t = g.toArray(o)[0];
+  return /* @__PURE__ */ r(a.Link, { asChild: !0, ref: e, ...n, children: t ?? /* @__PURE__ */ r("a", { children: "Add link component" }) });
+}), $ = c(({ children: o, ...n }, e) => {
+  const t = g.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", w = {
+  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 m = o.getPropValue(u, "value") ?? ((e = o.indexesWithinAncestors.get(u.id)) == null ? void 0 : e.toString());
+        m && o.setMemoryProp(i, "value", m);
+      }
+  }
+};
+export {
+  C as NavigationMenu,
+  x as NavigationMenuContent,
+  A as NavigationMenuItem,
+  I as NavigationMenuLink,
+  P as NavigationMenuList,
+  $ as NavigationMenuTrigger,
+  k as NavigationMenuViewport,
+  w 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 { css as t, $ as n, 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, borderRadius as h, borderWidth as v, colors as a, boxShadow as b, height as y, width as p, transition as x, fontSize as m, weights as $, lineHeight as c } 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: ${h.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: ${p[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: ${p[48]};
+        border-radius: ${h.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: ${p[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: ${h.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
+};

package/lib/navigation-menu.ws.js

@@ -0,0 +1,93 @@
+import { NavigationMenuIcon as t, ListIcon as o, ListItemIcon as i, TriggerIcon as a, ContentIcon as r, BoxIcon as c, ViewportIcon as s } from "@webstudio-is/icons/svg";
+import { div as e } from "@webstudio-is/sdk/normalize.css";
+import { radix as n } from "./shared/meta.js";
+import { propsNavigationMenu as p, propsNavigationMenuList as g, propsNavigationMenuItem as M, propsNavigationMenuTrigger as l, propsNavigationMenuContent as u, propsNavigationMenuLink as d, propsNavigationMenuViewport as v } from "./__generated__/navigation-menu.props.js";
+const L = {
+  icon: t,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.NavigationMenuList, n.NavigationMenuViewport]
+  },
+  presetStyle: {
+    div: e
+  },
+  props: p
+}, h = {
+  icon: o,
+  label: "Menu List",
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.NavigationMenuItem]
+  },
+  presetStyle: {
+    div: e
+  },
+  props: g
+}, b = {
+  icon: i,
+  label: "Menu Item",
+  indexWithinAncestor: n.NavigationMenu,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [
+      n.NavigationMenuTrigger,
+      n.NavigationMenuContent,
+      n.NavigationMenuLink
+    ]
+  },
+  presetStyle: {
+    div: e
+  },
+  props: M
+}, k = {
+  icon: a,
+  label: "Menu Trigger",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  props: l
+}, w = {
+  icon: r,
+  label: "Menu Content",
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.NavigationMenuLink]
+  },
+  presetStyle: {
+    div: e
+  },
+  props: u
+}, C = {
+  icon: c,
+  label: "Accessible Link Wrapper",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  props: d
+}, S = {
+  icon: s,
+  label: "Menu Viewport",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    div: e
+  },
+  props: v
+};
+export {
+  L as metaNavigationMenu,
+  w as metaNavigationMenuContent,
+  b as metaNavigationMenuItem,
+  C as metaNavigationMenuLink,
+  h as metaNavigationMenuList,
+  k as metaNavigationMenuTrigger,
+  S as metaNavigationMenuViewport
+};

package/lib/popover.js

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