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

package/lib/select.ws.js

@@ -1,77 +1,9 @@
-import { SelectIcon as b, TriggerIcon as T, FormTextFieldIcon as q, ContentIcon as w, ViewportIcon as $, ItemIcon as C, CheckMarkIcon as d, TextIcon as M } from "@webstudio-is/icons/svg";
-import { button as k, span as i, div as F } from "@webstudio-is/sdk/normalize.css";
-import { flex as r, h as m, w as t, items as l, justify as y, rounded as a, border as n, bg as p, px as P, py as S, text as e, state as u, focus as g, outline as h, ring as E, disabled as W, cursor as I, opacity as f, relative as v, z as j, property as o, overflow as z, shadow as D, p as H, select as L, pl as U, pr as A, pointerEvents as B, absolute as G, left as J } from "./theme/tailwind-classes.js";
-import { propsSelect as K, propsSelectTrigger as N, propsSelectValue as O, propsSelectContent as Q, propsSelectViewport as R, propsSelectItem as X, propsSelectItemIndicator as Y, propsSelectItemText as Z } from "./__generated__/select.props.js";
-const s = {
-  div: F
-}, c = ({
-  props: x,
-  children: V
-}) => ({
-  type: "instance",
-  component: "SelectItem",
-  props: x,
-  // relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none
-  // focus:bg-accent focus:text-accent-foreground
-  // data-[disabled]:pointer-events-none data-[disabled]:opacity-50
-  styles: [
-    v(),
-    r(),
-    t("full"),
-    I("default"),
-    L(),
-    l("center"),
-    a("md"),
-    S(1.5),
-    U(8),
-    A(2),
-    e("sm"),
-    h(),
-    g([p("accent"), e("accentForeground")].flat()),
-    u(
-      [B("none"), f(50)].flat(),
-      "[data-disabled]"
-    )
-  ].flat(),
-  children: [
-    {
-      type: "instance",
-      component: "SelectItemIndicator",
-      // absolute left-2 flex h-3.5 w-3.5 items-center justify-center
-      styles: [
-        G(),
-        J(2),
-        r(),
-        m(3.5),
-        t(3.5),
-        l("center"),
-        y("center")
-      ].flat(),
-      children: [
-        {
-          type: "instance",
-          component: "HtmlEmbed",
-          label: "Indicator Icon",
-          props: [
-            {
-              type: "string",
-              name: "code",
-              value: d
-            }
-          ],
-          children: []
-        }
-      ]
-    },
-    {
-      type: "instance",
-      component: "SelectItemText",
-      children: V
-    }
-  ]
-}), oe = {
-  category: "radix",
-  order: 10,
+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 m } from "@webstudio-is/sdk/normalize.css";
+import { propsSelect as S, propsSelectTrigger as I, propsSelectValue as d, propsSelectContent as q, propsSelectViewport as y, propsSelectItem as $, propsSelectItemIndicator as T, propsSelectItemText as g } from "./__generated__/select.props.js";
+const t = {
+  div: m
+}, x = {
   type: "container",
   constraints: [
     {
@@ -83,140 +15,13 @@ const s = {
       component: { $eq: "SelectContent" }
     }
   ],
-  icon: b,
-  stylable: !1,
-  description: "Use within a form to give your users a list of options to choose from.",
-  template: [
-    {
-      type: "instance",
-      component: "Select",
-      variables: {
-        selectValue: { initialValue: "" }
-      },
-      props: [
-        {
-          name: "value",
-          type: "expression",
-          code: "selectValue"
-        },
-        {
-          name: "onValueChange",
-          type: "action",
-          value: [
-            { type: "execute", args: ["value"], code: "selectValue = value" }
-          ]
-        }
-      ],
-      children: [
-        {
-          type: "instance",
-          component: "SelectTrigger",
-          // flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background
-          // placeholder:text-muted-foreground
-          // focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
-          // disabled:cursor-not-allowed disabled:opacity-50
-          styles: [
-            r(),
-            m(10),
-            t("full"),
-            l("center"),
-            y("between"),
-            a("md"),
-            n(),
-            n("input"),
-            p("background"),
-            P(3),
-            S(2),
-            e("sm"),
-            u([e("mutedForeground")].flat(), "::placeholder"),
-            g(
-              [h(), E("ring", 2, "background", 2)].flat()
-            ),
-            W([I("not-allowed"), f(50)].flat())
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "SelectValue",
-              props: [{ name: "placeholder", type: "string", value: "Theme" }],
-              children: []
-            }
-          ]
-        },
-        {
-          type: "instance",
-          component: "SelectContent",
-          // relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md
-          // data-[state=open]:animate-in
-          // data-[state=closed]:animate-out data-[state=closed]:fade-out-0
-          // data-[state=open]:fade-in-0
-          // data-[state=closed]:zoom-out-95
-          // data-[state=open]:zoom-in-95
-          // data-[side=bottom]:slide-in-from-top-2
-          // data-[side=left]:slide-in-from-right-2
-          // data-[side=right]:slide-in-from-left-2
-          // data-[side=top]:slide-in-from-bottom-2
-          // position=popper
-          // data-[side=bottom]:translate-y-1
-          // data-[side=left]:-translate-x-1
-          // data-[side=right]:translate-x-1
-          // data-[side=top]:-translate-y-1
-          styles: [
-            v(),
-            j(50),
-            o("minWidth", "8rem"),
-            z("hidden"),
-            a("md"),
-            n(),
-            p("popover"),
-            e("popoverForeground"),
-            D("md")
-          ].flat(),
-          children: [
-            {
-              type: "instance",
-              component: "SelectViewport",
-              // p-1
-              // position=popper
-              // h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]
-              styles: [
-                H(1),
-                o("height", "--radix-select-trigger-height"),
-                t("full"),
-                o("minWidth", "--radix-select-trigger-width")
-              ].flat(),
-              children: [
-                c({
-                  props: [{ name: "value", type: "string", value: "light" }],
-                  children: [
-                    { type: "text", value: "Light", placeholder: !0 }
-                  ]
-                }),
-                c({
-                  props: [{ name: "value", type: "string", value: "dark" }],
-                  children: [
-                    { type: "text", value: "Dark", placeholder: !0 }
-                  ]
-                }),
-                c({
-                  props: [{ name: "value", type: "string", value: "system" }],
-                  children: [
-                    { type: "text", value: "System", placeholder: !0 }
-                  ]
-                })
-              ]
-            }
-          ]
-        }
-      ]
-    }
-  ]
-}, ce = {
-  category: "hidden",
+  icon: o,
+  stylable: !1
+}, C = {
   type: "container",
-  icon: T,
+  icon: n,
   presetStyle: {
-    button: k
+    button: i
   },
   constraints: [
     {
@@ -228,23 +33,21 @@ const s = {
       component: { $eq: "SelectValue" }
     }
   ]
-}, re = {
-  category: "hidden",
+}, w = {
   type: "container",
   label: "Value",
-  icon: q,
+  icon: c,
   presetStyle: {
-    span: i
+    span: e
   },
   constraints: {
     relation: "ancestor",
     component: { $eq: "SelectTrigger" }
   }
-}, le = {
-  category: "hidden",
+}, b = {
   type: "container",
-  icon: w,
-  presetStyle: s,
+  icon: r,
+  presetStyle: t,
   constraints: [
     {
       relation: "ancestor",
@@ -255,11 +58,10 @@ const s = {
       component: { $eq: "SelectViewport" }
     }
   ]
-}, ae = {
-  category: "hidden",
+}, f = {
   type: "container",
-  icon: $,
-  presetStyle: s,
+  icon: p,
+  presetStyle: t,
   constraints: [
     {
       relation: "ancestor",
@@ -270,10 +72,9 @@ const s = {
       component: { $eq: "SelectItem" }
     }
   ]
-}, pe = {
-  category: "hidden",
+}, v = {
   type: "container",
-  icon: C,
+  icon: a,
   constraints: [
     {
       relation: "ancestor",
@@ -288,66 +89,64 @@ const s = {
       component: { $eq: "SelectItemText" }
     }
   ],
-  presetStyle: s
-}, ie = {
-  category: "hidden",
+  presetStyle: t
+}, P = {
   type: "container",
   label: "Indicator",
-  icon: d,
+  icon: s,
   constraints: {
     relation: "ancestor",
     component: { $eq: "SelectItem" }
   },
   presetStyle: {
-    span: i
+    span: e
   }
-}, se = {
-  category: "hidden",
+}, h = {
   type: "container",
   label: "Item Text",
-  icon: M,
+  icon: l,
   constraints: {
     relation: "ancestor",
     component: { $eq: "SelectItem" }
   },
   presetStyle: {
-    span: i
+    span: e
   }
-}, de = {
-  props: K,
+}, k = {
+  props: S,
   initialProps: ["name", "value", "open", "required"]
-}, me = {
-  props: N
-}, ye = {
-  props: O,
+}, F = {
+  props: I
+}, j = {
+  props: d,
   initialProps: ["placeholder"]
-}, Se = {
-  props: Q
-}, ue = {
-  props: R
-}, ge = {
-  props: X,
+}, z = {
+  props: q
+}, A = {
+  props: y
+}, B = {
+  props: $,
   initialProps: ["value"]
-}, he = {
-  props: Y
-}, Ie = {
-  props: Z
+}, D = {
+  props: T
+}, E = {
+  props: g
 };
 export {
-  oe as metaSelect,
-  le as metaSelectContent,
-  pe as metaSelectItem,
-  ie as metaSelectItemIndicator,
-  se as metaSelectItemText,
-  ce as metaSelectTrigger,
-  re as metaSelectValue,
-  ae as metaSelectViewport,
-  de as propsMetaSelect,
-  Se as propsMetaSelectContent,
-  ge as propsMetaSelectItem,
-  he as propsMetaSelectItemIndicator,
-  Ie as propsMetaSelectItemText,
-  me as propsMetaSelectTrigger,
-  ye as propsMetaSelectValue,
-  ue as propsMetaSelectViewport
+  x as metaSelect,
+  b as metaSelectContent,
+  v as metaSelectItem,
+  P as metaSelectItemIndicator,
+  h as metaSelectItemText,
+  C as metaSelectTrigger,
+  w as metaSelectValue,
+  f as metaSelectViewport,
+  k as propsMetaSelect,
+  z as propsMetaSelectContent,
+  B as propsMetaSelectItem,
+  D as propsMetaSelectItemIndicator,
+  E as propsMetaSelectItemText,
+  F as propsMetaSelectTrigger,
+  j as propsMetaSelectValue,
+  A 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
+};