@rimelight/ui 0.0.36 → 0.0.38

package/src/components/color-area/RLAColorArea.astro

@@ -0,0 +1,432 @@
+---
+import { scv } from "css-variants"
+import { useUi } from "../../utils/useUi"
+import { resolveClasses } from "../../utils/resolveClasses"
+import { resolveTheme } from "../../utils/resolveTheme"
+import colorAreaThemeDefault, { createColorAreaTheme } from "./color-area.theme"
+const colorAreaTheme = resolveTheme(colorAreaThemeDefault, createColorAreaTheme)
+
+const colorArea = scv(colorAreaTheme)
+
+export interface Props {
+  colorSpace?: "hsl" | "rgb" | "hsb"
+  defaultValue?: string
+  disabled?: boolean
+  modelValue?: string
+  name?: string
+  required?: boolean
+  xChannel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
+  xName?: string
+  yChannel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
+  yName?: string
+  color?: any
+  theme?: any
+  ui?: any
+  class?: string
+}
+
+const {
+  colorSpace = "hsl",
+  defaultValue = "#ff0000",
+  disabled = false,
+  modelValue,
+  name,
+  required,
+  xChannel = "saturation",
+  xName,
+  yChannel = "lightness",
+  yName,
+  color = "primary",
+  theme,
+  ui: uiProp,
+  class: className,
+  ...rest
+} = Astro.props as Props
+
+const classes = resolveClasses(colorArea, {
+  color,
+  theme
+}, useUi("colorArea", uiProp), className)
+
+const initialValue = modelValue || defaultValue
+---
+<rla-color-area
+  data-color-space={colorSpace}
+  data-value={initialValue}
+  data-x-channel={xChannel}
+  data-y-channel={yChannel}
+  data-disabled={disabled ? "true" : "false"}
+  {...rest}
+>
+  <div class={classes.root} data-slot="root">
+    <div class={classes.area} data-slot="area">
+      <div class={classes.thumb} data-slot="thumb" role="slider" aria-label="Color Area Thumb"></div>
+    </div>
+    {name && <input type="hidden" name={name} value={initialValue} data-main-input />}
+    {xName && <input type="hidden" name={xName} data-x-input />}
+    {yName && <input type="hidden" name={yName} data-y-input />}
+  </div>
+</rla-color-area>
+
+<script>
+  import {
+    hexToRgb,
+    rgbToHex,
+    rgbToHsl,
+    hslToRgb,
+    rgbToHsb,
+    hsbToRgb,
+    getChannelRange,
+    clamp
+  } from "../color-picker/color"
+
+  if (typeof HTMLElement !== 'undefined') {
+    class RLAColorArea extends HTMLElement {
+      private cleanup: (() => void) | null = null
+      private colorSpace: string = "hsl"
+      private xChannel: string = "saturation"
+      private yChannel: string = "lightness"
+      private value: string = "#ff0000"
+
+      // Internal channel state to prevent hue loss when dragging to grayscale regions (black/white/gray)
+      private hue: number = 0
+      private saturation: number = 100
+      private lightness: number = 50
+      private brightness: number = 100
+      private red: number = 255
+      private green: number = 0
+      private blue: number = 0
+
+      connectedCallback() {
+        this.style.display = 'contents'
+        this.colorSpace = this.getAttribute("data-color-space") || "hsl"
+        this.xChannel = this.getAttribute("data-x-channel") || "saturation"
+        this.yChannel = this.getAttribute("data-y-channel") || "lightness"
+        this.value = this.getAttribute("data-value") || "#ff0000"
+
+        const root = this.querySelector('[data-slot="root"]') as HTMLElement
+        const area = this.querySelector('[data-slot="area"]') as HTMLElement
+        const thumb = this.querySelector('[data-slot="thumb"]') as HTMLElement
+
+        if (!area || !thumb) return
+
+        const updateChannelsFromValue = (hex: string) => {
+          const rgb = hexToRgb(hex)
+          const hsl = rgbToHsl(rgb[0], rgb[1], rgb[2])
+          const hsb = rgbToHsb(rgb[0], rgb[1], rgb[2])
+
+          const max = Math.max(rgb[0], rgb[1], rgb[2])
+          const min = Math.min(rgb[0], rgb[1], rgb[2])
+          if (max !== min) {
+            this.hue = hsl[0]
+          }
+          this.saturation = hsl[1]
+          this.lightness = hsl[2]
+          this.brightness = hsb[2]
+          this.red = rgb[0]
+          this.green = rgb[1]
+          this.blue = rgb[2]
+        }
+
+        updateChannelsFromValue(this.value)
+
+        const updateUI = () => {
+          const disabled = this.getAttribute("data-disabled") === "true"
+          if (disabled) {
+            root.classList.add("opacity-50", "pointer-events-none")
+          } else {
+            root.classList.remove("opacity-50", "pointer-events-none")
+          }
+
+          const hue = this.hue
+
+          // Gradient backgrounds
+          if (this.colorSpace === "hsl" && this.xChannel === "saturation" && this.yChannel === "lightness") {
+            area.style.background = `
+              linear-gradient(to top, #000 0%, transparent 50%, #fff 100%),
+              linear-gradient(to right, #808080 0%, transparent 100%),
+              hsl(${hue}, 100%, 50%)
+            `
+          } else if (this.colorSpace === "hsb" && this.xChannel === "saturation" && this.yChannel === "brightness") {
+            area.style.background = `
+              linear-gradient(to top, #000 0%, transparent 100%),
+              linear-gradient(to right, #fff 0%, transparent 100%),
+              hsl(${hue}, 100%, 50%)
+            `
+          } else {
+            area.style.background = `hsl(${hue}, 100%, 50%)`
+          }
+          area.style.backgroundRepeat = "no-repeat"
+          area.style.backgroundSize = "100% 100%"
+
+          // Set thumb background color
+          thumb.style.backgroundColor = this.value
+
+          // Calculate Thumb Position
+          const xRange = getChannelRange(this.xChannel)
+          const yRange = getChannelRange(this.yChannel)
+
+          let xVal = 0
+          let yVal = 0
+
+          if (this.colorSpace === "hsl") {
+            const indexX = ["hue", "saturation", "lightness"].indexOf(this.xChannel)
+            const indexY = ["hue", "saturation", "lightness"].indexOf(this.yChannel)
+            const hsl = [this.hue, this.saturation, this.lightness]
+            xVal = indexX !== -1 ? hsl[indexX]! : 0
+            yVal = indexY !== -1 ? hsl[indexY]! : 0
+          } else if (this.colorSpace === "hsb") {
+            const indexX = ["hue", "saturation", "brightness"].indexOf(this.xChannel)
+            const indexY = ["hue", "saturation", "brightness"].indexOf(this.yChannel)
+            const hsb = [this.hue, this.saturation, this.brightness]
+            xVal = indexX !== -1 ? hsb[indexX]! : 0
+            yVal = indexY !== -1 ? hsb[indexY]! : 0
+          } else if (this.colorSpace === "rgb") {
+            const indexX = ["red", "green", "blue"].indexOf(this.xChannel)
+            const indexY = ["red", "green", "blue"].indexOf(this.yChannel)
+            const rgb = [this.red, this.green, this.blue]
+            xVal = indexX !== -1 ? rgb[indexX]! : 0
+            yVal = indexY !== -1 ? rgb[indexY]! : 0
+          }
+
+          const pctX = ((xVal - xRange.min) / (xRange.max - xRange.min)) * 100
+          const pctY = 100 - (((yVal - yRange.min) / (yRange.max - yRange.min)) * 100)
+
+          thumb.style.left = `${pctX}%`
+          thumb.style.top = `${pctY}%`
+
+          // Update inputs
+          const mainInput = this.querySelector("[data-main-input]") as HTMLInputElement
+          if (mainInput) mainInput.value = this.value
+
+          const xInput = this.querySelector("[data-x-input]") as HTMLInputElement
+          if (xInput) xInput.value = xVal.toString()
+
+          const yInput = this.querySelector("[data-y-input]") as HTMLInputElement
+          if (yInput) yInput.value = yVal.toString()
+        }
+
+        updateUI()
+
+        const observer = new MutationObserver((mutations) => {
+          mutations.forEach((mutation) => {
+            if (mutation.type === "attributes") {
+              if (mutation.attributeName === "data-value") {
+                const newVal = this.getAttribute("data-value") || "#ff0000"
+                if (newVal !== this.value) {
+                  this.value = newVal
+                  updateChannelsFromValue(this.value)
+                  updateUI()
+                }
+              }
+              if (mutation.attributeName === "data-disabled") {
+                updateUI()
+              }
+            }
+          })
+        })
+        observer.observe(this, { attributes: true })
+
+        let isDragging = false
+
+        const handlePointer = (e: PointerEvent) => {
+          if (this.getAttribute("data-disabled") === "true") return
+          const rect = area.getBoundingClientRect()
+          const x = clamp((e.clientX - rect.left) / rect.width, 0, 1)
+          const y = 1 - clamp((e.clientY - rect.top) / rect.height, 0, 1)
+
+          const xRange = getChannelRange(this.xChannel)
+          const yRange = getChannelRange(this.yChannel)
+
+          const newX = Math.round(xRange.min + x * (xRange.max - xRange.min))
+          const newY = Math.round(yRange.min + y * (yRange.max - yRange.min))
+
+          let newRgb: [number, number, number] = [this.red, this.green, this.blue]
+
+          if (this.colorSpace === "hsl") {
+            if (this.xChannel === "saturation") this.saturation = newX
+            if (this.yChannel === "lightness") this.lightness = newY
+            if (this.xChannel === "lightness") this.lightness = newX
+            if (this.yChannel === "saturation") this.saturation = newY
+            if (this.xChannel === "hue") this.hue = newX
+            if (this.yChannel === "hue") this.hue = newY
+            newRgb = hslToRgb(this.hue, this.saturation, this.lightness)
+          } else if (this.colorSpace === "hsb") {
+            if (this.xChannel === "saturation") this.saturation = newX
+            if (this.yChannel === "brightness") this.brightness = newY
+            if (this.xChannel === "brightness") this.brightness = newX
+            if (this.yChannel === "saturation") this.saturation = newY
+            if (this.xChannel === "hue") this.hue = newX
+            if (this.yChannel === "hue") this.hue = newY
+            newRgb = hsbToRgb(this.hue, this.saturation, this.brightness)
+          } else if (this.colorSpace === "rgb") {
+            if (this.xChannel === "red") this.red = newX
+            if (this.yChannel === "green") this.green = newY
+            if (this.xChannel === "green") this.green = newX
+            if (this.yChannel === "red") this.red = newY
+            if (this.xChannel === "blue") this.blue = newX
+            if (this.yChannel === "blue") this.blue = newY
+            newRgb = [this.red, this.green, this.blue]
+          }
+
+          const newValue = rgbToHex(newRgb[0], newRgb[1], newRgb[2])
+          const valueChanged = newValue !== this.value
+          if (valueChanged) {
+            this.value = newValue
+            this.setAttribute("data-value", newValue)
+          }
+          
+          updateUI()
+
+          if (valueChanged) {
+            this.dispatchEvent(new CustomEvent("change", { detail: newValue }))
+            this.dispatchEvent(new CustomEvent("update:modelValue", { detail: newValue }))
+
+            const rootId = this.getAttribute("id")
+            if (rootId) {
+              document.querySelectorAll(`[data-color-link="${rootId}"]`).forEach((el) => {
+                el.setAttribute("data-value", newValue)
+              })
+            }
+          }
+        }
+
+        const onPointerDown = (e: PointerEvent) => {
+          isDragging = true
+          area.setPointerCapture(e.pointerId)
+          handlePointer(e)
+        }
+
+        const onPointerMove = (e: PointerEvent) => {
+          if (!isDragging) return
+          handlePointer(e)
+        }
+
+        const onPointerUp = (e: PointerEvent) => {
+          if (!isDragging) return
+          isDragging = false
+          area.releasePointerCapture(e.pointerId)
+          this.dispatchEvent(new CustomEvent("changeEnd", { detail: this.value }))
+        }
+
+        area.addEventListener("pointerdown", onPointerDown)
+        area.addEventListener("pointermove", onPointerMove)
+        area.addEventListener("pointerup", onPointerUp)
+
+        const onKeyDown = (e: KeyboardEvent) => {
+          if (this.getAttribute("data-disabled") === "true") return
+          const isShift = e.shiftKey
+          const stepSize = isShift ? 10 : 1
+
+          const xRange = getChannelRange(this.xChannel)
+          const yRange = getChannelRange(this.yChannel)
+
+          let xVal = 0
+          let yVal = 0
+
+          if (this.colorSpace === "hsl") {
+            const indexX = ["hue", "saturation", "lightness"].indexOf(this.xChannel)
+            const indexY = ["hue", "saturation", "lightness"].indexOf(this.yChannel)
+            const hsl = [this.hue, this.saturation, this.lightness]
+            xVal = indexX !== -1 ? hsl[indexX]! : 0
+            yVal = indexY !== -1 ? hsl[indexY]! : 0
+          } else if (this.colorSpace === "hsb") {
+            const indexX = ["hue", "saturation", "brightness"].indexOf(this.xChannel)
+            const indexY = ["hue", "saturation", "brightness"].indexOf(this.yChannel)
+            const hsb = [this.hue, this.saturation, this.brightness]
+            xVal = indexX !== -1 ? hsb[indexX]! : 0
+            yVal = indexY !== -1 ? hsb[indexY]! : 0
+          } else if (this.colorSpace === "rgb") {
+            const indexX = ["red", "green", "blue"].indexOf(this.xChannel)
+            const indexY = ["red", "green", "blue"].indexOf(this.yChannel)
+            const rgb = [this.red, this.green, this.blue]
+            xVal = indexX !== -1 ? rgb[indexX]! : 0
+            yVal = indexY !== -1 ? rgb[indexY]! : 0
+          }
+
+          let handled = false
+          if (e.key === "ArrowLeft") {
+            xVal = clamp(xVal - stepSize, xRange.min, xRange.max)
+            handled = true
+          } else if (e.key === "ArrowRight") {
+            xVal = clamp(xVal + stepSize, xRange.min, xRange.max)
+            handled = true
+          } else if (e.key === "ArrowUp") {
+            yVal = clamp(yVal + stepSize, yRange.min, yRange.max)
+            handled = true
+          } else if (e.key === "ArrowDown") {
+            yVal = clamp(yVal - stepSize, yRange.min, yRange.max)
+            handled = true
+          } else if (e.key === "Home") {
+            xVal = xRange.min
+            handled = true
+          } else if (e.key === "End") {
+            xVal = xRange.max
+            handled = true
+          }
+
+          if (handled) {
+            e.preventDefault()
+            let newRgb: [number, number, number] = [this.red, this.green, this.blue]
+
+            if (this.colorSpace === "hsl") {
+              if (this.xChannel === "saturation") this.saturation = xVal
+              if (this.yChannel === "lightness") this.lightness = yVal
+              if (this.xChannel === "lightness") this.lightness = xVal
+              if (this.yChannel === "saturation") this.saturation = yVal
+              if (this.xChannel === "hue") this.hue = xVal
+              if (this.yChannel === "hue") this.hue = yVal
+              newRgb = hslToRgb(this.hue, this.saturation, this.lightness)
+            } else if (this.colorSpace === "hsb") {
+              if (this.xChannel === "saturation") this.saturation = xVal
+              if (this.yChannel === "brightness") this.brightness = yVal
+              if (this.xChannel === "brightness") this.brightness = xVal
+              if (this.yChannel === "saturation") this.saturation = yVal
+              if (this.xChannel === "hue") this.hue = xVal
+              if (this.yChannel === "hue") this.hue = yVal
+              newRgb = hsbToRgb(this.hue, this.saturation, this.brightness)
+            } else if (this.colorSpace === "rgb") {
+              if (this.xChannel === "red") this.red = xVal
+              if (this.yChannel === "green") this.green = yVal
+              if (this.xChannel === "green") this.green = xVal
+              if (this.yChannel === "red") this.red = yVal
+              if (this.xChannel === "blue") this.blue = xVal
+              if (this.yChannel === "blue") this.blue = yVal
+              newRgb = [this.red, this.green, this.blue]
+            }
+
+            const newValue = rgbToHex(newRgb[0], newRgb[1], newRgb[2])
+            if (newValue !== this.value) {
+              this.value = newValue
+              this.setAttribute("data-value", newValue)
+              updateUI()
+              this.dispatchEvent(new CustomEvent("change", { detail: newValue }))
+            }
+          }
+        }
+
+        thumb.setAttribute("tabindex", "0")
+        thumb.addEventListener("keydown", onKeyDown)
+
+        this.cleanup = () => {
+          area.removeEventListener("pointerdown", onPointerDown)
+          area.removeEventListener("pointermove", onPointerMove)
+          area.removeEventListener("pointerup", onPointerUp)
+          thumb.removeEventListener("keydown", onKeyDown)
+          observer.disconnect()
+        }
+      }
+
+      disconnectedCallback() {
+        if (this.cleanup) {
+          this.cleanup()
+          this.cleanup = null
+        }
+      }
+    }
+
+    if (!customElements.get("rla-color-area")) {
+      customElements.define("rla-color-area", RLAColorArea)
+    }
+  }
+</script>

package/src/components/color-area/color-area.theme.ts

@@ -0,0 +1,33 @@
+import { colorConfig } from "../../config/color.config"
+import { defineTheme } from "../../utils/defineTheme"
+
+export const createColorAreaTheme = (colors: readonly string[] = colorConfig.colors) =>
+  defineTheme({
+    slots: ["root", "area", "thumb"],
+    base: {
+      root: "relative block touch-none select-none rounded-lg w-full aspect-square outline-none",
+      area: "relative w-full h-full rounded-lg cursor-crosshair bg-muted outline-none",
+      thumb:
+        "absolute block size-4 rounded-full border-2 border-white shadow-md -translate-x-1/2 -translate-y-1/2 cursor-grab active:cursor-grabbing focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+    },
+    variants: {
+      color: Object.fromEntries(
+        colors.map((color) => [
+          color,
+          {
+            root: "rl-color-" + color,
+            thumb: `focus-visible:ring-[var(--rl-ring)]/50`
+          }
+        ])
+      ),
+      theme: {
+        light: { root: "rl-light" },
+        dark: { root: "rl-dark" }
+      }
+    },
+    defaultVariants: {
+      color: "primary"
+    }
+  })
+
+export default createColorAreaTheme()

package/src/components/color-area/color-area.ts

@@ -0,0 +1,19 @@
+import type { Theme, ThemeColor } from "../../types/component"
+
+export interface ColorAreaProps {
+  colorSpace?: "hsl" | "rgb" | "hsb"
+  defaultValue?: string
+  disabled?: boolean
+  modelValue?: string
+  name?: string
+  required?: boolean
+  xChannel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
+  xName?: string
+  yChannel?: "hue" | "saturation" | "red" | "green" | "blue" | "alpha" | "lightness" | "brightness"
+  yName?: string
+  color?: ThemeColor
+  theme?: Theme
+  ui?: any
+  class?: any
+  [key: string]: unknown
+}