@kuma-ui/system - npm Package Compare versions

Comparing version 0.4.1 to 0.5.0

dist/color.d.ts

@@ -7,3 +7,3 @@ import { CSSValue, CSSProperties, ResponsiveStyle } from './types.js';
     /**
-     * @see backgroundColor
+     * @see background
      */
@@ -10,0 +10,0 @@ bg: CSSValue<"background">;

dist/color.js

@@ -47,3 +47,3 @@ "use strict";
   bg: "background",
-  bgColor: "ackground-color",
+  bgColor: "background-color",
   color: "color",
@@ -50,0 +50,0 @@ borderColor: "border-color",

dist/compose.d.ts

@@ -11,6 +11,8 @@ import { SpaceProps } from './space.js';
 import { GridProps } from './grid.js';
+import { ListProps } from './list.js';
+import { EffectProps } from './effect.js';
 import 'csstype';
 import './keys.js';
 
-type StyledProps = SpaceProps & TypographyProps & LayoutProps & ColorProps & FlexProps & BorderProps & PositionProps & ShadowProps & GridProps;
+type StyledProps = SpaceProps & TypographyProps & LayoutProps & ColorProps & FlexProps & BorderProps & PositionProps & ShadowProps & GridProps & ListProps & EffectProps;
 type StyleFunction = (props: StyledProps) => ResponsiveStyle;
@@ -17,0 +19,0 @@ /**

dist/index.d.ts

@@ -15,2 +15,4 @@ import { StyleFunction } from './compose.js';
 import './grid.js';
+import './list.js';
+import './effect.js';
 import 'csstype';
@@ -17,0 +19,0 @@

dist/index.js

@@ -154,3 +154,4 @@ "use strict";
   position: "position",
-  zIndex: "z-index"
+  zIndex: "z-index",
+  cursor: "cursor"
 };
@@ -192,3 +193,3 @@ var layout = (props) => {
   bg: "background",
-  bgColor: "ackground-color",
+  bgColor: "background-color",
   color: "color",
@@ -450,2 +451,59 @@ borderColor: "border-color",
 
+// src/list.ts
+var listMappings = {
+  listStyle: "list-style",
+  listStyleImage: "list-style-image",
+  listStylePosition: "list-style-position",
+  listStyleType: "list-style-type"
+};
+var list = (props) => {
+  let base = "";
+  const media = {};
+  for (const key in listMappings) {
+    const cssValue = props[key];
+    if (cssValue) {
+      const property = listMappings[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/effect.ts
+var effectMappings = {
+  transition: "transition",
+  transitionDuration: "transition-duration",
+  transitionProperty: "transition-property",
+  transitionTimingFunction: "transition-timing-function",
+  transitionDelay: "transition-delay",
+  transform: "transform",
+  transformOrigin: "transform-origin"
+};
+var effect = (props) => {
+  let base = "";
+  const media = {};
+  for (const key in effectMappings) {
+    const cssValue = props[key];
+    if (cssValue) {
+      const property = effectMappings[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/keys.ts
@@ -488,3 +546,4 @@ var styleKeys = {
     "position",
-    "zIndex"
+    "zIndex",
+    "cursor"
   ],
@@ -514,2 +573,8 @@ flex: [
   shadow: ["textShadow", "boxShadow"],
+  list: [
+    "listStyle",
+    "listStyleImage",
+    "listStylePosition",
+    "listStyleType"
+  ],
   grid: [
@@ -534,2 +599,11 @@ "grid",
     "gridRowGap"
+  ],
+  effect: [
+    "transition",
+    "transitionDuration",
+    "transitionProperty",
+    "transitionTimingFunction",
+    "transitionDelay",
+    "transform",
+    "transformOrigin"
   ]
@@ -554,3 +628,5 @@ };
   shadow,
-  grid
+  grid,
+  list,
+  effect
 );
@@ -557,0 +633,0 @@ // Annotate the CommonJS export names for ESM import in node:

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"];
-    layout: readonly ["width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "display", "overflow", "position", "zIndex"];
+    layout: readonly ["width", "minWidth", "maxWidth", "height", "minHeight", "maxHeight", "display", "overflow", "position", "zIndex", "cursor"];
     flex: readonly ["flexDir", "justify", "alignItems", "alignContent", "flexWrap", "flexGrow", "flexShrink", "flexBasis", "gap"];
@@ -10,3 +10,5 @@ color: readonly ["bg", "bgColor", "color", "borderColor", "opacity"];
     shadow: readonly ["textShadow", "boxShadow"];
+    list: readonly ["listStyle", "listStyleImage", "listStylePosition", "listStyleType"];
     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"];
 };
@@ -21,6 +23,8 @@ type SpaceKeys = (typeof styleKeys.space)[number];
 type ShadowKeys = (typeof styleKeys.shadow)[number];
+type ListKeys = (typeof styleKeys.list)[number];
 type GridKeys = (typeof styleKeys.grid)[number];
-type StyledKeyType = SpaceKeys | TypographyKeys | LayoutKeys | ColorKeys | FlexKeys | BorderKeys | PositionKeys | ShadowKeys | GridKeys;
+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;
 
-export { BorderKeys, ColorKeys, FlexKeys, GridKeys, LayoutKeys, PositionKeys, ShadowKeys, SpaceKeys, StyledKeyType, TypographyKeys, isStyledProp, styleKeys };
+export { BorderKeys, ColorKeys, EffectKeys, FlexKeys, GridKeys, LayoutKeys, ListKeys, PositionKeys, ShadowKeys, SpaceKeys, StyledKeyType, TypographyKeys, isStyledProp, styleKeys };

dist/keys.js

@@ -63,3 +63,4 @@ "use strict";
     "position",
-    "zIndex"
+    "zIndex",
+    "cursor"
   ],
@@ -89,2 +90,8 @@ flex: [
   shadow: ["textShadow", "boxShadow"],
+  list: [
+    "listStyle",
+    "listStyleImage",
+    "listStylePosition",
+    "listStyleType"
+  ],
   grid: [
@@ -109,2 +116,11 @@ "grid",
     "gridRowGap"
+  ],
+  effect: [
+    "transition",
+    "transitionDuration",
+    "transitionProperty",
+    "transitionTimingFunction",
+    "transitionDelay",
+    "transform",
+    "transformOrigin"
   ]
@@ -111,0 +127,0 @@ };

dist/layout.d.ts

@@ -5,5 +5,5 @@ import { CSSProperties, ResponsiveStyle } from './types.js';
 
-type LayoutProps = Partial<CSSProperties<"width" | "minWidth" | "maxWidth", true> & CSSProperties<"height" | "minHeight" | "maxHeight", true> & CSSProperties<"display" | "overflow" | "position"> & CSSProperties<"zIndex">>;
+type LayoutProps = Partial<CSSProperties<"width" | "minWidth" | "maxWidth", true> & CSSProperties<"height" | "minHeight" | "maxHeight", true> & CSSProperties<"display" | "overflow" | "position"> & CSSProperties<"zIndex", true> & CSSProperties<"cursor">>;
 declare const layout: (props: LayoutProps) => ResponsiveStyle;
 
 export { LayoutProps, layout };

dist/layout.js

@@ -63,3 +63,4 @@ "use strict";
   position: "position",
-  zIndex: "z-index"
+  zIndex: "z-index",
+  cursor: "cursor"
 };
@@ -66,0 +67,0 @@ var layout = (props) => {

dist/pseudo.d.ts

@@ -14,2 +14,4 @@ import { StyledProps } from './compose.js';
 import './grid.js';
+import './list.js';
+import './effect.js';
 
@@ -16,0 +18,0 @@ declare const pseudoMappings: {

package.json

 {
   "name": "@kuma-ui/system",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -17,2 +17,3 @@ "repository": {
   ],
+  "homepage": "https://www.kuma-ui.com",
   "main": "dist/index.js",
@@ -25,3 +26,4 @@ "module": "dist/index.mjs",
   "dependencies": {
-    "@kuma-ui/sheet": "0.1.1"
+    "csstype": "^3.1.2",
+    "@kuma-ui/sheet": "0.2.0"
   },
@@ -31,3 +33,2 @@ "devDependencies": {
     "@jest/types": "^29.1.0",
-    "csstype": "^3.1.2",
     "jest": "^29.1.0",
@@ -34,0 +35,0 @@ "@kuma-ui/jest-preset": "0.0.0"

Fixed alerts

No website

Quality

Package does not have a website.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

93796

13.38%

Dev dependency count

4

-20%

Number of package files

74

12.12%

Lines of code

3001

13.72%

Number of low quality alerts

1

-50%

Worsened metrics

Dependency count

2

100%

Dependency changes

• + Added

  csstype@^3.1.2

• + Added

  @kuma-ui/sheet@0.2.0
  (transitive)

• + Added

  csstype@3.1.3
  (transitive)

• - Removed

  @kuma-ui/sheet@0.1.1
  (transitive)

• Updated

  @kuma-ui/sheet@0.2.0