chore: add input and label UI components for customer-spa

customer-spa/package-lock.json

@@ -14,7 +14,7 @@
                 "@radix-ui/react-checkbox": "^1.3.3",
                 "@radix-ui/react-dialog": "^1.1.15",
                 "@radix-ui/react-dropdown-menu": "^2.1.16",
-                "@radix-ui/react-label": "^2.1.7",
+                "@radix-ui/react-label": "^2.1.8",
                 "@radix-ui/react-popover": "^1.1.15",
                 "@radix-ui/react-radio-group": "^1.3.8",
                 "@radix-ui/react-select": "^2.2.6",

customer-spa/package.json

@@ -16,7 +16,7 @@
         "@radix-ui/react-checkbox": "^1.3.3",
         "@radix-ui/react-dialog": "^1.1.15",
         "@radix-ui/react-dropdown-menu": "^2.1.16",
-        "@radix-ui/react-label": "^2.1.7",
+        "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-popover": "^1.1.15",
         "@radix-ui/react-radio-group": "^1.3.8",
         "@radix-ui/react-select": "^2.2.6",

customer-spa/src/components/ui/input.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react';
+import { cn } from '@/lib/utils';
+
+export interface InputProps
+    extends React.InputHTMLAttributes<HTMLInputElement> { }
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+    ({ className, type, ...props }, ref) => {
+        return (
+            <input
+                type={type}
+                className={cn(
+                    'flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+                    className
+                )}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
+);
+Input.displayName = 'Input';
+
+export { Input };

customer-spa/src/components/ui/label.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import { cn } from '@/lib/utils';
+
+const Label = React.forwardRef<
+    React.ElementRef<typeof LabelPrimitive.Root>,
+    React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => (
+    <LabelPrimitive.Root
+        ref={ref}
+        className={cn(
+            'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+            className
+        )}
+        {...props}
+    />
+));
+Label.displayName = LabelPrimitive.Root.displayName;
+
+export { Label };