@kuma-ui/vite - npm Package Compare versions

Comparing version 0.5.0 to 0.5.2

package.json

 {
   "name": "@kuma-ui/vite",
-  "version": "0.5.0",
+  "version": "0.5.2",
   "description": "🐻 Kuma UI is a utility-first, zero-runtime CSS-in-JS library that offers an outstanding developer experience and optimized performance.",
@@ -30,4 +30,4 @@ "repository": {
   "dependencies": {
-    "@kuma-ui/babel-plugin": "^0.9.0",
-    "@kuma-ui/sheet": "^0.5.0"
+    "@kuma-ui/babel-plugin": "^0.10.0",
+    "@kuma-ui/sheet": "^0.5.1"
   },
@@ -34,0 +34,0 @@ "devDependencies": {

README.md

 <div align="center">
-  <img src="media/logo.webp" alt="Kuma UI logo" width="300" />
+  <img src="https://raw.githubusercontent.com/poteboy/kuma-ui/main/media/logo.webp" alt="Kuma UI logo" width="300" />
 </div>
@@ -7,3 +7,2 @@
 
-
 **[Documentation](https://kuma-ui.com)**
@@ -24,3 +23,2 @@
 
-
 ## Features
@@ -43,9 +41,9 @@
 ```sh
-npm install @kuma-ui/core
+npm install -D @kuma-ui/core
 ```
 
-or 
+or
 
 ```sh
-yarn add @kuma-ui/core
+yarn add @kuma-ui/core -D
 ```
@@ -55,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
@@ -79,3 +98,3 @@
 
-const styles = css({ color: 'red', fontSize: '24px' });
+const styles = css({ color: "red", fontSize: "24px" });
 
@@ -92,3 +111,3 @@ function App() {
 ```sh
-yarn add @kuma-ui/next-plugin
+yarn add @kuma-ui/next-plugin -D
 ```
@@ -132,3 +151,3 @@
 ```sh
-yarn add @kuma-ui/vite
+yarn add @kuma-ui/vite -D
 ```
@@ -146,5 +165,3 @@
   plugins: [
-    react({
-      jsxRuntime: "classic",
-    }),
+    react(),
     KumaUI(),
@@ -168,6 +185,18 @@ ],
 
+## 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
 Contributions are welcome! Please feel free to submit issues or pull requests with any improvements or suggestions.
 
+### Adding a changeset
+Don't forget to include a changeset as well, by running this command at the root of the project:
+
+```sh
+pnpm changeset
+```
+
 ## License
 MIT

No alert changes

Improved metrics

Total package byte prevSize

13966

increased by9.37%

Number of lines in readme file

194

increased by17.58%

Dependency changes

• + Added@kuma-ui/babel-plugin@0.10.0(transitive)

• - Removed@kuma-ui/babel-plugin@0.9.0(transitive)

• Updated@kuma-ui/babel-plugin@^0.10.0

• Updated@kuma-ui/sheet@^0.5.1