@refraction-ui/astro 0.18.1 → 0.20.0

package/dist/astro-table/TableHead.astro

@@ -0,0 +1,13 @@
+---
+import { tableHeadVariants, type TableAlign, type TableDensity, type TableHeadTone } from '../table/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends Omit<astroHTML.JSX.ThHTMLAttributes, 'align'> {
+  align?: TableAlign
+  density?: TableDensity
+  tone?: TableHeadTone
+}
+const { align, density, tone, scope = 'col', class: className, ...rest } = Astro.props
+---
+
+<th scope={scope} class={cn(tableHeadVariants({ align, density, tone }), className)} data-slot="table-head" {...rest}><slot /></th>

package/dist/astro-table/TableRow.astro

@@ -0,0 +1,9 @@
+---
+import { tableRowClass } from '../table/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {}
+const { class: className, ...rest } = Astro.props
+---
+
+<tr class={cn(tableRowClass, className)} data-slot="table-row" {...rest}><slot /></tr>

package/dist/astro-table/index.ts

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

package/dist/avatar/avatar.styles.ts

@@ -11,8 +11,12 @@ export const avatarTokens: TokenContract = {
 }
 
 export const avatarVariants = cva({
-  base: 'relative flex shrink-0 overflow-hidden rounded-full',
+  base: 'relative flex shrink-0 overflow-hidden',
   variants: {
+    shape: {
+      circle: 'rounded-full',
+      square: 'rounded-md',
+    },
     size: {
       xs: 'h-6 w-6',
       sm: 'h-8 w-8',
@@ -22,6 +26,7 @@ export const avatarVariants = cva({
     },
   },
   defaultVariants: {
+    shape: 'circle',
     size: 'md',
   },
 })
@@ -31,7 +36,7 @@ export const avatarImageVariants = cva({
 })
 
 export const avatarFallbackVariants = cva({
-  base: 'flex h-full w-full items-center justify-center rounded-full bg-muted text-muted-foreground',
+  base: 'flex h-full w-full items-center justify-center rounded-[inherit] bg-muted text-muted-foreground',
   variants: {
     size: {
       xs: 'text-xs',

package/dist/avatar/avatar.ts

@@ -2,6 +2,9 @@ import type { AccessibilityProps } from '../shared/index.ts'
 
 export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
 
+/** Outline of the avatar. */
+export type AvatarShape = 'circle' | 'square'
+
 export type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'
 
 export interface AvatarProps {
@@ -44,10 +47,12 @@ export function getInitials(name: string): string {
 export function createAvatar(props: AvatarProps = {}): AvatarAPI {
   const { src, alt = '', fallback = '', size = 'md' } = props
 
-  const ariaProps: Partial<AccessibilityProps> = {
-    role: 'img',
-  }
+  // role="img" makes its children presentational, so it is only applied when
+  // the avatar itself has a name; otherwise the inner <img alt> / fallback
+  // text stays exposed.
+  const ariaProps: Partial<AccessibilityProps> = {}
   if (alt) {
+    ariaProps.role = 'img'
     ariaProps['aria-label'] = alt
   }
 

package/dist/avatar/index.ts

@@ -4,6 +4,7 @@ export {
   type AvatarProps,
   type AvatarAPI,
   type AvatarSize,
+  type AvatarShape,
   type AvatarLoadingStatus,
 } from './avatar.js'
 

package/dist/badge/badge.styles.ts

@@ -1,7 +1,7 @@
 import { cva } from '../shared/index.ts'
 
 export const badgeVariants = cva({
-  base: 'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  base: 'inline-flex items-center rounded-full border font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   variants: {
     variant: {
       default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
@@ -11,6 +11,11 @@ export const badgeVariants = cva({
       outline: 'text-foreground',
       success: 'border-transparent bg-success text-success-foreground shadow hover:bg-success/80 font-semibold',
       warning: 'border-transparent bg-warning text-warning-foreground shadow hover:bg-warning/80 font-semibold',
+      // Second brand accent + extended status roles (issue #485).
+      tertiary: 'border-transparent bg-tertiary text-tertiary-foreground shadow hover:bg-tertiary/80 font-semibold',
+      positive: 'border-transparent bg-positive text-positive-foreground shadow hover:bg-positive/80 font-semibold',
+      caution: 'border-transparent bg-caution text-caution-foreground shadow hover:bg-caution/80 font-semibold',
+      done: 'border-transparent bg-done text-info-foreground shadow hover:bg-done/80 font-semibold',
     },
     size: {
       sm: 'px-2 py-0 text-[10px]',

package/dist/badge/badge.ts

@@ -1,6 +1,18 @@
 import type { AccessibilityProps } from '../shared/index.ts'
 
-export type BadgeVariant = 'default' | 'primary' | 'secondary' | 'destructive' | 'outline' | 'success' | 'warning'
+export type BadgeVariant =
+  | 'default'
+  | 'primary'
+  | 'secondary'
+  | 'destructive'
+  | 'outline'
+  | 'success'
+  | 'warning'
+  // Issue #485 — second brand accent + extended status roles.
+  | 'tertiary'
+  | 'positive'
+  | 'caution'
+  | 'done'
 export type BadgeSize = 'sm' | 'md'
 
 export interface BadgeProps {
@@ -15,13 +27,23 @@ export interface BadgeAPI {
   dataAttributes: Record<string, string>
 }
 
-const statusVariants: BadgeVariant[] = ['success', 'warning', 'destructive']
+const statusVariants: BadgeVariant[] = [
+  'success',
+  'warning',
+  'destructive',
+  'positive',
+  'caution',
+  'done',
+]
 
 /** Icon name for status badge variants — non-color indicator for colorblind safety */
 const BADGE_ICONS: Partial<Record<BadgeVariant, string>> = {
   success: 'check',
   warning: 'alert',
   destructive: 'x',
+  positive: 'check',
+  caution: 'alert',
+  done: 'check',
 }
 
 /** Get the icon name for a badge variant (undefined for non-status variants) */

package/dist/button/button.styles.ts

@@ -13,7 +13,7 @@ export const buttonTokens: TokenContract = {
 }
 
 export const buttonVariants = cva({
-  base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
+  base: 'inline-flex items-center justify-center gap-2 whitespace-nowrap font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0',
   variants: {
     variant: {
       default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
@@ -24,15 +24,21 @@ export const buttonVariants = cva({
       destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
       outline: 'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
       secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+      // Soft tinted brand fill — lower-emphasis primary action (issue #485).
+      soft: 'bg-primary-soft text-primary-soft-foreground shadow-sm hover:bg-primary-soft/80',
+      // Second brand accent (issue #485).
+      tertiary: 'bg-tertiary text-tertiary-foreground shadow-sm hover:bg-tertiary/90',
       ghost: 'hover:bg-accent hover:text-accent-foreground',
       link: 'text-primary underline-offset-4 hover:underline',
     },
     size: {
       xs: 'h-7 rounded px-2 text-xs',
       sm: 'h-8 rounded-md px-3 text-xs',
-      default: 'h-9 px-4 py-2',
-      lg: 'h-10 rounded-md px-8',
-      icon: 'h-9 w-9',
+      default: 'h-9 rounded-md px-4 py-2 text-sm',
+      lg: 'h-10 rounded-md px-8 text-sm',
+      icon: 'h-9 w-9 rounded-md text-sm',
+      'icon-sm': 'h-8 w-8 rounded-md text-xs',
+      'icon-xs': 'h-7 w-7 rounded text-xs',
     },
   },
   defaultVariants: {

package/dist/button/button.ts

@@ -14,6 +14,9 @@ export type ButtonVariant =
   | 'secondary'
   | 'ghost'
   | 'link'
+  // Issue #485 — soft tinted brand fill + a real second brand accent.
+  | 'soft'
+  | 'tertiary'
 
 /** Variants that map to the same visual style as `default`. */
 export const BUTTON_VARIANT_ALIASES: Partial<Record<ButtonVariant, ButtonVariant>> = {
@@ -25,7 +28,7 @@ export function resolveButtonVariant(variant: ButtonVariant | undefined): Button
   if (!variant) return variant
   return BUTTON_VARIANT_ALIASES[variant] ?? variant
 }
-export type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon'
+export type ButtonSize = 'xs' | 'sm' | 'default' | 'lg' | 'icon' | 'icon-sm' | 'icon-xs'
 
 export interface ButtonProps {
   variant?: ButtonVariant

package/dist/callout/callout.ts

@@ -1,8 +1,16 @@
 import type { AccessibilityProps } from '../shared/index.ts'
 
 export interface CalloutProps {
-  /** Optional accessible role override */
+  /** Explicit role; always wins. */
   role?: string
+  /** Destructive callouts are announced (`role="alert"`). */
+  destructive?: boolean
+  /**
+   * Whether the callout has an accessible name (`aria-label` /
+   * `aria-labelledby`). Only a named callout becomes a `region` landmark — an
+   * unnamed region is an axe violation and landmark noise.
+   */
+  labelled?: boolean
 }
 
 export interface CalloutAPI {
@@ -13,10 +21,11 @@ export interface CalloutAPI {
 export function createCallout(props: CalloutProps = {}): CalloutAPI {
   const ariaProps: Partial<AccessibilityProps> = {}
   
-  // Callouts are usually alert or region depending on severity
   if (props.role) {
     ariaProps.role = props.role
-  } else {
+  } else if (props.destructive) {
+    ariaProps.role = 'alert'
+  } else if (props.labelled) {
     ariaProps.role = 'region'
   }
 

package/dist/card/card.styles.ts

@@ -11,8 +11,16 @@ export const cardTokens: TokenContract = {
 }
 
 export const cardVariants = cva({
-  base: 'rounded-lg border bg-card text-card-foreground shadow',
+  base: 'rounded-lg border shadow',
   variants: {
+    variant: {
+      // Default — unchanged surface (bg-card + border via the global token).
+      default: 'bg-card text-card-foreground',
+      // Lower-emphasis container on the subtle surface token (issue #485).
+      subtle: 'bg-surface-subtle text-card-foreground',
+      // Tinted second-accent card (issue #485).
+      tertiary: 'border-transparent bg-tertiary-soft text-tertiary-soft-foreground',
+    },
     padding: {
       none: '',
       default: 'p-6',
@@ -20,6 +28,7 @@ export const cardVariants = cva({
     },
   },
   defaultVariants: {
+    variant: 'default',
     padding: 'none',
   },
 })

package/dist/card/card.ts

@@ -1,5 +1,19 @@
 import type { AccessibilityProps } from '../shared/index.ts'
 
+/**
+ * Visual tone of a card (issue #485).
+ * - `default` — the standard surface (activates the `--rfr-card-*` contract).
+ * - `subtle` — a lower-emphasis container on the subtle surface token.
+ * - `tertiary` — a tinted second-brand-accent card.
+ */
+export type CardVariant = 'default' | 'subtle' | 'tertiary'
+
+/** Built-in inner padding of the Card container. */
+export type CardPadding = 'none' | 'default' | 'compact'
+
+/** Heading element for CardTitle. */
+export type CardTitleLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
 export interface CardProps {
   /** Optional accessible role override */
   role?: string

package/dist/card/index.ts

@@ -7,6 +7,9 @@ export {
   createCardFooter,
   type CardProps,
   type CardAPI,
+  type CardVariant,
+  type CardPadding,
+  type CardTitleLevel,
 } from './card.js'
 
 export {

package/dist/data-table/data-table.styles.ts

@@ -53,3 +53,21 @@ export const rowVariants = cva({
     selected: 'false',
   },
 })
+
+/** Logical text alignment per column alignment. */
+export const dataTableAlignClass = {
+  start: 'text-start',
+  center: 'text-center',
+  end: 'text-end',
+} as const
+
+/** Numeric cells: tabular figures, no wrapping. */
+export const dataTableNumericClass = 'tabular-nums whitespace-nowrap'
+
+/** Button inside a sortable header: the keyboard-reachable sort control. */
+export const dataTableSortButtonClass =
+  'inline-flex items-center gap-1 rounded-sm font-inherit text-inherit focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring'
+
+/** Rows with a row action: pointer + keyboard focus ring. */
+export const dataTableActionRowClass =
+  'cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring'

package/dist/data-table/data-table.ts

@@ -5,8 +5,25 @@ export interface ColumnDef<T = Record<string, unknown>> {
   id: string
   /** Column header text */
   header: string
-  /** Accessor function to get cell value from row */
-  accessor: (row: T) => unknown
+  /**
+   * Value of this column for a row. Drives sorting, filtering and — when no
+   * `cell` renderer is given — the rendered text. Optional for display-only
+   * columns that set `cell`.
+   */
+  accessor?: (row: T) => unknown
+  /**
+   * Custom cell renderer. Framework adapters narrow the return type (React:
+   * `ReactNode`). When omitted the cell renders `String(accessor(row))`.
+   */
+  cell?: (row: T, index: number) => unknown
+  /** Horizontal alignment of header and cells. Defaults to `start`. */
+  align?: DataTableAlign
+  /** Numeric column: tabular figures, no wrapping, aligned to `end` unless `align` says otherwise. */
+  numeric?: boolean
+  /** Extra class for this column's data cells. */
+  className?: string
+  /** Extra class for this column's header cell. */
+  headerClassName?: string
   /** Whether this column is sortable */
   sortable?: boolean
   /** Whether this column is filterable */
@@ -15,6 +32,31 @@ export interface ColumnDef<T = Record<string, unknown>> {
 
 export type SortDirection = 'asc' | 'desc'
 
+/** Horizontal alignment of a column (logical, RTL-safe). */
+export type DataTableAlign = 'start' | 'center' | 'end'
+
+/** A column's effective alignment: explicit `align`, else `end` for numeric columns. */
+export function resolveColumnAlign(col: { align?: DataTableAlign; numeric?: boolean }): DataTableAlign {
+  return col.align ?? (col.numeric ? 'end' : 'start')
+}
+
+/** The raw value of a column for a row (`undefined` without an accessor). */
+export function getColumnValue<T>(col: { accessor?: (row: T) => unknown }, row: T): unknown {
+  return col.accessor ? col.accessor(row) : undefined
+}
+
+/**
+ * Stable React/DOM key for a row: `getRowKey` when given, else the row's
+ * index. Prefer a `getRowKey` — index keys break row state on sort/filter.
+ */
+export function resolveRowKey<T>(
+  row: T,
+  index: number,
+  getRowKey?: (row: T, index: number) => string | number,
+): string | number {
+  return getRowKey ? getRowKey(row, index) : index
+}
+
 export interface DataTableProps<T = Record<string, unknown>> {
   /** Column definitions */
   columns: ColumnDef<T>[]
@@ -74,10 +116,10 @@ export function createDataTable<T = Record<string, unknown>>(
     for (const [columnId, filterValue] of Object.entries(filters)) {
       if (!filterValue) continue
       const col = columns.find((c) => c.id === columnId)
-      if (!col) continue
+      if (!col?.accessor) continue
       const lowerFilter = filterValue.toLowerCase()
       result = result.filter((row) => {
-        const cellValue = col.accessor(row)
+        const cellValue = getColumnValue(col, row)
         return String(cellValue ?? '').toLowerCase().includes(lowerFilter)
       })
     }
@@ -91,11 +133,11 @@ export function createDataTable<T = Record<string, unknown>>(
     if (!sortBy) return filtered
 
     const col = columns.find((c) => c.id === sortBy)
-    if (!col) return filtered
+    if (!col?.accessor) return filtered
 
     return [...filtered].sort((a, b) => {
-      const aVal = col.accessor(a)
-      const bVal = col.accessor(b)
+      const aVal = getColumnValue(col, a)
+      const bVal = getColumnValue(col, b)
       const aStr = String(aVal ?? '')
       const bStr = String(bVal ?? '')
 

package/dist/data-table/index.ts

@@ -1,6 +1,10 @@
 export {
   createDataTable,
+  resolveColumnAlign,
+  getColumnValue,
+  resolveRowKey,
   type ColumnDef,
+  type DataTableAlign,
   type SortDirection,
   type DataTableProps,
   type DataTableState,
@@ -12,4 +16,8 @@ export {
   headerVariants,
   cellVariants,
   rowVariants,
+  dataTableAlignClass,
+  dataTableNumericClass,
+  dataTableSortButtonClass,
+  dataTableActionRowClass,
 } from './data-table.styles.js'

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

@@ -9,6 +9,9 @@ export const diffViewerTokens: TokenContract = {
     sidebarBg: { variable: '--rfr-diff-sidebar-bg', fallback: 'hsl(var(--muted))' },
     headerBg: { variable: '--rfr-diff-header-bg', fallback: 'hsl(var(--muted))' },
     border: { variable: '--rfr-diff-border', fallback: 'hsl(var(--border))' },
+    // Diff add/del colors are syntax semantics (like code highlighting), not
+    // theme status tones — deliberately NOT routed through the success/
+    // destructive tokens. The --rfr-diff-* variables are the theming seam.
     addBg: { variable: '--rfr-diff-add-bg', fallback: 'rgba(46, 160, 67, 0.15)' },
     delBg: { variable: '--rfr-diff-del-bg', fallback: 'rgba(248, 81, 73, 0.15)' },
     addFg: { variable: '--rfr-diff-add-fg', fallback: '#3fb950' },

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

@@ -0,0 +1,16 @@
+/** Token-class styles for FunnelChart; no colour literals. */
+export const funnelChartClasses = {
+  root: 'm-0 grid list-none p-0',
+  bar: 'relative flex items-center gap-3 overflow-hidden rounded-lg border border-border bg-background px-3.5 py-3',
+  fill: 'absolute inset-y-0 left-0 border-r-2 border-primary bg-accent',
+  chevron: 'relative shrink-0 text-primary',
+  text: 'relative grid min-w-0 flex-1',
+  label: 'text-[13px] font-bold text-foreground',
+  description: 'text-[11px] text-muted-foreground',
+  figure: 'relative grid text-right',
+  value: 'text-[15px] font-bold tabular-nums text-foreground',
+  share: 'text-[10.5px] text-muted-foreground',
+  transition: 'flex items-center gap-2 py-1.5 pl-[18px] text-[11px] text-muted-foreground',
+  conversion: 'font-semibold text-success',
+  dropped: 'font-semibold text-destructive',
+} as const

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,9 @@ 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'
+export * from './astro-table/index.ts'
+export * from './astro-native-select/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,20 @@
+export {
+  computeLineChart,
+  niceScale,
+  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