@webstudio-is/sdk-components-react-radix 0.260.2 → 0.261.1

package/lib/accordion.template.js

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { $ as o, PlaceholderValue as s, css as t } from "@webstudio-is/template";
+import { $ as o, PlaceholderValue as a, css as t } from "@webstudio-is/template";
 import { radix as i } from "./shared/proxy.js";
-import { height as h, width as m, transition as a, spacing as c, weights as g, fontSize as f, fontSizeLineHeight as p, borderWidth as w, colors as y } from "./shared/theme.js";
+import { height as h, width as m, transition as s, spacing as c, weights as g, fontSize as f, fontSizeLineHeight as p, borderWidth as w, colors as y } from "./shared/theme.js";
 import { ChevronDownIcon as b } from "@webstudio-is/icons/svg";
 const n = (d, l) => /* @__PURE__ */ r(
   i.AccordionItem,
@@ -35,7 +35,7 @@ const n = (d, l) => /* @__PURE__ */ r(
             }
           `,
               children: [
-                /* @__PURE__ */ e(o.Text, { children: new s(d) }),
+                /* @__PURE__ */ e(o.Text, { children: new a(d) }),
                 /* @__PURE__ */ e(
                   o.Box,
                   {
@@ -45,7 +45,7 @@ const n = (d, l) => /* @__PURE__ */ r(
               height: ${h[4]};
               width: ${m[4]};
               flex-shrink: 0;
-              transition: ${a.all};
+              transition: ${s.all};
               transition-duration: 200ms;
             `,
                     children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Chevron Icon", code: b })
@@ -63,10 +63,16 @@ const n = (d, l) => /* @__PURE__ */ r(
           overflow: hidden;
           font-size: ${f.sm};
           line-height: ${p.sm};
-          transition: ${a.all};
+          transition: ${s.all};
           padding-bottom: ${c[4]};
+          &[data-state="closed"] {
+            height: 0;
+          }
+          &[data-state="open"] {
+            height: var(--radix-accordion-content-height);
+          }
         `,
-          children: new s(l)
+          children: new a(l)
         }
       )
     ]

package/lib/accordion.ws.js

@@ -1,19 +1,19 @@
-import { AccordionIcon as t, ItemIcon as n, HeaderIcon as r, TriggerIcon as c, ContentIcon as i } from "@webstudio-is/icons/svg";
-import { div as o, h3 as a, button as p } from "@webstudio-is/sdk/normalize.css";
+import { AccordionIcon as o, ItemIcon as n, HeaderIcon as c, TriggerIcon as r, ContentIcon as a } from "@webstudio-is/icons/svg";
+import { div as t, h3 as s, button as l } from "@webstudio-is/sdk/normalize.css";
 import { radix as e } from "./shared/meta.js";
-import { buttonReset as d } from "./shared/preset-styles.js";
-import { propsAccordion as s, propsAccordionItem as l, propsAccordionHeader as m, propsAccordionTrigger as g, propsAccordionContent as A } from "./__generated__/accordion.props.js";
-const v = {
-  icon: t,
+import { buttonReset as i } from "./shared/preset-styles.js";
+import { propsAccordion as d, propsAccordionItem as p, propsAccordionHeader as m, propsAccordionTrigger as b, propsAccordionContent as g } from "./__generated__/accordion.props.js";
+const C = {
+  icon: o,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [e.AccordionItem]
   },
-  presetStyle: { div: o },
+  presetStyle: { div: t },
   initialProps: ["value", "collapsible"],
-  props: s
-}, x = {
+  props: d
+}, v = {
   label: "Item",
   icon: n,
   indexWithinAncestor: e.Accordion,
@@ -22,20 +22,28 @@ const v = {
     children: ["instance"],
     descendants: [e.AccordionHeader, e.AccordionContent]
   },
-  presetStyle: { div: o },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: { div: t },
   initialProps: ["value"],
-  props: l
-}, f = {
+  props: p
+}, x = {
   label: "Item Header",
-  icon: r,
+  icon: c,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [e.AccordionTrigger]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
     h3: [
-      ...a,
+      ...s,
       {
         property: "margin-top",
         value: { type: "unit", unit: "px", value: 0 }
@@ -47,34 +55,41 @@ const v = {
     ]
   },
   props: m
-}, C = {
+}, f = {
   label: "Item Trigger",
-  icon: c,
+  icon: r,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: [{ label: "Open", selector: "[data-state=open]" }],
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
-    button: [p, d].flat()
+    button: [l, i].flat()
   },
-  props: g
+  props: b
 }, H = {
   label: "Item Content",
-  icon: i,
+  icon: a,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
-    div: o
+    div: t
   },
-  props: A
+  props: g
 };
 export {
-  v as metaAccordion,
+  C as metaAccordion,
   H as metaAccordionContent,
-  f as metaAccordionHeader,
-  x as metaAccordionItem,
-  C as metaAccordionTrigger
+  x as metaAccordionHeader,
+  v as metaAccordionItem,
+  f as metaAccordionTrigger
 };

package/lib/checkbox.ws.js

@@ -1,32 +1,38 @@
 import { CheckboxCheckedIcon as e, TriggerIcon as t } from "@webstudio-is/icons/svg";
-import { button as o, span as c } from "@webstudio-is/sdk/normalize.css";
-import { radix as n } from "./shared/meta.js";
-import { buttonReset as r } from "./shared/preset-styles.js";
-import { propsCheckbox as a, propsCheckboxIndicator as s } from "./__generated__/checkbox.props.js";
+import { button as c, span as a } from "@webstudio-is/sdk/normalize.css";
+import { radix as o } from "./shared/meta.js";
+import { buttonReset as n } from "./shared/preset-styles.js";
+import { propsCheckbox as r, propsCheckboxIndicator as s } from "./__generated__/checkbox.props.js";
 const m = {
   icon: e,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.CheckboxIndicator]
+    descendants: [o.CheckboxIndicator]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' },
+    { label: "Indeterminate", selector: '[data-state="indeterminate"]' }
   ],
   presetStyle: {
-    button: [o, r].flat()
+    button: [c, n].flat()
   },
   initialProps: ["id", "class", "name", "value", "required", "checked"],
-  props: a
+  props: r
 }, k = {
   icon: t,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' },
+    { label: "Indeterminate", selector: '[data-state="indeterminate"]' }
+  ],
   presetStyle: {
-    span: c
+    span: a
   },
   props: s
 };

package/lib/collapsible.ws.js

@@ -1,39 +1,51 @@
-import { CollapsibleIcon as n, TriggerIcon as t, ContentIcon as l } from "@webstudio-is/icons/svg";
-import { div as o } from "@webstudio-is/sdk/normalize.css";
+import { CollapsibleIcon as o, TriggerIcon as l, ContentIcon as s } from "@webstudio-is/icons/svg";
+import { div as t } from "@webstudio-is/sdk/normalize.css";
 import { radix as e } from "./shared/meta.js";
-import { propsCollapsible as r, propsCollapsibleTrigger as i, propsCollapsibleContent as p } from "./__generated__/collapsible.props.js";
-const g = {
-  icon: n,
+import { propsCollapsible as a, propsCollapsibleTrigger as n, propsCollapsibleContent as r } from "./__generated__/collapsible.props.js";
+const C = {
+  icon: o,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [e.CollapsibleTrigger, e.CollapsibleContent]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
-    div: o
+    div: t
   },
   initialProps: ["open"],
-  props: r
-}, m = {
-  icon: t,
+  props: a
+}, b = {
+  icon: l,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  props: i
-}, d = {
-  icon: l,
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  props: n
+}, g = {
+  icon: s,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
-    div: o
+    div: t
   },
-  props: p
+  props: r
 };
 export {
-  g as metaCollapsible,
-  d as metaCollapsibleContent,
-  m as metaCollapsibleTrigger
+  C as metaCollapsible,
+  g as metaCollapsibleContent,
+  b as metaCollapsibleTrigger
 };

package/lib/dialog.ws.js

@@ -1,39 +1,51 @@
-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 = {
+import { DialogIcon as t, TriggerIcon as n, OverlayIcon as a, ContentIcon as l, ButtonElementIcon as s, HeadingIcon as i, TextIcon as r } from "@webstudio-is/icons/svg";
+import { div as o, button as c, h2 as p, p as g } from "@webstudio-is/sdk/normalize.css";
+import { radix as e } 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 b } from "./__generated__/dialog.props.js";
+import { buttonReset as T } from "./shared/preset-styles.js";
+const u = {
   icon: n,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  props: d
-}, b = {
-  icon: i,
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  props: D
+}, v = {
+  icon: a,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [o.DialogContent]
+    descendants: [e.DialogContent]
   },
-  presetStyle: { div: e },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: { div: o },
   props: m
-}, O = {
-  icon: r,
+}, S = {
+  icon: l,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [
-      o.DialogTitle,
-      o.DialogDescription,
-      o.DialogClose
+      e.DialogTitle,
+      e.DialogDescription,
+      e.DialogClose
     ]
   },
-  presetStyle: { div: e },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  presetStyle: { div: o },
   props: y
 }, B = {
-  icon: l,
+  icon: i,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
@@ -41,22 +53,22 @@ const S = {
   presetStyle: { h2: p },
   props: C
 }, E = {
-  icon: a,
+  icon: r,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
   presetStyle: { p: g },
-  props: T
+  props: b
 }, H = {
-  icon: c,
+  icon: s,
   label: "Close Button",
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
   presetStyle: {
-    button: [I, s].flat()
+    button: [T, c].flat()
   },
   props: h
 }, P = {
@@ -64,17 +76,17 @@ const S = {
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [o.DialogTrigger, o.DialogOverlay]
+    descendants: [e.DialogTrigger, e.DialogOverlay]
   },
   initialProps: ["open"],
-  props: D
+  props: d
 };
 export {
   P as metaDialog,
   H as metaDialogClose,
-  O as metaDialogContent,
+  S as metaDialogContent,
   E as metaDialogDescription,
-  b as metaDialogOverlay,
+  v as metaDialogOverlay,
   B as metaDialogTitle,
-  S as metaDialogTrigger
+  u as metaDialogTrigger
 };

package/lib/navigation-menu.ws.js

@@ -1,93 +1,105 @@
-import { NavigationMenuIcon as t, ListIcon as o, ListItemIcon as i, TriggerIcon as a, ContentIcon as r, BoxIcon as c, ViewportIcon as s } 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 l, propsNavigationMenuContent as u, propsNavigationMenuLink as d, propsNavigationMenuViewport as v } from "./__generated__/navigation-menu.props.js";
-const L = {
+import { NavigationMenuIcon as t, ListIcon as o, ListItemIcon as a, TriggerIcon as i, ContentIcon as s, BoxIcon as r, ViewportIcon as c } from "@webstudio-is/icons/svg";
+import { div as n } from "@webstudio-is/sdk/normalize.css";
+import { radix as e } from "./shared/meta.js";
+import { propsNavigationMenu as l, propsNavigationMenuList as p, propsNavigationMenuItem as g, propsNavigationMenuTrigger as d, propsNavigationMenuContent as M, propsNavigationMenuLink as u, propsNavigationMenuViewport as v } from "./__generated__/navigation-menu.props.js";
+const I = {
   icon: t,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [n.NavigationMenuList, n.NavigationMenuViewport]
+    descendants: [e.NavigationMenuList, e.NavigationMenuViewport]
   },
   presetStyle: {
-    div: e
+    div: n
   },
-  props: p
-}, h = {
+  props: l
+}, L = {
   icon: o,
   label: "Menu List",
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.NavigationMenuItem]
+    descendants: [e.NavigationMenuItem]
   },
   presetStyle: {
-    div: e
+    div: n
   },
-  props: g
-}, b = {
-  icon: i,
+  props: p
+}, h = {
+  icon: a,
   label: "Menu Item",
-  indexWithinAncestor: n.NavigationMenu,
+  indexWithinAncestor: e.NavigationMenu,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [
-      n.NavigationMenuTrigger,
-      n.NavigationMenuContent,
-      n.NavigationMenuLink
+      e.NavigationMenuTrigger,
+      e.NavigationMenuContent,
+      e.NavigationMenuLink
     ]
   },
   presetStyle: {
-    div: e
+    div: n
   },
-  props: M
-}, k = {
-  icon: a,
+  props: g
+}, C = {
+  icon: i,
   label: "Menu Trigger",
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  props: l
-}, w = {
-  icon: r,
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
+  props: d
+}, k = {
+  icon: s,
   label: "Menu Content",
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [n.NavigationMenuLink]
+    descendants: [e.NavigationMenuLink]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
-    div: e
+    div: n
   },
-  props: u
-}, C = {
-  icon: c,
+  props: M
+}, w = {
+  icon: r,
   label: "Accessible Link Wrapper",
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  props: d
+  props: u
 }, S = {
-  icon: s,
+  icon: c,
   label: "Menu Viewport",
   contentModel: {
     category: "none",
     children: ["instance"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
-    div: e
+    div: n
   },
   props: v
 };
 export {
-  L as metaNavigationMenu,
-  w as metaNavigationMenuContent,
-  b as metaNavigationMenuItem,
-  C as metaNavigationMenuLink,
-  h as metaNavigationMenuList,
-  k as metaNavigationMenuTrigger,
+  I as metaNavigationMenu,
+  k as metaNavigationMenuContent,
+  h as metaNavigationMenuItem,
+  w as metaNavigationMenuLink,
+  L as metaNavigationMenuList,
+  C as metaNavigationMenuTrigger,
   S as metaNavigationMenuViewport
 };

package/lib/popover.ws.js

@@ -1,7 +1,7 @@
-import { PopoverIcon as e, TriggerIcon as t, ContentIcon as n, ButtonElementIcon as r } from "@webstudio-is/icons/svg";
-import { div as p, button as i } from "@webstudio-is/sdk/normalize.css";
-import { radix as o } from "./shared/meta.js";
-import { propsPopover as s, propsPopoverTrigger as c, propsPopoverContent as a, propsPopoverClose as l } from "./__generated__/popover.props.js";
+import { PopoverIcon as o, TriggerIcon as t, ContentIcon as n, ButtonElementIcon as r } from "@webstudio-is/icons/svg";
+import { div as s, button as p } from "@webstudio-is/sdk/normalize.css";
+import { radix as e } from "./shared/meta.js";
+import { propsPopover as a, propsPopoverTrigger as c, propsPopoverContent as l, propsPopoverClose as i } from "./__generated__/popover.props.js";
 import { buttonReset as d } from "./shared/preset-styles.js";
 const C = {
   icon: t,
@@ -9,29 +9,37 @@ const C = {
     category: "none",
     children: ["instance"]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   props: c
-}, y = {
+}, b = {
   icon: n,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [o.PopoverClose]
+    descendants: [e.PopoverClose]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: {
-    div: p
+    div: s
   },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
-  props: a
-}, h = {
-  icon: e,
+  props: l
+}, y = {
+  icon: o,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [o.PopoverTrigger, o.PopoverContent]
+    descendants: [e.PopoverTrigger, e.PopoverContent]
   },
   initialProps: ["open"],
-  props: s
-}, u = {
+  props: a
+}, h = {
   icon: r,
   label: "Close Button",
   contentModel: {
@@ -39,13 +47,13 @@ const C = {
     children: ["instance", "rich-text"]
   },
   presetStyle: {
-    button: [d, i].flat()
+    button: [d, p].flat()
   },
-  props: l
+  props: i
 };
 export {
-  h as metaPopover,
-  u as metaPopoverClose,
-  y as metaPopoverContent,
+  y as metaPopover,
+  h as metaPopoverClose,
+  b as metaPopoverContent,
   C as metaPopoverTrigger
 };

package/lib/radio-group.ws.js

@@ -23,8 +23,8 @@ const R = {
     descendants: [e.RadioGroupIndicator]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
   ],
   presetStyle: {
     button: [n, d].flat()
@@ -38,8 +38,8 @@ const R = {
     children: ["instance"]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
   ],
   presetStyle: {
     span: c

package/lib/select.ws.js

@@ -1,8 +1,8 @@
-import { SelectIcon as o, TriggerIcon as c, FormTextFieldIcon as r, ViewportIcon as l, ContentIcon as i, ItemIcon as p, CheckMarkIcon as s, TextIcon as a } from "@webstudio-is/icons/svg";
+import { SelectIcon as o, TriggerIcon as c, FormTextFieldIcon as l, ViewportIcon as r, ContentIcon as a, ItemIcon as s, CheckMarkIcon as p, TextIcon as i } from "@webstudio-is/icons/svg";
 import { button as d, span as t, div as n } from "@webstudio-is/sdk/normalize.css";
 import { radix as e } from "./shared/meta.js";
-import { propsSelect as S, propsSelectTrigger as m, propsSelectValue as I, propsSelectViewport as g, propsSelectContent as y, propsSelectItem as h, propsSelectItemIndicator as T, propsSelectItemText as x } from "./__generated__/select.props.js";
-const b = {
+import { propsSelect as S, propsSelectTrigger as m, propsSelectValue as I, propsSelectViewport as g, propsSelectContent as h, propsSelectItem as y, propsSelectItemIndicator as b, propsSelectItemText as T } from "./__generated__/select.props.js";
+const V = {
   icon: o,
   contentModel: {
     category: "instance",
@@ -11,18 +11,22 @@ const b = {
   },
   initialProps: ["name", "value", "open", "required"],
   props: S
-}, f = {
+}, k = {
   icon: c,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [e.SelectValue]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: { button: d },
   props: m
-}, w = {
+}, f = {
   label: "Value",
-  icon: r,
+  icon: l,
   contentModel: {
     category: "none",
     children: []
@@ -30,17 +34,21 @@ const b = {
   presetStyle: { span: t },
   initialProps: ["placeholder"],
   props: I
-}, v = {
-  icon: i,
+}, w = {
+  icon: a,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [e.SelectViewport]
   },
+  states: [
+    { label: "Open", selector: '[data-state="open"]' },
+    { label: "Closed", selector: '[data-state="closed"]' }
+  ],
   presetStyle: { div: n },
-  props: y
-}, P = {
-  icon: l,
+  props: h
+}, v = {
+  icon: r,
   contentModel: {
     category: "none",
     children: ["instance"],
@@ -48,42 +56,46 @@ const b = {
   },
   presetStyle: { div: n },
   props: g
-}, k = {
-  icon: p,
+}, P = {
+  icon: s,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [e.SelectItemIndicator, e.SelectItemText]
   },
+  states: [
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
+  ],
   presetStyle: { div: n },
   initialProps: ["value"],
-  props: h
+  props: y
 }, F = {
   label: "Indicator",
-  icon: s,
+  icon: p,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
   presetStyle: { span: t },
-  props: T
-}, q = {
+  props: b
+}, O = {
   label: "Item Text",
-  icon: a,
+  icon: i,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
   presetStyle: { span: t },
-  props: x
+  props: T
 };
 export {
-  b as metaSelect,
-  v as metaSelectContent,
-  k as metaSelectItem,
+  V as metaSelect,
+  w as metaSelectContent,
+  P as metaSelectItem,
   F as metaSelectItemIndicator,
-  q as metaSelectItemText,
-  f as metaSelectTrigger,
-  w as metaSelectValue,
-  P as metaSelectViewport
+  O as metaSelectItemText,
+  k as metaSelectTrigger,
+  f as metaSelectValue,
+  v as metaSelectViewport
 };

package/lib/switch.ws.js

@@ -11,8 +11,8 @@ const m = {
     descendants: [a.SwitchThumb]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
   ],
   presetStyle: {
     button: [c, n].flat()
@@ -26,8 +26,8 @@ const m = {
     children: ["instance"]
   },
   states: [
-    { label: "Checked", selector: "[data-state=checked]" },
-    { label: "Unchecked", selector: "[data-state=unchecked]" }
+    { label: "Checked", selector: '[data-state="checked"]' },
+    { label: "Unchecked", selector: '[data-state="unchecked"]' }
   ],
   presetStyle: {
     span: o

package/lib/tabs.ws.js

@@ -1,9 +1,9 @@
-import { TabsIcon as n, HeaderIcon as o, TriggerIcon as s, ContentIcon as r } from "@webstudio-is/icons/svg";
-import { div as e, button as a } from "@webstudio-is/sdk/normalize.css";
+import { TabsIcon as n, HeaderIcon as a, TriggerIcon as o, ContentIcon as s } from "@webstudio-is/icons/svg";
+import { div as e, button as r } from "@webstudio-is/sdk/normalize.css";
 import { radix as t } from "./shared/meta.js";
 import { buttonReset as c } from "./shared/preset-styles.js";
-import { propsTabs as i, propsTabsList as p, propsTabsTrigger as b, propsTabsContent as T } from "./__generated__/tabs.props.js";
-const y = {
+import { propsTabs as i, propsTabsList as l, propsTabsTrigger as p, propsTabsContent as b } from "./__generated__/tabs.props.js";
+const h = {
   icon: n,
   contentModel: {
     category: "instance",
@@ -12,42 +12,49 @@ const y = {
   },
   presetStyle: { div: e },
   props: i
-}, f = {
-  icon: o,
+}, y = {
+  icon: a,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [t.TabsTrigger]
   },
   presetStyle: { div: e },
-  props: p
-}, x = {
-  icon: s,
+  props: l
+}, f = {
+  icon: o,
   label: "Tab Trigger",
   indexWithinAncestor: t.Tabs,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: [{ label: "Active", selector: "[data-state=active]" }],
+  states: [
+    { label: "Active", selector: '[data-state="active"]' },
+    { label: "Inactive", selector: '[data-state="inactive"]' }
+  ],
   presetStyle: {
-    button: [a, c].flat()
+    button: [r, c].flat()
   },
-  props: b
-}, C = {
+  props: p
+}, x = {
   label: "Tab Content",
-  icon: r,
+  icon: s,
   indexWithinAncestor: t.Tabs,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
+  states: [
+    { label: "Active", selector: '[data-state="active"]' },
+    { label: "Inactive", selector: '[data-state="inactive"]' }
+  ],
   presetStyle: { div: e },
-  props: T
+  props: b
 };
 export {
-  y as metaTabs,
-  C as metaTabsContent,
-  f as metaTabsList,
-  x as metaTabsTrigger
+  h as metaTabs,
+  x as metaTabsContent,
+  y as metaTabsList,
+  f as metaTabsTrigger
 };

package/lib/tooltip.ws.js

@@ -1,32 +1,42 @@
-import { TooltipIcon as t, TriggerIcon as n, ContentIcon as e } from "@webstudio-is/icons/svg";
-import { div as i } from "@webstudio-is/sdk/normalize.css";
-import { radix as o } from "./shared/meta.js";
-import { propsTooltip as r, propsTooltipTrigger as p, propsTooltipContent as c } from "./__generated__/tooltip.props.js";
+import { TooltipIcon as t, TriggerIcon as o, ContentIcon as n } from "@webstudio-is/icons/svg";
+import { div as a } from "@webstudio-is/sdk/normalize.css";
+import { radix as e } from "./shared/meta.js";
+import { propsTooltip as l, propsTooltipTrigger as s, propsTooltipContent as i } from "./__generated__/tooltip.props.js";
 const g = {
-  icon: n,
+  icon: o,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  props: p
+  states: [
+    { label: "Closed", selector: '[data-state="closed"]' },
+    { label: "Delayed open", selector: '[data-state="delayed-open"]' },
+    { label: "Instant open", selector: '[data-state="instant-open"]' }
+  ],
+  props: s
 }, T = {
-  icon: e,
+  icon: n,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: { div: i },
+  states: [
+    { label: "Closed", selector: '[data-state="closed"]' },
+    { label: "Delayed open", selector: '[data-state="delayed-open"]' },
+    { label: "Instant open", selector: '[data-state="instant-open"]' }
+  ],
+  presetStyle: { div: a },
   initialProps: ["side", "sideOffset", "align", "alignOffset"],
-  props: c
+  props: i
 }, m = {
   icon: t,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [o.TooltipTrigger, o.TooltipContent]
+    descendants: [e.TooltipTrigger, e.TooltipContent]
   },
   initialProps: ["open", "delayDuration", "disableHoverableContent"],
-  props: r
+  props: l
 };
 export {
   m as metaTooltip,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.260.2",
+  "version": "0.261.1",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -52,22 +52,22 @@
     "@radix-ui/react-tabs": "^1.1.9",
     "@radix-ui/react-tooltip": "^1.2.4",
     "await-interaction-response": "^0.0.2",
-    "@webstudio-is/css-engine": "0.260.2",
-    "@webstudio-is/icons": "0.260.2",
-    "@webstudio-is/sdk": "0.260.2",
-    "@webstudio-is/react-sdk": "0.260.2"
+    "@webstudio-is/css-engine": "0.261.1",
+    "@webstudio-is/icons": "0.261.1",
+    "@webstudio-is/react-sdk": "0.261.1",
+    "@webstudio-is/sdk": "0.261.1"
   },
   "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/css-data": "0.0.0",
     "@webstudio-is/sdk-cli": "^0.94.0",
-    "@webstudio-is/template": "0.260.2",
     "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk-components-react": "0.260.2"
+    "@webstudio-is/sdk-components-react": "0.261.1",
+    "@webstudio-is/template": "0.261.1"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",