@webstudio-is/sdk-components-react-radix 0.0.0-5844e28 → 0.0.0-73cd6ea

package/lib/accordion.template.js

@@ -1,13 +1,13 @@
 import { jsxs as r, jsx as e } from "react/jsx-runtime";
-import { css as t, $ as o, PlaceholderValue as s } from "@webstudio-is/template";
+import { $ as o, PlaceholderValue as s, css as t } from "@webstudio-is/template";
 import { radix as i } from "./shared/proxy.js";
-import { borderWidth as h, colors as m, spacing as a, weights as f, height as g, width as p, transition as c, fontSize as w, fontSizeLineHeight 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,
   {
     "ws:style": t`
-        border-bottom: ${h.DEFAULT} solid ${m.border};
+        border-bottom: ${w.DEFAULT} solid ${y.border};
       `,
     children: [
       /* @__PURE__ */ e(
@@ -24,8 +24,8 @@ const n = (d, l) => /* @__PURE__ */ r(
             flex: 1 1 0;
             align-items: center;
             justify-content: between;
-            padding: ${a[4]} 0;
-            font-weight: ${f.medium};
+            padding: ${c[4]} 0;
+            font-weight: ${g.medium};
             --accordion-trigger-icon-transform: 0deg;
             &:hover {
               text-decoration-line: underline;
@@ -41,11 +41,11 @@ const n = (d, l) => /* @__PURE__ */ r(
                   {
                     "ws:label": "Icon Container",
                     "ws:style": t`
-              rotate: --accordion-trigger-icon-transform;
-              height: ${g[4]};
-              width: ${p[4]};
+              rotate: var(--accordion-trigger-icon-transform);
+              height: ${h[4]};
+              width: ${m[4]};
               flex-shrink: 0;
-              transition: ${c.all};
+              transition: ${a.all};
               transition-duration: 200ms;
             `,
                     children: /* @__PURE__ */ e(o.HtmlEmbed, { "ws:label": "Chevron Icon", code: b })
@@ -61,10 +61,10 @@ const n = (d, l) => /* @__PURE__ */ r(
         {
           "ws:style": t`
           overflow: hidden;
-          font-size: ${w.sm};
-          line-height: ${y.sm};
-          transition: ${c.all};
-          padding-bottom: ${a[4]};
+          font-size: ${f.sm};
+          line-height: ${p.sm};
+          transition: ${a.all};
+          padding-bottom: ${c[4]};
         `,
           children: new s(l)
         }
@@ -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,117 +1,80 @@
-import { AccordionIcon as t, ItemIcon as e, HeaderIcon as n, TriggerIcon as r, ContentIcon as c } from "@webstudio-is/icons/svg";
-import { defaultStates as i } from "@webstudio-is/sdk";
-import { h3 as a, button as p, div as s } from "@webstudio-is/sdk/normalize.css";
+import { AccordionIcon as t, ItemIcon as n, HeaderIcon as r, TriggerIcon as c, ContentIcon as i } from "@webstudio-is/icons/svg";
+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 m, propsAccordionItem as l, propsAccordionHeader as A, propsAccordionTrigger as I, propsAccordionContent as g } from "./__generated__/accordion.props.js";
-const o = {
-  div: s
-}, f = {
-  type: "container",
+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,
-  presetStyle: o,
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: "AccordionItem" }
-    }
-  ]
-}, v = {
-  type: "container",
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [e.AccordionItem]
+  },
+  presetStyle: { div: o },
+  initialProps: ["value", "collapsible"],
+  props: s
+}, x = {
   label: "Item",
-  icon: e,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: "Accordion" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "AccordionHeader" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "AccordionContent" }
-    }
-  ],
-  indexWithinAncestor: "Accordion",
-  presetStyle: o
-}, H = {
-  type: "container",
-  label: "Item Header",
   icon: n,
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: "AccordionItem" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "AccordionTrigger" }
-    }
-  ],
+  indexWithinAncestor: e.Accordion,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [e.AccordionHeader, e.AccordionContent]
+  },
+  presetStyle: { div: o },
+  initialProps: ["value"],
+  props: l
+}, f = {
+  label: "Item Header",
+  icon: r,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [e.AccordionTrigger]
+  },
   presetStyle: {
     h3: [
       ...a,
       {
-        property: "marginTop",
+        property: "margin-top",
         value: { type: "unit", unit: "px", value: 0 }
       },
       {
-        property: "marginBottom",
+        property: "margin-bottom",
         value: { type: "unit", unit: "px", value: 0 }
       }
     ]
-  }
-}, T = {
-  type: "container",
+  },
+  props: m
+}, C = {
   label: "Item Trigger",
-  icon: r,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "AccordionHeader" }
+  icon: c,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
-  states: [
-    ...i,
-    {
-      category: "component-states",
-      label: "Open",
-      selector: "[data-state=open]"
-    }
-  ],
+  states: [{ label: "Open", selector: "[data-state=open]" }],
   presetStyle: {
     button: [p, d].flat()
-  }
-}, C = {
-  type: "container",
+  },
+  props: g
+}, H = {
   label: "Item Content",
-  icon: c,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "AccordionItem" }
+  icon: i,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    div: o
   },
-  presetStyle: o
-}, M = {
-  props: m,
-  initialProps: ["value", "collapsible"]
-}, x = {
-  props: l,
-  initialProps: ["value"]
-}, S = {
   props: A
-}, h = {
-  props: I
-}, P = {
-  props: g
 };
 export {
-  f as metaAccordion,
-  C as metaAccordionContent,
-  H as metaAccordionHeader,
-  v as metaAccordionItem,
-  T as metaAccordionTrigger,
-  M as propsMetaAccordion,
-  P as propsMetaAccordionContent,
-  S as propsMetaAccordionHeader,
-  x as propsMetaAccordionItem,
-  h as propsMetaAccordionTrigger
+  v as metaAccordion,
+  H as metaAccordionContent,
+  f as metaAccordionHeader,
+  x as metaAccordionItem,
+  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 { Root as m, Indicator as d } from "@radix-ui/react-checkbox";
-const p = f(({ checked: o, defaultChecked: r, ...t }, e) => /* @__PURE__ */ c(m, { ...t, ref: e, defaultChecked: o ?? r })), x = d;
+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.template.js

@@ -1,8 +1,8 @@
 import { jsxs as c, jsx as e } from "react/jsx-runtime";
 import { CheckMarkIcon as a } from "@webstudio-is/icons/svg";
-import { css as o, $ as t, PlaceholderValue as l } from "@webstudio-is/template";
+import { $ as t, css as o, PlaceholderValue as l } from "@webstudio-is/template";
 import { radix as r } from "./shared/proxy.js";
-import { spacing as s, height as d, width as n, borderRadius as h, borderWidth as b, colors as i, boxShadow as m, opacity as p } from "./shared/theme.js";
+import { height as s, width as d, borderRadius as n, borderWidth as h, colors as i, boxShadow as b, opacity as m, spacing as p } from "./shared/theme.js";
 const y = {
   category: "radix",
   description: "Use within a form to allow your users to toggle between checked and not checked. Group checkboxes by matching their “Name” properties. Unlike radios, any number of checkboxes in a group can be checked.",
@@ -13,7 +13,7 @@ const y = {
       "ws:label": "Checkbox Field",
       "ws:style": o`
         display: flex;
-        gap: ${s[2]};
+        gap: ${p[2]};
         align-items: center;
       `,
       children: [
@@ -21,18 +21,18 @@ const y = {
           r.Checkbox,
           {
             "ws:style": o`
-          height: ${d[4]};
-          width: ${n[4]};
+          height: ${s[4]};
+          width: ${d[4]};
           flex-shrink: 0;
-          border-radius: ${h.sm};
-          border: ${b.DEFAULT} solid ${i.primary};
+          border-radius: ${n.sm};
+          border: ${h.DEFAULT} solid ${i.primary};
           &:focus-visible {
             outline: none;
-            box-shadow: ${m.ring};
+            box-shadow: ${b.ring};
           }
           &:disabled {
             cursor: not-allowed;
-            opacity: ${p[50]};
+            opacity: ${m[50]};
           }
           &[data-state="checked"] {
             background-color: ${i.primary};
@@ -53,7 +53,7 @@ const y = {
             )
           }
         ),
-        /* @__PURE__ */ e(t.Text, { "ws:label": "Checkbox Label", tag: "span", children: new l("Checkbox") })
+        /* @__PURE__ */ e(t.Text, { "ws:label": "Checkbox Label", "ws:tag": "span", children: new l("Checkbox") })
       ]
     }
   )

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 { buttonReset as a } from "./shared/preset-styles.js";
-import { propsCheckbox as r, propsCheckboxIndicator as s } from "./__generated__/checkbox.props.js";
-const k = {
-  type: "container",
-  constraints: {
-    relation: "descendant",
-    component: { $eq: "CheckboxIndicator" }
+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: [n.CheckboxIndicator]
   },
-  icon: t,
   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()
-  }
-}, l = {
-  type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Checkbox" }
+    button: [o, r].flat()
+  },
+  initialProps: ["id", "class", "name", "value", "required", "checked"],
+  props: a
+}, k = {
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
-  icon: o,
-  states: e,
   presetStyle: {
-    span: n
-  }
-}, b = {
-  props: r,
-  initialProps: ["id", "className", "name", "value", "required", "checked"]
-}, C = {
+    span: c
+  },
   props: s
 };
 export {
-  k as metaCheckbox,
-  l as metaCheckboxIndicator,
-  b as propsMetaCheckbox,
-  C 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, Trigger as p, Content 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(p, { asChild: !0, ref: t, ...o, children: n ?? /* @__PURE__ */ i("button", { children: "Add button" }) });
-}), u = C, 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,59 +1,39 @@
-import { CollapsibleIcon as e, TriggerIcon as n, ContentIcon as t } from "@webstudio-is/icons/svg";
+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 { propsCollapsible as l, propsCollapsibleTrigger as p, propsCollapsibleContent as r } from "./__generated__/collapsible.props.js";
-const c = {
-  type: "container",
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: "CollapsibleTrigger" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "CollapsibleContent" }
-    }
-  ],
-  presetStyle: {
-    div: o
-  },
-  icon: e
-}, C = {
-  type: "container",
+import { radix as e } from "./shared/meta.js";
+import { propsCollapsible as r, propsCollapsibleTrigger as i, propsCollapsibleContent as p } from "./__generated__/collapsible.props.js";
+const g = {
   icon: n,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Collapsible" }
-  }
-}, b = {
-  type: "container",
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [e.CollapsibleTrigger, e.CollapsibleContent]
+  },
   presetStyle: {
     div: o
   },
-  icon: t,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Collapsible" }
-  }
+  initialProps: ["open"],
+  props: r
 }, m = {
-  props: {
-    ...l,
-    onOpenChange: {
-      type: "action",
-      control: "action",
-      required: !1
-    }
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
-  initialProps: ["open", "onOpenChange"]
-}, g = {
-  props: p
+  props: i
 }, d = {
-  props: r
+  icon: l,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    div: o
+  },
+  props: p
 };
 export {
-  c as metaCollapsible,
-  b as metaCollapsibleContent,
-  C as metaCollapsibleTrigger,
-  m as propsMetaCollapsible,
-  d as propsMetaCollapsibleContent,
-  g as propsMetaCollapsibleTrigger
+  g as metaCollapsible,
+  d as metaCollapsibleContent,
+  m as metaCollapsibleTrigger
 };