@neoptocom/neopto-ui 0.5.1 → 0.6.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.
Files changed (12) hide show
  1. package/CONSUMER_SETUP.md +41 -58
  2. package/README.md +2 -23
  3. package/dist/index.cjs +80 -95
  4. package/dist/index.d.cts +27 -223
  5. package/dist/index.d.ts +27 -223
  6. package/dist/index.js +80 -95
  7. package/package.json +2 -9
  8. package/src/components/Avatar.tsx +15 -15
  9. package/src/components/Button.tsx +40 -32
  10. package/src/components/IconButton.tsx +37 -36
  11. package/src/components/Typo.tsx +43 -37
  12. package/scripts/init.mjs +0 -201
package/dist/index.d.cts CHANGED
@@ -1,8 +1,5 @@
1
1
  import * as React from 'react';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
- import * as tailwind_variants from 'tailwind-variants';
4
- import { VariantProps } from 'tailwind-variants';
5
- import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
6
3
 
7
4
  type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
8
5
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -44,43 +41,9 @@ type AvatarProps = {
44
41
  color?: string;
45
42
  /** Accessible alt text; defaults to the person's name */
46
43
  alt?: string;
47
- } & VariantProps<typeof avatarStyles> & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
48
- declare const avatarStyles: tailwind_variants.TVReturnType<{
49
- size: {
50
- sm: string;
51
- md: string;
52
- };
53
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
54
- size: {
55
- sm: string;
56
- md: string;
57
- };
58
- }, {
59
- size: {
60
- sm: string;
61
- md: string;
62
- };
63
- }>, {
64
- size: {
65
- sm: string;
66
- md: string;
67
- };
68
- }, undefined, tailwind_variants.TVReturnType<{
69
- size: {
70
- sm: string;
71
- md: string;
72
- };
73
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
74
- size: {
75
- sm: string;
76
- md: string;
77
- };
78
- }, {
79
- size: {
80
- sm: string;
81
- md: string;
82
- };
83
- }>, unknown, unknown, undefined>>;
44
+ /** Avatar size */
45
+ size?: "sm" | "md";
46
+ } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
84
47
  declare function Avatar({ name, src, color, size, alt, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
85
48
 
86
49
  type AvatarGroupProps = {
@@ -160,195 +123,32 @@ interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSele
160
123
  }
161
124
  declare function Search({ className, options, onSearch, selectedOption, onSelect, searchDelay, disabled, maxHeight, id, children, ...props }: SearchProps): react_jsx_runtime.JSX.Element;
162
125
 
163
- declare const buttonStyles: tailwind_variants.TVReturnType<{
164
- variant: {
165
- primary: string;
166
- secondary: string;
167
- ghost: string;
168
- };
169
- size: {
170
- sm: string;
171
- md: string;
172
- lg: string;
173
- };
174
- fullWidth: {
175
- true: string;
176
- };
177
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
178
- variant: {
179
- primary: string;
180
- secondary: string;
181
- ghost: string;
182
- };
183
- size: {
184
- sm: string;
185
- md: string;
186
- lg: string;
187
- };
188
- fullWidth: {
189
- true: string;
190
- };
191
- }, {
192
- variant: {
193
- primary: string;
194
- secondary: string;
195
- ghost: string;
196
- };
197
- size: {
198
- sm: string;
199
- md: string;
200
- lg: string;
201
- };
202
- fullWidth: {
203
- true: string;
204
- };
205
- }>, {
206
- variant: {
207
- primary: string;
208
- secondary: string;
209
- ghost: string;
210
- };
211
- size: {
212
- sm: string;
213
- md: string;
214
- lg: string;
215
- };
216
- fullWidth: {
217
- true: string;
218
- };
219
- }, undefined, tailwind_variants.TVReturnType<{
220
- variant: {
221
- primary: string;
222
- secondary: string;
223
- ghost: string;
224
- };
225
- size: {
226
- sm: string;
227
- md: string;
228
- lg: string;
229
- };
230
- fullWidth: {
231
- true: string;
232
- };
233
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
234
- variant: {
235
- primary: string;
236
- secondary: string;
237
- ghost: string;
238
- };
239
- size: {
240
- sm: string;
241
- md: string;
242
- lg: string;
243
- };
244
- fullWidth: {
245
- true: string;
246
- };
247
- }, {
248
- variant: {
249
- primary: string;
250
- secondary: string;
251
- ghost: string;
252
- };
253
- size: {
254
- sm: string;
255
- md: string;
256
- lg: string;
257
- };
258
- fullWidth: {
259
- true: string;
260
- };
261
- }>, unknown, unknown, undefined>>;
262
- type ButtonVariants = VariantProps<typeof buttonStyles>;
263
- type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
126
+ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
127
+ /** Button visual variant */
128
+ variant?: "primary" | "secondary" | "ghost";
129
+ /** Button size */
130
+ size?: "sm" | "md" | "lg";
131
+ /** Make button full width */
132
+ fullWidth?: boolean;
264
133
  /** Icon component to display instead of text */
265
134
  icon?: React.ReactNode;
266
135
  };
267
- declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
136
+ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
137
+ /** Button visual variant */
138
+ variant?: "primary" | "secondary" | "ghost";
139
+ /** Button size */
140
+ size?: "sm" | "md" | "lg";
141
+ /** Make button full width */
142
+ fullWidth?: boolean;
268
143
  /** Icon component to display instead of text */
269
144
  icon?: React.ReactNode;
270
145
  } & React.RefAttributes<HTMLButtonElement>>;
271
146
 
272
- declare const iconButtonStyles: tailwind_variants.TVReturnType<{
273
- variant: {
274
- ghost: string;
275
- primary: string;
276
- secondary: string;
277
- };
278
- size: {
279
- sm: string;
280
- md: string;
281
- lg: string;
282
- };
283
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
284
- variant: {
285
- ghost: string;
286
- primary: string;
287
- secondary: string;
288
- };
289
- size: {
290
- sm: string;
291
- md: string;
292
- lg: string;
293
- };
294
- }, {
295
- variant: {
296
- ghost: string;
297
- primary: string;
298
- secondary: string;
299
- };
300
- size: {
301
- sm: string;
302
- md: string;
303
- lg: string;
304
- };
305
- }>, {
306
- variant: {
307
- ghost: string;
308
- primary: string;
309
- secondary: string;
310
- };
311
- size: {
312
- sm: string;
313
- md: string;
314
- lg: string;
315
- };
316
- }, undefined, tailwind_variants.TVReturnType<{
317
- variant: {
318
- ghost: string;
319
- primary: string;
320
- secondary: string;
321
- };
322
- size: {
323
- sm: string;
324
- md: string;
325
- lg: string;
326
- };
327
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
328
- variant: {
329
- ghost: string;
330
- primary: string;
331
- secondary: string;
332
- };
333
- size: {
334
- sm: string;
335
- md: string;
336
- lg: string;
337
- };
338
- }, {
339
- variant: {
340
- ghost: string;
341
- primary: string;
342
- secondary: string;
343
- };
344
- size: {
345
- sm: string;
346
- md: string;
347
- lg: string;
348
- };
349
- }>, unknown, unknown, undefined>>;
350
- type IconButtonVariants = VariantProps<typeof iconButtonStyles>;
351
- type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & IconButtonVariants & {
147
+ type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
148
+ /** Button visual variant */
149
+ variant?: "ghost" | "primary" | "secondary";
150
+ /** Button size */
151
+ size?: "sm" | "md" | "lg";
352
152
  /** Material Symbols icon name */
353
153
  icon: string;
354
154
  /** Icon size (defaults to button size) */
@@ -358,7 +158,11 @@ type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & IconButto
358
158
  /** Optional custom className for the icon */
359
159
  iconClassName?: string;
360
160
  };
361
- declare const IconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & IconButtonVariants & {
161
+ declare const IconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
162
+ /** Button visual variant */
163
+ variant?: "ghost" | "primary" | "secondary";
164
+ /** Button size */
165
+ size?: "sm" | "md" | "lg";
362
166
  /** Material Symbols icon name */
363
167
  icon: string;
364
168
  /** Icon size (defaults to button size) */
package/dist/index.d.ts CHANGED
@@ -1,8 +1,5 @@
1
1
  import * as React from 'react';
2
2
  import * as react_jsx_runtime from 'react/jsx-runtime';
3
- import * as tailwind_variants from 'tailwind-variants';
4
- import { VariantProps } from 'tailwind-variants';
5
- import * as tailwind_variants_dist_config_js from 'tailwind-variants/dist/config.js';
6
3
 
7
4
  type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>;
8
5
  declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
@@ -44,43 +41,9 @@ type AvatarProps = {
44
41
  color?: string;
45
42
  /** Accessible alt text; defaults to the person's name */
46
43
  alt?: string;
47
- } & VariantProps<typeof avatarStyles> & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
48
- declare const avatarStyles: tailwind_variants.TVReturnType<{
49
- size: {
50
- sm: string;
51
- md: string;
52
- };
53
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
54
- size: {
55
- sm: string;
56
- md: string;
57
- };
58
- }, {
59
- size: {
60
- sm: string;
61
- md: string;
62
- };
63
- }>, {
64
- size: {
65
- sm: string;
66
- md: string;
67
- };
68
- }, undefined, tailwind_variants.TVReturnType<{
69
- size: {
70
- sm: string;
71
- md: string;
72
- };
73
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
74
- size: {
75
- sm: string;
76
- md: string;
77
- };
78
- }, {
79
- size: {
80
- sm: string;
81
- md: string;
82
- };
83
- }>, unknown, unknown, undefined>>;
44
+ /** Avatar size */
45
+ size?: "sm" | "md";
46
+ } & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
84
47
  declare function Avatar({ name, src, color, size, alt, className, style, ...props }: AvatarProps): react_jsx_runtime.JSX.Element;
85
48
 
86
49
  type AvatarGroupProps = {
@@ -160,195 +123,32 @@ interface SearchProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onSele
160
123
  }
161
124
  declare function Search({ className, options, onSearch, selectedOption, onSelect, searchDelay, disabled, maxHeight, id, children, ...props }: SearchProps): react_jsx_runtime.JSX.Element;
162
125
 
163
- declare const buttonStyles: tailwind_variants.TVReturnType<{
164
- variant: {
165
- primary: string;
166
- secondary: string;
167
- ghost: string;
168
- };
169
- size: {
170
- sm: string;
171
- md: string;
172
- lg: string;
173
- };
174
- fullWidth: {
175
- true: string;
176
- };
177
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
178
- variant: {
179
- primary: string;
180
- secondary: string;
181
- ghost: string;
182
- };
183
- size: {
184
- sm: string;
185
- md: string;
186
- lg: string;
187
- };
188
- fullWidth: {
189
- true: string;
190
- };
191
- }, {
192
- variant: {
193
- primary: string;
194
- secondary: string;
195
- ghost: string;
196
- };
197
- size: {
198
- sm: string;
199
- md: string;
200
- lg: string;
201
- };
202
- fullWidth: {
203
- true: string;
204
- };
205
- }>, {
206
- variant: {
207
- primary: string;
208
- secondary: string;
209
- ghost: string;
210
- };
211
- size: {
212
- sm: string;
213
- md: string;
214
- lg: string;
215
- };
216
- fullWidth: {
217
- true: string;
218
- };
219
- }, undefined, tailwind_variants.TVReturnType<{
220
- variant: {
221
- primary: string;
222
- secondary: string;
223
- ghost: string;
224
- };
225
- size: {
226
- sm: string;
227
- md: string;
228
- lg: string;
229
- };
230
- fullWidth: {
231
- true: string;
232
- };
233
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
234
- variant: {
235
- primary: string;
236
- secondary: string;
237
- ghost: string;
238
- };
239
- size: {
240
- sm: string;
241
- md: string;
242
- lg: string;
243
- };
244
- fullWidth: {
245
- true: string;
246
- };
247
- }, {
248
- variant: {
249
- primary: string;
250
- secondary: string;
251
- ghost: string;
252
- };
253
- size: {
254
- sm: string;
255
- md: string;
256
- lg: string;
257
- };
258
- fullWidth: {
259
- true: string;
260
- };
261
- }>, unknown, unknown, undefined>>;
262
- type ButtonVariants = VariantProps<typeof buttonStyles>;
263
- type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
126
+ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
127
+ /** Button visual variant */
128
+ variant?: "primary" | "secondary" | "ghost";
129
+ /** Button size */
130
+ size?: "sm" | "md" | "lg";
131
+ /** Make button full width */
132
+ fullWidth?: boolean;
264
133
  /** Icon component to display instead of text */
265
134
  icon?: React.ReactNode;
266
135
  };
267
- declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonVariants & {
136
+ declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
137
+ /** Button visual variant */
138
+ variant?: "primary" | "secondary" | "ghost";
139
+ /** Button size */
140
+ size?: "sm" | "md" | "lg";
141
+ /** Make button full width */
142
+ fullWidth?: boolean;
268
143
  /** Icon component to display instead of text */
269
144
  icon?: React.ReactNode;
270
145
  } & React.RefAttributes<HTMLButtonElement>>;
271
146
 
272
- declare const iconButtonStyles: tailwind_variants.TVReturnType<{
273
- variant: {
274
- ghost: string;
275
- primary: string;
276
- secondary: string;
277
- };
278
- size: {
279
- sm: string;
280
- md: string;
281
- lg: string;
282
- };
283
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
284
- variant: {
285
- ghost: string;
286
- primary: string;
287
- secondary: string;
288
- };
289
- size: {
290
- sm: string;
291
- md: string;
292
- lg: string;
293
- };
294
- }, {
295
- variant: {
296
- ghost: string;
297
- primary: string;
298
- secondary: string;
299
- };
300
- size: {
301
- sm: string;
302
- md: string;
303
- lg: string;
304
- };
305
- }>, {
306
- variant: {
307
- ghost: string;
308
- primary: string;
309
- secondary: string;
310
- };
311
- size: {
312
- sm: string;
313
- md: string;
314
- lg: string;
315
- };
316
- }, undefined, tailwind_variants.TVReturnType<{
317
- variant: {
318
- ghost: string;
319
- primary: string;
320
- secondary: string;
321
- };
322
- size: {
323
- sm: string;
324
- md: string;
325
- lg: string;
326
- };
327
- }, undefined, string, tailwind_variants_dist_config_js.TVConfig<{
328
- variant: {
329
- ghost: string;
330
- primary: string;
331
- secondary: string;
332
- };
333
- size: {
334
- sm: string;
335
- md: string;
336
- lg: string;
337
- };
338
- }, {
339
- variant: {
340
- ghost: string;
341
- primary: string;
342
- secondary: string;
343
- };
344
- size: {
345
- sm: string;
346
- md: string;
347
- lg: string;
348
- };
349
- }>, unknown, unknown, undefined>>;
350
- type IconButtonVariants = VariantProps<typeof iconButtonStyles>;
351
- type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & IconButtonVariants & {
147
+ type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
148
+ /** Button visual variant */
149
+ variant?: "ghost" | "primary" | "secondary";
150
+ /** Button size */
151
+ size?: "sm" | "md" | "lg";
352
152
  /** Material Symbols icon name */
353
153
  icon: string;
354
154
  /** Icon size (defaults to button size) */
@@ -358,7 +158,11 @@ type IconButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & IconButto
358
158
  /** Optional custom className for the icon */
359
159
  iconClassName?: string;
360
160
  };
361
- declare const IconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & IconButtonVariants & {
161
+ declare const IconButton: React.ForwardRefExoticComponent<React.ButtonHTMLAttributes<HTMLButtonElement> & {
162
+ /** Button visual variant */
163
+ variant?: "ghost" | "primary" | "secondary";
164
+ /** Button size */
165
+ size?: "sm" | "md" | "lg";
362
166
  /** Material Symbols icon name */
363
167
  icon: string;
364
168
  /** Icon size (defaults to button size) */