poe-svelte-ui-lib 1.0.1 → 1.0.4

package/dist/ColorPicker/ColorPicker.svelte

@@ -1,207 +1,205 @@
-<!-- $lib/ElementsUI/ColorPicker.svelte -->
-<script lang="ts">
-  import { t } from '../locales/i18n'
-  import type { IColorPickerProps } from '../types'
-
-  let {
-    id = { name: '', value: crypto.randomUUID() },
-    wrapperClass = '',
-    label = { name: '', class: '' },
-    value = [0, 0, 0],
-    onChange = () => {},
-  }: IColorPickerProps = $props()
-
-  const hsv = $state({ h: 0, s: 100, v: 100 })
-  let huePointer = $state(0)
-  let brightnessPointer = $state(100)
-  let mode = $state<'hsv' | 'white'>('hsv')
-  let whiteValue = $state(100)
-
-  $effect(() => {
-    if (value.length !== 3) return
-
-    const [r, g, b] = value
-    const isWhite = r === g && g === b
-    mode = isWhite ? 'white' : 'hsv'
-    if (isWhite) {
-      whiteValue = Math.round((r / 255) * 100)
-      return
-    }
-
-    const normalized = value.map((v) => v / 255)
-    const max = Math.max(...normalized)
-    const min = Math.min(...normalized)
-    const delta = max - min
-    let h = 0
-    if (delta !== 0) {
-      const [rN, gN, bN] = normalized
-      if (max === rN) h = ((gN - bN) / delta) % 6
-      else if (max === gN) h = (bN - rN) / delta + 2
-      else h = (rN - gN) / delta + 4
-      h *= 60
-      if (h < 0) h += 360
-    }
-    const s = max ? (delta / max) * 100 : 0
-    const v = max * 100
-    hsv.h = Math.round(h)
-    hsv.s = Math.round(s)
-    hsv.v = Math.round(v)
-    huePointer = (h / 360) * 100
-    brightnessPointer = v
-  })
-
-  const hsvToRgb = (h: number, s: number, v: number): [number, number, number] => {
-    s /= 100
-    v /= 100
-    const c = v * s
-    const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
-    const m = v - c
-    let r = 0,
-      g = 0,
-      b = 0
-    if (h < 60) [r, g, b] = [c, x, 0]
-    else if (h < 120) [r, g, b] = [x, c, 0]
-    else if (h < 180) [r, g, b] = [0, c, x]
-    else if (h < 240) [r, g, b] = [0, x, c]
-    else if (h < 300) [r, g, b] = [x, 0, c]
-    else [r, g, b] = [c, 0, x]
-    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)]
-  }
-
-  const handleDrag = (e: MouseEvent, target: 'hue' | 'brightness' | 'white') => {
-    const slider = document.querySelector(`.${target}-slider`) as HTMLElement
-    const rect = slider.getBoundingClientRect()
-    let currentHSV = { ...hsv }
-    let currentWhite = whiteValue
-    if (target === 'hue' || target === 'brightness') {
-      if (mode === 'white') hsv.s = 100
-      mode = 'hsv'
-    } else mode = 'white'
-    const onMove = (event: MouseEvent) => {
-      const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
-      const percent = (x / rect.width) * 100
-      if (target === 'hue') {
-        huePointer = percent
-        currentHSV.h = (x / rect.width) * 360
-        hsv.h = currentHSV.h
-      } else if (target === 'brightness') {
-        brightnessPointer = percent
-        currentHSV.v = percent
-        hsv.v = currentHSV.v
-      } else if (target === 'white') {
-        currentWhite = percent
-        whiteValue = currentWhite
-      }
-    }
-    const onUp = () => {
-      window.removeEventListener('mousemove', onMove)
-      window.removeEventListener('mouseup', onUp)
-
-      if (mode === 'hsv') {
-        onChange(hsvToRgb(currentHSV.h, hsv.s, currentHSV.v))
-      } else {
-        const val = Math.round((currentWhite / 100) * 255)
-        onChange([val, val, val])
-      }
-    }
-    onMove(e)
-    window.addEventListener('mousemove', onMove)
-    window.addEventListener('mouseup', onUp)
-  }
-
-  const rgb = $derived(() => (mode === 'white' ? [whiteValue, whiteValue, whiteValue].map((v) => Math.round((v / 100) * 255)) : hsvToRgb(hsv.h, hsv.s, hsv.v)))
-  const hex = $derived(() =>
-    rgb()
-      .map((v) => v.toString(16).padStart(2, '0'))
-      .join(' ')
-      .toUpperCase(),
-  )
-  const previewBaseColor = $derived(() => (mode === 'white' ? [255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)) : hsvToRgb(hsv.h, hsv.s, 100)))
-
-  const textColor = $derived(() => {
-    const [r, g, b] = rgb()
-    const luminance = (r * 299 + g * 587 + b * 114) / 1000
-    return luminance > 128 ? 'text-black' : 'text-white'
-  })
-</script>
-
-<div id={id.value} class="relative flex w-full flex-col items-center {wrapperClass}">
-  {#if label.name}
-    <h5 class={`mb-2 w-full px-4 text-center ${label.class}`}>{label.name}</h5>
-  {/if}
-
-  <div class="flex w-full flex-row items-center gap-2">
-    <!-- Слайдеры цвета -->
-    <div class="flex w-full flex-col gap-2">
-      <!-- Выбор цвета -->
-      <div
-        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
-        role="slider"
-        aria-valuenow={null}
-        tabindex={null}
-        onmousedown={(e) => handleDrag(e, 'hue')}
-      >
-        <div
-          class="absolute inset-0"
-          style={`background: linear-gradient(to right, ${Array.from({ length: 7 }, (_, i) => {
-            const [r, g, b] = hsvToRgb(i * 60, 100, 100)
-            return `rgb(${r},${g},${b})`
-          }).join(', ')})`}
-        ></div>
-        {#if mode === 'hsv'}
-          <div
-            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
-            style={`left: ${huePointer}%; background: rgb(${hsvToRgb(hsv.h, 100, 100).join(',')})`}
-          ></div>
-        {/if}
-      </div>
-
-      <!-- Яркость цвета -->
-      <div
-        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
-        role="slider"
-        aria-valuenow={null}
-        tabindex={null}
-        onmousedown={(e) => handleDrag(e, 'brightness')}
-      >
-        {#if mode === 'hsv'}
-          <div class="absolute inset-0" style={`background: linear-gradient(to right, rgb(0,0,0), rgb(${hsvToRgb(hsv.h, hsv.s, 100).join(',')}))`}></div>
-
-          <div
-            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
-            style={`left: ${brightnessPointer}%; background: rgb(${hsvToRgb(hsv.h, hsv.s, hsv.v).join(',')})`}
-          ></div>
-        {/if}
-      </div>
-
-      <!-- Яркость белого цвета -->
-      <p class="h-4 px-4 text-start font-bold">{$t('component.colorpicker.whitehue')}</p>
-      <div
-        class="white-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
-        role="slider"
-        aria-valuenow={null}
-        tabindex={null}
-        onmousedown={(e) => handleDrag(e, 'white')}
-      >
-        <div class="absolute inset-0 bg-gradient-to-r from-black to-white"></div>
-        {#if mode === 'white'}
-          <div
-            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
-            style={`left: ${whiteValue}%; background: rgb(${[255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)).join(',')})`}
-          ></div>
-        {/if}
-      </div>
-    </div>
-
-    <!-- Превью цвета -->
-    <div
-      class={`flex h-26 w-28 flex-col justify-center gap-1 rounded-2xl border border-gray-400 px-2 font-mono text-sm select-none ${textColor()}`}
-      style={`background: rgb(${previewBaseColor().join(',')})`}
-    >
-      <div class="flex flex-col items-center">
-        <span class="w-full flex-shrink-0">{mode === 'white' ? 'White' : 'RGB'}</span>
-        <div class="пфз-1 w-full text-center tracking-wide">{hex()}</div>
-      </div>
-    </div>
-  </div>
-</div>
+<!-- $lib/ElementsUI/ColorPicker.svelte -->
+<script lang="ts">
+  import type { IColorPickerProps } from '../types'
+
+  let {
+    id = { name: '', value: crypto.randomUUID() },
+    wrapperClass = '',
+    label = { name: '', class: '' },
+    value = [0, 0, 0],
+    onChange = () => {},
+  }: IColorPickerProps = $props()
+
+  const hsv = $state({ h: 0, s: 100, v: 100 })
+  let huePointer = $state(0)
+  let brightnessPointer = $state(100)
+  let mode = $state<'hsv' | 'white'>('hsv')
+  let whiteValue = $state(100)
+
+  $effect(() => {
+    if (value.length !== 3) return
+
+    const [r, g, b] = value
+    const isWhite = r === g && g === b
+    mode = isWhite ? 'white' : 'hsv'
+    if (isWhite) {
+      whiteValue = Math.round((r / 255) * 100)
+      return
+    }
+
+    const normalized = value.map((v) => v / 255)
+    const max = Math.max(...normalized)
+    const min = Math.min(...normalized)
+    const delta = max - min
+    let h = 0
+    if (delta !== 0) {
+      const [rN, gN, bN] = normalized
+      if (max === rN) h = ((gN - bN) / delta) % 6
+      else if (max === gN) h = (bN - rN) / delta + 2
+      else h = (rN - gN) / delta + 4
+      h *= 60
+      if (h < 0) h += 360
+    }
+    const s = max ? (delta / max) * 100 : 0
+    const v = max * 100
+    hsv.h = Math.round(h)
+    hsv.s = Math.round(s)
+    hsv.v = Math.round(v)
+    huePointer = (h / 360) * 100
+    brightnessPointer = v
+  })
+
+  const hsvToRgb = (h: number, s: number, v: number): [number, number, number] => {
+    s /= 100
+    v /= 100
+    const c = v * s
+    const x = c * (1 - Math.abs(((h / 60) % 2) - 1))
+    const m = v - c
+    let r = 0,
+      g = 0,
+      b = 0
+    if (h < 60) [r, g, b] = [c, x, 0]
+    else if (h < 120) [r, g, b] = [x, c, 0]
+    else if (h < 180) [r, g, b] = [0, c, x]
+    else if (h < 240) [r, g, b] = [0, x, c]
+    else if (h < 300) [r, g, b] = [x, 0, c]
+    else [r, g, b] = [c, 0, x]
+    return [Math.round((r + m) * 255), Math.round((g + m) * 255), Math.round((b + m) * 255)]
+  }
+
+  const handleDrag = (e: MouseEvent, target: 'hue' | 'brightness' | 'white') => {
+    const slider = document.querySelector(`.${target}-slider`) as HTMLElement
+    const rect = slider.getBoundingClientRect()
+    let currentHSV = { ...hsv }
+    let currentWhite = whiteValue
+    if (target === 'hue' || target === 'brightness') {
+      if (mode === 'white') hsv.s = 100
+      mode = 'hsv'
+    } else mode = 'white'
+    const onMove = (event: MouseEvent) => {
+      const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+      const percent = (x / rect.width) * 100
+      if (target === 'hue') {
+        huePointer = percent
+        currentHSV.h = (x / rect.width) * 360
+        hsv.h = currentHSV.h
+      } else if (target === 'brightness') {
+        brightnessPointer = percent
+        currentHSV.v = percent
+        hsv.v = currentHSV.v
+      } else if (target === 'white') {
+        currentWhite = percent
+        whiteValue = currentWhite
+      }
+    }
+    const onUp = () => {
+      window.removeEventListener('mousemove', onMove)
+      window.removeEventListener('mouseup', onUp)
+
+      if (mode === 'hsv') {
+        onChange(hsvToRgb(currentHSV.h, hsv.s, currentHSV.v))
+      } else {
+        const val = Math.round((currentWhite / 100) * 255)
+        onChange([val, val, val])
+      }
+    }
+    onMove(e)
+    window.addEventListener('mousemove', onMove)
+    window.addEventListener('mouseup', onUp)
+  }
+
+  const rgb = $derived(() => (mode === 'white' ? [whiteValue, whiteValue, whiteValue].map((v) => Math.round((v / 100) * 255)) : hsvToRgb(hsv.h, hsv.s, hsv.v)))
+  const hex = $derived(() =>
+    rgb()
+      .map((v) => v.toString(16).padStart(2, '0'))
+      .join(' ')
+      .toUpperCase(),
+  )
+  const previewBaseColor = $derived(() => (mode === 'white' ? [255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)) : hsvToRgb(hsv.h, hsv.s, 100)))
+
+  const textColor = $derived(() => {
+    const [r, g, b] = rgb()
+    const luminance = (r * 299 + g * 587 + b * 114) / 1000
+    return luminance > 128 ? 'text-black' : 'text-white'
+  })
+</script>
+
+<div id={id.value} class="relative flex w-full flex-col items-center {wrapperClass}">
+  {#if label.name}
+    <h5 class={`mb-2 w-full px-4 text-center ${label.class}`}>{label.name}</h5>
+  {/if}
+
+  <div class="flex w-full flex-row items-center gap-2">
+    <!-- Слайдеры цвета -->
+    <div class="flex w-full flex-col gap-2">
+      <!-- Выбор цвета -->
+      <div
+        class="hue-slider relative h-7 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        role="slider"
+        aria-valuenow={null}
+        tabindex={null}
+        onmousedown={(e) => handleDrag(e, 'hue')}
+      >
+        <div
+          class="absolute inset-0"
+          style={`background: linear-gradient(to right, ${Array.from({ length: 7 }, (_, i) => {
+            const [r, g, b] = hsvToRgb(i * 60, 100, 100)
+            return `rgb(${r},${g},${b})`
+          }).join(', ')})`}
+        ></div>
+        {#if mode === 'hsv'}
+          <div
+            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+            style={`left: ${huePointer}%; background: rgb(${hsvToRgb(hsv.h, 100, 100).join(',')})`}
+          ></div>
+        {/if}
+      </div>
+
+      <!-- Яркость цвета -->
+      <div
+        class="brightness-slider relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        role="slider"
+        aria-valuenow={null}
+        tabindex={null}
+        onmousedown={(e) => handleDrag(e, 'brightness')}
+      >
+        {#if mode === 'hsv'}
+          <div class="absolute inset-0" style={`background: linear-gradient(to right, rgb(0,0,0), rgb(${hsvToRgb(hsv.h, hsv.s, 100).join(',')}))`}></div>
+
+          <div
+            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+            style={`left: ${brightnessPointer}%; background: rgb(${hsvToRgb(hsv.h, hsv.s, hsv.v).join(',')})`}
+          ></div>
+        {/if}
+      </div>
+
+      <!-- Яркость белого цвета -->
+      <div
+        class="white-slider mt-4 relative h-4 w-full cursor-pointer overflow-hidden rounded-full border border-gray-400"
+        role="slider"
+        aria-valuenow={null}
+        tabindex={null}
+        onmousedown={(e) => handleDrag(e, 'white')}
+      >
+        <div class="absolute inset-0 bg-gradient-to-r from-black to-white"></div>
+        {#if mode === 'white'}
+          <div
+            class="pointer-events-none absolute top-1/2 h-7 w-1 -translate-x-1/2 -translate-y-1/2 rounded-full border-2 border-white"
+            style={`left: ${whiteValue}%; background: rgb(${[255, 255, 255].map((c) => Math.round((whiteValue / 100) * c)).join(',')})`}
+          ></div>
+        {/if}
+      </div>
+    </div>
+
+    <!-- Превью цвета -->
+    <div
+      class={`flex h-26 w-28 flex-col justify-center gap-1 rounded-2xl border border-gray-400 px-2 font-mono text-sm select-none ${textColor()}`}
+      style={`background: rgb(${previewBaseColor().join(',')})`}
+    >
+      <div class="flex flex-col items-center">
+        <span class="w-full flex-shrink-0">{mode === 'white' ? 'White' : 'RGB'}</span>
+        <div class="пфз-1 w-full text-center tracking-wide">{hex()}</div>
+      </div>
+    </div>
+  </div>
+</div>

package/dist/FileAttach/FileAttach.svelte

@@ -1,103 +1,103 @@
-<!-- $lib/ElementsUI/FileAttach.svelte -->
-<script lang="ts">
-  interface FileInputProps {
-    id?: string
-    wrapperClass?: string
-    label?: { name?: string; class?: string }
-    type?: 'file' | 'image'
-    accept?: string
-    imageSize?: { height?: string; width?: string; fitMode?: 'cover' | 'contain'; form?: 'square' | 'circle' }
-    disabled?: boolean
-    currentImage?: string | null
-    onChange?: (event: Event, file: File | null) => void
-  }
-
-  let {
-    id = crypto.randomUUID(),
-    wrapperClass = '',
-    label = { name: '', class: '' },
-    type = 'file',
-    accept = '*/*',
-    imageSize = { height: '10rem', width: '10rem', fitMode: 'cover', form: 'square' },
-    disabled = false,
-    currentImage = null,
-    onChange = () => {},
-  }: FileInputProps = $props()
-
-  let selectedFile = $state<File | null>(null)
-  let previewUrl = $state<string | null>(null)
-
-  $effect(() => {
-    if (currentImage && !selectedFile) {
-      previewUrl = currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`
-    }
-  })
-
-  const handleFileChange = (event: Event) => {
-    const input = event.target as HTMLInputElement
-    if (!input.files || input.files.length === 0) {
-      onChange(event, null)
-      return
-    }
-
-    const file = input.files[0]
-    selectedFile = file
-
-    if (file.type.startsWith('image/')) {
-      previewUrl = URL.createObjectURL(file)
-    }
-
-    onChange(event, file)
-  }
-
-  const triggerFileInput = () => {
-    const input = document.getElementById(id)
-    input?.click()
-  }
-</script>
-
-<div class={`flex flex-col items-center ${wrapperClass}`}>
-  {#if label.name}
-    <h5 class={`${label.class}`}>{label.name}</h5>
-  {/if}
-
-  {#if type === 'image'}
-    <div class="relative">
-      <button
-        class="flex items-center justify-center overflow-hidden {imageSize.form === 'circle' ? 'rounded-full' : 'rounded-2xl'} 
-        border border-[var(--border-color)] bg-[var(--back-color)] transition duration-250 hover:shadow-lg
-        {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
-        style={`height: ${imageSize.height}; width: ${imageSize.width}`}
-        onclick={triggerFileInput}
-        {disabled}
-      >
-        {#if previewUrl || currentImage}
-          <img
-            src={previewUrl ?? (currentImage?.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`)}
-            alt="Preview"
-            class={`
-              h-full w-full
-              ${imageSize.fitMode === 'cover' ? 'object-cover' : 'object-contain'}
-            `}
-          />
-        {:else}
-          <span class="text-sm text-gray-500">Image</span>
-        {/if}
-      </button>
-      <input {id} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
-    </div>
-  {:else}
-    <label class="relative inline-block w-full font-normal">
-      <input
-        {id}
-        type="file"
-        class={`h-9 w-full rounded-2xl border border-[var(--border-color)] bg-[var(--back-color)] transition duration-250 hover:shadow-lg
-          ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} file:h-full file:w-1/3 file:cursor-pointer 
-          file:border-none file:bg-[var(--blue-color)] invalid:border-red-400 invalid:shadow-[0_0_6px_var(--red-color)]`}
-        {accept}
-        {disabled}
-        onchange={handleFileChange}
-      />
-    </label>
-  {/if}
-</div>
+<!-- $lib/ElementsUI/FileAttach.svelte -->
+<script lang="ts">
+  interface FileInputProps {
+    id?: string
+    wrapperClass?: string
+    label?: { name?: string; class?: string }
+    type?: 'file' | 'image'
+    accept?: string
+    imageSize?: { height?: string; width?: string; fitMode?: 'cover' | 'contain'; form?: 'square' | 'circle' }
+    disabled?: boolean
+    currentImage?: string | null
+    onChange?: (event: Event, file: File | null) => void
+  }
+
+  let {
+    id = crypto.randomUUID(),
+    wrapperClass = '',
+    label = { name: '', class: '' },
+    type = 'file',
+    accept = '*/*',
+    imageSize = { height: '10rem', width: '10rem', fitMode: 'cover', form: 'square' },
+    disabled = false,
+    currentImage = null,
+    onChange = () => {},
+  }: FileInputProps = $props()
+
+  let selectedFile = $state<File | null>(null)
+  let previewUrl = $state<string | null>(null)
+
+  $effect(() => {
+    if (currentImage && !selectedFile) {
+      previewUrl = currentImage.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`
+    }
+  })
+
+  const handleFileChange = (event: Event) => {
+    const input = event.target as HTMLInputElement
+    if (!input.files || input.files.length === 0) {
+      onChange(event, null)
+      return
+    }
+
+    const file = input.files[0]
+    selectedFile = file
+
+    if (file.type.startsWith('image/')) {
+      previewUrl = URL.createObjectURL(file)
+    }
+
+    onChange(event, file)
+  }
+
+  const triggerFileInput = () => {
+    const input = document.getElementById(id)
+    input?.click()
+  }
+</script>
+
+<div class={`flex flex-col items-center ${wrapperClass}`}>
+  {#if label.name}
+    <h5 class={`${label.class}`}>{label.name}</h5>
+  {/if}
+
+  {#if type === 'image'}
+    <div class="relative">
+      <button
+        class="flex items-center justify-center overflow-hidden {imageSize.form === 'circle' ? 'rounded-full' : 'rounded-2xl'} 
+        bg-[var(--back-color)] shadow-sm transition duration-250 hover:shadow-md
+        {disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'}"
+        style={`height: ${imageSize.height}; width: ${imageSize.width}`}
+        onclick={triggerFileInput}
+        {disabled}
+      >
+        {#if previewUrl || currentImage}
+          <img
+            src={previewUrl ?? (currentImage?.startsWith('data:') ? currentImage : `data:image/png;base64,${currentImage}`)}
+            alt="Preview"
+            class={`
+              h-full w-full
+              ${imageSize.fitMode === 'cover' ? 'object-cover' : 'object-contain'}
+            `}
+          />
+        {:else}
+          <span class="text-sm text-gray-500">Image</span>
+        {/if}
+      </button>
+      <input {id} type="file" class="absolute -z-10 h-0 w-0 overflow-hidden opacity-0" {accept} {disabled} onchange={handleFileChange} />
+    </div>
+  {:else}
+    <label class="relative inline-block w-full">
+      <input
+        {id}
+        type="file"
+        class={`h-8.5 w-full rounded-2xl bg-[var(--back-color)] font-semibold shadow-sm transition duration-250 hover:shadow-md
+          ${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer'} file:h-full file:w-1/3 file:cursor-pointer 
+          file:border-none file:bg-[var(--blue-color)] invalid:border-red-400 invalid:shadow-[0_0_6px_var(--red-color)]`}
+        {accept}
+        {disabled}
+        onchange={handleFileChange}
+      />
+    </label>
+  {/if}
+</div>