@a4ui/core 0.11.1 → 0.13.0

package/dist/lib/flyToCart.d.ts

@@ -0,0 +1,25 @@
+export interface FlyToCartOptions {
+    /** Image URL to fly; if omitted, the source element is cloned. */
+    image?: string;
+    /** Flight duration in seconds. @default 0.6 */
+    duration?: number;
+    /** Called when the flight finishes (e.g. to increment the cart count). */
+    onArrive?: () => void;
+}
+/**
+ * Animate a small ghost from `source` to `target` (e.g. product → cart icon),
+ * then a bump on the target. No-op under reduced motion (still calls onArrive).
+ *
+ * @example
+ * ```ts
+ * function onAddToCart(e: MouseEvent) {
+ *   const button = e.currentTarget as HTMLElement
+ *   const cartIcon = document.getElementById('cart-icon')!
+ *   flyToCart(button, cartIcon, {
+ *     image: product.thumbnailUrl,
+ *     onArrive: () => setCartCount((n) => n + 1),
+ *   })
+ * }
+ * ```
+ */
+export declare function flyToCart(source: Element, target: Element, opts?: FlyToCartOptions): void;

package/dist/ui/Curtain.d.ts

@@ -0,0 +1,44 @@
+import { JSX } from 'solid-js';
+export type CurtainVariant = 'fade' | 'doors' | 'blinds' | 'iris' | 'shutter' | 'clip' | 'pixels';
+export interface CurtainProps {
+    /** true = cover the screen; false = uncover (reveal content). */
+    show: boolean;
+    /** Which wipe style. @default 'fade' */
+    variant?: CurtainVariant;
+    /** Overlay color (CSS color / var). @default 'hsl(var(--background))' */
+    color?: string;
+    /** Seconds for one direction. @default 0.6 */
+    duration?: number;
+    /** Called once the screen is fully covered (show went true→covered). */
+    onCovered?: () => void;
+    /** Called once fully uncovered (show went false→revealed). */
+    onRevealed?: () => void;
+    class?: string;
+}
+/**
+ * A controlled full-screen curtain for page/route transitions. Set `show` to
+ * `true` to cover the viewport, `false` to uncover it, and swap your route
+ * content while covered. `variant` picks the wipe style — fade, sliding
+ * doors, blinds, shutter (vertical blinds), iris/circle wipe, a left-to-right
+ * clip wipe, or a pixel-grid cascade —
+ * `onCovered` / `onRevealed` fire once each transition finishes so you can
+ * swap content at exactly the right moment. Skips the animation (and still
+ * fires the callback on the next microtask) under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * const [covered, setCovered] = createSignal(false)
+ * const goTo = (path: string) => setCovered(true)
+ * return (
+ *   <>
+ *     <Curtain
+ *       show={covered()}
+ *       variant="iris"
+ *       onCovered={() => { loadRoute(); setCovered(false) }}
+ *     />
+ *     <Router />
+ *   </>
+ * )
+ * ```
+ */
+export declare function Curtain(props: CurtainProps): JSX.Element;

package/dist/ui/Expandable.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+export interface ExpandableProps {
+    /** Collapsed content — the card users click to expand. */
+    trigger: JSX.Element;
+    /** Expanded panel content. */
+    children: JSX.Element;
+    /** `dialog` = centered panel capped at `maxWidth`; `full` = near-fullscreen. @default 'dialog' */
+    size?: 'dialog' | 'full';
+    /** Max width (px) of the expanded panel when `size='dialog'`. @default 640 */
+    maxWidth?: number;
+    /** Notified when the panel opens/closes. */
+    onOpenChange?: (open: boolean) => void;
+    /** Class for the inline trigger wrapper. */
+    class?: string;
+    /** Class for the expanded panel surface. */
+    panelClass?: string;
+}
+/**
+ * Expands a card into an overlay panel with a shared-element (FLIP) transition —
+ * the card appears to grow into the dialog and shrink back on close. Animates
+ * position + size (never scale) so content stays crisp. Falls back to a plain
+ * show/hide under reduced motion. Close with the ✕, a backdrop click, or Escape.
+ *
+ * @example
+ * ```tsx
+ * <Expandable
+ *   trigger={<Card class="cursor-pointer">Tap to expand</Card>}
+ *   size="dialog"
+ * >
+ *   <div class="p-6">Full details here…</div>
+ * </Expandable>
+ * ```
+ */
+export declare function Expandable(props: ExpandableProps): JSX.Element;

package/dist/ui/FillText.d.ts

@@ -0,0 +1,18 @@
+import { JSX } from 'solid-js';
+export interface FillTextProps {
+    text: string;
+    /** Seconds per sweep. @default 1.6 */
+    duration?: number;
+    class?: string;
+}
+/**
+ * Renders `text` with a bright gradient band that sweeps across the glyphs
+ * repeatedly, useful as a lightweight loading indicator. Respects
+ * `prefers-reduced-motion` by rendering plain muted text instead of animating.
+ *
+ * @example
+ * ```tsx
+ * <FillText text="Loading results…" />
+ * ```
+ */
+export declare function FillText(props: FillTextProps): JSX.Element;

package/dist/ui/HoldToConfirm.d.ts

@@ -0,0 +1,24 @@
+import { JSX } from 'solid-js';
+export interface HoldToConfirmProps {
+    onConfirm: () => void;
+    /** Button label. @default 'Hold to confirm' */
+    label?: string;
+    /** How long to hold, in ms. @default 1200 */
+    holdMs?: number;
+    disabled?: boolean;
+    class?: string;
+}
+/**
+ * Press-and-hold button for destructive/important actions: `onConfirm` only
+ * fires once the pointer (or Space/Enter) has been held down for `holdMs`.
+ * A fill layer sweeps left-to-right as visual progress; releasing early stops
+ * and resets it. Under reduced motion the hold is still required (gated by a
+ * plain timer instead of the tracked animation), but the fill jumps instead
+ * of sweeping and the success flourish is skipped.
+ *
+ * @example
+ * ```tsx
+ * <HoldToConfirm label="Hold to delete" holdMs={1500} onConfirm={() => deleteItem(id)} />
+ * ```
+ */
+export declare function HoldToConfirm(props: HoldToConfirmProps): JSX.Element;

package/dist/ui/LoadingDots.d.ts

@@ -0,0 +1,20 @@
+import { JSX } from 'solid-js';
+export interface LoadingDotsProps {
+    /** Dot diameter in px. @default 8 */
+    size?: number;
+    /** Optional accessible label. @default 'Loading' */
+    label?: string;
+    class?: string;
+}
+/**
+ * Three dots bouncing in a staggered wave — an inline, indeterminate loading
+ * indicator. Dots use `bg-current`, so color/size follow the ancestor's text
+ * color; diameter is set via `size`. Falls back to a gentle opacity pulse
+ * under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <LoadingDots label="Loading results" class="text-primary" />
+ * ```
+ */
+export declare function LoadingDots(props: LoadingDotsProps): JSX.Element;

package/dist/ui/MultiStateBadge.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+/** The lifecycle state a {@link MultiStateBadge} can be in. */
+export type BadgeState = 'idle' | 'loading' | 'success' | 'error';
+export interface MultiStateBadgeProps {
+    /** Current lifecycle state; drives color, icon, and label. */
+    state: BadgeState;
+    /** Override the per-state text. Defaults: idle→'Ready', loading→'Working…', success→'Done', error→'Failed'. */
+    labels?: Partial<Record<BadgeState, string>>;
+    class?: string;
+}
+/**
+ * Status badge that animates between `idle` → `loading` → `success` → `error`,
+ * morphing its color and swapping its icon/label on each transition. Colors
+ * tween via a CSS `transition-colors` class; the pill also gets a spring
+ * "pop" and the icon/label cross-fade via Motion's `animate`, both skipped
+ * when {@link motionReduced} is true.
+ *
+ * @example
+ * ```tsx
+ * <MultiStateBadge state={saveState()} labels={{ error: 'Save failed' }} />
+ * ```
+ */
+export declare function MultiStateBadge(props: MultiStateBadgeProps): JSX.Element;

package/dist/ui/NotificationStack.d.ts

@@ -0,0 +1,32 @@
+import { JSX } from 'solid-js';
+export interface StackNotification {
+    id: string | number;
+    title: string;
+    description?: string;
+    icon?: JSX.Element;
+}
+export interface NotificationStackProps {
+    /** Newest first. The parent owns this array. */
+    items: StackNotification[];
+    /** How many cards are visible before the rest collapse behind. @default 3 */
+    max?: number;
+    /** Fired when a card is dismissed; the parent should drop it from `items`. */
+    onDismiss?: (id: string | number) => void;
+    class?: string;
+}
+/**
+ * Stacked notifications. Cards behind the front one are offset down and scaled,
+ * so they peek from the bottom edge; removing the front card promotes the rest
+ * with a smooth transition (skipped under reduced motion). New cards fade/slide
+ * in via `animateIn`.
+ *
+ * @example
+ * ```tsx
+ * const [items, setItems] = createStore<StackNotification[]>([])
+ * <NotificationStack
+ *   items={items}
+ *   onDismiss={(id) => setItems((xs) => xs.filter((x) => x.id !== id))}
+ * />
+ * ```
+ */
+export declare function NotificationStack(props: NotificationStackProps): JSX.Element;

package/dist/ui/NowPlaying.d.ts

@@ -0,0 +1,21 @@
+import { JSX } from 'solid-js';
+export interface NowPlayingProps {
+    title: string;
+    artist?: string;
+    /** Cover art URL. */
+    cover?: string;
+    /** Whether the equalizer bars are animating. @default true */
+    playing?: boolean;
+    class?: string;
+}
+/**
+ * Compact "now playing" music widget with an animated equalizer. Bars bounce
+ * via CSS keyframes while `playing` is true; they freeze to a low static
+ * height when paused or under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <NowPlaying title="Random Access Memories" artist="Daft Punk" cover="/covers/ram.jpg" playing />
+ * ```
+ */
+export declare function NowPlaying(props: NowPlayingProps): JSX.Element;

package/dist/ui/Parallax.d.ts

@@ -0,0 +1,21 @@
+import { JSX } from 'solid-js';
+export interface ParallaxProps {
+    children: JSX.Element;
+    /** Parallax strength; positive moves slower/opposite. Pixels of travel across the scroll range. @default 80 */
+    amount?: number;
+    class?: string;
+}
+/**
+ * Wraps `children` in an element that drifts vertically as the page scrolls,
+ * creating a depth effect. Tracks scroll progress of the element itself
+ * against the viewport via Motion's `scroll`; respects `prefers-reduced-motion`
+ * (renders static).
+ *
+ * @example
+ * ```tsx
+ * <Parallax amount={120}>
+ *   <img src="/hero.png" alt="" />
+ * </Parallax>
+ * ```
+ */
+export declare function Parallax(props: ParallaxProps): JSX.Element;

package/dist/ui/ScrambleText.d.ts

@@ -0,0 +1,22 @@
+import { JSX } from 'solid-js';
+export interface ScrambleTextProps {
+    text: string;
+    /** When to run: on mount, or on hover. @default 'mount' */
+    trigger?: 'mount' | 'hover';
+    /** Total scramble duration in ms. @default 800 */
+    duration?: number;
+    class?: string;
+}
+/**
+ * Text that scrambles through random glyphs before "decoding" into the final
+ * string, left to right, over `duration` ms. Runs once on mount by default;
+ * pass `trigger="hover"` to (re)run it — cleanly restarting if it's still
+ * mid-scramble — on pointer hover instead. Renders the final text as-is, with
+ * no scramble, when the user prefers reduced motion.
+ *
+ * @example
+ * ```tsx
+ * <ScrambleText text="ACCESS GRANTED" trigger="hover" duration={600} />
+ * ```
+ */
+export declare function ScrambleText(props: ScrambleTextProps): JSX.Element;

package/dist/ui/TextReveal.d.ts

@@ -0,0 +1,23 @@
+import { JSX } from 'solid-js';
+export interface TextRevealProps {
+    text: string;
+    /** Split unit. @default 'word' */
+    by?: 'word' | 'char';
+    /** Reveal when scrolled into view instead of on mount. @default false */
+    onView?: boolean;
+    class?: string;
+}
+/**
+ * Reveals `text`, split into words or characters, with a staggered
+ * fade + slide-up (via Motion's `animate` + `stagger`). Runs once on mount by
+ * default; pass `onView` to instead reveal the first time the component
+ * scrolls into view. Whitespace between words renders as plain text, not an
+ * animated unit. Under reduced motion, everything stays visible and no
+ * animation runs.
+ *
+ * @example
+ * ```tsx
+ * <TextReveal text="Ship it." by="char" onView />
+ * ```
+ */
+export declare function TextReveal(props: TextRevealProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",
@@ -29,6 +29,9 @@
   ],
   "files": [
     "dist",
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
     "preset.js"
   ],
   "main": "./dist/index.js",
@@ -37,16 +40,19 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
+      "solid": "./src/index.ts",
       "import": "./dist/index.js",
       "default": "./dist/index.js"
     },
     "./commerce": {
       "types": "./dist/commerce/index.d.ts",
+      "solid": "./src/commerce/index.ts",
       "import": "./dist/commerce.js",
       "default": "./dist/commerce.js"
     },
     "./charts": {
       "types": "./dist/charts/index.d.ts",
+      "solid": "./src/charts/index.ts",
       "import": "./dist/charts.js",
       "default": "./dist/charts.js"
     },
@@ -55,6 +61,7 @@
       "default": "./preset.js"
     },
     "./styles.css": "./dist/styles.css",
+    "./full.css": "./dist/full.css",
     "./elements": {
       "import": "./dist/elements.js",
       "default": "./dist/elements.js"

package/src/charts/BarChart.tsx

@@ -0,0 +1,55 @@
+// BarChart — a simple vertical bar chart built from plain flex `div`s (no
+// SVG, no charting library). Bar heights are percentages of the tallest
+// value so the whole chart reflows with its container, and height changes
+// animate via `transition-all`. Colors come from theme tokens only.
+import { For, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface BarDatum {
+  label: string
+  value: number
+}
+
+export interface BarChartProps {
+  data: BarDatum[]
+  /** Height of the plot area in px. Default 160. */
+  height?: number
+  /** Fill color token. Default 'primary'. */
+  tone?: 'primary' | 'accent'
+  class?: string
+}
+
+/**
+ * Vertical bar chart rendered with flexbox: each bar's height is `value /
+ * max` of the plot area, filled with a theme token, with its label truncated
+ * beneath it and its raw value available via a native tooltip.
+ *
+ * @example
+ * ```tsx
+ * <BarChart data={[{ label: 'Mon', value: 12 }, { label: 'Tue', value: 30 }]} tone="accent" />
+ * ```
+ */
+export function BarChart(props: BarChartProps): JSX.Element {
+  const height = () => props.height ?? 160
+  const tone = () => props.tone ?? 'primary'
+  const max = () => Math.max(...props.data.map((d) => d.value), 0) || 1
+  const barClass = () => (tone() === 'accent' ? 'bg-accent' : 'bg-primary')
+
+  return (
+    <div class={cn('flex w-full items-end gap-2', props.class)} style={{ height: `${height()}px` }}>
+      <For each={props.data}>
+        {(datum) => (
+          <div class="flex h-full min-w-0 flex-1 flex-col items-center justify-end gap-1">
+            <div
+              title={`${datum.label}: ${datum.value}`}
+              class={cn('w-full rounded-t transition-all', barClass())}
+              style={{ height: `${Math.max((datum.value / max()) * 100, 0)}%` }}
+            />
+            <span class="w-full truncate text-center text-xs text-muted-foreground">{datum.label}</span>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}

package/src/charts/DonutChart.tsx

@@ -0,0 +1,127 @@
+// DonutChart — a native SVG donut/ring chart (no charting library). Each
+// segment is a `<circle>` stroked with `stroke-dasharray`/`stroke-dashoffset`
+// to draw an arc proportional to `value / total`; the whole group is rotated
+// so the first segment starts at 12 o'clock and segments run clockwise in
+// order. Colors come from theme tokens, either per-segment `tone` or, when
+// omitted, cycled across the `--data-*` series tokens by index.
+import { For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export type DonutTone = 'primary' | 'accent' | 'destructive' | 'emit' | 'received' | 'net'
+
+export interface DonutSegment {
+  label: string
+  value: number
+  tone?: DonutTone
+}
+
+export interface DonutChartProps {
+  data: DonutSegment[]
+  /** Overall SVG width/height in px. Default 160. */
+  size?: number
+  /** Ring stroke width in px. Default 20. */
+  thickness?: number
+  /** Show the summed total in the center. Default true. */
+  showTotal?: boolean
+  class?: string
+}
+
+// Explicit tone -> CSS custom property name.
+const TONE_TOKENS: Record<DonutTone, string> = {
+  primary: '--primary',
+  accent: '--accent',
+  destructive: '--destructive',
+  emit: '--data-emit',
+  received: '--data-received',
+  net: '--data-net',
+}
+
+// Fallback rotation used when a segment has no explicit `tone`.
+const CYCLE_TOKENS = ['--data-emit', '--data-received', '--data-net'] as const
+
+/** Resolve the CSS custom property a segment should stroke with. */
+function tokenFor(segment: DonutSegment, index: number): string {
+  if (segment.tone) return TONE_TOKENS[segment.tone]
+  return CYCLE_TOKENS[index % CYCLE_TOKENS.length]
+}
+
+/**
+ * SVG donut chart: one arc per segment, sized by `value / total` of the
+ * circle's circumference, starting at 12 o'clock and running clockwise.
+ * Segment colors come from each datum's `tone`, or cycle through the
+ * `--data-*` series tokens by index when omitted.
+ *
+ * @example
+ * ```tsx
+ * <DonutChart
+ *   data={[
+ *     { label: 'Sent', value: 62, tone: 'emit' },
+ *     { label: 'Received', value: 38, tone: 'received' },
+ *   ]}
+ * />
+ * ```
+ */
+export function DonutChart(props: DonutChartProps): JSX.Element {
+  const size = () => props.size ?? 160
+  const thickness = () => props.thickness ?? 20
+  const showTotal = () => props.showTotal ?? true
+  const center = () => size() / 2
+  const radius = () => Math.max(size() / 2 - thickness() / 2, 0)
+  const circumference = () => 2 * Math.PI * radius()
+  const total = () => props.data.reduce((sum, d) => sum + d.value, 0)
+
+  const arcs = () => {
+    const grandTotal = total() || 1
+    let cumulative = 0
+    return props.data.map((segment, index) => {
+      const fraction = segment.value / grandTotal
+      const arcLength = fraction * circumference()
+      const offset = cumulative
+      cumulative += arcLength
+      return { segment, index, arcLength, offset }
+    })
+  }
+
+  return (
+    <div
+      class={cn('relative inline-flex items-center justify-center', props.class)}
+      style={{ width: `${size()}px`, height: `${size()}px` }}
+    >
+      <svg width={size()} height={size()} viewBox={`0 0 ${size()} ${size()}`} role="img">
+        <g transform={`rotate(-90 ${center()} ${center()})`}>
+          <circle
+            cx={center()}
+            cy={center()}
+            r={radius()}
+            fill="none"
+            stroke="hsl(var(--muted))"
+            stroke-width={thickness()}
+          />
+          <For each={arcs()}>
+            {(arc) => (
+              <circle
+                cx={center()}
+                cy={center()}
+                r={radius()}
+                fill="none"
+                stroke={`hsl(var(${tokenFor(arc.segment, arc.index)}))`}
+                stroke-width={thickness()}
+                stroke-linecap="butt"
+                stroke-dasharray={`${arc.arcLength} ${Math.max(circumference() - arc.arcLength, 0)}`}
+                stroke-dashoffset={-arc.offset}
+              >
+                <title>{`${arc.segment.label}: ${arc.segment.value}`}</title>
+              </circle>
+            )}
+          </For>
+        </g>
+      </svg>
+      <Show when={showTotal()}>
+        <div class="absolute inset-0 flex items-center justify-center text-lg font-semibold tabular-nums text-foreground">
+          {total()}
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/charts/Sparkline.tsx

@@ -0,0 +1,101 @@
+// Sparkline — a tiny inline trend line rendered as a native SVG polyline (no
+// charting library). Values are scaled to fill the viewBox (min -> bottom,
+// max -> top, with a couple px of padding so the line never clips), stroked
+// with a theme token so it recolors with the active palette. An optional
+// faint area fill traces the same points down to the baseline.
+import { Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface SparklineProps {
+  data: number[]
+  /** SVG viewBox width in px. Default 120. */
+  width?: number
+  /** SVG viewBox height in px. Default 32. */
+  height?: number
+  /** Stroke color token. Default 'primary'. */
+  tone?: 'primary' | 'accent' | 'destructive'
+  /** Fill the area under the line faintly. Default false. */
+  area?: boolean
+  class?: string
+}
+
+const PAD = 2
+
+/** Build the `x,y` point list for `data` scaled into `w`×`h` (with padding). */
+function pointsFor(data: number[], w: number, h: number): { x: number; y: number }[] {
+  if (data.length === 0) return []
+  if (data.length === 1) {
+    return [{ x: w / 2, y: h / 2 }]
+  }
+  const min = Math.min(...data)
+  const max = Math.max(...data)
+  const span = max - min || 1
+  const innerH = Math.max(h - PAD * 2, 0)
+  const stepX = w / (data.length - 1)
+  return data.map((value, i) => ({
+    x: i * stepX,
+    y: PAD + innerH - ((value - min) / span) * innerH,
+  }))
+}
+
+/**
+ * Minimal inline trend line: an SVG polyline scaled to fit `width`×`height`,
+ * stroked with a theme token so it recolors with the active palette. Pass
+ * `area` for a faint fill under the line.
+ *
+ * @example
+ * ```tsx
+ * <Sparkline data={[3, 5, 4, 8, 6, 9, 7]} tone="accent" area />
+ * ```
+ */
+export function Sparkline(props: SparklineProps): JSX.Element {
+  const width = () => props.width ?? 120
+  const height = () => props.height ?? 32
+  const tone = () => props.tone ?? 'primary'
+  const points = () => pointsFor(props.data, width(), height())
+
+  const polylinePoints = () =>
+    points()
+      .map((p) => `${p.x},${p.y}`)
+      .join(' ')
+
+  const areaPath = () => {
+    const pts = points()
+    if (pts.length === 0) return ''
+    const line = pts.map((p) => `${p.x},${p.y}`).join(' L ')
+    const first = pts[0]
+    const last = pts[pts.length - 1]
+    return `M ${first.x},${height()} L ${line} L ${last.x},${height()} Z`
+  }
+
+  return (
+    <svg
+      class={cn('overflow-visible', props.class)}
+      width={width()}
+      height={height()}
+      viewBox={`0 0 ${width()} ${height()}`}
+      preserveAspectRatio="none"
+      role="img"
+    >
+      <Show when={points().length > 0}>
+        <Show when={props.area}>
+          <path d={areaPath()} fill={`hsl(var(--${tone()}) / 0.15)`} stroke="none" />
+        </Show>
+        <Show
+          when={points().length > 1}
+          fallback={<circle cx={points()[0]?.x} cy={points()[0]?.y} r={2} fill={`hsl(var(--${tone()}))`} />}
+        >
+          <polyline
+            points={polylinePoints()}
+            fill="none"
+            stroke={`hsl(var(--${tone()}))`}
+            stroke-width={2}
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          />
+        </Show>
+      </Show>
+    </svg>
+  )
+}

package/src/charts/index.ts

@@ -0,0 +1,5 @@
+// Barrel for the native-SVG chart set: theme-tokened, no external chart
+// library. Re-exports each component alongside its prop types.
+export { Sparkline, type SparklineProps } from './Sparkline'
+export { BarChart, type BarDatum, type BarChartProps } from './BarChart'
+export { DonutChart, type DonutSegment, type DonutChartProps } from './DonutChart'