@refraction-ui/astro 0.18.1 → 0.20.0

package/dist/action-list/action-list.styles.ts

@@ -0,0 +1,33 @@
+import { cva } from '../shared/index.ts'
+
+/** The list: rows separated by hairlines, no bullets. */
+export const actionListClass = 'm-0 flex list-none flex-col divide-y divide-border-subtle p-0'
+
+/** A row button: full width, whole row is the hit target. */
+export const actionListItemVariants = cva({
+  base:
+    'flex w-full items-center gap-4 bg-transparent text-left text-sm text-foreground transition-colors ' +
+    'hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring ' +
+    'disabled:pointer-events-none disabled:opacity-50',
+  variants: {
+    density: {
+      default: 'px-4 py-3',
+      compact: 'px-3 py-2',
+    },
+  },
+  defaultVariants: {
+    density: 'default',
+  },
+})
+
+/** Leading text column (title, description, meta). */
+export const actionListItemBodyClass = 'flex min-w-0 flex-1 flex-col gap-0.5'
+/** Primary line. */
+export const actionListItemTitleClass = 'break-words font-semibold text-foreground'
+/** Supporting line under the title. */
+export const actionListItemDescriptionClass = 'break-words text-xs text-muted-foreground'
+/** Tertiary line (owner, tags, ids). */
+export const actionListItemMetaClass = 'break-words text-xs text-muted-foreground'
+/** Trailing column (dates, sizes, counts). */
+export const actionListItemTrailingClass =
+  'flex flex-none items-center gap-4 text-xs tabular-nums text-muted-foreground'

package/dist/action-list/action-list.ts

@@ -0,0 +1,31 @@
+/** Row padding. */
+export type ActionListDensity = 'default' | 'compact'
+
+export interface ActionListItemProps {
+  disabled?: boolean
+  density?: ActionListDensity
+}
+
+export interface ActionListItemAPI {
+  /** ARIA attributes for the row button. */
+  ariaProps: Record<string, string | number | boolean>
+  /** Data attributes for styling hooks. */
+  dataAttributes: Record<string, string>
+}
+
+/**
+ * Build the framework-agnostic props for one ActionList row. Each row is ONE
+ * action (open, select, go to) rendered as a native button, so it is reachable
+ * by Tab and activated by Enter / Space — unlike a clickable table row.
+ */
+export function createActionListItem(props: ActionListItemProps = {}): ActionListItemAPI {
+  const { disabled = false, density = 'default' } = props
+  const dataAttributes: Record<string, string> = {
+    'data-slot': 'action-list-item',
+    'data-density': density,
+  }
+  if (disabled) dataAttributes['data-disabled'] = ''
+  const ariaProps: Record<string, string | number | boolean> = {}
+  if (disabled) ariaProps['aria-disabled'] = true
+  return { ariaProps, dataAttributes }
+}

package/dist/action-list/index.ts

@@ -0,0 +1,16 @@
+export {
+  createActionListItem,
+  type ActionListDensity,
+  type ActionListItemProps,
+  type ActionListItemAPI,
+} from './action-list.js'
+
+export {
+  actionListClass,
+  actionListItemVariants,
+  actionListItemBodyClass,
+  actionListItemTitleClass,
+  actionListItemDescriptionClass,
+  actionListItemMetaClass,
+  actionListItemTrailingClass,
+} from './action-list.styles.js'

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-action-list/ActionList.astro

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

package/dist/astro-action-list/ActionListItem.astro

@@ -0,0 +1,62 @@
+---
+import {
+  createActionListItem,
+  actionListItemVariants,
+  actionListItemBodyClass,
+  actionListItemTitleClass,
+  actionListItemDescriptionClass,
+  actionListItemMetaClass,
+  actionListItemTrailingClass,
+  type ActionListDensity,
+} from '../action-list/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.ButtonHTMLAttributes {
+  /** Primary line. */
+  title: string
+  /** Optional supporting line under the title. */
+  description?: string
+  /** Optional tertiary line. */
+  meta?: string
+  /** Optional trailing column (or use the `trailing` slot). */
+  trailing?: string
+  /** Row padding. */
+  density?: ActionListDensity
+  disabled?: boolean
+}
+
+const {
+  title,
+  description,
+  meta,
+  trailing,
+  density = 'default',
+  disabled = false,
+  class: className,
+  ...rest
+} = Astro.props
+const api = createActionListItem({ disabled, density })
+const hasTrailing = trailing != null || Astro.slots.has('trailing')
+---
+
+<li>
+  <button
+    type="button"
+    disabled={disabled}
+    class={cn(actionListItemVariants({ density }), className)}
+    {...api.ariaProps}
+    {...api.dataAttributes}
+    {...rest}
+  >
+    <span class={actionListItemBodyClass}>
+      <span class={actionListItemTitleClass}>{title}</span>
+      {description && <span class={actionListItemDescriptionClass}>{description}</span>}
+      {meta && <span class={actionListItemMetaClass}>{meta}</span>}
+    </span>
+    {hasTrailing && (
+      <span class={actionListItemTrailingClass}>
+        <slot name="trailing">{trailing}</slot>
+      </span>
+    )}
+  </button>
+</li>

package/dist/astro-action-list/index.ts

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

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-callout/Callout.astro

@@ -7,7 +7,10 @@ interface Props extends astroHTML.JSX.HTMLAttributes {
 }
 
 const { variant = 'default', class: className, ...props } = Astro.props
-const api = createCallout({ role: variant === 'destructive' ? 'alert' : 'region' })
+const api = createCallout({
+  destructive: variant === 'destructive',
+  labelled: Boolean(props['aria-label'] || props['aria-labelledby']),
+})
 ---
 
 <div

package/dist/astro-card/Card.astro

@@ -3,15 +3,16 @@ import { createCard, cardVariants } from '../card/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {
+  variant?: 'default' | 'subtle' | 'tertiary'
   padding?: 'none' | 'default' | 'compact'
 }
 
-const { padding, class: className, ...props } = Astro.props
+const { variant, padding, class: className, ...props } = Astro.props
 const api = createCard(props)
 ---
 
 <div
-  class={cn(cardVariants({ padding }), className)}
+  class={cn(cardVariants({ variant, padding }), className)}
   {...api.ariaProps}
   {...api.dataAttributes}
   {...props}

package/dist/astro-card/CardTitle.astro

@@ -1,15 +1,17 @@
 ---
-import { createCardTitle, cardTitleVariants } from '../card/index.ts'
+import { createCardTitle, cardTitleVariants, type CardTitleLevel } from '../card/index.ts'
 import { cn } from '../shared/index.ts'
 
 interface Props extends astroHTML.JSX.HTMLAttributes {
   size?: 'sm' | 'default' | 'lg'
+  /** Heading element. Defaults to `h3`. */
+  as?: CardTitleLevel
 }
 
-const { size, class: className, ...props } = Astro.props
+const { size, as: Heading = 'h3', class: className, ...props } = Astro.props
 const api = createCardTitle()
 ---
 
-<h3 class={cn(cardTitleVariants({ size }), className)} {...api.dataAttributes} {...props}>
+<Heading class={cn(cardTitleVariants({ size }), className)} {...api.dataAttributes} {...props}>
   <slot />
-</h3>
+</Heading>

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-funnel-chart/FunnelChart.astro

@@ -0,0 +1,64 @@
+---
+import {
+  computeFunnel,
+  funnelChartClasses as c,
+  funnelChartDefaults,
+  DEFAULT_FUNNEL_MIN_BAR_PERCENT,
+  type FunnelChartStep,
+} from '../funnel-chart/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The funnel steps, top first. */
+  steps: FunnelChartStep[]
+  formatValue?: (value: number) => string
+  formatPercent?: (percent: number) => string
+  minBarPercent?: number
+  shareLabel?: (share: string) => string
+  conversionLabel?: (percent: string) => string
+  droppedLabel?: (count: string) => string
+}
+
+const {
+  steps,
+  formatValue = funnelChartDefaults.formatValue,
+  formatPercent = funnelChartDefaults.formatPercent,
+  minBarPercent = DEFAULT_FUNNEL_MIN_BAR_PERCENT,
+  shareLabel = funnelChartDefaults.shareLabel,
+  conversionLabel = funnelChartDefaults.conversionLabel,
+  droppedLabel = funnelChartDefaults.droppedLabel,
+  class: className,
+  ...rest
+} = Astro.props
+const rows = computeFunnel(steps, minBarPercent)
+---
+
+<ol class={cn(c.root, className)} data-slot="funnel-chart" {...rest}>
+  {
+    rows.map((row) => (
+      <li>
+        <div class={c.bar}>
+          <div class={c.fill} style={`width:${row.barPercent}%`} aria-hidden="true" />
+          <svg class={c.chevron} width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+            <path d="m9 18 6-6-6-6" />
+          </svg>
+          <div class={c.text}>
+            <b class={c.label}>{row.step.label}</b>
+            {row.step.description && <span class={c.description}>{row.step.description}</span>}
+          </div>
+          <div class={c.figure}>
+            <b class={c.value}>{formatValue(row.step.value)}</b>
+            <span class={c.share}>{shareLabel(formatPercent(row.shareOfTop))}</span>
+          </div>
+        </div>
+        {row.next && (
+          <div class={c.transition}>
+            <span class={c.conversion}>{conversionLabel(formatPercent(row.next.conversion))}</span>
+            <span aria-hidden="true">·</span>
+            <span class={c.dropped}>{droppedLabel(formatValue(row.next.dropped))}</span>
+          </div>
+        )}
+      </li>
+    ))
+  }
+</ol>

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

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

package/dist/astro-line-chart/LineChart.astro

@@ -0,0 +1,82 @@
+---
+import {
+  computeLineChart,
+  lineChartClasses as c,
+  DEFAULT_LINE_CHART_WIDTH,
+  DEFAULT_LINE_CHART_HEIGHT,
+  type LineChartSeries,
+} from '../line-chart/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** The series to plot, all on one shared y-scale. */
+  series: LineChartSeries[]
+  /** One category label per data point. */
+  labels: string[]
+  /** Accessible name of the chart image. */
+  ariaLabel: string
+  height?: number
+  width?: number
+  /** Formats a y-axis tick. */
+  formatTick?: (value: number) => string
+  /** Fill the area under each line. Defaults to on for a single series only. */
+  area?: boolean
+  showLegend?: boolean
+}
+
+const {
+  series,
+  labels,
+  ariaLabel,
+  height = DEFAULT_LINE_CHART_HEIGHT,
+  width = DEFAULT_LINE_CHART_WIDTH,
+  formatTick = (value: number) => String(Math.round(value)),
+  area,
+  showLegend = true,
+  class: className,
+  ...rest
+} = Astro.props
+const geo = computeLineChart({ series, labels, width, height })
+const fillArea = area ?? series.length === 1
+const gradientBase = `line-chart-${ariaLabel.replace(/[^a-zA-Z0-9]+/g, '-').toLowerCase()}`
+---
+
+<div class={cn(c.root, className)} data-slot="line-chart" {...rest}>
+  <svg class={c.svg} viewBox={`0 0 ${width} ${height}`} style={`height:${height}px`} role="img" aria-label={ariaLabel}>
+    {geo.ticks.map((t) => (
+      <g>
+        <line class={c.gridline} x1={geo.padding.left} y1={t.y} x2={width - geo.padding.right} y2={t.y} />
+        <text class={c.axis} x={geo.padding.left - 8} y={t.y + 3} text-anchor="end">{formatTick(t.value)}</text>
+      </g>
+    ))}
+    {geo.xLabels.map((l) => (
+      <text class={c.axis} x={l.x} y={height - 6} text-anchor="middle">{l.label}</text>
+    ))}
+    {geo.paths.map((p, si) => (
+      <g>
+        {fillArea && (
+          <Fragment>
+            <defs>
+              <linearGradient id={`${gradientBase}-${si}`} x1="0" y1="0" x2="0" y2="1">
+                <stop offset="0%" stop-color={p.color} stop-opacity="0.22" />
+                <stop offset="100%" stop-color={p.color} stop-opacity="0" />
+              </linearGradient>
+            </defs>
+            <path d={p.area} fill={`url(#${gradientBase}-${si})`} />
+          </Fragment>
+        )}
+        <path d={p.line} fill="none" stroke={p.color} stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" />
+      </g>
+    ))}
+  </svg>
+  {showLegend && (
+    <div class={c.legend}>
+      {series.map((s, si) => (
+        <span class={c.legendItem}>
+          <i class={c.legendSwatch} style={`background:${geo.paths[si].color}`} aria-hidden="true" />
+          {s.name}
+        </span>
+      ))}
+    </div>
+  )}
+</div>

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

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

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-page-header/PageHeader.astro

@@ -0,0 +1,46 @@
+---
+import {
+  createPageHeader,
+  pageHeaderClass,
+  pageHeaderTextClass,
+  pageHeaderKickerClass,
+  pageHeaderTitleClass,
+  pageHeaderDescriptionClass,
+  pageHeaderActionsClass,
+  type PageHeaderTitleLevel,
+} from '../page-header/index.ts'
+import { cn } from '../shared/index.ts'
+
+interface Props extends astroHTML.JSX.HTMLAttributes {
+  /** Optional eyebrow rendered above the title. */
+  kicker?: string
+  /** The page title. */
+  title: string
+  /** Optional supporting copy under the title (or use the `description` slot). */
+  description?: string
+  /** Heading element for the title. Defaults to `h1`. */
+  as?: PageHeaderTitleLevel
+}
+
+const { kicker, title, description, as: Title = 'h1', class: className, ...rest } = Astro.props
+const hasActions = Astro.slots.has('actions')
+const hasDescription = description != null || Astro.slots.has('description')
+const { dataAttributes } = createPageHeader({ hasActions })
+---
+
+<header class={cn(pageHeaderClass, className)} {...dataAttributes} {...rest}>
+  <div class={pageHeaderTextClass}>
+    {kicker && <p class={pageHeaderKickerClass}>{kicker}</p>}
+    <Title class={pageHeaderTitleClass}>{title}</Title>
+    {hasDescription && (
+      <div class={pageHeaderDescriptionClass}>
+        <slot name="description">{description}</slot>
+      </div>
+    )}
+  </div>
+  {hasActions && (
+    <div class={pageHeaderActionsClass}>
+      <slot name="actions" />
+    </div>
+  )}
+</header>

package/dist/astro-page-header/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>