@webstudio-is/sdk-components-react-radix 0.185.0 → 0.191.0

package/lib/theme/tailwind-classes.js

@@ -0,0 +1,474 @@
+import { zIndex as h, borderRadius as m, colors as n, width as g, height as k, opacity as x, cursor as S, maxWidth as W, blur as B, listStyleType as C, spacing as T, lineHeight as L, letterSpacing as R, fontSize as i, fontSizeLineHeight as V, boxShadow as D, borderWidth as y, padding as G, margin as z, inset as F, ringOffsetWidth as E, lineClamp as j, ringWidth as H } from "./__generated__/tailwind-theme.js";
+const ue = (e, t) => t.startsWith("--") ? {
+  property: e,
+  value: { type: "var", value: t.slice(2) }
+} : {
+  property: e,
+  value: { type: "unparsed", value: t }
+}, I = () => {
+  const e = n.border;
+  return [
+    {
+      property: "borderTopStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderRightStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderLeftStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderTopColor",
+      value: e
+    },
+    {
+      property: "borderRightColor",
+      value: e
+    },
+    {
+      property: "borderBottomColor",
+      value: e
+    },
+    {
+      property: "borderLeftColor",
+      value: e
+    }
+  ];
+}, pe = (e) => [
+  {
+    property: "zIndex",
+    value: h[e]
+  }
+], U = (e) => [
+  {
+    property: "overflowX",
+    value: { type: "keyword", value: e }
+  },
+  {
+    property: "overflowY",
+    value: { type: "keyword", value: e }
+  }
+], le = (e = "DEFAULT") => {
+  const t = m[e];
+  return [
+    { property: "borderTopLeftRadius", value: t },
+    { property: "borderTopRightRadius", value: t },
+    { property: "borderBottomRightRadius", value: t },
+    { property: "borderBottomLeftRadius", value: t }
+  ];
+}, ae = (e) => {
+  if (typeof e == "number" || e === void 0) {
+    const r = y[e ?? "DEFAULT"];
+    return [
+      ...I(),
+      { property: "borderTopWidth", value: r },
+      { property: "borderRightWidth", value: r },
+      { property: "borderBottomWidth", value: r },
+      { property: "borderLeftWidth", value: r }
+    ];
+  }
+  const t = n[e];
+  return [
+    { property: "borderTopColor", value: t },
+    { property: "borderRightColor", value: t },
+    { property: "borderBottomColor", value: t },
+    { property: "borderLeftColor", value: t }
+  ];
+}, ie = (e) => {
+  let t = { type: "unit", value: 1, unit: "number" }, r = n.border;
+  return t = y.DEFAULT, [
+    {
+      property: "borderBottomWidth",
+      value: t
+    },
+    {
+      property: "borderBottomStyle",
+      value: { type: "keyword", value: "solid" }
+    },
+    {
+      property: "borderBottomColor",
+      value: r
+    }
+  ];
+}, u = (e) => (t) => [{ property: e, value: G[t] }], $ = (e) => u("paddingTop")(e), A = (e) => u("paddingBottom")(e), M = (e) => u("paddingLeft")(e), O = (e) => u("paddingRight")(e), _ = (e) => [M(e), O(e)].flat(), X = (e) => [$(e), A(e)].flat(), ye = (e) => [_(e), X(e)].flat(), p = (e) => (t) => [{ property: e, value: z[t] }], Y = (e) => p("marginLeft")(e), q = (e) => p("marginRight")(e), J = (e) => p("marginTop")(e), K = (e) => p("marginBottom")(e), N = (e) => [Y(e), q(e)].flat(), Q = (e) => [J(e), K(e)].flat(), se = (e) => [N(e), Q(e)].flat(), ve = (e) => [{ property: "width", value: g[e] }], ce = (e) => [{ property: "height", value: k[e] }], de = (e) => [
+  {
+    property: "opacity",
+    value: x[e]
+  }
+], be = (e) => [
+  {
+    property: "cursor",
+    value: S[e]
+  }
+], fe = (e) => [{ property: "maxWidth", value: W[e] }], o = (e, t) => ({ property: e, value: F[t] }), we = (e) => [o("top", e)], he = (e) => [o("right", e)], me = (e) => [o("left", e)], ge = (e) => [
+  o("left", e),
+  o("right", e),
+  o("top", e),
+  o("bottom", e)
+], ke = (e) => {
+  let t = e;
+  return t = "1 / 1", [
+    {
+      property: "aspectRatio",
+      value: { type: "unparsed", value: t }
+    }
+  ];
+}, xe = (e) => [{ property: "backdropFilter", value: B[e] }], Se = (e) => [{ property: "listStyleType", value: C[e] }], We = (e) => [
+  {
+    property: "userSelect",
+    value: {
+      type: "keyword",
+      value: "none"
+    }
+  }
+], Be = (e, t) => {
+  const r = n[e];
+  return t !== void 0 && r.type === "rgb" && (r.alpha = t / 100), [
+    {
+      property: "backgroundColor",
+      value: r
+    }
+  ];
+}, Ce = () => [{ property: "position", value: { type: "keyword", value: "fixed" } }], Te = () => [
+  { property: "position", value: { type: "keyword", value: "relative" } }
+], Le = () => [
+  { property: "position", value: { type: "keyword", value: "absolute" } }
+], Z = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  baseline: "baseline",
+  stretch: "stretch"
+}, Re = (e) => [
+  {
+    property: "alignItems",
+    value: {
+      type: "keyword",
+      value: Z[e]
+    }
+  }
+], P = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+  stretch: "stretch"
+}, Ve = (e) => [
+  {
+    property: "justifyContent",
+    value: {
+      type: "keyword",
+      value: P[e]
+    }
+  }
+], De = () => [
+  { property: "display", value: { type: "keyword", value: "inline-flex" } }
+], Ge = () => [{ property: "display", value: { type: "keyword", value: "block" } }], ee = { row: "row", col: "column" }, ze = (e) => e === void 0 ? [{ property: "display", value: { type: "keyword", value: "flex" } }] : e === 1 ? [
+  {
+    property: "flexGrow",
+    value: { type: "unit", value: 1, unit: "number" }
+  },
+  {
+    property: "flexShrink",
+    value: { type: "unit", value: 1, unit: "number" }
+  },
+  {
+    property: "flexBasis",
+    value: { type: "unit", value: 0, unit: "%" }
+  }
+] : e === "auto" ? [
+  {
+    property: "flexGrow",
+    value: { type: "unit", value: 1, unit: "number" }
+  },
+  {
+    property: "flexShrink",
+    value: { type: "unit", value: 1, unit: "number" }
+  },
+  {
+    property: "flexBasis",
+    value: { type: "keyword", value: "auto" }
+  }
+] : e === "initial" ? [
+  {
+    property: "flexGrow",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "flexShrink",
+    value: { type: "unit", value: 1, unit: "number" }
+  },
+  {
+    property: "flexBasis",
+    value: { type: "keyword", value: "auto" }
+  }
+] : e === "none" ? [
+  {
+    property: "flexGrow",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "flexShrink",
+    value: { type: "unit", value: 0, unit: "number" }
+  },
+  {
+    property: "flexBasis",
+    value: { type: "keyword", value: "auto" }
+  }
+] : [
+  {
+    property: "flexDirection",
+    value: {
+      type: "keyword",
+      value: ee[e]
+    }
+  }
+], Fe = () => [
+  {
+    property: "flexGrow",
+    value: { type: "unit", value: 1, unit: "number" }
+  }
+], Ee = (e) => [
+  {
+    property: "flexGrow",
+    value: { type: "unit", value: e, unit: "number" }
+  }
+], je = (e) => {
+  const t = T[e];
+  return [
+    { property: "rowGap", value: t },
+    { property: "columnGap", value: t }
+  ];
+}, He = (e) => [
+  ...U("hidden"),
+  {
+    property: "display",
+    value: {
+      type: "keyword",
+      value: "-webkit-box"
+    }
+  },
+  {
+    property: "-webkit-box-orient",
+    value: {
+      type: "keyword",
+      value: "vertical"
+    }
+  },
+  {
+    property: "-webkit-line-clamp",
+    value: j[e]
+  }
+], Ie = (e) => [{ property: "lineHeight", value: L[e] }], Ue = (e) => [
+  { property: "letterSpacing", value: R[e] }
+], $e = (e) => [
+  {
+    property: "outlineWidth",
+    value: { type: "unit", value: 2, unit: "px" }
+  },
+  {
+    property: "outlineStyle",
+    value: { type: "keyword", value: "solid" }
+  },
+  {
+    property: "outlineColor",
+    value: { type: "keyword", value: "transparent" }
+  },
+  {
+    property: "outlineOffset",
+    value: { type: "unit", value: 2, unit: "px" }
+  }
+], te = Object.keys(i), re = (e) => te.includes(e), Ae = (e) => re(e) ? [
+  { property: "fontSize", value: i[e] },
+  { property: "lineHeight", value: V[e] }
+] : [
+  {
+    property: "color",
+    value: n[e]
+  }
+], Me = () => [
+  {
+    property: "textDecorationLine",
+    value: { type: "keyword", value: "none" }
+  }
+], Oe = () => [
+  {
+    property: "textDecorationLine",
+    value: { type: "keyword", value: "underline" }
+  }
+], oe = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+}, _e = (e) => [
+  {
+    property: "fontWeight",
+    value: { type: "keyword", value: oe[e] }
+  }
+], Xe = (e) => [
+  {
+    property: "whiteSpaceCollapse",
+    value: { type: "keyword", value: "collapse" }
+  },
+  {
+    property: "textWrapMode",
+    value: { type: "keyword", value: "wrap" }
+  }
+], Ye = (e) => [
+  {
+    property: "boxShadow",
+    value: D[e]
+  }
+], qe = (e, t, r = "background", s = 0) => {
+  const a = H[t], l = E[s], v = n[e], c = n[r], d = {
+    type: "tuple",
+    value: [
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      l,
+      c
+    ]
+  }, b = a.value, f = l.type === "unit" ? l.value : 0, w = {
+    type: "tuple",
+    value: [
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      { type: "unit", value: 0, unit: "number" },
+      {
+        type: "unit",
+        value: b + f,
+        unit: a.unit
+      },
+      v
+    ]
+  };
+  return [
+    {
+      property: "boxShadow",
+      value: {
+        type: "layers",
+        value: [d, w]
+      }
+    }
+  ];
+}, Je = (e) => [{ property: "pointerEvents", value: { type: "keyword", value: e } }], Ke = (e) => e === "none" ? [
+  {
+    property: "transitionProperty",
+    value: { type: "keyword", value: "all" }
+  }
+] : [
+  {
+    property: "transitionProperty",
+    value: { type: "keyword", value: e }
+  },
+  {
+    property: "transitionTimingFunction",
+    value: { type: "unparsed", value: "cubic-bezier(0.4, 0, 0.2, 1)" }
+  },
+  {
+    property: "transitionDuration",
+    value: { type: "unparsed", value: "150ms" }
+  }
+], Ne = (e) => [
+  {
+    property: "transitionDuration",
+    value: { type: "unit", value: e, unit: "ms" }
+  }
+], Qe = (e) => e.map((t) => ({
+  ...t,
+  state: ":hover"
+})), Ze = (e) => e.map((t) => ({
+  ...t,
+  state: ":focus"
+})), Pe = (e) => e.map((t) => ({
+  ...t,
+  state: ":focus-visible"
+})), et = (e) => e.map((t) => ({
+  ...t,
+  state: ":disabled"
+})), tt = (e, t) => e.map((r) => ({
+  ...r,
+  state: t
+}));
+export {
+  Le as absolute,
+  ke as aspect,
+  xe as backdropBlur,
+  Be as bg,
+  Ge as block,
+  ae as border,
+  ie as borderB,
+  be as cursor,
+  et as disabled,
+  Ne as duration,
+  Ce as fixed,
+  ze as flex,
+  Ze as focus,
+  Pe as focusVisible,
+  _e as font,
+  je as gap,
+  Fe as grow,
+  ce as h,
+  Qe as hover,
+  De as inlineFlex,
+  ge as inset,
+  Re as items,
+  Ve as justify,
+  Ie as leading,
+  me as left,
+  He as lineClamp,
+  Se as list,
+  se as m,
+  fe as maxW,
+  K as mb,
+  Y as ml,
+  q as mr,
+  J as mt,
+  N as mx,
+  Q as my,
+  Me as noUnderline,
+  de as opacity,
+  $e as outline,
+  U as overflow,
+  ye as p,
+  A as pb,
+  M as pl,
+  Je as pointerEvents,
+  O as pr,
+  ue as property,
+  $ as pt,
+  _ as px,
+  X as py,
+  Te as relative,
+  he as right,
+  qe as ring,
+  le as rounded,
+  We as select,
+  Ye as shadow,
+  Ee as shrink,
+  tt as state,
+  Ae as text,
+  we as top,
+  Ue as tracking,
+  Ke as transition,
+  Oe as underline,
+  ve as w,
+  Xe as whitespace,
+  pe as z
+};

package/lib/tooltip.js

@@ -0,0 +1,45 @@
+import { jsx as r } from "react/jsx-runtime";
+import * as e from "@radix-ui/react-tooltip";
+import { getClosestInstance as a } from "@webstudio-is/react-sdk/runtime";
+import { forwardRef as c, Children as p } from "react";
+const m = c((t, o) => /* @__PURE__ */ r(e.Provider, { children: /* @__PURE__ */ r(e.Root, { ...t }) })), h = c(({ children: t, ...o }, n) => {
+  const i = p.toArray(t)[0];
+  return /* @__PURE__ */ r(e.Trigger, { asChild: !0, ref: n, ...o, children: i ?? /* @__PURE__ */ r("button", { children: "Add button or link" }) });
+}), T = c(({ sideOffset: t = 4, hideWhenDetached: o = !0, ...n }, i) => /* @__PURE__ */ r(e.Portal, { children: /* @__PURE__ */ r(
+  e.Content,
+  {
+    ref: i,
+    hideWhenDetached: o,
+    sideOffset: t,
+    ...n
+  }
+) })), s = "@webstudio-is/sdk-components-react-radix", P = {
+  onNavigatorUnselect: (t, o) => {
+    for (const n of o.instancePath)
+      if (n.component === `${s}:TooltipContent`) {
+        const i = a(
+          o.instancePath,
+          n,
+          `${s}:Tooltip`
+        );
+        i && t.setMemoryProp(i, "open", void 0);
+      }
+  },
+  onNavigatorSelect: (t, o) => {
+    for (const n of o.instancePath)
+      if (n.component === `${s}:TooltipContent`) {
+        const i = a(
+          o.instancePath,
+          n,
+          `${s}:Tooltip`
+        );
+        i && t.setMemoryProp(i, "open", !0);
+      }
+  }
+};
+export {
+  m as Tooltip,
+  T as TooltipContent,
+  h as TooltipTrigger,
+  P as hooksTooltip
+};

package/lib/tooltip.ws.js

@@ -0,0 +1,97 @@
+import { TriggerIcon as e, ContentIcon as o, TooltipIcon as n } from "@webstudio-is/icons/svg";
+import "@webstudio-is/react-sdk";
+import { div as r } from "@webstudio-is/sdk/normalize.css";
+import { z as p, overflow as i, rounded as a, border as l, bg as s, px as c, py as d, text as t, shadow as m } from "./theme/tailwind-classes.js";
+import { propsTooltip as g, propsTooltipTrigger as h, propsTooltipContent as y } from "./__generated__/tooltip.props.js";
+import { getButtonStyles as T } from "./theme/styles.js";
+const f = {
+  div: r
+}, B = {
+  category: "hidden",
+  detachable: !1,
+  type: "container",
+  icon: e,
+  stylable: !1
+}, I = {
+  category: "hidden",
+  detachable: !1,
+  type: "container",
+  presetStyle: f,
+  icon: o
+}, M = {
+  category: "radix",
+  order: 7,
+  type: "container",
+  icon: n,
+  stylable: !1,
+  description: "Displays content that is related to the trigger, when the trigger is hovered with the mouse or focused with the keyboard. You are reading an example of a tooltip right now.",
+  template: [
+    {
+      type: "instance",
+      component: "Tooltip",
+      props: [],
+      children: [
+        {
+          type: "instance",
+          component: "TooltipTrigger",
+          children: [
+            {
+              type: "instance",
+              component: "Button",
+              styles: T("outline"),
+              children: [{ type: "text", value: "Button", placeholder: !0 }]
+            }
+          ]
+        },
+        {
+          type: "instance",
+          component: "TooltipContent",
+          /**
+           *  z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md
+           **/
+          styles: [
+            p(50),
+            i("hidden"),
+            a("md"),
+            l(),
+            s("popover"),
+            c(3),
+            d(1.5),
+            t("sm"),
+            t("popoverForeground"),
+            m("md")
+          ].flat(),
+          children: [
+            {
+              type: "instance",
+              component: "Text",
+              children: [
+                {
+                  type: "text",
+                  value: "The text you can edit",
+                  placeholder: !0
+                }
+              ]
+            }
+          ]
+        }
+      ]
+    }
+  ]
+}, D = {
+  props: g,
+  initialProps: ["open", "delayDuration", "disableHoverableContent"]
+}, O = {
+  props: h
+}, P = {
+  props: y,
+  initialProps: ["side", "sideOffset", "align", "alignOffset"]
+};
+export {
+  M as metaTooltip,
+  I as metaTooltipContent,
+  B as metaTooltipTrigger,
+  D as propsMetaTooltip,
+  P as propsMetaTooltipContent,
+  O as propsMetaTooltipTrigger
+};