@tanishraj/ui-kit 2.0.1 → 2.1.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.cjs.js +2 -2
- package/dist/index.cjs.js.map +1 -1
- package/dist/index.d.ts +118 -0
- package/dist/index.es.js +50 -32
- package/dist/index.es.js.map +1 -1
- package/package.json +2 -1
- package/readme.md +83 -16
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@tanishraj/ui-kit",
|
|
3
|
-
"version": "2.0
|
|
3
|
+
"version": "2.1.0",
|
|
4
4
|
"description": "A production-ready React component library with modern tooling, Storybook docs, and TypeScript support.",
|
|
5
5
|
"author": "Tanishraj",
|
|
6
6
|
"license": "MIT",
|
|
@@ -67,6 +67,7 @@
|
|
|
67
67
|
"type-check": "tsc --noEmit"
|
|
68
68
|
},
|
|
69
69
|
"dependencies": {
|
|
70
|
+
"@floating-ui/react": "^0.27.19",
|
|
70
71
|
"class-variance-authority": "^0.7.1",
|
|
71
72
|
"clsx": "^2.1.1",
|
|
72
73
|
"d3": "^7.9.0",
|
package/readme.md
CHANGED
|
@@ -57,6 +57,8 @@ pnpm add @tanishraj/ui-kit
|
|
|
57
57
|
|
|
58
58
|
```tsx
|
|
59
59
|
import {
|
|
60
|
+
AnimatePresence,
|
|
61
|
+
AnimatePresenceChild,
|
|
60
62
|
Button,
|
|
61
63
|
Badge,
|
|
62
64
|
Avatar,
|
|
@@ -66,6 +68,9 @@ import {
|
|
|
66
68
|
CheckboxGroup,
|
|
67
69
|
Chip,
|
|
68
70
|
Divider,
|
|
71
|
+
Drawer,
|
|
72
|
+
Portal,
|
|
73
|
+
Link,
|
|
69
74
|
} from '@tanishraj/ui-kit';
|
|
70
75
|
|
|
71
76
|
export function Demo() {
|
|
@@ -88,10 +93,22 @@ npm install @tanishraj/ui-kit
|
|
|
88
93
|
Use component APIs directly from the package.
|
|
89
94
|
|
|
90
95
|
```tsx
|
|
91
|
-
import {
|
|
96
|
+
import {
|
|
97
|
+
AnimatePresence,
|
|
98
|
+
AnimatePresenceChild,
|
|
99
|
+
Avatar,
|
|
100
|
+
Button,
|
|
101
|
+
Chip,
|
|
102
|
+
Divider,
|
|
103
|
+
Link,
|
|
104
|
+
Drawer,
|
|
105
|
+
} from '@tanishraj/ui-kit';
|
|
92
106
|
import { Plus } from 'lucide-react';
|
|
107
|
+
import { useState } from 'react';
|
|
93
108
|
|
|
94
109
|
export default function Demo() {
|
|
110
|
+
const [drawerOpen, setDrawerOpen] = useState(false);
|
|
111
|
+
|
|
95
112
|
return (
|
|
96
113
|
<div className='flex items-center gap-4'>
|
|
97
114
|
<Button variant='primary' size='md'>
|
|
@@ -101,7 +118,26 @@ export default function Demo() {
|
|
|
101
118
|
<Chip icon={Plus} variant='success'>
|
|
102
119
|
Active
|
|
103
120
|
</Chip>
|
|
121
|
+
<Button onClick={() => setDrawerOpen(true)}>Open Drawer</Button>
|
|
122
|
+
<Drawer
|
|
123
|
+
footer={<Button onClick={() => setDrawerOpen(false)}>Close</Button>}
|
|
124
|
+
onClose={() => setDrawerOpen(false)}
|
|
125
|
+
open={drawerOpen}
|
|
126
|
+
title='Title'
|
|
127
|
+
>
|
|
128
|
+
Drawer content
|
|
129
|
+
</Drawer>
|
|
130
|
+
<Link external href='/components' leadingIcon={Plus}>
|
|
131
|
+
Components
|
|
132
|
+
</Link>
|
|
104
133
|
<Divider className='w-32' />
|
|
134
|
+
<AnimatePresence presence={drawerOpen}>
|
|
135
|
+
<AnimatePresenceChild>
|
|
136
|
+
<div className='animate-in fade-in duration-500'>
|
|
137
|
+
Animated helper content
|
|
138
|
+
</div>
|
|
139
|
+
</AnimatePresenceChild>
|
|
140
|
+
</AnimatePresence>
|
|
105
141
|
</div>
|
|
106
142
|
);
|
|
107
143
|
}
|
|
@@ -148,11 +184,15 @@ If your app uses a custom design token strategy, import one packaged theme and o
|
|
|
148
184
|
|
|
149
185
|
```tsx
|
|
150
186
|
import {
|
|
187
|
+
AnimatePresence,
|
|
188
|
+
AnimatePresenceChild,
|
|
151
189
|
Breadcrumb,
|
|
152
190
|
Button,
|
|
153
191
|
CheckboxGroup,
|
|
154
192
|
Chip,
|
|
155
193
|
Divider,
|
|
194
|
+
Drawer,
|
|
195
|
+
Link,
|
|
156
196
|
} from '@tanishraj/ui-kit';
|
|
157
197
|
import { Home, Plus, Tag } from 'lucide-react';
|
|
158
198
|
|
|
@@ -173,6 +213,17 @@ export function ComponentExamples() {
|
|
|
173
213
|
Filter
|
|
174
214
|
</Chip>
|
|
175
215
|
|
|
216
|
+
<Link
|
|
217
|
+
external
|
|
218
|
+
href='/components/link'
|
|
219
|
+
leadingIcon={Home}
|
|
220
|
+
truncate
|
|
221
|
+
underline='always'
|
|
222
|
+
variant='primary'
|
|
223
|
+
>
|
|
224
|
+
Link Truncated
|
|
225
|
+
</Link>
|
|
226
|
+
|
|
176
227
|
<CheckboxGroup
|
|
177
228
|
label='Notification channels'
|
|
178
229
|
options={[
|
|
@@ -187,6 +238,14 @@ export function ComponentExamples() {
|
|
|
187
238
|
Add item
|
|
188
239
|
</Button>
|
|
189
240
|
</Divider>
|
|
241
|
+
|
|
242
|
+
<AnimatePresence presence>
|
|
243
|
+
<AnimatePresenceChild>
|
|
244
|
+
<div className='animate-in slide-in-from-right duration-500'>
|
|
245
|
+
Presence-managed content
|
|
246
|
+
</div>
|
|
247
|
+
</AnimatePresenceChild>
|
|
248
|
+
</AnimatePresence>
|
|
190
249
|
</div>
|
|
191
250
|
);
|
|
192
251
|
}
|
|
@@ -194,10 +253,14 @@ export function ComponentExamples() {
|
|
|
194
253
|
|
|
195
254
|
### Component Notes
|
|
196
255
|
|
|
256
|
+
- `AnimatePresence` and `AnimatePresenceChild` keep exiting elements mounted until their CSS `animationend` event fires. Use them with `data-state`, `animate-in`, `animate-out`, and slide/fade utilities for smooth enter/exit motion.
|
|
197
257
|
- `Breadcrumb` supports `appearance="ghost" | "outline"` and `separator=">" | "/"`. The chevron separator is rendered as an icon.
|
|
198
258
|
- `Checkbox` and `CheckboxGroup` support `shape="square" | "circle"`, with `square` as the default.
|
|
199
259
|
- `Chip` supports `variant`, `appearance="filled" | "outline"`, `shape`, `size`, `inverted`, optional `icon`, and removable chips via `onClose`.
|
|
200
260
|
- `Divider` supports `orientation="horizontal" | "vertical"` and optional centered content through `children`.
|
|
261
|
+
- `Drawer` is controlled with `open` and `onClose`, supports `placement="right" | "left" | "top" | "bottom"`, `size="sm" | "md" | "lg" | "full"`, overlay close, Escape close, footer actions, Portal targeting, and placement-aware slide animations.
|
|
262
|
+
- `Portal` renders to `document.body` by default and can target a custom container via `container`, `containerRef`, or `containerId`.
|
|
263
|
+
- `Link` supports `variant`, `size`, `underline="none" | "hover" | "always"`, `inverted`, `disabled`, `truncate`, optional leading/trailing icons, and `external` links.
|
|
201
264
|
|
|
202
265
|
### Documentation and examples
|
|
203
266
|
|
|
@@ -302,21 +365,25 @@ src/
|
|
|
302
365
|
|
|
303
366
|
## Components
|
|
304
367
|
|
|
305
|
-
| Component | Location | Storybook
|
|
306
|
-
| ----------------- | ---------------------------------- |
|
|
307
|
-
| Accordion | `src/components/Accordion` | [Accordion](https://tanishraj.github.io/ui-kit/?path=/story/components-accordion--default)
|
|
308
|
-
| Alert | `src/components/Alert` | [Alert](https://tanishraj.github.io/ui-kit/?path=/story/components-alert--default)
|
|
309
|
-
|
|
|
310
|
-
|
|
|
311
|
-
|
|
|
312
|
-
|
|
|
313
|
-
|
|
|
314
|
-
|
|
|
315
|
-
|
|
|
316
|
-
|
|
|
317
|
-
|
|
|
318
|
-
|
|
|
319
|
-
|
|
|
368
|
+
| Component | Location | Storybook | Status |
|
|
369
|
+
| ----------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------ | ------ |
|
|
370
|
+
| Accordion | `src/components/Accordion` | [Accordion](https://tanishraj.github.io/ui-kit/?path=/story/components-accordion--default) | Stable |
|
|
371
|
+
| Alert | `src/components/Alert` | [Alert](https://tanishraj.github.io/ui-kit/?path=/story/components-alert--default) | Stable |
|
|
372
|
+
| AnimatePresence | `src/components/AnimatePresence` | [AnimatePresence](https://tanishraj.github.io/ui-kit/?path=/story/ui-kit-components-animatepresence--basicexample) | Stable |
|
|
373
|
+
| Avatar | `src/components/Avatar` | [Avatar](https://tanishraj.github.io/ui-kit/?path=/story/components-avatar--playground) | Stable |
|
|
374
|
+
| AvatarGroup | `src/components/AvatarGroup` | [AvatarGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-avatargroup--default) | Stable |
|
|
375
|
+
| Badge | `src/components/Badge` | [Badge](https://tanishraj.github.io/ui-kit/?path=/story/components-badge--playground) | Stable |
|
|
376
|
+
| Breadcrumb | `src/components/Breadcrumb` | [Breadcrumb](https://tanishraj.github.io/ui-kit/?path=/story/components-breadcrumb--playground) | Stable |
|
|
377
|
+
| Button | `src/components/Button` | [Button](https://tanishraj.github.io/ui-kit/?path=/story/components-button--playground) | Stable |
|
|
378
|
+
| ButtonGroup | `src/components/ButtonGroup` | [ButtonGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-buttongroup--playground) | Stable |
|
|
379
|
+
| Checkbox | `src/components/Checkbox` | [Checkbox](https://tanishraj.github.io/ui-kit/?path=/story/components-checkbox--playground) | Stable |
|
|
380
|
+
| CheckboxGroup | `src/components/CheckboxGroup` | [CheckboxGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-checkboxgroup--playground) | Stable |
|
|
381
|
+
| Chip | `src/components/Chip` | [Chip](https://tanishraj.github.io/ui-kit/?path=/story/components-chip--playground) | Stable |
|
|
382
|
+
| Divider | `src/components/Divider` | [Divider](https://tanishraj.github.io/ui-kit/?path=/story/components-divider--playground) | Stable |
|
|
383
|
+
| Drawer | `src/components/Drawer` | [Drawer](https://tanishraj.github.io/ui-kit/?path=/story/components-drawer--playground) | Stable |
|
|
384
|
+
| Link | `src/components/Link` | [Link](https://tanishraj.github.io/ui-kit/?path=/story/components-link--playground) | Stable |
|
|
385
|
+
| OrganizationChart | `src/components/OrganizationChart` | [OrganizationChart](https://tanishraj.github.io/ui-kit/?path=/story/components-organizationchart--playground) | Stable |
|
|
386
|
+
| Portal | `src/components/Portal` | N/A | Stable |
|
|
320
387
|
|
|
321
388
|
## Versioning and Changelog
|
|
322
389
|
|