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

package/lib/dialog.ws.js

@@ -1,16 +1,16 @@
 import { TriggerIcon as p, OverlayIcon as g, ContentIcon as d, HeadingIcon as y, TextIcon as m, ButtonElementIcon as D, DialogIcon as u, LargeXIcon as h } from "@webstudio-is/icons/svg";
 import { defaultStates as f } from "@webstudio-is/react-sdk";
 import { button as v, div as b, h2 as C, p as x } from "@webstudio-is/sdk/normalize.css";
-import { fixed as T, inset as $, z as n, bg as t, backdropBlur as q, flex as e, overflow as I, w as i, gap as a, m as P, maxW as S, border as l, p as w, shadow as B, relative as M, my as r, leading as O, text as o, tracking as k, absolute as H, right as E, top as j, rounded as z, opacity as c, items as F, justify as L, h as R, outline as W, hover as X, focus as A, ring as G } from "./theme/tailwind-classes.js";
+import { fixed as T, inset as $, z as n, bg as t, backdropBlur as q, flex as e, overflow as I, w as a, gap as i, m as P, maxW as S, border as l, p as w, shadow as B, relative as M, my as r, leading as O, text as o, tracking as k, absolute as H, right as E, top as j, rounded as z, opacity as s, items as F, justify as L, h as R, outline as W, hover as X, focus as A, ring as G } from "./theme/tailwind-classes.js";
 import { propsDialog as J, propsDialogTrigger as K, propsDialogContent as N, propsDialogOverlay as Q, propsDialogClose as U, propsDialogTitle as V, propsDialogDescription as Y } from "./__generated__/dialog.props.js";
 import { buttonReset as Z, getButtonStyles as _ } from "./theme/styles.js";
-const s = {
+const c = {
   div: b
 }, ee = {
   h2: C
 }, te = {
   p: x
-}, ce = {
+}, se = {
   category: "hidden",
   type: "container",
   icon: p,
@@ -19,10 +19,10 @@ const s = {
     relation: "ancestor",
     component: { $eq: "Dialog" }
   }
-}, se = {
+}, ce = {
   category: "hidden",
   type: "container",
-  presetStyle: s,
+  presetStyle: c,
   icon: g,
   constraints: [
     {
@@ -37,21 +37,25 @@ const s = {
 }, pe = {
   category: "hidden",
   type: "container",
-  presetStyle: s,
+  presetStyle: c,
   icon: d,
   constraints: [
     {
       relation: "ancestor",
       component: { $eq: "DialogOverlay" }
     },
+    // often deleted by users
+    // though radix starts throwing warnings in console
+    /*
     {
       relation: "descendant",
-      component: { $eq: "DialogTitle" }
+      component: { $eq: "DialogTitle" },
     },
     {
       relation: "descendant",
-      component: { $eq: "DialogDescription" }
+      component: { $eq: "DialogDescription" },
     },
+    */
     {
       relation: "descendant",
       component: { $eq: "DialogClose" }
@@ -150,11 +154,11 @@ const s = {
                * border bg-background p-6 shadow-lg
                **/
               styles: [
-                i("full"),
+                a("full"),
                 n(50),
                 e(),
                 e("col"),
-                a(4),
+                i(4),
                 P("auto"),
                 S("lg"),
                 l(),
@@ -168,7 +172,7 @@ const s = {
                   type: "instance",
                   component: "Box",
                   label: "Dialog Header",
-                  styles: [e(), e("col"), a(1)].flat(),
+                  styles: [e(), e("col"), i(1)].flat(),
                   children: [
                     {
                       type: "instance",
@@ -237,16 +241,16 @@ const s = {
                     E(4),
                     j(4),
                     z("sm"),
-                    c(70),
+                    s(70),
                     e(),
                     F("center"),
                     L("center"),
                     R(4),
-                    i(4),
+                    a(4),
                     l(0),
                     t("transparent"),
                     W(),
-                    X(c(100)),
+                    X(s(100)),
                     A(G("ring", 2, "background", 2))
                   ].flat(),
                   children: [
@@ -298,9 +302,9 @@ export {
   ye as metaDialogClose,
   pe as metaDialogContent,
   de as metaDialogDescription,
-  se as metaDialogOverlay,
+  ce as metaDialogOverlay,
   ge as metaDialogTitle,
-  ce as metaDialogTrigger,
+  se as metaDialogTrigger,
   De as propsMetaDialog,
   ve as propsMetaDialogClose,
   he as propsMetaDialogContent,

package/lib/hooks.js

@@ -2,12 +2,11 @@ import { hooksCollapsible as o } from "./collapsible.js";
 import { hooksTabs as r } from "./tabs.js";
 import { hooksDialog as m } from "./dialog.js";
 import { hooksPopover as i } from "./popover.js";
-import { hooksSheet as t } from "./sheet.js";
-import { hooksTooltip as p } from "./tooltip.js";
-import { hooksAccordion as s } from "./accordion.js";
-import { hooksNavigationMenu as h } from "./navigation-menu.js";
-import { hooksSelect as k } from "./select.js";
-const S = [
+import { hooksTooltip as t } from "./tooltip.js";
+import { hooksAccordion as p } from "./accordion.js";
+import { hooksNavigationMenu as s } from "./navigation-menu.js";
+import { hooksSelect as h } from "./select.js";
+const g = [
   o,
   r,
   m,
@@ -15,9 +14,8 @@ const S = [
   t,
   p,
   s,
-  h,
-  k
+  h
 ];
 export {
-  S as hooks
+  g as hooks
 };

package/lib/navigation-menu.ws.js

@@ -387,7 +387,7 @@ const o = {
       component: { $eq: "NavigationMenu" }
     },
     {
-      relation: "child",
+      relation: "descendant",
       component: { $eq: "NavigationMenuItem" }
     }
   ],
@@ -398,7 +398,7 @@ const o = {
   type: "container",
   icon: I,
   constraints: {
-    relation: "parent",
+    relation: "ancestor",
     component: { $eq: "NavigationMenuList" }
   },
   presetStyle: o,

package/lib/radio-group.ws.js

@@ -1,12 +1,12 @@
-import { RadioCheckedIcon as p, ItemIcon as i, TriggerIcon as s, RadioDotIcon as l } from "@webstudio-is/icons/svg";
+import { RadioGroupIcon as c, ItemIcon as i, TriggerIcon as s, DotIcon as l } from "@webstudio-is/icons/svg";
 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 n, 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 q } from "./theme/tailwind-classes.js";
+import { flex as t, gap as n, items as y, aspect as b, h as f, w as G, rounded as h, border as a, text as I, focusVisible as R, outline as g, ring as v, disabled as k, cursor as x, opacity as q } from "./theme/tailwind-classes.js";
 import { buttonReset as V } from "./theme/styles.js";
-import { propsRadioGroup as C, propsRadioGroupItem as w, propsRadioGroupIndicator as S } from "./__generated__/radio-group.props.js";
+import { propsRadioGroup as w, propsRadioGroupItem as C, propsRadioGroupIndicator as S } from "./__generated__/radio-group.props.js";
 const e = ({
   value: r,
-  label: c
+  label: p
 }) => ({
   type: "instance",
   component: "Label",
@@ -24,12 +24,12 @@ const e = ({
       styles: [
         b("square"),
         f(4),
-        h(4),
-        G("full"),
+        G(4),
+        h("full"),
         a(),
         a("primary"),
-        R("primary"),
-        I(
+        I("primary"),
+        R(
           [g(), v("ring", 2, "background", 2)].flat()
         ),
         k([x("not-allowed"), q(50)].flat())
@@ -59,7 +59,7 @@ const e = ({
     {
       type: "instance",
       component: "Text",
-      children: [{ type: "text", value: c, placeholder: !0 }]
+      children: [{ type: "text", value: p, placeholder: !0 }]
     }
   ]
 }), E = {
@@ -71,7 +71,7 @@ const e = ({
     component: { $eq: "RadioGroupItem" }
   },
   description: "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
-  icon: p,
+  icon: c,
   states: [
     ...o,
     {
@@ -153,10 +153,10 @@ const e = ({
     span: m
   }
 }, N = {
-  props: C,
+  props: w,
   initialProps: ["id", "className", "name", "value", "required"]
 }, U = {
-  props: w,
+  props: C,
   initialProps: ["value"]
 }, j = {
   props: S

package/lib/sheet.ws.js

@@ -1,5 +1,5 @@
-import { HamburgerMenuIcon as o, LargeXIcon as p } from "@webstudio-is/icons/svg";
-import { fixed as m, inset as g, z as l, bg as t, backdropBlur as d, flex as e, overflow as y, w as a, gap as r, border as i, p as u, shadow as h, relative as b, mr as f, maxW as v, grow as x, my as c, leading as S, text as n, tracking as D, absolute as T, right as B, top as k, rounded as C, opacity as s, items as H, justify as w, h as I, outline as E, hover as M, focus as O, ring as j } from "./theme/tailwind-classes.js";
+import { MenuIcon as o, LargeXIcon as p } from "@webstudio-is/icons/svg";
+import { fixed as m, inset as d, z as l, bg as t, backdropBlur as g, flex as e, overflow as y, w as a, gap as i, border as r, p as h, shadow as u, relative as b, mr as f, maxW as v, grow as x, my as c, leading as S, text as n, tracking as D, absolute as T, right as B, top as k, rounded as C, opacity as s, items as w, justify as H, h as I, outline as E, hover as M, focus as O, ring as j } from "./theme/tailwind-classes.js";
 import { getButtonStyles as z } from "./theme/styles.js";
 const U = {
   category: "radix",
@@ -52,10 +52,10 @@ const U = {
            **/
           styles: [
             m(),
-            g(0),
+            d(0),
             l(50),
             t("background", 80),
-            d("sm"),
+            g("sm"),
             // To allow positioning Content
             e(),
             e("col"),
@@ -77,11 +77,11 @@ const U = {
                 l(50),
                 e(),
                 e("col"),
-                r(4),
-                i(),
+                i(4),
+                r(),
                 t("background"),
-                u(6),
-                h("lg"),
+                h(6),
+                u("lg"),
                 b(),
                 // side=left
                 f("auto"),
@@ -102,7 +102,7 @@ const U = {
                       type: "instance",
                       component: "Box",
                       label: "Sheet Header",
-                      styles: [e(), e("col"), r(1)].flat(),
+                      styles: [e(), e("col"), i(1)].flat(),
                       children: [
                         {
                           type: "instance",
@@ -178,11 +178,11 @@ const U = {
                     C("sm"),
                     s(70),
                     e(),
-                    H("center"),
                     w("center"),
+                    H("center"),
                     I(4),
                     a(4),
-                    i(0),
+                    r(0),
                     t("transparent"),
                     E(),
                     M(s(100)),

package/lib/templates.js

@@ -0,0 +1 @@
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@webstudio-is/sdk-components-react-radix",
-  "version": "0.194.0",
+  "version": "0.196.0",
   "description": "Webstudio wrapper for radix library",
   "author": "Webstudio <github@webstudio.is>",
   "homepage": "https://webstudio.is",
@@ -53,10 +53,10 @@
     "@radix-ui/react-tooltip": "^1.1.4",
     "@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"
+    "@webstudio-is/css-engine": "0.196.0",
+    "@webstudio-is/icons": "0.196.0",
+    "@webstudio-is/react-sdk": "0.196.0",
+    "@webstudio-is/sdk": "0.196.0"
   },
   "devDependencies": {
     "@types/node": "^22.9.3",
@@ -66,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.196.0",
     "@webstudio-is/tsconfig": "1.0.7"
   },
   "scripts": {

package/lib/sheet.js

@@ -1,43 +0,0 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { getClosestInstance as r } from "@webstudio-is/react-sdk/runtime";
-import { DialogContent as h } from "./dialog.js";
-f(
-  ({ tag: n = "nav", side: t = "left", role: e = "navigation", children: o, ...i }, c) => /* @__PURE__ */ s(
-    h,
-    {
-      asChild: !0,
-      "data-side": t,
-      role: e,
-      ...i,
-      children: /* @__PURE__ */ s(n, { ref: c, children: o })
-    }
-  )
-);
-const a = "@webstudio-is/sdk-components-react-radix", P = {
-  onNavigatorUnselect: (n, t) => {
-    for (const e of t.instancePath)
-      if (e.component === `${a}:SheetOverlay`) {
-        const o = r(
-          t.instancePath,
-          e,
-          `${a}:Sheet`
-        );
-        o && n.setMemoryProp(o, "open", void 0);
-      }
-  },
-  onNavigatorSelect: (n, t) => {
-    for (const e of t.instancePath)
-      if (e.component === `${a}:SheetOverlay`) {
-        const o = r(
-          t.instancePath,
-          e,
-          `${a}:Sheet`
-        );
-        o && n.setMemoryProp(o, "open", !0);
-      }
-  }
-};
-export {
-  P as hooksSheet
-};

package/lib/types/sheet.d.ts

@@ -1,16 +0,0 @@
-import { type Hook } from "@webstudio-is/react-sdk/runtime";
-export declare const Sheet: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogProps, "defaultOpen"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SheetTrigger: import("react").ForwardRefExoticComponent<{
-    children: import("react").ReactNode;
-} & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const SheetOverlay: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogOverlayProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
-export declare const SheetClose: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogCloseProps & import("react").RefAttributes<HTMLButtonElement>>;
-export declare const SheetTitle: import("react").ForwardRefExoticComponent<Omit<import("@radix-ui/react-dialog").DialogTitleProps & import("react").RefAttributes<HTMLHeadingElement> & {
-    tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}, "ref"> & import("react").RefAttributes<HTMLHeadingElement>>;
-export declare const SheetDescription: import("react").ForwardRefExoticComponent<import("@radix-ui/react-dialog").DialogDescriptionProps & import("react").RefAttributes<HTMLParagraphElement>>;
-export declare const SheetContent: import("react").ForwardRefExoticComponent<Omit<Omit<import("@radix-ui/react-dialog").DialogContentProps & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>, "ref"> & {
-    tag?: "div" | "nav";
-    side?: "top" | "right" | "bottom" | "left";
-} & import("react").RefAttributes<HTMLDivElement>>;
-export declare const hooksSheet: Hook;