reusify-ui 2.0.0 → 2.1.0

package/README.md

@@ -1,4 +1,5 @@
 # Reusify UI
+Add [Reusify UI](https://reusify-ui.vercel.app) components to your projects.
 
 Reusable, accessible React components with built-in dark mode and CSS-variable theming.
 Works with or without Tailwind CSS.
@@ -60,9 +61,9 @@ export default function App() {
 
 | Category       | Components                                                                 |
 | -------------- | -------------------------------------------------------------------------- |
-| Actions        | `Button`                                                                   |
-| Forms          | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `RadioGroup`, `Switch` |
-| Data display   | `Card`, `CardHeader`, `CardBody`, `CardFooter`, `Badge`, `Avatar`, `AvatarGroup`, `Table`, `Divider`, `Kbd` |
+| Actions        | `Button`, `ButtonGroup`                                                    |
+| Forms          | `Input`, `Textarea`, `Select`, `Checkbox`, `Radio`, `RadioGroup`, `Switch`, `Calendar` |
+| Data display   | `Card`, `CardHeader`, `CardBody`, `CardFooter`, `Badge`, `Avatar`, `AvatarGroup`, `Table`, `Divider`, `Kbd`, `FrameCard` |
 | Feedback       | `Alert`, `ToastProvider` + `useToast`, `Spinner`, `Progress`, `Skeleton`   |
 | Overlays       | `Modal`, `Drawer`, `Tooltip`, `Dropdown`                                   |
 | Navigation     | `Tabs`, `Accordion`, `Pagination`, `Breadcrumbs`                           |
@@ -71,24 +72,55 @@ export default function App() {
 
 ### Button
 
+Pick a **variant** by emphasis, then a **color** for meaning:
+
+| Emphasis | Variants | Use for |
+| --- | --- | --- |
+| High | `solid` (default), `brand`, `gradient`, `glossy`, `pixel` | The main action; one brand or gradient hero CTA per page |
+| Medium | `secondary`, `soft`, `outline`, `subtle`, `raised`, `framed` | Partners of the main action, menus, actions in cards |
+| Low | `ghost`, `text`, `link`, `dashed` | Toolbars, "Learn more", inline and "add" actions |
+
+Every button also takes **any CSS color**, a text color, a corner radius and a content alignment:
+
+```jsx
+<Button variant="pixel" color="#2563eb" justify="between" rightIcon={<TerminalIcon />}>Copy build notes</Button>
+<Button variant="glossy" color="oklch(0.6 0.2 260)" radius="xl">Sign up</Button>
+<Button color="#facc15" textColor="#1c1917" radius={4}>Yellow</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>
+<Button>Save</Button>
+<Button variant="brand" rightIcon={<ArrowRight />}>Start your first lab</Button> {/* emerald, gold in dark mode */}
+<Button variant="gradient" rightIcon={<ArrowRight />}>Get started</Button>
+<Button variant="secondary">Cancel</Button>
+<Button variant="soft" color="success">Approve</Button>
+<Button color="danger" loading>Deleting</Button>
+<Button variant="text">Learn more</Button>
+
+<Button iconOnly aria-label="Edit" variant="ghost"><EditIcon /></Button>
+<Button pill leftIcon={<PlusIcon />}>Follow</Button>
+<Button href="/docs">Read the docs</Button>   {/* renders an <a> */}
+
+<ButtonGroup attached aria-label="Period">
+  <Button variant="secondary">Day</Button>
+  <Button>Week</Button>
+  <Button variant="secondary">Month</Button>
+</ButtonGroup>
 ```
 
-| 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`                                                       | —           |
+| Prop        | Type | Default |
+| ----------- | ---- | ------- |
+| `variant`   | `'solid' \| 'brand' \| 'gradient' \| 'glossy' \| 'pixel' \| 'secondary' \| 'soft' \| 'outline' \| 'subtle' \| 'raised' \| 'framed' \| 'ghost' \| 'text' \| 'link' \| 'dashed'` | `'solid'` |
+| `color`     | `'primary' \| 'secondary' \| 'success' \| 'danger' \| 'warning' \| 'info'` or any CSS color | `'primary'` |
+| `textColor` | CSS color | — |
+| `radius`    | `'none' \| 'sm' \| 'md' \| 'lg' \| 'xl' \| '2xl' \| 'full'`, a number (px) or a CSS length | size default |
+| `justify`   | `'center' \| 'start' \| 'between'` | `'center'` |
+| `size`      | `'sm' \| 'md' \| 'lg'` | `'md'` |
+| `iconOnly`, `pill`, `fullWidth`, `loading` | `boolean` | `false` |
+| `leftIcon`, `rightIcon` | `ReactNode` | — |
+| `href`      | `string` (renders an `<a>`) | — |
 
-All native `<button>` props are supported too.
+All native `<button>` (or `<a>`) props are supported too. `variant="primary" | "danger" | "success"` from 2.0 still work.
 
 ### Form controls
 
@@ -175,6 +207,11 @@ Options: `title`, `description`, `variant`, `duration` (ms, `Infinity` keeps it
   <Button variant="ghost">Copy</Button>
 </Tooltip>
 
+{/* size sm|md|lg, arrow on by default, any colors, open pins it */}
+<Tooltip content="Reusify UI" placement="bottom" size="lg" color="#0a0a0a" textColor="#fff" open>
+  <Button variant="raised" iconOnly radius="xl" aria-label="Reusify UI"><Logo /></Button>
+</Tooltip>
+
 <Dropdown
   trigger={<Button variant="outline">Actions</Button>}
   align="end"
@@ -224,6 +261,24 @@ Both support controlled (`value` + `onChange`) and uncontrolled (`defaultValue`)
 />
 ```
 
+#### Pagination
+
+```jsx
+// Client-side: the table slices `data` for you
+<Table rowKey="id" columns={columns} data={users} pagination={{ pageSize: 10, pageSizeOptions: [10, 25, 50] }} />
+
+// Server-side: `data` is the current page, totalRows is the full count
+<Table
+  rowKey="id"
+  columns={columns}
+  data={rows}
+  loading={loading}
+  pagination={{ page, onPageChange: setPage, pageSize: 20, totalRows: total }}
+/>
+```
+
+`pagination` accepts `true` (10 rows per page) or `{ pageSize, defaultPageSize, pageSizeOptions, onPageSizeChange, page, defaultPage, onPageChange, totalRows, siblingCount }`. The footer shows "Showing 1–10 of 57", an optional rows-per-page select and page buttons.
+
 ### Other components
 
 ```jsx
@@ -237,6 +292,26 @@ Both support controlled (`value` + `onChange`) and uncontrolled (`defaultValue`)
 <Pagination page={page} totalPages={20} onChange={setPage} />
 <Breadcrumbs items={[{ label: 'Home', href: '/' }, { label: 'Settings' }]} />
 <Divider label="OR" />
+<Avatar name="Mia Johnson" status="online" badge={1} ring="primary" />
+```
+
+### FrameCard & Calendar
+
+```jsx
+<FrameCard
+  title="Tasks Project"
+  color="warning"            // semantic name or any CSS color
+  collapsible
+  footer={<button className="ru-frame-card__link">View All Tasks</button>}
+  onPrev={prev}
+  onNext={next}
+>
+  <Checkbox label="Design Homepage" defaultChecked />
+</FrameCard>
+
+<FrameCard title="Start Project" color="#2563eb" titlePlacement="frame" onPrev={prev} onNext={next}>
+  <Calendar mode="range" value={range} onChange={setRange} color="#2563eb" />
+</FrameCard>
 ```
 
 ## Dark mode