@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/card/index.ts

@@ -0,0 +1,20 @@
+export {
+  createCard,
+  createCardHeader,
+  createCardTitle,
+  createCardDescription,
+  createCardContent,
+  createCardFooter,
+  type CardProps,
+  type CardAPI,
+} from './card.js'
+
+export {
+  cardVariants,
+  cardHeaderVariants,
+  cardTitleVariants,
+  cardDescriptionVariants,
+  cardContentVariants,
+  cardFooterVariants,
+  cardTokens,
+} from './card.styles.js'

package/dist/card-grid/card-grid.ts

@@ -0,0 +1,9 @@
+export interface CardGridProps {
+  columns?: number
+}
+
+export function createCardGrid(_props: CardGridProps = {}) {
+  return {
+    dataAttributes: { 'data-slot': 'card-grid' }
+  }
+}

package/dist/card-grid/index.ts

@@ -0,0 +1 @@
+export * from './card-grid.js'

package/dist/carousel/index.ts

@@ -0,0 +1 @@
+export {}

package/dist/charts/axis.ts

@@ -0,0 +1,50 @@
+import type { LinearScale, BandScale, TimeScale } from './scales.js'
+
+type AnyScale = LinearScale | BandScale | TimeScale
+
+export function generateTicks(
+  scale: AnyScale,
+  count?: number,
+): (number | string | Date)[] {
+  if (scale.type === 'band') {
+    return scale.domain
+  }
+  if (scale.type === 'time') {
+    return scale.ticks(count)
+  }
+  // linear
+  return scale.ticks(count)
+}
+
+export function formatTick(
+  value: number | string | Date,
+  type: 'number' | 'date' | 'string',
+): string {
+  if (type === 'string') {
+    return String(value)
+  }
+
+  if (type === 'date') {
+    if (value instanceof Date) {
+      return value.toISOString().split('T')[0]
+    }
+    return String(value)
+  }
+
+  // type === 'number'
+  const num = value as number
+  if (!Number.isFinite(num)) return String(num)
+
+  // Check if integer
+  if (Number.isInteger(num)) {
+    // Format with locale separators for large numbers
+    return num.toLocaleString('en-US', { maximumFractionDigits: 0 })
+  }
+
+  // Decimal: show up to 2 decimal places, strip trailing zeros
+  const formatted = num.toLocaleString('en-US', {
+    minimumFractionDigits: 0,
+    maximumFractionDigits: 2,
+  })
+  return formatted
+}

package/dist/charts/chart.ts

@@ -0,0 +1,73 @@
+export interface Margin {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+export interface Dimensions {
+  width: number
+  height: number
+  margin: Margin
+  boundedWidth: number
+  boundedHeight: number
+}
+
+export interface ChartConfig {
+  width?: number
+  height?: number
+  margin?: Partial<Margin>
+  data?: unknown[]
+}
+
+export interface ChartAPI {
+  dimensions: Dimensions
+  scales: Record<string, unknown>
+  updateDimensions: (partial: Partial<ChartConfig>) => void
+}
+
+const DEFAULT_MARGIN: Margin = {
+  top: 40,
+  right: 30,
+  bottom: 40,
+  left: 75,
+}
+
+const DEFAULT_WIDTH = 600
+const DEFAULT_HEIGHT = 400
+
+export function combineDimensions(partial: Partial<ChartConfig>): Dimensions {
+  const width = partial.width ?? DEFAULT_WIDTH
+  const height = partial.height ?? DEFAULT_HEIGHT
+  const margin: Margin = {
+    ...DEFAULT_MARGIN,
+    ...(partial.margin ?? {}),
+  }
+  const boundedWidth = Math.max(0, width - margin.left - margin.right)
+  const boundedHeight = Math.max(0, height - margin.top - margin.bottom)
+
+  return { width, height, margin, boundedWidth, boundedHeight }
+}
+
+export function createChart(config: ChartConfig): ChartAPI {
+  let dimensions = combineDimensions(config)
+  const scales: Record<string, unknown> = {}
+
+  return {
+    get dimensions() {
+      return dimensions
+    },
+    scales,
+    updateDimensions(partial: Partial<ChartConfig>) {
+      const merged: Partial<ChartConfig> = {
+        width: partial.width ?? dimensions.width,
+        height: partial.height ?? dimensions.height,
+        margin: {
+          ...dimensions.margin,
+          ...(partial.margin ?? {}),
+        },
+      }
+      dimensions = combineDimensions(merged)
+    },
+  }
+}

package/dist/charts/colorblind.ts

@@ -0,0 +1,100 @@
+/**
+ * Colorblind-safe color palettes for charts.
+ * Based on Wong (2011) "Points of view: Color blindness" — Nature Methods.
+ * These 8 colors are distinguishable by people with all types of color vision deficiency.
+ */
+export const COLORBLIND_SAFE_PALETTE = [
+  '#0072B2', // blue
+  '#E69F00', // orange
+  '#009E73', // green (blue-tinted, safe for protanopia/deuteranopia)
+  '#F0E442', // yellow
+  '#56B4E9', // sky blue
+  '#D55E00', // vermillion (not red — distinguishable from green)
+  '#CC79A7', // pink
+  '#000000', // black
+] as const
+
+/** Convert hex to HSL string for CSS variables */
+export function hexToHSL(hex: string): string {
+  // Remove # prefix
+  const h = hex.replace(/^#/, '')
+
+  const r = parseInt(h.substring(0, 2), 16) / 255
+  const g = parseInt(h.substring(2, 4), 16) / 255
+  const b = parseInt(h.substring(4, 6), 16) / 255
+
+  const max = Math.max(r, g, b)
+  const min = Math.min(r, g, b)
+  const l = (max + min) / 2
+
+  if (max === min) {
+    // Achromatic
+    return `0 0% ${Math.round(l * 100)}%`
+  }
+
+  const d = max - min
+  const s = l > 0.5 ? d / (2 - max - min) : d / (max + min)
+
+  let hue: number
+  if (max === r) {
+    hue = ((g - b) / d + (g < b ? 6 : 0)) / 6
+  } else if (max === g) {
+    hue = ((b - r) / d + 2) / 6
+  } else {
+    hue = ((r - g) / d + 4) / 6
+  }
+
+  return `${Math.round(hue * 360)} ${Math.round(s * 100)}% ${Math.round(l * 100)}%`
+}
+
+/** Get a colorblind-safe color by index (wraps around) */
+export function getChartColor(index: number): string {
+  return COLORBLIND_SAFE_PALETTE[index % COLORBLIND_SAFE_PALETTE.length]
+}
+
+/**
+ * Pattern fills for charts — when color alone isn't enough.
+ * Returns SVG pattern definitions that can be used as fill.
+ */
+export type PatternType = 'solid' | 'diagonal' | 'dots' | 'crosshatch' | 'horizontal' | 'vertical' | 'zigzag' | 'checker'
+
+export function getPatternDef(type: PatternType, color: string, id: string): string {
+  const size = 8
+
+  switch (type) {
+    case 'solid':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}"/></pattern>`
+
+    case 'diagonal':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><line x1="0" y1="${size}" x2="${size}" y2="0" stroke="${color}" stroke-width="1.5"/></pattern>`
+
+    case 'dots':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><circle cx="${size / 2}" cy="${size / 2}" r="1.5" fill="${color}"/></pattern>`
+
+    case 'crosshatch':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><line x1="0" y1="0" x2="${size}" y2="${size}" stroke="${color}" stroke-width="1"/><line x1="${size}" y1="0" x2="0" y2="${size}" stroke="${color}" stroke-width="1"/></pattern>`
+
+    case 'horizontal':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><line x1="0" y1="${size / 2}" x2="${size}" y2="${size / 2}" stroke="${color}" stroke-width="1.5"/></pattern>`
+
+    case 'vertical':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><line x1="${size / 2}" y1="0" x2="${size / 2}" y2="${size}" stroke="${color}" stroke-width="1.5"/></pattern>`
+
+    case 'zigzag':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><polyline points="0,${size} ${size / 2},0 ${size},${size}" fill="none" stroke="${color}" stroke-width="1.5"/></pattern>`
+
+    case 'checker':
+      return `<pattern id="${id}" width="${size}" height="${size}" patternUnits="userSpaceOnUse"><rect width="${size}" height="${size}" fill="${color}" opacity="0.3"/><rect width="${size / 2}" height="${size / 2}" fill="${color}"/><rect x="${size / 2}" y="${size / 2}" width="${size / 2}" height="${size / 2}" fill="${color}"/></pattern>`
+  }
+}
+
+export const PATTERNS: PatternType[] = [
+  'solid',
+  'diagonal',
+  'dots',
+  'crosshatch',
+  'horizontal',
+  'vertical',
+  'zigzag',
+  'checker',
+]

package/dist/charts/data.ts

@@ -0,0 +1,72 @@
+export interface HistogramBin {
+  x0: number
+  x1: number
+  count: number
+}
+
+export function computeExtent(data: number[]): [number, number] {
+  let min = data[0]
+  let max = data[0]
+  for (let i = 1; i < data.length; i++) {
+    if (data[i] < min) min = data[i]
+    if (data[i] > max) max = data[i]
+  }
+  return [min, max]
+}
+
+export function computeMean(data: number[]): number {
+  let sum = 0
+  for (let i = 0; i < data.length; i++) {
+    sum += data[i]
+  }
+  return sum / data.length
+}
+
+export function computeHistogramBins(
+  data: number[],
+  binCount?: number,
+): HistogramBin[] {
+  const count = binCount ?? Math.ceil(Math.sqrt(data.length))
+  const [min, max] = computeExtent(data)
+  const span = max - min
+
+  // Handle case where all values are the same
+  if (span === 0) {
+    const bins: HistogramBin[] = []
+    for (let i = 0; i < count; i++) {
+      bins.push({ x0: min, x1: max, count: 0 })
+    }
+    // Put all items in the first bin
+    bins[0].count = data.length
+    return bins
+  }
+
+  const binWidth = span / count
+  const bins: HistogramBin[] = []
+  for (let i = 0; i < count; i++) {
+    bins.push({
+      x0: min + i * binWidth,
+      x1: min + (i + 1) * binWidth,
+      count: 0,
+    })
+  }
+
+  for (const value of data) {
+    let idx = Math.floor((value - min) / binWidth)
+    // Values at the max boundary go into the last bin
+    if (idx >= count) idx = count - 1
+    bins[idx].count++
+  }
+
+  return bins
+}
+
+export function normalizeData<T>(
+  data: T[],
+  accessor: string | ((d: T) => unknown),
+): unknown[] {
+  if (typeof accessor === 'string') {
+    return data.map((d) => (d as Record<string, unknown>)[accessor])
+  }
+  return data.map(accessor)
+}

package/dist/charts/geometry.ts

@@ -0,0 +1,54 @@
+export interface Point {
+  x: number
+  y: number
+}
+
+export function linePath(points: Point[]): string {
+  if (points.length === 0) return ''
+  let d = `M${points[0].x},${points[0].y}`
+  for (let i = 1; i < points.length; i++) {
+    d += `L${points[i].x},${points[i].y}`
+  }
+  return d
+}
+
+export function areaPath(points: Point[], baseline: number): string {
+  if (points.length === 0) return ''
+  // Forward path along points
+  let d = `M${points[0].x},${points[0].y}`
+  for (let i = 1; i < points.length; i++) {
+    d += `L${points[i].x},${points[i].y}`
+  }
+  // Drop down to baseline, go back to start, close
+  const last = points[points.length - 1]
+  const first = points[0]
+  d += `L${last.x},${baseline}`
+  d += `L${first.x},${baseline}`
+  d += 'Z'
+  return d
+}
+
+export function arcPath(
+  cx: number,
+  cy: number,
+  radius: number,
+  startAngle: number,
+  endAngle: number,
+): string {
+  const x1 = cx + radius * Math.cos(startAngle)
+  const y1 = cy + radius * Math.sin(startAngle)
+  const x2 = cx + radius * Math.cos(endAngle)
+  const y2 = cy + radius * Math.sin(endAngle)
+
+  const largeArcFlag = endAngle - startAngle > Math.PI ? 1 : 0
+
+  // Round to avoid floating point noise in path string
+  const r = (n: number) => Math.round(n * 1e6) / 1e6
+
+  let d = `M${r(x1)},${r(y1)}`
+  d += `A${radius},${radius} 0 ${largeArcFlag} 1 ${r(x2)},${r(y2)}`
+  d += `L${cx},${cy}`
+  d += 'Z'
+
+  return d
+}

package/dist/charts/index.ts

@@ -0,0 +1,61 @@
+// Scales
+export {
+  createLinearScale,
+  createBandScale,
+  createTimeScale,
+} from './scales.js'
+
+export type {
+  LinearScale,
+  BandScale,
+  TimeScale,
+} from './scales.js'
+
+// Data utilities
+export {
+  computeExtent,
+  computeMean,
+  computeHistogramBins,
+  normalizeData,
+} from './data.js'
+
+export type { HistogramBin } from './data.js'
+
+// Geometry
+export {
+  linePath,
+  areaPath,
+  arcPath,
+} from './geometry.js'
+
+export type { Point } from './geometry.js'
+
+// Chart
+export {
+  createChart,
+  combineDimensions,
+} from './chart.js'
+
+export type {
+  ChartConfig,
+  ChartAPI,
+  Dimensions,
+  Margin,
+} from './chart.js'
+
+// Axis
+export {
+  generateTicks,
+  formatTick,
+} from './axis.js'
+
+// Colorblind-safe palette & patterns
+export {
+  COLORBLIND_SAFE_PALETTE,
+  hexToHSL,
+  getChartColor,
+  getPatternDef,
+  PATTERNS,
+} from './colorblind.js'
+
+export type { PatternType } from './colorblind.js'

package/dist/charts/scales.ts

@@ -0,0 +1,151 @@
+// --- Linear Scale ---
+
+export interface LinearScale {
+  (value: number): number
+  invert: (value: number) => number
+  ticks: (count?: number) => number[]
+  type: 'linear'
+  domain: [number, number]
+  range: [number, number]
+}
+
+export function createLinearScale(
+  domain: [number, number],
+  range: [number, number],
+): LinearScale {
+  const [d0, d1] = domain
+  const [r0, r1] = range
+  const domainSpan = d1 - d0
+  const rangeSpan = r1 - r0
+
+  const scale = ((value: number): number => {
+    if (domainSpan === 0) return r0
+    return r0 + ((value - d0) / domainSpan) * rangeSpan
+  }) as LinearScale
+
+  scale.invert = (value: number): number => {
+    if (rangeSpan === 0) return d0
+    return d0 + ((value - r0) / rangeSpan) * domainSpan
+  }
+
+  scale.ticks = (count = 10): number[] => {
+    if (count <= 0) return []
+    const ticks: number[] = []
+    for (let i = 0; i < count; i++) {
+      ticks.push(d0 + (domainSpan * i) / (count - 1 || 1))
+    }
+    return ticks
+  }
+
+  scale.type = 'linear'
+  scale.domain = domain
+  scale.range = range
+
+  return scale
+}
+
+// --- Band Scale ---
+
+export interface BandScale {
+  (value: string): number
+  bandwidth: () => number
+  type: 'band'
+  domain: string[]
+  range: [number, number]
+}
+
+export function createBandScale(
+  domain: string[],
+  range: [number, number],
+  padding = 0,
+): BandScale {
+  const [r0, r1] = range
+  const rangeSpan = r1 - r0
+  const n = domain.length
+
+  // With padding: each step = bandwidth + paddingInner
+  // total = n * step - paddingInner (no padding after last band)
+  // paddingInner = step * padding
+  // step * n - step * padding = rangeSpan => step * (n - padding) = rangeSpan
+  let step = 0
+  let bw = 0
+
+  if (n > 0) {
+    if (n === 1) {
+      bw = rangeSpan
+      step = rangeSpan
+    } else {
+      step = n > 0 ? rangeSpan / (n - padding) : 0
+      bw = step * (1 - padding)
+    }
+  }
+
+  const indexMap = new Map<string, number>()
+  domain.forEach((d, i) => indexMap.set(d, i))
+
+  const scale = ((value: string): number => {
+    const idx = indexMap.get(value)
+    if (idx === undefined) return 0
+    return r0 + idx * step
+  }) as BandScale
+
+  scale.bandwidth = (): number => {
+    return Math.max(0, bw)
+  }
+
+  scale.type = 'band'
+  scale.domain = domain
+  scale.range = range
+
+  return scale
+}
+
+// --- Time Scale ---
+
+export interface TimeScale {
+  (value: Date): number
+  invert: (value: number) => Date
+  ticks: (count?: number) => Date[]
+  type: 'time'
+  domain: [Date, Date]
+  range: [number, number]
+}
+
+export function createTimeScale(
+  domain: [Date, Date],
+  range: [number, number],
+): TimeScale {
+  const [d0, d1] = domain
+  const [r0, r1] = range
+  const t0 = d0.getTime()
+  const t1 = d1.getTime()
+  const domainSpan = t1 - t0
+  const rangeSpan = r1 - r0
+
+  const scale = ((value: Date): number => {
+    if (domainSpan === 0) return r0
+    return r0 + ((value.getTime() - t0) / domainSpan) * rangeSpan
+  }) as TimeScale
+
+  scale.invert = (value: number): Date => {
+    if (rangeSpan === 0) return new Date(t0)
+    const t = t0 + ((value - r0) / rangeSpan) * domainSpan
+    return new Date(t)
+  }
+
+  scale.ticks = (count = 10): Date[] => {
+    if (count <= 0) return []
+    const ticks: Date[] = []
+    for (let i = 0; i < count; i++) {
+      const t = t0 + (domainSpan * i) / (count - 1 || 1)
+      ticks.push(new Date(t))
+    }
+    return ticks
+  }
+
+  scale.type = 'time'
+  scale.domain = domain
+  scale.range = range
+
+  return scale
+}

package/dist/checkbox/checkbox.styles.ts

@@ -0,0 +1,33 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const checkboxTokens: TokenContract = {
+  name: 'checkbox',
+  tokens: {
+    bg: { variable: '--rfr-checkbox-bg', fallback: 'hsl(var(--background))' },
+    'bg-checked': { variable: '--rfr-checkbox-bg-checked', fallback: 'hsl(var(--primary))' },
+    fg: { variable: '--rfr-checkbox-fg', fallback: 'hsl(var(--primary-foreground))' },
+    border: { variable: '--rfr-checkbox-border', fallback: 'hsl(var(--primary))' },
+    ring: { variable: '--rfr-checkbox-ring', fallback: 'hsl(var(--ring))' },
+  },
+}
+
+export const checkboxVariants = cva({
+  base: 'peer shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
+  variants: {
+    checked: {
+      true: 'bg-primary text-primary-foreground',
+      false: 'bg-background',
+      indeterminate: 'bg-primary text-primary-foreground',
+    },
+    size: {
+      sm: 'h-3.5 w-3.5',
+      default: 'h-4 w-4',
+      lg: 'h-5 w-5',
+    },
+  },
+  defaultVariants: {
+    checked: 'false',
+    size: 'default',
+  },
+})