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

package/lib/navigation-menu.ws.js

@@ -1,8 +1,8 @@
-import { NavigationMenuIcon as t, ListIcon as o, ListItemIcon as i, TriggerIcon as a, ContentIcon as r, BoxIcon as s, ViewportIcon as c } from "@webstudio-is/icons/svg";
+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 u, propsNavigationMenuContent as l, propsNavigationMenuLink as v, propsNavigationMenuViewport as N } from "./__generated__/navigation-menu.props.js";
-const y = {
+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 = {
   icon: t,
   contentModel: {
     category: "instance",
@@ -11,7 +11,8 @@ const y = {
   },
   presetStyle: {
     div: e
-  }
+  },
+  props: p
 }, h = {
   icon: o,
   label: "Menu List",
@@ -22,7 +23,8 @@ const y = {
   },
   presetStyle: {
     div: e
-  }
+  },
+  props: g
 }, b = {
   icon: i,
   label: "Menu Item",
@@ -38,14 +40,16 @@ const y = {
   },
   presetStyle: {
     div: e
-  }
+  },
+  props: M
 }, k = {
   icon: a,
   label: "Menu Trigger",
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
+  },
+  props: l
 }, w = {
   icon: r,
   label: "Menu Content",
@@ -56,16 +60,18 @@ const y = {
   },
   presetStyle: {
     div: e
-  }
+  },
+  props: u
 }, C = {
-  icon: s,
+  icon: c,
   label: "Accessible Link Wrapper",
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
-}, T = {
-  icon: c,
+  },
+  props: d
+}, S = {
+  icon: s,
   label: "Menu Viewport",
   contentModel: {
     category: "none",
@@ -73,35 +79,15 @@ const y = {
   },
   presetStyle: {
     div: e
-  }
-}, V = {
-  props: p
-}, S = {
-  props: M
-}, f = {
-  props: u
-}, x = {
-  props: l
-}, A = {
+  },
   props: v
-}, W = {
-  props: g
-}, B = {
-  props: N
 };
 export {
-  y as metaNavigationMenu,
+  L as metaNavigationMenu,
   w as metaNavigationMenuContent,
   b as metaNavigationMenuItem,
   C as metaNavigationMenuLink,
   h as metaNavigationMenuList,
   k as metaNavigationMenuTrigger,
-  T as metaNavigationMenuViewport,
-  V as propsMetaNavigationMenu,
-  x as propsMetaNavigationMenuContent,
-  S as propsMetaNavigationMenuItem,
-  A as propsMetaNavigationMenuLink,
-  W as propsMetaNavigationMenuList,
-  f as propsMetaNavigationMenuTrigger,
-  B as propsMetaNavigationMenuViewport
+  S as metaNavigationMenuViewport
 };

package/lib/popover.js

@@ -1,48 +1,49 @@
 import { jsx as n } from "react/jsx-runtime";
 import { forwardRef as c, Children as P } from "react";
-import * as s from "@radix-ui/react-popover";
-import { getClosestInstance as a } from "@webstudio-is/react-sdk/runtime";
-const l = c((o, t) => /* @__PURE__ */ n(s.Root, { ...o })), v = c(({ children: o, ...t }, e) => {
+import * as i from "@radix-ui/react-popover";
+import { getClosestInstance as p } from "@webstudio-is/react-sdk/runtime";
+const v = c((o, t) => /* @__PURE__ */ n(i.Root, { ...o })), d = c(({ children: o, ...t }, e) => {
   const r = P.toArray(o)[0];
-  return /* @__PURE__ */ n(s.Trigger, { asChild: !0, ref: e, ...t, children: r ?? /* @__PURE__ */ n("button", { children: "Add button or link" }) });
+  return /* @__PURE__ */ n(i.Trigger, { asChild: !0, ref: e, ...t, children: r ?? /* @__PURE__ */ n("button", { children: "Add button or link" }) });
 }), h = c(
-  ({ sideOffset: o = 4, align: t = "center", hideWhenDetached: e = !0, ...r }, p) => /* @__PURE__ */ n(s.Portal, { children: /* @__PURE__ */ n(
-    s.Content,
+  ({ sideOffset: o = 4, align: t = "center", hideWhenDetached: e = !0, ...r }, a) => /* @__PURE__ */ n(i.Portal, { children: /* @__PURE__ */ n(
+    i.Content,
     {
-      ref: p,
+      ref: a,
       align: "center",
       sideOffset: o,
       hideWhenDetached: e,
       ...r
     }
   ) })
-), i = "@webstudio-is/sdk-components-react-radix", g = {
+), C = i.Close, s = "@webstudio-is/sdk-components-react-radix", g = {
   onNavigatorUnselect: (o, t) => {
     for (const e of t.instancePath)
-      if (e.component === `${i}:PopoverContent`) {
-        const r = a(
+      if (e.component === `${s}:PopoverContent`) {
+        const r = p(
           t.instancePath,
           e,
-          `${i}:Popover`
+          `${s}:Popover`
         );
         r && o.setMemoryProp(r, "open", void 0);
       }
   },
   onNavigatorSelect: (o, t) => {
     for (const e of t.instancePath)
-      if (e.component === `${i}:PopoverContent`) {
-        const r = a(
+      if (e.component === `${s}:PopoverContent`) {
+        const r = p(
           t.instancePath,
           e,
-          `${i}:Popover`
+          `${s}:Popover`
         );
         r && o.setMemoryProp(r, "open", !0);
       }
   }
 };
 export {
-  l as Popover,
+  v as Popover,
+  C as PopoverClose,
   h as PopoverContent,
-  v as PopoverTrigger,
+  d as PopoverTrigger,
   g as hooksPopover
 };

package/lib/popover.template.js

@@ -1,33 +1,63 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { $ as t, PlaceholderValue as d, css as n } from "@webstudio-is/template";
-import { radix as r } from "./shared/proxy.js";
-import { getButtonStyle as l } from "./shared/styles.js";
-import { zIndex as a, width as p, borderRadius as s, borderWidth as c, colors as e, spacing as m, boxShadow as h } from "./shared/theme.js";
-const w = {
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { LargeXIcon as p } from "@webstudio-is/icons/svg";
+import { $ as r, PlaceholderValue as d, css as l } from "@webstudio-is/template";
+import { radix as e } from "./shared/proxy.js";
+import { getButtonStyle as h } from "./shared/styles.js";
+import { spacing as t, borderRadius as s, height as a, opacity as m, boxShadow as c, zIndex as b, width as u, borderWidth as g, colors as i } from "./shared/theme.js";
+const P = {
   category: "radix",
   description: "Displays rich content in a portal, triggered by a button.",
   order: 6,
-  template: /* @__PURE__ */ i(r.Popover, { children: [
-    /* @__PURE__ */ o(r.PopoverTrigger, { children: /* @__PURE__ */ o(t.Button, { "ws:style": l("outline"), children: new d("Button") }) }),
-    /* @__PURE__ */ o(
-      r.PopoverContent,
+  template: /* @__PURE__ */ n(e.Popover, { children: [
+    /* @__PURE__ */ o(e.PopoverTrigger, { children: /* @__PURE__ */ o(r.Button, { "ws:style": h("outline"), children: new d("Button") }) }),
+    /* @__PURE__ */ n(
+      e.PopoverContent,
       {
-        "ws:style": n`
-          z-index: ${a[50]};
-          width: ${p[72]};
+        "ws:style": l`
+          z-index: ${b[50]};
+          width: ${u[72]};
           border-radius: ${s.md};
-          border: ${c.DEFAULT} solid ${e.border};
-          background-color: ${e.popover};
-          padding: ${m[4]};
-          color: ${e.popoverForeground};
-          box-shadow: ${h.md};
+          border: ${g.DEFAULT} solid ${i.border};
+          background-color: ${i.popover};
+          padding: ${t[4]};
+          color: ${i.popoverForeground};
+          box-shadow: ${c.md};
           outline: none;
         `,
-        children: /* @__PURE__ */ o(t.Text, { children: new d("The text you can edit") })
+        children: [
+          /* @__PURE__ */ o(r.Text, { children: new d("The text you can edit") }),
+          /* @__PURE__ */ o(
+            e.PopoverClose,
+            {
+              "ws:label": "Close Button",
+              "ws:style": l`
+            position: absolute;
+            right: ${t[4]};
+            top: ${t[4]};
+            border-radius: ${s.sm};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: ${a[4]};
+            width: ${a[4]};
+            border: 0;
+            background-color: transparent;
+            outline: none;
+            &:hover {
+              opacity: ${m[100]};
+            }
+            &:focus-visible {
+              box-shadow: ${c.ring};
+            }
+          `,
+              children: /* @__PURE__ */ o(r.HtmlEmbed, { "ws:label": "Close Icon", code: p })
+            }
+          )
+        ]
       }
     )
   ] })
 };
 export {
-  w as meta
+  P as meta
 };

package/lib/popover.ws.js

@@ -1,43 +1,53 @@
-import { PopoverIcon as e, TriggerIcon as n, ContentIcon as r } from "@webstudio-is/icons/svg";
-import { div as t } from "@webstudio-is/sdk/normalize.css";
+import { PopoverIcon as e, TriggerIcon as t, ContentIcon as n, ButtonElementIcon as r } from "@webstudio-is/icons/svg";
+import { defaultStates as p } from "@webstudio-is/sdk";
+import { div as s, button as i } from "@webstudio-is/sdk/normalize.css";
 import { radix as o } from "./shared/meta.js";
-import { propsPopover as p, propsPopoverTrigger as i, propsPopoverContent as s } from "./__generated__/popover.props.js";
-const v = {
-  icon: n,
+import { propsPopover as c, propsPopoverTrigger as a, propsPopoverContent as l, propsPopoverClose as d } from "./__generated__/popover.props.js";
+import { buttonReset as m } from "./shared/preset-styles.js";
+const y = {
+  icon: t,
   contentModel: {
     category: "none",
     children: ["instance"]
-  }
-}, d = {
-  icon: r,
+  },
+  props: a
+}, h = {
+  icon: n,
   contentModel: {
     category: "none",
-    children: ["instance"]
+    children: ["instance"],
+    descendants: [o.PopoverClose]
   },
   presetStyle: {
-    div: t
-  }
-}, l = {
+    div: s
+  },
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+  props: l
+}, b = {
   icon: e,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [o.PopoverTrigger, o.PopoverContent]
-  }
-}, m = {
-  props: p,
-  initialProps: ["open"]
-}, f = {
-  props: i
-}, M = {
-  props: s,
-  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+  },
+  initialProps: ["open"],
+  props: c
+}, I = {
+  icon: r,
+  label: "Close Button",
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  states: p,
+  presetStyle: {
+    button: [m, i].flat()
+  },
+  props: d
 };
 export {
-  l as metaPopover,
-  d as metaPopoverContent,
-  v as metaPopoverTrigger,
-  m as propsMetaPopover,
-  M as propsMetaPopoverContent,
-  f as propsMetaPopoverTrigger
+  b as metaPopover,
+  I as metaPopoverClose,
+  h as metaPopoverContent,
+  y as metaPopoverTrigger
 };

package/lib/radio-group.js

@@ -1,9 +1,16 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { Item as d, Indicator as p, Root as e } from "@radix-ui/react-radio-group";
-const u = m(({ value: o, defaultValue: r, ...t }, a) => /* @__PURE__ */ i(e, { ...t, defaultValue: o ?? r, ref: a })), R = d, s = p;
+import { jsx as m } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { Item as i, Indicator as p, Root as u } from "@radix-ui/react-radio-group";
+import { useControllableState as d } from "@radix-ui/react-use-controllable-state";
+const R = n(({ defaultValue: r, ...o }, t) => {
+  const [a, e] = d({
+    prop: o.value ?? r ?? "",
+    defaultProp: ""
+  });
+  return /* @__PURE__ */ m(u, { ...o, value: a, onValueChange: e, ref: t });
+}), I = i, G = p;
 export {
-  u as RadioGroup,
-  s as RadioGroupIndicator,
-  R as RadioGroupItem
+  R as RadioGroup,
+  G as RadioGroupIndicator,
+  I as RadioGroupItem
 };

package/lib/radio-group.ws.js

@@ -1,18 +1,18 @@
-import { RadioGroupIcon as e, ItemIcon as a, TriggerIcon as r } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/sdk";
-import { div as n, button as s, span as c } from "@webstudio-is/sdk/normalize.css";
-import { radix as t } from "./shared/meta.js";
-import { buttonReset as p } from "./shared/preset-styles.js";
-import { propsRadioGroup as i, propsRadioGroupItem as d, propsRadioGroupIndicator as m } from "./__generated__/radio-group.props.js";
+import { RadioGroupIcon as o, ItemIcon as r, TriggerIcon as a } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { div as n, button as c, span as s } from "@webstudio-is/sdk/normalize.css";
+import { radix as e } from "./shared/meta.js";
+import { buttonReset as i } from "./shared/preset-styles.js";
+import { propsRadioGroup as p, propsRadioGroupItem as d, propsRadioGroupIndicator as l } from "./__generated__/radio-group.props.js";
 const y = {
-  icon: e,
+  icon: o,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [t.RadioGroupItem]
+    descendants: [e.RadioGroupItem]
   },
   states: [
-    ...o,
+    ...t,
     {
       label: "Checked",
       selector: "[data-state=checked]",
@@ -26,42 +26,36 @@ const y = {
   ],
   presetStyle: {
     div: n
-  }
+  },
+  initialProps: ["id", "class", "name", "value", "required"],
+  props: p
 }, g = {
-  icon: a,
+  icon: r,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [t.RadioGroupIndicator]
+    descendants: [e.RadioGroupIndicator]
   },
-  states: o,
+  states: t,
   presetStyle: {
-    button: [s, p].flat()
-  }
+    button: [c, i].flat()
+  },
+  initialProps: ["value"],
+  props: d
 }, h = {
-  icon: r,
+  icon: a,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  states: o,
+  states: t,
   presetStyle: {
-    span: c
-  }
-}, M = {
-  props: i,
-  initialProps: ["id", "className", "name", "value", "required"]
-}, b = {
-  props: d,
-  initialProps: ["value"]
-}, k = {
-  props: m
+    span: s
+  },
+  props: l
 };
 export {
   y as metaRadioGroup,
   h as metaRadioGroupIndicator,
-  g as metaRadioGroupItem,
-  M as propsMetaRadioGroup,
-  k as propsMetaRadioGroupIndicator,
-  b as propsMetaRadioGroupItem
+  g as metaRadioGroupItem
 };

package/lib/select.ws.js

@@ -1,44 +1,44 @@
-import { SelectIcon as o, TriggerIcon as c, FormTextFieldIcon as r, ViewportIcon as l, ContentIcon as p, ItemIcon as s, CheckMarkIcon as a, TextIcon as i } from "@webstudio-is/icons/svg";
-import { button as S, span as t, div as n } from "@webstudio-is/sdk/normalize.css";
+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 { 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 d, propsSelectTrigger as m, propsSelectValue as I, propsSelectViewport as g, propsSelectContent as M, propsSelectItem as y, propsSelectItemIndicator as T, propsSelectItemText as h } from "./__generated__/select.props.js";
-const w = {
+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 = {
   icon: o,
   contentModel: {
     category: "instance",
     children: ["instance"],
     descendants: [e.SelectTrigger, e.SelectContent]
-  }
-}, b = {
+  },
+  initialProps: ["name", "value", "open", "required"],
+  props: S
+}, f = {
   icon: c,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [e.SelectValue]
   },
-  presetStyle: {
-    button: S
-  }
-}, f = {
+  presetStyle: { button: d },
+  props: m
+}, w = {
   label: "Value",
   icon: r,
   contentModel: {
     category: "none",
     children: []
   },
-  presetStyle: {
-    span: t
-  }
+  presetStyle: { span: t },
+  initialProps: ["placeholder"],
+  props: I
 }, v = {
-  icon: p,
+  icon: i,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [e.SelectViewport]
   },
-  presetStyle: {
-    div: n
-  }
+  presetStyle: { div: n },
+  props: y
 }, P = {
   icon: l,
   contentModel: {
@@ -46,74 +46,44 @@ const w = {
     children: ["instance"],
     descendants: [e.SelectItem]
   },
-  presetStyle: {
-    div: n
-  }
+  presetStyle: { div: n },
+  props: g
 }, k = {
-  icon: s,
+  icon: p,
   contentModel: {
     category: "none",
     children: ["instance"],
     descendants: [e.SelectItemIndicator, e.SelectItemText]
   },
-  presetStyle: {
-    div: n
-  }
+  presetStyle: { div: n },
+  initialProps: ["value"],
+  props: h
 }, F = {
   label: "Indicator",
-  icon: a,
+  icon: s,
   contentModel: {
     category: "none",
     children: ["instance"]
   },
-  presetStyle: {
-    span: t
-  }
+  presetStyle: { span: t },
+  props: T
 }, q = {
   label: "Item Text",
-  icon: i,
+  icon: a,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  presetStyle: {
-    span: t
-  }
-}, j = {
-  props: d,
-  initialProps: ["name", "value", "open", "required"]
-}, z = {
-  props: m
-}, A = {
-  props: I,
-  initialProps: ["placeholder"]
-}, B = {
-  props: M
-}, D = {
-  props: g
-}, E = {
-  props: y,
-  initialProps: ["value"]
-}, G = {
-  props: T
-}, H = {
-  props: h
+  presetStyle: { span: t },
+  props: x
 };
 export {
-  w as metaSelect,
+  b as metaSelect,
   v as metaSelectContent,
   k as metaSelectItem,
   F as metaSelectItemIndicator,
   q as metaSelectItemText,
-  b as metaSelectTrigger,
-  f as metaSelectValue,
-  P as metaSelectViewport,
-  j as propsMetaSelect,
-  B as propsMetaSelectContent,
-  E as propsMetaSelectItem,
-  G as propsMetaSelectItemIndicator,
-  H as propsMetaSelectItemText,
-  z as propsMetaSelectTrigger,
-  A as propsMetaSelectValue,
-  D as propsMetaSelectViewport
+  f as metaSelectTrigger,
+  w as metaSelectValue,
+  P as metaSelectViewport
 };

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 { Thumb as c, Root as h } from "@radix-ui/react-switch";
-const d = f(({ defaultChecked: o, checked: r, ...t }, m) => /* @__PURE__ */ e(h, { ...t, ref: m, defaultChecked: r ?? o })), n = c;
+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
 };