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

package/lib/accordion.template.js

@@ -0,0 +1,95 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { $ as o, PlaceholderValue as s, css as t } from "@webstudio-is/template";
+import { radix as i } from "./shared/proxy.js";
+import { height as h, width as m, transition as a, spacing as c, weights as g, fontSize as f, fontSizeLineHeight as p, borderWidth as w, colors as y } from "./shared/theme.js";
+import { ChevronDownIcon as b } from "@webstudio-is/icons/svg";
+const n = (d, l) => /* @__PURE__ */ r(
+  i.AccordionItem,
+  {
+    "ws:style": t`
+        border-bottom: ${w.DEFAULT} solid ${y.border};
+      `,
+    children: [
+      /* @__PURE__ */ e(
+        i.AccordionHeader,
+        {
+          "ws:style": t`
+          display: flex;
+        `,
+          children: /* @__PURE__ */ r(
+            i.AccordionTrigger,
+            {
+              "ws:style": t`
+            display: flex;
+            flex: 1 1 0;
+            align-items: center;
+            justify-content: between;
+            padding: ${c[4]} 0;
+            font-weight: ${g.medium};
+            --accordion-trigger-icon-transform: 0deg;
+            &:hover {
+              text-decoration-line: underline;
+            }
+            &[data-state="open"] {
+              --accordion-trigger-icon-transform: 180deg;
+            }
+          `,
+              children: [
+                /* @__PURE__ */ e(o.Text, { children: new s(d) }),
+                /* @__PURE__ */ e(
+                  o.Box,
+                  {
+                    "ws:label": "Icon Container",
+                    "ws:style": t`
+              rotate: var(--accordion-trigger-icon-transform);
+              height: ${h[4]};
+              width: ${m[4]};
+              flex-shrink: 0;
+              transition: ${a.all};
+              transition-duration: 200ms;
+            `,
+                    children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Chevron Icon", code: b })
+                  }
+                )
+              ]
+            }
+          )
+        }
+      ),
+      /* @__PURE__ */ e(
+        i.AccordionContent,
+        {
+          "ws:style": t`
+          overflow: hidden;
+          font-size: ${f.sm};
+          line-height: ${p.sm};
+          transition: ${a.all};
+          padding-bottom: ${c[4]};
+        `,
+          children: new s(l)
+        }
+      )
+    ]
+  }
+), v = {
+  category: "radix",
+  description: "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
+  order: 3,
+  template: /* @__PURE__ */ r(i.Accordion, { collapsible: !0, value: "0", children: [
+    n(
+      "Is it accessible?",
+      "Yes. It adheres to the WAI-ARIA design pattern."
+    ),
+    n(
+      "Is it styled?",
+      "Yes. It comes with default styles that matches the other components' aesthetic."
+    ),
+    n(
+      "Is it animated?",
+      "Yes. It's animated by default, but you can disable it if you prefer."
+    )
+  ] })
+};
+export {
+  v as meta
+};

package/lib/accordion.ws.js

@@ -0,0 +1,80 @@
+import { AccordionIcon as t, ItemIcon as n, HeaderIcon as r, TriggerIcon as c, ContentIcon as i } from "@webstudio-is/icons/svg";
+import { div as o, h3 as a, button as p } from "@webstudio-is/sdk/normalize.css";
+import { radix as e } from "./shared/meta.js";
+import { buttonReset as d } from "./shared/preset-styles.js";
+import { propsAccordion as s, propsAccordionItem as l, propsAccordionHeader as m, propsAccordionTrigger as g, propsAccordionContent as A } from "./__generated__/accordion.props.js";
+const v = {
+  icon: t,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [e.AccordionItem]
+  },
+  presetStyle: { div: o },
+  initialProps: ["value", "collapsible"],
+  props: s
+}, x = {
+  label: "Item",
+  icon: n,
+  indexWithinAncestor: e.Accordion,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [e.AccordionHeader, e.AccordionContent]
+  },
+  presetStyle: { div: o },
+  initialProps: ["value"],
+  props: l
+}, f = {
+  label: "Item Header",
+  icon: r,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [e.AccordionTrigger]
+  },
+  presetStyle: {
+    h3: [
+      ...a,
+      {
+        property: "margin-top",
+        value: { type: "unit", unit: "px", value: 0 }
+      },
+      {
+        property: "margin-bottom",
+        value: { type: "unit", unit: "px", value: 0 }
+      }
+    ]
+  },
+  props: m
+}, C = {
+  label: "Item Trigger",
+  icon: c,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: [{ label: "Open", selector: "[data-state=open]" }],
+  presetStyle: {
+    button: [p, d].flat()
+  },
+  props: g
+}, H = {
+  label: "Item Content",
+  icon: i,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    div: o
+  },
+  props: A
+};
+export {
+  v as metaAccordion,
+  H as metaAccordionContent,
+  f as metaAccordionHeader,
+  x as metaAccordionItem,
+  C as metaAccordionTrigger
+};

package/lib/checkbox.js

@@ -0,0 +1,19 @@
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as h, useState as s, useEffect as k } from "react";
+import { Indicator as a, Root as m } from "@radix-ui/react-checkbox";
+const x = h(({ defaultChecked: c, ...o }, r) => {
+  const e = o.checked ?? c ?? !1, [n, t] = s(e);
+  return k(() => t(e), [e]), /* @__PURE__ */ f(
+    m,
+    {
+      ...o,
+      ref: r,
+      checked: n,
+      onCheckedChange: (d) => t(d === !0)
+    }
+  );
+}), b = a;
+export {
+  x as Checkbox,
+  b as CheckboxIndicator
+};

package/lib/checkbox.template.js

@@ -0,0 +1,63 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { CheckMarkIcon as a } from "@webstudio-is/icons/svg";
+import { $ as t, css as o, PlaceholderValue as l } from "@webstudio-is/template";
+import { radix as r } from "./shared/proxy.js";
+import { height as s, width as d, borderRadius as n, borderWidth as h, colors as i, boxShadow as b, opacity as m, spacing as p } from "./shared/theme.js";
+const y = {
+  category: "radix",
+  description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
+  order: 101,
+  template: /* @__PURE__ */ c(
+    r.Label,
+    {
+      "ws:label": "Checkbox Field",
+      "ws:style": o`
+        display: flex;
+        gap: ${p[2]};
+        align-items: center;
+      `,
+      children: [
+        /* @__PURE__ */ e(
+          r.Checkbox,
+          {
+            "ws:style": o`
+          height: ${s[4]};
+          width: ${d[4]};
+          flex-shrink: 0;
+          border-radius: ${n.sm};
+          border: ${h.DEFAULT} solid ${i.primary};
+          &:focus-visible {
+            outline: none;
+            box-shadow: ${b.ring};
+          }
+          &:disabled {
+            cursor: not-allowed;
+            opacity: ${m[50]};
+          }
+          &[data-state="checked"] {
+            background-color: ${i.primary};
+            color: ${i.primaryForeground};
+          }
+        `,
+            children: /* @__PURE__ */ e(
+              r.CheckboxIndicator,
+              {
+                "ws:style": o`
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: currentColor;
+          `,
+                children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Indicator Icon", code: a })
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ e(t.Text, { "ws:label": "Checkbox Label", "ws:tag": "span", children: new l("Checkbox") })
+      ]
+    }
+  )
+};
+export {
+  y as meta
+};

package/lib/checkbox.ws.js

@@ -0,0 +1,36 @@
+import { CheckboxCheckedIcon as e, TriggerIcon as t } from "@webstudio-is/icons/svg";
+import { button as o, span as c } from "@webstudio-is/sdk/normalize.css";
+import { radix as n } from "./shared/meta.js";
+import { buttonReset as r } from "./shared/preset-styles.js";
+import { propsCheckbox as a, propsCheckboxIndicator as s } from "./__generated__/checkbox.props.js";
+const m = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.CheckboxIndicator]
+  },
+  states: [
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
+  ],
+  presetStyle: {
+    button: [o, r].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: a
+}, k = {
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    span: c
+  },
+  props: s
+};
+export {
+  m as metaCheckbox,
+  k as metaCheckboxIndicator
+};

package/lib/collapsible.js

@@ -0,0 +1,40 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as a, useState as c, useEffect as p, Children as f } from "react";
+import { Content as C, Root as m, Trigger as b } from "@radix-ui/react-collapsible";
+import { getClosestInstance as r } from "@webstudio-is/react-sdk/runtime";
+const P = a((n, t) => {
+  const o = n.open ?? !1, [e, i] = c(o);
+  return p(() => i(o), [o]), /* @__PURE__ */ l(m, { ...n, ref: t, open: e, onOpenChange: i });
+}), $ = a(({ children: n, ...t }, o) => {
+  const e = f.toArray(n)[0];
+  return /* @__PURE__ */ l(b, { asChild: !0, ref: o, ...t, children: e ?? /* @__PURE__ */ l("button", { children: "Add button" }) });
+}), x = C, s = "@webstudio-is/sdk-components-react-radix", y = {
+  onNavigatorSelect: (n, t) => {
+    for (const o of t.instancePath)
+      if (o.component === `${s}:CollapsibleContent`) {
+        const e = r(
+          t.instancePath,
+          o,
+          `${s}:Collapsible`
+        );
+        e && n.setMemoryProp(e, "open", !0);
+      }
+  },
+  onNavigatorUnselect: (n, t) => {
+    for (const o of t.instancePath)
+      if (o.component === `${s}:CollapsibleContent`) {
+        const e = r(
+          t.instancePath,
+          o,
+          `${s}:Collapsible`
+        );
+        e && n.setMemoryProp(e, "open", void 0);
+      }
+  }
+};
+export {
+  P as Collapsible,
+  x as CollapsibleContent,
+  $ as CollapsibleTrigger,
+  y as hooksCollapsible
+};

package/lib/collapsible.template.js

@@ -0,0 +1,16 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { $ as o, PlaceholderValue as l } from "@webstudio-is/template";
+import { radix as t } from "./shared/proxy.js";
+import { getButtonStyle as r } from "./shared/styles.js";
+const p = {
+  category: "radix",
+  description: "An interactive component which expands and collapses some content, triggered by a button.",
+  order: 5,
+  template: /* @__PURE__ */ n(t.Collapsible, { children: [
+    /* @__PURE__ */ e(t.CollapsibleTrigger, { children: /* @__PURE__ */ e(o.Button, { "ws:style": r("outline"), children: new l("Click to toggle content") }) }),
+    /* @__PURE__ */ e(t.CollapsibleContent, { children: /* @__PURE__ */ e(o.Text, { children: new l("Collapsible Content") }) })
+  ] })
+};
+export {
+  p as meta
+};

package/lib/collapsible.ws.js

@@ -0,0 +1,39 @@
+import { CollapsibleIcon as n, TriggerIcon as t, ContentIcon as l } from "@webstudio-is/icons/svg";
+import { div as o } from "@webstudio-is/sdk/normalize.css";
+import { radix as e } from "./shared/meta.js";
+import { propsCollapsible as r, propsCollapsibleTrigger as i, propsCollapsibleContent as p } from "./__generated__/collapsible.props.js";
+const g = {
+  icon: n,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [e.CollapsibleTrigger, e.CollapsibleContent]
+  },
+  presetStyle: {
+    div: o
+  },
+  initialProps: ["open"],
+  props: r
+}, m = {
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  props: i
+}, d = {
+  icon: l,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    div: o
+  },
+  props: p
+};
+export {
+  g as metaCollapsible,
+  d as metaCollapsibleContent,
+  m as metaCollapsibleTrigger
+};

package/lib/components.js

@@ -0,0 +1,63 @@
+import { Collapsible as t, CollapsibleContent as r, CollapsibleTrigger as i } from "./collapsible.js";
+import { Dialog as a, DialogClose as l, DialogContent as g, DialogDescription as p, DialogOverlay as c, DialogTitle as m, DialogTrigger as T } from "./dialog.js";
+import { Popover as C, PopoverClose as d, PopoverContent as f, PopoverTrigger as s } from "./popover.js";
+import { Tooltip as v, TooltipContent as b, TooltipTrigger as S } from "./tooltip.js";
+import { Tabs as D, TabsContent as M, TabsList as N, TabsTrigger as h } from "./tabs.js";
+import { Label as w } from "./label.js";
+import { Accordion as P, AccordionContent as k, AccordionHeader as G, AccordionItem as R, AccordionTrigger as V } from "./accordion.js";
+import { NavigationMenu as H, NavigationMenuContent as O, NavigationMenuItem as j, NavigationMenuLink as q, NavigationMenuList as z, NavigationMenuTrigger as B, NavigationMenuViewport as E } from "./navigation-menu.js";
+import { Select as J, SelectContent as K, SelectItem as Q, SelectItemIndicator as U, SelectItemText as W, SelectTrigger as X, SelectValue as Y, SelectViewport as Z } from "./select.js";
+import { Switch as $, SwitchThumb as oo } from "./switch.js";
+import { Checkbox as to, CheckboxIndicator as ro } from "./checkbox.js";
+import { RadioGroup as no, RadioGroupIndicator as ao, RadioGroupItem as lo } from "./radio-group.js";
+export {
+  P as Accordion,
+  k as AccordionContent,
+  G as AccordionHeader,
+  R as AccordionItem,
+  V as AccordionTrigger,
+  to as Checkbox,
+  ro as CheckboxIndicator,
+  t as Collapsible,
+  r as CollapsibleContent,
+  i as CollapsibleTrigger,
+  a as Dialog,
+  l as DialogClose,
+  g as DialogContent,
+  p as DialogDescription,
+  c as DialogOverlay,
+  m as DialogTitle,
+  T 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,
+  f as PopoverContent,
+  s as PopoverTrigger,
+  no as RadioGroup,
+  ao as RadioGroupIndicator,
+  lo 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,
+  oo as SwitchThumb,
+  D as Tabs,
+  M as TabsContent,
+  N as TabsList,
+  h as TabsTrigger,
+  v as Tooltip,
+  b as TooltipContent,
+  S as TooltipTrigger
+};

package/lib/dialog.js

@@ -0,0 +1,96 @@
+import { jsx as s } from "react/jsx-runtime";
+import v from "await-interaction-response";
+import { forwardRef as c, useContext as p, useState as k, useEffect as d, useCallback as w, Children as y, useRef as A } from "react";
+import * as a from "@radix-ui/react-dialog";
+import { ReactSdkContext as D, getClosestInstance as m } from "@webstudio-is/react-sdk/runtime";
+const C = (t) => {
+  const { target: e } = t;
+  return !(!(e instanceof HTMLAnchorElement) || e.hasAttribute("href") === !1 || e.href === "#" || e.hasAttribute("target") && e.target === "_blank" || t.ctrlKey || t.metaKey);
+}, O = c((t, e) => {
+  const { renderer: n } = p(D), o = t.open ?? !1, [r, l] = k(o);
+  d(() => l(o), [o]);
+  const i = w(async (f) => {
+    await v(), l(f);
+  }, []);
+  return d(() => {
+    if (n !== void 0 || r === !1)
+      return;
+    const f = (g) => {
+      const { target: h } = g;
+      if (C(g) !== !1) {
+        if (!(h instanceof HTMLAnchorElement))
+          return !1;
+        h.closest('[role="dialog"]') && (i == null || i(!1));
+      }
+    };
+    return window.addEventListener("click", f), () => window.removeEventListener("click", f);
+  }, [r, i, n]), /* @__PURE__ */ s(
+    a.Root,
+    {
+      ...t,
+      onOpenChange: i,
+      open: r
+    }
+  );
+}), x = c(({ children: t, ...e }, n) => {
+  const o = y.toArray(t)[0];
+  return /* @__PURE__ */ s(a.Trigger, { ref: n, asChild: !0, ...e, children: o ?? /* @__PURE__ */ s("button", { children: "Add button or link" }) });
+}), M = c((t, e) => /* @__PURE__ */ s(a.DialogPortal, { children: /* @__PURE__ */ s(a.Overlay, { ref: e, ...t }) })), R = c((t, e) => {
+  const n = A(!1), { renderer: o } = p(D);
+  return d(() => {
+    if (o !== void 0)
+      return;
+    n.current = !1;
+    const r = (l) => {
+      const { target: i } = l;
+      if (C(l) !== !1) {
+        if (!(i instanceof HTMLAnchorElement))
+          return !1;
+        i.closest('[role="dialog"]') && (n.current = !0);
+      }
+    };
+    return window.addEventListener("click", r), () => window.removeEventListener("click", r);
+  }, [o]), /* @__PURE__ */ s(
+    a.Content,
+    {
+      ref: e,
+      ...t,
+      onCloseAutoFocus: (r) => {
+        n.current && r.preventDefault();
+      }
+    }
+  );
+}), $ = a.Close, E = "h1", N = c(({ tag: t = E, children: e, ...n }, o) => /* @__PURE__ */ s(a.DialogTitle, { asChild: !0, children: /* @__PURE__ */ s(t, { ref: o, ...n, children: e }) })), S = a.Description, u = "@webstudio-is/sdk-components-react-radix", F = {
+  onNavigatorUnselect: (t, e) => {
+    for (const n of e.instancePath)
+      if (n.component === `${u}:DialogOverlay`) {
+        const o = m(
+          e.instancePath,
+          n,
+          `${u}:Dialog`
+        );
+        o && t.setMemoryProp(o, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (t, e) => {
+    for (const n of e.instancePath)
+      if (n.component === `${u}:DialogOverlay`) {
+        const o = m(
+          e.instancePath,
+          n,
+          `${u}:Dialog`
+        );
+        o && t.setMemoryProp(o, "open", !0);
+      }
+  }
+};
+export {
+  O as Dialog,
+  $ as DialogClose,
+  R as DialogContent,
+  S as DialogDescription,
+  M as DialogOverlay,
+  N as DialogTitle,
+  x as DialogTrigger,
+  F as hooksDialog
+};

package/lib/dialog.template.js

@@ -0,0 +1,119 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { LargeXIcon as p } from "@webstudio-is/icons/svg";
+import { $ as l, PlaceholderValue as r, css as i } from "@webstudio-is/template";
+import { radix as o } from "./shared/proxy.js";
+import { fontSize as d, lineHeight as m, letterSpacing as u, fontSizeLineHeight as w, colors as a, spacing as t, borderRadius as $, opacity as s, height as c, boxShadow as g, width as y, zIndex as h, maxWidth as b, borderWidth as x, blur as f } from "./shared/theme.js";
+import { getButtonStyle as D } from "./shared/styles.js";
+const S = {
+  category: "radix",
+  description: "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
+  order: 4,
+  template: /* @__PURE__ */ n(o.Dialog, { children: [
+    /* @__PURE__ */ e(o.DialogTrigger, { children: /* @__PURE__ */ e(l.Button, { "ws:style": D("outline"), children: new r("Button") }) }),
+    /* @__PURE__ */ e(
+      o.DialogOverlay,
+      {
+        "ws:style": i`
+          position: fixed;
+          inset: 0;
+          z-index: ${h[50]};
+          background-color: rgb(255 255 255 / 0.8);
+          backdrop-filter: ${f.sm};
+          /* To allow positioning Content */
+          display: flex;
+          overflow: auto;
+        `,
+        children: /* @__PURE__ */ n(
+          o.DialogContent,
+          {
+            "ws:style": i`
+            width: ${y.full};
+            z-index: ${h[50]};
+            display: flex;
+            flex-direction: column;
+            gap: ${t[4]};
+            margin: auto;
+            max-width: ${b.lg};
+            border: ${x.DEFAULT} solid ${a.border};
+            background-color: ${a.background};
+            padding: ${t[6]};
+            box-shadow: ${g.lg};
+            position: relative;
+          `,
+            children: [
+              /* @__PURE__ */ n(
+                l.Box,
+                {
+                  "ws:label": "Dialog Header",
+                  "ws:style": i`
+              display: flex;
+              flex-direction: column;
+              gap: ${t[2]};
+            `,
+                  children: [
+                    /* @__PURE__ */ e(
+                      o.DialogTitle,
+                      {
+                        "ws:style": i`
+                font-size: ${d.lg};
+                line-height: ${m.none};
+                letter-spacing: ${u.tight};
+                margin: 0;
+              `,
+                        children: new r("Dialog Title you can edit")
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      o.DialogDescription,
+                      {
+                        "ws:style": i`
+                font-size: ${d.sm};
+                line-height: ${w.sm};
+                color: ${a.mutedForeground};
+                margin: 0;
+              `,
+                        children: new r("Dialog description text you can edit")
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(l.Text, { children: new r("The text you can edit") }),
+              /* @__PURE__ */ e(
+                o.DialogClose,
+                {
+                  "ws:label": "Close Button",
+                  "ws:style": i`
+              position: absolute;
+              right: ${t[4]};
+              top: ${t[4]};
+              border-radius: ${$.sm};
+              opacity: ${s[70]};
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: ${c[4]};
+              width: ${c[4]};
+              border: 0;
+              background-color: transparent;
+              outline: none;
+              &:hover {
+                opacity: ${s[100]};
+              }
+              &:focus-visible {
+                box-shadow: ${g.ring};
+              }
+            `,
+                  children: /* @__PURE__ */ e(l.HtmlEmbed, { "ws:label": "Close Icon", code: p })
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] })
+};
+export {
+  S as meta
+};