@webstudio-is/sdk-components-react-radix 0.218.0 → 0.220.0

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,8 +1,8 @@
 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 o, css as i, PlaceholderValue as n } from "@webstudio-is/template";
+import { $ as o, PlaceholderValue as n, css as i } from "@webstudio-is/template";
 import { radix as t } 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 { 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",
@@ -18,9 +18,9 @@ const B = {
         "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;
@@ -31,19 +31,19 @@ const B = {
           {
             "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: [
@@ -63,9 +63,9 @@ const B = {
                         {
                           "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")
@@ -76,8 +76,8 @@ const B = {
                         {
                           "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;
                 `,
@@ -97,21 +97,21 @@ const B = {
               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(o.HtmlEmbed, { "ws:label": "Close Icon", code: b })

package/lib/switch.js

@@ -1,8 +1,23 @@
-import { jsx as e } from "react/jsx-runtime";
+import { jsx as m } 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 { Thumb as h, Root as a } from "@radix-ui/react-switch";
+import { useControllableState as n } from "@radix-ui/react-use-controllable-state";
+const d = f(({ defaultChecked: e, ...o }, t) => {
+  const [r, c] = n({
+    prop: o.checked ?? e ?? !1,
+    defaultProp: !1
+  });
+  return /* @__PURE__ */ m(
+    a,
+    {
+      ...o,
+      ref: t,
+      checked: r,
+      onCheckedChange: c
+    }
+  );
+}), u = h;
 export {
   d as Switch,
-  n as SwitchThumb
+  u 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,18 +1,18 @@
-import { SwitchIcon as e, TriggerIcon as c } from "@webstudio-is/icons/svg";
-import { defaultStates as t } from "@webstudio-is/sdk";
+import { SwitchIcon as t, TriggerIcon as c } from "@webstudio-is/icons/svg";
+import { defaultStates as e } from "@webstudio-is/sdk";
 import { button as o, span as a } from "@webstudio-is/sdk/normalize.css";
-import { radix as s } from "./shared/meta.js";
-import { buttonReset as n } from "./shared/preset-styles.js";
+import { radix as n } from "./shared/meta.js";
+import { buttonReset as s } from "./shared/preset-styles.js";
 import { propsSwitch as r, propsSwitchThumb as i } from "./__generated__/switch.props.js";
 const b = {
-  icon: e,
+  icon: t,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [s.SwitchThumb]
+    descendants: [n.SwitchThumb]
   },
   states: [
-    ...t,
+    ...e,
     {
       label: "Checked",
       selector: "[data-state=checked]",
@@ -25,16 +25,18 @@ const b = {
     }
   ],
   presetStyle: {
-    button: [o, n].flat()
-  }
-}, S = {
+    button: [o, s].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "checked", "required"],
+  props: r
+}, k = {
   icon: c,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
   states: [
-    ...t,
+    ...e,
     {
       label: "Checked",
       selector: "[data-state=checked]",
@@ -48,16 +50,10 @@ const b = {
   ],
   presetStyle: {
     span: a
-  }
-}, k = {
-  props: r,
-  initialProps: ["id", "className", "name", "value", "checked", "required"]
-}, f = {
+  },
   props: i
 };
 export {
   b as metaSwitch,
-  S as metaSwitchThumb,
-  k as propsMetaSwitch,
-  f as propsMetaSwitchThumb
+  k as metaSwitchThumb
 };

package/lib/tabs.js

@@ -2,13 +2,13 @@ import { jsx as i } from "react/jsx-runtime";
 import u from "await-interaction-response";
 import { forwardRef as c, useCallback as f } from "react";
 import { useControllableState as b } from "@radix-ui/react-use-controllable-state";
-import { Root as p, List as T, Trigger as d, Content as h } from "@radix-ui/react-tabs";
+import { List as p, Root as T, Trigger as d, Content as h } from "@radix-ui/react-tabs";
 import { getIndexWithinAncestorFromProps as g } from "@webstudio-is/sdk/runtime";
 import { getClosestInstance as l } from "@webstudio-is/react-sdk/runtime";
 const k = c(({ defaultValue: e, ...n }, o) => {
   const [t, a] = b({
     prop: n.value,
-    defaultProp: e,
+    defaultProp: e ?? "",
     onChange: n.onValueChange
   }), s = f(
     async (m) => {
@@ -17,7 +17,7 @@ const k = c(({ defaultValue: e, ...n }, o) => {
     [a]
   );
   return /* @__PURE__ */ i(
-    p,
+    T,
     {
       ref: o,
       ...n,
@@ -25,7 +25,7 @@ const k = c(({ defaultValue: e, ...n }, o) => {
       onValueChange: s
     }
   );
-}), w = T, y = c(({ value: e, ...n }, o) => {
+}), w = p, y = c(({ value: e, ...n }, o) => {
   const t = g(n);
   return /* @__PURE__ */ i(d, { ref: o, value: e ?? t ?? "", ...n });
 }), A = c(({ value: e, ...n }, o) => {

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 u, weights as b, transition as p, 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: ${u.sm};
+  font-weight: ${b.medium};
+  transition: ${p.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};
@@ -43,13 +43,13 @@ const d = a`
       {
         "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") }),

package/lib/tabs.ws.js

@@ -3,28 +3,26 @@ import { defaultStates as a } from "@webstudio-is/sdk";
 import { div as e, button as c } from "@webstudio-is/sdk/normalize.css";
 import { radix as t } from "./shared/meta.js";
 import { buttonReset as i } from "./shared/preset-styles.js";
-import { propsTabs as p, propsTabsList as b, propsTabsTrigger as T, propsTabsContent as l } from "./__generated__/tabs.props.js";
-const M = {
+import { propsTabs as p, propsTabsList as b, propsTabsTrigger as l, propsTabsContent as T } from "./__generated__/tabs.props.js";
+const x = {
   icon: n,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [t.TabsList, t.TabsContent]
   },
-  presetStyle: {
-    div: e
-  }
-}, x = {
+  presetStyle: { div: e },
+  props: p
+}, C = {
   icon: o,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [t.TabsTrigger]
   },
-  presetStyle: {
-    div: e
-  }
-}, C = {
+  presetStyle: { div: e },
+  props: b
+}, S = {
   icon: s,
   label: "Tab Trigger",
   indexWithinAncestor: t.Tabs,
@@ -42,8 +40,9 @@ const M = {
   ],
   presetStyle: {
     button: [c, i].flat()
-  }
-}, S = {
+  },
+  props: l
+}, u = {
   label: "Tab Content",
   icon: r,
   indexWithinAncestor: t.Tabs,
@@ -51,25 +50,12 @@ const M = {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: {
-    div: e
-  }
-}, u = {
-  props: p
-}, I = {
-  props: b
-}, L = {
+  presetStyle: { div: e },
   props: T
-}, v = {
-  props: l
 };
 export {
-  M as metaTabs,
-  S as metaTabsContent,
-  x as metaTabsList,
-  C as metaTabsTrigger,
-  u as propsMetaTabs,
-  v as propsMetaTabsContent,
-  I as propsMetaTabsList,
-  L as propsMetaTabsTrigger
+  x as metaTabs,
+  u as metaTabsContent,
+  C as metaTabsList,
+  S as metaTabsTrigger
 };

package/lib/tooltip.ws.js

@@ -1,43 +1,35 @@
-import { TriggerIcon as t, ContentIcon as n, TooltipIcon as e } from "@webstudio-is/icons/svg";
+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 s } from "./__generated__/tooltip.props.js";
+import { propsTooltip as r, propsTooltipTrigger as p, propsTooltipContent as c } from "./__generated__/tooltip.props.js";
 const g = {
-  icon: t,
+  icon: n,
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
-}, d = {
-  icon: n,
+  },
+  props: p
+}, T = {
+  icon: e,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: {
-    div: i
-  }
+  presetStyle: { div: i },
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+  props: c
 }, m = {
-  icon: e,
+  icon: t,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [o.TooltipTrigger, o.TooltipContent]
-  }
-}, f = {
-  props: r,
-  initialProps: ["open", "delayDuration", "disableHoverableContent"]
-}, C = {
-  props: p
-}, M = {
-  props: s,
-  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+  },
+  initialProps: ["open", "delayDuration", "disableHoverableContent"],
+  props: r
 };
 export {
   m as metaTooltip,
-  d as metaTooltipContent,
-  g as metaTooltipTrigger,
-  f as propsMetaTooltip,
-  M as propsMetaTooltipContent,
-  C as propsMetaTooltipTrigger
+  T as metaTooltipContent,
+  g as metaTooltipTrigger
 };

package/lib/types/__generated__/popover.props.d.ts

@@ -2,3 +2,4 @@ import type { PropMeta } from "@webstudio-is/sdk";
 export declare const propsPopover: Record<string, PropMeta>;
 export declare const propsPopoverTrigger: Record<string, PropMeta>;
 export declare const propsPopoverContent: Record<string, PropMeta>;
+export declare const propsPopoverClose: Record<string, PropMeta>;

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

@@ -1,11 +1,6 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import { type WsComponentMeta } from "@webstudio-is/sdk";
 export declare const metaAccordion: WsComponentMeta;
 export declare const metaAccordionItem: WsComponentMeta;
 export declare const metaAccordionHeader: WsComponentMeta;
 export declare const metaAccordionTrigger: WsComponentMeta;
 export declare const metaAccordionContent: WsComponentMeta;
-export declare const propsMetaAccordion: WsComponentPropsMeta;
-export declare const propsMetaAccordionItem: WsComponentPropsMeta;
-export declare const propsMetaAccordionHeader: WsComponentPropsMeta;
-export declare const propsMetaAccordionTrigger: WsComponentPropsMeta;
-export declare const propsMetaAccordionContent: WsComponentPropsMeta;

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

@@ -1,5 +1,3 @@
-import { type WsComponentMeta, type WsComponentPropsMeta } from "@webstudio-is/sdk";
+import { type WsComponentMeta } from "@webstudio-is/sdk";
 export declare const metaCheckbox: WsComponentMeta;
 export declare const metaCheckboxIndicator: WsComponentMeta;
-export declare const propsMetaCheckbox: WsComponentPropsMeta;
-export declare const propsMetaCheckboxIndicator: WsComponentPropsMeta;

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

@@ -1,7 +1,4 @@
-import type { WsComponentMeta, WsComponentPropsMeta } from "@webstudio-is/sdk";
+import type { WsComponentMeta } from "@webstudio-is/sdk";
 export declare const metaCollapsible: WsComponentMeta;
 export declare const metaCollapsibleTrigger: WsComponentMeta;
 export declare const metaCollapsibleContent: WsComponentMeta;
-export declare const propsMetaCollapsible: WsComponentPropsMeta;
-export declare const propsMetaCollapsibleTrigger: WsComponentPropsMeta;
-export declare const propsMetaCollapsibleContent: WsComponentPropsMeta;