@schandlergarcia/sf-web-components 1.7.0 → 1.8.0

package/dist/components/library/layout/PageContainer.js

@@ -1,9 +1,8 @@
-import { jsx as t } from "react/jsx-runtime";
-import "react";
-function i({ className: o = "", children: a }) {
-  return /* @__PURE__ */ t("div", { className: ["mx-auto w-full max-w-6xl px-4 sm:px-6", o].filter(Boolean).join(" "), children: a });
+import { jsx as e } from "react/jsx-runtime";
+function l({ className: a = "", children: o }) {
+  return /* @__PURE__ */ e("div", { className: ["mx-auto w-full max-w-6xl px-4 sm:px-6", a].filter(Boolean).join(" "), children: o });
 }
 export {
-  i as default
+  l as default
 };
 //# sourceMappingURL=PageContainer.js.map

package/dist/components/library/layout/PageContainer.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageContainer.js","sources":["../../../../src/components/library/layout/PageContainer.jsx"],"sourcesContent":["import React from \"react\";\n\nexport default function PageContainer({ className = \"\", children }) {\n  return (\n    <div className={[\"mx-auto w-full max-w-6xl px-4 sm:px-6\", className].filter(Boolean).join(\" \")}>\n      {children}\n    </div>\n  );\n}\n\n\n"],"names":["PageContainer","className","children","jsx"],"mappings":";;AAEA,SAAwBA,EAAc,EAAE,WAAAC,IAAY,IAAI,UAAAC,KAAY;AAClE,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,CAAC,yCAAyCF,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC1F,UAAAC,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"PageContainer.js","sources":["../../../../src/components/library/layout/PageContainer.tsx"],"sourcesContent":["import React from \"react\";\n\nexport interface PageContainerProps {\n  className?: string;\n  children: React.ReactNode;\n}\n\nexport default function PageContainer({ className = \"\", children }: PageContainerProps) {\n  return (\n    <div className={[\"mx-auto w-full max-w-6xl px-4 sm:px-6\", className].filter(Boolean).join(\" \")}>\n      {children}\n    </div>\n  );\n}\n"],"names":["PageContainer","className","children","jsx"],"mappings":";AAOA,SAAwBA,EAAc,EAAE,WAAAC,IAAY,IAAI,UAAAC,KAAgC;AACtF,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAW,CAAC,yCAAyCF,CAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAC1F,UAAAC,EAAA,CACH;AAEJ;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.7.0",
+  "version": "1.8.0",
   "description": "Reusable Salesforce web components library with Tailwind CSS v4 and shadcn/ui",
   "type": "module",
   "main": "./dist/index.js",
@@ -75,8 +75,11 @@
     "@radix-ui/react-dialog": "^1.1.15",
     "@radix-ui/react-popover": "^1.1.15",
     "@radix-ui/react-select": "^2.2.6",
+    "@types/d3": "^7.4.3",
     "@types/react": "^19.2.5",
     "@types/react-dom": "^19.2.3",
+    "@types/topojson-client": "^3.1.5",
+    "@types/topojson-specification": "^1.0.5",
     "@vitejs/plugin-react": "^5.1.1",
     "date-fns": "^4.0.0",
     "react-day-picker": "^9.14.0",

package/src/components/library/cards/{ActionList.jsx → ActionList.tsx}

@@ -1,19 +1,23 @@
-import React from "react";
 import UIButton from "../ui/UIButton";
 
-/**
- * Row of action buttons — typically used at the bottom of a dashboard section.
- *
- * @param {{ label: string, [key]: any }[] | string[]} actions
- * @param {string}     title
- * @param {Function}   onAction  Called with the action object/string when clicked
- */
+export interface Action {
+  label: string;
+  [key: string]: unknown;
+}
+
+export interface ActionListProps {
+  actions?: (Action | string)[];
+  title?: string;
+  onAction?: (action: Action | string) => void;
+  className?: string;
+}
+
 export default function ActionList({
   actions = [],
   title,
   onAction,
   className = "",
-}) {
+}: ActionListProps) {
   return (
     <div className={`rounded-2xl border border-slate-200 bg-white p-4 dark:border-slate-800 dark:bg-slate-900 ${className}`}>
       {title && (

package/src/components/library/cards/{ActivityCard.jsx → ActivityCard.tsx}

@@ -3,14 +3,37 @@ import { motion, AnimatePresence } from "framer-motion";
 import { ArrowPathIcon, CheckCircleIcon, ExclamationCircleIcon, ClockIcon } from "@heroicons/react/24/outline";
 import UIText from "../ui/Text";
 
-const STATUS_ICON = {
+type ActionStatus = "working" | "pending" | "complete" | "error";
+
+interface StatusIconConfig {
+  Icon: React.ComponentType<{ className?: string }>;
+  color: string;
+  spin: boolean;
+}
+
+const STATUS_ICON: Record<ActionStatus, StatusIconConfig> = {
   working:  { Icon: ArrowPathIcon,        color: "text-indigo-500",  spin: true },
   pending:  { Icon: ClockIcon,            color: "text-slate-400",   spin: false },
   complete: { Icon: CheckCircleIcon,      color: "text-emerald-500", spin: false },
   error:    { Icon: ExclamationCircleIcon, color: "text-red-500",     spin: false },
 };
 
-function ActionItem({ action }) {
+export interface ActivityAction {
+  id: string;
+  status: ActionStatus;
+  title?: string;
+  action?: string;
+  subtitle?: string;
+  traveler?: string;
+  timestamp?: string;
+  startedAt?: string;
+}
+
+interface ActionItemProps {
+  action: ActivityAction;
+}
+
+function ActionItem({ action }: ActionItemProps) {
   const s = STATUS_ICON[action.status] ?? STATUS_ICON.pending;
   return (
     <motion.div
@@ -34,13 +57,19 @@ function ActionItem({ action }) {
   );
 }
 
-export default function ActivityCard({ title = "Activity", actions = [], className = "" }) {
+export interface ActivityCardProps {
+  title?: string;
+  actions?: ActivityAction[];
+  className?: string;
+}
+
+export default function ActivityCard({ title = "Activity", actions = [], className = "" }: ActivityCardProps) {
   if (actions.length === 0) return null;
 
   return (
     <div className={className}>
       {title && (
-        <UIText as="div" size="xs" weight="semibold" muted className="mb-2 uppercase tracking-wider">
+        <UIText as="div" size="xs" weight="medium" muted className="mb-2 uppercase tracking-wider">
           {title}
         </UIText>
       )}

package/src/components/library/cards/{BaseCard.jsx → BaseCard.tsx}

@@ -1,6 +1,11 @@
 import React from "react";
 
-const VARIANT_CLASSES = {
+type Variant = "default" | "metric" | "chart" | "table" | "widget" | "status";
+type Size = "xs" | "sm" | "md" | "lg" | "xl" | "full";
+type Padding = "none" | "xs" | "sm" | "default" | "lg" | "xl";
+type Radius = "none" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl";
+
+const VARIANT_CLASSES: Record<Variant, string> = {
   default: "",
   metric: "",
   chart: "",
@@ -9,7 +14,7 @@ const VARIANT_CLASSES = {
   status: ""
 };
 
-const SIZE_CLASSES = {
+const SIZE_CLASSES: Record<Size, string> = {
   xs: "",
   sm: "min-h-[80px]",
   md: "min-h-[120px]",
@@ -18,7 +23,7 @@ const SIZE_CLASSES = {
   full: ""
 };
 
-const PADDING_CLASSES = {
+const PADDING_CLASSES: Record<Padding, string> = {
   none: "p-0",
   xs: "p-2",
   sm: "p-3",
@@ -27,6 +32,30 @@ const PADDING_CLASSES = {
   xl: "p-8"
 };
 
+export interface BaseCardProps extends Omit<React.HTMLAttributes<HTMLDivElement | HTMLButtonElement>, "onPress"> {
+  header?: React.ReactNode;
+  body?: React.ReactNode;
+  footer?: React.ReactNode;
+  children?: React.ReactNode;
+  variant?: Variant;
+  size?: Size;
+  padding?: Padding;
+  shadow?: boolean;
+  radius?: Radius;
+  border?: boolean;
+  isHoverable?: boolean;
+  isPressable?: boolean;
+  isLoading?: boolean;
+  isDisabled?: boolean;
+  isSelected?: boolean;
+  className?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+  footerClassName?: string;
+  onPress?: () => void;
+  onHover?: () => void;
+}
+
 export default function BaseCard({
   header,
   body,
@@ -50,7 +79,7 @@ export default function BaseCard({
   onPress,
   onHover,
   ...rest
-}) {
+}: BaseCardProps) {
   const Comp = isPressable ? "button" : "div";
 
   const radiusClass = radius ? `rounded-${radius}` : "rounded-2xl";
@@ -105,5 +134,3 @@ export default function BaseCard({
     </Comp>
   );
 }
-
-

package/src/components/library/cards/{CalloutCard.jsx → CalloutCard.tsx}

@@ -1,6 +1,8 @@
 import React from "react";
 
-const TONE_CLASSES = {
+type Tone = "neutral" | "success" | "warning" | "danger" | "info";
+
+const TONE_CLASSES: Record<Tone, string> = {
   neutral: "border-slate-200 bg-slate-50 text-slate-700 dark:border-slate-800 dark:bg-slate-950/30 dark:text-slate-200",
   success: "border-emerald-200 bg-emerald-50 text-emerald-800 dark:border-emerald-900/40 dark:bg-emerald-950/20 dark:text-emerald-200",
   warning: "border-amber-200 bg-amber-50 text-amber-800 dark:border-amber-900/40 dark:bg-amber-950/20 dark:text-amber-200",
@@ -8,21 +10,21 @@ const TONE_CLASSES = {
   info: "border-blue-200 bg-blue-50 text-blue-800 dark:border-blue-900/40 dark:bg-blue-950/20 dark:text-blue-200",
 };
 
-/**
- * Highlighted callout box for important inline messages.
- *
- * @param {string}  title
- * @param {string|ReactNode} message
- * @param {"neutral"|"success"|"warning"|"danger"|"info"} tone
- * @param {ReactNode} icon   Optional leading icon
- */
+export interface CalloutCardProps {
+  title?: string;
+  message: string | React.ReactNode;
+  tone?: Tone;
+  icon?: React.ReactNode;
+  className?: string;
+}
+
 export default function CalloutCard({
   title,
   message,
   tone = "neutral",
   icon,
   className = "",
-}) {
+}: CalloutCardProps) {
   return (
     <div className={`rounded-xl border p-4 ${TONE_CLASSES[tone] ?? TONE_CLASSES.neutral} ${className}`}>
       <div className="flex gap-3">

package/src/components/library/cards/{ChartCard.jsx → ChartCard.tsx}

@@ -1,8 +1,36 @@
 import React from "react";
-import BaseCard from "./BaseCard";
+import BaseCard, { BaseCardProps } from "./BaseCard";
 import UIText from "../ui/Text";
 import UIChip from "../ui/Chip";
 
+interface TimeRangeOption {
+  value: string;
+  label: string;
+}
+
+export interface TimeRange {
+  current: string;
+  options?: (TimeRangeOption | string)[];
+  onChange?: (value: string) => void;
+}
+
+export interface ChartCardProps extends Omit<BaseCardProps, "variant" | "header" | "body"> {
+  chart: React.ReactNode;
+  chartType?: string;
+  title?: string;
+  subtitle?: string;
+  filters?: React.ReactNode;
+  timeRange?: TimeRange;
+  actions?: React.ReactNode;
+  legend?: React.ReactNode;
+  height?: number;
+  showGrid?: boolean;
+  showAxes?: boolean;
+  data?: unknown[];
+  loading?: boolean;
+  error?: string | Error;
+}
+
 export default function ChartCard({
   chart,
   chartType,
@@ -19,7 +47,7 @@ export default function ChartCard({
   loading = false,
   error,
   ...cardProps
-}) {
+}: ChartCardProps) {
   const header = (
     <div className="flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
       <div className="min-w-0">
@@ -44,8 +72,8 @@ export default function ChartCard({
             aria-label="Time range"
           >
             {timeRange.options?.map((opt) => (
-              <option key={opt.value ?? opt} value={opt.value ?? opt}>
-                {opt.label ?? opt}
+              <option key={typeof opt === "string" ? opt : opt.value} value={typeof opt === "string" ? opt : opt.value}>
+                {typeof opt === "string" ? opt : opt.label}
               </option>
             ))}
           </select>
@@ -101,5 +129,3 @@ export default function ChartCard({
     />
   );
 }
-
-

package/src/components/library/cards/{FeedPanel.jsx → FeedPanel.tsx}

@@ -1,6 +1,17 @@
 import React from "react";
 import UIText from "../ui/Text";
 
+export interface FeedPanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+  title?: string;
+  subtitle?: string;
+  actions?: React.ReactNode;
+  children?: React.ReactNode;
+  width?: number | string;
+  className?: string;
+  headerClassName?: string;
+  bodyClassName?: string;
+}
+
 export default function FeedPanel({
   title,
   subtitle,
@@ -11,7 +22,7 @@ export default function FeedPanel({
   headerClassName = "",
   bodyClassName = "",
   ...rest
-}) {
+}: FeedPanelProps) {
   const widthStyle = width ? (typeof width === "number" ? { width: `${width}px` } : { width }) : undefined;
 
   return (
@@ -24,7 +35,7 @@ export default function FeedPanel({
         <div className={`shrink-0 border-b border-slate-100 px-4 py-3 dark:border-slate-800 ${headerClassName}`}>
           <div className="flex items-start justify-between gap-3">
             <div className="min-w-0">
-              {title && <UIText as="div" size="sm" weight="semibold">{title}</UIText>}
+              {title && <UIText as="div" size="sm" weight="medium">{title}</UIText>}
               {subtitle && <UIText as="div" size="xs" muted className="mt-0.5">{subtitle}</UIText>}
             </div>
             {actions && <div className="shrink-0">{actions}</div>}

package/src/components/library/cards/{ListCard.jsx → ListCard.tsx}

@@ -1,9 +1,9 @@
 import React from "react";
-import BaseCard from "./BaseCard";
+import BaseCard, { BaseCardProps } from "./BaseCard";
 import UIText from "../ui/Text";
 import UIChip from "../ui/Chip";
 
-function formatTimestamp(ts) {
+function formatTimestamp(ts: string | Date | undefined): string {
   if (!ts) return "";
   try {
     const d = ts instanceof Date ? ts : new Date(ts);
@@ -14,7 +14,11 @@ function formatTimestamp(ts) {
   }
 }
 
-function Avatar({ item }) {
+interface AvatarProps {
+  item: ListItem;
+}
+
+function Avatar({ item }: AvatarProps) {
   const avatar = item?.avatar;
   const name = item?.title ?? item?.name ?? "Item";
   if (!avatar) return null;
@@ -41,6 +45,38 @@ function Avatar({ item }) {
   );
 }
 
+export interface ListItem {
+  id?: string | number;
+  title?: string;
+  name?: string;
+  description?: string;
+  status?: string;
+  timestamp?: string | Date;
+  value?: string | number;
+  unit?: string;
+  avatar?: string | React.ReactNode;
+}
+
+export interface ListCardProps extends Omit<BaseCardProps, "variant" | "header" | "body"> {
+  items?: ListItem[];
+  title?: string;
+  subtitle?: string;
+  showAvatars?: boolean;
+  showStatus?: boolean;
+  showActions?: boolean;
+  showTimestamp?: boolean;
+  dense?: boolean;
+  divided?: boolean;
+  actions?: React.ReactNode;
+  itemActions?: (item: ListItem, index: number) => React.ReactNode;
+  onItemClick?: (item: ListItem, index: number) => void;
+  loading?: boolean;
+  error?: string | Error;
+  emptyMessage?: string;
+  emptyIcon?: React.ReactNode;
+  maxBodyHeight?: string | number;
+}
+
 export default function ListCard({
   items = [],
   title,
@@ -60,7 +96,7 @@ export default function ListCard({
   emptyIcon,
   maxBodyHeight,
   ...cardProps
-}) {
+}: ListCardProps) {
   const header = (
     <div className="flex items-start justify-between gap-3">
       <div className="min-w-0">
@@ -96,7 +132,9 @@ export default function ListCard({
 
   const padY = dense ? "py-2" : "py-3";
 
-  const scrollStyle = maxBodyHeight ? { maxHeight: maxBodyHeight, overflowY: "auto" } : {};
+  const scrollStyle: React.CSSProperties = maxBodyHeight
+    ? { maxHeight: typeof maxBodyHeight === "number" ? `${maxBodyHeight}px` : maxBodyHeight, overflowY: "auto" }
+    : {};
 
   const body =
     loading ? (
@@ -189,5 +227,3 @@ export default function ListCard({
 
   return <BaseCard variant="widget" header={header} body={body} isLoading={false} {...cardProps} />;
 }
-
-

package/src/components/library/cards/{MetricCard.jsx → MetricCard.tsx}

@@ -1,13 +1,17 @@
 import React from "react";
-import BaseCard from "./BaseCard";
+import BaseCard, { BaseCardProps } from "./BaseCard";
 
-const CHANGE_STYLES = {
+type ChangeType = "positive" | "negative" | "neutral";
+type Color = "default" | "primary" | "success" | "warning" | "danger";
+type Layout = "default" | "compact";
+
+const CHANGE_STYLES: Record<ChangeType, string> = {
   positive: "text-emerald-700 dark:text-emerald-400",
   negative: "text-rose-700 dark:text-rose-400",
   neutral: "text-slate-600 dark:text-slate-300"
 };
 
-const COLOR_STYLES = {
+const COLOR_STYLES: Record<Color, string> = {
   default: "bg-slate-100 text-slate-800 dark:bg-slate-800 dark:text-slate-100",
   primary: "bg-brand-100 text-brand-800 dark:bg-brand-950/40 dark:text-brand-200",
   success: "bg-emerald-100 text-emerald-800 dark:bg-emerald-950/40 dark:text-emerald-200",
@@ -15,6 +19,23 @@ const COLOR_STYLES = {
   danger: "bg-rose-100 text-rose-800 dark:bg-rose-950/40 dark:text-rose-200"
 };
 
+export interface MetricCardProps extends Omit<BaseCardProps, "variant" | "padding" | "size" | "header" | "body" | "footer"> {
+  title: string;
+  value: string | number;
+  subtitle?: string;
+  change?: string | number;
+  changeType?: ChangeType;
+  icon?: React.ReactNode;
+  color?: Color;
+  trend?: string;
+  trendIcon?: React.ReactNode;
+  layout?: Layout;
+  footer?: React.ReactNode;
+  actions?: React.ReactNode;
+  loading?: boolean;
+  error?: string | Error;
+}
+
 export default function MetricCard({
   title,
   value,
@@ -31,7 +52,7 @@ export default function MetricCard({
   loading = false,
   error,
   ...cardProps
-}) {
+}: MetricCardProps) {
   const changeClass = CHANGE_STYLES[changeType] ?? CHANGE_STYLES.neutral;
   const pillClass = COLOR_STYLES[color] ?? COLOR_STYLES.default;
 
@@ -105,5 +126,3 @@ export default function MetricCard({
     />
   );
 }
-
-

package/src/components/library/cards/{MetricsStrip.jsx → MetricsStrip.tsx}

@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import { useState } from "react";
 
 const PLACEHOLDER_METRICS = [
   { label: "Metric A", value: "—", trend: null },
@@ -6,21 +6,27 @@ const PLACEHOLDER_METRICS = [
   { label: "Metric C", value: "—", trend: null },
 ];
 
-/**
- * Horizontal strip of KPI metrics — compact alternative to a row of MetricCards.
- *
- * @param {{ label: string, value: string|number, trend?: string|number }[]} metrics
- * @param {string}  title
- * @param {boolean} collapsible   Allow collapsing into a single-line summary
- * @param {boolean} collapsed     Initial collapsed state
- */
+export interface Metric {
+  label: string;
+  value: string | number;
+  trend?: string | number | null;
+}
+
+export interface MetricsStripProps {
+  metrics?: Metric[];
+  title?: string;
+  collapsible?: boolean;
+  collapsed?: boolean;
+  className?: string;
+}
+
 export default function MetricsStrip({
   metrics = [],
   title,
   collapsible = false,
   collapsed: initialCollapsed = false,
   className = "",
-}) {
+}: MetricsStripProps) {
   const [collapsed, setCollapsed] = useState(initialCollapsed);
   const items = metrics.length ? metrics : PLACEHOLDER_METRICS;
 
@@ -70,8 +76,12 @@ export default function MetricsStrip({
   );
 }
 
-function TrendBadge({ trend }) {
-  const isPositive = String(trend).startsWith?.("+") || trend > 0;
+interface TrendBadgeProps {
+  trend: string | number;
+}
+
+function TrendBadge({ trend }: TrendBadgeProps) {
+  const isPositive = String(trend).startsWith?.("+") || (typeof trend === "number" && trend > 0);
   const color = isPositive ? "text-red-500" : "text-emerald-500";
   const label = typeof trend === "number" ? (trend > 0 ? `+${trend}` : trend) : trend;
   return <span className={`text-xs ${color}`}>{label}</span>;

package/src/components/library/cards/{SectionCard.jsx → SectionCard.tsx}

@@ -1,27 +1,48 @@
-import React from "react";
-import BaseCard from "./BaseCard";
+import BaseCard, { BaseCardProps } from "./BaseCard";
 import UIText from "../ui/Text";
 
-const VARIANT_STYLES = {
+type Variant = "default" | "primary" | "secondary" | "accent";
+type Size = "sm" | "md" | "lg" | "xl";
+type Alignment = "left" | "center" | "right";
+
+const VARIANT_STYLES: Record<Variant, string> = {
   default: "bg-white dark:bg-slate-900",
   primary: "bg-brand-50 dark:bg-brand-950/30",
   secondary: "bg-slate-50 dark:bg-slate-950/30",
   accent: "bg-emerald-50 dark:bg-emerald-950/25"
 };
 
-const SIZE_STYLES = {
+interface SizeConfig {
+  title: string;
+  desc: string;
+  pad: string;
+}
+
+const SIZE_STYLES: Record<Size, SizeConfig> = {
   sm: { title: "text-lg", desc: "text-sm", pad: "p-4" },
   md: { title: "text-xl", desc: "text-sm", pad: "p-5" },
   lg: { title: "text-2xl", desc: "text-base", pad: "p-6" },
   xl: { title: "text-3xl", desc: "text-base", pad: "p-7" }
 };
 
-const ALIGN_STYLES = {
+const ALIGN_STYLES: Record<Alignment, string> = {
   left: "text-left items-start",
   center: "text-center items-center",
   right: "text-right items-end"
 };
 
+export interface SectionCardProps extends Omit<BaseCardProps, "variant" | "padding" | "body"> {
+  title?: string;
+  description?: string;
+  label?: string;
+  variant?: Variant;
+  showDivider?: boolean;
+  alignment?: Alignment;
+  size?: Size;
+  isDark?: boolean;
+  className?: string;
+}
+
 export default function SectionCard({
   title,
   description,
@@ -33,7 +54,7 @@ export default function SectionCard({
   isDark = false,
   className = "",
   ...cardProps
-}) {
+}: SectionCardProps) {
   const s = SIZE_STYLES[size] ?? SIZE_STYLES.md;
   const align = ALIGN_STYLES[alignment] ?? ALIGN_STYLES.left;
   const variantClass = VARIANT_STYLES[variant] ?? VARIANT_STYLES.default;
@@ -79,5 +100,3 @@ export default function SectionCard({
     />
   );
 }
-
-

package/src/components/library/cards/{SemanticMetricCard.jsx → SemanticMetricCard.tsx}

@@ -1,7 +1,21 @@
 import React from "react";
-import MetricCard from "./MetricCard";
+import MetricCard, { MetricCardProps } from "./MetricCard";
 import { getSemanticMetric } from "../data/chartDataProvider";
 
+export interface SemanticMetricCardProps extends Omit<MetricCardProps, "value"> {
+  semanticId: string;
+  metricId?: string;
+  value?: string | number;
+  unit?: string;
+  format?: string;
+  changeLabel?: string;
+  description?: string;
+  seriesName?: string;
+  availableFilters?: string[];
+  showFilters?: boolean;
+  compact?: boolean;
+}
+
 export default function SemanticMetricCard({
   semanticId,
   metricId,
@@ -21,7 +35,7 @@ export default function SemanticMetricCard({
   className,
   loading = false,
   ...rest
-}) {
+}: SemanticMetricCardProps) {
   const metric = React.useMemo(() => getSemanticMetric(semanticId, metricId), [semanticId, metricId]);
 
   const resolvedTitle = title ?? metric?.title ?? metricId ?? "Metric";
@@ -32,13 +46,12 @@ export default function SemanticMetricCard({
   const resolvedChangeType = metric?.changeType ?? "neutral";
   const resolvedColor = metric?.color ?? "default";
 
-  // Note: unit/format/etc. are accepted for forward compatibility; basic rendering is handled by MetricCard for now.
   return (
     <MetricCard
       title={resolvedTitle}
       subtitle={resolvedSubtitle}
       value={resolvedValue}
-      change={resolvedChangeLabel ? `${resolvedChangeLabel} ${resolvedChange ?? ""}`.trim() : resolvedChange}
+      change={changeLabel ? `${changeLabel} ${resolvedChange ?? ""}`.trim() : resolvedChange}
       changeType={resolvedChangeType}
       color={resolvedColor}
       trend={resolvedTrend}
@@ -49,4 +62,3 @@ export default function SemanticMetricCard({
     />
   );
 }
-