diff --git a/src/__cosmos__/fixtures/Input.fixture.tsx b/src/__cosmos__/fixtures/Input.fixture.tsx index 966b377..588c128 100644 --- a/src/__cosmos__/fixtures/Input.fixture.tsx +++ b/src/__cosmos__/fixtures/Input.fixture.tsx @@ -58,11 +58,11 @@ export default function InputFixture() { title="Input Sizes" code={`
-

Large (Default)

+

Large

-

Medium

+

Medium (Default)

@@ -73,13 +73,13 @@ export default function InputFixture() { >
-

- Large (Default) -

+

Large

-

Medium

+

+ Medium (Default) +

diff --git a/src/components/ui/input.tsx b/src/components/ui/input.tsx index b844d4e..a6b0de6 100644 --- a/src/components/ui/input.tsx +++ b/src/components/ui/input.tsx @@ -16,7 +16,7 @@ const Input = React.forwardRef( { className, variant = 'underlined', - size = 'large', + size = 'medium', label, supportingText, error, @@ -29,29 +29,42 @@ const Input = React.forwardRef( const inputId = React.useId(); const finalId = id || inputId; - const getSizeClasses = () => { + const getTextSizeClasses = () => { switch (size) { case 'large': - return 'lsd:w-52'; + return 'lsd:text-lg file:lsd:text-lg'; case 'medium': - return 'lsd:w-44'; + return 'lsd:text-base file:lsd:text-base'; case 'small': - return 'lsd:w-40'; + return 'lsd:text-sm file:lsd:text-sm'; default: - return 'lsd:w-52'; + return 'lsd:text-base file:lsd:text-base'; } }; - const getPaddingClasses = () => { + const getVerticalPaddingClasses = () => { switch (size) { case 'large': - return 'lsd:px-4 lsd:py-4'; + return 'lsd:py-4'; case 'medium': - return 'lsd:px-3 lsd:py-3'; + return 'lsd:py-3'; case 'small': - return 'lsd:px-3 lsd:py-3'; + return 'lsd:py-2'; default: - return 'lsd:px-4 lsd:py-4'; + return 'lsd:py-3'; + } + }; + + const getLabelSizeClasses = () => { + switch (size) { + case 'large': + return 'lsd:text-base'; + case 'medium': + return 'lsd:text-sm'; + case 'small': + return 'lsd:text-xs'; + default: + return 'lsd:text-sm'; } }; @@ -60,7 +73,7 @@ const Input = React.forwardRef( {label && ( @@ -72,7 +85,6 @@ const Input = React.forwardRef( ? 'lsd:border lsd:border-lsd-border-primary lsd:rounded' : 'lsd:border lsd:border-transparent lsd:border-b-lsd-border-primary', error && 'lsd:border-lsd-destructive', - getSizeClasses(), )} > ( type={type} id={finalId} className={cn( - 'file:lsd:text-lsd-text placeholder:lsd:text-lsd-text-primary placeholder:lsd:opacity-30 selection:lsd:bg-lsd-primary selection:lsd:text-lsd-surface-primary lsd:border-none lsd:outline-none lsd:bg-transparent lsd:text-lsd-text-primary lsd:w-full lsd:h-full lsd:text-base file:lsd:inline-flex file:lsd:h-7 file:lsd:border-0 file:lsd:bg-transparent file:lsd:text-base file:lsd:font-medium lsd:disabled:pointer-events-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-34', - 'focus-visible:lsd:outline-none', + 'file:lsd:text-lsd-text placeholder:lsd:text-lsd-text-primary placeholder:lsd:opacity-30 selection:lsd:bg-lsd-primary selection:lsd:text-lsd-surface-primary lsd:border-none lsd:outline-none lsd:bg-transparent lsd:text-lsd-text-primary lsd:w-full lsd:h-full file:lsd:inline-flex file:lsd:h-7 file:lsd:border-0 file:lsd:bg-transparent file:lsd:font-medium lsd:disabled:pointer-events-none lsd:disabled:cursor-not-allowed lsd:disabled:opacity-34', + 'focus-visible:lsd:outline-none lsd:px-4', error && 'lsd:line-through', - getPaddingClasses(), + getTextSizeClasses(), + getVerticalPaddingClasses(), )} {...props} /> diff --git a/src/components/ui/tabs.tsx b/src/components/ui/tabs.tsx index 7785d9a..19b99f6 100644 --- a/src/components/ui/tabs.tsx +++ b/src/components/ui/tabs.tsx @@ -118,7 +118,7 @@ function TabsContent({ return ( );