@rufous/ui 0.1.3 → 0.1.5

package/README.md

@@ -1,3 +1,160 @@
 # rufous-ui
 
-UI library for rufous
+# @rufous/ui
+
+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
+Copy
+Edit
+yarn add @rufous/ui
+Usage
+Before using any components, import the global styles:
+
+javascript
+Copy
+Edit
+import "@rufous/ui/style.css";
+Examples
+Below are usage examples of all the components available in the showcase.
+
+🧱 Button
+jsx
+Copy
+Edit
+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
+Copy
+Edit
+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
+Copy
+Edit
+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
+Copy
+Edit
+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
+Copy
+Edit
+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
+
+License
+MIT © Rufous UI
+
+yaml
+Copy
+Edit
+
+---
+
+This way, a **new user** can:
+
+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
+
+---
+
+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.
+```

package/dist/Contexts/rufousThemeProvider.d.cts

@@ -1,28 +1,8 @@
-import { ReactNode } from 'react';
+import React__default from 'react';
 
-// customThemeProvider.d.ts
-
-
-
-type Theme = {
-  themeKey: string;
-  customStyles: any; // Replace `any` with a proper type if you have a defined theme structure
-};
-
-type RufousThemeContextType = {
-  theme: Theme;
-  previewTheme: (key: string) => void;
-  saveTheme: (inputKey?: string) => void;
-  cancelTheme: () => void;
-  currentThemeKey: string;
-  committedThemeKey: string;
-  updateSettings: () => void;
-};
-
-declare const RufousThemeProvider: React.FC<{
-  children: ReactNode;
-}>;
-
-declare const useRufousTheme: () => RufousThemeContextType;
+declare const RufousThemeProvider: ({ children }: {
+    children: any;
+}) => React__default.JSX.Element;
+declare const useRufousTheme: () => any;
 
 export { RufousThemeProvider, useRufousTheme };

package/dist/Contexts/rufousThemeProvider.d.ts

@@ -1,28 +1,8 @@
-import { ReactNode } from 'react';
+import React__default from 'react';
 
-// customThemeProvider.d.ts
-
-
-
-type Theme = {
-  themeKey: string;
-  customStyles: any; // Replace `any` with a proper type if you have a defined theme structure
-};
-
-type RufousThemeContextType = {
-  theme: Theme;
-  previewTheme: (key: string) => void;
-  saveTheme: (inputKey?: string) => void;
-  cancelTheme: () => void;
-  currentThemeKey: string;
-  committedThemeKey: string;
-  updateSettings: () => void;
-};
-
-declare const RufousThemeProvider: React.FC<{
-  children: ReactNode;
-}>;
-
-declare const useRufousTheme: () => RufousThemeContextType;
+declare const RufousThemeProvider: ({ children }: {
+    children: any;
+}) => React__default.JSX.Element;
+declare const useRufousTheme: () => any;
 
 export { RufousThemeProvider, useRufousTheme };

package/dist/icons/index.js

@@ -1,7 +1,4 @@
 import "../chunk-ZZ37BKUK.js";
-import {
-  nineDotMenuIcon_default
-} from "../chunk-D7SFBVJY.js";
 import {
   rufousLauncherBird_default
 } from "../chunk-QZFGQ5JM.js";
@@ -26,6 +23,9 @@ import {
 import {
   hierarchyIcon_default
 } from "../chunk-WZAU77G7.js";
+import {
+  nineDotMenuIcon_default
+} from "../chunk-D7SFBVJY.js";
 export {
   archivedIcon_default as ArchivedIcon,
   copyIcon_default as CopyIcon,

package/dist/main.js

@@ -1,10 +1,11 @@
 import {
-  FloatingInput
-} from "./chunk-AWA5Y5LH.js";
-import "./chunk-ZZ37BKUK.js";
+  RufousThemeProvider,
+  useRufousTheme
+} from "./chunk-BCGCLMKA.js";
 import {
-  nineDotMenuIcon_default
-} from "./chunk-D7SFBVJY.js";
+  APP_THEMES
+} from "./chunk-2FHTGYR4.js";
+import "./chunk-ZZ37BKUK.js";
 import {
   rufousLauncherBird_default
 } from "./chunk-QZFGQ5JM.js";
@@ -29,19 +30,18 @@ import {
 import {
   hierarchyIcon_default
 } from "./chunk-WZAU77G7.js";
+import {
+  nineDotMenuIcon_default
+} from "./chunk-D7SFBVJY.js";
 import {
   Button
 } from "./chunk-ASP3DBRX.js";
+import {
+  FloatingInput
+} from "./chunk-AWA5Y5LH.js";
 import {
   Checkbox
 } from "./chunk-QKDJLUKZ.js";
-import {
-  RufousThemeProvider,
-  useRufousTheme
-} from "./chunk-BCGCLMKA.js";
-import {
-  APP_THEMES
-} from "./chunk-2FHTGYR4.js";
 export {
   APP_THEMES,
   archivedIcon_default as ArchivedIcon,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.1.3",
+  "version": "0.1.5",
   "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",
@@ -55,4 +56,4 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0"
   }
-}
+}

package/dist/Contexts/rufousThemeProvider.d.cjs

@@ -1,17 +0,0 @@
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-
-// lib/Contexts/rufousThemeProvider.d.ts
-var rufousThemeProvider_d_exports = {};
-module.exports = __toCommonJS(rufousThemeProvider_d_exports);

package/dist/Contexts/rufousThemeProvider.d.d.cts

@@ -1,28 +0,0 @@
-import { ReactNode } from 'react';
-
-// customThemeProvider.d.ts
-
-
-
-type Theme = {
-  themeKey: string;
-  customStyles: any; // Replace `any` with a proper type if you have a defined theme structure
-};
-
-type RufousThemeContextType = {
-  theme: Theme;
-  previewTheme: (key: string) => void;
-  saveTheme: (inputKey?: string) => void;
-  cancelTheme: () => void;
-  currentThemeKey: string;
-  committedThemeKey: string;
-  updateSettings: () => void;
-};
-
-declare const RufousThemeProvider: React.FC<{
-  children: ReactNode;
-}>;
-
-declare const useRufousTheme: () => RufousThemeContextType;
-
-export { RufousThemeProvider, useRufousTheme };

package/dist/Contexts/rufousThemeProvider.d.d.ts

@@ -1,28 +0,0 @@
-import { ReactNode } from 'react';
-
-// customThemeProvider.d.ts
-
-
-
-type Theme = {
-  themeKey: string;
-  customStyles: any; // Replace `any` with a proper type if you have a defined theme structure
-};
-
-type RufousThemeContextType = {
-  theme: Theme;
-  previewTheme: (key: string) => void;
-  saveTheme: (inputKey?: string) => void;
-  cancelTheme: () => void;
-  currentThemeKey: string;
-  committedThemeKey: string;
-  updateSettings: () => void;
-};
-
-declare const RufousThemeProvider: React.FC<{
-  children: ReactNode;
-}>;
-
-declare const useRufousTheme: () => RufousThemeContextType;
-
-export { RufousThemeProvider, useRufousTheme };