@joewinke/jatui 0.1.22 → 0.1.24

package/src/lib/components/ColorSelector.svelte

@@ -1,167 +0,0 @@
-<script lang="ts">
-  import { slide } from "svelte/transition"
-
-  let {
-    selectedColor = null,
-    onSelect = (color: string | null) => {},
-    colorLabel = "Collection Color",
-    compact = false,
-  } = $props<{
-    selectedColor: string | null
-    onSelect?: (color: string | null) => void
-    colorLabel?: string
-    compact?: boolean
-  }>()
-
-  let showSelector = $state(false)
-  // svelte-ignore state_referenced_locally
-  let lastSelectedColor = $state(selectedColor)
-  let selectionAnimating = $state(false)
-
-  const colorOptions = [
-    { name: "Primary", value: "primary", bgClass: "bg-primary", textClass: "text-primary-content" },
-    { name: "Secondary", value: "secondary", bgClass: "bg-secondary", textClass: "text-secondary-content" },
-    { name: "Accent", value: "accent", bgClass: "bg-accent", textClass: "text-accent-content" },
-    { name: "Neutral", value: "neutral", bgClass: "bg-neutral", textClass: "text-neutral-content" },
-    { name: "Info", value: "info", bgClass: "bg-info", textClass: "text-info-content" },
-    { name: "Success", value: "success", bgClass: "bg-success", textClass: "text-success-content" },
-    { name: "Warning", value: "warning", bgClass: "bg-warning", textClass: "text-warning-content" },
-    { name: "Error", value: "error", bgClass: "bg-error", textClass: "text-error-content" },
-  ]
-
-  function isSelected(colorValue: string): boolean {
-    if (!selectedColor) return false
-    return selectedColor === colorValue
-  }
-
-  function handleColorSelect(colorValue: string) {
-    if (colorValue !== selectedColor) {
-      lastSelectedColor = colorValue
-      selectionAnimating = true
-      onSelect(colorValue)
-
-      setTimeout(() => {
-        selectionAnimating = false
-        if (compact) {
-          setTimeout(() => { showSelector = false }, 800)
-        }
-      }, 500)
-    } else {
-      onSelect(colorValue)
-    }
-  }
-</script>
-
-<div class="form-control">
-  <button
-    type="button"
-    class="flex w-full items-center justify-between px-2 py-3 hover:bg-base-200 rounded-lg transition-colors"
-    onclick={() => (showSelector = !showSelector)}
-  >
-    <div class="label flex items-center gap-2 cursor-pointer">
-      <span class="label-text font-medium">{colorLabel}</span>
-      {#if selectedColor}
-        <div class="ml-4">
-          <div class="color-preview {selectedColor}"></div>
-        </div>
-      {/if}
-    </div>
-    <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="transition-transform duration-300 {showSelector ? 'rotate-180' : ''}">
-      <polyline points="6 9 12 15 18 9"></polyline>
-    </svg>
-  </button>
-
-  {#if showSelector}
-    <div class="color-selector-wrapper" transition:slide={{ duration: 200 }}>
-      <div class="grid grid-cols-4 gap-3 p-4 bg-base-200 rounded-lg">
-        {#each colorOptions as option}
-          <button
-            type="button"
-            class="tooltip tooltip-top color-btn {option.bgClass} border-2 border-base-300
-              {isSelected(option.value) ? 'selected' : ''}
-              {selectionAnimating && lastSelectedColor === option.value ? 'selecting' : ''}"
-            data-tip={option.name}
-            onclick={() => handleColorSelect(option.value)}
-            aria-label="Select {option.name} color"
-          >
-            {#if isSelected(option.value) || (selectionAnimating && lastSelectedColor === option.value)}
-              <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="{option.textClass} {selectionAnimating && lastSelectedColor === option.value ? 'animate-checkmark' : ''}">
-                <polyline points="20 6 9 17 4 12"></polyline>
-              </svg>
-            {/if}
-          </button>
-        {/each}
-      </div>
-
-      {#if selectedColor}
-        <div class="flex justify-end mt-2">
-          <button
-            class="text-xs text-base-content/60 hover:text-base-content transition-colors px-2 py-1 rounded hover:bg-base-200"
-            onclick={() => onSelect(null)}
-          >
-            Clear color
-          </button>
-        </div>
-      {/if}
-    </div>
-  {/if}
-</div>
-
-<style>
-  .color-selector-wrapper { padding-top: 0.5rem; }
-
-  .color-btn {
-    width: 100%;
-    aspect-ratio: 1;
-    border-radius: 0.75rem;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-    cursor: pointer;
-  }
-
-  .color-btn:hover {
-    transform: scale(1.05);
-  }
-
-  .color-btn.selected {
-    border-color: color-mix(in oklch, var(--color-base-100) 90%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 25%, transparent);
-  }
-
-  .color-btn.selecting {
-    transform: scale(1.12);
-    border-color: color-mix(in oklch, var(--color-base-100) 90%, transparent);
-    box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-base-content) 35%, transparent);
-    animation: pulse 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .color-btn { transition: none; }
-    .color-btn:hover { transform: none; }
-    .color-btn.selecting { transform: none; animation: none; }
-  }
-
-  .color-preview {
-    width: 15px;
-    height: 15px;
-    border-radius: 50%;
-    border: 1px solid color-mix(in oklch, var(--color-base-content) 20%, transparent);
-  }
-
-  @keyframes pulse {
-    0% { transform: scale(1); }
-    50% { transform: scale(1.15); }
-    100% { transform: scale(1.1); }
-  }
-
-  .animate-checkmark {
-    animation: zoom-in 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-
-  @keyframes zoom-in {
-    0% { transform: scale(0); opacity: 0; }
-    100% { transform: scale(1); opacity: 1; }
-  }
-</style>