@kuma-ui/system - npm Package Compare versions

Comparing version 0.5.1 to 0.6.0

dist/index.d.ts

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

dist/index.js

@@ -26,3 +26,3 @@ "use strict";
   isStyledProp: () => isStyledProp,
-  pseudoMappings: () => pseudoMappings
+  normalizePseudo: () => normalizePseudo
 });
@@ -390,13 +390,7 @@ module.exports = __toCommonJS(src_exports);
 // src/pseudo.ts
-var pseudoMappings = {
-  _active: ":active",
-  _disabled: ":disabled",
-  _hover: ":hover",
-  _focus: ":focus",
-  _focusVisible: ":focus_visible",
-  _focusWithin: ":focus-within"
+var normalizePseudo = (props) => {
+  return props.replace("_", ":");
 };
-var isPseudoProps = (_props) => {
-  const props = _props;
-  return Object.keys(pseudoMappings).includes(props);
+var isPseudoProps = (props) => {
+  return `${props}`.startsWith("_");
 };
@@ -633,3 +627,3 @@
   isStyledProp,
-  pseudoMappings
+  normalizePseudo
 });

dist/pseudo.d.ts

 import { StyledProps } from './compose.js';
+import { ExcludeHyphen, RemoveColon } from './types.js';
+import { Pseudos } from 'csstype';
 import './space.js';
-import './types.js';
-import 'csstype';
-import './keys.js';
 import './typography.js';
@@ -14,18 +13,12 @@ import './layout.js';
 import './grid.js';
+import './keys.js';
 import './list.js';
 import './effect.js';
 
-declare const pseudoMappings: {
-    readonly _active: ":active";
-    readonly _disabled: ":disabled";
-    readonly _hover: ":hover";
-    readonly _focus: ":focus";
-    readonly _focusVisible: ":focus_visible";
-    readonly _focusWithin: ":focus-within";
-};
 type PseudoProps = {
-    [key in keyof typeof pseudoMappings]?: StyledProps;
+    [key in `_${ExcludeHyphen<RemoveColon<Pseudos>>}`]?: StyledProps;
 };
-declare const isPseudoProps: (_props: unknown) => _props is "_active" | "_disabled" | "_hover" | "_focus" | "_focusVisible" | "_focusWithin";
+declare const normalizePseudo: (props: string) => string;
+declare const isPseudoProps: (props: unknown) => props is "_left" | "_right" | "_marker" | "_paused" | "_default" | "_first" | "_grammar-error" | "_spelling-error" | "_read-only" | "_read-write" | "_after" | "_active" | "_disabled" | "_enabled" | "_cue" | "_cue-region" | "_part" | "_slotted" | "_view-transition-group" | "_view-transition-image-pair" | "_view-transition-new" | "_view-transition-old" | "_dir" | "_has" | "_host" | "_host-context" | "_is" | "_lang" | "_matches()" | "_not" | "_nth-child" | "_nth-last-child" | "_nth-last-of-type" | "_nth-of-type" | "_where" | "_backdrop" | "_before" | "_first-letter" | "_first-line" | "_placeholder" | "_selection" | "_target-text" | "_view-transition" | "_any-link" | "_blank" | "_checked" | "_current" | "_defined" | "_empty" | "_first-child" | "_first-of-type" | "_focus" | "_focus-visible" | "_focus-within" | "_fullscreen" | "_future" | "_hover" | "_in-range" | "_indeterminate" | "_invalid" | "_last-child" | "_last-of-type" | "_link" | "_local-link" | "_nth-col" | "_nth-last-col" | "_only-child" | "_only-of-type" | "_optional" | "_out-of-range" | "_past" | "_picture-in-picture" | "_placeholder-shown" | "_playing" | "_required" | "_root" | "_scope" | "_target" | "_target-within" | "_user-invalid" | "_user-valid" | "_valid" | "_visited";
 
-export { PseudoProps, isPseudoProps, pseudoMappings };
+export { PseudoProps, isPseudoProps, normalizePseudo };

dist/pseudo.js

@@ -24,16 +24,10 @@ "use strict";
   isPseudoProps: () => isPseudoProps,
-  pseudoMappings: () => pseudoMappings
+  normalizePseudo: () => normalizePseudo
 });
 module.exports = __toCommonJS(pseudo_exports);
-var pseudoMappings = {
-  _active: ":active",
-  _disabled: ":disabled",
-  _hover: ":hover",
-  _focus: ":focus",
-  _focusVisible: ":focus_visible",
-  _focusWithin: ":focus-within"
+var normalizePseudo = (props) => {
+  return props.replace("_", ":");
 };
-var isPseudoProps = (_props) => {
-  const props = _props;
-  return Object.keys(pseudoMappings).includes(props);
+var isPseudoProps = (props) => {
+  return `${props}`.startsWith("_");
 };
@@ -43,3 +37,3 @@ // Annotate the CommonJS export names for ESM import in node:
   isPseudoProps,
-  pseudoMappings
+  normalizePseudo
 });

dist/types.d.ts

@@ -6,2 +6,4 @@ import * as CSS from 'csstype';
 type CSSProperty = Exclude<CSS.Properties[keyof CSS.Properties], undefined>;
+type RemoveColon<T extends string> = T extends `${infer R}${infer R2}` ? R extends ":" ? RemoveColon<R2> : `${R}${R2}` : T;
+type ExcludeHyphen<T extends string> = Exclude<T, `-${string}`>;
 type CSSValue<P extends keyof CSS.Properties, Q extends boolean = false> = CSSProperties<P, Q>[P];
@@ -19,2 +21,2 @@ type CSSProperties<P extends keyof CSS.Properties, Q extends boolean = false> = If<Q, Pick<CSS.PropertiesFallback<number>, P>, Pick<CSS.PropertiesFallback, P>>;
 
-export { CSSProperties, CSSProperty, CSSValue, ResponsiveStyle, UtilityCSSMapping };
+export { CSSProperties, CSSProperty, CSSValue, ExcludeHyphen, RemoveColon, ResponsiveStyle, UtilityCSSMapping };

package.json

 {
   "name": "@kuma-ui/system",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -26,9 +26,7 @@ "repository": {
     "csstype": "^3.1.2",
-    "@kuma-ui/sheet": "0.3.0"
+    "@kuma-ui/sheet": "0.4.0"
   },
   "devDependencies": {
-    "@jest/globals": "^29.5.0",
-    "@jest/types": "^29.1.0",
-    "jest": "^29.1.0",
-    "@kuma-ui/jest-preset": "0.0.0"
+    "@vitest/coverage-c8": "^0.31.4",
+    "vitest": "^0.31.4"
   },
@@ -40,3 +38,3 @@ "publishConfig": {
     "build": "tsup --config ../../tsup.config.ts",
-    "test": "jest",
+    "test": "vitest run",
     "typecheck": "tsc --noEmit --composite false",
@@ -43,0 +41,0 @@ "lint": "eslint './src/**/*.{js,ts,jsx,tsx}'",

README.md

@@ -1,3 +0,10 @@
-# Kuma UI
+<div align="center">
+  <img src="https://raw.githubusercontent.com/poteboy/kuma-ui/main/media/logo.webp" alt="Kuma UI logo" width="300" />
+</div>
 
+<h1 align='center'>Ultra Fast, Zero Runtime, Utility-First CSS-in-JS</h1>
+
+
+**[Documentation](https://kuma-ui.com)**
+
  <div>
@@ -14,3 +21,3 @@ <a href='https://www.npmjs.com/package/@kuma-ui/core'>
 
-🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.
+🐻‍❄️ Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.
 
@@ -46,2 +53,23 @@
 
+## styled API
+
+The styled API works just like styled-components or Emotion, allowing you to create styled React components using tagged template literals. This makes it a familiar and comfortable choice for developers who have worked with these libraries.
+
+```tsx
+import { styled } from "@kuma-ui/core";
+
+const Box = styled("div")`
+  position: relative;
+  &:hover {
+    background-color: rgba(0, 0, 255, 0.5);
+  }
+  @media (max-width: 768px) {
+        flex-direction: column;
+  }
+`;
+
+// Then use it like so:
+<Box>Hello, world!</Box>
+```
+
 ### k object
@@ -118,5 +146,2 @@
 
-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
@@ -159,2 +184,7 @@
 
+## Roadmap
+
+Our ultimate goal is to develop **a zero-runtime headless component library**. We're currently focusing on enhancing the core and expanding our range of components. We aim to create a unique library that allows users to pass style props, operates with zero runtime, and remains accessible. In the future, we plan to introduce a `kuma.config.js` that allows users to define their own variants, making Kuma UI a go-to tool for creating design systems with high performance.
+
+
 ## Contributing
@@ -161,0 +191,0 @@ Contributions are welcome! Please feel free to submit issues or pull requests with any improvements or suggestions.

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

95611

increased by1.94%

Dev dependency count

2

decreased by-50%

Number of lines in readme file

191

increased by18.63%

Worsened metrics

Lines of code

2982

decreased by-0.63%

Dependency changes

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

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

• Updated@kuma-ui/sheet@0.4.0