@rufous/ui 0.1.4 → 0.1.6

package/README.md

@@ -1,3 +1,242 @@
-# rufous-ui
+# @rufous/ui
 
-UI library for rufous
+A modern and reusable UI component library for React.  
+Includes buttons, floating inputs, checkboxes, theme support, and icons.
+
+---
+
+## 📦 Installation
+
+```bash
+npm install @rufous/ui
+```
+
+or
+
+```bash
+yarn add @rufous/ui
+```
+
+---
+
+## 🎯 Usage
+
+Before using any components, **import the global styles**:
+
+```javascript
+import "@rufous/ui/style.css";
+```
+
+---
+
+## 🧩 Components Showcase
+
+Below are usage examples of all the components available in the showcase.
+
+---
+
+### 🧱 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>
+  );
+}
+```
+
+---
+
+### ✍️ Floating Input
+
+```jsx
+import React, { useState } from "react";
+import { FloatingInput } from "@rufous/ui";
+import "@rufous/ui/style.css";
+
+export default function Example() {
+  const [name, setName] = useState("");
+
+  return (
+    <FloatingInput
+      label="Your Name"
+      name="name"
+      value={name}
+      onChange={(e) => setName(e.target.value)}
+      required
+    />
+  );
+}
+```
+
+---
+
+### 🎨 Theme Provider
+
+```jsx
+import React from "react";
+import { Button, useRufousTheme, APP_THEMES } from "@rufous/ui";
+import "@rufous/ui/style.css";
+
+export default function Example() {
+  const { previewTheme } = useRufousTheme();
+
+  return (
+    <>
+      <Button
+        onClick={() => previewTheme(APP_THEMES.default.name.toLowerCase())}
+      >
+        Light
+      </Button>
+      <Button
+        onClick={() => previewTheme(APP_THEMES.rufous.name.toLowerCase())}
+      >
+        Dark
+      </Button>
+    </>
+  );
+}
+```
+
+---
+
+### ☑️ Checkbox
+
+```jsx
+import React from "react";
+import { Checkbox } from "@rufous/ui";
+import "@rufous/ui/style.css";
+
+export default function Example() {
+  return (
+    <>
+      <Checkbox label="Unchecked" />
+      <Checkbox checked={true} label="Checked" />
+    </>
+  );
+}
+```
+
+---
+
+### 🖼 Icons (Extra Example)
+
+```jsx
+import React from "react";
+import { CopyIcon, EditIcon } from "@rufous/ui";
+import "@rufous/ui/style.css";
+
+export default function Example() {
+  return (
+    <div style={{ display: "flex", gap: "10px" }}>
+      <CopyIcon onClick={() => alert("Copied!")} />
+      <EditIcon onClick={() => alert("Edit clicked!")} />
+    </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 |
+
+---
+
+## 📌 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

@@ -1,6 +1,10 @@
 import {
-  FloatingInput
-} from "./chunk-AWA5Y5LH.js";
+  RufousThemeProvider,
+  useRufousTheme
+} from "./chunk-BCGCLMKA.js";
+import {
+  APP_THEMES
+} from "./chunk-2FHTGYR4.js";
 import "./chunk-ZZ37BKUK.js";
 import {
   rufousLauncherBird_default
@@ -36,12 +40,8 @@ import {
   Checkbox
 } from "./chunk-QKDJLUKZ.js";
 import {
-  RufousThemeProvider,
-  useRufousTheme
-} from "./chunk-BCGCLMKA.js";
-import {
-  APP_THEMES
-} from "./chunk-2FHTGYR4.js";
+  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.4",
+  "version": "0.1.6",
   "type": "module",
   "style": "./dist/style.css",
   "files": [
@@ -23,6 +23,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsup lib --dts --format esm,cjs --outDir dist --clean",
+    "build:dev": "npm version patch --no-git-tag-version && npm run build",
     "prebuild": "rm -rf dist",
     "lint": "eslint .",
     "preview": "vite preview",