@webstudio-is/sdk-components-react-radix 0.95.0 → 0.97.0

package/lib/theme/tailwind-classes.js

@@ -1,651 +0,0 @@
-"use strict";
-import * as theme from "./__generated__/tailwind-theme";
-export 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 = 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
-    }
-  ];
-};
-export const z = (value) => {
-  return [
-    {
-      property: "zIndex",
-      value: theme.zIndex[value]
-    }
-  ];
-};
-export const overflow = (value) => [
-  {
-    property: "overflow",
-    value: { type: "keyword", value }
-  }
-];
-export const rounded = (value = "DEFAULT") => {
-  const styleValue = theme.borderRadius[value];
-  return [
-    { property: "borderTopLeftRadius", value: styleValue },
-    { property: "borderTopRightRadius", value: styleValue },
-    { property: "borderBottomRightRadius", value: styleValue },
-    { property: "borderBottomLeftRadius", value: styleValue }
-  ];
-};
-export const border = (borderWidthOrColor) => {
-  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
-    const styleValue2 = theme.borderWidth[borderWidthOrColor ?? "DEFAULT"];
-    return [
-      ...preflight(),
-      { property: "borderTopWidth", value: styleValue2 },
-      { property: "borderRightWidth", value: styleValue2 },
-      { property: "borderBottomWidth", value: styleValue2 },
-      { property: "borderLeftWidth", value: styleValue2 }
-    ];
-  }
-  const styleValue = theme.colors[borderWidthOrColor];
-  return [
-    { property: "borderTopColor", value: styleValue },
-    { property: "borderRightColor", value: styleValue },
-    { property: "borderBottomColor", value: styleValue },
-    { property: "borderLeftColor", value: styleValue }
-  ];
-};
-export const borderB = (borderWidthOrColor) => {
-  let widthValue = { type: "unit", value: 1, unit: "number" };
-  let colorValue = theme.colors.border;
-  if (typeof borderWidthOrColor === "number" || borderWidthOrColor === void 0) {
-    widthValue = theme.borderWidth[borderWidthOrColor ?? "DEFAULT"];
-  } else {
-    colorValue = theme.colors[borderWidthOrColor];
-  }
-  return [
-    {
-      property: "borderBottomWidth",
-      value: widthValue
-    },
-    {
-      property: "borderBottomStyle",
-      value: { type: "keyword", value: "solid" }
-    },
-    {
-      property: "borderBottomColor",
-      value: colorValue
-    }
-  ];
-};
-const paddingProperty = (property2) => (padding) => {
-  return [{ property: property2, value: theme.padding[padding] }];
-};
-export const pt = (padding) => {
-  return paddingProperty("paddingTop")(padding);
-};
-export const pb = (padding) => {
-  return paddingProperty("paddingBottom")(padding);
-};
-export const pl = (padding) => {
-  return paddingProperty("paddingLeft")(padding);
-};
-export const pr = (padding) => {
-  return paddingProperty("paddingRight")(padding);
-};
-export const px = (padding) => {
-  return [pl(padding), pr(padding)].flat();
-};
-export const py = (padding) => {
-  return [pt(padding), pb(padding)].flat();
-};
-export const p = (padding) => {
-  return [px(padding), py(padding)].flat();
-};
-const marginProperty = (property2) => (margin) => {
-  return [{ property: property2, value: theme.margin[margin] }];
-};
-export const ml = (margin) => {
-  return marginProperty("marginLeft")(margin);
-};
-export const mr = (margin) => {
-  return marginProperty("marginRight")(margin);
-};
-export const mt = (margin) => {
-  return marginProperty("marginTop")(margin);
-};
-export const mb = (margin) => {
-  return marginProperty("marginBottom")(margin);
-};
-export const mx = (margin) => {
-  return [ml(margin), mr(margin)].flat();
-};
-export const my = (margin) => {
-  return [mt(margin), mb(margin)].flat();
-};
-export const m = (margin) => {
-  return [mx(margin), my(margin)].flat();
-};
-export const w = (spacing) => {
-  return [{ property: "width", value: theme.width[spacing] }];
-};
-export const h = (spacing) => {
-  return [{ property: "height", value: theme.height[spacing] }];
-};
-export const minH = (spacing) => {
-  return [{ property: "minHeight", value: theme.minHeight[spacing] }];
-};
-export const opacity = (opacity2) => {
-  return [
-    {
-      property: "opacity",
-      value: theme.opacity[opacity2]
-    }
-  ];
-};
-export const cursor = (cursor2) => {
-  return [
-    {
-      property: "cursor",
-      value: theme.cursor[cursor2]
-    }
-  ];
-};
-export const maxW = (spacing) => {
-  return [{ property: "maxWidth", value: theme.maxWidth[spacing] }];
-};
-const positionStyle = (property2, spacing) => {
-  return { property: property2, value: theme.inset[spacing] };
-};
-export const top = (spacing) => [positionStyle("top", spacing)];
-export const right = (spacing) => [positionStyle("right", spacing)];
-export const bottom = (spacing) => [positionStyle("bottom", spacing)];
-export const left = (spacing) => [positionStyle("left", spacing)];
-export const inset = (spacing) => [
-  positionStyle("left", spacing),
-  positionStyle("right", spacing),
-  positionStyle("top", spacing),
-  positionStyle("bottom", spacing)
-];
-export 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 }
-    }
-  ];
-};
-export const backdropBlur = (blur) => {
-  return [{ property: "backdropFilter", value: theme.blur[blur] }];
-};
-export const list = (listStyle) => {
-  return [{ property: "listStyleType", value: theme.listStyleType[listStyle] }];
-};
-export const select = (_selectValue) => {
-  return [
-    {
-      property: "userSelect",
-      value: {
-        type: "keyword",
-        value: "none"
-      }
-    }
-  ];
-};
-export const bg = (color, alpha) => {
-  const value = theme.colors[color];
-  if (alpha !== void 0 && value.type === "rgb") {
-    value.alpha = alpha / 100;
-  }
-  return [
-    {
-      property: "backgroundColor",
-      value
-    }
-  ];
-};
-export const fixed = () => {
-  return [{ property: "position", value: { type: "keyword", value: "fixed" } }];
-};
-export const relative = () => {
-  return [
-    { property: "position", value: { type: "keyword", value: "relative" } }
-  ];
-};
-export const absolute = () => {
-  return [
-    { property: "position", value: { type: "keyword", value: "absolute" } }
-  ];
-};
-export const grid = () => {
-  return [{ property: "display", value: { type: "keyword", value: "grid" } }];
-};
-const alignItems = {
-  start: "flex-start",
-  end: "flex-end",
-  center: "center",
-  baseline: "baseline",
-  stretch: "stretch"
-};
-export 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"
-};
-export const justify = (justifyContentParam) => {
-  return [
-    {
-      property: "justifyContent",
-      value: {
-        type: "keyword",
-        value: justifyContent[justifyContentParam]
-      }
-    }
-  ];
-};
-export const inlineFlex = () => {
-  return [
-    { property: "display", value: { type: "keyword", value: "inline-flex" } }
-  ];
-};
-export const block = () => {
-  return [{ property: "display", value: { type: "keyword", value: "block" } }];
-};
-const flexDirection = { row: "row", col: "column" };
-export 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]
-      }
-    }
-  ];
-};
-export const grow = () => {
-  return [
-    {
-      property: "flexGrow",
-      value: { type: "unit", value: 1, unit: "number" }
-    }
-  ];
-};
-export const shrink = (value) => {
-  return [
-    {
-      property: "flexGrow",
-      value: { type: "unit", value, unit: "number" }
-    }
-  ];
-};
-export const gap = (gapValue) => {
-  const value = theme.spacing[gapValue];
-  return [
-    { property: "rowGap", value },
-    { property: "columnGap", value }
-  ];
-};
-export const lineClamp = (lineClampValue) => {
-  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: theme.lineClamp[lineClampValue]
-    }
-  ];
-};
-export const leading = (lineHeight) => {
-  return [{ property: "lineHeight", value: theme.lineHeight[lineHeight] }];
-};
-export const tracking = (letterSpacing) => {
-  return [
-    { property: "letterSpacing", value: theme.letterSpacing[letterSpacing] }
-  ];
-};
-export 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 = Object.keys(theme.fontSize);
-const isTextSize = (value) => textSizes.includes(value);
-export const text = (sizeOrColor) => {
-  if (isTextSize(sizeOrColor)) {
-    return [
-      { property: "fontSize", value: theme.fontSize[sizeOrColor] },
-      { property: "lineHeight", value: theme.fontSizeLineHeight[sizeOrColor] }
-    ];
-  }
-  return [
-    {
-      property: "color",
-      value: theme.colors[sizeOrColor]
-    }
-  ];
-};
-export const noUnderline = () => {
-  return [
-    {
-      property: "textDecorationLine",
-      value: { type: "keyword", value: "none" }
-    }
-  ];
-};
-export const underline = () => {
-  return [
-    {
-      property: "textDecorationLine",
-      value: { type: "keyword", value: "underline" }
-    }
-  ];
-};
-export const underlineOffset = (offset) => {
-  return [
-    {
-      property: "textUnderlineOffset",
-      value: theme.textUnderlineOffset[offset]
-    }
-  ];
-};
-const weights = {
-  thin: "100",
-  extralight: "200",
-  light: "300",
-  normal: "400",
-  medium: "500",
-  semibold: "600",
-  bold: "700",
-  extrabold: "800",
-  black: "900"
-};
-export const font = (weight) => {
-  return [
-    {
-      property: "fontWeight",
-      value: { type: "keyword", value: weights[weight] }
-    }
-  ];
-};
-export const whitespace = (value) => {
-  return [
-    {
-      property: "whiteSpace",
-      value: { type: "keyword", value }
-    }
-  ];
-};
-export const shadow = (shadowSize) => {
-  return [
-    {
-      property: "boxShadow",
-      value: theme.boxShadow[shadowSize]
-    }
-  ];
-};
-export const ring = (ringColor, ringWidth, ringOffsetColor = "background", ringOffsetWidth = 0) => {
-  const ringWidthStyleValue = theme.ringWidth[ringWidth];
-  const ringOffsetWidthStyleValue = theme.ringOffsetWidth[ringOffsetWidth];
-  const ringColorStyleValue = theme.colors[ringColor];
-  const ringOffsetColorStyleValue = theme.colors[ringOffsetColor];
-  const ringOffsetShadow = {
-    type: "tuple",
-    value: [
-      { type: "unit", value: 0, unit: "number" },
-      { type: "unit", value: 0, unit: "number" },
-      { type: "unit", value: 0, unit: "number" },
-      ringOffsetWidthStyleValue,
-      ringOffsetColorStyleValue
-    ]
-  };
-  const ringWidthValue = ringWidthStyleValue.type === "unit" ? ringWidthStyleValue.value : 0;
-  const ringOffsetWidthValue = ringOffsetWidthStyleValue.type === "unit" ? ringOffsetWidthStyleValue.value : 0;
-  const ringShadow = {
-    type: "tuple",
-    value: [
-      { type: "unit", value: 0, unit: "number" },
-      { type: "unit", value: 0, unit: "number" },
-      { type: "unit", value: 0, unit: "number" },
-      {
-        type: "unit",
-        value: ringWidthValue + ringOffsetWidthValue,
-        unit: ringWidthStyleValue.type === "unit" ? ringWidthStyleValue.unit : "number"
-      },
-      ringColorStyleValue
-    ]
-  };
-  return [
-    {
-      property: "boxShadow",
-      value: {
-        type: "layers",
-        value: [ringOffsetShadow, ringShadow]
-      }
-    }
-  ];
-};
-export const pointerEvents = (value) => {
-  return [{ property: "pointerEvents", value: { type: "keyword", value } }];
-};
-export 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" }
-    }
-  ];
-};
-export const duration = (ms) => {
-  return [
-    {
-      property: "transitionDuration",
-      value: { type: "unit", value: ms, unit: "ms" }
-    }
-  ];
-};
-export const hover = (value) => {
-  return value.map((decl) => ({
-    ...decl,
-    state: ":hover"
-  }));
-};
-export const focus = (value) => {
-  return value.map((decl) => ({
-    ...decl,
-    state: ":focus"
-  }));
-};
-export const focusVisible = (value) => {
-  return value.map((decl) => ({
-    ...decl,
-    state: ":focus-visible"
-  }));
-};
-export const disabled = (value) => {
-  return value.map((decl) => ({
-    ...decl,
-    state: ":disabled"
-  }));
-};
-export const state = (value, state2) => {
-  return value.map((decl) => ({
-    ...decl,
-    state: state2
-  }));
-};

package/lib/theme/tailwind-colors.js

@@ -1,23 +0,0 @@
-"use strict";
-export const colors = {
-  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)"
-};