@kuma-ui/system - npm Package Compare versions

Comparing version 0.6.2 to 0.7.0-next.1

dist/border.js

@@ -38,3 +38,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -41,0 +41,0 @@ if (Array.isArray(cssValues)) {

dist/color.d.ts

@@ -5,14 +5,17 @@ import { CSSValue, CSSProperties, ResponsiveStyle } from './types.js';
 
-type ColorProps = Partial<{
+type AddProperty<T, T2> = {
+    [Key in keyof T]: T[Key] | T2;
+};
+type ColorProps<AutoPrefix extends string = string & {}> = Partial<AddProperty<{
     /**
      * @see background
      */
-    bg: CSSValue<"background">;
+    bg: CSSValue<"background"> | AutoPrefix;
     /**
      * @see backgroundColor
      */
-    bgColor: CSSValue<"backgroundColor">;
-} & CSSProperties<"borderColor" | "color" | "opacity">>;
+    bgColor: CSSValue<"backgroundColor"> | AutoPrefix;
+} & CSSProperties<"borderColor" | "outlineColor" | "color" | "accentColor" | "caretColor" | "opacity", false>, AutoPrefix>>;
 declare const color: (props: ColorProps) => ResponsiveStyle;
 
 export { ColorProps, color };

dist/color.js

@@ -30,3 +30,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -46,2 +46,3 @@ if (Array.isArray(cssValues)) {
 // src/color.ts
+var import_sheet2 = require("@kuma-ui/sheet");
 var colorMappings = {
@@ -52,2 +53,5 @@ bg: "background",
   borderColor: "border-color",
+  outlineColor: "outline-color",
+  accentColor: "accent-color",
+  caretColor: "caret-color",
   opacity: "opacity"
@@ -62,3 +66,23 @@ };
       const property = colorMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
+      const userTheme = import_sheet2.theme.getUserTheme();
+      let converter;
+      if (userTheme.colors) {
+        converter = (value) => {
+          let newValue = value;
+          for (const key2 in userTheme.colors) {
+            if (value === key2) {
+              newValue = userTheme.colors[key2];
+              break;
+            }
+          }
+          return newValue;
+        };
+      } else {
+        converter = (v) => v;
+      }
+      const responsiveStyles = applyResponsiveStyles(
+        property,
+        cssValue,
+        converter
+      );
       base += responsiveStyles.base;
@@ -65,0 +89,0 @@ for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {

dist/compose.d.ts

@@ -7,12 +7,17 @@ import { SpaceProps } from './space.js';
 import { BorderProps } from './border.js';
+import { OutlineProps } from './outline.js';
 import { PositionProps } from './position.js';
 import { ShadowProps } from './shadow.js';
-import { ResponsiveStyle } from './types.js';
+import { ThemeSystemType, ResponsiveStyle } from './types.js';
 import { GridProps } from './grid.js';
 import { ListProps } from './list.js';
 import { EffectProps } from './effect.js';
+import { TextProps } from './text.js';
+import { FontProps } from './font.js';
+import { MaskProps } from './mask.js';
+import { ColumnProps } from './column.js';
 import 'csstype';
 import './keys.js';
 
-type StyledProps = SpaceProps & TypographyProps & LayoutProps & ColorProps & FlexProps & BorderProps & PositionProps & ShadowProps & GridProps & ListProps & EffectProps;
+type StyledProps<T extends ThemeSystemType = ThemeSystemType> = SpaceProps & TypographyProps & TextProps & FontProps & LayoutProps & ColorProps<T["colors"]> & FlexProps & BorderProps & OutlineProps & PositionProps & ShadowProps & GridProps & ListProps & EffectProps & MaskProps & ColumnProps & EffectProps;
 type StyleFunction = (props: StyledProps) => ResponsiveStyle;
@@ -19,0 +24,0 @@ /**

dist/effect.d.ts

@@ -5,5 +5,5 @@ import { CSSProperties, ResponsiveStyle } from './types.js';
 
-type EffectProps = Partial<CSSProperties<"transition" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "transitionDelay" | "transform" | "transformOrigin">>;
+type EffectProps = Partial<CSSProperties<"transition" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "transitionDelay" | "transform" | "transformBox" | "transformOrigin" | "transformStyle">>;
 declare const effect: (props: EffectProps) => ResponsiveStyle;
 
 export { EffectProps, effect };

dist/effect.js

@@ -30,3 +30,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -53,3 +53,5 @@ if (Array.isArray(cssValues)) {
   transform: "transform",
-  transformOrigin: "transform-origin"
+  transformBox: "transform-box",
+  transformOrigin: "transform-origin",
+  transformStyle: "transform-style"
 };
@@ -56,0 +58,0 @@ var effect = (props) => {

dist/flex.d.ts

@@ -15,5 +15,5 @@ import { CSSValue, CSSProperties, ResponsiveStyle } from './types.js';
     justify: CSSValue<"justifyContent">;
-} & CSSProperties<"alignItems" | "alignContent"> & CSSProperties<"flexWrap" | "flexGrow"> & CSSProperties<"flexShrink" | "flexBasis"> & CSSProperties<"gap">>;
+} & CSSProperties<"alignContent" | "alignItems" | "alignSelf"> & CSSProperties<"flexWrap" | "flexFlow"> & CSSProperties<"flexBasis", true> & CSSProperties<"flex" | "flexShrink" | "flexGrow", true> & CSSProperties<"justifyItems" | "justifySelf"> & CSSProperties<"gap", true>>;
 declare const flex: (props: FlexProps) => ResponsiveStyle;
 
 export { FlexProps, flex };

dist/flex.js

@@ -38,3 +38,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -57,8 +57,13 @@ if (Array.isArray(cssValues)) {
   justify: "justify-content",
+  alignContent: "align-content",
   alignItems: "align-items",
-  alignContent: "align-content",
-  flexWrap: "flex-wrap",
+  alignSelf: "align-self",
+  flex: "flex",
+  flexBasis: "flex-basis",
+  flexFlow: "flex-flow",
   flexGrow: "flex-grow",
   flexShrink: "flex-shrink",
-  flexBasis: "flex-basis",
+  flexWrap: "flex-wrap",
+  justifyItems: "justify-items",
+  justifySelf: "justify-self",
   gap: "gap"
@@ -73,3 +78,5 @@ };
       const property = flexMappings[key];
-      const converter = property === "gap" ? toCssUnit : void 0;
+      const converter = [flexMappings.flexBasis, flexMappings.gap].includes(
+        property
+      ) ? toCssUnit : void 0;
       const responsiveStyles = applyResponsiveStyles(
@@ -76,0 +83,0 @@ property,

dist/grid.js

@@ -38,3 +38,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -41,0 +41,0 @@ if (Array.isArray(cssValues)) {

dist/index.d.ts

@@ -9,10 +9,17 @@ import { StyleFunction } from './compose.js';
 export { BorderProps } from './border.js';
+export { OutlineProps } from './outline.js';
 export { PositionProps } from './position.js';
 export { ShadowProps } from './shadow.js';
-export { CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, UtilityCSSMapping } from './types.js';
+export { CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping } from './types.js';
 export { PseudoProps, isPseudoProps, normalizePseudo } from './pseudo.js';
+export { GridProps } from './grid.js';
+export { ListProps } from './list.js';
+export { EffectProps } from './effect.js';
+export { TextProps } from './text.js';
+export { FontProps } from './font.js';
+export { MaskProps } from './mask.js';
+export { ColumnProps } from './column.js';
 export { StyledKeyType, isStyledProp } from './keys.js';
-import './grid.js';
-import './list.js';
-import './effect.js';
+export { StyleGenerator } from './generator.js';
+export { toCssUnit } from './toCSS.js';
 import 'csstype';
@@ -19,0 +26,0 @@

dist/index.js

@@ -23,6 +23,8 @@ "use strict";
 __export(src_exports, {
+  StyleGenerator: () => StyleGenerator,
   all: () => all,
   isPseudoProps: () => isPseudoProps,
   isStyledProp: () => isStyledProp,
-  normalizePseudo: () => normalizePseudo
+  normalizePseudo: () => normalizePseudo,
+  toCssUnit: () => toCssUnit
 });
@@ -42,3 +44,3 @@ module.exports = __toCommonJS(src_exports);
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -108,9 +110,4 @@ if (Array.isArray(cssValues)) {
 var typographyMappings = {
-  fontSize: "font-size",
-  fontWeight: "font-weight",
   lineHeight: "line-height",
-  letterSpacing: "letter-spacing",
-  textAlign: "text-align",
-  fontFamily: "font-family",
-  textDecoration: "text-decoration"
+  letterSpacing: "letter-spacing"
 };
@@ -125,3 +122,2 @@ var typography = (props) => {
       const converter = [
-        typographyMappings.fontSize,
         typographyMappings.lineHeight,
@@ -194,2 +190,3 @@ typographyMappings.letterSpacing
 // src/color.ts
+var import_sheet2 = require("@kuma-ui/sheet");
 var colorMappings = {
@@ -200,2 +197,5 @@ bg: "background",
   borderColor: "border-color",
+  outlineColor: "outline-color",
+  accentColor: "accent-color",
+  caretColor: "caret-color",
   opacity: "opacity"
@@ -210,3 +210,23 @@ };
       const property = colorMappings[key];
-      const responsiveStyles = applyResponsiveStyles(property, cssValue);
+      const userTheme = import_sheet2.theme.getUserTheme();
+      let converter;
+      if (userTheme.colors) {
+        converter = (value) => {
+          let newValue = value;
+          for (const key2 in userTheme.colors) {
+            if (value === key2) {
+              newValue = userTheme.colors[key2];
+              break;
+            }
+          }
+          return newValue;
+        };
+      } else {
+        converter = (v) => v;
+      }
+      const responsiveStyles = applyResponsiveStyles(
+        property,
+        cssValue,
+        converter
+      );
       base += responsiveStyles.base;
@@ -228,8 +248,13 @@ for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
   justify: "justify-content",
+  alignContent: "align-content",
   alignItems: "align-items",
-  alignContent: "align-content",
-  flexWrap: "flex-wrap",
+  alignSelf: "align-self",
+  flex: "flex",
+  flexBasis: "flex-basis",
+  flexFlow: "flex-flow",
   flexGrow: "flex-grow",
   flexShrink: "flex-shrink",
-  flexBasis: "flex-basis",
+  flexWrap: "flex-wrap",
+  justifyItems: "justify-items",
+  justifySelf: "justify-self",
   gap: "gap"
@@ -244,3 +269,5 @@ };
       const property = flexMappings[key];
-      const converter = property === "gap" ? toCssUnit : void 0;
+      const converter = [flexMappings.flexBasis, flexMappings.gap].includes(
+        property
+      ) ? toCssUnit : void 0;
       const responsiveStyles = applyResponsiveStyles(
@@ -301,2 +328,37 @@ property,
 
+// src/outline.ts
+var outlineMappings = {
+  outline: "outline",
+  outlineOffset: "outline-offset",
+  outlineWidth: "outline-width",
+  outlineStyle: "outline-style"
+};
+var outline = (props) => {
+  let base = "";
+  const media = {};
+  for (const key in outlineMappings) {
+    const cssValue = props[key];
+    if (cssValue) {
+      const property = outlineMappings[key];
+      const converter = [
+        outlineMappings.outlineWidth,
+        outlineMappings.outlineOffset
+      ].includes(property) ? toCssUnit : void 0;
+      const responsiveStyles = applyResponsiveStyles(
+        property,
+        cssValue,
+        converter
+      );
+      base += responsiveStyles.base;
+      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
+        if (media[breakpoint])
+          media[breakpoint] += css;
+        else
+          media[breakpoint] = css;
+      }
+    }
+  }
+  return { base, media };
+};
+
 // src/position.ts
@@ -360,3 +422,3 @@ var positionMappings = {
 // src/compose.ts
-var import_sheet2 = require("@kuma-ui/sheet");
+var import_sheet3 = require("@kuma-ui/sheet");
 var compose = (...styleFunctions) => {
@@ -366,3 +428,3 @@ return (props) => {
     let outputProps = { ...props };
-    const cachedStyles = import_sheet2.styleCache.get(cacheKey);
+    const cachedStyles = import_sheet3.styleCache.get(cacheKey);
     if (cachedStyles) {
@@ -395,3 +457,3 @@ return cachedStyles;
     );
-    import_sheet2.styleCache.set(cacheKey, combinedStyles);
+    import_sheet3.styleCache.set(cacheKey, combinedStyles);
     return combinedStyles;
@@ -491,3 +553,5 @@ };
   transform: "transform",
-  transformOrigin: "transform-origin"
+  transformBox: "transform-box",
+  transformOrigin: "transform-origin",
+  transformStyle: "transform-style"
 };
@@ -514,2 +578,189 @@ var effect = (props) => {
 
+// src/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"
+};
+var text = (props) => {
+  let baseStyles = "";
+  const mediaStyles = {};
+  for (const key in textMappings) {
+    const cssValue = props[key];
+    if (cssValue) {
+      const property = textMappings[key];
+      const converter = [textMappings.textIndent].includes(property) ? toCssUnit : void 0;
+      const responsiveStyles = applyResponsiveStyles(
+        property,
+        cssValue,
+        converter
+      );
+      baseStyles += responsiveStyles.base;
+      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
+        if (mediaStyles[breakpoint])
+          mediaStyles[breakpoint] += css;
+        else
+          mediaStyles[breakpoint] = css;
+      }
+    }
+  }
+  return { base: baseStyles, media: mediaStyles };
+};
+
+// src/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"
+};
+var font = (props) => {
+  let baseStyles = "";
+  const mediaStyles = {};
+  for (const key in fontMappings) {
+    const cssValue = props[key];
+    if (cssValue) {
+      const property = fontMappings[key];
+      const converter = [fontMappings.fontSize].includes(property) ? toCssUnit : void 0;
+      const responsiveStyles = applyResponsiveStyles(
+        property,
+        cssValue,
+        converter
+      );
+      baseStyles += responsiveStyles.base;
+      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
+        if (mediaStyles[breakpoint])
+          mediaStyles[breakpoint] += css;
+        else
+          mediaStyles[breakpoint] = css;
+      }
+    }
+  }
+  return { base: baseStyles, media: mediaStyles };
+};
+
+// src/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"
+};
+var mask = (props) => {
+  let base = "";
+  const media = {};
+  for (const key in maskMappings) {
+    const cssValue = props[key];
+    if (cssValue) {
+      const property = maskMappings[key];
+      const converter = [maskMappings.maskSize].includes(property) ? toCssUnit : void 0;
+      const responsiveStyles = applyResponsiveStyles(
+        property,
+        cssValue,
+        converter
+      );
+      base += responsiveStyles.base;
+      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
+        if (media[breakpoint])
+          media[breakpoint] += css;
+        else
+          media[breakpoint] = css;
+      }
+    }
+  }
+  return { base, media };
+};
+
+// src/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"
+};
+var column = (props) => {
+  let base = "";
+  const media = {};
+  for (const key in columnMappings) {
+    const cssValue = props[key];
+    if (cssValue) {
+      const property = columnMappings[key];
+      const converter = [
+        columnMappings.columnGap,
+        columnMappings.columnWidth,
+        columnMappings.columnRuleWidth
+      ].includes(property) ? toCssUnit : void 0;
+      const responsiveStyles = applyResponsiveStyles(
+        property,
+        cssValue,
+        converter
+      );
+      base += responsiveStyles.base;
+      for (const [breakpoint, css] of Object.entries(responsiveStyles.media)) {
+        if (media[breakpoint])
+          media[breakpoint] += css;
+        else
+          media[breakpoint] = css;
+      }
+    }
+  }
+  return { base, media };
+};
+
 // src/keys.ts
@@ -533,10 +784,50 @@ var styleKeys = {
   ],
-  typography: [
+  typography: ["lineHeight", "letterSpacing"],
+  fontKeys: [
+    "font",
+    "fontFamily",
+    "fontFeatureSettings",
+    "fontKerning",
+    "fontLanguageOverride",
+    "fontOpticalSizing",
+    "fontPalette",
     "fontSize",
-    "fontWeight",
-    "lineHeight",
-    "letterSpacing",
+    "fontSizeAdjust",
+    "fontStretch",
+    "fontStyle",
+    "fontSynthesis",
+    "fontVariant",
+    "fontVariantAlternates",
+    "fontVariantCaps",
+    "fontVariantEastAsian",
+    "fontVariantEmoji",
+    "fontVariantLigatures",
+    "fontVariantNumeric",
+    "fontVariantPosition",
+    "fontVariationSettings",
+    "fontWeight"
+  ],
+  textKeys: [
     "textAlign",
-    "fontFamily",
-    "textDecoration"
+    "textAlignLast",
+    "textCombineUpright",
+    "textDecoration",
+    "textDecorationColor",
+    "textDecorationLine",
+    "textDecorationSkipInk",
+    "textDecorationStyle",
+    "textDecorationThickness",
+    "textEmphasis",
+    "textEmphasisColor",
+    "textEmphasisPosition",
+    "textEmphasisStyle",
+    "textIndent",
+    "textJustify",
+    "textOrientation",
+    "textOverflow",
+    "textRendering",
+    "textShadow",
+    "textTransform",
+    "textUnderlineOffset",
+    "textUnderlinePosition"
   ],
@@ -561,2 +852,5 @@ layout: [
     "alignContent",
+    "alignSelf",
+    "flex",
+    "flexFlow",
     "flexWrap",
@@ -566,5 +860,16 @@ "flexGrow",
     "flexBasis",
+    "justifyItems",
+    "justifySelf",
     "gap"
   ],
-  color: ["bg", "bgColor", "color", "borderColor", "opacity"],
+  color: [
+    "bg",
+    "bgColor",
+    "color",
+    "borderColor",
+    "outlineColor",
+    "accentColor",
+    "caretColor",
+    "opacity"
+  ],
   border: [
@@ -579,2 +884,8 @@ "borderWidth",
   ],
+  outline: [
+    "outline",
+    "outlineWidth",
+    "outlineStyle",
+    "outlineOffset"
+  ],
   position: ["top", "right", "bottom", "left", "inset"],
@@ -608,2 +919,14 @@ shadow: ["textShadow", "boxShadow"],
   ],
+  column: [
+    "columnCount",
+    "columnFill",
+    "columnGap",
+    "columnRule",
+    "columnRuleColor",
+    "columnRuleStyle",
+    "columnRuleWidth",
+    "columnSpan",
+    "columnWidth",
+    "columns"
+  ],
   effect: [
@@ -616,6 +939,35 @@ "transition",
     "transform",
-    "transformOrigin"
+    "transformBox",
+    "transformOrigin",
+    "transformStyle"
+  ],
+  mask: [
+    "mask",
+    "maskBorder",
+    "maskBorderMode",
+    "maskBorderOutset",
+    "maskBorderRepeat",
+    "maskBorderSlice",
+    "maskBorderSource",
+    "maskBorderWidth",
+    "maskClip",
+    "maskComposite",
+    "maskImage",
+    "maskMode",
+    "maskOrigin",
+    "maskPosition",
+    "maskRepeat",
+    "maskSize",
+    "maskType"
   ]
 };
-var isStyledProp = (_prop) => {
+function memo(fn) {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return (arg) => {
+    if (cache[arg] === void 0)
+      cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var isStyledProp = memo((_prop) => {
   const prop = _prop;
@@ -625,2 +977,68 @@ return Object.values(styleKeys).some(
   );
+});
+
+// src/generator.ts
+var import_sheet4 = require("@kuma-ui/sheet");
+var StyleGenerator = class {
+  style;
+  className;
+  constructor(props, isDynamic = false) {
+    if (!props || Object.keys(props).length === 0) {
+      this.className = "";
+      return;
+    }
+    const styledProps = {};
+    const pseudoProps = {};
+    for (const [propName, propValue] of Object.entries(props)) {
+      if (isStyledProp(propName.trim())) {
+        styledProps[propName.trim()] = propValue;
+      } else if (isPseudoProps(propName.trim())) {
+        pseudoProps[propName.trim()] = propValue;
+      }
+    }
+    const convertedPseudoProps = Object.keys(pseudoProps).length ? Object.entries(pseudoProps).map(([pseudoKey, pseudoValue]) => {
+      const pseudoStyle = all(pseudoValue);
+      return {
+        key: normalizePseudo(pseudoKey),
+        base: pseudoStyle.base,
+        responsive: pseudoStyle.media
+      };
+    }) : [];
+    this.style = {
+      base: all(styledProps).base,
+      responsive: all(styledProps).media,
+      pseudo: convertedPseudoProps
+    };
+    this.className = StyleGenerator.getClassNamePrefix(isDynamic) + (0, import_sheet4.generateHash)(JSON.stringify(this.style));
+  }
+  static getClassNamePrefix(isDynamic = false) {
+    const isProduction = process.env.NODE_ENV === "production";
+    if (isProduction)
+      return "kuma-";
+    return isDynamic ? "\u{1F984}-" : "\u{1F43B}-";
+  }
+  getClassName() {
+    return this.className;
+  }
+  getCSS() {
+    if (!this.style) {
+      return "";
+    }
+    let css = `.${this.className} { ${this.style.base} }`;
+    for (const [breakpoint, cssValue] of Object.entries(
+      this.style.responsive
+    )) {
+      css += `@media (min-width: ${breakpoint}) { .${this.className} { ${cssValue} } }`;
+    }
+    for (const pseudo of this.style.pseudo) {
+      css += `.${this.className}${pseudo.key} { ${pseudo.base} }`;
+      for (const [breakpoint, cssValue] of Object.entries(pseudo.responsive)) {
+        css += `@media (min-width: ${breakpoint}) { .${this.className}${pseudo.key} { ${cssValue} } }`;
+      }
+    }
+    return css;
+  }
+  getStyle() {
+    return { css: this.getCSS(), className: this.getClassName() };
+  }
 };
@@ -636,2 +1054,3 @@
   border,
+  outline,
   position,
@@ -641,10 +1060,16 @@ shadow,
   list,
-  effect
+  column,
+  effect,
+  text,
+  font,
+  mask
 );
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  StyleGenerator,
   all,
   isPseudoProps,
   isStyledProp,
-  normalizePseudo
+  normalizePseudo,
+  toCssUnit
 });

dist/keys.d.ts

 declare const styleKeys: {
     space: readonly ["m", "mt", "mb", "ml", "mr", "mx", "my", "p", "pt", "pb", "pl", "pr", "px", "py"];
-    typography: readonly ["fontSize", "fontWeight", "lineHeight", "letterSpacing", "textAlign", "fontFamily", "textDecoration"];
+    typography: readonly ["lineHeight", "letterSpacing"];
+    fontKeys: readonly ["font", "fontFamily", "fontFeatureSettings", "fontKerning", "fontLanguageOverride", "fontOpticalSizing", "fontPalette", "fontSize", "fontSizeAdjust", "fontStretch", "fontStyle", "fontSynthesis", "fontVariant", "fontVariantAlternates", "fontVariantCaps", "fontVariantEastAsian", "fontVariantEmoji", "fontVariantLigatures", "fontVariantNumeric", "fontVariantPosition", "fontVariationSettings", "fontWeight"];
+    textKeys: readonly ["textAlign", "textAlignLast", "textCombineUpright", "textDecoration", "textDecorationColor", "textDecorationLine", "textDecorationSkipInk", "textDecorationStyle", "textDecorationThickness", "textEmphasis", "textEmphasisColor", "textEmphasisPosition", "textEmphasisStyle", "textIndent", "textJustify", "textOrientation", "textOverflow", "textRendering", "textShadow", "textTransform", "textUnderlineOffset", "textUnderlinePosition"];
     layout: readonly ["width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "display", "overflow", "position", "zIndex", "cursor"];
-    flex: readonly ["flexDir", "justify", "alignItems", "alignContent", "flexWrap", "flexGrow", "flexShrink", "flexBasis", "gap"];
-    color: readonly ["bg", "bgColor", "color", "borderColor", "opacity"];
+    flex: readonly ["flexDir", "justify", "alignItems", "alignContent", "alignSelf", "flex", "flexFlow", "flexWrap", "flexGrow", "flexShrink", "flexBasis", "justifyItems", "justifySelf", "gap"];
+    color: readonly ["bg", "bgColor", "color", "borderColor", "outlineColor", "accentColor", "caretColor", "opacity"];
     border: readonly ["borderWidth", "borderStyle", "borderRadius", "borderTop", "borderRight", "borderBottom", "borderLeft"];
+    outline: readonly ["outline", "outlineWidth", "outlineStyle", "outlineOffset"];
     position: readonly ["top", "right", "bottom", "left", "inset"];
@@ -12,6 +15,10 @@ shadow: readonly ["textShadow", "boxShadow"];
     grid: readonly ["grid", "gridArea", "gridAutoColumns", "gridAutoFlow", "gridAutoRows", "gridColumn", "gridColumnEnd", "gridColumnStart", "gridRow", "gridRowEnd", "gridRowStart", "gridTemplate", "gridTemplateAreas", "gridTemplateColumns", "gridTemplateRows", "gridGap", "gridColumnGap", "gridRowGap"];
-    effect: readonly ["transition", "transitionDuration", "transitionProperty", "transitionTimingFunction", "transitionDelay", "transform", "transformOrigin"];
+    column: readonly ["columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns"];
+    effect: readonly ["transition", "transitionDuration", "transitionProperty", "transitionTimingFunction", "transitionDelay", "transform", "transformBox", "transformOrigin", "transformStyle"];
+    mask: readonly ["mask", "maskBorder", "maskBorderMode", "maskBorderOutset", "maskBorderRepeat", "maskBorderSlice", "maskBorderSource", "maskBorderWidth", "maskClip", "maskComposite", "maskImage", "maskMode", "maskOrigin", "maskPosition", "maskRepeat", "maskSize", "maskType"];
 };
 type SpaceKeys = (typeof styleKeys.space)[number];
 type TypographyKeys = (typeof styleKeys.typography)[number];
+type FontKeys = (typeof styleKeys.fontKeys)[number];
+type TextKeys = (typeof styleKeys.textKeys)[number];
 type LayoutKeys = (typeof styleKeys.layout)[number];
@@ -21,2 +28,3 @@ type ColorKeys = (typeof styleKeys.color)[number];
 type BorderKeys = (typeof styleKeys.border)[number];
+type OutlineKeys = (typeof styleKeys.outline)[number];
 type PositionKeys = (typeof styleKeys.position)[number];
@@ -26,6 +34,8 @@ type ShadowKeys = (typeof styleKeys.shadow)[number];
 type GridKeys = (typeof styleKeys.grid)[number];
+type ColumnKeys = (typeof styleKeys.column)[number];
 type EffectKeys = (typeof styleKeys.effect)[number];
-type StyledKeyType = SpaceKeys | TypographyKeys | LayoutKeys | ColorKeys | FlexKeys | BorderKeys | PositionKeys | ShadowKeys | ListKeys | GridKeys | EffectKeys;
-declare const isStyledProp: (_prop: string) => _prop is StyledKeyType;
+type MaskKeys = (typeof styleKeys.mask)[number];
+type StyledKeyType = SpaceKeys | TypographyKeys | LayoutKeys | ColorKeys | FlexKeys | BorderKeys | OutlineKeys | PositionKeys | ShadowKeys | ListKeys | GridKeys | MaskKeys | ColumnKeys | EffectKeys;
+declare const isStyledProp: (value: string) => boolean;
 
-export { BorderKeys, ColorKeys, EffectKeys, FlexKeys, GridKeys, LayoutKeys, ListKeys, PositionKeys, ShadowKeys, SpaceKeys, StyledKeyType, TypographyKeys, isStyledProp, styleKeys };
+export { BorderKeys, ColorKeys, ColumnKeys, EffectKeys, FlexKeys, FontKeys, GridKeys, LayoutKeys, ListKeys, MaskKeys, OutlineKeys, PositionKeys, ShadowKeys, SpaceKeys, StyledKeyType, TextKeys, TypographyKeys, isStyledProp, styleKeys };

dist/keys.js

@@ -44,10 +44,50 @@ "use strict";
   ],
-  typography: [
+  typography: ["lineHeight", "letterSpacing"],
+  fontKeys: [
+    "font",
+    "fontFamily",
+    "fontFeatureSettings",
+    "fontKerning",
+    "fontLanguageOverride",
+    "fontOpticalSizing",
+    "fontPalette",
     "fontSize",
-    "fontWeight",
-    "lineHeight",
-    "letterSpacing",
+    "fontSizeAdjust",
+    "fontStretch",
+    "fontStyle",
+    "fontSynthesis",
+    "fontVariant",
+    "fontVariantAlternates",
+    "fontVariantCaps",
+    "fontVariantEastAsian",
+    "fontVariantEmoji",
+    "fontVariantLigatures",
+    "fontVariantNumeric",
+    "fontVariantPosition",
+    "fontVariationSettings",
+    "fontWeight"
+  ],
+  textKeys: [
     "textAlign",
-    "fontFamily",
-    "textDecoration"
+    "textAlignLast",
+    "textCombineUpright",
+    "textDecoration",
+    "textDecorationColor",
+    "textDecorationLine",
+    "textDecorationSkipInk",
+    "textDecorationStyle",
+    "textDecorationThickness",
+    "textEmphasis",
+    "textEmphasisColor",
+    "textEmphasisPosition",
+    "textEmphasisStyle",
+    "textIndent",
+    "textJustify",
+    "textOrientation",
+    "textOverflow",
+    "textRendering",
+    "textShadow",
+    "textTransform",
+    "textUnderlineOffset",
+    "textUnderlinePosition"
   ],
@@ -72,2 +112,5 @@ layout: [
     "alignContent",
+    "alignSelf",
+    "flex",
+    "flexFlow",
     "flexWrap",
@@ -77,5 +120,16 @@ "flexGrow",
     "flexBasis",
+    "justifyItems",
+    "justifySelf",
     "gap"
   ],
-  color: ["bg", "bgColor", "color", "borderColor", "opacity"],
+  color: [
+    "bg",
+    "bgColor",
+    "color",
+    "borderColor",
+    "outlineColor",
+    "accentColor",
+    "caretColor",
+    "opacity"
+  ],
   border: [
@@ -90,2 +144,8 @@ "borderWidth",
   ],
+  outline: [
+    "outline",
+    "outlineWidth",
+    "outlineStyle",
+    "outlineOffset"
+  ],
   position: ["top", "right", "bottom", "left", "inset"],
@@ -119,2 +179,14 @@ shadow: ["textShadow", "boxShadow"],
   ],
+  column: [
+    "columnCount",
+    "columnFill",
+    "columnGap",
+    "columnRule",
+    "columnRuleColor",
+    "columnRuleStyle",
+    "columnRuleWidth",
+    "columnSpan",
+    "columnWidth",
+    "columns"
+  ],
   effect: [
@@ -127,6 +199,35 @@ "transition",
     "transform",
-    "transformOrigin"
+    "transformBox",
+    "transformOrigin",
+    "transformStyle"
+  ],
+  mask: [
+    "mask",
+    "maskBorder",
+    "maskBorderMode",
+    "maskBorderOutset",
+    "maskBorderRepeat",
+    "maskBorderSlice",
+    "maskBorderSource",
+    "maskBorderWidth",
+    "maskClip",
+    "maskComposite",
+    "maskImage",
+    "maskMode",
+    "maskOrigin",
+    "maskPosition",
+    "maskRepeat",
+    "maskSize",
+    "maskType"
   ]
 };
-var isStyledProp = (_prop) => {
+function memo(fn) {
+  const cache = /* @__PURE__ */ Object.create(null);
+  return (arg) => {
+    if (cache[arg] === void 0)
+      cache[arg] = fn(arg);
+    return cache[arg];
+  };
+}
+var isStyledProp = memo((_prop) => {
   const prop = _prop;
@@ -136,3 +237,3 @@ return Object.values(styleKeys).some(
   );
-};
+});
 // Annotate the CommonJS export names for ESM import in node:
@@ -139,0 +240,0 @@ 0 && (module.exports = {

dist/layout.js

@@ -38,3 +38,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -41,0 +41,0 @@ if (Array.isArray(cssValues)) {

dist/list.js

@@ -30,3 +30,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -33,0 +33,0 @@ if (Array.isArray(cssValues)) {

dist/position.js

@@ -38,3 +38,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -41,0 +41,0 @@ if (Array.isArray(cssValues)) {

dist/pseudo.d.ts

 import { StyledProps } from './compose.js';
-import { ExcludeHyphen, RemoveColon } from './types.js';
+import { ThemeSystemType, ExcludeHyphen, RemoveColon } from './types.js';
 import { Pseudos } from 'csstype';
@@ -10,2 +10,3 @@ import './space.js';
 import './border.js';
+import './outline.js';
 import './position.js';
@@ -17,5 +18,9 @@ import './shadow.js';
 import './effect.js';
+import './text.js';
+import './font.js';
+import './mask.js';
+import './column.js';
 
-type PseudoProps = {
-    [key in `_${ExcludeHyphen<RemoveColon<Pseudos>>}`]?: StyledProps;
+type PseudoProps<T extends ThemeSystemType = ThemeSystemType> = {
+    [key in `_${ExcludeHyphen<RemoveColon<Pseudos>>}`]?: StyledProps<T>;
 };
@@ -22,0 +27,0 @@ declare const normalizePseudo: (props: string) => string;

dist/responsive.js

@@ -28,3 +28,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -31,0 +31,0 @@ if (Array.isArray(cssValues)) {

dist/shadow.js

@@ -30,3 +30,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -33,0 +33,0 @@ if (Array.isArray(cssValues)) {

dist/space.js

@@ -38,3 +38,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -41,0 +41,0 @@ if (Array.isArray(cssValues)) {

dist/types.d.ts

@@ -5,2 +5,6 @@ import * as CSS from 'csstype';
 type If<C extends boolean, T, F> = C extends true ? T : F;
+type _String = string & {};
+type ThemeSystemType = {
+    colors: _String;
+};
 type CSSProperty = Exclude<CSS.Properties[keyof CSS.Properties], undefined>;
@@ -20,3 +24,12 @@ type RemoveColon<T extends string> = T extends `${infer R}${infer R2}` ? R extends ":" ? RemoveColon<R2> : `${R}${R2}` : T;
 };
+type SystemStyle = {
+    base: ResponsiveStyle["base"];
+    responsive: ResponsiveStyle["media"];
+    pseudo: {
+        key: string;
+        base: ResponsiveStyle["base"];
+        responsive: ResponsiveStyle["media"];
+    }[];
+};
 
-export { CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, UtilityCSSMapping };
+export { CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, SystemStyle, ThemeSystemType, UtilityCSSMapping };

dist/typography.d.ts

@@ -5,5 +5,5 @@ import { CSSProperties, ResponsiveStyle } from './types.js';
 
-type TypographyProps = Partial<CSSProperties<"fontSize", true> & CSSProperties<"fontWeight"> & CSSProperties<"lineHeight", true> & CSSProperties<"letterSpacing", true> & CSSProperties<"textAlign"> & CSSProperties<"fontFamily"> & CSSProperties<"textDecoration">>;
+type TypographyProps = Partial<CSSProperties<"lineHeight", true> & CSSProperties<"letterSpacing", true>>;
 declare const typography: (props: TypographyProps) => ResponsiveStyle;
 
 export { TypographyProps, typography };

dist/typography.js

@@ -38,3 +38,3 @@ "use strict";
 var applyResponsiveStyles = (cssProperty, cssValues, convertFn = (value) => value) => {
-  const breakpoints = import_sheet.theme.getBreakpoints();
+  const { breakpoints } = import_sheet.theme.getUserTheme();
   const media = {};
@@ -55,9 +55,4 @@ if (Array.isArray(cssValues)) {
 var typographyMappings = {
-  fontSize: "font-size",
-  fontWeight: "font-weight",
   lineHeight: "line-height",
-  letterSpacing: "letter-spacing",
-  textAlign: "text-align",
-  fontFamily: "font-family",
-  textDecoration: "text-decoration"
+  letterSpacing: "letter-spacing"
 };
@@ -72,3 +67,2 @@ var typography = (props) => {
       const converter = [
-        typographyMappings.fontSize,
         typographyMappings.lineHeight,
@@ -75,0 +69,0 @@ typographyMappings.letterSpacing

package.json

 {
   "name": "@kuma-ui/system",
-  "version": "0.6.2",
+  "version": "0.7.0-next.1",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -26,3 +26,3 @@ "repository": {
     "csstype": "^3.1.2",
-    "@kuma-ui/sheet": "0.5.1"
+    "@kuma-ui/sheet": "0.6.0-next.1"
   },
@@ -29,0 +29,0 @@ "devDependencies": {

README.md

 <div align="center">
+
+  :construction: :rotating_light: **BIG NEWS!** :rotating_light: :construction:
+
+  We are taking Kuma UI to the next level. The ultimate CSS-in-JS solution is under development and we're aiming to drop the updates on **July 16th, 2023**. Until then, new releases will be paused. Stay tuned and get ready for the revolution 🐻‍❄️
+
   <img src="https://raw.githubusercontent.com/poteboy/kuma-ui/main/media/logo.webp" alt="Kuma UI logo" width="300" />
@@ -3,0 +8,0 @@ </div>

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

175744

increased by83.59%

Number of package files

98

increased by32.43%

Lines of code

5714

increased by91.62%

Number of lines in readme file

199

increased by2.58%

Worsened metrics

Number of low supply chain risk alerts

3

increased byInfinity%

Dependency changes

• + Added@kuma-ui/sheet@0.6.0-next.1(transitive)

• - Removed@kuma-ui/sheet@0.5.1(transitive)

• Updated@kuma-ui/sheet@0.6.0-next.1