@webstudio-is/sdk-components-react-radix 0.91.0 → 0.92.0

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

@@ -1,819 +0,0 @@
-"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,
-  aspect: () => aspect,
-  backdropBlur: () => backdropBlur,
-  bg: () => bg,
-  block: () => block,
-  border: () => border,
-  borderB: () => borderB,
-  bottom: () => bottom,
-  cursor: () => cursor,
-  disabled: () => disabled,
-  duration: () => duration,
-  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,
-  lineClamp: () => lineClamp,
-  list: () => list,
-  m: () => m,
-  maxW: () => maxW,
-  mb: () => mb,
-  minH: () => minH,
-  ml: () => ml,
-  mr: () => mr,
-  mt: () => mt,
-  mx: () => mx,
-  my: () => my,
-  noUnderline: () => noUnderline,
-  opacity: () => opacity,
-  outline: () => outline,
-  overflow: () => overflow,
-  p: () => p,
-  pb: () => pb,
-  pl: () => pl,
-  pointerEvents: () => pointerEvents,
-  pr: () => pr,
-  property: () => property,
-  pt: () => pt,
-  px: () => px,
-  py: () => py,
-  relative: () => relative,
-  right: () => right,
-  ring: () => ring,
-  rounded: () => rounded,
-  select: () => select,
-  shadow: () => shadow,
-  shrink: () => shrink,
-  state: () => state,
-  text: () => text,
-  top: () => top,
-  tracking: () => tracking,
-  transition: () => transition,
-  underline: () => underline,
-  underlineOffset: () => underlineOffset,
-  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 property = (property2, value) => {
-  if (value.startsWith("--")) {
-    return {
-      property: property2,
-      value: { type: "var", value: value.slice(2), fallbacks: [] }
-    };
-  }
-  return {
-    property: property2,
-    value: { type: "unparsed", value }
-  };
-};
-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 = (borderWidthOrColor) => {
-  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
-    const key = `${borderWidthOrColor ?? "DEFAULT"}`;
-    const valueString = (0, import_tailwind_theme.theme)("borderWidth")?.[key] ?? "1px";
-    const value2 = (0, import_css_data.parseCssValue)("borderTopWidth", valueString);
-    return [
-      ...preflight(),
-      { property: "borderTopWidth", value: value2 },
-      { property: "borderRightWidth", value: value2 },
-      { property: "borderBottomWidth", value: value2 },
-      { property: "borderLeftWidth", value: value2 }
-    ];
-  }
-  const value = (0, import_css_data.parseCssValue)("color", (0, import_tailwind_theme.theme)("colors")[borderWidthOrColor]);
-  return [
-    {
-      property: "borderTopColor",
-      value
-    },
-    {
-      property: "borderRightColor",
-      value
-    },
-    {
-      property: "borderBottomColor",
-      value
-    },
-    {
-      property: "borderLeftColor",
-      value
-    }
-  ];
-};
-const borderB = (borderWidthOrColor) => {
-  let widthValue = { type: "unit", value: 1, unit: "number" };
-  let colorValue = (0, import_css_data.parseCssValue)(
-    "color",
-    (0, import_tailwind_theme.theme)("colors")["border"]
-  );
-  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
-    const key = `${borderWidthOrColor ?? "DEFAULT"}`;
-    const valueString = (0, import_tailwind_theme.theme)("borderWidth")[key] ?? "1px";
-    widthValue = (0, import_css_data.parseCssValue)("borderTopWidth", valueString);
-  } else {
-    colorValue = (0, import_css_data.parseCssValue)("color", (0, import_tailwind_theme.theme)("colors")[borderWidthOrColor]);
-  }
-  return [
-    {
-      property: "borderBottomWidth",
-      value: widthValue
-    },
-    {
-      property: "borderBottomStyle",
-      value: { type: "keyword", value: "solid" }
-    },
-    {
-      property: "borderBottomColor",
-      value: colorValue
-    }
-  ];
-};
-const paddingProperty = (property2) => (padding) => {
-  const key = `${padding}`;
-  const valueString = (0, import_tailwind_theme.theme)("padding")?.[key] ?? "0";
-  const value = (0, import_css_data.parseCssValue)(property2, valueString);
-  return [{ property: property2, value }];
-};
-const pt = (padding) => {
-  return paddingProperty("paddingTop")(padding);
-};
-const pb = (padding) => {
-  return paddingProperty("paddingBottom")(padding);
-};
-const pl = (padding) => {
-  return paddingProperty("paddingLeft")(padding);
-};
-const pr = (padding) => {
-  return paddingProperty("paddingRight")(padding);
-};
-const px = (padding) => {
-  return [pl(padding), pr(padding)].flat();
-};
-const py = (padding) => {
-  return [pt(padding), pb(padding)].flat();
-};
-const p = (padding) => {
-  return [px(padding), py(padding)].flat();
-};
-const marginProperty = (property2) => (margin) => {
-  const key = `${margin}`;
-  const valueString = (0, import_tailwind_theme.theme)("margin")?.[key] ?? "0";
-  const value = (0, import_css_data.parseCssValue)(property2, valueString);
-  return [{ property: property2, 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 minH = (spacing) => {
-  const key = `${spacing}`;
-  const valueString = (0, import_tailwind_theme.theme)("height")?.[key] ?? "0";
-  const value = (0, import_css_data.parseCssValue)("minHeight", valueString);
-  return [{ property: "minHeight", 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 cursor = (cursor2) => {
-  const valueString = (0, import_tailwind_theme.theme)("cursor")?.[cursor2] ?? "auto";
-  const value = (0, import_css_data.parseCssValue)("cursor", valueString);
-  return [
-    {
-      property: "cursor",
-      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 = (property2, spacing) => {
-  const key = `${spacing}`;
-  const valueString = (0, import_tailwind_theme.theme)("inset")?.[key] ?? "0";
-  const value = (0, import_css_data.parseCssValue)(property2, valueString);
-  return { property: property2, 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 aspect = (value) => {
-  let unparsed = value;
-  if (value === "square") {
-    unparsed = "1 / 1";
-  }
-  if (value === "video") {
-    unparsed = "16 / 9";
-  }
-  return [
-    {
-      property: "aspectRatio",
-      value: { type: "unparsed", value: unparsed }
-    }
-  ];
-};
-const backdropBlur = (blur) => {
-  const valueString = (0, import_tailwind_theme.theme)("blur")[blur];
-  const value = {
-    type: "unparsed",
-    value: `blur(${valueString})`
-  };
-  return [{ property: "backdropFilter", value }];
-};
-const list = (listStyle) => {
-  const valueString = (0, import_tailwind_theme.theme)("listStyleType")[listStyle];
-  const value = (0, import_css_data.parseCssValue)("listStyleType", valueString);
-  return [{ property: "listStyleType", value }];
-};
-const select = (selectValue) => {
-  return [
-    {
-      property: "userSelect",
-      value: {
-        type: "keyword",
-        value: "none"
-      }
-    }
-  ];
-};
-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 block = () => {
-  return [{ property: "display", value: { type: "keyword", value: "block" } }];
-};
-const flexDirection = { row: "row", col: "column" };
-const flex = (flexParam) => {
-  if (flexParam === void 0) {
-    return [{ property: "display", value: { type: "keyword", value: "flex" } }];
-  }
-  if (flexParam === 1) {
-    return [
-      {
-        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: "%" }
-      }
-    ];
-  }
-  if (flexParam === "auto") {
-    return [
-      {
-        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" }
-      }
-    ];
-  }
-  if (flexParam === "initial") {
-    return [
-      {
-        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" }
-      }
-    ];
-  }
-  if (flexParam === "none") {
-    return [
-      {
-        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" }
-      }
-    ];
-  }
-  return [
-    {
-      property: "flexDirection",
-      value: {
-        type: "keyword",
-        value: flexDirection[flexParam]
-      }
-    }
-  ];
-};
-const grow = () => {
-  return [
-    {
-      property: "flexGrow",
-      value: { type: "unit", value: 1, unit: "number" }
-    }
-  ];
-};
-const shrink = (value) => {
-  return [
-    {
-      property: "flexGrow",
-      value: { type: "unit", value, 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 lineClamp = (lineClampValue) => {
-  const key = `${lineClampValue}`;
-  const valueString = (0, import_tailwind_theme.theme)("lineClamp")?.[key];
-  return [
-    {
-      property: "overflow",
-      value: {
-        type: "keyword",
-        value: "hidden"
-      }
-    },
-    {
-      property: "display",
-      value: {
-        type: "keyword",
-        value: "-webkit-box"
-      }
-    },
-    {
-      property: "-webkit-box-orient",
-      value: {
-        type: "keyword",
-        value: "vertical"
-      }
-    },
-    {
-      property: "-webkit-line-clamp",
-      value: {
-        type: "keyword",
-        value: valueString
-      }
-    }
-  ];
-};
-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 noUnderline = () => {
-  return [
-    {
-      property: "textDecorationLine",
-      value: { type: "keyword", value: "none" }
-    }
-  ];
-};
-const underline = () => {
-  return [
-    {
-      property: "textDecorationLine",
-      value: { type: "keyword", value: "underline" }
-    }
-  ];
-};
-const underlineOffset = (offset) => {
-  const key = `${offset}`;
-  const valueString = (0, import_tailwind_theme.theme)("textUnderlineOffset")[key];
-  const value = (0, import_css_data.parseCssValue)("textUnderlineOffset", valueString);
-  return [
-    {
-      property: "textUnderlineOffset",
-      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 }
-    },
-    {
-      property: "transitionTimingFunction",
-      value: { type: "unparsed", value: "cubic-bezier(0.4, 0, 0.2, 1)" }
-    },
-    {
-      property: "transitionDuration",
-      value: { type: "unparsed", value: "150ms" }
-    }
-  ];
-};
-const duration = (ms) => {
-  return [
-    {
-      property: "transitionDuration",
-      value: { type: "unit", value: ms, unit: "ms" }
-    }
-  ];
-};
-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
-  }));
-};