feat(file-input): add FileInput component (#273)

src/FileInput/FileInput.stories.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { Story, Meta } from '@storybook/react'
+
+import FileInput, { FileInputProps } from '.'
+
+export default {
+  title: 'Data Input/FileInput',
+  component: FileInput,
+  args: {
+    className: 'w-full max-w-xs',
+    disabled: false,
+  },
+} as Meta
+
+const Template: Story<FileInputProps> = (args) => {
+  return <FileInput {...args} />
+}
+
+export const Default = Template.bind({})
+Default.args = {}
+
+export const Colors: Story<FileInputProps> = (args) => {
+  return (
+    <div className="w-full flex flex-col gap-2">
+      <FileInput {...args} color="primary" />
+      <FileInput {...args} color="secondary" />
+      <FileInput {...args} color="accent" />
+      <FileInput {...args} color="ghost" />
+      <FileInput {...args} color="info" />
+      <FileInput {...args} color="success" />
+      <FileInput {...args} color="warning" />
+      <FileInput {...args} color="error" />
+    </div>
+  )
+}
+Colors.args = {}
+
+export const Sizes: Story<FileInputProps> = (args) => {
+  return (
+    <div className="flex flex-col gap-4 w-full items-center">
+      <FileInput {...args} size="xs" />
+      <FileInput {...args} size="sm" />
+      <FileInput {...args} size="md" />
+      <FileInput {...args} size="lg" />
+    </div>
+  )
+}
+Sizes.args = {}
+
+export const FormControlAndLabels: Story<FileInputProps> = (args) => {
+  return (
+    <div className="flex w-full component-preview p-4 items-center justify-center gap-2 font-sans">
+      <div className="form-control w-full max-w-xs">
+        <label className="label">
+          <span className="label-text">Pick a file</span>
+          <span className="label-text-alt">Alt label</span>
+        </label>
+        <FileInput {...args} />
+        <label className="label">
+          <span className="label-text-alt">Alt label</span>
+          <span className="label-text-alt">Alt label</span>
+        </label>
+      </div>
+    </div>
+  )
+}
+FormControlAndLabels.args = {}

src/FileInput/FileInput.tsx

@@ -0,0 +1,44 @@
+import clsx from 'clsx'
+import React, { forwardRef } from 'react'
+import { twMerge } from 'tailwind-merge'
+import { ComponentColor, ComponentSize, IComponentBaseProps } from '../types'
+
+export type FileInputProps = Omit<
+  React.InputHTMLAttributes<HTMLInputElement>,
+  'size'
+> &
+  IComponentBaseProps & {
+    size?: ComponentSize
+    color?: ComponentColor
+    bordered?: boolean
+  }
+
+const FileInput = forwardRef<HTMLInputElement, FileInputProps>(
+  (
+    { className, size, color, bordered, dataTheme, ...props },
+    ref
+  ): JSX.Element => {
+    const classes = twMerge(
+      'file-input',
+      className,
+      clsx({
+        [`file-input-${size}`]: size,
+        [`file-input-${color}`]: color,
+        'file-input-bordered': bordered,
+      })
+    )
+    return (
+      <input
+        {...props}
+        ref={ref}
+        type="file"
+        data-theme={dataTheme}
+        className={classes}
+      />
+    )
+  }
+)
+
+FileInput.displayName = 'FileInput'
+
+export default FileInput

src/FileInput/index.tsx

@@ -0,0 +1,3 @@
+import FileInput, { FileInputProps as TFileInputProps } from './FileInput'
+export type FileInputProps = TFileInputProps
+export default FileInput

src/index.ts

@@ -139,6 +139,11 @@ export { default as Textarea } from './Textarea'
 import { TextareaProps as TTextareaProps } from './Textarea'
 export type TextareaProps = TTextareaProps
 
+// Data Input > FileInput
+export { default as FileInput } from './FileInput'
+import { FileInputProps as TFileInputProps } from './FileInput'
+export type FileInputProps = TFileInputProps
+
 // ----------------------- < Layout > ----------------------- //
 
 // Layout > Artboard