@webstudio-is/sdk-components-react-radix 0.209.0 → 0.212.0

package/lib/accordion.js

@@ -1,36 +1,37 @@
 import { jsx as d } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
 import { Root as f, Item as g, Header as p, Trigger as A, Content as l } from "@radix-ui/react-accordion";
-import { getIndexWithinAncestorFromComponentProps as u, getClosestInstance as a } from "@webstudio-is/react-sdk/runtime";
-const x = m((n, o) => /* @__PURE__ */ d(f, { ref: o, type: "single", ...n })), $ = m(({ value: n, ...o }, e) => {
-  const t = u(o);
-  return /* @__PURE__ */ d(g, { ref: e, value: n ?? t ?? "", ...o });
-}), k = p, v = A, w = l, r = "@webstudio-is/sdk-components-react-radix", y = {
-  onNavigatorSelect: (n, o) => {
+import { getIndexWithinAncestorFromProps as u } from "@webstudio-is/sdk/runtime";
+import { getClosestInstance as a } from "@webstudio-is/react-sdk/runtime";
+const $ = m((t, o) => /* @__PURE__ */ d(f, { ref: o, type: "single", ...t })), k = m(({ value: t, ...o }, e) => {
+  const n = u(o);
+  return /* @__PURE__ */ d(g, { ref: e, value: t ?? n ?? "", ...o });
+}), v = p, w = A, y = l, c = "@webstudio-is/sdk-components-react-radix", H = {
+  onNavigatorSelect: (t, o) => {
     var e;
-    for (const t of o.instancePath)
-      if (t.component === `${r}:AccordionContent`) {
+    for (const n of o.instancePath)
+      if (n.component === `${c}:AccordionContent`) {
         const i = a(
           o.instancePath,
-          t,
-          `${r}:Accordion`
-        ), c = a(
+          n,
+          `${c}:Accordion`
+        ), r = a(
           o.instancePath,
-          t,
-          `${r}:AccordionItem`
+          n,
+          `${c}:AccordionItem`
         );
-        if (i && c) {
-          const s = n.getPropValue(c, "value") ?? ((e = n.indexesWithinAncestors.get(c.id)) == null ? void 0 : e.toString());
-          s && n.setMemoryProp(i, "value", s);
+        if (i && r) {
+          const s = t.getPropValue(r, "value") ?? ((e = t.indexesWithinAncestors.get(r.id)) == null ? void 0 : e.toString());
+          s && t.setMemoryProp(i, "value", s);
         }
       }
   }
 };
 export {
-  x as Accordion,
-  w as AccordionContent,
-  k as AccordionHeader,
-  $ as AccordionItem,
-  v as AccordionTrigger,
-  y as hooksAccordion
+  $ as Accordion,
+  y as AccordionContent,
+  v as AccordionHeader,
+  k as AccordionItem,
+  w as AccordionTrigger,
+  H as hooksAccordion
 };

package/lib/accordion.ws.js

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

package/lib/checkbox.template.js

@@ -53,7 +53,7 @@ const y = {
             )
           }
         ),
-        /* @__PURE__ */ e(t.Text, { "ws:label": "Checkbox Label", tag: "span", children: new l("Checkbox") })
+        /* @__PURE__ */ e(t.Text, { "ws:label": "Checkbox Label", "ws:tag": "span", children: new l("Checkbox") })
       ]
     }
   )

package/lib/checkbox.ws.js

@@ -1,15 +1,16 @@
-import { CheckboxCheckedIcon as t, TriggerIcon as o } from "@webstudio-is/icons/svg";
+import { CheckboxCheckedIcon as o, TriggerIcon as c } 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 { button as r, span as n } from "@webstudio-is/sdk/normalize.css";
+import { radix as t } from "./shared/meta.js";
 import { buttonReset as a } from "./shared/preset-styles.js";
-import { propsCheckbox as r, propsCheckboxIndicator as s } from "./__generated__/checkbox.props.js";
-const k = {
+import { propsCheckbox as s, propsCheckboxIndicator as p } from "./__generated__/checkbox.props.js";
+const b = {
   type: "container",
   constraints: {
     relation: "descendant",
-    component: { $eq: "CheckboxIndicator" }
+    component: { $eq: t.CheckboxIndicator }
   },
-  icon: t,
+  icon: o,
   states: [
     ...e,
     {
@@ -24,28 +25,28 @@ const k = {
     }
   ],
   presetStyle: {
-    button: [c, a].flat()
+    button: [r, a].flat()
   }
-}, l = {
+}, x = {
   type: "container",
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Checkbox" }
+    component: { $eq: t.Checkbox }
   },
-  icon: o,
+  icon: c,
   states: e,
   presetStyle: {
     span: n
   }
-}, b = {
-  props: r,
-  initialProps: ["id", "className", "name", "value", "required", "checked"]
 }, C = {
-  props: s
+  props: s,
+  initialProps: ["id", "className", "name", "value", "required", "checked"]
+}, f = {
+  props: p
 };
 export {
-  k as metaCheckbox,
-  l as metaCheckboxIndicator,
-  b as propsMetaCheckbox,
-  C as propsMetaCheckboxIndicator
+  b as metaCheckbox,
+  x as metaCheckboxIndicator,
+  C as propsMetaCheckbox,
+  f as propsMetaCheckboxIndicator
 };

package/lib/collapsible.ws.js

@@ -1,42 +1,43 @@
-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 = {
+import { CollapsibleIcon as n, TriggerIcon as t, ContentIcon as l } from "@webstudio-is/icons/svg";
+import { div as e } from "@webstudio-is/sdk/normalize.css";
+import { radix as o } from "./shared/meta.js";
+import { propsCollapsible as p, propsCollapsibleTrigger as r, propsCollapsibleContent as i } from "./__generated__/collapsible.props.js";
+const m = {
   type: "container",
   constraints: [
     {
       relation: "descendant",
-      component: { $eq: "CollapsibleTrigger" }
+      component: { $eq: o.CollapsibleTrigger }
     },
     {
       relation: "descendant",
-      component: { $eq: "CollapsibleContent" }
+      component: { $eq: o.CollapsibleContent }
     }
   ],
   presetStyle: {
-    div: o
+    div: e
   },
-  icon: e
-}, C = {
+  icon: n
+}, b = {
   type: "container",
-  icon: n,
+  icon: t,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Collapsible" }
+    component: { $eq: o.Collapsible }
   }
-}, b = {
+}, g = {
   type: "container",
   presetStyle: {
-    div: o
+    div: e
   },
-  icon: t,
+  icon: l,
   constraints: {
     relation: "ancestor",
-    component: { $eq: "Collapsible" }
+    component: { $eq: o.Collapsible }
   }
-}, m = {
+}, d = {
   props: {
-    ...l,
+    ...p,
     onOpenChange: {
       type: "action",
       control: "action",
@@ -44,16 +45,16 @@ const c = {
     }
   },
   initialProps: ["open", "onOpenChange"]
-}, g = {
-  props: p
-}, d = {
+}, y = {
   props: r
+}, f = {
+  props: i
 };
 export {
-  c as metaCollapsible,
-  b as metaCollapsibleContent,
-  C as metaCollapsibleTrigger,
-  m as propsMetaCollapsible,
-  d as propsMetaCollapsibleContent,
-  g as propsMetaCollapsibleTrigger
+  m as metaCollapsible,
+  g as metaCollapsibleContent,
+  b as metaCollapsibleTrigger,
+  d as propsMetaCollapsible,
+  f as propsMetaCollapsibleContent,
+  y as propsMetaCollapsibleTrigger
 };

package/lib/dialog.ws.js

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

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
 };