@refraction-ui/astro 0.4.2 → 0.4.4

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',
+  },
+})

package/dist/checkbox/checkbox.ts

@@ -0,0 +1,73 @@
+import type { AccessibilityProps, KeyboardHandlerMap } from '../shared/index.ts'
+import { Keys } from '../shared/index.ts'
+
+export type CheckedState = boolean | 'indeterminate'
+
+export interface CheckboxProps {
+  checked?: CheckedState
+  disabled?: boolean
+  required?: boolean
+  name?: string
+  value?: string
+}
+
+export interface CheckboxAPI {
+  /** ARIA attributes to spread on the element */
+  ariaProps: Partial<AccessibilityProps>
+  /** Keyboard handlers to attach */
+  keyboardHandlers: KeyboardHandlerMap
+  /** Whether interaction should be blocked */
+  isInteractive: boolean
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+  /** Current state */
+  state: {
+    checked: CheckedState
+    disabled: boolean
+  }
+}
+
+export function createCheckbox(props: CheckboxProps = {}): CheckboxAPI {
+  const { checked = false, disabled = false } = props
+  const isInteractive = !disabled
+
+  const ariaProps: Partial<AccessibilityProps> = {
+    role: 'checkbox',
+    'aria-checked': checked === 'indeterminate' ? 'mixed' : checked,
+  }
+
+  if (disabled) {
+    ariaProps['aria-disabled'] = true
+  }
+
+  const dataAttributes: Record<string, string> = {}
+  if (checked === 'indeterminate') {
+    dataAttributes['data-state'] = 'indeterminate'
+  } else if (checked) {
+    dataAttributes['data-state'] = 'checked'
+  } else {
+    dataAttributes['data-state'] = 'unchecked'
+  }
+  if (disabled) {
+    dataAttributes['data-disabled'] = ''
+  }
+
+  const keyboardHandlers: KeyboardHandlerMap = {}
+  if (!isInteractive) {
+    keyboardHandlers[Keys.Space] = (e) => e.preventDefault()
+  }
+
+  return {
+    ariaProps,
+    keyboardHandlers,
+    isInteractive,
+    dataAttributes,
+    state: { checked, disabled },
+  }
+}
+
+/** SVG path data for the check icon */
+export const checkIconPath = 'M20 6L9 17l-5-5'
+
+/** SVG path data for the indeterminate/minus icon */
+export const indeterminateIconPath = 'M5 12h14'

package/dist/checkbox/index.ts

@@ -0,0 +1,10 @@
+export {
+  createCheckbox,
+  checkIconPath,
+  indeterminateIconPath,
+  type CheckboxProps,
+  type CheckboxAPI,
+  type CheckedState,
+} from './checkbox.js'
+
+export { checkboxVariants, checkboxTokens } from './checkbox.styles.js'

package/dist/code-block/code-block.ts

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

package/dist/code-block/index.ts

@@ -0,0 +1 @@
+export * from './code-block';

package/dist/code-editor/code-editor.styles.ts

@@ -0,0 +1,32 @@
+import { cva } from '../shared/index.ts'
+import type { TokenContract } from '../shared/index.ts'
+
+export const codeEditorTokens: TokenContract = {
+  name: 'code-editor',
+  tokens: {
+    bg: { variable: '--rfr-code-editor-bg', fallback: 'hsl(var(--background))' },
+    fg: { variable: '--rfr-code-editor-fg', fallback: 'hsl(var(--foreground))' },
+    headerBg: { variable: '--rfr-code-editor-header-bg', fallback: 'hsl(var(--muted))' },
+    border: { variable: '--rfr-code-editor-border', fallback: 'hsl(var(--border))' },
+    lineNumberFg: { variable: '--rfr-code-editor-line-number', fallback: 'hsl(var(--muted-foreground))' },
+  },
+}
+
+export const codeEditorVariants = cva({
+  base: 'flex flex-col rounded-lg border overflow-hidden font-mono text-sm',
+  variants: {
+    theme: {
+      light: 'bg-white text-gray-900 border-gray-200',
+      dark: 'bg-gray-900 text-gray-100 border-gray-700',
+    },
+    size: {
+      sm: 'text-xs',
+      default: 'text-sm',
+      lg: 'text-base',
+    },
+  },
+  defaultVariants: {
+    theme: 'light',
+    size: 'default',
+  },
+})

package/dist/code-editor/code-editor.ts

@@ -0,0 +1,140 @@
+import type { AccessibilityProps } from '../shared/index.ts'
+
+export type CodeEditorTheme = 'light' | 'dark'
+
+export interface CodeEditorProps {
+  value?: string
+  onChange?: (value: string) => void
+  language?: string
+  readOnly?: boolean
+  theme?: CodeEditorTheme
+}
+
+export interface CodeEditorState {
+  value: string
+  language: string
+  theme: CodeEditorTheme
+}
+
+export interface CodeEditorAPI {
+  /** Current editor state */
+  state: CodeEditorState
+  /** ARIA attributes for the editor element */
+  ariaProps: Partial<AccessibilityProps> & { 'aria-multiline'?: boolean }
+  /** Data attributes for CSS styling hooks */
+  dataAttributes: Record<string, string>
+  /** Update the editor value */
+  setValue: (value: string) => void
+  /** Get a human-readable label for the current language */
+  getLanguageLabel: () => string
+}
+
+/** Map of language identifiers to human-readable labels */
+const languageLabels: Record<string, string> = {
+  js: 'JavaScript',
+  javascript: 'JavaScript',
+  ts: 'TypeScript',
+  typescript: 'TypeScript',
+  jsx: 'JSX',
+  tsx: 'TSX',
+  py: 'Python',
+  python: 'Python',
+  rb: 'Ruby',
+  ruby: 'Ruby',
+  go: 'Go',
+  rust: 'Rust',
+  rs: 'Rust',
+  java: 'Java',
+  cpp: 'C++',
+  c: 'C',
+  cs: 'C#',
+  csharp: 'C#',
+  html: 'HTML',
+  css: 'CSS',
+  json: 'JSON',
+  yaml: 'YAML',
+  yml: 'YAML',
+  md: 'Markdown',
+  markdown: 'Markdown',
+  sql: 'SQL',
+  sh: 'Shell',
+  bash: 'Bash',
+  zsh: 'Zsh',
+  xml: 'XML',
+  toml: 'TOML',
+  swift: 'Swift',
+  kotlin: 'Kotlin',
+  dart: 'Dart',
+  php: 'PHP',
+  lua: 'Lua',
+  r: 'R',
+  scala: 'Scala',
+}
+
+/**
+ * Create a headless code editor API.
+ *
+ * This provides the headless interface for a code editor — state management,
+ * ARIA props, and data attributes. Actual rendering (Monaco, CodeMirror, or
+ * a simple textarea) is handled by framework-specific wrappers.
+ */
+export function createCodeEditor(props: CodeEditorProps = {}): CodeEditorAPI {
+  const {
+    value = '',
+    onChange,
+    language = 'plaintext',
+    readOnly = false,
+    theme = 'light',
+  } = props
+
+  let currentValue = value
+
+  const state: CodeEditorState = {
+    value: currentValue,
+    language,
+    theme,
+  }
+
+  const ariaProps: Partial<AccessibilityProps> & { 'aria-multiline'?: boolean; 'aria-readonly'?: boolean } = {
+    role: 'textbox',
+    'aria-multiline': true,
+    'aria-label': `Code editor - ${getLabel(language)}`,
+  }
+
+  if (readOnly) {
+    ariaProps['aria-readonly'] = true
+  }
+
+  const dataAttributes: Record<string, string> = {
+    'data-language': language,
+    'data-theme': theme,
+  }
+
+  if (readOnly) {
+    dataAttributes['data-readonly'] = ''
+  }
+
+  function setValue(newValue: string) {
+    currentValue = newValue
+    state.value = newValue
+    if (onChange) {
+      onChange(newValue)
+    }
+  }
+
+  function getLabel(lang: string): string {
+    return languageLabels[lang.toLowerCase()] ?? lang.charAt(0).toUpperCase() + lang.slice(1)
+  }
+
+  function getLanguageLabel(): string {
+    return getLabel(language)
+  }
+
+  return {
+    state,
+    ariaProps,
+    dataAttributes,
+    setValue,
+    getLanguageLabel,
+  }
+}

package/dist/code-editor/index.ts

@@ -0,0 +1,9 @@
+export {
+  createCodeEditor,
+  type CodeEditorProps,
+  type CodeEditorAPI,
+  type CodeEditorState,
+  type CodeEditorTheme,
+} from './code-editor.js'
+
+export { codeEditorVariants, codeEditorTokens } from './code-editor.styles.js'

package/dist/collapsible/collapsible.styles.ts

@@ -0,0 +1,14 @@
+import { cva } from '../shared/index.ts'
+
+export const collapsibleContentVariants = cva({
+  base: 'overflow-hidden transition-all',
+  variants: {
+    state: {
+      open: 'animate-accordion-down',
+      closed: 'animate-accordion-up',
+    },
+  },
+  defaultVariants: {
+    state: 'closed',
+  },
+})

package/dist/collapsible/collapsible.ts

@@ -0,0 +1,93 @@
+import { generateId, Keys, createKeyboardHandler } from '../shared/index.ts'
+
+export interface CollapsibleProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  disabled?: boolean
+}
+
+export interface CollapsibleAPI {
+  /** Current open state */
+  state: { open: boolean }
+  /** Props to spread on the trigger element */
+  triggerProps: {
+    'aria-expanded': boolean
+    'aria-controls': string
+    'data-state': 'open' | 'closed'
+    'data-disabled': string | undefined
+  }
+  /** Props to spread on the content element */
+  contentProps: {
+    id: string
+    role: 'region'
+    'data-state': 'open' | 'closed'
+    hidden: boolean
+  }
+  /** Toggle the open state */
+  toggle: () => void
+  /** Open the collapsible */
+  open: () => void
+  /** Close the collapsible */
+  close: () => void
+  /** Keyboard event handler for Enter/Space toggle */
+  keyboardHandler: (event: KeyboardEvent) => void
+}
+
+export function createCollapsible(props: CollapsibleProps = {}): CollapsibleAPI {
+  const {
+    open: controlledOpen,
+    defaultOpen = false,
+    onOpenChange,
+    disabled = false,
+  } = props
+
+  const isControlled = controlledOpen !== undefined
+  let internalOpen = isControlled ? controlledOpen : defaultOpen
+  const contentId = generateId('rfr-collapsible')
+
+  const setOpen = (next: boolean) => {
+    if (disabled) return
+    if (!isControlled) {
+      internalOpen = next
+    }
+    onOpenChange?.(next)
+  }
+
+  const toggle = () => setOpen(!internalOpen)
+  const openFn = () => setOpen(true)
+  const closeFn = () => setOpen(false)
+
+  const keyboardHandler = createKeyboardHandler({
+    [Keys.Enter]: (event: KeyboardEvent) => {
+      event.preventDefault()
+      toggle()
+    },
+    [Keys.Space]: (event: KeyboardEvent) => {
+      event.preventDefault()
+      toggle()
+    },
+  })
+
+  const dataState = internalOpen ? 'open' : 'closed'
+
+  return {
+    state: { open: internalOpen },
+    triggerProps: {
+      'aria-expanded': internalOpen,
+      'aria-controls': contentId,
+      'data-state': dataState,
+      'data-disabled': disabled ? '' : undefined,
+    },
+    contentProps: {
+      id: contentId,
+      role: 'region',
+      'data-state': dataState,
+      hidden: !internalOpen,
+    },
+    toggle,
+    open: openFn,
+    close: closeFn,
+    keyboardHandler,
+  }
+}

package/dist/collapsible/index.ts

@@ -0,0 +1,7 @@
+export {
+  createCollapsible,
+  type CollapsibleProps,
+  type CollapsibleAPI,
+} from './collapsible.js'
+
+export { collapsibleContentVariants } from './collapsible.styles.js'