From 1ab8fc106848a586b70fac70db31bcb825a7096f Mon Sep 17 00:00:00 2001
From: Misael Arreola <misael.arreola@dd3tech.mx>
Date: Fri, 2 May 2025 15:47:41 -0600
Subject: [PATCH 1/2] feat: add file list components and new layout of input
 file

---
 exports.json                                  |  18 ++
 package.json                                  |  24 ++
 .../Form/File/FileImageItem.test.tsx          |  70 +++++
 src/components/Form/File/FileImageItem.tsx    | 187 +++++++++++++
 src/components/Form/File/FileItem.test.tsx    |  32 +++
 src/components/Form/File/FileItem.tsx         | 105 +++++++
 .../Form/File/FileItemButton.test.tsx         |  30 ++
 src/components/Form/File/FileItemButton.tsx   |  69 +++++
 .../Form/File/FileItemDropdown.test.tsx       |  28 ++
 src/components/Form/File/FileItemDropdown.tsx |  45 +++
 src/components/Form/File/FileList.test.tsx    |  28 ++
 src/components/Form/File/FileList.tsx         |  55 ++++
 src/components/Form/File/index.ts             |  15 +
 src/components/Form/Input/InputFile.test.tsx  |  28 +-
 src/components/Form/Input/InputFile.tsx       | 257 ++++++++++++------
 src/components/Form/index.ts                  |   3 +
 src/stories/FileItem.stories.tsx              |  31 +++
 src/stories/FileItemImage.stories.tsx         |  33 +++
 src/stories/FileList.stories.tsx              |  96 +++++++
 src/stories/InputFile.stories.tsx             |  15 +-
 20 files changed, 1061 insertions(+), 108 deletions(-)
 create mode 100644 src/components/Form/File/FileImageItem.test.tsx
 create mode 100644 src/components/Form/File/FileImageItem.tsx
 create mode 100644 src/components/Form/File/FileItem.test.tsx
 create mode 100644 src/components/Form/File/FileItem.tsx
 create mode 100644 src/components/Form/File/FileItemButton.test.tsx
 create mode 100644 src/components/Form/File/FileItemButton.tsx
 create mode 100644 src/components/Form/File/FileItemDropdown.test.tsx
 create mode 100644 src/components/Form/File/FileItemDropdown.tsx
 create mode 100644 src/components/Form/File/FileList.test.tsx
 create mode 100644 src/components/Form/File/FileList.tsx
 create mode 100644 src/components/Form/File/index.ts
 create mode 100644 src/stories/FileItem.stories.tsx
 create mode 100644 src/stories/FileItemImage.stories.tsx
 create mode 100644 src/stories/FileList.stories.tsx

diff --git a/exports.json b/exports.json
index 10c831f5f..dc7432a03 100644
--- a/exports.json
+++ b/exports.json
@@ -152,6 +152,21 @@
       "module": "./dist/esm/components/FeedBackBox/index.js",
       "default": "./dist/esm/components/FeedBackBox/index.js"
     },
+    "./FileItem": {
+      "require": "./dist/cjs/components/Form/File/FileItem.js",
+      "module": "./dist/esm/components/Form/File/FileItem.js",
+      "default": "./dist/esm/components/Form/File/FileList.js"
+    },
+    "./FileImageItem": {
+      "require": "./dist/cjs/components/Form/File/FileImageItem.js",
+      "module": "./dist/esm/components/Form/File/FileImageItem.js",
+      "default": "./dist/esm/components/Form/File/FileImageItem.js"
+    },
+    "./FileList": {
+      "require": "./dist/cjs/components/Form/File/FileList.js",
+      "module": "./dist/esm/components/Form/File/FileList.js",
+      "default": "./dist/esm/components/Form/File/FileList.js"
+    },
     "./FileViewer": {
       "require": "./dist/cjs/components/FileViewer/index.js",
       "module": "./dist/esm/components/FileViewer/index.js",
@@ -442,6 +457,9 @@
       "Dropdown": ["./dist/esm/components/Dropdown/index.d.ts"],
       "DynamicHeroIcon": ["./dist/esm/common/DynamicHeroIcon/index.d.ts"],
       "FeedBackBox": ["./dist/esm/components/FeedBackBox/index.d.ts"],
+      "FileItem": ["./dist/esm/components/Form/File/FileItem.d.ts"],
+      "FileImageItem": ["./dist/esm/components/Form/File/FileImageItem.d.ts"],
+      "FileList": ["./dist/esm/components/Form/File/FileList.d.ts"],
       "FileViewer": ["./dist/esm/components/FileViewer/index.d.ts"],
       "Filters": ["./dist/esm/components/Filters/index.d.ts"],
       "FormControl": ["./dist/esm/components/FormControl/index.d.ts"],
diff --git a/package.json b/package.json
index 444fc774d..201f737c7 100644
--- a/package.json
+++ b/package.json
@@ -288,6 +288,21 @@
             "module": "./dist/esm/components/FeedBackBox/index.js",
             "default": "./dist/esm/components/FeedBackBox/index.js"
         },
+        "./FileItem": {
+            "require": "./dist/cjs/components/Form/File/FileItem.js",
+            "module": "./dist/esm/components/Form/File/FileItem.js",
+            "default": "./dist/esm/components/Form/File/FileList.js"
+        },
+        "./FileImageItem": {
+            "require": "./dist/cjs/components/Form/File/FileImageItem.js",
+            "module": "./dist/esm/components/Form/File/FileImageItem.js",
+            "default": "./dist/esm/components/Form/File/FileImageItem.js"
+        },
+        "./FileList": {
+            "require": "./dist/cjs/components/Form/File/FileList.js",
+            "module": "./dist/esm/components/Form/File/FileList.js",
+            "default": "./dist/esm/components/Form/File/FileList.js"
+        },
         "./FileViewer": {
             "require": "./dist/cjs/components/FileViewer/index.js",
             "module": "./dist/esm/components/FileViewer/index.js",
@@ -636,6 +651,15 @@
             "FeedBackBox": [
                 "./dist/esm/components/FeedBackBox/index.d.ts"
             ],
+            "FileItem": [
+                "./dist/esm/components/Form/File/FileItem.d.ts"
+            ],
+            "FileImageItem": [
+                "./dist/esm/components/Form/File/FileImageItem.d.ts"
+            ],
+            "FileList": [
+                "./dist/esm/components/Form/File/FileList.d.ts"
+            ],
             "FileViewer": [
                 "./dist/esm/components/FileViewer/index.d.ts"
             ],
diff --git a/src/components/Form/File/FileImageItem.test.tsx b/src/components/Form/File/FileImageItem.test.tsx
new file mode 100644
index 000000000..852136115
--- /dev/null
+++ b/src/components/Form/File/FileImageItem.test.tsx
@@ -0,0 +1,70 @@
+import { vi } from 'vitest'
+import { render, fireEvent } from '@testing-library/react'
+import FileImageItem from './FileImageItem'
+
+const defaultProps = {
+  name: 'image.jpg',
+  type: 'image/jpeg',
+  src: 'https://example.com/image.jpg',
+  title: 'Test Image',
+  description: 'This is a test image description',
+  onChangeTitle: vi.fn(),
+  onChangeDescription: vi.fn()
+}
+
+describe('<FileImageItem>', () => {
+  it('renders component correctly', () => {
+    const { getByRole } = render(<FileImageItem {...defaultProps} />)
+
+    expect(getByRole('file-item-image')).toBeDefined()
+  })
+
+  it('displays the image with correct src', () => {
+    const { getByRole } = render(<FileImageItem {...defaultProps} />)
+    const image = getByRole('file-image')
+
+    expect(image).toHaveAttribute('src', 'https://example.com/image.jpg')
+  })
+
+  it('calls onChangeTitle when title input changes', () => {
+    const { getByDisplayValue } = render(<FileImageItem {...defaultProps} />)
+    const titleInput = getByDisplayValue('Test Image')
+
+    fireEvent.change(titleInput, {
+      target: { value: 'Updated Title', name: 'title' }
+    })
+
+    expect(defaultProps.onChangeTitle).toHaveBeenCalled()
+    expect(getByDisplayValue('Updated Title')).toBeDefined()
+  })
+
+  it('calls onChangeDescription when description input changes', () => {
+    const { getByDisplayValue } = render(<FileImageItem {...defaultProps} />)
+    const descriptionInput = getByDisplayValue(
+      'This is a test image description'
+    )
+
+    fireEvent.change(descriptionInput, {
+      target: { value: 'Updated description', name: 'description' }
+    })
+
+    expect(defaultProps.onChangeDescription).toHaveBeenCalled()
+    expect(getByDisplayValue('Updated description')).toBeDefined()
+  })
+
+  it('displays character count for description', () => {
+    const { getByRole, getByDisplayValue } = render(
+      <FileImageItem {...defaultProps} />
+    )
+    const counter = getByRole('file-description-length')
+    const descriptionInput = getByDisplayValue(
+      'This is a test image description'
+    )
+
+    fireEvent.change(descriptionInput, {
+      target: { value: 'Short', name: 'description' }
+    })
+
+    expect(counter).toHaveTextContent('5/100')
+  })
+})
diff --git a/src/components/Form/File/FileImageItem.tsx b/src/components/Form/File/FileImageItem.tsx
new file mode 100644
index 000000000..2c4821c7a
--- /dev/null
+++ b/src/components/Form/File/FileImageItem.tsx
@@ -0,0 +1,187 @@
+import {
+  ChangeEvent,
+  ChangeEventHandler,
+  CSSProperties,
+  ReactNode,
+  useState
+} from 'react'
+import { Flex } from 'components/Layout'
+import Text from 'components/Typography'
+import BaseInput from '../Input/BaseInput'
+import TextArea from '../TextArea'
+import FileItem from './FileItem'
+
+export interface FileImageItemProps {
+  /**
+   * Source URL for the image preview
+   */
+  src: string
+  /**
+   * Title of the file
+   */
+  title: string
+  /**
+   * Description of the file
+   */
+  description: string
+  /**
+   * Placeholder text for the title input
+   */
+  titlePlaceholder?: string
+  /**
+   * Placeholder text for the description input
+   */
+  descriptionPlaceholder?: string
+  /**
+   * Label for the title input
+   */
+  titleLabel?: string
+  /**
+   * Label for the description input
+   */
+  descriptionLabel?: string
+  /**
+   * Maximum length for the description text
+   */
+  descriptionMaxLength?: number
+  /**
+   * Name of the file to display
+   */
+  name: string
+  /**
+   * Type/format of the file
+   */
+  type: string
+  /**
+   * Size of the file in KB (optional)
+   */
+  fileSize?: number
+  /**
+   * Additional CSS class names
+   */
+  className?: string
+  /**
+   * Custom CSS styles
+   */
+  style?: CSSProperties
+  /**
+   * Children components (typically action buttons)
+   */
+  children?: ReactNode
+  /**
+   * Handler for title changes
+   */
+  onChangeTitle: ChangeEventHandler<HTMLInputElement>
+  /**
+   * Handler for description changes
+   */
+  onChangeDescription: ChangeEventHandler<HTMLTextAreaElement>
+}
+
+interface stateType {
+  title: string
+  description: string
+}
+
+export const FileImageItem = ({
+  name,
+  type,
+  fileSize,
+  src,
+  title,
+  description,
+  titlePlaceholder,
+  descriptionPlaceholder,
+  titleLabel,
+  descriptionLabel,
+  descriptionMaxLength = 100,
+  className,
+  style,
+  children,
+  onChangeTitle,
+  onChangeDescription
+}: FileImageItemProps) => {
+  const [state, setState] = useState<stateType>({
+    title: title || '',
+    description: description || ''
+  })
+
+  const handleChange = (
+    e: ChangeEvent<HTMLInputElement> | ChangeEvent<HTMLTextAreaElement>
+  ) => {
+    setState((prev) => ({
+      ...prev,
+      [e.target.name]: e.target.value
+    }))
+    e.target.name === 'title' &&
+      onChangeTitle(e as ChangeEvent<HTMLInputElement>)
+    e.target.name === 'description' &&
+      onChangeDescription(e as ChangeEvent<HTMLTextAreaElement>)
+  }
+
+  return (
+    <Flex
+      role="file-item-image"
+      className="flex-col bg-white rounded-lg pb-2"
+      gap="2"
+    >
+      <FileItem
+        name={name}
+        type={type}
+        fileSize={fileSize}
+        className={className}
+        style={style}
+      >
+        {children}
+      </FileItem>
+      <div
+        className="px-4 w-full h-full max-h-[164px] grid gap-4"
+        style={{
+          gridTemplateColumns: '350px 1fr'
+        }}
+      >
+        <figure
+          className="w-full border border-gray-100 rounded-lg overflow-hidden"
+          style={{ maxWidth: '350px', height: '164px' }}
+        >
+          <img
+            role="file-image"
+            src={src}
+            alt="File"
+            className="w-full h-full object-cover"
+          />
+        </figure>
+        <Flex className="flex-col" gap="4">
+          <BaseInput
+            name="title"
+            style={{ marginTop: 0 }}
+            label={titleLabel}
+            placeholder={titlePlaceholder}
+            value={state.title}
+            onChange={handleChange}
+          />
+          <Flex className="flex-col gap-2">
+            <TextArea
+              name="description"
+              maxLength={descriptionMaxLength}
+              label={descriptionLabel}
+              placeholder={descriptionPlaceholder}
+              value={state.description}
+              onChange={handleChange}
+            />
+            <Text
+              role="file-description-length"
+              size="xs"
+              textMuted500
+              className="text-right"
+            >
+              {state.description?.length || 0}/{descriptionMaxLength}
+            </Text>
+          </Flex>
+        </Flex>
+      </div>
+    </Flex>
+  )
+}
+
+export default FileImageItem
diff --git a/src/components/Form/File/FileItem.test.tsx b/src/components/Form/File/FileItem.test.tsx
new file mode 100644
index 000000000..103f1103c
--- /dev/null
+++ b/src/components/Form/File/FileItem.test.tsx
@@ -0,0 +1,32 @@
+import { render } from '@testing-library/react'
+import FileItem from './FileItem'
+
+const defaultProps = {
+  name: 'test-file.pdf',
+  type: 'application/pdf',
+  fileSize: 1024
+}
+
+describe('<FileItem>', () => {
+  it('should render correctly', () => {
+    const { getByRole } = render(<FileItem {...defaultProps} />)
+
+    expect(getByRole('file-item')).toBeDefined()
+  })
+
+  it('displays file size when provided', () => {
+    const { getByRole } = render(<FileItem {...defaultProps} />)
+
+    expect(getByRole('file-size')).toBeDefined()
+  })
+
+  it('renders children components', () => {
+    const { getByTestId } = render(
+      <FileItem {...defaultProps}>
+        <button data-testid="test-button">Action</button>
+      </FileItem>
+    )
+
+    expect(getByTestId('test-button')).toBeInTheDocument()
+  })
+})
diff --git a/src/components/Form/File/FileItem.tsx b/src/components/Form/File/FileItem.tsx
new file mode 100644
index 000000000..99a542c04
--- /dev/null
+++ b/src/components/Form/File/FileItem.tsx
@@ -0,0 +1,105 @@
+import { CSSProperties, ReactNode } from 'react'
+import { composeClasses } from 'lib/classes'
+import { Flex } from 'components/Layout'
+import ToolTipHover from 'components/ToolTipHover'
+import Text from 'components/Typography'
+import FileItemButton from './FileItemButton'
+import FileItemDropdown from './FileItemDropdown'
+
+export interface FileItemProps {
+  /**
+   * Name of the file to display
+   */
+  name: string
+  /**
+   * Type/format of the file (e.g., 'application/pdf')
+   */
+  type: string
+  /**
+   * Size of the file in KB (optional)
+   */
+  fileSize?: number
+  /**
+   * Additional CSS class names
+   */
+  className?: string
+  /**
+   * Custom CSS styles
+   */
+  style?: CSSProperties
+  /**
+   * Children components (typically FileItemButton or FileItemDropdown elements)
+   */
+  children?: ReactNode
+}
+
+export const FileItem = ({
+  name,
+  type,
+  fileSize,
+  className,
+  style,
+  children
+}: FileItemProps) => {
+  return (
+    <div
+      role="file-item"
+      className={composeClasses(
+        'w-full h-10 px-4 rounded-lg grid items-center bg-white transition duration-300 ease-out focus:ease-in',
+        className
+      )}
+      style={{
+        gridTemplateColumns: '1fr auto',
+        ...style
+      }}
+    >
+      <Flex alignItems="center" gap="2" className="mr-auto overflow-hidden">
+        <ToolTipHover
+          variantPopup="dark"
+          complementPosition={{ top: -15, left: 0 }}
+          element={
+            <Flex alignItems="center" justifyContent="start">
+              <div className="truncate">
+                <Text role="file-title" size="xs">
+                  {name}
+                </Text>
+              </div>
+              {fileSize && (
+                <Text role="file-size" className="mt-0.5 ml-0.5" size="xs">
+                  {fileSize} KB
+                </Text>
+              )}
+            </Flex>
+          }
+        >
+          <Text
+            role="file-name"
+            variant="small"
+            className="block text-left truncate"
+          >
+            {name}
+          </Text>
+          <Text role="file-type" variant="small" className="block text-left">
+            {type}
+          </Text>
+        </ToolTipHover>
+      </Flex>
+      <div
+        role="file-actions"
+        className="grid items-center gap-3"
+        style={{
+          gridAutoFlow: 'column',
+          gridTemplateColumns: 'repeat(auto-fit, auto)'
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  )
+}
+
+FileItem.Button = FileItemButton
+FileItem.Dropdown = FileItemDropdown
+FileItem.displayName = 'FileItem'
+
+export default FileItem
diff --git a/src/components/Form/File/FileItemButton.test.tsx b/src/components/Form/File/FileItemButton.test.tsx
new file mode 100644
index 000000000..f9b3da9f6
--- /dev/null
+++ b/src/components/Form/File/FileItemButton.test.tsx
@@ -0,0 +1,30 @@
+import { vi } from 'vitest'
+import { render, screen, fireEvent } from '@testing-library/react'
+import FileItemButton from './FileItemButton'
+
+const handleClick = vi.fn()
+
+describe('<FileItemButton>', () => {
+  it('renders children content', () => {
+    const { getByRole } = render(<FileItemButton>Test Button</FileItemButton>)
+
+    expect(getByRole('button-file-item')).toBeDefined()
+  })
+
+  it('calls onClick handler when clicked', () => {
+    render(<FileItemButton onClick={handleClick}>Click Me</FileItemButton>)
+
+    fireEvent.click(screen.getByText('Click Me'))
+    expect(handleClick).toHaveBeenCalledTimes(1)
+  })
+
+  it('applies danger styling when isDanger is true', () => {
+    const { getByRole } = render(
+      <FileItemButton isDanger>Danger Button</FileItemButton>
+    )
+
+    const buttonElement = getByRole('button-file-item').closest('button')
+    expect(buttonElement).toHaveClass('border-gray-500')
+    expect(buttonElement).toHaveClass('text-red-500')
+  })
+})
diff --git a/src/components/Form/File/FileItemButton.tsx b/src/components/Form/File/FileItemButton.tsx
new file mode 100644
index 000000000..f619971fa
--- /dev/null
+++ b/src/components/Form/File/FileItemButton.tsx
@@ -0,0 +1,69 @@
+import { ReactNode } from 'react'
+import { composeClasses } from 'lib/classes'
+import { Button, IButtonProps } from 'components/Buttons'
+
+export interface FileItemButtonProps {
+  /**
+   * Content to display inside the button
+   */
+  children: ReactNode
+  /**
+   * Additional CSS class names
+   */
+  className?: string
+  /**
+   * Function to call when the button is clicked
+   */
+  onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  /**
+   * Whether the button is in a loading state
+   */
+  isLoading?: boolean
+  /**
+   * Button variant style
+   */
+  variant?: IButtonProps['variant']
+  /**
+   * Whether the button represents a dangerous action
+   */
+  isDanger?: boolean
+}
+
+const BUTTON_VARIANTS = {
+  primary:
+    'border-gray-500 text-gray-500 hover:border-blue-500 hover:text-white hover:bg-blue-500',
+  secondary:
+    'border-gray-500 text-red-500 hover:border-red-500 hover:text-white hover:bg-red-500'
+}
+
+const FileItemButton = ({
+  children,
+  className,
+  onClick,
+  isLoading,
+  variant = 'secondary',
+  isDanger,
+  ...props
+}: FileItemButtonProps) => {
+  return (
+    <Button
+      {...props}
+      role="button-file-item"
+      className={composeClasses(
+        'w-4 h-4 rounded-full flex items-center justify-center flex-shrink-0 transition-all duration-300 ease-linear',
+        BUTTON_VARIANTS[isDanger ? 'secondary' : 'primary'],
+        className
+      )}
+      style={{
+        padding: 2
+      }}
+      onClick={onClick}
+      isLoading={isLoading}
+      variant={variant}
+    >
+      {children}
+    </Button>
+  )
+}
+
+export default FileItemButton
diff --git a/src/components/Form/File/FileItemDropdown.test.tsx b/src/components/Form/File/FileItemDropdown.test.tsx
new file mode 100644
index 000000000..5e8006938
--- /dev/null
+++ b/src/components/Form/File/FileItemDropdown.test.tsx
@@ -0,0 +1,28 @@
+import { render, fireEvent } from '@testing-library/react'
+import FileItemDropdown from './FileItemDropdown'
+
+describe('FileItemDropdown', () => {
+  it('renders the icon in the trigger', () => {
+    const { getByRole } = render(
+      <FileItemDropdown icon="s">
+        <div>Dropdown Content</div>
+      </FileItemDropdown>
+    )
+
+    expect(getByRole('trigger-button')).toBeDefined()
+  })
+
+  it('shows dropdown content when clicked', () => {
+    const { getByRole, queryByTestId, getByTestId } = render(
+      <FileItemDropdown icon="s">
+        <div data-testid="dropdown-content">Dropdown Content</div>
+      </FileItemDropdown>
+    )
+
+    expect(queryByTestId('dropdown-content')).not.toBeVisible()
+
+    fireEvent.click(getByRole('trigger-button'))
+
+    expect(getByTestId('dropdown-content')).toBeVisible()
+  })
+})
diff --git a/src/components/Form/File/FileItemDropdown.tsx b/src/components/Form/File/FileItemDropdown.tsx
new file mode 100644
index 000000000..8c94688e8
--- /dev/null
+++ b/src/components/Form/File/FileItemDropdown.tsx
@@ -0,0 +1,45 @@
+import { ReactNode } from 'react'
+import Dropdown from 'components/Dropdown'
+import Circle from 'components/Circle'
+
+export interface FileItemDropdownProps {
+  /**
+   * Content to display in the dropdown menu
+   */
+  children: ReactNode
+  /**
+   * Icon to display in the dropdown trigger
+   */
+  icon: ReactNode
+  /**
+   * Additional CSS class names
+   */
+  className?: string
+}
+
+const FileItemDropdown = ({
+  className,
+  icon,
+  children
+}: FileItemDropdownProps) => {
+  const Icon = icon
+
+  return (
+    <Dropdown className={className}>
+      <Dropdown.Trigger>
+        <Circle
+          role="trigger-button"
+          width="24px"
+          height="24px"
+          useBackground={false}
+          className="text-blue-500 border border-gray-500 hover:border-blue-500 hover:text-white hover:bg-blue-500 rounded-full flex items-center justify-center flex-shrink-0 transition-all duration-300 ease-linear cursor-pointer"
+        >
+          {Icon}
+        </Circle>
+      </Dropdown.Trigger>
+      <Dropdown.Menu>{children}</Dropdown.Menu>
+    </Dropdown>
+  )
+}
+
+export default FileItemDropdown
diff --git a/src/components/Form/File/FileList.test.tsx b/src/components/Form/File/FileList.test.tsx
new file mode 100644
index 000000000..bdaf67a73
--- /dev/null
+++ b/src/components/Form/File/FileList.test.tsx
@@ -0,0 +1,28 @@
+import { render } from '@testing-library/react'
+import FileList from './FileList'
+
+describe('<FileList>', () => {
+  it('renders component correctly', () => {
+    const { getByRole } = render(<FileList />)
+
+    expect(getByRole('file-list')).toBeDefined()
+  })
+
+  it('renders header when provided', () => {
+    const { getByRole } = render(
+      <FileList header={<h2>File List Header</h2>} />
+    )
+
+    expect(getByRole('file-list-header')).toBeDefined()
+  })
+
+  it('renders children components', () => {
+    const { getByRole } = render(
+      <FileList>
+        <div data-testid="child-component">Child Component</div>
+      </FileList>
+    )
+
+    expect(getByRole('file-list-content')).toBeDefined()
+  })
+})
diff --git a/src/components/Form/File/FileList.tsx b/src/components/Form/File/FileList.tsx
new file mode 100644
index 000000000..93ec16dd5
--- /dev/null
+++ b/src/components/Form/File/FileList.tsx
@@ -0,0 +1,55 @@
+import React, { ReactNode } from 'react'
+import { composeClasses } from 'lib/classes'
+import { Flex } from 'components/Layout'
+import InputFile, { InputFileProps } from '../Input/InputFile'
+
+export interface FileListProps {
+  /**
+   * Props for the InputFile component at the top of the list
+   */
+  inputFileProps?: InputFileProps
+  /**
+   * Optional header element to display above the file list
+   */
+  header?: ReactNode
+  /**
+   * Children components (FileItem or FileImageItem elements)
+   */
+  children?: ReactNode
+  /**
+   * Additional CSS class names
+   */
+  className?: string
+}
+
+export const FileList: React.FC<FileListProps> = ({
+  inputFileProps,
+  header,
+  children,
+  className
+}) => {
+  return (
+    <Flex
+      role="file-list"
+      gap="2"
+      className={composeClasses(
+        'w-full p-2 flex-col bg-gray-50 rounded-lg',
+        className
+      )}
+    >
+      {inputFileProps && <InputFile className="bg-white" {...inputFileProps} />}
+      {header && (
+        <div role="file-list-header" className="w-full mt-2">
+          {header}
+        </div>
+      )}
+      {children && (
+        <Flex role="file-list-content" gap="2" className="w-full flex-col">
+          {children}
+        </Flex>
+      )}
+    </Flex>
+  )
+}
+
+export default FileList
diff --git a/src/components/Form/File/index.ts b/src/components/Form/File/index.ts
new file mode 100644
index 000000000..c2f8497a2
--- /dev/null
+++ b/src/components/Form/File/index.ts
@@ -0,0 +1,15 @@
+/*
+ * Copyright (c) DD360 and its affiliates.
+ */
+
+import FileList from './FileList'
+
+export { default as FileList } from './FileList'
+export default FileList
+export * from './FileList'
+
+export { default as FileItem } from './FileItem'
+export * from './FileItem'
+
+export { default as FileImageItem } from './FileImageItem'
+export * from './FileImageItem'
diff --git a/src/components/Form/Input/InputFile.test.tsx b/src/components/Form/Input/InputFile.test.tsx
index 155f7a58a..05ccf5a71 100644
--- a/src/components/Form/Input/InputFile.test.tsx
+++ b/src/components/Form/Input/InputFile.test.tsx
@@ -1,4 +1,3 @@
-import React from 'react'
 import { fireEvent, render } from '@testing-library/react'
 import { describe, it, vi } from 'vitest'
 import InputFile from './InputFile'
@@ -13,39 +12,32 @@ describe('<InputFile />', () => {
   it('should render label and labelAction correctly', () => {
     const { getByText } = render(<InputFile />)
 
-    const label = getByText('Drag & drop your files or')
+    const label = getByText('Drag & drop your files')
     const labelAction = getByText('browse from your device')
 
     expect(label).toBeInTheDocument()
     expect(labelAction).toBeInTheDocument()
   })
 
-  it('should render boxMessage correctly', () => {
-    const { getByText } = render(
-      <InputFile boxMessage="PDF, PNG, JPG, Peso máximo por archivo 20 MB" />
-    )
-
-    expect(
-      getByText('PDF, PNG, JPG, Peso máximo por archivo 20 MB').textContent
-    ).toEqual('PDF, PNG, JPG, Peso máximo por archivo 20 MB')
-  })
-
   it('handles onDragEnd, onDragLeave, and onDragOver', () => {
     const onChange = vi.fn()
-    const { getByRole } = render(
-      <InputFile role="input-file" onChange={onChange} />
+    const { getByRole, queryByText } = render(
+      <InputFile
+        role="input-file"
+        onChange={onChange}
+        dragMessage="Drag text"
+      />
     )
     const input = getByRole('input-file')
-    const borderContainer = getByRole('border')
 
     fireEvent.dragOver(input)
-    expect(borderContainer.className).toContain('border-dashed bg-gray-50')
+    expect(queryByText('Drag text')).toBeDefined()
 
     fireEvent.dragEnd(input)
-    expect(borderContainer.className).not.toContain('border-dashed bg-gray-50')
+    expect(queryByText('Drag text')).toBeDefined()
 
     fireEvent.dragLeave(input)
-    expect(borderContainer.className).not.toContain('border-dashed bg-gray-50')
+    expect(queryByText('Drag text')).toBeNull()
   })
 
   it('should be change input file value', () => {
diff --git a/src/components/Form/Input/InputFile.tsx b/src/components/Form/Input/InputFile.tsx
index a48e98c84..08bc9ec39 100644
--- a/src/components/Form/Input/InputFile.tsx
+++ b/src/components/Form/Input/InputFile.tsx
@@ -3,39 +3,45 @@
  */
 
 import { ChangeEvent, ReactNode, useCallback, useState } from 'react'
-import UploadIcon from '@heroicons/react/outline/UploadIcon'
-import ProgressBar from '../../ProgressBar/ProgressBar'
+import {
+  UploadIcon,
+  PaperClipIcon,
+  TrashIcon,
+  DownloadIcon,
+  EyeIcon
+} from '@heroicons/react/outline'
+import { InformationCircleIcon } from '@heroicons/react/solid'
 import { composeClasses } from 'lib/classes'
+import { Flex } from 'components/Layout'
+import Tooltip from 'components/Tooltip'
+import { Button } from 'components/Buttons'
+import ProgressBar from '../../ProgressBar/ProgressBar'
 import Text from '../../Typography/Text'
 
 export interface InputFileProps extends React.HTMLProps<HTMLInputElement> {
   progressIndicator?: number
-  hintText?: string
-  boxMessage?: string
   dragMessage?: ReactNode
-  label?: string
-  labelAction?: string
+  title?: string
+  subtitle?: string
   error?: { show?: boolean; message?: ReactNode }
   roleContainer?: string
+  singleFile?: boolean
+  tooltipText?: string
+  uploadText?: string
+  onView?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  onDownload?: (e: React.MouseEvent<HTMLButtonElement>) => void
+  onDelete?: (e: React.MouseEvent<HTMLButtonElement>) => void
 }
 
-function InputFile({
+export function InputFile({
   /**
    * This property works to provide a value to the progress bar when uploading a file
    */
   progressIndicator = 0,
-  /**
-   * works to put a text as a suffix of the Input box
-   */
-  hintText = 'Upload in PDF format and signed by all parties (if applicable).',
   /**
    * works to put a custom message to the message when doing dragAnDrop
    */
   dragMessage = 'Release here',
-  /**
-   * Indicates the message that goes in the middle of the box where the files are dropped.
-   */
-  boxMessage = 'PDF Maximum weight per file 20 MB',
   /**
    * is a callback to listen for input changes from outside the component.
    */
@@ -47,11 +53,11 @@ function InputFile({
   /**
    * It is a text message that goes on top of the box
    */
-  label = 'Drag & drop your files or',
+  title = 'Drag & drop your files',
   /**
-   * is the message that works to call the Input and with this upload files from a text button
+   * is the message that goes below the title
    */
-  labelAction = 'browse from your device',
+  subtitle = 'browse from your device',
   /**
    * works to reference the role of the entire component container, which is not an Input, just a container
    */
@@ -63,103 +69,180 @@ function InputFile({
     show: false,
     message: 'File type not allowed or exceeds the maximum weight'
   },
+  /**
+   * is a boolean that works to indicate if the input selects a single file or multiple files
+   */
+  singleFile = false,
+  /**
+   * is a string that works to indicate the tooltip text
+   */
+  tooltipText,
+  /**
+   * is a string that works to indicate the action of the label
+   */
+  uploadText = 'Upload',
+  /**
+   * is a function that works to view the file
+   */
+  onView,
+  /**
+   * is a function that works to download the file
+   */
+  onDownload,
+  /**
+   * is a function that works to delete the file
+   */
+  onDelete,
   ...otherProps
 }: InputFileProps) {
-  const [isDrag, setIsDrag] = useState(false)
+  const [isDrag, setIsDrag] = useState<boolean>(false)
+  const [file, setFile] = useState<FileList | null>(null)
   const disabled = otherProps.disabled || false
 
   const handleChange = useCallback(
     (event: ChangeEvent<HTMLInputElement>) => {
       if (disabled) return
       setIsDrag(false)
+      setFile(event.target.files)
       onChange && onChange(event)
     },
     [isDrag, onChange]
   )
 
-  const getBannerMessage = useCallback((): ReactNode => {
-    if (error?.show && error.message) return error?.message
-    if (isDrag) return dragMessage
-    return boxMessage
-  }, [error, isDrag, dragMessage, boxMessage])
-
   return (
-    <div
+    <label
       role={roleContainer}
-      className={composeClasses(disabled && 'cursor-not-allowed')}
+      htmlFor={id}
+      className={composeClasses(
+        'relative w-full p-4 flex flex-col gap-1 border border-dashed bg-white border-gray-400 rounded-xl hover:bg-blue-50',
+        isDrag && 'bg-gray-50',
+        error?.show && 'border-error',
+        disabled && 'cursor-not-allowed'
+      )}
     >
-      <Text variant="p" className="mb-2 text-xs text-gray-400">
-        {label}{' '}
-        <label
-          htmlFor={id}
-          className={
-            composeClasses(
-              'text-primary underline underline-offset-1 leading-6',
-              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-            ) as string
-          }
-        >
-          {labelAction}
-        </label>
+      <Flex justifyContent="between" alignItems="center">
+        <Flex alignItems="center" gap="2">
+          <Text>{title}</Text>
+          {tooltipText && (
+            <Tooltip content={tooltipText} position="right">
+              <InformationCircleIcon className="w-4 h-4 text-gray-900 z-10" />
+            </Tooltip>
+          )}
+        </Flex>
+        {!(singleFile && file?.length) && (
+          <Flex alignItems="center" gap="2">
+            <UploadIcon className="w-4 h-4 text-blue-700" />
+            <Text variant="small" className="text-blue-700">
+              {uploadText}
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+      <Text textMuted500 style={{ fontSize: '10px' }}>
+        {subtitle}
       </Text>
-      <label
-        role="border"
-        htmlFor={id}
+      <div
         className={composeClasses(
-          'border relative h-20 border-gray-400 rounded-xl w-full flex items-center justify-center text-gray-400 gap-3 mb-2 hover:bg-gray-50',
-          !isDrag && 'border-dotted',
-          isDrag && 'border-dashed bg-gray-50'
+          'flex gap-3 items-center',
+          error?.show && 'text-error'
         )}
       >
-        <div
+        <input
+          {...otherProps}
+          type="file"
+          id={id}
+          onChange={handleChange}
+          onDragEnd={() => setIsDrag(false)}
+          onDragLeave={() => setIsDrag(false)}
+          onDragOver={() => {
+            if (disabled) return
+            setIsDrag(true)
+          }}
+          disabled={progressIndicator >= 1 || disabled}
           className={composeClasses(
-            'flex gap-3 items-center',
-            error?.show && 'text-error'
+            'opacity-0 absolute top-0 left-0 bottom-0 right-0',
+            disabled ? 'cursor-not-allowed' : 'cursor-pointer'
           )}
-        >
-          <input
-            {...otherProps}
-            type="file"
-            id={id}
-            onChange={handleChange}
-            onDragEnd={() => setIsDrag(false)}
-            onDragLeave={() => setIsDrag(false)}
-            onDragOver={() => {
-              if (disabled) return
-              setIsDrag(true)
-            }}
-            disabled={progressIndicator >= 1 || disabled}
-            className={composeClasses(
-              'opacity-0 absolute top-0 left-0 bottom-0 right-0',
-              disabled ? 'cursor-not-allowed' : 'cursor-pointer'
-            )}
-          />
-          <UploadIcon className="w-5 h-5" />
-          <div className="flex flex-col gap-1">
-            <Text variant="small" className="text-center">
-              {getBannerMessage()}
-            </Text>
-            {!error?.show && !isDrag && progressIndicator !== 0 && (
+        />
+        {isDrag && !error?.show && (
+          <Text className="whitespace-nowrap" style={{ fontSize: '10px' }}>
+            {dragMessage}
+          </Text>
+        )}
+        {error?.show && (
+          <Text className="whitespace-nowrap" style={{ fontSize: '10px' }}>
+            {error.message}
+          </Text>
+        )}
+        {!error?.show && !isDrag && progressIndicator !== 0 && (
+          <Flex alignItems="center" gap="2" className="w-full">
+            <UploadIcon className="w-4 h-4 text-gray-400 flex-shrink-0" />
+            <Flex className="w-full flex-col" gap="1">
+              <Text textMuted500 style={{ fontSize: '10px' }}>
+                {file?.item(0)?.name}
+              </Text>
               <ProgressBar
                 value={progressIndicator}
                 backgroundColor="var(--primary)"
                 height="6px"
                 bgColorContainer="#EFF6FF"
               />
-            )}
-          </div>
-        </div>
-      </label>
-      {hintText && (
-        <Text
-          style={{ fontSize: '10px' }}
-          variant="p"
-          className="italic text-info font-semibold"
-        >
-          {hintText}
-        </Text>
-      )}
-    </div>
+            </Flex>
+          </Flex>
+        )}
+        {singleFile && file?.length === 1 && !error?.show && (
+          <Flex
+            justifyContent="between"
+            alignItems="center"
+            gap="2"
+            className="w-full z-10"
+            onClick={(e) => {
+              e.preventDefault()
+              e.stopPropagation()
+            }}
+          >
+            <Flex alignItems="center" gap="2">
+              <PaperClipIcon className="w-4 h-4 text-gray-400 flex-shrink-0" />
+              <Text size="xs" className="whitespace-nowrap">
+                {file.item(0)?.name}
+              </Text>
+            </Flex>
+            <Flex alignItems="center" gap="2">
+              {onView && (
+                <Button
+                  variant="ghost"
+                  padding="0.5"
+                  className="rounded-full"
+                  onClick={onView}
+                >
+                  <EyeIcon className="w-4 h-4 text-gray-400 flex-shrink-0 cursor-pointer" />
+                </Button>
+              )}
+              {onDownload && (
+                <Button
+                  variant="ghost"
+                  padding="0.5"
+                  className="rounded-full"
+                  onClick={onDownload}
+                >
+                  <DownloadIcon className="w-4 h-4 text-gray-400 flex-shrink-0" />
+                </Button>
+              )}
+              {onDelete && (
+                <Button
+                  variant="ghost"
+                  padding="0.5"
+                  className="rounded-full"
+                  onClick={onDelete}
+                >
+                  <TrashIcon className="w-4 h-4 text-red-500 flex-shrink-0" />
+                </Button>
+              )}
+            </Flex>
+          </Flex>
+        )}
+      </div>
+    </label>
   )
 }
 
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
index 23e08aec3..ac978b560 100644
--- a/src/components/Form/index.ts
+++ b/src/components/Form/index.ts
@@ -22,3 +22,6 @@ export { default as MultiSelect } from './MultiSelect'
 export * from './MultiSelect'
 
 export * from './shared'
+
+export { default as FileItem } from './File'
+export * from './File'
diff --git a/src/stories/FileItem.stories.tsx b/src/stories/FileItem.stories.tsx
new file mode 100644
index 000000000..10ba9f1c2
--- /dev/null
+++ b/src/stories/FileItem.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import FileItemComponent from '../components/Form/File/FileItem'
+import Text from '../components/Typography/Text'
+
+const meta: Meta<typeof FileItemComponent> = {
+  title: 'Form/File/FileItem',
+  component: FileItemComponent
+}
+
+export default meta
+type Story = StoryObj<typeof FileItemComponent>
+
+export const FileItem: Story = {
+  args: {
+    name: 'Document.pdf'
+  },
+  render: (args) => (
+    <div className="flex flex-col gap-2">
+      <FileItemComponent {...args}>
+        <Text size="xs" textMuted500>
+          Your Documents
+        </Text>
+        <FileItemComponent.Button>a</FileItemComponent.Button>
+        <FileItemComponent.Button>b</FileItemComponent.Button>
+        <FileItemComponent.Button>c</FileItemComponent.Button>
+        <FileItemComponent.Dropdown icon="x">a</FileItemComponent.Dropdown>
+      </FileItemComponent>
+    </div>
+  )
+}
diff --git a/src/stories/FileItemImage.stories.tsx b/src/stories/FileItemImage.stories.tsx
new file mode 100644
index 000000000..7b2b29cd6
--- /dev/null
+++ b/src/stories/FileItemImage.stories.tsx
@@ -0,0 +1,33 @@
+import { ChangeEvent } from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import FileImageItemComponent from '../components/Form/File/FileImageItem'
+
+const meta: Meta<typeof FileImageItemComponent> = {
+  title: 'Form/File/FileImageItem',
+  component: FileImageItemComponent
+}
+
+export default meta
+type Story = StoryObj<typeof FileImageItemComponent>
+
+export const FileImageItem: Story = {
+  args: {
+    name: 'Document.pdf',
+    type: 'application/pdf',
+    fileSize: 123,
+    src: 'https://picsum.photos/400/600',
+    title: 'Title',
+    description: 'Description',
+    titlePlaceholder: 'Title Placeholder',
+    descriptionPlaceholder: 'Description Placeholder',
+    titleLabel: 'Title Label',
+    descriptionLabel: 'Description Label',
+    descriptionMaxLength: 100,
+    onChangeDescription: (e: ChangeEvent<HTMLTextAreaElement>) => {
+      console.log(e.target.value)
+    },
+    onChangeTitle: (e: ChangeEvent<HTMLInputElement>) => {
+      console.log(e.target.value)
+    }
+  }
+}
diff --git a/src/stories/FileList.stories.tsx b/src/stories/FileList.stories.tsx
new file mode 100644
index 000000000..7cba4ca0d
--- /dev/null
+++ b/src/stories/FileList.stories.tsx
@@ -0,0 +1,96 @@
+import React from 'react'
+import type { Meta, StoryObj } from '@storybook/react'
+import FileList from '../components/Form/File/FileList'
+import FileItem from '../components/Form/File/FileItem'
+import FileImageItem from '../components/Form/File/FileImageItem'
+import Text from '../components/Typography/Text'
+import { Flex } from '../components/Layout'
+
+const meta: Meta<typeof FileList> = {
+  title: 'Form/File/FileList',
+  component: FileList
+}
+
+export default meta
+type Story = StoryObj<typeof FileList>
+
+export const Default: Story = {
+  args: {
+    inputFileProps: {
+      title: 'Upload your files',
+      subtitle: 'Drag & drop or browse from your device',
+      hintText: 'Supported formats: PDF, JPG, PNG (max 10MB)'
+    },
+    header: (
+      <Flex justifyContent="between" alignItems="center" className="px-4 mt-2">
+        <Text size="xs" textMuted500>
+          Your Documents
+        </Text>
+        <Text size="xs" textMuted500>
+          Actions
+        </Text>
+      </Flex>
+    ),
+    children: (
+      <>
+        <FileItem
+          name="presentation.pptx"
+          type="application/vnd.ms-powerpoint"
+          fileSize={1024}
+        >
+          <FileItem.Button>A</FileItem.Button>
+          <FileItem.Button>B</FileItem.Button>
+          <FileItem.Button>C</FileItem.Button>
+        </FileItem>
+      </>
+    )
+  }
+}
+
+export const WithImageFiles: Story = {
+  args: {
+    inputFileProps: {
+      title: 'Upload your images',
+      subtitle: 'Drag & drop or browse from your device',
+      hintText: 'Supported formats: JPG, PNG (max 5MB)'
+    },
+    header: (
+      <Flex justifyContent="between" alignItems="center" className="px-4 mt-2">
+        <Text size="xs" textMuted500>
+          Your Documents
+        </Text>
+        <Text size="xs" textMuted500>
+          Actions
+        </Text>
+      </Flex>
+    ),
+    children: (
+      <>
+        <FileImageItem
+          name="photo1.jpg"
+          type="image/jpeg"
+          fileSize={1250}
+          src="https://picsum.photos/400/600"
+          title="Vacation Photo"
+          description="Photo from our last vacation"
+          onChangeTitle={(e) => console.log('Title changed:', e.target.value)}
+          onChangeDescription={(e) =>
+            console.log('Description changed:', e.target.value)
+          }
+        />
+        <FileImageItem
+          name="photo2.jpg"
+          type="image/jpeg"
+          fileSize={980}
+          src="https://picsum.photos/401/600"
+          title="Office Meeting"
+          description="Team building activity"
+          onChangeTitle={(e) => console.log('Title changed:', e.target.value)}
+          onChangeDescription={(e) =>
+            console.log('Description changed:', e.target.value)
+          }
+        />
+      </>
+    )
+  }
+}
diff --git a/src/stories/InputFile.stories.tsx b/src/stories/InputFile.stories.tsx
index af234d977..2ae7fd386 100644
--- a/src/stories/InputFile.stories.tsx
+++ b/src/stories/InputFile.stories.tsx
@@ -14,12 +14,21 @@ export const Default: Story = {
   args: {
     hintText: 'Subir en formato XML - PDF',
     progressIndicator: 0,
-    boxMessage: 'PDF Peso máximo por archivo 20 MB',
     dragMessage: 'Suelta aquí',
     id: 'upload',
     disabled: false,
-    label: 'Drag & drop your files or',
-    labelAction: 'browse from your device',
+    title: 'Drag & drop your files or',
+    subtitle: 'browse from your device',
+    singleFile: false,
+    onView: () => {
+      console.log('onView')
+    },
+    onDownload: () => {
+      console.log('onDownload')
+    },
+    onDelete: () => {
+      console.log('onDelete')
+    },
     error: {
       show: false,
       message: (

From 41e0d4d03ab44dfdf6ffabd646f8e316d86932c9 Mon Sep 17 00:00:00 2001
From: Misael Arreola <misael.arreola@dd3tech.mx>
Date: Fri, 2 May 2025 15:49:17 -0600
Subject: [PATCH 2/2] fix: remove hint text

---
 src/stories/FileList.stories.tsx | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/src/stories/FileList.stories.tsx b/src/stories/FileList.stories.tsx
index 7cba4ca0d..9163bc48f 100644
--- a/src/stories/FileList.stories.tsx
+++ b/src/stories/FileList.stories.tsx
@@ -18,8 +18,7 @@ export const Default: Story = {
   args: {
     inputFileProps: {
       title: 'Upload your files',
-      subtitle: 'Drag & drop or browse from your device',
-      hintText: 'Supported formats: PDF, JPG, PNG (max 10MB)'
+      subtitle: 'Drag & drop or browse from your device'
     },
     header: (
       <Flex justifyContent="between" alignItems="center" className="px-4 mt-2">
@@ -51,8 +50,7 @@ export const WithImageFiles: Story = {
   args: {
     inputFileProps: {
       title: 'Upload your images',
-      subtitle: 'Drag & drop or browse from your device',
-      hintText: 'Supported formats: JPG, PNG (max 5MB)'
+      subtitle: 'Drag & drop or browse from your device'
     },
     header: (
       <Flex justifyContent="between" alignItems="center" className="px-4 mt-2">