@webstudio-is/sdk-components-react-radix 0.0.0-021f2d4

package/lib/select.ws.js

@@ -0,0 +1,155 @@
+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",
+  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",
+  icon: c,
+  presetStyle: {
+    span: e
+  },
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "SelectTrigger" }
+  }
+}, w = {
+  type: "container",
+  icon: r,
+  presetStyle: {
+    div: t
+  },
+  constraints: [
+    {
+      relation: "ancestor",
+      component: { $eq: "Select" }
+    },
+    {
+      relation: "descendant",
+      component: { $eq: "SelectViewport" }
+    }
+  ]
+}, b = {
+  type: "container",
+  icon: p,
+  presetStyle: {
+    div: t
+  },
+  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
+  }
+}, v = {
+  type: "container",
+  label: "Indicator",
+  icon: s,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "SelectItem" }
+  },
+  presetStyle: {
+    span: e
+  }
+}, P = {
+  type: "container",
+  label: "Item Text",
+  icon: l,
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "SelectItem" }
+  },
+  presetStyle: {
+    span: e
+  }
+}, h = {
+  props: m,
+  initialProps: ["name", "value", "open", "required"]
+}, k = {
+  props: S
+}, F = {
+  props: I,
+  initialProps: ["placeholder"]
+}, j = {
+  props: d
+}, z = {
+  props: q
+}, A = {
+  props: y,
+  initialProps: ["value"]
+}, B = {
+  props: $
+}, D = {
+  props: T
+};
+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
+};

package/lib/shared/preset-styles.js

@@ -0,0 +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 = [
+  {
+    property: "backgroundColor",
+    value: { type: "keyword", value: "transparent" }
+  },
+  {
+    property: "backgroundImage",
+    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")
+];
+export {
+  i 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
+};

package/lib/shared/theme.js

@@ -0,0 +1,162 @@
+const o = {
+  sm: "0.875rem",
+  lg: "1.125rem"
+}, t = {
+  sm: "1.25rem",
+  lg: "1.75rem"
+}, p = {
+  none: "1",
+  snug: "1.375"
+}, s = {
+  medium: "500"
+}, g = {
+  tight: "-0.025em"
+}, m = {
+  0: "0px",
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  7: "1.75rem",
+  8: "2rem",
+  9: "2.25rem",
+  10: "2.5rem",
+  11: "2.75rem",
+  12: "3rem",
+  14: "3.5rem",
+  16: "4rem",
+  20: "5rem",
+  24: "6rem",
+  28: "7rem",
+  32: "8rem",
+  36: "9rem",
+  40: "10rem",
+  44: "11rem",
+  48: "12rem",
+  52: "13rem",
+  56: "14rem",
+  60: "15rem",
+  64: "16rem",
+  72: "18rem",
+  80: "20rem",
+  96: "24rem",
+  px: "1px",
+  "0.5": "0.125rem",
+  "1.5": "0.375rem",
+  "2.5": "0.625rem",
+  "3.5": "0.875rem"
+}, c = {
+  ...m,
+  full: "100%"
+}, x = {
+  ...m,
+  full: "100%"
+}, i = {
+  0: "0rem",
+  xs: "20rem",
+  sm: "24rem",
+  md: "28rem",
+  lg: "32rem",
+  xl: "36rem",
+  prose: "65ch"
+}, b = {
+  0: "0px",
+  2: "2px",
+  4: "4px",
+  8: "8px",
+  DEFAULT: "1px"
+}, d = {
+  sm: "0.125rem",
+  md: "0.375rem",
+  full: "9999px"
+}, r = {
+  transparent: "transparent",
+  current: "currentColor",
+  inherit: "inherit",
+  popover: "rgb(255, 255, 255)",
+  popoverForeground: "rgb(2, 8, 23)",
+  border: "rgb(226, 232, 240)",
+  background: "rgb(255, 255, 255)",
+  foreground: "hsl(222.2 84% 4.9%)",
+  ring: "rgb(148, 163, 184)",
+  mutedForeground: "rgb(100, 116, 139)",
+  muted: "hsl(210 40% 96.1%)",
+  primary: "rgb(15, 23, 42)",
+  primaryForeground: "hsl(210 40% 98%)",
+  destructive: "rgb(239, 68, 68)",
+  destructiveForeground: "rgb(248, 250, 252)",
+  accent: "rgb(241, 245, 249)",
+  accentForeground: "rgb(15, 23, 42)",
+  input: "rgb(226, 232, 240)",
+  secondary: "rgb(241, 245, 249)",
+  secondaryForeground: "rgb(15, 23, 42)"
+}, u = {
+  all: "all 150ms cubic-bezier(0.4, 0, 0.2, 1)",
+  transform: "transform 150ms cubic-bezier(0.4, 0, 0.2, 1)"
+}, l = {
+  0: "0",
+  5: "0.05",
+  10: "0.1",
+  20: "0.2",
+  25: "0.25",
+  30: "0.3",
+  40: "0.4",
+  50: "0.5",
+  60: "0.6",
+  70: "0.7",
+  75: "0.75",
+  80: "0.8",
+  90: "0.9",
+  95: "0.95",
+  100: "1"
+}, n = {
+  0: "0px",
+  1: "1px",
+  2: "2px",
+  4: "4px",
+  8: "8px",
+  DEFAULT: "3px"
+}, e = {
+  0: "0px",
+  1: "1px",
+  2: "2px",
+  4: "4px",
+  8: "8px"
+}, a = {
+  sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+  md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+  lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+  // 0 0 0 ringOffsetWidth ringOffsetColor
+  // 0 0 0 ringWidth + ringOffsetWidth ringColor
+  ring: `0 0 0 ${e[2]} ${r.background}, 0 0 0 calc(${n[2]} + ${e[2]}) ${r.ring}`
+}, h = {
+  0: "0",
+  10: "10",
+  20: "20",
+  30: "30",
+  40: "40",
+  50: "50"
+}, f = {
+  sm: "blur(0 1px 2px 0 rgb(0 0 0 / 0.05))"
+};
+export {
+  f as blur,
+  d as borderRadius,
+  b as borderWidth,
+  a as boxShadow,
+  r as colors,
+  o as fontSize,
+  t as fontSizeLineHeight,
+  x as height,
+  g as letterSpacing,
+  p as lineHeight,
+  i as maxWidth,
+  l as opacity,
+  m as spacing,
+  u as transition,
+  s as weights,
+  c as width,
+  h as zIndex
+};

package/lib/sheet.template.js

@@ -0,0 +1,129 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { MenuIcon as s, LargeXIcon as b } from "@webstudio-is/icons/svg";
+import { $ as t, css as i, PlaceholderValue as n } from "@webstudio-is/template";
+import { radix as o } from "./shared/proxy.js";
+import { zIndex as d, blur as p, width as u, spacing as l, borderWidth as w, colors as a, boxShadow as c, maxWidth as f, fontSize as g, lineHeight as x, letterSpacing as $, fontSizeLineHeight as y, borderRadius as S, opacity as h, height as m } from "./shared/theme.js";
+import { getButtonStyle as D } from "./shared/styles.js";
+const B = {
+  category: "radix",
+  icon: s,
+  description: "Displays content in a menu that slides out from the side of the screen, triggered by a button. Use this component for a typical mobile hamburger menu.",
+  order: 1,
+  template: /* @__PURE__ */ r(o.Dialog, { "ws:label": "Sheet", children: [
+    /* @__PURE__ */ e(o.DialogTrigger, { "ws:label": "Sheet Trigger", children: /* @__PURE__ */ e(t.Button, { "ws:style": D("ghost", "icon"), children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Hamburger Menu Svg", code: s }) }) }),
+    /* @__PURE__ */ e(
+      o.DialogOverlay,
+      {
+        "ws:label": "Sheet Overlay",
+        "ws:style": i`
+          position: fixed;
+          inset: 0;
+          z-index: ${d[50]};
+          background-color: rgb(255 255 255 / 0.8);
+          backdrop-filter: ${p.sm};
+          /* To allow positioning Content */
+          display: flex;
+          flex-direction: column;
+          overflow: auto;
+        `,
+        children: /* @__PURE__ */ r(
+          o.DialogContent,
+          {
+            "ws:label": "Sheet Content",
+            "ws:style": i`
+            width: ${u.full};
+            z-index: ${d[50]};
+            display: flex;
+            flex-direction: column;
+            gap: ${l[4]};
+            border: ${w.DEFAULT} solid ${a.border};
+            background-color: ${a.background};
+            padding: ${l[6]};
+            box-shadow: ${c.lg};
+            position: relative;
+            /* side=left */
+            margin-right: auto;
+            max-width: ${f.sm};
+            flex-grow: 1;
+          `,
+            children: [
+              /* @__PURE__ */ r(t.Box, { "ws:label": "Navigation", tag: "nav", role: "navigation", children: [
+                /* @__PURE__ */ r(
+                  t.Box,
+                  {
+                    "ws:label": "Sheet Header",
+                    "ws:style": i`
+                display: flex;
+                flex-direction: column;
+                gap: ${l[2]};
+              `,
+                    children: [
+                      /* @__PURE__ */ e(
+                        o.DialogTitle,
+                        {
+                          "ws:label": "Sheet Title",
+                          "ws:style": i`
+                  font-size: ${g.lg};
+                  line-height: ${x.none};
+                  letter-spacing: ${$.tight};
+                  margin: 0;
+                `,
+                          children: new n("Sheet Title")
+                        }
+                      ),
+                      /* @__PURE__ */ e(
+                        o.DialogDescription,
+                        {
+                          "ws:label": "Sheet Description",
+                          "ws:style": i`
+                  font-size: ${g.sm};
+                  line-height: ${y.sm};
+                  color: ${a.mutedForeground};
+                  margin: 0;
+                `,
+                          children: new n("Sheet description text you can edit")
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(t.Text, { children: new n("The text you can edit") })
+              ] }),
+              /* @__PURE__ */ e(
+                o.DialogClose,
+                {
+                  "ws:label": "Close Button",
+                  "ws:style": i`
+              position: absolute;
+              right: ${l[4]};
+              top: ${l[4]};
+              border-radius: ${S.sm};
+              opacity: ${h[70]};
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              height: ${m[4]};
+              width: ${m[4]};
+              border: 0;
+              background-color: transparent;
+              outline: none;
+              &:hover {
+                opacity: ${h[100]};
+              }
+              &:focus-visible {
+                box-shadow: ${c.ring};
+              }
+            `,
+                  children: /* @__PURE__ */ e(t.HtmlEmbed, { "ws:label": "Close Icon", code: b })
+                }
+              )
+            ]
+          }
+        )
+      }
+    )
+  ] })
+};
+export {
+  B as meta
+};

package/lib/switch.js

@@ -0,0 +1,8 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { Root as c, Thumb as h } from "@radix-ui/react-switch";
+const d = f(({ defaultChecked: o, checked: r, ...t }, m) => /* @__PURE__ */ e(c, { ...t, ref: m, defaultChecked: r ?? o })), n = h;
+export {
+  d as Switch,
+  n as SwitchThumb
+};

package/lib/switch.template.js

@@ -0,0 +1,63 @@
+import { jsx as o } from "react/jsx-runtime";
+import { css as r } from "@webstudio-is/template";
+import { radix as e } from "./shared/proxy.js";
+import { borderRadius as a, borderWidth as d, transition as i, boxShadow as n, opacity as s, colors as t, height as c, width as l } from "./shared/theme.js";
+const m = {
+  category: "radix",
+  description: "A control that allows the user to toggle between checked and not checked.",
+  order: 11,
+  template: /* @__PURE__ */ o(
+    e.Switch,
+    {
+      "ws:style": r`
+        display: inline-flex;
+        height: 24px;
+        width: 44px;
+        flex-shrink: 0;
+        cursor: pointer;
+        align-items: center;
+        border-radius: ${a.full};
+        border: ${d[2]} solid transparent;
+        transition: ${i.all};
+        &:focus-visible {
+          outline: none;
+          box-shadow: ${n.ring};
+        }
+        &:disabled {
+          cursor: not-allowed;
+          opacity: ${s[50]};
+        }
+        &[data-state="checked"] {
+          background-color: ${t.primary};
+        }
+        &[data-state="unchecked"] {
+          background-color: ${t.input};
+        }
+      `,
+      children: /* @__PURE__ */ o(
+        e.SwitchThumb,
+        {
+          "ws:style": r`
+          pointer-events: none;
+          display: block;
+          height: ${c[5]};
+          width: ${l[5]};
+          border-radius: ${a.full};
+          background-color: ${t.background};
+          box-shadow: ${n.lg};
+          transition: ${i.transform};
+          &[data-state="checked"] {
+            transform: translateX(20px);
+          }
+          &[data-state="unchecked"] {
+            transform: translateX(0px);
+          }
+        `
+        }
+      )
+    }
+  )
+};
+export {
+  m as meta
+};

package/lib/switch.ws.js

@@ -0,0 +1,63 @@
+import { SwitchIcon as e, TriggerIcon as o } from "@webstudio-is/icons/svg";
+import { defaultStates as t } from "@webstudio-is/sdk";
+import { button as c, span as a } from "@webstudio-is/sdk/normalize.css";
+import { buttonReset as s } from "./shared/preset-styles.js";
+import { propsSwitch as n, propsSwitchThumb as r } from "./__generated__/switch.props.js";
+const d = {
+  type: "container",
+  constraints: {
+    relation: "descendant",
+    component: { $eq: "SwitchThumb" }
+  },
+  icon: e,
+  states: [
+    ...t,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    button: [c, s].flat()
+  }
+}, u = {
+  type: "container",
+  constraints: {
+    relation: "ancestor",
+    component: { $eq: "Switch" }
+  },
+  icon: o,
+  states: [
+    ...t,
+    {
+      label: "Checked",
+      selector: "[data-state=checked]",
+      category: "component-states"
+    },
+    {
+      label: "Unchecked",
+      selector: "[data-state=unchecked]",
+      category: "component-states"
+    }
+  ],
+  presetStyle: {
+    span: a
+  }
+}, S = {
+  props: n,
+  initialProps: ["id", "className", "name", "value", "checked", "required"]
+}, b = {
+  props: r
+};
+export {
+  d as metaSwitch,
+  u as metaSwitchThumb,
+  S as propsMetaSwitch,
+  b as propsMetaSwitchThumb
+};