@refraction-ui/astro 0.18.1 → 0.19.0

package/dist/funnel-chart/funnel-chart.ts

@@ -0,0 +1,68 @@
+export interface FunnelChartStep {
+  /** Stable key. */
+  id: string
+  /** Step name. */
+  label: string
+  /** Secondary line under the label. */
+  description?: string
+  /** Count at this step. */
+  value: number
+}
+
+export interface FunnelChartTransition {
+  /** Percent (0–100) of this step that reached the next one. */
+  conversion: number
+  /** Absolute count lost between this step and the next. */
+  dropped: number
+}
+
+export interface FunnelChartRow {
+  step: FunnelChartStep
+  /** Percent (0–100) of the first step's value. */
+  shareOfTop: number
+  /** Width the bar draws at, in percent — never below `minBarPercent`. */
+  barPercent: number
+  /** Transition to the following step; absent on the last step. */
+  next?: FunnelChartTransition
+}
+
+/** Smallest bar width in percent, so a tiny step stays visible. */
+export const DEFAULT_FUNNEL_MIN_BAR_PERCENT = 6
+
+const percentOf = (part: number, whole: number) => (whole ? (part / whole) * 100 : 0)
+
+/**
+ * Derive every row of a stepped conversion funnel: each step's share of the top
+ * step, the bar width it draws at, and between two steps the continue-rate and
+ * how many were lost. Pure and deterministic.
+ */
+export function computeFunnel(
+  steps: FunnelChartStep[],
+  minBarPercent: number = DEFAULT_FUNNEL_MIN_BAR_PERCENT,
+): FunnelChartRow[] {
+  const top = steps.length ? steps[0].value : 0
+  return steps.map((step, i) => {
+    const shareOfTop = percentOf(step.value, top)
+    const following = steps[i + 1]
+    return {
+      step,
+      shareOfTop,
+      barPercent: Math.min(100, Math.max(shareOfTop, minBarPercent)),
+      next: following
+        ? {
+            conversion: percentOf(following.value, step.value),
+            dropped: step.value - following.value,
+          }
+        : undefined,
+    }
+  })
+}
+
+/** Default copy + number formatting; every one is overridable by a prop. */
+export const funnelChartDefaults = {
+  formatValue: (value: number) => value.toLocaleString('en-US'),
+  formatPercent: (percent: number) => `${percent.toFixed(1)}%`,
+  shareLabel: (share: string) => `${share} of top`,
+  conversionLabel: (percent: string) => `${percent} continue`,
+  droppedLabel: (count: string) => `−${count} dropped`,
+}

package/dist/funnel-chart/index.ts

@@ -0,0 +1,10 @@
+export {
+  computeFunnel,
+  funnelChartDefaults,
+  DEFAULT_FUNNEL_MIN_BAR_PERCENT,
+  type FunnelChartStep,
+  type FunnelChartTransition,
+  type FunnelChartRow,
+} from './funnel-chart.js'
+
+export { funnelChartClasses } from './funnel-chart.styles.js'

package/dist/index.ts

@@ -237,3 +237,7 @@ export * from './astro-audience-feature-card/index.ts'
 export * from './astro-sortable-list/index.ts'
 export * from './astro-kanban-board/index.ts'
 export * from './astro-slot-picker/index.ts'
+export * from './astro-action-list/index.ts'
+export * from './astro-funnel-chart/index.ts'
+export * from './astro-line-chart/index.ts'
+export * from './astro-page-header/index.ts'

package/dist/input/input.styles.ts

@@ -1,11 +1,11 @@
 import { cva } from '../shared/index.ts'
 
 export const inputVariants = cva({
-  base: 'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+  base: 'flex w-full rounded-md border border-input bg-transparent px-3 py-1 shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
   variants: {
     size: {
       sm: 'h-8 text-xs',
-      default: 'h-9',
+      default: 'h-9 text-sm',
       lg: 'h-10 text-base',
     },
     validationState: {

package/dist/line-chart/index.ts

@@ -0,0 +1,19 @@
+export {
+  computeLineChart,
+  tooltipLeftPercent,
+  nextLineChartIndex,
+  lineChartColor,
+  DEFAULT_LINE_CHART_PADDING,
+  DEFAULT_LINE_CHART_WIDTH,
+  DEFAULT_LINE_CHART_HEIGHT,
+  type LineChartSeries,
+  type LineChartPadding,
+  type LineChartOptions,
+  type LineChartTick,
+  type LineChartXLabel,
+  type LineChartPath,
+  type LineChartColumn,
+  type LineChartGeometry,
+} from './line-chart.js'
+
+export { lineChartClasses } from './line-chart.styles.js'

package/dist/line-chart/line-chart.styles.ts

@@ -0,0 +1,16 @@
+/** Token-class styles for LineChart; no colour literals. */
+export const lineChartClasses = {
+  root: 'relative',
+  svg: 'block w-full rounded-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+  gridline: 'stroke-border',
+  axis: 'fill-muted-foreground text-[9px]',
+  crosshair: 'stroke-border',
+  marker: 'stroke-card',
+  tooltip:
+    'pointer-events-none absolute z-10 -translate-x-1/2 whitespace-nowrap rounded-md bg-tertiary px-2.5 py-2 text-[11px] text-tertiary-foreground shadow-lg',
+  tooltipLabel: 'mb-1 opacity-60',
+  tooltipRow: 'flex justify-between gap-2',
+  legend: 'mt-2.5 flex flex-wrap gap-3.5',
+  legendItem: 'inline-flex items-center gap-1.5 text-[11px] text-muted-foreground',
+  legendSwatch: 'h-[3px] w-2.5 rounded-sm',
+} as const

package/dist/line-chart/line-chart.ts

@@ -0,0 +1,188 @@
+export interface LineChartSeries {
+  /** Stable key for the series. */
+  id: string
+  /** Legend / tooltip name. */
+  name: string
+  /**
+   * Any CSS colour (a token `hsl(var(--…))` or a data colour). Defaults to the
+   * theme's chart palette (`--chart-1` … `--chart-5`) by series position.
+   */
+  color?: string
+  /** One value per label, in label order. */
+  data: number[]
+}
+
+export interface LineChartPadding {
+  top: number
+  right: number
+  bottom: number
+  left: number
+}
+
+export interface LineChartOptions {
+  series: LineChartSeries[]
+  labels: string[]
+  /** viewBox width — the SVG scales to its container's width. */
+  width: number
+  /** viewBox height. */
+  height: number
+  padding?: Partial<LineChartPadding>
+  /** Number of gridline intervals on the y-axis. */
+  tickCount?: number
+  /** Headroom multiplier above the largest value. */
+  headroom?: number
+  /** Show every n-th x label (the last label is always shown). */
+  labelEvery?: number
+}
+
+export interface LineChartTick {
+  value: number
+  y: number
+}
+
+export interface LineChartXLabel {
+  index: number
+  label: string
+  x: number
+}
+
+export interface LineChartPath {
+  id: string
+  /** Resolved stroke colour. */
+  color: string
+  /** The stroke path. */
+  line: string
+  /** The line closed down to the zero baseline, for an area fill. */
+  area: string
+}
+
+export interface LineChartColumn {
+  index: number
+  x: number
+  width: number
+}
+
+export interface LineChartGeometry {
+  width: number
+  height: number
+  padding: LineChartPadding
+  /** Top of the shared y-scale. */
+  max: number
+  ticks: LineChartTick[]
+  xLabels: LineChartXLabel[]
+  paths: LineChartPath[]
+  /** One hover/focus column per category. */
+  columns: LineChartColumn[]
+  x: (index: number) => number
+  y: (value: number) => number
+  /** Top and bottom of the plot area, for a crosshair. */
+  plotTop: number
+  plotBottom: number
+}
+
+export const DEFAULT_LINE_CHART_PADDING: LineChartPadding = {
+  top: 14,
+  right: 14,
+  bottom: 24,
+  left: 40,
+}
+
+export const DEFAULT_LINE_CHART_WIDTH = 760
+export const DEFAULT_LINE_CHART_HEIGHT = 230
+const DEFAULT_TICK_COUNT = 4
+const DEFAULT_HEADROOM = 1.08
+const DEFAULT_LABEL_EVERY = 2
+/** Number of `--chart-N` tokens the theme defines. */
+const CHART_TOKEN_COUNT = 5
+
+/** The theme chart colour for the series at `index` (wraps around). */
+export function lineChartColor(index: number): string {
+  return `hsl(var(--chart-${(index % CHART_TOKEN_COUNT) + 1}))`
+}
+
+function pathFrom(points: Array<[number, number]>): string {
+  return points.map(([px, py], i) => (i ? 'L' : 'M') + px.toFixed(1) + ' ' + py.toFixed(1)).join(' ')
+}
+
+/**
+ * Pure geometry for a responsive multi-series line chart. Every series shares
+ * ONE y-scale (zero baseline to the largest value plus headroom), so series are
+ * comparable. Coordinates are in viewBox units; the SVG scales to its container.
+ */
+export function computeLineChart(options: LineChartOptions): LineChartGeometry {
+  const {
+    series,
+    labels,
+    width,
+    height,
+    tickCount = DEFAULT_TICK_COUNT,
+    headroom = DEFAULT_HEADROOM,
+    labelEvery = DEFAULT_LABEL_EVERY,
+  } = options
+  const padding = { ...DEFAULT_LINE_CHART_PADDING, ...options.padding }
+  const n = labels.length
+  const values = series.flatMap((s) => s.data)
+  const peak = values.length ? Math.max(...values) : 0
+  const max = peak > 0 ? peak * headroom : 1
+  const plotW = width - padding.left - padding.right
+  const plotTop = padding.top
+  const plotBottom = height - padding.bottom
+  const plotH = plotBottom - plotTop
+
+  const x = (index: number) => padding.left + (n > 1 ? (index / (n - 1)) * plotW : plotW / 2)
+  const y = (value: number) => plotTop + (1 - value / max) * plotH
+
+  const ticks: LineChartTick[] = Array.from({ length: tickCount + 1 }, (_, t) => {
+    const value = (max / tickCount) * t
+    return { value, y: y(value) }
+  })
+
+  const xLabels: LineChartXLabel[] = labels
+    .map((label, index) => ({ index, label, x: x(index) }))
+    .filter(({ index }) => index % labelEvery === 0 || index === n - 1)
+
+  const paths: LineChartPath[] = series.map((s, si) => {
+    const points = s.data.map((v, i): [number, number] => [x(i), y(v)])
+    const line = pathFrom(points)
+    const first = points.length ? points[0][0] : x(0)
+    const last = points.length ? points[points.length - 1][0] : x(0)
+    const base = y(0).toFixed(1)
+    const area = `${line} L ${last.toFixed(1)} ${base} L ${first.toFixed(1)} ${base} Z`
+    return { id: s.id, color: s.color ?? lineChartColor(si), line, area }
+  })
+
+  const colW = n > 1 ? plotW / (n - 1) : plotW
+  const columns: LineChartColumn[] = labels.map((_, index) => ({
+    index,
+    x: x(index) - colW / 2,
+    width: colW,
+  }))
+
+  return { width, height, padding, max, ticks, xLabels, paths, columns, x, y, plotTop, plotBottom }
+}
+
+/** Where a tooltip for `index` sits horizontally, as a percent of the chart width. */
+export function tooltipLeftPercent(geometry: LineChartGeometry, index: number): number {
+  return (geometry.x(index) / geometry.width) * 100
+}
+
+/**
+ * The category index a keyboard key moves to from `current` (null = nothing
+ * active yet). Returns `current` unchanged for keys the chart doesn't handle.
+ */
+export function nextLineChartIndex(current: number | null, key: string, count: number): number | null {
+  if (count === 0) return null
+  const last = count - 1
+  switch (key) {
+    case 'ArrowRight':
+      return current == null ? 0 : Math.min(current + 1, last)
+    case 'ArrowLeft':
+      return current == null ? last : Math.max(current - 1, 0)
+    case 'Home':
+      return 0
+    case 'End':
+      return last
+    default:
+      return current
+  }
+}

package/dist/page-header/index.ts

@@ -0,0 +1,15 @@
+export {
+  createPageHeader,
+  type PageHeaderTitleLevel,
+  type PageHeaderProps,
+  type PageHeaderAPI,
+} from './page-header.js'
+
+export {
+  pageHeaderClass,
+  pageHeaderTextClass,
+  pageHeaderKickerClass,
+  pageHeaderTitleClass,
+  pageHeaderDescriptionClass,
+  pageHeaderActionsClass,
+} from './page-header.styles.js'

package/dist/page-header/page-header.styles.ts

@@ -0,0 +1,21 @@
+/**
+ * Root: text cluster on the leading edge, actions on the trailing edge; wraps
+ * on narrow screens. Carries no outer margin — the page layout spaces it.
+ */
+export const pageHeaderClass = 'flex flex-wrap items-start justify-between gap-4'
+
+/** Text cluster (kicker, title, description). */
+export const pageHeaderTextClass = 'flex min-w-0 flex-1 flex-col gap-1'
+
+/** Small uppercase eyebrow above the title. */
+export const pageHeaderKickerClass =
+  'break-words text-[11px] uppercase tracking-wider text-muted-foreground'
+
+/** Title — app-sized, not a marketing display size. */
+export const pageHeaderTitleClass = 'break-words text-xl font-semibold text-foreground'
+
+/** Supporting copy under the title, capped at a readable measure. */
+export const pageHeaderDescriptionClass = 'max-w-prose text-sm text-muted-foreground'
+
+/** Trailing actions row. */
+export const pageHeaderActionsClass = 'flex flex-none flex-wrap items-center gap-2'

package/dist/page-header/page-header.ts

@@ -0,0 +1,27 @@
+/** Heading element used for the page title. */
+export type PageHeaderTitleLevel = 'h1' | 'h2' | 'h3'
+
+export interface PageHeaderProps {
+  /** Whether an actions slot will be rendered. */
+  hasActions?: boolean
+}
+
+export interface PageHeaderAPI {
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic data attributes for a PageHeader — the heading
+ * cluster at the top of an application page (kicker, title, description and a
+ * trailing actions row). Unlike SectionHead (a centred marketing heading) it is
+ * sized for dense app chrome and never centres.
+ */
+export function createPageHeader(props: PageHeaderProps = {}): PageHeaderAPI {
+  return {
+    dataAttributes: {
+      'data-slot': 'page-header',
+      'data-has-actions': props.hasActions ? 'true' : 'false',
+    },
+  }
+}

package/dist/progress-display/progress-display.styles.ts

@@ -58,7 +58,7 @@ export const badgeItemVariants = cva({
 })
 
 export const progressBarVariants = cva({
-  base: 'h-2 w-full overflow-hidden rounded-full bg-secondary',
+  base: 'w-full overflow-hidden rounded-full bg-secondary',
   variants: {
     size: {
       sm: 'h-1',

package/dist/select/index.ts

@@ -8,6 +8,8 @@ export {
 export {
   selectTriggerVariants,
   selectContentVariants,
+  selectRootClass,
+  selectValueClass,
   selectItemVariants,
   selectTokens,
 } from './select.styles.js'

package/dist/select/select.styles.ts

@@ -12,7 +12,7 @@ export const selectTokens: TokenContract = {
 }
 
 export const selectTriggerVariants = cva({
-  base: 'flex h-9 w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+  base: 'flex w-full items-center justify-between rounded-md border border-input bg-transparent px-3 py-2 shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
   variants: {
     size: {
       sm: 'h-8 text-xs',
@@ -26,10 +26,10 @@ export const selectTriggerVariants = cva({
 })
 
 export const selectContentVariants = cva({
-  base: 'relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95',
+  base: 'absolute left-0 top-full z-50 mt-1 max-h-96 w-full min-w-[8rem] overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md animate-in fade-in-0 zoom-in-95',
   variants: {
     position: {
-      popper: 'translate-y-1',
+      popper: '',
       'item-aligned': '',
     },
   },
@@ -50,3 +50,9 @@ export const selectItemVariants = cva({
     selected: 'false',
   },
 })
+
+/** Positioning context: the listbox floats under the trigger. */
+export const selectRootClass = 'relative'
+
+/** The selected label inside the trigger; truncates, dims the placeholder. */
+export const selectValueClass = 'truncate text-left data-[placeholder]:text-muted-foreground'

package/dist/select/select.ts

@@ -14,6 +14,12 @@ export interface SelectProps {
   disabled?: boolean
   open?: boolean
   name?: string
+  /**
+   * Element ids to link trigger and listbox. Adapters should pass ids that
+   * are stable across renders (e.g. React `useId`); when omitted, fresh ids
+   * are generated on every call.
+   */
+  ids?: { trigger: string; content: string }
 }
 
 export interface SelectAPI {
@@ -63,14 +69,16 @@ export function createSelect(props: SelectProps = {}): SelectAPI {
   const isInteractive = !disabled
   const selectedOption = options.find((o) => o.value === value)
 
-  const triggerId = generateId('select-trigger')
-  const contentId = generateId('select-content')
+  const triggerId = props.ids?.trigger ?? generateId('select-trigger')
+  const contentId = props.ids?.content ?? generateId('select-content')
 
+  // No aria-labelledby on the trigger: pointing a combobox at itself would
+  // override a caller's aria-label / <label for> and leave the accessible
+  // name as the displayed value.
   const triggerAriaProps: Partial<AccessibilityProps> = {
     role: 'combobox',
     'aria-expanded': open,
     'aria-controls': contentId,
-    'aria-labelledby': triggerId,
   }
   if (disabled) {
     triggerAriaProps['aria-disabled'] = true

package/dist/separator/index.ts

@@ -8,5 +8,7 @@ export {
 export {
   separatorVariants,
   separatorLineClass,
+  separatorSubtleLineClass,
   separatorLabelClass,
+  type SeparatorTone,
 } from './separator.styles.js'

package/dist/separator/separator.styles.ts

@@ -12,8 +12,16 @@ export const separatorVariants = cva({
   base: '',
   variants: {
     orientation: {
-      horizontal: 'h-px w-full bg-border',
-      vertical: 'w-px h-full bg-border',
+      horizontal: 'h-px w-full',
+      vertical: 'w-px h-full',
+    },
+    // Line color (issue #485). `default` is the standard border token;
+    // `subtle` uses the hairline `border-subtle` token for a lighter rule.
+    // Keeping the color here (not in `orientation`) keeps every existing call
+    // pixel-identical while adding the subtle option.
+    tone: {
+      default: 'bg-border',
+      subtle: 'bg-border-subtle',
     },
     labeled: {
       true: 'flex items-center',
@@ -22,13 +30,20 @@ export const separatorVariants = cva({
   },
   defaultVariants: {
     orientation: 'horizontal',
+    tone: 'default',
     labeled: 'false',
   },
 })
 
+/** Line tone for the separator rule and labeled-divider flanks. */
+export type SeparatorTone = 'default' | 'subtle'
+
 /** Class for each flanking line in the labeled-divider variant. */
 export const separatorLineClass = 'h-px flex-1 bg-border'
 
+/** Hairline variant of {@link separatorLineClass} (issue #485). */
+export const separatorSubtleLineClass = 'h-px flex-1 bg-border-subtle'
+
 /** Class for the centered label in the labeled-divider variant. */
 export const separatorLabelClass =
   'px-3 text-xs uppercase tracking-wide text-muted-foreground'

package/dist/shared/cn.ts

@@ -3,9 +3,12 @@
  * Handles conditional classes, arrays, and falsy values.
  * No external dependencies (no clsx, no tailwind-merge).
  *
- * For Tailwind class conflict resolution (e.g., 'p-2 p-4' → 'p-4'),
- * consumers can use @refraction-ui/tailwind-config which provides
- * a tw-merge-aware variant of this function.
+ * It does NOT resolve Tailwind conflicts: `cn('p-2', 'p-4')` keeps both and
+ * the stylesheet order decides. Components therefore keep size-owned
+ * utilities (height, text size, padding) out of their cva `base` and only in
+ * the matching variant, so a variant prop always wins; a consumer `className`
+ * that must beat a component utility can use Tailwind's `!` important
+ * modifier (e.g. `!h-7`).
  */
 
 type ClassValue = string | number | boolean | undefined | null | ClassValue[]

package/dist/slide-viewer/slide-viewer.styles.ts

@@ -45,6 +45,8 @@ export { slideViewerProgressBarVariants as progressBarVariants }
 export const slideTypeBadgeVariants = cva({
   base: 'inline-flex items-center rounded-full px-2.5 py-0.5 text-xs font-medium',
   variants: {
+    // Slide-type accents are a content-category palette (lesson/quiz/exercise…),
+    // not status tones — deliberately not routed through the theme tokens.
     type: {
       lesson: 'bg-blue-100 text-blue-800',
       quiz: 'bg-purple-100 text-purple-800',

package/dist/sticky-note/sticky-note.styles.ts

@@ -14,6 +14,8 @@ export const stickyNoteVariants = cva({
     'min-w-[160px] min-h-[120px]',
   ].join(' '),
   variants: {
+    // Named paper colors are product semantics (physical sticky notes),
+    // not status tones — deliberately not routed through the theme tokens.
     color: {
       yellow: 'bg-yellow-100 text-yellow-900',
       pink: 'bg-pink-100 text-pink-900',

package/dist/tabs/index.ts

@@ -1,5 +1,6 @@
 export {
   createTabs,
+  getNextTabIndex,
   type TabsProps,
   type TabsAPI,
   type TabsState,

package/dist/tabs/tabs.ts

@@ -131,3 +131,32 @@ export function createTabs(props: TabsProps = {}): TabsAPI {
     idPrefix,
   }
 }
+
+/**
+ * Roving-focus target for a key press inside a tab list (WAI-ARIA Tabs
+ * pattern). Given the index of the focused tab among the ENABLED tabs, returns
+ * the index to move to, or `null` when the key is not a navigation key for this
+ * orientation. Arrow keys wrap; Home/End jump to the ends.
+ */
+export function getNextTabIndex(
+  current: number,
+  key: string,
+  count: number,
+  orientation: 'horizontal' | 'vertical' = 'horizontal',
+): number | null {
+  if (count === 0) return null
+  const prev = orientation === 'horizontal' ? 'ArrowLeft' : 'ArrowUp'
+  const next = orientation === 'horizontal' ? 'ArrowRight' : 'ArrowDown'
+  switch (key) {
+    case next:
+      return current < 0 ? 0 : (current + 1) % count
+    case prev:
+      return current < 0 ? count - 1 : (current - 1 + count) % count
+    case 'Home':
+      return 0
+    case 'End':
+      return count - 1
+    default:
+      return null
+  }
+}

package/dist/textarea/textarea.styles.ts

@@ -1,11 +1,11 @@
 import { cva } from '../shared/index.ts'
 
 export const textareaVariants = cva({
-  base: 'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+  base: 'flex w-full rounded-md border border-input bg-transparent px-3 py-2 shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
   variants: {
     size: {
       sm: 'min-h-[40px] text-xs',
-      default: 'min-h-[60px]',
+      default: 'min-h-[60px] text-sm',
       lg: 'min-h-[80px] text-base',
     },
   },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {
@@ -22,6 +22,7 @@
   },
   "devDependencies": {
     "@refraction-ui/astro-accordion": "workspace:*",
+    "@refraction-ui/astro-action-list": "workspace:*",
     "@refraction-ui/astro-ai": "workspace:*",
     "@refraction-ui/astro-analytics": "workspace:*",
     "@refraction-ui/astro-animated-text": "workspace:*",
@@ -71,6 +72,7 @@
     "@refraction-ui/astro-floating-reactions": "workspace:*",
     "@refraction-ui/astro-flow-editor": "workspace:*",
     "@refraction-ui/astro-footer": "workspace:*",
+    "@refraction-ui/astro-funnel-chart": "workspace:*",
     "@refraction-ui/astro-graph-view": "workspace:*",
     "@refraction-ui/astro-icon-system": "workspace:*",
     "@refraction-ui/astro-infinite-canvas": "workspace:*",
@@ -81,6 +83,7 @@
     "@refraction-ui/astro-kanban-board": "workspace:*",
     "@refraction-ui/astro-keyboard-shortcut": "workspace:*",
     "@refraction-ui/astro-language-selector": "workspace:*",
+    "@refraction-ui/astro-line-chart": "workspace:*",
     "@refraction-ui/astro-link-card": "workspace:*",
     "@refraction-ui/astro-live-captions": "workspace:*",
     "@refraction-ui/astro-live-cursors": "workspace:*",
@@ -96,6 +99,7 @@
     "@refraction-ui/astro-navbar": "workspace:*",
     "@refraction-ui/astro-numbered-steps": "workspace:*",
     "@refraction-ui/astro-otp-input": "workspace:*",
+    "@refraction-ui/astro-page-header": "workspace:*",
     "@refraction-ui/astro-pagination": "workspace:*",
     "@refraction-ui/astro-password-input": "workspace:*",
     "@refraction-ui/astro-payment": "workspace:*",