From 9f4bc05c23d1c7a8b5b96ed6d0676ecb4dde6445 Mon Sep 17 00:00:00 2001
From: SySagar <sysagar07@gmail.com>
Date: Sat, 11 Jan 2025 21:07:52 +0530
Subject: [PATCH 1/6] chore: component stories directory change

---
 apps/ui/.eslintrc.cjs                         |   1 +
 apps/ui/.storybook/main.ts                    |  88 +++---
 apps/ui/__test__/Button.spec.js               |  41 ---
 apps/ui/__test__/Textfield.spec.js            |  92 ------
 apps/ui/__test__/Typography.spec.js           |  41 ---
 .../Accordion/Accordion.stories.tsx           |  49 +++
 .../lib/components/Avatar/Avatar.stories.tsx  |  94 ++++++
 .../lib/components/Button/Button.stories.tsx  |  75 +++++
 apps/ui/lib/components/Chip/Chip.stories.tsx  |  99 ++++++
 .../ui/lib/components/Label/Label.stories.tsx |  31 ++
 .../Navigation-menu/Navigation.stories.tsx    | 114 +++++++
 .../components/Progress/Progress.stories.tsx  |  32 ++
 .../lib/components/Select/Select.stories.tsx  |  78 +++++
 .../lib/components/Switch/Switch.stories.tsx  |  27 ++
 .../Textfield/Textfield.stories.tsx           | 175 +++++++++++
 .../ui/lib/components/Toast/Toast.stories.tsx |  89 ++++++
 .../Typography/Typography.stories.tsx         | 295 +++++++++++++++++
 apps/ui/stories/Accordion.stories.tsx         |  52 ---
 apps/ui/stories/Avatar.stories.tsx            |  95 ------
 apps/ui/stories/Button.stories.tsx            |  77 -----
 apps/ui/stories/Chip.stories.tsx              | 100 ------
 apps/ui/stories/Label.stories.tsx             |  32 --
 apps/ui/stories/Navigation.stories.tsx        | 118 -------
 apps/ui/stories/Progress.stories.tsx          |  34 --
 apps/ui/stories/Select.stories.tsx            |  84 -----
 apps/ui/stories/Switch.stories.tsx            |  29 --
 apps/ui/stories/Textfield.stories.tsx         | 177 -----------
 apps/ui/stories/Toast.stories.tsx             |  91 ------
 apps/ui/stories/Typography.stories.tsx        | 296 ------------------
 29 files changed, 1203 insertions(+), 1403 deletions(-)
 delete mode 100644 apps/ui/__test__/Button.spec.js
 delete mode 100644 apps/ui/__test__/Textfield.spec.js
 delete mode 100644 apps/ui/__test__/Typography.spec.js
 create mode 100644 apps/ui/lib/components/Accordion/Accordion.stories.tsx
 create mode 100644 apps/ui/lib/components/Avatar/Avatar.stories.tsx
 create mode 100644 apps/ui/lib/components/Button/Button.stories.tsx
 create mode 100644 apps/ui/lib/components/Chip/Chip.stories.tsx
 create mode 100644 apps/ui/lib/components/Label/Label.stories.tsx
 create mode 100644 apps/ui/lib/components/Navigation-menu/Navigation.stories.tsx
 create mode 100644 apps/ui/lib/components/Progress/Progress.stories.tsx
 create mode 100644 apps/ui/lib/components/Select/Select.stories.tsx
 create mode 100644 apps/ui/lib/components/Switch/Switch.stories.tsx
 create mode 100644 apps/ui/lib/components/Textfield/Textfield.stories.tsx
 create mode 100644 apps/ui/lib/components/Toast/Toast.stories.tsx
 create mode 100644 apps/ui/lib/components/Typography/Typography.stories.tsx
 delete mode 100644 apps/ui/stories/Accordion.stories.tsx
 delete mode 100644 apps/ui/stories/Avatar.stories.tsx
 delete mode 100644 apps/ui/stories/Button.stories.tsx
 delete mode 100644 apps/ui/stories/Chip.stories.tsx
 delete mode 100644 apps/ui/stories/Label.stories.tsx
 delete mode 100644 apps/ui/stories/Navigation.stories.tsx
 delete mode 100644 apps/ui/stories/Progress.stories.tsx
 delete mode 100644 apps/ui/stories/Select.stories.tsx
 delete mode 100644 apps/ui/stories/Switch.stories.tsx
 delete mode 100644 apps/ui/stories/Textfield.stories.tsx
 delete mode 100644 apps/ui/stories/Toast.stories.tsx
 delete mode 100644 apps/ui/stories/Typography.stories.tsx

diff --git a/apps/ui/.eslintrc.cjs b/apps/ui/.eslintrc.cjs
index 6716988..d542efb 100644
--- a/apps/ui/.eslintrc.cjs
+++ b/apps/ui/.eslintrc.cjs
@@ -14,6 +14,7 @@ module.exports = {
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/no-children-prop': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
   },
   parserOptions: {
     project: true,
diff --git a/apps/ui/.storybook/main.ts b/apps/ui/.storybook/main.ts
index 2e7bd1d..55a16aa 100644
--- a/apps/ui/.storybook/main.ts
+++ b/apps/ui/.storybook/main.ts
@@ -4,55 +4,55 @@ import { defineConfig } from 'vite';
 const tsconfigPaths = require('vite-tsconfig-paths').default;
 
 module.exports = {
-  stories: ['../stories/**/*.stories.@(ts|tsx|js|jsx)'],
+    stories: ['../lib/**/*.stories.@(ts|tsx|js|jsx)'],
 
-  viteFinal: async (config) => {
-    return mergeConfig(config, {
-      plugins: [tsconfigPaths()],
-    });
-  },
-
-  viteConfig: defineConfig({
-    resolve: {
-      alias: {
-        '@': '/src',
-        '@utils': '/utils',
-      },
+    viteFinal: async (config) => {
+        return mergeConfig(config, {
+            plugins: [tsconfigPaths()],
+        });
     },
-  }),
 
-  addons: [
-    '@storybook/addon-links',
-    '@storybook/addon-essentials',
-    '@storybook/addon-controls',
-    '@storybook/addon-themes',
-    'storybook-css-modules',
-    {
-      name: '@storybook/addon-postcss',
-      options: {
-        postcssLoaderOptions: {
-          implementation: require('postcss'),
+    viteConfig: defineConfig({
+        resolve: {
+            alias: {
+                '@': '/src',
+                '@utils': '/utils',
+            },
         },
-      },
-    },
-  ],
+    }),
 
-  // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
-  typescript: {
-    check: true, // type-check stories during Storybook build
-  },
+    addons: [
+        '@storybook/addon-links',
+        '@storybook/addon-essentials',
+        '@storybook/addon-controls',
+        '@storybook/addon-themes',
+        'storybook-css-modules',
+        {
+            name: '@storybook/addon-postcss',
+            options: {
+                postcssLoaderOptions: {
+                    implementation: require('postcss'),
+                },
+            },
+        },
+    ],
 
-  framework: {
-    name: '@storybook/react-vite',
-    // options: {
-    //   legacyRootApi: true,
-    //   builder: {
-    //     viteConfigPath: './vite.config.ts',
-    //   },
-    // },
-  },
+    // https://storybook.js.org/docs/react/configure/typescript#mainjs-configuration
+    typescript: {
+        check: true, // type-check stories during Storybook build
+    },
 
-  docs: {
-    autodocs: true,
-  },
+    framework: {
+        name: '@storybook/react-vite',
+        // options: {
+        //   legacyRootApi: true,
+        //   builder: {
+        //     viteConfigPath: './vite.config.ts',
+        //   },
+        // },
+    },
+
+    docs: {
+        autodocs: true,
+    },
 };
diff --git a/apps/ui/__test__/Button.spec.js b/apps/ui/__test__/Button.spec.js
deleted file mode 100644
index 0d15fcd..0000000
--- a/apps/ui/__test__/Button.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Button } from '../lib/components/Button/index';
-import { Variants, Sizes } from '../stories/Button.stories';
-import '@testing-library/jest-dom';
-
-const argsColor = {
-  variant: 'default',
-  size: 'md',
-};
-
-const args = {
-  variant: 'default',
-  size: 'md',
-};
-
-describe('Button Component', () => {
-  test('renders without crashing', () => {
-    render(<Button />);
-  });
-
-  test('renders Variants', () => {
-    render(Variants(args));
-    const outlinedButton = screen.getByText('Default');
-    const filledButton = screen.getByText('destructive');
-
-    expect(outlinedButton).toBeInTheDocument();
-    expect(filledButton).toBeInTheDocument();
-  });
-
-  test('renders Sizes', () => {
-    render(Sizes(args));
-    const smallButton = screen.getByText('Small');
-    const mediumButton = screen.getByText('Medium');
-    const largeButton = screen.getByText('Large');
-
-    expect(smallButton).toBeInTheDocument();
-    expect(mediumButton).toBeInTheDocument();
-    expect(largeButton).toBeInTheDocument();
-  });
-});
diff --git a/apps/ui/__test__/Textfield.spec.js b/apps/ui/__test__/Textfield.spec.js
deleted file mode 100644
index be0deb3..0000000
--- a/apps/ui/__test__/Textfield.spec.js
+++ /dev/null
@@ -1,92 +0,0 @@
-import React from 'react';
-import { render, fireEvent, screen } from '@testing-library/react';
-import { TextField } from '../lib/components/Textfield';
-import '@testing-library/jest-dom';
-
-const textFieldArgs = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  startIcon: <span>Start Icon</span>,
-  endIcon: <span>End Icon</span>,
-};
-
-describe('TextField Component', () => {
-  test('renders disabled TextField', () => {
-    render(<TextField disabled {...textFieldArgs} />);
-    const inputElement = screen.getByPlaceholderText('Placeholder');
-
-    expect(inputElement).toBeDisabled();
-  });
-
-  test('renders label and placeholder', () => {
-    render(<TextField {...textFieldArgs} />);
-    const labelElement = screen.getByText('Label');
-    const inputElement = screen.getByPlaceholderText('Placeholder');
-    const startIcon = screen.getByText('Start Icon');
-    const endIcon = screen.getByText('End Icon');
-
-    expect(labelElement).toBeInTheDocument();
-    expect(inputElement).toBeInTheDocument();
-    expect(startIcon).toBeInTheDocument();
-    expect(endIcon).toBeInTheDocument();
-  });
-
-  test('handles onChange event', () => {
-    const onChangeMock = jest.fn();
-    render(<TextField onChange={onChangeMock} {...textFieldArgs} />);
-    const inputElement = screen.getByPlaceholderText('Placeholder');
-
-    fireEvent.change(inputElement, { target: { value: 'test value' } });
-
-    expect(onChangeMock).toHaveBeenCalledTimes(1);
-    expect(inputElement.value).toBe('test value');
-  });
-
-  test('renders read-only TextField', () => {
-    render(<TextField readOnly {...textFieldArgs} />);
-    const inputElement = screen.getByPlaceholderText('Placeholder');
-
-    expect(inputElement).toHaveAttribute('readonly');
-  });
-
-  test('renders required TextField', () => {
-    render(<TextField required {...textFieldArgs} />);
-    const inputElement = screen.getByPlaceholderText('Placeholder');
-
-    expect(inputElement).toBeRequired();
-  });
-
-  test('handles onKeyPress event', () => {
-    const onKeyPressMock = jest.fn();
-    render(<TextField onKeyPress={onKeyPressMock} {...textFieldArgs} />);
-    const inputElement = screen.getByPlaceholderText('Placeholder');
-
-    fireEvent.keyPress(inputElement, {
-      key: 'Enter',
-      code: 'Enter',
-      charCode: 13,
-    });
-
-    expect(onKeyPressMock).toHaveBeenCalledTimes(1);
-  });
-
-  test('handles onKeyUp event', () => {
-    const onKeyUpMock = jest.fn();
-    render(<TextField onKeyUp={onKeyUpMock} {...textFieldArgs} />);
-    const inputElement = screen.getByPlaceholderText('Placeholder');
-
-    fireEvent.keyUp(inputElement, { key: 'A', code: 'KeyA' });
-
-    expect(onKeyUpMock).toHaveBeenCalledTimes(1);
-  });
-
-  test('handles onKeyDown event', () => {
-    const onKeyDownMock = jest.fn();
-    render(<TextField onKeyDown={onKeyDownMock} {...textFieldArgs} />);
-    const inputElement = screen.getByPlaceholderText('Placeholder');
-
-    fireEvent.keyDown(inputElement, { key: 'ArrowDown', code: 'ArrowDown' });
-
-    expect(onKeyDownMock).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/apps/ui/__test__/Typography.spec.js b/apps/ui/__test__/Typography.spec.js
deleted file mode 100644
index 78bb071..0000000
--- a/apps/ui/__test__/Typography.spec.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Text, TextProps } from '../lib/components/Typography';
-import '@testing-library/jest-dom';
-import 'jest-styled-components';
-
-describe('Typography Component', () => {
-  test('renders without crashing', () => {
-    render(<Text variant="heading-1">Hey there peeps!</Text>);
-  });
-
-  test('renders with props', () => {
-    const props = {
-      variant: 'heading-1',
-      color: '#0f0f0f',
-      align: 'center',
-    };
-
-    render(<Text {...props}>Hey there peeps!</Text>);
-    const textElement = screen.getByText('Hey there peeps!');
-
-    expect(textElement).toBeInTheDocument();
-  });
-  test('applies custom text alignment when align prop is provided', () => {
-    render(<Text alignment="left">Left Aligned Text</Text>);
-
-    const textElement = screen.getByText('Left Aligned Text');
-    const computedStyle = window.getComputedStyle(textElement);
-
-    expect(computedStyle.textAlign).toBe('left');
-  });
-
-  test('applies custom color when color prop is provided', () => {
-    render(<Text color="#00f">Colored Text</Text>);
-
-    const textElement = screen.getByText('Colored Text');
-    const computedStyle = window.getComputedStyle(textElement);
-
-    expect(computedStyle.color).toBe('rgb(0, 0, 255)');
-  });
-});
diff --git a/apps/ui/lib/components/Accordion/Accordion.stories.tsx b/apps/ui/lib/components/Accordion/Accordion.stories.tsx
new file mode 100644
index 0000000..3f752c5
--- /dev/null
+++ b/apps/ui/lib/components/Accordion/Accordion.stories.tsx
@@ -0,0 +1,49 @@
+import { withGlobalStyles } from '../../../.storybook/decorator';
+
+import {
+    Accordion,
+    AccordionContent,
+    AccordionItem,
+    AccordionTrigger,
+} from '../..';
+
+const Test = () => (
+    <div className="grv-w-80">
+        <Accordion type="single" defaultValue="item-1" collapsible>
+            <AccordionItem value="item-1">
+                <AccordionTrigger>Accordion 1</AccordionTrigger>
+                <AccordionContent>Content 1</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-2">
+                <AccordionTrigger>Accordion 2</AccordionTrigger>
+                <AccordionContent>Content 2</AccordionContent>
+            </AccordionItem>
+            <AccordionItem value="item-3">
+                <AccordionTrigger>Accordion 3</AccordionTrigger>
+                <AccordionContent>Content 3</AccordionContent>
+            </AccordionItem>
+        </Accordion>
+    </div>
+);
+
+const withTailwind = () => {
+    return (
+        <div className="grv-w-80">
+            <Accordion type="single" defaultValue="item-1" collapsible>
+                <AccordionItem value="item-1" className='grv-border-b-0'>
+                    <AccordionTrigger>Accordion 1</AccordionTrigger>
+                    <AccordionContent>Content 1</AccordionContent>
+                </AccordionItem>
+            </Accordion>
+        </div>
+    );
+}
+
+export default {
+    title: 'components/Accordion',
+    component: Test,
+    decorators: [withGlobalStyles],
+};
+
+export const Default = () => <Test />;
+export const WithTailwind = () => withTailwind();
diff --git a/apps/ui/lib/components/Avatar/Avatar.stories.tsx b/apps/ui/lib/components/Avatar/Avatar.stories.tsx
new file mode 100644
index 0000000..9a26cf4
--- /dev/null
+++ b/apps/ui/lib/components/Avatar/Avatar.stories.tsx
@@ -0,0 +1,94 @@
+import { Story } from '@storybook/react';
+import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from './Avatar';
+import { Search, File } from 'lucide-react';
+
+export default {
+    title: 'Components/Avatar',
+    component: Avatar,
+    subcomponents: { AvatarImage, AvatarContent, AvatarFallback },
+    argTypes: {
+        className: { control: 'text' },
+    },
+};
+
+const Template: Story = (args) => (
+    <Avatar {...args}>
+        <AvatarImage
+            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Avatar Image"
+        />
+        <AvatarFallback>AB</AvatarFallback>
+    </Avatar>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+    className: '',
+};
+
+export const WithContentImage: Story = (args) => (
+    <Avatar {...args}>
+        <AvatarContent className="grv-bg-blue-500">
+            <img
+                src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                alt="Avatar Content Image"
+                className="grv-h-full grv-w-full grv-object-cover"
+            />
+        </AvatarContent>
+    </Avatar>
+);
+
+export const WithContentIcon: Story = (args) => (
+    <div className="grv-flex grv-flex-row grv-w-full grv-item-center grv-justify-center grv-gap-16 grv-p-4">
+        <Avatar {...args}>
+            <AvatarContent className="grv-flex grv-items-center grv-justify-center">
+                <Search size={24} />
+            </AvatarContent>
+        </Avatar>
+        <Avatar {...args}>
+            <AvatarContent className="grv-bg-secondary-300 grv-flex grv-items-center grv-justify-center">
+                <File size={24} />
+            </AvatarContent>
+        </Avatar>
+    </div>
+);
+
+export const WithFallback: Story = () => (
+    <Avatar>
+        <AvatarFallback>AB</AvatarFallback>
+    </Avatar>
+);
+
+export const allSizes: Story = () => (
+    <div className="grv-flex grv-flex-row grv-w-full grv-item-center grv-justify-center grv-gap-16 grv-p-4">
+        <Avatar size="small">
+            <AvatarContent className="grv-bg-blue-500">
+                <img
+                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                    alt="Avatar Content Image"
+                    className="grv-h-full grv-w-full grv-object-cover"
+                />
+            </AvatarContent>
+        </Avatar>
+
+        <Avatar size="medium">
+            <AvatarContent className="grv-bg-blue-500">
+                <img
+                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                    alt="Avatar Content Image"
+                    className="grv-h-full grv-w-full grv-object-cover"
+                />
+            </AvatarContent>
+        </Avatar>
+
+        <Avatar size="large">
+            <AvatarContent className="bg-blue-500">
+                <img
+                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                    alt="Avatar Content Image"
+                    className="grv-h-full grv-w-full grv-object-cover"
+                />
+            </AvatarContent>
+        </Avatar>
+    </div>
+);
diff --git a/apps/ui/lib/components/Button/Button.stories.tsx b/apps/ui/lib/components/Button/Button.stories.tsx
new file mode 100644
index 0000000..bc6eb72
--- /dev/null
+++ b/apps/ui/lib/components/Button/Button.stories.tsx
@@ -0,0 +1,75 @@
+import { Button } from './index';
+import { withGlobalStyles } from '../../../.storybook/decorator';
+
+export default {
+    title: 'Components/Button',
+    component: Button,
+    decorators: [withGlobalStyles],
+};
+
+export const Variants = () => (
+    <div
+        style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '1rem',
+        }}
+    >
+        <div>
+            <Button variant={'default'}>Default</Button>
+        </div>
+        <div>
+            <Button variant={'secondary'}>secondary</Button>
+        </div>
+        <div>
+            <Button variant={'destructive'}>destructive</Button>
+        </div>
+        <div>
+            <Button variant={'outline'}>Outline</Button>
+        </div>
+        <div>
+            <Button variant={'link'}>Link</Button>
+        </div>
+    </div>
+);
+
+export const tailwindButton = () => {
+    return <Button className="bg-warning-500 text-secondaryText">Hello</Button>;
+};
+
+export const tailwindButtonWithOverridingVariant = () => {
+    return (
+        <Button variant={'outline'} className="grv-bg-[#ff0f] grv-outline-[#1fa]">
+            Hello
+        </Button>
+    );
+};
+
+export const Sizes = () => (
+    <div
+        style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '1rem',
+        }}
+    >
+        <div>
+            <Button size="sm">Small</Button>
+        </div>
+        <div>
+            <Button size="default">Medium</Button>
+        </div>
+        <div>
+            <Button size="lg">Large</Button>
+        </div>
+    </div>
+);
+
+Sizes.args = {
+    variant: 'filled',
+    color: 'primary',
+};
diff --git a/apps/ui/lib/components/Chip/Chip.stories.tsx b/apps/ui/lib/components/Chip/Chip.stories.tsx
new file mode 100644
index 0000000..8763e7b
--- /dev/null
+++ b/apps/ui/lib/components/Chip/Chip.stories.tsx
@@ -0,0 +1,99 @@
+import { Story } from '@storybook/react';
+import { withGlobalStyles } from '../../../.storybook/decorator';
+
+import { Chip, ChipProps } from '../..';
+import { Avatar, AvatarImage, AvatarFallback } from '../..';
+import { Star, Mail } from 'lucide-react';
+
+const ChipExample = (props: ChipProps) => (
+    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip {...props}>Default</Chip>
+    </div>
+);
+
+const ChipVariants = () => (
+    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip variant="filled">Filled</Chip>
+        <Chip variant="outlined">Outlined</Chip>
+    </div>
+);
+
+const ChipSizes = () => (
+    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip size="sm">Small</Chip>
+        <Chip size="md">Medium</Chip>
+        <Chip size="lg">Large</Chip>
+    </div>
+);
+
+const ChipInteractions = () => (
+    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip clickable onClick={() => alert('Clicked!')}>
+            Clickable
+        </Chip>
+        <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
+        <Chip href="https://ui.soumyasagar.in" target="_blank">
+            Link
+        </Chip>
+    </div>
+);
+
+const ChipWithIcons = () => (
+    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip
+            beforeChildren={
+                <Avatar>
+                    <AvatarImage
+                        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+                        alt="Avatar Image"
+                    />
+                    <AvatarFallback>AB</AvatarFallback>
+                </Avatar>
+            }
+        >
+            User Chip
+        </Chip>
+        <Chip
+            variant="outlined"
+            afterChildren={<Star className="grv-h-4 grv-w-4" />}
+        >
+            Starred
+        </Chip>
+        <Chip
+            beforeChildren={<Mail className="grv-h-4 grv-w-4" />}
+            afterChildren={
+                <span className="grv-bg-primary-foreground grv-text-primary grv-rounded-full grv-px-2 grv-text-sm">
+                    99+
+                </span>
+            }
+        >
+            Inbox
+        </Chip>
+    </div>
+);
+
+export default {
+    title: 'components/Chip',
+    component: ChipExample,
+    decorators: [withGlobalStyles],
+};
+
+export const Default: Story<ChipProps> = (args) => <ChipExample {...args} />;
+Default.args = {
+    children: 'Default Chip',
+    variant: 'filled',
+    size: 'md',
+};
+
+export const Variants = () => <ChipVariants />;
+export const Sizes = () => <ChipSizes />;
+export const Interactions = () => <ChipInteractions />;
+export const WithIcons = () => <ChipWithIcons />;
+
+export const CustomStyles = () => (
+    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+        <Chip className="grv-bg-blue-500 grv-text-white hover:grv-bg-blue-600">
+            Custom Styled Chip
+        </Chip>
+    </div>
+);
diff --git a/apps/ui/lib/components/Label/Label.stories.tsx b/apps/ui/lib/components/Label/Label.stories.tsx
new file mode 100644
index 0000000..f12764c
--- /dev/null
+++ b/apps/ui/lib/components/Label/Label.stories.tsx
@@ -0,0 +1,31 @@
+import { StoryObj } from '@storybook/react';
+import { Label } from '../..';
+import { withGlobalStyles } from '../../../.storybook/decorator';
+
+type LabelComponentStory = StoryObj<typeof Label>;
+
+export default {
+    title: 'Components/Label',
+    component: Label,
+    tags: ['autodocs'],
+    decorators: [withGlobalStyles],
+    argTypes: {
+        htmlFor: { control: 'text' },
+        children: { control: 'text' },
+    },
+};
+
+export const BasicLabelComponent: LabelComponentStory = {
+    args: {
+        htmlFor: 'firstName',
+        children: 'First Name:',
+    },
+};
+
+export const LabelWithTailwind = () => {
+    return (
+        <Label htmlFor="firstName" className="text-error-900">
+            First Name:
+        </Label>
+    );
+};
diff --git a/apps/ui/lib/components/Navigation-menu/Navigation.stories.tsx b/apps/ui/lib/components/Navigation-menu/Navigation.stories.tsx
new file mode 100644
index 0000000..0a6b726
--- /dev/null
+++ b/apps/ui/lib/components/Navigation-menu/Navigation.stories.tsx
@@ -0,0 +1,114 @@
+import {
+    NavigationMenu,
+    NavigationMenuList,
+    NavigationMenuItem,
+    NavigationMenuTrigger,
+    NavigationMenuContent,
+    NavigationMenuLink,
+    ListItem,
+} from '../..';
+
+const components: { title: string; href: string; description: string }[] = [
+    {
+        title: 'Alert Dialog',
+        href: '/docs/primitives/alert-dialog',
+        description:
+            'A modal dialog that interrupts the user with important content and expects a response.',
+    },
+    {
+        title: 'Hover Card',
+        href: '/docs/primitives/hover-card',
+        description:
+            'For sighted users to preview content available behind a link.',
+    },
+    {
+        title: 'Progress',
+        href: '/docs/primitives/progress',
+        description:
+            'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
+    },
+    {
+        title: 'Scroll-area',
+        href: '/docs/primitives/scroll-area',
+        description: 'Visually or semantically separates content.',
+    },
+    {
+        title: 'Tabs',
+        href: '/docs/primitives/tabs',
+        description:
+            'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
+    },
+    {
+        title: 'Tooltip',
+        href: '/docs/primitives/tooltip',
+        description:
+            'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+    },
+];
+
+const Test = () => (
+    <NavigationMenu>
+        <NavigationMenuList>
+            <NavigationMenuItem>
+                <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                    <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+                        <li className="row-span-3">
+                            <NavigationMenuLink asChild>
+                                <a
+                                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                                    href="/"
+                                >
+                                    <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
+                                    <p className="text-sm leading-tight text-muted-foreground">
+                                        Beautifully designed components that you can copy and paste
+                                        into your apps. Accessible. Customizable. Open Source.
+                                    </p>
+                                </a>
+                            </NavigationMenuLink>
+                        </li>
+                        <ListItem href="/docs" title="Introduction">
+                            Re-usable components built using Radix UI and Tailwind CSS.
+                        </ListItem>
+                        <ListItem href="/docs/installation" title="Installation">
+                            How to install dependencies and structure your app.
+                        </ListItem>
+                        <ListItem href="/docs/primitives/typography" title="Typography">
+                            Styles for headings, paragraphs, lists...etc
+                        </ListItem>
+                    </ul>
+                </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+                <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+                <NavigationMenuContent>
+                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+                        {components.map((component) => (
+                            <ListItem
+                                key={component.title}
+                                title={component.title}
+                                href={component.href}
+                            >
+                                {component.description}
+                            </ListItem>
+                        ))}
+                    </ul>
+                </NavigationMenuContent>
+            </NavigationMenuItem>
+            <NavigationMenuItem>
+                <a href="/docs">
+                    <NavigationMenuLink>Documentation</NavigationMenuLink>
+                </a>
+            </NavigationMenuItem>
+        </NavigationMenuList>
+    </NavigationMenu>
+);
+
+export default {
+    title: 'components/Navigation',
+    component: Test,
+};
+
+export const Default = () => {
+    return <Test />;
+};
diff --git a/apps/ui/lib/components/Progress/Progress.stories.tsx b/apps/ui/lib/components/Progress/Progress.stories.tsx
new file mode 100644
index 0000000..e55f6c6
--- /dev/null
+++ b/apps/ui/lib/components/Progress/Progress.stories.tsx
@@ -0,0 +1,32 @@
+import { withGlobalStyles } from '../../../.storybook/decorator';
+import { Progress, Text } from '../..';
+
+const DefaultTemplate = ({ value = 40 }) => {
+    return (
+        <div
+            style={{
+                display: 'flex',
+                alignItems: 'start',
+                flexDirection: 'column',
+                width: '70%',
+                justifyItems: 'start',
+                gap: '1rem',
+            }}
+        >
+            <Text alignment="left" variant="heading-4">
+                {value}% complete
+            </Text>
+            <Progress value={value} />
+        </div>
+    );
+};
+
+export default {
+    title: 'components/Progress',
+    component: DefaultTemplate,
+    decorators: [withGlobalStyles],
+};
+
+export const Default = () => {
+    return <DefaultTemplate />;
+};
diff --git a/apps/ui/lib/components/Select/Select.stories.tsx b/apps/ui/lib/components/Select/Select.stories.tsx
new file mode 100644
index 0000000..2bbea3d
--- /dev/null
+++ b/apps/ui/lib/components/Select/Select.stories.tsx
@@ -0,0 +1,78 @@
+// SelectDemo.stories.js
+import {
+    ChevronDownIcon,
+    ChevronUpIcon,
+} from '@radix-ui/react-icons';
+import {
+    Select,
+    SelectContent,
+    SelectGroup,
+    SelectItem,
+    SelectLabel,
+    SelectScrollDownButton,
+    SelectScrollUpButton,
+    SelectTrigger,
+    SelectValue,
+} from '../..'; // Import your custom Select component
+import { SelectIcon } from '@radix-ui/react-select';
+
+// type SelectComponentStory = StoryObj<typeof CustomSelect>;
+
+const options = [
+    { value: 'broccoli', label: 'Broccoli' },
+    { value: 'carrot', label: 'Carrot' },
+    { value: 'lettuce', label: 'Lettuce' },
+    { value: 'corn', label: 'Corn' },
+    { value: 'cucumber', label: 'Cucumber' },
+    { value: 'spinach', label: 'Spinach' },
+    { value: 'peas', label: 'Peas' },
+    { value: 'cabbage', label: 'Cabbage' },
+];
+
+const BasicSelect = () => (
+    <div className="">
+        <Select aria-label="Food">
+            <SelectTrigger
+                style={{
+                    width: '200px',
+                }}
+                className="SelectTrigger flex flex-row items-center justify-center max-w-40"
+                aria-label="Food"
+            >
+                <SelectValue placeholder="Select a Vegetable…" />
+                <SelectIcon className="SelectIcon">
+                    <ChevronDownIcon />
+                </SelectIcon>
+            </SelectTrigger>
+
+            <SelectContent className="SelectContent bg-primary-700 w-24">
+                {/* <Select.Separator /> */}
+
+                <SelectScrollUpButton className="SelectScrollButton">
+                    <ChevronUpIcon />
+                </SelectScrollUpButton>
+                <SelectGroup className="">
+                    <SelectLabel className="bg-secondary-300 text-primaryText">
+                        Vegetables
+                    </SelectLabel>
+                    {options.map((option: any, index: number) => (
+                        <SelectItem key={index} className="text-primaryText" value={option.value}>
+                            {option.label}
+                        </SelectItem>
+                    ))}
+                </SelectGroup>
+
+                <SelectScrollDownButton className="SelectScrollButton">
+                    <ChevronDownIcon />
+                </SelectScrollDownButton>
+            </SelectContent>
+        </Select>
+    </div>
+);
+
+export default {
+    title: 'Components/Select',
+    component: BasicSelect,
+};
+
+export const Default = () => <BasicSelect />;
diff --git a/apps/ui/lib/components/Switch/Switch.stories.tsx b/apps/ui/lib/components/Switch/Switch.stories.tsx
new file mode 100644
index 0000000..810439b
--- /dev/null
+++ b/apps/ui/lib/components/Switch/Switch.stories.tsx
@@ -0,0 +1,27 @@
+import { withGlobalStyles } from '../../../.storybook/decorator';
+import { Label, Switch } from '../..';
+
+const DefaultTemplate = () => {
+    return (
+        <div style={{ display: 'flex', alignItems: 'center' }}>
+            <Label
+                className="Label"
+                htmlFor="airplane-mode"
+                style={{ paddingRight: 15 }}
+            >
+                Airplane mode
+            </Label>
+            <Switch className="SwitchRoot" id="airplane-mode" />
+        </div>
+    );
+};
+
+export default {
+    title: 'components/Switch',
+    component: DefaultTemplate,
+    decorators: [withGlobalStyles],
+};
+
+export const Default = () => {
+    return <DefaultTemplate />;
+};
diff --git a/apps/ui/lib/components/Textfield/Textfield.stories.tsx b/apps/ui/lib/components/Textfield/Textfield.stories.tsx
new file mode 100644
index 0000000..595eae6
--- /dev/null
+++ b/apps/ui/lib/components/Textfield/Textfield.stories.tsx
@@ -0,0 +1,175 @@
+import { TextField } from '../..';
+
+export default {
+    title: 'Components/TextField',
+    component: TextField,
+    argTypes: {
+        variant: {
+            options: ['filled', 'outlined', 'standard'],
+            control: { type: 'radio' },
+        },
+        size: {
+            options: ['sm', 'md', 'lg'],
+            control: { type: 'radio' },
+        },
+        type: {
+            options: ['password', 'number', 'email', 'text'],
+            control: { type: 'radio' },
+        },
+        color: {
+            options: ['primary', 'secondary'],
+            control: { type: 'radio' },
+        },
+        placeholder: {
+            control: { type: 'text' },
+        },
+        disabled: {
+            control: { type: 'boolean' },
+        },
+        required: {
+            control: { type: 'boolean' },
+        },
+        readOnly: {
+            control: { type: 'boolean' },
+        },
+        fullWidth: {
+            control: { type: 'boolean' },
+        },
+        multiline: {
+            control: { type: 'boolean' },
+        },
+        rows: {
+            control: { type: 'number' },
+        },
+        rowsMax: {
+            control: { type: 'number' },
+        },
+        startIcon: {
+            control: { type: 'text' },
+        },
+        endIcon: {
+            control: { type: 'text' },
+        },
+        onChange: {
+            control: { type: 'text' },
+        },
+        onClick: {
+            control: { type: 'text' },
+        },
+        onFocus: {
+            control: { type: 'text' },
+        },
+        onBlur: {
+            control: { type: 'text' },
+        },
+        onKeyPress: {
+            control: { type: 'text' },
+        },
+        onKeyUp: {
+            control: { type: 'text' },
+        },
+        onKeyDown: {
+            control: { type: 'text' },
+        },
+    },
+};
+
+export const Default = (args: any) => <TextField {...args} />;
+
+Default.args = {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    startIcon: '👋',
+    endIcon: '👋',
+};
+
+export const Colors = (args: any) => (
+    <div
+        style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '1rem',
+        }}
+    >
+        <div>
+            <TextField {...args} color="primary" />
+        </div>
+        <div>
+            <TextField {...args} color="secondary" />
+        </div>
+    </div>
+);
+
+Colors.args = {
+    variant: 'filled',
+};
+
+export const Variants = (args: any) => (
+    <div
+        style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '1rem',
+        }}
+    >
+        <div>
+            <TextField {...args} variant="outlined" />
+        </div>
+        <div>
+            <TextField {...args} variant="filled" />
+        </div>
+    </div>
+);
+
+Variants.args = {
+    color: 'primary',
+};
+
+export const Sizes = (args: any) => (
+    <div
+        style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '1rem',
+        }}
+    >
+        <div>
+            <TextField {...args} size="sm" />
+        </div>
+        <div>
+            <TextField {...args} size="md" />
+        </div>
+        <div>
+            <TextField {...args} size="lg" />
+        </div>
+    </div>
+);
+
+Sizes.args = {
+    color: 'primary',
+};
+
+export const Multiline = (args: any) => (
+    <div
+        style={{
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            alignItems: 'center',
+            gap: '1rem',
+        }}
+    >
+        <div>
+            <TextField {...args} multiline rows={4} />
+        </div>
+        <div>
+            <TextField {...args} multiline rows={4} variant="outlined" />
+        </div>
+    </div>
+);
diff --git a/apps/ui/lib/components/Toast/Toast.stories.tsx b/apps/ui/lib/components/Toast/Toast.stories.tsx
new file mode 100644
index 0000000..7c51597
--- /dev/null
+++ b/apps/ui/lib/components/Toast/Toast.stories.tsx
@@ -0,0 +1,89 @@
+import { withGlobalStyles } from '../../../.storybook/decorator';
+import { useToast, Button, Toaster, ToastAction } from '../..';
+
+export const Default = () => {
+    const { toast } = useToast();
+    return (
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+                minHeight: '80vh',
+                alignItems: 'center',
+            }}
+        >
+            <Toaster />
+            <Button
+                onClick={() => {
+                    toast({
+                        title: 'Whats up!.',
+                        description: 'Have a nice day.',
+                    });
+                }}
+            >
+                Show Toast
+            </Button>
+        </div>
+    );
+};
+
+export default {
+    title: 'components/Toast',
+    component: Default,
+    decorators: [withGlobalStyles],
+};
+
+export const Destructive = () => {
+    const { toast } = useToast();
+    return (
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+                minHeight: '50vh',
+                alignItems: 'center',
+            }}
+        >
+            <Toaster />
+            <Button
+                onClick={() => {
+                    toast({
+                        variant: 'destructive',
+                        title: 'Error',
+                        description: 'There was a problem with your request.',
+                    });
+                }}
+            >
+                Show Toast
+            </Button>
+        </div>
+    );
+};
+
+export const DestructiveWithActionButton = () => {
+    const { toast } = useToast();
+    return (
+        <div
+            style={{
+                display: 'flex',
+                justifyContent: 'center',
+                minHeight: '50vh',
+                alignItems: 'center',
+            }}
+        >
+            <Toaster />
+            <Button
+                onClick={() => {
+                    toast({
+                        variant: 'destructive',
+                        title: 'Error',
+                        description: 'There was a problem with your request.',
+                        action: <ToastAction altText="Try again">Try again</ToastAction>,
+                    });
+                }}
+            >
+                Show Toast
+            </Button>
+        </div>
+    );
+};
diff --git a/apps/ui/lib/components/Typography/Typography.stories.tsx b/apps/ui/lib/components/Typography/Typography.stories.tsx
new file mode 100644
index 0000000..2a6688a
--- /dev/null
+++ b/apps/ui/lib/components/Typography/Typography.stories.tsx
@@ -0,0 +1,295 @@
+import { Text } from '../..';
+
+export default {
+    title: 'Components/Text',
+    component: Text,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: {
+                type: 'select',
+                options: [
+                    'body-1',
+                    'body-2',
+                    'body-3',
+                    'button-1',
+                    'button-2',
+                    'button-3',
+                    'heading-1',
+                    'heading-2',
+                    'heading-3',
+                    'heading-4',
+                    'heading-5',
+                    'heading-6',
+                    'label-1',
+                    'label-2',
+                    'label-2-strong',
+                    'label-3',
+                    'subtitle-1',
+                    'subtitle-2',
+                    'subtitle-3',
+                ],
+            },
+            defaultValue: 'body-1',
+            description: 'The variant of the Text component.',
+        },
+        alignment: {
+            control: {
+                type: 'select',
+                options: ['left', 'right', 'center', 'justify'],
+            },
+            defaultValue: 'left',
+            description: 'The text alignment of the Text component.',
+        },
+        color: {
+            control: 'color',
+            defaultValue: '#2A2C35',
+            description: 'The color of the text in the Text component.',
+        },
+        asChild: {
+            control: 'text',
+            description:
+                'The type of child element to render within the Text component.',
+        },
+        children: {
+            control: 'text',
+            description: 'The text content of the Text component.',
+        },
+    },
+};
+
+// Create a template for your Text component
+const Template = (args: any) => <Text {...args} />;
+
+export const Default = Template.bind({});
+Default.args = {
+    variant: 'heading-1',
+    alignment: 'left',
+    color: '#2A2C35',
+    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+};
+
+// Combined Story
+export const AllVariants = () => {
+    return (
+        <>
+            {/* Body-1 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="body-1" color="#2A2C35">
+                    body-1
+                </Text>
+            </div>
+
+            {/* Body-2 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="body-2" color="#2A2C35">
+                    body-2
+                </Text>
+            </div>
+
+            {/* Body-3 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="body-3" color="#2A2C35">
+                    body-3
+                </Text>
+            </div>
+
+            {/* Button-1 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="button-1" color="#2A2C35">
+                    Button-1
+                </Text>
+            </div>
+
+            {/* Button-2 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="button-2" color="#2A2C35">
+                    Button-2
+                </Text>
+            </div>
+
+            {/* Heading-1 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="heading-1" color="#2A2C35">
+                    Heading-1
+                </Text>
+            </div>
+
+            {/* Heading-2 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="heading-2" color="#2A2C35">
+                    Heading-2
+                </Text>
+            </div>
+
+            {/* Heading-3 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="heading-3" color="#2A2C35">
+                    Heading-3
+                </Text>
+            </div>
+
+            {/* Heading-4 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="heading-4" color="#2A2C35">
+                    Heading-4
+                </Text>
+            </div>
+
+            {/* Heading-5 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="heading-5" color="#2A2C35">
+                    Heading-5
+                </Text>
+            </div>
+
+            {/* Heading-6 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="heading-6" color="#2A2C35">
+                    Heading-6
+                </Text>
+            </div>
+
+            {/* Label-1 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="label-1" color="#2A2C35">
+                    label-1
+                </Text>
+            </div>
+
+            {/* Label-2 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="label-2" color="#2A2C35">
+                    label-2
+                </Text>
+            </div>
+
+            {/* Subtitle-1 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="subtitle-1" color="#2A2C35">
+                    subtitle-1
+                </Text>
+            </div>
+
+            {/* Subtitle-2*/}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="subtitle-2" color="#2A2C35">
+                    subtitle-2
+                </Text>
+            </div>
+
+            {/* Subtitle-3 */}
+            <div style={{ marginBottom: '20px' }}>
+                <Text variant="subtitle-3" color="#2A2C35">
+                    subtitle-3
+                </Text>
+            </div>
+        </>
+    );
+};
+
+export const ColorStory = Template.bind({});
+ColorStory.args = {
+    variant: 'body-1',
+    alignment: 'center',
+    color: '#2a52be',
+    children:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+};
+
+export const withTailwind = () => {
+    return (
+        <div style={{ marginBottom: '20px' }}>
+            <Text className="grv-text-[#f0a000] grv-underline" variant="heading-1">
+                With extensible tailwind classes
+            </Text>
+        </div>
+    );
+};
+
+export const withTailwindAndVariant = () => {
+    return (
+        <div style={{ marginBottom: '20px' }}>
+            <Text variant="heading-1" className="text-error-700">
+                with tailwind classes and variant
+            </Text>
+        </div>
+    );
+};
+
+export const withTailwindAndVariant2 = () => {
+    return (
+        <div style={{ marginBottom: '20px' }}>
+            <Text
+                variant="heading-1"
+                className="grv-text-[#a0c] grv-text-[10px] grv-font-light"
+            >
+                with tailwind classes and variant
+            </Text>
+        </div>
+    );
+};
+
+// Alignment Center
+export const AlignmentCenterStory = Template.bind({});
+AlignmentCenterStory.args = {
+    variant: 'body-1',
+    alignment: 'center',
+    color: '#2A2C35',
+    children:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+};
+
+// Alignment Left
+export const AlignmentLeftStory = Template.bind({});
+AlignmentLeftStory.args = {
+    variant: 'body-1',
+    alignment: 'left',
+    color: '#2A2C35',
+    children:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+};
+
+// Alignment Right
+export const AlignmentRightStory = Template.bind({});
+AlignmentRightStory.args = {
+    variant: 'body-1',
+    alignment: 'right',
+    color: '#2A2C35',
+    children:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+};
+
+// Alignment Justify
+export const AlignmentJustifyStory = Template.bind({});
+AlignmentJustifyStory.args = {
+    variant: 'body-1',
+    alignment: 'justify',
+    color: '#2A2C35',
+    children:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+};
+
+// story for maxLines
+export const Body2MaxLinesEllipsis = Template.bind({});
+Body2MaxLinesEllipsis.args = {
+    variant: 'body-2',
+    alignment: 'left',
+    color: '#2A2C35',
+    width: 400,
+    children:
+        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+    maxLines: 2, // Limit the maximum lines
+};
+
+export const asChild = Template.bind({});
+asChild.args = {
+    variant: 'body-1',
+    asChild: true,
+    alignment: 'center',
+    color: '#2A2C35',
+    children: <h1>This is heading 1</h1>,
+};
diff --git a/apps/ui/stories/Accordion.stories.tsx b/apps/ui/stories/Accordion.stories.tsx
deleted file mode 100644
index a667ddd..0000000
--- a/apps/ui/stories/Accordion.stories.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { withGlobalStyles } from '../.storybook/decorator';
-
-import {
-  Accordion,
-  AccordionContent,
-  AccordionItem,
-  AccordionTrigger,
-} from '../lib';
-import exp from 'constants';
-
-const Test = () => (
-  <div className="grv-w-80">
-    <Accordion type="single" defaultValue="item-1" collapsible>
-      <AccordionItem value="item-1">
-        <AccordionTrigger>Accordion 1</AccordionTrigger>
-        <AccordionContent>Content 1</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-2">
-        <AccordionTrigger>Accordion 2</AccordionTrigger>
-        <AccordionContent>Content 2</AccordionContent>
-      </AccordionItem>
-      <AccordionItem value="item-3">
-        <AccordionTrigger>Accordion 3</AccordionTrigger>
-        <AccordionContent>Content 3</AccordionContent>
-      </AccordionItem>
-    </Accordion>
-  </div>
-);
-
-const withTailwind = ()=>{
-  return (
-    <div className="grv-w-80">
-      <Accordion type="single" defaultValue="item-1" collapsible>
-        <AccordionItem value="item-1" className='grv-border-b-0'>
-          <AccordionTrigger>Accordion 1</AccordionTrigger>
-          <AccordionContent>Content 1</AccordionContent>
-        </AccordionItem>
-      </Accordion>
-    </div>
-  );
-}
-
-export default {
-  title: 'components/Accordion',
-  component: Test,
-  decorators: [withGlobalStyles],
-} as Meta;
-
-export const Default = () => <Test />;
-export const WithTailwind = () => withTailwind();
diff --git a/apps/ui/stories/Avatar.stories.tsx b/apps/ui/stories/Avatar.stories.tsx
deleted file mode 100644
index aab125b..0000000
--- a/apps/ui/stories/Avatar.stories.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from '../lib';
-import { Search, File } from 'lucide-react';
-
-export default {
-  title: 'Components/Avatar',
-  component: Avatar,
-  subcomponents: { AvatarImage, AvatarContent, AvatarFallback },
-  argTypes: {
-    className: { control: 'text' },
-  },
-} as Meta;
-
-const Template: Story = (args) => (
-  <Avatar {...args}>
-    <AvatarImage
-      src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-      alt="Avatar Image"
-    />
-    <AvatarFallback>AB</AvatarFallback>
-  </Avatar>
-);
-
-export const Default = Template.bind({});
-Default.args = {
-  className: '',
-};
-
-export const WithContentImage: Story = (args) => (
-  <Avatar {...args}>
-    <AvatarContent className="grv-bg-blue-500">
-      <img
-        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-        alt="Avatar Content Image"
-        className="grv-h-full grv-w-full grv-object-cover"
-      />
-    </AvatarContent>
-  </Avatar>
-);
-
-export const WithContentIcon: Story = (args) => (
-  <div className="grv-flex grv-flex-row grv-w-full grv-item-center grv-justify-center grv-gap-16 grv-p-4">
-    <Avatar {...args}>
-      <AvatarContent className="grv-flex grv-items-center grv-justify-center">
-        <Search size={24} />
-      </AvatarContent>
-    </Avatar>
-    <Avatar {...args}>
-      <AvatarContent className="grv-bg-secondary-300 grv-flex grv-items-center grv-justify-center">
-        <File size={24} />
-      </AvatarContent>
-    </Avatar>
-  </div>
-);
-
-export const WithFallback: Story = (args) => (
-  <Avatar>
-    <AvatarFallback>AB</AvatarFallback>
-  </Avatar>
-);
-
-export const allSizes: Story = (args) => (
-  <div className="grv-flex grv-flex-row grv-w-full grv-item-center grv-justify-center grv-gap-16 grv-p-4">
-    <Avatar size="small">
-      <AvatarContent className="grv-bg-blue-500">
-        <img
-          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Avatar Content Image"
-          className="grv-h-full grv-w-full grv-object-cover"
-        />
-      </AvatarContent>
-    </Avatar>
-
-    <Avatar size="medium">
-      <AvatarContent className="grv-bg-blue-500">
-        <img
-          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Avatar Content Image"
-          className="grv-h-full grv-w-full grv-object-cover"
-        />
-      </AvatarContent>
-    </Avatar>
-
-    <Avatar size="large">
-      <AvatarContent className="bg-blue-500">
-        <img
-          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-          alt="Avatar Content Image"
-          className="grv-h-full grv-w-full grv-object-cover"
-        />
-      </AvatarContent>
-    </Avatar>
-  </div>
-);
diff --git a/apps/ui/stories/Button.stories.tsx b/apps/ui/stories/Button.stories.tsx
deleted file mode 100644
index 9c42ea5..0000000
--- a/apps/ui/stories/Button.stories.tsx
+++ /dev/null
@@ -1,77 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { Button } from '../lib';
-import { withGlobalStyles } from '../.storybook/decorator';
-
-export default {
-  title: 'Components/Button',
-  component: Button,
-  decorators: [withGlobalStyles],
-} as Meta;
-
-export const Variants = () => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <Button variant={'default'}>Default</Button>
-    </div>
-    <div>
-      <Button variant={'secondary'}>secondary</Button>
-    </div>
-    <div>
-      <Button variant={'destructive'}>destructive</Button>
-    </div>
-    <div>
-      <Button variant={'outline'}>Outline</Button>
-    </div>
-    <div>
-      <Button variant={'link'}>Link</Button>
-    </div>
-  </div>
-);
-
-export const tailwindButton = () => {
-  return <Button className="bg-warning-500 text-secondaryText">Hello</Button>;
-};
-
-export const tailwindButtonWithOverridingVariant = () => {
-  return (
-    <Button variant={'outline'} className="grv-bg-[#ff0f] grv-outline-[#1fa]">
-      Hello
-    </Button>
-  );
-};
-
-export const Sizes = () => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <Button size="sm">Small</Button>
-    </div>
-    <div>
-      <Button size="default">Medium</Button>
-    </div>
-    <div>
-      <Button size="lg">Large</Button>
-    </div>
-  </div>
-);
-
-Sizes.args = {
-  variant: 'filled',
-  color: 'primary',
-};
diff --git a/apps/ui/stories/Chip.stories.tsx b/apps/ui/stories/Chip.stories.tsx
deleted file mode 100644
index 0148df7..0000000
--- a/apps/ui/stories/Chip.stories.tsx
+++ /dev/null
@@ -1,100 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { withGlobalStyles } from '../.storybook/decorator';
-
-import { Chip, ChipProps } from '../lib';
-import { Avatar, AvatarImage, AvatarFallback } from '../lib';
-import { Star, Mail } from 'lucide-react';
-
-const ChipExample = (props: ChipProps) => (
-  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-    <Chip {...props}>Default</Chip>
-  </div>
-);
-
-const ChipVariants = () => (
-  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-    <Chip variant="filled">Filled</Chip>
-    <Chip variant="outlined">Outlined</Chip>
-  </div>
-);
-
-const ChipSizes = () => (
-  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-    <Chip size="sm">Small</Chip>
-    <Chip size="md">Medium</Chip>
-    <Chip size="lg">Large</Chip>
-  </div>
-);
-
-const ChipInteractions = () => (
-  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-    <Chip clickable onClick={() => alert('Clicked!')}>
-      Clickable
-    </Chip>
-    <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
-    <Chip href="https://ui.soumyasagar.in" target="_blank">
-      Link
-    </Chip>
-  </div>
-);
-
-const ChipWithIcons = () => (
-  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-    <Chip
-      beforeChildren={
-        <Avatar>
-          <AvatarImage
-            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-            alt="Avatar Image"
-          />
-          <AvatarFallback>AB</AvatarFallback>
-        </Avatar>
-      }
-    >
-      User Chip
-    </Chip>
-    <Chip
-      variant="outlined"
-      afterChildren={<Star className="grv-h-4 grv-w-4" />}
-    >
-      Starred
-    </Chip>
-    <Chip
-      beforeChildren={<Mail className="grv-h-4 grv-w-4" />}
-      afterChildren={
-        <span className="grv-bg-primary-foreground grv-text-primary grv-rounded-full grv-px-2 grv-text-sm">
-          99+
-        </span>
-      }
-    >
-      Inbox
-    </Chip>
-  </div>
-);
-
-export default {
-  title: 'components/Chip',
-  component: ChipExample,
-  decorators: [withGlobalStyles],
-} as Meta;
-
-export const Default: Story<ChipProps> = (args) => <ChipExample {...args} />;
-Default.args = {
-  children: 'Default Chip',
-  variant: 'filled',
-  size: 'md',
-};
-
-export const Variants = () => <ChipVariants />;
-export const Sizes = () => <ChipSizes />;
-export const Interactions = () => <ChipInteractions />;
-export const WithIcons = () => <ChipWithIcons />;
-
-export const CustomStyles = () => (
-  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-    <Chip className="grv-bg-blue-500 grv-text-white hover:grv-bg-blue-600">
-      Custom Styled Chip
-    </Chip>
-  </div>
-);
diff --git a/apps/ui/stories/Label.stories.tsx b/apps/ui/stories/Label.stories.tsx
deleted file mode 100644
index 10e27e6..0000000
--- a/apps/ui/stories/Label.stories.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import React from 'react';
-import { Meta, StoryObj } from '@storybook/react';
-import { Label } from '../lib';
-import { withGlobalStyles } from '../.storybook/decorator';
-
-type LabelComponentStory = StoryObj<typeof Label>;
-
-export default {
-  title: 'Components/Label',
-  component: Label,
-  tags: ['autodocs'],
-  decorators: [withGlobalStyles],
-  argTypes: {
-    htmlFor: { control: 'text' },
-    children: { control: 'text' },
-  },
-} as Meta<typeof Label>;
-
-export const BasicLabelComponent: LabelComponentStory = {
-  args: {
-    htmlFor: 'firstName',
-    children: 'First Name:',
-  },
-};
-
-export const LabelWithTailwind = () => {
-  return (
-    <Label htmlFor="firstName" className="text-error-900">
-      First Name:
-    </Label>
-  );
-};
diff --git a/apps/ui/stories/Navigation.stories.tsx b/apps/ui/stories/Navigation.stories.tsx
deleted file mode 100644
index df0a9a6..0000000
--- a/apps/ui/stories/Navigation.stories.tsx
+++ /dev/null
@@ -1,118 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-
-import {
-  NavigationMenu,
-  NavigationMenuList,
-  NavigationMenuItem,
-  NavigationMenuTrigger,
-  NavigationMenuContent,
-  NavigationMenuIndicator,
-  NavigationMenuLink,
-  ListItem,
-} from '../lib';
-
-const components: { title: string; href: string; description: string }[] = [
-  {
-    title: 'Alert Dialog',
-    href: '/docs/primitives/alert-dialog',
-    description:
-      'A modal dialog that interrupts the user with important content and expects a response.',
-  },
-  {
-    title: 'Hover Card',
-    href: '/docs/primitives/hover-card',
-    description:
-      'For sighted users to preview content available behind a link.',
-  },
-  {
-    title: 'Progress',
-    href: '/docs/primitives/progress',
-    description:
-      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
-  },
-  {
-    title: 'Scroll-area',
-    href: '/docs/primitives/scroll-area',
-    description: 'Visually or semantically separates content.',
-  },
-  {
-    title: 'Tabs',
-    href: '/docs/primitives/tabs',
-    description:
-      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
-  },
-  {
-    title: 'Tooltip',
-    href: '/docs/primitives/tooltip',
-    description:
-      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
-  },
-];
-
-const Test = () => (
-  <NavigationMenu>
-    <NavigationMenuList>
-      <NavigationMenuItem>
-        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-        <NavigationMenuContent>
-          <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-            <li className="row-span-3">
-              <NavigationMenuLink asChild>
-                <a
-                  className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                  href="/"
-                >
-                  <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
-                  <p className="text-sm leading-tight text-muted-foreground">
-                    Beautifully designed components that you can copy and paste
-                    into your apps. Accessible. Customizable. Open Source.
-                  </p>
-                </a>
-              </NavigationMenuLink>
-            </li>
-            <ListItem href="/docs" title="Introduction">
-              Re-usable components built using Radix UI and Tailwind CSS.
-            </ListItem>
-            <ListItem href="/docs/installation" title="Installation">
-              How to install dependencies and structure your app.
-            </ListItem>
-            <ListItem href="/docs/primitives/typography" title="Typography">
-              Styles for headings, paragraphs, lists...etc
-            </ListItem>
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-      <NavigationMenuItem>
-        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-        <NavigationMenuContent>
-          <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-            {components.map((component) => (
-              <ListItem
-                key={component.title}
-                title={component.title}
-                href={component.href}
-              >
-                {component.description}
-              </ListItem>
-            ))}
-          </ul>
-        </NavigationMenuContent>
-      </NavigationMenuItem>
-      <NavigationMenuItem>
-        <a href="/docs">
-          <NavigationMenuLink>Documentation</NavigationMenuLink>
-        </a>
-      </NavigationMenuItem>
-    </NavigationMenuList>
-  </NavigationMenu>
-);
-
-export default {
-  title: 'components/Navigation',
-  component: Test,
-} as Meta;
-
-export const Default = () => {
-  return <Test />;
-};
diff --git a/apps/ui/stories/Progress.stories.tsx b/apps/ui/stories/Progress.stories.tsx
deleted file mode 100644
index 6313e01..0000000
--- a/apps/ui/stories/Progress.stories.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { withGlobalStyles } from '../.storybook/decorator';
-import { Progress, Text } from '../lib';
-
-const DefaultTemplate = ({ value = 40 }) => {
-  return (
-    <div
-      style={{
-        display: 'flex',
-        alignItems: 'start',
-        flexDirection: 'column',
-        width: '70%',
-        justifyItems: 'start',
-        gap: '1rem',
-      }}
-    >
-      <Text alignment="left" variant="heading-4">
-        {value}% complete
-      </Text>
-      <Progress value={value} />
-    </div>
-  );
-};
-
-export default {
-  title: 'components/Progress',
-  component: DefaultTemplate,
-  decorators: [withGlobalStyles],
-} as Meta;
-
-export const Default = () => {
-  return <DefaultTemplate />;
-};
diff --git a/apps/ui/stories/Select.stories.tsx b/apps/ui/stories/Select.stories.tsx
deleted file mode 100644
index 8315d5f..0000000
--- a/apps/ui/stories/Select.stories.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-// SelectDemo.stories.js
-
-import React from 'react';
-import {
-  CheckIcon,
-  ChevronDownIcon,
-  ChevronUpIcon,
-} from '@radix-ui/react-icons';
-import { Check } from 'lucide-react';
-import { Meta, StoryObj } from '@storybook/react';
-import {
-  Select,
-  SelectContent,
-  SelectGroup,
-  SelectItem,
-  SelectLabel,
-  SelectScrollDownButton,
-  SelectScrollUpButton,
-  SelectSeparator,
-  SelectTrigger,
-  SelectValue,
-} from '../lib'; // Import your custom Select component
-import { SelectIcon } from '@radix-ui/react-select';
-
-// type SelectComponentStory = StoryObj<typeof CustomSelect>;
-
-const options = [
-  { value: 'broccoli', label: 'Broccoli' },
-  { value: 'carrot', label: 'Carrot' },
-  { value: 'lettuce', label: 'Lettuce' },
-  { value: 'corn', label: 'Corn' },
-  { value: 'cucumber', label: 'Cucumber' },
-  { value: 'spinach', label: 'Spinach' },
-  { value: 'peas', label: 'Peas' },
-  { value: 'cabbage', label: 'Cabbage' },
-];
-
-const Test = () => (
-  <div className="">
-    <Select aria-label="Food">
-      <SelectTrigger
-        style={{
-          width: '200px',
-        }}
-        className="SelectTrigger flex flex-row items-center justify-center max-w-40"
-        aria-label="Food"
-      >
-        <SelectValue placeholder="Select a Vegetable…" />
-        <SelectIcon className="SelectIcon">
-          <ChevronDownIcon />
-        </SelectIcon>
-      </SelectTrigger>
-
-      <SelectContent className="SelectContent bg-primary-700 w-24">
-        {/* <Select.Separator /> */}
-
-        <SelectScrollUpButton className="SelectScrollButton">
-          <ChevronUpIcon />
-        </SelectScrollUpButton>
-        <SelectGroup className="">
-          <SelectLabel className="bg-secondary-300 text-primaryText">
-            Vegetables
-          </SelectLabel>
-          {options.map((option: any) => (
-            <SelectItem className="text-primaryText" value={option.value}>
-              {option.label}
-            </SelectItem>
-          ))}
-        </SelectGroup>
-
-        <SelectScrollDownButton className="SelectScrollButton">
-          <ChevronDownIcon />
-        </SelectScrollDownButton>
-      </SelectContent>
-    </Select>
-  </div>
-);
-
-export default {
-  title: 'Components/Select',
-  component: Test,
-} as Meta;
-
-export const Default = () => <Test />;
diff --git a/apps/ui/stories/Switch.stories.tsx b/apps/ui/stories/Switch.stories.tsx
deleted file mode 100644
index ba89aad..0000000
--- a/apps/ui/stories/Switch.stories.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { withGlobalStyles } from '../.storybook/decorator';
-import { Label, Switch } from '../lib';
-
-const DefaultTemplate = () => {
-  return (
-    <div style={{ display: 'flex', alignItems: 'center' }}>
-      <Label
-        className="Label"
-        htmlFor="airplane-mode"
-        style={{ paddingRight: 15 }}
-      >
-        Airplane mode
-      </Label>
-      <Switch className="SwitchRoot" id="airplane-mode" />
-    </div>
-  );
-};
-
-export default {
-  title: 'components/Switch',
-  component: DefaultTemplate,
-  decorators: [withGlobalStyles],
-} as Meta;
-
-export const Default = () => {
-  return <DefaultTemplate />;
-};
diff --git a/apps/ui/stories/Textfield.stories.tsx b/apps/ui/stories/Textfield.stories.tsx
deleted file mode 100644
index e932747..0000000
--- a/apps/ui/stories/Textfield.stories.tsx
+++ /dev/null
@@ -1,177 +0,0 @@
-import React from 'react';
-import { Meta } from '@storybook/react';
-import { TextField } from '../lib';
-
-export default {
-  title: 'Components/TextField',
-  component: TextField,
-  argTypes: {
-    variant: {
-      options: ['filled', 'outlined', 'standard'],
-      control: { type: 'radio' },
-    },
-    size: {
-      options: ['sm', 'md', 'lg'],
-      control: { type: 'radio' },
-    },
-    type: {
-      options: ['password', 'number', 'email', 'text'],
-      control: { type: 'radio' },
-    },
-    color: {
-      options: ['primary', 'secondary'],
-      control: { type: 'radio' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-    required: {
-      control: { type: 'boolean' },
-    },
-    readOnly: {
-      control: { type: 'boolean' },
-    },
-    fullWidth: {
-      control: { type: 'boolean' },
-    },
-    multiline: {
-      control: { type: 'boolean' },
-    },
-    rows: {
-      control: { type: 'number' },
-    },
-    rowsMax: {
-      control: { type: 'number' },
-    },
-    startIcon: {
-      control: { type: 'text' },
-    },
-    endIcon: {
-      control: { type: 'text' },
-    },
-    onChange: {
-      control: { type: 'text' },
-    },
-    onClick: {
-      control: { type: 'text' },
-    },
-    onFocus: {
-      control: { type: 'text' },
-    },
-    onBlur: {
-      control: { type: 'text' },
-    },
-    onKeyPress: {
-      control: { type: 'text' },
-    },
-    onKeyUp: {
-      control: { type: 'text' },
-    },
-    onKeyDown: {
-      control: { type: 'text' },
-    },
-  },
-} as Meta;
-
-export const Default = (args: any) => <TextField {...args} />;
-
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  startIcon: '👋',
-  endIcon: '👋',
-};
-
-export const Colors = (args: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <TextField {...args} color="primary" />
-    </div>
-    <div>
-      <TextField {...args} color="secondary" />
-    </div>
-  </div>
-);
-
-Colors.args = {
-  variant: 'filled',
-};
-
-export const Variants = (args: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <TextField {...args} variant="outlined" />
-    </div>
-    <div>
-      <TextField {...args} variant="filled" />
-    </div>
-  </div>
-);
-
-Variants.args = {
-  color: 'primary',
-};
-
-export const Sizes = (args: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <TextField {...args} size="sm" />
-    </div>
-    <div>
-      <TextField {...args} size="md" />
-    </div>
-    <div>
-      <TextField {...args} size="lg" />
-    </div>
-  </div>
-);
-
-Sizes.args = {
-  color: 'primary',
-};
-
-export const Multiline = (args: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <TextField {...args} multiline rows={4} />
-    </div>
-    <div>
-      <TextField {...args} multiline rows={4} variant="outlined" />
-    </div>
-  </div>
-);
diff --git a/apps/ui/stories/Toast.stories.tsx b/apps/ui/stories/Toast.stories.tsx
deleted file mode 100644
index 4902fa5..0000000
--- a/apps/ui/stories/Toast.stories.tsx
+++ /dev/null
@@ -1,91 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { withGlobalStyles } from '../.storybook/decorator';
-import { useToast, Button, Toaster, ToastAction } from '../lib';
-
-export const Default = () => {
-  const { toast } = useToast();
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        minHeight: '80vh',
-        alignItems: 'center',
-      }}
-    >
-      <Toaster />
-      <Button
-        onClick={() => {
-          toast({
-            title: 'Whats up!.',
-            description: 'Have a nice day.',
-          });
-        }}
-      >
-        Show Toast
-      </Button>
-    </div>
-  );
-};
-
-export default {
-  title: 'components/Toast',
-  component: Default,
-  decorators: [withGlobalStyles],
-} as Meta;
-
-export const Destructive = () => {
-  const { toast } = useToast();
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        minHeight: '50vh',
-        alignItems: 'center',
-      }}
-    >
-      <Toaster />
-      <Button
-        onClick={() => {
-          toast({
-            variant: 'destructive',
-            title: 'Error',
-            description: 'There was a problem with your request.',
-          });
-        }}
-      >
-        Show Toast
-      </Button>
-    </div>
-  );
-};
-
-export const DestructiveWithActionButton = () => {
-  const { toast } = useToast();
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'center',
-        minHeight: '50vh',
-        alignItems: 'center',
-      }}
-    >
-      <Toaster />
-      <Button
-        onClick={() => {
-          toast({
-            variant: 'destructive',
-            title: 'Error',
-            description: 'There was a problem with your request.',
-            action: <ToastAction altText="Try again">Try again</ToastAction>,
-          });
-        }}
-      >
-        Show Toast
-      </Button>
-    </div>
-  );
-};
diff --git a/apps/ui/stories/Typography.stories.tsx b/apps/ui/stories/Typography.stories.tsx
deleted file mode 100644
index 551e1e9..0000000
--- a/apps/ui/stories/Typography.stories.tsx
+++ /dev/null
@@ -1,296 +0,0 @@
-import React from 'react';
-import { Text, TextProps } from '../lib';
-
-export default {
-  title: 'Components/Text',
-  component: Text,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-        options: [
-          'body-1',
-          'body-2',
-          'body-3',
-          'button-1',
-          'button-2',
-          'button-3',
-          'heading-1',
-          'heading-2',
-          'heading-3',
-          'heading-4',
-          'heading-5',
-          'heading-6',
-          'label-1',
-          'label-2',
-          'label-2-strong',
-          'label-3',
-          'subtitle-1',
-          'subtitle-2',
-          'subtitle-3',
-        ],
-      },
-      defaultValue: 'body-1',
-      description: 'The variant of the Text component.',
-    },
-    alignment: {
-      control: {
-        type: 'select',
-        options: ['left', 'right', 'center', 'justify'],
-      },
-      defaultValue: 'left',
-      description: 'The text alignment of the Text component.',
-    },
-    color: {
-      control: 'color',
-      defaultValue: '#2A2C35',
-      description: 'The color of the text in the Text component.',
-    },
-    asChild: {
-      control: 'text',
-      description:
-        'The type of child element to render within the Text component.',
-    },
-    children: {
-      control: 'text',
-      description: 'The text content of the Text component.',
-    },
-  },
-};
-
-// Create a template for your Text component
-const Template = (args) => <Text {...args} />;
-
-export const Default = Template.bind({});
-Default.args = {
-  variant: 'heading-1',
-  alignment: 'left',
-  color: '#2A2C35',
-  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-};
-
-// Combined Story
-export const AllVariants = () => {
-  return (
-    <>
-      {/* Body-1 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="body-1" color="#2A2C35">
-          body-1
-        </Text>
-      </div>
-
-      {/* Body-2 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="body-2" color="#2A2C35">
-          body-2
-        </Text>
-      </div>
-
-      {/* Body-3 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="body-3" color="#2A2C35">
-          body-3
-        </Text>
-      </div>
-
-      {/* Button-1 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="button-1" color="#2A2C35">
-          Button-1
-        </Text>
-      </div>
-
-      {/* Button-2 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="button-2" color="#2A2C35">
-          Button-2
-        </Text>
-      </div>
-
-      {/* Heading-1 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="heading-1" color="#2A2C35">
-          Heading-1
-        </Text>
-      </div>
-
-      {/* Heading-2 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="heading-2" color="#2A2C35">
-          Heading-2
-        </Text>
-      </div>
-
-      {/* Heading-3 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="heading-3" color="#2A2C35">
-          Heading-3
-        </Text>
-      </div>
-
-      {/* Heading-4 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="heading-4" color="#2A2C35">
-          Heading-4
-        </Text>
-      </div>
-
-      {/* Heading-5 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="heading-5" color="#2A2C35">
-          Heading-5
-        </Text>
-      </div>
-
-      {/* Heading-6 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="heading-6" color="#2A2C35">
-          Heading-6
-        </Text>
-      </div>
-
-      {/* Label-1 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="label-1" color="#2A2C35">
-          label-1
-        </Text>
-      </div>
-
-      {/* Label-2 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="label-2" color="#2A2C35">
-          label-2
-        </Text>
-      </div>
-
-      {/* Subtitle-1 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="subtitle-1" color="#2A2C35">
-          subtitle-1
-        </Text>
-      </div>
-
-      {/* Subtitle-2*/}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="subtitle-2" color="#2A2C35">
-          subtitle-2
-        </Text>
-      </div>
-
-      {/* Subtitle-3 */}
-      <div style={{ marginBottom: '20px' }}>
-        <Text variant="subtitle-3" color="#2A2C35">
-          subtitle-3
-        </Text>
-      </div>
-    </>
-  );
-};
-
-export const ColorStory = Template.bind({});
-ColorStory.args = {
-  variant: 'body-1',
-  alignment: 'center',
-  color: '#2a52be',
-  children:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-};
-
-export const withTailwind = () => {
-  return (
-    <div style={{ marginBottom: '20px' }}>
-      <Text className="grv-text-[#f0a000] grv-underline" variant="heading-1">
-        With extensible tailwind classes
-      </Text>
-    </div>
-  );
-};
-
-export const withTailwindAndVariant = () => {
-  return (
-    <div style={{ marginBottom: '20px' }}>
-      <Text variant="heading-1" className="text-error-700">
-        with tailwind classes and variant
-      </Text>
-    </div>
-  );
-};
-
-export const withTailwindAndVariant2 = () => {
-  return (
-    <div style={{ marginBottom: '20px' }}>
-      <Text
-        variant="heading-1"
-        className="grv-text-[#a0c] grv-text-[10px] grv-font-light"
-      >
-        with tailwind classes and variant
-      </Text>
-    </div>
-  );
-};
-
-// Alignment Center
-export const AlignmentCenterStory = Template.bind({});
-AlignmentCenterStory.args = {
-  variant: 'body-1',
-  alignment: 'center',
-  color: '#2A2C35',
-  children:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
-};
-
-// Alignment Left
-export const AlignmentLeftStory = Template.bind({});
-AlignmentLeftStory.args = {
-  variant: 'body-1',
-  alignment: 'left',
-  color: '#2A2C35',
-  children:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-};
-
-// Alignment Right
-export const AlignmentRightStory = Template.bind({});
-AlignmentRightStory.args = {
-  variant: 'body-1',
-  alignment: 'right',
-  color: '#2A2C35',
-  children:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-};
-
-// Alignment Justify
-export const AlignmentJustifyStory = Template.bind({});
-AlignmentJustifyStory.args = {
-  variant: 'body-1',
-  alignment: 'justify',
-  color: '#2A2C35',
-  children:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-};
-
-// story for maxLines
-export const Body2MaxLinesEllipsis = Template.bind({});
-Body2MaxLinesEllipsis.args = {
-  variant: 'body-2',
-  alignment: 'left',
-  color: '#2A2C35',
-  width: 400,
-  children:
-    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-  maxLines: 2, // Limit the maximum lines
-};
-
-export const asChild = Template.bind({});
-asChild.args = {
-  variant: 'body-1',
-  asChild: true,
-  alignment: 'center',
-  color: '#2A2C35',
-  children: <h1>This is heading 1</h1>,
-};

From 74d42c76f46436218541a1b65ac77a690c5fa856 Mon Sep 17 00:00:00 2001
From: SySagar <sysagar07@gmail.com>
Date: Sun, 12 Jan 2025 00:15:41 +0530
Subject: [PATCH 2/6] chore: typography and button story update

---
 apps/ui/.storybook/preview.tsx                | 100 ++++++------
 apps/ui/.storybook/theme.ts                   |  40 ++---
 .../lib/components/Button/Button.stories.tsx  |   9 +-
 apps/ui/lib/components/Button/index.tsx       |  78 +++++-----
 apps/ui/lib/components/Typography/Text.tsx    |  60 ++++----
 .../Typography/Typography.stories.tsx         |   2 +-
 apps/ui/tailwind.config.ts                    | 142 +++++++++---------
 apps/ui/utils/utils.ts                        |   2 +-
 8 files changed, 216 insertions(+), 217 deletions(-)

diff --git a/apps/ui/.storybook/preview.tsx b/apps/ui/.storybook/preview.tsx
index 82e2219..3a12059 100644
--- a/apps/ui/.storybook/preview.tsx
+++ b/apps/ui/.storybook/preview.tsx
@@ -1,69 +1,69 @@
 // https://storybook.js.org/docs/react/writing-stories/parameters#global-parameters
 import '../lib/tailwind.css';
 import '../lib/color-scheme.css';
-import { withGlobalStyles } from './decorator';
+import '@groovy-box/tokens/src/fonts.css';
 
 const customViewports = {
-  xs: {
-    name: 'XS',
-    styles: {
-      width: '350px',
-      height: '963px',
+    xs: {
+        name: 'XS',
+        styles: {
+            width: '350px',
+            height: '963px',
+        },
     },
-  },
-  sm: {
-    name: 'SM',
-    styles: {
-      width: '600px',
-      height: '801px',
+    sm: {
+        name: 'SM',
+        styles: {
+            width: '600px',
+            height: '801px',
+        },
     },
-  },
-  md: {
-    name: 'MD',
-    styles: {
-      width: '900px',
-      height: '801px',
+    md: {
+        name: 'MD',
+        styles: {
+            width: '900px',
+            height: '801px',
+        },
     },
-  },
-  lg: {
-    name: 'LG',
-    styles: {
-      width: '1200px',
-      height: '801px',
+    lg: {
+        name: 'LG',
+        styles: {
+            width: '1200px',
+            height: '801px',
+        },
     },
-  },
-  xl: {
-    name: 'XL',
-    styles: {
-      width: '1536px',
-      height: '801px',
+    xl: {
+        name: 'XL',
+        styles: {
+            width: '1536px',
+            height: '801px',
+        },
     },
-  },
 };
 
 export const parameters = {
-  // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
-  actions: { argTypesRegex: '^on.*' },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
+    // https://storybook.js.org/docs/react/essentials/actions#automatically-matching-args
+    actions: { argTypesRegex: '^on.*' },
+    controls: {
+        matchers: {
+            color: /(background|color)$/i,
+            date: /Date$/,
+        },
+    },
+    visualViewport: {
+        customViewports,
     },
-  },
-  visualViewport: {
-    customViewports,
-  },
 };
 
 export const globalTypes = {
-  scheme: {
-    name: 'Scheme',
-    description: 'Select light or dark',
-    defaultValue: 'light',
-    toolbar: {
-      icon: 'mirror',
-      items: ['light', 'dark'],
-      dynamicTitle: true,
+    scheme: {
+        name: 'Scheme',
+        description: 'Select light or dark',
+        defaultValue: 'light',
+        toolbar: {
+            icon: 'mirror',
+            items: ['light', 'dark'],
+            dynamicTitle: true,
+        },
     },
-  },
 };
diff --git a/apps/ui/.storybook/theme.ts b/apps/ui/.storybook/theme.ts
index c68890d..a867536 100644
--- a/apps/ui/.storybook/theme.ts
+++ b/apps/ui/.storybook/theme.ts
@@ -1,28 +1,28 @@
 import { create } from '@storybook/theming/create';
 
 export default create({
-  base: 'light',
-  brandTitle: 'Groovy-Box',
-  brandUrl: 'https://ui.soumyasagar.in/',
-  brandImage:
-    'https://raw.githubusercontent.com/EnigmaVSSUT/Enigma-UI-Kit/main/assets/logo.png',
-  brandTarget: '_self',
-  //fonts
-  fontBase: '"Inter", sans-serif',
-  fontCode: 'monospace',
+    base: 'light',
+    brandTitle: 'Groovy-Box',
+    brandUrl: 'https://ui.soumyasagar.in/',
+    brandImage:
+        'https://raw.githubusercontent.com/EnigmaVSSUT/Enigma-UI-Kit/main/assets/logo.png',
+    brandTarget: '_self',
+    //fonts
+    fontBase: '"Inter", sans-serif',
+    fontCode: 'monospace',
 
-  //UI
-  appBg: '#E9EFE7',
+    //UI
+    appBg: '#E9EFE7',
 
-  // Text colors
-  textColor: '#454A44',
-  textInverseColor: '#10162F',
+    // Text colors
+    textColor: '#454A44',
+    textInverseColor: '#10162F',
 
-  // Toolbar default and active colors
-  barTextColor: '#9E9E9E',
-  barBg: '#ffffff',
+    // Toolbar default and active colors
+    barTextColor: '#9E9E9E',
+    barBg: '#ffffff',
 
-  // Form colors
-  inputBg: '#ffffff',
-  inputTextColor: '#10162F',
+    // Form colors
+    inputBg: '#ffffff',
+    inputTextColor: '#10162F',
 });
diff --git a/apps/ui/lib/components/Button/Button.stories.tsx b/apps/ui/lib/components/Button/Button.stories.tsx
index bc6eb72..57d0368 100644
--- a/apps/ui/lib/components/Button/Button.stories.tsx
+++ b/apps/ui/lib/components/Button/Button.stories.tsx
@@ -36,16 +36,9 @@ export const Variants = () => (
 );
 
 export const tailwindButton = () => {
-    return <Button className="bg-warning-500 text-secondaryText">Hello</Button>;
+    return <Button className="grv-bg-warning-700 grv-text-text-secondary hover:grv-bg-warning-500 grv-font-bold">Hello</Button>;
 };
 
-export const tailwindButtonWithOverridingVariant = () => {
-    return (
-        <Button variant={'outline'} className="grv-bg-[#ff0f] grv-outline-[#1fa]">
-            Hello
-        </Button>
-    );
-};
 
 export const Sizes = () => (
     <div
diff --git a/apps/ui/lib/components/Button/index.tsx b/apps/ui/lib/components/Button/index.tsx
index 6a7af3f..232d521 100644
--- a/apps/ui/lib/components/Button/index.tsx
+++ b/apps/ui/lib/components/Button/index.tsx
@@ -5,51 +5,53 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@utils/utils';
 
 const buttonVariants = cva(
-  'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
-  {
-    variants: {
-      variant: {
-        default:
-          'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
-        destructive:
-          'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
-        outline:
-          ' grv-border-none hover:grv-bg-bgopacity grv-text-accent [data-mode="dark"]:grv-text-text-primary  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
-        secondary:
-          'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
-        link: 'grv-text-primary-300 grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer',
-      },
-      size: {
-        default: 'grv-h-10 grv-px-4 grv-py-2',
-        sm: 'grv-h-9 grv-rounded-md grv-px-3',
-        lg: 'grv-h-11 grv-rounded-md grv-px-8',
-        icon: 'grv-h-10 grv-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
+    'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
+    {
+        variants: {
+            variant: {
+                default:
+                    'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
+                destructive:
+                    'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
+                outline:
+                    ' grv-border-none hover:grv-bg-bgopacity grv-text-accent  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
+                secondary:
+                    'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
+                link: 'grv-text-accent grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer p-0 m-0',
+            },
+            size: {
+                default: 'grv-h-10 grv-px-4 grv-py-2',
+                sm: 'grv-h-9 grv-rounded-md grv-px-3',
+                lg: 'grv-h-11 grv-rounded-md grv-px-8',
+                icon: 'grv-h-10 grv-w-10',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+    asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size }), className)}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : 'button';
+
+        console.log('cn', cn(buttonVariants({ variant, size, className })));
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
 );
 Button.displayName = 'Button';
 
diff --git a/apps/ui/lib/components/Typography/Text.tsx b/apps/ui/lib/components/Typography/Text.tsx
index fab6b84..e9943d4 100644
--- a/apps/ui/lib/components/Typography/Text.tsx
+++ b/apps/ui/lib/components/Typography/Text.tsx
@@ -1,44 +1,40 @@
 import React from 'react';
 import { VARIANT_MAPPINGS } from './constants';
 import { Slot } from './Slot';
-import style from './text.module.css';
 import { cn } from '@utils/utils';
 export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
-  variant?: keyof typeof VARIANT_MAPPINGS;
-  alignment?: 'left' | 'right' | 'center' | 'justify';
-  maxLines?: number;
-  asChild?: boolean;
-  children: React.ReactNode;
+    variant?: keyof typeof VARIANT_MAPPINGS;
+    alignment?: 'left' | 'right' | 'center' | 'justify';
+    maxLines?: number;
+    asChild?: boolean;
+    children: React.ReactNode;
 }
 
 export const Text: React.FC<TextProps> = ({
-  variant,
-  alignment,
-  maxLines,
-  asChild = false,
-  children,
-  ...props
+    variant,
+    alignment,
+    maxLines,
+    asChild = false,
+    children,
+    ...props
 }) => {
-  const textStyle = {
-    textAlign: alignment || 'center',
-    margin: '0 0 0 0',
-    padding: '0 0 0 0',
-    display: asChild ? 'inline-block' : 'block',
-    textOverflow: 'ellipsis',
-    overflow: 'hidden',
-    WebkitLineClamp: maxLines || 'inherit',
-  };
+    const textStyle = {
+        textAlign: alignment || 'center',
+        display: asChild ? 'inline-block' : 'block',
+        textOverflow: 'ellipsis',
+        overflow: 'hidden',
+        WebkitLineClamp: maxLines || 'inherit',
+    };
 
-  const Comp = asChild ? Slot : 'p';
-  const classNames = VARIANT_MAPPINGS[variant as keyof typeof VARIANT_MAPPINGS];
-  const mergedClasses = cn(style.text, classNames?.slice(1), props.className);
+    const Comp = asChild ? Slot : 'p';
+    const classNames = VARIANT_MAPPINGS[variant as keyof typeof VARIANT_MAPPINGS];
 
-  return (
-    <Comp
-      {...props}
-      className={cn('grv-text-accent', mergedClasses, 'ui')}
-      style={textStyle}
-      children={children}
-    />
-  );
+    return (
+        <Comp
+            {...props}
+            className={cn(classNames?.slice(1), props.className, 'ui')}
+            style={textStyle}
+            children={children}
+        />
+    );
 };
diff --git a/apps/ui/lib/components/Typography/Typography.stories.tsx b/apps/ui/lib/components/Typography/Typography.stories.tsx
index 2a6688a..aeaa662 100644
--- a/apps/ui/lib/components/Typography/Typography.stories.tsx
+++ b/apps/ui/lib/components/Typography/Typography.stories.tsx
@@ -213,7 +213,7 @@ export const withTailwind = () => {
 export const withTailwindAndVariant = () => {
     return (
         <div style={{ marginBottom: '20px' }}>
-            <Text variant="heading-1" className="text-error-700">
+            <Text variant="heading-1" className="grv-text-error-700">
                 with tailwind classes and variant
             </Text>
         </div>
diff --git a/apps/ui/tailwind.config.ts b/apps/ui/tailwind.config.ts
index 53c64cb..e5e28b5 100644
--- a/apps/ui/tailwind.config.ts
+++ b/apps/ui/tailwind.config.ts
@@ -1,78 +1,86 @@
 import plugin from 'tailwindcss/plugin';
 import type { Config } from 'tailwindcss';
 import {
-  scopedPreflightStyles,
-  isolateInsideOfContainer,
+    scopedPreflightStyles,
+    isolateInsideOfContainer,
 } from 'tailwindcss-scoped-preflight';
 import { customTypographyClasses, groovyFontFamily } from '@groovy-box/tokens';
 
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  prefix: 'grv-',
-  important: true,
-  darkMode: ['class', '[data-mode="dark"]'],
-  content: [
-    './lib/**/*.{html,ts,tsx,js,jsx}',
-    './stories/**/*.{ts,tsx,js,jsx}',
-  ],
-  theme: {
-    extend: {
-      fontFamily: groovyFontFamily,
+    prefix: 'grv-',
+    important: true,
+    darkMode: ['class', '[data-mode="dark"]'],
+    content: [
+        './lib/**/*.{html,ts,tsx,js,jsx}',
+        './stories/**/*.{ts,tsx,js,jsx}',
+    ],
+    theme: {
+        extend: {
+            fontFamily: groovyFontFamily,
+        },
+        colors: {
+            primary: {
+                100: 'rgb(var(--primary-100))',
+                300: 'rgb(var(--primary-300))',
+                500: 'rgb(var(--primary-500))',
+                700: 'rgb(var(--primary-700))',
+                900: 'rgb(var(--primary-900))',
+            },
+            secondary: {
+                100: 'rgb(var(--secondary-100))',
+                300: 'rgb(var(--secondary-300))',
+                500: 'rgb(var(--secondary-500))',
+                700: 'rgb(var(--secondary-700))',
+                900: 'rgb(var(--secondary-900))',
+            },
+            success: {
+                100: 'rgb(var(--success-100))',
+                300: 'rgb(var(--success-300))',
+                500: 'rgb(var(--success-500))',
+                700: 'rgb(var(--success-700))',
+                900: 'rgb(var(--success-900))',
+            },
+            error: {
+                100: 'rgb(var(--error-100))',
+                300: 'rgb(var(--error-300))',
+                500: 'rgb(var(--error-500))',
+                700: 'rgb(var(--error-700))',
+                900: 'rgb(var(--error-900))',
+            },
+            warning: {
+                100: 'rgb(var(--warning-100))',
+                300: 'rgb(var(--warning-300))',
+                500: 'rgb(var(--warning-500))',
+                700: 'rgb(var(--warning-700))',
+                900: 'rgb(var(--warning-900))',
+            },
+            text: {
+                primary: 'rgb(var(--text-primary))',
+                secondary: 'rgb(var(--text-secondary))',
+            },
+            accent: 'rgb(var(--accent))',
+            backgroundPaper: 'rgb(var(--background-paper))',
+            bgopacity: 'rgb(var( --background-opacity))',
+        },
+        fontWeight: {
+            thin: '100',
+            light: '300',
+            regular: '400',
+            medium: '500',
+            semibold: '600',
+            bold: '700',
+        },
     },
-    colors: {
-      primary: {
-        100: 'rgb(var(--primary-100))',
-        300: 'rgb(var(--primary-300))',
-        500: 'rgb(var(--primary-500))',
-        700: 'rgb(var(--primary-700))',
-        900: 'rgb(var(--primary-900))',
-      },
-      secondary: {
-        100: 'rgb(var(--secondary-100))',
-        300: 'rgb(var(--secondary-300))',
-        500: 'rgb(var(--secondary-500))',
-        700: 'rgb(var(--secondary-700))',
-        900: 'rgb(var(--secondary-900))',
-      },
-      success: {
-        100: 'rgb(var(--success-100))',
-        300: 'rgb(var(--success-300))',
-        500: 'rgb(var(--success-500))',
-        700: 'rgb(var(--success-700))',
-        900: 'rgb(var(--success-900))',
-      },
-      error: {
-        100: 'rgb(var(--error-100))',
-        300: 'rgb(var(--error-300))',
-        500: 'rgb(var(--error-500))',
-        700: 'rgb(var(--error-700))',
-        900: 'rgb(var(--error-900))',
-      },
-      warning: {
-        100: 'rgb(var(--warning-100))',
-        300: 'rgb(var(--warning-300))',
-        500: 'rgb(var(--warning-500))',
-        700: 'rgb(var(--warning-700))',
-        900: 'rgb(var(--warning-900))',
-      },
-      text: {
-        primary: 'rgb(var(--text-primary))',
-        secondary: 'rgb(var(--text-secondary))',
-      },
-      accent: 'rgb(var(--accent))',
-      backgroundPaper: 'rgb(var(--background-paper))',
-      bgopacity: 'rgb(var( --background-opacity))',
+    plugins: [
+        plugin(({ addUtilities }) => {
+            addUtilities(customTypographyClasses, { respectPrefix: false });
+        }),
+        scopedPreflightStyles({
+            isolationStrategy: isolateInsideOfContainer('.ui', {}),
+        }),
+    ],
+    corePlugins: {
+        preflight: false, // <== disable this!
     },
-  },
-  plugins: [
-    plugin(({ addUtilities }) => {
-      addUtilities(customTypographyClasses, { respectPrefix: false });
-    }),
-    scopedPreflightStyles({
-      isolationStrategy: isolateInsideOfContainer('.ui', {}),
-    }),
-  ],
-  corePlugins: {
-    preflight: false, // <== disable this!
-  },
 } satisfies Config;
diff --git a/apps/ui/utils/utils.ts b/apps/ui/utils/utils.ts
index 1a860ee..c1d3862 100644
--- a/apps/ui/utils/utils.ts
+++ b/apps/ui/utils/utils.ts
@@ -2,5 +2,5 @@ import { type ClassValue, clsx } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
+    return twMerge(clsx(inputs))
 }
\ No newline at end of file

From 3cf0fdb5bdf6a5c5ac2ec7d335e4e4dda5e13008 Mon Sep 17 00:00:00 2001
From: SySagar <sysagar07@gmail.com>
Date: Sun, 12 Jan 2025 21:18:26 +0530
Subject: [PATCH 3/6] feat: modal component

---
 .../Accordion/Accordion.stories.tsx           |  68 +--
 .../lib/components/Avatar/Avatar.stories.tsx  | 134 +++---
 .../lib/components/Button/Button.stories.tsx  | 101 ++--
 apps/ui/lib/components/Button/index.tsx       |  78 ++--
 apps/ui/lib/components/Chip/Chip.stories.tsx  | 126 ++---
 .../ui/lib/components/Label/Label.stories.tsx |  34 +-
 .../ui/lib/components/Modal/Modal.stories.tsx | 149 ++++++
 apps/ui/lib/components/Modal/Modal.tsx        | 168 +++++++
 apps/ui/lib/components/Modal/index.tsx        |   1 +
 .../Navigation-menu/Navigation.stories.tsx    | 198 ++++----
 .../components/Progress/Progress.stories.tsx  |  42 +-
 .../lib/components/Select/Select.stories.tsx  | 117 ++---
 .../lib/components/Switch/Switch.stories.tsx  |  32 +-
 .../Textfield/Textfield.stories.tsx           | 280 +++++------
 .../ui/lib/components/Toast/Toast.stories.tsx | 150 +++---
 apps/ui/lib/components/Typography/Text.tsx    |  56 +--
 .../Typography/Typography.stories.tsx         | 442 +++++++++---------
 apps/ui/lib/index.tsx                         |   3 +-
 apps/ui/lib/tailwind.css                      |   6 +-
 apps/ui/package.json                          |   3 +-
 apps/ui/tailwind.config.ts                    |  21 +
 package-lock.json                             | 304 ++++++++++++
 22 files changed, 1582 insertions(+), 931 deletions(-)
 create mode 100644 apps/ui/lib/components/Modal/Modal.stories.tsx
 create mode 100644 apps/ui/lib/components/Modal/Modal.tsx
 create mode 100644 apps/ui/lib/components/Modal/index.tsx

diff --git a/apps/ui/lib/components/Accordion/Accordion.stories.tsx b/apps/ui/lib/components/Accordion/Accordion.stories.tsx
index 3f752c5..bdf9591 100644
--- a/apps/ui/lib/components/Accordion/Accordion.stories.tsx
+++ b/apps/ui/lib/components/Accordion/Accordion.stories.tsx
@@ -1,48 +1,48 @@
 import { withGlobalStyles } from '../../../.storybook/decorator';
 
 import {
-    Accordion,
-    AccordionContent,
-    AccordionItem,
-    AccordionTrigger,
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
 } from '../..';
 
 const Test = () => (
-    <div className="grv-w-80">
-        <Accordion type="single" defaultValue="item-1" collapsible>
-            <AccordionItem value="item-1">
-                <AccordionTrigger>Accordion 1</AccordionTrigger>
-                <AccordionContent>Content 1</AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="item-2">
-                <AccordionTrigger>Accordion 2</AccordionTrigger>
-                <AccordionContent>Content 2</AccordionContent>
-            </AccordionItem>
-            <AccordionItem value="item-3">
-                <AccordionTrigger>Accordion 3</AccordionTrigger>
-                <AccordionContent>Content 3</AccordionContent>
-            </AccordionItem>
-        </Accordion>
-    </div>
+  <div className="grv-w-80">
+    <Accordion type="single" defaultValue="item-1" collapsible>
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Accordion 1</AccordionTrigger>
+        <AccordionContent>Content 1</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Accordion 2</AccordionTrigger>
+        <AccordionContent>Content 2</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Accordion 3</AccordionTrigger>
+        <AccordionContent>Content 3</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  </div>
 );
 
 const withTailwind = () => {
-    return (
-        <div className="grv-w-80">
-            <Accordion type="single" defaultValue="item-1" collapsible>
-                <AccordionItem value="item-1" className='grv-border-b-0'>
-                    <AccordionTrigger>Accordion 1</AccordionTrigger>
-                    <AccordionContent>Content 1</AccordionContent>
-                </AccordionItem>
-            </Accordion>
-        </div>
-    );
-}
+  return (
+    <div className="grv-w-80">
+      <Accordion type="single" defaultValue="item-1" collapsible>
+        <AccordionItem value="item-1" className="grv-border-b-0">
+          <AccordionTrigger>Accordion 1</AccordionTrigger>
+          <AccordionContent>Content 1</AccordionContent>
+        </AccordionItem>
+      </Accordion>
+    </div>
+  );
+};
 
 export default {
-    title: 'components/Accordion',
-    component: Test,
-    decorators: [withGlobalStyles],
+  title: 'components/Accordion',
+  component: Test,
+  decorators: [withGlobalStyles],
 };
 
 export const Default = () => <Test />;
diff --git a/apps/ui/lib/components/Avatar/Avatar.stories.tsx b/apps/ui/lib/components/Avatar/Avatar.stories.tsx
index 9a26cf4..e779dfa 100644
--- a/apps/ui/lib/components/Avatar/Avatar.stories.tsx
+++ b/apps/ui/lib/components/Avatar/Avatar.stories.tsx
@@ -3,92 +3,92 @@ import { Avatar, AvatarImage, AvatarContent, AvatarFallback } from './Avatar';
 import { Search, File } from 'lucide-react';
 
 export default {
-    title: 'Components/Avatar',
-    component: Avatar,
-    subcomponents: { AvatarImage, AvatarContent, AvatarFallback },
-    argTypes: {
-        className: { control: 'text' },
-    },
+  title: 'Components/Avatar',
+  component: Avatar,
+  subcomponents: { AvatarImage, AvatarContent, AvatarFallback },
+  argTypes: {
+    className: { control: 'text' },
+  },
 };
 
 const Template: Story = (args) => (
-    <Avatar {...args}>
-        <AvatarImage
-            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-            alt="Avatar Image"
-        />
-        <AvatarFallback>AB</AvatarFallback>
-    </Avatar>
+  <Avatar {...args}>
+    <AvatarImage
+      src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+      alt="Avatar Image"
+    />
+    <AvatarFallback>AB</AvatarFallback>
+  </Avatar>
 );
 
 export const Default = Template.bind({});
 Default.args = {
-    className: '',
+  className: '',
 };
 
 export const WithContentImage: Story = (args) => (
-    <Avatar {...args}>
-        <AvatarContent className="grv-bg-blue-500">
-            <img
-                src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                alt="Avatar Content Image"
-                className="grv-h-full grv-w-full grv-object-cover"
-            />
-        </AvatarContent>
-    </Avatar>
+  <Avatar {...args}>
+    <AvatarContent className="grv-bg-blue-500">
+      <img
+        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Avatar Content Image"
+        className="grv-h-full grv-w-full grv-object-cover"
+      />
+    </AvatarContent>
+  </Avatar>
 );
 
 export const WithContentIcon: Story = (args) => (
-    <div className="grv-flex grv-flex-row grv-w-full grv-item-center grv-justify-center grv-gap-16 grv-p-4">
-        <Avatar {...args}>
-            <AvatarContent className="grv-flex grv-items-center grv-justify-center">
-                <Search size={24} />
-            </AvatarContent>
-        </Avatar>
-        <Avatar {...args}>
-            <AvatarContent className="grv-bg-secondary-300 grv-flex grv-items-center grv-justify-center">
-                <File size={24} />
-            </AvatarContent>
-        </Avatar>
-    </div>
+  <div className="grv-flex grv-flex-row grv-w-full grv-item-center grv-justify-center grv-gap-16 grv-p-4">
+    <Avatar {...args}>
+      <AvatarContent className="grv-flex grv-items-center grv-justify-center">
+        <Search size={24} />
+      </AvatarContent>
+    </Avatar>
+    <Avatar {...args}>
+      <AvatarContent className="grv-bg-secondary-300 grv-flex grv-items-center grv-justify-center">
+        <File size={24} />
+      </AvatarContent>
+    </Avatar>
+  </div>
 );
 
 export const WithFallback: Story = () => (
-    <Avatar>
-        <AvatarFallback>AB</AvatarFallback>
-    </Avatar>
+  <Avatar>
+    <AvatarFallback>AB</AvatarFallback>
+  </Avatar>
 );
 
 export const allSizes: Story = () => (
-    <div className="grv-flex grv-flex-row grv-w-full grv-item-center grv-justify-center grv-gap-16 grv-p-4">
-        <Avatar size="small">
-            <AvatarContent className="grv-bg-blue-500">
-                <img
-                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                    alt="Avatar Content Image"
-                    className="grv-h-full grv-w-full grv-object-cover"
-                />
-            </AvatarContent>
-        </Avatar>
+  <div className="grv-flex grv-flex-row grv-w-full grv-item-center grv-justify-center grv-gap-16 grv-p-4">
+    <Avatar size="small">
+      <AvatarContent className="grv-bg-blue-500">
+        <img
+          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Avatar Content Image"
+          className="grv-h-full grv-w-full grv-object-cover"
+        />
+      </AvatarContent>
+    </Avatar>
 
-        <Avatar size="medium">
-            <AvatarContent className="grv-bg-blue-500">
-                <img
-                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                    alt="Avatar Content Image"
-                    className="grv-h-full grv-w-full grv-object-cover"
-                />
-            </AvatarContent>
-        </Avatar>
+    <Avatar size="medium">
+      <AvatarContent className="grv-bg-blue-500">
+        <img
+          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Avatar Content Image"
+          className="grv-h-full grv-w-full grv-object-cover"
+        />
+      </AvatarContent>
+    </Avatar>
 
-        <Avatar size="large">
-            <AvatarContent className="bg-blue-500">
-                <img
-                    src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                    alt="Avatar Content Image"
-                    className="grv-h-full grv-w-full grv-object-cover"
-                />
-            </AvatarContent>
-        </Avatar>
-    </div>
+    <Avatar size="large">
+      <AvatarContent className="bg-blue-500">
+        <img
+          src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+          alt="Avatar Content Image"
+          className="grv-h-full grv-w-full grv-object-cover"
+        />
+      </AvatarContent>
+    </Avatar>
+  </div>
 );
diff --git a/apps/ui/lib/components/Button/Button.stories.tsx b/apps/ui/lib/components/Button/Button.stories.tsx
index 57d0368..0681225 100644
--- a/apps/ui/lib/components/Button/Button.stories.tsx
+++ b/apps/ui/lib/components/Button/Button.stories.tsx
@@ -2,67 +2,70 @@ import { Button } from './index';
 import { withGlobalStyles } from '../../../.storybook/decorator';
 
 export default {
-    title: 'Components/Button',
-    component: Button,
-    decorators: [withGlobalStyles],
+  title: 'Components/Button',
+  component: Button,
+  decorators: [withGlobalStyles],
 };
 
 export const Variants = () => (
-    <div
-        style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: '1rem',
-        }}
-    >
-        <div>
-            <Button variant={'default'}>Default</Button>
-        </div>
-        <div>
-            <Button variant={'secondary'}>secondary</Button>
-        </div>
-        <div>
-            <Button variant={'destructive'}>destructive</Button>
-        </div>
-        <div>
-            <Button variant={'outline'}>Outline</Button>
-        </div>
-        <div>
-            <Button variant={'link'}>Link</Button>
-        </div>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '1rem',
+    }}
+  >
+    <div>
+      <Button variant={'default'}>Default</Button>
     </div>
+    <div>
+      <Button variant={'secondary'}>secondary</Button>
+    </div>
+    <div>
+      <Button variant={'destructive'}>destructive</Button>
+    </div>
+    <div>
+      <Button variant={'outline'}>Outline</Button>
+    </div>
+    <div>
+      <Button variant={'link'}>Link</Button>
+    </div>
+  </div>
 );
 
 export const tailwindButton = () => {
-    return <Button className="grv-bg-warning-700 grv-text-text-secondary hover:grv-bg-warning-500 grv-font-bold">Hello</Button>;
+  return (
+    <Button className="grv-bg-warning-700 grv-text-text-secondary hover:grv-bg-warning-500 grv-font-bold">
+      Hello
+    </Button>
+  );
 };
 
-
 export const Sizes = () => (
-    <div
-        style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: '1rem',
-        }}
-    >
-        <div>
-            <Button size="sm">Small</Button>
-        </div>
-        <div>
-            <Button size="default">Medium</Button>
-        </div>
-        <div>
-            <Button size="lg">Large</Button>
-        </div>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '1rem',
+    }}
+  >
+    <div>
+      <Button size="sm">Small</Button>
+    </div>
+    <div>
+      <Button size="default">Medium</Button>
+    </div>
+    <div>
+      <Button size="lg">Large</Button>
     </div>
+  </div>
 );
 
 Sizes.args = {
-    variant: 'filled',
-    color: 'primary',
+  variant: 'filled',
+  color: 'primary',
 };
diff --git a/apps/ui/lib/components/Button/index.tsx b/apps/ui/lib/components/Button/index.tsx
index 232d521..4ffb8bc 100644
--- a/apps/ui/lib/components/Button/index.tsx
+++ b/apps/ui/lib/components/Button/index.tsx
@@ -5,53 +5,53 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@utils/utils';
 
 const buttonVariants = cva(
-    'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
-    {
-        variants: {
-            variant: {
-                default:
-                    'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
-                destructive:
-                    'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
-                outline:
-                    ' grv-border-none hover:grv-bg-bgopacity grv-text-accent  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
-                secondary:
-                    'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
-                link: 'grv-text-accent grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer p-0 m-0',
-            },
-            size: {
-                default: 'grv-h-10 grv-px-4 grv-py-2',
-                sm: 'grv-h-9 grv-rounded-md grv-px-3',
-                lg: 'grv-h-11 grv-rounded-md grv-px-8',
-                icon: 'grv-h-10 grv-w-10',
-            },
-        },
-        defaultVariants: {
-            variant: 'default',
-            size: 'default',
-        },
-    }
+  'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
+  {
+    variants: {
+      variant: {
+        default:
+          'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
+        destructive:
+          'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
+        outline:
+          ' grv-border-none hover:grv-bg-bgopacity grv-text-accent  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
+        secondary:
+          'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
+        link: 'grv-text-accent grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer p-0 m-0',
+      },
+      size: {
+        default: 'grv-h-10 grv-px-4 grv-py-2',
+        sm: 'grv-h-9 grv-rounded-md grv-px-3',
+        lg: 'grv-h-11 grv-rounded-md grv-px-8',
+        icon: 'grv-h-10 grv-w-10',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
 );
 
 export interface ButtonProps
-    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-    asChild?: boolean;
+  asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-    ({ className, variant, size, asChild = false, ...props }, ref) => {
-        const Comp = asChild ? Slot : 'button';
+  ({ className, variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button';
 
-        console.log('cn', cn(buttonVariants({ variant, size, className })));
-        return (
-            <Comp
-                className={cn(buttonVariants({ variant, size, className }))}
-                ref={ref}
-                {...props}
-            />
-        );
-    }
+    console.log('cn', cn(buttonVariants({ variant, size, className })));
+    return (
+      <Comp
+        className={cn(buttonVariants({ variant, size, className }))}
+        ref={ref}
+        {...props}
+      />
+    );
+  }
 );
 Button.displayName = 'Button';
 
diff --git a/apps/ui/lib/components/Chip/Chip.stories.tsx b/apps/ui/lib/components/Chip/Chip.stories.tsx
index 8763e7b..2d2adce 100644
--- a/apps/ui/lib/components/Chip/Chip.stories.tsx
+++ b/apps/ui/lib/components/Chip/Chip.stories.tsx
@@ -6,83 +6,83 @@ import { Avatar, AvatarImage, AvatarFallback } from '../..';
 import { Star, Mail } from 'lucide-react';
 
 const ChipExample = (props: ChipProps) => (
-    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-        <Chip {...props}>Default</Chip>
-    </div>
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip {...props}>Default</Chip>
+  </div>
 );
 
 const ChipVariants = () => (
-    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-        <Chip variant="filled">Filled</Chip>
-        <Chip variant="outlined">Outlined</Chip>
-    </div>
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip variant="filled">Filled</Chip>
+    <Chip variant="outlined">Outlined</Chip>
+  </div>
 );
 
 const ChipSizes = () => (
-    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-        <Chip size="sm">Small</Chip>
-        <Chip size="md">Medium</Chip>
-        <Chip size="lg">Large</Chip>
-    </div>
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip size="sm">Small</Chip>
+    <Chip size="md">Medium</Chip>
+    <Chip size="lg">Large</Chip>
+  </div>
 );
 
 const ChipInteractions = () => (
-    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-        <Chip clickable onClick={() => alert('Clicked!')}>
-            Clickable
-        </Chip>
-        <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
-        <Chip href="https://ui.soumyasagar.in" target="_blank">
-            Link
-        </Chip>
-    </div>
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip clickable onClick={() => alert('Clicked!')}>
+      Clickable
+    </Chip>
+    <Chip onDelete={() => alert('Delete clicked!')}>Deletable</Chip>
+    <Chip href="https://ui.soumyasagar.in" target="_blank">
+      Link
+    </Chip>
+  </div>
 );
 
 const ChipWithIcons = () => (
-    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-        <Chip
-            beforeChildren={
-                <Avatar>
-                    <AvatarImage
-                        src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
-                        alt="Avatar Image"
-                    />
-                    <AvatarFallback>AB</AvatarFallback>
-                </Avatar>
-            }
-        >
-            User Chip
-        </Chip>
-        <Chip
-            variant="outlined"
-            afterChildren={<Star className="grv-h-4 grv-w-4" />}
-        >
-            Starred
-        </Chip>
-        <Chip
-            beforeChildren={<Mail className="grv-h-4 grv-w-4" />}
-            afterChildren={
-                <span className="grv-bg-primary-foreground grv-text-primary grv-rounded-full grv-px-2 grv-text-sm">
-                    99+
-                </span>
-            }
-        >
-            Inbox
-        </Chip>
-    </div>
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip
+      beforeChildren={
+        <Avatar>
+          <AvatarImage
+            src="https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=1887&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+            alt="Avatar Image"
+          />
+          <AvatarFallback>AB</AvatarFallback>
+        </Avatar>
+      }
+    >
+      User Chip
+    </Chip>
+    <Chip
+      variant="outlined"
+      afterChildren={<Star className="grv-h-4 grv-w-4" />}
+    >
+      Starred
+    </Chip>
+    <Chip
+      beforeChildren={<Mail className="grv-h-4 grv-w-4" />}
+      afterChildren={
+        <span className="grv-bg-primary-foreground grv-text-primary grv-rounded-full grv-px-2 grv-text-sm">
+          99+
+        </span>
+      }
+    >
+      Inbox
+    </Chip>
+  </div>
 );
 
 export default {
-    title: 'components/Chip',
-    component: ChipExample,
-    decorators: [withGlobalStyles],
+  title: 'components/Chip',
+  component: ChipExample,
+  decorators: [withGlobalStyles],
 };
 
 export const Default: Story<ChipProps> = (args) => <ChipExample {...args} />;
 Default.args = {
-    children: 'Default Chip',
-    variant: 'filled',
-    size: 'md',
+  children: 'Default Chip',
+  variant: 'filled',
+  size: 'md',
 };
 
 export const Variants = () => <ChipVariants />;
@@ -91,9 +91,9 @@ export const Interactions = () => <ChipInteractions />;
 export const WithIcons = () => <ChipWithIcons />;
 
 export const CustomStyles = () => (
-    <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
-        <Chip className="grv-bg-blue-500 grv-text-white hover:grv-bg-blue-600">
-            Custom Styled Chip
-        </Chip>
-    </div>
+  <div className="grv-flex grv-flex-wrap grv-gap-4 grv-p-4">
+    <Chip className="grv-bg-blue-500 grv-text-white hover:grv-bg-blue-600">
+      Custom Styled Chip
+    </Chip>
+  </div>
 );
diff --git a/apps/ui/lib/components/Label/Label.stories.tsx b/apps/ui/lib/components/Label/Label.stories.tsx
index f12764c..b97d93c 100644
--- a/apps/ui/lib/components/Label/Label.stories.tsx
+++ b/apps/ui/lib/components/Label/Label.stories.tsx
@@ -5,27 +5,27 @@ import { withGlobalStyles } from '../../../.storybook/decorator';
 type LabelComponentStory = StoryObj<typeof Label>;
 
 export default {
-    title: 'Components/Label',
-    component: Label,
-    tags: ['autodocs'],
-    decorators: [withGlobalStyles],
-    argTypes: {
-        htmlFor: { control: 'text' },
-        children: { control: 'text' },
-    },
+  title: 'Components/Label',
+  component: Label,
+  tags: ['autodocs'],
+  decorators: [withGlobalStyles],
+  argTypes: {
+    htmlFor: { control: 'text' },
+    children: { control: 'text' },
+  },
 };
 
 export const BasicLabelComponent: LabelComponentStory = {
-    args: {
-        htmlFor: 'firstName',
-        children: 'First Name:',
-    },
+  args: {
+    htmlFor: 'firstName',
+    children: 'First Name:',
+  },
 };
 
 export const LabelWithTailwind = () => {
-    return (
-        <Label htmlFor="firstName" className="text-error-900">
-            First Name:
-        </Label>
-    );
+  return (
+    <Label htmlFor="firstName" className="text-error-900">
+      First Name:
+    </Label>
+  );
 };
diff --git a/apps/ui/lib/components/Modal/Modal.stories.tsx b/apps/ui/lib/components/Modal/Modal.stories.tsx
new file mode 100644
index 0000000..0bf282d
--- /dev/null
+++ b/apps/ui/lib/components/Modal/Modal.stories.tsx
@@ -0,0 +1,149 @@
+import {
+  Dialog,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+  DialogClose,
+} from './Modal';
+import { Text } from '../Typography';
+import { Button } from '../Button';
+import { Label } from '../Label';
+import { TextField } from '../Textfield';
+import { withGlobalStyles } from '../../../.storybook/decorator';
+
+export default {
+  title: 'Components/Modal',
+  component: Dialog,
+  decorators: [withGlobalStyles],
+};
+
+const BasicDialog = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button className="grv-btn grv-btn-primary">Open Dialog</Button>
+    </DialogTrigger>
+
+    <DialogContent className="grv-p-4">
+      <DialogClose />
+      <DialogHeader>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogDescription>
+          This is a description for the dialog content.
+        </DialogDescription>
+      </DialogHeader>
+
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
+        risus non rikus.
+      </Text>
+    </DialogContent>
+  </Dialog>
+);
+
+export const Basic = () => <BasicDialog />;
+
+const ModalWithFooter = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button className="grv-btn grv-btn-primary">Open Dialog</Button>
+    </DialogTrigger>
+
+    <DialogContent className="grv-p-4">
+      <DialogClose />
+      <DialogHeader>
+        <DialogTitle>Dialog Title</DialogTitle>
+        <DialogDescription>
+          This is a description for the dialog content.
+        </DialogDescription>
+      </DialogHeader>
+
+      <Text>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam pulvinar
+        risus non rikus.
+      </Text>
+
+      <DialogFooter>
+        <Button className="grv-btn grv-btn-primary">Save</Button>
+      </DialogFooter>
+    </DialogContent>
+  </Dialog>
+);
+
+export const WithFooter = () => <ModalWithFooter />;
+
+const ModalWithImage = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button className="grv-btn grv-btn-primary">Open Greeting Card</Button>
+    </DialogTrigger>
+
+    <DialogContent className="grv-p-4">
+      <DialogHeader>
+        <DialogTitle>Hello 2025</DialogTitle>
+      </DialogHeader>
+      <DialogClose />
+
+      <img
+        className="grv-w-full grv-h-64 grv-object-cover grv-rounded-md"
+        src="https://images.unsplash.com/photo-1709884732297-4b3c1a3f725b?q=80&w=2128&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
+        alt="Random Image"
+      />
+
+      <Text>
+        Wish you a very happy new year. May this year bring you joy and
+        happiness.
+      </Text>
+    </DialogContent>
+  </Dialog>
+);
+
+export const WithImage = () => <ModalWithImage />;
+
+const LoginModal = () => (
+  <Dialog>
+    <DialogTrigger asChild>
+      <Button variant="default">Login</Button>
+    </DialogTrigger>
+    <DialogContent className="sm:max-w-[425px] grv-flex">
+      <DialogClose className="grv-bg-error-300" />
+      <DialogHeader>
+        <DialogTitle>Login</DialogTitle>
+        <DialogDescription>
+          Please enter your credentials to login.
+        </DialogDescription>
+      </DialogHeader>
+      <form className="grid gap-4 py-4">
+        <div className="grid grid-cols-4 items-center gap-4">
+          <Label htmlFor="email" className="text-right">
+            Email
+          </Label>
+          <TextField
+            variant="outlined"
+            id="email"
+            type="email"
+            className="col-span-3"
+          />
+        </div>
+        <div className="grid grid-cols-4 items-center gap-4">
+          <Label htmlFor="password" className="text-right">
+            Password
+          </Label>
+          <TextField
+            variant="outlined"
+            id="password"
+            type="password"
+            className="col-span-3"
+          />
+        </div>
+        <Button type="submit" className="mt-4">
+          Login
+        </Button>
+      </form>
+    </DialogContent>
+  </Dialog>
+);
+
+export const Login = () => <LoginModal />;
diff --git a/apps/ui/lib/components/Modal/Modal.tsx b/apps/ui/lib/components/Modal/Modal.tsx
new file mode 100644
index 0000000..9a1393d
--- /dev/null
+++ b/apps/ui/lib/components/Modal/Modal.tsx
@@ -0,0 +1,168 @@
+import * as React from 'react';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { motion, AnimatePresence } from 'framer-motion';
+import { X } from 'lucide-react';
+
+import { cn } from '@utils/utils';
+
+const Dialog = DialogPrimitive.Root;
+
+const DialogTrigger = DialogPrimitive.Trigger;
+
+const DialogPortal = DialogPrimitive.Portal;
+
+const DialogClose = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>
+>(({ className }, ref) => (
+  <DialogPrimitive.Close
+    ref={ref}
+    className={cn(
+      'grv-absolute grv-right-4 grv-top-4 grv-rounded-sm grv-border-none grv-bg-none disabled:grv-pointer-events-none',
+      className
+    )}
+  >
+    <motion.div whileHover={{ scale: 1.1 }} whileTap={{ scale: 0.9 }}>
+      <X className="grv-h-4 grv-w-4 grv-bg-none" />
+    </motion.div>
+  </DialogPrimitive.Close>
+));
+
+DialogClose.displayName = DialogPrimitive.Close.displayName;
+
+const DialogOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Overlay
+    ref={ref}
+    className={cn('grv-fixed grv-inset-0 grv-z-50', className)}
+    asChild
+    {...props}
+  >
+    <motion.div
+      initial={{ opacity: 0 }}
+      animate={{ opacity: 1 }}
+      exit={{ opacity: 0 }}
+      transition={{ duration: 0.3, ease: 'easeInOut' }}
+      className="grv-bg-bgOverlay grv-backdrop-blur-sm"
+    />
+  </DialogPrimitive.Overlay>
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+
+const DialogContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <DialogPortal>
+    <AnimatePresence>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        ref={ref}
+        className={cn(
+          'grv-font-sans grv-fixed grv-left-[50%] grv-top-[50%] grv-z-50 grv-grid grv-w-full grv-max-w-lg grv-translate-x-[-50%] grv-translate-y-[-50%] grv-gap-4 grv-border grv-bg-backgroundPaper grv-rounded-md grv-p-6 grv-shadow-lg grv-sm:grv-rounded-lg',
+          className
+        )}
+        asChild
+        {...props}
+      >
+        <motion.div
+          initial={{
+            opacity: 0,
+            scale: 0.9,
+            y: -20,
+            filter: 'blur(10px)',
+          }}
+          animate={{
+            opacity: 1,
+            scale: 1,
+            y: 0,
+            filter: 'blur(0px)',
+          }}
+          exit={{
+            opacity: 0,
+            scale: 1.1,
+            y: 20,
+            filter: 'blur(10px)',
+          }}
+          transition={{
+            duration: 0.2,
+            ease: [0.1, 0, 0.1, 1], //Custom easing for smoother animation
+          }}
+        >
+          {children}
+        </motion.div>
+      </DialogPrimitive.Content>
+    </AnimatePresence>
+  </DialogPortal>
+));
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+
+const DialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'grv-flex grv-flex-col grv-space-y-1.5 grv-text-center grv-sm:grv-text-left',
+      className
+    )}
+    {...props}
+  />
+);
+DialogHeader.displayName = 'DialogHeader';
+
+const DialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    className={cn(
+      'grv-flex grv-flex-col-reverse grv-sm:grv-flex-row grv-sm:grv-justify-end grv-sm:grv-space-x-2',
+      className
+    )}
+    {...props}
+  />
+);
+DialogFooter.displayName = 'DialogFooter';
+
+const DialogTitle = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Title
+    ref={ref}
+    className={cn(
+      'grv-text-lg grv-font-semibold grv-leading-none grv-tracking-tight',
+      className
+    )}
+    {...props}
+  />
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+
+const DialogDescription = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DialogPrimitive.Description
+    ref={ref}
+    className={cn('grv-text-sm grv-text-text-secondary', className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+export {
+  Dialog,
+  DialogPortal,
+  DialogOverlay,
+  DialogClose,
+  DialogTrigger,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};
diff --git a/apps/ui/lib/components/Modal/index.tsx b/apps/ui/lib/components/Modal/index.tsx
new file mode 100644
index 0000000..cb89ee1
--- /dev/null
+++ b/apps/ui/lib/components/Modal/index.tsx
@@ -0,0 +1 @@
+export * from './Modal';
diff --git a/apps/ui/lib/components/Navigation-menu/Navigation.stories.tsx b/apps/ui/lib/components/Navigation-menu/Navigation.stories.tsx
index 0a6b726..071bcea 100644
--- a/apps/ui/lib/components/Navigation-menu/Navigation.stories.tsx
+++ b/apps/ui/lib/components/Navigation-menu/Navigation.stories.tsx
@@ -1,114 +1,114 @@
 import {
-    NavigationMenu,
-    NavigationMenuList,
-    NavigationMenuItem,
-    NavigationMenuTrigger,
-    NavigationMenuContent,
-    NavigationMenuLink,
-    ListItem,
+  NavigationMenu,
+  NavigationMenuList,
+  NavigationMenuItem,
+  NavigationMenuTrigger,
+  NavigationMenuContent,
+  NavigationMenuLink,
+  ListItem,
 } from '../..';
 
 const components: { title: string; href: string; description: string }[] = [
-    {
-        title: 'Alert Dialog',
-        href: '/docs/primitives/alert-dialog',
-        description:
-            'A modal dialog that interrupts the user with important content and expects a response.',
-    },
-    {
-        title: 'Hover Card',
-        href: '/docs/primitives/hover-card',
-        description:
-            'For sighted users to preview content available behind a link.',
-    },
-    {
-        title: 'Progress',
-        href: '/docs/primitives/progress',
-        description:
-            'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
-    },
-    {
-        title: 'Scroll-area',
-        href: '/docs/primitives/scroll-area',
-        description: 'Visually or semantically separates content.',
-    },
-    {
-        title: 'Tabs',
-        href: '/docs/primitives/tabs',
-        description:
-            'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
-    },
-    {
-        title: 'Tooltip',
-        href: '/docs/primitives/tooltip',
-        description:
-            'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
-    },
+  {
+    title: 'Alert Dialog',
+    href: '/docs/primitives/alert-dialog',
+    description:
+      'A modal dialog that interrupts the user with important content and expects a response.',
+  },
+  {
+    title: 'Hover Card',
+    href: '/docs/primitives/hover-card',
+    description:
+      'For sighted users to preview content available behind a link.',
+  },
+  {
+    title: 'Progress',
+    href: '/docs/primitives/progress',
+    description:
+      'Displays an indicator showing the completion progress of a task, typically displayed as a progress bar.',
+  },
+  {
+    title: 'Scroll-area',
+    href: '/docs/primitives/scroll-area',
+    description: 'Visually or semantically separates content.',
+  },
+  {
+    title: 'Tabs',
+    href: '/docs/primitives/tabs',
+    description:
+      'A set of layered sections of content—known as tab panels—that are displayed one at a time.',
+  },
+  {
+    title: 'Tooltip',
+    href: '/docs/primitives/tooltip',
+    description:
+      'A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.',
+  },
 ];
 
 const Test = () => (
-    <NavigationMenu>
-        <NavigationMenuList>
-            <NavigationMenuItem>
-                <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
-                <NavigationMenuContent>
-                    <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
-                        <li className="row-span-3">
-                            <NavigationMenuLink asChild>
-                                <a
-                                    className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
-                                    href="/"
-                                >
-                                    <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
-                                    <p className="text-sm leading-tight text-muted-foreground">
-                                        Beautifully designed components that you can copy and paste
-                                        into your apps. Accessible. Customizable. Open Source.
-                                    </p>
-                                </a>
-                            </NavigationMenuLink>
-                        </li>
-                        <ListItem href="/docs" title="Introduction">
-                            Re-usable components built using Radix UI and Tailwind CSS.
-                        </ListItem>
-                        <ListItem href="/docs/installation" title="Installation">
-                            How to install dependencies and structure your app.
-                        </ListItem>
-                        <ListItem href="/docs/primitives/typography" title="Typography">
-                            Styles for headings, paragraphs, lists...etc
-                        </ListItem>
-                    </ul>
-                </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-                <NavigationMenuTrigger>Components</NavigationMenuTrigger>
-                <NavigationMenuContent>
-                    <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
-                        {components.map((component) => (
-                            <ListItem
-                                key={component.title}
-                                title={component.title}
-                                href={component.href}
-                            >
-                                {component.description}
-                            </ListItem>
-                        ))}
-                    </ul>
-                </NavigationMenuContent>
-            </NavigationMenuItem>
-            <NavigationMenuItem>
-                <a href="/docs">
-                    <NavigationMenuLink>Documentation</NavigationMenuLink>
+  <NavigationMenu>
+    <NavigationMenuList>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Getting started</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul className="grid gap-3 p-6 md:w-[400px] lg:w-[500px] lg:grid-cols-[.75fr_1fr]">
+            <li className="row-span-3">
+              <NavigationMenuLink asChild>
+                <a
+                  className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md"
+                  href="/"
+                >
+                  <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
+                  <p className="text-sm leading-tight text-muted-foreground">
+                    Beautifully designed components that you can copy and paste
+                    into your apps. Accessible. Customizable. Open Source.
+                  </p>
                 </a>
-            </NavigationMenuItem>
-        </NavigationMenuList>
-    </NavigationMenu>
+              </NavigationMenuLink>
+            </li>
+            <ListItem href="/docs" title="Introduction">
+              Re-usable components built using Radix UI and Tailwind CSS.
+            </ListItem>
+            <ListItem href="/docs/installation" title="Installation">
+              How to install dependencies and structure your app.
+            </ListItem>
+            <ListItem href="/docs/primitives/typography" title="Typography">
+              Styles for headings, paragraphs, lists...etc
+            </ListItem>
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <NavigationMenuTrigger>Components</NavigationMenuTrigger>
+        <NavigationMenuContent>
+          <ul className="grid w-[400px] gap-3 p-4 md:w-[500px] md:grid-cols-2 lg:w-[600px] ">
+            {components.map((component) => (
+              <ListItem
+                key={component.title}
+                title={component.title}
+                href={component.href}
+              >
+                {component.description}
+              </ListItem>
+            ))}
+          </ul>
+        </NavigationMenuContent>
+      </NavigationMenuItem>
+      <NavigationMenuItem>
+        <a href="/docs">
+          <NavigationMenuLink>Documentation</NavigationMenuLink>
+        </a>
+      </NavigationMenuItem>
+    </NavigationMenuList>
+  </NavigationMenu>
 );
 
 export default {
-    title: 'components/Navigation',
-    component: Test,
+  title: 'components/Navigation',
+  component: Test,
 };
 
 export const Default = () => {
-    return <Test />;
+  return <Test />;
 };
diff --git a/apps/ui/lib/components/Progress/Progress.stories.tsx b/apps/ui/lib/components/Progress/Progress.stories.tsx
index e55f6c6..75a388a 100644
--- a/apps/ui/lib/components/Progress/Progress.stories.tsx
+++ b/apps/ui/lib/components/Progress/Progress.stories.tsx
@@ -2,31 +2,31 @@ import { withGlobalStyles } from '../../../.storybook/decorator';
 import { Progress, Text } from '../..';
 
 const DefaultTemplate = ({ value = 40 }) => {
-    return (
-        <div
-            style={{
-                display: 'flex',
-                alignItems: 'start',
-                flexDirection: 'column',
-                width: '70%',
-                justifyItems: 'start',
-                gap: '1rem',
-            }}
-        >
-            <Text alignment="left" variant="heading-4">
-                {value}% complete
-            </Text>
-            <Progress value={value} />
-        </div>
-    );
+  return (
+    <div
+      style={{
+        display: 'flex',
+        alignItems: 'start',
+        flexDirection: 'column',
+        width: '70%',
+        justifyItems: 'start',
+        gap: '1rem',
+      }}
+    >
+      <Text alignment="left" variant="heading-4">
+        {value}% complete
+      </Text>
+      <Progress value={value} />
+    </div>
+  );
 };
 
 export default {
-    title: 'components/Progress',
-    component: DefaultTemplate,
-    decorators: [withGlobalStyles],
+  title: 'components/Progress',
+  component: DefaultTemplate,
+  decorators: [withGlobalStyles],
 };
 
 export const Default = () => {
-    return <DefaultTemplate />;
+  return <DefaultTemplate />;
 };
diff --git a/apps/ui/lib/components/Select/Select.stories.tsx b/apps/ui/lib/components/Select/Select.stories.tsx
index 2bbea3d..f3980c6 100644
--- a/apps/ui/lib/components/Select/Select.stories.tsx
+++ b/apps/ui/lib/components/Select/Select.stories.tsx
@@ -1,78 +1,79 @@
 // SelectDemo.stories.js
+import { ChevronDownIcon, ChevronUpIcon } from '@radix-ui/react-icons';
 import {
-    ChevronDownIcon,
-    ChevronUpIcon,
-} from '@radix-ui/react-icons';
-import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectLabel,
-    SelectScrollDownButton,
-    SelectScrollUpButton,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectTrigger,
+  SelectValue,
 } from '../..'; // Import your custom Select component
 import { SelectIcon } from '@radix-ui/react-select';
 
 // type SelectComponentStory = StoryObj<typeof CustomSelect>;
 
 const options = [
-    { value: 'broccoli', label: 'Broccoli' },
-    { value: 'carrot', label: 'Carrot' },
-    { value: 'lettuce', label: 'Lettuce' },
-    { value: 'corn', label: 'Corn' },
-    { value: 'cucumber', label: 'Cucumber' },
-    { value: 'spinach', label: 'Spinach' },
-    { value: 'peas', label: 'Peas' },
-    { value: 'cabbage', label: 'Cabbage' },
+  { value: 'broccoli', label: 'Broccoli' },
+  { value: 'carrot', label: 'Carrot' },
+  { value: 'lettuce', label: 'Lettuce' },
+  { value: 'corn', label: 'Corn' },
+  { value: 'cucumber', label: 'Cucumber' },
+  { value: 'spinach', label: 'Spinach' },
+  { value: 'peas', label: 'Peas' },
+  { value: 'cabbage', label: 'Cabbage' },
 ];
 
 const BasicSelect = () => (
-    <div className="">
-        <Select aria-label="Food">
-            <SelectTrigger
-                style={{
-                    width: '200px',
-                }}
-                className="SelectTrigger flex flex-row items-center justify-center max-w-40"
-                aria-label="Food"
-            >
-                <SelectValue placeholder="Select a Vegetable…" />
-                <SelectIcon className="SelectIcon">
-                    <ChevronDownIcon />
-                </SelectIcon>
-            </SelectTrigger>
+  <div className="">
+    <Select aria-label="Food">
+      <SelectTrigger
+        style={{
+          width: '200px',
+        }}
+        className="SelectTrigger flex flex-row items-center justify-center max-w-40"
+        aria-label="Food"
+      >
+        <SelectValue placeholder="Select a Vegetable…" />
+        <SelectIcon className="SelectIcon">
+          <ChevronDownIcon />
+        </SelectIcon>
+      </SelectTrigger>
 
-            <SelectContent className="SelectContent bg-primary-700 w-24">
-                {/* <Select.Separator /> */}
+      <SelectContent className="SelectContent bg-primary-700 w-24">
+        {/* <Select.Separator /> */}
 
-                <SelectScrollUpButton className="SelectScrollButton">
-                    <ChevronUpIcon />
-                </SelectScrollUpButton>
-                <SelectGroup className="">
-                    <SelectLabel className="bg-secondary-300 text-primaryText">
-                        Vegetables
-                    </SelectLabel>
-                    {options.map((option: any, index: number) => (
-                        <SelectItem key={index} className="text-primaryText" value={option.value}>
-                            {option.label}
-                        </SelectItem>
-                    ))}
-                </SelectGroup>
+        <SelectScrollUpButton className="SelectScrollButton">
+          <ChevronUpIcon />
+        </SelectScrollUpButton>
+        <SelectGroup className="">
+          <SelectLabel className="bg-secondary-300 text-primaryText">
+            Vegetables
+          </SelectLabel>
+          {options.map((option: any, index: number) => (
+            <SelectItem
+              key={index}
+              className="text-primaryText"
+              value={option.value}
+            >
+              {option.label}
+            </SelectItem>
+          ))}
+        </SelectGroup>
 
-                <SelectScrollDownButton className="SelectScrollButton">
-                    <ChevronDownIcon />
-                </SelectScrollDownButton>
-            </SelectContent>
-        </Select>
-    </div>
+        <SelectScrollDownButton className="SelectScrollButton">
+          <ChevronDownIcon />
+        </SelectScrollDownButton>
+      </SelectContent>
+    </Select>
+  </div>
 );
 
 export default {
-    title: 'Components/Select',
-    component: BasicSelect,
+  title: 'Components/Select',
+  component: BasicSelect,
 };
 
 export const Default = () => <BasicSelect />;
diff --git a/apps/ui/lib/components/Switch/Switch.stories.tsx b/apps/ui/lib/components/Switch/Switch.stories.tsx
index 810439b..133ecb9 100644
--- a/apps/ui/lib/components/Switch/Switch.stories.tsx
+++ b/apps/ui/lib/components/Switch/Switch.stories.tsx
@@ -2,26 +2,26 @@ import { withGlobalStyles } from '../../../.storybook/decorator';
 import { Label, Switch } from '../..';
 
 const DefaultTemplate = () => {
-    return (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-            <Label
-                className="Label"
-                htmlFor="airplane-mode"
-                style={{ paddingRight: 15 }}
-            >
-                Airplane mode
-            </Label>
-            <Switch className="SwitchRoot" id="airplane-mode" />
-        </div>
-    );
+  return (
+    <div style={{ display: 'flex', alignItems: 'center' }}>
+      <Label
+        className="Label"
+        htmlFor="airplane-mode"
+        style={{ paddingRight: 15 }}
+      >
+        Airplane mode
+      </Label>
+      <Switch className="SwitchRoot" id="airplane-mode" />
+    </div>
+  );
 };
 
 export default {
-    title: 'components/Switch',
-    component: DefaultTemplate,
-    decorators: [withGlobalStyles],
+  title: 'components/Switch',
+  component: DefaultTemplate,
+  decorators: [withGlobalStyles],
 };
 
 export const Default = () => {
-    return <DefaultTemplate />;
+  return <DefaultTemplate />;
 };
diff --git a/apps/ui/lib/components/Textfield/Textfield.stories.tsx b/apps/ui/lib/components/Textfield/Textfield.stories.tsx
index 595eae6..95f2676 100644
--- a/apps/ui/lib/components/Textfield/Textfield.stories.tsx
+++ b/apps/ui/lib/components/Textfield/Textfield.stories.tsx
@@ -1,175 +1,175 @@
 import { TextField } from '../..';
 
 export default {
-    title: 'Components/TextField',
-    component: TextField,
-    argTypes: {
-        variant: {
-            options: ['filled', 'outlined', 'standard'],
-            control: { type: 'radio' },
-        },
-        size: {
-            options: ['sm', 'md', 'lg'],
-            control: { type: 'radio' },
-        },
-        type: {
-            options: ['password', 'number', 'email', 'text'],
-            control: { type: 'radio' },
-        },
-        color: {
-            options: ['primary', 'secondary'],
-            control: { type: 'radio' },
-        },
-        placeholder: {
-            control: { type: 'text' },
-        },
-        disabled: {
-            control: { type: 'boolean' },
-        },
-        required: {
-            control: { type: 'boolean' },
-        },
-        readOnly: {
-            control: { type: 'boolean' },
-        },
-        fullWidth: {
-            control: { type: 'boolean' },
-        },
-        multiline: {
-            control: { type: 'boolean' },
-        },
-        rows: {
-            control: { type: 'number' },
-        },
-        rowsMax: {
-            control: { type: 'number' },
-        },
-        startIcon: {
-            control: { type: 'text' },
-        },
-        endIcon: {
-            control: { type: 'text' },
-        },
-        onChange: {
-            control: { type: 'text' },
-        },
-        onClick: {
-            control: { type: 'text' },
-        },
-        onFocus: {
-            control: { type: 'text' },
-        },
-        onBlur: {
-            control: { type: 'text' },
-        },
-        onKeyPress: {
-            control: { type: 'text' },
-        },
-        onKeyUp: {
-            control: { type: 'text' },
-        },
-        onKeyDown: {
-            control: { type: 'text' },
-        },
+  title: 'Components/TextField',
+  component: TextField,
+  argTypes: {
+    variant: {
+      options: ['filled', 'outlined', 'standard'],
+      control: { type: 'radio' },
     },
+    size: {
+      options: ['sm', 'md', 'lg'],
+      control: { type: 'radio' },
+    },
+    type: {
+      options: ['password', 'number', 'email', 'text'],
+      control: { type: 'radio' },
+    },
+    color: {
+      options: ['primary', 'secondary'],
+      control: { type: 'radio' },
+    },
+    placeholder: {
+      control: { type: 'text' },
+    },
+    disabled: {
+      control: { type: 'boolean' },
+    },
+    required: {
+      control: { type: 'boolean' },
+    },
+    readOnly: {
+      control: { type: 'boolean' },
+    },
+    fullWidth: {
+      control: { type: 'boolean' },
+    },
+    multiline: {
+      control: { type: 'boolean' },
+    },
+    rows: {
+      control: { type: 'number' },
+    },
+    rowsMax: {
+      control: { type: 'number' },
+    },
+    startIcon: {
+      control: { type: 'text' },
+    },
+    endIcon: {
+      control: { type: 'text' },
+    },
+    onChange: {
+      control: { type: 'text' },
+    },
+    onClick: {
+      control: { type: 'text' },
+    },
+    onFocus: {
+      control: { type: 'text' },
+    },
+    onBlur: {
+      control: { type: 'text' },
+    },
+    onKeyPress: {
+      control: { type: 'text' },
+    },
+    onKeyUp: {
+      control: { type: 'text' },
+    },
+    onKeyDown: {
+      control: { type: 'text' },
+    },
+  },
 };
 
 export const Default = (args: any) => <TextField {...args} />;
 
 Default.args = {
-    label: 'Label',
-    placeholder: 'Placeholder',
-    startIcon: '👋',
-    endIcon: '👋',
+  label: 'Label',
+  placeholder: 'Placeholder',
+  startIcon: '👋',
+  endIcon: '👋',
 };
 
 export const Colors = (args: any) => (
-    <div
-        style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: '1rem',
-        }}
-    >
-        <div>
-            <TextField {...args} color="primary" />
-        </div>
-        <div>
-            <TextField {...args} color="secondary" />
-        </div>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '1rem',
+    }}
+  >
+    <div>
+      <TextField {...args} color="primary" />
+    </div>
+    <div>
+      <TextField {...args} color="secondary" />
     </div>
+  </div>
 );
 
 Colors.args = {
-    variant: 'filled',
+  variant: 'filled',
 };
 
 export const Variants = (args: any) => (
-    <div
-        style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: '1rem',
-        }}
-    >
-        <div>
-            <TextField {...args} variant="outlined" />
-        </div>
-        <div>
-            <TextField {...args} variant="filled" />
-        </div>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '1rem',
+    }}
+  >
+    <div>
+      <TextField {...args} variant="outlined" />
+    </div>
+    <div>
+      <TextField {...args} variant="filled" />
     </div>
+  </div>
 );
 
 Variants.args = {
-    color: 'primary',
+  color: 'primary',
 };
 
 export const Sizes = (args: any) => (
-    <div
-        style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: '1rem',
-        }}
-    >
-        <div>
-            <TextField {...args} size="sm" />
-        </div>
-        <div>
-            <TextField {...args} size="md" />
-        </div>
-        <div>
-            <TextField {...args} size="lg" />
-        </div>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '1rem',
+    }}
+  >
+    <div>
+      <TextField {...args} size="sm" />
     </div>
+    <div>
+      <TextField {...args} size="md" />
+    </div>
+    <div>
+      <TextField {...args} size="lg" />
+    </div>
+  </div>
 );
 
 Sizes.args = {
-    color: 'primary',
+  color: 'primary',
 };
 
 export const Multiline = (args: any) => (
-    <div
-        style={{
-            display: 'flex',
-            flexDirection: 'column',
-            justifyContent: 'center',
-            alignItems: 'center',
-            gap: '1rem',
-        }}
-    >
-        <div>
-            <TextField {...args} multiline rows={4} />
-        </div>
-        <div>
-            <TextField {...args} multiline rows={4} variant="outlined" />
-        </div>
+  <div
+    style={{
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+      gap: '1rem',
+    }}
+  >
+    <div>
+      <TextField {...args} multiline rows={4} />
+    </div>
+    <div>
+      <TextField {...args} multiline rows={4} variant="outlined" />
     </div>
+  </div>
 );
diff --git a/apps/ui/lib/components/Toast/Toast.stories.tsx b/apps/ui/lib/components/Toast/Toast.stories.tsx
index 7c51597..0f9599e 100644
--- a/apps/ui/lib/components/Toast/Toast.stories.tsx
+++ b/apps/ui/lib/components/Toast/Toast.stories.tsx
@@ -2,88 +2,88 @@ import { withGlobalStyles } from '../../../.storybook/decorator';
 import { useToast, Button, Toaster, ToastAction } from '../..';
 
 export const Default = () => {
-    const { toast } = useToast();
-    return (
-        <div
-            style={{
-                display: 'flex',
-                justifyContent: 'center',
-                minHeight: '80vh',
-                alignItems: 'center',
-            }}
-        >
-            <Toaster />
-            <Button
-                onClick={() => {
-                    toast({
-                        title: 'Whats up!.',
-                        description: 'Have a nice day.',
-                    });
-                }}
-            >
-                Show Toast
-            </Button>
-        </div>
-    );
+  const { toast } = useToast();
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        minHeight: '80vh',
+        alignItems: 'center',
+      }}
+    >
+      <Toaster />
+      <Button
+        onClick={() => {
+          toast({
+            title: 'Whats up!.',
+            description: 'Have a nice day.',
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </div>
+  );
 };
 
 export default {
-    title: 'components/Toast',
-    component: Default,
-    decorators: [withGlobalStyles],
+  title: 'components/Toast',
+  component: Default,
+  decorators: [withGlobalStyles],
 };
 
 export const Destructive = () => {
-    const { toast } = useToast();
-    return (
-        <div
-            style={{
-                display: 'flex',
-                justifyContent: 'center',
-                minHeight: '50vh',
-                alignItems: 'center',
-            }}
-        >
-            <Toaster />
-            <Button
-                onClick={() => {
-                    toast({
-                        variant: 'destructive',
-                        title: 'Error',
-                        description: 'There was a problem with your request.',
-                    });
-                }}
-            >
-                Show Toast
-            </Button>
-        </div>
-    );
+  const { toast } = useToast();
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        minHeight: '50vh',
+        alignItems: 'center',
+      }}
+    >
+      <Toaster />
+      <Button
+        onClick={() => {
+          toast({
+            variant: 'destructive',
+            title: 'Error',
+            description: 'There was a problem with your request.',
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </div>
+  );
 };
 
 export const DestructiveWithActionButton = () => {
-    const { toast } = useToast();
-    return (
-        <div
-            style={{
-                display: 'flex',
-                justifyContent: 'center',
-                minHeight: '50vh',
-                alignItems: 'center',
-            }}
-        >
-            <Toaster />
-            <Button
-                onClick={() => {
-                    toast({
-                        variant: 'destructive',
-                        title: 'Error',
-                        description: 'There was a problem with your request.',
-                        action: <ToastAction altText="Try again">Try again</ToastAction>,
-                    });
-                }}
-            >
-                Show Toast
-            </Button>
-        </div>
-    );
+  const { toast } = useToast();
+  return (
+    <div
+      style={{
+        display: 'flex',
+        justifyContent: 'center',
+        minHeight: '50vh',
+        alignItems: 'center',
+      }}
+    >
+      <Toaster />
+      <Button
+        onClick={() => {
+          toast({
+            variant: 'destructive',
+            title: 'Error',
+            description: 'There was a problem with your request.',
+            action: <ToastAction altText="Try again">Try again</ToastAction>,
+          });
+        }}
+      >
+        Show Toast
+      </Button>
+    </div>
+  );
 };
diff --git a/apps/ui/lib/components/Typography/Text.tsx b/apps/ui/lib/components/Typography/Text.tsx
index e9943d4..fb52618 100644
--- a/apps/ui/lib/components/Typography/Text.tsx
+++ b/apps/ui/lib/components/Typography/Text.tsx
@@ -3,38 +3,38 @@ import { VARIANT_MAPPINGS } from './constants';
 import { Slot } from './Slot';
 import { cn } from '@utils/utils';
 export interface TextProps extends React.HTMLAttributes<HTMLParagraphElement> {
-    variant?: keyof typeof VARIANT_MAPPINGS;
-    alignment?: 'left' | 'right' | 'center' | 'justify';
-    maxLines?: number;
-    asChild?: boolean;
-    children: React.ReactNode;
+  variant?: keyof typeof VARIANT_MAPPINGS;
+  alignment?: 'left' | 'right' | 'center' | 'justify';
+  maxLines?: number;
+  asChild?: boolean;
+  children: React.ReactNode;
 }
 
 export const Text: React.FC<TextProps> = ({
-    variant,
-    alignment,
-    maxLines,
-    asChild = false,
-    children,
-    ...props
+  variant,
+  alignment,
+  maxLines,
+  asChild = false,
+  children,
+  ...props
 }) => {
-    const textStyle = {
-        textAlign: alignment || 'center',
-        display: asChild ? 'inline-block' : 'block',
-        textOverflow: 'ellipsis',
-        overflow: 'hidden',
-        WebkitLineClamp: maxLines || 'inherit',
-    };
+  const textStyle = {
+    textAlign: alignment || 'center',
+    display: asChild ? 'inline-block' : 'block',
+    textOverflow: 'ellipsis',
+    overflow: 'hidden',
+    WebkitLineClamp: maxLines || 'inherit',
+  };
 
-    const Comp = asChild ? Slot : 'p';
-    const classNames = VARIANT_MAPPINGS[variant as keyof typeof VARIANT_MAPPINGS];
+  const Comp = asChild ? Slot : 'p';
+  const classNames = VARIANT_MAPPINGS[variant as keyof typeof VARIANT_MAPPINGS];
 
-    return (
-        <Comp
-            {...props}
-            className={cn(classNames?.slice(1), props.className, 'ui')}
-            style={textStyle}
-            children={children}
-        />
-    );
+  return (
+    <Comp
+      {...props}
+      className={cn(classNames?.slice(1), props.className, 'ui')}
+      style={textStyle}
+      children={children}
+    />
+  );
 };
diff --git a/apps/ui/lib/components/Typography/Typography.stories.tsx b/apps/ui/lib/components/Typography/Typography.stories.tsx
index aeaa662..923f67c 100644
--- a/apps/ui/lib/components/Typography/Typography.stories.tsx
+++ b/apps/ui/lib/components/Typography/Typography.stories.tsx
@@ -1,64 +1,64 @@
 import { Text } from '../..';
 
 export default {
-    title: 'Components/Text',
-    component: Text,
-    parameters: {
-        layout: 'centered',
+  title: 'Components/Text',
+  component: Text,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+        options: [
+          'body-1',
+          'body-2',
+          'body-3',
+          'button-1',
+          'button-2',
+          'button-3',
+          'heading-1',
+          'heading-2',
+          'heading-3',
+          'heading-4',
+          'heading-5',
+          'heading-6',
+          'label-1',
+          'label-2',
+          'label-2-strong',
+          'label-3',
+          'subtitle-1',
+          'subtitle-2',
+          'subtitle-3',
+        ],
+      },
+      defaultValue: 'body-1',
+      description: 'The variant of the Text component.',
     },
-    tags: ['autodocs'],
-    argTypes: {
-        variant: {
-            control: {
-                type: 'select',
-                options: [
-                    'body-1',
-                    'body-2',
-                    'body-3',
-                    'button-1',
-                    'button-2',
-                    'button-3',
-                    'heading-1',
-                    'heading-2',
-                    'heading-3',
-                    'heading-4',
-                    'heading-5',
-                    'heading-6',
-                    'label-1',
-                    'label-2',
-                    'label-2-strong',
-                    'label-3',
-                    'subtitle-1',
-                    'subtitle-2',
-                    'subtitle-3',
-                ],
-            },
-            defaultValue: 'body-1',
-            description: 'The variant of the Text component.',
-        },
-        alignment: {
-            control: {
-                type: 'select',
-                options: ['left', 'right', 'center', 'justify'],
-            },
-            defaultValue: 'left',
-            description: 'The text alignment of the Text component.',
-        },
-        color: {
-            control: 'color',
-            defaultValue: '#2A2C35',
-            description: 'The color of the text in the Text component.',
-        },
-        asChild: {
-            control: 'text',
-            description:
-                'The type of child element to render within the Text component.',
-        },
-        children: {
-            control: 'text',
-            description: 'The text content of the Text component.',
-        },
+    alignment: {
+      control: {
+        type: 'select',
+        options: ['left', 'right', 'center', 'justify'],
+      },
+      defaultValue: 'left',
+      description: 'The text alignment of the Text component.',
     },
+    color: {
+      control: 'color',
+      defaultValue: '#2A2C35',
+      description: 'The color of the text in the Text component.',
+    },
+    asChild: {
+      control: 'text',
+      description:
+        'The type of child element to render within the Text component.',
+    },
+    children: {
+      control: 'text',
+      description: 'The text content of the Text component.',
+    },
+  },
 };
 
 // Create a template for your Text component
@@ -66,230 +66,230 @@ const Template = (args: any) => <Text {...args} />;
 
 export const Default = Template.bind({});
 Default.args = {
-    variant: 'heading-1',
-    alignment: 'left',
-    color: '#2A2C35',
-    children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
+  variant: 'heading-1',
+  alignment: 'left',
+  color: '#2A2C35',
+  children: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
 };
 
 // Combined Story
 export const AllVariants = () => {
-    return (
-        <>
-            {/* Body-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="body-1" color="#2A2C35">
-                    body-1
-                </Text>
-            </div>
+  return (
+    <>
+      {/* Body-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="body-1" color="#2A2C35">
+          body-1
+        </Text>
+      </div>
 
-            {/* Body-2 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="body-2" color="#2A2C35">
-                    body-2
-                </Text>
-            </div>
+      {/* Body-2 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="body-2" color="#2A2C35">
+          body-2
+        </Text>
+      </div>
 
-            {/* Body-3 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="body-3" color="#2A2C35">
-                    body-3
-                </Text>
-            </div>
+      {/* Body-3 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="body-3" color="#2A2C35">
+          body-3
+        </Text>
+      </div>
 
-            {/* Button-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="button-1" color="#2A2C35">
-                    Button-1
-                </Text>
-            </div>
+      {/* Button-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="button-1" color="#2A2C35">
+          Button-1
+        </Text>
+      </div>
 
-            {/* Button-2 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="button-2" color="#2A2C35">
-                    Button-2
-                </Text>
-            </div>
+      {/* Button-2 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="button-2" color="#2A2C35">
+          Button-2
+        </Text>
+      </div>
 
-            {/* Heading-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-1" color="#2A2C35">
-                    Heading-1
-                </Text>
-            </div>
+      {/* Heading-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-1" color="#2A2C35">
+          Heading-1
+        </Text>
+      </div>
 
-            {/* Heading-2 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-2" color="#2A2C35">
-                    Heading-2
-                </Text>
-            </div>
+      {/* Heading-2 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-2" color="#2A2C35">
+          Heading-2
+        </Text>
+      </div>
 
-            {/* Heading-3 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-3" color="#2A2C35">
-                    Heading-3
-                </Text>
-            </div>
+      {/* Heading-3 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-3" color="#2A2C35">
+          Heading-3
+        </Text>
+      </div>
 
-            {/* Heading-4 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-4" color="#2A2C35">
-                    Heading-4
-                </Text>
-            </div>
+      {/* Heading-4 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-4" color="#2A2C35">
+          Heading-4
+        </Text>
+      </div>
 
-            {/* Heading-5 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-5" color="#2A2C35">
-                    Heading-5
-                </Text>
-            </div>
+      {/* Heading-5 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-5" color="#2A2C35">
+          Heading-5
+        </Text>
+      </div>
 
-            {/* Heading-6 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="heading-6" color="#2A2C35">
-                    Heading-6
-                </Text>
-            </div>
+      {/* Heading-6 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="heading-6" color="#2A2C35">
+          Heading-6
+        </Text>
+      </div>
 
-            {/* Label-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="label-1" color="#2A2C35">
-                    label-1
-                </Text>
-            </div>
+      {/* Label-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="label-1" color="#2A2C35">
+          label-1
+        </Text>
+      </div>
 
-            {/* Label-2 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="label-2" color="#2A2C35">
-                    label-2
-                </Text>
-            </div>
+      {/* Label-2 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="label-2" color="#2A2C35">
+          label-2
+        </Text>
+      </div>
 
-            {/* Subtitle-1 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="subtitle-1" color="#2A2C35">
-                    subtitle-1
-                </Text>
-            </div>
+      {/* Subtitle-1 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="subtitle-1" color="#2A2C35">
+          subtitle-1
+        </Text>
+      </div>
 
-            {/* Subtitle-2*/}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="subtitle-2" color="#2A2C35">
-                    subtitle-2
-                </Text>
-            </div>
+      {/* Subtitle-2*/}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="subtitle-2" color="#2A2C35">
+          subtitle-2
+        </Text>
+      </div>
 
-            {/* Subtitle-3 */}
-            <div style={{ marginBottom: '20px' }}>
-                <Text variant="subtitle-3" color="#2A2C35">
-                    subtitle-3
-                </Text>
-            </div>
-        </>
-    );
+      {/* Subtitle-3 */}
+      <div style={{ marginBottom: '20px' }}>
+        <Text variant="subtitle-3" color="#2A2C35">
+          subtitle-3
+        </Text>
+      </div>
+    </>
+  );
 };
 
 export const ColorStory = Template.bind({});
 ColorStory.args = {
-    variant: 'body-1',
-    alignment: 'center',
-    color: '#2a52be',
-    children:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  variant: 'body-1',
+  alignment: 'center',
+  color: '#2a52be',
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
 };
 
 export const withTailwind = () => {
-    return (
-        <div style={{ marginBottom: '20px' }}>
-            <Text className="grv-text-[#f0a000] grv-underline" variant="heading-1">
-                With extensible tailwind classes
-            </Text>
-        </div>
-    );
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <Text className="grv-text-[#f0a000] grv-underline" variant="heading-1">
+        With extensible tailwind classes
+      </Text>
+    </div>
+  );
 };
 
 export const withTailwindAndVariant = () => {
-    return (
-        <div style={{ marginBottom: '20px' }}>
-            <Text variant="heading-1" className="grv-text-error-700">
-                with tailwind classes and variant
-            </Text>
-        </div>
-    );
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <Text variant="heading-1" className="grv-text-error-700">
+        with tailwind classes and variant
+      </Text>
+    </div>
+  );
 };
 
 export const withTailwindAndVariant2 = () => {
-    return (
-        <div style={{ marginBottom: '20px' }}>
-            <Text
-                variant="heading-1"
-                className="grv-text-[#a0c] grv-text-[10px] grv-font-light"
-            >
-                with tailwind classes and variant
-            </Text>
-        </div>
-    );
+  return (
+    <div style={{ marginBottom: '20px' }}>
+      <Text
+        variant="heading-1"
+        className="grv-text-[#a0c] grv-text-[10px] grv-font-light"
+      >
+        with tailwind classes and variant
+      </Text>
+    </div>
+  );
 };
 
 // Alignment Center
 export const AlignmentCenterStory = Template.bind({});
 AlignmentCenterStory.args = {
-    variant: 'body-1',
-    alignment: 'center',
-    color: '#2A2C35',
-    children:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
+  variant: 'body-1',
+  alignment: 'center',
+  color: '#2A2C35',
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.',
 };
 
 // Alignment Left
 export const AlignmentLeftStory = Template.bind({});
 AlignmentLeftStory.args = {
-    variant: 'body-1',
-    alignment: 'left',
-    color: '#2A2C35',
-    children:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+  variant: 'body-1',
+  alignment: 'left',
+  color: '#2A2C35',
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
 };
 
 // Alignment Right
 export const AlignmentRightStory = Template.bind({});
 AlignmentRightStory.args = {
-    variant: 'body-1',
-    alignment: 'right',
-    color: '#2A2C35',
-    children:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+  variant: 'body-1',
+  alignment: 'right',
+  color: '#2A2C35',
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
 };
 
 // Alignment Justify
 export const AlignmentJustifyStory = Template.bind({});
 AlignmentJustifyStory.args = {
-    variant: 'body-1',
-    alignment: 'justify',
-    color: '#2A2C35',
-    children:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+  variant: 'body-1',
+  alignment: 'justify',
+  color: '#2A2C35',
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
 };
 
 // story for maxLines
 export const Body2MaxLinesEllipsis = Template.bind({});
 Body2MaxLinesEllipsis.args = {
-    variant: 'body-2',
-    alignment: 'left',
-    color: '#2A2C35',
-    width: 400,
-    children:
-        'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
-    maxLines: 2, // Limit the maximum lines
+  variant: 'body-2',
+  alignment: 'left',
+  color: '#2A2C35',
+  width: 400,
+  children:
+    'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi.',
+  maxLines: 2, // Limit the maximum lines
 };
 
 export const asChild = Template.bind({});
 asChild.args = {
-    variant: 'body-1',
-    asChild: true,
-    alignment: 'center',
-    color: '#2A2C35',
-    children: <h1>This is heading 1</h1>,
+  variant: 'body-1',
+  asChild: true,
+  alignment: 'center',
+  color: '#2A2C35',
+  children: <h1>This is heading 1</h1>,
 };
diff --git a/apps/ui/lib/index.tsx b/apps/ui/lib/index.tsx
index 6c74336..b34e0d1 100644
--- a/apps/ui/lib/index.tsx
+++ b/apps/ui/lib/index.tsx
@@ -12,4 +12,5 @@ export * from './components/Navigation-menu';
 export * from './components/Switch';
 export * from './components/Toast';
 export * from './components/Progress';
-export * from './components/Chip';
\ No newline at end of file
+export * from './components/Chip';
+export * from './components/Modal';
\ No newline at end of file
diff --git a/apps/ui/lib/tailwind.css b/apps/ui/lib/tailwind.css
index 17f910e..29784c9 100644
--- a/apps/ui/lib/tailwind.css
+++ b/apps/ui/lib/tailwind.css
@@ -36,11 +36,12 @@
     --warning-900: 222, 193, 110;
 
     --text-primary: 235, 235, 235;
-    --text-secondary: 30, 30, 30;
+    --text-secondary: 93, 97, 102;
 
     --accent: 0, 0, 0;
     --background-paper: 255 255 255;
     --background-opacity: 0, 0, 0, 0.05;
+    --background-overlay: 0, 0, 0, 0.7;
   }
 
   /* Dark Mode Colors */
@@ -76,12 +77,13 @@
     --warning-900: 187, 167, 81;
 
     --text-primary: 245, 245, 245;
-    --text-secondary: 23, 23, 23;
+    --text-secondary: 102, 98, 93;
 
     --accent: 255, 245, 245;
     --background-paper: 253, 253, 253;
 
     --background-opacity: 253, 253, 253, 0.1;
+    --background-overlay: 0, 0, 0, 0.7;
   }
 }
 
diff --git a/apps/ui/package.json b/apps/ui/package.json
index c02b2c9..b2e8b98 100644
--- a/apps/ui/package.json
+++ b/apps/ui/package.json
@@ -21,7 +21,7 @@
     "build": "npx sort-package-json && tsc && vite build",
     "build-storybook": "storybook build",
     "dev": "storybook dev -p 6006",
-    "format": "prettier --write lib/**/* stories/**/*",
+    "format": "prettier --write lib/**/*",
     "lint": "eslint ./lib --ext .ts,.tsx",
     "lint-fix": "eslint --fix .",
     "pub:beta": "npm run build && npm publish --no-git-checks --access public --tag beta",
@@ -44,6 +44,7 @@
   },
   "dependencies": {
     "@radix-ui/react-avatar": "^1.0.4",
+    "@radix-ui/react-dialog": "^1.1.4",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-select": "^2.0.0",
     "class-variance-authority": "^0.7.0",
diff --git a/apps/ui/tailwind.config.ts b/apps/ui/tailwind.config.ts
index e5e28b5..66915cd 100644
--- a/apps/ui/tailwind.config.ts
+++ b/apps/ui/tailwind.config.ts
@@ -19,6 +19,23 @@ module.exports = {
         extend: {
             fontFamily: groovyFontFamily,
         },
+        keyframes: {
+            overlayShow: {
+                from: { opacity: "0" },
+                to: { opacity: "1" },
+            },
+            contentShow: {
+                from: {
+                    opacity: "0",
+                    transform: "translate(-50%, -48%) scale(0.96)",
+                },
+                to: { opacity: "1", transform: "translate(-50%, -50%) scale(1)" },
+            },
+        },
+        animation: {
+            overlayShow: "overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+            contentShow: "contentShow 150ms cubic-bezier(0.16, 1, 0.3, 1)",
+        },
         colors: {
             primary: {
                 100: 'rgb(var(--primary-100))',
@@ -62,6 +79,7 @@ module.exports = {
             accent: 'rgb(var(--accent))',
             backgroundPaper: 'rgb(var(--background-paper))',
             bgopacity: 'rgb(var( --background-opacity))',
+            bgOverlay: 'rgb(var(--background-overlay))',
         },
         fontWeight: {
             thin: '100',
@@ -71,6 +89,9 @@ module.exports = {
             semibold: '600',
             bold: '700',
         },
+        fontFamily: {
+            sans: ['"Inter var"', 'system-ui', 'sans-serif']
+        },
     },
     plugins: [
         plugin(({ addUtilities }) => {
diff --git a/package-lock.json b/package-lock.json
index d76c833..76549d2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -85,6 +85,7 @@
       "license": "MIT",
       "dependencies": {
         "@radix-ui/react-avatar": "^1.0.4",
+        "@radix-ui/react-dialog": "^1.1.4",
         "@radix-ui/react-icons": "^1.3.0",
         "@radix-ui/react-select": "^2.0.0",
         "class-variance-authority": "^0.7.0",
@@ -174,6 +175,309 @@
         "react": ">=16"
       }
     },
+    "apps/ui/node_modules/@radix-ui/primitive": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.1.1.tgz",
+      "integrity": "sha512-SJ31y+Q/zAyShtXJc8x83i9TYdbAfHZ++tUZnvjJJqFjzsdUnKsxPL6IEtBlxKkU7yzer//GQtZSV4GbldL3YA=="
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dialog/-/react-dialog-1.1.4.tgz",
+      "integrity": "sha512-Ur7EV1IwQGCyaAuyDRiOLA5JIUZxELJljF+MbM/2NC0BYwfuRrbpS30BiQBJrVruscgUkieKkqXYDOoByaxIoA==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-context": "1.1.1",
+        "@radix-ui/react-dismissable-layer": "1.1.3",
+        "@radix-ui/react-focus-guards": "1.1.1",
+        "@radix-ui/react-focus-scope": "1.1.1",
+        "@radix-ui/react-id": "1.1.0",
+        "@radix-ui/react-portal": "1.1.3",
+        "@radix-ui/react-presence": "1.1.2",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-slot": "1.1.1",
+        "@radix-ui/react-use-controllable-state": "1.1.0",
+        "aria-hidden": "^1.1.1",
+        "react-remove-scroll": "^2.6.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-compose-refs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.1.tgz",
+      "integrity": "sha512-Y9VzoRDSJtgFMUCoiZBDVo084VQ5hfpXxVE+NgkdNsjiDBByiImMZKKhxMwCbdHvhlENG6a833CbFkOQvTricw==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-context": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz",
+      "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-dismissable-layer": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.3.tgz",
+      "integrity": "sha512-onrWn/72lQoEucDmJnr8uczSNTujT0vJnA/X5+3AkChVPowr8n1yvIKIabhWyMQeMvvmdpsvcyDqx3X1LEXCPg==",
+      "dependencies": {
+        "@radix-ui/primitive": "1.1.1",
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0",
+        "@radix-ui/react-use-escape-keydown": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-guards": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.1.1.tgz",
+      "integrity": "sha512-pSIwfrT1a6sIoDASCSpFwOasEwKTZWDw/iBdtnqKO7v6FeOzYJ7U53cPzYFVR3geGGXgVHaH+CdngrrAzqUGxg==",
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-focus-scope": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.1.1.tgz",
+      "integrity": "sha512-01omzJAYRxXdG2/he/+xy+c8a8gCydoQ1yOxnWNcRhrrBW5W+RQJ22EK1SaO8tb3WoUsuEw7mJjBozPzihDFjA==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-callback-ref": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-portal": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.1.3.tgz",
+      "integrity": "sha512-NciRqhXnGojhT93RPyDaMPfLH3ZSl4jjIFbZQ1b/vxvZEdHsBZ49wP9w8L3HzUQwep01LcWtkUvm0OVB5JAHTw==",
+      "dependencies": {
+        "@radix-ui/react-primitive": "2.0.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-presence": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-presence/-/react-presence-1.1.2.tgz",
+      "integrity": "sha512-18TFr80t5EVgL9x1SwF/YGtfG+l0BS0PRAlCWBDoBEiDQjeKgnNZRVJp/oVBl24sr3Gbfwc/Qpj4OcWTQMsAEg==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1",
+        "@radix-ui/react-use-layout-effect": "1.1.0"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-primitive": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-2.0.1.tgz",
+      "integrity": "sha512-sHCWTtxwNn3L3fH8qAfnF3WbUZycW93SM1j3NFDzXBiz8D6F5UTTy8G1+WFEaiCdvCVRJWj6N2R4Xq6HdiHmDg==",
+      "dependencies": {
+        "@radix-ui/react-slot": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "@types/react-dom": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc",
+        "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "@types/react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/@radix-ui/react-slot": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.1.tgz",
+      "integrity": "sha512-RApLLOcINYJA+dMVbOju7MYv1Mb2EBp2nH4HdDzXTSyaR5optlm6Otrz1euW3HbdOR8UmmFK06TD+A9frYWv+g==",
+      "dependencies": {
+        "@radix-ui/react-compose-refs": "1.1.1"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll": {
+      "version": "2.6.2",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.6.2.tgz",
+      "integrity": "sha512-KmONPx5fnlXYJQqC62Q+lwIeAk64ws/cUw6omIumRzMRPqgnYqhSSti99nbj0Ry13bv7dF+BKn7NB+OqkdZGTw==",
+      "dependencies": {
+        "react-remove-scroll-bar": "^2.3.7",
+        "react-style-singleton": "^2.2.1",
+        "tslib": "^2.1.0",
+        "use-callback-ref": "^1.3.3",
+        "use-sidecar": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll/node_modules/react-remove-scroll-bar": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.8.tgz",
+      "integrity": "sha512-9r+yi9+mgU33AKcj6IbT9oRCO78WriSj6t/cF8DWBZJ9aOGPOTEDvdUDz1FwKim7QXWwmHqtdHnRJfhAxEG46Q==",
+      "dependencies": {
+        "react-style-singleton": "^2.2.2",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll/node_modules/react-remove-scroll-bar/node_modules/react-style-singleton": {
+      "version": "2.2.3",
+      "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.3.tgz",
+      "integrity": "sha512-b6jSvxvVnyptAiLjbkWLE/lOnR4lfTtDAl+eUC7RZy+QQWc6wRzIV2CE6xBuMmDxc2qIihtDCZD5NPOFl7fRBQ==",
+      "dependencies": {
+        "get-nonce": "^1.0.0",
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "apps/ui/node_modules/@radix-ui/react-dialog/node_modules/react-remove-scroll/node_modules/use-callback-ref": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.3.tgz",
+      "integrity": "sha512-jQL3lRnocaFtu3V00JToYz/4QkNWswxijDaCVNZRiRTO3HQDLsdu1ZtmIUvV4yPp+rvWm5j0y0TG/S61cuijTg==",
+      "dependencies": {
+        "tslib": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "@types/react": "*",
+        "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0 || ^19.0.0-rc"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "apps/ui/node_modules/@storybook/manager-api": {
       "version": "8.3.5",
       "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-8.3.5.tgz",

From 30592336581c06bcde22ffd5c2a7cd7add061d32 Mon Sep 17 00:00:00 2001
From: SySagar <sysagar07@gmail.com>
Date: Sun, 12 Jan 2025 23:05:15 +0530
Subject: [PATCH 4/6] chore: textfield component revamp

---
 apps/ui/lib/components/Button/index.tsx       |  77 ++--
 apps/ui/lib/components/Chip/Chip.tsx          | 220 ++++++-----
 .../Textfield/Textfield.stories.tsx           | 368 ++++++++++--------
 apps/ui/lib/components/Textfield/index.tsx    | 362 +++++++++--------
 4 files changed, 563 insertions(+), 464 deletions(-)

diff --git a/apps/ui/lib/components/Button/index.tsx b/apps/ui/lib/components/Button/index.tsx
index 4ffb8bc..2d07ff1 100644
--- a/apps/ui/lib/components/Button/index.tsx
+++ b/apps/ui/lib/components/Button/index.tsx
@@ -5,53 +5,52 @@ import { cva, type VariantProps } from 'class-variance-authority';
 import { cn } from '@utils/utils';
 
 const buttonVariants = cva(
-  'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
-  {
-    variants: {
-      variant: {
-        default:
-          'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
-        destructive:
-          'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
-        outline:
-          ' grv-border-none hover:grv-bg-bgopacity grv-text-accent  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
-        secondary:
-          'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
-        link: 'grv-text-accent grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer p-0 m-0',
-      },
-      size: {
-        default: 'grv-h-10 grv-px-4 grv-py-2',
-        sm: 'grv-h-9 grv-rounded-md grv-px-3',
-        lg: 'grv-h-11 grv-rounded-md grv-px-8',
-        icon: 'grv-h-10 grv-w-10',
-      },
-    },
-    defaultVariants: {
-      variant: 'default',
-      size: 'default',
-    },
-  }
+    'grv-inline-flex grv-items-center grv-justify-center grv-whitespace-nowrap grv-rounded-md grv-text-sm grv-font-medium grv-ring-offset-background grv-transition-colors focus-visible:grv-outline-none focus-visible:grv-ring-2 focus-visible:grv-ring-ring focus-visible:grv-ring-offset-2 disabled:grv-pointer-events-none disabled:grv-opacity-50',
+    {
+        variants: {
+            variant: {
+                default:
+                    'grv-bg-primary-700 grv-text-text-primary hover:grv-bg-primary-500 grv-border-none',
+                destructive:
+                    'grv-bg-error-900 grv-text-text-primary hover:grv-bg-error-700 grv-border-none grv-outline-0 grv-shadow-none',
+                outline:
+                    ' grv-border-none hover:grv-bg-bgopacity grv-text-accent  grv-bg-primary-100/0 grv-outline grv-font-medium grv-outline-2 grv-outline-primary-500 grv-shadow-none',
+                secondary:
+                    'grv-bg-secondary-700 grv-text-text-primary hover:grv-bg-secondary-500  grv-border-none grv-outline-0 grv-shadow-none',
+                link: 'grv-text-accent grv-underline-offset-4 hover:grv-underline grv-bg-primary-100/0 grv-font-medium grv-border-none hover:grv-cursor-pointer p-0 m-0',
+            },
+            size: {
+                default: 'grv-h-10 grv-px-4 grv-py-2',
+                sm: 'grv-h-9 grv-rounded-md grv-px-3',
+                lg: 'grv-h-11 grv-rounded-md grv-px-8',
+                icon: 'grv-h-10 grv-w-10',
+            },
+        },
+        defaultVariants: {
+            variant: 'default',
+            size: 'default',
+        },
+    }
 );
 
 export interface ButtonProps
-  extends React.ButtonHTMLAttributes<HTMLButtonElement>,
+    extends React.ButtonHTMLAttributes<HTMLButtonElement>,
     VariantProps<typeof buttonVariants> {
-  asChild?: boolean;
+    asChild?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-  ({ className, variant, size, asChild = false, ...props }, ref) => {
-    const Comp = asChild ? Slot : 'button';
+    ({ className, variant, size, asChild = false, ...props }, ref) => {
+        const Comp = asChild ? Slot : 'button';
 
-    console.log('cn', cn(buttonVariants({ variant, size, className })));
-    return (
-      <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
+        return (
+            <Comp
+                className={cn(buttonVariants({ variant, size, className }))}
+                ref={ref}
+                {...props}
+            />
+        );
+    }
 );
 Button.displayName = 'Button';
 
diff --git a/apps/ui/lib/components/Chip/Chip.tsx b/apps/ui/lib/components/Chip/Chip.tsx
index 9053f0c..fdac16d 100644
--- a/apps/ui/lib/components/Chip/Chip.tsx
+++ b/apps/ui/lib/components/Chip/Chip.tsx
@@ -6,134 +6,132 @@ import { X as CloseIcon } from 'lucide-react';
 import { cn } from '@utils/utils';
 
 const chipVariants = cva(
-  'grv-inline-flex ui grv-items-center grv-rounded-full grv-text-sm grv-font-medium grv-transition-colors focus:grv-outline-none focus:grv-ring-2 grv-ring-ring grv-ring-offset-2',
-  {
-    variants: {
-      variant: {
-        filled: 'grv-bg-primary-500 ui',
-        outlined: 'grv-border-2 grv-border-solid grv-border-accent ui',
-      },
-      size: {
-        sm: 'grv-h-6 grv-px-3 ui',
-        md: 'grv-h-8 grv-px-4 ui',
-        lg: 'grv-h-10 grv-px-5 ui',
-      },
-      clickable: {
-        true: 'grv-cursor-pointer',
-        false: '',
-      },
-    },
-    defaultVariants: {
-      variant: 'filled',
-      size: 'md',
-      clickable: false,
-    },
-  }
+    'grv-inline-flex ui grv-items-center grv-rounded-full grv-text-sm grv-font-medium grv-transition-colors focus:grv-outline-none focus:grv-ring-2 grv-ring-ring grv-ring-offset-2',
+    {
+        variants: {
+            variant: {
+                filled: 'grv-bg-primary-500 ui',
+                outlined: 'grv-border-2 grv-border-solid grv-border-accent ui',
+            },
+            size: {
+                sm: 'grv-h-6 grv-px-3 ui',
+                md: 'grv-h-8 grv-px-4 ui',
+                lg: 'grv-h-10 grv-px-5 ui',
+            },
+            clickable: {
+                true: 'grv-cursor-pointer',
+                false: '',
+            },
+        },
+        defaultVariants: {
+            variant: 'filled',
+            size: 'md',
+            clickable: false,
+        },
+    }
 );
 
 export interface ChipDivProps
-  extends React.HTMLAttributes<HTMLDivElement>,
+    extends React.HTMLAttributes<HTMLDivElement>,
     VariantProps<typeof chipVariants> {
-  onDelete?: () => void;
-  as?: React.ElementType;
-  href?: never;
-  beforeChildren?: React.ReactNode;
-  afterChildren?: React.ReactNode;
+    onDelete?: () => void;
+    as?: React.ElementType;
+    href?: never;
+    beforeChildren?: React.ReactNode;
+    afterChildren?: React.ReactNode;
 }
 
 export interface ChipAnchorProps
-  extends React.HTMLAttributes<HTMLAnchorElement>,
+    extends React.HTMLAttributes<HTMLAnchorElement>,
     VariantProps<typeof chipVariants> {
-  onDelete?: () => void;
-  href?: string;
-  target?: string;
-  as?: React.ElementType;
-  beforeChildren?: React.ReactNode;
-  afterChildren?: React.ReactNode;
+    onDelete?: () => void;
+    href?: string;
+    target?: string;
+    as?: React.ElementType;
+    beforeChildren?: React.ReactNode;
+    afterChildren?: React.ReactNode;
 }
 
 export type ChipProps = ChipAnchorProps | ChipDivProps;
 
 const Chip = React.forwardRef<HTMLDivElement | HTMLAnchorElement, ChipProps>(
-  (
-    {
-      className,
-      variant,
-      size,
-      clickable,
-      onDelete,
-      href,
-      as,
-      beforeChildren,
-      afterChildren,
-      children,
-      ...props
-    },
-    ref
-  ) => {
-    const Component = as || (href ? 'a' : 'div');
-    const isClickable = Boolean(clickable || href || props.onClick);
+    (
+        {
+            className,
+            variant,
+            size,
+            clickable,
+            onDelete,
+            href,
+            as,
+            beforeChildren,
+            afterChildren,
+            children,
+            ...props
+        },
+        ref
+    ) => {
+        const Component = as || (href ? 'a' : 'div');
+        const isClickable = Boolean(clickable || href || props.onClick);
 
-    console.log(variant);
-    const textColor =
-      variant === 'outlined' ? 'grv-text-accent' : 'grv-text-text-primary';
+        const textColor =
+            variant === 'outlined' ? 'grv-text-accent' : 'grv-text-text-primary';
 
-    console.log(size);
 
-    const textSize =
-      size === 'sm'
-        ? 'grv-text-[10px]'
-        : size === 'md'
-          ? 'grv-text-[12px]'
-          : 'grv-text-[14px]';
+        const textSize =
+            size === 'sm'
+                ? 'grv-text-[10px]'
+                : size === 'md'
+                    ? 'grv-text-[12px]'
+                    : 'grv-text-[14px]';
 
-    return (
-      <Component
-        ref={ref}
-        className={cn(
-          chipVariants({ variant, size, clickable: isClickable }),
-          'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden ui',
-          className
-        )}
-        {...(href && { href })}
-        {...props}
-      >
-        {beforeChildren && (
-          <div
-            className={cn(
-              'grv-flex grv-items-center grv-justify-center grv-text-text-primary grv-mr-2 grv-w-[20px] grv-h-[20px] ui grv-overflow-hidden grv-rounded-full grv-object-cover'
-            )}
-          >
-            {beforeChildren}
-          </div>
-        )}
-        <div className={cn(textColor, textSize)}>{children}</div>
-        {afterChildren && (
-          <div
-            className={cn(
-              `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2 ui`
-            )}
-          >
-            {afterChildren}
-          </div>
-        )}
-        {onDelete && (
-          <div
-            className={cn(
-              'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-py-[4px] grv-px-[4px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60',
-              textSize
-            )}
-            onClick={(e) => {
-              e.stopPropagation();
-              onDelete();
-            }}
-          >
-            <CloseIcon className={cn('grv-h-[10px] grv-w-[10px]')} />
-          </div>
-        )}
-      </Component>
-    );
-  }
+        return (
+            <Component
+                ref={ref}
+                className={cn(
+                    chipVariants({ variant, size, clickable: isClickable }),
+                    'grv-decoration-primary-100 grv-underline-offset-2 grv-flex grv-overflow-hidden ui',
+                    className
+                )}
+                {...(href && { href })}
+                {...props}
+            >
+                {beforeChildren && (
+                    <div
+                        className={cn(
+                            'grv-flex grv-items-center grv-justify-center grv-text-text-primary grv-mr-2 grv-w-[20px] grv-h-[20px] ui grv-overflow-hidden grv-rounded-full grv-object-cover'
+                        )}
+                    >
+                        {beforeChildren}
+                    </div>
+                )}
+                <div className={cn(textColor, textSize)}>{children}</div>
+                {afterChildren && (
+                    <div
+                        className={cn(
+                            `grv-flex grv-items-center grv-justify-center ${textColor} grv-ml-2 ui`
+                        )}
+                    >
+                        {afterChildren}
+                    </div>
+                )}
+                {onDelete && (
+                    <div
+                        className={cn(
+                            'grv-ml-2 grv-rounded-full grv-bg-text-primary grv-cursor-pointer  grv-py-[4px] grv-px-[4px] grv-transition-colors grv-text-primary grv-opacity-50 hover:grv-opacity-60',
+                            textSize
+                        )}
+                        onClick={(e) => {
+                            e.stopPropagation();
+                            onDelete();
+                        }}
+                    >
+                        <CloseIcon className={cn('grv-h-[10px] grv-w-[10px]')} />
+                    </div>
+                )}
+            </Component>
+        );
+    }
 );
 
 Chip.displayName = 'Chip';
diff --git a/apps/ui/lib/components/Textfield/Textfield.stories.tsx b/apps/ui/lib/components/Textfield/Textfield.stories.tsx
index 95f2676..65e4777 100644
--- a/apps/ui/lib/components/Textfield/Textfield.stories.tsx
+++ b/apps/ui/lib/components/Textfield/Textfield.stories.tsx
@@ -1,175 +1,219 @@
-import { TextField } from '../..';
-
-export default {
-  title: 'Components/TextField',
-  component: TextField,
-  argTypes: {
-    variant: {
-      options: ['filled', 'outlined', 'standard'],
-      control: { type: 'radio' },
-    },
-    size: {
-      options: ['sm', 'md', 'lg'],
-      control: { type: 'radio' },
-    },
-    type: {
-      options: ['password', 'number', 'email', 'text'],
-      control: { type: 'radio' },
-    },
-    color: {
-      options: ['primary', 'secondary'],
-      control: { type: 'radio' },
-    },
-    placeholder: {
-      control: { type: 'text' },
-    },
-    disabled: {
-      control: { type: 'boolean' },
-    },
-    required: {
-      control: { type: 'boolean' },
-    },
-    readOnly: {
-      control: { type: 'boolean' },
-    },
-    fullWidth: {
-      control: { type: 'boolean' },
-    },
-    multiline: {
-      control: { type: 'boolean' },
-    },
-    rows: {
-      control: { type: 'number' },
-    },
-    rowsMax: {
-      control: { type: 'number' },
-    },
-    startIcon: {
-      control: { type: 'text' },
-    },
-    endIcon: {
-      control: { type: 'text' },
-    },
-    onChange: {
-      control: { type: 'text' },
-    },
-    onClick: {
-      control: { type: 'text' },
-    },
-    onFocus: {
-      control: { type: 'text' },
-    },
-    onBlur: {
-      control: { type: 'text' },
-    },
-    onKeyPress: {
-      control: { type: 'text' },
-    },
-    onKeyUp: {
-      control: { type: 'text' },
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextField } from './index';
+import { Mail, Lock, Eye, EyeOff, Search, User, Check, AlertCircle } from 'lucide-react';
+import { useState } from 'react';
+import { Button } from '../Button';
+
+const meta: Meta<typeof TextField.Root> = {
+    title: 'Components/TextField',
+    component: TextField.Root,
+    tags: ['autodocs'],
+    argTypes: {
+        variant: {
+            control: 'select',
+            options: ['standard', 'outlined', 'filled'],
+            description: 'The visual style of the text field',
+        },
+        size: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'The size of the text field',
+        },
+        error: {
+            control: 'boolean',
+            description: 'Whether the text field is in an error state',
+        },
     },
-    onKeyDown: {
-      control: { type: 'text' },
+};
+
+export default meta;
+type Story = StoryObj<typeof TextField.Root>;
+
+// Basic TextField
+export const Basic: Story = {
+    render: (args) => (
+        <TextField.Root {...args}>
+            <TextField.Input placeholder="Enter text" />
+        </TextField.Root>
+    ),
+};
+
+// With Icons
+export const WithIcons: Story = {
+    render: () => (
+        <div className="grv-space-y-4">
+            <TextField.Root variant={'outlined'}>
+                <TextField.Icon position="start">
+                    <Mail className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+                <TextField.Input placeholder="Enter email" />
+            </TextField.Root>
+
+            <TextField.Root variant={'outlined'}>
+                <TextField.Icon position="start">
+                    <Search className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+                <TextField.Input placeholder="Search..." />
+                <TextField.Icon position="end">
+                    <AlertCircle className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+            </TextField.Root>
+        </div>
+    ),
+};
+
+// Password Input with Toggle
+export const PasswordInput: Story = {
+    render: () => {
+        const [showPassword, setShowPassword] = useState(false);
+        return (
+            <TextField.Root variant={'outlined'}>
+                <TextField.Icon position="start">
+                    <Lock className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+                <TextField.Input
+                    type={showPassword ? "text" : "password"}
+                    placeholder="Enter password"
+                />
+                <TextField.Icon position="end">
+                    <Button
+                        variant={'outline'}
+                        onClick={() => setShowPassword(!showPassword)}
+                    >
+                        {showPassword ? (
+                            <EyeOff className="grv-w-4 grv-h-4" />
+                        ) : (
+                            <Eye className="grv-w-4 grv-h-4" />
+                        )}
+                    </Button>
+                </TextField.Icon>
+            </TextField.Root>
+        );
     },
-  },
 };
 
-export const Default = (args: any) => <TextField {...args} />;
+// Different Variants
+export const Variants: Story = {
+    render: () => (
+        <div className="grv-space-y-4">
+            <TextField.Root variant="standard">
+                <TextField.Input placeholder="Standard variant" />
+            </TextField.Root>
+
+            <TextField.Root variant="outlined">
+                <TextField.Input placeholder="Outlined variant" />
+            </TextField.Root>
 
-Default.args = {
-  label: 'Label',
-  placeholder: 'Placeholder',
-  startIcon: '👋',
-  endIcon: '👋',
+            <TextField.Root variant="filled">
+                <TextField.Input placeholder="Filled variant" />
+            </TextField.Root>
+        </div>
+    ),
 };
 
-export const Colors = (args: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <TextField {...args} color="primary" />
-    </div>
-    <div>
-      <TextField {...args} color="secondary" />
-    </div>
-  </div>
-);
-
-Colors.args = {
-  variant: 'filled',
+// Different Sizes
+export const Sizes: Story = {
+    render: () => (
+        <div className="grv-space-y-4">
+            <TextField.Root variant={'outlined'} size="sm">
+                <TextField.Input placeholder="Small size" />
+            </TextField.Root>
+
+            <TextField.Root variant={'outlined'} size="md">
+                <TextField.Input placeholder="Medium size" />
+            </TextField.Root>
+
+            <TextField.Root variant={'outlined'} size="lg">
+                <TextField.Input placeholder="Large size" />
+            </TextField.Root>
+        </div>
+    ),
 };
 
-export const Variants = (args: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <TextField {...args} variant="outlined" />
-    </div>
-    <div>
-      <TextField {...args} variant="filled" />
-    </div>
-  </div>
-);
-
-Variants.args = {
-  color: 'primary',
+// With Helper Text
+export const WithHelperText: Story = {
+    render: () => (
+        <div className="grv-space-y-4">
+            <TextField.Root variant={'outlined'}>
+                <TextField.Input placeholder="With helper text" />
+                <TextField.HelperText>
+                    This is a helpful message
+                </TextField.HelperText>
+            </TextField.Root>
+
+            <TextField.Root variant={'outlined'} error={true}>
+                <TextField.Input placeholder="With error" />
+                <TextField.HelperText>
+                    This field is required
+                </TextField.HelperText>
+            </TextField.Root>
+        </div>
+    ),
 };
 
-export const Sizes = (args: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <TextField {...args} size="sm" />
-    </div>
-    <div>
-      <TextField {...args} size="md" />
-    </div>
-    <div>
-      <TextField {...args} size="lg" />
-    </div>
-  </div>
-);
-
-Sizes.args = {
-  color: 'primary',
+// Form Example
+export const FormExample: Story = {
+    render: () => (
+        <form className="grv-space-y-4 grv-max-w-md">
+            <TextField.Root variant="outlined">
+                <TextField.Icon position="start">
+                    <User className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+                <TextField.Input placeholder="Username" />
+                <TextField.Icon position="end">
+                    <Check className="grv-w-4 grv-h-4 grv-text-green-500" />
+                </TextField.Icon>
+                <TextField.HelperText>
+                    Username is available
+                </TextField.HelperText>
+            </TextField.Root>
+
+            <TextField.Root variant="outlined" error={true}>
+                <TextField.Icon position="start">
+                    <Mail className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+                <TextField.Input placeholder="Email" type="email" />
+                <TextField.HelperText>
+                    Please enter a valid email address
+                </TextField.HelperText>
+            </TextField.Root>
+
+            <TextField.Root variant="outlined">
+                <TextField.Icon position="start">
+                    <Lock className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+                <TextField.Input type="password" placeholder="Password" />
+                <TextField.HelperText>
+                    Must be at least 8 characters
+                </TextField.HelperText>
+            </TextField.Root>
+        </form>
+    ),
 };
 
-export const Multiline = (args: any) => (
-  <div
-    style={{
-      display: 'flex',
-      flexDirection: 'column',
-      justifyContent: 'center',
-      alignItems: 'center',
-      gap: '1rem',
-    }}
-  >
-    <div>
-      <TextField {...args} multiline rows={4} />
-    </div>
-    <div>
-      <TextField {...args} multiline rows={4} variant="outlined" />
-    </div>
-  </div>
-);
+// Disabled State
+export const DisabledStates: Story = {
+    render: () => (
+        <div className="grv-space-y-4">
+            <TextField.Root>
+                <TextField.Input
+                    placeholder="Disabled input"
+                    disabled
+                />
+            </TextField.Root>
+
+            <TextField.Root variant="outlined">
+                <TextField.Icon position="start">
+                    <Mail className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+                <TextField.Input
+                    placeholder="Disabled with icons"
+                    disabled
+                />
+                <TextField.Icon position="end">
+                    <AlertCircle className="grv-w-4 grv-h-4" />
+                </TextField.Icon>
+            </TextField.Root>
+        </div>
+    ),
+};
\ No newline at end of file
diff --git a/apps/ui/lib/components/Textfield/index.tsx b/apps/ui/lib/components/Textfield/index.tsx
index 657652c..1ca5296 100644
--- a/apps/ui/lib/components/Textfield/index.tsx
+++ b/apps/ui/lib/components/Textfield/index.tsx
@@ -1,157 +1,215 @@
-import React from 'react';
-import { useRef, useEffect } from 'react';
-
-type textFieldVariant = 'filled' | 'outlined' | 'standard';
-type textFieldSize = 'sm' | 'md' | 'lg';
-type textFieldType = 'password' | 'number' | 'email' | 'text';
-
-export interface textFieldProps
-  extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
-  variant?: textFieldVariant;
-  size?: textFieldSize;
-  type?: textFieldType;
-  label?: string;
-  color?: string;
-  placeholder?: string;
-  error?: boolean;
-  disabled?: boolean;
-  required?: boolean;
-  readOnly?: boolean;
-  fullWidth?: boolean;
-  multiline?: boolean;
-  rows?: number;
-  rowsMax?: number;
-  startIcon?: React.ReactNode;
-  endIcon?: React.ReactNode;
-  onChange?: React.ChangeEventHandler<HTMLInputElement>;
-  onClick?: React.MouseEventHandler<HTMLInputElement>;
-  onFocus?: React.FocusEventHandler<HTMLInputElement>;
-  onBlur?: React.FocusEventHandler<HTMLInputElement>;
-  onKeyPress?: React.KeyboardEventHandler<HTMLInputElement>;
-  onKeyUp?: React.KeyboardEventHandler<HTMLInputElement>;
-  onKeyDown?: React.KeyboardEventHandler<HTMLInputElement>;
-}
-
-export const TextField: React.FC<textFieldProps> = ({
-  variant = 'standard',
-  size = 'md',
-  type = 'text',
-  label,
-
-  placeholder,
-
-  disabled,
-  required,
-  readOnly,
-
-  startIcon,
-  endIcon,
-  onChange,
-  onClick,
-
-  onKeyPress,
-  onKeyUp,
-  onKeyDown,
-  ...props
-}) => {
-  const baseStyles =
-    'grv-rounded grv-font-semibold grv-flex grv-items-center focus:grv-outline-none';
-
-  const sizeStyles = {
-    sm: 'grv-py-1 grv-px-2 grv-text-sm',
-    md: 'grv-py-2 grv-px-2',
-    lg: 'grv-py-3 grv-px-2 grv-text-lg',
-  };
-
-  const variantStyles = {
-    filled:
-      'grv-bg-primary-700 hover:grv-bg-opacity-95 grv-text-[#21351B] focus:grv-border-b-2',
-    outlined:
-      'grv-bg-transparent hover:grv-border-[#A6B1A0] grv-text-[#21351B] grv-border-[#DAE6D4] grv-border  focus:grv-border-[#35FF1F]',
-    standard:
-      ' grv-bg-transparent grv-text-[#21351B] grv-border-b-2 grv-border-[#DAE6D4] hover:grv-border-[#A6B1A0]  focus:grv-border-b-2 focus:grv-border-[#35FF1F]',
-  };
-
-  const textFieldStyles = `${baseStyles} ${sizeStyles[size]} ${
-    variantStyles[variant as keyof typeof variantStyles]
-  }`;
-
-  const iconStyles = `grv-inline-block grv-h-auto grv-w-auto ${startIcon ? 'grv-mr-2' : 'grv-ml-2'}`;
-  const inputRef = useRef<HTMLInputElement>(null);
-  const parentInputRef = useRef<HTMLInputElement>(null);
-
-  useEffect(() => {
-    if (inputRef.current && variant === 'filled') {
-      inputRef.current.className = 'grv-text-primaryText';
+import React, { forwardRef, useState, createContext, useContext } from 'react';
+import { motion, AnimatePresence, MotionProps } from 'framer-motion';
+import { cva, VariantProps } from 'class-variance-authority';
+import { cn } from '@utils/utils';
+import { Text } from '../Typography';
+
+const textFieldVariants = cva(
+    'grv-w-full grv-rounded-md grv-transition-all grv-duration-200 grv-ease-in-out',
+    {
+        variants: {
+            variant: {
+                filled: 'grv-bg-secondary-100 focus:bg-primary-50 grv-border-b-2 grv-border-primary focus:grv-outline-secondary-500 focus:grv-outline-2 focus:grv-border-secondary-500 ',
+                outlined: 'grv-bg-transparent grv-outline-2 focus:grv-outline-secondary-300  focus:border-primary-500 focus:grv-outline-2 focus:grv-border-secondary-500',
+                standard: 'grv-bg-transparent grv-border-none grv-outline-none grv-relative',
+            },
+            size: {
+                sm: 'grv-py-1 grv-px-2 grv-text-sm',
+                md: 'grv-py-2 grv-px-3 grv-text-base',
+                lg: 'grv-py-3 grv-px-4 grv-text-lg',
+            },
+            error: {
+                true: 'grv-border-error-500 focus:grv-border-error-500',
+                false: '',
+            },
+        },
+        defaultVariants: {
+            variant: 'standard',
+            size: 'md',
+            error: false,
+        },
     }
+);
+
+type TextFieldContextType = {
+    variant?: VariantProps<typeof textFieldVariants>['variant'];
+    size?: VariantProps<typeof textFieldVariants>['size'];
+    error?: boolean;
+    isFocused: boolean;
+    setIsFocused: (value: boolean) => void;
+};
 
-    if (inputRef.current && (variant === 'filled' || variant === 'outlined')) {
-      inputRef.current.className = 'grv-text-secondaryText';
-    }
-  }, [variant]);
-
-  const handleFocus = () => {
-    const parent = document.getElementById('parent');
-    if (parent) {
-      if (variant === 'standard' || variant === 'filled')
-        parent.style.borderBottom = '2px solid #35FF1F';
-      else parent.style.border = '2px solid #35FF1F';
+const TextFieldContext = createContext<TextFieldContextType | undefined>(undefined);
+
+const useTextField = () => {
+    const context = useContext(TextFieldContext);
+    if (!context) {
+        throw new Error('TextField components must be used within a TextField.Root');
     }
-  };
-
-  const handleBlur = () => {
-    const parent = document.getElementById('parent');
-    if (parent) {
-      if (variant === 'standard' || variant === 'filled')
-        parent.style.borderBottom = '2px solid #DAE6D4';
-      else parent.style.border = '2px solid #DAE6D4';
+    return context;
+};
+
+interface TextFieldRootProps extends MotionProps {
+    children: React.ReactNode;
+    variant?: VariantProps<typeof textFieldVariants>['variant'];
+    size?: VariantProps<typeof textFieldVariants>['size'];
+    error?: boolean;
+    className?: string;
+}
+
+interface TextFieldInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'> {
+    className?: string;
+}
+
+interface TextFieldIconProps {
+    children: React.ReactNode;
+    position: 'start' | 'end';
+    className?: string;
+}
+
+interface TextFieldHelperTextProps {
+    children: React.ReactNode;
+    className?: string;
+}
+
+const Root = ({ children, variant, size, error = false, className, ...props }: TextFieldRootProps) => {
+    const [isFocused, setIsFocused] = useState(false);
+
+    const containerVariants = {
+        initial: { scale: 1 },
+        focus: { scale: 1.01 },
+    };
+
+    const dashVariants = {
+        initial: {
+            scaleX: 1,
+            backgroundColor: '#e5e7eb'
+        },
+        focus: {
+            scaleX: 1,
+            backgroundColor: '#3b82f6'
+        },
+    };
+
+    return (
+        <TextFieldContext.Provider value={{ variant, size, error, isFocused, setIsFocused }}>
+            <div className="grv-flex grv-flex-col grv-gap-1">
+                <motion.div
+                    className={cn(
+                        'grv-relative',
+                        className
+                    )}
+                    initial="initial"
+                    animate={isFocused ? 'focus' : 'initial'}
+                    variants={containerVariants}
+                    {...props}
+                >
+                    <div className="grv-flex grv-items-center">
+                        {children}
+                    </div>
+                    {variant === 'standard' && (
+                        <motion.div
+                            className={cn(
+                                'grv-absolute grv-bottom-[-8px] grv-left-0 grv-right-0 grv-h-[2px] grv-rounded-full',
+                                error ? 'grv-bg-red-500' : 'grv-bg-gray-200'
+                            )}
+                            variants={dashVariants}
+                            initial="initial"
+                            animate={isFocused ? 'focus' : 'initial'}
+                            transition={{ duration: 0.2 }}
+                        />
+                    )}
+                </motion.div>
+            </div>
+        </TextFieldContext.Provider>
+    );
+};
+
+const Input = forwardRef<HTMLInputElement, TextFieldInputProps>(
+    ({ className, type = 'text', placeholder, disabled, required, readOnly, onFocus, onBlur, ...props }, ref) => {
+        const { variant, size, error, setIsFocused } = useTextField();
+
+        return (
+            <input
+                ref={ref}
+                type={type}
+                placeholder={placeholder}
+                disabled={disabled}
+                required={required}
+                readOnly={readOnly}
+                className={cn(
+                    textFieldVariants({ variant, size, error }),
+                    'grv-w-full grv-bg-transparent focus:outline-none',
+                    disabled && 'grv-cursor-not-allowed grv-opacity-50',
+                    className
+                )}
+                onFocus={(e) => {
+                    setIsFocused(true);
+                    onFocus?.(e);
+                }}
+                onBlur={(e) => {
+                    setIsFocused(false);
+                    onBlur?.(e);
+                }}
+                {...props}
+            />
+        );
     }
-  };
-
-  return (
-    <div
-      style={{
-        display: 'flex',
-        justifyContent: 'start',
-        flexDirection: 'column',
-        gap: '5px',
-      }}
-    >
-      {label && <label style={{ marginLeft: '2px' }}>{label}</label>}
-      <div
-        id="parent"
-        ref={parentInputRef}
-        style={{
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'start',
-          width: 'fit-content',
-        }}
-        className={textFieldStyles}
-      >
-        {startIcon && <span className={iconStyles}>{startIcon}</span>}
-        <input
-          style={{
-            outline: 'none',
-          }}
-          ref={inputRef}
-          type={type}
-          placeholder={placeholder}
-          disabled={disabled}
-          readOnly={readOnly}
-          required={required}
-          aria-describedby="helper-text"
-          onChange={onChange}
-          onClick={onClick}
-          onFocus={handleFocus}
-          onBlur={handleBlur}
-          onKeyPress={onKeyPress}
-          onKeyUp={onKeyUp}
-          onKeyDown={onKeyDown}
-          {...props}
-        />
-        {endIcon && <span className={iconStyles}>{endIcon}</span>}
-      </div>
-    </div>
-  );
+);
+
+const Icon = ({ children, position, className }: TextFieldIconProps) => {
+    const { isFocused } = useTextField();
+
+    const iconVariants = {
+        initial: { opacity: 0.7 },
+        focus: { opacity: 1 },
+    };
+
+    return (
+        <motion.span
+            className={cn(
+                position === 'start' ? 'grv-ml-3 grv-mr-2' : 'grv-mr-3 grv-ml-2',
+                'grv-text-text-secondary',
+                className
+            )}
+            variants={iconVariants}
+            initial="initial"
+            animate={isFocused ? 'focus' : 'initial'}
+        >
+            {children}
+        </motion.span>
+    );
 };
+
+const HelperText = ({ children, className }: TextFieldHelperTextProps) => {
+    const { error } = useTextField();
+
+    return (
+        <AnimatePresence>
+            <motion.p
+                className={cn(
+                    'grv-text-xs grv-mt-1 grv-block',
+                    error ? 'grv-text-error-500' : 'grv-text-text-secondary',
+                    className
+                )}
+                initial={{ opacity: 0, y: -10 }}
+                animate={{ opacity: 1, y: 0 }}
+                exit={{ opacity: 0, y: -10 }}
+                transition={{ duration: 0.2 }}
+            >
+                <Text>
+                    {children}
+                </Text>
+            </motion.p>
+        </AnimatePresence>
+    );
+};
+
+export const TextField = {
+    Root,
+    Input: Input,
+    Icon,
+    HelperText,
+};
+
+Input.displayName = 'TextField.Input';
\ No newline at end of file

From 370613b8e5f2ecbc86e5b1967c3ec004c467acdc Mon Sep 17 00:00:00 2001
From: SySagar <sysagar07@gmail.com>
Date: Sun, 12 Jan 2025 23:07:55 +0530
Subject: [PATCH 5/6] =?UTF-8?q?=F0=9F=93=A6=20chore:=20Version=20packages?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .changeset/tidy-drinks-doubt.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/tidy-drinks-doubt.md

diff --git a/.changeset/tidy-drinks-doubt.md b/.changeset/tidy-drinks-doubt.md
new file mode 100644
index 0000000..05ac4f3
--- /dev/null
+++ b/.changeset/tidy-drinks-doubt.md
@@ -0,0 +1,5 @@
+---
+'@groovy-box/ui': minor
+---
+
+storybook directory change, modal component, textfield and button component revamp

From e138034adc10f2df8cfbdb3b2310b328538de2e0 Mon Sep 17 00:00:00 2001
From: SySagar <sysagar07@gmail.com>
Date: Sun, 12 Jan 2025 23:13:02 +0530
Subject: [PATCH 6/6] chore: removed useless tests

---
 .github/workflows/button-tests.yaml   | 36 ------------
 .github/workflows/code_coverage.yml   | 80 +++++++++++++--------------
 .github/workflows/textfield-test.yaml | 36 ------------
 3 files changed, 40 insertions(+), 112 deletions(-)
 delete mode 100644 .github/workflows/button-tests.yaml
 delete mode 100644 .github/workflows/textfield-test.yaml

diff --git a/.github/workflows/button-tests.yaml b/.github/workflows/button-tests.yaml
deleted file mode 100644
index 306f33d..0000000
--- a/.github/workflows/button-tests.yaml
+++ /dev/null
@@ -1,36 +0,0 @@
-name: Button-Tests
-
-on:
-  push:
-    branches: [button]
-  pull_request:
-    branches: [button]
-
-jobs:
-  test_button:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-
-      - name: Install Dependencies
-        run: npm install
-
-      - name: Run Button Component Tests
-        run: npm run test __test__/Button.test.js
-
-        id: test_button_output
-        continue-on-error: true
-
-      - name: Set Test Result
-        if: always()
-        run: echo "::set-output name=button_tests_result::${{ job.status }}"
-
-      - name: Final Message
-        if: success()
-        run: echo "Button component tests passed! 🎉"
-
-      - name: Final Message on Failure
-        if: failure()
-        run: echo "Button component tests failed! ❌"
diff --git a/.github/workflows/code_coverage.yml b/.github/workflows/code_coverage.yml
index 7ea9144..ddd5957 100644
--- a/.github/workflows/code_coverage.yml
+++ b/.github/workflows/code_coverage.yml
@@ -1,40 +1,40 @@
-name: Running Code Coverage
-
-on:
-  push:
-    branches:
-      - dev
-  pull_request:
-    branches:
-      - dev
-
-jobs:
-  build:
-    runs-on: ubuntu-latest
-
-    strategy:
-      matrix:
-        node-version: [20.x]
-
-    steps:
-      - name: Checkout repository
-        uses: actions/checkout@v2
-        with:
-          fetch-depth: 2
-
-      - name: Set up Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v3
-        with:
-          node-version: ${{ matrix.node-version }}
-
-      - name: Install dependencies
-        run: npm install
-
-      - name: Run tests
-        run: npm run ui:coverage
-
-      - name: Upload coverage to Codecov
-        uses: codecov/codecov-action@v4
-        with:
-          token: ${{ secrets.CODECOV_TOKEN }}
-          directory: apps/ui/coverage
+# name: Running Code Coverage
+
+# on:
+#   push:
+#     branches:
+#       - dev
+#   pull_request:
+#     branches:
+#       - dev
+
+# jobs:
+#   build:
+#     runs-on: ubuntu-latest
+
+#     strategy:
+#       matrix:
+#         node-version: [20.x]
+
+#     steps:
+#       - name: Checkout repository
+#         uses: actions/checkout@v2
+#         with:
+#           fetch-depth: 2
+
+#       - name: Set up Node.js ${{ matrix.node-version }}
+#         uses: actions/setup-node@v3
+#         with:
+#           node-version: ${{ matrix.node-version }}
+
+#       - name: Install dependencies
+#         run: npm install
+
+#       - name: Run tests
+#         run: npm run ui:coverage
+
+#       - name: Upload coverage to Codecov
+#         uses: codecov/codecov-action@v4
+#         with:
+#           token: ${{ secrets.CODECOV_TOKEN }}
+#           directory: apps/ui/coverage
diff --git a/.github/workflows/textfield-test.yaml b/.github/workflows/textfield-test.yaml
deleted file mode 100644
index 30ccf1e..0000000
--- a/.github/workflows/textfield-test.yaml
+++ /dev/null
@@ -1,36 +0,0 @@
-name: Textfield-Tests
-
-on:
-  push:
-    branches: [textfield]
-  pull_request:
-    branches: [textfield]
-
-jobs:
-  test_button:
-    runs-on: ubuntu-latest
-
-    steps:
-      - name: Checkout code
-        uses: actions/checkout@v2
-
-      - name: Install Dependencies
-        run: npm install
-
-      - name: Run Button Component Tests
-        run: npm run test __test__/Textfield.test.js
-
-        id: test_textField_output
-        continue-on-error: true
-
-      - name: Set Test Result
-        if: always()
-        run: echo "::set-output name=textField_tests_result::${{ job.status }}"
-
-      - name: Final Message
-        if: success()
-        run: echo "TextField component tests passed! 🎉"
-
-      - name: Final Message on Failure
-        if: failure()
-        run: echo "Textfield component tests failed! ❌"