reusify-ui 1.0.7 → 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025-2026 Mukesh Yadav
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,12 +1,305 @@
-# React + Vite
+# Reusify UI
 
-This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+Reusable, accessible React components with built-in dark mode and CSS-variable theming.
+Works with or without Tailwind CSS.
 
-Currently, two official plugins are available:
+[![npm](https://img.shields.io/npm/v/reusify-ui)](https://www.npmjs.com/package/reusify-ui)
+[![license](https://img.shields.io/npm/l/reusify-ui)](./LICENSE)
 
-- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) for Fast Refresh
-- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+## Installation
 
-## Expanding the ESLint configuration
+```bash
+npm install reusify-ui
+# or
+yarn add reusify-ui
+# or
+pnpm add reusify-ui
+```
 
-If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.
+Requires React 18 or newer.
+
+## Setup
+
+Import the stylesheet once, at your app's entry point (for example `main.jsx`, `App.jsx` or Next.js `app/layout.tsx`):
+
+```jsx
+import 'reusify-ui/styles.css';
+```
+
+### With Tailwind CSS v4
+
+Import the stylesheet from your CSS instead, into a cascade layer between Tailwind's `base` and `utilities`. Preflight can't affect the components, and your utility classes can still override them:
+
+```css
+@layer theme, base, reusify, components, utilities;
+
+@import 'tailwindcss';
+@import 'reusify-ui/styles.css' layer(reusify);
+```
+
+(Skip the JavaScript import in this case.) With Tailwind v3, the JavaScript import above is all you need.
+
+## Usage
+
+```jsx
+import { Button, Input, Card, CardBody } from 'reusify-ui';
+
+export default function App() {
+  return (
+    <Card>
+      <CardBody>
+        <Input label="Email" placeholder="you@example.com" fullWidth />
+        <Button onClick={() => alert('Hello!')}>Subscribe</Button>
+      </CardBody>
+    </Card>
+  );
+}
+```
+
+## Components
+
+| Category       | Components                                                                 |
+| -------------- | -------------------------------------------------------------------------- |
+| Actions        | `Button`                                                                   |
+| Forms          | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `RadioGroup`, `Switch` |
+| Data display   | `Card`, `CardHeader`, `CardBody`, `CardFooter`, `Badge`, `Avatar`, `AvatarGroup`, `Table`, `Divider`, `Kbd` |
+| Feedback       | `Alert`, `ToastProvider` + `useToast`, `Spinner`, `Progress`, `Skeleton`   |
+| Overlays       | `Modal`, `Drawer`, `Tooltip`, `Dropdown`                                   |
+| Navigation     | `Tabs`, `Accordion`, `Pagination`, `Breadcrumbs`                           |
+| Effects        | `SpotlightCard`, `Pattern`                                                 |
+| Hooks & utils  | `useDisclosure`, `useClickOutside`, `useControllableState`, `cn`           |
+
+### Button
+
+```jsx
+<Button>Primary</Button>
+<Button variant="secondary">Secondary</Button>
+<Button variant="outline" size="sm">Outline</Button>
+<Button variant="ghost">Ghost</Button>
+<Button variant="danger" loading>Deleting</Button>
+<Button leftIcon={<PlusIcon />} fullWidth>Add item</Button>
+```
+
+| Prop        | Type                                                                          | Default     |
+| ----------- | ----------------------------------------------------------------------------- | ----------- |
+| `variant`   | `'primary' \| 'secondary' \| 'outline' \| 'ghost' \| 'danger' \| 'success' \| 'link'` | `'primary'` |
+| `size`      | `'sm' \| 'md' \| 'lg'`                                                        | `'md'`      |
+| `loading`   | `boolean`                                                                     | `false`     |
+| `fullWidth` | `boolean`                                                                     | `false`     |
+| `leftIcon`, `rightIcon` | `ReactNode`                                                       | —           |
+
+All native `<button>` props are supported too.
+
+### Form controls
+
+```jsx
+<Input label="Email" type="email" helperText="We never share it." required />
+<Input label="Username" error="Username is taken" />
+<Textarea label="Message" rows={5} />
+<Select
+  label="Country"
+  placeholder="Choose a country"
+  options={[{ label: 'India', value: 'in' }, { label: 'USA', value: 'us' }]}
+/>
+<Checkbox label="Accept terms" />
+<RadioGroup
+  label="Plan"
+  defaultValue="pro"
+  options={[{ label: 'Free', value: 'free' }, { label: 'Pro', value: 'pro' }]}
+  onChange={(value) => console.log(value)}
+/>
+<Switch label="Notifications" checked={on} onChange={setOn} />
+```
+
+`Input`, `Textarea` and `Select` share these props: `label`, `helperText`, `error` (`boolean | string`), `size` (`'sm' | 'md' | 'lg'`), `fullWidth`, plus every native attribute. They forward refs, so they work with React Hook Form's `register()`.
+
+### Modal & Drawer
+
+```jsx
+import { Modal, Button, useDisclosure } from 'reusify-ui';
+
+function DeleteDialog() {
+  const { isOpen, open, close } = useDisclosure();
+  return (
+    <>
+      <Button variant="danger" onClick={open}>Delete</Button>
+      <Modal
+        open={isOpen}
+        onClose={close}
+        title="Delete project?"
+        description="This action cannot be undone."
+        footer={
+          <>
+            <Button variant="ghost" onClick={close}>Cancel</Button>
+            <Button variant="danger" onClick={close}>Delete</Button>
+          </>
+        }
+      />
+    </>
+  );
+}
+```
+
+Both close on Escape and overlay click, trap focus, lock page scroll and return focus to the trigger when closed.
+`Modal` sizes: `sm | md | lg | xl | full`. `Drawer` takes `placement` (`left | right | top | bottom`) and `size` (`sm | md | lg` or any CSS length).
+Add `data-autofocus` to an element inside to focus it on open.
+
+### Toasts
+
+```jsx
+import { ToastProvider, useToast } from 'reusify-ui';
+
+// Wrap your app once
+<ToastProvider position="bottom-right">
+  <App />
+</ToastProvider>
+
+// Anywhere inside
+function SaveButton() {
+  const toast = useToast();
+  return (
+    <Button onClick={() => toast.success('Saved!', { description: 'Your changes are live.' })}>
+      Save
+    </Button>
+  );
+}
+```
+
+`toast(options | string)`, `toast.success()`, `toast.error()`, `toast.warning()`, `toast.info()` and `toast.dismiss(id?)`.
+Options: `title`, `description`, `variant`, `duration` (ms, `Infinity` keeps it open) and `action`.
+
+### Tooltip & Dropdown
+
+```jsx
+<Tooltip content="Copy to clipboard" placement="top">
+  <Button variant="ghost">Copy</Button>
+</Tooltip>
+
+<Dropdown
+  trigger={<Button variant="outline">Actions</Button>}
+  align="end"
+  items={[
+    { label: 'Edit', onClick: edit },
+    { divider: true },
+    { label: 'Delete', danger: true, onClick: remove },
+  ]}
+/>
+```
+
+### Tabs & Accordion
+
+```jsx
+<Tabs
+  variant="pills" // or "line"
+  items={[
+    { value: 'profile', label: 'Profile', content: <Profile /> },
+    { value: 'billing', label: 'Billing', content: <Billing /> },
+  ]}
+/>
+
+<Accordion
+  multiple
+  items={[
+    { title: 'What is Reusify?', content: 'A React UI library.' },
+    { title: 'Is it free?', content: 'Yes, MIT licensed.' },
+  ]}
+/>
+```
+
+Both support controlled (`value` + `onChange`) and uncontrolled (`defaultValue`) usage.
+
+### Table
+
+```jsx
+<Table
+  rowKey="id"
+  striped
+  hoverable
+  data={users}
+  columns={[
+    { key: 'name', header: 'Name' },
+    { key: 'email', header: 'Email' },
+    { key: 'status', header: 'Status', align: 'right', render: (u) => <Badge>{u.status}</Badge> },
+  ]}
+/>
+```
+
+### Other components
+
+```jsx
+<Alert variant="success" title="Saved">Your profile was updated.</Alert>
+<Badge color="warning" variant="soft" dot>Pending</Badge>
+<Avatar src="/me.jpg" name="Mukesh Yadav" size="lg" />
+<AvatarGroup max={3}>{/* <Avatar /> ... */}</AvatarGroup>
+<Spinner size="lg" />
+<Progress value={60} label="Uploading" showValue />
+<Skeleton lines={3} />
+<Pagination page={page} totalPages={20} onChange={setPage} />
+<Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Settings' }]} />
+<Divider label="OR" />
+```
+
+## Dark mode
+
+Add the `dark` class (Tailwind style) or `data-theme="dark"` to `<html>` or any wrapper:
+
+```js
+document.documentElement.classList.toggle('dark');
+```
+
+## Theming
+
+Every color, radius and shadow is a CSS variable. Override them in your own CSS:
+
+```css
+:root {
+  --ru-primary: #7c3aed;    /* brand color: buttons, focus rings, active tabs */
+  --ru-radius: 0.75rem;
+  --ru-font-family: 'Inter', sans-serif;
+}
+
+.dark {
+  --ru-primary: #a78bfa;
+  --ru-surface: #18181b;
+}
+```
+
+| Variable | Purpose |
+| --- | --- |
+| `--ru-primary`, `--ru-secondary`, `--ru-success`, `--ru-danger`, `--ru-warning`, `--ru-info` | Semantic colors |
+| `--ru-bg`, `--ru-surface`, `--ru-muted`, `--ru-border` | Page background, surfaces and hairline borders |
+| `--ru-text`, `--ru-text-muted` | Text colors |
+| `--ru-radius-sm`, `--ru-radius`, `--ru-radius-lg` | Corner radius |
+| `--ru-shadow-xs`, `--ru-shadow-sm`, `--ru-shadow`, `--ru-shadow-lg` | Layered shadows (hairline ring + soft drops) |
+| `--ru-font-family`, `--ru-font-mono` | Fonts (UI text inherits from your page by default) |
+| `--ru-z-dropdown`, `--ru-z-overlay`, `--ru-z-toast`, `--ru-z-tooltip` | Stacking order |
+
+Every component also accepts `className`, so you can add your own (or Tailwind) classes.
+
+### Effects
+
+```jsx
+<div style={{ position: 'relative' }}>
+  <Pattern variant="grid" size={24} />   {/* or variant="dots" */}
+  <h1 style={{ position: 'relative' }}>Hero</h1>
+</div>
+
+<SpotlightCard color="#f472b6">          {/* glow follows the cursor */}
+  <CardBody>Feature</CardBody>
+</SpotlightCard>
+
+<Kbd>⌘</Kbd> <Kbd>K</Kbd>
+```
+
+## Next.js
+
+The package ships with a `'use client'` directive, so you can import components directly into App Router pages and layouts.
+
+## Upgrading from 1.x
+
+- Import `reusify-ui/styles.css` once. Tailwind is no longer required.
+- `<Button variant="primary" | "secondary">` still works as before.
+
+## License
+
+MIT © Mukesh Yadav