@webstudio-is/sdk-components-react-radix 0.0.0-017f1bd

package/lib/popover.template.js

@@ -0,0 +1,63 @@
+import { jsxs as n, jsx as o } from "react/jsx-runtime";
+import { LargeXIcon as p } from "@webstudio-is/icons/svg";
+import { $ as r, PlaceholderValue as d, css as l } from "@webstudio-is/template";
+import { radix as e } from "./shared/proxy.js";
+import { getButtonStyle as h } from "./shared/styles.js";
+import { spacing as t, borderRadius as s, height as a, opacity as m, boxShadow as c, zIndex as b, width as u, borderWidth as g, colors as i } from "./shared/theme.js";
+const P = {
+  category: "radix",
+  description: "Displays rich content in a portal, triggered by a button.",
+  order: 6,
+  template: /* @__PURE__ */ n(e.Popover, { children: [
+    /* @__PURE__ */ o(e.PopoverTrigger, { children: /* @__PURE__ */ o(r.Button, { "ws:style": h("outline"), children: new d("Button") }) }),
+    /* @__PURE__ */ n(
+      e.PopoverContent,
+      {
+        "ws:style": l`
+          z-index: ${b[50]};
+          width: ${u[72]};
+          border-radius: ${s.md};
+          border: ${g.DEFAULT} solid ${i.border};
+          background-color: ${i.popover};
+          padding: ${t[4]};
+          color: ${i.popoverForeground};
+          box-shadow: ${c.md};
+          outline: none;
+        `,
+        children: [
+          /* @__PURE__ */ o(r.Text, { children: new d("The text you can edit") }),
+          /* @__PURE__ */ o(
+            e.PopoverClose,
+            {
+              "ws:label": "Close Button",
+              "ws:style": l`
+            position: absolute;
+            right: ${t[4]};
+            top: ${t[4]};
+            border-radius: ${s.sm};
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: ${a[4]};
+            width: ${a[4]};
+            border: 0;
+            background-color: transparent;
+            outline: none;
+            &:hover {
+              opacity: ${m[100]};
+            }
+            &:focus-visible {
+              box-shadow: ${c.ring};
+            }
+          `,
+              children: /* @__PURE__ */ o(r.HtmlEmbed, { "ws:label": "Close Icon", code: p })
+            }
+          )
+        ]
+      }
+    )
+  ] })
+};
+export {
+  P as meta
+};

package/lib/popover.ws.js

@@ -0,0 +1,51 @@
+import { PopoverIcon as e, TriggerIcon as t, ContentIcon as n, ButtonElementIcon as r } from "@webstudio-is/icons/svg";
+import { div as p, button as i } from "@webstudio-is/sdk/normalize.css";
+import { radix as o } from "./shared/meta.js";
+import { propsPopover as s, propsPopoverTrigger as c, propsPopoverContent as a, propsPopoverClose as l } from "./__generated__/popover.props.js";
+import { buttonReset as d } from "./shared/preset-styles.js";
+const C = {
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  props: c
+}, y = {
+  icon: n,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [o.PopoverClose]
+  },
+  presetStyle: {
+    div: p
+  },
+  initialProps: ["side", "sideOffset", "align", "alignOffset"],
+  props: a
+}, h = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [o.PopoverTrigger, o.PopoverContent]
+  },
+  initialProps: ["open"],
+  props: s
+}, u = {
+  icon: r,
+  label: "Close Button",
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: {
+    button: [d, i].flat()
+  },
+  props: l
+};
+export {
+  h as metaPopover,
+  u as metaPopoverClose,
+  y as metaPopoverContent,
+  C as metaPopoverTrigger
+};

package/lib/radio-group.js

@@ -0,0 +1,12 @@
+import { jsx as n } from "react/jsx-runtime";
+import { forwardRef as c, useState as i, useEffect as m } from "react";
+import { Item as s, Indicator as f, Root as d } from "@radix-ui/react-radio-group";
+const I = c(({ defaultValue: r, ...t }, a) => {
+  const o = t.value ?? r ?? "", [u, e] = i(o);
+  return m(() => e(o), [o]), /* @__PURE__ */ n(d, { ...t, ref: a, value: u, onValueChange: e });
+}), G = s, V = f;
+export {
+  I as RadioGroup,
+  V as RadioGroupIndicator,
+  G as RadioGroupItem
+};

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

@@ -0,0 +1,49 @@
+import { RadioGroupIcon as e, ItemIcon as t, TriggerIcon as r } from "@webstudio-is/icons/svg";
+import { div as n, button as a, span as i } from "@webstudio-is/sdk/normalize.css";
+import { radix as o } from "./shared/meta.js";
+import { buttonReset as c } from "./shared/preset-styles.js";
+import { propsRadioGroup as p, propsRadioGroupItem as d, propsRadioGroupIndicator as s } from "./__generated__/radio-group.props.js";
+const G = {
+  icon: e,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [o.RadioGroupItem]
+  },
+  states: [
+    { label: "Checked", selector: "[data-state=checked]" },
+    { label: "Unchecked", selector: "[data-state=unchecked]" }
+  ],
+  presetStyle: {
+    div: n
+  },
+  initialProps: ["id", "class", "name", "value", "required"],
+  props: p
+}, h = {
+  icon: t,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [o.RadioGroupIndicator]
+  },
+  presetStyle: {
+    button: [a, c].flat()
+  },
+  initialProps: ["value"],
+  props: d
+}, f = {
+  icon: r,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: {
+    span: i
+  },
+  props: s
+};
+export {
+  G as metaRadioGroup,
+  f as metaRadioGroupIndicator,
+  h as metaRadioGroupItem
+};

package/lib/select.js

@@ -0,0 +1,58 @@
+import { jsx as r } from "react/jsx-runtime";
+import { forwardRef as a, useState as m, useEffect as f, useContext as g } from "react";
+import { Viewport as C, Item as I, ItemIndicator as P, ItemText as h, Root as x, Trigger as V, Value as v, Portal as w, Content as T } from "@radix-ui/react-select";
+import { ReactSdkContext as $, getClosestInstance as u } from "@webstudio-is/react-sdk/runtime";
+const y = a(({ defaultOpen: t, defaultValue: e, ...n }, o) => {
+  const c = n.open ?? t ?? !1, [S, l] = m(c);
+  f(() => l(c), [c]);
+  const i = n.value ?? e ?? "", [d, p] = m(i);
+  return f(() => p(i), [i]), /* @__PURE__ */ r(
+    x,
+    {
+      ...n,
+      open: S,
+      onOpenChange: l,
+      value: d,
+      onValueChange: p
+    }
+  );
+}), M = a((t, e) => {
+  const { renderer: n } = g($);
+  return /* @__PURE__ */ r(V, { onPointerDown: n === "canvas" ? (c) => {
+    c.preventDefault();
+  } : void 0, ref: e, ...t });
+}), N = a((t, e) => /* @__PURE__ */ r(v, { ref: e, ...t })), b = a((t, e) => /* @__PURE__ */ r(w, { children: /* @__PURE__ */ r(T, { ref: e, ...t, position: "popper" }) })), j = C, E = I, U = P, _ = h, s = "@webstudio-is/sdk-components-react-radix", q = {
+  onNavigatorUnselect: (t, e) => {
+    for (const n of e.instancePath)
+      if (n.component === `${s}:SelectContent`) {
+        const o = u(
+          e.instancePath,
+          n,
+          `${s}:Select`
+        );
+        o && t.setMemoryProp(o, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (t, e) => {
+    for (const n of e.instancePath)
+      if (n.component === `${s}:SelectContent`) {
+        const o = u(
+          e.instancePath,
+          n,
+          `${s}:Select`
+        );
+        o && t.setMemoryProp(o, "open", !0);
+      }
+  }
+};
+export {
+  y as Select,
+  b as SelectContent,
+  E as SelectItem,
+  U as SelectItemIndicator,
+  _ as SelectItemText,
+  M as SelectTrigger,
+  N as SelectValue,
+  j as SelectViewport,
+  q as hooksSelect
+};

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
+};

package/lib/select.ws.js

@@ -0,0 +1,89 @@
+import { SelectIcon as o, TriggerIcon as c, FormTextFieldIcon as r, ViewportIcon as l, ContentIcon as i, ItemIcon as p, CheckMarkIcon as s, TextIcon as a } from "@webstudio-is/icons/svg";
+import { button as d, span as t, div as n } from "@webstudio-is/sdk/normalize.css";
+import { radix as e } from "./shared/meta.js";
+import { propsSelect as S, propsSelectTrigger as m, propsSelectValue as I, propsSelectViewport as g, propsSelectContent as y, propsSelectItem as h, propsSelectItemIndicator as T, propsSelectItemText as x } from "./__generated__/select.props.js";
+const b = {
+  icon: o,
+  contentModel: {
+    category: "instance",
+    children: ["instance"],
+    descendants: [e.SelectTrigger, e.SelectContent]
+  },
+  initialProps: ["name", "value", "open", "required"],
+  props: S
+}, f = {
+  icon: c,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [e.SelectValue]
+  },
+  presetStyle: { button: d },
+  props: m
+}, w = {
+  label: "Value",
+  icon: r,
+  contentModel: {
+    category: "none",
+    children: []
+  },
+  presetStyle: { span: t },
+  initialProps: ["placeholder"],
+  props: I
+}, v = {
+  icon: i,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [e.SelectViewport]
+  },
+  presetStyle: { div: n },
+  props: y
+}, P = {
+  icon: l,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [e.SelectItem]
+  },
+  presetStyle: { div: n },
+  props: g
+}, k = {
+  icon: p,
+  contentModel: {
+    category: "none",
+    children: ["instance"],
+    descendants: [e.SelectItemIndicator, e.SelectItemText]
+  },
+  presetStyle: { div: n },
+  initialProps: ["value"],
+  props: h
+}, F = {
+  label: "Indicator",
+  icon: s,
+  contentModel: {
+    category: "none",
+    children: ["instance"]
+  },
+  presetStyle: { span: t },
+  props: T
+}, q = {
+  label: "Item Text",
+  icon: a,
+  contentModel: {
+    category: "none",
+    children: ["instance", "rich-text"]
+  },
+  presetStyle: { span: t },
+  props: x
+};
+export {
+  b as metaSelect,
+  v as metaSelectContent,
+  k as metaSelectItem,
+  F as metaSelectItemIndicator,
+  q as metaSelectItemText,
+  f as metaSelectTrigger,
+  w as metaSelectValue,
+  P as metaSelectViewport
+};

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

@@ -0,0 +1,38 @@
+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: "background-color",
+    value: { type: "keyword", value: "transparent" }
+  },
+  {
+    property: "background-image",
+    value: { type: "keyword", value: "none" }
+  },
+  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 {
+  b as buttonReset
+};

package/lib/shared/proxy.js

@@ -0,0 +1,5 @@
+import { createProxy as o } from "@webstudio-is/template";
+const t = o("@webstudio-is/sdk-components-react-radix:");
+export {
+  t as radix
+};

package/lib/shared/styles.js

@@ -0,0 +1,51 @@
+import { css as n } from "@webstudio-is/template";
+import { colors as o, borderRadius as s, fontSize as c, fontSizeLineHeight as u, weights as l, boxShadow as a, opacity as h, borderWidth as g, height as d, spacing as t } from "./theme.js";
+const $ = n`
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background-color: transparent;
+  border: 0 solid ${o.border};
+  border-radius: ${s.md};
+  font-size: ${c.sm};
+  line-height: ${u.sm};
+  font-weight: ${l.medium};
+  &:focus-visible {
+    outline: 2px solid transparent;
+    outline-offset: 2px;
+    box-shadow: ${a.ring};
+  }
+  &:disabled {
+    pointer-events: none;
+    opacity: ${h[50]};
+  }
+`, p = n`
+  &:hover {
+    background-color: ${o.accent};
+    color: ${o.accentForeground};
+  }
+`, f = n`
+  border: ${g.DEFAULT} solid ${o.input};
+  background-color: ${o.background};
+  &:hover {
+    background-color: ${o.accent};
+    color: ${o.accentForeground};
+  }
+`, b = n`
+  height: ${d[10]};
+  padding: ${t[2]} ${t[4]};
+`, m = n`
+  height: ${d[9]};
+  border-radius: ${s.md};
+  padding: 0 ${t[3]};
+`, y = n`
+  height: ${t[10]};
+  width: ${t[10]};
+  padding: ${t[0]} ${t[1.5]};
+`, B = (r, i = "default") => {
+  const e = [...$];
+  return r === "ghost" && e.push(...p), r === "outline" && e.push(...f), i === "default" && e.push(...b), i === "sm" && e.push(...m), i === "icon" && e.push(...y), e;
+};
+export {
+  B as getButtonStyle
+};