@webstudio-is/sdk-components-react-radix 0.193.0 → 0.194.0

package/lib/select.ws.js

@@ -1,16 +1,16 @@
-import { SelectIcon as V, TriggerIcon as w, FormTextFieldIcon as T, ContentIcon as M, ViewportIcon as C, ItemIcon as k, CheckMarkIcon as d, TextIcon as F } from "@webstudio-is/icons/svg";
-import { button as q, span as s, div as P } from "@webstudio-is/sdk/normalize.css";
-import { flex as r, h as m, w as t, items as l, justify as y, rounded as a, border as o, bg as p, px as $, py as u, text as e, state as h, focus as S, outline as g, ring as E, disabled as W, cursor as f, opacity as I, relative as v, z as j, property as n, overflow as z, shadow as D, p as H, select as L, pl as U, pr as A, pointerEvents as B, absolute as G, left as J } from "./theme/tailwind-classes.js";
+import { SelectIcon as b, TriggerIcon as T, FormTextFieldIcon as q, ContentIcon as w, ViewportIcon as $, ItemIcon as C, CheckMarkIcon as d, TextIcon as M } from "@webstudio-is/icons/svg";
+import { button as k, span as i, div as F } from "@webstudio-is/sdk/normalize.css";
+import { flex as r, h as m, w as t, items as l, justify as y, rounded as a, border as n, bg as p, px as P, py as S, text as e, state as u, focus as g, outline as h, ring as E, disabled as W, cursor as I, opacity as f, relative as v, z as j, property as o, overflow as z, shadow as D, p as H, select as L, pl as U, pr as A, pointerEvents as B, absolute as G, left as J } from "./theme/tailwind-classes.js";
 import { propsSelect as K, propsSelectTrigger as N, propsSelectValue as O, propsSelectContent as Q, propsSelectViewport as R, propsSelectItem as X, propsSelectItemIndicator as Y, propsSelectItemText as Z } from "./__generated__/select.props.js";
-const i = {
-  div: P
+const s = {
+  div: F
 }, c = ({
-  props: b,
-  children: x
+  props: x,
+  children: V
 }) => ({
   type: "instance",
   component: "SelectItem",
-  props: b,
+  props: x,
   // relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none
   // focus:bg-accent focus:text-accent-foreground
   // data-[disabled]:pointer-events-none data-[disabled]:opacity-50
@@ -18,18 +18,18 @@ const i = {
     v(),
     r(),
     t("full"),
-    f("default"),
+    I("default"),
     L(),
     l("center"),
     a("md"),
-    u(1.5),
+    S(1.5),
     U(8),
     A(2),
     e("sm"),
-    g(),
-    S([p("accent"), e("accentForeground")].flat()),
-    h(
-      [B("none"), I(50)].flat(),
+    h(),
+    g([p("accent"), e("accentForeground")].flat()),
+    u(
+      [B("none"), f(50)].flat(),
       "[data-disabled]"
     )
   ].flat(),
@@ -66,14 +66,24 @@ const i = {
     {
       type: "instance",
       component: "SelectItemText",
-      children: x
+      children: V
     }
   ]
-}), ne = {
+}), oe = {
   category: "radix",
   order: 10,
   type: "container",
-  icon: V,
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "SelectTrigger" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "SelectContent" }
+    }
+  ],
+  icon: b,
   stylable: !1,
   description: "Use within a form to give your users a list of options to choose from.",
   template: [
@@ -112,17 +122,17 @@ const i = {
             l("center"),
             y("between"),
             a("md"),
-            o(),
-            o("input"),
+            n(),
+            n("input"),
             p("background"),
-            $(3),
-            u(2),
+            P(3),
+            S(2),
             e("sm"),
-            h([e("mutedForeground")].flat(), "::placeholder"),
-            S(
-              [g(), E("ring", 2, "background", 2)].flat()
+            u([e("mutedForeground")].flat(), "::placeholder"),
+            g(
+              [h(), E("ring", 2, "background", 2)].flat()
             ),
-            W([f("not-allowed"), I(50)].flat())
+            W([I("not-allowed"), f(50)].flat())
           ].flat(),
           children: [
             {
@@ -154,10 +164,10 @@ const i = {
           styles: [
             v(),
             j(50),
-            n("minWidth", "8rem"),
+            o("minWidth", "8rem"),
             z("hidden"),
             a("md"),
-            o(),
+            n(),
             p("popover"),
             e("popoverForeground"),
             D("md")
@@ -171,9 +181,9 @@ const i = {
               // h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]
               styles: [
                 H(1),
-                n("height", "--radix-select-trigger-height"),
+                o("height", "--radix-select-trigger-height"),
                 t("full"),
-                n("minWidth", "--radix-select-trigger-width")
+                o("minWidth", "--radix-select-trigger-width")
               ].flat(),
               children: [
                 c({
@@ -204,66 +214,104 @@ const i = {
 }, ce = {
   category: "hidden",
   type: "container",
-  icon: w,
-  detachable: !1,
+  icon: T,
   presetStyle: {
-    button: q
-  }
+    button: k
+  },
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "Select" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "SelectValue" }
+    }
+  ]
 }, re = {
   category: "hidden",
   type: "container",
   label: "Value",
-  icon: T,
-  detachable: !1,
+  icon: q,
   presetStyle: {
-    span: s
+    span: i
+  },
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "SelectTrigger" }
   }
 }, le = {
   category: "hidden",
   type: "container",
-  icon: M,
-  detachable: !1,
-  presetStyle: i
+  icon: w,
+  presetStyle: s,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "Select" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "SelectViewport" }
+    }
+  ]
 }, ae = {
   category: "hidden",
   type: "container",
-  icon: C,
-  detachable: !1,
-  presetStyle: i
+  icon: $,
+  presetStyle: s,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "SelectContent" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "SelectItem" }
+    }
+  ]
 }, pe = {
   category: "hidden",
   type: "container",
-  icon: k,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "SelectViewport" }
-  },
-  presetStyle: i
-}, se = {
+  icon: C,
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "SelectViewport" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "SelectItemIndicator" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "SelectItemText" }
+    }
+  ],
+  presetStyle: s
+}, ie = {
   category: "hidden",
   type: "container",
   label: "Indicator",
   icon: d,
-  detachable: !1,
   constraints: {
     relation: "ancestor",
     component: { $eq: "SelectItem" }
   },
   presetStyle: {
-    span: s
+    span: i
   }
-}, ie = {
+}, se = {
   category: "hidden",
   type: "container",
   label: "Item Text",
-  icon: F,
-  detachable: !1,
+  icon: M,
   constraints: {
     relation: "ancestor",
     component: { $eq: "SelectItem" }
   },
   presetStyle: {
-    span: s
+    span: i
   }
 }, de = {
   props: K,
@@ -273,33 +321,33 @@ const i = {
 }, ye = {
   props: O,
   initialProps: ["placeholder"]
-}, ue = {
+}, Se = {
   props: Q
-}, he = {
+}, ue = {
   props: R
-}, Se = {
+}, ge = {
   props: X,
   initialProps: ["value"]
-}, ge = {
+}, he = {
   props: Y
-}, fe = {
+}, Ie = {
   props: Z
 };
 export {
-  ne as metaSelect,
+  oe as metaSelect,
   le as metaSelectContent,
   pe as metaSelectItem,
-  se as metaSelectItemIndicator,
-  ie as metaSelectItemText,
+  ie as metaSelectItemIndicator,
+  se as metaSelectItemText,
   ce as metaSelectTrigger,
   re as metaSelectValue,
   ae as metaSelectViewport,
   de as propsMetaSelect,
-  ue as propsMetaSelectContent,
-  Se as propsMetaSelectItem,
-  ge as propsMetaSelectItemIndicator,
-  fe as propsMetaSelectItemText,
+  Se as propsMetaSelectContent,
+  ge as propsMetaSelectItem,
+  he as propsMetaSelectItemIndicator,
+  Ie as propsMetaSelectItemText,
   me as propsMetaSelectTrigger,
   ye as propsMetaSelectValue,
-  he as propsMetaSelectViewport
+  ue as propsMetaSelectViewport
 };

package/lib/switch.ws.js

@@ -1,13 +1,17 @@
 import { SwitchIcon as i, TriggerIcon as l } from "@webstudio-is/icons/svg";
 import { defaultStates as s } from "@webstudio-is/react-sdk";
 import { button as d, span as p } from "@webstudio-is/sdk/normalize.css";
-import { inlineFlex as h, property as e, shrink as m, cursor as c, items as u, rounded as o, border as n, transition as r, focusVisible as k, outline as f, ring as b, disabled as y, opacity as g, state as t, bg as a, pointerEvents as w, block as S, h as x, w as C, shadow as T } from "./theme/tailwind-classes.js";
+import { inlineFlex as h, property as e, shrink as m, cursor as c, items as u, rounded as o, border as n, transition as r, focusVisible as k, outline as f, ring as b, disabled as w, opacity as y, state as t, bg as a, pointerEvents as g, block as S, h as x, w as C, shadow as T } from "./theme/tailwind-classes.js";
 import { buttonReset as v } from "./theme/styles.js";
-import { propsSwitch as I, propsSwitchThumb as M } from "./__generated__/switch.props.js";
-const F = {
+import { propsSwitch as q, propsSwitchThumb as I } from "./__generated__/switch.props.js";
+const E = {
   category: "radix",
   order: 11,
   type: "container",
+  constraints: {
+    relation: "descendant",
+    component: { $eq: "SwitchThumb" }
+  },
   description: "A control that allows the user to toggle between checked and not checked.",
   icon: i,
   states: [
@@ -71,7 +75,7 @@ const F = {
         k(
           [f(), b("ring", 2, "background", 2)].flat()
         ),
-        y([c("not-allowed"), g(50)].flat()),
+        w([c("not-allowed"), y(50)].flat()),
         t([a("primary")].flat(), "[data-state=checked]"),
         t([a("input")].flat(), "[data-state=unchecked]")
       ].flat(),
@@ -83,7 +87,7 @@ const F = {
           // data-[state=checked]:translate-x-5
           // data-[state=unchecked]:translate-x-0
           styles: [
-            w("none"),
+            g("none"),
             S(),
             x(5),
             C(5),
@@ -105,10 +109,13 @@ const F = {
       ]
     }
   ]
-}, N = {
+}, F = {
   category: "hidden",
   type: "container",
-  detachable: !1,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Switch" }
+  },
   icon: l,
   states: [
     ...s,
@@ -126,15 +133,15 @@ const F = {
   presetStyle: {
     span: p
   }
-}, P = {
-  props: I,
+}, N = {
+  props: q,
   initialProps: ["id", "className", "name", "value", "checked", "required"]
-}, R = {
-  props: M
+}, P = {
+  props: I
 };
 export {
-  F as metaSwitch,
-  N as metaSwitchThumb,
-  P as propsMetaSwitch,
-  R as propsMetaSwitchThumb
+  E as metaSwitch,
+  F as metaSwitchThumb,
+  N as propsMetaSwitch,
+  P as propsMetaSwitchThumb
 };

package/lib/tabs.js

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

package/lib/tooltip.ws.js

@@ -1,27 +1,43 @@
-import { TriggerIcon as e, ContentIcon as o, TooltipIcon as n } from "@webstudio-is/icons/svg";
+import { TriggerIcon as o, ContentIcon as e, TooltipIcon as n } from "@webstudio-is/icons/svg";
 import "@webstudio-is/react-sdk";
 import { div as r } from "@webstudio-is/sdk/normalize.css";
-import { z as p, overflow as i, rounded as a, border as l, bg as s, px as c, py as d, text as t, shadow as m } from "./theme/tailwind-classes.js";
-import { propsTooltip as g, propsTooltipTrigger as h, propsTooltipContent as y } from "./__generated__/tooltip.props.js";
-import { getButtonStyles as T } from "./theme/styles.js";
+import { z as i, overflow as p, rounded as a, border as s, bg as l, px as c, py as d, text as t, shadow as m } from "./theme/tailwind-classes.js";
+import { propsTooltip as g, propsTooltipTrigger as T, propsTooltipContent as y } from "./__generated__/tooltip.props.js";
+import { getButtonStyles as h } from "./theme/styles.js";
 const f = {
   div: r
-}, B = {
+}, q = {
   category: "hidden",
-  detachable: !1,
   type: "container",
-  icon: e,
-  stylable: !1
-}, I = {
+  icon: o,
+  stylable: !1,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Tooltip" }
+  }
+}, $ = {
   category: "hidden",
-  detachable: !1,
   type: "container",
+  icon: e,
   presetStyle: f,
-  icon: o
-}, M = {
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Tooltip" }
+  }
+}, B = {
   category: "radix",
   order: 7,
   type: "container",
+  constraints: [
+    {
+      relation: "descendant",
+      component: { $eq: "TooltipTrigger" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "TooltipContent" }
+    }
+  ],
   icon: n,
   stylable: !1,
   description: "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
@@ -38,7 +54,7 @@ const f = {
             {
               type: "instance",
               component: "Button",
-              styles: T("outline"),
+              styles: h("outline"),
               children: [{ type: "text", value: "Button", placeholder: !0 }]
             }
           ]
@@ -50,11 +66,11 @@ const f = {
            *  z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md
            **/
           styles: [
-            p(50),
-            i("hidden"),
+            i(50),
+            p("hidden"),
             a("md"),
-            l(),
-            s("popover"),
+            s(),
+            l("popover"),
             c(3),
             d(1.5),
             t("sm"),
@@ -78,20 +94,20 @@ const f = {
       ]
     }
   ]
-}, D = {
+}, I = {
   props: g,
   initialProps: ["open", "delayDuration", "disableHoverableContent"]
-}, O = {
-  props: h
-}, P = {
+}, M = {
+  props: T
+}, D = {
   props: y,
   initialProps: ["side", "sideOffset", "align", "alignOffset"]
 };
 export {
-  M as metaTooltip,
-  I as metaTooltipContent,
-  B as metaTooltipTrigger,
-  D as propsMetaTooltip,
-  P as propsMetaTooltipContent,
-  O as propsMetaTooltipTrigger
+  B as metaTooltip,
+  $ as metaTooltipContent,
+  q as metaTooltipTrigger,
+  I as propsMetaTooltip,
+  D as propsMetaTooltipContent,
+  M as propsMetaTooltipTrigger
 };

package/lib/types/dialog.ws.d.ts

@@ -1,7 +1,7 @@
 import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/react-sdk";
 export declare const metaDialogTrigger: WsComponentMeta;
-export declare const metaDialogContent: WsComponentMeta;
 export declare const metaDialogOverlay: WsComponentMeta;
+export declare const metaDialogContent: WsComponentMeta;
 export declare const metaDialogTitle: WsComponentMeta;
 export declare const metaDialogDescription: WsComponentMeta;
 export declare const metaDialogClose: WsComponentMeta;

package/lib/types/tabs.d.ts

@@ -1,12 +1,13 @@
-import { type ForwardRefExoticComponent, type ComponentProps, type RefAttributes } from "react";
-import { Root } from "@radix-ui/react-tabs";
 import { type Hook } from "@webstudio-is/react-sdk/runtime";
-export declare const Tabs: ForwardRefExoticComponent<Omit<ComponentProps<typeof Root>, "asChild"> & RefAttributes<HTMLDivElement>>;
-export declare const TabsList: ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & RefAttributes<HTMLDivElement>>;
-export declare const TabsTrigger: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & RefAttributes<HTMLButtonElement>, "ref">, "value"> & {
+export declare const Tabs: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "value" | "onValueChange"> & {
     value?: string;
-} & RefAttributes<HTMLButtonElement>>;
-export declare const TabsContent: ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & RefAttributes<HTMLDivElement>, "ref">, "value"> & {
+    onValueChange?: (value: string) => void;
+} & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsList: import("react").ForwardRefExoticComponent<import("@radix-ui/react-tabs").TabsListProps & import("react").RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsTriggerProps & import("react").RefAttributes<HTMLButtonElement>, "ref">, "value"> & {
     value?: string;
-} & RefAttributes<HTMLDivElement>>;
+} & import("react").RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-tabs").TabsContentProps & import("react").RefAttributes<HTMLDivElement>, "ref">, "value"> & {
+    value?: string;
+} & import("react").RefAttributes<HTMLDivElement>>;
 export declare const hooksTabs: Hook;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.193.0",
+  "version": "0.194.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -51,10 +51,12 @@
     "@radix-ui/react-switch": "^1.1.1",
     "@radix-ui/react-tabs": "^1.1.1",
     "@radix-ui/react-tooltip": "^1.1.4",
-    "@webstudio-is/css-engine": "0.193.0",
-    "@webstudio-is/icons": "0.193.0",
-    "@webstudio-is/sdk": "0.193.0",
-    "@webstudio-is/react-sdk": "0.193.0"
+    "@radix-ui/react-use-controllable-state": "^1.1.0",
+    "await-interaction-response": "^0.0.2",
+    "@webstudio-is/css-engine": "0.194.0",
+    "@webstudio-is/react-sdk": "0.194.0",
+    "@webstudio-is/icons": "0.194.0",
+    "@webstudio-is/sdk": "0.194.0"
   },
   "devDependencies": {
     "@types/node": "^22.9.3",
@@ -64,9 +66,9 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "tailwindcss": "^3.3.3",
     "@webstudio-is/css-data": "0.0.0",
+    "@webstudio-is/sdk-components-react": "0.194.0",
     "@webstudio-is/generate-arg-types": "0.0.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/sdk-components-react": "0.193.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {