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

package/lib/__generated__/popover.props.js

@@ -53,9 +53,10 @@ const e = {
     type: "string",
     options: ["always", "optimized"]
   }
-};
+}, r = {};
 export {
   e as propsPopover,
+  r as propsPopoverClose,
   t as propsPopoverContent,
   o as propsPopoverTrigger
 };

package/lib/__generated__/tabs.props.js

@@ -30,10 +30,10 @@ Mainly so arrow navigation is done accordingly (left & right vs. up & down)
     options: ["horizontal", "vertical"]
   },
   value: {
+    description: "The value for the selected tab, if controlled",
     required: !1,
     control: "text",
-    type: "string",
-    description: "Current value of the element"
+    type: "string"
   }
 }, t = {
   loop: {

package/lib/accordion.js

@@ -1,37 +1,49 @@
 import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as m } from "react";
-import { Header as f, Trigger as g, Content as p, Root as A, Item as l } from "@radix-ui/react-accordion";
-import { getIndexWithinAncestorFromProps as u } from "@webstudio-is/sdk/runtime";
+import { forwardRef as m, useState as u, useEffect as f } from "react";
+import { Header as l, Trigger as g, Content as A, Root as p, Item as h } from "@radix-ui/react-accordion";
+import { getIndexWithinAncestorFromProps as P } from "@webstudio-is/sdk/runtime";
 import { getClosestInstance as a } from "@webstudio-is/react-sdk/runtime";
-const $ = m((t, o) => /* @__PURE__ */ d(A, { ref: o, type: "single", ...t })), k = m(({ value: t, ...o }, e) => {
-  const n = u(o);
-  return /* @__PURE__ */ d(l, { ref: e, value: t ?? n ?? "", ...o });
-}), v = f, w = g, y = p, c = "@webstudio-is/sdk-components-react-radix", H = {
-  onNavigatorSelect: (t, o) => {
-    var e;
-    for (const n of o.instancePath)
-      if (n.component === `${c}:AccordionContent`) {
-        const i = a(
+const S = m(({ defaultValue: e, ...o }, n) => {
+  const t = o.value ?? e ?? "", [r, c] = u(t);
+  return f(() => c(t), [t]), /* @__PURE__ */ d(
+    p,
+    {
+      ...o,
+      ref: n,
+      type: "single",
+      value: r,
+      onValueChange: c
+    }
+  );
+}), $ = m(({ value: e, ...o }, n) => {
+  const t = P(o);
+  return /* @__PURE__ */ d(h, { ref: n, value: e ?? t ?? "", ...o });
+}), k = l, w = g, y = A, i = "@webstudio-is/sdk-components-react-radix", H = {
+  onNavigatorSelect: (e, o) => {
+    var n;
+    for (const t of o.instancePath)
+      if (t.component === `${i}:AccordionContent`) {
+        const r = a(
           o.instancePath,
-          n,
-          `${c}:Accordion`
-        ), r = a(
+          t,
+          `${i}:Accordion`
+        ), c = a(
           o.instancePath,
-          n,
-          `${c}:AccordionItem`
+          t,
+          `${i}:AccordionItem`
         );
-        if (i && r) {
-          const s = t.getPropValue(r, "value") ?? ((e = t.indexesWithinAncestors.get(r.id)) == null ? void 0 : e.toString());
-          s && t.setMemoryProp(i, "value", s);
+        if (r && c) {
+          const s = e.getPropValue(c, "value") ?? ((n = e.indexesWithinAncestors.get(c.id)) == null ? void 0 : n.toString());
+          s && e.setMemoryProp(r, "value", s);
         }
       }
   }
 };
 export {
-  $ as Accordion,
+  S as Accordion,
   y as AccordionContent,
-  v as AccordionHeader,
-  k as AccordionItem,
+  k as AccordionHeader,
+  $ as AccordionItem,
   w as AccordionTrigger,
   H as hooksAccordion
 };

package/lib/accordion.template.js

@@ -1,7 +1,7 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
 import { $ as o, PlaceholderValue as s, css as t } from "@webstudio-is/template";
 import { radix as i } from "./shared/proxy.js";
-import { height as h, width as m, transition as a, spacing as c, weights as f, fontSize as g, fontSizeLineHeight as p, borderWidth as w, colors as y } from "./shared/theme.js";
+import { height as h, width as m, transition as a, spacing as c, weights as g, fontSize as f, fontSizeLineHeight as p, borderWidth as w, colors as y } from "./shared/theme.js";
 import { ChevronDownIcon as b } from "@webstudio-is/icons/svg";
 const n = (d, l) => /* @__PURE__ */ r(
   i.AccordionItem,
@@ -25,7 +25,7 @@ const n = (d, l) => /* @__PURE__ */ r(
             align-items: center;
             justify-content: between;
             padding: ${c[4]} 0;
-            font-weight: ${f.medium};
+            font-weight: ${g.medium};
             --accordion-trigger-icon-transform: 0deg;
             &:hover {
               text-decoration-line: underline;
@@ -61,7 +61,7 @@ const n = (d, l) => /* @__PURE__ */ r(
         {
           "ws:style": t`
           overflow: hidden;
-          font-size: ${g.sm};
+          font-size: ${f.sm};
           line-height: ${p.sm};
           transition: ${a.all};
           padding-bottom: ${c[4]};
@@ -75,7 +75,7 @@ const n = (d, l) => /* @__PURE__ */ r(
   category: "radix",
   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.",
   order: 3,
-  template: /* @__PURE__ */ r(i.Accordion, { collapsible: !0, defaultValue: "0", children: [
+  template: /* @__PURE__ */ r(i.Accordion, { collapsible: !0, value: "0", children: [
     n(
       "Is it accessible?",
       "Yes. It adheres to the WAI-ARIA design pattern."

package/lib/accordion.ws.js

@@ -1,38 +1,37 @@
 import { AccordionIcon as t, ItemIcon as n, HeaderIcon as r, TriggerIcon as c, ContentIcon as i } from "@webstudio-is/icons/svg";
-import { defaultStates as p } from "@webstudio-is/sdk";
-import { div as e, h3 as a, button as s } from "@webstudio-is/sdk/normalize.css";
-import { radix as o } from "./shared/meta.js";
+import { div as o, h3 as a, button as p } from "@webstudio-is/sdk/normalize.css";
+import { radix as e } from "./shared/meta.js";
 import { buttonReset as d } from "./shared/preset-styles.js";
-import { propsAccordion as l, propsAccordionItem as m, propsAccordionHeader as A, propsAccordionTrigger as g, propsAccordionContent as y } from "./__generated__/accordion.props.js";
+import { propsAccordion as s, propsAccordionItem as l, propsAccordionHeader as m, propsAccordionTrigger as g, propsAccordionContent as A } from "./__generated__/accordion.props.js";
 const v = {
   icon: t,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [o.AccordionItem]
+    descendants: [e.AccordionItem]
   },
-  presetStyle: {
-    div: e
-  }
+  presetStyle: { div: o },
+  initialProps: ["value", "collapsible"],
+  props: s
 }, x = {
   label: "Item",
   icon: n,
-  indexWithinAncestor: o.Accordion,
+  indexWithinAncestor: e.Accordion,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [o.AccordionHeader, o.AccordionContent]
+    descendants: [e.AccordionHeader, e.AccordionContent]
   },
-  presetStyle: {
-    div: e
-  }
-}, C = {
+  presetStyle: { div: o },
+  initialProps: ["value"],
+  props: l
+}, f = {
   label: "Item Header",
   icon: r,
   contentModel: {
     category: "none",
     children: ["instance"],
-    descendants: [o.AccordionTrigger]
+    descendants: [e.AccordionTrigger]
   },
   presetStyle: {
     h3: [
@@ -46,26 +45,21 @@ const v = {
         value: { type: "unit", unit: "px", value: 0 }
       }
     ]
-  }
-}, H = {
+  },
+  props: m
+}, C = {
   label: "Item Trigger",
   icon: c,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: [
-    ...p,
-    {
-      category: "component-states",
-      label: "Open",
-      selector: "[data-state=open]"
-    }
-  ],
+  states: [{ label: "Open", selector: "[data-state=open]" }],
   presetStyle: {
-    button: [s, d].flat()
-  }
-}, S = {
+    button: [p, d].flat()
+  },
+  props: g
+}, H = {
   label: "Item Content",
   icon: i,
   contentModel: {
@@ -73,30 +67,14 @@ const v = {
     children: ["instance", "rich-text"]
   },
   presetStyle: {
-    div: e
-  }
-}, T = {
-  props: l,
-  initialProps: ["value", "collapsible"]
-}, P = {
-  props: m,
-  initialProps: ["value"]
-}, O = {
+    div: o
+  },
   props: A
-}, R = {
-  props: g
-}, W = {
-  props: y
 };
 export {
   v as metaAccordion,
-  S as metaAccordionContent,
-  C as metaAccordionHeader,
+  H as metaAccordionContent,
+  f as metaAccordionHeader,
   x as metaAccordionItem,
-  H as metaAccordionTrigger,
-  T as propsMetaAccordion,
-  W as propsMetaAccordionContent,
-  O as propsMetaAccordionHeader,
-  P as propsMetaAccordionItem,
-  R as propsMetaAccordionTrigger
+  C as metaAccordionTrigger
 };

package/lib/checkbox.js

@@ -1,8 +1,19 @@
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { Indicator as m, Root as d } from "@radix-ui/react-checkbox";
-const p = f(({ checked: o, defaultChecked: r, ...t }, e) => /* @__PURE__ */ c(d, { ...t, ref: e, defaultChecked: o ?? r })), x = m;
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as h, useState as s, useEffect as k } from "react";
+import { Indicator as a, Root as m } from "@radix-ui/react-checkbox";
+const x = h(({ defaultChecked: c, ...o }, r) => {
+  const e = o.checked ?? c ?? !1, [n, t] = s(e);
+  return k(() => t(e), [e]), /* @__PURE__ */ f(
+    m,
+    {
+      ...o,
+      ref: r,
+      checked: n,
+      onCheckedChange: (d) => t(d === !0)
+    }
+  );
+}), b = a;
 export {
-  p as Checkbox,
-  x as CheckboxIndicator
+  x as Checkbox,
+  b as CheckboxIndicator
 };

package/lib/checkbox.ws.js

@@ -1,51 +1,36 @@
-import { CheckboxCheckedIcon as t, TriggerIcon as o } from "@webstudio-is/icons/svg";
-import { defaultStates as e } from "@webstudio-is/sdk";
-import { button as c, span as n } from "@webstudio-is/sdk/normalize.css";
-import { radix as r } from "./shared/meta.js";
-import { buttonReset as a } from "./shared/preset-styles.js";
-import { propsCheckbox as s, propsCheckboxIndicator as i } from "./__generated__/checkbox.props.js";
-const b = {
-  icon: t,
+import { CheckboxCheckedIcon as e, TriggerIcon as t } from "@webstudio-is/icons/svg";
+import { button as o, span as c } from "@webstudio-is/sdk/normalize.css";
+import { radix as n } from "./shared/meta.js";
+import { buttonReset as r } from "./shared/preset-styles.js";
+import { propsCheckbox as a, propsCheckboxIndicator as s } from "./__generated__/checkbox.props.js";
+const m = {
+  icon: e,
   contentModel: {
     category: "instance",
     children: ["instance"],
-    descendants: [r.CheckboxIndicator]
+    descendants: [n.CheckboxIndicator]
   },
   states: [
-    ...e,
-    {
-      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, a].flat()
-  }
-}, x = {
-  icon: o,
+    button: [o, r].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: a
+}, k = {
+  icon: t,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
   },
-  states: e,
   presetStyle: {
-    span: n
-  }
-}, C = {
-  props: s,
-  initialProps: ["id", "className", "name", "value", "required", "checked"]
-}, f = {
-  props: i
+    span: c
+  },
+  props: s
 };
 export {
-  b as metaCheckbox,
-  x as metaCheckboxIndicator,
-  C as propsMetaCheckbox,
-  f as propsMetaCheckboxIndicator
+  m as metaCheckbox,
+  k as metaCheckboxIndicator
 };

package/lib/collapsible.js

@@ -1,37 +1,40 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as r, Children as a } from "react";
-import { Root as c, Content as p, Trigger as C } from "@radix-ui/react-collapsible";
-import { getClosestInstance as l } from "@webstudio-is/react-sdk/runtime";
-const h = c, g = r(({ children: e, ...o }, t) => {
-  const n = a.toArray(e)[0];
-  return /* @__PURE__ */ i(C, { asChild: !0, ref: t, ...o, children: n ?? /* @__PURE__ */ i("button", { children: "Add button" }) });
-}), u = p, s = "@webstudio-is/sdk-components-react-radix", P = {
-  onNavigatorSelect: (e, o) => {
-    for (const t of o.instancePath)
-      if (t.component === `${s}:CollapsibleContent`) {
-        const n = l(
-          o.instancePath,
-          t,
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as a, useState as c, useEffect as p, Children as f } from "react";
+import { Content as C, Root as m, Trigger as b } from "@radix-ui/react-collapsible";
+import { getClosestInstance as r } from "@webstudio-is/react-sdk/runtime";
+const P = a((n, t) => {
+  const o = n.open ?? !1, [e, i] = c(o);
+  return p(() => i(o), [o]), /* @__PURE__ */ l(m, { ...n, ref: t, open: e, onOpenChange: i });
+}), $ = a(({ children: n, ...t }, o) => {
+  const e = f.toArray(n)[0];
+  return /* @__PURE__ */ l(b, { asChild: !0, ref: o, ...t, children: e ?? /* @__PURE__ */ l("button", { children: "Add button" }) });
+}), x = C, s = "@webstudio-is/sdk-components-react-radix", y = {
+  onNavigatorSelect: (n, t) => {
+    for (const o of t.instancePath)
+      if (o.component === `${s}:CollapsibleContent`) {
+        const e = r(
+          t.instancePath,
+          o,
           `${s}:Collapsible`
         );
-        n && e.setMemoryProp(n, "open", !0);
+        e && n.setMemoryProp(e, "open", !0);
       }
   },
-  onNavigatorUnselect: (e, o) => {
-    for (const t of o.instancePath)
-      if (t.component === `${s}:CollapsibleContent`) {
-        const n = l(
-          o.instancePath,
-          t,
+  onNavigatorUnselect: (n, t) => {
+    for (const o of t.instancePath)
+      if (o.component === `${s}:CollapsibleContent`) {
+        const e = r(
+          t.instancePath,
+          o,
           `${s}:Collapsible`
         );
-        n && e.setMemoryProp(n, "open", void 0);
+        e && n.setMemoryProp(e, "open", void 0);
       }
   }
 };
 export {
-  h as Collapsible,
-  u as CollapsibleContent,
-  g as CollapsibleTrigger,
-  P as hooksCollapsible
+  P as Collapsible,
+  x as CollapsibleContent,
+  $ as CollapsibleTrigger,
+  y as hooksCollapsible
 };

package/lib/collapsible.ws.js

@@ -1,7 +1,7 @@
 import { CollapsibleIcon as n, TriggerIcon as t, ContentIcon as l } from "@webstudio-is/icons/svg";
 import { div as o } from "@webstudio-is/sdk/normalize.css";
 import { radix as e } from "./shared/meta.js";
-import { propsCollapsible as r, propsCollapsibleTrigger as p, propsCollapsibleContent as i } from "./__generated__/collapsible.props.js";
+import { propsCollapsible as r, propsCollapsibleTrigger as i, propsCollapsibleContent as p } from "./__generated__/collapsible.props.js";
 const g = {
   icon: n,
   contentModel: {
@@ -11,13 +11,16 @@ const g = {
   },
   presetStyle: {
     div: o
-  }
-}, b = {
+  },
+  initialProps: ["open"],
+  props: r
+}, m = {
   icon: t,
   contentModel: {
     category: "none",
     children: ["instance", "rich-text"]
-  }
+  },
+  props: i
 }, d = {
   icon: l,
   contentModel: {
@@ -26,27 +29,11 @@ const g = {
   },
   presetStyle: {
     div: o
-  }
-}, m = {
-  props: {
-    ...r,
-    onOpenChange: {
-      type: "action",
-      control: "action",
-      required: !1
-    }
   },
-  initialProps: ["open", "onOpenChange"]
-}, h = {
   props: p
-}, y = {
-  props: i
 };
 export {
   g as metaCollapsible,
   d as metaCollapsibleContent,
-  b as metaCollapsibleTrigger,
-  m as propsMetaCollapsible,
-  y as propsMetaCollapsibleContent,
-  h as propsMetaCollapsibleTrigger
+  m as metaCollapsibleTrigger
 };

package/lib/components.js

@@ -1,23 +1,23 @@
 import { Collapsible as t, CollapsibleContent as r, CollapsibleTrigger as i } from "./collapsible.js";
 import { Dialog as a, DialogClose as l, DialogContent as g, DialogDescription as p, DialogOverlay as c, DialogTitle as m, DialogTrigger as T } from "./dialog.js";
-import { Popover as C, PopoverContent as d, PopoverTrigger as f } from "./popover.js";
-import { Tooltip as b, TooltipContent as s, TooltipTrigger as v } from "./tooltip.js";
-import { Tabs as I, TabsContent as D, TabsList as M, TabsTrigger as N } from "./tabs.js";
-import { Label as A } from "./label.js";
-import { Accordion as L, AccordionContent as k, AccordionHeader as G, AccordionItem as P, AccordionTrigger as R } from "./accordion.js";
-import { NavigationMenu as y, NavigationMenuContent as H, NavigationMenuItem as O, NavigationMenuLink as j, NavigationMenuList as q, NavigationMenuTrigger as z, NavigationMenuViewport as B } from "./navigation-menu.js";
-import { Select as F, SelectContent as J, SelectItem as K, SelectItemIndicator as Q, SelectItemText as U, SelectTrigger as W, SelectValue as X, SelectViewport as Y } from "./select.js";
-import { Switch as _, SwitchThumb as $ } from "./switch.js";
-import { Checkbox as eo, CheckboxIndicator as to } from "./checkbox.js";
-import { RadioGroup as io, RadioGroupIndicator as no, RadioGroupItem as ao } from "./radio-group.js";
+import { Popover as C, PopoverClose as d, PopoverContent as f, PopoverTrigger as s } from "./popover.js";
+import { Tooltip as v, TooltipContent as b, TooltipTrigger as S } from "./tooltip.js";
+import { Tabs as D, TabsContent as M, TabsList as N, TabsTrigger as h } from "./tabs.js";
+import { Label as w } from "./label.js";
+import { Accordion as P, AccordionContent as k, AccordionHeader as G, AccordionItem as R, AccordionTrigger as V } from "./accordion.js";
+import { NavigationMenu as H, NavigationMenuContent as O, NavigationMenuItem as j, NavigationMenuLink as q, NavigationMenuList as z, NavigationMenuTrigger as B, NavigationMenuViewport as E } from "./navigation-menu.js";
+import { Select as J, SelectContent as K, SelectItem as Q, SelectItemIndicator as U, SelectItemText as W, SelectTrigger as X, SelectValue as Y, SelectViewport as Z } from "./select.js";
+import { Switch as $, SwitchThumb as oo } from "./switch.js";
+import { Checkbox as to, CheckboxIndicator as ro } from "./checkbox.js";
+import { RadioGroup as no, RadioGroupIndicator as ao, RadioGroupItem as lo } from "./radio-group.js";
 export {
-  L as Accordion,
+  P as Accordion,
   k as AccordionContent,
   G as AccordionHeader,
-  P as AccordionItem,
-  R as AccordionTrigger,
-  eo as Checkbox,
-  to as CheckboxIndicator,
+  R as AccordionItem,
+  V as AccordionTrigger,
+  to as Checkbox,
+  ro as CheckboxIndicator,
   t as Collapsible,
   r as CollapsibleContent,
   i as CollapsibleTrigger,
@@ -28,35 +28,36 @@ export {
   c as DialogOverlay,
   m as DialogTitle,
   T as DialogTrigger,
-  A as Label,
-  y as NavigationMenu,
-  H as NavigationMenuContent,
-  O as NavigationMenuItem,
-  j as NavigationMenuLink,
-  q as NavigationMenuList,
-  z as NavigationMenuTrigger,
-  B as NavigationMenuViewport,
+  w as Label,
+  H as NavigationMenu,
+  O as NavigationMenuContent,
+  j as NavigationMenuItem,
+  q as NavigationMenuLink,
+  z as NavigationMenuList,
+  B as NavigationMenuTrigger,
+  E as NavigationMenuViewport,
   C as Popover,
-  d as PopoverContent,
-  f as PopoverTrigger,
-  io as RadioGroup,
-  no as RadioGroupIndicator,
-  ao as RadioGroupItem,
-  F as Select,
-  J as SelectContent,
-  K as SelectItem,
-  Q as SelectItemIndicator,
-  U as SelectItemText,
-  W as SelectTrigger,
-  X as SelectValue,
-  Y as SelectViewport,
-  _ as Switch,
-  $ as SwitchThumb,
-  I as Tabs,
-  D as TabsContent,
-  M as TabsList,
-  N as TabsTrigger,
-  b as Tooltip,
-  s as TooltipContent,
-  v as TooltipTrigger
+  d as PopoverClose,
+  f as PopoverContent,
+  s as PopoverTrigger,
+  no as RadioGroup,
+  ao as RadioGroupIndicator,
+  lo as RadioGroupItem,
+  J as Select,
+  K as SelectContent,
+  Q as SelectItem,
+  U as SelectItemIndicator,
+  W as SelectItemText,
+  X as SelectTrigger,
+  Y as SelectValue,
+  Z as SelectViewport,
+  $ as Switch,
+  oo as SwitchThumb,
+  D as Tabs,
+  M as TabsContent,
+  N as TabsList,
+  h as TabsTrigger,
+  v as Tooltip,
+  b as TooltipContent,
+  S as TooltipTrigger
 };