@webstudio-is/sdk-components-react-radix 0.195.0 → 0.197.0

package/lib/radio-group.template.js

@@ -0,0 +1,66 @@
+import { jsxs as l, jsx as o } from "react/jsx-runtime";
+import { css as t, $ as a, PlaceholderValue as n } from "@webstudio-is/template";
+import { DotIcon as m } from "@webstudio-is/icons/svg";
+import { radix as e } from "./shared/proxy.js";
+import { spacing as d, height as p, width as b, borderRadius as h, borderWidth as u, colors as i, boxShadow as f, opacity as w } from "./shared/theme.js";
+const r = ({
+  value: c,
+  label: s
+}) => /* @__PURE__ */ l(
+  e.Label,
+  {
+    "ws:style": t`
+      display: flex;
+      align-items: center;
+      gap: ${d[2]};
+    `,
+    children: [
+      /* @__PURE__ */ o(
+        e.RadioGroupItem,
+        {
+          value: c,
+          "ws:style": t`
+        aspect-ratio: 1 / 1;
+        height: ${p[4]};
+        width: ${b[4]};
+        border-radius: ${h.full};
+        border: ${u.DEFAULT} solid ${i.primary};
+        color: ${i.primary};
+        &:focus-visible {
+          outline: none;
+          box-shadow: ${f.ring};
+        }
+        &:disabled {
+          cursor: not-allowed;
+          opacity: ${w[50]};
+        }
+      `,
+          children: /* @__PURE__ */ o(e.RadioGroupIndicator, { children: /* @__PURE__ */ o(a.HtmlEmbed, { "ws:label": "Indicator Icon", code: m }) })
+        }
+      ),
+      /* @__PURE__ */ o(a.Text, { children: new n(s) })
+    ]
+  }
+), R = {
+  category: "radix",
+  order: 100,
+  description: "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
+  template: /* @__PURE__ */ l(
+    e.RadioGroup,
+    {
+      "ws:style": t`
+        display: flex;
+        flex-direction: column;
+        gap: ${d[2]};
+      `,
+      children: [
+        r({ value: "default", label: "Default" }),
+        r({ value: "comfortable", label: "Comfortable" }),
+        r({ value: "compact", label: "Compact" })
+      ]
+    }
+  )
+};
+export {
+  R as meta
+};

package/lib/radio-group.ws.js

@@ -1,77 +1,15 @@
-import { RadioCheckedIcon as p, ItemIcon as i, TriggerIcon as s, RadioDotIcon as l } from "@webstudio-is/icons/svg";
-import { defaultStates as o } from "@webstudio-is/react-sdk";
-import { div as d, button as u, span as m } from "@webstudio-is/sdk/normalize.css";
-import { flex as t, gap as n, items as y, aspect as b, h as f, w as h, rounded as G, border as a, text as R, focusVisible as I, outline as g, ring as v, disabled as k, cursor as x, opacity as q } from "./theme/tailwind-classes.js";
-import { buttonReset as V } from "./theme/styles.js";
-import { propsRadioGroup as C, propsRadioGroupItem as w, propsRadioGroupIndicator as S } from "./__generated__/radio-group.props.js";
-const e = ({
-  value: r,
-  label: c
-}) => ({
-  type: "instance",
-  component: "Label",
-  // flex items-center space-x-2
-  styles: [t(), y("center"), n(2)].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "RadioGroupItem",
-      props: [{ name: "value", type: "string", value: r }],
-      // aspect-square h-4 w-4 rounded-full border border-primary text-primary ring-offset-background
-      // focus:outline-none
-      // focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2
-      // disabled:cursor-not-allowed disabled:opacity-50
-      styles: [
-        b("square"),
-        f(4),
-        h(4),
-        G("full"),
-        a(),
-        a("primary"),
-        R("primary"),
-        I(
-          [g(), v("ring", 2, "background", 2)].flat()
-        ),
-        k([x("not-allowed"), q(50)].flat())
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "RadioGroupIndicator",
-          children: [
-            {
-              type: "instance",
-              component: "HtmlEmbed",
-              label: "Indicator Icon",
-              props: [
-                {
-                  type: "string",
-                  name: "code",
-                  value: l
-                }
-              ],
-              children: []
-            }
-          ]
-        }
-      ]
-    },
-    {
-      type: "instance",
-      component: "Text",
-      children: [{ type: "text", value: c, placeholder: !0 }]
-    }
-  ]
-}), E = {
-  category: "radix",
-  order: 100,
+import { RadioGroupIcon as t, ItemIcon as e, TriggerIcon as a } 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" }
   },
-  description: "A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.",
-  icon: p,
+  icon: t,
   states: [
     ...o,
     {
@@ -86,44 +24,9 @@ const e = ({
     }
   ],
   presetStyle: {
-    div: d
-  },
-  template: [
-    {
-      type: "instance",
-      component: "RadioGroup",
-      variables: {
-        radioGroupValue: { initialValue: "" }
-      },
-      // grid gap-2
-      styles: [t(), t("col"), n(2)].flat(),
-      props: [
-        {
-          type: "expression",
-          name: "value",
-          code: "radioGroupValue"
-        },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            {
-              type: "execute",
-              args: ["value"],
-              code: "radioGroupValue = value"
-            }
-          ]
-        }
-      ],
-      children: [
-        e({ value: "default", label: "Default" }),
-        e({ value: "comfortable", label: "Comfortable" }),
-        e({ value: "compact", label: "Compact" })
-      ]
-    }
-  ]
-}, H = {
-  category: "hidden",
+    div: r
+  }
+}, y = {
   type: "container",
   constraints: [
     {
@@ -135,37 +38,36 @@ const e = ({
       component: { $eq: "RadioGroupIndicator" }
     }
   ],
-  icon: i,
+  icon: e,
   states: o,
   presetStyle: {
-    button: [u, V].flat()
+    button: [n, s].flat()
   }
-}, L = {
-  category: "hidden",
+}, f = {
   type: "container",
-  icon: s,
+  icon: a,
   constraints: {
     relation: "ancestor",
     component: { $eq: "RadioGroupItem" }
   },
   states: o,
   presetStyle: {
-    span: m
+    span: p
   }
-}, N = {
-  props: C,
+}, b = {
+  props: i,
   initialProps: ["id", "className", "name", "value", "required"]
-}, U = {
-  props: w,
+}, q = {
+  props: c,
   initialProps: ["value"]
-}, j = {
-  props: S
+}, g = {
+  props: d
 };
 export {
-  E as metaRadioGroup,
-  L as metaRadioGroupIndicator,
-  H as metaRadioGroupItem,
-  N as propsMetaRadioGroup,
-  j as propsMetaRadioGroupIndicator,
-  U as propsMetaRadioGroupItem
+  I as metaRadioGroup,
+  f as metaRadioGroupIndicator,
+  y as metaRadioGroupItem,
+  b as propsMetaRadioGroup,
+  g as propsMetaRadioGroupIndicator,
+  q as propsMetaRadioGroupItem
 };

package/lib/select.template.js

@@ -0,0 +1,121 @@
+import { jsxs as n, jsx as r } from "react/jsx-runtime";
+import { css as i, $ as f, PlaceholderValue as w } from "@webstudio-is/template";
+import { radix as o } from "./shared/proxy.js";
+import { height as h, width as d, borderRadius as s, borderWidth as c, colors as e, spacing as t, fontSize as m, fontSizeLineHeight as $, boxShadow as a, opacity as g, zIndex as b } from "./shared/theme.js";
+import { CheckMarkIcon as y } from "@webstudio-is/icons/svg";
+const l = (u, p) => /* @__PURE__ */ n(
+  o.SelectItem,
+  {
+    value: u,
+    "ws:style": i`
+        position: relative;
+        display: flex;
+        width: ${d.full};
+        cursor: default;
+        user-select: none;
+        align-items: center;
+        border-radius: ${s.md};
+        padding: ${t[1.5]} ${t[2]} ${t[1.5]} ${t[8]};
+        font-size: ${m.sm};
+        line-height: ${$.sm};
+        outline: none;
+        &:focus {
+          background-color: ${e.accent};
+          color: ${e.accentForeground};
+        }
+        &[data-disabled] {
+          pointer-events: none;
+          opacity: ${g[50]};
+        }
+      `,
+    children: [
+      /* @__PURE__ */ r(
+        o.SelectItemIndicator,
+        {
+          "ws:style": i`
+          position: absolute;
+          left: ${t[2]};
+          display: flex;
+          height: ${h[3.5]};
+          width: ${d[3.5]};
+          align-items: center;
+          justify-content: center;
+        `,
+          children: /* @__PURE__ */ r(f.HtmlEmbed, { "ws:label": "Indicator Icon", code: y })
+        }
+      ),
+      /* @__PURE__ */ r(o.SelectItemText, { children: new w(p) })
+    ]
+  }
+), z = {
+  category: "radix",
+  description: "Use within a form to give your users a list of options to choose from.",
+  order: 10,
+  template: /* @__PURE__ */ n(o.Select, { children: [
+    /* @__PURE__ */ r(
+      o.SelectTrigger,
+      {
+        "ws:style": i`
+          display: flex;
+          height: ${h[10]};
+          width: ${d.full};
+          align-items: center;
+          justify-content: between;
+          border-radius: ${s.md};
+          border: ${c.DEFAULT} solid ${e.input};
+          background-color: ${e.background};
+          padding: ${t[2]} ${t[3]};
+          font-size: ${m.sm};
+          line-height: ${$.sm};
+          &::placeholder {
+            color: ${e.mutedForeground};
+          }
+          &:focus-visible {
+            outline: none;
+            box-shadow: ${a.ring};
+          }
+          &:disabled {
+            cursor: not-allowed;
+            opacity: ${g[50]};
+          }
+        `,
+        children: /* @__PURE__ */ r(o.SelectValue, { placeholder: "Theme" })
+      }
+    ),
+    /* @__PURE__ */ r(
+      o.SelectContent,
+      {
+        "ws:style": i`
+          position: relative;
+          z-index: ${b[50]};
+          min-width: 8rem;
+          overflow: hidden;
+          border-radius: ${s.md};
+          border: ${c.DEFAULT} solid ${e.border};
+          background-color: ${e.popover};
+          color: ${e.popoverForeground};
+          box-shadow: ${a.md};
+        `,
+        children: /* @__PURE__ */ n(
+          o.SelectViewport,
+          {
+            "ws:style": i`
+            padding: ${t[1]};
+            height: var(--radix-select-trigger-height);
+            width: ${d.full};
+            min-width: var(--radix-select-trigger-width);
+          `,
+            children: [
+              l("light", "Light"),
+              l("dark", "Dark"),
+              l("system", "System")
+            ]
+          }
+        )
+      }
+    )
+  ] })
+};
+export {
+  z as meta
+};