@webstudio-is/sdk-components-react-radix 0.83.0 → 0.85.0

package/lib/cjs/theme/tailwind-classes.js

@@ -0,0 +1,547 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tailwind_classes_exports = {};
+__export(tailwind_classes_exports, {
+  absolute: () => absolute,
+  backdropBlur: () => backdropBlur,
+  bg: () => bg,
+  border: () => border,
+  bottom: () => bottom,
+  disabled: () => disabled,
+  fixed: () => fixed,
+  flex: () => flex,
+  focus: () => focus,
+  focusVisible: () => focusVisible,
+  font: () => font,
+  gap: () => gap,
+  grid: () => grid,
+  grow: () => grow,
+  h: () => h,
+  hover: () => hover,
+  inlineFlex: () => inlineFlex,
+  inset: () => inset,
+  items: () => items,
+  justify: () => justify,
+  leading: () => leading,
+  left: () => left,
+  m: () => m,
+  maxW: () => maxW,
+  mb: () => mb,
+  ml: () => ml,
+  mr: () => mr,
+  mt: () => mt,
+  mx: () => mx,
+  my: () => my,
+  opacity: () => opacity,
+  outline: () => outline,
+  overflow: () => overflow,
+  p: () => p,
+  pointerEvents: () => pointerEvents,
+  px: () => px,
+  py: () => py,
+  relative: () => relative,
+  right: () => right,
+  ring: () => ring,
+  rounded: () => rounded,
+  shadow: () => shadow,
+  state: () => state,
+  text: () => text,
+  top: () => top,
+  tracking: () => tracking,
+  transition: () => transition,
+  w: () => w,
+  whitespace: () => whitespace,
+  z: () => z
+});
+module.exports = __toCommonJS(tailwind_classes_exports);
+var import_tailwind_theme = require("./tailwind-theme");
+var import_css_data = require("@webstudio-is/css-data");
+const preflight = () => {
+  const borderColorValue = (0, import_css_data.parseCssValue)("color", (0, import_tailwind_theme.theme)("colors")["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: borderColorValue
+    },
+    {
+      property: "borderRightColor",
+      value: borderColorValue
+    },
+    {
+      property: "borderBottomColor",
+      value: borderColorValue
+    },
+    {
+      property: "borderLeftColor",
+      value: borderColorValue
+    }
+  ];
+};
+const z = (zIndex) => {
+  const valueString = (0, import_tailwind_theme.theme)("zIndex")[zIndex ?? "auto"];
+  const value = (0, import_css_data.parseCssValue)("zIndex", valueString);
+  return [
+    {
+      property: "zIndex",
+      value
+    }
+  ];
+};
+const overflow = (value) => [
+  {
+    property: "overflow",
+    value: { type: "keyword", value }
+  }
+];
+const rounded = (radius) => {
+  const valueString = (0, import_tailwind_theme.theme)("borderRadius")[radius ?? "DEFAULT"];
+  const value = (0, import_css_data.parseCssValue)("borderTopWidth", valueString);
+  return [
+    {
+      property: "borderTopLeftRadius",
+      value
+    },
+    {
+      property: "borderTopRightRadius",
+      value
+    },
+    {
+      property: "borderBottomRightRadius",
+      value
+    },
+    {
+      property: "borderBottomLeftRadius",
+      value
+    }
+  ];
+};
+const border = (borderWidth) => {
+  const key = `${borderWidth ?? "DEFAULT"}`;
+  const valueString = (0, import_tailwind_theme.theme)("borderWidth")?.[key] ?? "1px";
+  const value = (0, import_css_data.parseCssValue)("borderTopWidth", valueString);
+  return [
+    ...preflight(),
+    { property: "borderTopWidth", value },
+    { property: "borderRightWidth", value },
+    { property: "borderBottomWidth", value },
+    { property: "borderLeftWidth", value }
+  ];
+};
+const px = (padding) => {
+  const key = `${padding}`;
+  const valueString = (0, import_tailwind_theme.theme)("padding")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)("paddingLeft", valueString);
+  return [
+    { property: "paddingLeft", value },
+    { property: "paddingRight", value }
+  ];
+};
+const py = (padding) => {
+  const key = `${padding}`;
+  const valueString = (0, import_tailwind_theme.theme)("padding")[key];
+  const value = (0, import_css_data.parseCssValue)("paddingTop", valueString);
+  return [
+    { property: "paddingTop", value },
+    { property: "paddingBottom", value }
+  ];
+};
+const p = (padding) => {
+  return [...px(padding), ...py(padding)];
+};
+const marginProperty = (property) => (margin) => {
+  const key = `${margin}`;
+  const valueString = (0, import_tailwind_theme.theme)("margin")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)(property, valueString);
+  return [{ property, value }];
+};
+const ml = (margin) => {
+  return marginProperty("marginLeft")(margin);
+};
+const mr = (margin) => {
+  return marginProperty("marginRight")(margin);
+};
+const mt = (margin) => {
+  return marginProperty("marginTop")(margin);
+};
+const mb = (margin) => {
+  return marginProperty("marginBottom")(margin);
+};
+const mx = (margin) => {
+  return [ml(margin), mr(margin)].flat();
+};
+const my = (margin) => {
+  return [mt(margin), mb(margin)].flat();
+};
+const m = (margin) => {
+  return [mx(margin), my(margin)].flat();
+};
+const w = (spacing) => {
+  const key = `${spacing}`;
+  const valueString = (0, import_tailwind_theme.theme)("width")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)("width", valueString);
+  return [{ property: "width", value }];
+};
+const h = (spacing) => {
+  const key = `${spacing}`;
+  const valueString = (0, import_tailwind_theme.theme)("height")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)("height", valueString);
+  return [{ property: "height", value }];
+};
+const opacity = (opacity2) => {
+  const key = `${opacity2}`;
+  const valueString = (0, import_tailwind_theme.theme)("opacity")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)("opacity", valueString);
+  return [
+    {
+      property: "opacity",
+      value
+    }
+  ];
+};
+const maxW = (spacing) => {
+  const key = `${spacing}`;
+  const valueString = (0, import_tailwind_theme.theme)("maxWidth")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)("width", valueString);
+  return [{ property: "maxWidth", value }];
+};
+const positionStyle = (property, spacing) => {
+  const key = `${spacing}`;
+  const valueString = (0, import_tailwind_theme.theme)("spacing")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)(property, valueString);
+  return { property, value };
+};
+const top = (spacing) => [positionStyle("top", spacing)];
+const right = (spacing) => [positionStyle("right", spacing)];
+const bottom = (spacing) => [positionStyle("bottom", spacing)];
+const left = (spacing) => [positionStyle("left", spacing)];
+const inset = (spacing) => [
+  positionStyle("left", spacing),
+  positionStyle("right", spacing),
+  positionStyle("top", spacing),
+  positionStyle("bottom", spacing)
+];
+const backdropBlur = (blur) => {
+  const valueString = (0, import_tailwind_theme.theme)("blur")[blur];
+  const value = {
+    type: "unparsed",
+    value: `blur(${valueString})`
+  };
+  return [{ property: "backdropFilter", value }];
+};
+const bg = (color, alpha) => {
+  const value = (0, import_css_data.parseCssValue)("backgroundColor", (0, import_tailwind_theme.theme)("colors")[color]);
+  if (alpha !== void 0 && value.type === "rgb") {
+    value.alpha = alpha / 100;
+  }
+  return [
+    {
+      property: "backgroundColor",
+      value
+    }
+  ];
+};
+const fixed = () => {
+  return [{ property: "position", value: { type: "keyword", value: "fixed" } }];
+};
+const relative = () => {
+  return [
+    { property: "position", value: { type: "keyword", value: "relative" } }
+  ];
+};
+const absolute = () => {
+  return [
+    { property: "position", value: { type: "keyword", value: "absolute" } }
+  ];
+};
+const grid = () => {
+  return [{ property: "display", value: { type: "keyword", value: "grid" } }];
+};
+const alignItems = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  baseline: "baseline",
+  stretch: "stretch"
+};
+const items = (alignItemsParam) => {
+  return [
+    {
+      property: "alignItems",
+      value: {
+        type: "keyword",
+        value: alignItems[alignItemsParam]
+      }
+    }
+  ];
+};
+const justifyContent = {
+  start: "flex-start",
+  end: "flex-end",
+  center: "center",
+  between: "space-between",
+  around: "space-around",
+  evenly: "space-evenly",
+  stretch: "stretch"
+};
+const justify = (justifyContentParam) => {
+  return [
+    {
+      property: "justifyContent",
+      value: {
+        type: "keyword",
+        value: justifyContent[justifyContentParam]
+      }
+    }
+  ];
+};
+const inlineFlex = () => {
+  return [
+    { property: "display", value: { type: "keyword", value: "inline-flex" } }
+  ];
+};
+const flexDirection = { row: "row", col: "column" };
+const flex = (flexParam) => {
+  if (flexParam === void 0) {
+    return [{ property: "display", value: { type: "keyword", value: "flex" } }];
+  }
+  return [
+    {
+      property: "flexDirection",
+      value: {
+        type: "keyword",
+        value: flexDirection[flexParam]
+      }
+    }
+  ];
+};
+const grow = () => {
+  return [
+    {
+      property: "flexGrow",
+      value: {
+        type: "unit",
+        value: 1,
+        unit: "number"
+      }
+    }
+  ];
+};
+const gap = (gapValue) => {
+  const key = `${gapValue}`;
+  const valueString = (0, import_tailwind_theme.theme)("spacing")?.[key] ?? "0";
+  const value = (0, import_css_data.parseCssValue)("rowGap", valueString);
+  return [
+    { property: "rowGap", value },
+    { property: "columnGap", value }
+  ];
+};
+const leading = (lineHeight) => {
+  const key = `${lineHeight}`;
+  const valueString = (0, import_tailwind_theme.theme)("lineHeight")[key];
+  const value = (0, import_css_data.parseCssValue)("lineHeight", valueString);
+  return [{ property: "lineHeight", value }];
+};
+const tracking = (letterSpacing) => {
+  const key = `${letterSpacing}`;
+  const valueString = (0, import_tailwind_theme.theme)("letterSpacing")[key];
+  const value = (0, import_css_data.parseCssValue)("letterSpacing", valueString);
+  return [{ property: "letterSpacing", value }];
+};
+const outline = (value) => {
+  return [
+    {
+      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" }
+    }
+  ];
+};
+const textSizes = [
+  "sm",
+  "base",
+  "lg",
+  "xs",
+  "xl",
+  "2xl",
+  "3xl",
+  "4xl",
+  "5xl",
+  "6xl",
+  "7xl",
+  "8xl",
+  "9xl"
+];
+const isTextSize = (value) => textSizes.includes(value);
+const text = (sizeOrColor) => {
+  if (isTextSize(sizeOrColor)) {
+    const valueArr = (0, import_tailwind_theme.theme)("fontSize")[sizeOrColor];
+    const [fontSizeString, { lineHeight: lineHeightString }] = valueArr;
+    const fontSize = (0, import_css_data.parseCssValue)("fontSize", fontSizeString);
+    const lineHeight = (0, import_css_data.parseCssValue)("lineHeight", lineHeightString);
+    return [
+      { property: "fontSize", value: fontSize },
+      { property: "lineHeight", value: lineHeight }
+    ];
+  }
+  const value = (0, import_css_data.parseCssValue)("color", (0, import_tailwind_theme.theme)("colors")[sizeOrColor]);
+  return [
+    {
+      property: "color",
+      value
+    }
+  ];
+};
+const weights = {
+  thin: "100",
+  extralight: "200",
+  light: "300",
+  normal: "400",
+  medium: "500",
+  semibold: "600",
+  bold: "700",
+  extrabold: "800",
+  black: "900"
+};
+const font = (weight) => {
+  return [
+    {
+      property: "fontWeight",
+      value: { type: "keyword", value: weights[weight] }
+    }
+  ];
+};
+const whitespace = (value) => {
+  return [
+    {
+      property: "whiteSpace",
+      value: { type: "keyword", value }
+    }
+  ];
+};
+const shadow = (shadowSize) => {
+  const valueString = (0, import_tailwind_theme.theme)("boxShadow")[shadowSize];
+  const value = (0, import_css_data.parseBoxShadow)(valueString);
+  return [
+    {
+      property: "boxShadow",
+      value
+    }
+  ];
+};
+const ring = (ringColor, ringWidth, ringOffsetColor = "background", ringOffsetWidth = 0, inset2 = "") => {
+  const ringWidthUnits = (0, import_tailwind_theme.theme)("ringWidth")[ringWidth];
+  const ringOffsetWidthUnits = (0, import_tailwind_theme.theme)("ringOffsetWidth")[ringOffsetWidth];
+  const ringColorRgb = (0, import_tailwind_theme.theme)("colors")[ringColor];
+  const ringOffsetColorRgb = (0, import_tailwind_theme.theme)("colors")[ringOffsetColor];
+  const ringOffsetShadow = `${inset2} 0 0 0 ${ringOffsetWidthUnits} ${ringOffsetColorRgb}`;
+  const ringWidthParsed = parseFloat(ringWidthUnits);
+  const ringOffsetWidthParsed = parseFloat(ringOffsetWidthUnits);
+  const ringShadow = `${inset2} 0 0 0 ${ringWidthParsed + ringOffsetWidthParsed}px ${ringColorRgb}`;
+  const value = (0, import_css_data.parseBoxShadow)(`${ringOffsetShadow}, ${ringShadow}`);
+  return [
+    {
+      property: "boxShadow",
+      value
+    }
+  ];
+};
+const pointerEvents = (value) => {
+  return [{ property: "pointerEvents", value: { type: "keyword", value } }];
+};
+const transition = (value) => {
+  if (value === "none") {
+    return [
+      {
+        property: "transitionProperty",
+        value: { type: "keyword", value: "all" }
+      }
+    ];
+  }
+  return [
+    {
+      property: "transitionProperty",
+      value: { type: "keyword", value: "all" }
+    },
+    {
+      property: "transitionTimingFunction",
+      value: { type: "unparsed", value: "cubic-bezier(0.4, 0, 0.2, 1)" }
+    },
+    {
+      property: "transitionDuration",
+      value: { type: "unparsed", value: "150ms" }
+    }
+  ];
+};
+const hover = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":hover"
+  }));
+};
+const focus = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":focus"
+  }));
+};
+const focusVisible = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":focus-visible"
+  }));
+};
+const disabled = (value) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: ":disabled"
+  }));
+};
+const state = (value, state2) => {
+  return value.map((decl) => ({
+    ...decl,
+    state: state2
+  }));
+};

package/lib/cjs/theme/tailwind-colors.js

@@ -0,0 +1,35 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tailwind_colors_exports = {};
+__export(tailwind_colors_exports, {
+  colors: () => colors
+});
+module.exports = __toCommonJS(tailwind_colors_exports);
+const colors = {
+  transparent: "transparent",
+  current: "currentColor",
+  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%)`
+};

package/lib/cjs/theme/tailwind-theme.js

@@ -0,0 +1,46 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tailwind_theme_exports = {};
+__export(tailwind_theme_exports, {
+  theme: () => theme
+});
+module.exports = __toCommonJS(tailwind_theme_exports);
+var import_defaultTheme = __toESM(require("tailwindcss/defaultTheme"), 1);
+var import_tailwind_colors = require("./tailwind-colors");
+const localTheme = { ...import_defaultTheme.default };
+const theme = (name) => {
+  const value = localTheme?.[name];
+  if (typeof value === "function") {
+    return value({ theme, colors: import_tailwind_colors.colors, breakpoints: () => ({}) });
+  }
+  return value;
+};
+localTheme.colors = import_tailwind_colors.colors;
+localTheme.borderRadius = { ...theme("borderRadius") };
+localTheme.borderRadius.DEFAULT = "0.5rem";

package/lib/cjs/tooltip.js

@@ -0,0 +1,55 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var tooltip_exports = {};
+__export(tooltip_exports, {
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipTrigger: () => TooltipTrigger
+});
+module.exports = __toCommonJS(tooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var import_react = require("react");
+const Tooltip = (0, import_react.forwardRef)(({ open: openProp, isOpen, ...props }, ref) => {
+  const open = openProp ?? (isOpen === "open" ? true : isOpen === "closed" ? false : void 0);
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Root, { open, ...props }) });
+});
+const TooltipTrigger = (0, import_react.forwardRef)(({ children, ...props }, ref) => {
+  const firstChild = import_react.Children.toArray(children)[0];
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Trigger, { asChild: true, ref, ...props, children: firstChild ?? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { children: "Add button or link" }) });
+});
+const TooltipContent = (0, import_react.forwardRef)(({ sideOffset = 4, hideWhenDetached = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipPrimitive.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+  TooltipPrimitive.Content,
+  {
+    ref,
+    hideWhenDetached,
+    sideOffset,
+    ...props
+  }
+) }));