css-in-props 3.14.0 → 3.14.3

package/dist/esm/props/animation.js

@@ -1,106 +0,0 @@
-import { isObject, isString } from "@symbo.ls/utils";
-import { keyframes as cssKeyframes } from "@symbo.ls/css";
-import { getTimingByKey, getTimingFunction } from "@symbo.ls/scratch";
-const TIMING_FUNCTIONS = ["ease", "linear", "ease-in", "ease-out", "ease-in-out", "step-start", "step-end"];
-const FILL_MODES = ["none", "forwards", "backwards", "both"];
-const DIRECTIONS = ["normal", "reverse", "alternate", "alternate-reverse"];
-const PLAY_STATES = ["running", "paused"];
-const isDuration = (v) => /^[\d.]+m?s$/.test(v);
-let _animCounter = 0;
-const applyAnimationProps = (animation, element) => {
-  const { animation: ANIMATION } = element.context && element.context.designSystem || {};
-  if (isObject(animation)) {
-    const name = `smbls-anim-${_animCounter++}`;
-    return { animationName: cssKeyframes(name, animation) };
-  }
-  const record = ANIMATION && ANIMATION[animation];
-  if (isObject(record)) {
-    return cssKeyframes(animation, record);
-  }
-  return animation;
-};
-const parseAnimationShorthand = (val, el) => {
-  const { animation: ANIMATION } = el.context && el.context.designSystem || {};
-  const tokens = val.split(/\s+/);
-  let name = null;
-  const durations = [];
-  let timingFunction = null;
-  let iterationCount = null;
-  let direction = null;
-  let fillMode = null;
-  let playState = null;
-  for (const token of tokens) {
-    if (ANIMATION && ANIMATION[token]) {
-      name = token;
-    } else if (isDuration(token)) {
-      durations.push(token);
-    } else if (TIMING_FUNCTIONS.includes(token) || token.startsWith("cubic-bezier") || token.startsWith("steps(")) {
-      timingFunction = token;
-    } else if (token === "infinite" || /^\d+$/.test(token)) {
-      iterationCount = token === "infinite" ? token : Number(token);
-    } else if (DIRECTIONS.includes(token)) {
-      direction = token;
-    } else if (FILL_MODES.includes(token)) {
-      fillMode = token;
-    } else if (PLAY_STATES.includes(token)) {
-      playState = token;
-    } else if (!name) {
-      name = token;
-    }
-  }
-  return { name, durations, timingFunction, iterationCount, direction, fillMode, playState };
-};
-const ANIMATION_PROPS = {
-  animation: (val, el) => {
-    if (isString(val) && val.includes(" ")) {
-      const parsed = parseAnimationShorthand(val, el);
-      return {
-        animationName: applyAnimationProps(parsed.name || val, el),
-        animationDuration: parsed.durations[0] || getTimingByKey(el.animationDuration || "A").timing,
-        animationDelay: parsed.durations[1] || getTimingByKey(el.animationDelay || "0s").timing,
-        animationTimingFunction: parsed.timingFunction || getTimingFunction(el.animationTimingFunction || "ease"),
-        animationFillMode: parsed.fillMode || el.animationFillMode || "both",
-        animationIterationCount: parsed.iterationCount != null ? parsed.iterationCount : el.animationIterationCount || 1,
-        animationPlayState: parsed.playState || el.animationPlayState,
-        animationDirection: parsed.direction || el.animationDirection
-      };
-    }
-    return {
-      animationName: applyAnimationProps(val, el),
-      animationDuration: getTimingByKey(el.animationDuration || "A").timing,
-      animationDelay: getTimingByKey(el.animationDelay || "0s").timing,
-      animationTimingFunction: getTimingFunction(el.animationTimingFunction || "ease"),
-      animationFillMode: el.animationFillMode || "both",
-      animationIterationCount: el.animationIterationCount || 1,
-      animationPlayState: el.animationPlayState,
-      animationDirection: el.animationDirection
-    };
-  },
-  animationName: (val, el) => ({
-    animationName: applyAnimationProps(val, el)
-  }),
-  animationDuration: (val) => ({
-    animationDuration: getTimingByKey(val).timing
-  }),
-  animationDelay: (val) => ({
-    animationDelay: getTimingByKey(val).timing
-  }),
-  animationTimingFunction: (val) => ({
-    animationTimingFunction: getTimingFunction(val)
-  }),
-  animationIterationCount: (val) => ({
-    animationIterationCount: val
-  }),
-  animationFillMode: (val) => ({
-    animationFillMode: val
-  }),
-  animationPlayState: (val) => ({
-    animationPlayState: val
-  }),
-  animationDirection: (val) => ({
-    animationDirection: val
-  })
-};
-export {
-  ANIMATION_PROPS
-};

package/dist/esm/props/block.js

@@ -1,159 +0,0 @@
-import { isUndefined, isString } from "@symbo.ls/utils";
-import {
-  getSpacingBasedOnRatio,
-  transformSize,
-  transformBorderRadius,
-  transformSizeRatio,
-  transfromGap
-} from "@symbo.ls/scratch";
-const BLOCK_PROPS = {
-  show: (val) => !val ? { display: "none !important" } : void 0,
-  hide: (val) => val ? { display: "none !important" } : void 0,
-  height: (val, el) => transformSizeRatio("height", val, el),
-  width: (val, el) => transformSizeRatio("width", val, el),
-  boxSizing: (val) => !isUndefined(val) ? { boxSizing: val } : { boxSizing: "border-box" },
-  boxSize: (val) => {
-    if (!isString(val)) return;
-    const [height, width] = val.split(" ");
-    return {
-      ...transformSize("height", height),
-      ...transformSize("width", width || height)
-    };
-  },
-  inlineSize: (val, el) => transformSizeRatio("inlineSize", val, el),
-  blockSize: (val, el) => transformSizeRatio("blockSize", val, el),
-  minWidth: (val, el) => transformSizeRatio("minWidth", val, el),
-  maxWidth: (val, el) => transformSizeRatio("maxWidth", val, el),
-  widthRange: (val) => {
-    if (!isString(val)) return;
-    const [minWidth, maxWidth] = val.split(" ");
-    return {
-      ...transformSize("minWidth", minWidth),
-      ...transformSize("maxWidth", maxWidth || minWidth)
-    };
-  },
-  minHeight: (val, el) => transformSizeRatio("minHeight", val, el),
-  maxHeight: (val, el) => transformSizeRatio("maxHeight", val, el),
-  heightRange: (val) => {
-    if (!isString(val)) return;
-    const [minHeight, maxHeight] = val.split(" ");
-    return {
-      ...transformSize("minHeight", minHeight),
-      ...transformSize("maxHeight", maxHeight || minHeight)
-    };
-  },
-  size: (val) => {
-    if (!isString(val)) return;
-    const [inlineSize, blockSize] = val.split(" ");
-    return {
-      ...transformSizeRatio("inlineSize", inlineSize),
-      ...transformSizeRatio("blockSize", blockSize || inlineSize)
-    };
-  },
-  minBlockSize: (val, el) => transformSizeRatio("minBlockSize", val, el),
-  minInlineSize: (val, el) => transformSizeRatio("minInlineSize", val, el),
-  maxBlockSize: (val, el) => transformSizeRatio("maxBlockSize", val, el),
-  maxInlineSize: (val, el) => transformSizeRatio("maxInlineSize", val, el),
-  minSize: (val) => {
-    if (!isString(val)) return;
-    const [minInlineSize, minBlockSize] = val.split(" ");
-    return {
-      ...transformSize("minInlineSize", minInlineSize),
-      ...transformSize("minBlockSize", minBlockSize || minInlineSize)
-    };
-  },
-  maxSize: (val) => {
-    if (!isString(val)) return;
-    const [maxInlineSize, maxBlockSize] = val.split(" ");
-    return {
-      ...transformSize("maxInlineSize", maxInlineSize),
-      ...transformSize("maxBlockSize", maxBlockSize || maxInlineSize)
-    };
-  },
-  borderWidth: (val, el) => transformSizeRatio("borderWidth", val, el),
-  padding: (val, el) => transformSizeRatio("padding", val, el),
-  scrollPadding: (val, el) => transformSizeRatio("scrollPadding", val, el),
-  paddingInline: (val) => {
-    if (!isString(val)) return;
-    const [paddingInlineStart, paddingInlineEnd] = val.split(" ");
-    return {
-      ...transformSize("paddingInlineStart", paddingInlineStart),
-      ...transformSize("paddingInlineEnd", paddingInlineEnd || paddingInlineStart)
-    };
-  },
-  paddingBlock: (val) => {
-    if (!isString(val)) return;
-    const [paddingBlockStart, paddingBlockEnd] = val.split(" ");
-    return {
-      ...transformSize("paddingBlockStart", paddingBlockStart),
-      ...transformSize("paddingBlockEnd", paddingBlockEnd || paddingBlockStart)
-    };
-  },
-  paddingTop: (val, el) => transformSizeRatio("paddingBlockStart", val, el),
-  paddingBottom: (val, el) => transformSizeRatio("paddingBlockEnd", val, el),
-  paddingLeft: (val, el) => transformSizeRatio("paddingInlineStart", val, el),
-  paddingRight: (val, el) => transformSizeRatio("paddingInlineEnd", val, el),
-  paddingBlockStart: (val, el) => transformSizeRatio("paddingBlockStart", val, el),
-  paddingBlockEnd: (val, el) => transformSizeRatio("paddingBlockEnd", val, el),
-  paddingInlineStart: (val, el) => transformSizeRatio("paddingInlineStart", val, el),
-  paddingInlineEnd: (val, el) => transformSizeRatio("paddingInlineEnd", val, el),
-  margin: (val, el) => transformSizeRatio("margin", val, el),
-  marginInline: (val) => {
-    if (!isString(val)) return;
-    const [marginInlineStart, marginInlineEnd] = val.split(" ");
-    return {
-      ...transformSize("marginInlineStart", marginInlineStart),
-      ...transformSize("marginInlineEnd", marginInlineEnd || marginInlineStart)
-    };
-  },
-  marginBlock: (val, el) => {
-    if (!isString(el.marginBlock)) return;
-    const [marginBlockStart, marginBlockEnd] = el.marginBlock.split(" ");
-    return {
-      ...transformSize("marginBlockStart", marginBlockStart),
-      ...transformSize("marginBlockEnd", marginBlockEnd || marginBlockStart)
-    };
-  },
-  marginTop: (val, el) => transformSizeRatio("marginBlockStart", val, el),
-  marginBottom: (val, el) => transformSizeRatio("marginBlockEnd", val, el),
-  marginLeft: (val, el) => transformSizeRatio("marginInlineStart", val, el),
-  marginRight: (val, el) => transformSizeRatio("marginInlineEnd", val, el),
-  marginInlineStart: (val, el) => transformSizeRatio("marginInlineStart", val, el),
-  marginInlineEnd: (val, el) => transformSizeRatio("marginInlineEnd", val, el),
-  marginBlockStart: (val, el) => transformSizeRatio("marginBlockStart", val, el),
-  marginBlockEnd: (val, el) => transformSizeRatio("marginBlockEnd", val, el),
-  gap: (val) => ({
-    gap: transfromGap(val)
-  }),
-  columnGap: (val, el) => getSpacingBasedOnRatio(el, "columnGap", val),
-  rowGap: (val, el) => getSpacingBasedOnRatio(el, "rowGap", val),
-  flexWrap: (val) => ({
-    display: "flex",
-    flexWrap: val
-  }),
-  flexFlow: (val, el) => {
-    const reverse = el.reverse;
-    if (!isString(val)) return;
-    let [direction, wrap] = (val || "row").split(" ");
-    if (val.startsWith("x") || val === "row") direction = "row";
-    if (val.startsWith("y") || val === "column") direction = "column";
-    return {
-      display: "flex",
-      flexFlow: (direction || "") + (!direction.includes("-reverse") && reverse ? "-reverse" : "") + " " + (wrap || "")
-    };
-  },
-  flexAlign: (val) => {
-    if (!isString(val)) return;
-    const [alignItems, justifyContent] = val.split(" ");
-    return {
-      display: "flex",
-      alignItems,
-      justifyContent
-    };
-  },
-  round: (val, el) => transformBorderRadius(val ?? el.borderRadius, el, "round"),
-  borderRadius: (val, el) => transformBorderRadius(val ?? el.round, el, "borderRadius")
-};
-export {
-  BLOCK_PROPS
-};

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
-};