@grazziotin/react-components-next 0.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/README.md +174 -0
- package/dist/index.css +2 -0
- package/dist/index.d.mts +67 -0
- package/dist/index.d.ts +67 -0
- package/dist/index.js +415 -0
- package/dist/index.js.map +1 -0
- package/dist/index.mjs +400 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +73 -0
package/README.md
ADDED
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
# React Components Library
|
|
2
|
+
|
|
3
|
+
Biblioteca de componentes React reutilizáveis, construída com TypeScript e Tailwind CSS.
|
|
4
|
+
|
|
5
|
+
## Instalação
|
|
6
|
+
|
|
7
|
+
```bash
|
|
8
|
+
npm install react-components-next
|
|
9
|
+
```
|
|
10
|
+
|
|
11
|
+
> **Atenção:** esta biblioteca usa classes do Tailwind CSS. Certifique-se de que o Tailwind esteja configurado no seu projeto.
|
|
12
|
+
|
|
13
|
+
## Componentes disponíveis
|
|
14
|
+
|
|
15
|
+
| Componente | Descrição |
|
|
16
|
+
|------------|-----------|
|
|
17
|
+
| `Button` | Botão com variantes, tamanhos, loading e ícones |
|
|
18
|
+
| `Input` | Campo de entrada com label, hint, erro e addons |
|
|
19
|
+
| `Card` | Container com header, content e footer compostos |
|
|
20
|
+
| `Badge` | Etiqueta colorida para status e categorias |
|
|
21
|
+
| `Avatar` | Foto de perfil com fallback de iniciais |
|
|
22
|
+
|
|
23
|
+
## Uso
|
|
24
|
+
|
|
25
|
+
```tsx
|
|
26
|
+
import { Button, Card, CardHeader, CardTitle, CardContent, Input, Badge, Avatar } from "react-components-next";
|
|
27
|
+
|
|
28
|
+
export function Example() {
|
|
29
|
+
return (
|
|
30
|
+
<Card>
|
|
31
|
+
<CardHeader>
|
|
32
|
+
<CardTitle>Perfil</CardTitle>
|
|
33
|
+
</CardHeader>
|
|
34
|
+
<CardContent>
|
|
35
|
+
<div className="flex items-center gap-3">
|
|
36
|
+
<Avatar fallback="João Silva" size="md" />
|
|
37
|
+
<div>
|
|
38
|
+
<p>João Silva</p>
|
|
39
|
+
<Badge variant="success" dot>Online</Badge>
|
|
40
|
+
</div>
|
|
41
|
+
</div>
|
|
42
|
+
<Input label="E-mail" type="email" placeholder="joao@exemplo.com" />
|
|
43
|
+
<Button variant="primary" fullWidth>Salvar</Button>
|
|
44
|
+
</CardContent>
|
|
45
|
+
</Card>
|
|
46
|
+
);
|
|
47
|
+
}
|
|
48
|
+
```
|
|
49
|
+
|
|
50
|
+
## Componentes
|
|
51
|
+
|
|
52
|
+
### Button
|
|
53
|
+
|
|
54
|
+
```tsx
|
|
55
|
+
<Button
|
|
56
|
+
variant="primary" // "primary" | "secondary" | "outline" | "ghost" | "destructive"
|
|
57
|
+
size="md" // "sm" | "md" | "lg"
|
|
58
|
+
loading={false} // boolean
|
|
59
|
+
fullWidth={false} // boolean
|
|
60
|
+
leftIcon={<Icon />} // ReactNode
|
|
61
|
+
rightIcon={<Icon />} // ReactNode
|
|
62
|
+
>
|
|
63
|
+
Clique aqui
|
|
64
|
+
</Button>
|
|
65
|
+
```
|
|
66
|
+
|
|
67
|
+
### Input
|
|
68
|
+
|
|
69
|
+
```tsx
|
|
70
|
+
<Input
|
|
71
|
+
label="Nome"
|
|
72
|
+
placeholder="Digite..."
|
|
73
|
+
hint="Texto de ajuda"
|
|
74
|
+
error="Mensagem de erro"
|
|
75
|
+
size="md" // "sm" | "md" | "lg"
|
|
76
|
+
leftAddon={<Icon />} // ReactNode
|
|
77
|
+
rightAddon={<Icon />} // ReactNode
|
|
78
|
+
fullWidth={false}
|
|
79
|
+
/>
|
|
80
|
+
```
|
|
81
|
+
|
|
82
|
+
### Card
|
|
83
|
+
|
|
84
|
+
```tsx
|
|
85
|
+
<Card shadow="sm" padding="md" hoverable bordered>
|
|
86
|
+
<CardHeader>
|
|
87
|
+
<CardTitle>Título</CardTitle>
|
|
88
|
+
<CardDescription>Descrição</CardDescription>
|
|
89
|
+
</CardHeader>
|
|
90
|
+
<CardContent>Conteúdo</CardContent>
|
|
91
|
+
<CardFooter>
|
|
92
|
+
<Button>Ação</Button>
|
|
93
|
+
</CardFooter>
|
|
94
|
+
</Card>
|
|
95
|
+
```
|
|
96
|
+
|
|
97
|
+
### Badge
|
|
98
|
+
|
|
99
|
+
```tsx
|
|
100
|
+
<Badge
|
|
101
|
+
variant="success" // "default" | "primary" | "success" | "warning" | "danger" | "info"
|
|
102
|
+
dot={false} // boolean - exibe um ponto colorido
|
|
103
|
+
>
|
|
104
|
+
Online
|
|
105
|
+
</Badge>
|
|
106
|
+
```
|
|
107
|
+
|
|
108
|
+
### Avatar
|
|
109
|
+
|
|
110
|
+
```tsx
|
|
111
|
+
<Avatar
|
|
112
|
+
src="https://..." // URL da imagem (opcional)
|
|
113
|
+
alt="Nome do usuário"
|
|
114
|
+
fallback="João Silva" // usado para gerar as iniciais
|
|
115
|
+
size="md" // "xs" | "sm" | "md" | "lg" | "xl"
|
|
116
|
+
/>
|
|
117
|
+
```
|
|
118
|
+
|
|
119
|
+
## Desenvolvimento
|
|
120
|
+
|
|
121
|
+
```bash
|
|
122
|
+
# Instalar dependências
|
|
123
|
+
npm install
|
|
124
|
+
|
|
125
|
+
# Rodar servidor de desenvolvimento com showcase
|
|
126
|
+
npm run dev
|
|
127
|
+
|
|
128
|
+
# Build da biblioteca para npm
|
|
129
|
+
npm run build:lib
|
|
130
|
+
|
|
131
|
+
# Build completo (biblioteca + Next.js)
|
|
132
|
+
npm run build:all
|
|
133
|
+
|
|
134
|
+
# Verificar tipos TypeScript
|
|
135
|
+
npm run type-check
|
|
136
|
+
```
|
|
137
|
+
|
|
138
|
+
## Publicar no npm
|
|
139
|
+
|
|
140
|
+
```bash
|
|
141
|
+
# Fazer login no npm
|
|
142
|
+
npm login
|
|
143
|
+
|
|
144
|
+
# Publicar (executa build:lib automaticamente via prepublishOnly)
|
|
145
|
+
npm publish
|
|
146
|
+
```
|
|
147
|
+
|
|
148
|
+
## Estrutura do projeto
|
|
149
|
+
|
|
150
|
+
```
|
|
151
|
+
src/
|
|
152
|
+
├── app/ # Next.js App Router (showcase)
|
|
153
|
+
│ ├── page.tsx # Página inicial com lista de componentes
|
|
154
|
+
│ └── showcase/ # Páginas de demonstração
|
|
155
|
+
│ ├── button/
|
|
156
|
+
│ ├── input/
|
|
157
|
+
│ ├── card/
|
|
158
|
+
│ ├── badge/
|
|
159
|
+
│ └── avatar/
|
|
160
|
+
├── components/ # Biblioteca de componentes (publicada no npm)
|
|
161
|
+
│ ├── index.ts # Entrypoint principal
|
|
162
|
+
│ └── ui/
|
|
163
|
+
│ ├── Button/
|
|
164
|
+
│ ├── Input/
|
|
165
|
+
│ ├── Card/
|
|
166
|
+
│ ├── Badge/
|
|
167
|
+
│ └── Avatar/
|
|
168
|
+
└── lib/
|
|
169
|
+
└── utils.ts # Utilitário cn() para classes CSS
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
## Licença
|
|
173
|
+
|
|
174
|
+
MIT
|
package/dist/index.css
ADDED
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/*! tailwindcss v4.3.0 | MIT License | https://tailwindcss.com */
|
|
2
|
+
@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-space-y-reverse:0;--tw-space-x-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-duration:initial;--tw-ease:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-100:oklch(93.6% .032 17.717);--color-red-300:oklch(80.8% .114 19.571);--color-red-400:oklch(70.4% .191 22.216);--color-red-500:oklch(63.7% .237 25.331);--color-red-600:oklch(57.7% .245 27.325);--color-red-700:oklch(50.5% .213 27.518);--color-red-800:oklch(44.4% .177 26.899);--color-yellow-100:oklch(97.3% .071 103.193);--color-yellow-500:oklch(79.5% .184 86.047);--color-yellow-700:oklch(55.4% .135 66.442);--color-green-100:oklch(96.2% .044 156.743);--color-green-400:oklch(79.2% .209 151.711);--color-green-500:oklch(72.3% .219 149.579);--color-green-700:oklch(52.7% .154 150.069);--color-sky-100:oklch(95.1% .026 236.824);--color-sky-500:oklch(68.5% .169 237.323);--color-sky-700:oklch(50% .134 242.749);--color-blue-100:oklch(93.2% .032 255.585);--color-blue-300:oklch(80.9% .105 251.813);--color-blue-500:oklch(62.3% .214 259.815);--color-blue-600:oklch(54.6% .245 262.881);--color-blue-700:oklch(48.8% .243 264.376);--color-blue-800:oklch(42.4% .199 265.638);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-400:oklch(70.7% .022 261.325);--color-gray-500:oklch(55.1% .027 264.364);--color-gray-600:oklch(44.6% .03 256.802);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-900:oklch(21% .034 264.665);--color-white:#fff;--spacing:.25rem;--text-xs:.75rem;--text-xs--line-height:calc(1 / .75);--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-base:1rem;--text-base--line-height:calc(1.5 / 1);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-2xl:1.5rem;--text-2xl--line-height:calc(2 / 1.5);--text-3xl:1.875rem;--text-3xl--line-height:calc(2.25 / 1.875);--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-md:.375rem;--radius-lg:.5rem;--radius-xl:.75rem;--ease-in-out:cubic-bezier(.4, 0, .2, 1);--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.absolute{position:absolute}.relative{position:relative}.right-3{right:calc(var(--spacing) * 3)}.left-3{left:calc(var(--spacing) * 3)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mt-4{margin-top:calc(var(--spacing) * 4)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.flex{display:flex}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-1\.5{height:calc(var(--spacing) * 1.5)}.h-3{height:calc(var(--spacing) * 3)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-8{height:calc(var(--spacing) * 8)}.h-10{height:calc(var(--spacing) * 10)}.h-12{height:calc(var(--spacing) * 12)}.h-16{height:calc(var(--spacing) * 16)}.h-full{height:100%}.min-h-screen{min-height:100vh}.w-1\.5{width:calc(var(--spacing) * 1.5)}.w-3{width:calc(var(--spacing) * 3)}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-8{width:calc(var(--spacing) * 8)}.w-10{width:calc(var(--spacing) * 10)}.w-12{width:calc(var(--spacing) * 12)}.w-16{width:calc(var(--spacing) * 16)}.w-36{width:calc(var(--spacing) * 36)}.w-72{width:calc(var(--spacing) * 72)}.w-full{width:100%}.shrink-0{flex-shrink:0}.animate-spin{animation:var(--animate-spin)}.cursor-pointer{cursor:pointer}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-1\.5{gap:calc(var(--spacing) * 1.5)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-2\.5{gap:calc(var(--spacing) * 2.5)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-1>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 1) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 1) * calc(1 - var(--tw-space-y-reverse)))}:where(.-space-x-2>:not(:last-child)){--tw-space-x-reverse:0;margin-inline-start:calc(calc(var(--spacing) * -2) * var(--tw-space-x-reverse));margin-inline-end:calc(calc(var(--spacing) * -2) * calc(1 - var(--tw-space-x-reverse)))}.overflow-hidden{overflow:hidden}.rounded-full{border-radius:3.40282e38px}.rounded-lg{border-radius:var(--radius-lg)}.rounded-md{border-radius:var(--radius-md)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-red-400{border-color:var(--color-red-400)}.bg-blue-100{background-color:var(--color-blue-100)}.bg-blue-500{background-color:var(--color-blue-500)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-gray-50{background-color:var(--color-gray-50)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300{background-color:var(--color-gray-300)}.bg-gray-500{background-color:var(--color-gray-500)}.bg-gray-900{background-color:var(--color-gray-900)}.bg-green-100{background-color:var(--color-green-100)}.bg-green-500{background-color:var(--color-green-500)}.bg-red-100{background-color:var(--color-red-100)}.bg-red-500{background-color:var(--color-red-500)}.bg-red-600{background-color:var(--color-red-600)}.bg-sky-100{background-color:var(--color-sky-100)}.bg-sky-500{background-color:var(--color-sky-500)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.bg-yellow-100{background-color:var(--color-yellow-100)}.bg-yellow-500{background-color:var(--color-yellow-500)}.object-cover{object-fit:cover}.p-4{padding:calc(var(--spacing) * 4)}.p-6{padding:calc(var(--spacing) * 6)}.p-8{padding:calc(var(--spacing) * 8)}.px-2\.5{padding-inline:calc(var(--spacing) * 2.5)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-0\.5{padding-block:calc(var(--spacing) * .5)}.py-3{padding-block:calc(var(--spacing) * 3)}.pr-9{padding-right:calc(var(--spacing) * 9)}.pl-9{padding-left:calc(var(--spacing) * 9)}.text-center{text-align:center}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-blue-700{color:var(--color-blue-700)}.text-gray-500{color:var(--color-gray-500)}.text-gray-600{color:var(--color-gray-600)}.text-gray-700{color:var(--color-gray-700)}.text-gray-900{color:var(--color-gray-900)}.text-green-400{color:var(--color-green-400)}.text-green-700{color:var(--color-green-700)}.text-red-500{color:var(--color-red-500)}.text-red-700{color:var(--color-red-700)}.text-sky-700{color:var(--color-sky-700)}.text-white{color:var(--color-white)}.text-yellow-700{color:var(--color-yellow-700)}.antialiased{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.opacity-25{opacity:.25}.opacity-75{opacity:.75}.shadow{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,#0000001a), 0 4px 6px -4px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-md{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.ring-white{--tw-ring-color:var(--color-white)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.transition-colors{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-shadow{transition-property:box-shadow;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-150{--tw-duration:.15s;transition-duration:.15s}.duration-200{--tw-duration:.2s;transition-duration:.2s}.ease-in-out{--tw-ease:var(--ease-in-out);transition-timing-function:var(--ease-in-out)}.select-none{-webkit-user-select:none;user-select:none}.placeholder\:text-gray-400::placeholder{color:var(--color-gray-400)}@media (hover:hover){.hover\:bg-blue-700:hover{background-color:var(--color-blue-700)}.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-red-700:hover{background-color:var(--color-red-700)}.hover\:shadow-md:hover{--tw-shadow:0 4px 6px -1px var(--tw-shadow-color,#0000001a), 0 2px 4px -2px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}}.focus\:border-blue-500:focus{border-color:var(--color-blue-500)}.focus\:border-red-400:focus{border-color:var(--color-red-400)}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-blue-300:focus{--tw-ring-color:var(--color-blue-300)}.focus\:ring-red-300:focus{--tw-ring-color:var(--color-red-300)}.focus\:ring-offset-0:focus{--tw-ring-offset-width:0px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.focus-visible\:ring-2:focus-visible{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus-visible\:ring-blue-500:focus-visible{--tw-ring-color:var(--color-blue-500)}.focus-visible\:ring-gray-400:focus-visible{--tw-ring-color:var(--color-gray-400)}.focus-visible\:ring-red-500:focus-visible{--tw-ring-color:var(--color-red-500)}.focus-visible\:ring-offset-2:focus-visible{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus-visible\:outline-none:focus-visible{--tw-outline-style:none;outline-style:none}.active\:bg-blue-800:active{background-color:var(--color-blue-800)}.active\:bg-gray-100:active{background-color:var(--color-gray-100)}.active\:bg-gray-200:active{background-color:var(--color-gray-200)}.active\:bg-gray-300:active{background-color:var(--color-gray-300)}.active\:bg-red-800:active{background-color:var(--color-red-800)}.disabled\:pointer-events-none:disabled{pointer-events:none}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}.disabled\:bg-gray-50:disabled{background-color:var(--color-gray-50)}.disabled\:text-gray-500:disabled{color:var(--color-gray-500)}.disabled\:opacity-50:disabled{opacity:.5}}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-space-x-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@property --tw-ease{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}
|
package/dist/index.d.mts
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
|
|
5
|
+
type ButtonSize = "sm" | "md" | "lg";
|
|
6
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
7
|
+
variant?: ButtonVariant;
|
|
8
|
+
size?: ButtonSize;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
leftIcon?: React.ReactNode;
|
|
11
|
+
rightIcon?: React.ReactNode;
|
|
12
|
+
fullWidth?: boolean;
|
|
13
|
+
}
|
|
14
|
+
declare function Button({ variant, size, loading, leftIcon, rightIcon, fullWidth, children, className, disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
|
|
16
|
+
type InputSize = "sm" | "md" | "lg";
|
|
17
|
+
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
18
|
+
label?: string;
|
|
19
|
+
hint?: string;
|
|
20
|
+
error?: string;
|
|
21
|
+
size?: InputSize;
|
|
22
|
+
leftAddon?: React.ReactNode;
|
|
23
|
+
rightAddon?: React.ReactNode;
|
|
24
|
+
fullWidth?: boolean;
|
|
25
|
+
}
|
|
26
|
+
declare function Input({ label, hint, error, size, leftAddon, rightAddon, fullWidth, className, id, ...props }: InputProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
29
|
+
shadow?: "none" | "sm" | "md" | "lg";
|
|
30
|
+
hoverable?: boolean;
|
|
31
|
+
bordered?: boolean;
|
|
32
|
+
padding?: "none" | "sm" | "md" | "lg";
|
|
33
|
+
}
|
|
34
|
+
declare function Card({ shadow, hoverable, bordered, padding, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
36
|
+
}
|
|
37
|
+
declare function CardHeader({ className, children, ...props }: CardHeaderProps): react_jsx_runtime.JSX.Element;
|
|
38
|
+
interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
39
|
+
}
|
|
40
|
+
declare function CardTitle({ className, children, ...props }: CardTitleProps): react_jsx_runtime.JSX.Element;
|
|
41
|
+
interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
42
|
+
}
|
|
43
|
+
declare function CardDescription({ className, children, ...props }: CardDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
44
|
+
interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
45
|
+
}
|
|
46
|
+
declare function CardContent({ className, children, ...props }: CardContentProps): react_jsx_runtime.JSX.Element;
|
|
47
|
+
interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
48
|
+
}
|
|
49
|
+
declare function CardFooter({ className, children, ...props }: CardFooterProps): react_jsx_runtime.JSX.Element;
|
|
50
|
+
|
|
51
|
+
type BadgeVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";
|
|
52
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
53
|
+
variant?: BadgeVariant;
|
|
54
|
+
dot?: boolean;
|
|
55
|
+
}
|
|
56
|
+
declare function Badge({ variant, dot, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
59
|
+
interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
60
|
+
src?: string;
|
|
61
|
+
alt?: string;
|
|
62
|
+
fallback?: string;
|
|
63
|
+
size?: AvatarSize;
|
|
64
|
+
}
|
|
65
|
+
declare function Avatar({ src, alt, fallback, size, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
66
|
+
|
|
67
|
+
export { Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Input, type InputProps, type InputSize };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
import * as react_jsx_runtime from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
type ButtonVariant = "primary" | "secondary" | "outline" | "ghost" | "destructive";
|
|
5
|
+
type ButtonSize = "sm" | "md" | "lg";
|
|
6
|
+
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
|
|
7
|
+
variant?: ButtonVariant;
|
|
8
|
+
size?: ButtonSize;
|
|
9
|
+
loading?: boolean;
|
|
10
|
+
leftIcon?: React.ReactNode;
|
|
11
|
+
rightIcon?: React.ReactNode;
|
|
12
|
+
fullWidth?: boolean;
|
|
13
|
+
}
|
|
14
|
+
declare function Button({ variant, size, loading, leftIcon, rightIcon, fullWidth, children, className, disabled, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
|
|
15
|
+
|
|
16
|
+
type InputSize = "sm" | "md" | "lg";
|
|
17
|
+
interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> {
|
|
18
|
+
label?: string;
|
|
19
|
+
hint?: string;
|
|
20
|
+
error?: string;
|
|
21
|
+
size?: InputSize;
|
|
22
|
+
leftAddon?: React.ReactNode;
|
|
23
|
+
rightAddon?: React.ReactNode;
|
|
24
|
+
fullWidth?: boolean;
|
|
25
|
+
}
|
|
26
|
+
declare function Input({ label, hint, error, size, leftAddon, rightAddon, fullWidth, className, id, ...props }: InputProps): react_jsx_runtime.JSX.Element;
|
|
27
|
+
|
|
28
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
29
|
+
shadow?: "none" | "sm" | "md" | "lg";
|
|
30
|
+
hoverable?: boolean;
|
|
31
|
+
bordered?: boolean;
|
|
32
|
+
padding?: "none" | "sm" | "md" | "lg";
|
|
33
|
+
}
|
|
34
|
+
declare function Card({ shadow, hoverable, bordered, padding, className, children, ...props }: CardProps): react_jsx_runtime.JSX.Element;
|
|
35
|
+
interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
36
|
+
}
|
|
37
|
+
declare function CardHeader({ className, children, ...props }: CardHeaderProps): react_jsx_runtime.JSX.Element;
|
|
38
|
+
interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
|
|
39
|
+
}
|
|
40
|
+
declare function CardTitle({ className, children, ...props }: CardTitleProps): react_jsx_runtime.JSX.Element;
|
|
41
|
+
interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
|
|
42
|
+
}
|
|
43
|
+
declare function CardDescription({ className, children, ...props }: CardDescriptionProps): react_jsx_runtime.JSX.Element;
|
|
44
|
+
interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
45
|
+
}
|
|
46
|
+
declare function CardContent({ className, children, ...props }: CardContentProps): react_jsx_runtime.JSX.Element;
|
|
47
|
+
interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
48
|
+
}
|
|
49
|
+
declare function CardFooter({ className, children, ...props }: CardFooterProps): react_jsx_runtime.JSX.Element;
|
|
50
|
+
|
|
51
|
+
type BadgeVariant = "default" | "primary" | "success" | "warning" | "danger" | "info";
|
|
52
|
+
interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
53
|
+
variant?: BadgeVariant;
|
|
54
|
+
dot?: boolean;
|
|
55
|
+
}
|
|
56
|
+
declare function Badge({ variant, dot, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
|
|
57
|
+
|
|
58
|
+
type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
|
|
59
|
+
interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {
|
|
60
|
+
src?: string;
|
|
61
|
+
alt?: string;
|
|
62
|
+
fallback?: string;
|
|
63
|
+
size?: AvatarSize;
|
|
64
|
+
}
|
|
65
|
+
declare function Avatar({ src, alt, fallback, size, className, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
|
|
66
|
+
|
|
67
|
+
export { Avatar, type AvatarProps, type AvatarSize, Badge, type BadgeProps, type BadgeVariant, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Input, type InputProps, type InputSize };
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,415 @@
|
|
|
1
|
+
'use strict';
|
|
2
|
+
|
|
3
|
+
var jsxRuntime = require('react/jsx-runtime');
|
|
4
|
+
var React = require('react');
|
|
5
|
+
|
|
6
|
+
function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
|
|
7
|
+
|
|
8
|
+
var React__default = /*#__PURE__*/_interopDefault(React);
|
|
9
|
+
|
|
10
|
+
var __defProp = Object.defineProperty;
|
|
11
|
+
var __defProps = Object.defineProperties;
|
|
12
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
13
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
14
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
15
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
16
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
17
|
+
var __spreadValues = (a, b) => {
|
|
18
|
+
for (var prop in b || (b = {}))
|
|
19
|
+
if (__hasOwnProp.call(b, prop))
|
|
20
|
+
__defNormalProp(a, prop, b[prop]);
|
|
21
|
+
if (__getOwnPropSymbols)
|
|
22
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
23
|
+
if (__propIsEnum.call(b, prop))
|
|
24
|
+
__defNormalProp(a, prop, b[prop]);
|
|
25
|
+
}
|
|
26
|
+
return a;
|
|
27
|
+
};
|
|
28
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
29
|
+
var __objRest = (source, exclude) => {
|
|
30
|
+
var target = {};
|
|
31
|
+
for (var prop in source)
|
|
32
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
33
|
+
target[prop] = source[prop];
|
|
34
|
+
if (source != null && __getOwnPropSymbols)
|
|
35
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
36
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
37
|
+
target[prop] = source[prop];
|
|
38
|
+
}
|
|
39
|
+
return target;
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
// src/lib/utils.ts
|
|
43
|
+
function cn(...inputs) {
|
|
44
|
+
const result = [];
|
|
45
|
+
for (const input of inputs) {
|
|
46
|
+
if (!input && input !== 0) continue;
|
|
47
|
+
if (typeof input === "string") {
|
|
48
|
+
result.push(input);
|
|
49
|
+
} else if (typeof input === "number" || typeof input === "bigint") {
|
|
50
|
+
result.push(String(input));
|
|
51
|
+
} else if (Array.isArray(input)) {
|
|
52
|
+
const nested = cn(...input);
|
|
53
|
+
if (nested) result.push(nested);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
return result.join(" ").replace(/\s+/g, " ").trim();
|
|
57
|
+
}
|
|
58
|
+
var variantStyles = {
|
|
59
|
+
primary: "bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus-visible:ring-blue-500",
|
|
60
|
+
secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring-gray-400",
|
|
61
|
+
outline: "border border-gray-300 bg-transparent text-gray-900 hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-gray-400",
|
|
62
|
+
ghost: "bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-gray-400",
|
|
63
|
+
destructive: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500"
|
|
64
|
+
};
|
|
65
|
+
var sizeStyles = {
|
|
66
|
+
sm: "h-8 px-3 text-sm gap-1.5",
|
|
67
|
+
md: "h-10 px-4 text-sm gap-2",
|
|
68
|
+
lg: "h-12 px-6 text-base gap-2.5"
|
|
69
|
+
};
|
|
70
|
+
function Button(_a) {
|
|
71
|
+
var _b = _a, {
|
|
72
|
+
variant = "primary",
|
|
73
|
+
size = "md",
|
|
74
|
+
loading = false,
|
|
75
|
+
leftIcon,
|
|
76
|
+
rightIcon,
|
|
77
|
+
fullWidth = false,
|
|
78
|
+
children,
|
|
79
|
+
className,
|
|
80
|
+
disabled
|
|
81
|
+
} = _b, props = __objRest(_b, [
|
|
82
|
+
"variant",
|
|
83
|
+
"size",
|
|
84
|
+
"loading",
|
|
85
|
+
"leftIcon",
|
|
86
|
+
"rightIcon",
|
|
87
|
+
"fullWidth",
|
|
88
|
+
"children",
|
|
89
|
+
"className",
|
|
90
|
+
"disabled"
|
|
91
|
+
]);
|
|
92
|
+
const isDisabled = disabled || loading;
|
|
93
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
94
|
+
"button",
|
|
95
|
+
__spreadProps(__spreadValues({
|
|
96
|
+
className: cn(
|
|
97
|
+
"inline-flex items-center justify-center rounded-md font-medium",
|
|
98
|
+
"transition-colors duration-150 ease-in-out",
|
|
99
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
100
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
101
|
+
variantStyles[variant],
|
|
102
|
+
sizeStyles[size],
|
|
103
|
+
fullWidth && "w-full",
|
|
104
|
+
className
|
|
105
|
+
),
|
|
106
|
+
disabled: isDisabled
|
|
107
|
+
}, props), {
|
|
108
|
+
children: [
|
|
109
|
+
loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, { size }) : leftIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: leftIcon }),
|
|
110
|
+
children,
|
|
111
|
+
!loading && rightIcon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "shrink-0", children: rightIcon })
|
|
112
|
+
]
|
|
113
|
+
})
|
|
114
|
+
);
|
|
115
|
+
}
|
|
116
|
+
function Spinner({ size }) {
|
|
117
|
+
const spinnerSize = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
|
|
118
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
119
|
+
"svg",
|
|
120
|
+
{
|
|
121
|
+
className: cn("animate-spin shrink-0", spinnerSize),
|
|
122
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
123
|
+
fill: "none",
|
|
124
|
+
viewBox: "0 0 24 24",
|
|
125
|
+
children: [
|
|
126
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
127
|
+
"circle",
|
|
128
|
+
{
|
|
129
|
+
className: "opacity-25",
|
|
130
|
+
cx: "12",
|
|
131
|
+
cy: "12",
|
|
132
|
+
r: "10",
|
|
133
|
+
stroke: "currentColor",
|
|
134
|
+
strokeWidth: "4"
|
|
135
|
+
}
|
|
136
|
+
),
|
|
137
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
138
|
+
"path",
|
|
139
|
+
{
|
|
140
|
+
className: "opacity-75",
|
|
141
|
+
fill: "currentColor",
|
|
142
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
143
|
+
}
|
|
144
|
+
)
|
|
145
|
+
]
|
|
146
|
+
}
|
|
147
|
+
);
|
|
148
|
+
}
|
|
149
|
+
var sizeStyles2 = {
|
|
150
|
+
sm: "h-8 px-2.5 text-sm",
|
|
151
|
+
md: "h-10 px-3 text-sm",
|
|
152
|
+
lg: "h-12 px-4 text-base"
|
|
153
|
+
};
|
|
154
|
+
function Input(_a) {
|
|
155
|
+
var _b = _a, {
|
|
156
|
+
label,
|
|
157
|
+
hint,
|
|
158
|
+
error,
|
|
159
|
+
size = "md",
|
|
160
|
+
leftAddon,
|
|
161
|
+
rightAddon,
|
|
162
|
+
fullWidth = false,
|
|
163
|
+
className,
|
|
164
|
+
id
|
|
165
|
+
} = _b, props = __objRest(_b, [
|
|
166
|
+
"label",
|
|
167
|
+
"hint",
|
|
168
|
+
"error",
|
|
169
|
+
"size",
|
|
170
|
+
"leftAddon",
|
|
171
|
+
"rightAddon",
|
|
172
|
+
"fullWidth",
|
|
173
|
+
"className",
|
|
174
|
+
"id"
|
|
175
|
+
]);
|
|
176
|
+
const inputId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
|
|
177
|
+
return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex flex-col gap-1.5", fullWidth && "w-full"), children: [
|
|
178
|
+
label && /* @__PURE__ */ jsxRuntime.jsx(
|
|
179
|
+
"label",
|
|
180
|
+
{
|
|
181
|
+
htmlFor: inputId,
|
|
182
|
+
className: "text-sm font-medium text-gray-700",
|
|
183
|
+
children: label
|
|
184
|
+
}
|
|
185
|
+
),
|
|
186
|
+
/* @__PURE__ */ jsxRuntime.jsxs("div", { className: "relative flex items-center", children: [
|
|
187
|
+
leftAddon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute left-3 flex items-center text-gray-500", children: leftAddon }),
|
|
188
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
189
|
+
"input",
|
|
190
|
+
__spreadValues({
|
|
191
|
+
id: inputId,
|
|
192
|
+
className: cn(
|
|
193
|
+
"w-full rounded-md border bg-white text-gray-900 placeholder:text-gray-400",
|
|
194
|
+
"transition-colors duration-150",
|
|
195
|
+
"focus:outline-none focus:ring-2 focus:ring-offset-0",
|
|
196
|
+
"disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
|
|
197
|
+
sizeStyles2[size],
|
|
198
|
+
error ? "border-red-400 focus:border-red-400 focus:ring-red-300" : "border-gray-300 focus:border-blue-500 focus:ring-blue-300",
|
|
199
|
+
leftAddon && "pl-9",
|
|
200
|
+
rightAddon && "pr-9",
|
|
201
|
+
className
|
|
202
|
+
)
|
|
203
|
+
}, props)
|
|
204
|
+
),
|
|
205
|
+
rightAddon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "absolute right-3 flex items-center text-gray-500", children: rightAddon })
|
|
206
|
+
] }),
|
|
207
|
+
(hint || error) && /* @__PURE__ */ jsxRuntime.jsx("p", { className: cn("text-xs", error ? "text-red-500" : "text-gray-500"), children: error != null ? error : hint })
|
|
208
|
+
] });
|
|
209
|
+
}
|
|
210
|
+
var shadowStyles = {
|
|
211
|
+
none: "",
|
|
212
|
+
sm: "shadow-sm",
|
|
213
|
+
md: "shadow-md",
|
|
214
|
+
lg: "shadow-lg"
|
|
215
|
+
};
|
|
216
|
+
var paddingStyles = {
|
|
217
|
+
none: "",
|
|
218
|
+
sm: "p-4",
|
|
219
|
+
md: "p-6",
|
|
220
|
+
lg: "p-8"
|
|
221
|
+
};
|
|
222
|
+
function Card(_a) {
|
|
223
|
+
var _b = _a, {
|
|
224
|
+
shadow = "sm",
|
|
225
|
+
hoverable = false,
|
|
226
|
+
bordered = true,
|
|
227
|
+
padding = "md",
|
|
228
|
+
className,
|
|
229
|
+
children
|
|
230
|
+
} = _b, props = __objRest(_b, [
|
|
231
|
+
"shadow",
|
|
232
|
+
"hoverable",
|
|
233
|
+
"bordered",
|
|
234
|
+
"padding",
|
|
235
|
+
"className",
|
|
236
|
+
"children"
|
|
237
|
+
]);
|
|
238
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
239
|
+
"div",
|
|
240
|
+
__spreadProps(__spreadValues({
|
|
241
|
+
className: cn(
|
|
242
|
+
"rounded-xl bg-white",
|
|
243
|
+
shadowStyles[shadow],
|
|
244
|
+
paddingStyles[padding],
|
|
245
|
+
bordered && "border border-gray-200",
|
|
246
|
+
hoverable && "cursor-pointer transition-shadow duration-200 hover:shadow-md",
|
|
247
|
+
className
|
|
248
|
+
)
|
|
249
|
+
}, props), {
|
|
250
|
+
children
|
|
251
|
+
})
|
|
252
|
+
);
|
|
253
|
+
}
|
|
254
|
+
function CardHeader(_a) {
|
|
255
|
+
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
256
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ className: cn("mb-4 flex flex-col gap-1", className) }, props), { children }));
|
|
257
|
+
}
|
|
258
|
+
function CardTitle(_a) {
|
|
259
|
+
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
260
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
261
|
+
"h3",
|
|
262
|
+
__spreadProps(__spreadValues({
|
|
263
|
+
className: cn("text-lg font-semibold text-gray-900", className)
|
|
264
|
+
}, props), {
|
|
265
|
+
children
|
|
266
|
+
})
|
|
267
|
+
);
|
|
268
|
+
}
|
|
269
|
+
function CardDescription(_a) {
|
|
270
|
+
var _b = _a, {
|
|
271
|
+
className,
|
|
272
|
+
children
|
|
273
|
+
} = _b, props = __objRest(_b, [
|
|
274
|
+
"className",
|
|
275
|
+
"children"
|
|
276
|
+
]);
|
|
277
|
+
return /* @__PURE__ */ jsxRuntime.jsx("p", __spreadProps(__spreadValues({ className: cn("text-sm text-gray-500", className) }, props), { children }));
|
|
278
|
+
}
|
|
279
|
+
function CardContent(_a) {
|
|
280
|
+
var _b = _a, {
|
|
281
|
+
className,
|
|
282
|
+
children
|
|
283
|
+
} = _b, props = __objRest(_b, [
|
|
284
|
+
"className",
|
|
285
|
+
"children"
|
|
286
|
+
]);
|
|
287
|
+
return /* @__PURE__ */ jsxRuntime.jsx("div", __spreadProps(__spreadValues({ className: cn("text-sm text-gray-700", className) }, props), { children }));
|
|
288
|
+
}
|
|
289
|
+
function CardFooter(_a) {
|
|
290
|
+
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
291
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
292
|
+
"div",
|
|
293
|
+
__spreadProps(__spreadValues({
|
|
294
|
+
className: cn("mt-4 flex items-center gap-2", className)
|
|
295
|
+
}, props), {
|
|
296
|
+
children
|
|
297
|
+
})
|
|
298
|
+
);
|
|
299
|
+
}
|
|
300
|
+
var variantStyles2 = {
|
|
301
|
+
default: "bg-gray-100 text-gray-700",
|
|
302
|
+
primary: "bg-blue-100 text-blue-700",
|
|
303
|
+
success: "bg-green-100 text-green-700",
|
|
304
|
+
warning: "bg-yellow-100 text-yellow-700",
|
|
305
|
+
danger: "bg-red-100 text-red-700",
|
|
306
|
+
info: "bg-sky-100 text-sky-700"
|
|
307
|
+
};
|
|
308
|
+
var dotStyles = {
|
|
309
|
+
default: "bg-gray-500",
|
|
310
|
+
primary: "bg-blue-500",
|
|
311
|
+
success: "bg-green-500",
|
|
312
|
+
warning: "bg-yellow-500",
|
|
313
|
+
danger: "bg-red-500",
|
|
314
|
+
info: "bg-sky-500"
|
|
315
|
+
};
|
|
316
|
+
function Badge(_a) {
|
|
317
|
+
var _b = _a, {
|
|
318
|
+
variant = "default",
|
|
319
|
+
dot = false,
|
|
320
|
+
className,
|
|
321
|
+
children
|
|
322
|
+
} = _b, props = __objRest(_b, [
|
|
323
|
+
"variant",
|
|
324
|
+
"dot",
|
|
325
|
+
"className",
|
|
326
|
+
"children"
|
|
327
|
+
]);
|
|
328
|
+
return /* @__PURE__ */ jsxRuntime.jsxs(
|
|
329
|
+
"span",
|
|
330
|
+
__spreadProps(__spreadValues({
|
|
331
|
+
className: cn(
|
|
332
|
+
"inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
|
|
333
|
+
variantStyles2[variant],
|
|
334
|
+
className
|
|
335
|
+
)
|
|
336
|
+
}, props), {
|
|
337
|
+
children: [
|
|
338
|
+
dot && /* @__PURE__ */ jsxRuntime.jsx(
|
|
339
|
+
"span",
|
|
340
|
+
{
|
|
341
|
+
className: cn("h-1.5 w-1.5 rounded-full", dotStyles[variant])
|
|
342
|
+
}
|
|
343
|
+
),
|
|
344
|
+
children
|
|
345
|
+
]
|
|
346
|
+
})
|
|
347
|
+
);
|
|
348
|
+
}
|
|
349
|
+
var sizeStyles3 = {
|
|
350
|
+
xs: "h-6 w-6 text-xs",
|
|
351
|
+
sm: "h-8 w-8 text-sm",
|
|
352
|
+
md: "h-10 w-10 text-sm",
|
|
353
|
+
lg: "h-12 w-12 text-base",
|
|
354
|
+
xl: "h-16 w-16 text-lg"
|
|
355
|
+
};
|
|
356
|
+
function getInitials(name) {
|
|
357
|
+
return name.split(" ").slice(0, 2).map((word) => {
|
|
358
|
+
var _a, _b;
|
|
359
|
+
return (_b = (_a = word[0]) == null ? void 0 : _a.toUpperCase()) != null ? _b : "";
|
|
360
|
+
}).join("");
|
|
361
|
+
}
|
|
362
|
+
function Avatar(_a) {
|
|
363
|
+
var _b = _a, {
|
|
364
|
+
src,
|
|
365
|
+
alt = "",
|
|
366
|
+
fallback,
|
|
367
|
+
size = "md",
|
|
368
|
+
className
|
|
369
|
+
} = _b, props = __objRest(_b, [
|
|
370
|
+
"src",
|
|
371
|
+
"alt",
|
|
372
|
+
"fallback",
|
|
373
|
+
"size",
|
|
374
|
+
"className"
|
|
375
|
+
]);
|
|
376
|
+
const [imgError, setImgError] = React__default.default.useState(false);
|
|
377
|
+
const showFallback = !src || imgError;
|
|
378
|
+
const initials = fallback ? getInitials(fallback) : alt ? getInitials(alt) : "?";
|
|
379
|
+
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
380
|
+
"span",
|
|
381
|
+
__spreadProps(__spreadValues({
|
|
382
|
+
className: cn(
|
|
383
|
+
"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-200",
|
|
384
|
+
sizeStyles3[size],
|
|
385
|
+
className
|
|
386
|
+
)
|
|
387
|
+
}, props), {
|
|
388
|
+
children: !showFallback ? (
|
|
389
|
+
// eslint-disable-next-line @next/next/no-img-element
|
|
390
|
+
/* @__PURE__ */ jsxRuntime.jsx(
|
|
391
|
+
"img",
|
|
392
|
+
{
|
|
393
|
+
src,
|
|
394
|
+
alt,
|
|
395
|
+
className: "h-full w-full object-cover",
|
|
396
|
+
onError: () => setImgError(true)
|
|
397
|
+
}
|
|
398
|
+
)
|
|
399
|
+
) : /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium text-gray-600 select-none", children: initials })
|
|
400
|
+
})
|
|
401
|
+
);
|
|
402
|
+
}
|
|
403
|
+
|
|
404
|
+
exports.Avatar = Avatar;
|
|
405
|
+
exports.Badge = Badge;
|
|
406
|
+
exports.Button = Button;
|
|
407
|
+
exports.Card = Card;
|
|
408
|
+
exports.CardContent = CardContent;
|
|
409
|
+
exports.CardDescription = CardDescription;
|
|
410
|
+
exports.CardFooter = CardFooter;
|
|
411
|
+
exports.CardHeader = CardHeader;
|
|
412
|
+
exports.CardTitle = CardTitle;
|
|
413
|
+
exports.Input = Input;
|
|
414
|
+
//# sourceMappingURL=index.js.map
|
|
415
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/ui/Button/Button.tsx","../src/components/ui/Input/Input.tsx","../src/components/ui/Card/Card.tsx","../src/components/ui/Badge/Badge.tsx","../src/components/ui/Avatar/Avatar.tsx"],"names":["jsxs","jsx","sizeStyles","variantStyles","React"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AASO,SAAS,MAAM,MAAA,EAA8B;AAClD,EAAA,MAAM,SAAmB,EAAC;AAE1B,EAAA,KAAA,MAAW,SAAS,MAAA,EAAQ;AAC1B,IAAA,IAAI,CAAC,KAAA,IAAS,KAAA,KAAU,CAAA,EAAG;AAC3B,IAAA,IAAI,OAAO,UAAU,QAAA,EAAU;AAC7B,MAAA,MAAA,CAAO,KAAK,KAAK,CAAA;AAAA,IACnB,WAAW,OAAO,KAAA,KAAU,QAAA,IAAY,OAAO,UAAU,QAAA,EAAU;AACjE,MAAA,MAAA,CAAO,IAAA,CAAK,MAAA,CAAO,KAAK,CAAC,CAAA;AAAA,IAC3B,CAAA,MAAA,IAAW,KAAA,CAAM,OAAA,CAAQ,KAAK,CAAA,EAAG;AAC/B,MAAA,MAAM,MAAA,GAAS,EAAA,CAAG,GAAI,KAAsB,CAAA;AAC5C,MAAA,IAAI,MAAA,EAAQ,MAAA,CAAO,IAAA,CAAK,MAAM,CAAA;AAAA,IAChC;AAAA,EACF;AAEA,EAAA,OAAO,MAAA,CAAO,KAAK,GAAG,CAAA,CAAE,QAAQ,MAAA,EAAQ,GAAG,EAAE,IAAA,EAAK;AACpD;ACJA,IAAM,aAAA,GAA+C;AAAA,EACnD,OAAA,EACE,yFAAA;AAAA,EACF,SAAA,EACE,4FAAA;AAAA,EACF,OAAA,EACE,qHAAA;AAAA,EACF,KAAA,EACE,+FAAA;AAAA,EACF,WAAA,EACE;AACJ,CAAA;AAEA,IAAM,UAAA,GAAyC;AAAA,EAC7C,EAAA,EAAI,0BAAA;AAAA,EACJ,EAAA,EAAI,yBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,SAAS,OAAO,EAAA,EAWP;AAXO,EAAA,IAAA,EAAA,GAAA,EAAA,EACrB;AAAA,IAAA,OAAA,GAAU,SAAA;AAAA,IACV,IAAA,GAAO,IAAA;AAAA,IACP,OAAA,GAAU,KAAA;AAAA,IACV,QAAA;AAAA,IACA,SAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,QAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,GAjDF,GAwCuB,EAAA,EAUlB,KAAA,GAAA,SAAA,CAVkB,EAAA,EAUlB;AAAA,IATH,SAAA;AAAA,IACA,MAAA;AAAA,IACA,SAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,aAAa,QAAA,IAAY,OAAA;AAE/B,EAAA,uBACEA,eAAA;AAAA,IAAC,QAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,gEAAA;AAAA,QACA,4CAAA;AAAA,QACA,6EAAA;AAAA,QACA,kDAAA;AAAA,QACA,cAAc,OAAO,CAAA;AAAA,QACrB,WAAW,IAAI,CAAA;AAAA,QACf,SAAA,IAAa,QAAA;AAAA,QACb;AAAA,OACF;AAAA,MACA,QAAA,EAAU;AAAA,KAAA,EACN,KAAA,CAAA,EAZL;AAAA,MAcE,QAAA,EAAA;AAAA,QAAA,OAAA,mBACCC,cAAA,CAAC,WAAQ,IAAA,EAAY,CAAA,GAErB,4BAAYA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,UAAA,EAAY,QAAA,EAAA,QAAA,EAAS,CAAA;AAAA,QAElD,QAAA;AAAA,QACA,CAAC,OAAA,IAAW,SAAA,mCACV,MAAA,EAAA,EAAK,SAAA,EAAU,YAAY,QAAA,EAAA,SAAA,EAAU;AAAA;AAAA,KAAA;AAAA,GAE1C;AAEJ;AAEA,SAAS,OAAA,CAAQ,EAAE,IAAA,EAAK,EAAyB;AAC/C,EAAA,MAAM,cAAc,IAAA,KAAS,IAAA,GAAO,SAAA,GAAY,IAAA,KAAS,OAAO,SAAA,GAAY,SAAA;AAC5E,EAAA,uBACED,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,uBAAA,EAAyB,WAAW,CAAA;AAAA,MAClD,KAAA,EAAM,4BAAA;AAAA,MACN,IAAA,EAAK,MAAA;AAAA,MACL,OAAA,EAAQ,WAAA;AAAA,MAER,QAAA,EAAA;AAAA,wBAAAC,cAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,EAAA,EAAG,IAAA;AAAA,YACH,EAAA,EAAG,IAAA;AAAA,YACH,CAAA,EAAE,IAAA;AAAA,YACF,MAAA,EAAO,cAAA;AAAA,YACP,WAAA,EAAY;AAAA;AAAA,SACd;AAAA,wBACAA,cAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAU,YAAA;AAAA,YACV,IAAA,EAAK,cAAA;AAAA,YACL,CAAA,EAAE;AAAA;AAAA;AACJ;AAAA;AAAA,GACF;AAEJ;AC1FA,IAAMC,WAAAA,GAAwC;AAAA,EAC5C,EAAA,EAAI,oBAAA;AAAA,EACJ,EAAA,EAAI,mBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,SAAS,MAAM,EAAA,EAWP;AAXO,EAAA,IAAA,EAAA,GAAA,EAAA,EACpB;AAAA,IAAA,KAAA;AAAA,IACA,IAAA;AAAA,IACA,KAAA;AAAA,IACA,IAAA,GAAO,IAAA;AAAA,IACP,SAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA,GAAY,KAAA;AAAA,IACZ,SAAA;AAAA,IACA;AAAA,GA/BF,GAsBsB,EAAA,EAUjB,KAAA,GAAA,SAAA,CAViB,EAAA,EAUjB;AAAA,IATH,OAAA;AAAA,IACA,MAAA;AAAA,IACA,OAAA;AAAA,IACA,MAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,WAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,OAAA,GAAU,EAAA,IAAA,IAAA,GAAA,EAAA,GAAM,KAAA,IAAA,IAAA,GAAA,MAAA,GAAA,KAAA,CAAO,WAAA,EAAA,CAAc,QAAQ,MAAA,EAAQ,GAAA,CAAA;AAE3D,EAAA,uBACEF,gBAAC,KAAA,EAAA,EAAI,SAAA,EAAW,GAAG,uBAAA,EAAyB,SAAA,IAAa,QAAQ,CAAA,EAC9D,QAAA,EAAA;AAAA,IAAA,KAAA,oBACCC,cAAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAA,EAAS,OAAA;AAAA,QACT,SAAA,EAAU,mCAAA;AAAA,QAET,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,oBAEFD,eAAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,4BAAA,EACZ,QAAA,EAAA;AAAA,MAAA,SAAA,oBACCC,cAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,mDACb,QAAA,EAAA,SAAA,EACH,CAAA;AAAA,sBAEFA,cAAAA;AAAA,QAAC,OAAA;AAAA,QAAA,cAAA,CAAA;AAAA,UACC,EAAA,EAAI,OAAA;AAAA,UACJ,SAAA,EAAW,EAAA;AAAA,YACT,2EAAA;AAAA,YACA,gCAAA;AAAA,YACA,qDAAA;AAAA,YACA,wEAAA;AAAA,YACAC,YAAW,IAAI,CAAA;AAAA,YACf,QACI,wDAAA,GACA,2DAAA;AAAA,YACJ,SAAA,IAAa,MAAA;AAAA,YACb,UAAA,IAAc,MAAA;AAAA,YACd;AAAA;AACF,SAAA,EACI,KAAA;AAAA,OACN;AAAA,MACC,8BACCD,cAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oDACb,QAAA,EAAA,UAAA,EACH;AAAA,KAAA,EAEJ,CAAA;AAAA,IAAA,CACE,IAAA,IAAQ,KAAA,qBACRA,cAAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAW,EAAA,CAAG,SAAA,EAAW,KAAA,GAAQ,cAAA,GAAiB,eAAe,CAAA,EACjE,kCAAS,IAAA,EACZ;AAAA,GAAA,EAEJ,CAAA;AAEJ;ACxEA,IAAM,YAAA,GAAe;AAAA,EACnB,IAAA,EAAM,EAAA;AAAA,EACN,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI,WAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,IAAM,aAAA,GAAgB;AAAA,EACpB,IAAA,EAAM,EAAA;AAAA,EACN,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI,KAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEO,SAAS,KAAK,EAAA,EAQP;AARO,EAAA,IAAA,EAAA,GAAA,EAAA,EACnB;AAAA,IAAA,MAAA,GAAS,IAAA;AAAA,IACT,SAAA,GAAY,KAAA;AAAA,IACZ,QAAA,GAAW,IAAA;AAAA,IACX,OAAA,GAAU,IAAA;AAAA,IACV,SAAA;AAAA,IACA;AAAA,GA9BF,GAwBqB,EAAA,EAOhB,KAAA,GAAA,SAAA,CAPgB,EAAA,EAOhB;AAAA,IANH,QAAA;AAAA,IACA,WAAA;AAAA,IACA,UAAA;AAAA,IACA,SAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,uBACEA,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,qBAAA;AAAA,QACA,aAAa,MAAM,CAAA;AAAA,QACnB,cAAc,OAAO,CAAA;AAAA,QACrB,QAAA,IAAY,wBAAA;AAAA,QACZ,SAAA,IACE,+DAAA;AAAA,QACF;AAAA;AACF,KAAA,EACI,KAAA,CAAA,EAVL;AAAA,MAYE;AAAA,KAAA;AAAA,GACH;AAEJ;AAIO,SAAS,WAAW,EAAA,EAAoD;AAApD,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,aAAW,QAAA,EArDxC,GAqD2B,IAA0B,KAAA,GAAA,SAAA,CAA1B,EAAA,EAA0B,CAAxB,WAAA,EAAW,UAAA,CAAA,CAAA;AACtC,EAAA,uBACEA,cAAAA,CAAC,KAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAI,SAAA,EAAW,EAAA,CAAG,4BAA4B,SAAS,CAAA,EAAA,EAAO,KAAA,CAAA,EAA9D,EACE,QAAA,EAAA,CACH,CAAA;AAEJ;AAIO,SAAS,UAAU,EAAA,EAAmD;AAAnD,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,aAAW,QAAA,EA/DvC,GA+D0B,IAA0B,KAAA,GAAA,SAAA,CAA1B,EAAA,EAA0B,CAAxB,WAAA,EAAW,UAAA,CAAA,CAAA;AACrC,EAAA,uBACEA,cAAAA;AAAA,IAAC,IAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,qCAAA,EAAuC,SAAS;AAAA,KAAA,EAC1D,KAAA,CAAA,EAFL;AAAA,MAIE;AAAA,KAAA;AAAA,GACH;AAEJ;AAKO,SAAS,gBAAgB,EAAA,EAIP;AAJO,EAAA,IAAA,EAAA,GAAA,EAAA,EAC9B;AAAA,IAAA,SAAA;AAAA,IACA;AAAA,GA/EF,GA6EgC,EAAA,EAG3B,KAAA,GAAA,SAAA,CAH2B,EAAA,EAG3B;AAAA,IAFH,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,uBACEA,cAAAA,CAAC,GAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAE,SAAA,EAAW,EAAA,CAAG,yBAAyB,SAAS,CAAA,EAAA,EAAO,KAAA,CAAA,EAAzD,EACE,QAAA,EAAA,CACH,CAAA;AAEJ;AAIO,SAAS,YAAY,EAAA,EAIP;AAJO,EAAA,IAAA,EAAA,GAAA,EAAA,EAC1B;AAAA,IAAA,SAAA;AAAA,IACA;AAAA,GA7FF,GA2F4B,EAAA,EAGvB,KAAA,GAAA,SAAA,CAHuB,EAAA,EAGvB;AAAA,IAFH,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,uBACEA,cAAAA,CAAC,KAAA,EAAA,aAAA,CAAA,cAAA,CAAA,EAAI,SAAA,EAAW,EAAA,CAAG,yBAAyB,SAAS,CAAA,EAAA,EAAO,KAAA,CAAA,EAA3D,EACE,QAAA,EAAA,CACH,CAAA;AAEJ;AAIO,SAAS,WAAW,EAAA,EAAoD;AAApD,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,aAAW,QAAA,EAzGxC,GAyG2B,IAA0B,KAAA,GAAA,SAAA,CAA1B,EAAA,EAA0B,CAAxB,WAAA,EAAW,UAAA,CAAA,CAAA;AACtC,EAAA,uBACEA,cAAAA;AAAA,IAAC,KAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,EAAA,CAAG,8BAAA,EAAgC,SAAS;AAAA,KAAA,EACnD,KAAA,CAAA,EAFL;AAAA,MAIE;AAAA,KAAA;AAAA,GACH;AAEJ;AClGA,IAAME,cAAAA,GAA8C;AAAA,EAClD,OAAA,EAAS,2BAAA;AAAA,EACT,OAAA,EAAS,2BAAA;AAAA,EACT,OAAA,EAAS,6BAAA;AAAA,EACT,OAAA,EAAS,+BAAA;AAAA,EACT,MAAA,EAAQ,yBAAA;AAAA,EACR,IAAA,EAAM;AACR,CAAA;AAEA,IAAM,SAAA,GAA0C;AAAA,EAC9C,OAAA,EAAS,aAAA;AAAA,EACT,OAAA,EAAS,aAAA;AAAA,EACT,OAAA,EAAS,cAAA;AAAA,EACT,OAAA,EAAS,eAAA;AAAA,EACT,MAAA,EAAQ,YAAA;AAAA,EACR,IAAA,EAAM;AACR,CAAA;AAEO,SAAS,MAAM,EAAA,EAMP;AANO,EAAA,IAAA,EAAA,GAAA,EAAA,EACpB;AAAA,IAAA,OAAA,GAAU,SAAA;AAAA,IACV,GAAA,GAAM,KAAA;AAAA,IACN,SAAA;AAAA,IACA;AAAA,GAtCF,GAkCsB,EAAA,EAKjB,KAAA,GAAA,SAAA,CALiB,EAAA,EAKjB;AAAA,IAJH,SAAA;AAAA,IACA,KAAA;AAAA,IACA,WAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,uBACEH,eAAAA;AAAA,IAAC,MAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,iFAAA;AAAA,QACAG,eAAc,OAAO,CAAA;AAAA,QACrB;AAAA;AACF,KAAA,EACI,KAAA,CAAA,EANL;AAAA,MAQE,QAAA,EAAA;AAAA,QAAA,GAAA,oBACCF,cAAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YACC,SAAA,EAAW,EAAA,CAAG,0BAAA,EAA4B,SAAA,CAAU,OAAO,CAAC;AAAA;AAAA,SAC9D;AAAA,QAED;AAAA;AAAA,KAAA;AAAA,GACH;AAEJ;AC5CA,IAAMC,WAAAA,GAAyC;AAAA,EAC7C,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,iBAAA;AAAA,EACJ,EAAA,EAAI,mBAAA;AAAA,EACJ,EAAA,EAAI,qBAAA;AAAA,EACJ,EAAA,EAAI;AACN,CAAA;AAEA,SAAS,YAAY,IAAA,EAAsB;AACzC,EAAA,OAAO,IAAA,CACJ,KAAA,CAAM,GAAG,CAAA,CACT,KAAA,CAAM,GAAG,CAAC,CAAA,CACV,GAAA,CAAI,CAAC,IAAA,KAAM;AA1BhB,IAAA,IAAA,EAAA,EAAA,EAAA;AA0BmB,IAAA,OAAA,CAAA,EAAA,GAAA,CAAA,EAAA,GAAA,IAAA,CAAK,CAAC,CAAA,KAAN,IAAA,GAAA,MAAA,GAAA,EAAA,CAAS,WAAA,EAAA,KAAT,IAAA,GAAA,EAAA,GAA0B,EAAA;AAAA,EAAA,CAAE,CAAA,CAC1C,KAAK,EAAE,CAAA;AACZ;AAEO,SAAS,OAAO,EAAA,EAOP;AAPO,EAAA,IAAA,EAAA,GAAA,EAAA,EACrB;AAAA,IAAA,GAAA;AAAA,IACA,GAAA,GAAM,EAAA;AAAA,IACN,QAAA;AAAA,IACA,IAAA,GAAO,IAAA;AAAA,IACP;AAAA,GAnCF,GA8BuB,EAAA,EAMlB,KAAA,GAAA,SAAA,CANkB,EAAA,EAMlB;AAAA,IALH,KAAA;AAAA,IACA,KAAA;AAAA,IACA,UAAA;AAAA,IACA,MAAA;AAAA,IACA;AAAA,GAAA,CAAA;AAGA,EAAA,MAAM,CAAC,QAAA,EAAU,WAAW,CAAA,GAAIE,sBAAA,CAAM,SAAS,KAAK,CAAA;AACpD,EAAA,MAAM,YAAA,GAAe,CAAC,GAAA,IAAO,QAAA;AAC7B,EAAA,MAAM,QAAA,GAAW,WAAW,WAAA,CAAY,QAAQ,IAAI,GAAA,GAAM,WAAA,CAAY,GAAG,CAAA,GAAI,GAAA;AAE7E,EAAA,uBACEH,cAAAA;AAAA,IAAC,MAAA;AAAA,IAAA,aAAA,CAAA,cAAA,CAAA;AAAA,MACC,SAAA,EAAW,EAAA;AAAA,QACT,oGAAA;AAAA,QACAC,YAAW,IAAI,CAAA;AAAA,QACf;AAAA;AACF,KAAA,EACI,KAAA,CAAA,EANL;AAAA,MAQE,QAAA,EAAA,CAAC,YAAA;AAAA;AAAA,wBAEAD,cAAAA;AAAA,UAAC,KAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,GAAA;AAAA,YACA,SAAA,EAAU,4BAAA;AAAA,YACV,OAAA,EAAS,MAAM,WAAA,CAAY,IAAI;AAAA;AAAA;AACjC,0BAEAA,cAAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,yCACb,QAAA,EAAA,QAAA,EACH;AAAA,KAAA;AAAA,GAEJ;AAEJ","file":"index.js","sourcesContent":["export type ClassValue =\r\n | string\r\n | number\r\n | bigint\r\n | boolean\r\n | undefined\r\n | null\r\n | ClassValue[];\r\n\r\nexport function cn(...inputs: ClassValue[]): string {\r\n const result: string[] = [];\r\n\r\n for (const input of inputs) {\r\n if (!input && input !== 0) continue;\r\n if (typeof input === \"string\") {\r\n result.push(input);\r\n } else if (typeof input === \"number\" || typeof input === \"bigint\") {\r\n result.push(String(input));\r\n } else if (Array.isArray(input)) {\r\n const nested = cn(...(input as ClassValue[]));\r\n if (nested) result.push(nested);\r\n }\r\n }\r\n\r\n return result.join(\" \").replace(/\\s+/g, \" \").trim();\r\n}\r\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport type ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"outline\"\n | \"ghost\"\n | \"destructive\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n loading?: boolean;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n fullWidth?: boolean;\n}\n\nconst variantStyles: Record<ButtonVariant, string> = {\n primary:\n \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus-visible:ring-blue-500\",\n secondary:\n \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring-gray-400\",\n outline:\n \"border border-gray-300 bg-transparent text-gray-900 hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-gray-400\",\n ghost:\n \"bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-gray-400\",\n destructive:\n \"bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500\",\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n sm: \"h-8 px-3 text-sm gap-1.5\",\n md: \"h-10 px-4 text-sm gap-2\",\n lg: \"h-12 px-6 text-base gap-2.5\",\n};\n\nexport function Button({\n variant = \"primary\",\n size = \"md\",\n loading = false,\n leftIcon,\n rightIcon,\n fullWidth = false,\n children,\n className,\n disabled,\n ...props\n}: ButtonProps) {\n const isDisabled = disabled || loading;\n\n return (\n <button\n className={cn(\n \"inline-flex items-center justify-center rounded-md font-medium\",\n \"transition-colors duration-150 ease-in-out\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n variantStyles[variant],\n sizeStyles[size],\n fullWidth && \"w-full\",\n className\n )}\n disabled={isDisabled}\n {...props}\n >\n {loading ? (\n <Spinner size={size} />\n ) : (\n leftIcon && <span className=\"shrink-0\">{leftIcon}</span>\n )}\n {children}\n {!loading && rightIcon && (\n <span className=\"shrink-0\">{rightIcon}</span>\n )}\n </button>\n );\n}\n\nfunction Spinner({ size }: { size: ButtonSize }) {\n const spinnerSize = size === \"sm\" ? \"h-3 w-3\" : size === \"lg\" ? \"h-5 w-5\" : \"h-4 w-4\";\n return (\n <svg\n className={cn(\"animate-spin shrink-0\", spinnerSize)}\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n />\n </svg>\n );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n label?: string;\n hint?: string;\n error?: string;\n size?: InputSize;\n leftAddon?: React.ReactNode;\n rightAddon?: React.ReactNode;\n fullWidth?: boolean;\n}\n\nconst sizeStyles: Record<InputSize, string> = {\n sm: \"h-8 px-2.5 text-sm\",\n md: \"h-10 px-3 text-sm\",\n lg: \"h-12 px-4 text-base\",\n};\n\nexport function Input({\n label,\n hint,\n error,\n size = \"md\",\n leftAddon,\n rightAddon,\n fullWidth = false,\n className,\n id,\n ...props\n}: InputProps) {\n const inputId = id ?? label?.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"flex flex-col gap-1.5\", fullWidth && \"w-full\")}>\n {label && (\n <label\n htmlFor={inputId}\n className=\"text-sm font-medium text-gray-700\"\n >\n {label}\n </label>\n )}\n <div className=\"relative flex items-center\">\n {leftAddon && (\n <span className=\"absolute left-3 flex items-center text-gray-500\">\n {leftAddon}\n </span>\n )}\n <input\n id={inputId}\n className={cn(\n \"w-full rounded-md border bg-white text-gray-900 placeholder:text-gray-400\",\n \"transition-colors duration-150\",\n \"focus:outline-none focus:ring-2 focus:ring-offset-0\",\n \"disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500\",\n sizeStyles[size],\n error\n ? \"border-red-400 focus:border-red-400 focus:ring-red-300\"\n : \"border-gray-300 focus:border-blue-500 focus:ring-blue-300\",\n leftAddon && \"pl-9\",\n rightAddon && \"pr-9\",\n className\n )}\n {...props}\n />\n {rightAddon && (\n <span className=\"absolute right-3 flex items-center text-gray-500\">\n {rightAddon}\n </span>\n )}\n </div>\n {(hint || error) && (\n <p className={cn(\"text-xs\", error ? \"text-red-500\" : \"text-gray-500\")}>\n {error ?? hint}\n </p>\n )}\n </div>\n );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n shadow?: \"none\" | \"sm\" | \"md\" | \"lg\";\n hoverable?: boolean;\n bordered?: boolean;\n padding?: \"none\" | \"sm\" | \"md\" | \"lg\";\n}\n\nconst shadowStyles = {\n none: \"\",\n sm: \"shadow-sm\",\n md: \"shadow-md\",\n lg: \"shadow-lg\",\n};\n\nconst paddingStyles = {\n none: \"\",\n sm: \"p-4\",\n md: \"p-6\",\n lg: \"p-8\",\n};\n\nexport function Card({\n shadow = \"sm\",\n hoverable = false,\n bordered = true,\n padding = \"md\",\n className,\n children,\n ...props\n}: CardProps) {\n return (\n <div\n className={cn(\n \"rounded-xl bg-white\",\n shadowStyles[shadow],\n paddingStyles[padding],\n bordered && \"border border-gray-200\",\n hoverable &&\n \"cursor-pointer transition-shadow duration-200 hover:shadow-md\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function CardHeader({ className, children, ...props }: CardHeaderProps) {\n return (\n <div className={cn(\"mb-4 flex flex-col gap-1\", className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport function CardTitle({ className, children, ...props }: CardTitleProps) {\n return (\n <h3\n className={cn(\"text-lg font-semibold text-gray-900\", className)}\n {...props}\n >\n {children}\n </h3>\n );\n}\n\nexport interface CardDescriptionProps\n extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport function CardDescription({\n className,\n children,\n ...props\n}: CardDescriptionProps) {\n return (\n <p className={cn(\"text-sm text-gray-500\", className)} {...props}>\n {children}\n </p>\n );\n}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function CardContent({\n className,\n children,\n ...props\n}: CardContentProps) {\n return (\n <div className={cn(\"text-sm text-gray-700\", className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function CardFooter({ className, children, ...props }: CardFooterProps) {\n return (\n <div\n className={cn(\"mt-4 flex items-center gap-2\", className)}\n {...props}\n >\n {children}\n </div>\n );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport type BadgeVariant =\n | \"default\"\n | \"primary\"\n | \"success\"\n | \"warning\"\n | \"danger\"\n | \"info\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n variant?: BadgeVariant;\n dot?: boolean;\n}\n\nconst variantStyles: Record<BadgeVariant, string> = {\n default: \"bg-gray-100 text-gray-700\",\n primary: \"bg-blue-100 text-blue-700\",\n success: \"bg-green-100 text-green-700\",\n warning: \"bg-yellow-100 text-yellow-700\",\n danger: \"bg-red-100 text-red-700\",\n info: \"bg-sky-100 text-sky-700\",\n};\n\nconst dotStyles: Record<BadgeVariant, string> = {\n default: \"bg-gray-500\",\n primary: \"bg-blue-500\",\n success: \"bg-green-500\",\n warning: \"bg-yellow-500\",\n danger: \"bg-red-500\",\n info: \"bg-sky-500\",\n};\n\nexport function Badge({\n variant = \"default\",\n dot = false,\n className,\n children,\n ...props\n}: BadgeProps) {\n return (\n <span\n className={cn(\n \"inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium\",\n variantStyles[variant],\n className\n )}\n {...props}\n >\n {dot && (\n <span\n className={cn(\"h-1.5 w-1.5 rounded-full\", dotStyles[variant])}\n />\n )}\n {children}\n </span>\n );\n}\n","\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n src?: string;\n alt?: string;\n fallback?: string;\n size?: AvatarSize;\n}\n\nconst sizeStyles: Record<AvatarSize, string> = {\n xs: \"h-6 w-6 text-xs\",\n sm: \"h-8 w-8 text-sm\",\n md: \"h-10 w-10 text-sm\",\n lg: \"h-12 w-12 text-base\",\n xl: \"h-16 w-16 text-lg\",\n};\n\nfunction getInitials(name: string): string {\n return name\n .split(\" \")\n .slice(0, 2)\n .map((word) => word[0]?.toUpperCase() ?? \"\")\n .join(\"\");\n}\n\nexport function Avatar({\n src,\n alt = \"\",\n fallback,\n size = \"md\",\n className,\n ...props\n}: AvatarProps) {\n const [imgError, setImgError] = React.useState(false);\n const showFallback = !src || imgError;\n const initials = fallback ? getInitials(fallback) : alt ? getInitials(alt) : \"?\";\n\n return (\n <span\n className={cn(\n \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-200\",\n sizeStyles[size],\n className\n )}\n {...props}\n >\n {!showFallback ? (\n // eslint-disable-next-line @next/next/no-img-element\n <img\n src={src}\n alt={alt}\n className=\"h-full w-full object-cover\"\n onError={() => setImgError(true)}\n />\n ) : (\n <span className=\"font-medium text-gray-600 select-none\">\n {initials}\n </span>\n )}\n </span>\n );\n}\n"]}
|
package/dist/index.mjs
ADDED
|
@@ -0,0 +1,400 @@
|
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import React from 'react';
|
|
3
|
+
|
|
4
|
+
var __defProp = Object.defineProperty;
|
|
5
|
+
var __defProps = Object.defineProperties;
|
|
6
|
+
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
|
|
7
|
+
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
|
|
8
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
9
|
+
var __propIsEnum = Object.prototype.propertyIsEnumerable;
|
|
10
|
+
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
|
|
11
|
+
var __spreadValues = (a, b) => {
|
|
12
|
+
for (var prop in b || (b = {}))
|
|
13
|
+
if (__hasOwnProp.call(b, prop))
|
|
14
|
+
__defNormalProp(a, prop, b[prop]);
|
|
15
|
+
if (__getOwnPropSymbols)
|
|
16
|
+
for (var prop of __getOwnPropSymbols(b)) {
|
|
17
|
+
if (__propIsEnum.call(b, prop))
|
|
18
|
+
__defNormalProp(a, prop, b[prop]);
|
|
19
|
+
}
|
|
20
|
+
return a;
|
|
21
|
+
};
|
|
22
|
+
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
|
|
23
|
+
var __objRest = (source, exclude) => {
|
|
24
|
+
var target = {};
|
|
25
|
+
for (var prop in source)
|
|
26
|
+
if (__hasOwnProp.call(source, prop) && exclude.indexOf(prop) < 0)
|
|
27
|
+
target[prop] = source[prop];
|
|
28
|
+
if (source != null && __getOwnPropSymbols)
|
|
29
|
+
for (var prop of __getOwnPropSymbols(source)) {
|
|
30
|
+
if (exclude.indexOf(prop) < 0 && __propIsEnum.call(source, prop))
|
|
31
|
+
target[prop] = source[prop];
|
|
32
|
+
}
|
|
33
|
+
return target;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
// src/lib/utils.ts
|
|
37
|
+
function cn(...inputs) {
|
|
38
|
+
const result = [];
|
|
39
|
+
for (const input of inputs) {
|
|
40
|
+
if (!input && input !== 0) continue;
|
|
41
|
+
if (typeof input === "string") {
|
|
42
|
+
result.push(input);
|
|
43
|
+
} else if (typeof input === "number" || typeof input === "bigint") {
|
|
44
|
+
result.push(String(input));
|
|
45
|
+
} else if (Array.isArray(input)) {
|
|
46
|
+
const nested = cn(...input);
|
|
47
|
+
if (nested) result.push(nested);
|
|
48
|
+
}
|
|
49
|
+
}
|
|
50
|
+
return result.join(" ").replace(/\s+/g, " ").trim();
|
|
51
|
+
}
|
|
52
|
+
var variantStyles = {
|
|
53
|
+
primary: "bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus-visible:ring-blue-500",
|
|
54
|
+
secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring-gray-400",
|
|
55
|
+
outline: "border border-gray-300 bg-transparent text-gray-900 hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-gray-400",
|
|
56
|
+
ghost: "bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-gray-400",
|
|
57
|
+
destructive: "bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500"
|
|
58
|
+
};
|
|
59
|
+
var sizeStyles = {
|
|
60
|
+
sm: "h-8 px-3 text-sm gap-1.5",
|
|
61
|
+
md: "h-10 px-4 text-sm gap-2",
|
|
62
|
+
lg: "h-12 px-6 text-base gap-2.5"
|
|
63
|
+
};
|
|
64
|
+
function Button(_a) {
|
|
65
|
+
var _b = _a, {
|
|
66
|
+
variant = "primary",
|
|
67
|
+
size = "md",
|
|
68
|
+
loading = false,
|
|
69
|
+
leftIcon,
|
|
70
|
+
rightIcon,
|
|
71
|
+
fullWidth = false,
|
|
72
|
+
children,
|
|
73
|
+
className,
|
|
74
|
+
disabled
|
|
75
|
+
} = _b, props = __objRest(_b, [
|
|
76
|
+
"variant",
|
|
77
|
+
"size",
|
|
78
|
+
"loading",
|
|
79
|
+
"leftIcon",
|
|
80
|
+
"rightIcon",
|
|
81
|
+
"fullWidth",
|
|
82
|
+
"children",
|
|
83
|
+
"className",
|
|
84
|
+
"disabled"
|
|
85
|
+
]);
|
|
86
|
+
const isDisabled = disabled || loading;
|
|
87
|
+
return /* @__PURE__ */ jsxs(
|
|
88
|
+
"button",
|
|
89
|
+
__spreadProps(__spreadValues({
|
|
90
|
+
className: cn(
|
|
91
|
+
"inline-flex items-center justify-center rounded-md font-medium",
|
|
92
|
+
"transition-colors duration-150 ease-in-out",
|
|
93
|
+
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
|
|
94
|
+
"disabled:pointer-events-none disabled:opacity-50",
|
|
95
|
+
variantStyles[variant],
|
|
96
|
+
sizeStyles[size],
|
|
97
|
+
fullWidth && "w-full",
|
|
98
|
+
className
|
|
99
|
+
),
|
|
100
|
+
disabled: isDisabled
|
|
101
|
+
}, props), {
|
|
102
|
+
children: [
|
|
103
|
+
loading ? /* @__PURE__ */ jsx(Spinner, { size }) : leftIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: leftIcon }),
|
|
104
|
+
children,
|
|
105
|
+
!loading && rightIcon && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: rightIcon })
|
|
106
|
+
]
|
|
107
|
+
})
|
|
108
|
+
);
|
|
109
|
+
}
|
|
110
|
+
function Spinner({ size }) {
|
|
111
|
+
const spinnerSize = size === "sm" ? "h-3 w-3" : size === "lg" ? "h-5 w-5" : "h-4 w-4";
|
|
112
|
+
return /* @__PURE__ */ jsxs(
|
|
113
|
+
"svg",
|
|
114
|
+
{
|
|
115
|
+
className: cn("animate-spin shrink-0", spinnerSize),
|
|
116
|
+
xmlns: "http://www.w3.org/2000/svg",
|
|
117
|
+
fill: "none",
|
|
118
|
+
viewBox: "0 0 24 24",
|
|
119
|
+
children: [
|
|
120
|
+
/* @__PURE__ */ jsx(
|
|
121
|
+
"circle",
|
|
122
|
+
{
|
|
123
|
+
className: "opacity-25",
|
|
124
|
+
cx: "12",
|
|
125
|
+
cy: "12",
|
|
126
|
+
r: "10",
|
|
127
|
+
stroke: "currentColor",
|
|
128
|
+
strokeWidth: "4"
|
|
129
|
+
}
|
|
130
|
+
),
|
|
131
|
+
/* @__PURE__ */ jsx(
|
|
132
|
+
"path",
|
|
133
|
+
{
|
|
134
|
+
className: "opacity-75",
|
|
135
|
+
fill: "currentColor",
|
|
136
|
+
d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z"
|
|
137
|
+
}
|
|
138
|
+
)
|
|
139
|
+
]
|
|
140
|
+
}
|
|
141
|
+
);
|
|
142
|
+
}
|
|
143
|
+
var sizeStyles2 = {
|
|
144
|
+
sm: "h-8 px-2.5 text-sm",
|
|
145
|
+
md: "h-10 px-3 text-sm",
|
|
146
|
+
lg: "h-12 px-4 text-base"
|
|
147
|
+
};
|
|
148
|
+
function Input(_a) {
|
|
149
|
+
var _b = _a, {
|
|
150
|
+
label,
|
|
151
|
+
hint,
|
|
152
|
+
error,
|
|
153
|
+
size = "md",
|
|
154
|
+
leftAddon,
|
|
155
|
+
rightAddon,
|
|
156
|
+
fullWidth = false,
|
|
157
|
+
className,
|
|
158
|
+
id
|
|
159
|
+
} = _b, props = __objRest(_b, [
|
|
160
|
+
"label",
|
|
161
|
+
"hint",
|
|
162
|
+
"error",
|
|
163
|
+
"size",
|
|
164
|
+
"leftAddon",
|
|
165
|
+
"rightAddon",
|
|
166
|
+
"fullWidth",
|
|
167
|
+
"className",
|
|
168
|
+
"id"
|
|
169
|
+
]);
|
|
170
|
+
const inputId = id != null ? id : label == null ? void 0 : label.toLowerCase().replace(/\s+/g, "-");
|
|
171
|
+
return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col gap-1.5", fullWidth && "w-full"), children: [
|
|
172
|
+
label && /* @__PURE__ */ jsx(
|
|
173
|
+
"label",
|
|
174
|
+
{
|
|
175
|
+
htmlFor: inputId,
|
|
176
|
+
className: "text-sm font-medium text-gray-700",
|
|
177
|
+
children: label
|
|
178
|
+
}
|
|
179
|
+
),
|
|
180
|
+
/* @__PURE__ */ jsxs("div", { className: "relative flex items-center", children: [
|
|
181
|
+
leftAddon && /* @__PURE__ */ jsx("span", { className: "absolute left-3 flex items-center text-gray-500", children: leftAddon }),
|
|
182
|
+
/* @__PURE__ */ jsx(
|
|
183
|
+
"input",
|
|
184
|
+
__spreadValues({
|
|
185
|
+
id: inputId,
|
|
186
|
+
className: cn(
|
|
187
|
+
"w-full rounded-md border bg-white text-gray-900 placeholder:text-gray-400",
|
|
188
|
+
"transition-colors duration-150",
|
|
189
|
+
"focus:outline-none focus:ring-2 focus:ring-offset-0",
|
|
190
|
+
"disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500",
|
|
191
|
+
sizeStyles2[size],
|
|
192
|
+
error ? "border-red-400 focus:border-red-400 focus:ring-red-300" : "border-gray-300 focus:border-blue-500 focus:ring-blue-300",
|
|
193
|
+
leftAddon && "pl-9",
|
|
194
|
+
rightAddon && "pr-9",
|
|
195
|
+
className
|
|
196
|
+
)
|
|
197
|
+
}, props)
|
|
198
|
+
),
|
|
199
|
+
rightAddon && /* @__PURE__ */ jsx("span", { className: "absolute right-3 flex items-center text-gray-500", children: rightAddon })
|
|
200
|
+
] }),
|
|
201
|
+
(hint || error) && /* @__PURE__ */ jsx("p", { className: cn("text-xs", error ? "text-red-500" : "text-gray-500"), children: error != null ? error : hint })
|
|
202
|
+
] });
|
|
203
|
+
}
|
|
204
|
+
var shadowStyles = {
|
|
205
|
+
none: "",
|
|
206
|
+
sm: "shadow-sm",
|
|
207
|
+
md: "shadow-md",
|
|
208
|
+
lg: "shadow-lg"
|
|
209
|
+
};
|
|
210
|
+
var paddingStyles = {
|
|
211
|
+
none: "",
|
|
212
|
+
sm: "p-4",
|
|
213
|
+
md: "p-6",
|
|
214
|
+
lg: "p-8"
|
|
215
|
+
};
|
|
216
|
+
function Card(_a) {
|
|
217
|
+
var _b = _a, {
|
|
218
|
+
shadow = "sm",
|
|
219
|
+
hoverable = false,
|
|
220
|
+
bordered = true,
|
|
221
|
+
padding = "md",
|
|
222
|
+
className,
|
|
223
|
+
children
|
|
224
|
+
} = _b, props = __objRest(_b, [
|
|
225
|
+
"shadow",
|
|
226
|
+
"hoverable",
|
|
227
|
+
"bordered",
|
|
228
|
+
"padding",
|
|
229
|
+
"className",
|
|
230
|
+
"children"
|
|
231
|
+
]);
|
|
232
|
+
return /* @__PURE__ */ jsx(
|
|
233
|
+
"div",
|
|
234
|
+
__spreadProps(__spreadValues({
|
|
235
|
+
className: cn(
|
|
236
|
+
"rounded-xl bg-white",
|
|
237
|
+
shadowStyles[shadow],
|
|
238
|
+
paddingStyles[padding],
|
|
239
|
+
bordered && "border border-gray-200",
|
|
240
|
+
hoverable && "cursor-pointer transition-shadow duration-200 hover:shadow-md",
|
|
241
|
+
className
|
|
242
|
+
)
|
|
243
|
+
}, props), {
|
|
244
|
+
children
|
|
245
|
+
})
|
|
246
|
+
);
|
|
247
|
+
}
|
|
248
|
+
function CardHeader(_a) {
|
|
249
|
+
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
250
|
+
return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: cn("mb-4 flex flex-col gap-1", className) }, props), { children }));
|
|
251
|
+
}
|
|
252
|
+
function CardTitle(_a) {
|
|
253
|
+
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
254
|
+
return /* @__PURE__ */ jsx(
|
|
255
|
+
"h3",
|
|
256
|
+
__spreadProps(__spreadValues({
|
|
257
|
+
className: cn("text-lg font-semibold text-gray-900", className)
|
|
258
|
+
}, props), {
|
|
259
|
+
children
|
|
260
|
+
})
|
|
261
|
+
);
|
|
262
|
+
}
|
|
263
|
+
function CardDescription(_a) {
|
|
264
|
+
var _b = _a, {
|
|
265
|
+
className,
|
|
266
|
+
children
|
|
267
|
+
} = _b, props = __objRest(_b, [
|
|
268
|
+
"className",
|
|
269
|
+
"children"
|
|
270
|
+
]);
|
|
271
|
+
return /* @__PURE__ */ jsx("p", __spreadProps(__spreadValues({ className: cn("text-sm text-gray-500", className) }, props), { children }));
|
|
272
|
+
}
|
|
273
|
+
function CardContent(_a) {
|
|
274
|
+
var _b = _a, {
|
|
275
|
+
className,
|
|
276
|
+
children
|
|
277
|
+
} = _b, props = __objRest(_b, [
|
|
278
|
+
"className",
|
|
279
|
+
"children"
|
|
280
|
+
]);
|
|
281
|
+
return /* @__PURE__ */ jsx("div", __spreadProps(__spreadValues({ className: cn("text-sm text-gray-700", className) }, props), { children }));
|
|
282
|
+
}
|
|
283
|
+
function CardFooter(_a) {
|
|
284
|
+
var _b = _a, { className, children } = _b, props = __objRest(_b, ["className", "children"]);
|
|
285
|
+
return /* @__PURE__ */ jsx(
|
|
286
|
+
"div",
|
|
287
|
+
__spreadProps(__spreadValues({
|
|
288
|
+
className: cn("mt-4 flex items-center gap-2", className)
|
|
289
|
+
}, props), {
|
|
290
|
+
children
|
|
291
|
+
})
|
|
292
|
+
);
|
|
293
|
+
}
|
|
294
|
+
var variantStyles2 = {
|
|
295
|
+
default: "bg-gray-100 text-gray-700",
|
|
296
|
+
primary: "bg-blue-100 text-blue-700",
|
|
297
|
+
success: "bg-green-100 text-green-700",
|
|
298
|
+
warning: "bg-yellow-100 text-yellow-700",
|
|
299
|
+
danger: "bg-red-100 text-red-700",
|
|
300
|
+
info: "bg-sky-100 text-sky-700"
|
|
301
|
+
};
|
|
302
|
+
var dotStyles = {
|
|
303
|
+
default: "bg-gray-500",
|
|
304
|
+
primary: "bg-blue-500",
|
|
305
|
+
success: "bg-green-500",
|
|
306
|
+
warning: "bg-yellow-500",
|
|
307
|
+
danger: "bg-red-500",
|
|
308
|
+
info: "bg-sky-500"
|
|
309
|
+
};
|
|
310
|
+
function Badge(_a) {
|
|
311
|
+
var _b = _a, {
|
|
312
|
+
variant = "default",
|
|
313
|
+
dot = false,
|
|
314
|
+
className,
|
|
315
|
+
children
|
|
316
|
+
} = _b, props = __objRest(_b, [
|
|
317
|
+
"variant",
|
|
318
|
+
"dot",
|
|
319
|
+
"className",
|
|
320
|
+
"children"
|
|
321
|
+
]);
|
|
322
|
+
return /* @__PURE__ */ jsxs(
|
|
323
|
+
"span",
|
|
324
|
+
__spreadProps(__spreadValues({
|
|
325
|
+
className: cn(
|
|
326
|
+
"inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium",
|
|
327
|
+
variantStyles2[variant],
|
|
328
|
+
className
|
|
329
|
+
)
|
|
330
|
+
}, props), {
|
|
331
|
+
children: [
|
|
332
|
+
dot && /* @__PURE__ */ jsx(
|
|
333
|
+
"span",
|
|
334
|
+
{
|
|
335
|
+
className: cn("h-1.5 w-1.5 rounded-full", dotStyles[variant])
|
|
336
|
+
}
|
|
337
|
+
),
|
|
338
|
+
children
|
|
339
|
+
]
|
|
340
|
+
})
|
|
341
|
+
);
|
|
342
|
+
}
|
|
343
|
+
var sizeStyles3 = {
|
|
344
|
+
xs: "h-6 w-6 text-xs",
|
|
345
|
+
sm: "h-8 w-8 text-sm",
|
|
346
|
+
md: "h-10 w-10 text-sm",
|
|
347
|
+
lg: "h-12 w-12 text-base",
|
|
348
|
+
xl: "h-16 w-16 text-lg"
|
|
349
|
+
};
|
|
350
|
+
function getInitials(name) {
|
|
351
|
+
return name.split(" ").slice(0, 2).map((word) => {
|
|
352
|
+
var _a, _b;
|
|
353
|
+
return (_b = (_a = word[0]) == null ? void 0 : _a.toUpperCase()) != null ? _b : "";
|
|
354
|
+
}).join("");
|
|
355
|
+
}
|
|
356
|
+
function Avatar(_a) {
|
|
357
|
+
var _b = _a, {
|
|
358
|
+
src,
|
|
359
|
+
alt = "",
|
|
360
|
+
fallback,
|
|
361
|
+
size = "md",
|
|
362
|
+
className
|
|
363
|
+
} = _b, props = __objRest(_b, [
|
|
364
|
+
"src",
|
|
365
|
+
"alt",
|
|
366
|
+
"fallback",
|
|
367
|
+
"size",
|
|
368
|
+
"className"
|
|
369
|
+
]);
|
|
370
|
+
const [imgError, setImgError] = React.useState(false);
|
|
371
|
+
const showFallback = !src || imgError;
|
|
372
|
+
const initials = fallback ? getInitials(fallback) : alt ? getInitials(alt) : "?";
|
|
373
|
+
return /* @__PURE__ */ jsx(
|
|
374
|
+
"span",
|
|
375
|
+
__spreadProps(__spreadValues({
|
|
376
|
+
className: cn(
|
|
377
|
+
"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-200",
|
|
378
|
+
sizeStyles3[size],
|
|
379
|
+
className
|
|
380
|
+
)
|
|
381
|
+
}, props), {
|
|
382
|
+
children: !showFallback ? (
|
|
383
|
+
// eslint-disable-next-line @next/next/no-img-element
|
|
384
|
+
/* @__PURE__ */ jsx(
|
|
385
|
+
"img",
|
|
386
|
+
{
|
|
387
|
+
src,
|
|
388
|
+
alt,
|
|
389
|
+
className: "h-full w-full object-cover",
|
|
390
|
+
onError: () => setImgError(true)
|
|
391
|
+
}
|
|
392
|
+
)
|
|
393
|
+
) : /* @__PURE__ */ jsx("span", { className: "font-medium text-gray-600 select-none", children: initials })
|
|
394
|
+
})
|
|
395
|
+
);
|
|
396
|
+
}
|
|
397
|
+
|
|
398
|
+
export { Avatar, Badge, Button, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Input };
|
|
399
|
+
//# sourceMappingURL=index.mjs.map
|
|
400
|
+
//# sourceMappingURL=index.mjs.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["../src/lib/utils.ts","../src/components/ui/Button/Button.tsx","../src/components/ui/Input/Input.tsx","../src/components/ui/Card/Card.tsx","../src/components/ui/Badge/Badge.tsx","../src/components/ui/Avatar/Avatar.tsx"],"names":["sizeStyles","jsxs","jsx","variantStyles"],"mappings":"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","file":"index.mjs","sourcesContent":["export type ClassValue =\r\n | string\r\n | number\r\n | bigint\r\n | boolean\r\n | undefined\r\n | null\r\n | ClassValue[];\r\n\r\nexport function cn(...inputs: ClassValue[]): string {\r\n const result: string[] = [];\r\n\r\n for (const input of inputs) {\r\n if (!input && input !== 0) continue;\r\n if (typeof input === \"string\") {\r\n result.push(input);\r\n } else if (typeof input === \"number\" || typeof input === \"bigint\") {\r\n result.push(String(input));\r\n } else if (Array.isArray(input)) {\r\n const nested = cn(...(input as ClassValue[]));\r\n if (nested) result.push(nested);\r\n }\r\n }\r\n\r\n return result.join(\" \").replace(/\\s+/g, \" \").trim();\r\n}\r\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport type ButtonVariant =\n | \"primary\"\n | \"secondary\"\n | \"outline\"\n | \"ghost\"\n | \"destructive\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface ButtonProps\n extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n variant?: ButtonVariant;\n size?: ButtonSize;\n loading?: boolean;\n leftIcon?: React.ReactNode;\n rightIcon?: React.ReactNode;\n fullWidth?: boolean;\n}\n\nconst variantStyles: Record<ButtonVariant, string> = {\n primary:\n \"bg-blue-600 text-white hover:bg-blue-700 active:bg-blue-800 focus-visible:ring-blue-500\",\n secondary:\n \"bg-gray-100 text-gray-900 hover:bg-gray-200 active:bg-gray-300 focus-visible:ring-gray-400\",\n outline:\n \"border border-gray-300 bg-transparent text-gray-900 hover:bg-gray-50 active:bg-gray-100 focus-visible:ring-gray-400\",\n ghost:\n \"bg-transparent text-gray-700 hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-gray-400\",\n destructive:\n \"bg-red-600 text-white hover:bg-red-700 active:bg-red-800 focus-visible:ring-red-500\",\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n sm: \"h-8 px-3 text-sm gap-1.5\",\n md: \"h-10 px-4 text-sm gap-2\",\n lg: \"h-12 px-6 text-base gap-2.5\",\n};\n\nexport function Button({\n variant = \"primary\",\n size = \"md\",\n loading = false,\n leftIcon,\n rightIcon,\n fullWidth = false,\n children,\n className,\n disabled,\n ...props\n}: ButtonProps) {\n const isDisabled = disabled || loading;\n\n return (\n <button\n className={cn(\n \"inline-flex items-center justify-center rounded-md font-medium\",\n \"transition-colors duration-150 ease-in-out\",\n \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2\",\n \"disabled:pointer-events-none disabled:opacity-50\",\n variantStyles[variant],\n sizeStyles[size],\n fullWidth && \"w-full\",\n className\n )}\n disabled={isDisabled}\n {...props}\n >\n {loading ? (\n <Spinner size={size} />\n ) : (\n leftIcon && <span className=\"shrink-0\">{leftIcon}</span>\n )}\n {children}\n {!loading && rightIcon && (\n <span className=\"shrink-0\">{rightIcon}</span>\n )}\n </button>\n );\n}\n\nfunction Spinner({ size }: { size: ButtonSize }) {\n const spinnerSize = size === \"sm\" ? \"h-3 w-3\" : size === \"lg\" ? \"h-5 w-5\" : \"h-4 w-4\";\n return (\n <svg\n className={cn(\"animate-spin shrink-0\", spinnerSize)}\n xmlns=\"http://www.w3.org/2000/svg\"\n fill=\"none\"\n viewBox=\"0 0 24 24\"\n >\n <circle\n className=\"opacity-25\"\n cx=\"12\"\n cy=\"12\"\n r=\"10\"\n stroke=\"currentColor\"\n strokeWidth=\"4\"\n />\n <path\n className=\"opacity-75\"\n fill=\"currentColor\"\n d=\"M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4z\"\n />\n </svg>\n );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\n\nexport interface InputProps\n extends Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\"> {\n label?: string;\n hint?: string;\n error?: string;\n size?: InputSize;\n leftAddon?: React.ReactNode;\n rightAddon?: React.ReactNode;\n fullWidth?: boolean;\n}\n\nconst sizeStyles: Record<InputSize, string> = {\n sm: \"h-8 px-2.5 text-sm\",\n md: \"h-10 px-3 text-sm\",\n lg: \"h-12 px-4 text-base\",\n};\n\nexport function Input({\n label,\n hint,\n error,\n size = \"md\",\n leftAddon,\n rightAddon,\n fullWidth = false,\n className,\n id,\n ...props\n}: InputProps) {\n const inputId = id ?? label?.toLowerCase().replace(/\\s+/g, \"-\");\n\n return (\n <div className={cn(\"flex flex-col gap-1.5\", fullWidth && \"w-full\")}>\n {label && (\n <label\n htmlFor={inputId}\n className=\"text-sm font-medium text-gray-700\"\n >\n {label}\n </label>\n )}\n <div className=\"relative flex items-center\">\n {leftAddon && (\n <span className=\"absolute left-3 flex items-center text-gray-500\">\n {leftAddon}\n </span>\n )}\n <input\n id={inputId}\n className={cn(\n \"w-full rounded-md border bg-white text-gray-900 placeholder:text-gray-400\",\n \"transition-colors duration-150\",\n \"focus:outline-none focus:ring-2 focus:ring-offset-0\",\n \"disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500\",\n sizeStyles[size],\n error\n ? \"border-red-400 focus:border-red-400 focus:ring-red-300\"\n : \"border-gray-300 focus:border-blue-500 focus:ring-blue-300\",\n leftAddon && \"pl-9\",\n rightAddon && \"pr-9\",\n className\n )}\n {...props}\n />\n {rightAddon && (\n <span className=\"absolute right-3 flex items-center text-gray-500\">\n {rightAddon}\n </span>\n )}\n </div>\n {(hint || error) && (\n <p className={cn(\"text-xs\", error ? \"text-red-500\" : \"text-gray-500\")}>\n {error ?? hint}\n </p>\n )}\n </div>\n );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport interface CardProps extends React.HTMLAttributes<HTMLDivElement> {\n shadow?: \"none\" | \"sm\" | \"md\" | \"lg\";\n hoverable?: boolean;\n bordered?: boolean;\n padding?: \"none\" | \"sm\" | \"md\" | \"lg\";\n}\n\nconst shadowStyles = {\n none: \"\",\n sm: \"shadow-sm\",\n md: \"shadow-md\",\n lg: \"shadow-lg\",\n};\n\nconst paddingStyles = {\n none: \"\",\n sm: \"p-4\",\n md: \"p-6\",\n lg: \"p-8\",\n};\n\nexport function Card({\n shadow = \"sm\",\n hoverable = false,\n bordered = true,\n padding = \"md\",\n className,\n children,\n ...props\n}: CardProps) {\n return (\n <div\n className={cn(\n \"rounded-xl bg-white\",\n shadowStyles[shadow],\n paddingStyles[padding],\n bordered && \"border border-gray-200\",\n hoverable &&\n \"cursor-pointer transition-shadow duration-200 hover:shadow-md\",\n className\n )}\n {...props}\n >\n {children}\n </div>\n );\n}\n\nexport interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function CardHeader({ className, children, ...props }: CardHeaderProps) {\n return (\n <div className={cn(\"mb-4 flex flex-col gap-1\", className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport function CardTitle({ className, children, ...props }: CardTitleProps) {\n return (\n <h3\n className={cn(\"text-lg font-semibold text-gray-900\", className)}\n {...props}\n >\n {children}\n </h3>\n );\n}\n\nexport interface CardDescriptionProps\n extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport function CardDescription({\n className,\n children,\n ...props\n}: CardDescriptionProps) {\n return (\n <p className={cn(\"text-sm text-gray-500\", className)} {...props}>\n {children}\n </p>\n );\n}\n\nexport interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function CardContent({\n className,\n children,\n ...props\n}: CardContentProps) {\n return (\n <div className={cn(\"text-sm text-gray-700\", className)} {...props}>\n {children}\n </div>\n );\n}\n\nexport interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport function CardFooter({ className, children, ...props }: CardFooterProps) {\n return (\n <div\n className={cn(\"mt-4 flex items-center gap-2\", className)}\n {...props}\n >\n {children}\n </div>\n );\n}\n","import React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport type BadgeVariant =\n | \"default\"\n | \"primary\"\n | \"success\"\n | \"warning\"\n | \"danger\"\n | \"info\";\n\nexport interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {\n variant?: BadgeVariant;\n dot?: boolean;\n}\n\nconst variantStyles: Record<BadgeVariant, string> = {\n default: \"bg-gray-100 text-gray-700\",\n primary: \"bg-blue-100 text-blue-700\",\n success: \"bg-green-100 text-green-700\",\n warning: \"bg-yellow-100 text-yellow-700\",\n danger: \"bg-red-100 text-red-700\",\n info: \"bg-sky-100 text-sky-700\",\n};\n\nconst dotStyles: Record<BadgeVariant, string> = {\n default: \"bg-gray-500\",\n primary: \"bg-blue-500\",\n success: \"bg-green-500\",\n warning: \"bg-yellow-500\",\n danger: \"bg-red-500\",\n info: \"bg-sky-500\",\n};\n\nexport function Badge({\n variant = \"default\",\n dot = false,\n className,\n children,\n ...props\n}: BadgeProps) {\n return (\n <span\n className={cn(\n \"inline-flex items-center gap-1.5 rounded-full px-2.5 py-0.5 text-xs font-medium\",\n variantStyles[variant],\n className\n )}\n {...props}\n >\n {dot && (\n <span\n className={cn(\"h-1.5 w-1.5 rounded-full\", dotStyles[variant])}\n />\n )}\n {children}\n </span>\n );\n}\n","\"use client\";\n\nimport React from \"react\";\nimport { cn } from \"../../../lib/utils\";\n\nexport type AvatarSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\n\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n src?: string;\n alt?: string;\n fallback?: string;\n size?: AvatarSize;\n}\n\nconst sizeStyles: Record<AvatarSize, string> = {\n xs: \"h-6 w-6 text-xs\",\n sm: \"h-8 w-8 text-sm\",\n md: \"h-10 w-10 text-sm\",\n lg: \"h-12 w-12 text-base\",\n xl: \"h-16 w-16 text-lg\",\n};\n\nfunction getInitials(name: string): string {\n return name\n .split(\" \")\n .slice(0, 2)\n .map((word) => word[0]?.toUpperCase() ?? \"\")\n .join(\"\");\n}\n\nexport function Avatar({\n src,\n alt = \"\",\n fallback,\n size = \"md\",\n className,\n ...props\n}: AvatarProps) {\n const [imgError, setImgError] = React.useState(false);\n const showFallback = !src || imgError;\n const initials = fallback ? getInitials(fallback) : alt ? getInitials(alt) : \"?\";\n\n return (\n <span\n className={cn(\n \"relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-gray-200\",\n sizeStyles[size],\n className\n )}\n {...props}\n >\n {!showFallback ? (\n // eslint-disable-next-line @next/next/no-img-element\n <img\n src={src}\n alt={alt}\n className=\"h-full w-full object-cover\"\n onError={() => setImgError(true)}\n />\n ) : (\n <span className=\"font-medium text-gray-600 select-none\">\n {initials}\n </span>\n )}\n </span>\n );\n}\n"]}
|
package/package.json
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@grazziotin/react-components-next",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Biblioteca de componentes React reutilizáveis",
|
|
5
|
+
"private": false,
|
|
6
|
+
"main": "./dist/index.js",
|
|
7
|
+
"module": "./dist/index.mjs",
|
|
8
|
+
"types": "./dist/index.d.ts",
|
|
9
|
+
"exports": {
|
|
10
|
+
".": {
|
|
11
|
+
"types": "./dist/index.d.ts",
|
|
12
|
+
"import": "./dist/index.mjs",
|
|
13
|
+
"require": "./dist/index.js"
|
|
14
|
+
},
|
|
15
|
+
"./styles": "./dist/index.css"
|
|
16
|
+
},
|
|
17
|
+
"files": [
|
|
18
|
+
"dist"
|
|
19
|
+
],
|
|
20
|
+
"scripts": {
|
|
21
|
+
"storybook": "storybook dev -p 6006",
|
|
22
|
+
"build-storybook": "storybook build",
|
|
23
|
+
"build:css": "tailwindcss -i ./src/styles/index.css -o ./dist/index.css --minify",
|
|
24
|
+
"build:lib": "tsup && npm run build:css",
|
|
25
|
+
"build:lib:watch": "tsup --watch",
|
|
26
|
+
"type-check": "tsc --noEmit",
|
|
27
|
+
"lint": "eslint src/",
|
|
28
|
+
"prepublishOnly": "npm run build:lib"
|
|
29
|
+
},
|
|
30
|
+
"keywords": [
|
|
31
|
+
"react",
|
|
32
|
+
"components",
|
|
33
|
+
"ui",
|
|
34
|
+
"typescript",
|
|
35
|
+
"tailwindcss"
|
|
36
|
+
],
|
|
37
|
+
"author": "",
|
|
38
|
+
"license": "MIT",
|
|
39
|
+
"peerDependencies": {
|
|
40
|
+
"react": ">=18.0.0",
|
|
41
|
+
"react-dom": ">=18.0.0"
|
|
42
|
+
},
|
|
43
|
+
"dependencies": {
|
|
44
|
+
"next": "16.2.6",
|
|
45
|
+
"react": ">=18.0.0",
|
|
46
|
+
"react-dom": ">=18.0.0"
|
|
47
|
+
},
|
|
48
|
+
"devDependencies": {
|
|
49
|
+
"@chromatic-com/storybook": "^5.2.1",
|
|
50
|
+
"@storybook/addon-a11y": "^10.4.0",
|
|
51
|
+
"@storybook/addon-docs": "^10.4.0",
|
|
52
|
+
"@storybook/addon-mcp": "^0.6.0",
|
|
53
|
+
"@storybook/addon-vitest": "^10.4.0",
|
|
54
|
+
"@storybook/nextjs-vite": "^10.4.0",
|
|
55
|
+
"@tailwindcss/cli": "^4.3.0",
|
|
56
|
+
"@tailwindcss/postcss": "^4",
|
|
57
|
+
"@types/node": "^20",
|
|
58
|
+
"@types/react": "^19",
|
|
59
|
+
"@types/react-dom": "^19",
|
|
60
|
+
"@vitest/browser-playwright": "^4.1.7",
|
|
61
|
+
"@vitest/coverage-v8": "^4.1.7",
|
|
62
|
+
"eslint": "^9",
|
|
63
|
+
"eslint-config-next": "16.2.6",
|
|
64
|
+
"eslint-plugin-storybook": "^10.4.0",
|
|
65
|
+
"playwright": "^1.60.0",
|
|
66
|
+
"storybook": "^10.4.0",
|
|
67
|
+
"tailwindcss": "^4",
|
|
68
|
+
"tsup": "^8.5.1",
|
|
69
|
+
"typescript": "^5",
|
|
70
|
+
"vite": "^8.0.13",
|
|
71
|
+
"vitest": "^4.1.7"
|
|
72
|
+
}
|
|
73
|
+
}
|