@tanishraj/ui-kit 1.1.1 → 2.0.1
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 +145 -1
- package/dist/index.es.js +32 -13
- package/dist/index.es.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +86 -23
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -61,10 +61,15 @@ import {
|
|
|
61
61
|
Badge,
|
|
62
62
|
Avatar,
|
|
63
63
|
AvatarGroup,
|
|
64
|
+
Breadcrumb,
|
|
65
|
+
Checkbox,
|
|
66
|
+
CheckboxGroup,
|
|
67
|
+
Chip,
|
|
68
|
+
Divider,
|
|
64
69
|
} from '@tanishraj/ui-kit';
|
|
65
70
|
|
|
66
71
|
export function Demo() {
|
|
67
|
-
return <Button variant=
|
|
72
|
+
return <Button variant='primary'>Get Started</Button>;
|
|
68
73
|
}
|
|
69
74
|
```
|
|
70
75
|
|
|
@@ -83,15 +88,20 @@ npm install @tanishraj/ui-kit
|
|
|
83
88
|
Use component APIs directly from the package.
|
|
84
89
|
|
|
85
90
|
```tsx
|
|
86
|
-
import { Button,
|
|
91
|
+
import { Avatar, Button, Chip, Divider } from '@tanishraj/ui-kit';
|
|
92
|
+
import { Plus } from 'lucide-react';
|
|
87
93
|
|
|
88
94
|
export default function Demo() {
|
|
89
95
|
return (
|
|
90
|
-
<div className=
|
|
91
|
-
<Button variant=
|
|
96
|
+
<div className='flex items-center gap-4'>
|
|
97
|
+
<Button variant='primary' size='md'>
|
|
92
98
|
Primary Button
|
|
93
99
|
</Button>
|
|
94
|
-
<Avatar initials=
|
|
100
|
+
<Avatar initials='AB' variant='primary' />
|
|
101
|
+
<Chip icon={Plus} variant='success'>
|
|
102
|
+
Active
|
|
103
|
+
</Chip>
|
|
104
|
+
<Divider className='w-32' />
|
|
95
105
|
</div>
|
|
96
106
|
);
|
|
97
107
|
}
|
|
@@ -114,16 +124,6 @@ To add a new packaged theme later:
|
|
|
114
124
|
3. Update the `copy:theme` script to include the new file.
|
|
115
125
|
4. Optionally publish a themed import via `./themes/<theme-name>.css` (already supported by the wildcard export pattern).
|
|
116
126
|
|
|
117
|
-
### Adding new themes (for maintainers)
|
|
118
|
-
|
|
119
|
-
To add a new packaged theme later:
|
|
120
|
-
|
|
121
|
-
1. Add `src/themes/<theme-name>.css`.
|
|
122
|
-
2. Add a package export in `package.json`:
|
|
123
|
-
- `./theme-<theme-name>.css` -> `./dist/themes/<theme-name>.css`
|
|
124
|
-
3. Update the `copy:theme` script to include the new file.
|
|
125
|
-
4. Optionally publish a themed import via `./themes/<theme-name>.css` (already supported by the wildcard export pattern).
|
|
126
|
-
|
|
127
127
|
You can also import through:
|
|
128
128
|
|
|
129
129
|
```ts
|
|
@@ -138,10 +138,67 @@ If your app uses a custom design token strategy, import one packaged theme and o
|
|
|
138
138
|
- Props follow consistent naming patterns:
|
|
139
139
|
- `size` (`sm`, `md`, `lg`)
|
|
140
140
|
- `variant` (status/visual intent)
|
|
141
|
+
- `appearance` (container treatment such as `filled`, `outline`, `ghost`, or `dashed`, depending on component)
|
|
141
142
|
- `shape` (`circle`, `square` where supported)
|
|
143
|
+
- `inverted` for alternate surface color modes where supported
|
|
142
144
|
- `disabled`, `loading`, and interaction states where applicable
|
|
143
145
|
- Component stories in `*.stories.tsx` are the source of truth for public usage patterns and prop combinations.
|
|
144
146
|
|
|
147
|
+
### Common Examples
|
|
148
|
+
|
|
149
|
+
```tsx
|
|
150
|
+
import {
|
|
151
|
+
Breadcrumb,
|
|
152
|
+
Button,
|
|
153
|
+
CheckboxGroup,
|
|
154
|
+
Chip,
|
|
155
|
+
Divider,
|
|
156
|
+
} from '@tanishraj/ui-kit';
|
|
157
|
+
import { Home, Plus, Tag } from 'lucide-react';
|
|
158
|
+
|
|
159
|
+
export function ComponentExamples() {
|
|
160
|
+
return (
|
|
161
|
+
<div className='flex flex-col gap-6'>
|
|
162
|
+
<Breadcrumb
|
|
163
|
+
appearance='outline'
|
|
164
|
+
items={[
|
|
165
|
+
{ label: 'Home', href: '/', icon: Home },
|
|
166
|
+
{ label: 'Components', href: '/components' },
|
|
167
|
+
{ label: 'Chip' },
|
|
168
|
+
]}
|
|
169
|
+
separator='>'
|
|
170
|
+
/>
|
|
171
|
+
|
|
172
|
+
<Chip appearance='filled' icon={Tag} shape='circle' variant='primary'>
|
|
173
|
+
Filter
|
|
174
|
+
</Chip>
|
|
175
|
+
|
|
176
|
+
<CheckboxGroup
|
|
177
|
+
label='Notification channels'
|
|
178
|
+
options={[
|
|
179
|
+
{ label: 'Email', value: 'email' },
|
|
180
|
+
{ label: 'SMS', value: 'sms' },
|
|
181
|
+
]}
|
|
182
|
+
shape='square'
|
|
183
|
+
/>
|
|
184
|
+
|
|
185
|
+
<Divider>
|
|
186
|
+
<Button leadingIcon={Plus} size='sm' variant='default'>
|
|
187
|
+
Add item
|
|
188
|
+
</Button>
|
|
189
|
+
</Divider>
|
|
190
|
+
</div>
|
|
191
|
+
);
|
|
192
|
+
}
|
|
193
|
+
```
|
|
194
|
+
|
|
195
|
+
### Component Notes
|
|
196
|
+
|
|
197
|
+
- `Breadcrumb` supports `appearance="ghost" | "outline"` and `separator=">" | "/"`. The chevron separator is rendered as an icon.
|
|
198
|
+
- `Checkbox` and `CheckboxGroup` support `shape="square" | "circle"`, with `square` as the default.
|
|
199
|
+
- `Chip` supports `variant`, `appearance="filled" | "outline"`, `shape`, `size`, `inverted`, optional `icon`, and removable chips via `onClose`.
|
|
200
|
+
- `Divider` supports `orientation="horizontal" | "vertical"` and optional centered content through `children`.
|
|
201
|
+
|
|
145
202
|
### Documentation and examples
|
|
146
203
|
|
|
147
204
|
- Storybook: run locally with `npm run storybook`
|
|
@@ -245,14 +302,20 @@ src/
|
|
|
245
302
|
|
|
246
303
|
## Components
|
|
247
304
|
|
|
248
|
-
| Component
|
|
249
|
-
|
|
|
250
|
-
|
|
|
251
|
-
|
|
|
252
|
-
| Avatar
|
|
253
|
-
| AvatarGroup
|
|
254
|
-
|
|
|
255
|
-
|
|
|
305
|
+
| Component | Location | Storybook | Status |
|
|
306
|
+
| ----------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------- | ------ |
|
|
307
|
+
| Accordion | `src/components/Accordion` | [Accordion](https://tanishraj.github.io/ui-kit/?path=/story/components-accordion--default) | Stable |
|
|
308
|
+
| Alert | `src/components/Alert` | [Alert](https://tanishraj.github.io/ui-kit/?path=/story/components-alert--default) | Stable |
|
|
309
|
+
| Avatar | `src/components/Avatar` | [Avatar](https://tanishraj.github.io/ui-kit/?path=/story/components-avatar--playground) | Stable |
|
|
310
|
+
| AvatarGroup | `src/components/AvatarGroup` | [AvatarGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-avatargroup--default) | Stable |
|
|
311
|
+
| Badge | `src/components/Badge` | [Badge](https://tanishraj.github.io/ui-kit/?path=/story/components-badge--playground) | Stable |
|
|
312
|
+
| Breadcrumb | `src/components/Breadcrumb` | [Breadcrumb](https://tanishraj.github.io/ui-kit/?path=/story/components-breadcrumb--playground) | Stable |
|
|
313
|
+
| Button | `src/components/Button` | [Button](https://tanishraj.github.io/ui-kit/?path=/story/components-button--playground) | Stable |
|
|
314
|
+
| ButtonGroup | `src/components/ButtonGroup` | [ButtonGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-buttongroup--playground) | Stable |
|
|
315
|
+
| Checkbox | `src/components/Checkbox` | [Checkbox](https://tanishraj.github.io/ui-kit/?path=/story/components-checkbox--playground) | Stable |
|
|
316
|
+
| CheckboxGroup | `src/components/CheckboxGroup` | [CheckboxGroup](https://tanishraj.github.io/ui-kit/?path=/story/components-checkboxgroup--playground) | Stable |
|
|
317
|
+
| Chip | `src/components/Chip` | [Chip](https://tanishraj.github.io/ui-kit/?path=/story/components-chip--playground) | Stable |
|
|
318
|
+
| Divider | `src/components/Divider` | [Divider](https://tanishraj.github.io/ui-kit/?path=/story/components-divider--playground) | Stable |
|
|
256
319
|
| OrganizationChart | `src/components/OrganizationChart` | [OrganizationChart](https://tanishraj.github.io/ui-kit/?path=/story/components-organizationchart--playground) | Stable |
|
|
257
320
|
|
|
258
321
|
## Versioning and Changelog
|