@webstudio-is/sdk-components-react-radix 0.0.0-5844e28 → 0.0.0-73cd6ea

package/lib/components.js

@@ -1,23 +1,23 @@
 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";
+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 {
-  L as Accordion,
+  P as Accordion,
   k as AccordionContent,
   G as AccordionHeader,
-  P as AccordionItem,
-  R as AccordionTrigger,
-  eo as Checkbox,
-  to as CheckboxIndicator,
+  R as AccordionItem,
+  V as AccordionTrigger,
+  to as Checkbox,
+  ro as CheckboxIndicator,
   t as Collapsible,
   r as CollapsibleContent,
   i as CollapsibleTrigger,
@@ -28,35 +28,36 @@ export {
   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,
+  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 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
+  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

@@ -1,92 +1,86 @@
-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 { 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 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";
+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: 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)
+  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 l = (u) => {
-      const { target: g } = u;
-      if (C(u) !== !1) {
-        if (!(g instanceof HTMLAnchorElement))
+    const f = (g) => {
+      const { target: h } = g;
+      if (C(g) !== !1) {
+        if (!(h instanceof HTMLAnchorElement))
           return !1;
-        g.closest('[role="dialog"]') && (r == null || r(!1));
+        h.closest('[role="dialog"]') && (i == null || i(!1));
       }
     };
-    return window.addEventListener("click", l), () => window.removeEventListener("click", l);
-  }, [n, r, o]), /* @__PURE__ */ i(
+    return window.addEventListener("click", f), () => window.removeEventListener("click", f);
+  }, [r, i, n]), /* @__PURE__ */ s(
     a.Root,
     {
       ...t,
-      onOpenChange: r,
-      open: n
+      onOpenChange: i,
+      open: r
     }
   );
-}), 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)
+}), 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;
-    o.current = !1;
-    const s = (r) => {
-      const { target: l } = r;
-      if (C(r) !== !1) {
-        if (!(l instanceof HTMLAnchorElement))
+    n.current = !1;
+    const r = (l) => {
+      const { target: i } = l;
+      if (C(l) !== !1) {
+        if (!(i instanceof HTMLAnchorElement))
           return !1;
-        l.closest('[role="dialog"]') && (o.current = !0);
+        i.closest('[role="dialog"]') && (n.current = !0);
       }
     };
-    return window.addEventListener("click", s), () => window.removeEventListener("click", s);
-  }, [n]), /* @__PURE__ */ i(
+    return window.addEventListener("click", r), () => window.removeEventListener("click", r);
+  }, [o]), /* @__PURE__ */ s(
     a.Content,
     {
       ref: e,
       ...t,
-      onCloseAutoFocus: (s) => {
-        o.current && s.preventDefault();
+      onCloseAutoFocus: (r) => {
+        n.current && r.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 = {
+}), $ = 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 o of e.instancePath)
-      if (o.component === `${f}:DialogOverlay`) {
-        const n = d(
+    for (const n of e.instancePath)
+      if (n.component === `${u}:DialogOverlay`) {
+        const o = m(
           e.instancePath,
-          o,
-          `${f}:Dialog`
+          n,
+          `${u}:Dialog`
         );
-        n && t.setMemoryProp(n, "open", void 0);
+        o && t.setMemoryProp(o, "open", void 0);
       }
   },
   onNavigatorSelect: (t, e) => {
-    for (const o of e.instancePath)
-      if (o.component === `${f}:DialogOverlay`) {
-        const n = d(
+    for (const n of e.instancePath)
+      if (n.component === `${u}:DialogOverlay`) {
+        const o = m(
           e.instancePath,
-          o,
-          `${f}:Dialog`
+          n,
+          `${u}:Dialog`
         );
-        n && t.setMemoryProp(n, "open", !0);
+        o && t.setMemoryProp(o, "open", !0);
       }
   }
 };

package/lib/dialog.template.js

@@ -2,7 +2,7 @@ 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 { 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",
@@ -16,9 +16,9 @@ const S = {
         "ws:style": i`
           position: fixed;
           inset: 0;
-          z-index: ${d[50]};
+          z-index: ${h[50]};
           background-color: rgb(255 255 255 / 0.8);
-          backdrop-filter: ${m.sm};
+          backdrop-filter: ${f.sm};
           /* To allow positioning Content */
           display: flex;
           overflow: auto;
@@ -27,17 +27,17 @@ const S = {
           o.DialogContent,
           {
             "ws:style": i`
-            width: ${u.full};
-            z-index: ${d[50]};
+            width: ${y.full};
+            z-index: ${h[50]};
             display: flex;
             flex-direction: column;
             gap: ${t[4]};
             margin: auto;
-            max-width: ${w.lg};
-            border: ${$.DEFAULT} solid ${a.border};
+            max-width: ${b.lg};
+            border: ${x.DEFAULT} solid ${a.border};
             background-color: ${a.background};
             padding: ${t[6]};
-            box-shadow: ${s.lg};
+            box-shadow: ${g.lg};
             position: relative;
           `,
             children: [
@@ -55,9 +55,9 @@ const S = {
                       o.DialogTitle,
                       {
                         "ws:style": i`
-                font-size: ${c.lg};
-                line-height: ${y.none};
-                letter-spacing: ${b.tight};
+                font-size: ${d.lg};
+                line-height: ${m.none};
+                letter-spacing: ${u.tight};
                 margin: 0;
               `,
                         children: new r("Dialog Title you can edit")
@@ -67,8 +67,8 @@ const S = {
                       o.DialogDescription,
                       {
                         "ws:style": i`
-                font-size: ${c.sm};
-                line-height: ${x.sm};
+                font-size: ${d.sm};
+                line-height: ${w.sm};
                 color: ${a.mutedForeground};
                 margin: 0;
               `,
@@ -87,21 +87,21 @@ const S = {
               position: absolute;
               right: ${t[4]};
               top: ${t[4]};
-              border-radius: ${f.sm};
-              opacity: ${g[70]};
+              border-radius: ${$.sm};
+              opacity: ${s[70]};
               display: flex;
               align-items: center;
               justify-content: center;
-              height: ${h[4]};
-              width: ${h[4]};
+              height: ${c[4]};
+              width: ${c[4]};
               border: 0;
               background-color: transparent;
               outline: none;
               &:hover {
-                opacity: ${g[100]};
+                opacity: ${s[100]};
               }
               &:focus-visible {
-                box-shadow: ${s.ring};
+                box-shadow: ${g.ring};
               }
             `,
                   children: /* @__PURE__ */ e(l.HtmlEmbed, { "ws:label": "Close Icon", code: p })

package/lib/dialog.ws.js

@@ -1,138 +1,80 @@
-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
-  },
+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,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: "Dialog" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "DialogContent" }
-    }
-  ]
-}, S = {
-  type: "container",
-  presetStyle: {
-    div: o
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   },
-  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" }
-    }
-  ]
+  props: d
 }, b = {
-  type: "container",
-  presetStyle: {
-    h2: l
-  },
   icon: i,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "DialogContent" }
-  }
-}, x = {
-  type: "container",
-  presetStyle: {
-    p: c
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [o.DialogContent]
   },
-  icon: a,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "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 = {
-  type: "container",
-  presetStyle: {
-    button: [T, g].flat()
+  icon: l,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
-  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" }
-    }
-  ]
+  presetStyle: { h2: p },
+  props: C
 }, E = {
-  props: D,
-  initialProps: []
+  icon: a,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: { p: g },
+  props: T
 }, H = {
-  props: m
-}, R = {
-  props: y,
-  initialProps: []
-}, j = {
-  props: C,
-  initialProps: []
-}, k = {
-  props: d,
-  initialProps: []
-}, w = {
-  props: q,
-  initialProps: []
-}, z = {
-  props: $,
-  initialProps: []
+  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 {
-  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
+  P as metaDialog,
+  H as metaDialogClose,
+  O as metaDialogContent,
+  E as metaDialogDescription,
+  b as metaDialogOverlay,
+  B as metaDialogTitle,
+  S as metaDialogTrigger
 };

package/lib/label.template.js

@@ -1,5 +1,5 @@
 import { jsx as e } from "react/jsx-runtime";
-import { css as t, PlaceholderValue as o } from "@webstudio-is/template";
+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 = {
@@ -9,12 +9,12 @@ const p = {
   template: /* @__PURE__ */ e(
     i.Label,
     {
-      "ws:style": t`
+      "ws:style": o`
         font-size: ${r.sm};
         line-height: ${n.none};
         font-weight: ${h.medium};
       `,
-      children: new o("Form Label")
+      children: new t("Form Label")
     }
   )
 };

package/lib/label.ws.js

@@ -1,19 +1,12 @@
-import { LabelIcon as t } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
+import { LabelIcon as o } from "@webstudio-is/icons/svg";
 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"]
+import { props as t } from "./__generated__/label.props.js";
+const m = {
+  icon: o,
+  presetStyle: { label: r },
+  initialProps: ["id", "class", "for"],
+  props: t
 };
 export {
-  l as meta,
-  n as propsMeta
+  m as meta
 };