@webstudio-is/sdk-components-react-radix 0.0.0-c1d6247 → 0.0.0-ca00e2a

package/lib/dialog.ws.js

@@ -1,138 +1,109 @@
-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";
+import { DialogIcon as e, TriggerIcon as n, OverlayIcon as i, ContentIcon as r, ButtonElementIcon as a, HeadingIcon as s, TextIcon as l } from "@webstudio-is/icons/svg";
+import { defaultStates as c } from "@webstudio-is/sdk";
+import { div as t, button as p, h2 as g, p as D } from "@webstudio-is/sdk/normalize.css";
+import { radix as o } from "./shared/meta.js";
+import { propsDialog as d, propsDialogTrigger as m, propsDialogOverlay as y, propsDialogContent as M, propsDialogClose as h, propsDialogTitle as C, propsDialogDescription as T } from "./__generated__/dialog.props.js";
+import { buttonReset as f } 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" }
-    }
-  ]
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  }
 }, 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: t
   }
 }, B = {
-  type: "container",
-  presetStyle: {
-    button: [T, g].flat()
-  },
-  states: p,
   icon: r,
-  label: "Close Button",
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "DialogContent" }
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [
+      o.DialogTitle,
+      o.DialogDescription,
+      o.DialogClose
+    ]
+  },
+  presetStyle: {
+    div: t
   }
-}, h = {
-  type: "container",
-  icon: s,
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: "DialogTrigger" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "DialogOverlay" }
-    }
-  ]
 }, E = {
-  props: D,
-  initialProps: []
+  icon: s,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    h2: g
+  }
 }, H = {
-  props: m
+  icon: l,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    p: D
+  }
 }, R = {
-  props: y,
-  initialProps: []
+  icon: a,
+  label: "Close Button",
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: c,
+  presetStyle: {
+    button: [f, p].flat()
+  }
 }, j = {
-  props: C,
-  initialProps: []
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [o.DialogTrigger, o.DialogOverlay]
+  }
 }, k = {
   props: d,
   initialProps: []
+}, q = {
+  props: m
 }, w = {
-  props: q,
+  props: M,
   initialProps: []
 }, z = {
-  props: $,
+  props: y,
+  initialProps: []
+}, A = {
+  props: h,
+  initialProps: []
+}, F = {
+  props: C,
+  initialProps: []
+}, G = {
+  props: T,
   initialProps: []
 };
 export {
-  h as metaDialog,
-  B as metaDialogClose,
-  S as metaDialogContent,
-  x as metaDialogDescription,
-  P as metaDialogOverlay,
-  b as metaDialogTitle,
+  j as metaDialog,
+  R as metaDialogClose,
+  B as metaDialogContent,
+  H as metaDialogDescription,
+  b as metaDialogOverlay,
+  E 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
+  k as propsMetaDialog,
+  A as propsMetaDialogClose,
+  w as propsMetaDialogContent,
+  G as propsMetaDialogDescription,
+  z as propsMetaDialogOverlay,
+  F as propsMetaDialogTitle,
+  q as propsMetaDialogTrigger
 };

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

@@ -2,18 +2,17 @@ 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",
+const i = {
   icon: t,
-  presetStyle: p,
-  states: o
-}, n = {
+  states: o,
+  presetStyle: {
+    label: r
+  }
+}, l = {
   props: e,
   initialProps: ["id", "className", "htmlFor"]
 };
 export {
-  l as meta,
-  n as propsMeta
+  i as meta,
+  l as propsMeta
 };

package/lib/navigation-menu.js

@@ -1,21 +1,22 @@
 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 { 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);
+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 });
-}), C = a.List, P = a.Viewport, k = a.Content, x = c(({ value: o, ...n }, e) => {
+}), 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 });
-}), 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];
+  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", $ = {
+}), s = "@webstudio-is/sdk-components-react-radix", w = {
   onNavigatorUnselect: (o, n) => {
     for (const e of n.instancePath)
       if (e.component === `${s}:NavigationMenuContent`) {
@@ -42,18 +43,18 @@ const p = c(({ value: o, ...n }, e) => {
         );
         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);
+        const m = o.getPropValue(u, "value") ?? ((e = o.indexesWithinAncestors.get(u.id)) == null ? void 0 : e.toString());
+        m && o.setMemoryProp(i, "value", m);
       }
   }
 };
 export {
-  p as NavigationMenu,
-  k as NavigationMenuContent,
-  x as NavigationMenuItem,
-  A as NavigationMenuLink,
-  C as NavigationMenuList,
-  I as NavigationMenuTrigger,
-  P as NavigationMenuViewport,
-  $ as hooksNavigationMenu
+  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

@@ -1,9 +1,9 @@
 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 { 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, 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";
+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",
@@ -60,7 +60,7 @@ const k = [
         flex-direction: column;
         user-select: none;
         gap: ${i[1]};
-        border-radius: ${p.md};
+        border-radius: ${h.md};
         padding: ${i[3]};
         line-height: ${c.none};
         text-decoration-line: none;
@@ -106,7 +106,7 @@ const k = [
   {
     "ws:label": "Flex Column",
     "ws:style": t`
-      width: ${h[64]};
+      width: ${p[64]};
       display: flex;
       gap: ${i[4]};
       flex-direction: column;
@@ -129,8 +129,8 @@ const k = [
           "ws:style": t`
         background-color: ${a.border};
         padding: ${i[4]};
-        width: ${h[48]};
-        border-radius: ${p.md};
+        width: ${p[48]};
+        border-radius: ${h.md};
       `,
           children: new l("")
         }
@@ -174,7 +174,7 @@ const k = [
               margin-left: ${i[1]};
               rotate: var(--navigation-menu-trigger-icon-transform);
               height: ${y[4]};
-              width: ${h[4]};
+              width: ${p[4]};
               flex-shrink: 0;
               transition: ${x.all};
               transition-duration: 200ms;
@@ -262,7 +262,7 @@ const k = [
             position: relative;
             margin-top: ${i[1.5]};
             overflow: hidden;
-            border-radius: ${p.md};
+            border-radius: ${h.md};
             border: ${v.DEFAULT} solid ${a.border};
             background-color: ${a.popover};
             color: ${a.popoverForeground};

package/lib/navigation-menu.ws.js

@@ -1,124 +1,107 @@
-import { NavigationMenuIcon as t, ListIcon as e, ListItemIcon as o, TriggerIcon as i, ContentIcon as a, BoxIcon as r, ViewportIcon as p } from "@webstudio-is/icons/svg";
-import { div as n } from "@webstudio-is/sdk/normalize.css";
-import { propsNavigationMenu as s, propsNavigationMenuItem as c, propsNavigationMenuTrigger as M, propsNavigationMenuContent as g, propsNavigationMenuLink as u, propsNavigationMenuList as v, propsNavigationMenuViewport as N } from "./__generated__/navigation-menu.props.js";
+import { NavigationMenuIcon as t, ListIcon as o, ListItemIcon as i, TriggerIcon as a, ContentIcon as r, BoxIcon as s, ViewportIcon as c } 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 u, propsNavigationMenuContent as l, propsNavigationMenuLink as v, propsNavigationMenuViewport as N } from "./__generated__/navigation-menu.props.js";
 const y = {
-  type: "container",
   icon: t,
-  presetStyle: {
-    div: n
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [n.NavigationMenuList, n.NavigationMenuViewport]
   },
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: "NavigationMenuList" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "NavigationMenuViewport" }
-    }
-  ]
-}, L = {
-  type: "container",
-  icon: e,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: "NavigationMenu" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "NavigationMenuItem" }
-    }
-  ],
   presetStyle: {
-    div: n
-  },
-  label: "Menu List"
-}, $ = {
-  type: "container",
+    div: e
+  }
+}, h = {
   icon: o,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "NavigationMenuList" }
+  label: "Menu List",
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.NavigationMenuItem]
   },
   presetStyle: {
-    div: n
-  },
-  indexWithinAncestor: "NavigationMenu",
-  label: "Menu Item"
-}, d = {
-  type: "container",
+    div: e
+  }
+}, b = {
   icon: i,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "NavigationMenuItem" }
-  },
-  label: "Menu Trigger"
-}, q = {
-  type: "container",
-  icon: a,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "NavigationMenuItem" }
+  label: "Menu Item",
+  indexWithinAncestor: n.NavigationMenu,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [
+      n.NavigationMenuTrigger,
+      n.NavigationMenuContent,
+      n.NavigationMenuLink
+    ]
   },
-  indexWithinAncestor: "NavigationMenu",
   presetStyle: {
-    div: n
-  },
-  label: "Menu Content"
-}, b = {
-  type: "container",
-  icon: r,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: "NavigationMenu" }
-    },
-    {
-      relation: "ancestor",
-      component: { $in: ["NavigationMenuContent", "NavigationMenuItem"] }
-    }
-  ],
-  label: "Accessible Link Wrapper"
+    div: e
+  }
+}, k = {
+  icon: a,
+  label: "Menu Trigger",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  }
 }, w = {
-  type: "container",
-  icon: p,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "NavigationMenu" }
+  icon: r,
+  label: "Menu Content",
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [n.NavigationMenuLink]
   },
   presetStyle: {
-    div: n
-  },
-  label: "Menu Viewport"
+    div: e
+  }
 }, C = {
-  props: s
+  icon: s,
+  label: "Accessible Link Wrapper",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  }
+}, T = {
+  icon: c,
+  label: "Menu Viewport",
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    div: e
+  }
 }, V = {
-  props: c
+  props: p
 }, S = {
   props: M
-}, T = {
-  props: g
-}, k = {
+}, f = {
   props: u
 }, x = {
+  props: l
+}, A = {
   props: v
-}, f = {
+}, W = {
+  props: g
+}, B = {
   props: N
 };
 export {
   y as metaNavigationMenu,
-  q as metaNavigationMenuContent,
-  $ as metaNavigationMenuItem,
-  b as metaNavigationMenuLink,
-  L as metaNavigationMenuList,
-  d as metaNavigationMenuTrigger,
-  w as metaNavigationMenuViewport,
-  C as propsMetaNavigationMenu,
-  T as propsMetaNavigationMenuContent,
-  V as propsMetaNavigationMenuItem,
-  k as propsMetaNavigationMenuLink,
-  x as propsMetaNavigationMenuList,
-  S as propsMetaNavigationMenuTrigger,
-  f as propsMetaNavigationMenuViewport
+  w as metaNavigationMenuContent,
+  b as metaNavigationMenuItem,
+  C as metaNavigationMenuLink,
+  h as metaNavigationMenuList,
+  k as metaNavigationMenuTrigger,
+  T as metaNavigationMenuViewport,
+  V as propsMetaNavigationMenu,
+  x as propsMetaNavigationMenuContent,
+  S as propsMetaNavigationMenuItem,
+  A as propsMetaNavigationMenuLink,
+  W as propsMetaNavigationMenuList,
+  f as propsMetaNavigationMenuTrigger,
+  B as propsMetaNavigationMenuViewport
 };