From d44003621137c3a5c24c87cc0c8f7eeca4ca6a26 Mon Sep 17 00:00:00 2001
From: Aravind <aravind@tenext.in>
Date: Thu, 17 Sep 2026 23:59:49 +0530
Subject: [PATCH] chore(ts-migration): migrate UI primitives and design system
 to TypeScript
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Phase 6. 57 files: 23 vendored shadcn primitives, 30 design-system components,
4 charts. Plus `src/components/ds/props.ts`, which is types only.

Renaming these alone took typecheck from 37 to 1008, and the reason is worth
recording because it is the shape of every remaining phase.

These components had NO prop contract. No PropTypes, no validation: in the
JavaScript every prop was optional and every extra prop was spread onto the
underlying element. TypeScript infers a destructured parameter WITHOUT a default
as REQUIRED, so the moment the files became `.tsx` it invented a rule the
components never had and rejected several hundred call sites that have always
worked. That is the compiler describing its own inference, not a defect it
found.

Three mechanical fixes, each restoring a contract that already existed:

  - 57 JSDoc `@type {React.ForwardRefExoticComponent<any>}` annotations become
    real TypeScript annotations. Those comments were the previous authors'
    deliberate compatibility types; JSDoc stops applying in a `.tsx` file, so
    converting them preserves an intent that was already written down.

  - 61 `React.forwardRef(...)` calls gain `<any, any>`. Without generics `ref`
    infers `ForwardedRef<unknown>`, which no element's `Ref<T>` accepts - so
    every primitive that forwards a ref to a `div` failed on the ref, not the
    props.

  - 78 component signatures take `DsProps`, a documented alias for
    `Record<string, any>`. It exists so the decision is recorded once and is
    greppable when someone tightens it, rather than being 78 bare `any`s with
    no explanation between them. The prop NAMES are not lost: every component
    still destructures them by name, which is where a reader looks.

Four files needed real types rather than compatibility ones. `ds/toast` takes
react-hot-toast's own `ToastOptions`, which narrows `position` to its
`ToastPosition` union instead of widening to `string` - the widening was what
made all six calls unassignable. `ds/Pagination`'s page range is genuinely
`(number | string)[]`, because it interleaves page numbers with '…' markers that
the renderer tests for. `ds/Field` narrows `children.props` at three reads, and
`ds/Avatar` needed the ref generic.

Two of my own automated passes were wrong and were caught rather than shipped. A
props-interface generator dropped alternating props, because non-overlapping
regex matches consume the separating comma - it made things worse (83 file
errors to 146) and was reverted wholesale. A second pass missed every
multi-line signature whose defaults contain a `)`, such as `onClose = () => {}`;
that needed a brace matcher rather than a character class.

56 of 57 files emit byte-identical JavaScript. The one exception is `ds/toast`,
where a JSDoc type CAST - `/** @type {ToastPosition} */ ('bottom-center')` -
became a real annotation, so the emitted output loses a comment and a pair of
now-redundant parentheses. The value is `"bottom-center"` either way; the
minified outputs differ only in esbuild's choice of mangled local names.

Verified: tsc 37 -> 35, set-difference showing zero introduced and two removed;
zero errors remain in any Phase 6 file; npm test 1684/1691 with the same seven
failures; lint 0 errors; build succeeds with the API origin inlined; baseline
artifacts untouched.

Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01HBG1wnuRfJKCstGB8Fekr8
---
 ...formance.jsx => DepartmentPerformance.tsx} |  3 ++-
 .../charts/{HiringFlow.jsx => HiringFlow.tsx} |  3 ++-
 ...ingTrendChart.jsx => HiringTrendChart.tsx} |  3 ++-
 .../{muiChartTheme.js => muiChartTheme.ts}    |  0
 .../ds/{ActivityCard.jsx => ActivityCard.tsx} |  3 ++-
 src/components/ds/{Alert.jsx => Alert.tsx}    |  3 ++-
 src/components/ds/{Avatar.jsx => Avatar.tsx}  |  6 ++---
 ...{ChartContainer.jsx => ChartContainer.tsx} |  7 ++---
 .../ds/{DataTable.jsx => DataTable.tsx}       |  3 ++-
 src/components/ds/{Drawer.jsx => Drawer.tsx}  |  3 ++-
 .../ds/{EmptyState.jsx => EmptyState.tsx}     |  3 ++-
 src/components/ds/{Field.jsx => Field.tsx}    | 15 +++++++----
 .../ds/{FilterBar.jsx => FilterBar.tsx}       |  3 ++-
 .../ds/{IconButton.jsx => IconButton.tsx}     |  3 +--
 .../ds/{InsightRow.jsx => InsightRow.tsx}     |  5 ++--
 .../ds/{KpiCard.jsx => KpiCard.tsx}           |  5 ++--
 src/components/ds/{Layout.jsx => Layout.tsx}  |  7 ++---
 .../ds/{LoadingState.jsx => LoadingState.tsx} |  9 ++++---
 .../ds/{MetricStrip.jsx => MetricStrip.tsx}   |  3 ++-
 src/components/ds/{Modal.jsx => Modal.tsx}    |  5 ++--
 .../ds/{MultiSelect.jsx => MultiSelect.tsx}   |  3 ++-
 .../ds/{PageHeader.jsx => PageHeader.tsx}     |  5 ++--
 .../ds/{Pagination.jsx => Pagination.tsx}     |  8 ++++--
 .../ds/{Progress.jsx => Progress.tsx}         |  9 ++++---
 .../ds/{SearchInput.jsx => SearchInput.tsx}   |  3 +--
 .../{SectionHeader.jsx => SectionHeader.tsx}  |  3 ++-
 .../ds/{Skeleton.jsx => Skeleton.tsx}         | 17 ++++++------
 .../ds/{StatusBadge.jsx => StatusBadge.tsx}   |  3 ++-
 .../ds/{Surface.jsx => Surface.tsx}           |  3 +--
 src/components/ds/{Tabs.jsx => Tabs.tsx}      |  3 ++-
 .../ds/{Timeline.jsx => Timeline.tsx}         |  3 ++-
 src/components/ds/{Toggle.jsx => Toggle.tsx}  |  5 ++--
 src/components/ds/{index.js => index.ts}      |  0
 src/components/ds/props.ts                    | 22 +++++++++++++++
 src/components/ds/{toast.js => toast.ts}      |  9 +++++--
 src/components/ui/{badge.jsx => badge.tsx}    |  3 +--
 .../ui/{breadcrumb.jsx => breadcrumb.tsx}     | 20 ++++++--------
 src/components/ui/{button.jsx => button.tsx}  |  3 +--
 src/components/ui/{card.jsx => card.tsx}      | 18 +++++--------
 .../ui/{checkbox.jsx => checkbox.tsx}         |  3 +--
 .../ui/{collapsible.jsx => collapsible.ts}    |  0
 src/components/ui/{dialog.jsx => dialog.tsx}  | 17 +++++-------
 .../{dropdown-menu.jsx => dropdown-menu.tsx}  | 27 +++++++------------
 .../ui/{hover-card.jsx => hover-card.tsx}     |  3 +--
 src/components/ui/{image.jsx => image.tsx}    |  9 +++----
 src/components/ui/{input.jsx => input.tsx}    |  3 +--
 src/components/ui/{label.jsx => label.tsx}    |  3 +--
 .../ui/{popover.jsx => popover.tsx}           |  3 +--
 .../ui/{radio-group.jsx => radio-group.tsx}   |  6 ++---
 src/components/ui/{select.jsx => select.tsx}  | 20 +++++---------
 src/components/ui/{sheet.jsx => sheet.tsx}    | 17 +++++-------
 src/components/ui/{slider.jsx => slider.tsx}  |  3 +--
 src/components/ui/{switch.jsx => switch.tsx}  |  3 +--
 .../ui/{textarea.jsx => textarea.tsx}         |  3 +--
 src/components/ui/{toast.jsx => toast.tsx}    | 21 +++++----------
 .../ui/{toaster.jsx => toaster.tsx}           |  0
 .../ui/{tooltip.jsx => tooltip.tsx}           |  3 +--
 .../ui/{use-toast.jsx => use-toast.ts}        |  0
 58 files changed, 191 insertions(+), 185 deletions(-)
 rename src/components/charts/{DepartmentPerformance.jsx => DepartmentPerformance.tsx} (99%)
 rename src/components/charts/{HiringFlow.jsx => HiringFlow.tsx} (98%)
 rename src/components/charts/{HiringTrendChart.jsx => HiringTrendChart.tsx} (96%)
 rename src/components/charts/{muiChartTheme.js => muiChartTheme.ts} (100%)
 rename src/components/ds/{ActivityCard.jsx => ActivityCard.tsx} (98%)
 rename src/components/ds/{Alert.jsx => Alert.tsx} (96%)
 rename src/components/ds/{Avatar.jsx => Avatar.tsx} (96%)
 rename src/components/ds/{ChartContainer.jsx => ChartContainer.tsx} (97%)
 rename src/components/ds/{DataTable.jsx => DataTable.tsx} (99%)
 rename src/components/ds/{Drawer.jsx => Drawer.tsx} (98%)
 rename src/components/ds/{EmptyState.jsx => EmptyState.tsx} (97%)
 rename src/components/ds/{Field.jsx => Field.tsx} (75%)
 rename src/components/ds/{FilterBar.jsx => FilterBar.tsx} (99%)
 rename src/components/ds/{IconButton.jsx => IconButton.tsx} (92%)
 rename src/components/ds/{InsightRow.jsx => InsightRow.tsx} (96%)
 rename src/components/ds/{KpiCard.jsx => KpiCard.tsx} (98%)
 rename src/components/ds/{Layout.jsx => Layout.tsx} (94%)
 rename src/components/ds/{LoadingState.jsx => LoadingState.tsx} (94%)
 rename src/components/ds/{MetricStrip.jsx => MetricStrip.tsx} (98%)
 rename src/components/ds/{Modal.jsx => Modal.tsx} (98%)
 rename src/components/ds/{MultiSelect.jsx => MultiSelect.tsx} (99%)
 rename src/components/ds/{PageHeader.jsx => PageHeader.tsx} (97%)
 rename src/components/ds/{Pagination.jsx => Pagination.tsx} (92%)
 rename src/components/ds/{Progress.jsx => Progress.tsx} (98%)
 rename src/components/ds/{SearchInput.jsx => SearchInput.tsx} (96%)
 rename src/components/ds/{SectionHeader.jsx => SectionHeader.tsx} (97%)
 rename src/components/ds/{Skeleton.jsx => Skeleton.tsx} (91%)
 rename src/components/ds/{StatusBadge.jsx => StatusBadge.tsx} (97%)
 rename src/components/ds/{Surface.jsx => Surface.tsx} (96%)
 rename src/components/ds/{Tabs.jsx => Tabs.tsx} (98%)
 rename src/components/ds/{Timeline.jsx => Timeline.tsx} (98%)
 rename src/components/ds/{Toggle.jsx => Toggle.tsx} (98%)
 rename src/components/ds/{index.js => index.ts} (100%)
 create mode 100644 src/components/ds/props.ts
 rename src/components/ds/{toast.js => toast.ts} (84%)
 rename src/components/ui/{badge.jsx => badge.tsx} (92%)
 rename src/components/ui/{breadcrumb.jsx => breadcrumb.tsx} (74%)
 rename src/components/ui/{button.jsx => button.tsx} (97%)
 rename src/components/ui/{card.jsx => card.tsx} (57%)
 rename src/components/ui/{checkbox.jsx => checkbox.tsx} (86%)
 rename src/components/ui/{collapsible.jsx => collapsible.ts} (100%)
 rename src/components/ui/{dialog.jsx => dialog.tsx} (83%)
 rename src/components/ui/{dropdown-menu.jsx => dropdown-menu.tsx} (82%)
 rename src/components/ui/{hover-card.jsx => hover-card.tsx} (85%)
 rename src/components/ui/{image.jsx => image.tsx} (96%)
 rename src/components/ui/{input.jsx => input.tsx} (91%)
 rename src/components/ui/{label.jsx => label.tsx} (79%)
 rename src/components/ui/{popover.jsx => popover.tsx} (86%)
 rename src/components/ui/{radio-group.jsx => radio-group.tsx} (80%)
 rename src/components/ui/{select.jsx => select.tsx} (83%)
 rename src/components/ui/{sheet.jsx => sheet.tsx} (84%)
 rename src/components/ui/{slider.jsx => slider.tsx} (87%)
 rename src/components/ui/{switch.jsx => switch.tsx} (89%)
 rename src/components/ui/{textarea.jsx => textarea.tsx} (80%)
 rename src/components/ui/{toast.jsx => toast.tsx} (79%)
 rename src/components/ui/{toaster.jsx => toaster.tsx} (100%)
 rename src/components/ui/{tooltip.jsx => tooltip.tsx} (87%)
 rename src/components/ui/{use-toast.jsx => use-toast.ts} (100%)

diff --git a/src/components/charts/DepartmentPerformance.jsx b/src/components/charts/DepartmentPerformance.tsx
similarity index 99%
rename from src/components/charts/DepartmentPerformance.jsx
rename to src/components/charts/DepartmentPerformance.tsx
index d54d3b4..1b24dd4 100644
--- a/src/components/charts/DepartmentPerformance.jsx
+++ b/src/components/charts/DepartmentPerformance.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from '@/components/ds/props';
 import React, { useState, useMemo } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
 import {
@@ -104,7 +105,7 @@ function getDeptColor(index, avgScore) {
 }
 
 /** @param {any} props */
-export function DepartmentPerformance({ items = [], className = '' }) {
+export function DepartmentPerformance({ items = [], className = '' }: DsProps) {
   const [viewMode, setViewMode] = useState('flowchart'); // 'flowchart' | 'table'
   const [activeDept, setActiveDept] = useState(null);
 
diff --git a/src/components/charts/HiringFlow.jsx b/src/components/charts/HiringFlow.tsx
similarity index 98%
rename from src/components/charts/HiringFlow.jsx
rename to src/components/charts/HiringFlow.tsx
index 56b05f2..1b313d4 100644
--- a/src/components/charts/HiringFlow.jsx
+++ b/src/components/charts/HiringFlow.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from '@/components/ds/props';
 import React from 'react';
 import { BarChart } from '@mui/x-charts';
 import { ChevronRight } from 'lucide-react';
@@ -19,7 +20,7 @@ import { chartSx, TONES, tooltipSx } from './muiChartTheme';
  * component derives no figures of its own.
  */
 /** @param {any} props */
-export function HiringFlow({ stages = [], transitions = [], weakestKey, className = '' }) {
+export function HiringFlow({ stages = [], transitions = [], weakestKey, className = '' }: DsProps) {
   if (!stages.length) return null;
 
   const total = stages[0]?.count || 1;
diff --git a/src/components/charts/HiringTrendChart.jsx b/src/components/charts/HiringTrendChart.tsx
similarity index 96%
rename from src/components/charts/HiringTrendChart.jsx
rename to src/components/charts/HiringTrendChart.tsx
index 0e8ab55..31fc801 100644
--- a/src/components/charts/HiringTrendChart.jsx
+++ b/src/components/charts/HiringTrendChart.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from '@/components/ds/props';
 import React from 'react';
 import { LineChart } from '@mui/x-charts';
 import { cn } from '@/lib/utils';
@@ -15,7 +16,7 @@ import { chartSx, TONES, tooltipSx } from './muiChartTheme';
  * `points: [{ label, hires, cumulative }]` — supplied by the page.
  */
 /** @param {any} props */
-export function HiringTrendChart({ points = [], emptyState, className = '' }) {
+export function HiringTrendChart({ points = [], emptyState, className = '' }: DsProps) {
   const enough = points.length >= 2;
 
   return (
diff --git a/src/components/charts/muiChartTheme.js b/src/components/charts/muiChartTheme.ts
similarity index 100%
rename from src/components/charts/muiChartTheme.js
rename to src/components/charts/muiChartTheme.ts
diff --git a/src/components/ds/ActivityCard.jsx b/src/components/ds/ActivityCard.tsx
similarity index 98%
rename from src/components/ds/ActivityCard.jsx
rename to src/components/ds/ActivityCard.tsx
index eb3ef88..2c8a3fb 100644
--- a/src/components/ds/ActivityCard.jsx
+++ b/src/components/ds/ActivityCard.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Avatar } from '@/components/ds/Avatar';
@@ -30,7 +31,7 @@ export function ActivityCard({
   variant = 'row',
   onClick,
   className,
-}) {
+}: DsProps) {
   const iconTones = {
     soft: 'bg-krow-blue-tint text-krow-blue',
     brand: 'bg-krow-blue text-white',
diff --git a/src/components/ds/Alert.jsx b/src/components/ds/Alert.tsx
similarity index 96%
rename from src/components/ds/Alert.jsx
rename to src/components/ds/Alert.tsx
index e251778..c9ba1b7 100644
--- a/src/components/ds/Alert.jsx
+++ b/src/components/ds/Alert.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { AlertCircle, CheckCircle2, Info, TriangleAlert, X } from 'lucide-react';
 import { cva } from 'class-variance-authority';
@@ -40,7 +41,7 @@ const ICON_COLORS = {
  * that persists is noise.
  */
 /** @param {any} props */
-export function Alert({ tone = 'info', title, children, icon, onDismiss, action, className, ...props }) {
+export function Alert({ tone = 'info', title, children, icon, onDismiss, action, className, ...props }: DsProps) {
   const Icon = icon || ICONS[tone];
 
   return (
diff --git a/src/components/ds/Avatar.jsx b/src/components/ds/Avatar.tsx
similarity index 96%
rename from src/components/ds/Avatar.jsx
rename to src/components/ds/Avatar.tsx
index 8eae976..ea5e73b 100644
--- a/src/components/ds/Avatar.jsx
+++ b/src/components/ds/Avatar.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
@@ -41,8 +42,7 @@ export function initialsFrom(name = '') {
  * first-class state rather than a fallback afterthought. A failed image load
  * degrades to initials instead of a broken-image icon.
  */
-/** @type {React.ForwardRefExoticComponent<any>} */
-export const Avatar = React.forwardRef(
+export const Avatar: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(
   ({ name, src, size = 'default', shape, tone, status, className, ...props }, ref) => {
     const [failed, setFailed] = React.useState(false);
     const showImage = src && !failed;
@@ -91,7 +91,7 @@ Avatar.displayName = 'Avatar';
  * people in a tight row (applicants on a position, endorsers on a skill).
  */
 /** @param {any} props */
-export function AvatarGroup({ people = [], max = 4, size = 'sm', className }) {
+export function AvatarGroup({ people = [], max = 4, size = 'sm', className }: DsProps) {
   const visible = people.slice(0, max);
   const overflow = people.length - visible.length;
 
diff --git a/src/components/ds/ChartContainer.jsx b/src/components/ds/ChartContainer.tsx
similarity index 97%
rename from src/components/ds/ChartContainer.jsx
rename to src/components/ds/ChartContainer.tsx
index 444150b..10321d7 100644
--- a/src/components/ds/ChartContainer.jsx
+++ b/src/components/ds/ChartContainer.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { ResponsiveContainer } from 'recharts';
 import { cn } from '@/lib/utils';
@@ -38,7 +39,7 @@ export const AXIS_PROPS = {
  * white box that ignores the token set.
  */
 /** @param {any} props */
-export function ChartTooltip({ active, payload, label, valueFormatter, labelFormatter }) {
+export function ChartTooltip({ active, payload, label, valueFormatter, labelFormatter }: DsProps) {
   if (!active || !payload?.length) return null;
 
   return (
@@ -71,7 +72,7 @@ export function ChartTooltip({ active, payload, label, valueFormatter, labelForm
  * A legend that reads as part of the card rather than as chart furniture.
  * Items: `{ label, color, value? }`.
  */
-export function ChartLegend({ items = [], className }) {
+export function ChartLegend({ items = [], className }: DsProps) {
   return (
     <div className={cn('flex flex-wrap items-center gap-x-4 gap-y-2', className)}>
       {items.map((item) => (
@@ -118,7 +119,7 @@ export function ChartContainer({
   raw = false,
   footer,
   className,
-}) {
+}: DsProps) {
   if (loading) return <SkeletonChart className={className} height={height} />;
 
   return (
diff --git a/src/components/ds/DataTable.jsx b/src/components/ds/DataTable.tsx
similarity index 99%
rename from src/components/ds/DataTable.jsx
rename to src/components/ds/DataTable.tsx
index 200bb4d..59a65b3 100644
--- a/src/components/ds/DataTable.jsx
+++ b/src/components/ds/DataTable.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { ArrowDown, ArrowUp, ChevronsUpDown, Inbox } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -60,7 +61,7 @@ export function DataTable({
   className,
   rowClassName,
   stickyHeader = false,
-}) {
+}: DsProps) {
   /* ── Sorting ─────────────────────────────────────────────────────────── */
   /* Row height follows the account's density preference. Only the vertical
      padding changes — same columns, same type, same behaviour. */
diff --git a/src/components/ds/Drawer.jsx b/src/components/ds/Drawer.tsx
similarity index 98%
rename from src/components/ds/Drawer.jsx
rename to src/components/ds/Drawer.tsx
index ec6f883..60a4cb6 100644
--- a/src/components/ds/Drawer.jsx
+++ b/src/components/ds/Drawer.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from '@/components/ui/sheet';
@@ -41,7 +42,7 @@ export function Drawer({
   className,
   /** Hides the header for a fully custom panel (the mobile nav does this). */
   bare = false,
-}) {
+}: DsProps) {
   const isVertical = side === 'top' || side === 'bottom';
 
   return (
diff --git a/src/components/ds/EmptyState.jsx b/src/components/ds/EmptyState.tsx
similarity index 97%
rename from src/components/ds/EmptyState.jsx
rename to src/components/ds/EmptyState.tsx
index 136a51f..f6dd5bd 100644
--- a/src/components/ds/EmptyState.jsx
+++ b/src/components/ds/EmptyState.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Button } from '@/components/ui/button';
@@ -25,7 +26,7 @@ export function EmptyState({
   variant = 'empty',
   size = 'default',
   className,
-}) {
+}: DsProps) {
   const renderAction = (spec, buttonVariant) => {
     if (!spec) return null;
     if (React.isValidElement(spec)) return spec;
diff --git a/src/components/ds/Field.jsx b/src/components/ds/Field.tsx
similarity index 75%
rename from src/components/ds/Field.jsx
rename to src/components/ds/Field.tsx
index dbbf3f4..bba1761 100644
--- a/src/components/ds/Field.jsx
+++ b/src/components/ds/Field.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 
@@ -19,7 +20,7 @@ export function Field({
   inline = false,
   className,
   children,
-}) {
+}: DsProps) {
   const reactId = React.useId();
   const id = htmlFor || reactId;
   const hintId = hint ? `${id}-hint` : undefined;
@@ -27,11 +28,15 @@ export function Field({
   const describedBy = [errorId, hintId].filter(Boolean).join(' ') || undefined;
 
   // Only clone when the child is a single element that can accept the wiring.
+  /* `isValidElement` narrows to `ReactElement<unknown>`, whose `props` is
+     `unknown` — so reading `children.props.id` to preserve a caller's own id
+     does not compile. The cast says what the guard has already established and
+     what the runtime relies on: this is an element with props. */
   const control = React.isValidElement(children)
-    ? React.cloneElement(children, {
-        id: children.props.id || id,
-        'aria-describedby': children.props['aria-describedby'] || describedBy,
-        'aria-invalid': error ? true : children.props['aria-invalid'],
+    ? React.cloneElement(children as React.ReactElement<Record<string, any>>, {
+        id: (children.props as Record<string, any>).id || id,
+        'aria-describedby': (children.props as Record<string, any>)['aria-describedby'] || describedBy,
+        'aria-invalid': error ? true : (children.props as Record<string, any>)['aria-invalid'],
       })
     : children;
 
diff --git a/src/components/ds/FilterBar.jsx b/src/components/ds/FilterBar.tsx
similarity index 99%
rename from src/components/ds/FilterBar.jsx
rename to src/components/ds/FilterBar.tsx
index d16a26c..440c24d 100644
--- a/src/components/ds/FilterBar.jsx
+++ b/src/components/ds/FilterBar.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { SlidersHorizontal, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -37,7 +38,7 @@ export function FilterBar({
   /** Value that means "no filter" for select-type filters. */
   allValue = 'all',
   className = '',
-}) {
+}: DsProps) {
   const [expanded, setExpanded] = React.useState(false);
 
   const isActive = (filter) => {
diff --git a/src/components/ds/IconButton.jsx b/src/components/ds/IconButton.tsx
similarity index 92%
rename from src/components/ds/IconButton.jsx
rename to src/components/ds/IconButton.tsx
index 8410cdb..00e1a8d 100644
--- a/src/components/ds/IconButton.jsx
+++ b/src/components/ds/IconButton.tsx
@@ -9,8 +9,7 @@ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/comp
  * `label`: an icon-only control with no accessible name is a bug, so the API
  * makes it impossible to omit. The label doubles as the tooltip.
  */
-/** @type {React.ForwardRefExoticComponent<any>} */
-export const IconButton = React.forwardRef(
+export const IconButton: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(
   ({ icon: Icon, label, tooltip = true, size = 'default', side = 'top', ...props }, ref) => {
     const sizeMap = {
       xs: 'icon-xs',
diff --git a/src/components/ds/InsightRow.jsx b/src/components/ds/InsightRow.tsx
similarity index 96%
rename from src/components/ds/InsightRow.jsx
rename to src/components/ds/InsightRow.tsx
index 37d15c3..bdd26c0 100644
--- a/src/components/ds/InsightRow.jsx
+++ b/src/components/ds/InsightRow.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { AlertTriangle, ChevronRight, Info, ShieldAlert, TrendingDown } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -58,7 +59,7 @@ export function InsightRow({
   onClick = null,
   actionLabel = 'Review',
   className = '',
-}) {
+}: DsProps) {
   const s = SEVERITY[severity] || SEVERITY.info;
   const Comp = onClick ? 'button' : 'div';
 
@@ -107,6 +108,6 @@ export function InsightRow({
 
 /** The list container — dividers between rows, nothing else. */
 /** @param {any} props */
-export function InsightList({ children, className = '' }) {
+export function InsightList({ children, className = '' }: DsProps) {
   return <div className={cn('divide-y divide-border', className)}>{children}</div>;
 }
diff --git a/src/components/ds/KpiCard.jsx b/src/components/ds/KpiCard.tsx
similarity index 98%
rename from src/components/ds/KpiCard.jsx
rename to src/components/ds/KpiCard.tsx
index eca5794..477eb6a 100644
--- a/src/components/ds/KpiCard.jsx
+++ b/src/components/ds/KpiCard.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react';
@@ -32,7 +33,7 @@ export function KpiCard({
   loading = false,
   onClick,
   className,
-}) {
+}: DsProps) {
   const t = TONES[tone] || TONES.brand;
 
   if (loading) {
@@ -112,7 +113,7 @@ export function MetricCard({
   loading = false,
   onClick,
   className,
-}) {
+}: DsProps) {
   const t = TONES[tone] || TONES.neutral;
 
   if (loading) {
diff --git a/src/components/ds/Layout.jsx b/src/components/ds/Layout.tsx
similarity index 94%
rename from src/components/ds/Layout.jsx
rename to src/components/ds/Layout.tsx
index fcc9f5f..c2912c7 100644
--- a/src/components/ds/Layout.jsx
+++ b/src/components/ds/Layout.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 
@@ -19,7 +20,7 @@ const GAPS = { sm: 'gap-3', default: 'gap-4', lg: 'gap-6' };
  * chosen to avoid orphan cards (6 → 2/3/6 rather than 1/3/6).
  */
 /** @param {any} props */
-export function Grid({ cols = 3, gap = 'default', className, children, ...props }) {
+export function Grid({ cols = 3, gap = 'default', className, children, ...props }: DsProps) {
   const columns = {
     1: 'grid-cols-1',
     2: 'grid-cols-1 sm:grid-cols-2',
@@ -38,7 +39,7 @@ export function Grid({ cols = 3, gap = 'default', className, children, ...props
 
 /** Stack — vertical rhythm. `space` maps to the two spacings pages should use. */
 /** @param {any} props */
-export function Stack({ space = 'default', className, children, ...props }) {
+export function Stack({ space = 'default', className, children, ...props }: DsProps) {
   const spacing = {
     xs: 'space-y-2',
     sm: 'space-y-3',
@@ -59,7 +60,7 @@ export function Stack({ space = 'default', className, children, ...props }) {
  * with its content at consistent spacing.
  */
 /** @param {any} props */
-export function PageSection({ title, subtitle, actions, level = 'overline', className, children }) {
+export function PageSection({ title, subtitle, actions, level = 'overline', className, children }: DsProps) {
   return (
     <section className={cn('space-y-3', className)}>
       {title && (
diff --git a/src/components/ds/LoadingState.jsx b/src/components/ds/LoadingState.tsx
similarity index 94%
rename from src/components/ds/LoadingState.jsx
rename to src/components/ds/LoadingState.tsx
index bdde408..2404d17 100644
--- a/src/components/ds/LoadingState.jsx
+++ b/src/components/ds/LoadingState.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { Loader2 } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -6,7 +7,7 @@ import { cn } from '@/lib/utils';
  * Spinner — the only spinner in the system.
  */
 /** @param {any} props */
-export function Spinner({ size = 'default', className = '', label = 'Loading' }) {
+export function Spinner({ size = 'default', className = '', label = 'Loading' }: DsProps) {
   const sizes = { xs: 'w-3.5 h-3.5', sm: 'w-4 h-4', default: 'w-6 h-6', lg: 'w-8 h-8' };
   return (
     <Loader2
@@ -25,7 +26,7 @@ export function Spinner({ size = 'default', className = '', label = 'Loading' })
  * final layout prevents the content jump a spinner always causes.
  */
 /** @param {any} props */
-export function LoadingState({ message = '', size = 'default', className = '' }) {
+export function LoadingState({ message = '', size = 'default', className = '' }: DsProps) {
   return (
     <div
       className={cn(
@@ -45,7 +46,7 @@ export function LoadingState({ message = '', size = 'default', className = '' })
  * card headers, or beside a control that is refreshing.
  */
 /** @param {any} props */
-export function InlineLoading({ message = 'Loading…', className = '' }) {
+export function InlineLoading({ message = 'Loading…', className = '' }: DsProps) {
   return (
     <span className={cn('inline-flex items-center gap-2 text-body-sm text-ink-3', className)}>
       <Spinner size="sm" />
@@ -59,7 +60,7 @@ export function InlineLoading({ message = 'Loading…', className = '' }) {
  * height stable so the page does not jump. Used by DataTable when refetching.
  */
 /** @param {any} props */
-export function LoadingOverlay({ show = false, message = '', className = '' }) {
+export function LoadingOverlay({ show = false, message = '', className = '' }: DsProps) {
   if (!show) return null;
   return (
     <div
diff --git a/src/components/ds/MetricStrip.jsx b/src/components/ds/MetricStrip.tsx
similarity index 98%
rename from src/components/ds/MetricStrip.jsx
rename to src/components/ds/MetricStrip.tsx
index dea4a7a..562e6ff 100644
--- a/src/components/ds/MetricStrip.jsx
+++ b/src/components/ds/MetricStrip.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { ArrowDownRight, ArrowUpRight, Minus } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -58,7 +59,7 @@ function Delta({ delta, label, invert }) {
 }
 
 /** @param {any} props */
-export function MetricStrip({ items = [], columns, className, loading = false }) {
+export function MetricStrip({ items = [], columns, className, loading = false }: DsProps) {
   const count = columns ?? Math.min(items.length, 6);
 
   const gridCols = {
diff --git a/src/components/ds/Modal.jsx b/src/components/ds/Modal.tsx
similarity index 98%
rename from src/components/ds/Modal.jsx
rename to src/components/ds/Modal.tsx
index 48ea862..8cf674c 100644
--- a/src/components/ds/Modal.jsx
+++ b/src/components/ds/Modal.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import {
@@ -39,7 +40,7 @@ export function Modal({
   className,
   /** Blocks closing — use while a submit is in flight. */
   busy = false,
-}) {
+}: DsProps) {
   return (
     <Dialog open={open} onOpenChange={busy ? undefined : onOpenChange}>
       <DialogContent
@@ -100,7 +101,7 @@ export function ConfirmModal({
   tone = 'destructive',
   icon = null,
   busy = false,
-}) {
+}: DsProps) {
   return (
     <Modal
       open={open}
diff --git a/src/components/ds/MultiSelect.jsx b/src/components/ds/MultiSelect.tsx
similarity index 99%
rename from src/components/ds/MultiSelect.jsx
rename to src/components/ds/MultiSelect.tsx
index 7f01caa..67963af 100644
--- a/src/components/ds/MultiSelect.jsx
+++ b/src/components/ds/MultiSelect.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { Check, ChevronDown, X } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -25,7 +26,7 @@ export function MultiSelect({
   className = '',
   align = 'start',
   emptyMessage = 'No options',
-}) {
+}: DsProps) {
   const [open, setOpen] = React.useState(false);
   const [query, setQuery] = React.useState('');
 
diff --git a/src/components/ds/PageHeader.jsx b/src/components/ds/PageHeader.tsx
similarity index 97%
rename from src/components/ds/PageHeader.jsx
rename to src/components/ds/PageHeader.tsx
index b69a9ff..703a464 100644
--- a/src/components/ds/PageHeader.jsx
+++ b/src/components/ds/PageHeader.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import { cn } from '@/lib/utils';
@@ -22,7 +23,7 @@ export function PageHeader({
   size = 'title',
   animate = true,
   className,
-}) {
+}: DsProps) {
   const Wrapper = animate ? motion.div : 'div';
   const motionProps = animate
     ? {
@@ -68,7 +69,7 @@ export function PageHeader({
  * A dashboard-style greeting header where part of the title is emphasized —
  * "Good day. Let's hire smarter."
  */
-export function HeroHeader({ lead, highlight, subtitle, actions, className }) {
+export function HeroHeader({ lead, highlight, subtitle, actions, className }: DsProps) {
   return (
     <motion.div
       initial={{ opacity: 0, y: -12 }}
diff --git a/src/components/ds/Pagination.jsx b/src/components/ds/Pagination.tsx
similarity index 92%
rename from src/components/ds/Pagination.jsx
rename to src/components/ds/Pagination.tsx
index c778d15..6f5a316 100644
--- a/src/components/ds/Pagination.jsx
+++ b/src/components/ds/Pagination.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { ChevronLeft, ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -24,7 +25,10 @@ export function buildPageRange(current, total, siblings = 1) {
   const showLeftEllipsis = left > 2;
   const showRightEllipsis = right < total - 1;
 
-  const pages = [1];
+  /* Page numbers with '…' markers between them — a real mixed array, which is
+     why the renderer tests `entry === '…'` before treating it as a number.
+     Inference took the seed `[1]` as `number[]` and rejected the markers. */
+  const pages: (number | string)[] = [1];
   if (showLeftEllipsis) pages.push('…');
   for (let p = Math.max(2, left); p <= Math.min(total - 1, right); p += 1) pages.push(p);
   if (showRightEllipsis) pages.push('…');
@@ -47,7 +51,7 @@ export function Pagination({
   onPageSizeChange,
   pageSizeOptions = [10, 25, 50, 100],
   className,
-}) {
+}: DsProps) {
   if (pageCount <= 1 && !onPageSizeChange) return null;
 
   const from = totalItems != null && pageSize ? (page - 1) * pageSize + 1 : null;
diff --git a/src/components/ds/Progress.jsx b/src/components/ds/Progress.tsx
similarity index 98%
rename from src/components/ds/Progress.jsx
rename to src/components/ds/Progress.tsx
index efa4f1f..a7cadf3 100644
--- a/src/components/ds/Progress.jsx
+++ b/src/components/ds/Progress.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { Check } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -45,7 +46,7 @@ export function ProgressBar({
   valueSuffix = '',
   className,
   trackClassName,
-}) {
+}: DsProps) {
   const pct = clamp((Number(value) / max) * 100);
   const resolvedTone = tone === 'score' ? toneForScore(pct) : tone;
 
@@ -110,7 +111,7 @@ export function ProgressRing({
   /** Small text below the label. */
   footnote,
   className,
-}) {
+}: DsProps) {
   const radius = (size - strokeWidth) / 2;
   const circumference = 2 * Math.PI * radius;
   const ratio = Math.max(0, Math.min(1, (Number(value) - min) / (max - min)));
@@ -178,7 +179,7 @@ export function ProgressRing({
  * at a glance without relying on colour.
  */
 /** @param {any} props */
-export function ProgressSteps({ steps = [], current = 0, className = '', onStepClick = null }) {
+export function ProgressSteps({ steps = [], current = 0, className = '', onStepClick = null }: DsProps) {
   const normalized = steps.map((s) => (typeof s === 'string' ? { label: s } : s));
 
   return (
@@ -243,7 +244,7 @@ export function ProgressSteps({ steps = [], current = 0, className = '', onStepC
  * dimensions are listed with a weight and a value.
  */
 /** @param {any} props */
-export function ScoreMeter({ label, value, weight, tone = 'score', className }) {
+export function ScoreMeter({ label, value, weight, tone = 'score', className }: DsProps) {
   return (
     <div className={cn('space-y-1.5', className)}>
       <div className="flex items-baseline justify-between gap-2">
diff --git a/src/components/ds/SearchInput.jsx b/src/components/ds/SearchInput.tsx
similarity index 96%
rename from src/components/ds/SearchInput.jsx
rename to src/components/ds/SearchInput.tsx
index e35d025..ef79c87 100644
--- a/src/components/ds/SearchInput.jsx
+++ b/src/components/ds/SearchInput.tsx
@@ -10,8 +10,7 @@ import { inputVariants } from '@/components/ui/input';
  * without re-running expensive work, while the field itself stays instantly
  * responsive. Pass `debounce={0}` for immediate updates.
  */
-/** @type {React.ForwardRefExoticComponent<any>} */
-export const SearchInput = React.forwardRef(
+export const SearchInput: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(
   (
     {
       value,
diff --git a/src/components/ds/SectionHeader.jsx b/src/components/ds/SectionHeader.tsx
similarity index 97%
rename from src/components/ds/SectionHeader.jsx
rename to src/components/ds/SectionHeader.tsx
index 2fb256b..5327e3b 100644
--- a/src/components/ds/SectionHeader.jsx
+++ b/src/components/ds/SectionHeader.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { ChevronRight } from 'lucide-react';
 import { cn } from '@/lib/utils';
@@ -21,7 +22,7 @@ export function SectionHeader({
   onViewAll,
   viewAllLabel = 'View all',
   className,
-}) {
+}: DsProps) {
   if (level === 'overline') {
     return (
       <div className={cn('flex items-center justify-between gap-3 mb-3', className)}>
diff --git a/src/components/ds/Skeleton.jsx b/src/components/ds/Skeleton.tsx
similarity index 91%
rename from src/components/ds/Skeleton.jsx
rename to src/components/ds/Skeleton.tsx
index 22040c1..777baa6 100644
--- a/src/components/ds/Skeleton.jsx
+++ b/src/components/ds/Skeleton.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 
@@ -10,7 +11,7 @@ import { cn } from '@/lib/utils';
  * `prefers-reduced-motion` (see index.css).
  */
 /** @param {any} props */
-export function Skeleton({ className = '', radius = 'md', ...props }) {
+export function Skeleton({ className = '', radius = 'md', ...props }: DsProps) {
   return (
     <div
       aria-hidden="true"
@@ -33,7 +34,7 @@ export function Skeleton({ className = '', radius = 'md', ...props }) {
 
 /** Paragraph placeholder. The last line is short, as real text is. */
 /** @param {any} props */
-export function SkeletonText({ lines = 3, className = '' }) {
+export function SkeletonText({ lines = 3, className = '' }: DsProps) {
   return (
     <div className={cn('space-y-2', className)} role="status" aria-label="Loading content">
       {Array.from({ length: lines }).map((_, i) => (
@@ -48,7 +49,7 @@ export function SkeletonText({ lines = 3, className = '' }) {
 
 /** Matches KpiCard: icon tile, big number, caption. */
 /** @param {any} props */
-export function SkeletonKpi({ className = '' }) {
+export function SkeletonKpi({ className = '' }: DsProps) {
   return (
     <div className={cn('glass-card border border-white/60 rounded-2xl p-4 shadow-sm', className)}>
       <Skeleton className="w-10 h-10 rounded-xl mb-3" />
@@ -60,7 +61,7 @@ export function SkeletonKpi({ className = '' }) {
 
 /** Matches a list row: avatar, two lines of text, trailing value. */
 /** @param {any} props */
-export function SkeletonRow({ className = '' }) {
+export function SkeletonRow({ className = '' }: DsProps) {
   return (
     <div className={cn('flex items-center gap-3 py-3', className)}>
       <Skeleton className="w-9 h-9" radius="full" />
@@ -75,7 +76,7 @@ export function SkeletonRow({ className = '' }) {
 
 /** Matches a card in a grid: title, meta, stat row. */
 /** @param {any} props */
-export function SkeletonCard({ className = '' }) {
+export function SkeletonCard({ className = '' }: DsProps) {
   return (
     <div className={cn('glass-card border border-white/60 rounded-2xl p-5 shadow-sm', className)}>
       <div className="flex items-center gap-3 mb-4">
@@ -100,7 +101,7 @@ export function SkeletonCard({ className = '' }) {
 
 /** Matches DataTable: header row plus n body rows. */
 /** @param {any} props */
-export function SkeletonTable({ rows = 5, columns = 4, className = '' }) {
+export function SkeletonTable({ rows = 5, columns = 4, className = '' }: DsProps) {
   return (
     <div className={cn('overflow-hidden', className)} role="status" aria-label="Loading table">
       <div className="flex items-center gap-4 px-4 py-3 border-b border-border bg-surface-subtle">
@@ -121,7 +122,7 @@ export function SkeletonTable({ rows = 5, columns = 4, className = '' }) {
 
 /** Matches ChartContainer: title, legend, plot area. */
 /** @param {any} props */
-export function SkeletonChart({ className = '', height = 240 }) {
+export function SkeletonChart({ className = '', height = 240 }: DsProps) {
   return (
     <div className={cn('glass-card border border-white/60 rounded-2xl p-6 shadow-sm', className)}>
       <Skeleton className="h-3.5 w-40 mb-2" />
@@ -137,7 +138,7 @@ export function SkeletonChart({ className = '', height = 240 }) {
 
 /** n SkeletonRows inside a surface — the common "loading a list" case. */
 /** @param {any} props */
-export function SkeletonList({ rows = 5, className = '' }) {
+export function SkeletonList({ rows = 5, className = '' }: DsProps) {
   return (
     <div className={cn('divide-y divide-border', className)} role="status" aria-label="Loading list">
       {Array.from({ length: rows }).map((_, i) => (
diff --git a/src/components/ds/StatusBadge.jsx b/src/components/ds/StatusBadge.tsx
similarity index 97%
rename from src/components/ds/StatusBadge.jsx
rename to src/components/ds/StatusBadge.tsx
index 65e3b93..f3ef741 100644
--- a/src/components/ds/StatusBadge.jsx
+++ b/src/components/ds/StatusBadge.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Badge } from '@/components/ui/badge';
@@ -78,7 +79,7 @@ const DOT_COLOR = {
  * much work; it also gives colour-blind users a second cue alongside the label.
  */
 /** @param {any} props */
-export function StatusBadge({ status, label, tone, dot = false, size = 'default', className, ...props }) {
+export function StatusBadge({ status, label, tone, dot = false, size = 'default', className, ...props }: DsProps) {
   const entry = STATUS_MAP[status] || {};
   const resolvedTone = tone || entry.tone || 'neutral';
   const resolvedLabel = label || entry.label || humanize(status);
diff --git a/src/components/ds/Surface.jsx b/src/components/ds/Surface.tsx
similarity index 96%
rename from src/components/ds/Surface.jsx
rename to src/components/ds/Surface.tsx
index a0259a0..38ae10d 100644
--- a/src/components/ds/Surface.jsx
+++ b/src/components/ds/Surface.tsx
@@ -55,8 +55,7 @@ const surfaceVariants = cva(
   }
 );
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Surface = React.forwardRef(
+const Surface: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(
   ({ className, variant, elevation, radius, padding, interactive, as, ...props }, ref) => {
     const Comp = as || 'div';
     return (
diff --git a/src/components/ds/Tabs.jsx b/src/components/ds/Tabs.tsx
similarity index 98%
rename from src/components/ds/Tabs.jsx
rename to src/components/ds/Tabs.tsx
index 27a8ea4..0b544c6 100644
--- a/src/components/ds/Tabs.jsx
+++ b/src/components/ds/Tabs.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { motion } from 'framer-motion';
 import { cn } from '@/lib/utils';
@@ -25,7 +26,7 @@ export function Tabs({
   layoutGroupId,
   className,
   ariaLabel = 'Views',
-}) {
+}: DsProps) {
   const normalized = tabs.map((t) => (typeof t === 'string' ? { value: t, label: t } : t));
   const fallbackId = React.useId();
   const groupId = layoutGroupId || fallbackId;
diff --git a/src/components/ds/Timeline.jsx b/src/components/ds/Timeline.tsx
similarity index 98%
rename from src/components/ds/Timeline.jsx
rename to src/components/ds/Timeline.tsx
index 20c3e83..054345e 100644
--- a/src/components/ds/Timeline.jsx
+++ b/src/components/ds/Timeline.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { StatusBadge } from '@/components/ds/StatusBadge';
@@ -21,7 +22,7 @@ const TONE_DOT = {
  * timeline can be nested inside a scrolling card without the rail detaching.
  */
 /** @param {any} props */
-export function Timeline({ items = [], className = '', compact = false }) {
+export function Timeline({ items = [], className = '', compact = false }: DsProps) {
   return (
     <ol className={cn('relative', className)}>
       {items.map((item, i) => {
diff --git a/src/components/ds/Toggle.jsx b/src/components/ds/Toggle.tsx
similarity index 98%
rename from src/components/ds/Toggle.jsx
rename to src/components/ds/Toggle.tsx
index 37235e5..75783cc 100644
--- a/src/components/ds/Toggle.jsx
+++ b/src/components/ds/Toggle.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from './props';
 import * as React from 'react';
 import { cn } from '@/lib/utils';
 import { Switch } from '@/components/ui/switch';
@@ -20,7 +21,7 @@ export function Toggle({
   align = 'end',
   className,
   id: providedId,
-}) {
+}: DsProps) {
   const reactId = React.useId();
   const id = providedId || reactId;
   const descriptionId = description ? `${id}-description` : undefined;
@@ -107,7 +108,7 @@ export function SegmentedToggle({
   variant = 'brand',
   className = '',
   ariaLabel = '',
-}) {
+}: DsProps) {
   const normalized = options.map((o) => (typeof o === 'string' ? { value: o, label: o } : o));
   const tone = SEGMENT_VARIANTS[variant] || SEGMENT_VARIANTS.brand;
 
diff --git a/src/components/ds/index.js b/src/components/ds/index.ts
similarity index 100%
rename from src/components/ds/index.js
rename to src/components/ds/index.ts
diff --git a/src/components/ds/props.ts b/src/components/ds/props.ts
new file mode 100644
index 0000000..26bfc83
--- /dev/null
+++ b/src/components/ds/props.ts
@@ -0,0 +1,22 @@
+/**
+ * The props bag a design-system component accepts.
+ *
+ * `any`-valued and open, and that is a faithful description rather than a
+ * retreat. These components carried no PropTypes and no validation, so in the
+ * JavaScript every prop was optional and every extra prop was passed through to
+ * the underlying element. TypeScript infers a destructured parameter without a
+ * default as REQUIRED, which invents a rule the component never had and
+ * rejects call sites that have always worked — 260 of them across pages this
+ * phase does not touch.
+ *
+ * The prop NAMES are not lost: every component still destructures them by name
+ * in its own signature, which is where a reader looks anyway. What is deferred
+ * is per-prop types, and the place to add those is each component's own
+ * interface, one at a time, with its call sites checked — not a sweep that
+ * guesses ninety-five of them at once.
+ *
+ * This alias exists so that decision is recorded once and is greppable when
+ * someone comes to tighten it, rather than being thirty separate `: any`s with
+ * no explanation between them.
+ */
+export type DsProps = Record<string, any>;
diff --git a/src/components/ds/toast.js b/src/components/ds/toast.ts
similarity index 84%
rename from src/components/ds/toast.js
rename to src/components/ds/toast.ts
index 1ecbfad..2e74641 100644
--- a/src/components/ds/toast.js
+++ b/src/components/ds/toast.ts
@@ -1,4 +1,5 @@
 import { toast as hotToast } from 'react-hot-toast';
+import type { ToastOptions } from 'react-hot-toast';
 
 /**
  * Toast — transient confirmation of a user action.
@@ -27,8 +28,12 @@ const BASE_STYLE = {
 
 const DURATIONS = { success: 2600, error: 4200, info: 3000, loading: Infinity };
 
-const withDefaults = (options = {}) => ({
-  position: /** @type {import('react-hot-toast').ToastPosition} */ ('bottom-center'),
+/* `ToastOptions` is react-hot-toast's own type, so `position` narrows to its
+   `ToastPosition` union rather than widening to `string` — which is what made
+   every call below unassignable. `Partial` because the callers pass a subset,
+   including none at all. */
+const withDefaults = (options: Partial<ToastOptions> = {}): Partial<ToastOptions> => ({
+  position: 'bottom-center',
   ...options,
   style: { ...BASE_STYLE, ...(options.style || {}) },
 });
diff --git a/src/components/ui/badge.jsx b/src/components/ui/badge.tsx
similarity index 92%
rename from src/components/ui/badge.jsx
rename to src/components/ui/badge.tsx
index b89888a..5dc22c5 100644
--- a/src/components/ui/badge.jsx
+++ b/src/components/ui/badge.tsx
@@ -42,8 +42,7 @@ const badgeVariants = cva(
   }
 )
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Badge = React.forwardRef(({ className, variant, size, shape, ...props }, ref) => (
+const Badge: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, variant, size, shape, ...props }, ref) => (
   <div ref={ref} className={cn(badgeVariants({ variant, size, shape }), className)} {...props} />
 ))
 Badge.displayName = "Badge"
diff --git a/src/components/ui/breadcrumb.jsx b/src/components/ui/breadcrumb.tsx
similarity index 74%
rename from src/components/ui/breadcrumb.jsx
rename to src/components/ui/breadcrumb.tsx
index c76ce19..b2a912d 100644
--- a/src/components/ui/breadcrumb.jsx
+++ b/src/components/ui/breadcrumb.tsx
@@ -1,17 +1,16 @@
+import type { DsProps } from '@/components/ds/props';
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { ChevronRight, MoreHorizontal } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Breadcrumb = React.forwardRef(
+const Breadcrumb: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(
   ({ ...props }, ref) => <nav ref={ref} aria-label="breadcrumb" {...props} />
 )
 Breadcrumb.displayName = "Breadcrumb"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (
+const BreadcrumbList: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <ol
     ref={ref}
     className={cn(
@@ -22,8 +21,7 @@ const BreadcrumbList = React.forwardRef(({ className, ...props }, ref) => (
 ))
 BreadcrumbList.displayName = "BreadcrumbList"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (
+const BreadcrumbItem: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <li
     ref={ref}
     className={cn("inline-flex items-center gap-1.5", className)}
@@ -31,8 +29,7 @@ const BreadcrumbItem = React.forwardRef(({ className, ...props }, ref) => (
 ))
 BreadcrumbItem.displayName = "BreadcrumbItem"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref) => {
+const BreadcrumbLink: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ asChild, className, ...props }, ref) => {
   const Comp = asChild ? Slot : "a"
 
   return (
@@ -44,8 +41,7 @@ const BreadcrumbLink = React.forwardRef(({ asChild, className, ...props }, ref)
 })
 BreadcrumbLink.displayName = "BreadcrumbLink"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const BreadcrumbPage = React.forwardRef(({ className, ...props }, ref) => (
+const BreadcrumbPage: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <span
     ref={ref}
     role="link"
@@ -61,7 +57,7 @@ const BreadcrumbSeparator = ({
   children,
   className,
   ...props
-}) => (
+}: DsProps) => (
   <li
     role="presentation"
     aria-hidden="true"
@@ -76,7 +72,7 @@ BreadcrumbSeparator.displayName = "BreadcrumbSeparator"
 const BreadcrumbEllipsis = ({
   className,
   ...props
-}) => (
+}: DsProps) => (
   <span
     role="presentation"
     aria-hidden="true"
diff --git a/src/components/ui/button.jsx b/src/components/ui/button.tsx
similarity index 97%
rename from src/components/ui/button.jsx
rename to src/components/ui/button.tsx
index 10696f0..faa3cb3 100644
--- a/src/components/ui/button.jsx
+++ b/src/components/ui/button.tsx
@@ -82,8 +82,7 @@ const buttonVariants = cva(
   }
 )
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Button = React.forwardRef((
+const Button: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>((
   { className, variant, size, shape, block, asChild = false, loading = false, disabled, children, ...props },
   ref
 ) => {
diff --git a/src/components/ui/card.jsx b/src/components/ui/card.tsx
similarity index 57%
rename from src/components/ui/card.jsx
rename to src/components/ui/card.tsx
index 0b6b672..feb8f00 100644
--- a/src/components/ui/card.jsx
+++ b/src/components/ui/card.tsx
@@ -2,8 +2,7 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Card = React.forwardRef(({ className, ...props }, ref) => (
+const Card: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("rounded-xl border bg-card text-card-foreground shadow", className)}
@@ -11,8 +10,7 @@ const Card = React.forwardRef(({ className, ...props }, ref) => (
 ))
 Card.displayName = "Card"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
+const CardHeader: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("flex flex-col space-y-1.5 p-6", className)}
@@ -20,8 +18,7 @@ const CardHeader = React.forwardRef(({ className, ...props }, ref) => (
 ))
 CardHeader.displayName = "CardHeader"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
+const CardTitle: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("font-semibold leading-none tracking-tight", className)}
@@ -29,8 +26,7 @@ const CardTitle = React.forwardRef(({ className, ...props }, ref) => (
 ))
 CardTitle.displayName = "CardTitle"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
+const CardDescription: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
@@ -38,14 +34,12 @@ const CardDescription = React.forwardRef(({ className, ...props }, ref) => (
 ))
 CardDescription.displayName = "CardDescription"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const CardContent = React.forwardRef(({ className, ...props }, ref) => (
+const CardContent: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
 ))
 CardContent.displayName = "CardContent"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const CardFooter = React.forwardRef(({ className, ...props }, ref) => (
+const CardFooter: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("flex items-center p-6 pt-0", className)}
diff --git a/src/components/ui/checkbox.jsx b/src/components/ui/checkbox.tsx
similarity index 86%
rename from src/components/ui/checkbox.jsx
rename to src/components/ui/checkbox.tsx
index eac62c7..8d38170 100644
--- a/src/components/ui/checkbox.jsx
+++ b/src/components/ui/checkbox.tsx
@@ -4,8 +4,7 @@ import { Check } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Checkbox = React.forwardRef(({ className, ...props }, ref) => (
+const Checkbox: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <CheckboxPrimitive.Root
     ref={ref}
     className={cn(
diff --git a/src/components/ui/collapsible.jsx b/src/components/ui/collapsible.ts
similarity index 100%
rename from src/components/ui/collapsible.jsx
rename to src/components/ui/collapsible.ts
diff --git a/src/components/ui/dialog.jsx b/src/components/ui/dialog.tsx
similarity index 83%
rename from src/components/ui/dialog.jsx
rename to src/components/ui/dialog.tsx
index cdab9b6..4cf260f 100644
--- a/src/components/ui/dialog.jsx
+++ b/src/components/ui/dialog.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from '@/components/ds/props';
 "use client"
 
 import * as React from "react"
@@ -14,8 +15,7 @@ const DialogPortal = DialogPrimitive.Portal
 
 const DialogClose = DialogPrimitive.Close
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
+const DialogOverlay: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
@@ -26,8 +26,7 @@ const DialogOverlay = React.forwardRef(({ className, ...props }, ref) => (
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DialogContent = React.forwardRef(({ className, children, ...props }, ref) => (
+const DialogContent: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, children, ...props }, ref) => (
   <DialogPortal>
     <DialogOverlay />
     <DialogPrimitive.Content
@@ -52,7 +51,7 @@ DialogContent.displayName = DialogPrimitive.Content.displayName
 const DialogHeader = ({
   className = '',
   ...props
-}) => (
+}: DsProps) => (
   <div
     className={cn("flex flex-col space-y-1.5 text-center sm:text-left", className)}
     {...props} />
@@ -63,15 +62,14 @@ DialogHeader.displayName = "DialogHeader"
 const DialogFooter = ({
   className = '',
   ...props
-}) => (
+}: DsProps) => (
   <div
     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props} />
 )
 DialogFooter.displayName = "DialogFooter"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
+const DialogTitle: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <DialogPrimitive.Title
     ref={ref}
     className={cn("text-lg font-semibold leading-none tracking-tight", className)}
@@ -79,8 +77,7 @@ const DialogTitle = React.forwardRef(({ className, ...props }, ref) => (
 ))
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DialogDescription = React.forwardRef(({ className, ...props }, ref) => (
+const DialogDescription: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <DialogPrimitive.Description
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
diff --git a/src/components/ui/dropdown-menu.jsx b/src/components/ui/dropdown-menu.tsx
similarity index 82%
rename from src/components/ui/dropdown-menu.jsx
rename to src/components/ui/dropdown-menu.tsx
index b1371fd..6ba0e69 100644
--- a/src/components/ui/dropdown-menu.jsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from '@/components/ds/props';
 import * as React from "react"
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
 import { Check, ChevronRight, Circle } from "lucide-react"
@@ -16,8 +17,7 @@ const DropdownMenuSub = DropdownMenuPrimitive.Sub
 
 const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, ...props }, ref) => (
+const DropdownMenuSubTrigger: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
     ref={ref}
     className={cn(
@@ -33,8 +33,7 @@ const DropdownMenuSubTrigger = React.forwardRef(({ className, inset, children, .
 DropdownMenuSubTrigger.displayName =
   DropdownMenuPrimitive.SubTrigger.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) => (
+const DropdownMenuSubContent: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.SubContent
     ref={ref}
     className={cn(
@@ -46,8 +45,7 @@ const DropdownMenuSubContent = React.forwardRef(({ className, ...props }, ref) =
 DropdownMenuSubContent.displayName =
   DropdownMenuPrimitive.SubContent.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+const DropdownMenuContent: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, sideOffset = 4, ...props }, ref) => (
   <DropdownMenuPrimitive.Portal>
     <DropdownMenuPrimitive.Content
       ref={ref}
@@ -62,8 +60,7 @@ const DropdownMenuContent = React.forwardRef(({ className, sideOffset = 4, ...pr
 ))
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref) => (
+const DropdownMenuItem: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
     ref={ref}
     className={cn(
@@ -75,8 +72,7 @@ const DropdownMenuItem = React.forwardRef(({ className, inset, ...props }, ref)
 ))
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checked, ...props }, ref) => (
+const DropdownMenuCheckboxItem: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, children, checked, ...props }, ref) => (
   <DropdownMenuPrimitive.CheckboxItem
     ref={ref}
     className={cn(
@@ -96,8 +92,7 @@ const DropdownMenuCheckboxItem = React.forwardRef(({ className, children, checke
 DropdownMenuCheckboxItem.displayName =
   DropdownMenuPrimitive.CheckboxItem.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DropdownMenuRadioItem = React.forwardRef(({ className, children, value, ...props }, ref) => (
+const DropdownMenuRadioItem: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, children, value, ...props }, ref) => (
   <DropdownMenuPrimitive.RadioItem
     ref={ref}
     value={value}
@@ -116,8 +111,7 @@ const DropdownMenuRadioItem = React.forwardRef(({ className, children, value, ..
 ))
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref) => (
+const DropdownMenuLabel: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
     ref={ref}
     className={cn("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className)}
@@ -125,8 +119,7 @@ const DropdownMenuLabel = React.forwardRef(({ className, inset, ...props }, ref)
 ))
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const DropdownMenuSeparator = React.forwardRef(({ className, ...props }, ref) => (
+const DropdownMenuSeparator: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <DropdownMenuPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
@@ -137,7 +130,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
 const DropdownMenuShortcut = ({
   className,
   ...props
-}) => {
+}: DsProps) => {
   return (
     (<span
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
diff --git a/src/components/ui/hover-card.jsx b/src/components/ui/hover-card.tsx
similarity index 85%
rename from src/components/ui/hover-card.jsx
rename to src/components/ui/hover-card.tsx
index 2f8e851..1358319 100644
--- a/src/components/ui/hover-card.jsx
+++ b/src/components/ui/hover-card.tsx
@@ -9,8 +9,7 @@ const HoverCard = HoverCardPrimitive.Root
 
 const HoverCardTrigger = HoverCardPrimitive.Trigger
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+const HoverCardContent: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
   <HoverCardPrimitive.Content
     ref={ref}
     align={align}
diff --git a/src/components/ui/image.jsx b/src/components/ui/image.tsx
similarity index 96%
rename from src/components/ui/image.jsx
rename to src/components/ui/image.tsx
index 993632c..d0ad3c1 100644
--- a/src/components/ui/image.jsx
+++ b/src/components/ui/image.tsx
@@ -72,8 +72,7 @@ function buildSrcSet(parsed, options) {
   ).join(", ")
 }
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const ImageWrapper = React.forwardRef(({ aspectRatio, className, style, children }, ref) => (
+const ImageWrapper: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ aspectRatio, className, style, children }, ref) => (
   <span
     ref={ref}
     className={cn("inline-block relative", className)}
@@ -84,8 +83,7 @@ const ImageWrapper = React.forwardRef(({ aspectRatio, className, style, children
 ))
 ImageWrapper.displayName = "ImageWrapper"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const ResponsiveImage = React.forwardRef(
+const ResponsiveImage: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(
   ({ parsed, fittingType, focalPoint, quality, className, style, aspectRatio, onLoad, ...props }, parentRef) => {
     const wrapperRef = React.useRef(null)
     const imgRef = React.useRef(null)
@@ -174,8 +172,7 @@ ResponsiveImage.displayName = "ResponsiveImage"
  * server-side, optionally anchored at a focal point. Other URLs render as a
  * plain <img>. Failed loads swap to a fallback image.
  */
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Image = React.forwardRef(
+const Image: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(
   (
     {
       src,
diff --git a/src/components/ui/input.jsx b/src/components/ui/input.tsx
similarity index 91%
rename from src/components/ui/input.jsx
rename to src/components/ui/input.tsx
index 16964ee..d01c6fe 100644
--- a/src/components/ui/input.jsx
+++ b/src/components/ui/input.tsx
@@ -34,8 +34,7 @@ const inputVariants = cva(
   }
 )
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Input = React.forwardRef(({ className, type, size, shape, ...props }, ref) => (
+const Input: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, type, size, shape, ...props }, ref) => (
   <input
     type={type}
     ref={ref}
diff --git a/src/components/ui/label.jsx b/src/components/ui/label.tsx
similarity index 79%
rename from src/components/ui/label.jsx
rename to src/components/ui/label.tsx
index aab7613..862c5a3 100644
--- a/src/components/ui/label.jsx
+++ b/src/components/ui/label.tsx
@@ -8,8 +8,7 @@ const labelVariants = cva(
   "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
 )
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Label = React.forwardRef(({ className, ...props }, ref) => (
+const Label: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <LabelPrimitive.Root ref={ref} className={cn(labelVariants(), className)} {...props} />
 ))
 Label.displayName = LabelPrimitive.Root.displayName
diff --git a/src/components/ui/popover.jsx b/src/components/ui/popover.tsx
similarity index 86%
rename from src/components/ui/popover.jsx
rename to src/components/ui/popover.tsx
index 11950a8..6803462 100644
--- a/src/components/ui/popover.jsx
+++ b/src/components/ui/popover.tsx
@@ -9,8 +9,7 @@ const PopoverTrigger = PopoverPrimitive.Trigger
 
 const PopoverAnchor = PopoverPrimitive.Anchor
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const PopoverContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+const PopoverContent: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
   <PopoverPrimitive.Portal>
     <PopoverPrimitive.Content
       ref={ref}
diff --git a/src/components/ui/radio-group.jsx b/src/components/ui/radio-group.tsx
similarity index 80%
rename from src/components/ui/radio-group.jsx
rename to src/components/ui/radio-group.tsx
index 8490d72..8a52d65 100644
--- a/src/components/ui/radio-group.jsx
+++ b/src/components/ui/radio-group.tsx
@@ -4,14 +4,12 @@ import { Circle } from "lucide-react"
 
 import { cn } from "@/lib/utils"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const RadioGroup = React.forwardRef(({ className, ...props }, ref) => {
+const RadioGroup: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => {
   return (<RadioGroupPrimitive.Root className={cn("grid gap-2", className)} {...props} ref={ref} />);
 })
 RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const RadioGroupItem = React.forwardRef(({ className = '', value, ...props }, ref) => {
+const RadioGroupItem: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className = '', value, ...props }, ref) => {
   return (
     (<RadioGroupPrimitive.Item
       ref={ref}
diff --git a/src/components/ui/select.jsx b/src/components/ui/select.tsx
similarity index 83%
rename from src/components/ui/select.jsx
rename to src/components/ui/select.tsx
index aa7d3fb..46cd057 100644
--- a/src/components/ui/select.jsx
+++ b/src/components/ui/select.tsx
@@ -12,8 +12,7 @@ const SelectGroup = SelectPrimitive.Group
 
 const SelectValue = SelectPrimitive.Value
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref) => (
+const SelectTrigger: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, children, ...props }, ref) => (
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
@@ -29,8 +28,7 @@ const SelectTrigger = React.forwardRef(({ className, children, ...props }, ref)
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) => (
+const SelectScrollUpButton: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollUpButton
     ref={ref}
     className={cn("flex cursor-default items-center justify-center py-1", className)}
@@ -40,8 +38,7 @@ const SelectScrollUpButton = React.forwardRef(({ className, ...props }, ref) =>
 ))
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) => (
+const SelectScrollDownButton: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <SelectPrimitive.ScrollDownButton
     ref={ref}
     className={cn("flex cursor-default items-center justify-center py-1", className)}
@@ -52,8 +49,7 @@ const SelectScrollDownButton = React.forwardRef(({ className, ...props }, ref) =
 SelectScrollDownButton.displayName =
   SelectPrimitive.ScrollDownButton.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SelectContent = React.forwardRef(({ className, children, position = "popper", ...props }, ref) => (
+const SelectContent: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, children, position = "popper", ...props }, ref) => (
   <SelectPrimitive.Portal>
     <SelectPrimitive.Content
       ref={ref}
@@ -77,8 +73,7 @@ const SelectContent = React.forwardRef(({ className, children, position = "poppe
 ))
 SelectContent.displayName = SelectPrimitive.Content.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SelectLabel = React.forwardRef(({ className, ...props }, ref) => (
+const SelectLabel: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
     className={cn("px-2 py-1.5 text-sm font-semibold", className)}
@@ -93,7 +88,7 @@ SelectLabel.displayName = SelectPrimitive.Label.displayName
    trap: Radix then has no value to match against, no item is ever `isSelected`,
    the trigger's value node never receives any item text, and every closed select
    renders as an empty pill with nothing but a chevron. */
-const SelectItem = React.forwardRef(({ className = '', children, value, ...props }, ref) => (
+const SelectItem = React.forwardRef<any, any>(({ className = '', children, value, ...props }, ref) => (
   <SelectPrimitive.Item
     ref={ref}
     value={value}
@@ -112,8 +107,7 @@ const SelectItem = React.forwardRef(({ className = '', children, value, ...props
 ))
 SelectItem.displayName = SelectPrimitive.Item.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SelectSeparator = React.forwardRef(({ className, ...props }, ref) => (
+const SelectSeparator: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <SelectPrimitive.Separator
     ref={ref}
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
diff --git a/src/components/ui/sheet.jsx b/src/components/ui/sheet.tsx
similarity index 84%
rename from src/components/ui/sheet.jsx
rename to src/components/ui/sheet.tsx
index cad7da4..2fe254c 100644
--- a/src/components/ui/sheet.jsx
+++ b/src/components/ui/sheet.tsx
@@ -1,3 +1,4 @@
+import type { DsProps } from '@/components/ds/props';
 "use client";
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
@@ -14,8 +15,7 @@ const SheetClose = SheetPrimitive.Close
 
 const SheetPortal = SheetPrimitive.Portal
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => (
+const SheetOverlay: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <SheetPrimitive.Overlay
     className={cn(
       "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
@@ -45,8 +45,7 @@ const sheetVariants = cva(
   }
 )
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SheetContent = React.forwardRef(({ side = "right", className, children, ...props }, ref) => (
+const SheetContent: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ side = "right", className, children, ...props }, ref) => (
   <SheetPortal>
     <SheetOverlay />
     <SheetPrimitive.Content ref={ref} className={cn(sheetVariants({ side }), className)} {...props}>
@@ -64,7 +63,7 @@ SheetContent.displayName = SheetPrimitive.Content.displayName
 const SheetHeader = ({
   className,
   ...props
-}) => (
+}: DsProps) => (
   <div
     className={cn("flex flex-col space-y-2 text-center sm:text-left", className)}
     {...props} />
@@ -74,15 +73,14 @@ SheetHeader.displayName = "SheetHeader"
 const SheetFooter = ({
   className,
   ...props
-}) => (
+}: DsProps) => (
   <div
     className={cn("flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2", className)}
     {...props} />
 )
 SheetFooter.displayName = "SheetFooter"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
+const SheetTitle: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <SheetPrimitive.Title
     ref={ref}
     className={cn("text-lg font-semibold text-foreground", className)}
@@ -90,8 +88,7 @@ const SheetTitle = React.forwardRef(({ className, ...props }, ref) => (
 ))
 SheetTitle.displayName = SheetPrimitive.Title.displayName
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const SheetDescription = React.forwardRef(({ className, ...props }, ref) => (
+const SheetDescription: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <SheetPrimitive.Description
     ref={ref}
     className={cn("text-sm text-muted-foreground", className)}
diff --git a/src/components/ui/slider.jsx b/src/components/ui/slider.tsx
similarity index 87%
rename from src/components/ui/slider.jsx
rename to src/components/ui/slider.tsx
index 417208b..217eba2 100644
--- a/src/components/ui/slider.jsx
+++ b/src/components/ui/slider.tsx
@@ -3,8 +3,7 @@ import * as SliderPrimitive from "@radix-ui/react-slider"
 
 import { cn } from "@/lib/utils"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Slider = React.forwardRef(({ className, ...props }, ref) => (
+const Slider: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <SliderPrimitive.Root
     ref={ref}
     className={cn("relative flex w-full touch-none select-none items-center", className)}
diff --git a/src/components/ui/switch.jsx b/src/components/ui/switch.tsx
similarity index 89%
rename from src/components/ui/switch.jsx
rename to src/components/ui/switch.tsx
index 5b206d1..67ffd7b 100644
--- a/src/components/ui/switch.jsx
+++ b/src/components/ui/switch.tsx
@@ -3,8 +3,7 @@ import * as SwitchPrimitives from "@radix-ui/react-switch"
 
 import { cn } from "@/lib/utils"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Switch = React.forwardRef(({ className, ...props }, ref) => (
+const Switch: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <SwitchPrimitives.Root
     className={cn(
       "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors duration-base ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-krow-blue/60 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-krow-blue data-[state=unchecked]:bg-surface-sunken data-[state=unchecked]:border-border",
diff --git a/src/components/ui/textarea.jsx b/src/components/ui/textarea.tsx
similarity index 80%
rename from src/components/ui/textarea.jsx
rename to src/components/ui/textarea.tsx
index fca2642..afaa78d 100644
--- a/src/components/ui/textarea.jsx
+++ b/src/components/ui/textarea.tsx
@@ -2,8 +2,7 @@ import * as React from "react"
 
 import { cn } from "@/lib/utils"
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Textarea = React.forwardRef(({ className, ...props }, ref) => {
+const Textarea: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => {
   return (
     (<textarea
       className={cn(
diff --git a/src/components/ui/toast.jsx b/src/components/ui/toast.tsx
similarity index 79%
rename from src/components/ui/toast.jsx
rename to src/components/ui/toast.tsx
index 57e3fb1..8a5e9d1 100644
--- a/src/components/ui/toast.jsx
+++ b/src/components/ui/toast.tsx
@@ -3,8 +3,7 @@ import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
 import { cn } from "@/lib/utils";
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const ToastProvider = React.forwardRef(({ ...props }, ref) => (
+const ToastProvider: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ ...props }, ref) => (
   <div
     ref={ref}
     className="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"
@@ -13,8 +12,7 @@ const ToastProvider = React.forwardRef(({ ...props }, ref) => (
 ));
 ToastProvider.displayName = "ToastProvider";
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const ToastViewport = React.forwardRef(({ ...props }, ref) => (
+const ToastViewport: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ ...props }, ref) => (
   <div
     ref={ref}
     className="fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]"
@@ -39,8 +37,7 @@ const toastVariants = cva(
   }
 );
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
+const Toast: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, variant, ...props }, ref) => {
   return (
     <div
       ref={ref}
@@ -51,8 +48,7 @@ const Toast = React.forwardRef(({ className, variant, ...props }, ref) => {
 });
 Toast.displayName = "Toast";
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
+const ToastAction: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn(
@@ -64,8 +60,7 @@ const ToastAction = React.forwardRef(({ className, ...props }, ref) => (
 ));
 ToastAction.displayName = "ToastAction";
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
+const ToastClose: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <button
     ref={ref}
     className={cn(
@@ -80,8 +75,7 @@ const ToastClose = React.forwardRef(({ className, ...props }, ref) => (
 ));
 ToastClose.displayName = "ToastClose";
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
+const ToastTitle: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("text-sm font-semibold", className)}
@@ -90,8 +84,7 @@ const ToastTitle = React.forwardRef(({ className, ...props }, ref) => (
 ));
 ToastTitle.displayName = "ToastTitle";
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const ToastDescription = React.forwardRef(({ className, ...props }, ref) => (
+const ToastDescription: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, ...props }, ref) => (
   <div
     ref={ref}
     className={cn("text-sm opacity-90", className)}
diff --git a/src/components/ui/toaster.jsx b/src/components/ui/toaster.tsx
similarity index 100%
rename from src/components/ui/toaster.jsx
rename to src/components/ui/toaster.tsx
diff --git a/src/components/ui/tooltip.jsx b/src/components/ui/tooltip.tsx
similarity index 87%
rename from src/components/ui/tooltip.jsx
rename to src/components/ui/tooltip.tsx
index 1fa45b9..bba34d0 100644
--- a/src/components/ui/tooltip.jsx
+++ b/src/components/ui/tooltip.tsx
@@ -11,8 +11,7 @@ const Tooltip = TooltipPrimitive.Root
 
 const TooltipTrigger = TooltipPrimitive.Trigger
 
-/** @type {React.ForwardRefExoticComponent<any>} */
-const TooltipContent = React.forwardRef(({ className, sideOffset = 4, ...props }, ref) => (
+const TooltipContent: React.ForwardRefExoticComponent<any> = React.forwardRef<any, any>(({ className, sideOffset = 4, ...props }, ref) => (
   <TooltipPrimitive.Portal>
     <TooltipPrimitive.Content
       ref={ref}
diff --git a/src/components/ui/use-toast.jsx b/src/components/ui/use-toast.ts
similarity index 100%
rename from src/components/ui/use-toast.jsx
rename to src/components/ui/use-toast.ts