@rufous/ui 0.1.5 → 0.1.6

package/README.md

@@ -1,5 +1,3 @@
-# rufous-ui
-
 # @rufous/ui
 
 A modern and reusable UI component library for React.  
@@ -7,45 +5,55 @@ Includes buttons, floating inputs, checkboxes, theme support, and icons.
 
 ---
 
-## Installation
+## 📦 Installation
 
 ```bash
 npm install @rufous/ui
+```
+
 or
 
-bash
-Copy
-Edit
+```bash
 yarn add @rufous/ui
-Usage
-Before using any components, import the global styles:
+```
+
+---
+
+## 🎯 Usage
 
-javascript
-Copy
-Edit
+Before using any components, **import the global styles**:
+
+```javascript
 import "@rufous/ui/style.css";
-Examples
+```
+
+---
+
+## 🧩 Components Showcase
+
 Below are usage examples of all the components available in the showcase.
 
-🧱 Button
-jsx
-Copy
-Edit
+---
+
+### 🧱 Button
+
+```jsx
 import React from "react";
 import { Button } from "@rufous/ui";
 import "@rufous/ui/style.css";
 
 export default function Example() {
   return (
-    <Button onClick={() => alert("Rufous Button clicked!")}>
-      Click Me
-    </Button>
+    <Button onClick={() => alert("Rufous Button clicked!")}>Click Me</Button>
   );
 }
-✍️ Floating Input
-jsx
-Copy
-Edit
+```
+
+---
+
+### ✍️ Floating Input
+
+```jsx
 import React, { useState } from "react";
 import { FloatingInput } from "@rufous/ui";
 import "@rufous/ui/style.css";
@@ -63,10 +71,13 @@ export default function Example() {
     />
   );
 }
-🎨 Theme Provider
-jsx
-Copy
-Edit
+```
+
+---
+
+### 🎨 Theme Provider
+
+```jsx
 import React from "react";
 import { Button, useRufousTheme, APP_THEMES } from "@rufous/ui";
 import "@rufous/ui/style.css";
@@ -76,19 +87,26 @@ export default function Example() {
 
   return (
     <>
-      <Button onClick={() => previewTheme(APP_THEMES.default.name.toLowerCase())}>
+      <Button
+        onClick={() => previewTheme(APP_THEMES.default.name.toLowerCase())}
+      >
         Light
       </Button>
-      <Button onClick={() => previewTheme(APP_THEMES.rufous.name.toLowerCase())}>
+      <Button
+        onClick={() => previewTheme(APP_THEMES.rufous.name.toLowerCase())}
+      >
         Dark
       </Button>
     </>
   );
 }
-☑️ Checkbox
-jsx
-Copy
-Edit
+```
+
+---
+
+### ☑️ Checkbox
+
+```jsx
 import React from "react";
 import { Checkbox } from "@rufous/ui";
 import "@rufous/ui/style.css";
@@ -101,10 +119,13 @@ export default function Example() {
     </>
   );
 }
-🖼 Icons (Extra Example)
-jsx
-Copy
-Edit
+```
+
+---
+
+### 🖼 Icons (Extra Example)
+
+```jsx
 import React from "react";
 import { CopyIcon, EditIcon } from "@rufous/ui";
 import "@rufous/ui/style.css";
@@ -117,44 +138,105 @@ export default function Example() {
     </div>
   );
 }
-Props Reference
-Button
-Prop	Type	Default	Description
-variant	string	primary	Sets the button style
-size	string	medium	Sets the button size
-onClick	function	-	Click event handler
-
-FloatingInput
-Prop	Type	Default	Description
-label	string	-	Floating label text
-name	string	-	Input name attribute
-value	string	-	Input value
-onChange	function	-	Change event handler
-required	boolean	false	Mark field as required
-
-Checkbox
-Prop	Type	Default	Description
-label	string	-	Checkbox label
-checked	boolean	false	Checked state
-onChange	function	-	Change event handler
-
-License
-MIT © Rufous UI
+```
+
+---
+
+## 📋 Props Reference
+
+### **Button**
+
+| Prop    | Type     | Default | Description           |
+| ------- | -------- | ------- | --------------------- |
+| variant | string   | primary | Sets the button style |
+| size    | string   | medium  | Sets the button size  |
+| onClick | function | -       | Click event handler   |
 
-yaml
-Copy
-Edit
+---
+
+### **FloatingInput**
+
+| Prop     | Type     | Default | Description            |
+| -------- | -------- | ------- | ---------------------- |
+| label    | string   | -       | Floating label text    |
+| name     | string   | -       | Input name attribute   |
+| value    | string   | -       | Input value            |
+| onChange | function | -       | Change event handler   |
+| required | boolean  | false   | Mark field as required |
 
 ---
 
-This way, a **new user** can:
+### **Checkbox**
 
-1. Install `@rufous/ui`
-2. Import `@rufous/ui/style.css`
-3. Copy any of the working code snippets into their app
-4. Immediately see each component in action
+| Prop     | Type     | Default | Description          |
+| -------- | -------- | ------- | -------------------- |
+| label    | string   | -       | Checkbox label       |
+| checked  | boolean  | false   | Checked state        |
+| onChange | function | -       | Change event handler |
 
 ---
 
-If you want, I can also **combine all these snippets into one runnable `App.js` example** so users can test all components at once instead of copy-pasting separately. That would make your README even more developer-friendly.
+## 📌 Quick Start Example
+
+Here’s a **full example** using multiple components:
+
+```jsx
+import React, { useState } from "react";
+import {
+  Button,
+  FloatingInput,
+  Checkbox,
+  CopyIcon,
+  EditIcon,
+  useRufousTheme,
+  APP_THEMES,
+} from "@rufous/ui";
+import "@rufous/ui/style.css";
+
+export default function App() {
+  const [name, setName] = useState("");
+  const { previewTheme } = useRufousTheme();
+
+  return (
+    <div style={{ padding: "20px" }}>
+      <h1>Rufous UI Demo</h1>
+
+      <Button onClick={() => alert("Hello!")}>Click Me</Button>
+
+      <FloatingInput
+        label="Your Name"
+        name="name"
+        value={name}
+        onChange={(e) => setName(e.target.value)}
+        required
+      />
+
+      <Checkbox label="Accept Terms" />
+
+      <div style={{ marginTop: "10px" }}>
+        <Button
+          onClick={() => previewTheme(APP_THEMES.default.name.toLowerCase())}
+        >
+          Light Theme
+        </Button>
+        <Button
+          onClick={() => previewTheme(APP_THEMES.rufous.name.toLowerCase())}
+        >
+          Dark Theme
+        </Button>
+      </div>
+
+      <div style={{ display: "flex", gap: "10px", marginTop: "10px" }}>
+        <CopyIcon onClick={() => alert("Copied!")} />
+        <EditIcon onClick={() => alert("Edit clicked!")} />
+      </div>
+    </div>
+  );
+}
 ```
+
+---
+
+## 📄 License
+
+MIT © Rufous UI

package/dist/main.js

@@ -36,12 +36,12 @@ import {
 import {
   Button
 } from "./chunk-ASP3DBRX.js";
-import {
-  FloatingInput
-} from "./chunk-AWA5Y5LH.js";
 import {
   Checkbox
 } from "./chunk-QKDJLUKZ.js";
+import {
+  FloatingInput
+} from "./chunk-AWA5Y5LH.js";
 export {
   APP_THEMES,
   archivedIcon_default as ArchivedIcon,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.1.5",
+  "version": "0.1.6",
   "type": "module",
   "style": "./dist/style.css",
   "files": [
@@ -56,4 +56,4 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }
-}
+}