@kuma-ui/system - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

dist/border.d.ts

@@ -1,16 +0,8 @@
-import { CSSValue, ResponsiveStyle } from './types.js';
+import { CSSProperties, ResponsiveStyle } from './types.js';
 import 'csstype';
 import './keys.js';
 
-type BorderProps = Partial<{
-    borderTop: CSSValue<"borderTop">;
-    borderRight: CSSValue<"borderRight">;
-    borderLeft: CSSValue<"borderLeft">;
-    borderBottom: CSSValue<"borderBottom">;
-    borderRadius: CSSValue<"borderRadius", true>;
-    borderStyle: CSSValue<"borderStyle">;
-    borderWidth: CSSValue<"borderWidth", true>;
-}>;
+type BorderProps = Partial<CSSProperties<"borderTop" | "borderRight" | "borderLeft" | "borderBottom"> & CSSProperties<"borderStyle"> & CSSProperties<"borderRadius" | "borderWidth", true>>;
 declare const border: (props: BorderProps) => ResponsiveStyle;
 
 export { BorderProps, border };

dist/color.d.ts

@@ -1,2 +0,2 @@
-import { CSSValue, ResponsiveStyle } from './types.js';
+import { CSSValue, CSSProperties, ResponsiveStyle } from './types.js';
 import 'csstype';
@@ -6,8 +6,9 @@ import './keys.js';
 type ColorProps = Partial<{
+    /**
+     * @see backgroundColor
+     */
     bg: CSSValue<"backgroundColor">;
-    color: CSSValue<"color">;
-    borderColor: CSSValue<"borderColor">;
-}>;
+} & CSSProperties<"borderColor" | "color">>;
 declare const color: (props: ColorProps) => ResponsiveStyle;
 
 export { ColorProps, color };

dist/flex.d.ts

@@ -1,2 +0,2 @@
-import { CSSValue, ResponsiveStyle } from './types.js';
+import { CSSValue, CSSProperties, ResponsiveStyle } from './types.js';
 import 'csstype';
@@ -6,14 +6,14 @@ import './keys.js';
 type FlexProps = Partial<{
+    /**
+     * @see flexDirection
+     */
     flexDir: CSSValue<"flexDirection">;
+} & {
+    /**
+     * @see justifyContent
+     */
     justify: CSSValue<"justifyContent">;
-    alignItems: CSSValue<"alignItems">;
-    alignContent: CSSValue<"alignContent">;
-    flexWrap: CSSValue<"flexWrap">;
-    flexGrow: CSSValue<"flexGrow">;
-    flexShrink: CSSValue<"flexShrink">;
-    flexBasis: CSSValue<"flexBasis">;
-    gap: CSSValue<"gap">;
-}>;
+} & CSSProperties<"alignItems" | "alignContent"> & CSSProperties<"flexWrap" | "flexGrow"> & CSSProperties<"flexShrink" | "flexBasis"> & CSSProperties<"gap">>;
 declare const flex: (props: FlexProps) => ResponsiveStyle;
 
 export { FlexProps, flex };

dist/grid.d.ts

 import { GridKeys } from './keys.js';
-import { CSSValue, ResponsiveStyle } from './types.js';
+import { CSSProperties, ResponsiveStyle } from './types.js';
 import 'csstype';
@@ -7,5 +7,5 @@
 type UnitKeys = (typeof unitKeys)[number];
-type GridProps = Partial<Record<Exclude<GridKeys, UnitKeys>, CSSValue<GridKeys>>> & Partial<Record<UnitKeys, CSSValue<GridKeys, true>>>;
+type GridProps = Partial<CSSProperties<Exclude<GridKeys, UnitKeys>> & CSSProperties<UnitKeys, true>>;
 declare const grid: (props: GridProps) => ResponsiveStyle;
 
 export { GridProps, grid };

dist/index.d.ts

@@ -11,3 +11,3 @@ import { StyleFunction } from './compose.js';
 export { ShadowProps } from './shadow.js';
-export { CSSProperty, CSSValue, ResponsiveStyle, UtilityCSSMapping } from './types.js';
+export { CSSProperties, CSSProperty, CSSValue, ResponsiveStyle, UtilityCSSMapping } from './types.js';
 export { PseudoProps, isPseudoProps, pseudoMappings } from './pseudo.js';
@@ -14,0 +14,0 @@ export { StyledKeyType, isStyledProp } from './keys.js';

dist/layout.d.ts

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

dist/position.d.ts

@@ -1,14 +0,8 @@
-import { CSSValue, ResponsiveStyle } from './types.js';
+import { CSSProperties, ResponsiveStyle } from './types.js';
 import 'csstype';
 import './keys.js';
 
-type PositionProps = Partial<{
-    top: CSSValue<"top", true>;
-    right: CSSValue<"right", true>;
-    left: CSSValue<"left", true>;
-    bottom: CSSValue<"bottom", true>;
-    inset: CSSValue<"inset", true>;
-}>;
+type PositionProps = Partial<CSSProperties<"top" | "right" | "left" | "bottom" | "inset", true>>;
 declare const position: (props: PositionProps) => ResponsiveStyle;
 
 export { PositionProps, position };

dist/shadow.d.ts

@@ -1,11 +0,8 @@
-import { CSSValue, ResponsiveStyle } from './types.js';
+import { CSSProperties, ResponsiveStyle } from './types.js';
 import 'csstype';
 import './keys.js';
 
-type ShadowProps = Partial<{
-    boxShadow: CSSValue<"boxShadow">;
-    textShadow: CSSValue<"textShadow">;
-}>;
+type ShadowProps = Partial<CSSProperties<"boxShadow" | "textShadow">>;
 declare const shadow: (props: ShadowProps) => ResponsiveStyle;
 
 export { ShadowProps, shadow };

dist/space.d.ts

@@ -6,15 +6,61 @@ import { CSSValue, ResponsiveStyle } from './types.js';
 type SpaceProps = Partial<{
+    /**
+     * @see margin
+     */
     m: CSSValue<"margin", true>;
+    /**
+   * @see marginTop
+   */
     mt: CSSValue<"marginTop", true>;
+    /**
+   * @see marginRight
+   */
     mr: CSSValue<"marginRight", true>;
+    /**
+   * @see marginBottom
+   */
     mb: CSSValue<"marginBottom", true>;
+    /**
+   * @see marginLeft
+   */
     ml: CSSValue<"marginLeft", true>;
+    /**
+   * @see marginLeft
+   * @see marginRight
+   */
     mx: CSSValue<"marginLeft" | "marginRight", true>;
+    /**
+   * @see marginTop
+   * @see marginBottom
+   */
     my: CSSValue<"marginTop" | "marginBottom", true>;
+    /**
+   * @see padding
+   */
     p: CSSValue<"padding", true>;
+    /**
+   * @see paddingTop
+   */
     pt: CSSValue<"paddingTop", true>;
+    /**
+   * @see paddingRight
+   */
     pr: CSSValue<"paddingRight", true>;
+    /**
+   * @see paddingBottom
+   */
     pb: CSSValue<"paddingBottom", true>;
+    /**
+   * @see paddingLeft
+   */
     pl: CSSValue<"paddingLeft", true>;
+    /**
+   * @see paddingLeft
+   * @see paddingRight
+   */
     px: CSSValue<"paddingLeft" | "paddingRight", true>;
+    /**
+   * @see paddingTop
+   * @see paddingBottom
+   */
     py: CSSValue<"paddingTop" | "paddingBottom", true>;
@@ -21,0 +67,0 @@ }>;

dist/types.d.ts

 import * as CSS from 'csstype';
 import { StyledKeyType } from './keys.js';
 
+type If<C extends boolean, T, F> = C extends true ? T : F;
 type CSSProperty = Exclude<CSS.Properties[keyof CSS.Properties], undefined>;
-type ConditionalNumber<Q, DefaultValue> = Q extends true ? number : DefaultValue;
-type CSSValue<P extends keyof CSS.Properties, Q extends boolean = false> = CSS.Properties[P] | ConditionalNumber<Q, never> | Array<NonNullable<CSS.Properties[P] | ConditionalNumber<Q, never>>>;
+type CSSValue<P extends keyof CSS.Properties, Q extends boolean = false> = CSSProperties<P, Q>[P];
+type CSSProperties<P extends keyof CSS.Properties, Q extends boolean = false> = If<Q, Pick<CSS.PropertiesFallback<number>, P>, Pick<CSS.PropertiesFallback, P>>;
 type UtilityCSSMapping<K extends StyledKeyType> = {
@@ -17,2 +18,2 @@ [key in K]: keyof CSS.Properties;
 
-export { CSSProperty, CSSValue, ResponsiveStyle, UtilityCSSMapping };
+export { CSSProperties, CSSProperty, CSSValue, ResponsiveStyle, UtilityCSSMapping };

dist/typography.d.ts

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

package.json

 {
   "name": "@kuma-ui/system",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -24,3 +24,3 @@ "repository": {
   "dependencies": {
-    "@kuma-ui/sheet": "0.1.0"
+    "@kuma-ui/sheet": "0.1.1"
   },
@@ -27,0 +27,0 @@ "devDependencies": {

README.md

@@ -17,26 +17,4 @@ # Kuma UI
 
-```tsx
-import { styled, k } from "@kuma-ui/core";
+## Features
 
-const color = 'orange'
-function App() {
-  return (
-    <VStack p={[4, 8]} m="2px" _hover={{ flexDir: "row" }}>
-      <k.div fontSize="40px" color={color}>
-        hello world
-      </k.div>
-    </VStack>
-  );
-}
-
-export const VStack = styled("div")`
-  display: flex;
-  flex-direction: column;
-`;
-
-export default App;
-```
-
-# Features
-
 🔥 &nbsp; Blazing-fast performance with zero-runtime CSS extraction
@@ -52,4 +30,6 @@
 
-# Installation
+🔬 &nbsp; Experimental support for Next.js 13.4 App router & React server components(RSC).
 
+## Installation
+
 ```sh
@@ -65,7 +45,81 @@ npm install @kuma-ui/core
 
-# Setup
+## Usage
 
-## Vite
+### k object
 
+The `k` object is a key part of Kuma UI's API. It provides pre-styled HTML elements that you can use as components in your application. These elements can be styled using utility props for inline styling. The utility props are type-safe and make it easy to write responsive styles.
+
+```tsx
+import { k } from "@kuma-ui/core";
+
+function App() {
+  return (
+    <k.div p={[4, 8]} m="2px" _hover={{ flexDir: "row" }}>
+      hello world
+    </k.div>
+  );
+}
+```
+
+### css function
+
+The `css` function is another way to style your components. It takes an object of styles and returns a string of hashed classNames that you can apply to your component using the `className` prop.
+
+```tsx
+import { css } from "@kuma-ui/core";
+
+const styles = css({ color: 'red', fontSize: '24px' });
+
+function App() {
+  return <div className={styles}>Hello, world!</div>;
+}
+```
+
+## Setup
+
+### Next.js
+
 ```sh
+yarn add @kuma-ui/next-plugin
+```
+
+#### Pages Directory Version
+
+**next.config.js**
+
+```js
+const { withKumaUI } = require("@kuma-ui/next-plugin");
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+};
+
+module.exports = withKumaUI(nextConfig);
+```
+
+#### App Router Version (Experimental)
+
+**next.config.js**
+
+```js
+const { withKumaUI } = require("@kuma-ui/next-plugin");
+
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  reactStrictMode: true,
+  experimental: {
+    appDir: true
+  }
+};
+
+module.exports = withKumaUI(nextConfig);
+```
+
+Please note that as of now, App Router is an experimental feature. A `.kuma` directory will be produced in the process, which should be added to your `.gitignore` file. If you delete the `.kuma` directory, make sure to also clear the `.next` cache.
+
+
+### Vite
+
+```sh
 yarn add @kuma-ui/vite
@@ -76,3 +130,3 @@ ```
 
-```js:vite.config.ts
+```js
 import { defineConfig } from "vite";
@@ -93,6 +147,19 @@ import react from "@vitejs/plugin-react";
 
-# Contributing
+## Responsive Design
+
+Kuma UI supports responsive design. Use arrays to specify different styles for different viewport widths. For example, <k.div fontSize={[16, 24]} /> changes the font size from 16px to 24px based on the window size.
+
+Define the breakpoints in your config file:
+```js
+import kumaUI from "@kuma-ui/vite";
+
+kumaUI({
+  breakpoints: { sm: "400px", md: "700px" },
+});
+```
+
+## Contributing
 Contributions are welcome! Please feel free to submit issues or pull requests with any improvements or suggestions.
 
-# License
+## License
 MIT

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

82499

increased by2.39%

Lines of code

2632

increased by0.46%

Number of lines in readme file

161

increased by71.28%

Dependency changes

• + Added@kuma-ui/sheet@0.1.1(transitive)

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

• Updated@kuma-ui/sheet@0.1.1