reka-ui 2.8.2 → 2.9.0

package/src/date/comparators.ts

@@ -184,6 +184,20 @@ export function getNextLastDayOfWeek<T extends DateValue = DateValue>(
   return date.add({ days: lastDayOfWeek - day }) as T
 }
 
+/**
+ * Check if two dates are in the same year and month.
+ */
+export function isSameYearMonth(a: DateValue, b: DateValue): boolean {
+  return a.year === b.year && a.month === b.month
+}
+
+/**
+ * Check if two dates are in the same year.
+ */
+export function isSameYear(a: DateValue, b: DateValue): boolean {
+  return a.year === b.year
+}
+
 export function areAllDaysBetweenValid(
   start: DateValue,
   end: DateValue,
@@ -210,3 +224,86 @@ export function areAllDaysBetweenValid(
   }
   return true
 }
+
+/**
+ * Compare two dates by year and month only (ignoring day).
+ */
+export function compareYearMonth(a: DateValue, b: DateValue): number {
+  if (a.year !== b.year)
+    return a.year - b.year
+  return a.month - b.month
+}
+
+/**
+ * Check if a date's month is between start and end (inclusive), comparing year+month only.
+ */
+export function isMonthBetweenInclusive(date: DateValue, start: DateValue, end: DateValue): boolean {
+  return compareYearMonth(date, start) >= 0 && compareYearMonth(date, end) <= 0
+}
+
+/**
+ * Check if a date's year is between start and end (inclusive), comparing year only.
+ */
+export function isYearBetweenInclusive(date: DateValue, start: DateValue, end: DateValue): boolean {
+  return date.year >= start.year && date.year <= end.year
+}
+
+/**
+ * Get the number of months between two dates (inclusive).
+ */
+export function getMonthsBetween(start: DateValue, end: DateValue): number {
+  return (end.year - start.year) * 12 + (end.month - start.month) + 1
+}
+
+/**
+ * Get the number of years between two dates (inclusive).
+ */
+export function getYearsBetween(start: DateValue, end: DateValue): number {
+  return end.year - start.year + 1
+}
+
+/**
+ * Check if all months between start and end are valid (not unavailable/disabled).
+ */
+export function areAllMonthsBetweenValid(
+  start: DateValue,
+  end: DateValue,
+  isUnavailable: Matcher | undefined,
+  isDisabled: Matcher | undefined,
+): boolean {
+  if (isUnavailable === undefined && isDisabled === undefined)
+    return true
+
+  let current = start.set({ day: 1 })
+  const endMonth = end.set({ day: 1 })
+
+  while (compareYearMonth(current, endMonth) <= 0) {
+    if (isDisabled?.(current) || isUnavailable?.(current))
+      return false
+    current = current.add({ months: 1 })
+  }
+  return true
+}
+
+/**
+ * Check if all years between start and end are valid (not unavailable/disabled).
+ */
+export function areAllYearsBetweenValid(
+  start: DateValue,
+  end: DateValue,
+  isUnavailable: Matcher | undefined,
+  isDisabled: Matcher | undefined,
+): boolean {
+  if (isUnavailable === undefined && isDisabled === undefined)
+    return true
+
+  let current = start.set({ day: 1, month: 1 })
+  const endYear = end.set({ day: 1, month: 1 })
+
+  while (current.year <= endYear.year) {
+    if (isDisabled?.(current) || isUnavailable?.(current))
+      return false
+    current = current.add({ years: 1 })
+  }
+  return true
+}

package/src/index.ts

@@ -1,10 +1,16 @@
 export * from './Accordion'
 export * from './AlertDialog'
 export * from './AspectRatio'
+export * from './Autocomplete'
 export * from './Avatar'
 export * from './Calendar'
 export * from './Checkbox'
 export * from './Collapsible'
+export * from './ColorArea'
+export * from './ColorField'
+export * from './ColorSlider'
+export * from './ColorSwatch'
+export * from './ColorSwatchPicker'
 export * from './Combobox'
 // utilities
 export * from './ConfigProvider'
@@ -22,6 +28,8 @@ export * from './HoverCard'
 export * from './Label'
 export * from './Listbox'
 export * from './Menubar'
+export * from './MonthPicker'
+export * from './MonthRangePicker'
 export * from './NavigationMenu'
 export * from './NumberField'
 export * from './Pagination'
@@ -56,6 +64,36 @@ export {
   useStateMachine,
   withDefault,
 } from './shared'
+// Color utilities
+export {
+  type Color,
+  type ColorChannel,
+  type ColorFormat,
+  type ColorSpace,
+  colorToHex,
+  colorToHsb,
+  colorToHsl,
+  colorToRgb,
+  colorToString,
+  convertToHsb,
+  convertToHsl,
+  convertToRgb,
+  getAreaBackgroundStyle,
+  getAreaGradient,
+  getChannelName,
+  getChannelRange,
+  getChannelValue,
+  getSliderBackgroundStyle,
+  getSliderGradient,
+  type HSBColor,
+  type HSLColor,
+  isValidColor,
+  normalizeColor,
+  parseColor,
+  type RGBColor,
+  setChannelValue,
+  setChannelValues,
+} from './shared/color'
 export {
   type AcceptableValue,
   type GenericComponentInstance,
@@ -67,6 +105,7 @@ export * from './Switch'
 export * from './Tabs'
 export * from './TagsInput'
 export * from './TimeField'
+export * from './TimeRangeField'
 
 export * from './Toast'
 export * from './Toggle'
@@ -76,6 +115,8 @@ export * from './Tooltip'
 export * from './Tree'
 export * from './Viewport'
 export { VisuallyHidden, type VisuallyHiddenProps } from './VisuallyHidden'
+export * from './YearPicker'
+export * from './YearRangePicker'
 export {
   type ReferenceElement,
 } from '@floating-ui/vue'

package/src/internal.ts

@@ -0,0 +1,7 @@
+/**
+ * @internal
+ * Internal components that are not part of the public API.
+ * These exports may change at any time without following semver.
+ */
+
+export * from './Menu'

package/src/shared/color/channel.ts

@@ -0,0 +1,424 @@
+import type { ChannelRange, Color, ColorChannel, ColorSpace, HSBColor, HSLColor, RGBColor } from './types'
+import { convertToHsb, convertToHsl, convertToRgb } from './convert'
+
+/**
+ * Gets the range (min, max, step) for a color channel.
+ */
+export function getChannelRange(channel: ColorChannel): ChannelRange {
+  switch (channel) {
+    case 'hue':
+      return { min: 0, max: 360, step: 1 }
+    case 'saturation':
+    case 'lightness':
+    case 'brightness':
+    case 'alpha':
+      return { min: 0, max: 100, step: 1 }
+    case 'red':
+    case 'green':
+    case 'blue':
+      return { min: 0, max: 255, step: 1 }
+    default:
+      throw new Error(`Unknown channel: ${channel}`)
+  }
+}
+
+/**
+ * Gets the display name for a channel.
+ */
+export function getChannelName(channel: ColorChannel): string {
+  const names: Record<ColorChannel, string> = {
+    red: 'Red',
+    green: 'Green',
+    blue: 'Blue',
+    hue: 'Hue',
+    saturation: 'Saturation',
+    lightness: 'Lightness',
+    brightness: 'Brightness',
+    alpha: 'Alpha',
+  }
+  return names[channel] ?? channel
+}
+
+/**
+ * Gets the value of a specific channel from a color.
+ * Avoids conversion if the color is already in the target color space.
+ */
+export function getChannelValue(color: Color, channel: ColorChannel): number {
+  switch (channel) {
+    case 'red':
+      return color.space === 'rgb' ? (color as RGBColor).r : convertToRgb(color).r
+    case 'green':
+      return color.space === 'rgb' ? (color as RGBColor).g : convertToRgb(color).g
+    case 'blue':
+      return color.space === 'rgb' ? (color as RGBColor).b : convertToRgb(color).b
+    case 'hue':
+      return color.space === 'hsl' ? (color as HSLColor).h : convertToHsl(color).h
+    case 'saturation':
+      if (color.space === 'hsl')
+        return (color as HSLColor).s
+      if (color.space === 'hsb')
+        return (color as HSBColor).s
+      return convertToHsl(color).s
+    case 'lightness':
+      return color.space === 'hsl' ? (color as HSLColor).l : convertToHsl(color).l
+    case 'brightness':
+      return color.space === 'hsb' ? (color as HSBColor).b : convertToHsb(color).b
+    case 'alpha':
+      return color.alpha * 100
+    default:
+      throw new Error(`Unknown channel: ${channel}`)
+  }
+}
+
+/**
+ * Sets a channel value on a color, returning a new color.
+ * The returned color maintains the original color space.
+ */
+export function setChannelValue(color: Color, channel: ColorChannel, value: number): Color {
+  const range = getChannelRange(channel)
+  const clamped = Math.max(range.min, Math.min(range.max, value))
+
+  // Alpha is handled the same across all spaces
+  if (channel === 'alpha') {
+    return { ...color, alpha: clamped / 100 } as Color
+  }
+
+  // For RGB channels, convert to RGB, set, then convert back
+  if (channel === 'red' || channel === 'green' || channel === 'blue') {
+    const rgb = convertToRgb(color)
+    const newRgb: RGBColor = {
+      ...rgb,
+      [channel === 'red' ? 'r' : channel === 'green' ? 'g' : 'b']: clamped,
+    }
+    return convertFromRgb(newRgb, color.space)
+  }
+
+  // For HSL channels
+  if (channel === 'hue' || channel === 'lightness') {
+    const hsl = convertToHsl(color)
+    const newHsl: HSLColor = {
+      ...hsl,
+      [channel === 'hue' ? 'h' : 'l']: clamped,
+    }
+    return convertFromHsl(newHsl, color.space)
+  }
+
+  // For saturation, respect the color's native space (HSB vs HSL)
+  if (channel === 'saturation') {
+    if (color.space === 'hsb') {
+      const hsb = convertToHsb(color)
+      const newHsb: HSBColor = { ...hsb, s: clamped }
+      return convertFromHsb(newHsb, color.space)
+    }
+    const hsl = convertToHsl(color)
+    const newHsl: HSLColor = { ...hsl, s: clamped }
+    return convertFromHsl(newHsl, color.space)
+  }
+
+  // For brightness (HSB-only)
+  if (channel === 'brightness') {
+    const hsb = convertToHsb(color)
+    const newHsb: HSBColor = { ...hsb, b: clamped }
+    return convertFromHsb(newHsb, color.space)
+  }
+
+  throw new Error(`Unknown channel: ${channel}`)
+}
+
+/**
+ * Sets multiple channel values at once, preserving exact values.
+ * Useful when updating 2D color areas where both channels change simultaneously.
+ */
+export function setChannelValues(
+  color: Color,
+  channels: Array<{ channel: ColorChannel, value: number }>,
+): Color {
+  if (channels.length === 0)
+    return color
+  if (channels.length === 1) {
+    return setChannelValue(color, channels[0].channel, channels[0].value)
+  }
+
+  // Determine the target color space based on all channels
+  const channelNames = channels.map(c => c.channel)
+  const hasBrightness = channelNames.includes('brightness')
+  const hasLightness = channelNames.includes('lightness')
+  const hasRgb = channelNames.some(c => c === 'red' || c === 'green' || c === 'blue')
+
+  let workingColor: Color
+
+  if (hasRgb) {
+    workingColor = convertToRgb(color)
+  }
+  else if (hasBrightness) {
+    // HSB mode
+    workingColor = convertToHsb(color)
+  }
+  else if (hasLightness) {
+    // HSL mode
+    workingColor = convertToHsl(color)
+  }
+  else {
+    // Default to HSL for hue/saturation
+    workingColor = convertToHsl(color)
+  }
+
+  // Apply all channel values
+  for (const { channel, value } of channels) {
+    const range = getChannelRange(channel)
+    const clamped = Math.max(range.min, Math.min(range.max, value))
+
+    if (channel === 'alpha') {
+      workingColor = { ...workingColor, alpha: clamped / 100 }
+    }
+    else if (workingColor.space === 'rgb' && (channel === 'red' || channel === 'green' || channel === 'blue')) {
+      const key = channel === 'red' ? 'r' : channel === 'green' ? 'g' : 'b'
+      workingColor = { ...workingColor, [key]: clamped } as RGBColor
+    }
+    else if (workingColor.space === 'hsl' && (channel === 'hue' || channel === 'saturation' || channel === 'lightness')) {
+      const key = channel === 'hue' ? 'h' : channel === 'saturation' ? 's' : 'l'
+      workingColor = { ...workingColor, [key]: clamped } as HSLColor
+    }
+    else if (workingColor.space === 'hsb' && (channel === 'hue' || channel === 'saturation' || channel === 'brightness')) {
+      const key = channel === 'hue' ? 'h' : channel === 'saturation' ? 's' : 'b'
+      workingColor = { ...workingColor, [key]: clamped } as HSBColor
+    }
+  }
+
+  // For color areas, keep the working color space to preserve precision
+  // Only convert back if we're in single-channel mode (channels.length === 1)
+  // In multi-channel mode (like 2D color area), the working color space is more appropriate
+  if (channels.length === 1 && workingColor.space !== color.space) {
+    if (color.space === 'rgb')
+      return convertToRgb(workingColor)
+    if (color.space === 'hsl')
+      return convertToHsl(workingColor)
+    if (color.space === 'hsb')
+      return convertToHsb(workingColor)
+  }
+
+  return workingColor
+}
+
+/**
+ * Converts an RGB color to a specific color space.
+ */
+function convertFromRgb(rgb: RGBColor, targetSpace: ColorSpace): Color {
+  if (targetSpace === 'rgb') {
+    return rgb
+  }
+  if (targetSpace === 'hsl') {
+    return rgbToHsl(rgb)
+  }
+  if (targetSpace === 'hsb') {
+    return rgbToHsb(rgb)
+  }
+  throw new Error(`Unknown color space: ${targetSpace}`)
+}
+
+/**
+ * Converts an HSL color to a specific color space.
+ */
+function convertFromHsl(hsl: HSLColor, targetSpace: ColorSpace): Color {
+  if (targetSpace === 'hsl') {
+    return hsl
+  }
+  const rgb = hslToRgb(hsl)
+  if (targetSpace === 'rgb') {
+    return rgb
+  }
+  if (targetSpace === 'hsb') {
+    return rgbToHsb(rgb)
+  }
+  throw new Error(`Unknown color space: ${targetSpace}`)
+}
+
+/**
+ * Converts an HSB color to a specific color space.
+ */
+function convertFromHsb(hsb: HSBColor, targetSpace: ColorSpace): Color {
+  if (targetSpace === 'hsb') {
+    return hsb
+  }
+  const rgb = hsbToRgb(hsb)
+  if (targetSpace === 'rgb') {
+    return rgb
+  }
+  if (targetSpace === 'hsl') {
+    return rgbToHsl(rgb)
+  }
+  throw new Error(`Unknown color space: ${targetSpace}`)
+}
+
+// Conversion helpers (duplicated from convert.ts to avoid circular deps)
+function rgbToHsl(rgb: RGBColor): HSLColor {
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  let h = 0
+  let s = 0
+  const l = (max + min) / 2
+
+  if (max !== min) {
+    const d = max - min
+    s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      case b:
+        h = (r - g) / d + 4
+        break
+    }
+    h /= 6
+  }
+
+  return {
+    space: 'hsl',
+    h: h * 360,
+    s: s * 100,
+    l: l * 100,
+    alpha: rgb.alpha,
+  }
+}
+
+function hslToRgb(hsl: HSLColor): RGBColor {
+  const h = hsl.h / 360
+  const s = hsl.s / 100
+  const l = hsl.l / 100
+
+  let r: number, g: number, b: number
+
+  if (s === 0) {
+    r = g = b = l
+  }
+  else {
+    const hue2rgb = (p: number, q: number, t: number) => {
+      if (t < 0)
+        t += 1
+      if (t > 1)
+        t -= 1
+      if (t < 1 / 6)
+        return p + (q - p) * 6 * t
+      if (t < 1 / 2)
+        return q
+      if (t < 2 / 3)
+        return p + (q - p) * (2 / 3 - t) * 6
+      return p
+    }
+
+    const q = l < 0.5 ? l * (1 + s) : l + s - l * s
+    const p = 2 * l - q
+    r = hue2rgb(p, q, h + 1 / 3)
+    g = hue2rgb(p, q, h)
+    b = hue2rgb(p, q, h - 1 / 3)
+  }
+
+  return {
+    space: 'rgb',
+    r: r * 255,
+    g: g * 255,
+    b: b * 255,
+    alpha: hsl.alpha,
+  }
+}
+
+function rgbToHsb(rgb: RGBColor): HSBColor {
+  const r = rgb.r / 255
+  const g = rgb.g / 255
+  const b = rgb.b / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const d = max - min
+
+  let h = 0
+  const s = max === 0 ? 0 : d / max
+  const v = max
+
+  if (max !== min) {
+    switch (max) {
+      case r:
+        h = (g - b) / d + (g < b ? 6 : 0)
+        break
+      case g:
+        h = (b - r) / d + 2
+        break
+      case b:
+        h = (r - g) / d + 4
+        break
+    }
+    h /= 6
+  }
+
+  return {
+    space: 'hsb',
+    h: h * 360,
+    s: s * 100,
+    b: v * 100,
+    alpha: rgb.alpha,
+  }
+}
+
+function hsbToRgb(hsb: HSBColor): RGBColor {
+  const h = hsb.h / 360
+  const s = hsb.s / 100
+  const v = hsb.b / 100
+
+  let r = 0
+  let g = 0
+  let b = 0
+
+  const i = Math.floor(h * 6)
+  const f = h * 6 - i
+  const p = v * (1 - s)
+  const q = v * (1 - f * s)
+  const t = v * (1 - (1 - f) * s)
+
+  switch (i % 6) {
+    case 0:
+      r = v
+      g = t
+      b = p
+      break
+    case 1:
+      r = q
+      g = v
+      b = p
+      break
+    case 2:
+      r = p
+      g = v
+      b = t
+      break
+    case 3:
+      r = p
+      g = q
+      b = v
+      break
+    case 4:
+      r = t
+      g = p
+      b = v
+      break
+    case 5:
+      r = v
+      g = p
+      b = q
+      break
+  }
+
+  return {
+    space: 'rgb',
+    r: r * 255,
+    g: g * 255,
+    b: b * 255,
+    alpha: hsb.alpha,
+  }
+}