@webstudio-is/sdk-components-react-radix 0.0.0-588fe22 → 0.0.0-73cd6ea

package/lib/shared/theme.js

@@ -1,15 +1,14 @@
-const o = {
+const n = {
   sm: "0.875rem",
   lg: "1.125rem"
 }, t = {
-  sm: "1.25rem",
-  lg: "1.75rem"
-}, p = {
+  sm: "1.25rem"
+}, g = {
   none: "1",
   snug: "1.375"
 }, s = {
   medium: "500"
-}, g = {
+}, c = {
   tight: "-0.025em"
 }, m = {
   0: "0px",
@@ -47,34 +46,22 @@ const o = {
   "1.5": "0.375rem",
   "2.5": "0.625rem",
   "3.5": "0.875rem"
-}, c = {
-  ...m,
-  full: "100%"
-}, x = {
+}, p = {
   ...m,
   full: "100%"
 }, i = {
-  0: "0rem",
-  xs: "20rem",
-  sm: "24rem",
-  md: "28rem",
-  lg: "32rem",
-  xl: "36rem",
-  prose: "65ch"
+  ...m
 }, b = {
-  0: "0px",
+  sm: "24rem",
+  lg: "32rem"
+}, x = {
   2: "2px",
-  4: "4px",
-  8: "8px",
   DEFAULT: "1px"
 }, d = {
   sm: "0.125rem",
   md: "0.375rem",
   full: "9999px"
 }, r = {
-  transparent: "transparent",
-  current: "currentColor",
-  inherit: "inherit",
   popover: "rgb(255, 255, 255)",
   popoverForeground: "rgb(2, 8, 23)",
   border: "rgb(226, 232, 240)",
@@ -85,58 +72,28 @@ const o = {
   muted: "hsl(210 40% 96.1%)",
   primary: "rgb(15, 23, 42)",
   primaryForeground: "hsl(210 40% 98%)",
-  destructive: "rgb(239, 68, 68)",
-  destructiveForeground: "rgb(248, 250, 252)",
   accent: "rgb(241, 245, 249)",
   accentForeground: "rgb(15, 23, 42)",
-  input: "rgb(226, 232, 240)",
-  secondary: "rgb(241, 245, 249)",
-  secondaryForeground: "rgb(15, 23, 42)"
-}, u = {
+  input: "rgb(226, 232, 240)"
+}, l = {
   all: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
   transform: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)"
-}, l = {
-  0: "0",
-  5: "0.05",
-  10: "0.1",
-  20: "0.2",
-  25: "0.25",
-  30: "0.3",
-  40: "0.4",
+}, u = {
   50: "0.5",
-  60: "0.6",
   70: "0.7",
-  75: "0.75",
-  80: "0.8",
-  90: "0.9",
-  95: "0.95",
   100: "1"
-}, n = {
-  0: "0px",
-  1: "1px",
-  2: "2px",
-  4: "4px",
-  8: "8px",
-  DEFAULT: "3px"
+}, o = {
+  2: "2px"
 }, e = {
-  0: "0px",
-  1: "1px",
-  2: "2px",
-  4: "4px",
-  8: "8px"
+  2: "2px"
 }, a = {
   sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
   md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
   lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
   // 0 0 0 ringOffsetWidth ringOffsetColor
   // 0 0 0 ringWidth + ringOffsetWidth ringColor
-  ring: `0 0 0 ${e[2]} ${r.background}, 0 0 0 calc(${n[2]} + ${e[2]}) ${r.ring}`
+  ring: `0 0 0 ${e[2]} ${r.background}, 0 0 0 calc(${o[2]} + ${e[2]}) ${r.ring}`
 }, h = {
-  0: "0",
-  10: "10",
-  20: "20",
-  30: "30",
-  40: "40",
   50: "50"
 }, f = {
   sm: "blur(0 1px 2px 0 rgb(0 0 0 / 0.05))"
@@ -144,19 +101,19 @@ const o = {
 export {
   f as blur,
   d as borderRadius,
-  b as borderWidth,
+  x as borderWidth,
   a as boxShadow,
   r as colors,
-  o as fontSize,
+  n as fontSize,
   t as fontSizeLineHeight,
-  x as height,
-  g as letterSpacing,
-  p as lineHeight,
-  i as maxWidth,
-  l as opacity,
+  i as height,
+  c as letterSpacing,
+  g as lineHeight,
+  b as maxWidth,
+  u as opacity,
   m as spacing,
-  u as transition,
+  l as transition,
   s as weights,
-  c as width,
+  p as width,
   h as zIndex
 };

package/lib/sheet.template.js

@@ -1,55 +1,55 @@
 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 { 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 { $ as o, PlaceholderValue as n, css as i } from "@webstudio-is/template";
+import { radix as t } from "./shared/proxy.js";
+import { fontSize as d, lineHeight as p, letterSpacing as u, fontSizeLineHeight as w, colors as a, spacing as l, borderRadius as f, opacity as c, height as g, boxShadow as h, width as x, zIndex as m, borderWidth as $, maxWidth as y, blur as S } from "./shared/theme.js";
 import { getButtonStyle as D } from "./shared/styles.js";
 const B = {
   category: "radix",
   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`
           position: fixed;
           inset: 0;
-          z-index: ${d[50]};
+          z-index: ${m[50]};
           background-color: rgb(255 255 255 / 0.8);
-          backdrop-filter: ${p.sm};
+          backdrop-filter: ${S.sm};
           /* To allow positioning Content */
           display: flex;
           flex-direction: column;
           overflow: auto;
         `,
         children: /* @__PURE__ */ r(
-          o.DialogContent,
+          t.DialogContent,
           {
             "ws:label": "Sheet Content",
             "ws:style": i`
-            width: ${u.full};
-            z-index: ${d[50]};
+            width: ${x.full};
+            z-index: ${m[50]};
             display: flex;
             flex-direction: column;
             gap: ${l[4]};
-            border: ${w.DEFAULT} solid ${a.border};
+            border: ${$.DEFAULT} solid ${a.border};
             background-color: ${a.background};
             padding: ${l[6]};
-            box-shadow: ${c.lg};
+            box-shadow: ${h.lg};
             position: relative;
             /* side=left */
             margin-right: auto;
-            max-width: ${f.sm};
+            max-width: ${y.sm};
             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,25 +59,25 @@ const B = {
               `,
                     children: [
                       /* @__PURE__ */ e(
-                        o.DialogTitle,
+                        t.DialogTitle,
                         {
                           "ws:label": "Sheet Title",
                           "ws:style": i`
-                  font-size: ${g.lg};
-                  line-height: ${x.none};
-                  letter-spacing: ${$.tight};
+                  font-size: ${d.lg};
+                  line-height: ${p.none};
+                  letter-spacing: ${u.tight};
                   margin: 0;
                 `,
                           children: new n("Sheet Title")
                         }
                       ),
                       /* @__PURE__ */ e(
-                        o.DialogDescription,
+                        t.DialogDescription,
                         {
                           "ws:label": "Sheet Description",
                           "ws:style": i`
-                  font-size: ${g.sm};
-                  line-height: ${y.sm};
+                  font-size: ${d.sm};
+                  line-height: ${w.sm};
                   color: ${a.mutedForeground};
                   margin: 0;
                 `,
@@ -87,34 +87,34 @@ 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`
               position: absolute;
               right: ${l[4]};
               top: ${l[4]};
-              border-radius: ${S.sm};
-              opacity: ${h[70]};
+              border-radius: ${f.sm};
+              opacity: ${c[70]};
               display: flex;
               align-items: center;
               justify-content: center;
-              height: ${m[4]};
-              width: ${m[4]};
+              height: ${g[4]};
+              width: ${g[4]};
               border: 0;
               background-color: transparent;
               outline: none;
               &:hover {
-                opacity: ${h[100]};
+                opacity: ${c[100]};
               }
               &:focus-visible {
-                box-shadow: ${c.ring};
+                box-shadow: ${h.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/switch.js

@@ -1,8 +1,11 @@
-import { jsx as e } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { Root as c, Thumb as h } from "@radix-ui/react-switch";
-const d = f(({ defaultChecked: o, checked: r, ...t }, m) => /* @__PURE__ */ e(c, { ...t, ref: m, defaultChecked: r ?? o })), n = h;
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as m, useState as n, useEffect as s } from "react";
+import { Thumb as d, Root as u } from "@radix-ui/react-switch";
+const C = m(({ defaultChecked: o, ...t }, r) => {
+  const e = t.checked ?? o ?? !1, [h, c] = n(e);
+  return s(() => c(e), [e]), /* @__PURE__ */ f(u, { ...t, ref: r, checked: h, onCheckedChange: c });
+}), w = d;
 export {
-  d as Switch,
-  n as SwitchThumb
+  C as Switch,
+  w as SwitchThumb
 };

package/lib/switch.template.js

@@ -1,7 +1,7 @@
 import { jsx as o } from "react/jsx-runtime";
 import { css as r } from "@webstudio-is/template";
 import { radix as e } from "./shared/proxy.js";
-import { borderRadius as a, borderWidth as d, transition as i, boxShadow as n, opacity as s, colors as t, height as c, width as l } from "./shared/theme.js";
+import { height as d, width as s, borderRadius as a, colors as t, boxShadow as i, transition as n, borderWidth as c, opacity as l } from "./shared/theme.js";
 const m = {
   category: "radix",
   description: "A control that allows the user to toggle between checked and not checked.",
@@ -17,15 +17,15 @@ const m = {
         cursor: pointer;
         align-items: center;
         border-radius: ${a.full};
-        border: ${d[2]} solid transparent;
-        transition: ${i.all};
+        border: ${c[2]} solid transparent;
+        transition: ${n.all};
         &:focus-visible {
           outline: none;
-          box-shadow: ${n.ring};
+          box-shadow: ${i.ring};
         }
         &:disabled {
           cursor: not-allowed;
-          opacity: ${s[50]};
+          opacity: ${l[50]};
         }
         &[data-state="checked"] {
           background-color: ${t.primary};
@@ -40,12 +40,12 @@ const m = {
           "ws:style": r`
           pointer-events: none;
           display: block;
-          height: ${c[5]};
-          width: ${l[5]};
+          height: ${d[5]};
+          width: ${s[5]};
           border-radius: ${a.full};
           background-color: ${t.background};
-          box-shadow: ${n.lg};
-          transition: ${i.transform};
+          box-shadow: ${i.lg};
+          transition: ${n.transform};
           &[data-state="checked"] {
             transform: translateX(20px);
           }

package/lib/switch.ws.js

@@ -1,63 +1,40 @@
-import { SwitchIcon as e, TriggerIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
-import { button as c, span as a } from "@webstudio-is/sdk/normalize.css";
-import { buttonReset as s } from "./shared/preset-styles.js";
-import { propsSwitch as n, propsSwitchThumb as r } from "./__generated__/switch.props.js";
-const d = {
-  type: "container",
-  constraints: {
-    relation: "descendant",
-    component: { $eq: "SwitchThumb" }
-  },
+import { SwitchIcon as e, TriggerIcon as t } from "@webstudio-is/icons/svg";
+import { button as c, span as o } from "@webstudio-is/sdk/normalize.css";
+import { radix as a } from "./shared/meta.js";
+import { buttonReset as n } from "./shared/preset-styles.js";
+import { propsSwitch as r, propsSwitchThumb as s } from "./__generated__/switch.props.js";
+const m = {
   icon: e,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [a.SwitchThumb]
+  },
   states: [
-    ...t,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
   ],
   presetStyle: {
-    button: [c, s].flat()
-  }
-}, u = {
-  type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Switch" }
+    button: [c, n].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "checked", "required"],
+  props: r
+}, b = {
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   },
-  icon: o,
   states: [
-    ...t,
-    {
-      label: "Checked",
-      selector: "[data-state=checked]",
-      category: "component-states"
-    },
-    {
-      label: "Unchecked",
-      selector: "[data-state=unchecked]",
-      category: "component-states"
-    }
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
   ],
   presetStyle: {
-    span: a
-  }
-}, S = {
-  props: n,
-  initialProps: ["id", "className", "name", "value", "checked", "required"]
-}, b = {
-  props: r
+    span: o
+  },
+  props: s
 };
 export {
-  d as metaSwitch,
-  u as metaSwitchThumb,
-  S as propsMetaSwitch,
-  b as propsMetaSwitchThumb
+  m as metaSwitch,
+  b as metaSwitchThumb
 };

package/lib/tabs.js

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

package/lib/tabs.template.js

@@ -1,18 +1,18 @@
 import { jsxs as s, jsx as t } from "react/jsx-runtime";
-import { css as a, PlaceholderValue as o } from "@webstudio-is/template";
+import { PlaceholderValue as o, css as a } from "@webstudio-is/template";
 import { radix as e } from "./shared/proxy.js";
-import { borderRadius as l, spacing as n, fontSize as g, fontSizeLineHeight as h, weights as u, transition as b, boxShadow as r, opacity as p, colors as i, height as m } from "./shared/theme.js";
+import { height as g, borderRadius as l, colors as n, spacing as i, fontSize as h, fontSizeLineHeight as b, weights as p, transition as u, boxShadow as r, opacity as m } from "./shared/theme.js";
 const d = a`
   display: inline-flex;
   align-items: center;
   justify-content: center;
   white-space: nowrap;
   border-radius: ${l.md};
-  padding: ${n[1.5]} ${n[3]};
-  font-size: ${g.sm};
-  line-height: ${h.sm};
-  font-weight: ${u.medium};
-  transition: ${b.all};
+  padding: ${i[1.5]} ${i[3]};
+  font-size: ${h.sm};
+  line-height: ${b.sm};
+  font-weight: ${p.medium};
+  transition: ${u.all};
   &:focus-visible {
     outline: 2px solid transparent;
     outline-offset: 2px;
@@ -20,15 +20,15 @@ const d = a`
   }
   &:disabled {
     pointer-events: none;
-    opacity: ${p[50]};
+    opacity: ${m[50]};
   }
   &[data-state="active"] {
-    background-color: ${i.background};
-    color: ${i.foreground};
+    background-color: ${n.background};
+    color: ${n.foreground};
     box-shadow: ${r.sm};
   }
 `, c = a`
-  margin-top: ${n[2]};
+  margin-top: ${i[2]};
   &:focus-visible {
     outline: none;
     box-shadow: ${r.ring};
@@ -37,19 +37,19 @@ const d = a`
   category: "radix",
   description: "A set of panels with content that are displayed one at a time. Duplicate both a tab trigger and tab content to add more tabs. Triggers and content are connected according to their order in the Navigator.",
   order: 2,
-  template: /* @__PURE__ */ s(e.Tabs, { defaultValue: "0", children: [
+  template: /* @__PURE__ */ s(e.Tabs, { value: "0", children: [
     /* @__PURE__ */ s(
       e.TabsList,
       {
         "ws:style": a`
           display: inline-flex;
-          height: ${m[10]};
+          height: ${g[10]};
           align-items: center;
           justify-content: center;
           border-radius: ${l.md};
-          background-color: ${i.muted};
-          padding: ${n[1]};
-          color: ${i.mutedForeground};
+          background-color: ${n.muted};
+          padding: ${i[1]};
+          color: ${n.mutedForeground};
         `,
         children: [
           /* @__PURE__ */ t(e.TabsTrigger, { "ws:style": d, children: new o("Account") }),