@kuma-ui/system/dist/consumeStyleProps.js

🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.

"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);

// src/consumeStyleProps.ts
var consumeStyleProps_exports = {};
__export(consumeStyleProps_exports, {
  consumeStyleProps: () => consumeStyleProps
});
module.exports = __toCommonJS(consumeStyleProps_exports);

// src/props/animation.ts
var animationMappings = {
  animation: "animation",
  animationComposition: "animation-composition",
  animationDelay: "animation-delay",
  animationDirection: "animation-direction",
  animationDuration: "animation-duration",
  animationFillMode: "animation-fill-mode",
  animationName: "animation-name",
  animationIterationCount: "animation-iteration-count",
  animationPlayState: "animation-play-state",
  animationTimeline: "animation-timeline",
  animationTimingFunction: "animation-timing-function"
};

// src/props/space.ts
var spaceMappings = {
  margin: "margin",
  m: "margin",
  marginTop: "margin-top",
  mt: "margin-top",
  marginRight: "margin-right",
  mr: "margin-right",
  marginBottom: "margin-bottom",
  mb: "margin-bottom",
  marginLeft: "margin-left",
  ml: "margin-left",
  marginX: "margin-left,margin-right",
  mx: "margin-left,margin-right",
  marginY: "margin-top,margin-bottom",
  my: "margin-top,margin-bottom",
  marginInlineStart: "margin-inline-start",
  marginInlineEnd: "margin-inline-end",
  marginBlockStart: "margin-block-start",
  marginBlockEnd: "margin-block-end",
  marginInline: "margin-inline",
  marginBlock: "margin-block",
  padding: "padding",
  p: "padding",
  paddingTop: "padding-top",
  pt: "padding-top",
  paddingRight: "padding-right",
  pr: "padding-right",
  paddingBottom: "padding-bottom",
  pb: "padding-bottom",
  paddingLeft: "padding-left",
  pl: "padding-left",
  paddingX: "padding-left,padding-right",
  px: "padding-left,padding-right",
  paddingY: "padding-top,padding-bottom",
  py: "padding-top,padding-bottom",
  paddingInlineStart: "padding-inline-start",
  paddingInlineEnd: "padding-inline-end",
  paddingBlockStart: "padding-block-start",
  paddingBlockEnd: "padding-block-end",
  paddingInline: "padding-inline",
  paddingBlock: "padding-block"
};

// src/props/typography.ts
var typographyMappings = {
  hyphenateCharacter: "hyphenate-character",
  hyphenateLimitChars: "hyphenate-limit-chars",
  hyphens: "hyphens",
  hangingPunctuation: "hanging-punctuation",
  lineHeight: "line-height",
  lineBreak: "line-break",
  orphans: "orphans",
  quotes: "quotes",
  rubyPosition: "ruby-position",
  unicodeBidi: "unicode-bidi",
  widows: "widows",
  whiteSpace: "white-space",
  letterSpacing: "letter-spacing",
  wordBreak: "word-break",
  wordSpacing: "word-spacing",
  writingMode: "writing-mode"
};

// src/props/layout.ts
var layoutMappings = {
  width: "width",
  w: "width",
  minWidth: "min-width",
  minW: "min-width",
  maxWidth: "max-width",
  maxW: "max-width",
  height: "height",
  h: "height",
  minHeight: "min-height",
  minH: "min-height",
  maxHeight: "max-height",
  maxH: "max-height",
  display: "display",
  overflow: "overflow",
  overflowX: "overflow-x",
  overflowY: "overflow-y",
  position: "position",
  zIndex: "z-index",
  cursor: "cursor",
  aspectRatio: "aspect-ratio",
  boxSizing: "box-sizing",
  float: "float",
  clear: "clear",
  objectFit: "object-fit",
  objectPosition: "object-position",
  resize: "resize",
  verticalAlign: "vertical-align",
  userSelect: "user-select"
};

// src/props/color.ts
var colorMappings = {
  background: "background",
  bg: "background",
  backgroundColor: "background-color",
  bgColor: "background-color",
  color: "color",
  borderColor: "border-color",
  outlineColor: "outline-color",
  accentColor: "accent-color",
  caretColor: "caret-color",
  opacity: "opacity",
  visibility: "visibility"
};

// src/props/flex.ts
var flexMappings = {
  flexDirection: "flex-direction",
  flexDir: "flex-direction",
  justifyContent: "justify-content",
  justify: "justify-content",
  alignContent: "align-content",
  alignItems: "align-items",
  alignSelf: "align-self",
  flex: "flex",
  flexBasis: "flex-basis",
  flexFlow: "flex-flow",
  flexGrow: "flex-grow",
  flexShrink: "flex-shrink",
  flexWrap: "flex-wrap",
  justifyItems: "justify-items",
  justifySelf: "justify-self",
  gap: "gap",
  placeItems: "place-items",
  placeContent: "place-content"
};

// src/props/border.ts
var borderMappings = {
  border: "border",
  borderTop: "border-top",
  borderRight: "border-right",
  borderLeft: "border-left",
  borderBottom: "border-bottom",
  borderX: "border-left,border-right",
  borderY: "border-top,border-bottom",
  borderRadius: "border-radius",
  borderTopLeftRadius: "border-top-left-radius",
  borderTopRightRadius: "border-top-right-radius",
  borderBottomLeftRadius: "border-bottom-left-radius",
  borderBottomRightRadius: "border-bottom-right-radius",
  borderStyle: "border-style",
  borderTopStyle: "border-top-style",
  borderBottomStyle: "border-bottom-style",
  borderLeftStyle: "border-left-style",
  borderRightStyle: "border-right-style",
  borderWidth: "border-width",
  borderTopWidth: "border-top-width",
  borderBottomWidth: "border-bottom-width",
  borderLeftWidth: "border-left-width",
  borderRightWidth: "border-right-width",
  borderStart: "border-inline-start",
  borderEnd: "border-inline-end",
  borderStartWidth: "border-inline-start-width",
  borderEndWidth: "border-inline-end-width",
  borderStartStyle: "border-inline-start-style",
  borderEndStyle: "border-inline-end-style",
  borderStartRadius: "border-top-left-radius,border-bottom-left-radius",
  borderEndRadius: "border-top-right-radius,border-bottom-right-radius"
};

// src/props/outline.ts
var outlineMappings = {
  outline: "outline",
  outlineOffset: "outline-offset",
  outlineWidth: "outline-width",
  outlineStyle: "outline-style"
};

// src/props/position.ts
var positionMappings = {
  top: "top",
  right: "right",
  left: "left",
  bottom: "bottom",
  inset: "inset"
};

// src/props/shadow.ts
var shadowMappings = {
  boxShadow: "box-shadow",
  textShadow: "text-shadow"
};

// src/consumeStyleProps.ts
var import_sheet2 = require("@kuma-ui/sheet");

// src/props/grid.ts
var gridMappings = {
  grid: "grid",
  gridArea: "grid-area",
  gridAutoColumns: "grid-auto-columns",
  gridAutoFlow: "grid-auto-flow",
  gridAutoRows: "grid-auto-rows",
  gridColumn: "grid-column",
  gridColumnEnd: "grid-column-end",
  gridColumnStart: "grid-column-start",
  gridRow: "grid-row",
  gridRowEnd: "grid-row-end",
  gridRowStart: "grid-row-start",
  gridTemplate: "grid-template",
  gridTemplateAreas: "grid-template-areas",
  gridTemplateColumns: "grid-template-columns",
  gridTemplateRows: "grid-template-rows",
  gridGap: "grid-gap",
  gridColumnGap: "grid-column-gap",
  gridRowGap: "grid-row-gap"
};

// src/props/list.ts
var listMappings = {
  listStyle: "list-style",
  listStyleImage: "list-style-image",
  listStylePosition: "list-style-position",
  listStyleType: "list-style-type"
};

// src/props/effect.ts
var effectMappings = {
  transition: "transition",
  transitionDuration: "transition-duration",
  transitionProperty: "transition-property",
  transitionTimingFunction: "transition-timing-function",
  transitionDelay: "transition-delay",
  transform: "transform",
  transformBox: "transform-box",
  transformOrigin: "transform-origin",
  transformStyle: "transform-style",
  clipPath: "clip-path",
  content: "content",
  contentVisibility: "content-visibility"
};

// src/props/text.ts
var textMappings = {
  textAlign: "text-align",
  textAlignLast: "text-align-last",
  textCombineUpright: "text-combine-upright",
  textDecoration: "text-decoration",
  textDecorationColor: "text-decoration-color",
  textDecorationLine: "text-decoration-line",
  textDecorationSkipInk: "text-decoration-skip-ink",
  textDecorationStyle: "text-decoration-style",
  textDecorationThickness: "text-decoration-thickness",
  textEmphasis: "text-emphasis",
  textEmphasisColor: "text-emphasis-color",
  textEmphasisPosition: "text-emphasis-position",
  textEmphasisStyle: "text-emphasis-style",
  textIndent: "text-indent",
  textJustify: "text-justify",
  textOrientation: "text-orientation",
  textOverflow: "text-overflow",
  textRendering: "text-rendering",
  textShadow: "text-shadow",
  textTransform: "text-transform",
  textUnderlineOffset: "text-underline-offset",
  textUnderlinePosition: "text-underline-position"
};

// src/props/font.ts
var fontMappings = {
  font: "font",
  fontFamily: "font-family",
  fontFeatureSettings: "font-feature-settings",
  fontKerning: "font-kerning",
  fontLanguageOverride: "font-language-override",
  fontOpticalSizing: "font-optical-sizing",
  fontPalette: "font-palette",
  fontSize: "font-size",
  fontSizeAdjust: "font-size-adjust",
  fontStretch: "font-stretch",
  fontStyle: "font-style",
  fontSynthesis: "font-synthesis",
  fontVariant: "font-variant",
  fontVariantAlternates: "font-variant-alternates",
  fontVariantCaps: "font-variant-caps",
  fontVariantEastAsian: "font-variant-east-asian",
  fontVariantEmoji: "font-variant-emoji",
  fontVariantLigatures: "font-variant-ligatures",
  fontVariantNumeric: "font-variant-numeric",
  fontVariantPosition: "font-variant-position",
  fontVariationSettings: "font-variation-settings",
  fontWeight: "font-weight"
};

// src/props/mask.ts
var maskMappings = {
  mask: "mask",
  maskBorder: "mask-border",
  maskBorderMode: "mask-border-mode",
  maskBorderOutset: "mask-border-outset",
  maskBorderRepeat: "mask-border-repeat",
  maskBorderSlice: "mask-border-slice",
  maskBorderSource: "mask-border-source",
  maskBorderWidth: "mask-border-width",
  maskClip: "mask-clip",
  maskComposite: "mask-composite",
  maskImage: "mask-image",
  maskMode: "mask-mode",
  maskOrigin: "mask-origin",
  maskPosition: "mask-position",
  maskRepeat: "mask-repeat",
  maskSize: "mask-size",
  maskType: "mask-type"
};

// src/props/column.ts
var columnMappings = {
  columnCount: "column-count",
  columnFill: "column-fill",
  columnGap: "column-gap",
  columnRule: "column-rule",
  columnRuleColor: "column-rule-color",
  columnRuleStyle: "column-rule-style",
  columnRuleWidth: "column-rule-width",
  columnSpan: "column-span",
  columnWidth: "column-width",
  columns: "columns"
};

// src/props/background.ts
var backgroundMappings = {
  backgroundImage: "background-image",
  bgImage: "background-image",
  backgroundPosition: "background-position",
  bgPosition: "background-position",
  backgroundPositionX: "background-position-x",
  bgPositionX: "background-position-x",
  backgroundPositionY: "background-position-y",
  bgPositionY: "background-position-y",
  backgroundSize: "background-size",
  bgSize: "background-size",
  backgroundRepeat: "background-repeat",
  bgRepeat: "background-repeat",
  backgroundAttachment: "background-attachment",
  bgAttachment: "background-attachment",
  backgroundClip: "background-clip",
  bgClip: "background-clip",
  backgroundOrigin: "background-origin",
  bgOrigin: "background-origin",
  backgroundBlendMode: "background-blend-mode",
  bgBlendMode: "background-blend-mode"
};

// src/props/filter.ts
var filterMappings = {
  filter: "filter",
  backdropFilter: "backdrop-filter"
};

// src/responsive.ts
var import_sheet = require("@kuma-ui/sheet");
var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
  const { breakpoints } = import_sheet.theme.getUserTheme();
  const media = {};
  if (Array.isArray(cssValues)) {
    const baseValue = convertFn(cssValues[0]);
    cssValues.slice(1).map((value, index) => {
      if (breakpoints) {
        const breakpoint = Object.keys(breakpoints)[index];
        const breakpointValue = breakpoints[breakpoint];
        media[breakpointValue] = `${cssProperty}: ${convertFn(value)};`;
      }
    });
    return { base: `${cssProperty}: ${baseValue};`, media };
  }
  return { base: `${cssProperty}: ${convertFn(cssValues)};`, media: {} };
};

// src/toCSS.ts
var unitless = {
  animationIterationCount: 1,
  aspectRatio: 1,
  borderImageOutset: 1,
  borderImageSlice: 1,
  borderImageWidth: 1,
  boxFlex: 1,
  boxFlexGroup: 1,
  boxOrdinalGroup: 1,
  columnCount: 1,
  columns: 1,
  flex: 1,
  flexGrow: 1,
  flexPositive: 1,
  flexShrink: 1,
  flexNegative: 1,
  flexOrder: 1,
  gridRow: 1,
  gridRowEnd: 1,
  gridRowSpan: 1,
  gridRowStart: 1,
  gridColumn: 1,
  gridColumnEnd: 1,
  gridColumnSpan: 1,
  gridColumnStart: 1,
  msGridRow: 1,
  msGridRowSpan: 1,
  msGridColumn: 1,
  msGridColumnSpan: 1,
  fontWeight: 1,
  lineHeight: 1,
  opacity: 1,
  order: 1,
  orphans: 1,
  tabSize: 1,
  widows: 1,
  zIndex: 1,
  zoom: 1,
  WebkitLineClamp: 1,
  // SVG-related properties
  fillOpacity: 1,
  floodOpacity: 1,
  stopOpacity: 1,
  strokeDasharray: 1,
  strokeDashoffset: 1,
  strokeMiterlimit: 1,
  strokeOpacity: 1,
  strokeWidth: 1
};
function toCssUnit(propertyName, value) {
  if (typeof value === "number") {
    return `${value}${!(propertyName in unitless) ? "px" : ""}`;
  }
  return value;
}

// src/props/contain.ts
var containMappings = {
  contain: "contain",
  containIntrinsicBlockSize: "contain-intrinsic-block-size",
  containIntrinsicHeight: "contain-intrinsic-height",
  containIntrinsicInlineSize: "contain-intrinsic-inline-size",
  containIntrinsicSize: "contain-intrinsic-size",
  containIntrinsicWidth: "contain-intrinsic-width"
};

// src/consumeStyleProps.ts
var styleMappings = Object.assign(
  {},
  animationMappings,
  spaceMappings,
  typographyMappings,
  layoutMappings,
  colorMappings,
  flexMappings,
  containMappings,
  borderMappings,
  outlineMappings,
  positionMappings,
  shadowMappings,
  gridMappings,
  listMappings,
  effectMappings,
  textMappings,
  fontMappings,
  maskMappings,
  columnMappings,
  backgroundMappings,
  filterMappings
);
var consumeStyleProps = (props) => {
  const cacheKey = JSON.stringify(props);
  const cachedStyles = import_sheet2.styleCache.get(cacheKey);
  if (cachedStyles) {
    return cachedStyles;
  }
  let base = "";
  const media = {};
  for (const key in props) {
    const cssValue = props[key];
    if (cssValue == null)
      continue;
    const properties = styleMappings[key]?.split(",") ?? [];
    for (const property of properties) {
      const responsiveStyles = applyResponsiveStyles(
        property,
        cssValue,
        (value) => toCssUnit(key, value)
      );
      base += responsiveStyles.base;
      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
        if (media[breakpoint]) {
          media[breakpoint] += css;
        } else {
          media[breakpoint] = css;
        }
      }
    }
  }
  const combinedStyles = { base, media };
  import_sheet2.styleCache.set(cacheKey, combinedStyles);
  return combinedStyles;
};
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
  consumeStyleProps
});