@webstudio-is/sdk-components-react-radix 0.210.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/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/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/sheet.template.js

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { MenuIcon as s, LargeXIcon as b } from "@webstudio-is/icons/svg";
-import { $ as t, css as i, PlaceholderValue as n } from "@webstudio-is/template";
-import { radix as o } from "./shared/proxy.js";
+import { $ as o, css as i, PlaceholderValue as n } from "@webstudio-is/template";
+import { radix as t } from "./shared/proxy.js";
 import { zIndex as d, blur as p, width as u, spacing as l, borderWidth as w, colors as a, boxShadow as c, maxWidth as f, fontSize as g, lineHeight as x, letterSpacing as $, fontSizeLineHeight as y, borderRadius as S, opacity as h, height as m } from "./shared/theme.js";
 import { getButtonStyle as D } from "./shared/styles.js";
 const B = {
@@ -9,10 +9,10 @@ const B = {
   icon: s,
   description: "Displays content in a menu that slides out from the side of the screen, triggered by a button. Use this component for a typical mobile hamburger menu.",
   order: 1,
-  template: /* @__PURE__ */ r(o.Dialog, { "ws:label": "Sheet", children: [
-    /* @__PURE__ */ e(o.DialogTrigger, { "ws:label": "Sheet Trigger", children: /* @__PURE__ */ e(t.Button, { "ws:style": D("ghost", "icon"), children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Hamburger Menu Svg", code: s }) }) }),
+  template: /* @__PURE__ */ r(t.Dialog, { "ws:label": "Sheet", children: [
+    /* @__PURE__ */ e(t.DialogTrigger, { "ws:label": "Sheet Trigger", children: /* @__PURE__ */ e(o.Button, { "ws:style": D("ghost", "icon"), children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Hamburger Menu Svg", code: s }) }) }),
     /* @__PURE__ */ e(
-      o.DialogOverlay,
+      t.DialogOverlay,
       {
         "ws:label": "Sheet Overlay",
         "ws:style": i`
@@ -27,7 +27,7 @@ const B = {
           overflow: auto;
         `,
         children: /* @__PURE__ */ r(
-          o.DialogContent,
+          t.DialogContent,
           {
             "ws:label": "Sheet Content",
             "ws:style": i`
@@ -47,9 +47,9 @@ const B = {
             flex-grow: 1;
           `,
             children: [
-              /* @__PURE__ */ r(t.Box, { "ws:label": "Navigation", tag: "nav", role: "navigation", children: [
+              /* @__PURE__ */ r(o.Box, { "ws:label": "Navigation", "ws:tag": "nav", children: [
                 /* @__PURE__ */ r(
-                  t.Box,
+                  o.Box,
                   {
                     "ws:label": "Sheet Header",
                     "ws:style": i`
@@ -59,7 +59,7 @@ const B = {
               `,
                     children: [
                       /* @__PURE__ */ e(
-                        o.DialogTitle,
+                        t.DialogTitle,
                         {
                           "ws:label": "Sheet Title",
                           "ws:style": i`
@@ -72,7 +72,7 @@ const B = {
                         }
                       ),
                       /* @__PURE__ */ e(
-                        o.DialogDescription,
+                        t.DialogDescription,
                         {
                           "ws:label": "Sheet Description",
                           "ws:style": i`
@@ -87,10 +87,10 @@ const B = {
                     ]
                   }
                 ),
-                /* @__PURE__ */ e(t.Text, { children: new n("The text you can edit") })
+                /* @__PURE__ */ e(o.Text, { children: new n("The text you can edit") })
               ] }),
               /* @__PURE__ */ e(
-                o.DialogClose,
+                t.DialogClose,
                 {
                   "ws:label": "Close Button",
                   "ws:style": i`
@@ -114,7 +114,7 @@ const B = {
                 box-shadow: ${c.ring};
               }
             `,
-                  children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Close Icon", code: b })
+                  children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Close Icon", code: b })
                 }
               )
             ]

package/lib/tabs.js

@@ -1,65 +1,66 @@
 import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as c, useCallback as m } from "react";
-import { Root as f, List as b, Trigger as p, Content as T } from "@radix-ui/react-tabs";
-import { getIndexWithinAncestorFromComponentProps as g, getClosestInstance as l } from "@webstudio-is/react-sdk/runtime";
-import { useControllableState as d } from "@radix-ui/react-use-controllable-state";
-import h from "await-interaction-response";
-const S = c(({ defaultValue: e, ...t }, o) => {
-  const [n, a] = d({
-    prop: t.value,
+import u from "await-interaction-response";
+import { forwardRef as c, useCallback as f } from "react";
+import { useControllableState as b } from "@radix-ui/react-use-controllable-state";
+import { Root as p, List as T, Trigger as d, Content as h } from "@radix-ui/react-tabs";
+import { getIndexWithinAncestorFromProps as g } from "@webstudio-is/sdk/runtime";
+import { getClosestInstance as l } from "@webstudio-is/react-sdk/runtime";
+const k = c(({ defaultValue: e, ...n }, o) => {
+  const [t, a] = b({
+    prop: n.value,
     defaultProp: e,
-    onChange: t.onValueChange
-  }), s = m(
-    async (u) => {
-      await h(), a(u);
+    onChange: n.onValueChange
+  }), s = f(
+    async (m) => {
+      await u(), a(m);
     },
     [a]
   );
   return /* @__PURE__ */ i(
-    f,
+    p,
     {
       ref: o,
-      ...t,
-      value: n,
+      ...n,
+      value: t,
       onValueChange: s
     }
   );
-}), k = b, w = c(({ value: e, ...t }, o) => {
-  const n = g(t);
-  return /* @__PURE__ */ i(p, { ref: o, value: e ?? n ?? "", ...t });
-}), y = c(({ value: e, ...t }, o) => {
-  const n = g(t);
-  return /* @__PURE__ */ i(T, { ref: o, value: e ?? n ?? "", ...t });
-}), r = "@webstudio-is/sdk-components-react-radix", A = {
-  onNavigatorSelect: (e, t) => {
+}), w = T, y = c(({ value: e, ...n }, o) => {
+  const t = g(n);
+  return /* @__PURE__ */ i(d, { ref: o, value: e ?? t ?? "", ...n });
+}), A = c(({ value: e, ...n }, o) => {
+  const t = g(n);
+  return /* @__PURE__ */ i(h, { ref: o, value: e ?? t ?? "", ...n });
+}), r = "@webstudio-is/sdk-components-react-radix", R = {
+  onNavigatorSelect: (e, n) => {
     var o;
-    for (const n of t.instancePath)
-      if (n.component === `${r}:TabsContent` || n.component === `${r}:TabsTrigger`) {
+    for (const t of n.instancePath)
+      if (t.component === `${r}:TabsContent` || t.component === `${r}:TabsTrigger`) {
         const a = l(
-          t.instancePath,
-          n,
+          n.instancePath,
+          t,
           `${r}:Tabs`
-        ), s = e.getPropValue(n, "value") ?? ((o = e.indexesWithinAncestors.get(n.id)) == null ? void 0 : o.toString());
+        ), s = e.getPropValue(t, "value") ?? ((o = e.indexesWithinAncestors.get(t.id)) == null ? void 0 : o.toString());
         a && s && e.setMemoryProp(a, "value", s);
       }
   },
-  onNavigatorUnselect: (e, t) => {
+  onNavigatorUnselect: (e, n) => {
     var o;
-    for (const n of t.instancePath)
-      if (n.component === `${r}:TabsContent` || n.component === `${r}:TabsTrigger`) {
+    for (const t of n.instancePath)
+      if (t.component === `${r}:TabsContent` || t.component === `${r}:TabsTrigger`) {
         const a = l(
-          t.instancePath,
-          n,
+          n.instancePath,
+          t,
           `${r}:Tabs`
-        ), s = e.getPropValue(n, "value") ?? ((o = e.indexesWithinAncestors.get(n.id)) == null ? void 0 : o.toString());
+        ), s = e.getPropValue(t, "value") ?? ((o = e.indexesWithinAncestors.get(t.id)) == null ? void 0 : o.toString());
         a && s && e.setMemoryProp(a, "value", void 0);
       }
   }
 };
 export {
-  S as Tabs,
-  y as TabsContent,
-  k as TabsList,
-  w as TabsTrigger,
-  A as hooksTabs
+  k as Tabs,
+  A as TabsContent,
+  w as TabsList,
+  y as TabsTrigger,
+  R as hooksTabs
 };

package/lib/types/shared/proxy.d.ts

@@ -3,6 +3,7 @@ export declare const radix: Record<string, {
 } & ((props: Record<string, unknown> & Record<`${string}:expression`, string> & {
     "ws:id"?: string;
     "ws:label"?: string;
+    "ws:tag"?: string;
     "ws:style"?: import("@webstudio-is/template").TemplateStyleDecl[];
     "ws:show"?: boolean | {
         chunks: string[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.210.0",
+  "version": "0.212.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -58,22 +58,22 @@
     "@radix-ui/react-tooltip": "^1.1.8",
     "@radix-ui/react-use-controllable-state": "^1.1.0",
     "await-interaction-response": "^0.0.2",
-    "@webstudio-is/css-engine": "0.210.0",
-    "@webstudio-is/icons": "0.210.0",
-    "@webstudio-is/sdk": "0.210.0",
-    "@webstudio-is/react-sdk": "0.210.0"
+    "@webstudio-is/css-engine": "0.212.0",
+    "@webstudio-is/react-sdk": "0.212.0",
+    "@webstudio-is/icons": "0.212.0",
+    "@webstudio-is/sdk": "0.212.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.70",
     "@types/react-dom": "^18.2.25",
     "react": "18.3.0-canary-14898b6a9-20240318",
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
+    "@webstudio-is/css-data": "0.0.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
+    "@webstudio-is/sdk-components-react": "0.212.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/css-data": "0.0.0",
-    "@webstudio-is/sdk-components-react": "0.210.0",
     "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/template": "0.210.0"
+    "@webstudio-is/template": "0.212.0"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",