nonamecartoon 0.4.1 → 0.4.2
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 +79 -10
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -60,16 +60,19 @@ function App() {
|
|
|
60
60
|
|
|
61
61
|
### Button
|
|
62
62
|
```tsx
|
|
63
|
-
<Button variant="primary" size="md"
|
|
63
|
+
<Button variant="primary" size="md" isLoading={false}>
|
|
64
64
|
Click Me
|
|
65
65
|
</Button>
|
|
66
66
|
```
|
|
67
|
-
| Prop | Type | Default |
|
|
68
|
-
|
|
69
|
-
| `variant` | `'primary' \| 'secondary' \| 'ghost' \| 'danger'` | `'primary'` |
|
|
70
|
-
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` |
|
|
71
|
-
| `
|
|
72
|
-
| `
|
|
67
|
+
| Prop | Type | Default | Description |
|
|
68
|
+
|------|------|---------|-------------|
|
|
69
|
+
| `variant` | `'primary' \| 'secondary' \| 'ghost' \| 'danger' \| 'comic'` | `'primary'` | Button style variant |
|
|
70
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Button size |
|
|
71
|
+
| `isLoading` | `boolean` | `false` | Shows loading spinner |
|
|
72
|
+
| `isDisabled` | `boolean` | `false` | Disables the button |
|
|
73
|
+
| `fullWidth` | `boolean` | `false` | Makes button full width |
|
|
74
|
+
| `leftIcon` | `ReactNode` | - | Icon on the left |
|
|
75
|
+
| `rightIcon` | `ReactNode` | - | Icon on the right |
|
|
73
76
|
|
|
74
77
|
### Input
|
|
75
78
|
```tsx
|
|
@@ -77,17 +80,83 @@ function App() {
|
|
|
77
80
|
label="Email"
|
|
78
81
|
placeholder="email@example.com"
|
|
79
82
|
isError={hasError}
|
|
80
|
-
|
|
83
|
+
errorMessage="Invalid email"
|
|
81
84
|
/>
|
|
82
85
|
```
|
|
86
|
+
| Prop | Type | Default | Description |
|
|
87
|
+
|------|------|---------|-------------|
|
|
88
|
+
| `label` | `string` | - | Label text |
|
|
89
|
+
| `placeholder` | `string` | - | Placeholder text |
|
|
90
|
+
| `helperText` | `string` | - | Helper text below input |
|
|
91
|
+
| `errorMessage` | `string` | - | Error message (overrides helperText) |
|
|
92
|
+
| `isError` | `boolean` | `false` | Error state |
|
|
93
|
+
| `isSuccess` | `boolean` | `false` | Success state |
|
|
94
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Input size |
|
|
95
|
+
| `leftIcon` | `ReactNode` | - | Icon on the left |
|
|
83
96
|
|
|
84
97
|
### Card
|
|
85
98
|
```tsx
|
|
86
|
-
<Card variant="
|
|
87
|
-
<h3>Title</h3>
|
|
99
|
+
<Card variant="comic" title="Title" subtitle="Subtitle" isClickable>
|
|
88
100
|
<p>Content</p>
|
|
89
101
|
</Card>
|
|
90
102
|
```
|
|
103
|
+
| Prop | Type | Default | Description |
|
|
104
|
+
|------|------|---------|-------------|
|
|
105
|
+
| `variant` | `'default' \| 'outlined' \| 'comic' \| 'elevated'` | `'default'` | Card style |
|
|
106
|
+
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Card size |
|
|
107
|
+
| `title` | `string` | - | Header title |
|
|
108
|
+
| `subtitle` | `string` | - | Header subtitle |
|
|
109
|
+
| `isClickable` | `boolean` | `false` | Makes card clickable with keyboard support |
|
|
110
|
+
| `footer` | `ReactNode` | - | Footer content |
|
|
111
|
+
|
|
112
|
+
### Modal
|
|
113
|
+
```tsx
|
|
114
|
+
<Modal isOpen={isOpen} onClose={handleClose} title="Modal Title">
|
|
115
|
+
<p>Modal content</p>
|
|
116
|
+
</Modal>
|
|
117
|
+
```
|
|
118
|
+
| Prop | Type | Default | Description |
|
|
119
|
+
|------|------|---------|-------------|
|
|
120
|
+
| `isOpen` | `boolean` | - | Modal visibility |
|
|
121
|
+
| `onClose` | `() => void` | - | Close handler |
|
|
122
|
+
| `title` | `string` | - | Modal title |
|
|
123
|
+
| `size` | `'sm' \| 'md' \| 'lg' \| 'full'` | `'md'` | Modal size |
|
|
124
|
+
| `closeOnOverlay` | `boolean` | `true` | Close when clicking overlay |
|
|
125
|
+
| `closeOnEsc` | `boolean` | `true` | Close on ESC key |
|
|
126
|
+
|
|
127
|
+
### Alert
|
|
128
|
+
```tsx
|
|
129
|
+
<Alert variant="success" title="Success!" closable>
|
|
130
|
+
Operation completed successfully.
|
|
131
|
+
</Alert>
|
|
132
|
+
```
|
|
133
|
+
| Prop | Type | Default | Description |
|
|
134
|
+
|------|------|---------|-------------|
|
|
135
|
+
| `variant` | `'info' \| 'success' \| 'warning' \| 'error'` | `'info'` | Alert type |
|
|
136
|
+
| `title` | `string` | - | Alert title |
|
|
137
|
+
| `icon` | `ReactNode` | (auto) | Custom icon |
|
|
138
|
+
| `showIcon` | `boolean` | `true` | Show/hide icon |
|
|
139
|
+
| `closable` | `boolean` | `false` | Show close button |
|
|
140
|
+
| `onClose` | `() => void` | - | Close handler |
|
|
141
|
+
|
|
142
|
+
### Tabs
|
|
143
|
+
```tsx
|
|
144
|
+
<Tabs
|
|
145
|
+
items={[
|
|
146
|
+
{ id: 'tab1', label: 'Tab 1', content: <Content1 /> },
|
|
147
|
+
{ id: 'tab2', label: 'Tab 2', content: <Content2 /> },
|
|
148
|
+
]}
|
|
149
|
+
onChange={(id) => console.log(id)}
|
|
150
|
+
/>
|
|
151
|
+
```
|
|
152
|
+
| Prop | Type | Default | Description |
|
|
153
|
+
|------|------|---------|-------------|
|
|
154
|
+
| `items` | `TabItem[]` | - | Tab items array |
|
|
155
|
+
| `activeId` | `string` | - | Controlled active tab |
|
|
156
|
+
| `defaultActiveId` | `string` | - | Default active tab |
|
|
157
|
+
| `onChange` | `(id: string) => void` | - | Tab change handler |
|
|
158
|
+
| `variant` | `'default' \| 'comic' \| 'pills'` | `'default'` | Tab style |
|
|
159
|
+
| `fullWidth` | `boolean` | `false` | Full width tabs |
|
|
91
160
|
|
|
92
161
|
---
|
|
93
162
|
|
package/package.json
CHANGED