@refraction-ui/astro 0.19.0 → 0.20.0

package/dist/analytics-sink-app-insights/app-insights-sink.ts

@@ -131,7 +131,7 @@ function createClientSdkSink(opts: ClientSdkOptions): AnalyticsSink {
         return instance
       }
       // Lazy, dynamic, optional — never a static/hard dependency.
-      const mod = (await import(appInsightsWebSpecifier)) as {
+      const mod = (await import(/* webpackIgnore: true */ /* @vite-ignore */ appInsightsWebSpecifier)) as {
         ApplicationInsights: new (cfg: {
           config: {
             connectionString?: string

package/dist/analytics-sink-posthog/client-sdk-sink.ts

@@ -68,7 +68,7 @@ const posthogJsSpecifier = 'posthog-js'
 
 async function defaultLoad(): Promise<PostHogJs> {
   // Dynamic import keeps `posthog-js` out of the graph until first delivery.
-  const mod = (await import(posthogJsSpecifier)) as unknown as
+  const mod = (await import(/* webpackIgnore: true */ /* @vite-ignore */ posthogJsSpecifier)) as unknown as
     | { default: PostHogJs }
     | PostHogJs
   return 'default' in mod ? mod.default : mod

package/dist/analytics-sink-posthog/replay.ts

@@ -78,7 +78,7 @@ export interface SessionReplayHandle {
 const posthogJsSpecifier = 'posthog-js'
 
 async function defaultLoad(): Promise<PostHogReplay> {
-  const mod = (await import(posthogJsSpecifier)) as unknown as
+  const mod = (await import(/* webpackIgnore: true */ /* @vite-ignore */ posthogJsSpecifier)) as unknown as
     | { default: PostHogReplay }
     | PostHogReplay
   return 'default' in mod ? mod.default : mod

package/dist/astro-avatar/Avatar.astro

@@ -1,17 +1,18 @@
 ---
-import { createAvatar, avatarVariants, type AvatarSize } from '../avatar/index.ts'
+import { createAvatar, avatarVariants, type AvatarSize, type AvatarShape } from '../avatar/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {
   size?: AvatarSize
+  shape?: AvatarShape
 }
 
-const { size = 'md', class: className, ...props } = Astro.props
-const api = createAvatar({ size })
+const { size = 'md', shape = 'circle', class: className, ...props } = Astro.props
+const api = createAvatar({ size, alt: props['aria-label'] as string | undefined })
 ---
 
 <span
-  class={cn(avatarVariants({ size }), className)}
+  class={cn(avatarVariants({ size, shape }), className)}
   data-rfr-avatar
   data-rfr-avatar-size={size}
   {...api.ariaProps}

package/dist/astro-data-table/DataTable.astro

@@ -5,6 +5,10 @@ import {
   headerVariants,
   cellVariants,
   rowVariants,
+  getColumnValue,
+  resolveColumnAlign,
+  dataTableAlignClass,
+  dataTableNumericClass,
   type ColumnDef,
   type SortDirection,
 } from '../data-table/index.ts'
@@ -41,7 +45,7 @@ const hasFilterable = columns.some((c: ColumnDef) => c.filterable)
           const hProps = api.getHeaderProps(col)
           return (
             <th
-              class={headerVariants({ sortable: col.sortable ? 'true' : 'false' })}
+              class={cn(headerVariants({ sortable: col.sortable ? 'true' : 'false' }), dataTableAlignClass[resolveColumnAlign(col)], col.headerClassName)}
               role={hProps.role as string}
               aria-sort={hProps['aria-sort'] as any}
               data-rfr-data-table-header={col.id}
@@ -94,10 +98,10 @@ const hasFilterable = columns.some((c: ColumnDef) => c.filterable)
             {columns.map((col: ColumnDef) => (
               <td
                 role="cell"
-                class={cellVariants()}
+                class={cn(cellVariants(), dataTableAlignClass[resolveColumnAlign(col)], col.numeric && dataTableNumericClass, col.className)}
                 data-column={col.id}
               >
-                {String(col.accessor(row) ?? '')}
+                {String(getColumnValue(col, row) ?? '')}
               </td>
             ))}
           </tr>

package/dist/astro-native-select/NativeSelect.astro

@@ -0,0 +1,26 @@
+---
+import {
+  nativeSelectChevronPath,
+  nativeSelectIconClass,
+  nativeSelectVariants,
+  nativeSelectWrapperClass,
+  type NativeSelectSize,
+} from '../native-select/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends Omit<astroHTML.JSX.SelectHTMLAttributes, 'size'> {
+  size?: NativeSelectSize
+  containerClass?: string
+}
+
+const { size = 'default', class: className, containerClass, ...rest } = Astro.props
+---
+
+<span class={cn(nativeSelectWrapperClass, containerClass)} data-slot="native-select">
+  <select class={cn(nativeSelectVariants({ size }), className)} {...rest}>
+    <slot />
+  </select>
+  <svg class={nativeSelectIconClass} xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+    <path d={nativeSelectChevronPath} />
+  </svg>
+</span>

package/dist/astro-native-select/index.ts

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

package/dist/astro-stat-grid/StatGrid.astro

@@ -2,44 +2,48 @@
 import {
   createStatGrid,
   statColumns,
+  statColumnsKey,
   statGridVariants,
-  statItemClass,
-  statValueClass,
-  statLabelClass,
+  statItemVariants,
+  statValueVariants,
+  statLabelVariants,
+  statDescriptionClass,
   type StatItem,
+  type StatGridVariant,
+  type StatGridLayout,
+  type StatGridColumns,
 } from '../stat-grid/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {
-  /** The stat items to display in the grid (value and label as strings). */
+  /** The stat items to display in the grid. */
   items: StatItem[]
-  /**
-   * Number of columns. Defaults to statColumns(items.length):
-   * 1 item → 1, 2 items → 2, 3+ items → 3.
-   */
-  columns?: number
+  /** Maximum columns (reflows on narrow screens) or `auto`. Defaults to statColumns(items.length). */
+  columns?: StatGridColumns
+  variant?: StatGridVariant
+  layout?: StatGridLayout
 }
 
-const { items, columns, class: className, ...rest } = Astro.props
-
-const cols = columns ?? statColumns(items.length)
-const colsKey = String(cols) as '1' | '2' | '3'
+const { items, columns, variant = 'plain', layout = 'value-first', class: className, ...rest } = Astro.props
+const cols = statColumnsKey(columns ?? statColumns(items.length))
 const { ariaProps, dataAttributes } = createStatGrid()
-const gridStyle = `grid-template-columns:repeat(${cols}, 1fr)`
 ---
 
 <div
-  class={cn(statGridVariants({ columns: colsKey }), className)}
-  style={gridStyle}
+  class={cn(statGridVariants({ columns: cols, variant }), className)}
+  data-variant={variant}
+  data-layout={layout}
   {...ariaProps}
   {...dataAttributes}
   {...rest}
 >
   {
     items.map((item) => (
-      <div role="listitem" class={statItemClass}>
-        <span class={statValueClass}>{item.value}</span>
-        <span class={statLabelClass}>{item.label}</span>
+      <div role="listitem" class={statItemVariants({ variant })} data-tone={item.tone ?? 'default'}>
+        {layout === 'label-first' && <span class={statLabelVariants({ layout })}>{item.label}</span>}
+        <span class={statValueVariants({ variant, tone: item.tone ?? 'default' })}>{item.value}</span>
+        {layout === 'value-first' && <span class={statLabelVariants({ layout })}>{item.label}</span>}
+        {item.description && <span class={statDescriptionClass}>{item.description}</span>}
       </div>
     ))
   }

package/dist/astro-table/Table.astro

@@ -0,0 +1,21 @@
+---
+import { createTable, tableContainerClass, tableRootVariants, type TableDensity, type TableHeadTone } from '../table/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.TableHTMLAttributes {
+  /** Recorded as data-density; pass the same density to TableHead/TableCell. */
+  density?: TableDensity
+  headTone?: TableHeadTone
+  fixed?: boolean
+  containerClass?: string
+}
+
+const { density = 'default', headTone = 'default', fixed = false, containerClass, class: className, ...rest } = Astro.props
+const { dataAttributes } = createTable({ density, headTone })
+---
+
+<div class={cn(tableContainerClass, containerClass)} data-slot="table-container">
+  <table class={cn(tableRootVariants({ fixed: fixed ? 'true' : 'false' }), className)} {...dataAttributes} {...rest}>
+    <slot />
+  </table>
+</div>

package/dist/astro-table/TableCaption.astro

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

package/dist/astro-table/TableCell.astro

@@ -0,0 +1,13 @@
+---
+import { tableCellVariants, type TableAlign, type TableDensity } from '../table/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends Omit<astroHTML.JSX.TdHTMLAttributes, 'align'> {
+  align?: TableAlign
+  density?: TableDensity
+  numeric?: boolean
+}
+const { align, density, numeric = false, class: className, ...rest } = Astro.props
+---
+
+<td class={cn(tableCellVariants({ align, density, numeric: numeric ? 'true' : 'false' }), className)} data-slot="table-cell" {...rest}><slot /></td>

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/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/index.ts

@@ -241,3 +241,5 @@ 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/line-chart/index.ts

@@ -1,5 +1,6 @@
 export {
   computeLineChart,
+  niceScale,
   tooltipLeftPercent,
   nextLineChartIndex,
   lineChartColor,

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

@@ -27,11 +27,14 @@ export interface LineChartOptions {
   /** viewBox height. */
   height: number
   padding?: Partial<LineChartPadding>
-  /** Number of gridline intervals on the y-axis. */
+  /** Target number of gridline intervals on the y-axis (the nice scale may use fewer). */
   tickCount?: number
   /** Headroom multiplier above the largest value. */
   headroom?: number
-  /** Show every n-th x label (the last label is always shown). */
+  /**
+   * Show every n-th x label (the last label is always shown). Defaults to
+   * thinning so labels are at least ~48 viewBox units apart.
+   */
   labelEvery?: number
 }
 
@@ -91,7 +94,8 @@ 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
+/** Minimum horizontal room per x label when thinning automatically. */
+const MIN_LABEL_SPACING = 48
 /** Number of `--chart-N` tokens the theme defines. */
 const CHART_TOKEN_COUNT = 5
 
@@ -100,6 +104,28 @@ export function lineChartColor(index: number): string {
   return `hsl(var(--chart-${(index % CHART_TOKEN_COUNT) + 1}))`
 }
 
+const NICE_STEPS = [1, 2, 5, 10]
+
+/**
+ * A "nice" y-scale: a 1-2-5 × 10^k step so there are at most `tickCount`
+ * intervals up to `rawMax`, and the max rounded up to a whole step. Tick
+ * values are therefore round numbers by construction (0, 2000, 4000, …) —
+ * never 5999.9999 — so any tick formatter prints clean labels.
+ */
+export function niceScale(rawMax: number, tickCount: number): { max: number; step: number; ticks: number[] } {
+  const intervals = Math.max(1, Math.floor(tickCount))
+  if (!(rawMax > 0)) return { max: 1, step: 1 / intervals, ticks: Array.from({ length: intervals + 1 }, (_, i) => i / intervals) }
+  const target = rawMax / intervals
+  const magnitude = 10 ** Math.floor(Math.log10(target))
+  const step = NICE_STEPS.map((m) => m * magnitude).find((candidate) => candidate >= target) ?? 10 * magnitude
+  const count = Math.ceil(rawMax / step - 1e-9)
+  // Strip binary floating-point noise (e.g. 0.1 * 3) to the step's precision.
+  const decimals = Math.max(0, -Math.floor(Math.log10(step)))
+  const clean = (value: number) => Number(value.toFixed(decimals))
+  const ticks = Array.from({ length: count + 1 }, (_, i) => clean(i * step))
+  return { max: ticks[ticks.length - 1], step: clean(step), ticks }
+}
+
 function pathFrom(points: Array<[number, number]>): string {
   return points.map(([px, py], i) => (i ? 'L' : 'M') + px.toFixed(1) + ' ' + py.toFixed(1)).join(' ')
 }
@@ -117,25 +143,26 @@ export function computeLineChart(options: LineChartOptions): LineChartGeometry {
     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 scale = niceScale(peak > 0 ? peak * headroom : 0, tickCount)
+  const max = scale.max
   const plotW = width - padding.left - padding.right
   const plotTop = padding.top
   const plotBottom = height - padding.bottom
   const plotH = plotBottom - plotTop
 
+  const labelEvery =
+    options.labelEvery ??
+    Math.max(1, Math.ceil(n / Math.max(1, Math.floor(plotW / MIN_LABEL_SPACING))))
+
   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 ticks: LineChartTick[] = scale.ticks.map((value) => ({ value, y: y(value) }))
 
   const xLabels: LineChartXLabel[] = labels
     .map((label, index) => ({ index, label, x: x(index) }))

package/dist/logger/faro-engine.ts

@@ -74,11 +74,11 @@ async function loadFaroTransport(
     // Indirected so bundlers keep these as runtime-optional dynamic imports.
     const sdkName = '@grafana/faro-web-sdk'
     const tracingName = '@grafana/faro-web-tracing'
-    const sdk = (await import(/* @vite-ignore */ sdkName)) as {
+    const sdk = (await import(/* webpackIgnore: true */ /* @vite-ignore */ sdkName)) as {
       initializeFaro: (cfg: unknown) => unknown
       getWebInstrumentations: () => unknown[]
     }
-    const tracing = (await import(/* @vite-ignore */ tracingName)) as {
+    const tracing = (await import(/* webpackIgnore: true */ /* @vite-ignore */ tracingName)) as {
       TracingInstrumentation: new () => unknown
     }
 

package/dist/native-select/index.ts

@@ -0,0 +1,6 @@
+export { nativeSelectChevronPath, type NativeSelectSize } from './native-select.js'
+export {
+  nativeSelectWrapperClass,
+  nativeSelectVariants,
+  nativeSelectIconClass,
+} from './native-select.styles.js'

package/dist/native-select/native-select.styles.ts

@@ -0,0 +1,30 @@
+import { cva } from '../shared/index.ts'
+
+/** Wrapper that positions the chevron over the select. */
+export const nativeSelectWrapperClass = 'relative inline-flex min-w-0 items-center'
+
+/**
+ * The `<select>`: the platform's own listbox (mobile pickers, type-to-select,
+ * form submission, `change` events) with the input look. Size-owned utilities
+ * live only in the size variants so `size` always wins.
+ */
+export const nativeSelectVariants = cva({
+  base:
+    'w-full cursor-pointer appearance-none rounded-md border border-input bg-background text-foreground shadow-sm ' +
+    'ring-offset-background focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring ' +
+    'disabled:cursor-not-allowed disabled:opacity-50',
+  variants: {
+    size: {
+      sm: 'h-8 pl-2.5 pr-8 text-xs',
+      default: 'h-9 pl-3 pr-9 text-sm',
+      lg: 'h-10 pl-3 pr-10 text-base',
+    },
+  },
+  defaultVariants: {
+    size: 'default',
+  },
+})
+
+/** The chevron: decorative, and never eats the click meant for the select. */
+export const nativeSelectIconClass =
+  'pointer-events-none absolute right-2.5 h-4 w-4 shrink-0 text-muted-foreground'

package/dist/native-select/native-select.ts

@@ -0,0 +1,5 @@
+/** Visual size of a NativeSelect. */
+export type NativeSelectSize = 'sm' | 'default' | 'lg'
+
+/** The chevron's path (a down chevron), so adapters ship no icon dependency. */
+export const nativeSelectChevronPath = 'm6 9 6 6 6-6'

package/dist/stat-grid/index.ts

@@ -1,12 +1,21 @@
 export {
   createStatGrid,
   statColumns,
+  statColumnsKey,
   type StatItem,
+  type StatTone,
+  type StatGridVariant,
+  type StatGridLayout,
+  type StatGridColumns,
   type StatGridAPI,
 } from './stat-grid.js'
 
 export {
   statGridVariants,
+  statItemVariants,
+  statValueVariants,
+  statLabelVariants,
+  statDescriptionClass,
   statItemClass,
   statValueClass,
   statLabelClass,

package/dist/stat-grid/stat-grid.styles.ts

@@ -1,25 +1,92 @@
 import { cva } from '../shared/index.ts'
 
-/** Grid container that lays out stat items. */
+/**
+ * Grid container. Column counts are responsive (one column on a phone, more
+ * as the width allows) — never a fixed inline template that cannot reflow.
+ * `auto` fits as many ~12rem items per row as the width allows.
+ */
 export const statGridVariants = cva({
-  base: 'grid gap-8',
+  base: 'grid',
   variants: {
     columns: {
       '1': 'grid-cols-1',
-      '2': 'grid-cols-2',
-      '3': 'grid-cols-3',
+      '2': 'grid-cols-1 sm:grid-cols-2',
+      '3': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-3',
+      '4': 'grid-cols-1 sm:grid-cols-2 lg:grid-cols-4',
+      auto: 'grid-cols-[repeat(auto-fill,minmax(12rem,1fr))]',
+    },
+    variant: {
+      plain: 'gap-8',
+      card: 'gap-3',
     },
   },
   defaultVariants: {
     columns: '3',
+    variant: 'plain',
   },
 })
 
 /** Individual stat item container (role="listitem"). */
+export const statItemVariants = cva({
+  base: 'flex min-w-0 flex-col',
+  variants: {
+    variant: {
+      plain: '',
+      card: 'gap-1 rounded-lg border border-border bg-card p-4 text-card-foreground',
+    },
+  },
+  defaultVariants: {
+    variant: 'plain',
+  },
+})
+
+/** @deprecated Use `statItemVariants()`; kept for existing imports. */
 export const statItemClass = 'flex flex-col'
 
-/** The large bold value of the stat. */
+/** The value of a stat, by variant and tone. */
+export const statValueVariants = cva({
+  base: 'font-bold tabular-nums',
+  variants: {
+    variant: {
+      plain: 'text-xl sm:text-2xl',
+      card: 'text-2xl leading-tight',
+    },
+    tone: {
+      default: '',
+      positive: 'text-success',
+      negative: 'text-destructive',
+      caution: 'text-warning',
+    },
+  },
+  compoundVariants: [
+    { variant: 'plain', tone: 'default', class: 'text-primary' },
+    { variant: 'card', tone: 'default', class: 'text-foreground' },
+  ],
+  defaultVariants: {
+    variant: 'plain',
+    tone: 'default',
+  },
+})
+
+/** @deprecated Use `statValueVariants()`; kept for existing imports. */
 export const statValueClass = 'text-xl sm:text-2xl font-bold text-primary'
 
-/** The descriptive label below the value. */
+/** The descriptive label. Above the value it reads as a small caption. */
+export const statLabelVariants = cva({
+  base: 'text-muted-foreground',
+  variants: {
+    layout: {
+      'value-first': 'mt-1 text-sm leading-snug',
+      'label-first': 'text-xs uppercase tracking-wide',
+    },
+  },
+  defaultVariants: {
+    layout: 'value-first',
+  },
+})
+
+/** @deprecated Use `statLabelVariants()`; kept for existing imports. */
 export const statLabelClass = 'mt-1 text-sm text-muted-foreground leading-snug'
+
+/** Optional line under a stat explaining how it was computed. */
+export const statDescriptionClass = 'text-xs leading-snug text-muted-foreground'

package/dist/stat-grid/stat-grid.ts

@@ -1,9 +1,24 @@
+/** Semantic colour of a stat's value. */
+export type StatTone = 'default' | 'positive' | 'negative' | 'caution'
+/** `plain` = marketing callouts; `card` = bordered dashboard KPI cards. */
+export type StatGridVariant = 'plain' | 'card'
+/** Whether the label sits under the value (callout) or above it (KPI). */
+export type StatGridLayout = 'value-first' | 'label-first'
+/** Column count: a fixed maximum that reflows down on narrow screens, or `auto`. */
+export type StatGridColumns = 1 | 2 | 3 | 4 | 'auto'
+
 /** A single stat callout displayed in the grid. */
 export type StatItem = {
   /** The primary value displayed prominently (e.g. "10k+", "$4.2M"). */
   value: string
-  /** The descriptive label shown below the value. */
+  /** The descriptive label. */
   label: string
+  /** Stable key; defaults to the index. */
+  id?: string
+  /** Optional line explaining the figure (how it was computed, a delta). */
+  description?: string
+  /** Colour of the value. Defaults to `default`. */
+  tone?: StatTone
 }
 
 export interface StatGridAPI {
@@ -20,11 +35,16 @@ export interface StatGridAPI {
  * - 2 items → 2 columns
  * - 3 or more items → capped at `max` (default 3)
  */
-export function statColumns(count: number, max = 3): number {
-  if (count <= 0) return 1
-  if (count === 1) return 1
+export function statColumns(count: number, max = 3): 1 | 2 | 3 | 4 {
+  if (count <= 1) return 1
   if (count === 2) return 2
-  return Math.min(count, max)
+  return Math.min(count, max, 4) as 3 | 4
+}
+
+/** The cva key for a column setting (clamped to the supported 1–4). */
+export function statColumnsKey(columns: StatGridColumns): '1' | '2' | '3' | '4' | 'auto' {
+  if (columns === 'auto') return 'auto'
+  return String(Math.min(Math.max(Math.round(columns), 1), 4)) as '1' | '2' | '3' | '4'
 }
 
 /**

package/dist/table/index.ts

@@ -0,0 +1,16 @@
+export {
+  createTable,
+  type TableDensity,
+  type TableAlign,
+  type TableHeadTone,
+  type TableAPI,
+} from './table.js'
+
+export {
+  tableContainerClass,
+  tableRootVariants,
+  tableCaptionClass,
+  tableRowClass,
+  tableHeadVariants,
+  tableCellVariants,
+} from './table.styles.js'

package/dist/table/table.styles.ts

@@ -0,0 +1,72 @@
+import { cva } from '../shared/index.ts'
+
+/** Scroll container: a wide table scrolls inside it instead of the page. */
+export const tableContainerClass = 'relative w-full overflow-x-auto'
+
+/** The `<table>`. `fixed` pins column widths to the header row. */
+export const tableRootVariants = cva({
+  base: 'w-full caption-bottom border-collapse text-sm',
+  variants: {
+    fixed: {
+      true: 'table-fixed',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    fixed: 'false',
+  },
+})
+
+/** Caption under the table. */
+export const tableCaptionClass = 'mt-2 text-xs text-muted-foreground'
+
+/** Body rows: a hairline between rows, none after the last. */
+export const tableRowClass = 'border-b border-border-subtle last:border-b-0'
+
+const align = {
+  start: 'text-start',
+  center: 'text-center',
+  end: 'text-end',
+}
+
+/** Header cell: subtle surface, rule under it. */
+export const tableHeadVariants = cva({
+  base: 'border-b border-border-subtle bg-surface-subtle align-middle',
+  variants: {
+    align,
+    tone: {
+      default: 'text-xs font-medium text-muted-foreground',
+      eyebrow: 'text-[11px] font-semibold uppercase tracking-wider text-muted-foreground',
+    },
+    density: {
+      compact: 'h-8 px-2',
+      default: 'h-9 px-3',
+    },
+  },
+  defaultVariants: {
+    align: 'start',
+    tone: 'default',
+    density: 'default',
+  },
+})
+
+/** Data cell. */
+export const tableCellVariants = cva({
+  base: 'align-middle',
+  variants: {
+    align,
+    density: {
+      compact: 'px-2 py-1.5',
+      default: 'px-3 py-2.5',
+    },
+    numeric: {
+      true: 'tabular-nums whitespace-nowrap',
+      false: '',
+    },
+  },
+  defaultVariants: {
+    align: 'start',
+    density: 'default',
+    numeric: 'false',
+  },
+})

package/dist/table/table.ts

@@ -0,0 +1,24 @@
+/** Cell padding for every cell of a table. */
+export type TableDensity = 'compact' | 'default'
+/** Horizontal alignment of a header or data cell (logical, RTL-safe). */
+export type TableAlign = 'start' | 'center' | 'end'
+/** Look of header cells: `eyebrow` is small uppercase tracked text. */
+export type TableHeadTone = 'default' | 'eyebrow'
+
+export interface TableAPI {
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/** Framework-agnostic data attributes for the table root. */
+export function createTable(
+  props: { density?: TableDensity; headTone?: TableHeadTone } = {},
+): TableAPI {
+  return {
+    dataAttributes: {
+      'data-slot': 'table',
+      'data-density': props.density ?? 'default',
+      'data-head-tone': props.headTone ?? 'default',
+    },
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@refraction-ui/astro",
-  "version": "0.19.0",
+  "version": "0.20.0",
   "description": "All Refraction UI Astro components in one package",
   "type": "module",
   "exports": {
@@ -96,6 +96,7 @@
     "@refraction-ui/astro-mastery-bar": "workspace:*",
     "@refraction-ui/astro-mini-map": "workspace:*",
     "@refraction-ui/astro-mobile-nav": "workspace:*",
+    "@refraction-ui/astro-native-select": "workspace:*",
     "@refraction-ui/astro-navbar": "workspace:*",
     "@refraction-ui/astro-numbered-steps": "workspace:*",
     "@refraction-ui/astro-otp-input": "workspace:*",
@@ -132,6 +133,7 @@
     "@refraction-ui/astro-steps": "workspace:*",
     "@refraction-ui/astro-sticky-note": "workspace:*",
     "@refraction-ui/astro-switch": "workspace:*",
+    "@refraction-ui/astro-table": "workspace:*",
     "@refraction-ui/astro-table-of-contents": "workspace:*",
     "@refraction-ui/astro-tabs": "workspace:*",
     "@refraction-ui/astro-terminal": "workspace:*",