@miozu/jera 0.0.2 → 0.4.2

package/src/components/forms/Dropzone.svelte

@@ -0,0 +1,248 @@
+<!--
+  @component Dropzone
+
+  A drag-and-drop file upload zone.
+
+  @example Basic
+  <Dropzone ondrop={handleFile} />
+
+  @example Custom accept types
+  <Dropzone
+    accept="image/*"
+    placeholder="Drop an image here"
+    ondrop={handleImage}
+  />
+
+  @example With file info display
+  <Dropzone
+    accept=".pdf"
+    placeholder="Drop a PDF document"
+    ondrop={(file) => console.log(file.name)}
+  />
+-->
+<script>
+  let {
+    accept = '*/*',
+    placeholder = 'Drag & drop a file here, or click to upload',
+    disabled = false,
+    class: className = '',
+    ondrop
+  } = $props();
+
+  let isDragging = $state(false);
+  let file = $state(null);
+
+  function formatBytes(bytes) {
+    if (bytes === 0) return '0 Bytes';
+    const k = 1024;
+    const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(2))} ${sizes[i]}`;
+  }
+
+  function handleDrop(event) {
+    event.preventDefault();
+    isDragging = false;
+
+    if (disabled) return;
+
+    const files = event.dataTransfer?.files;
+    if (!files?.length) return;
+
+    const droppedFile = files[0];
+
+    // Validate file type if accept is specified
+    if (accept !== '*/*') {
+      const acceptTypes = accept.split(',').map(t => t.trim());
+      const fileType = droppedFile.type;
+      const fileExt = '.' + droppedFile.name.split('.').pop().toLowerCase();
+
+      const isValid = acceptTypes.some(type => {
+        if (type.startsWith('.')) return fileExt === type.toLowerCase();
+        if (type.endsWith('/*')) return fileType.startsWith(type.slice(0, -1));
+        return fileType === type;
+      });
+
+      if (!isValid) {
+        return;
+      }
+    }
+
+    file = droppedFile;
+    ondrop?.(droppedFile);
+  }
+
+  function handleFileInput(event) {
+    const files = event.target?.files;
+    if (!files?.length) return;
+
+    file = files[0];
+    ondrop?.(file);
+  }
+
+  function handleDragOver(event) {
+    event.preventDefault();
+    if (!disabled) isDragging = true;
+  }
+
+  function handleDragLeave() {
+    isDragging = false;
+  }
+
+  function clearFile() {
+    file = null;
+  }
+</script>
+
+<!-- Note: To prevent browser's default file handling, add these to your root layout:
+     ondragover={(e) => e.preventDefault()}
+     ondrop={(e) => e.preventDefault()}
+-->
+
+<div
+  class="dropzone {isDragging ? 'dropzone-dragging' : ''} {disabled ? 'dropzone-disabled' : ''} {className}"
+  ondragenter={() => !disabled && (isDragging = true)}
+  ondragleave={handleDragLeave}
+  ondragover={handleDragOver}
+  ondrop={handleDrop}
+  role="region"
+  aria-label="File drop zone"
+>
+  {#if isDragging}
+    <p class="dropzone-message">Release to drop the file</p>
+  {:else if file}
+    <div class="dropzone-file">
+      <div class="dropzone-file-info">
+        <p class="dropzone-file-name">{file.name}</p>
+        <p class="dropzone-file-meta">
+          {formatBytes(file.size)} &middot; {file.type || 'Unknown type'}
+        </p>
+      </div>
+      <button
+        type="button"
+        class="dropzone-clear"
+        onclick={clearFile}
+        aria-label="Remove file"
+      >
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <line x1="18" y1="6" x2="6" y2="18"></line>
+          <line x1="6" y1="6" x2="18" y2="18"></line>
+        </svg>
+      </button>
+    </div>
+  {:else}
+    <p class="dropzone-message">{placeholder}</p>
+  {/if}
+
+  <input
+    type="file"
+    {accept}
+    {disabled}
+    class="dropzone-input"
+    onchange={handleFileInput}
+  />
+</div>
+
+<style>
+  .dropzone {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 8rem;
+    padding: var(--space-4);
+    border: 2px dashed var(--color-base02);
+    border-radius: var(--radius-lg);
+    background: var(--color-base01);
+    cursor: pointer;
+    transition: border-color 0.2s ease, background 0.2s ease;
+  }
+
+  .dropzone:hover:not(.dropzone-disabled) {
+    border-color: var(--color-base0D);
+    background: color-mix(in srgb, var(--color-base0D) 5%, transparent);
+  }
+
+  .dropzone-dragging {
+    border-color: var(--color-base0D);
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+  }
+
+  .dropzone-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .dropzone-message {
+    margin: 0;
+    font-size: var(--text-sm);
+    color: var(--color-base04);
+    text-align: center;
+    pointer-events: none;
+  }
+
+  .dropzone-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    opacity: 0;
+    cursor: pointer;
+  }
+
+  .dropzone-disabled .dropzone-input {
+    cursor: not-allowed;
+  }
+
+  .dropzone-file {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3);
+    width: 100%;
+    padding: var(--space-3);
+    background: var(--color-base00);
+    border: 1px solid var(--color-base02);
+    border-radius: var(--radius-md);
+  }
+
+  .dropzone-file-info {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .dropzone-file-name {
+    margin: 0;
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-base07);
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+  }
+
+  .dropzone-file-meta {
+    margin: var(--space-1) 0 0 0;
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+  }
+
+  .dropzone-clear {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-1);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--color-base04);
+    cursor: pointer;
+    transition: background 0.15s ease, color 0.15s ease;
+    z-index: 1;
+  }
+
+  .dropzone-clear:hover {
+    background: var(--color-base02);
+    color: var(--color-base05);
+  }
+</style>

package/src/components/forms/FileUpload.svelte

@@ -0,0 +1,266 @@
+<!--
+  @component FileUpload
+
+  A file upload component with drag-and-drop support.
+
+  @example
+  <FileUpload onchange={handleFiles} accept="image/*" />
+
+  @example
+  // Multiple files
+  <FileUpload onchange={handleFiles} multiple />
+-->
+<script>
+  import { cn } from '../../utils/cn.svelte.js';
+
+  let {
+    accept = '*',
+    multiple = false,
+    disabled = false,
+    maxSize = null,
+    label = 'Drop files here or click to upload',
+    hint = '',
+    class: className = '',
+    onchange,
+    onerror,
+    ...rest
+  } = $props();
+
+  let fileInput = $state(null);
+  let isDragging = $state(false);
+  let files = $state([]);
+
+  function validateFile(file) {
+    if (maxSize && file.size > maxSize) {
+      return `File "${file.name}" exceeds maximum size of ${formatSize(maxSize)}`;
+    }
+    return null;
+  }
+
+  function formatSize(bytes) {
+    if (bytes < 1024) return bytes + ' B';
+    if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(1) + ' KB';
+    return (bytes / (1024 * 1024)).toFixed(1) + ' MB';
+  }
+
+  function handleFiles(fileList) {
+    const newFiles = Array.from(fileList);
+    const errors = [];
+
+    for (const file of newFiles) {
+      const error = validateFile(file);
+      if (error) {
+        errors.push(error);
+      }
+    }
+
+    if (errors.length > 0) {
+      onerror?.(errors);
+      return;
+    }
+
+    files = multiple ? [...files, ...newFiles] : newFiles;
+    onchange?.(files);
+  }
+
+  function handleInputChange(e) {
+    if (e.target.files?.length) {
+      handleFiles(e.target.files);
+    }
+  }
+
+  function handleDrop(e) {
+    e.preventDefault();
+    isDragging = false;
+    if (!disabled && e.dataTransfer?.files?.length) {
+      handleFiles(e.dataTransfer.files);
+    }
+  }
+
+  function handleDragOver(e) {
+    e.preventDefault();
+    if (!disabled) {
+      isDragging = true;
+    }
+  }
+
+  function handleDragLeave(e) {
+    e.preventDefault();
+    isDragging = false;
+  }
+
+  function openFileDialog() {
+    if (!disabled) {
+      fileInput?.click();
+    }
+  }
+
+  function removeFile(index) {
+    files = files.filter((_, i) => i !== index);
+    onchange?.(files);
+  }
+</script>
+
+<div class={cn('file-upload', className)}>
+  <button
+    type="button"
+    class="upload-zone"
+    class:upload-zone-dragging={isDragging}
+    class:upload-zone-disabled={disabled}
+    onclick={openFileDialog}
+    ondrop={handleDrop}
+    ondragover={handleDragOver}
+    ondragleave={handleDragLeave}
+    {disabled}
+  >
+    <svg class="upload-icon" width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5">
+      <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"></path>
+      <polyline points="17 8 12 3 7 8"></polyline>
+      <line x1="12" y1="3" x2="12" y2="15"></line>
+    </svg>
+    <span class="upload-label">{label}</span>
+    {#if hint}
+      <span class="upload-hint">{hint}</span>
+    {/if}
+  </button>
+
+  <input
+    bind:this={fileInput}
+    type="file"
+    {accept}
+    {multiple}
+    {disabled}
+    onchange={handleInputChange}
+    class="upload-input"
+    {...rest}
+  />
+
+  {#if files.length > 0}
+    <ul class="file-list">
+      {#each files as file, index}
+        <li class="file-item">
+          <span class="file-name">{file.name}</span>
+          <span class="file-size">{formatSize(file.size)}</span>
+          <button
+            type="button"
+            class="file-remove"
+            onclick={() => removeFile(index)}
+            aria-label="Remove file"
+          >
+            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+              <line x1="18" y1="6" x2="6" y2="18"></line>
+              <line x1="6" y1="6" x2="18" y2="18"></line>
+            </svg>
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/if}
+</div>
+
+<style>
+  .file-upload {
+    width: 100%;
+  }
+
+  .upload-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: var(--space-2);
+    width: 100%;
+    padding: var(--space-6) var(--space-4);
+    background: var(--color-base00);
+    border: 2px dashed var(--color-base03);
+    border-radius: var(--radius-lg);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+
+  .upload-zone:hover:not(:disabled) {
+    border-color: var(--color-base0D);
+    background: color-mix(in srgb, var(--color-base0D) 5%, transparent);
+  }
+
+  .upload-zone-dragging {
+    border-color: var(--color-base0D);
+    background: color-mix(in srgb, var(--color-base0D) 10%, transparent);
+  }
+
+  .upload-zone-disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .upload-icon {
+    color: var(--color-base04);
+  }
+
+  .upload-label {
+    font-size: var(--text-sm);
+    font-weight: 500;
+    color: var(--color-base05);
+  }
+
+  .upload-hint {
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+  }
+
+  .upload-input {
+    display: none;
+  }
+
+  .file-list {
+    list-style: none;
+    margin: var(--space-3) 0 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2);
+  }
+
+  .file-item {
+    display: flex;
+    align-items: center;
+    gap: var(--space-2);
+    padding: var(--space-2) var(--space-3);
+    background: var(--color-base01);
+    border: 1px solid var(--color-base02);
+    border-radius: var(--radius-md);
+  }
+
+  .file-name {
+    flex: 1;
+    font-size: var(--text-sm);
+    color: var(--color-base05);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .file-size {
+    font-size: var(--text-xs);
+    color: var(--color-base04);
+    white-space: nowrap;
+  }
+
+  .file-remove {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-1);
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--color-base04);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+
+  .file-remove:hover {
+    color: var(--color-base08);
+    background: color-mix(in srgb, var(--color-base08) 10%, transparent);
+  }
+</style>

package/src/components/forms/IconInput.svelte

@@ -0,0 +1,184 @@
+<!--
+  @component IconInput
+
+  An input wrapper that supports left/right icons, loading states, and clearable functionality.
+
+  @example Basic with icon
+  <IconInput bind:value={email} placeholder="Email">
+    {#snippet leftIcon()}
+      <MailIcon size={16} />
+    {/snippet}
+  </IconInput>
+
+  @example With loading and clearable
+  <IconInput
+    bind:value={search}
+    placeholder="Search..."
+    loading
+    clearable
+    onclear={() => search = ''}
+  >
+    {#snippet leftIcon()}
+      <SearchIcon size={16} />
+    {/snippet}
+  </IconInput>
+-->
+<script>
+  import Input from './Input.svelte';
+
+  let {
+    value = $bindable(''),
+    type = 'text',
+    placeholder = '',
+    disabled = false,
+    size = 'md',
+    loading = false,
+    clearable = false,
+    class: className = '',
+    leftIcon,
+    rightIcon,
+    oninput,
+    onchange,
+    onclear,
+    ...rest
+  } = $props();
+
+  function handleClear() {
+    value = '';
+    onclear?.();
+  }
+
+  const showClearButton = $derived(clearable && value && !loading);
+  const hasLeftIcon = $derived(!!leftIcon);
+  const hasRightIcon = $derived(!!rightIcon || loading || showClearButton);
+</script>
+
+<div class="icon-input icon-input-{size} {className}">
+  {#if leftIcon}
+    <span class="icon-left">
+      {#if loading}
+        <svg class="spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+          <circle cx="12" cy="12" r="10" opacity="0.2" />
+          <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round" />
+        </svg>
+      {:else}
+        {@render leftIcon()}
+      {/if}
+    </span>
+  {/if}
+
+  <Input
+    {type}
+    bind:value
+    {placeholder}
+    {disabled}
+    {size}
+    class="icon-input-field"
+    style="padding-left: {hasLeftIcon ? '2.5rem' : ''}; padding-right: {hasRightIcon ? '2.5rem' : ''};"
+    {oninput}
+    {onchange}
+    {...rest}
+  />
+
+  {#if showClearButton}
+    <button
+      type="button"
+      class="icon-clear"
+      onclick={handleClear}
+      aria-label="Clear input"
+    >
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <line x1="18" y1="6" x2="6" y2="18"></line>
+        <line x1="6" y1="6" x2="18" y2="18"></line>
+      </svg>
+    </button>
+  {:else if rightIcon && !loading}
+    <span class="icon-right">
+      {@render rightIcon()}
+    </span>
+  {:else if loading && !leftIcon}
+    <span class="icon-right">
+      <svg class="spinner" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+        <circle cx="12" cy="12" r="10" opacity="0.2" />
+        <path d="M12 2a10 10 0 0 1 10 10" stroke-linecap="round" />
+      </svg>
+    </span>
+  {/if}
+</div>
+
+<style>
+  .icon-input {
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    width: 100%;
+  }
+
+  .icon-input :global(.icon-input-field) {
+    width: 100%;
+  }
+
+  .icon-left,
+  .icon-right {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--color-base04);
+    pointer-events: none;
+  }
+
+  .icon-left {
+    left: 0.75rem;
+  }
+
+  .icon-right {
+    right: 0.75rem;
+  }
+
+  .icon-input-sm .icon-left,
+  .icon-input-sm .icon-right {
+    left: 0.625rem;
+  }
+
+  .icon-input-sm .icon-right {
+    right: 0.625rem;
+  }
+
+  .icon-input-lg .icon-left {
+    left: 1rem;
+  }
+
+  .icon-input-lg .icon-right {
+    right: 1rem;
+  }
+
+  .spinner {
+    animation: spin 1s linear infinite;
+  }
+
+  @keyframes spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+  }
+
+  .icon-clear {
+    position: absolute;
+    right: 0.5rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0.25rem;
+    background: transparent;
+    border: none;
+    border-radius: var(--radius-sm);
+    color: var(--color-base04);
+    cursor: pointer;
+    transition: var(--transition-colors);
+  }
+
+  .icon-clear:hover {
+    color: var(--color-base05);
+    background: var(--color-base02);
+  }
+</style>