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