@ataraui/ataraui-react 0.1.1 → 0.3.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 +274 -0
- package/dist/index.d.mts +90 -1
- package/dist/index.d.ts +90 -1
- package/dist/index.js +436 -4
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +418 -4
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/README.md
ADDED
|
@@ -0,0 +1,274 @@
|
|
|
1
|
+
<div align="center">
|
|
2
|
+
<img src="./public/ataraui-logo-final.jpg" alt="AtaraUI" height="80" />
|
|
3
|
+
<p>A calm, composable component library — built for developers who move fast without losing clarity.</p>
|
|
4
|
+
|
|
5
|
+
[](https://www.npmjs.com/package/@ataraui/ataraui-react)
|
|
6
|
+
[](./LICENSE)
|
|
7
|
+
</div>
|
|
8
|
+
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
## Installation
|
|
12
|
+
|
|
13
|
+
```bash
|
|
14
|
+
npm install @ataraui/ataraui-react
|
|
15
|
+
# or
|
|
16
|
+
pnpm add @ataraui/ataraui-react
|
|
17
|
+
# or
|
|
18
|
+
yarn add @ataraui/ataraui-react
|
|
19
|
+
# or
|
|
20
|
+
bun add @ataraui/ataraui-react
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
> **Peer dependencies:** `react >= 17`, `tailwindcss >= 4`
|
|
24
|
+
|
|
25
|
+
## Setup
|
|
26
|
+
|
|
27
|
+
Add the source and theme tokens to your `globals.css`:
|
|
28
|
+
|
|
29
|
+
```css
|
|
30
|
+
@import "tailwindcss";
|
|
31
|
+
@source "../../node_modules/@ataraui/ataraui-react/dist/**/*.js";
|
|
32
|
+
|
|
33
|
+
@theme {
|
|
34
|
+
--color-primary-50: #FFF4EE;
|
|
35
|
+
--color-primary-100: #FFE0CC;
|
|
36
|
+
--color-primary-200: #FFBF99;
|
|
37
|
+
--color-primary-300: #F08050;
|
|
38
|
+
--color-primary-400: #D4602A;
|
|
39
|
+
--color-primary-500: #C2440A;
|
|
40
|
+
--color-primary-600: #A03808;
|
|
41
|
+
--color-primary-700: #8F2F06;
|
|
42
|
+
--color-primary-800: #5C1C03;
|
|
43
|
+
--color-primary-900: #2E0D01;
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
|
|
47
|
+
## Usage
|
|
48
|
+
|
|
49
|
+
```tsx
|
|
50
|
+
import {
|
|
51
|
+
Button,
|
|
52
|
+
Input,
|
|
53
|
+
Badge,
|
|
54
|
+
Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter,
|
|
55
|
+
Avatar,
|
|
56
|
+
Separator,
|
|
57
|
+
Spinner,
|
|
58
|
+
Select,
|
|
59
|
+
Checkbox,
|
|
60
|
+
RadioGroup,
|
|
61
|
+
Switch,
|
|
62
|
+
} from '@ataraui/ataraui-react'
|
|
63
|
+
|
|
64
|
+
export default function Page() {
|
|
65
|
+
return (
|
|
66
|
+
<div>
|
|
67
|
+
<Badge variant="default">New</Badge>
|
|
68
|
+
|
|
69
|
+
<Input label="Email" placeholder="you@example.com" hint="We will never spam you." />
|
|
70
|
+
|
|
71
|
+
<Button variant="primary" size="md">Ship it</Button>
|
|
72
|
+
<Button variant="outline" isLoading>Loading...</Button>
|
|
73
|
+
|
|
74
|
+
<Card variant="elevated">
|
|
75
|
+
<CardHeader>
|
|
76
|
+
<CardTitle>Card Title</CardTitle>
|
|
77
|
+
<CardDescription>Card description here.</CardDescription>
|
|
78
|
+
</CardHeader>
|
|
79
|
+
<CardContent>Content goes here.</CardContent>
|
|
80
|
+
<CardFooter>
|
|
81
|
+
<Button variant="primary" size="sm">Confirm</Button>
|
|
82
|
+
<Button variant="ghost" size="sm">Cancel</Button>
|
|
83
|
+
</CardFooter>
|
|
84
|
+
</Card>
|
|
85
|
+
|
|
86
|
+
<Avatar src="https://github.com/ryo.png" alt="Ryo" size="md" />
|
|
87
|
+
<Avatar fallback="Ryo Kurniawan" size="md" />
|
|
88
|
+
|
|
89
|
+
<Separator />
|
|
90
|
+
<Separator label="OR" />
|
|
91
|
+
|
|
92
|
+
<Spinner size="md" />
|
|
93
|
+
<Spinner size="md" label="Loading data..." />
|
|
94
|
+
|
|
95
|
+
<Select
|
|
96
|
+
label="Country"
|
|
97
|
+
placeholder="Select a country..."
|
|
98
|
+
options={[
|
|
99
|
+
{ value: 'id', label: 'Indonesia' },
|
|
100
|
+
{ value: 'sg', label: 'Singapore' },
|
|
101
|
+
]}
|
|
102
|
+
/>
|
|
103
|
+
|
|
104
|
+
<Checkbox label="Accept terms" />
|
|
105
|
+
<Checkbox label="Remember me" description="Stay logged in for 30 days." />
|
|
106
|
+
|
|
107
|
+
<RadioGroup
|
|
108
|
+
name="plan"
|
|
109
|
+
label="Billing Plan"
|
|
110
|
+
options={[
|
|
111
|
+
{ value: 'monthly', label: 'Monthly' },
|
|
112
|
+
{ value: 'yearly', label: 'Yearly' },
|
|
113
|
+
]}
|
|
114
|
+
/>
|
|
115
|
+
|
|
116
|
+
<Switch label="Notifications" description="Receive email notifications." />
|
|
117
|
+
</div>
|
|
118
|
+
)
|
|
119
|
+
}
|
|
120
|
+
```
|
|
121
|
+
|
|
122
|
+
## Components
|
|
123
|
+
|
|
124
|
+
| Component | Variants | Status |
|
|
125
|
+
|-----------|----------|--------|
|
|
126
|
+
| `Button` | `primary` `secondary` `outline` `ghost` `destructive` | ✅ Ready |
|
|
127
|
+
| `Input` | `default` `error` | ✅ Ready |
|
|
128
|
+
| `Badge` | `default` `secondary` `outline` `success` `warning` `destructive` | ✅ Ready |
|
|
129
|
+
| `Card` | `elevated` `outlined` `ghost` | ✅ Ready |
|
|
130
|
+
| `Avatar` | — | ✅ Ready |
|
|
131
|
+
| `Separator` | `horizontal` `vertical` | ✅ Ready |
|
|
132
|
+
| `Spinner` | — | ✅ Ready |
|
|
133
|
+
| `Select` | `default` `error` | ✅ Ready |
|
|
134
|
+
| `Checkbox` | — | ✅ Ready |
|
|
135
|
+
| `RadioGroup` | `vertical` `horizontal` | ✅ Ready |
|
|
136
|
+
| `Switch` | — | ✅ Ready |
|
|
137
|
+
|
|
138
|
+
## Button Props
|
|
139
|
+
|
|
140
|
+
| Prop | Type | Default | Description |
|
|
141
|
+
|------|------|---------|-------------|
|
|
142
|
+
| `variant` | `primary` \| `secondary` \| `outline` \| `ghost` \| `destructive` | `primary` | Visual style |
|
|
143
|
+
| `size` | `sm` \| `md` \| `lg` \| `icon` | `md` | Button size |
|
|
144
|
+
| `isLoading` | `boolean` | `false` | Show loading spinner |
|
|
145
|
+
|
|
146
|
+
## Input Props
|
|
147
|
+
|
|
148
|
+
| Prop | Type | Description |
|
|
149
|
+
|------|------|-------------|
|
|
150
|
+
| `label` | `string` | Label displayed above the input |
|
|
151
|
+
| `error` | `string` | Error message (also triggers error state) |
|
|
152
|
+
| `hint` | `string` | Helper text displayed below the input |
|
|
153
|
+
| `inputSize` | `sm` \| `md` \| `lg` | Input height size |
|
|
154
|
+
|
|
155
|
+
## Card Props
|
|
156
|
+
|
|
157
|
+
| Prop | Type | Default | Description |
|
|
158
|
+
|------|------|---------|-------------|
|
|
159
|
+
| `variant` | `elevated` \| `outlined` \| `ghost` | `elevated` | Visual style |
|
|
160
|
+
| `padding` | `none` \| `sm` \| `md` \| `lg` | `md` | Inner padding |
|
|
161
|
+
|
|
162
|
+
## Avatar Props
|
|
163
|
+
|
|
164
|
+
| Prop | Type | Default | Description |
|
|
165
|
+
|------|------|---------|-------------|
|
|
166
|
+
| `src` | `string` | — | Image URL |
|
|
167
|
+
| `alt` | `string` | — | Image alt text |
|
|
168
|
+
| `fallback` | `string` | — | Name for initials fallback |
|
|
169
|
+
| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | Avatar size |
|
|
170
|
+
|
|
171
|
+
## Separator Props
|
|
172
|
+
|
|
173
|
+
| Prop | Type | Default | Description |
|
|
174
|
+
|------|------|---------|-------------|
|
|
175
|
+
| `orientation` | `horizontal` \| `vertical` | `horizontal` | Direction |
|
|
176
|
+
| `label` | `string` | — | Text label in the middle |
|
|
177
|
+
|
|
178
|
+
## Spinner Props
|
|
179
|
+
|
|
180
|
+
| Prop | Type | Default | Description |
|
|
181
|
+
|------|------|---------|-------------|
|
|
182
|
+
| `size` | `xs` \| `sm` \| `md` \| `lg` \| `xl` | `md` | Spinner size |
|
|
183
|
+
| `label` | `string` | — | Text label below spinner |
|
|
184
|
+
|
|
185
|
+
## Select Props
|
|
186
|
+
|
|
187
|
+
| Prop | Type | Description |
|
|
188
|
+
|------|------|-------------|
|
|
189
|
+
| `label` | `string` | Label displayed above the select |
|
|
190
|
+
| `error` | `string` | Error message (also triggers error state) |
|
|
191
|
+
| `hint` | `string` | Helper text displayed below the select |
|
|
192
|
+
| `placeholder` | `string` | Placeholder option text |
|
|
193
|
+
| `options` | `SelectOption[]` | Array of `{ value, label, disabled? }` |
|
|
194
|
+
| `selectSize` | `sm` \| `md` \| `lg` | Select height size |
|
|
195
|
+
|
|
196
|
+
## Checkbox Props
|
|
197
|
+
|
|
198
|
+
| Prop | Type | Description |
|
|
199
|
+
|------|------|-------------|
|
|
200
|
+
| `label` | `string` | Label displayed next to the checkbox |
|
|
201
|
+
| `description` | `string` | Helper text below the label |
|
|
202
|
+
| `error` | `string` | Error message below the checkbox |
|
|
203
|
+
|
|
204
|
+
## RadioGroup Props
|
|
205
|
+
|
|
206
|
+
| Prop | Type | Default | Description |
|
|
207
|
+
|------|------|---------|-------------|
|
|
208
|
+
| `name` | `string` | — | Input group name (required) |
|
|
209
|
+
| `options` | `RadioOption[]` | — | Array of `{ value, label, description?, disabled? }` |
|
|
210
|
+
| `value` | `string` | — | Controlled value |
|
|
211
|
+
| `onChange` | `(value: string) => void` | — | Change handler |
|
|
212
|
+
| `label` | `string` | — | Group label |
|
|
213
|
+
| `orientation` | `vertical` \| `horizontal` | `vertical` | Layout direction |
|
|
214
|
+
| `error` | `string` | — | Error message |
|
|
215
|
+
| `hint` | `string` | — | Helper text |
|
|
216
|
+
|
|
217
|
+
## Switch Props
|
|
218
|
+
|
|
219
|
+
| Prop | Type | Description |
|
|
220
|
+
|------|------|-------------|
|
|
221
|
+
| `label` | `string` | Label displayed next to the switch |
|
|
222
|
+
| `description` | `string` | Helper text below the label |
|
|
223
|
+
| `error` | `string` | Error message below the switch |
|
|
224
|
+
| `checked` | `boolean` | Controlled checked state |
|
|
225
|
+
| `defaultChecked` | `boolean` | Default checked state (uncontrolled) |
|
|
226
|
+
| `onChange` | `ChangeEventHandler` | Change handler |
|
|
227
|
+
|
|
228
|
+
## Development
|
|
229
|
+
|
|
230
|
+
```bash
|
|
231
|
+
# Clone the repo
|
|
232
|
+
git clone https://github.com/ataraui/ataraui-react.git
|
|
233
|
+
cd ataraui-react
|
|
234
|
+
|
|
235
|
+
# Install dependencies
|
|
236
|
+
npm install
|
|
237
|
+
|
|
238
|
+
# Build the library
|
|
239
|
+
npm run build
|
|
240
|
+
|
|
241
|
+
# Watch mode
|
|
242
|
+
npm run dev
|
|
243
|
+
```
|
|
244
|
+
|
|
245
|
+
## Publishing
|
|
246
|
+
|
|
247
|
+
```bash
|
|
248
|
+
# Bump version in package.json, then:
|
|
249
|
+
npm run build
|
|
250
|
+
npm publish
|
|
251
|
+
```
|
|
252
|
+
|
|
253
|
+
## Roadmap
|
|
254
|
+
|
|
255
|
+
| Version | Components | Category |
|
|
256
|
+
|---------|-----------|----------|
|
|
257
|
+
| **v0.1.0** ✅ | `Button` `Input` `Badge` | Core + Tailwind v4 |
|
|
258
|
+
| **v0.2.0** ✅ | `Card` `Avatar` `Separator` `Spinner` | Layout primitives |
|
|
259
|
+
| **v0.3.0** ✅ | `Select` `Checkbox` `Radio` `Switch` | Form components |
|
|
260
|
+
| **v0.4.0** | `Modal/Dialog` `Drawer` `Tooltip` `Popover` | Overlay components |
|
|
261
|
+
| **v0.5.0** | `Toast/Alert` `Progress` `Skeleton` | Feedback components |
|
|
262
|
+
| **v0.6.0** | `Table` `Tabs` `Accordion` | Data display |
|
|
263
|
+
| **v0.7.0** | Dark mode · Storybook docs | DX improvements |
|
|
264
|
+
| **v0.8.0** | `Navbar` `Sidebar` `Breadcrumb` | Navigation |
|
|
265
|
+
| **v0.9.0** | `DatePicker` `Combobox` `FileUpload` | Advanced inputs |
|
|
266
|
+
| **v1.0.0** 🎯 | API stable · Full docs · A11y tested · ataraui.com live | Stable release |
|
|
267
|
+
|
|
268
|
+
## Contributing
|
|
269
|
+
|
|
270
|
+
Contributions are welcome! Feel free to open an issue or submit a pull request.
|
|
271
|
+
|
|
272
|
+
## License
|
|
273
|
+
|
|
274
|
+
MIT © [Ryo Kurniawan](https://github.com/ryo-kurniawan)
|
package/dist/index.d.mts
CHANGED
|
@@ -101,4 +101,93 @@ declare const Badge: {
|
|
|
101
101
|
displayName: string;
|
|
102
102
|
};
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
declare const cardVariants: (props?: ({
|
|
105
|
+
variant?: "ghost" | "elevated" | "outlined" | null | undefined;
|
|
106
|
+
padding?: "sm" | "md" | "lg" | "none" | null | undefined;
|
|
107
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
108
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
|
|
109
|
+
}
|
|
110
|
+
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
111
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
112
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
113
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
114
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
115
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
116
|
+
|
|
117
|
+
declare const avatarVariants: (props?: ({
|
|
118
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
119
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
120
|
+
interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
|
|
121
|
+
src?: string;
|
|
122
|
+
alt?: string;
|
|
123
|
+
fallback?: string;
|
|
124
|
+
}
|
|
125
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
126
|
+
|
|
127
|
+
declare const separatorVariants: (props?: ({
|
|
128
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
129
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
130
|
+
interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof separatorVariants> {
|
|
131
|
+
label?: string;
|
|
132
|
+
}
|
|
133
|
+
declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
134
|
+
|
|
135
|
+
declare const spinnerVariants: (props?: ({
|
|
136
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
137
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
138
|
+
interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof spinnerVariants> {
|
|
139
|
+
label?: string;
|
|
140
|
+
}
|
|
141
|
+
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
|
|
142
|
+
|
|
143
|
+
declare const selectVariants: (props?: ({
|
|
144
|
+
state?: "default" | "error" | null | undefined;
|
|
145
|
+
selectSize?: "sm" | "md" | "lg" | null | undefined;
|
|
146
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
147
|
+
interface SelectOption {
|
|
148
|
+
value: string;
|
|
149
|
+
label: string;
|
|
150
|
+
disabled?: boolean;
|
|
151
|
+
}
|
|
152
|
+
interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, VariantProps<typeof selectVariants> {
|
|
153
|
+
label?: string;
|
|
154
|
+
error?: string;
|
|
155
|
+
hint?: string;
|
|
156
|
+
placeholder?: string;
|
|
157
|
+
options?: SelectOption[];
|
|
158
|
+
}
|
|
159
|
+
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
160
|
+
|
|
161
|
+
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
162
|
+
label?: string;
|
|
163
|
+
description?: string;
|
|
164
|
+
error?: string;
|
|
165
|
+
}
|
|
166
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
167
|
+
|
|
168
|
+
interface RadioOption {
|
|
169
|
+
value: string;
|
|
170
|
+
label: string;
|
|
171
|
+
description?: string;
|
|
172
|
+
disabled?: boolean;
|
|
173
|
+
}
|
|
174
|
+
interface RadioGroupProps {
|
|
175
|
+
options: RadioOption[];
|
|
176
|
+
value?: string;
|
|
177
|
+
onChange?: (value: string) => void;
|
|
178
|
+
name: string;
|
|
179
|
+
label?: string;
|
|
180
|
+
error?: string;
|
|
181
|
+
hint?: string;
|
|
182
|
+
orientation?: "vertical" | "horizontal";
|
|
183
|
+
}
|
|
184
|
+
declare const RadioGroup: React.FC<RadioGroupProps>;
|
|
185
|
+
|
|
186
|
+
interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
|
|
187
|
+
label?: string;
|
|
188
|
+
description?: string;
|
|
189
|
+
error?: string;
|
|
190
|
+
}
|
|
191
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
192
|
+
|
|
193
|
+
export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, Input, type InputProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Spinner, type SpinnerProps, Switch, type SwitchProps, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, fontSize, inputVariants, radius, selectVariants, separatorVariants, spinnerVariants };
|
package/dist/index.d.ts
CHANGED
|
@@ -101,4 +101,93 @@ declare const Badge: {
|
|
|
101
101
|
displayName: string;
|
|
102
102
|
};
|
|
103
103
|
|
|
104
|
-
|
|
104
|
+
declare const cardVariants: (props?: ({
|
|
105
|
+
variant?: "ghost" | "elevated" | "outlined" | null | undefined;
|
|
106
|
+
padding?: "sm" | "md" | "lg" | "none" | null | undefined;
|
|
107
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
108
|
+
interface CardProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
|
|
109
|
+
}
|
|
110
|
+
declare const Card: React.ForwardRefExoticComponent<CardProps & React.RefAttributes<HTMLDivElement>>;
|
|
111
|
+
declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
112
|
+
declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLHeadingElement>>;
|
|
113
|
+
declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
|
|
114
|
+
declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
115
|
+
declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
|
|
116
|
+
|
|
117
|
+
declare const avatarVariants: (props?: ({
|
|
118
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
119
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
120
|
+
interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof avatarVariants> {
|
|
121
|
+
src?: string;
|
|
122
|
+
alt?: string;
|
|
123
|
+
fallback?: string;
|
|
124
|
+
}
|
|
125
|
+
declare const Avatar: React.ForwardRefExoticComponent<AvatarProps & React.RefAttributes<HTMLSpanElement>>;
|
|
126
|
+
|
|
127
|
+
declare const separatorVariants: (props?: ({
|
|
128
|
+
orientation?: "horizontal" | "vertical" | null | undefined;
|
|
129
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
130
|
+
interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof separatorVariants> {
|
|
131
|
+
label?: string;
|
|
132
|
+
}
|
|
133
|
+
declare const Separator: React.ForwardRefExoticComponent<SeparatorProps & React.RefAttributes<HTMLDivElement>>;
|
|
134
|
+
|
|
135
|
+
declare const spinnerVariants: (props?: ({
|
|
136
|
+
size?: "sm" | "md" | "lg" | "xs" | "xl" | null | undefined;
|
|
137
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
138
|
+
interface SpinnerProps extends React.HTMLAttributes<HTMLSpanElement>, VariantProps<typeof spinnerVariants> {
|
|
139
|
+
label?: string;
|
|
140
|
+
}
|
|
141
|
+
declare const Spinner: React.ForwardRefExoticComponent<SpinnerProps & React.RefAttributes<HTMLSpanElement>>;
|
|
142
|
+
|
|
143
|
+
declare const selectVariants: (props?: ({
|
|
144
|
+
state?: "default" | "error" | null | undefined;
|
|
145
|
+
selectSize?: "sm" | "md" | "lg" | null | undefined;
|
|
146
|
+
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
147
|
+
interface SelectOption {
|
|
148
|
+
value: string;
|
|
149
|
+
label: string;
|
|
150
|
+
disabled?: boolean;
|
|
151
|
+
}
|
|
152
|
+
interface SelectProps extends Omit<React.SelectHTMLAttributes<HTMLSelectElement>, 'size'>, VariantProps<typeof selectVariants> {
|
|
153
|
+
label?: string;
|
|
154
|
+
error?: string;
|
|
155
|
+
hint?: string;
|
|
156
|
+
placeholder?: string;
|
|
157
|
+
options?: SelectOption[];
|
|
158
|
+
}
|
|
159
|
+
declare const Select: React.ForwardRefExoticComponent<SelectProps & React.RefAttributes<HTMLSelectElement>>;
|
|
160
|
+
|
|
161
|
+
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
162
|
+
label?: string;
|
|
163
|
+
description?: string;
|
|
164
|
+
error?: string;
|
|
165
|
+
}
|
|
166
|
+
declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
|
|
167
|
+
|
|
168
|
+
interface RadioOption {
|
|
169
|
+
value: string;
|
|
170
|
+
label: string;
|
|
171
|
+
description?: string;
|
|
172
|
+
disabled?: boolean;
|
|
173
|
+
}
|
|
174
|
+
interface RadioGroupProps {
|
|
175
|
+
options: RadioOption[];
|
|
176
|
+
value?: string;
|
|
177
|
+
onChange?: (value: string) => void;
|
|
178
|
+
name: string;
|
|
179
|
+
label?: string;
|
|
180
|
+
error?: string;
|
|
181
|
+
hint?: string;
|
|
182
|
+
orientation?: "vertical" | "horizontal";
|
|
183
|
+
}
|
|
184
|
+
declare const RadioGroup: React.FC<RadioGroupProps>;
|
|
185
|
+
|
|
186
|
+
interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
|
|
187
|
+
label?: string;
|
|
188
|
+
description?: string;
|
|
189
|
+
error?: string;
|
|
190
|
+
}
|
|
191
|
+
declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;
|
|
192
|
+
|
|
193
|
+
export { Avatar, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, type CardProps, CardTitle, Checkbox, type CheckboxProps, Input, type InputProps, RadioGroup, type RadioGroupProps, type RadioOption, Select, type SelectOption, type SelectProps, Separator, type SeparatorProps, Spinner, type SpinnerProps, Switch, type SwitchProps, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, colors, fontSize, inputVariants, radius, selectVariants, separatorVariants, spinnerVariants };
|