css-in-props 3.14.0 → 3.14.1

package/dist/esm/props/defaults.js

@@ -1,321 +0,0 @@
-const DEFAULT_CSS_PROPERTIES_LIST = /* @__PURE__ */ new Set([
-  "accentColor",
-  "alignContent",
-  "alignItems",
-  "alignSelf",
-  "alignmentBaseline",
-  "all",
-  "animation",
-  "animationDelay",
-  "animationDirection",
-  "animationDuration",
-  "animationFillMode",
-  "animationIterationCount",
-  "animationName",
-  "animationPlayState",
-  "animationTimingFunction",
-  "appearance",
-  "aspectRatio",
-  "backdropFilter",
-  "backfaceVisibility",
-  "background",
-  "backgroundAttachment",
-  "backgroundBlendMode",
-  "backgroundClip",
-  "backgroundColor",
-  "backgroundImage",
-  "backgroundOrigin",
-  "backgroundPosition",
-  "backgroundPositionX",
-  "backgroundPositionY",
-  "backgroundRepeat",
-  "backgroundRepeatX",
-  "backgroundRepeatY",
-  "backgroundSize",
-  "baselineShift",
-  "blockSize",
-  "border",
-  "borderBlock",
-  "borderBlockColor",
-  "borderBlockEnd",
-  "borderBlockEndColor",
-  "borderBlockEndStyle",
-  "borderBlockEndWidth",
-  "borderBlockStart",
-  "borderBlockStartColor",
-  "borderBlockStartStyle",
-  "borderBlockStartWidth",
-  "borderBlockStyle",
-  "borderBlockWidth",
-  "borderBottom",
-  "borderBottomColor",
-  "borderBottomLeftRadius",
-  "borderBottomRightRadius",
-  "borderBottomStyle",
-  "borderBottomWidth",
-  "borderCollapse",
-  "borderColor",
-  "borderImage",
-  "borderImageOutset",
-  "borderImageRepeat",
-  "borderImageSlice",
-  "borderImageSource",
-  "borderImageWidth",
-  "borderLeft",
-  "borderLeftColor",
-  "borderLeftStyle",
-  "borderLeftWidth",
-  "borderRadius",
-  "borderRight",
-  "borderRightColor",
-  "borderRightStyle",
-  "borderRightWidth",
-  "borderSpacing",
-  "borderStyle",
-  "borderTop",
-  "borderTopColor",
-  "borderTopLeftRadius",
-  "borderTopRightRadius",
-  "borderTopStyle",
-  "borderTopWidth",
-  "borderWidth",
-  "bottom",
-  "boxDecorationBreak",
-  "boxShadow",
-  "boxSizing",
-  "breakAfter",
-  "breakBefore",
-  "breakInside",
-  "captionSide",
-  "caretColor",
-  "clear",
-  "clip",
-  "clipPath",
-  "color",
-  "colorAdjust",
-  "colorInterpolation",
-  "colorInterpolationFilters",
-  "colorRendering",
-  "columnCount",
-  "columnFill",
-  "columnGap",
-  "columnRule",
-  "columnRuleColor",
-  "columnRuleStyle",
-  "columnRuleWidth",
-  "columnSpan",
-  "columnWidth",
-  "columns",
-  "contain",
-  "content",
-  "counterIncrement",
-  "counterReset",
-  "cursor",
-  "direction",
-  "display",
-  "emptyCells",
-  "filter",
-  "flex",
-  "flexBasis",
-  "flexDirection",
-  "flexFlow",
-  "flexGrow",
-  "flexShrink",
-  "flexWrap",
-  "float",
-  "font",
-  "fontFamily",
-  "fontFeatureSettings",
-  "fontKerning",
-  "fontLanguageOverride",
-  "fontSize",
-  "fontSizeAdjust",
-  "fontStretch",
-  "fontStyle",
-  "fontVariant",
-  "fontVariantAlternates",
-  "fontVariantCaps",
-  "fontVariantEastAsian",
-  "fontVariantNumeric",
-  "fontVariantPosition",
-  "fontWeight",
-  "fontVariationSettings",
-  "fontSynthesis",
-  "forcedColorAdjust",
-  "gap",
-  "grid",
-  "gridArea",
-  "gridAutoColumns",
-  "gridAutoFlow",
-  "gridAutoRows",
-  "gridColumn",
-  "gridColumnEnd",
-  "gridColumnGap",
-  "gridColumnStart",
-  "gridGap",
-  "gridRow",
-  "gridRowEnd",
-  "gridRowGap",
-  "gridRowStart",
-  "gridTemplate",
-  "gridTemplateAreas",
-  "gridTemplateColumns",
-  "gridTemplateRows",
-  "height",
-  "hyphens",
-  "imageOrientation",
-  "imageRendering",
-  "imeMode",
-  "inset",
-  "insetBlock",
-  "insetBlockEnd",
-  "insetBlockStart",
-  "insetInline",
-  "insetInlineEnd",
-  "insetInlineStart",
-  "initialLetter",
-  "isolation",
-  "justifyContent",
-  "justifyItems",
-  "justifySelf",
-  "left",
-  "letterSpacing",
-  "lineBreak",
-  "lineClamp",
-  "lineHeight",
-  "listStyle",
-  "listStyleImage",
-  "listStylePosition",
-  "listStyleType",
-  "margin",
-  "marginBottom",
-  "marginLeft",
-  "marginRight",
-  "marginTop",
-  "marginBlock",
-  "marginBlockEnd",
-  "marginBlockStart",
-  "marginInline",
-  "marginInlineEnd",
-  "marginInlineStart",
-  "mask",
-  "maskBorder",
-  "maskBorderImage",
-  "maskBorderOutset",
-  "maskBorderRepeat",
-  "maskBorderSlice",
-  "maskBorderSource",
-  "maskBorderWidth",
-  "maskClip",
-  "maskComposite",
-  "maskImage",
-  "maskOrigin",
-  "maskPosition",
-  "maskRepeat",
-  "maskSize",
-  "maskType",
-  "maxBlockSize",
-  "maxHeight",
-  "maxInlineSize",
-  "maxWidth",
-  "minBlockSize",
-  "minHeight",
-  "minInlineSize",
-  "minWidth",
-  "mixBlendMode",
-  "objectFit",
-  "objectPosition",
-  "objectViewBox",
-  "offset",
-  "offsetDistance",
-  "offsetPath",
-  "offsetRotate",
-  "opacity",
-  "order",
-  "orientation",
-  "outline",
-  "outlineColor",
-  "outlineOffset",
-  "outlineStyle",
-  "outlineWidth",
-  "overflow",
-  "overflowAnchor",
-  "overflowClip",
-  "overflowScrolling",
-  "overflowWrap",
-  "overflowX",
-  "overflowY",
-  "padding",
-  "paddingBottom",
-  "paddingLeft",
-  "paddingRight",
-  "paddingTop",
-  "pageBreakAfter",
-  "pageBreakBefore",
-  "pageBreakInside",
-  "paintOrder",
-  "perspective",
-  "perspectiveOrigin",
-  "placeContent",
-  "placeItems",
-  "placeSelf",
-  "pointerEvents",
-  "position",
-  "resize",
-  "right",
-  "rotate",
-  "rowGap",
-  "scrollBehavior",
-  "scrollPadding",
-  "scrollSnapAlign",
-  "scrollSnapType",
-  "scrollbarColor",
-  "scrollbarWidth",
-  "shapeImageThreshold",
-  "shapeMargin",
-  "shapeOutside",
-  "tabSize",
-  "tableLayout",
-  "textAlign",
-  "textAlignLast",
-  "textDecoration",
-  "textDecorationColor",
-  "textDecorationLine",
-  "textDecorationSkipInk",
-  "textDecorationStyle",
-  "textDecorationThickness",
-  "textIndent",
-  "textOverflow",
-  "textShadow",
-  "textTransform",
-  "textUnderlineOffset",
-  "top",
-  "transform",
-  "transformOrigin",
-  "transformStyle",
-  "transition",
-  "transitionDelay",
-  "transitionDuration",
-  "transitionProperty",
-  "transitionTimingFunction",
-  "translate",
-  "translateX",
-  "translateY",
-  "translateZ",
-  "unicodeBidi",
-  "userSelect",
-  "verticalAlign",
-  "visibility",
-  "whiteSpace",
-  "widows",
-  "width",
-  "willChange",
-  "wordBreak",
-  "wordSpacing",
-  "wordWrap",
-  "writingMode",
-  "zIndex"
-]);
-export {
-  DEFAULT_CSS_PROPERTIES_LIST
-};

package/dist/esm/props/flex.js

@@ -1,24 +0,0 @@
-import { isString } from "@symbo.ls/utils";
-const FLEX_PROPS = {
-  flow: (value, el) => {
-    const reverse = el.reverse;
-    if (!isString(value)) return;
-    let [direction, wrap] = (value || "row").split(" ");
-    if (value.startsWith("x") || value === "row") direction = "row";
-    if (value.startsWith("y") || value === "column") direction = "column";
-    return {
-      display: "flex",
-      flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
-    };
-  },
-  wrap: (value, el) => {
-    return { display: "flex", flexWrap: value };
-  },
-  align: (value, el) => {
-    const [alignItems, justifyContent] = value.split(" ");
-    return { display: "flex", alignItems, justifyContent };
-  }
-};
-export {
-  FLEX_PROPS
-};

package/dist/esm/props/font.js

@@ -1,16 +0,0 @@
-import { getFontSizeByKey, getFontFamily } from "@symbo.ls/scratch";
-const FONT_PROPS = {
-  fontSize: (value) => {
-    return getFontSizeByKey(value) || value;
-  },
-  fontFamily: (value) => ({
-    fontFamily: getFontFamily(value) || value
-  }),
-  fontWeight: (value) => ({
-    fontWeight: value,
-    fontVariationSettings: '"wght" ' + value
-  })
-};
-export {
-  FONT_PROPS
-};

package/dist/esm/props/grid.js

@@ -1,19 +0,0 @@
-const GRID_PROPS = {
-  area: (value) => ({ gridArea: value }),
-  template: (value) => ({ gridTemplate: value }),
-  templateAreas: (value) => ({ gridTemplateAreas: value }),
-  column: (value) => ({ gridColumn: value }),
-  columns: (value) => ({ gridTemplateColumns: value }),
-  templateColumns: (value) => ({ gridTemplateColumns: value }),
-  autoColumns: (value) => ({ gridAutoColumns: value }),
-  columnStart: (value) => ({ gridColumnStart: value }),
-  row: (value) => ({ gridRow: value }),
-  rows: (value) => ({ gridTemplateRows: value }),
-  templateRows: (value) => ({ gridTemplateRows: value }),
-  autoRows: (value) => ({ gridAutoRows: value }),
-  rowStart: (value) => ({ gridRowStart: value }),
-  autoFlow: (value) => ({ gridAutoFlow: value })
-};
-export {
-  GRID_PROPS
-};

package/dist/esm/props/index.js

@@ -1,34 +0,0 @@
-import { ANIMATION_PROPS } from "./animation.js";
-import { BLOCK_PROPS } from "./block.js";
-import { FONT_PROPS } from "./font.js";
-import { MISC_PROPS } from "./misc.js";
-import { POSITION_PROPS } from "./position.js";
-import { THEME_PROPS } from "./theme.js";
-import { TIMING_PROPS } from "./timing.js";
-import { FLEX_PROPS } from "./flex.js";
-import { GRID_PROPS } from "./grid.js";
-export * from "./animation.js";
-export * from "./block.js";
-export * from "./font.js";
-export * from "./misc.js";
-export * from "./position.js";
-export * from "./theme.js";
-export * from "./timing.js";
-export * from "./flex.js";
-export * from "./grid.js";
-const CSS_PROPS_REGISTRY = {
-  ...ANIMATION_PROPS,
-  ...BLOCK_PROPS,
-  ...FONT_PROPS,
-  ...MISC_PROPS,
-  ...POSITION_PROPS,
-  ...THEME_PROPS,
-  ...TIMING_PROPS,
-  ...FLEX_PROPS,
-  ...GRID_PROPS
-};
-var props_default = CSS_PROPS_REGISTRY;
-export {
-  CSS_PROPS_REGISTRY,
-  props_default as default
-};

package/dist/esm/props/misc.js

@@ -1,22 +0,0 @@
-const MISC_PROPS = {
-  overflow: (value) => ({
-    overflow: value,
-    scrollBehavior: "smooth"
-  }),
-  cursor: (value, el, s, ctx) => {
-    if (!value) return;
-    const asset = ctx.assets && ctx.assets[value];
-    if (asset && asset.content) value = `url(${asset.content.src})`;
-    else {
-      const file = ctx.files && ctx.files[value];
-      if (file && file.content) value = `url(${file.content.src})`;
-    }
-    return { cursor: value };
-  },
-  opacity: (value) => value != null ? { opacity: String(value) } : void 0,
-  visibility: (value) => value != null ? { visibility: value } : void 0,
-  pointerEvents: (value) => value != null ? { pointerEvents: value } : void 0
-};
-export {
-  MISC_PROPS
-};

package/dist/esm/props/position.js

@@ -1,31 +0,0 @@
-import { getSpacingByKey } from "@symbo.ls/scratch";
-const POSITION_PROPS = {
-  inset: (val, el) => {
-    if (el.call("isNumber", val)) return { inset: val };
-    if (!el.call("isString", val)) return;
-    return { inset: val.split(" ").map((v) => getSpacingByKey(v, "k").k).join(" ") };
-  },
-  left: (val) => getSpacingByKey(val, "left"),
-  top: (val) => getSpacingByKey(val, "top"),
-  right: (val) => getSpacingByKey(val, "right"),
-  bottom: (val) => getSpacingByKey(val, "bottom"),
-  verticalInset: (val) => {
-    if (typeof val !== "string") return;
-    const vi = val.split(" ").map((v) => getSpacingByKey(v, "k").k);
-    return {
-      top: vi[0],
-      bottom: vi[1] || vi[0]
-    };
-  },
-  horizontalInset: (val) => {
-    if (typeof val !== "string") return;
-    const vi = val.split(" ").map((v) => getSpacingByKey(v, "k").k);
-    return {
-      left: vi[0],
-      right: vi[1] || vi[0]
-    };
-  }
-};
-export {
-  POSITION_PROPS
-};

package/dist/esm/props/theme.js

@@ -1,137 +0,0 @@
-import {
-  getMediaTheme,
-  getMediaColor,
-  transformTextStroke,
-  transformShadow,
-  transformBoxShadow,
-  transformBorder,
-  transformBackgroundImage,
-  resolveColorsInGradient,
-  transformSizeRatio
-} from "@symbo.ls/scratch";
-import { isDefined, isString } from "@symbo.ls/utils";
-const getSystemGlobalTheme = ({ context, state }) => {
-  const theme = state?.root?.globalTheme || context.designSystem?.globalTheme;
-  return theme === "auto" ? null : theme;
-};
-const THEME_PROPS = {
-  theme: (val, element) => {
-    if (!val) return;
-    if (element.themeModifier) {
-      return getMediaTheme(val, `@${element.themeModifier}`);
-    }
-    return getMediaTheme(val);
-  },
-  color: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      color: getMediaColor(val, globalTheme)
-    };
-  },
-  background: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    if (isString(val) && val.includes("gradient")) {
-      return { background: resolveColorsInGradient(val, globalTheme) };
-    }
-    return {
-      background: getMediaColor(val, globalTheme)
-    };
-  },
-  backgroundColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      backgroundColor: getMediaColor(val, globalTheme)
-    };
-  },
-  backgroundImage: (val, element, s, ctx) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    const asset = ctx.assets && ctx.assets[val];
-    if (asset && asset.content) val = asset.content.src;
-    else {
-      const file = ctx.files && ctx.files[val];
-      if (file && file.content) val = file.content.src;
-    }
-    return {
-      backgroundImage: transformBackgroundImage(val, globalTheme)
-    };
-  },
-  textStroke: (val) => ({
-    WebkitTextStroke: transformTextStroke(val)
-  }),
-  outline: (val) => ({
-    outline: transformBorder(val)
-  }),
-  outlineOffset: (val, el) => transformSizeRatio("outlineOffset", val, el),
-  border: (val) => ({
-    border: transformBorder(val)
-  }),
-  borderColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      borderColor: getMediaColor(val, globalTheme)
-    };
-  },
-  borderTopColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderTopColor: getMediaColor(val, globalTheme) };
-  },
-  borderBottomColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderBottomColor: getMediaColor(val, globalTheme) };
-  },
-  borderLeftColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderLeftColor: getMediaColor(val, globalTheme) };
-  },
-  borderRightColor: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return { borderRightColor: getMediaColor(val, globalTheme) };
-  },
-  borderLeft: (val) => ({
-    borderLeft: transformBorder(val)
-  }),
-  borderTop: (val) => ({
-    borderTop: transformBorder(val)
-  }),
-  borderRight: (val) => ({
-    borderRight: transformBorder(val)
-  }),
-  borderBottom: (val) => ({
-    borderBottom: transformBorder(val)
-  }),
-  shadow: (val, element) => {
-    const globalTheme = getSystemGlobalTheme(element);
-    if (!val) return;
-    return {
-      boxShadow: transformShadow(val, globalTheme)
-    };
-  },
-  boxShadow: (val, element) => {
-    if (!isString(val)) return;
-    const [value, hasImportant] = val.split("!importan");
-    const globalTheme = getSystemGlobalTheme(element);
-    const important = hasImportant ? " !important" : "";
-    return {
-      boxShadow: transformBoxShadow(value.trim(), globalTheme) + important
-    };
-  },
-  textShadow: (val, { context }) => ({
-    textShadow: transformBoxShadow(val, context.designSystem.globalTheme)
-  }),
-  columnRule: (val) => ({
-    columnRule: transformBorder(val)
-  })
-};
-export {
-  THEME_PROPS,
-  getSystemGlobalTheme
-};

package/dist/esm/props/timing.js

@@ -1,26 +0,0 @@
-import {
-  getTimingFunction,
-  splitTransition,
-  transformDuration
-} from "@symbo.ls/scratch";
-const TIMING_PROPS = {
-  transition: (val) => ({
-    transition: splitTransition(val)
-  }),
-  transitionDuration: (val) => ({
-    transitionDuration: transformDuration(val)
-  }),
-  transitionDelay: (val) => ({
-    transitionDelay: transformDuration(val)
-  }),
-  transitionTimingFunction: (val) => ({
-    transitionTimingFunction: getTimingFunction(val)
-  }),
-  transitionProperty: (val) => ({
-    transitionProperty: val,
-    willChange: val
-  })
-};
-export {
-  TIMING_PROPS
-};

package/dist/esm/set.js

@@ -1,16 +0,0 @@
-import { isObject } from "@symbo.ls/utils";
-import { useCssInProps } from "./transform/index.js";
-import { css } from "@symbo.ls/css";
-const transformClassname = (element) => {
-  if (!isObject(element)) return;
-  return useCssInProps(element, element);
-};
-const setClassname = (props, cssEngine) => {
-  const transform = transformClassname(props);
-  if (typeof cssEngine === "function") return cssEngine(transform);
-  return css(transform);
-};
-export {
-  setClassname,
-  transformClassname
-};