@webstudio-is/sdk-components-react-radix 0.191.5 → 0.192.0

package/lib/accordion.ws.js

@@ -1,13 +1,13 @@
-import { AccordionIcon as a, ItemIcon as s, HeaderIcon as l, TriggerIcon as d, ContentIcon as p, ChevronDownIcon as m } from "@webstudio-is/icons/svg";
+import { AccordionIcon as i, ItemIcon as s, HeaderIcon as l, TriggerIcon as p, ContentIcon as d, ChevronDownIcon as m } from "@webstudio-is/icons/svg";
 import { defaultStates as y } from "@webstudio-is/react-sdk";
-import { h3 as h, button as A, div as u } from "@webstudio-is/sdk/normalize.css";
-import { borderB as g, overflow as f, text as I, pb as b, my as v, flex as e, items as x, justify as C, py as H, font as q, hover as T, underline as w, property as t, state as S, h as M, w as $, shrink as k, transition as Y, duration as B } from "./theme/tailwind-classes.js";
+import { h3 as h, button as A, div as g } from "@webstudio-is/sdk/normalize.css";
+import { borderB as u, overflow as f, text as I, pb as b, my as v, flex as e, items as x, justify as C, py as H, font as T, hover as w, underline as S, property as t, state as M, h as q, w as $, shrink as k, transition as Y, duration as B } from "./theme/tailwind-classes.js";
 import { buttonReset as P } from "./theme/styles.js";
 import { propsAccordion as R, propsAccordionItem as W, propsAccordionHeader as j, propsAccordionTrigger as D, propsAccordionContent as E } from "./__generated__/accordion.props.js";
 const r = {
-  div: u
-}, o = [g()].flat(), n = ({
-  children: i
+  div: g
+}, o = [u()].flat(), n = ({
+  children: a
 }) => ({
   type: "instance",
   component: "AccordionHeader",
@@ -24,10 +24,10 @@ const r = {
         x("center"),
         C("between"),
         H(4),
-        q("medium"),
-        T([w()].flat()),
+        T("medium"),
+        w([S()].flat()),
         t("--accordion-trigger-icon-transform", "0deg"),
-        S(
+        M(
           [t("--accordion-trigger-icon-transform", "180deg")],
           "[data-state=open]"
         )
@@ -36,7 +36,7 @@ const r = {
         {
           type: "instance",
           component: "Text",
-          children: i
+          children: a
         },
         {
           type: "instance",
@@ -45,7 +45,7 @@ const r = {
           // h-4 w-4 shrink-0 transition-transform duration-200
           styles: [
             t("rotate", "--accordion-trigger-icon-transform"),
-            M(4),
+            q(4),
             $(4),
             k(0),
             Y("all"),
@@ -80,7 +80,7 @@ const r = {
   category: "radix",
   order: 3,
   type: "container",
-  icon: a,
+  icon: i,
   presetStyle: r,
   description: "A vertically stacked set of interactive headings that each reveal an associated section of content. Clicking on the heading will open the item and close other items.",
   template: [
@@ -172,7 +172,6 @@ const r = {
   type: "container",
   label: "Item",
   icon: s,
-  requiredAncestors: ["Accordion"],
   constraints: {
     relation: "ancestor",
     component: { $eq: "Accordion" }
@@ -184,7 +183,6 @@ const r = {
   type: "container",
   label: "Item Header",
   icon: l,
-  requiredAncestors: ["AccordionItem"],
   constraints: {
     relation: "ancestor",
     component: { $eq: "AccordionItem" }
@@ -197,8 +195,7 @@ const r = {
   category: "hidden",
   type: "container",
   label: "Item Trigger",
-  icon: d,
-  requiredAncestors: ["AccordionHeader"],
+  icon: p,
   constraints: {
     relation: "ancestor",
     component: { $eq: "AccordionHeader" }
@@ -219,8 +216,7 @@ const r = {
   category: "hidden",
   type: "container",
   label: "Item Content",
-  icon: p,
-  requiredAncestors: ["AccordionItem"],
+  icon: d,
   constraints: {
     relation: "ancestor",
     component: { $eq: "AccordionItem" }

package/lib/navigation-menu.ws.js

@@ -1,10 +1,10 @@
-import { NavigationMenuIcon as x, ListIcon as w, ListItemIcon as I, TriggerIcon as A, ContentIcon as k, BoxIcon as L, ViewportIcon as C, ChevronDownIcon as q } from "@webstudio-is/icons/svg";
-import { div as T } from "@webstudio-is/sdk/normalize.css";
-import { relative as m, maxW as B, p as a, m as h, flex as n, list as $, items as V, justify as u, gap as s, bg as r, w as c, rounded as d, absolute as v, left as y, top as f, mt as D, overflow as F, border as S, text as t, shadow as W, property as i, noUnderline as M, state as E, ml as P, h as j, shrink as H, transition as U, duration as _, select as z, leading as l, outline as G, hover as J, focus as K, font as O, lineClamp as Q } from "./theme/tailwind-classes.js";
+import { NavigationMenuIcon as x, ListIcon as w, ListItemIcon as I, TriggerIcon as k, ContentIcon as L, BoxIcon as C, ViewportIcon as A, ChevronDownIcon as T } from "@webstudio-is/icons/svg";
+import { div as B } from "@webstudio-is/sdk/normalize.css";
+import { relative as m, maxW as $, p as a, m as h, flex as n, list as V, items as q, justify as g, gap as s, bg as r, w as c, rounded as d, absolute as v, left as y, top as f, mt as D, overflow as F, border as S, text as t, shadow as W, property as i, noUnderline as M, state as E, ml as P, h as j, shrink as H, transition as U, duration as _, select as z, leading as l, outline as G, hover as J, focus as K, font as O, lineClamp as Q } from "./theme/tailwind-classes.js";
 import { getButtonStyles as N } from "./theme/styles.js";
 import { propsNavigationMenu as R, propsNavigationMenuItem as X, propsNavigationMenuTrigger as Y, propsNavigationMenuContent as Z, propsNavigationMenuLink as ee, propsNavigationMenuList as te, propsNavigationMenuViewport as ne } from "./__generated__/navigation-menu.props.js";
 const o = {
-  div: T
+  div: B
 }, oe = [
   {
     title: "Sheet",
@@ -159,7 +159,7 @@ const o = {
       }
     ]
   }
-], g = (e) => [
+], u = (e) => [
   {
     type: "instance",
     component: "NavigationMenuItem",
@@ -218,7 +218,7 @@ const o = {
                       {
                         type: "string",
                         name: "code",
-                        value: q
+                        value: T
                       }
                     ],
                     children: []
@@ -266,7 +266,7 @@ const o = {
       props: [],
       // relative
       // Omiting this: z-10 flex max-w-max flex-1 items-center justify-center
-      styles: [m(), B("max")].flat(),
+      styles: [m(), $("max")].flat(),
       children: [
         {
           type: "instance",
@@ -278,13 +278,13 @@ const o = {
             // shadcdn styles
             n(),
             n(1),
-            $("none"),
-            V("center"),
-            u("center"),
+            V("none"),
+            q("center"),
+            g("center"),
             s(1)
           ].flat(),
           children: [
-            ...g({
+            ...u({
               title: "About",
               padding: 2,
               children: [
@@ -308,7 +308,7 @@ const o = {
                 ...p({ count: 3, offset: 0 })
               ]
             }),
-            ...g({
+            ...u({
               title: "Components",
               padding: 0,
               children: [
@@ -329,7 +329,7 @@ const o = {
             y(0),
             f("full"),
             n(),
-            u("center")
+            g("center")
           ].flat(),
           children: [
             {
@@ -367,23 +367,21 @@ const o = {
       ]
     }
   ]
-}, ue = {
+}, ge = {
   category: "hidden",
   detachable: !1,
   type: "container",
   icon: w,
-  requiredAncestors: ["NavigationMenu"],
   constraints: {
     relation: "ancestor",
     component: { $eq: "NavigationMenu" }
   },
   presetStyle: o,
   label: "Menu List"
-}, ge = {
+}, ue = {
   category: "hidden",
   type: "container",
   icon: I,
-  requiredAncestors: ["NavigationMenu"],
   constraints: {
     relation: "ancestor",
     component: { $eq: "NavigationMenu" }
@@ -396,8 +394,7 @@ const o = {
   detachable: !1,
   stylable: !1,
   type: "container",
-  icon: A,
-  requiredAncestors: ["NavigationMenuItem"],
+  icon: k,
   constraints: {
     relation: "ancestor",
     component: { $eq: "NavigationMenuItem" }
@@ -408,8 +405,7 @@ const o = {
   category: "hidden",
   detachable: !1,
   type: "container",
-  icon: k,
-  requiredAncestors: ["NavigationMenuItem"],
+  icon: L,
   constraints: {
     relation: "ancestor",
     component: { $eq: "NavigationMenuItem" }
@@ -422,8 +418,7 @@ const o = {
   detachable: !0,
   type: "container",
   stylable: !1,
-  icon: L,
-  requiredAncestors: ["NavigationMenu"],
+  icon: C,
   constraints: [
     {
       relation: "ancestor",
@@ -440,8 +435,7 @@ const o = {
   category: "hidden",
   detachable: !0,
   type: "container",
-  icon: C,
-  requiredAncestors: ["NavigationMenu"],
+  icon: A,
   constraints: {
     relation: "ancestor",
     component: { $eq: "NavigationMenu" }
@@ -460,15 +454,15 @@ const o = {
   props: ee
 }, Ie = {
   props: te
-}, Ae = {
+}, ke = {
   props: ne
 };
 export {
   me as metaNavigationMenu,
   ve as metaNavigationMenuContent,
-  ge as metaNavigationMenuItem,
+  ue as metaNavigationMenuItem,
   ye as metaNavigationMenuLink,
-  ue as metaNavigationMenuList,
+  ge as metaNavigationMenuList,
   he as metaNavigationMenuTrigger,
   fe as metaNavigationMenuViewport,
   Me as propsMetaNavigationMenu,
@@ -477,5 +471,5 @@ export {
   we as propsMetaNavigationMenuLink,
   Ie as propsMetaNavigationMenuList,
   be as propsMetaNavigationMenuTrigger,
-  Ae as propsMetaNavigationMenuViewport
+  ke as propsMetaNavigationMenuViewport
 };

package/lib/radio-group.ws.js

@@ -3,7 +3,7 @@ import { defaultStates as o } from "@webstudio-is/react-sdk";
 import { div as d, button as u, span as m } from "@webstudio-is/sdk/normalize.css";
 import { flex as t, gap as r, items as y, aspect as b, h as f, w as h, rounded as G, border as a, text as R, focusVisible as I, outline as g, ring as v, disabled as k, cursor as x, opacity as V } from "./theme/tailwind-classes.js";
 import { buttonReset as C } from "./theme/styles.js";
-import { propsRadioGroup as q, propsRadioGroupItem as w, propsRadioGroupIndicator as S } from "./__generated__/radio-group.props.js";
+import { propsRadioGroup as w, propsRadioGroupItem as S, propsRadioGroupIndicator as q } from "./__generated__/radio-group.props.js";
 const e = ({
   value: n,
   label: p
@@ -121,7 +121,6 @@ const e = ({
 }, L = {
   category: "hidden",
   type: "container",
-  requiredAncestors: ["RadioGroup"],
   constraints: {
     relation: "ancestor",
     component: { $eq: "RadioGroup" }
@@ -141,13 +140,13 @@ const e = ({
     span: m
   }
 }, U = {
-  props: q,
+  props: w,
   initialProps: ["id", "className", "name", "value", "required"]
 }, $ = {
-  props: w,
+  props: S,
   initialProps: ["value"]
 }, j = {
-  props: S
+  props: q
 };
 export {
   H as metaRadioGroup,

package/lib/select.ws.js

@@ -1,10 +1,10 @@
-import { SelectIcon as V, TriggerIcon as w, FormTextFieldIcon as T, ContentIcon as M, ViewportIcon as q, ItemIcon as C, CheckMarkIcon as d, TextIcon as k } from "@webstudio-is/icons/svg";
-import { button as F, span as s, div as A } from "@webstudio-is/sdk/normalize.css";
-import { flex as c, h as m, w as t, items as l, justify as u, rounded as a, border as o, bg as p, px as P, py as y, text as e, state as h, focus as S, outline as g, ring as $, disabled as E, cursor as I, opacity as f, relative as v, z as W, property as n, overflow as j, shadow as z, p as D, select as H, pl as L, pr as U, pointerEvents as B, absolute as G, left as J } from "./theme/tailwind-classes.js";
+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 { 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: A
-}, r = ({
+  div: P
+}, c = ({
   props: b,
   children: x
 }) => ({
@@ -16,20 +16,20 @@ const i = {
   // data-[disabled]:pointer-events-none data-[disabled]:opacity-50
   styles: [
     v(),
-    c(),
+    r(),
     t("full"),
-    I("default"),
-    H(),
+    f("default"),
+    L(),
     l("center"),
     a("md"),
-    y(1.5),
-    L(8),
-    U(2),
+    u(1.5),
+    U(8),
+    A(2),
     e("sm"),
     g(),
     S([p("accent"), e("accentForeground")].flat()),
     h(
-      [B("none"), f(50)].flat(),
+      [B("none"), I(50)].flat(),
       "[data-disabled]"
     )
   ].flat(),
@@ -41,11 +41,11 @@ const i = {
       styles: [
         G(),
         J(2),
-        c(),
+        r(),
         m(3.5),
         t(3.5),
         l("center"),
-        u("center")
+        y("center")
       ].flat(),
       children: [
         {
@@ -106,23 +106,23 @@ const i = {
           // focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
           // disabled:cursor-not-allowed disabled:opacity-50
           styles: [
-            c(),
+            r(),
             m(10),
             t("full"),
             l("center"),
-            u("between"),
+            y("between"),
             a("md"),
             o(),
             o("input"),
             p("background"),
-            P(3),
-            y(2),
+            $(3),
+            u(2),
             e("sm"),
             h([e("mutedForeground")].flat(), "::placeholder"),
             S(
-              [g(), $("ring", 2, "background", 2)].flat()
+              [g(), E("ring", 2, "background", 2)].flat()
             ),
-            E([I("not-allowed"), f(50)].flat())
+            W([f("not-allowed"), I(50)].flat())
           ].flat(),
           children: [
             {
@@ -153,14 +153,14 @@ const i = {
           // data-[side=top]:-translate-y-1
           styles: [
             v(),
-            W(50),
+            j(50),
             n("minWidth", "8rem"),
-            j("hidden"),
+            z("hidden"),
             a("md"),
             o(),
             p("popover"),
             e("popoverForeground"),
-            z("md")
+            D("md")
           ].flat(),
           children: [
             {
@@ -170,25 +170,25 @@ const i = {
               // position=popper
               // h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]
               styles: [
-                D(1),
+                H(1),
                 n("height", "--radix-select-trigger-height"),
                 t("full"),
                 n("minWidth", "--radix-select-trigger-width")
               ].flat(),
               children: [
-                r({
+                c({
                   props: [{ name: "value", type: "string", value: "light" }],
                   children: [
                     { type: "text", value: "Light", placeholder: !0 }
                   ]
                 }),
-                r({
+                c({
                   props: [{ name: "value", type: "string", value: "dark" }],
                   children: [
                     { type: "text", value: "Dark", placeholder: !0 }
                   ]
                 }),
-                r({
+                c({
                   props: [{ name: "value", type: "string", value: "system" }],
                   children: [
                     { type: "text", value: "System", placeholder: !0 }
@@ -201,15 +201,15 @@ const i = {
       ]
     }
   ]
-}, re = {
+}, ce = {
   category: "hidden",
   type: "container",
   icon: w,
   detachable: !1,
   presetStyle: {
-    button: F
+    button: q
   }
-}, ce = {
+}, re = {
   category: "hidden",
   type: "container",
   label: "Value",
@@ -227,14 +227,13 @@ const i = {
 }, ae = {
   category: "hidden",
   type: "container",
-  icon: q,
+  icon: C,
   detachable: !1,
   presetStyle: i
 }, pe = {
   category: "hidden",
   type: "container",
-  icon: C,
-  requiredAncestors: ["SelectViewport"],
+  icon: k,
   constraints: {
     relation: "ancestor",
     component: { $eq: "SelectViewport" }
@@ -246,7 +245,6 @@ const i = {
   label: "Indicator",
   icon: d,
   detachable: !1,
-  requiredAncestors: ["SelectItem"],
   constraints: {
     relation: "ancestor",
     component: { $eq: "SelectItem" }
@@ -258,9 +256,8 @@ const i = {
   category: "hidden",
   type: "container",
   label: "Item Text",
-  icon: k,
+  icon: F,
   detachable: !1,
-  requiredAncestors: ["SelectItem"],
   constraints: {
     relation: "ancestor",
     component: { $eq: "SelectItem" }
@@ -273,10 +270,10 @@ const i = {
   initialProps: ["name", "value", "open", "required"]
 }, me = {
   props: N
-}, ue = {
+}, ye = {
   props: O,
   initialProps: ["placeholder"]
-}, ye = {
+}, ue = {
   props: Q
 }, he = {
   props: R
@@ -285,7 +282,7 @@ const i = {
   initialProps: ["value"]
 }, ge = {
   props: Y
-}, Ie = {
+}, fe = {
   props: Z
 };
 export {
@@ -294,15 +291,15 @@ export {
   pe as metaSelectItem,
   se as metaSelectItemIndicator,
   ie as metaSelectItemText,
-  re as metaSelectTrigger,
-  ce as metaSelectValue,
+  ce as metaSelectTrigger,
+  re as metaSelectValue,
   ae as metaSelectViewport,
   de as propsMetaSelect,
-  ye as propsMetaSelectContent,
+  ue as propsMetaSelectContent,
   Se as propsMetaSelectItem,
   ge as propsMetaSelectItemIndicator,
-  Ie as propsMetaSelectItemText,
+  fe as propsMetaSelectItemText,
   me as propsMetaSelectTrigger,
-  ue as propsMetaSelectValue,
+  ye as propsMetaSelectValue,
   he as propsMetaSelectViewport
 };

package/lib/tabs.ws.js

@@ -1,33 +1,33 @@
-import { TabsIcon as b, HeaderIcon as T, TriggerIcon as g, ContentIcon as m } from "@webstudio-is/icons/svg";
-import { defaultStates as u } from "@webstudio-is/react-sdk";
-import { button as y, div as h } from "@webstudio-is/sdk/normalize.css";
-import { inlineFlex as a, items as s, justify as r, whitespace as f, rounded as i, px as v, py as x, text as t, font as q, transition as C, focusVisible as c, outline as p, ring as l, disabled as A, pointerEvents as L, opacity as $, state as w, bg as d, shadow as M, mt as S, h as k, p as I } from "./theme/tailwind-classes.js";
+import { TabsIcon as b, HeaderIcon as m, TriggerIcon as g, ContentIcon as T } from "@webstudio-is/icons/svg";
+import { defaultStates as y } from "@webstudio-is/react-sdk";
+import { button as u, div as h } from "@webstudio-is/sdk/normalize.css";
+import { inlineFlex as a, items as r, justify as s, whitespace as f, rounded as c, px as v, py as x, text as t, font as C, transition as q, focusVisible as i, outline as p, ring as l, disabled as $, pointerEvents as L, opacity as w, state as A, bg as d, shadow as M, mt as S, h as k, p as I } from "./theme/tailwind-classes.js";
 import { buttonReset as F } from "./theme/styles.js";
 import { propsTabs as V, propsTabsList as W, propsTabsTrigger as j, propsTabsContent as D } from "./__generated__/tabs.props.js";
 const e = {
   div: h
 }, n = [
   a(),
-  s("center"),
   r("center"),
+  s("center"),
   f(),
-  i("md"),
+  c("md"),
   v(3),
   x(1.5),
   t("sm"),
-  q("medium"),
-  C("all"),
-  c(
+  C("medium"),
+  q("all"),
+  i(
     [p(), l("ring", 2, "background", 2)].flat()
   ),
-  A([L("none"), $(50)].flat()),
-  w(
+  $([L("none"), w(50)].flat()),
+  A(
     [d("background"), t("foreground"), M("sm")].flat(),
     "[data-state=active]"
   )
 ].flat(), o = [
   S(2),
-  c(
+  i(
     [p(), l("ring", 2, "background", 2)].flat()
   )
 ].flat(), B = {
@@ -64,9 +64,9 @@ const e = {
           styles: [
             a(),
             k(10),
-            s("center"),
             r("center"),
-            i("md"),
+            s("center"),
+            c("md"),
             d("muted"),
             I(1),
             t("mutedForeground")
@@ -118,8 +118,7 @@ const e = {
 }, G = {
   category: "hidden",
   type: "container",
-  icon: T,
-  requiredAncestors: ["Tabs"],
+  icon: m,
   constraints: {
     relation: "ancestor",
     component: { $eq: "Tabs" }
@@ -129,8 +128,6 @@ const e = {
   category: "hidden",
   type: "container",
   icon: g,
-  requiredAncestors: ["TabsList"],
-  invalidAncestors: ["TabsTrigger"],
   constraints: [
     {
       relation: "ancestor",
@@ -144,7 +141,7 @@ const e = {
   indexWithinAncestor: "Tabs",
   label: "Tab Trigger",
   states: [
-    ...u,
+    ...y,
     {
       category: "component-states",
       label: "Active",
@@ -152,14 +149,13 @@ const e = {
     }
   ],
   presetStyle: {
-    button: [y, F].flat()
+    button: [u, F].flat()
   }
 }, K = {
   category: "hidden",
   type: "container",
   label: "Tab Content",
-  icon: m,
-  requiredAncestors: ["Tabs"],
+  icon: T,
   constraints: {
     relation: "ancestor",
     component: { $eq: "Tabs" }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.191.5",
+  "version": "0.192.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -51,10 +51,10 @@
     "@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.191.5",
-    "@webstudio-is/react-sdk": "0.191.5",
-    "@webstudio-is/icons": "0.191.5",
-    "@webstudio-is/sdk": "0.191.5"
+    "@webstudio-is/css-engine": "0.192.0",
+    "@webstudio-is/icons": "0.192.0",
+    "@webstudio-is/sdk": "0.192.0",
+    "@webstudio-is/react-sdk": "0.192.0"
   },
   "devDependencies": {
     "@types/node": "^22.9.3",
@@ -64,10 +64,10 @@
     "react-dom": "18.3.0-canary-14898b6a9-20240318",
     "tailwindcss": "^3.3.3",
     "@webstudio-is/generate-arg-types": "0.0.0",
-    "@webstudio-is/sdk-cli": "^0.94.0",
     "@webstudio-is/css-data": "0.0.0",
-    "@webstudio-is/tsconfig": "1.0.7",
-    "@webstudio-is/sdk-components-react": "0.191.5"
+    "@webstudio-is/sdk-cli": "^0.94.0",
+    "@webstudio-is/sdk-components-react": "0.192.0",
+    "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {
     "build": "vite build --config ../../vite.sdk-components.config.ts",