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

package/lib/accordion.ws.js

@@ -0,0 +1,117 @@
+import { AccordionIcon as t, ItemIcon as e, HeaderIcon as n, TriggerIcon as r, ContentIcon as c } from "@webstudio-is/icons/svg";
+import { defaultStates as i } from "@webstudio-is/sdk";
+import { h3 as a, button as p, div as s } from "@webstudio-is/sdk/normalize.css";
+import { buttonReset as d } from "./shared/preset-styles.js";
+import { propsAccordion as m, propsAccordionItem as l, propsAccordionHeader as A, propsAccordionTrigger as I, propsAccordionContent as g } from "./__generated__/accordion.props.js";
+const o = {
+  div: s
+}, f = {
+  type: "container",
+  icon: t,
+  presetStyle: o,
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionItem" }
+    }
+  ]
+}, v = {
+  type: "container",
+  label: "Item",
+  icon: e,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "Accordion" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionHeader" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionContent" }
+    }
+  ],
+  indexWithinAncestor: "Accordion",
+  presetStyle: o
+}, H = {
+  type: "container",
+  label: "Item Header",
+  icon: n,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "AccordionItem" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "AccordionTrigger" }
+    }
+  ],
+  presetStyle: {
+    h3: [
+      ...a,
+      {
+        property: "marginTop",
+        value: { type: "unit", unit: "px", value: 0 }
+      },
+      {
+        property: "marginBottom",
+        value: { type: "unit", unit: "px", value: 0 }
+      }
+    ]
+  }
+}, T = {
+  type: "container",
+  label: "Item Trigger",
+  icon: r,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "AccordionHeader" }
+  },
+  states: [
+    ...i,
+    {
+      category: "component-states",
+      label: "Open",
+      selector: "[data-state=open]"
+    }
+  ],
+  presetStyle: {
+    button: [p, d].flat()
+  }
+}, C = {
+  type: "container",
+  label: "Item Content",
+  icon: c,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "AccordionItem" }
+  },
+  presetStyle: o
+}, M = {
+  props: m,
+  initialProps: ["value", "collapsible"]
+}, x = {
+  props: l,
+  initialProps: ["value"]
+}, S = {
+  props: A
+}, h = {
+  props: I
+}, P = {
+  props: g
+};
+export {
+  f as metaAccordion,
+  C as metaAccordionContent,
+  H as metaAccordionHeader,
+  v as metaAccordionItem,
+  T as metaAccordionTrigger,
+  M as propsMetaAccordion,
+  P as propsMetaAccordionContent,
+  S as propsMetaAccordionHeader,
+  x as propsMetaAccordionItem,
+  h as propsMetaAccordionTrigger
+};

package/lib/checkbox.js

@@ -0,0 +1,8 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { Root as m, Indicator as d } from "@radix-ui/react-checkbox";
+const p = f(({ checked: o, defaultChecked: r, ...t }, e) => /* @__PURE__ */ c(m, { ...t, ref: e, defaultChecked: o ?? r })), x = d;
+export {
+  p as Checkbox,
+  x 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 { css as o, $ as t, PlaceholderValue as l } from "@webstudio-is/template";
+import { radix as r } from "./shared/proxy.js";
+import { spacing as s, height as d, width as n, borderRadius as h, borderWidth as b, colors as i, boxShadow as m, opacity 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: ${s[2]};
+        align-items: center;
+      `,
+      children: [
+        /* @__PURE__ */ e(
+          r.Checkbox,
+          {
+            "ws:style": o`
+          height: ${d[4]};
+          width: ${n[4]};
+          flex-shrink: 0;
+          border-radius: ${h.sm};
+          border: ${b.DEFAULT} solid ${i.primary};
+          &:focus-visible {
+            outline: none;
+            box-shadow: ${m.ring};
+          }
+          &:disabled {
+            cursor: not-allowed;
+            opacity: ${p[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", tag: "span", children: new l("Checkbox") })
+      ]
+    }
+  )
+};
+export {
+  y as meta
+};

package/lib/checkbox.ws.js

@@ -0,0 +1,51 @@
+import { CheckboxCheckedIcon as t, TriggerIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/sdk";
+import { button as c, span as n } from "@webstudio-is/sdk/normalize.css";
+import { buttonReset as a } from "./shared/preset-styles.js";
+import { propsCheckbox as r, propsCheckboxIndicator as s } from "./__generated__/checkbox.props.js";
+const k = {
+  type: "container",
+  constraints: {
+    relation: "descendant",
+    component: { $eq: "CheckboxIndicator" }
+  },
+  icon: t,
+  states: [
+    ...e,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    button: [c, a].flat()
+  }
+}, l = {
+  type: "container",
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Checkbox" }
+  },
+  icon: o,
+  states: e,
+  presetStyle: {
+    span: n
+  }
+}, b = {
+  props: r,
+  initialProps: ["id", "className", "name", "value", "required", "checked"]
+}, C = {
+  props: s
+};
+export {
+  k as metaCheckbox,
+  l as metaCheckboxIndicator,
+  b as propsMetaCheckbox,
+  C as propsMetaCheckboxIndicator
+};

package/lib/collapsible.js

@@ -0,0 +1,37 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as r, Children as a } from "react";
+import { Root as c, Trigger as p, Content as C } from "@radix-ui/react-collapsible";
+import { getClosestInstance as l } from "@webstudio-is/react-sdk/runtime";
+const h = c, g = r(({ children: e, ...o }, t) => {
+  const n = a.toArray(e)[0];
+  return /* @__PURE__ */ i(p, { asChild: !0, ref: t, ...o, children: n ?? /* @__PURE__ */ i("button", { children: "Add button" }) });
+}), u = C, s = "@webstudio-is/sdk-components-react-radix", P = {
+  onNavigatorSelect: (e, o) => {
+    for (const t of o.instancePath)
+      if (t.component === `${s}:CollapsibleContent`) {
+        const n = l(
+          o.instancePath,
+          t,
+          `${s}:Collapsible`
+        );
+        n && e.setMemoryProp(n, "open", !0);
+      }
+  },
+  onNavigatorUnselect: (e, o) => {
+    for (const t of o.instancePath)
+      if (t.component === `${s}:CollapsibleContent`) {
+        const n = l(
+          o.instancePath,
+          t,
+          `${s}:Collapsible`
+        );
+        n && e.setMemoryProp(n, "open", void 0);
+      }
+  }
+};
+export {
+  h as Collapsible,
+  u as CollapsibleContent,
+  g as CollapsibleTrigger,
+  P 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,59 @@
+import { CollapsibleIcon as e, TriggerIcon as n, ContentIcon as t } from "@webstudio-is/icons/svg";
+import { div as o } from "@webstudio-is/sdk/normalize.css";
+import { propsCollapsible as l, propsCollapsibleTrigger as p, propsCollapsibleContent as r } from "./__generated__/collapsible.props.js";
+const c = {
+  type: "container",
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "CollapsibleTrigger" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "CollapsibleContent" }
+    }
+  ],
+  presetStyle: {
+    div: o
+  },
+  icon: e
+}, C = {
+  type: "container",
+  icon: n,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Collapsible" }
+  }
+}, b = {
+  type: "container",
+  presetStyle: {
+    div: o
+  },
+  icon: t,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Collapsible" }
+  }
+}, m = {
+  props: {
+    ...l,
+    onOpenChange: {
+      type: "action",
+      control: "action",
+      required: !1
+    }
+  },
+  initialProps: ["open", "onOpenChange"]
+}, g = {
+  props: p
+}, d = {
+  props: r
+};
+export {
+  c as metaCollapsible,
+  b as metaCollapsibleContent,
+  C as metaCollapsibleTrigger,
+  m as propsMetaCollapsible,
+  d as propsMetaCollapsibleContent,
+  g as propsMetaCollapsibleTrigger
+};

package/lib/components.js

@@ -0,0 +1,62 @@
+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, PopoverContent as d, PopoverTrigger as f } from "./popover.js";
+import { Tooltip as b, TooltipContent as s, TooltipTrigger as v } from "./tooltip.js";
+import { Tabs as I, TabsContent as D, TabsList as M, TabsTrigger as N } from "./tabs.js";
+import { Label as A } from "./label.js";
+import { Accordion as L, AccordionContent as k, AccordionHeader as G, AccordionItem as P, AccordionTrigger as R } from "./accordion.js";
+import { NavigationMenu as y, NavigationMenuContent as H, NavigationMenuItem as O, NavigationMenuLink as j, NavigationMenuList as q, NavigationMenuTrigger as z, NavigationMenuViewport as B } from "./navigation-menu.js";
+import { Select as F, SelectContent as J, SelectItem as K, SelectItemIndicator as Q, SelectItemText as U, SelectTrigger as W, SelectValue as X, SelectViewport as Y } from "./select.js";
+import { Switch as _, SwitchThumb as $ } from "./switch.js";
+import { Checkbox as eo, CheckboxIndicator as to } from "./checkbox.js";
+import { RadioGroup as io, RadioGroupIndicator as no, RadioGroupItem as ao } from "./radio-group.js";
+export {
+  L as Accordion,
+  k as AccordionContent,
+  G as AccordionHeader,
+  P as AccordionItem,
+  R as AccordionTrigger,
+  eo as Checkbox,
+  to 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,
+  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,
+  f as PopoverTrigger,
+  io as RadioGroup,
+  no as RadioGroupIndicator,
+  ao 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,
+  M as TabsList,
+  N as TabsTrigger,
+  b as Tooltip,
+  s as TooltipContent,
+  v as TooltipTrigger
+};

package/lib/dialog.js

@@ -0,0 +1,102 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as c, useContext as h, useCallback as D, useEffect as m, Children as v, useRef as k } from "react";
+import * as a from "@radix-ui/react-dialog";
+import { ReactSdkContext as p, getClosestInstance as d } from "@webstudio-is/react-sdk/runtime";
+import { useControllableState as w } from "@radix-ui/react-use-controllable-state";
+import y from "await-interaction-response";
+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: o } = h(p), [n, s] = w({
+    prop: t.open,
+    defaultProp: !1,
+    onChange: t.onOpenChange
+  }), r = D(
+    async (l) => {
+      await y(), s(l);
+    },
+    [s]
+  );
+  return m(() => {
+    if (o !== void 0 || n === !1)
+      return;
+    const l = (u) => {
+      const { target: g } = u;
+      if (C(u) !== !1) {
+        if (!(g instanceof HTMLAnchorElement))
+          return !1;
+        g.closest('[role="dialog"]') && (r == null || r(!1));
+      }
+    };
+    return window.addEventListener("click", l), () => window.removeEventListener("click", l);
+  }, [n, r, o]), /* @__PURE__ */ i(
+    a.Root,
+    {
+      ...t,
+      onOpenChange: r,
+      open: n
+    }
+  );
+}), x = c(({ children: t, ...e }, o) => {
+  const n = v.toArray(t)[0];
+  return /* @__PURE__ */ i(a.Trigger, { ref: o, asChild: !0, ...e, children: n ?? /* @__PURE__ */ i("button", { children: "Add button or link" }) });
+}), M = c((t, e) => /* @__PURE__ */ i(a.DialogPortal, { children: /* @__PURE__ */ i(a.Overlay, { ref: e, ...t }) })), R = c((t, e) => {
+  const o = k(!1), { renderer: n } = h(p);
+  return m(() => {
+    if (n !== void 0)
+      return;
+    o.current = !1;
+    const s = (r) => {
+      const { target: l } = r;
+      if (C(r) !== !1) {
+        if (!(l instanceof HTMLAnchorElement))
+          return !1;
+        l.closest('[role="dialog"]') && (o.current = !0);
+      }
+    };
+    return window.addEventListener("click", s), () => window.removeEventListener("click", s);
+  }, [n]), /* @__PURE__ */ i(
+    a.Content,
+    {
+      ref: e,
+      ...t,
+      onCloseAutoFocus: (s) => {
+        o.current && s.preventDefault();
+      }
+    }
+  );
+}), $ = a.Close, A = "h1", N = c(({ tag: t = A, children: e, ...o }, n) => /* @__PURE__ */ i(a.DialogTitle, { asChild: !0, children: /* @__PURE__ */ i(t, { ref: n, ...o, children: e }) })), S = a.Description, f = "@webstudio-is/sdk-components-react-radix", F = {
+  onNavigatorUnselect: (t, e) => {
+    for (const o of e.instancePath)
+      if (o.component === `${f}:DialogOverlay`) {
+        const n = d(
+          e.instancePath,
+          o,
+          `${f}:Dialog`
+        );
+        n && t.setMemoryProp(n, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (t, e) => {
+    for (const o of e.instancePath)
+      if (o.component === `${f}:DialogOverlay`) {
+        const n = d(
+          e.instancePath,
+          o,
+          `${f}:Dialog`
+        );
+        n && t.setMemoryProp(n, "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 { zIndex as d, blur as m, width as u, spacing as t, maxWidth as w, borderWidth as $, colors as a, boxShadow as s, fontSize as c, lineHeight as y, letterSpacing as b, fontSizeLineHeight as x, borderRadius as f, opacity as g, height as h } 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: ${d[50]};
+          background-color: rgb(255 255 255 / 0.8);
+          backdrop-filter: ${m.sm};
+          /* To allow positioning Content */
+          display: flex;
+          overflow: auto;
+        `,
+        children: /* @__PURE__ */ n(
+          o.DialogContent,
+          {
+            "ws:style": i`
+            width: ${u.full};
+            z-index: ${d[50]};
+            display: flex;
+            flex-direction: column;
+            gap: ${t[4]};
+            margin: auto;
+            max-width: ${w.lg};
+            border: ${$.DEFAULT} solid ${a.border};
+            background-color: ${a.background};
+            padding: ${t[6]};
+            box-shadow: ${s.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: ${c.lg};
+                line-height: ${y.none};
+                letter-spacing: ${b.tight};
+                margin: 0;
+              `,
+                        children: new r("Dialog Title you can edit")
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      o.DialogDescription,
+                      {
+                        "ws:style": i`
+                font-size: ${c.sm};
+                line-height: ${x.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: ${f.sm};
+              opacity: ${g[70]};
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: ${h[4]};
+              width: ${h[4]};
+              border: 0;
+              background-color: transparent;
+              outline: none;
+              &:hover {
+                opacity: ${g[100]};
+              }
+              &:focus-visible {
+                box-shadow: ${s.ring};
+              }
+            `,
+                  children: /* @__PURE__ */ e(l.HtmlEmbed, { "ws:label": "Close Icon", code: p })
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] })
+};
+export {
+  S as meta
+};