From aa6e812e1af4c3f900b7d1efbe6e7c0019ad8693 Mon Sep 17 00:00:00 2001
From: Pouya Saadeghi <pouya.saadeghi@gmail.com>
Date: Sat, 29 Oct 2022 15:40:17 +0300
Subject: [PATCH] fix: #834

---
 src/components/styled/file-input.css          |  96 ++++++++
 src/components/unstyled/file-input.css        |   7 +
 src/docs/src/lib/data.js                      |  13 +-
 .../routes/components/file-input.svelte.md    | 214 ++++++++++++++++++
 .../static/images/components/file-input.jpg   | Bin 0 -> 27516 bytes
 src/utilities/unstyled/file-input.css         |  30 +++
 src/utilities/unstyled/input.css              |   6 +-
 7 files changed, 360 insertions(+), 6 deletions(-)
 create mode 100644 src/components/styled/file-input.css
 create mode 100644 src/components/unstyled/file-input.css
 create mode 100644 src/docs/src/routes/components/file-input.svelte.md
 create mode 100644 src/docs/static/images/components/file-input.jpg
 create mode 100644 src/utilities/unstyled/file-input.css

diff --git a/src/components/styled/file-input.css b/src/components/styled/file-input.css
new file mode 100644
index 00000000000..07a3a806be7
--- /dev/null
+++ b/src/components/styled/file-input.css
@@ -0,0 +1,96 @@
+.file-input {
+  @apply border border-base-content border-opacity-0 bg-base-100 rounded-btn text-base;
+  &::file-selector-button {
+    @apply font-semibold uppercase no-underline border-neutral bg-neutral text-neutral-content;
+    border-width: var(--border-btn, 1px);
+    animation: button-pop var(--animation-btn, 0.25s) ease-out;
+    text-transform: var(--btn-text-case, uppercase);
+  }
+  &-bordered {
+    @apply border-opacity-20;
+  }
+  &:focus {
+    outline: 2px solid hsla(var(--bc) / 0.2);
+    outline-offset: 2px;
+  }
+  &-ghost {
+    @apply bg-opacity-5;
+    &:focus {
+      @apply bg-opacity-100 text-base-content;
+      box-shadow: none;
+    }
+    &::file-selector-button {
+      @apply border border-transparent bg-transparent text-current;
+    }
+  }
+  &-primary {
+    @apply border-primary;
+    &:focus {
+      outline: 2px solid hsl(var(--p));
+    }
+    &::file-selector-button {
+      @apply border-primary bg-primary text-primary-content;
+    }
+  }
+  &-secondary {
+    @apply border-secondary;
+    &:focus {
+      outline: 2px solid hsl(var(--s));
+    }
+    &::file-selector-button {
+      @apply border-secondary bg-secondary text-secondary-content;
+    }
+  }
+  &-accent {
+    @apply border-accent;
+    &:focus {
+      outline: 2px solid hsl(var(--a));
+    }
+    &::file-selector-button {
+      @apply border-accent bg-accent text-accent-content;
+    }
+  }
+  &-info {
+    @apply border-info;
+    &:focus {
+      outline: 2px solid hsl(var(--in));
+    }
+    &::file-selector-button {
+      @apply border-info bg-info text-info-content;
+    }
+  }
+  &-success {
+    @apply border-success;
+    &:focus {
+      outline: 2px solid hsl(var(--su));
+    }
+    &::file-selector-button {
+      @apply border-success bg-success text-success-content;
+    }
+  }
+  &-warning {
+    @apply border-warning;
+    &:focus {
+      outline: 2px solid hsl(var(--wa));
+    }
+    &::file-selector-button {
+      @apply border-warning bg-warning text-warning-content;
+    }
+  }
+  &-error {
+    @apply border-error;
+    &:focus {
+      outline: 2px solid hsl(var(--er));
+    }
+    &::file-selector-button {
+      @apply border-error bg-error text-error-content;
+    }
+  }
+  &-disabled,
+  &[disabled] {
+    @apply cursor-not-allowed border-base-200 bg-base-200 text-opacity-20 placeholder-base-content placeholder-opacity-20;
+    &::file-selector-button {
+      @apply border-opacity-0 bg-neutral bg-opacity-20 text-base-content text-opacity-20;
+    }
+  }
+}
diff --git a/src/components/unstyled/file-input.css b/src/components/unstyled/file-input.css
new file mode 100644
index 00000000000..10ce6d6edc9
--- /dev/null
+++ b/src/components/unstyled/file-input.css
@@ -0,0 +1,7 @@
+.file-input {
+  @apply flex-shrink transition duration-200 ease-in-out h-12 pr-4 text-sm leading-loose;
+  &::file-selector-button {
+    @apply inline-flex flex-shrink-0 cursor-pointer select-none flex-wrap items-center justify-center border-transparent text-center transition duration-200 ease-in-out h-[2.875rem] px-4 text-sm min-h-[2.875rem] mr-4;
+    line-height: 1em;
+  }
+}
diff --git a/src/docs/src/lib/data.js b/src/docs/src/lib/data.js
index f10dcde6ffd..47addb2c2f0 100644
--- a/src/docs/src/lib/data.js
+++ b/src/docs/src/lib/data.js
@@ -455,9 +455,9 @@ export let pages = [
         badge: "",
       },
       {
-        name: "Text input",
-        tags: "text input",
-        href: "/components/input",
+        name: "File input",
+        tags: "file upload",
+        href: "/components/file-input",
         icon: "",
         badge: "",
       },
@@ -489,6 +489,13 @@ export let pages = [
         icon: "",
         badge: "",
       },
+      {
+        name: "Text input",
+        tags: "text input",
+        href: "/components/input",
+        icon: "",
+        badge: "",
+      },
       {
         name: "Textarea",
         tags: "textarea",
diff --git a/src/docs/src/routes/components/file-input.svelte.md b/src/docs/src/routes/components/file-input.svelte.md
new file mode 100644
index 00000000000..a92bad1ca53
--- /dev/null
+++ b/src/docs/src/routes/components/file-input.svelte.md
@@ -0,0 +1,214 @@
+---
+title: File Input
+desc: File Input is a an input field for uploading files.
+published: true
+---
+
+<script>
+  import Component from "@components/Component.svelte"
+  import ClassTable from "@components/ClassTable.svelte"
+  import { prefix } from '$lib/stores';
+  import { replace } from '$lib/actions';
+</script>
+
+<ClassTable
+data="{[
+  { type:'component', class: 'form-control', desc: 'Container element' },
+  { type:'component', class: 'label', desc: 'For helper text' },
+  { type:'component', class: 'file-input', desc: 'For <input> element' },
+  { type:'modifier', class: 'file-input-bordered', desc: 'Adds border to input' },
+  { type:'modifier', class: 'file-input-ghost', desc: 'Adds ghost style to input' },
+  { type:'modifier', class: 'file-input-primary', desc: 'Adds `primary` color to input' },
+  { type:'modifier', class: 'file-input-secondary', desc: 'Adds `secondary` color to input' },
+  { type:'modifier', class: 'file-input-accent', desc: 'Adds `accent` color to input' },
+  { type:'modifier', class: 'file-input-info', desc: 'Adds `info` color to input' },
+  { type:'modifier', class: 'file-input-success', desc: 'Adds `success` color to input' },
+  { type:'modifier', class: 'file-input-warning', desc: 'Adds `warning` color to input' },
+  { type:'modifier', class: 'file-input-error', desc: 'Adds `error` color to input' },
+  { type:'responsive', class: 'file-input-lg', desc: 'Large size for input' },
+  { type:'responsive', class: 'file-input-md', desc: 'Medium (default) size for input' },
+  { type:'responsive', class: 'file-input-sm', desc: 'Small size for input' },
+  { type:'responsive', class: 'file-input-xs', desc: 'Extra small size for input' },
+]}"
+/>
+
+<Component title="File input">
+<input type="file" class="file-input w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="File input with border">
+<input type="file" class="file-input file-input-bordered w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input $$file-input-bordered w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input $$file-input-bordered w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="Ghost (no background)">
+<input type="file" class="file-input file-input-ghost w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input $$file-input-ghost w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input $$file-input-ghost w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="With form-control and labels">
+<div class="form-control w-full max-w-xs">
+  <label class="label">
+    <span class="label-text">Pick a file</span>
+    <span class="label-text-alt">Alt label</span>
+  </label>
+  <input type="file" class="file-input file-input-bordered w-full max-w-xs" />
+  <label class="label">
+    <span class="label-text-alt">Alt label</span>
+    <span class="label-text-alt">Alt label</span>
+  </label>
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<div class="$$form-control w-full max-w-xs">
+  <label class="$$label">
+    <span class="$$label-text">Pick a file</span>
+    <span class="$$label-text-alt">Alt label</span>
+  </label>
+  <input type="file" class="$$file-input $$file-input-bordered w-full max-w-xs" />
+  <label class="$$label">
+    <span class="$$label-text-alt">Alt label</span>
+    <span class="$$label-text-alt">Alt label</span>
+  </label>
+</div>`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<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>
+  <input type="file" className="$$file-input $$file-input-bordered w-full max-w-xs" />
+  <label className="$$label">
+    <span className="$$label-text-alt">Alt label</span>
+    <span className="$$label-text-alt">Alt label</span>
+  </label>
+</div>`
+}</pre>
+</Component>
+
+<Component title="Primary color">
+<input type="file" class="file-input file-input-bordered file-input-primary w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input $$file-input-bordered $$file-input-primary w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input $$file-input-bordered $$file-input-primary w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="Secondary color">
+<input type="file" class="file-input file-input-bordered file-input-secondary w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input $$file-input-bordered $$file-input-secondary w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input $$file-input-bordered $$file-input-secondary w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="Accent color">
+<input type="file" class="file-input file-input-bordered file-input-accent w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input $$file-input-bordered $$file-input-accent w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input $$file-input-bordered $$file-input-accent w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="Info color">
+<input type="file" class="file-input file-input-bordered file-input-info w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input $$file-input-bordered $$file-input-info w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input $$file-input-bordered $$file-input-info w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="Success color">
+<input type="file" class="file-input file-input-bordered file-input-success w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input $$file-input-bordered $$file-input-success w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input $$file-input-bordered $$file-input-success w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="Warning color">
+<input type="file" class="file-input file-input-bordered file-input-warning w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input $$file-input-bordered $$file-input-warning w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input $$file-input-bordered $$file-input-warning w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="Error color">
+<input type="file" class="file-input file-input-bordered file-input-error w-full max-w-xs" />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" class="$$file-input $$file-input-bordered $$file-input-error w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" className="$$file-input $$file-input-bordered $$file-input-error w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="Sizes">
+<div class="flex flex-col gap-4 w-full items-center">
+  <input type="file" class="file-input file-input-bordered file-input-xs w-full max-w-xs" />
+  <input type="file" class="file-input file-input-bordered file-input-sm w-full max-w-xs" />
+  <input type="file" class="file-input file-input-bordered file-input-md w-full max-w-xs" />
+  <input type="file" class="file-input file-input-bordered file-input-lg w-full max-w-xs" />
+</div>
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`
+<!-- xs -->
+<input type="file" class="$$file-input $$file-input-bordered $$file-input-xs w-full max-w-xs" />
+<!-- sm -->
+<input type="file" class="$$file-input $$file-input-bordered $$file-input-sm w-full max-w-xs" />
+<!-- md -->
+<input type="file" class="$$file-input $$file-input-bordered $$file-input-md w-full max-w-xs" />
+<!-- lg -->
+<input type="file" class="$$file-input $$file-input-bordered $$file-input-lg w-full max-w-xs" />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`
+<!-- xs -->
+<input type="file" className="$$file-input $$file-input-bordered $$file-input-xs w-full max-w-xs" />
+<!-- sm -->
+<input type="file" className="$$file-input $$file-input-bordered $$file-input-sm w-full max-w-xs" />
+<!-- md -->
+<input type="file" className="$$file-input $$file-input-bordered $$file-input-md w-full max-w-xs" />
+<!-- lg -->
+<input type="file" className="$$file-input $$file-input-bordered $$file-input-lg w-full max-w-xs" />`
+}</pre>
+</Component>
+
+<Component title="Disabled">
+<input type="file" placeholder="You can't touch this" class="file-input file-input-bordered w-full max-w-xs" disabled />
+<pre slot="html" use:replace={{ to: $prefix }}>{
+`<input type="file" placeholder="You can't touch this" class="$$file-input $$file-input-bordered w-full max-w-xs" disabled />`
+}</pre>
+<pre slot="react" use:replace={{ to: $prefix }}>{
+`<input type="file" placeholder="You can't touch this" className="$$file-input $$file-input-bordered w-full max-w-xs" disabled />`
+}</pre>
+</Component>
diff --git a/src/docs/static/images/components/file-input.jpg b/src/docs/static/images/components/file-input.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..20cc9fa169256d8e40378613eddef4aebc64d2c8
GIT binary patch
literal 27516
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

literal 0
HcmV?d00001

diff --git a/src/utilities/unstyled/file-input.css b/src/utilities/unstyled/file-input.css
new file mode 100644
index 00000000000..f40ce5fce42
--- /dev/null
+++ b/src/utilities/unstyled/file-input.css
@@ -0,0 +1,30 @@
+.file-input {
+  &-xs {
+    @apply pr-2 text-xs leading-relaxed h-6;
+    &::file-selector-button {
+      @apply mr-2 h-[1.375rem] min-h-[1.375rem];
+      font-size: 0.75rem;
+    }
+  }
+  &-sm {
+    @apply pr-3 text-sm leading-8 h-8;
+    &::file-selector-button {
+      @apply mr-3 h-[1.875rem] min-h-[1.875rem];
+      font-size: 0.875rem;
+    }
+  }
+  &-md {
+    @apply pr-4 text-sm leading-loose h-12;
+    &::file-selector-button {
+      @apply mr-4 h-[2.875rem] min-h-[2.875rem];
+      font-size: 0.875rem;
+    }
+  }
+  &-lg {
+    @apply pr-6 text-lg leading-loose h-16;
+    &::file-selector-button {
+      @apply mr-6 h-[3.875rem] min-h-[3.875rem];
+      font-size: 1.125rem;
+    }
+  }
+}
diff --git a/src/utilities/unstyled/input.css b/src/utilities/unstyled/input.css
index a769324cf52..9cfb742599e 100644
--- a/src/utilities/unstyled/input.css
+++ b/src/utilities/unstyled/input.css
@@ -1,4 +1,7 @@
 .input {
+  &-xs {
+    @apply h-6 px-2 text-xs leading-relaxed;
+  }
   &-md {
     @apply h-12 px-4 text-sm leading-loose;
   }
@@ -8,7 +11,4 @@
   &-sm {
     @apply h-8 px-3 text-sm leading-8;
   }
-  &-xs {
-    @apply h-6 px-2 text-xs leading-relaxed;
-  }
 }