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

package/lib/popover.ws.js

@@ -1,50 +1,43 @@
-import { TriggerIcon as o, ContentIcon as e, PopoverIcon as n } from "@webstudio-is/icons/svg";
+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 { propsPopover as r, propsPopoverTrigger as p, propsPopoverContent as i } from "./__generated__/popover.props.js";
-const P = {
-  type: "container",
-  icon: o,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Popover" }
+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,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   }
-}, v = {
-  type: "container",
+}, d = {
+  icon: r,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
   presetStyle: {
     div: t
-  },
+  }
+}, l = {
   icon: e,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "Popover" }
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [o.PopoverTrigger, o.PopoverContent]
   }
 }, m = {
-  type: "container",
-  icon: n,
-  constraints: [
-    {
-      relation: "descendant",
-      component: { $eq: "PopoverTrigger" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "PopoverContent" }
-    }
-  ]
-}, g = {
-  props: r,
+  props: p,
   initialProps: ["open"]
-}, l = {
-  props: p
-}, d = {
-  props: i,
+}, f = {
+  props: i
+}, M = {
+  props: s,
   initialProps: ["side", "sideOffset", "align", "alignOffset"]
 };
 export {
-  m as metaPopover,
-  v as metaPopoverContent,
-  P as metaPopoverTrigger,
-  g as propsMetaPopover,
-  d as propsMetaPopoverContent,
-  l as propsMetaPopoverTrigger
+  l as metaPopover,
+  d as metaPopoverContent,
+  v as metaPopoverTrigger,
+  m as propsMetaPopover,
+  M as propsMetaPopoverContent,
+  f as propsMetaPopoverTrigger
 };

package/lib/radio-group.js

@@ -1,7 +1,7 @@
 import { jsx as i } from "react/jsx-runtime";
 import { forwardRef as m } from "react";
-import { Root as d, Item as p, Indicator as e } from "@radix-ui/react-radio-group";
-const u = m(({ value: o, defaultValue: r, ...t }, a) => /* @__PURE__ */ i(d, { ...t, defaultValue: o ?? r, ref: a })), R = p, s = e;
+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;
 export {
   u as RadioGroup,
   s as RadioGroupIndicator,

package/lib/radio-group.ws.js

@@ -1,15 +1,16 @@
-import { RadioGroupIcon as t, ItemIcon as e, TriggerIcon as a } from "@webstudio-is/icons/svg";
+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 r, button as n, span as p } from "@webstudio-is/sdk/normalize.css";
-import { buttonReset as s } from "./shared/preset-styles.js";
-import { propsRadioGroup as i, propsRadioGroupItem as c, propsRadioGroupIndicator as d } from "./__generated__/radio-group.props.js";
-const I = {
-  type: "container",
-  constraints: {
-    relation: "descendant",
-    component: { $eq: "RadioGroupItem" }
+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";
+const y = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [t.RadioGroupItem]
   },
-  icon: t,
   states: [
     ...o,
     {
@@ -24,50 +25,43 @@ const I = {
     }
   ],
   presetStyle: {
-    div: r
+    div: n
   }
-}, y = {
-  type: "container",
-  constraints: [
-    {
-      relation: "ancestor",
-      component: { $eq: "RadioGroup" }
-    },
-    {
-      relation: "descendant",
-      component: { $eq: "RadioGroupIndicator" }
-    }
-  ],
-  icon: e,
+}, g = {
+  icon: a,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [t.RadioGroupIndicator]
+  },
   states: o,
   presetStyle: {
-    button: [n, s].flat()
+    button: [s, p].flat()
   }
-}, f = {
-  type: "container",
-  icon: a,
-  constraints: {
-    relation: "ancestor",
-    component: { $eq: "RadioGroupItem" }
+}, h = {
+  icon: r,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
   },
   states: o,
   presetStyle: {
-    span: p
+    span: c
   }
-}, b = {
+}, M = {
   props: i,
   initialProps: ["id", "className", "name", "value", "required"]
-}, q = {
-  props: c,
+}, b = {
+  props: d,
   initialProps: ["value"]
-}, g = {
-  props: d
+}, k = {
+  props: m
 };
 export {
-  I as metaRadioGroup,
-  f as metaRadioGroupIndicator,
-  y as metaRadioGroupItem,
-  b as propsMetaRadioGroup,
-  g as propsMetaRadioGroupIndicator,
-  q as propsMetaRadioGroupItem
+  y as metaRadioGroup,
+  h as metaRadioGroupIndicator,
+  g as metaRadioGroupItem,
+  M as propsMetaRadioGroup,
+  k as propsMetaRadioGroupIndicator,
+  b as propsMetaRadioGroupItem
 };

package/lib/select.js

@@ -1,15 +1,13 @@
 import { jsx as c } from "react/jsx-runtime";
 import { forwardRef as s, useContext as l } from "react";
-import { Root as m, Trigger as p, Value as f, Portal as S, Content as d, Viewport as u, Item as I, ItemIndicator as P, ItemText as g } from "@radix-ui/react-select";
+import { Viewport as m, Item as p, ItemIndicator as f, ItemText as S, Root as d, Trigger as u, Value as I, Portal as P, Content as g } from "@radix-ui/react-select";
 import { ReactSdkContext as x, getClosestInstance as i } from "@webstudio-is/react-sdk/runtime";
-const v = s(
-  ({ value: e, defaultValue: t, ...o }, n) => /* @__PURE__ */ c(m, { ...o, defaultValue: e ?? t })
-), T = s((e, t) => {
+const v = s(({ value: e, defaultValue: t, ...o }, n) => /* @__PURE__ */ c(d, { ...o, defaultValue: e ?? t })), T = s((e, t) => {
   const { renderer: o } = l(x);
-  return /* @__PURE__ */ c(p, { onPointerDown: o === "canvas" ? (a) => {
+  return /* @__PURE__ */ c(u, { onPointerDown: o === "canvas" ? (a) => {
     a.preventDefault();
   } : void 0, ref: t, ...e });
-}), $ = s((e, t) => /* @__PURE__ */ c(f, { ref: t, ...e })), k = s((e, t) => /* @__PURE__ */ c(S, { children: /* @__PURE__ */ c(d, { ref: t, ...e, position: "popper" }) })), D = u, R = I, y = P, M = g, r = "@webstudio-is/sdk-components-react-radix", N = {
+}), $ = s((e, t) => /* @__PURE__ */ c(I, { ref: t, ...e })), k = s((e, t) => /* @__PURE__ */ c(P, { children: /* @__PURE__ */ c(g, { ref: t, ...e, position: "popper" }) })), D = m, R = p, y = f, M = S, r = "@webstudio-is/sdk-components-react-radix", N = {
   onNavigatorUnselect: (e, t) => {
     for (const o of t.instancePath)
       if (o.component === `${r}:SelectContent`) {

package/lib/select.ws.js

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

package/lib/shared/meta.js

@@ -0,0 +1,13 @@
+const r = (t) => new Proxy(
+  {},
+  {
+    get(o, e) {
+      return `${t}${e}`;
+    }
+  }
+), n = r(
+  "@webstudio-is/sdk-components-react-radix:"
+);
+export {
+  n as radix
+};

package/lib/shared/preset-styles.js

@@ -1,38 +1,38 @@
-const o = (e, r, p) => ({
-  property: e,
-  value: { type: "unit", unit: p, value: r }
-}), t = (e, r) => ({
-  property: e,
-  value: { type: "keyword", value: r }
-}), d = (e, r, p, l) => ({
-  property: e,
-  value: { type: "rgb", alpha: 1, r, g: p, b: l }
-}), i = [
+const o = (r, t, p) => ({
+  property: r,
+  value: { type: "unit", unit: p, value: t }
+}), e = (r, t) => ({
+  property: r,
+  value: { type: "keyword", value: t }
+}), d = (r, t, p, l) => ({
+  property: r,
+  value: { type: "rgb", alpha: 1, r: t, g: p, b: l }
+}), b = [
   {
-    property: "backgroundColor",
+    property: "background-color",
     value: { type: "keyword", value: "transparent" }
   },
   {
-    property: "backgroundImage",
+    property: "background-image",
     value: { type: "keyword", value: "none" }
   },
-  o("borderTopWidth", 0, "px"),
-  o("borderRightWidth", 0, "px"),
-  o("borderBottomWidth", 0, "px"),
-  o("borderLeftWidth", 0, "px"),
-  t("borderTopStyle", "solid"),
-  t("borderRightStyle", "solid"),
-  t("borderBottomStyle", "solid"),
-  t("borderLeftStyle", "solid"),
-  d("borderTopColor", 226, 232, 240),
-  d("borderRightColor", 226, 232, 240),
-  d("borderBottomColor", 226, 232, 240),
-  d("borderLeftColor", 226, 232, 240),
-  o("paddingTop", 0, "px"),
-  o("paddingRight", 0, "px"),
-  o("paddingBottom", 0, "px"),
-  o("paddingLeft", 0, "px")
+  o("border-top-width", 0, "px"),
+  o("border-right-width", 0, "px"),
+  o("border-bottom-width", 0, "px"),
+  o("border-left-width", 0, "px"),
+  e("border-top-style", "solid"),
+  e("border-right-style", "solid"),
+  e("border-bottom-style", "solid"),
+  e("border-left-style", "solid"),
+  d("border-top-color", 226, 232, 240),
+  d("border-right-color", 226, 232, 240),
+  d("border-bottom-color", 226, 232, 240),
+  d("border-left-color", 226, 232, 240),
+  o("padding-top", 0, "px"),
+  o("padding-right", 0, "px"),
+  o("padding-bottom", 0, "px"),
+  o("padding-left", 0, "px")
 ];
 export {
-  i as buttonReset
+  b as buttonReset
 };