@neoptocom/neopto-ui 1.6.10 → 1.6.12

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 (8) hide show
  1. package/dist/index.cjs +14 -5
  2. package/dist/index.d.cts +6 -2
  3. package/dist/index.d.ts +6 -2
  4. package/dist/index.js +14 -5
  5. package/package.json +1 -1
  6. package/src/components/DateInput.tsx +1 -1
  7. package/src/components/Input.tsx +38 -7
  8. package/src/stories/Input.stories.tsx +24 -0
package/dist/index.cjs CHANGED
@@ -303,6 +303,7 @@ var Input = React11__namespace.forwardRef(
303
303
  className,
304
304
  disabled,
305
305
  variant = "default",
306
+ size = "md",
306
307
  label,
307
308
  fieldsetProps,
308
309
  legendProps,
@@ -314,11 +315,15 @@ var Input = React11__namespace.forwardRef(
314
315
  const shouldUseInlineStyles = isInlineVariant || Boolean(label);
315
316
  const isError = error && !disabled;
316
317
  const hasIcon = Boolean(icon);
318
+ const inputSizeClass = shouldUseInlineStyles ? size === "sm" ? "h-4" : size === "lg" ? "h-10" : "h-9" : size === "sm" ? "h-6 rounded-full" : size === "lg" ? "h-14 rounded-full" : "h-12 rounded-full";
319
+ const inputPaddingClass = shouldUseInlineStyles ? hasIcon ? "pr-8" : "" : size === "sm" ? hasIcon ? "px-3 pr-9" : "px-3" : hasIcon ? "px-4 pr-10" : "px-4";
320
+ const inputTextSizeClass = size === "sm" ? "text-xs placeholder:text-xs" : "text-sm placeholder:text-sm";
317
321
  const inputClasses = [
318
322
  "w-full bg-transparent outline-none transition-colors",
319
- shouldUseInlineStyles ? "h-9" : "h-12 rounded-full",
320
- shouldUseInlineStyles ? hasIcon ? "pr-8" : "" : hasIcon ? "px-4 pr-10" : "px-4",
321
- "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
323
+ inputSizeClass,
324
+ inputPaddingClass,
325
+ inputTextSizeClass,
326
+ "font-['Poppins'] placeholder:text-[var(--muted-fg)]"
322
327
  ];
323
328
  if (!shouldUseInlineStyles) {
324
329
  inputClasses.push("border");
@@ -354,16 +359,20 @@ var Input = React11__namespace.forwardRef(
354
359
  }
355
360
  const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
356
361
  const { className: legendClassNameProp = "", ...restLegendProps } = legendProps ?? {};
362
+ const fieldsetHeightClass = size === "sm" ? "h-8" : size === "lg" ? "h-16" : "h-14";
357
363
  const fieldsetClassName = [
358
- "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
364
+ "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors",
365
+ fieldsetHeightClass,
359
366
  isError ? "border-[var(--destructive)]" : "border-[var(--border)]",
360
367
  isError ? "focus-within:border-[var(--destructive)]" : "focus-within:border-[var(--color-brand)]",
361
368
  disabled ? "opacity-60 cursor-not-allowed" : "",
362
369
  fieldsetClassNameProp
363
370
  ].filter(Boolean).join(" ");
364
371
  const legendColorClass = disabled ? "text-[var(--muted-fg)]" : isError ? "text-[var(--destructive)]" : "text-[var(--muted-fg)]";
372
+ const legendSizeClass = size === "sm" ? "text-xs" : "text-sm";
365
373
  const legendClassNameCombined = [
366
- "ml-4 px-1 text-sm leading-none relative font-normal select-none",
374
+ "ml-4 px-1 leading-none relative font-normal select-none",
375
+ legendSizeClass,
367
376
  legendColorClass,
368
377
  legendClassNameProp
369
378
  ].filter(Boolean).join(" ");
package/dist/index.d.cts CHANGED
@@ -62,6 +62,8 @@ declare function Card({ children, className, style, showDecorations, variant, el
62
62
  type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
63
63
  /** Input visual variant */
64
64
  variant?: "default" | "inline";
65
+ /** Input size */
66
+ size?: "sm" | "md" | "lg";
65
67
  /** Optional floating label (renders a fieldset wrapper when provided) */
66
68
  label?: string;
67
69
  /** Additional props for the surrounding fieldset when label is set */
@@ -76,6 +78,8 @@ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
76
78
  declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
77
79
  /** Input visual variant */
78
80
  variant?: "default" | "inline";
81
+ /** Input size */
82
+ size?: "sm" | "md" | "lg";
79
83
  /** Optional floating label (renders a fieldset wrapper when provided) */
80
84
  label?: string;
81
85
  /** Additional props for the surrounding fieldset when label is set */
@@ -394,7 +398,7 @@ interface BreadcrumbProps {
394
398
  */
395
399
  declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
396
400
 
397
- type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> & {
401
+ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "size"> & {
398
402
  /** Label text displayed above the input */
399
403
  label?: string;
400
404
  /** Current date value */
@@ -414,7 +418,7 @@ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"
414
418
  /** Background image URL for dark mode */
415
419
  darkBackgroundImage?: string;
416
420
  };
417
- declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
421
+ declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "type" | "value"> & {
418
422
  /** Label text displayed above the input */
419
423
  label?: string;
420
424
  /** Current date value */
package/dist/index.d.ts CHANGED
@@ -62,6 +62,8 @@ declare function Card({ children, className, style, showDecorations, variant, el
62
62
  type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
63
63
  /** Input visual variant */
64
64
  variant?: "default" | "inline";
65
+ /** Input size */
66
+ size?: "sm" | "md" | "lg";
65
67
  /** Optional floating label (renders a fieldset wrapper when provided) */
66
68
  label?: string;
67
69
  /** Additional props for the surrounding fieldset when label is set */
@@ -76,6 +78,8 @@ type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
76
78
  declare const Input: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
77
79
  /** Input visual variant */
78
80
  variant?: "default" | "inline";
81
+ /** Input size */
82
+ size?: "sm" | "md" | "lg";
79
83
  /** Optional floating label (renders a fieldset wrapper when provided) */
80
84
  label?: string;
81
85
  /** Additional props for the surrounding fieldset when label is set */
@@ -394,7 +398,7 @@ interface BreadcrumbProps {
394
398
  */
395
399
  declare const Breadcrumb: React__default.FC<BreadcrumbProps>;
396
400
 
397
- type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type"> & {
401
+ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value" | "onChange" | "type" | "size"> & {
398
402
  /** Label text displayed above the input */
399
403
  label?: string;
400
404
  /** Current date value */
@@ -414,7 +418,7 @@ type DateInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "value"
414
418
  /** Background image URL for dark mode */
415
419
  darkBackgroundImage?: string;
416
420
  };
417
- declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value"> & {
421
+ declare const DateInput: React.ForwardRefExoticComponent<Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "size" | "type" | "value"> & {
418
422
  /** Label text displayed above the input */
419
423
  label?: string;
420
424
  /** Current date value */
package/dist/index.js CHANGED
@@ -282,6 +282,7 @@ var Input = React11.forwardRef(
282
282
  className,
283
283
  disabled,
284
284
  variant = "default",
285
+ size = "md",
285
286
  label,
286
287
  fieldsetProps,
287
288
  legendProps,
@@ -293,11 +294,15 @@ var Input = React11.forwardRef(
293
294
  const shouldUseInlineStyles = isInlineVariant || Boolean(label);
294
295
  const isError = error && !disabled;
295
296
  const hasIcon = Boolean(icon);
297
+ const inputSizeClass = shouldUseInlineStyles ? size === "sm" ? "h-4" : size === "lg" ? "h-10" : "h-9" : size === "sm" ? "h-6 rounded-full" : size === "lg" ? "h-14 rounded-full" : "h-12 rounded-full";
298
+ const inputPaddingClass = shouldUseInlineStyles ? hasIcon ? "pr-8" : "" : size === "sm" ? hasIcon ? "px-3 pr-9" : "px-3" : hasIcon ? "px-4 pr-10" : "px-4";
299
+ const inputTextSizeClass = size === "sm" ? "text-xs placeholder:text-xs" : "text-sm placeholder:text-sm";
296
300
  const inputClasses = [
297
301
  "w-full bg-transparent outline-none transition-colors",
298
- shouldUseInlineStyles ? "h-9" : "h-12 rounded-full",
299
- shouldUseInlineStyles ? hasIcon ? "pr-8" : "" : hasIcon ? "px-4 pr-10" : "px-4",
300
- "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
302
+ inputSizeClass,
303
+ inputPaddingClass,
304
+ inputTextSizeClass,
305
+ "font-['Poppins'] placeholder:text-[var(--muted-fg)]"
301
306
  ];
302
307
  if (!shouldUseInlineStyles) {
303
308
  inputClasses.push("border");
@@ -333,16 +338,20 @@ var Input = React11.forwardRef(
333
338
  }
334
339
  const { className: fieldsetClassNameProp = "", ...restFieldsetProps } = fieldsetProps ?? {};
335
340
  const { className: legendClassNameProp = "", ...restLegendProps } = legendProps ?? {};
341
+ const fieldsetHeightClass = size === "sm" ? "h-8" : size === "lg" ? "h-16" : "h-14";
336
342
  const fieldsetClassName = [
337
- "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
343
+ "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors",
344
+ fieldsetHeightClass,
338
345
  isError ? "border-[var(--destructive)]" : "border-[var(--border)]",
339
346
  isError ? "focus-within:border-[var(--destructive)]" : "focus-within:border-[var(--color-brand)]",
340
347
  disabled ? "opacity-60 cursor-not-allowed" : "",
341
348
  fieldsetClassNameProp
342
349
  ].filter(Boolean).join(" ");
343
350
  const legendColorClass = disabled ? "text-[var(--muted-fg)]" : isError ? "text-[var(--destructive)]" : "text-[var(--muted-fg)]";
351
+ const legendSizeClass = size === "sm" ? "text-xs" : "text-sm";
344
352
  const legendClassNameCombined = [
345
- "ml-4 px-1 text-sm leading-none relative font-normal select-none",
353
+ "ml-4 px-1 leading-none relative font-normal select-none",
354
+ legendSizeClass,
346
355
  legendColorClass,
347
356
  legendClassNameProp
348
357
  ].filter(Boolean).join(" ");
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@neoptocom/neopto-ui",
3
- "version": "1.6.10",
3
+ "version": "1.6.12",
4
4
  "private": false,
5
5
  "description": "A modern React component library built with Tailwind CSS v4 and TypeScript. Features dark mode, design tokens, and comprehensive documentation. Requires Tailwind v4+.",
6
6
  "keywords": [
package/src/components/DateInput.tsx CHANGED
@@ -6,7 +6,7 @@ import { assets } from "..";
6
6
 
7
7
  export type DateInputProps = Omit<
8
8
  React.InputHTMLAttributes<HTMLInputElement>,
9
- "value" | "onChange" | "type"
9
+ "value" | "onChange" | "type" | "size"
10
10
  > & {
11
11
  /** Label text displayed above the input */
12
12
  label?: string;
package/src/components/Input.tsx CHANGED
@@ -4,6 +4,8 @@ import Icon from "./Icon";
4
4
  export type InputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size"> & {
5
5
  /** Input visual variant */
6
6
  variant?: "default" | "inline";
7
+ /** Input size */
8
+ size?: "sm" | "md" | "lg";
7
9
  /** Optional floating label (renders a fieldset wrapper when provided) */
8
10
  label?: string;
9
11
  /** Additional props for the surrounding fieldset when label is set */
@@ -22,6 +24,7 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
22
24
  className,
23
25
  disabled,
24
26
  variant = "default",
27
+ size = "md",
25
28
  label,
26
29
  fieldsetProps,
27
30
  legendProps,
@@ -35,14 +38,36 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
35
38
  const shouldUseInlineStyles = isInlineVariant || Boolean(label);
36
39
  const isError = error && !disabled;
37
40
  const hasIcon = Boolean(icon);
41
+ const inputSizeClass = shouldUseInlineStyles
42
+ ? size === "sm"
43
+ ? "h-4"
44
+ : size === "lg"
45
+ ? "h-10"
46
+ : "h-9"
47
+ : size === "sm"
48
+ ? "h-6 rounded-full"
49
+ : size === "lg"
50
+ ? "h-14 rounded-full"
51
+ : "h-12 rounded-full";
52
+ const inputPaddingClass = shouldUseInlineStyles
53
+ ? hasIcon
54
+ ? "pr-8"
55
+ : ""
56
+ : size === "sm"
57
+ ? hasIcon
58
+ ? "px-3 pr-9"
59
+ : "px-3"
60
+ : hasIcon
61
+ ? "px-4 pr-10"
62
+ : "px-4";
63
+ const inputTextSizeClass = size === "sm" ? "text-xs placeholder:text-xs" : "text-sm placeholder:text-sm";
38
64
 
39
65
  const inputClasses: string[] = [
40
66
  "w-full bg-transparent outline-none transition-colors",
41
- shouldUseInlineStyles ? "h-9" : "h-12 rounded-full",
42
- shouldUseInlineStyles
43
- ? (hasIcon ? "pr-8" : "")
44
- : (hasIcon ? "px-4 pr-10" : "px-4"),
45
- "font-['Poppins'] text-sm placeholder:text-[var(--muted-fg)]"
67
+ inputSizeClass,
68
+ inputPaddingClass,
69
+ inputTextSizeClass,
70
+ "font-['Poppins'] placeholder:text-[var(--muted-fg)]"
46
71
  ];
47
72
 
48
73
  if (!shouldUseInlineStyles) {
@@ -94,8 +119,12 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
94
119
 
95
120
  const { className: legendClassNameProp = "", ...restLegendProps } = legendProps ?? {};
96
121
 
122
+ const fieldsetHeightClass =
123
+ size === "sm" ? "h-8" : size === "lg" ? "h-16" : "h-14";
124
+
97
125
  const fieldsetClassName = [
98
- "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors h-14",
126
+ "w-full min-w-0 rounded-full border bg-[var(--surface)] transition-colors",
127
+ fieldsetHeightClass,
99
128
  isError ? "border-[var(--destructive)]" : "border-[var(--border)]",
100
129
  isError
101
130
  ? "focus-within:border-[var(--destructive)]"
@@ -111,9 +140,11 @@ export const Input = React.forwardRef<HTMLInputElement, InputProps>(
111
140
  : isError
112
141
  ? "text-[var(--destructive)]"
113
142
  : "text-[var(--muted-fg)]";
143
+ const legendSizeClass = size === "sm" ? "text-xs" : "text-sm";
114
144
 
115
145
  const legendClassNameCombined = [
116
- "ml-4 px-1 text-sm leading-none relative font-normal select-none",
146
+ "ml-4 px-1 leading-none relative font-normal select-none",
147
+ legendSizeClass,
117
148
  legendColorClass,
118
149
  legendClassNameProp
119
150
  ]
package/src/stories/Input.stories.tsx CHANGED
@@ -37,6 +37,30 @@ export const Types: Story = {
37
37
  )
38
38
  };
39
39
 
40
+ export const Sizes: Story = {
41
+ render: () => (
42
+ <div className="flex flex-col gap-6 w-96">
43
+ <div className="flex flex-col gap-3">
44
+ <Input size="sm" placeholder="Small input" />
45
+ <Input size="md" placeholder="Medium input" />
46
+ <Input size="lg" placeholder="Large input" />
47
+ </div>
48
+
49
+ <div className="flex flex-col gap-3">
50
+ <Input size="sm" variant="inline" placeholder="Small inline input" />
51
+ <Input size="md" variant="inline" placeholder="Medium inline input" />
52
+ <Input size="lg" variant="inline" placeholder="Large inline input" />
53
+ </div>
54
+
55
+ <div className="flex flex-col gap-3">
56
+ <Input size="sm" label="Small labeled" placeholder="Small labeled input" />
57
+ <Input size="md" label="Medium labeled" placeholder="Medium labeled input" />
58
+ <Input size="lg" label="Large labeled" placeholder="Large labeled input" />
59
+ </div>
60
+ </div>
61
+ )
62
+ };
63
+
40
64
  export const Inline: Story = {
41
65
  render: () => (
42
66
  <div className="flex flex-col gap-4 w-96">