reka-ui 2.8.2 → 2.9.1

package/src/shared/color/parse.ts

@@ -0,0 +1,140 @@
+import type { Color, HSBColor, HSLColor, RGBColor } from './types'
+
+/**
+ * Parses a color string into a Color object.
+ * Supports hex (#rrggbb, #rgb), rgb(), hsl(), and hsb()/hsv() formats.
+ */
+export function parseColor(value: string): Color {
+  const trimmed = value.trim().toLowerCase()
+
+  // Hex format
+  if (trimmed.startsWith('#')) {
+    return parseHex(trimmed)
+  }
+
+  // rgb() format
+  if (trimmed.startsWith('rgb')) {
+    return parseRgb(trimmed)
+  }
+
+  // hsl() format
+  if (trimmed.startsWith('hsl')) {
+    return parseHsl(trimmed)
+  }
+
+  // hsb() or hsv() format
+  if (trimmed.startsWith('hsb') || trimmed.startsWith('hsv')) {
+    return parseHsb(trimmed)
+  }
+
+  throw new Error(`Unable to parse color: ${value}`)
+}
+
+function parseHex(hex: string): RGBColor {
+  let normalized = hex.slice(1)
+
+  // Validate hex format (3, 6, or 8 hex digits)
+  if (!/^[0-9A-F]{3}$/i.test(normalized) && !/^[0-9A-F]{6}$/i.test(normalized) && !/^[0-9A-F]{8}$/i.test(normalized)) {
+    throw new Error(`Invalid hex color: ${hex}. Expected format: #RGB, #RRGGBB, or #RRGGBBAA`)
+  }
+
+  // Expand shorthand (e.g., #f00 -> #ff0000)
+  if (normalized.length === 3) {
+    normalized = normalized.split('').map(c => c + c).join('')
+  }
+
+  // Handle 6-digit hex
+  if (normalized.length === 6) {
+    const bigint = parseInt(normalized, 16)
+    return {
+      space: 'rgb',
+      r: (bigint >> 16) & 255,
+      g: (bigint >> 8) & 255,
+      b: bigint & 255,
+      alpha: 1,
+    }
+  }
+
+  // Handle 8-digit hex (with alpha)
+  if (normalized.length === 8) {
+    const bigint = parseInt(normalized, 16)
+    return {
+      space: 'rgb',
+      r: (bigint >> 24) & 255,
+      g: (bigint >> 16) & 255,
+      b: (bigint >> 8) & 255,
+      alpha: (bigint & 255) / 255,
+    }
+  }
+
+  throw new Error(`Invalid hex color: ${hex}`)
+}
+
+function parseRgb(rgb: string): RGBColor {
+  const match = rgb.match(/rgba?\(\s*([\d.]+)\s*,\s*([\d.]+)\s*,\s*([\d.]+)\s*(?:,\s*([\d.]+)\s*)?\)/)
+  if (!match) {
+    throw new Error(`Invalid RGB color: ${rgb}`)
+  }
+
+  return {
+    space: 'rgb',
+    r: parseFloat(match[1]),
+    g: parseFloat(match[2]),
+    b: parseFloat(match[3]),
+    alpha: match[4] ? parseFloat(match[4]) : 1,
+  }
+}
+
+function parseHsl(hsl: string): HSLColor {
+  const match = hsl.match(/hsla?\(\s*([\d.]+)\s*,\s*([\d.]+)%\s*,\s*([\d.]+)%\s*(?:,\s*([\d.]+)\s*)?\)/)
+  if (!match) {
+    throw new Error(`Invalid HSL color: ${hsl}`)
+  }
+
+  return {
+    space: 'hsl',
+    h: parseFloat(match[1]),
+    s: parseFloat(match[2]),
+    l: parseFloat(match[3]),
+    alpha: match[4] ? parseFloat(match[4]) : 1,
+  }
+}
+
+function parseHsb(hsb: string): HSBColor {
+  const match = hsb.match(/hsb[av]?\(\s*([\d.]+)\s*,\s*([\d.]+)%?\s*,\s*([\d.]+)%?\s*(?:,\s*([\d.]+)\s*)?\)/)
+  if (!match) {
+    throw new Error(`Invalid HSB color: ${hsb}`)
+  }
+
+  return {
+    space: 'hsb',
+    h: parseFloat(match[1]),
+    s: parseFloat(match[2]),
+    b: parseFloat(match[3]),
+    alpha: match[4] ? parseFloat(match[4]) : 1,
+  }
+}
+
+/**
+ * Normalizes a value to a Color object.
+ * If already a Color, returns it. If a string, parses it.
+ */
+export function normalizeColor(value: string | Color): Color {
+  if (typeof value === 'string') {
+    return parseColor(value)
+  }
+  return value
+}
+
+/**
+ * Checks if a string is a valid color.
+ */
+export function isValidColor(value: string): boolean {
+  try {
+    parseColor(value)
+    return true
+  }
+  catch {
+    return false
+  }
+}

package/src/shared/color/types.ts

@@ -0,0 +1,40 @@
+export type ColorSpace = 'rgb' | 'hsl' | 'hsb'
+
+export interface RGBColor {
+  space: 'rgb'
+  r: number
+  g: number
+  b: number
+  alpha: number
+}
+
+export interface HSLColor {
+  space: 'hsl'
+  h: number
+  s: number
+  l: number
+  alpha: number
+}
+
+export interface HSBColor {
+  space: 'hsb'
+  h: number
+  s: number
+  b: number
+  alpha: number
+}
+
+export type Color = RGBColor | HSLColor | HSBColor
+
+export type RGBChannel = 'red' | 'green' | 'blue' | 'alpha'
+export type HSLChannel = 'hue' | 'saturation' | 'lightness' | 'alpha'
+export type HSBChannel = 'hue' | 'saturation' | 'brightness' | 'alpha'
+export type ColorChannel = RGBChannel | HSLChannel | HSBChannel
+
+export interface ChannelRange {
+  min: number
+  max: number
+  step: number
+}
+
+export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'hsb'

package/src/shared/color/utils.ts

@@ -0,0 +1,143 @@
+/**
+ * Converts a hex color string to RGB (Red, Green, Blue).
+ * @param hex Hex color string (e.g., "#ff5733" or "#f53")
+ * @returns An object containing red, green, and blue values (0-255).
+ */
+export function hexToRGB(hex: string): { r: number, g: number, b: number } {
+  hex = hex.replace(/^#/, '')
+
+  // Validate hex format (3 or 6 hex digits)
+  if (!/^[0-9A-F]{6}$/i.test(hex) && !/^[0-9A-F]{3}$/i.test(hex)) {
+    throw new Error(`Invalid hex color: ${hex}. Expected format: #RGB or #RRGGBB`)
+  }
+
+  // Handle shorthand hex (e.g., "#FFF" -> "#FFFFFF")
+  if (hex.length === 3) {
+    hex = hex.split('').map(c => c + c).join('')
+  }
+
+  const bigint = parseInt(hex, 16)
+  const r = (bigint >> 16) & 255
+  const g = (bigint >> 8) & 255
+  const b = bigint & 255
+  return { r, g, b }
+}
+
+/**
+ * Converts a hex color string to HSL (Hue, Saturation, Lightness).
+ * @param hex Hex color string (e.g., "#ff5733")
+ * @returns An object containing hue (0-360), saturation (0-100), and lightness (0-100) values.
+ */
+export function hexToHSL(hex: string): { h: number, s: number, l: number } {
+  let { r, g, b } = hexToRGB(hex)
+
+  r /= 255
+  g /= 255
+  b /= 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h: number
+  let s: number
+  let l: number = (max + min) / 2
+
+  if (max === min) {
+    h = s = 0 // achromatic
+    l *= 100 // Scale l to 0-100 for consistency with chromatic case
+  }
+  else {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    if (max === r) {
+      h = (g - b) / d + (g < b ? 6 : 0)
+    }
+    else if (max === g) {
+      h = (b - r) / d + 2
+    }
+    else {
+      h = (r - g) / d + 4
+    }
+    h /= 6
+    h *= 360
+    s *= 100
+    l *= 100
+  }
+
+  return { h, s, l }
+}
+
+/**
+ * Converts a hex color string to a human-readable color name.
+ * @param hex Hex color string (e.g., "#ff5733")
+ * @returns A human-readable color name based on the hue, saturation, and lightness.
+ */
+export function getColorName(hex: string) {
+  const { h, s, l } = hexToHSL(hex)
+
+  // Handle achromatic colors (low saturation)
+  // Using 0-100 scale for all comparisons
+  if (s < 10) {
+    if (l < 10)
+      return 'black'
+    if (l > 95)
+      return 'white'
+    if (l < 20)
+      return 'very dark gray'
+    if (l < 35)
+      return 'dark gray'
+    if (l < 65)
+      return 'gray'
+    if (l < 80)
+      return 'light gray'
+    return 'very light gray'
+  }
+
+  // Determine base color by hue
+  let baseName
+  if (h < 15 || h >= 345)
+    baseName = 'red'
+  else if (h < 45)
+    baseName = 'orange'
+  else if (h < 75)
+    baseName = 'yellow'
+  else if (h < 105)
+    baseName = 'yellow-green'
+  else if (h < 135)
+    baseName = 'green'
+  else if (h < 165)
+    baseName = 'green-cyan'
+  else if (h < 195)
+    baseName = 'cyan'
+  else if (h < 225)
+    baseName = 'blue'
+  else if (h < 255)
+    baseName = 'blue-violet'
+  else if (h < 285)
+    baseName = 'violet'
+  else if (h < 315)
+    baseName = 'magenta'
+  else baseName = 'red-magenta'
+
+  // Add descriptors based on saturation and lightness
+  // Using 0-100 scale for all comparisons
+  const descriptors = []
+  if (s > 80)
+    descriptors.push('vibrant')
+  else if (s < 30)
+    descriptors.push('muted')
+
+  if (l > 80)
+    descriptors.push('light')
+  else if (l < 30)
+    descriptors.push('dark')
+
+  return descriptors.length > 0
+    ? `${descriptors.join(' ')} ${baseName}`
+    : baseName
+}
+
+export function getColorContrast(hex: string): 'light' | 'dark' {
+  const { r, g, b } = hexToRGB(hex)
+  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255
+  return luminance > 0.5 ? 'dark' : 'light'
+}

package/src/shared/date/types.ts

@@ -5,6 +5,7 @@
 import type { DateValue } from '@internationalized/date'
 
 export type { DateValue }
+import type { TimeValue } from './comparators'
 import type { DATE_SEGMENT_PARTS, EDITABLE_SEGMENT_PARTS, NON_EDITABLE_SEGMENT_PARTS, TIME_SEGMENT_PARTS } from './parts'
 
 // Days of the week, starting with Sunday
@@ -28,6 +29,11 @@ export type DateRange = {
   end: DateValue | undefined
 }
 
+export type TimeRange = {
+  start: TimeValue | undefined
+  end: TimeValue | undefined
+}
+
 export type HourCycle = 12 | 24 | undefined
 
 export type DateSegmentPart = (typeof DATE_SEGMENT_PARTS)[number]

package/src/shared/date/useDateField.ts

@@ -371,11 +371,11 @@ export function useDateField(props: UseDateFieldProps) {
     }
 
     if (prev === null) {
-    /**
-     * If the user types a 0 as the first number, we want
-     * to keep track of that so that when they type the next
-     * number, we can move to the next segment.
-     */
+      /**
+       * If the user types a 0 as the first number, we want
+       * to keep track of that so that when they type the next
+       * number, we can move to the next segment.
+       */
 
       if (num === 0) {
         props.lastKeyZero.value = true
@@ -389,7 +389,7 @@ export function useDateField(props: UseDateFieldProps) {
        */
 
       if (props.lastKeyZero.value || num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       props.lastKeyZero.value = false
@@ -417,13 +417,13 @@ export function useDateField(props: UseDateFieldProps) {
      */
 
     if (digits === 2 || total > max) {
-    /**
-     * As we're doing elsewhere, we're checking if the number is greater
-     * than the max start digit (0-3 in most months), and if so, we're
-     * going to move to the next segment.
-     */
+      /**
+       * As we're doing elsewhere, we're checking if the number is greater
+       * than the max start digit (0-3 in most months), and if so, we're
+       * going to move to the next segment.
+       */
       if (num > maxStart || total > max) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       return { value: num, moveToNext }
@@ -449,11 +449,11 @@ export function useDateField(props: UseDateFieldProps) {
     }
 
     if (prev === null) {
-    /**
-     * If the user types a 0 as the first number, we want
-     * to keep track of that so that when they type the next
-     * number, we can move to the next segment.
-     */
+      /**
+       * If the user types a 0 as the first number, we want
+       * to keep track of that so that when they type the next
+       * number, we can move to the next segment.
+       */
 
       if (num === 0) {
         props.lastKeyZero.value = true
@@ -467,7 +467,7 @@ export function useDateField(props: UseDateFieldProps) {
        */
 
       if (props.lastKeyZero.value || num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       props.lastKeyZero.value = false
@@ -496,13 +496,13 @@ export function useDateField(props: UseDateFieldProps) {
      */
 
     if (digits === 2 || total > max) {
-    /**
-     * As we're doing elsewhere, we're checking if the number is greater
-     * than the max start digit (0-3 in most months), and if so, we're
-     * going to move to the next segment.
-     */
+      /**
+       * As we're doing elsewhere, we're checking if the number is greater
+       * than the max start digit (0-3 in most months), and if so, we're
+       * going to move to the next segment.
+       */
       if (num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       return { value: num, moveToNext }
@@ -528,11 +528,11 @@ export function useDateField(props: UseDateFieldProps) {
     }
 
     if (prev === null) {
-    /**
-     * If the user types a 0 as the first number, we want
-     * to keep track of that so that when they type the next
-     * number, we can move to the next segment.
-     */
+      /**
+       * If the user types a 0 as the first number, we want
+       * to keep track of that so that when they type the next
+       * number, we can move to the next segment.
+       */
 
       if (num === 0) {
         props.lastKeyZero.value = true
@@ -546,7 +546,7 @@ export function useDateField(props: UseDateFieldProps) {
        */
 
       if (props.lastKeyZero.value || num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       props.lastKeyZero.value = false
@@ -575,13 +575,13 @@ export function useDateField(props: UseDateFieldProps) {
      */
 
     if (digits === 2 || total > max) {
-    /**
-     * As we're doing elsewhere, we're checking if the number is greater
-     * than the max start digit (0-3 in most months), and if so, we're
-     * going to move to the next segment.
-     */
+      /**
+       * As we're doing elsewhere, we're checking if the number is greater
+       * than the max start digit (0-3 in most months), and if so, we're
+       * going to move to the next segment.
+       */
       if (num > maxStart) {
-      // move to next
+        // move to next
         moveToNext = true
       }
       return { value: num, moveToNext }
@@ -874,11 +874,10 @@ export function useDateField(props: UseDateFieldProps) {
   function handleSegmentKeydown(e: KeyboardEvent) {
     const disabled = props.disabled.value
     const readonly = props.readonly.value
-    if (e.key !== kbd.TAB)
-      e.preventDefault()
-
     if (disabled || readonly)
       return
+    if (e.key !== kbd.TAB)
+      e.preventDefault()
     const segmentKeydownHandlers = {
       day: handleDaySegmentKeydown,
       month: handleMonthSegmentKeydown,
@@ -887,7 +886,7 @@ export function useDateField(props: UseDateFieldProps) {
       minute: handleMinuteSegmentKeydown,
       second: handleSecondSegmentKeydown,
       dayPeriod: handleDayPeriodSegmentKeydown,
-      timeZoneName: () => {},
+      timeZoneName: () => { },
     } as const
 
     segmentKeydownHandlers[props.part as keyof typeof segmentKeydownHandlers](e)

package/src/shared/macro.ts

@@ -0,0 +1,11 @@
+export function isCut(event: KeyboardEvent) {
+  return (event.key === 'x' || event.key === 'X') && (event.ctrlKey || event.metaKey)
+}
+
+export function isCopy(event: KeyboardEvent) {
+  return (event.key === 'c' || event.key === 'C') && (event.ctrlKey || event.metaKey)
+}
+
+export function isPaste(event: KeyboardEvent) {
+  return (event.key === 'v' || event.key === 'V') && (event.ctrlKey || event.metaKey)
+}

package/src/shared/useArrowNavigation.ts

@@ -169,13 +169,19 @@ function findNextFocusableElement(
   elements: HTMLElement[],
   currentElement: HTMLElement,
   options: FindNextFocusableElementOptions,
-  iterations = elements.length,
+  iterations = !elements.includes(currentElement) ? elements.length + 1 : elements.length,
 ): HTMLElement | null {
   if (--iterations === 0)
     return null
 
   const index = elements.indexOf(currentElement)
-  const newIndex = options.goForward ? index + 1 : index - 1
+  let newIndex: number
+  if (index === -1) {
+    newIndex = options.goForward ? 0 : elements.length - 1
+  }
+  else {
+    newIndex = options.goForward ? index + 1 : index - 1
+  }
 
   if (!options.loop && (newIndex < 0 || newIndex >= elements.length))
     return null

package/src/shared/useBodyScrollLock.ts

@@ -80,6 +80,8 @@ const useBodyLockStackCount = createSharedComposable(() => {
 
     // let dismissibleLayer set previous pointerEvent first
     nextTick(() => {
+      if (!locked.value)
+        return
       document.body.style.pointerEvents = 'none'
       document.body.style.overflow = 'hidden'
     })

package/src/shared/useForwardExpose.ts

@@ -1,18 +1,33 @@
+import type { MaybeElement } from '@vueuse/core'
 import type { ComponentPublicInstance } from 'vue'
 // reference: https://github.com/vuejs/rfcs/issues/258#issuecomment-1068697672
 import { unrefElement } from '@vueuse/core'
-import { computed, getCurrentInstance, ref } from 'vue'
+import { computed, getCurrentInstance, onUpdated, ref, triggerRef } from 'vue'
 
 export function useForwardExpose<T extends ComponentPublicInstance>() {
   const instance = getCurrentInstance()!
 
   const currentRef = ref<Element | T | null>()
-  const currentElement = computed<HTMLElement>(() => {
-    // $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling
-    // @ts-expect-error ignore ts error
-    return ['#text', '#comment'].includes(currentRef.value?.$el.nodeName) ? currentRef.value?.$el.nextElementSibling : unrefElement(currentRef)
+  const currentElement = computed(() => resolveCurrentElement())
+
+  // When using as-child with conditional rendering (v-if/v-else), the underlying
+  // DOM element ($el) changes but currentRef (component instance) stays the same.
+  // Since $el is not reactive, we sync currentElement after DOM updates.
+  onUpdated(() => {
+    if (currentElement.value !== resolveCurrentElement()) {
+      triggerRef(currentRef)
+    }
   })
 
+  function resolveCurrentElement() {
+    // $el could be text/comment for non-single root normal or text root, thus we retrieve the nextElementSibling
+    return currentRef.value
+      && '$el' in currentRef.value
+      && ['#text', '#comment'].includes(currentRef.value.$el.nodeName)
+      ? currentRef.value.$el.nextElementSibling as HTMLElement
+      : unrefElement(currentRef as unknown as MaybeElement) as HTMLElement
+  }
+
   // Do give us credit if you reference our code :D
   // localExpose should only be assigned once else will create infinite loop
   const localExpose: Record<string, any> | null = Object.assign({}, instance.exposed)

package/src/shared/useHideOthers.ts

@@ -16,7 +16,8 @@ export function useHideOthers(target: MaybeElementRef) {
     // disable hideOthers on test mode
     if (import.meta.env.MODE === 'test')
       return
-    if (el)
+    // Skip if inside a closed native popover
+    if (el && !el.closest('[popover]:not(:popover-open)'))
       undo = hideOthers(el)
     else if (undo)
       undo()

package/src/shared/useId.ts

@@ -16,15 +16,14 @@ export function useId(deterministicId?: string | null | undefined, prefix = 'rek
   if (deterministicId)
     return deterministicId
 
+  let id: string
   if ('useId' in vue) {
-    return `${prefix}-${vue.useId?.()}`
+    id = vue.useId?.()
   }
-
-  const configProviderContext = injectConfigProviderContext({ useId: undefined })
-
-  if (configProviderContext.useId) {
-    return `${prefix}-${configProviderContext.useId()}`
+  else {
+    const configProviderContext = injectConfigProviderContext({ useId: undefined })
+    id = configProviderContext.useId?.() ?? `${++count}`
   }
 
-  return `${prefix}-${++count}`
+  return prefix ? `${prefix}-${id}` : id
 }