feat: added label highlighting on input focus

.storybook/input.stories.tsx

@@ -0,0 +1,61 @@
+import { ThemeProvider } from 'styled-components';
+import { Input } from '../src/index';
+import { theme } from '../src/theme';
+import { GlobalStyles } from '../src/globalStyles';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import React from 'react';
+import ArrowForwardIos from '@mui/icons-material/ArrowForwardIos';
+
+const meta = {
+  component: Input,
+  decorators: [
+    (Story) => (
+      <div style={{ width: '100%', display: 'flex', flexDirection: 'column' }}>
+        <ThemeProvider theme={theme}>
+          <GlobalStyles />
+          <Story />
+        </ThemeProvider>
+      </div>
+    ),
+  ],
+} satisfies Meta<typeof Input>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    type: 'text',
+    placeholder: 'Value...',
+  },
+};
+
+export const WithLabel: Story = {
+  args: {
+    type: 'text',
+    placeholder: 'Value...',
+    $labelContent: 'Text',
+  },
+};
+
+export const Example: Story = {
+  args: {
+    type: 'text',
+    placeholder: 'eg. Joe Dough',
+    $labelContent: 'Username',
+  },
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <>
+      <Input type="text" placeholder="eg. Joe Dough" $labelContent="Username" />
+      <Input type="text" placeholder="eg. *******" $labelContent="Password" />
+      <Input
+        type="text"
+        placeholder="eg. *******"
+        $labelContent="Confirm Password"
+      />
+    </>
+  ),
+};

src/components/Button/types.ts

@@ -1,6 +1,6 @@
-import type { ComponentPropsWithoutRef, ReactElement } from 'react';
+import type { ComponentPropsWithRef, ReactElement } from 'react';
 
-export interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
   $variant?: ButtonVariant;
   $size?: ButtonSize;
   $icon?: ReactElement;

src/components/Input/Input.tsx

@@ -0,0 +1,20 @@
+import { InputComponent, InputLabelComponent } from './styles.js';
+import type { InputProps } from './types.js';
+import React from 'react';
+
+export const Input = ({
+  $fullWidth = false,
+  $labelContent = undefined,
+  ...props
+}: InputProps) => {
+  return (
+    <>
+      {$labelContent !== undefined && (
+        <InputLabelComponent $fullWidth={$fullWidth} htmlFor={props.id}>
+          {$labelContent}
+        </InputLabelComponent>
+      )}
+      <InputComponent $fullWidth={$fullWidth} {...props} />
+    </>
+  );
+};

src/components/Input/styles.ts

@@ -0,0 +1,27 @@
+import { styled } from 'styled-components';
+import { theme } from '../../theme.js';
+
+export const InputLabelComponent = styled.label<{ $fullWidth: boolean }>`
+  ${({ $fullWidth }) => $fullWidth && `width: 100%;`};
+  font-size: 10pt;
+  padding: 8px;
+  color: ${theme.colors.lightGray};
+
+  &:has(+ input:focus) {
+    color: ${theme.colors.primary};
+    text-decoration: underline;
+  }
+`;
+
+export const InputComponent = styled.input<{ $fullWidth: boolean }>`
+  ${({ $fullWidth }) => ($fullWidth ? `width: 100%;` : `width: fit-content;`)}
+  padding: 8px;
+  border: 1px solid ${theme.colors.lightGray};
+  border-radius: 6px;
+
+  &:focus {
+    border: 1px solid ${theme.colors.primary};
+    color: ${theme.colors.primary};
+    outline: none;
+  }
+`;

src/components/Input/types.ts

@@ -0,0 +1,6 @@
+import type { ComponentPropsWithRef } from 'react';
+
+export interface InputProps extends ComponentPropsWithRef<'input'> {
+  $fullWidth?: boolean;
+  $labelContent?: string;
+}

src/components/Link/types.ts

@@ -1,7 +1,7 @@
-import type { ComponentPropsWithoutRef, ReactElement } from 'react';
+import type { ComponentPropsWithRef, ReactElement } from 'react';
 import type { IconSide } from '../Button/types.js';
 
-export interface LinkProps extends ComponentPropsWithoutRef<'a'> {
+export interface LinkProps extends ComponentPropsWithRef<'a'> {
   $color?: string;
   $icon?: ReactElement;
   $iconSide?: IconSide;

src/index.tsx

@@ -1,2 +1,3 @@
 export { Button } from './components/Button/Button.js';
 export { Link } from './components/Link/Link.js';
+export { Input } from './components/Input/Input.js';

src/theme.ts

@@ -10,5 +10,6 @@ export const theme = createTheme({
     primaryDimmed: '#5b489a',
     secondary: '#8D86C9',
     secondaryDimmed: '#746ea8',
+    lightGray: '#a0a0a0',
   },
 });