feat: style for the Input component (#355)

openlabs-dev · Aug 16, 2024 · 71541ee · 71541ee
1 parent a1c2462
commit 71541ee
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 18 deletions.
diff --git a/src/components/forms/input/input.tsx b/src/components/forms/input/input.tsx
@@ -8,16 +8,16 @@ export interface Props extends React.InputHTMLAttributes<HTMLInputElement>,
   labelText?: string
 }
 
-const Input = React.forwardRef<Comp, Props>(({ className, border, background, labelText, type, ...props }, ref) => {
+const Input = React.forwardRef<Comp, Props>(({ className, rounded, icons, variant, labelText, type, ...props }, ref) => {
   return (
     <div className="relative flex flex-col-reverse">
       <input
         type={type}
-        className={cn(input({ border, background }), className)}
+        className={cn(input({ variant, icons, rounded }), className)}
         ref={ref}
         {...props}
       />
-      <label className="text-foreground/60 absolute top-1/2 -translate-y-1/2 left-4 px-1 bg-background pointer-events-none text-medium peer-focus-within:text-medium peer-focus-within:top-0 transition-all">{labelText}</label>
+      <label className="absolute top-0 -translate-y-1/2 left-4 pointer-events-none text-small backdrop-blur-sm px-1">{ labelText }</label>
     </div>
 
   )

diff --git a/src/plugins/components/input.ts b/src/plugins/components/input.ts
@@ -8,25 +8,31 @@ import { cva } from 'class-variance-authority'
  * @example
  * <Input className={styles())} />
  */
-export const input = cva('h-10 w-full peer transition-colors rounded-medium border-2 bg-transparent px-4 py-2 text-medium ring-offset-background file:border-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0', {
+export const input = cva('h-10 w-full transition-colors rounded-medium border-2 bg-transparent px-4 py-2 text-medium ring-offset-background file:border-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0', {
   variants: {
-    border: {
-      none: 'border-foreground/30 focus-visible:border-foreground/60',
-      primary: 'border-primary/50 focus-visible:border-primary',
-      success: 'border-success/50 focus-visible:border-success',
-      warn: 'border-warn/50 focus-visible:border-warn',
-      error: 'border-error/50 focus-visible:border-error',
+    variant: {
+      default: 'border-default/30 focus-visible:border-default transition-border durations-500',
+      primary: 'border-primary/30 focus-visible:border-primary transition-border durations-500',
+      success: 'border-success/30 focus-visible:border-success transition-border durations-500',
+      warn: 'border-warn/30 focus-visible:border-warn transition-border durations-500',
+      error: 'border-error/30 focus-visible:border-error transition-border durations-500',
     },
-    background: {
-      none: 'bg-transparent',
-      primary: 'bg-primary/30',
-      success: 'bg-success/30',
-      warn: 'bg-warn/30',
-      error: 'bg-error/30',
+    icons: {
+      none: '',
+      left: 'pl-10',
+      right: 'pr-10',
+      both: 'px-10',
+    },
+    rounded: {
+      none: 'rounded-none',
+      small: 'rounded-small',
+      medium: 'rounded-medium',
+      large: 'rounded-large',
     },
   },
   defaultVariants: {
-    border: 'none',
-    background: 'none',
+    variant: 'default',
+    icons: 'none',
+    rounded: 'none',
   },
 })