@kuma-ui/system - npm Package Compare versions

Comparing version 0.0.0-dev-20231004101852 to 0.0.0-dev-20231017124104

dist/background.d.ts

@@ -6,3 +6,3 @@ import { BackgroundKeys } from './keys.js';
 
-type BackgroundProps<AutoPrefix extends string = string & {}> = Partial<AddProperty<CSSProperties<"backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundAttachment" | "backgroundClip" | "backgroundOrigin"> & CSSProperties<"backgroundPositionX" | "backgroundPositionY" | "backgroundSize", true> & {
+type BackgroundProps<AutoPrefix extends string = string & {}> = Partial<AddProperty<CSSProperties<"backgroundImage" | "backgroundPosition" | "backgroundRepeat" | "backgroundAttachment" | "backgroundClip" | "backgroundOrigin" | "backgroundBlendMode"> & CSSProperties<"backgroundPositionX" | "backgroundPositionY" | "backgroundSize", true> & {
     /**
@@ -44,2 +44,6 @@ * @see backgroundImage
     bgOrigin: CSSValue<"backgroundOrigin">;
+    /**
+     * @see backgroundBlendMode
+     */
+    bgBlendMode: CSSValue<"backgroundBlendMode">;
 }, AutoPrefix>>;
@@ -46,0 +50,0 @@ declare const backgroundMappings: Record<BackgroundKeys, string>;

dist/background.js

@@ -74,3 +74,5 @@ "use strict";
   backgroundOrigin: "background-origin",
-  bgOrigin: "background-origin"
+  bgOrigin: "background-origin",
+  backgroundBlendMode: "background-blend-mode",
+  bgBlendMode: "background-blend-mode"
 };
@@ -77,0 +79,0 @@ var background = (props) => {

dist/color.d.ts

@@ -15,3 +15,3 @@ import { ColorKeys } from './keys.js';
     bgColor: CSSValue<"backgroundColor">;
-} & CSSProperties<"background" | "backgroundColor" | "borderColor" | "outlineColor" | "color" | "accentColor" | "caretColor" | "opacity", false>, T["colors"]>>;
+} & CSSProperties<"background" | "backgroundColor" | "borderColor" | "outlineColor" | "color" | "accentColor" | "caretColor" | "opacity" | "visibility", false>, T["colors"]>>;
 declare const colorMappings: Record<ColorKeys, string>;
@@ -18,0 +18,0 @@ declare const color: (props: ColorProps) => ResponsiveStyle;

dist/color.js

@@ -58,3 +58,4 @@ "use strict";
   caretColor: "caret-color",
-  opacity: "opacity"
+  opacity: "opacity",
+  visibility: "visibility"
 };
@@ -61,0 +62,0 @@ var color = (props) => {

dist/compose.d.ts

@@ -20,2 +20,3 @@ import { AnimationProps } from './animation.js';
 import { BackgroundProps } from './background.js';
+import { FilterProps } from './filter.js';
 import './keys.js';
@@ -25,3 +26,3 @@ import 'csstype';
 
-type StyledProps<T extends ThemeSystemType = ThemeSystemType> = TypographyProps<T> & FontProps<T> & ColorProps<T> & SpaceProps<T> & AnimationProps & TextProps & LayoutProps<T> & FlexProps<T> & BorderProps<T> & OutlineProps & PositionProps & ShadowProps & GridProps<T> & ListProps & EffectProps & MaskProps & ColumnProps<T> & BackgroundProps & EffectProps;
+type StyledProps<T extends ThemeSystemType = ThemeSystemType> = TypographyProps<T> & FontProps<T> & ColorProps<T> & SpaceProps<T> & AnimationProps & TextProps & LayoutProps<T> & FlexProps<T> & BorderProps<T> & OutlineProps & PositionProps & ShadowProps & GridProps<T> & ListProps & EffectProps & MaskProps & ColumnProps<T> & BackgroundProps & EffectProps & FilterProps;
 type StyleFunction = (props: StyledProps) => ResponsiveStyle;
@@ -28,0 +29,0 @@ /**

dist/compose.js

@@ -107,5 +107,16 @@ "use strict";
   overflow: "overflow",
+  overflowX: "overflow-x",
+  overflowY: "overflow-y",
   position: "position",
   zIndex: "z-index",
-  cursor: "cursor"
+  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"
 };
@@ -124,3 +135,4 @@
   caretColor: "caret-color",
-  opacity: "opacity"
+  opacity: "opacity",
+  visibility: "visibility"
 };
@@ -145,3 +157,5 @@
   justifySelf: "justify-self",
-  gap: "gap"
+  gap: "gap",
+  placeItems: "place-items",
+  placeContent: "place-content"
 };
@@ -249,3 +263,4 @@
   transformOrigin: "transform-origin",
-  transformStyle: "transform-style"
+  transformStyle: "transform-style",
+  clipPath: "clip-path"
 };
@@ -359,5 +374,13 @@
   backgroundOrigin: "background-origin",
-  bgOrigin: "background-origin"
+  bgOrigin: "background-origin",
+  backgroundBlendMode: "background-blend-mode",
+  bgBlendMode: "background-blend-mode"
 };
 
+// src/filter.ts
+var filterMappings = {
+  filter: "filter",
+  backdropFilter: "backdrop-filter"
+};
+
 // src/compose.ts
@@ -383,3 +406,4 @@ var styleMappings = Object.assign(
   columnMappings,
-  backgroundMappings
+  backgroundMappings,
+  filterMappings
 );
@@ -386,0 +410,0 @@ var compose = (...styleFunctions) => {

dist/effect.d.ts

@@ -6,3 +6,3 @@ import { EffectKeys } from './keys.js';
 
-type EffectProps = Partial<CSSProperties<"transition" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "transitionDelay" | "transform" | "transformBox" | "transformOrigin" | "transformStyle">>;
+type EffectProps = Partial<CSSProperties<"transition" | "transitionDuration" | "transitionProperty" | "transitionTimingFunction" | "transitionDelay" | "transform" | "transformBox" | "transformOrigin" | "transformStyle" | "clipPath">>;
 declare const effectMappings: Record<EffectKeys, string>;
@@ -9,0 +9,0 @@ declare const effect: (props: EffectProps) => ResponsiveStyle;

dist/effect.js

@@ -57,3 +57,4 @@ "use strict";
   transformOrigin: "transform-origin",
-  transformStyle: "transform-style"
+  transformStyle: "transform-style",
+  clipPath: "clip-path"
 };
@@ -60,0 +61,0 @@ var effect = (props) => {

dist/flex.d.ts

@@ -16,3 +16,3 @@ import { FlexKeys } from './keys.js';
     justify: CSSValue<"justifyContent">;
-} & CSSProperties<"alignContent" | "alignItems" | "alignSelf"> & CSSProperties<"flexWrap" | "flexFlow" | "flexDirection"> & CSSProperties<"flexBasis", true> & CSSProperties<"flex" | "flexShrink" | "flexGrow", true> & CSSProperties<"justifyItems" | "justifySelf" | "justifyContent"> & AddProperty<CSSProperties<"gap", true>, T["spacings"]>>;
+} & CSSProperties<"alignContent" | "alignItems" | "alignSelf"> & CSSProperties<"flexWrap" | "flexFlow" | "flexDirection"> & CSSProperties<"flexBasis", true> & CSSProperties<"flex" | "flexShrink" | "flexGrow", true> & CSSProperties<"justifyItems" | "justifySelf" | "justifyContent"> & CSSProperties<"placeItems" | "placeContent"> & AddProperty<CSSProperties<"gap", true>, T["spacings"]>>;
 declare const flexMappings: Record<FlexKeys, string>;
@@ -19,0 +19,0 @@ declare const flex: (props: FlexProps) => ResponsiveStyle;

dist/flex.js

@@ -72,3 +72,5 @@ "use strict";
   justifySelf: "justify-self",
-  gap: "gap"
+  gap: "gap",
+  placeItems: "place-items",
+  placeContent: "place-content"
 };
@@ -75,0 +77,0 @@ var converters = {

dist/generator.d.ts

@@ -25,2 +25,3 @@ import { StyledProps } from './compose.js';
 import './background.js';
+import './filter.js';
 
@@ -27,0 +28,0 @@ declare class StyleGenerator {

dist/generator.js

@@ -148,5 +148,16 @@ "use strict";
     "overflow",
+    "overflowX",
+    "overflowY",
     "position",
     "zIndex",
-    "cursor"
+    "cursor",
+    "userSelect",
+    "aspectRatio",
+    "boxSizing",
+    "float",
+    "clear",
+    "objectFit",
+    "objectPosition",
+    "resize",
+    "verticalAlign"
   ],
@@ -169,2 +180,4 @@ flex: [
     "justifySelf",
+    "placeItems",
+    "placeContent",
     "gap"
@@ -182,3 +195,4 @@ ],
     "caretColor",
-    "opacity"
+    "opacity",
+    "visibility"
   ],
@@ -272,3 +286,4 @@ border: [
     "transformOrigin",
-    "transformStyle"
+    "transformStyle",
+    "clipPath"
   ],
@@ -312,4 +327,7 @@ mask: [
     "backgroundOrigin",
-    "bgOrigin"
-  ]
+    "bgOrigin",
+    "backgroundBlendMode",
+    "bgBlendMode"
+  ],
+  filter: ["filter", "backdropFilter"]
 };
@@ -526,5 +544,16 @@ function memo(fn) {
   overflow: "overflow",
+  overflowX: "overflow-x",
+  overflowY: "overflow-y",
   position: "position",
   zIndex: "z-index",
-  cursor: "cursor"
+  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"
 };
@@ -576,3 +605,4 @@ var converters = {
   caretColor: "caret-color",
-  opacity: "opacity"
+  opacity: "opacity",
+  visibility: "visibility"
 };
@@ -616,3 +646,5 @@ var color = (props) => {
   justifySelf: "justify-self",
-  gap: "gap"
+  gap: "gap",
+  placeItems: "place-items",
+  placeContent: "place-content"
 };
@@ -918,3 +950,4 @@ var converters2 = {
   transformOrigin: "transform-origin",
-  transformStyle: "transform-style"
+  transformStyle: "transform-style",
+  clipPath: "clip-path"
 };
@@ -1153,3 +1186,5 @@ var effect = (props) => {
   backgroundOrigin: "background-origin",
-  bgOrigin: "background-origin"
+  bgOrigin: "background-origin",
+  backgroundBlendMode: "background-blend-mode",
+  bgBlendMode: "background-blend-mode"
 };
@@ -1185,2 +1220,27 @@ var background = (props) => {
 
+// src/filter.ts
+var filterMappings = {
+  filter: "filter",
+  backdropFilter: "backdrop-filter"
+};
+var filter = (props) => {
+  let base = "";
+  const media = {};
+  for (const key in filterMappings) {
+    const cssValue = props[key];
+    if (cssValue != void 0) {
+      const property = filterMappings[key];
+      const responsiveStyles = applyResponsiveStyles(property, cssValue);
+      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/compose.ts
@@ -1206,3 +1266,4 @@ var styleMappings = Object.assign(
   columnMappings,
-  backgroundMappings
+  backgroundMappings,
+  filterMappings
 );
@@ -1265,3 +1326,4 @@ var compose = (...styleFunctions) => {
   mask,
-  background
+  background,
+  filter
 );
@@ -1268,0 +1330,0 @@

dist/index.d.ts

@@ -23,2 +23,3 @@ import { StyleFunction } from './compose.js';
 export { BackgroundProps } from './background.js';
+export { FilterProps } from './filter.js';
 export { StyledKeyType, isStyledProp } from './keys.js';
@@ -25,0 +26,0 @@ export { StyleGenerator } from './generator.js';

dist/index.js

@@ -219,5 +219,16 @@ "use strict";
   overflow: "overflow",
+  overflowX: "overflow-x",
+  overflowY: "overflow-y",
   position: "position",
   zIndex: "z-index",
-  cursor: "cursor"
+  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"
 };
@@ -269,3 +280,4 @@ var converters = {
   caretColor: "caret-color",
-  opacity: "opacity"
+  opacity: "opacity",
+  visibility: "visibility"
 };
@@ -309,3 +321,5 @@ var color = (props) => {
   justifySelf: "justify-self",
-  gap: "gap"
+  gap: "gap",
+  placeItems: "place-items",
+  placeContent: "place-content"
 };
@@ -611,3 +625,4 @@ var converters2 = {
   transformOrigin: "transform-origin",
-  transformStyle: "transform-style"
+  transformStyle: "transform-style",
+  clipPath: "clip-path"
 };
@@ -846,3 +861,5 @@ var effect = (props) => {
   backgroundOrigin: "background-origin",
-  bgOrigin: "background-origin"
+  bgOrigin: "background-origin",
+  backgroundBlendMode: "background-blend-mode",
+  bgBlendMode: "background-blend-mode"
 };
@@ -878,2 +895,27 @@ var background = (props) => {
 
+// src/filter.ts
+var filterMappings = {
+  filter: "filter",
+  backdropFilter: "backdrop-filter"
+};
+var filter = (props) => {
+  let base = "";
+  const media = {};
+  for (const key in filterMappings) {
+    const cssValue = props[key];
+    if (cssValue != void 0) {
+      const property = filterMappings[key];
+      const responsiveStyles = applyResponsiveStyles(property, cssValue);
+      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/compose.ts
@@ -899,3 +941,4 @@ var styleMappings = Object.assign(
   columnMappings,
-  backgroundMappings
+  backgroundMappings,
+  filterMappings
 );
@@ -1067,5 +1110,16 @@ var compose = (...styleFunctions) => {
     "overflow",
+    "overflowX",
+    "overflowY",
     "position",
     "zIndex",
-    "cursor"
+    "cursor",
+    "userSelect",
+    "aspectRatio",
+    "boxSizing",
+    "float",
+    "clear",
+    "objectFit",
+    "objectPosition",
+    "resize",
+    "verticalAlign"
   ],
@@ -1088,2 +1142,4 @@ flex: [
     "justifySelf",
+    "placeItems",
+    "placeContent",
     "gap"
@@ -1101,3 +1157,4 @@ ],
     "caretColor",
-    "opacity"
+    "opacity",
+    "visibility"
   ],
@@ -1191,3 +1248,4 @@ border: [
     "transformOrigin",
-    "transformStyle"
+    "transformStyle",
+    "clipPath"
   ],
@@ -1231,4 +1289,7 @@ mask: [
     "backgroundOrigin",
-    "bgOrigin"
-  ]
+    "bgOrigin",
+    "backgroundBlendMode",
+    "bgBlendMode"
+  ],
+  filter: ["filter", "backdropFilter"]
 };
@@ -1362,3 +1423,4 @@ function memo(fn) {
   mask,
-  background
+  background,
+  filter
 );
@@ -1365,0 +1427,0 @@ // Annotate the CommonJS export names for ESM import in node:

dist/keys.d.ts

@@ -7,5 +7,5 @@ declare const styleKeys: {
     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 ["flexDirection", "flexDir", "justifyContent", "justify", "alignItems", "alignContent", "alignSelf", "flex", "flexFlow", "flexWrap", "flexGrow", "flexShrink", "flexBasis", "justifyItems", "justifySelf", "gap"];
-    color: readonly ["background", "bg", "backgroundColor", "bgColor", "color", "borderColor", "outlineColor", "accentColor", "caretColor", "opacity"];
+    layout: readonly ["width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "display", "overflow", "overflowX", "overflowY", "position", "zIndex", "cursor", "userSelect", "aspectRatio", "boxSizing", "float", "clear", "objectFit", "objectPosition", "resize", "verticalAlign"];
+    flex: readonly ["flexDirection", "flexDir", "justifyContent", "justify", "alignItems", "alignContent", "alignSelf", "flex", "flexFlow", "flexWrap", "flexGrow", "flexShrink", "flexBasis", "justifyItems", "justifySelf", "placeItems", "placeContent", "gap"];
+    color: readonly ["background", "bg", "backgroundColor", "bgColor", "color", "borderColor", "outlineColor", "accentColor", "caretColor", "opacity", "visibility"];
     border: readonly ["border", "borderWidth", "borderTopWidth", "borderBottomWidth", "borderLeftWidth", "borderRightWidth", "borderStyle", "borderTopStyle", "borderBottomStyle", "borderLeftStyle", "borderRightStyle", "borderRadius", "borderTopLeftRadius", "borderTopRightRadius", "borderBottomLeftRadius", "borderBottomRightRadius", "borderTop", "borderRight", "borderBottom", "borderLeft", "borderX", "borderY", "borderStart", "borderEnd", "borderStartWidth", "borderEndWidth", "borderStartStyle", "borderEndStyle", "borderStartRadius", "borderEndRadius"];
@@ -18,5 +18,6 @@ outline: readonly ["outline", "outlineWidth", "outlineStyle", "outlineOffset"];
     column: readonly ["columnCount", "columnFill", "columnGap", "columnRule", "columnRuleColor", "columnRuleStyle", "columnRuleWidth", "columnSpan", "columnWidth", "columns"];
-    effect: readonly ["transition", "transitionDuration", "transitionProperty", "transitionTimingFunction", "transitionDelay", "transform", "transformBox", "transformOrigin", "transformStyle"];
+    effect: readonly ["transition", "transitionDuration", "transitionProperty", "transitionTimingFunction", "transitionDelay", "transform", "transformBox", "transformOrigin", "transformStyle", "clipPath"];
     mask: readonly ["mask", "maskBorder", "maskBorderMode", "maskBorderOutset", "maskBorderRepeat", "maskBorderSlice", "maskBorderSource", "maskBorderWidth", "maskClip", "maskComposite", "maskImage", "maskMode", "maskOrigin", "maskPosition", "maskRepeat", "maskSize", "maskType"];
-    background: readonly ["backgroundImage", "bgImage", "backgroundPosition", "bgPosition", "backgroundPositionX", "bgPositionX", "backgroundPositionY", "bgPositionY", "backgroundSize", "bgSize", "backgroundRepeat", "bgRepeat", "backgroundAttachment", "bgAttachment", "backgroundClip", "bgClip", "backgroundOrigin", "bgOrigin"];
+    background: readonly ["backgroundImage", "bgImage", "backgroundPosition", "bgPosition", "backgroundPositionX", "bgPositionX", "backgroundPositionY", "bgPositionY", "backgroundSize", "bgSize", "backgroundRepeat", "bgRepeat", "backgroundAttachment", "bgAttachment", "backgroundClip", "bgClip", "backgroundOrigin", "bgOrigin", "backgroundBlendMode", "bgBlendMode"];
+    filter: readonly ["filter", "backdropFilter"];
 };
@@ -41,5 +42,6 @@ type AnimationKeys = (typeof styleKeys.animation)[number];
 type BackgroundKeys = (typeof styleKeys.background)[number];
-type StyledKeyType = AnimationKeys | SpaceKeys | TypographyKeys | FontKeys | TextKeys | LayoutKeys | ColorKeys | FlexKeys | BorderKeys | OutlineKeys | PositionKeys | ShadowKeys | ListKeys | GridKeys | BackgroundKeys | MaskKeys | ColumnKeys | EffectKeys;
+type FilterKeys = (typeof styleKeys.filter)[number];
+type StyledKeyType = AnimationKeys | SpaceKeys | TypographyKeys | FontKeys | TextKeys | LayoutKeys | ColorKeys | FlexKeys | BorderKeys | OutlineKeys | PositionKeys | ShadowKeys | ListKeys | GridKeys | BackgroundKeys | MaskKeys | ColumnKeys | EffectKeys | FilterKeys;
 declare const isStyledProp: (value: string) => boolean;
 
-export { AnimationKeys, BackgroundKeys, BorderKeys, ColorKeys, ColumnKeys, EffectKeys, FlexKeys, FontKeys, GridKeys, LayoutKeys, ListKeys, MaskKeys, OutlineKeys, PositionKeys, ShadowKeys, SpaceKeys, StyledKeyType, TextKeys, TypographyKeys, isStyledProp, styleKeys };
+export { AnimationKeys, BackgroundKeys, BorderKeys, ColorKeys, ColumnKeys, EffectKeys, FilterKeys, FlexKeys, FontKeys, GridKeys, LayoutKeys, ListKeys, MaskKeys, OutlineKeys, PositionKeys, ShadowKeys, SpaceKeys, StyledKeyType, TextKeys, TypographyKeys, isStyledProp, styleKeys };

dist/keys.js

@@ -146,5 +146,16 @@ "use strict";
     "overflow",
+    "overflowX",
+    "overflowY",
     "position",
     "zIndex",
-    "cursor"
+    "cursor",
+    "userSelect",
+    "aspectRatio",
+    "boxSizing",
+    "float",
+    "clear",
+    "objectFit",
+    "objectPosition",
+    "resize",
+    "verticalAlign"
   ],
@@ -167,2 +178,4 @@ flex: [
     "justifySelf",
+    "placeItems",
+    "placeContent",
     "gap"
@@ -180,3 +193,4 @@ ],
     "caretColor",
-    "opacity"
+    "opacity",
+    "visibility"
   ],
@@ -270,3 +284,4 @@ border: [
     "transformOrigin",
-    "transformStyle"
+    "transformStyle",
+    "clipPath"
   ],
@@ -310,4 +325,7 @@ mask: [
     "backgroundOrigin",
-    "bgOrigin"
-  ]
+    "bgOrigin",
+    "backgroundBlendMode",
+    "bgBlendMode"
+  ],
+  filter: ["filter", "backdropFilter"]
 };
@@ -314,0 +332,0 @@ function memo(fn) {

dist/layout.d.ts

@@ -6,3 +6,3 @@ import { LayoutKeys } from './keys.js';
 
-type LayoutProps<T extends ThemeSystemType = ThemeSystemType> = Partial<AddProperty<CSSProperties<"width" | "minWidth" | "maxWidth", true>, T["sizes"]> & AddProperty<CSSProperties<"height" | "minHeight" | "maxHeight", true>, T["sizes"]> & CSSProperties<"display" | "overflow" | "position"> & AddProperty<CSSProperties<"zIndex", true>, T["zIndices"]> & CSSProperties<"cursor">>;
+type LayoutProps<T extends ThemeSystemType = ThemeSystemType> = Partial<AddProperty<CSSProperties<"width" | "minWidth" | "maxWidth", true>, T["sizes"]> & AddProperty<CSSProperties<"height" | "minHeight" | "maxHeight", true>, T["sizes"]> & CSSProperties<"display" | "position"> & CSSProperties<"overflow" | "overflowX" | "overflowY"> & AddProperty<CSSProperties<"zIndex", true>, T["zIndices"]> & CSSProperties<"cursor" | "userSelect"> & CSSProperties<"aspectRatio"> & CSSProperties<"boxSizing"> & CSSProperties<"float" | "clear"> & CSSProperties<"objectFit" | "objectPosition"> & CSSProperties<"resize"> & CSSProperties<"verticalAlign">>;
 declare const layoutMappings: Record<LayoutKeys, string>;
@@ -9,0 +9,0 @@ declare const layout: (props: LayoutProps) => ResponsiveStyle;

dist/layout.js

@@ -65,5 +65,16 @@ "use strict";
   overflow: "overflow",
+  overflowX: "overflow-x",
+  overflowY: "overflow-y",
   position: "position",
   zIndex: "z-index",
-  cursor: "cursor"
+  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"
 };
@@ -70,0 +81,0 @@ var converters = {

dist/pseudo.d.ts

@@ -23,2 +23,3 @@ import { StyledProps } from './compose.js';
 import './background.js';
+import './filter.js';
 import '@kuma-ui/sheet';
@@ -25,0 +26,0 @@

package.json

 {
   "name": "@kuma-ui/system",
-  "version": "0.0.0-dev-20231004101852",
+  "version": "0.0.0-dev-20231017124104",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -5,0 +5,0 @@ "repository": {

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

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

244436

increased by4.43%

Number of package files

110

increased by3.77%

Lines of code

8091

increased by4.63%

No dependency changes