@refraction-ui/astro 0.4.0 → 0.4.4

package/dist/astro-charts/Histogram.astro

@@ -0,0 +1,107 @@
+---
+/**
+ * Histogram — standalone histogram chart.
+ * Accepts raw numeric data and renders binned bars with axes.
+ */
+import {
+  computeHistogramBins,
+  createLinearScale,
+  createBandScale,
+  combineDimensions,
+  formatTick,
+  type Margin,
+} from '../charts/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Raw numeric data */
+  data: number[]
+  /** Width of the SVG (default 600) */
+  width?: number
+  /** Height of the SVG (default 400) */
+  height?: number
+  /** Number of bins (default 10) */
+  bins?: number
+  /** Fill color (default 'steelblue') */
+  fill?: string
+  /** Custom margin */
+  margin?: Partial<Margin>
+}
+
+const {
+  data,
+  width = 600,
+  height = 400,
+  bins: binCount = 10,
+  fill = 'steelblue',
+  margin,
+  class: className,
+  ...props
+} = Astro.props
+
+const dimensions = combineDimensions({ width, height, margin })
+const { boundedWidth, boundedHeight } = dimensions
+
+const histBins = computeHistogramBins(data, binCount)
+const maxCount = Math.max(...histBins.map((b) => b.count))
+
+const labels = histBins.map((b) => `${formatTick(b.x0, 'number')}-${formatTick(b.x1, 'number')}`)
+const xScale = createBandScale(labels, [0, boundedWidth], 0.05)
+const yScale = createLinearScale([0, maxCount], [boundedHeight, 0])
+
+const yTicks = yScale.ticks(5)
+---
+
+<svg
+  width={width}
+  height={height}
+  class={className}
+  data-rfr-chart-histogram
+  {...props}
+>
+  <g transform={`translate(${dimensions.margin.left},${dimensions.margin.top})`}>
+    {histBins.map((bin, i) => {
+      const label = labels[i]
+      const barX = xScale(label)
+      const barY = yScale(bin.count)
+      const barHeight = boundedHeight - barY
+      const barWidth = xScale.bandwidth()
+      return (
+        <rect
+          x={barX}
+          y={barY}
+          width={barWidth}
+          height={barHeight}
+          fill={fill}
+        />
+      )
+    })}
+    {/* X Axis */}
+    <g transform={`translate(0,${boundedHeight})`}>
+      {labels.map((label, i) => {
+        const x = xScale(label) + xScale.bandwidth() / 2
+        return (
+          <g transform={`translate(${x},0)`}>
+            <line y2={6} stroke="currentColor" />
+            <text y={18} text-anchor="middle" font-size={10} fill="currentColor">
+              {label}
+            </text>
+          </g>
+        )
+      })}
+    </g>
+    {/* Y Axis */}
+    <g>
+      {yTicks.map((tick) => {
+        const y = yScale(tick)
+        return (
+          <g transform={`translate(0,${y})`}>
+            <line x2={-6} stroke="currentColor" />
+            <text x={-9} dy="0.32em" text-anchor="end" font-size={10} fill="currentColor">
+              {formatTick(tick, 'number')}
+            </text>
+          </g>
+        )
+      })}
+    </g>
+  </g>
+</svg>

package/dist/astro-charts/Line.astro

@@ -0,0 +1,55 @@
+---
+/**
+ * Line — line/area chart path, server-rendered as an SVG <path>.
+ * Accepts pre-computed x/y value arrays.
+ */
+import { createLinearScale, computeExtent, linePath } from '../charts/index.ts'
+
+interface Props {
+  /** X values for each data point */
+  xValues: number[]
+  /** Y values for each data point */
+  yValues: number[]
+  /** Bounded width of the chart area */
+  boundedWidth: number
+  /** Bounded height of the chart area */
+  boundedHeight: number
+  /** Stroke color (default 'currentColor') */
+  stroke?: string
+  /** Stroke width (default 2) */
+  strokeWidth?: number
+  /** Fill (default 'none') */
+  fill?: string
+}
+
+const {
+  xValues,
+  yValues,
+  boundedWidth,
+  boundedHeight,
+  stroke = 'currentColor',
+  strokeWidth = 2,
+  fill = 'none',
+} = Astro.props
+
+const [xMin, xMax] = computeExtent(xValues)
+const [yMin, yMax] = computeExtent(yValues)
+
+const xScale = createLinearScale([xMin, xMax], [0, boundedWidth])
+const yScale = createLinearScale([yMin, yMax], [boundedHeight, 0])
+
+const points = xValues.map((xv, i) => ({
+  x: xScale(xv),
+  y: yScale(yValues[i]),
+}))
+
+const d = linePath(points)
+---
+
+<path
+  d={d}
+  stroke={stroke}
+  stroke-width={strokeWidth}
+  fill={fill}
+  data-rfr-chart-line
+/>

package/dist/astro-charts/PieChart.astro

@@ -0,0 +1,63 @@
+---
+/**
+ * PieChart — standalone pie/donut chart rendered as SVG arcs.
+ */
+import { arcPath } from '../charts/index.ts'
+
+const DEFAULT_COLORS = [
+  '#4e79a7', '#f28e2b', '#e15759', '#76b7b2',
+  '#59a14f', '#edc948', '#b07aa1', '#ff9da7',
+  '#9c755f', '#bab0ac',
+]
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Numeric values for each slice */
+  values: number[]
+  /** Width of the SVG (default 300) */
+  width?: number
+  /** Height of the SVG (default 300) */
+  height?: number
+  /** Slice colors */
+  colors?: string[]
+}
+
+const {
+  values,
+  width = 300,
+  height = 300,
+  colors = DEFAULT_COLORS,
+  class: className,
+  ...props
+} = Astro.props
+
+const cx = width / 2
+const cy = height / 2
+const radius = Math.min(cx, cy) - 10
+
+const total = values.reduce((sum, v) => sum + v, 0)
+
+let currentAngle = -Math.PI / 2
+
+const arcs = values.map((val, i) => {
+  const sliceAngle = (val / total) * Math.PI * 2
+  const startAngle = currentAngle
+  const endAngle = currentAngle + sliceAngle
+  currentAngle = endAngle
+  return { startAngle, endAngle, color: colors[i % colors.length] }
+})
+---
+
+<svg
+  width={width}
+  height={height}
+  class={className}
+  data-rfr-chart-pie
+  {...props}
+>
+  {arcs.map((arc) => (
+    <path
+      d={arcPath(cx, cy, radius, arc.startAngle, arc.endAngle)}
+      fill={arc.color}
+    />
+  ))}
+</svg>

package/dist/astro-charts/ScatterPlot.astro

@@ -0,0 +1,95 @@
+---
+/**
+ * ScatterPlot — standalone scatter plot chart.
+ * Accepts pre-computed x/y arrays and renders circles with axes.
+ */
+import { createLinearScale, computeExtent, combineDimensions, formatTick, type Margin } from '../charts/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** X values for each data point */
+  xValues: number[]
+  /** Y values for each data point */
+  yValues: number[]
+  /** Width of the SVG (default 600) */
+  width?: number
+  /** Height of the SVG (default 400) */
+  height?: number
+  /** Circle radius (default 4) */
+  r?: number
+  /** Fill color (default 'steelblue') */
+  fill?: string
+  /** Custom margin */
+  margin?: Partial<Margin>
+}
+
+const {
+  xValues,
+  yValues,
+  width = 600,
+  height = 400,
+  r = 4,
+  fill = 'steelblue',
+  margin,
+  class: className,
+  ...props
+} = Astro.props
+
+const dimensions = combineDimensions({ width, height, margin })
+const { boundedWidth, boundedHeight } = dimensions
+
+const [xMin, xMax] = computeExtent(xValues)
+const [yMin, yMax] = computeExtent(yValues)
+
+const xScale = createLinearScale([xMin, xMax], [0, boundedWidth])
+const yScale = createLinearScale([yMin, yMax], [boundedHeight, 0])
+
+const xTicks = xScale.ticks(5)
+const yTicks = yScale.ticks(5)
+---
+
+<svg
+  width={width}
+  height={height}
+  class={className}
+  data-rfr-chart-scatter
+  {...props}
+>
+  <g transform={`translate(${dimensions.margin.left},${dimensions.margin.top})`}>
+    {xValues.map((xv, i) => (
+      <circle
+        cx={xScale(xv)}
+        cy={yScale(yValues[i])}
+        r={r}
+        fill={fill}
+      />
+    ))}
+    {/* X Axis */}
+    <g transform={`translate(0,${boundedHeight})`}>
+      {xTicks.map((tick) => {
+        const px = xScale(tick)
+        return (
+          <g transform={`translate(${px},0)`}>
+            <line y2={6} stroke="currentColor" />
+            <text y={18} text-anchor="middle" font-size={10} fill="currentColor">
+              {formatTick(tick, 'number')}
+            </text>
+          </g>
+        )
+      })}
+    </g>
+    {/* Y Axis */}
+    <g>
+      {yTicks.map((tick) => {
+        const py = yScale(tick)
+        return (
+          <g transform={`translate(0,${py})`}>
+            <line x2={-6} stroke="currentColor" />
+            <text x={-9} dy="0.32em" text-anchor="end" font-size={10} fill="currentColor">
+              {formatTick(tick, 'number')}
+            </text>
+          </g>
+        )
+      })}
+    </g>
+  </g>
+</svg>

package/dist/astro-charts/XAxis.astro

@@ -0,0 +1,46 @@
+---
+/**
+ * XAxis — horizontal axis with tick marks and labels.
+ * Designed to be used inside a Chart's <g> element.
+ */
+
+interface Props {
+  /** Tick values (strings or numbers) */
+  ticks: (number | string)[]
+  /** Pixel positions for each tick value */
+  positions: number[]
+  /** Distance from top of bounded area to axis line */
+  height: number
+  /** Tick mark length (default 6) */
+  tickSize?: number
+  /** Font size for labels (default 12) */
+  fontSize?: number
+}
+
+const {
+  ticks,
+  positions,
+  height,
+  tickSize = 6,
+  fontSize = 12,
+} = Astro.props
+---
+
+<g transform={`translate(0,${height})`} data-rfr-chart-xaxis>
+  {ticks.map((tick, i) => {
+    const x = positions[i]
+    return (
+      <g transform={`translate(${x},0)`}>
+        <line y2={tickSize} stroke="currentColor" />
+        <text
+          y={tickSize + 9}
+          text-anchor="middle"
+          font-size={fontSize}
+          fill="currentColor"
+        >
+          {String(tick)}
+        </text>
+      </g>
+    )
+  })}
+</g>

package/dist/astro-charts/YAxis.astro

@@ -0,0 +1,44 @@
+---
+/**
+ * YAxis — vertical axis with tick marks and labels.
+ * Designed to be used inside a Chart's <g> element.
+ */
+
+interface Props {
+  /** Tick values (strings or numbers) */
+  ticks: (number | string)[]
+  /** Pixel positions for each tick value */
+  positions: number[]
+  /** Tick mark length (default 6) */
+  tickSize?: number
+  /** Font size for labels (default 12) */
+  fontSize?: number
+}
+
+const {
+  ticks,
+  positions,
+  tickSize = 6,
+  fontSize = 12,
+} = Astro.props
+---
+
+<g data-rfr-chart-yaxis>
+  {ticks.map((tick, i) => {
+    const y = positions[i]
+    return (
+      <g transform={`translate(0,${y})`}>
+        <line x2={-tickSize} stroke="currentColor" />
+        <text
+          x={-tickSize - 4}
+          dy="0.32em"
+          text-anchor="end"
+          font-size={fontSize}
+          fill="currentColor"
+        >
+          {String(tick)}
+        </text>
+      </g>
+    )
+  })}
+</g>

package/dist/astro-charts/index.ts

@@ -0,0 +1,26 @@
+export { default as Chart } from './Chart.astro'
+export { default as Bars } from './Bars.astro'
+export { default as Line } from './Line.astro'
+export { default as PieChart } from './PieChart.astro'
+export { default as ScatterPlot } from './ScatterPlot.astro'
+export { default as Histogram } from './Histogram.astro'
+export { default as XAxis } from './XAxis.astro'
+export { default as YAxis } from './YAxis.astro'
+export { default as Gradient } from './Gradient.astro'
+export { default as Circles } from './Circles.astro'
+
+// Re-export core types and utilities
+export {
+  combineDimensions,
+  createLinearScale,
+  createBandScale,
+  computeExtent,
+  computeHistogramBins,
+  linePath,
+  areaPath,
+  arcPath,
+  formatTick,
+  generateTicks,
+  COLORBLIND_SAFE_PALETTE,
+  getChartColor,
+} from '../charts/index.ts'

package/dist/astro-checkbox/Checkbox.astro

@@ -0,0 +1,129 @@
+---
+import {
+  createCheckbox,
+  checkboxVariants,
+  checkIconPath,
+  indeterminateIconPath,
+  type CheckedState,
+} from '../checkbox/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  checked?: CheckedState
+  disabled?: boolean
+  size?: 'sm' | 'default' | 'lg'
+  name?: string
+  value?: string
+}
+
+const { checked = false, disabled = false, size = 'default', name, value, class: className, ...props } = Astro.props
+const api = createCheckbox({ checked, disabled })
+const checkedVariant = checked === 'indeterminate' ? 'indeterminate' : checked ? 'true' : 'false'
+---
+
+<button
+  type="button"
+  class={cn(checkboxVariants({ checked: checkedVariant, size }), className)}
+  disabled={disabled}
+  data-rfr-checkbox
+  {...api.ariaProps}
+  {...api.dataAttributes}
+  {...props}
+>
+  {checked === true && (
+    <svg
+      class="h-full w-full"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d={checkIconPath} />
+    </svg>
+  )}
+  {checked === 'indeterminate' && (
+    <svg
+      class="h-full w-full"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="3"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      aria-hidden="true"
+    >
+      <path d={indeterminateIconPath} />
+    </svg>
+  )}
+  {name && <input type="hidden" name={name} value={checked === 'indeterminate' ? 'indeterminate' : String(checked)} data-rfr-checkbox-input />}
+</button>
+
+<script>
+  document.querySelectorAll<HTMLButtonElement>('[data-rfr-checkbox]').forEach((el) => {
+    el.addEventListener('click', () => {
+      if (el.disabled) return
+      const currentState = el.getAttribute('aria-checked')
+      let newChecked: boolean
+      if (currentState === 'mixed') {
+        newChecked = true
+      } else {
+        newChecked = currentState !== 'true'
+      }
+      el.setAttribute('aria-checked', String(newChecked))
+      el.setAttribute('data-state', newChecked ? 'checked' : 'unchecked')
+
+      // Toggle check icon visibility
+      const svg = el.querySelector('svg')
+      if (newChecked) {
+        if (!svg) {
+          const newSvg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+          newSvg.setAttribute('class', 'h-full w-full')
+          newSvg.setAttribute('viewBox', '0 0 24 24')
+          newSvg.setAttribute('fill', 'none')
+          newSvg.setAttribute('stroke', 'currentColor')
+          newSvg.setAttribute('stroke-width', '3')
+          newSvg.setAttribute('stroke-linecap', 'round')
+          newSvg.setAttribute('stroke-linejoin', 'round')
+          newSvg.setAttribute('aria-hidden', 'true')
+          const path = document.createElementNS('http://www.w3.org/2000/svg', 'path')
+          path.setAttribute('d', 'M20 6L9 17l-5-5')
+          newSvg.appendChild(path)
+          // Insert before the hidden input if it exists, otherwise append
+          const input = el.querySelector('[data-rfr-checkbox-input]')
+          if (input) {
+            el.insertBefore(newSvg, input)
+          } else {
+            el.appendChild(newSvg)
+          }
+        }
+      } else {
+        if (svg) svg.remove()
+      }
+
+      // Update CSS variant classes for checked state
+      if (newChecked) {
+        el.classList.add('bg-primary', 'text-primary-foreground')
+        el.classList.remove('bg-background')
+      } else {
+        el.classList.remove('bg-primary', 'text-primary-foreground')
+        el.classList.add('bg-background')
+      }
+
+      // Update hidden input
+      const input = el.querySelector('[data-rfr-checkbox-input]') as HTMLInputElement | null
+      if (input) input.value = String(newChecked)
+
+      el.dispatchEvent(new CustomEvent('change', { detail: { checked: newChecked } }))
+    })
+
+    el.addEventListener('keydown', (e) => {
+      if (e.key === ' ') {
+        e.preventDefault()
+        el.click()
+      }
+    })
+  })
+</script>

package/dist/astro-checkbox/index.ts

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

package/dist/astro-code-block/CodeBlock.astro

@@ -0,0 +1,3 @@
+---
+---
+<div></div>

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

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

package/dist/astro-code-editor/CodeEditor.astro

@@ -0,0 +1,123 @@
+---
+import {
+  createCodeEditor,
+  codeEditorVariants,
+  type CodeEditorTheme,
+} from '../code-editor/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  value?: string
+  language?: string
+  readOnly?: boolean
+  theme?: CodeEditorTheme
+  placeholder?: string
+  /** Action button labels — click events are dispatched as custom events */
+  actions?: Array<{ label: string }>
+}
+
+const {
+  value = '',
+  language = 'plaintext',
+  readOnly = false,
+  theme = 'light',
+  placeholder,
+  actions,
+  class: className,
+  ...props
+} = Astro.props
+
+const api = createCodeEditor({ value, language, readOnly, theme })
+const containerClasses = cn(codeEditorVariants({ theme }), className)
+---
+
+<div
+  data-rfr-code-editor
+  class={containerClasses}
+  {...api.dataAttributes}
+  {...props}
+>
+  <div class="flex items-center justify-between px-3 py-2 border-b bg-muted/50 text-xs text-muted-foreground">
+    <span data-rfr-code-editor-lang>{api.getLanguageLabel()}</span>
+    {actions && actions.length > 0 && (
+      <div class="flex gap-1" data-rfr-code-editor-actions>
+        {actions.map((action) => (
+          <button
+            type="button"
+            data-rfr-code-editor-action={action.label}
+            class="px-2 py-1 rounded text-xs hover:bg-muted transition-colors"
+          >
+            {action.label}
+          </button>
+        ))}
+      </div>
+    )}
+  </div>
+  <textarea
+    data-rfr-code-editor-textarea
+    value={value}
+    readonly={readOnly}
+    placeholder={placeholder}
+    class="flex-1 w-full p-4 bg-transparent resize-none outline-none font-mono min-h-[200px]"
+    spellcheck="false"
+    autocapitalize="off"
+    autocomplete="off"
+    autocorrect="off"
+    role={api.ariaProps.role}
+    aria-multiline={api.ariaProps['aria-multiline']}
+    aria-label={api.ariaProps['aria-label']}
+    aria-readonly={readOnly ? true : undefined}
+  />
+</div>
+
+<script>
+  function initCodeEditors() {
+    document.querySelectorAll<HTMLElement>('[data-rfr-code-editor]').forEach((root) => {
+      if (root.hasAttribute('data-rfr-code-editor-init')) return
+      root.setAttribute('data-rfr-code-editor-init', '')
+
+      const textarea = root.querySelector<HTMLTextAreaElement>('[data-rfr-code-editor-textarea]')
+      if (!textarea) return
+
+      // Dispatch change events when textarea value changes
+      textarea.addEventListener('input', () => {
+        root.dispatchEvent(
+          new CustomEvent('rfr-code-editor-change', {
+            detail: { value: textarea.value },
+            bubbles: true,
+          }),
+        )
+      })
+
+      // Tab key support: insert tab character instead of moving focus
+      textarea.addEventListener('keydown', (e) => {
+        if (e.key === 'Tab') {
+          e.preventDefault()
+          const start = textarea.selectionStart
+          const end = textarea.selectionEnd
+          const value = textarea.value
+          textarea.value = value.substring(0, start) + '  ' + value.substring(end)
+          textarea.selectionStart = textarea.selectionEnd = start + 2
+          textarea.dispatchEvent(new Event('input', { bubbles: true }))
+        }
+      })
+
+      // Action button click handlers
+      const actionBtns = root.querySelectorAll<HTMLButtonElement>('[data-rfr-code-editor-action]')
+      actionBtns.forEach((btn) => {
+        btn.addEventListener('click', () => {
+          const label = btn.getAttribute('data-rfr-code-editor-action')
+          root.dispatchEvent(
+            new CustomEvent('rfr-code-editor-action', {
+              detail: { label },
+              bubbles: true,
+            }),
+          )
+        })
+      })
+    })
+  }
+
+  initCodeEditors()
+  document.addEventListener('astro:after-swap', initCodeEditors)
+</script>