@sakoa/ui 0.1.0

package/registry/source/components/ui/color-picker/SColorPickerPresets.vue

@@ -0,0 +1,87 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'
+
+export interface Props {
+  presets?: string[]
+  label?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  presets: () => [
+    '#ef4444', '#f97316', '#f59e0b', '#eab308', '#84cc16', '#22c55e',
+    '#10b981', '#14b8a6', '#06b6d4', '#0ea5e9', '#3b82f6', '#6366f1',
+    '#8b5cf6', '#a855f7', '#d946ef', '#ec4899', '#f43f5e', '#000000',
+    '#ffffff', '#6b7280'
+  ],
+  label: 'Presets'
+})
+
+const ctx = inject<SColorPickerContext>(SColorPickerContextKey)
+if (!ctx) console.warn('[SColorPickerPresets] Must be used inside SColorPicker')
+</script>
+
+<template>
+  <div v-if="ctx && presets.length" class="s-color-picker__presets">
+    <div class="s-color-picker__presets-label">{{ label }}</div>
+    <div class="s-color-picker__swatches">
+      <button
+        v-for="color in presets"
+        :key="color"
+        type="button"
+        class="s-color-picker__swatch"
+        :class="[ctx.sizeConfig.value?.swatch, { 's-color-picker__swatch--active': ctx.currentHex.value.toUpperCase() === color.toUpperCase() }]"
+        :style="{ backgroundColor: color }"
+        :title="color"
+        :disabled="ctx.disabled.value || ctx.readonly.value"
+        @click="ctx.selectPreset(color)"
+      ></button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.s-color-picker__presets {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.s-color-picker__presets-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--s-muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.s-color-picker__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.s-color-picker__swatch {
+  border-radius: 0.375rem;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.s-color-picker__swatch:hover:not(:disabled) {
+  transform: scale(1.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.s-color-picker__swatch--active {
+  border-color: var(--s-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--s-primary) 15%, transparent);
+}
+
+@media (max-width: 400px) {
+  .s-color-picker__swatches {
+    justify-content: flex-start;
+  }
+}
+</style>

package/registry/source/components/ui/color-picker/SColorPickerPreview.vue

@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { computed, inject } from 'vue'
+import { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'
+
+const ctx = inject<SColorPickerContext>(SColorPickerContextKey)
+if (!ctx) console.warn('[SColorPickerPreview] Must be used inside SColorPicker')
+
+const bgColor = computed(() => {
+  if (!ctx) return '#000'
+  if (ctx.showAlpha.value) {
+    const { r, g, b } = ctx.currentRgb.value
+    return `rgba(${r}, ${g}, ${b}, ${ctx.hsva.value.a})`
+  }
+  return ctx.currentHex.value
+})
+</script>
+
+<template>
+  <div class="s-color-picker__preview">
+    <div
+      class="s-color-picker__preview-color"
+      :style="{ backgroundColor: bgColor }"
+    ></div>
+  </div>
+</template>
+
+<style scoped>
+.s-color-picker__preview {
+  flex: 1;
+  height: 2.5rem;
+  border-radius: 0.5rem;
+  overflow: hidden;
+  border: 1px solid var(--s-border);
+  background-image: linear-gradient(45deg, #ccc 25%, transparent 25%),
+                    linear-gradient(-45deg, #ccc 25%, transparent 25%),
+                    linear-gradient(45deg, transparent 75%, #ccc 75%),
+                    linear-gradient(-45deg, transparent 75%, #ccc 75%);
+  background-size: 10px 10px;
+  background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
+}
+
+.s-color-picker__preview-color {
+  width: 100%;
+  height: 100%;
+}
+</style>

package/registry/source/components/ui/color-picker/SColorPickerRecent.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { inject } from 'vue'
+import { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'
+
+export interface Props {
+  label?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  label: 'Recent'
+})
+
+const ctx = inject<SColorPickerContext>(SColorPickerContextKey)
+if (!ctx) console.warn('[SColorPickerRecent] Must be used inside SColorPicker')
+</script>
+
+<template>
+  <div v-if="ctx && ctx.recentColors.value.length" class="s-color-picker__recent">
+    <div class="s-color-picker__presets-label">{{ label }}</div>
+    <div class="s-color-picker__swatches">
+      <button
+        v-for="color in ctx.recentColors.value"
+        :key="color"
+        type="button"
+        class="s-color-picker__swatch"
+        :class="[ctx.sizeConfig.value?.swatch, { 's-color-picker__swatch--active': ctx.currentHex.value.toUpperCase() === color.toUpperCase() }]"
+        :style="{ backgroundColor: color }"
+        :title="color"
+        :disabled="ctx.disabled.value || ctx.readonly.value"
+        @click="ctx.selectPreset(color)"
+      ></button>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.s-color-picker__recent {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.s-color-picker__presets-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  color: var(--s-muted-foreground);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.s-color-picker__swatches {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.375rem;
+}
+
+.s-color-picker__swatch {
+  border-radius: 0.375rem;
+  border: 2px solid transparent;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+
+.s-color-picker__swatch:hover:not(:disabled) {
+  transform: scale(1.15);
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+}
+
+.s-color-picker__swatch--active {
+  border-color: var(--s-primary);
+  box-shadow: 0 0 0 2px color-mix(in srgb, var(--s-primary) 15%, transparent);
+}
+</style>

package/registry/source/components/ui/color-picker/SColorPickerSpectrum.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+import { ref, computed, inject, onBeforeUnmount } from 'vue'
+import { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'
+
+const ctx = inject<SColorPickerContext>(SColorPickerContextKey)
+if (!ctx) console.warn('[SColorPickerSpectrum] Must be used inside SColorPicker')
+
+const spectrumRef = ref<HTMLElement | null>(null)
+const isDragging = ref(false)
+
+const hueColor = computed(() => {
+  if (!ctx) return 'rgb(0,0,0)'
+  const rgb = ctx.hsvToRgb(ctx.hsva.value.h, 100, 100)
+  return `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`
+})
+
+const spectrumStyle = computed(() => ({
+  background: `linear-gradient(to top, #000, transparent),
+               linear-gradient(to right, #fff, ${hueColor.value})`
+}))
+
+const cursorPosition = computed(() => ({
+  left: `${ctx?.hsva.value.s ?? 0}%`,
+  top: `${100 - (ctx?.hsva.value.v ?? 0)}%`
+}))
+
+function updateFromEvent(event: MouseEvent) {
+  if (!spectrumRef.value || !ctx) return
+  const rect = spectrumRef.value.getBoundingClientRect()
+  const x = Math.max(0, Math.min(event.clientX - rect.left, rect.width))
+  const y = Math.max(0, Math.min(event.clientY - rect.top, rect.height))
+  ctx.hsva.value.s = (x / rect.width) * 100
+  ctx.hsva.value.v = 100 - (y / rect.height) * 100
+  ctx.emitInput()
+}
+
+function updateFromTouch(event: TouchEvent) {
+  if (!spectrumRef.value || !ctx || !event.touches[0]) return
+  const rect = spectrumRef.value.getBoundingClientRect()
+  const x = Math.max(0, Math.min(event.touches[0].clientX - rect.left, rect.width))
+  const y = Math.max(0, Math.min(event.touches[0].clientY - rect.top, rect.height))
+  ctx.hsva.value.s = (x / rect.width) * 100
+  ctx.hsva.value.v = 100 - (y / rect.height) * 100
+  ctx.emitInput()
+}
+
+function onMouseDown(event: MouseEvent) {
+  if (ctx?.disabled.value || ctx?.readonly.value) return
+  isDragging.value = true
+  updateFromEvent(event)
+  document.addEventListener('mousemove', onMouseMove)
+  document.addEventListener('mouseup', onMouseUp)
+}
+
+function onTouchStart(event: TouchEvent) {
+  if (ctx?.disabled.value || ctx?.readonly.value) return
+  event.preventDefault()
+  isDragging.value = true
+  updateFromTouch(event)
+  document.addEventListener('touchmove', onTouchMove, { passive: false })
+  document.addEventListener('touchend', onTouchEnd)
+}
+
+function onMouseMove(event: MouseEvent) {
+  if (!isDragging.value) return
+  updateFromEvent(event)
+}
+
+function onTouchMove(event: TouchEvent) {
+  if (!isDragging.value) return
+  event.preventDefault()
+  updateFromTouch(event)
+}
+
+function onMouseUp() {
+  isDragging.value = false
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+  ctx?.emitChange()
+}
+
+function onTouchEnd() {
+  isDragging.value = false
+  document.removeEventListener('touchmove', onTouchMove)
+  document.removeEventListener('touchend', onTouchEnd)
+  ctx?.emitChange()
+}
+
+onBeforeUnmount(() => {
+  document.removeEventListener('mousemove', onMouseMove)
+  document.removeEventListener('mouseup', onMouseUp)
+  document.removeEventListener('touchmove', onTouchMove)
+  document.removeEventListener('touchend', onTouchEnd)
+})
+</script>
+
+<template>
+  <div
+    ref="spectrumRef"
+    class="s-color-picker__spectrum w-full"
+    :class="ctx?.sizeConfig.value?.spectrumHeight"
+    :style="spectrumStyle"
+    @mousedown="onMouseDown"
+    @touchstart="onTouchStart"
+  >
+    <div
+      class="s-color-picker__spectrum-cursor"
+      :class="{ 's-color-picker__spectrum-cursor--dragging': isDragging }"
+      :style="cursorPosition"
+    >
+      <div class="s-color-picker__spectrum-cursor-inner" :style="{ backgroundColor: ctx?.currentHex.value }"></div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.s-color-picker__spectrum {
+  position: relative;
+  border-radius: 0.75rem;
+  cursor: crosshair;
+  overflow: hidden;
+  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.15);
+  touch-action: none;
+  user-select: none;
+  -webkit-user-select: none;
+}
+
+.s-color-picker__spectrum-cursor {
+  position: absolute;
+  width: 1.25rem;
+  height: 1.25rem;
+  transform: translate(-50%, -50%);
+  pointer-events: none;
+  transition: transform 0.1s ease;
+}
+
+.s-color-picker__spectrum-cursor--dragging {
+  transform: translate(-50%, -50%) scale(1.2);
+}
+
+.s-color-picker__spectrum-cursor-inner {
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  border: 3px solid white;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3),
+              inset 0 0 0 1px rgba(0, 0, 0, 0.1);
+}
+</style>

package/registry/source/components/ui/color-picker/index.ts

@@ -0,0 +1,11 @@
+export { default as SColorPicker } from './SColorPicker.vue'
+export { default as SColorPickerSpectrum } from './SColorPickerSpectrum.vue'
+export { default as SColorPickerHueSlider } from './SColorPickerHueSlider.vue'
+export { default as SColorPickerAlphaSlider } from './SColorPickerAlphaSlider.vue'
+export { default as SColorPickerPreview } from './SColorPickerPreview.vue'
+export { default as SColorPickerEyeDropper } from './SColorPickerEyeDropper.vue'
+export { default as SColorPickerCopy } from './SColorPickerCopy.vue'
+export { default as SColorPickerInputs } from './SColorPickerInputs.vue'
+export { default as SColorPickerPresets } from './SColorPickerPresets.vue'
+export { default as SColorPickerRecent } from './SColorPickerRecent.vue'
+export { SColorPickerContextKey, type SColorPickerContext } from './SColorPicker.vue'