@rimelight/ui 0.0.37 → 0.0.39

package/src/components/astro/RLAChatShimmer.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatShimmerProps } from "../../types"
-import chatShimmerThemeDefault, { createChatShimmerTheme } from "../../themes/chat-shimmer.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const chatShimmerTheme = uiConfig.colors ? createChatShimmerTheme() : chatShimmerThemeDefault
-
-const chatShimmer = scv(chatShimmerTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatShimmerProps
-
-const classes = resolveClasses(chatShimmer, {}, useUi("chatShimmer", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLAChatTool.astro

@@ -1,23 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChatToolProps } from "../../types"
-import chatToolThemeDefault, { createChatToolTheme } from "../../themes/chat-tool.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const chatToolTheme = uiConfig.colors ? createChatToolTheme() : chatToolThemeDefault
-
-const chatTool = scv(chatToolTheme)
-
-const {
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChatToolProps
-
-const classes = resolveClasses(chatTool, {}, useUi("chatTool", uiProp), className);
----
-<div class={classes.root} data-slot="root" {...rest}>
-  <slot />
-</div>

package/src/components/astro/RLACheckbox.astro

@@ -1,53 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CheckboxProps } from "../../types"
-import checkboxThemeDefault, { createCheckboxTheme } from "../../themes/checkbox.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const checkboxTheme = uiConfig.colors ? createCheckboxTheme(uiConfig.colors) : checkboxThemeDefault
-
-const checkbox = scv(checkboxTheme)
-
-const {
-  checked = false,
-  disabled = false,
-  name,
-  label,
-  color = "primary",
-  size = "md",
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CheckboxProps
-
-const classes = resolveClasses(checkbox, {
-  color,
-  size,
-  checked,
-  theme
-}, useUi("checkbox", uiProp), className);
----
-<label class={classes.root} data-slot="root">
-  <input
-    type="checkbox"
-    class={classes.input}
-    checked={checked}
-    disabled={disabled}
-    name={name}
-    {...rest}
-  />
-  <div class={classes.box} data-slot="box">
-    <div class={classes.indicator} data-slot="indicator">
-      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" class="size-3"><path d="M20 6 9 17l-5-5"/></svg>
-    </div>
-  </div>
-  {label !== undefined && label !== null && (
-    <span class={classes.label} data-slot="label">
-      {label}
-    </span>
-  )}
-  {!label && <slot />}
-</label>

package/src/components/astro/RLAChip.astro

@@ -1,57 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { ChipProps } from "../../types"
-import chipThemeDefault, { createChipTheme } from "../../themes/chip.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const chipTheme = uiConfig.colors ? createChipTheme(uiConfig.colors) : chipThemeDefault
-
-const chip = scv(chipTheme)
-
-const {
-  text,
-  color = "primary",
-  size = "md",
-  position = "top-right",
-  inset = false,
-  standalone = false,
-  show = true,
-  theme,
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as ChipProps & {
-  color?: string
-  size?: "3xs" | "2xs" | "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl"
-  position?: "top-right" | "bottom-right" | "top-left" | "bottom-left"
-  inset?: boolean
-  standalone?: boolean
-}
-
-const classes = resolveClasses(chip, {
-  color: color as "neutral",
-  size: size as "md",
-  position: position as "top-right",
-  inset,
-  standalone,
-  theme
-}, useUi("chip", uiProp), className)
----
-{standalone ? (
-  show && (
-    <span class={classes.base} data-slot="base">
-      <slot>{text}</slot>
-    </span>
-  )
-) : (
-  <div class={classes.root} data-slot="root" {...rest}>
-    <slot />
-    {show && (
-      <span class={classes.base} data-slot="base">
-        <slot name="content">{text}</slot>
-      </span>
-    )}
-  </div>
-)}

package/src/components/astro/RLACollapsible.astro

@@ -1,41 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import type { CollapsibleProps } from "../../types"
-import collapsibleThemeDefault, { createCollapsibleTheme } from "../../themes/collapsible.theme"
-
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const collapsibleTheme = uiConfig.colors ? createCollapsibleTheme() : collapsibleThemeDefault
-const collapsible = scv(collapsibleTheme)
-
-const {
-  open = false,
-  label = "Toggle",
-  icon,
-  size = "md",
-  color = "primary",
-  ui: uiProp,
-  class: className,
-  ...rest
-} = Astro.props as CollapsibleProps
-
-const classes = resolveClasses(collapsible, {
-  open
-}, useUi("collapsible", uiProp), className);
----
-<details class={classes.root} open={open ? true : undefined} data-slot="root" {...rest}>
-  <summary class={classes.trigger} data-slot="trigger">
-    <slot name="trigger">
-      <span class="flex items-center gap-2">
-        {icon && <span class={icon} />}
-        {label}
-      </span>
-      <span class="i-lucide-chevron-down transition-transform duration-200 group-open:rotate-180" />
-    </slot>
-  </summary>
-  <div class={classes.content} data-slot="content">
-    <slot />
-  </div>
-</details>

package/src/components/astro/RLAColorArea.astro

@@ -1,432 +0,0 @@
----
-import { scv } from "css-variants"
-import { useUi, resolveClasses } from "../../utils"
-import colorAreaThemeDefault, { createColorAreaTheme } from "../../themes/color-area.theme"
-import { getUIConfig } from "virtual:rimelight-ui"
-
-const uiConfig = getUIConfig()
-const colorAreaTheme = uiConfig.colors ? createColorAreaTheme(uiConfig.colors) : colorAreaThemeDefault
-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 "../../utils/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>