@webstudio-is/sdk-components-react-radix 0.196.0 → 0.198.0

package/lib/collapsible.ws.js

@@ -1,12 +1,9 @@
-import { CollapsibleIcon as o, TriggerIcon as t, ContentIcon as n } from "@webstudio-is/icons/svg";
+import { CollapsibleIcon as e, TriggerIcon as n, ContentIcon as t } from "@webstudio-is/icons/svg";
 import { div as l } from "@webstudio-is/sdk/normalize.css";
-import { propsCollapsible as p, propsCollapsibleTrigger as i, propsCollapsibleContent as r } from "./__generated__/collapsible.props.js";
-import { getButtonStyles as a } from "./theme/styles.js";
-const e = {
+import { propsCollapsible as p, propsCollapsibleTrigger as s, propsCollapsibleContent as r } from "./__generated__/collapsible.props.js";
+const o = {
   div: l
-}, m = {
-  category: "radix",
-  order: 5,
+}, C = {
   type: "container",
   constraints: [
     {
@@ -18,72 +15,25 @@ const e = {
       component: { $eq: "CollapsibleContent" }
     }
   ],
-  presetStyle: e,
-  icon: o,
-  description: "An interactive component which expands and collapses some content, triggered by a button.",
-  template: [
-    {
-      type: "instance",
-      component: "Collapsible",
-      props: [],
-      children: [
-        {
-          type: "instance",
-          component: "CollapsibleTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: a("outline"),
-              children: [
-                {
-                  type: "text",
-                  value: "Click to toggle content",
-                  placeholder: !0
-                }
-              ]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "CollapsibleContent",
-          children: [
-            {
-              type: "instance",
-              component: "Text",
-              children: [
-                {
-                  type: "text",
-                  value: "Collapsible Content",
-                  placeholder: !0
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}, g = {
-  category: "hidden",
+  presetStyle: o,
+  icon: e
+}, b = {
   type: "container",
-  icon: t,
+  icon: n,
   stylable: !1,
   constraints: {
     relation: "ancestor",
     component: { $eq: "Collapsible" }
   }
-}, b = {
-  category: "hidden",
+}, m = {
   type: "container",
-  presetStyle: e,
-  icon: n,
+  presetStyle: o,
+  icon: t,
   constraints: {
     relation: "ancestor",
     component: { $eq: "Collapsible" }
   }
-}, y = {
+}, g = {
   props: {
     ...p,
     onOpenChange: {
@@ -93,16 +43,16 @@ const e = {
     }
   },
   initialProps: ["open", "onOpenChange"]
-}, h = {
-  props: i
-}, u = {
+}, d = {
+  props: s
+}, y = {
   props: r
 };
 export {
-  m as metaCollapsible,
-  b as metaCollapsibleContent,
-  g as metaCollapsibleTrigger,
-  y as propsMetaCollapsible,
-  u as propsMetaCollapsibleContent,
-  h as propsMetaCollapsibleTrigger
+  C as metaCollapsible,
+  m as metaCollapsibleContent,
+  b as metaCollapsibleTrigger,
+  g as propsMetaCollapsible,
+  y as propsMetaCollapsibleContent,
+  d as propsMetaCollapsibleTrigger
 };

package/lib/dialog.template.js

@@ -0,0 +1,119 @@
+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 { getButtonStyle as D } from "./shared/styles.js";
+const S = {
+  category: "radix",
+  description: "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
+  order: 4,
+  template: /* @__PURE__ */ n(o.Dialog, { children: [
+    /* @__PURE__ */ e(o.DialogTrigger, { children: /* @__PURE__ */ e(l.Button, { "ws:style": D("outline"), children: new r("Button") }) }),
+    /* @__PURE__ */ e(
+      o.DialogOverlay,
+      {
+        "ws:style": i`
+          position: fixed;
+          inset: 0;
+          z-index: ${d[50]};
+          background-color: rgb(255 255 255 / 0.8);
+          backdrop-filter: ${m.sm};
+          /* To allow positioning Content */
+          display: flex;
+          overflow: auto;
+        `,
+        children: /* @__PURE__ */ n(
+          o.DialogContent,
+          {
+            "ws:style": i`
+            width: ${u.full};
+            z-index: ${d[50]};
+            display: flex;
+            flex-direction: column;
+            gap: ${t[4]};
+            margin: auto;
+            max-width: ${w.lg};
+            border: ${$.DEFAULT} solid ${a.border};
+            background-color: ${a.background};
+            padding: ${t[6]};
+            box-shadow: ${s.lg};
+            position: relative;
+          `,
+            children: [
+              /* @__PURE__ */ n(
+                l.Box,
+                {
+                  "ws:label": "Dialog Header",
+                  "ws:style": i`
+              display: flex;
+              flex-direction: column;
+              gap: ${t[2]};
+            `,
+                  children: [
+                    /* @__PURE__ */ e(
+                      o.DialogTitle,
+                      {
+                        "ws:style": i`
+                font-size: ${c.lg};
+                line-height: ${y.none};
+                letter-spacing: ${b.tight};
+                margin: 0;
+              `,
+                        children: new r("Dialog Title you can edit")
+                      }
+                    ),
+                    /* @__PURE__ */ e(
+                      o.DialogDescription,
+                      {
+                        "ws:style": i`
+                font-size: ${c.sm};
+                line-height: ${x.sm};
+                color: ${a.mutedForeground};
+                margin: 0;
+              `,
+                        children: new r("Dialog description text you can edit")
+                      }
+                    )
+                  ]
+                }
+              ),
+              /* @__PURE__ */ e(l.Text, { children: new r("The text you can edit") }),
+              /* @__PURE__ */ e(
+                o.DialogClose,
+                {
+                  "ws:label": "Close Button",
+                  "ws:style": i`
+              position: absolute;
+              right: ${t[4]};
+              top: ${t[4]};
+              border-radius: ${f.sm};
+              opacity: ${g[70]};
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: ${h[4]};
+              width: ${h[4]};
+              border: 0;
+              background-color: transparent;
+              outline: none;
+              &:hover {
+                opacity: ${g[100]};
+              }
+              &:focus-visible {
+                box-shadow: ${s.ring};
+              }
+            `,
+                  children: /* @__PURE__ */ e(l.HtmlEmbed, { "ws:label": "Close Icon", code: p })
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] })
+};
+export {
+  S as meta
+};

package/lib/dialog.ws.js

@@ -1,29 +1,26 @@
-import { TriggerIcon as p, OverlayIcon as g, ContentIcon as d, HeadingIcon as y, TextIcon as m, ButtonElementIcon as D, DialogIcon as u, LargeXIcon as h } from "@webstudio-is/icons/svg";
-import { defaultStates as f } from "@webstudio-is/react-sdk";
-import { button as v, div as b, h2 as C, p as x } from "@webstudio-is/sdk/normalize.css";
-import { fixed as T, inset as $, z as n, bg as t, backdropBlur as q, flex as e, overflow as I, w as a, gap as i, m as P, maxW as S, border as l, p as w, shadow as B, relative as M, my as r, leading as O, text as o, tracking as k, absolute as H, right as E, top as j, rounded as z, opacity as s, items as F, justify as L, h as R, outline as W, hover as X, focus as A, ring as G } from "./theme/tailwind-classes.js";
-import { propsDialog as J, propsDialogTrigger as K, propsDialogContent as N, propsDialogOverlay as Q, propsDialogClose as U, propsDialogTitle as V, propsDialogDescription as Y } from "./__generated__/dialog.props.js";
-import { buttonReset as Z, getButtonStyles as _ } from "./theme/styles.js";
-const c = {
-  div: b
-}, ee = {
-  h2: C
-}, te = {
-  p: x
-}, se = {
-  category: "hidden",
+import { TriggerIcon as t, OverlayIcon as e, ContentIcon as n, HeadingIcon as i, TextIcon as a, ButtonElementIcon as r, DialogIcon as s } from "@webstudio-is/icons/svg";
+import { defaultStates as l } from "@webstudio-is/sdk";
+import { button as p, div as c, h2 as g, p as D } from "@webstudio-is/sdk/normalize.css";
+import { propsDialog as m, propsDialogTrigger as y, propsDialogContent as C, propsDialogOverlay as d, propsDialogClose as q, propsDialogTitle as $, propsDialogDescription as f } from "./__generated__/dialog.props.js";
+import { buttonReset as T } from "./shared/preset-styles.js";
+const o = {
+  div: c
+}, P = {
+  h2: g
+}, v = {
+  p: D
+}, O = {
   type: "container",
-  icon: p,
+  icon: t,
   stylable: !1,
   constraints: {
     relation: "ancestor",
     component: { $eq: "Dialog" }
   }
-}, ce = {
-  category: "hidden",
+}, x = {
   type: "container",
-  presetStyle: c,
-  icon: g,
+  presetStyle: o,
+  icon: e,
   constraints: [
     {
       relation: "ancestor",
@@ -34,11 +31,10 @@ const c = {
       component: { $eq: "DialogContent" }
     }
   ]
-}, pe = {
-  category: "hidden",
+}, B = {
   type: "container",
-  presetStyle: c,
-  icon: d,
+  presetStyle: o,
+  icon: n,
   constraints: [
     {
       relation: "ancestor",
@@ -61,40 +57,35 @@ const c = {
       component: { $eq: "DialogClose" }
     }
   ]
-}, ge = {
-  category: "hidden",
+}, h = {
   type: "container",
-  presetStyle: ee,
-  icon: y,
+  presetStyle: P,
+  icon: i,
   constraints: {
     relation: "ancestor",
     component: { $eq: "DialogContent" }
   }
-}, de = {
-  category: "hidden",
+}, E = {
   type: "container",
-  presetStyle: te,
-  icon: m,
+  presetStyle: v,
+  icon: a,
   constraints: {
     relation: "ancestor",
     component: { $eq: "DialogContent" }
   }
-}, ye = {
-  category: "hidden",
+}, H = {
   type: "container",
   presetStyle: {
-    button: [Z, v].flat()
+    button: [T, p].flat()
   },
-  states: f,
-  icon: D,
+  states: l,
+  icon: r,
   label: "Close Button",
   constraints: {
     relation: "ancestor",
     component: { $eq: "DialogContent" }
   }
-}, me = {
-  category: "radix",
-  order: 4,
+}, R = {
   type: "container",
   constraints: [
     {
@@ -106,210 +97,42 @@ const c = {
       component: { $eq: "DialogOverlay" }
     }
   ],
-  icon: u,
-  stylable: !1,
-  description: "Displays content with an overlay that covers the window, triggered by a button. Clicking the overlay will close the dialog.",
-  template: [
-    {
-      type: "instance",
-      component: "Dialog",
-      children: [
-        {
-          type: "instance",
-          component: "DialogTrigger",
-          children: [
-            {
-              type: "instance",
-              component: "Button",
-              styles: _("outline"),
-              children: [{ type: "text", value: "Button", placeholder: !0 }]
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "DialogOverlay",
-          /**
-           * fixed inset-0 z-50 bg-background/80 backdrop-blur-sm
-           * flex
-           **/
-          styles: [
-            T(),
-            $(0),
-            n(50),
-            t("background", 80),
-            q("sm"),
-            // To allow positioning Content
-            e(),
-            I("auto")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "DialogContent",
-              /**
-               * fixed w-full z-50
-               * grid gap-4 max-w-lg
-               * m-auto
-               * border bg-background p-6 shadow-lg
-               **/
-              styles: [
-                a("full"),
-                n(50),
-                e(),
-                e("col"),
-                i(4),
-                P("auto"),
-                S("lg"),
-                l(),
-                t("background"),
-                w(6),
-                B("lg"),
-                M()
-              ].flat(),
-              children: [
-                {
-                  type: "instance",
-                  component: "Box",
-                  label: "Dialog Header",
-                  styles: [e(), e("col"), i(1)].flat(),
-                  children: [
-                    {
-                      type: "instance",
-                      component: "DialogTitle",
-                      /**
-                       * text-lg leading-none tracking-tight
-                       **/
-                      styles: [
-                        r(0),
-                        O("none"),
-                        o("lg"),
-                        k("tight")
-                      ].flat(),
-                      children: [
-                        {
-                          type: "text",
-                          value: "Dialog Title you can edit",
-                          placeholder: !0
-                        }
-                      ]
-                    },
-                    {
-                      type: "instance",
-                      component: "DialogDescription",
-                      /**
-                       * text-sm text-muted-foreground
-                       **/
-                      styles: [
-                        r(0),
-                        o("sm"),
-                        o("mutedForeground")
-                      ].flat(),
-                      children: [
-                        {
-                          type: "text",
-                          value: "Dialog description text you can edit",
-                          placeholder: !0
-                        }
-                      ]
-                    }
-                  ]
-                },
-                {
-                  type: "instance",
-                  component: "Text",
-                  children: [
-                    {
-                      type: "text",
-                      value: "The text you can edit",
-                      placeholder: !0
-                    }
-                  ]
-                },
-                {
-                  type: "instance",
-                  component: "DialogClose",
-                  /**
-                   * absolute right-4 top-4
-                   * rounded-sm opacity-70
-                   * ring-offset-background
-                   * hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
-                   * flex items-center justify-center h-4 w-4
-                   **/
-                  styles: [
-                    H(),
-                    E(4),
-                    j(4),
-                    z("sm"),
-                    s(70),
-                    e(),
-                    F("center"),
-                    L("center"),
-                    R(4),
-                    a(4),
-                    l(0),
-                    t("transparent"),
-                    W(),
-                    X(s(100)),
-                    A(G("ring", 2, "background", 2))
-                  ].flat(),
-                  children: [
-                    {
-                      type: "instance",
-                      component: "HtmlEmbed",
-                      label: "Close Icon",
-                      props: [
-                        {
-                          type: "string",
-                          name: "code",
-                          value: h
-                        }
-                      ],
-                      children: []
-                    }
-                  ]
-                }
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}, De = {
-  props: J,
+  icon: s,
+  stylable: !1
+}, j = {
+  props: m,
   initialProps: []
-}, ue = {
-  props: K
-}, he = {
-  props: N,
+}, k = {
+  props: y
+}, w = {
+  props: C,
   initialProps: []
-}, fe = {
-  props: Q,
+}, z = {
+  props: d,
   initialProps: []
-}, ve = {
-  props: U,
+}, A = {
+  props: q,
   initialProps: []
-}, be = {
-  props: V,
+}, F = {
+  props: $,
   initialProps: []
-}, Ce = {
-  props: Y,
+}, G = {
+  props: f,
   initialProps: []
 };
 export {
-  me as metaDialog,
-  ye as metaDialogClose,
-  pe as metaDialogContent,
-  de as metaDialogDescription,
-  ce as metaDialogOverlay,
-  ge as metaDialogTitle,
-  se as metaDialogTrigger,
-  De as propsMetaDialog,
-  ve as propsMetaDialogClose,
-  he as propsMetaDialogContent,
-  Ce as propsMetaDialogDescription,
-  fe as propsMetaDialogOverlay,
-  be as propsMetaDialogTitle,
-  ue as propsMetaDialogTrigger
+  R as metaDialog,
+  H as metaDialogClose,
+  B as metaDialogContent,
+  E as metaDialogDescription,
+  x as metaDialogOverlay,
+  h as metaDialogTitle,
+  O as metaDialogTrigger,
+  j as propsMetaDialog,
+  A as propsMetaDialogClose,
+  w as propsMetaDialogContent,
+  G as propsMetaDialogDescription,
+  z as propsMetaDialogOverlay,
+  F as propsMetaDialogTitle,
+  k as propsMetaDialogTrigger
 };

package/lib/label.template.js

@@ -0,0 +1,23 @@
+import { jsx as e } from "react/jsx-runtime";
+import { css as t, PlaceholderValue as o } from "@webstudio-is/template";
+import { radix as i } from "./shared/proxy.js";
+import { fontSize as r, lineHeight as n, weights as h } from "./shared/theme.js";
+const p = {
+  category: "radix",
+  description: "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
+  order: 102,
+  template: /* @__PURE__ */ e(
+    i.Label,
+    {
+      "ws:style": t`
+        font-size: ${r.sm};
+        line-height: ${n.none};
+        font-weight: ${h.medium};
+      `,
+      children: new o("Form Label")
+    }
+  )
+};
+export {
+  p as meta
+};

package/lib/label.ws.js

@@ -1,43 +1,19 @@
-import { LabelIcon as e } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
+import { LabelIcon as t } from "@webstudio-is/icons/svg";
+import { defaultStates as o } from "@webstudio-is/sdk";
 import { label as r } from "@webstudio-is/sdk/normalize.css";
-import { props as t } from "./__generated__/label.props.js";
-import { text as a, font as l, leading as p } from "./theme/tailwind-classes.js";
-const n = {
+import { props as e } from "./__generated__/label.props.js";
+const p = {
   label: r
-}, d = {
-  category: "radix",
-  order: 102,
+}, l = {
   type: "container",
-  icon: e,
-  presetStyle: n,
-  states: o,
-  description: "An accessible label to describe the purpose of an input. Match the “For” property on the label with the “ID” of the input to connect them.",
-  template: [
-    {
-      type: "instance",
-      component: "Label",
-      styles: [
-        // text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70
-        a("sm"),
-        l("medium"),
-        p("none")
-        // We are not supporting peer like styles yet
-      ].flat(),
-      children: [{ type: "text", value: "Form Label", placeholder: !0 }]
-    }
-  ]
-}, f = {
-  props: {
-    ...t,
-    htmlFor: {
-      ...t.htmlFor,
-      label: "For"
-    }
-  },
+  icon: t,
+  presetStyle: p,
+  states: o
+}, n = {
+  props: e,
   initialProps: ["id", "className", "htmlFor"]
 };
 export {
-  d as meta,
-  f as propsMeta
+  l as meta,
+  n as propsMeta
 };