@rufous/ui 0.1.55 → 0.1.57

package/README.md

@@ -1,7 +1,6 @@
 # @rufous/ui
 
-A modern and reusable UI component library for React.  
-Includes buttons, floating inputs, checkboxes, theme support, and icons.
+A lightweight React UI component library with theming, buttons, inputs, dialogs, progress and a rich icon set.
 
 ---
 
@@ -9,58 +8,120 @@ Includes buttons, floating inputs, checkboxes, theme support, and icons.
 
 ```bash
 npm install @rufous/ui
-```
-
-or
-
-```bash
+# or
 yarn add @rufous/ui
 ```
 
 ---
 
-## 🎯 Usage
+## 🔧 Setup
 
-Before using any components, **import the global styles**:
+Import the global styles once in your app entry (e.g. `src/main.tsx`, `pages/_app.tsx`).
 
 ```javascript
 import "@rufous/ui/style.css";
 ```
 
----
+Optional but recommended: wrap your app with the theme provider to enable theme utilities.
 
-## 🧩 Components Showcase
+```tsx
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { RufousThemeProvider } from "@rufous/ui";
+import "@rufous/ui/style.css";
 
-Below are usage examples of all the components available in the showcase.
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <RufousThemeProvider>
+    <App />
+  </RufousThemeProvider>
+);
+```
 
 ---
 
-### 🧱 Button
+## 🎨 Theming
 
-```jsx
-import React from "react";
-import { Button } from "@rufous/ui";
-import "@rufous/ui/style.css";
+`RufousThemeProvider` exposes `useRufousTheme` and `APP_THEMES`.
 
-export default function Example() {
+```tsx
+import { useRufousTheme, APP_THEMES, Button } from "@rufous/ui";
+
+export function ThemeToggle() {
+  const { previewTheme } = useRufousTheme();
   return (
-    <Button onClick={() => alert("Rufous Button clicked!")}>Click Me</Button>
+    <div style={{ display: "flex", gap: 12 }}>
+      <Button
+        onClick={() => previewTheme(APP_THEMES.default.name.toLowerCase())}
+      >
+        Light
+      </Button>
+      <Button
+        onClick={() => previewTheme(APP_THEMES.rufous.name.toLowerCase())}
+      >
+        Dark
+      </Button>
+    </div>
   );
 }
 ```
 
 ---
 
-### ✍️ Floating Input
+## 🧩 Components
 
-```jsx
-import React, { useState } from "react";
-import { FloatingInput } from "@rufous/ui";
-import "@rufous/ui/style.css";
+Below are the primary components exported by the library with usage patterns and key props.
 
-export default function Example() {
-  const [name, setName] = useState("");
+### Buttons
 
+All buttons accept native button props via `...rest`.
+
+- **StandardButton**: Base neutral button
+- **AddButton**: Prefixed with `+`
+- **SubmitButton**: Submit/async actions with built-in loading and double-click handling
+- **CancelButton**: Secondary/cancel action
+
+```tsx
+import {
+  StandardButton,
+  AddButton,
+  SubmitButton,
+  CancelButton,
+} from "@rufous/ui";
+
+export function ButtonsDemo() {
+  return (
+    <div style={{ display: "flex", gap: 12 }}>
+      <StandardButton onClick={() => alert("Standard")}>
+        Standard
+      </StandardButton>
+      <AddButton onClick={() => alert("Added")}>Add Item</AddButton>
+      <SubmitButton
+        onClick={async () => await new Promise((r) => setTimeout(r, 800))}
+      >
+        Save
+      </SubmitButton>
+      <CancelButton onClick={() => alert("Cancelled")}>Cancel</CancelButton>
+    </div>
+  );
+}
+```
+
+- **SubmitButton props**
+  - `type`: "button" | "submit" | "reset" (auto-managed when `onClick` provided)
+  - `onClick(e)`: supports async; shows loader until resolved
+  - `onDoubleClick(e)`: optional alternate handler; debounced vs single click
+  - `isLoading`: boolean external control of loader
+  - `bgGradiant`: boolean gradient background
+
+### Text Inputs
+
+- **FloatingInput**: Floating label text input
+
+```tsx
+import { FloatingInput } from "@rufous/ui";
+
+export function NameField() {
+  const [name, setName] = React.useState("");
   return (
     <FloatingInput
       label="Your Name"
@@ -73,167 +134,167 @@ export default function Example() {
 }
 ```
 
----
+- **FloatingInput props**
+  - `label`: string (required)
+  - `name`: string (required)
+  - `id`: string (defaults to `name`)
+  - `type`: string = "text"
+  - `value`: string
+  - `onChange(e)`: (required for controlled usage)
+  - `required`: boolean = false
+  - `placeholder`: string
+  - `className`: string
+  - `...divProps` applied to the wrapper
 
-### 🎨 Theme Provider
+### Checkboxes
 
-```jsx
-import React from "react";
-import { Button, useRufousTheme, APP_THEMES } from "@rufous/ui";
-import "@rufous/ui/style.css";
+- **Checkbox**: Controlled checkbox with label
 
-export default function Example() {
-  const { previewTheme } = useRufousTheme();
+```tsx
+import { Checkbox } from "@rufous/ui";
 
+export function Terms() {
+  const [checked, setChecked] = React.useState(false);
   return (
-    <>
-      <Button
-        onClick={() => previewTheme(APP_THEMES.default.name.toLowerCase())}
-      >
-        Light
-      </Button>
-      <Button
-        onClick={() => previewTheme(APP_THEMES.rufous.name.toLowerCase())}
-      >
-        Dark
-      </Button>
-    </>
+    <Checkbox
+      id="terms"
+      label="I agree to the terms"
+      checked={checked}
+      onChange={setChecked}
+    />
   );
 }
 ```
 
----
+- **Checkbox props**
+  - `id`: string
+  - `label`: string
+  - `checked`: boolean
+  - `onChange(nextChecked: boolean)`: required
+  - `disabled`: boolean = false
+  - `className`: string
+  - `style`: React.CSSProperties
 
-### ☑️ Checkbox
+### Dialogs
 
-```jsx
-import React from "react";
-import { Checkbox } from "@rufous/ui";
-import "@rufous/ui/style.css";
+- **BaseDialog**: Unopinionated modal container with header, close button, footer actions
+
+```tsx
+import { BaseDialog, SubmitButton } from "@rufous/ui";
 
-export default function Example() {
+export function ConfirmDialog({ open, onClose, onConfirm }) {
   return (
-    <>
-      <Checkbox label="Unchecked" />
-      <Checkbox checked={true} label="Checked" />
-    </>
+    <BaseDialog
+      open={open}
+      title="Confirm delete"
+      onClose={onClose}
+      onCancel={onClose}
+      onConfirm={onConfirm}
+      buttonAlign="flex-end"
+      showCancelButton
+      fullWidth
+    >
+      <p>Are you sure you want to delete this item?</p>
+    </BaseDialog>
   );
 }
 ```
 
----
+- **BaseDialog props (key)**
+  - `open`: boolean (required to show)
+  - `title`: string
+  - `onClose()`: close handler
+  - `onCancel()`: cancel handler
+  - `onConfirm()`: sync/async confirm; built-in loading toggle
+  - `cancelText`, `confirmText`, `submitText`: strings
+  - `isLoading`, `loading`, `disableConfirmBtn`: booleans
+  - `minWidth`, `minHeight`, `fullWidth`, `fullScreen`: sizing controls
+  - `buttonAlign`: "flex-start" | "center" | "flex-end"
+  - `showCloseButton`, `showCancelButton`, `formatTitle`
+  - `className`, `dialogBodyStyle`
 
-### 🖼 Icons (Extra Example)
+### Progress
 
-```jsx
-import React from "react";
-import { CopyIcon, EditIcon } from "@rufous/ui";
-import "@rufous/ui/style.css";
+- **CircularProgress**: Stroke-based loader
 
-export default function Example() {
-  return (
-    <div style={{ display: "flex", gap: "10px" }}>
-      <CopyIcon onClick={() => alert("Copied!")} />
-      <EditIcon onClick={() => alert("Edit clicked!")} />
-    </div>
-  );
+```tsx
+import { CircularProgess } from "@rufous/ui"; // exported via SubmitButton internally as well
+
+export function LoadingExample() {
+  return <CircularProgess size={36} color="#a81c08" />;
 }
 ```
 
----
+- **CircularProgess props**
+  - `size`: number = 50
+  - `color`: string = "#a81c08"
+  - `...divProps`
 
-## 📋 Props Reference
+### Icons
 
-### **Button**
+All icons are React components that accept standard `svg`/`div`-style props depending on implementation; at minimum `className`, event handlers, and often `color` when applicable.
 
-| Prop    | Type     | Default | Description           |
-| ------- | -------- | ------- | --------------------- |
-| variant | string   | primary | Sets the button style |
-| size    | string   | medium  | Sets the button size  |
-| onClick | function | -       | Click event handler   |
+Usage pattern:
 
----
+```tsx
+import { CopyIcon, EditIcon, DownloadIcon } from "@rufous/ui";
 
-### **FloatingInput**
+export function IconRow() {
+  return (
+    <div style={{ display: "flex", gap: 10 }}>
+      <CopyIcon onClick={() => alert("Copied!")} />
+      <EditIcon />
+      <DownloadIcon />
+    </div>
+  );
+}
+```
 
-| 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 |
+Available icons include (non-exhaustive): `ActivateUserIcon`, `ArchivedIcon`, `AssignGroupIcon`, `CloseIcon`, `CopyIcon`, `DifficultyAllIcon`, `DifficultyEasyIcon`, `DifficultyMediumIcon`, `DifficultyHardIcon`, `DollarIcon`, `DownloadIcon`, `DownloadPdfIcon`, `EditChatIcon`, `EditIcon`, `EngagementIcon`, `FunctionIcon`, `HelpOutlinedIcon`, `HierarchyIcon`, `InactiveGroupIcon`, `IndustryIcon`, `InvoiceIcon`, `LocationPinIcon`, `LogsIcon`, `MinExperienceIcon`, `NineDotMenuIcon`, `NotificationIcon`, `ProjectIcon`, `QuestionStatusAllIcon`, `QuestionStatusPrivateIcon`, `QuestionStatusPublicIcon`, `QuestionTypeAllIcon`, `QuestionTypeCodingIcon`, `QuestionTypeDescriptiveIcon`, `QuestionTypeMultipleIcon`, `QuestionTypeSingleIcon`, `RefreshIcon`, `ResendInviteIcon`, `RolesIcon`, `RufousAiIcon`, `RufousBirdIcon`, `RufousLauncherIcon`, `SidebarIcon`, `SubscribeIcon`, `SuspendUserIcon`, `TickIcon`, `TimerIcon`, `TrashIcon`, `UnArchivedIcon`, `UnsubscribeIcon`, `UploadIcon`, `UserAssignIcon`, `ViewIcon`, `WorkItemIcon`.
 
 ---
 
-### **Checkbox**
+## 🧾 Exports
 
-| Prop     | Type     | Default | Description          |
-| -------- | -------- | ------- | -------------------- |
-| label    | string   | -       | Checkbox label       |
-| checked  | boolean  | false   | Checked state        |
-| onChange | function | -       | Change event handler |
+The package main re-exports everything you need from a single entry point:
 
----
-
-## 📌 Quick Start Example
+```ts
+// main entry exports
+export { APP_THEMES } from "./utils/constants";
+export * from "./icons"; // all icons
+export * from "./Buttons"; // AddButton, SubmitButton, CancelButton, StandardButton
+export * from "./Dialogs"; // BaseDialog
+export {
+  RufousThemeProvider,
+  useRufousTheme,
+} from "./Contexts/rufousThemeProvider";
+```
 
-Here’s a **full example** using multiple components:
+Import from `@rufous/ui` directly:
 
-```jsx
-import React, { useState } from "react";
+```tsx
 import {
-  Button,
-  FloatingInput,
-  Checkbox,
-  CopyIcon,
-  EditIcon,
+  SubmitButton,
+  BaseDialog,
+  RufousThemeProvider,
   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>
-  );
-}
-```
+## 🧠 Notes
+
+- Always import `@rufous/ui/style.css` once to get base styles.
+- `SubmitButton` manages `type` automatically when `onClick` is provided.
+- Dialog confirm button disables while running async `onConfirm` to prevent repeats.
+
+---
+
+## 🐛 Issues / Feedback
+
+Please open an issue or PR in your repository to report bugs, request components, or propose improvements.
 
 ---
 

package/dist/Buttons/index.cjs

@@ -87,7 +87,7 @@ var SubmitButton = ({
   const [loading, setLoading] = React3.useState(false);
   const clickTimeout = React3.useRef(null);
   const handleClick = async (e) => {
-    e.persist();
+    const currentTarget = e.currentTarget;
     if (loading) return;
     if (clickTimeout.current) {
       clearTimeout(clickTimeout.current);
@@ -97,7 +97,7 @@ var SubmitButton = ({
       if (onClick) {
         setLoading(true);
         try {
-          await onClick(e);
+          await onClick({ ...e, currentTarget });
         } finally {
           setLoading(false);
         }
@@ -105,7 +105,7 @@ var SubmitButton = ({
     }, 250);
   };
   const handleDoubleClick = async (e) => {
-    e.persist();
+    const currentTarget = e.currentTarget;
     if (loading) return;
     if (clickTimeout.current) {
       clearTimeout(clickTimeout.current);
@@ -114,7 +114,7 @@ var SubmitButton = ({
     if (onDoubleClick) {
       setLoading(true);
       try {
-        await onDoubleClick(e);
+        await onDoubleClick({ ...e, currentTarget });
       } finally {
         setLoading(false);
       }

package/dist/Buttons/index.js

@@ -10,7 +10,7 @@ import {
 } from "../chunk-R3GARAVJ.js";
 import {
   submitButton_default
-} from "../chunk-SG65CGSF.js";
+} from "../chunk-7YKG3WYS.js";
 import "../chunk-YRFUVQDN.js";
 export {
   addButton_default as AddButton,

package/dist/Buttons/submitButton.cjs

@@ -75,7 +75,7 @@ var SubmitButton = ({
   const [loading, setLoading] = React2.useState(false);
   const clickTimeout = React2.useRef(null);
   const handleClick = async (e) => {
-    e.persist();
+    const currentTarget = e.currentTarget;
     if (loading) return;
     if (clickTimeout.current) {
       clearTimeout(clickTimeout.current);
@@ -85,7 +85,7 @@ var SubmitButton = ({
       if (onClick) {
         setLoading(true);
         try {
-          await onClick(e);
+          await onClick({ ...e, currentTarget });
         } finally {
           setLoading(false);
         }
@@ -93,7 +93,7 @@ var SubmitButton = ({
     }, 250);
   };
   const handleDoubleClick = async (e) => {
-    e.persist();
+    const currentTarget = e.currentTarget;
     if (loading) return;
     if (clickTimeout.current) {
       clearTimeout(clickTimeout.current);
@@ -102,7 +102,7 @@ var SubmitButton = ({
     if (onDoubleClick) {
       setLoading(true);
       try {
-        await onDoubleClick(e);
+        await onDoubleClick({ ...e, currentTarget });
       } finally {
         setLoading(false);
       }

package/dist/Buttons/submitButton.js

@@ -1,6 +1,6 @@
 import {
   submitButton_default
-} from "../chunk-SG65CGSF.js";
+} from "../chunk-7YKG3WYS.js";
 import "../chunk-YRFUVQDN.js";
 export {
   submitButton_default as default

package/dist/Dialogs/BaseDialog.js

@@ -61,7 +61,7 @@ import "../chunk-QPGJCRBS.js";
 import "../chunk-U7SARO5B.js";
 import "../chunk-BMMDUQDJ.js";
 import "../chunk-R3GARAVJ.js";
-import "../chunk-SG65CGSF.js";
+import "../chunk-7YKG3WYS.js";
 import "../chunk-YRFUVQDN.js";
 export {
   BaseDialog_default as default

package/dist/Dialogs/index.js

@@ -61,7 +61,7 @@ import "../chunk-QPGJCRBS.js";
 import "../chunk-U7SARO5B.js";
 import "../chunk-BMMDUQDJ.js";
 import "../chunk-R3GARAVJ.js";
-import "../chunk-SG65CGSF.js";
+import "../chunk-7YKG3WYS.js";
 import "../chunk-YRFUVQDN.js";
 export {
   BaseDialog_default as BaseDialog

package/dist/{chunk-SG65CGSF.js → chunk-7YKG3WYS.js}

@@ -16,7 +16,7 @@ var SubmitButton = ({
   const [loading, setLoading] = React.useState(false);
   const clickTimeout = React.useRef(null);
   const handleClick = async (e) => {
-    e.persist();
+    const currentTarget = e.currentTarget;
     if (loading) return;
     if (clickTimeout.current) {
       clearTimeout(clickTimeout.current);
@@ -26,7 +26,7 @@ var SubmitButton = ({
       if (onClick) {
         setLoading(true);
         try {
-          await onClick(e);
+          await onClick({ ...e, currentTarget });
         } finally {
           setLoading(false);
         }
@@ -34,7 +34,7 @@ var SubmitButton = ({
     }, 250);
   };
   const handleDoubleClick = async (e) => {
-    e.persist();
+    const currentTarget = e.currentTarget;
     if (loading) return;
     if (clickTimeout.current) {
       clearTimeout(clickTimeout.current);
@@ -43,7 +43,7 @@ var SubmitButton = ({
     if (onDoubleClick) {
       setLoading(true);
       try {
-        await onDoubleClick(e);
+        await onDoubleClick({ ...e, currentTarget });
       } finally {
         setLoading(false);
       }

package/dist/main.cjs

@@ -1137,7 +1137,7 @@ var SubmitButton = ({
   const [loading, setLoading] = React56.useState(false);
   const clickTimeout = React56.useRef(null);
   const handleClick = async (e) => {
-    e.persist();
+    const currentTarget = e.currentTarget;
     if (loading) return;
     if (clickTimeout.current) {
       clearTimeout(clickTimeout.current);
@@ -1147,7 +1147,7 @@ var SubmitButton = ({
       if (onClick) {
         setLoading(true);
         try {
-          await onClick(e);
+          await onClick({ ...e, currentTarget });
         } finally {
           setLoading(false);
         }
@@ -1155,7 +1155,7 @@ var SubmitButton = ({
     }, 250);
   };
   const handleDoubleClick = async (e) => {
-    e.persist();
+    const currentTarget = e.currentTarget;
     if (loading) return;
     if (clickTimeout.current) {
       clearTimeout(clickTimeout.current);
@@ -1164,7 +1164,7 @@ var SubmitButton = ({
     if (onDoubleClick) {
       setLoading(true);
       try {
-        await onDoubleClick(e);
+        await onDoubleClick({ ...e, currentTarget });
       } finally {
         setLoading(false);
       }

package/dist/main.js

@@ -180,7 +180,7 @@ import {
 } from "./chunk-R3GARAVJ.js";
 import {
   submitButton_default
-} from "./chunk-SG65CGSF.js";
+} from "./chunk-7YKG3WYS.js";
 import "./chunk-YRFUVQDN.js";
 export {
   APP_THEMES,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@rufous/ui",
   "private": false,
-  "version": "0.1.55",
+  "version": "0.1.57",
   "type": "module",
   "style": "./dist/style.css",
   "files": [