@webstudio-is/sdk-components-react-radix 0.0.0-c1d6247 → 0.0.0-ca00e2a

package/lib/accordion.ws.js

@@ -1,77 +1,61 @@
-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 { 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 { 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 l, propsAccordionItem as m, propsAccordionHeader as A, propsAccordionTrigger as g, propsAccordionContent as y } 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: [o.AccordionItem]
+  },
+  presetStyle: {
+    div: e
+  }
+}, 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: o.Accordion,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [o.AccordionHeader, o.AccordionContent]
+  },
+  presetStyle: {
+    div: e
+  }
+}, C = {
+  label: "Item Header",
+  icon: r,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [o.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",
+}, H = {
   label: "Item Trigger",
-  icon: r,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "AccordionHeader" }
+  icon: c,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
   states: [
-    ...i,
+    ...p,
     {
       category: "component-states",
       label: "Open",
@@ -79,39 +63,40 @@ const o = {
     }
   ],
   presetStyle: {
-    button: [p, d].flat()
+    button: [s, d].flat()
   }
-}, C = {
-  type: "container",
+}, S = {
   label: "Item Content",
-  icon: c,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "AccordionItem" }
+  icon: i,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
   },
-  presetStyle: o
-}, M = {
-  props: m,
-  initialProps: ["value", "collapsible"]
-}, x = {
+  presetStyle: {
+    div: e
+  }
+}, T = {
   props: l,
+  initialProps: ["value", "collapsible"]
+}, P = {
+  props: m,
   initialProps: ["value"]
-}, S = {
+}, O = {
   props: A
-}, h = {
-  props: I
-}, P = {
+}, R = {
   props: g
+}, W = {
+  props: y
 };
 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,
+  S as metaAccordionContent,
+  C as metaAccordionHeader,
+  x as metaAccordionItem,
+  H as metaAccordionTrigger,
+  T as propsMetaAccordion,
+  W as propsMetaAccordionContent,
+  O as propsMetaAccordionHeader,
+  P as propsMetaAccordionItem,
+  R as propsMetaAccordionTrigger
 };

package/lib/checkbox.js

@@ -1,7 +1,7 @@
 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 { 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;
 export {
   p as Checkbox,
   x 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,15 +1,16 @@
 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 r, propsCheckboxIndicator as s } from "./__generated__/checkbox.props.js";
-const k = {
-  type: "container",
-  constraints: {
-    relation: "descendant",
-    component: { $eq: "CheckboxIndicator" }
-  },
+import { propsCheckbox as s, propsCheckboxIndicator as i } from "./__generated__/checkbox.props.js";
+const b = {
   icon: t,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [r.CheckboxIndicator]
+  },
   states: [
     ...e,
     {
@@ -26,26 +27,25 @@ const k = {
   presetStyle: {
     button: [c, a].flat()
   }
-}, l = {
-  type: "container",
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Checkbox" }
-  },
+}, x = {
   icon: o,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
   states: e,
   presetStyle: {
     span: n
   }
-}, b = {
-  props: r,
-  initialProps: ["id", "className", "name", "value", "required", "checked"]
 }, C = {
-  props: s
+  props: s,
+  initialProps: ["id", "className", "name", "value", "required", "checked"]
+}, f = {
+  props: i
 };
 export {
-  k as metaCheckbox,
-  l as metaCheckboxIndicator,
-  b as propsMetaCheckbox,
-  C as propsMetaCheckboxIndicator
+  b as metaCheckbox,
+  x as metaCheckboxIndicator,
+  C as propsMetaCheckbox,
+  f as propsMetaCheckboxIndicator
 };

package/lib/collapsible.js

@@ -1,11 +1,11 @@
 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 { 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(p, { asChild: !0, ref: t, ...o, children: n ?? /* @__PURE__ */ i("button", { children: "Add button" }) });
-}), u = C, s = "@webstudio-is/sdk-components-react-radix", P = {
+  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`) {

package/lib/collapsible.ws.js

@@ -1,42 +1,35 @@
-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" }
-    }
-  ],
+import { radix as e } from "./shared/meta.js";
+import { propsCollapsible as r, propsCollapsibleTrigger as p, propsCollapsibleContent as i } from "./__generated__/collapsible.props.js";
+const g = {
+  icon: n,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [e.CollapsibleTrigger, e.CollapsibleContent]
+  },
   presetStyle: {
     div: o
-  },
-  icon: e
-}, C = {
-  type: "container",
-  icon: n,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Collapsible" }
   }
 }, b = {
-  type: "container",
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  }
+}, d = {
+  icon: l,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
   presetStyle: {
     div: o
-  },
-  icon: t,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Collapsible" }
   }
 }, m = {
   props: {
-    ...l,
+    ...r,
     onOpenChange: {
       type: "action",
       control: "action",
@@ -44,16 +37,16 @@ const c = {
     }
   },
   initialProps: ["open", "onOpenChange"]
-}, g = {
+}, h = {
   props: p
-}, d = {
-  props: r
+}, y = {
+  props: i
 };
 export {
-  c as metaCollapsible,
-  b as metaCollapsibleContent,
-  C as metaCollapsibleTrigger,
+  g as metaCollapsible,
+  d as metaCollapsibleContent,
+  b as metaCollapsibleTrigger,
   m as propsMetaCollapsible,
-  d as propsMetaCollapsibleContent,
-  g as propsMetaCollapsibleTrigger
+  y as propsMetaCollapsibleContent,
+  h as propsMetaCollapsibleTrigger
 };

package/lib/dialog.template.js

@@ -2,7 +2,7 @@ import { jsxs as n, jsx as e } from "react/jsx-runtime";
 import { LargeXIcon as p } from "@webstudio-is/icons/svg";
 import { $ as l, PlaceholderValue as r, css as i } from "@webstudio-is/template";
 import { radix as o } from "./shared/proxy.js";
-import { zIndex as d, blur as m, width as u, spacing as t, maxWidth as w, borderWidth as $, colors as a, boxShadow as s, fontSize as c, lineHeight as y, letterSpacing as b, fontSizeLineHeight as x, borderRadius as f, opacity as g, height as h } from "./shared/theme.js";
+import { fontSize as d, lineHeight as m, letterSpacing as u, fontSizeLineHeight as w, colors as a, spacing as t, borderRadius as $, opacity as s, height as c, boxShadow as g, width as y, zIndex as h, maxWidth as b, borderWidth as x, blur as f } from "./shared/theme.js";
 import { getButtonStyle as D } from "./shared/styles.js";
 const S = {
   category: "radix",
@@ -16,9 +16,9 @@ const S = {
         "ws:style": i`
           position: fixed;
           inset: 0;
-          z-index: ${d[50]};
+          z-index: ${h[50]};
           background-color: rgb(255 255 255 / 0.8);
-          backdrop-filter: ${m.sm};
+          backdrop-filter: ${f.sm};
           /* To allow positioning Content */
           display: flex;
           overflow: auto;
@@ -27,17 +27,17 @@ const S = {
           o.DialogContent,
           {
             "ws:style": i`
-            width: ${u.full};
-            z-index: ${d[50]};
+            width: ${y.full};
+            z-index: ${h[50]};
             display: flex;
             flex-direction: column;
             gap: ${t[4]};
             margin: auto;
-            max-width: ${w.lg};
-            border: ${$.DEFAULT} solid ${a.border};
+            max-width: ${b.lg};
+            border: ${x.DEFAULT} solid ${a.border};
             background-color: ${a.background};
             padding: ${t[6]};
-            box-shadow: ${s.lg};
+            box-shadow: ${g.lg};
             position: relative;
           `,
             children: [
@@ -55,9 +55,9 @@ const S = {
                       o.DialogTitle,
                       {
                         "ws:style": i`
-                font-size: ${c.lg};
-                line-height: ${y.none};
-                letter-spacing: ${b.tight};
+                font-size: ${d.lg};
+                line-height: ${m.none};
+                letter-spacing: ${u.tight};
                 margin: 0;
               `,
                         children: new r("Dialog Title you can edit")
@@ -67,8 +67,8 @@ const S = {
                       o.DialogDescription,
                       {
                         "ws:style": i`
-                font-size: ${c.sm};
-                line-height: ${x.sm};
+                font-size: ${d.sm};
+                line-height: ${w.sm};
                 color: ${a.mutedForeground};
                 margin: 0;
               `,
@@ -87,21 +87,21 @@ const S = {
               position: absolute;
               right: ${t[4]};
               top: ${t[4]};
-              border-radius: ${f.sm};
-              opacity: ${g[70]};
+              border-radius: ${$.sm};
+              opacity: ${s[70]};
               display: flex;
               align-items: center;
               justify-content: center;
-              height: ${h[4]};
-              width: ${h[4]};
+              height: ${c[4]};
+              width: ${c[4]};
               border: 0;
               background-color: transparent;
               outline: none;
               &:hover {
-                opacity: ${g[100]};
+                opacity: ${s[100]};
               }
               &:focus-visible {
-                box-shadow: ${s.ring};
+                box-shadow: ${g.ring};
               }
             `,
                   children: /* @__PURE__ */ e(l.HtmlEmbed, { "ws:label": "Close Icon", code: p })