@schandlergarcia/sf-web-components 1.7.0 → 1.9.0

package/dist/components/library/skeletons/CardSkeleton.js.map

@@ -1 +1 @@
-{"version":3,"file":"CardSkeleton.js","sources":["../../../../src/components/library/skeletons/CardSkeleton.jsx"],"sourcesContent":["import React from \"react\";\n\nexport default function CardSkeleton({ lines = 3, className = \"\" }) {\n  return (\n    <div\n      className={[\n        \"rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      aria-busy=\"true\"\n      aria-label=\"Loading\"\n    >\n      <div className=\"space-y-3\">\n        {Array.from({ length: lines }).map((_, i) => (\n          <div\n            key={i}\n            className={[\n              \"h-4 animate-pulse rounded bg-slate-200 dark:bg-slate-800\",\n              i === 0 ? \"w-1/3\" : i === 1 ? \"w-2/3\" : \"w-1/2\"\n            ].join(\" \")}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n\n\n"],"names":["CardSkeleton","lines","className","jsx","_","i"],"mappings":";;AAEA,SAAwBA,EAAa,EAAE,OAAAC,IAAQ,GAAG,WAAAC,IAAY,MAAM;AAClE,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAD;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,aAAU;AAAA,MACV,cAAW;AAAA,MAEX,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQF,GAAO,EAAE,IAAI,CAACG,GAAGC,MACrC,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW;AAAA,YACT;AAAA,YACAE,MAAM,IAAI,UAAUA,MAAM,IAAI,UAAU;AAAA,UAAA,EACxC,KAAK,GAAG;AAAA,QAAA;AAAA,QAJLA;AAAA,MAAA,CAMR,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}
+{"version":3,"file":"CardSkeleton.js","sources":["../../../../src/components/library/skeletons/CardSkeleton.tsx"],"sourcesContent":["export interface CardSkeletonProps {\n  lines?: number;\n  className?: string;\n}\n\nexport default function CardSkeleton({ lines = 3, className = \"\" }: CardSkeletonProps) {\n  return (\n    <div\n      className={[\n        \"rounded-2xl border border-slate-200 bg-white p-5 shadow-sm dark:border-slate-800 dark:bg-slate-900\",\n        className\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      aria-busy=\"true\"\n      aria-label=\"Loading\"\n    >\n      <div className=\"space-y-3\">\n        {Array.from({ length: lines }).map((_, i) => (\n          <div\n            key={i}\n            className={[\n              \"h-4 animate-pulse rounded bg-slate-200 dark:bg-slate-800\",\n              i === 0 ? \"w-1/3\" : i === 1 ? \"w-2/3\" : \"w-1/2\"\n            ].join(\" \")}\n          />\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":["CardSkeleton","lines","className","jsx","_","i"],"mappings":";AAKA,SAAwBA,EAAa,EAAE,OAAAC,IAAQ,GAAG,WAAAC,IAAY,MAAyB;AACrF,SACE,gBAAAC;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW;AAAA,QACT;AAAA,QACAD;AAAA,MAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,MACX,aAAU;AAAA,MACV,cAAW;AAAA,MAEX,UAAA,gBAAAC,EAAC,OAAA,EAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQF,GAAO,EAAE,IAAI,CAACG,GAAGC,MACrC,gBAAAF;AAAA,QAAC;AAAA,QAAA;AAAA,UAEC,WAAW;AAAA,YACT;AAAA,YACAE,MAAM,IAAI,UAAUA,MAAM,IAAI,UAAU;AAAA,UAAA,EACxC,KAAK,GAAG;AAAA,QAAA;AAAA,QAJLA;AAAA,MAAA,CAMR,EAAA,CACH;AAAA,IAAA;AAAA,EAAA;AAGN;"}

package/dist/components/library/theme/AppThemeProvider.d.ts

@@ -1,51 +1,14 @@
-export function useThemeMode(): {
-    mode: string;
-    theme: {
-        colors: {
-            brand: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-            accent: {
-                50: string;
-                100: string;
-                200: string;
-                300: string;
-                400: string;
-                500: string;
-                600: string;
-                700: string;
-                800: string;
-                900: string;
-                950: string;
-            };
-        };
-        fonts: {
-            sans: string;
-            mono: string;
-        };
-        radius: {
-            sm: string;
-            md: string;
-            lg: string;
-        };
-        spacing: {
-            pageX: string;
-            pageY: string;
-        };
-    };
+import React from "react";
+import { Tokens } from "./tokens";
+export type ThemeMode = "light" | "dark";
+export interface ThemeModeContextValue {
+    mode: ThemeMode;
+    theme: Tokens;
     toggle: () => void;
-};
-export default function AppThemeProvider({ initialMode, children }: {
-    initialMode?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+}
+export declare function useThemeMode(): ThemeModeContextValue;
+export interface AppThemeProviderProps {
+    initialMode?: ThemeMode;
+    children: React.ReactNode;
+}
+export default function AppThemeProvider({ initialMode, children }: AppThemeProviderProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/library/theme/AppThemeProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppThemeProvider.js","sources":["../../../../src/components/library/theme/AppThemeProvider.jsx"],"sourcesContent":["import React from \"react\";\nimport { tokens, getTokenCSSProperties } from \"./tokens\";\n\nconst ThemeModeContext = React.createContext({\n  mode: \"light\",\n  theme: tokens,\n  toggle: () => {}\n});\n\nconst STORAGE_KEY = \"app-color-mode\";\n\nfunction applyHtmlDarkClass(mode) {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  if (mode === \"dark\") root.classList.add(\"dark\");\n  else root.classList.remove(\"dark\");\n}\n\nfunction applyTokenCSSProperties() {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  const props = getTokenCSSProperties();\n  for (const [key, value] of Object.entries(props)) {\n    root.style.setProperty(key, value);\n  }\n}\n\nexport function useThemeMode() {\n  return React.useContext(ThemeModeContext);\n}\n\nexport default function AppThemeProvider({ initialMode = \"light\", children }) {\n  const [mode, setMode] = React.useState(initialMode);\n\n  React.useEffect(() => {\n    applyTokenCSSProperties();\n  }, []);\n\n  React.useEffect(() => {\n    try {\n      const stored = window.localStorage.getItem(STORAGE_KEY);\n      if (stored === \"light\" || stored === \"dark\") setMode(stored);\n    } catch {\n      // ignore\n    }\n  }, []);\n\n  React.useEffect(() => {\n    applyHtmlDarkClass(mode);\n    try {\n      window.localStorage.setItem(STORAGE_KEY, mode);\n    } catch {\n      // ignore\n    }\n  }, [mode]);\n\n  const value = React.useMemo(\n    () => ({\n      mode,\n      theme: tokens,\n      toggle: () => setMode((m) => (m === \"dark\" ? \"light\" : \"dark\"))\n    }),\n    [mode]\n  );\n\n  return <ThemeModeContext.Provider value={value}>{children}</ThemeModeContext.Provider>;\n}\n"],"names":["ThemeModeContext","React","tokens","STORAGE_KEY","applyHtmlDarkClass","mode","root","applyTokenCSSProperties","props","getTokenCSSProperties","key","value","useThemeMode","AppThemeProvider","initialMode","children","setMode","stored","m","jsx"],"mappings":";;;AAGA,MAAMA,IAAmBC,EAAM,cAAc;AAAA,EAC3C,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,QAAQ,MAAM;AAAA,EAAC;AACjB,CAAC,GAEKC,IAAc;AAEpB,SAASC,EAAmBC,GAAM;AAChC,MAAI,OAAO,WAAa,IAAa;AACrC,QAAMC,IAAO,SAAS;AACtB,EAAID,MAAS,SAAQC,EAAK,UAAU,IAAI,MAAM,IACzCA,EAAK,UAAU,OAAO,MAAM;AACnC;AAEA,SAASC,IAA0B;AACjC,MAAI,OAAO,WAAa,IAAa;AACrC,QAAMD,IAAO,SAAS,iBAChBE,IAAQC,EAAA;AACd,aAAW,CAACC,GAAKC,CAAK,KAAK,OAAO,QAAQH,CAAK;AAC7C,IAAAF,EAAK,MAAM,YAAYI,GAAKC,CAAK;AAErC;AAEO,SAASC,IAAe;AAC7B,SAAOX,EAAM,WAAWD,CAAgB;AAC1C;AAEA,SAAwBa,EAAiB,EAAE,aAAAC,IAAc,SAAS,UAAAC,KAAY;AAC5E,QAAM,CAACV,GAAMW,CAAO,IAAIf,EAAM,SAASa,CAAW;AAElDb,EAAAA,EAAM,UAAU,MAAM;AACpB,IAAAM,EAAA;AAAA,EACF,GAAG,CAAA,CAAE,GAELN,EAAM,UAAU,MAAM;AACpB,QAAI;AACF,YAAMgB,IAAS,OAAO,aAAa,QAAQd,CAAW;AACtD,OAAIc,MAAW,WAAWA,MAAW,aAAgBA,CAAM;AAAA,IAC7D,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAA,CAAE,GAELhB,EAAM,UAAU,MAAM;AACpB,IAAAG,EAAmBC,CAAI;AACvB,QAAI;AACF,aAAO,aAAa,QAAQF,GAAaE,CAAI;AAAA,IAC/C,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAACA,CAAI,CAAC;AAET,QAAMM,IAAQV,EAAM;AAAA,IAClB,OAAO;AAAA,MACL,MAAAI;AAAA,MACA,OAAOH;AAAA,MACP,QAAQ,MAAMc,EAAQ,CAACE,MAAOA,MAAM,SAAS,UAAU,MAAO;AAAA,IAAA;AAAA,IAEhE,CAACb,CAAI;AAAA,EAAA;AAGP,SAAO,gBAAAc,EAACnB,EAAiB,UAAjB,EAA0B,OAAAW,GAAe,UAAAI,EAAA,CAAS;AAC5D;"}
+{"version":3,"file":"AppThemeProvider.js","sources":["../../../../src/components/library/theme/AppThemeProvider.tsx"],"sourcesContent":["import React from \"react\";\nimport { tokens, getTokenCSSProperties, Tokens } from \"./tokens\";\n\nexport type ThemeMode = \"light\" | \"dark\";\n\nexport interface ThemeModeContextValue {\n  mode: ThemeMode;\n  theme: Tokens;\n  toggle: () => void;\n}\n\nconst ThemeModeContext = React.createContext<ThemeModeContextValue>({\n  mode: \"light\",\n  theme: tokens,\n  toggle: () => {}\n});\n\nconst STORAGE_KEY = \"app-color-mode\";\n\nfunction applyHtmlDarkClass(mode: ThemeMode): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  if (mode === \"dark\") root.classList.add(\"dark\");\n  else root.classList.remove(\"dark\");\n}\n\nfunction applyTokenCSSProperties(): void {\n  if (typeof document === \"undefined\") return;\n  const root = document.documentElement;\n  const props = getTokenCSSProperties();\n  for (const [key, value] of Object.entries(props)) {\n    root.style.setProperty(key, value);\n  }\n}\n\nexport function useThemeMode(): ThemeModeContextValue {\n  return React.useContext(ThemeModeContext);\n}\n\nexport interface AppThemeProviderProps {\n  initialMode?: ThemeMode;\n  children: React.ReactNode;\n}\n\nexport default function AppThemeProvider({ initialMode = \"light\", children }: AppThemeProviderProps) {\n  const [mode, setMode] = React.useState<ThemeMode>(initialMode);\n\n  React.useEffect(() => {\n    applyTokenCSSProperties();\n  }, []);\n\n  React.useEffect(() => {\n    try {\n      const stored = window.localStorage.getItem(STORAGE_KEY);\n      if (stored === \"light\" || stored === \"dark\") setMode(stored);\n    } catch {\n      // ignore\n    }\n  }, []);\n\n  React.useEffect(() => {\n    applyHtmlDarkClass(mode);\n    try {\n      window.localStorage.setItem(STORAGE_KEY, mode);\n    } catch {\n      // ignore\n    }\n  }, [mode]);\n\n  const value = React.useMemo(\n    () => ({\n      mode,\n      theme: tokens,\n      toggle: () => setMode((m) => (m === \"dark\" ? \"light\" : \"dark\"))\n    }),\n    [mode]\n  );\n\n  return <ThemeModeContext.Provider value={value}>{children}</ThemeModeContext.Provider>;\n}\n"],"names":["ThemeModeContext","React","tokens","STORAGE_KEY","applyHtmlDarkClass","mode","root","applyTokenCSSProperties","props","getTokenCSSProperties","key","value","useThemeMode","AppThemeProvider","initialMode","children","setMode","stored","m","jsx"],"mappings":";;;AAWA,MAAMA,IAAmBC,EAAM,cAAqC;AAAA,EAClE,MAAM;AAAA,EACN,OAAOC;AAAA,EACP,QAAQ,MAAM;AAAA,EAAC;AACjB,CAAC,GAEKC,IAAc;AAEpB,SAASC,EAAmBC,GAAuB;AACjD,MAAI,OAAO,WAAa,IAAa;AACrC,QAAMC,IAAO,SAAS;AACtB,EAAID,MAAS,SAAQC,EAAK,UAAU,IAAI,MAAM,IACzCA,EAAK,UAAU,OAAO,MAAM;AACnC;AAEA,SAASC,IAAgC;AACvC,MAAI,OAAO,WAAa,IAAa;AACrC,QAAMD,IAAO,SAAS,iBAChBE,IAAQC,EAAA;AACd,aAAW,CAACC,GAAKC,CAAK,KAAK,OAAO,QAAQH,CAAK;AAC7C,IAAAF,EAAK,MAAM,YAAYI,GAAKC,CAAK;AAErC;AAEO,SAASC,IAAsC;AACpD,SAAOX,EAAM,WAAWD,CAAgB;AAC1C;AAOA,SAAwBa,EAAiB,EAAE,aAAAC,IAAc,SAAS,UAAAC,KAAmC;AACnG,QAAM,CAACV,GAAMW,CAAO,IAAIf,EAAM,SAAoBa,CAAW;AAE7Db,EAAAA,EAAM,UAAU,MAAM;AACpB,IAAAM,EAAA;AAAA,EACF,GAAG,CAAA,CAAE,GAELN,EAAM,UAAU,MAAM;AACpB,QAAI;AACF,YAAMgB,IAAS,OAAO,aAAa,QAAQd,CAAW;AACtD,OAAIc,MAAW,WAAWA,MAAW,aAAgBA,CAAM;AAAA,IAC7D,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAAA,CAAE,GAELhB,EAAM,UAAU,MAAM;AACpB,IAAAG,EAAmBC,CAAI;AACvB,QAAI;AACF,aAAO,aAAa,QAAQF,GAAaE,CAAI;AAAA,IAC/C,QAAQ;AAAA,IAER;AAAA,EACF,GAAG,CAACA,CAAI,CAAC;AAET,QAAMM,IAAQV,EAAM;AAAA,IAClB,OAAO;AAAA,MACL,MAAAI;AAAA,MACA,OAAOH;AAAA,MACP,QAAQ,MAAMc,EAAQ,CAACE,MAAOA,MAAM,SAAS,UAAU,MAAO;AAAA,IAAA;AAAA,IAEhE,CAACb,CAAI;AAAA,EAAA;AAGP,SAAO,gBAAAc,EAACnB,EAAiB,UAAjB,EAA0B,OAAAW,GAAe,UAAAI,EAAA,CAAS;AAC5D;"}

package/dist/components/library/theme/tokens.d.ts

@@ -1,48 +1,49 @@
+/**
+ * Design tokens — single source of truth for branding.
+ *
+ * To rebrand a command center:
+ *   1. Swap the `brand` palette (use any Tailwind-style color scale)
+ *   2. Swap the `accent` palette
+ *   3. Change `fonts.sans` in _app.js (next/font import)
+ *
+ * AppThemeProvider injects these as CSS custom properties on :root,
+ * and tailwind.config.js references them via var(--color-brand-*).
+ */
+export interface ColorShades {
+    50: string;
+    100: string;
+    200: string;
+    300: string;
+    400: string;
+    500: string;
+    600: string;
+    700: string;
+    800: string;
+    900: string;
+    950: string;
+}
+export interface Tokens {
+    colors: {
+        brand: ColorShades;
+        accent: ColorShades;
+    };
+    fonts: {
+        sans: string;
+        mono: string;
+    };
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    spacing: {
+        pageX: string;
+        pageY: string;
+    };
+}
+export declare const tokens: Tokens;
 /**
  * Generates CSS custom property assignments from the token palettes.
  * Used by AppThemeProvider to inject on :root at runtime.
  */
-export function getTokenCSSProperties(): {};
-export namespace tokens {
-    namespace colors {
-        let brand: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-        };
-        let accent: {
-            50: string;
-            100: string;
-            200: string;
-            300: string;
-            400: string;
-            500: string;
-            600: string;
-            700: string;
-            800: string;
-            900: string;
-            950: string;
-        };
-    }
-    namespace fonts {
-        let sans: string;
-        let mono: string;
-    }
-    namespace radius {
-        let sm: string;
-        let md: string;
-        let lg: string;
-    }
-    namespace spacing {
-        let pageX: string;
-        let pageY: string;
-    }
-}
+export declare function getTokenCSSProperties(): Record<string, string>;

package/dist/components/library/theme/tokens.js.map

@@ -1 +1 @@
-{"version":3,"file":"tokens.js","sources":["../../../../src/components/library/theme/tokens.jsx"],"sourcesContent":["/**\n * Design tokens — single source of truth for branding.\n *\n * To rebrand a command center:\n *   1. Swap the `brand` palette (use any Tailwind-style color scale)\n *   2. Swap the `accent` palette\n *   3. Change `fonts.sans` in _app.js (next/font import)\n *\n * AppThemeProvider injects these as CSS custom properties on :root,\n * and tailwind.config.js references them via var(--color-brand-*).\n */\n\nexport const tokens = {\n  colors: {\n    brand: {\n      50: \"#EEF2FF\",\n      100: \"#E0E7FF\",\n      200: \"#C7D2FE\",\n      300: \"#A5B4FC\",\n      400: \"#818CF8\",\n      500: \"#6366F1\",\n      600: \"#4F46E5\",\n      700: \"#4338CA\",\n      800: \"#3730A3\",\n      900: \"#312E81\",\n      950: \"#1E1B4E\",\n    },\n    accent: {\n      50: \"#ECFEFF\",\n      100: \"#CFFAFE\",\n      200: \"#A5F3FC\",\n      300: \"#67E8F9\",\n      400: \"#22D3EE\",\n      500: \"#06B6D4\",\n      600: \"#0891B2\",\n      700: \"#0E7490\",\n      800: \"#155E75\",\n      900: \"#164E63\",\n      950: \"#083344\",\n    },\n  },\n\n  fonts: {\n    sans: \"Inter\",\n    mono: \"JetBrains Mono\",\n  },\n\n  radius: {\n    sm: \"0.5rem\",\n    md: \"0.75rem\",\n    lg: \"1rem\",\n  },\n\n  spacing: {\n    pageX: \"1.25rem\",\n    pageY: \"1.25rem\",\n  },\n};\n\n/**\n * Generates CSS custom property assignments from the token palettes.\n * Used by AppThemeProvider to inject on :root at runtime.\n */\nexport function getTokenCSSProperties() {\n  const props = {};\n  for (const [palette, shades] of Object.entries(tokens.colors)) {\n    for (const [shade, value] of Object.entries(shades)) {\n      props[`--color-${palette}-${shade}`] = value;\n    }\n  }\n  return props;\n}\n"],"names":["tokens","getTokenCSSProperties","props","palette","shades","shade","value"],"mappings":"AAYO,MAAMA,IAAS;AAAA,EACpB,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,EACP;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAGR,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAAA,EAGN,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;AAMO,SAASC,IAAwB;AACtC,QAAMC,IAAQ,CAAA;AACd,aAAW,CAACC,GAASC,CAAM,KAAK,OAAO,QAAQJ,EAAO,MAAM;AAC1D,eAAW,CAACK,GAAOC,CAAK,KAAK,OAAO,QAAQF,CAAM;AAChD,MAAAF,EAAM,WAAWC,CAAO,IAAIE,CAAK,EAAE,IAAIC;AAG3C,SAAOJ;AACT;"}
+{"version":3,"file":"tokens.js","sources":["../../../../src/components/library/theme/tokens.tsx"],"sourcesContent":["/**\n * Design tokens — single source of truth for branding.\n *\n * To rebrand a command center:\n *   1. Swap the `brand` palette (use any Tailwind-style color scale)\n *   2. Swap the `accent` palette\n *   3. Change `fonts.sans` in _app.js (next/font import)\n *\n * AppThemeProvider injects these as CSS custom properties on :root,\n * and tailwind.config.js references them via var(--color-brand-*).\n */\n\nexport interface ColorShades {\n  50: string;\n  100: string;\n  200: string;\n  300: string;\n  400: string;\n  500: string;\n  600: string;\n  700: string;\n  800: string;\n  900: string;\n  950: string;\n}\n\nexport interface Tokens {\n  colors: {\n    brand: ColorShades;\n    accent: ColorShades;\n  };\n  fonts: {\n    sans: string;\n    mono: string;\n  };\n  radius: {\n    sm: string;\n    md: string;\n    lg: string;\n  };\n  spacing: {\n    pageX: string;\n    pageY: string;\n  };\n}\n\nexport const tokens: Tokens = {\n  colors: {\n    brand: {\n      50: \"#EEF2FF\",\n      100: \"#E0E7FF\",\n      200: \"#C7D2FE\",\n      300: \"#A5B4FC\",\n      400: \"#818CF8\",\n      500: \"#6366F1\",\n      600: \"#4F46E5\",\n      700: \"#4338CA\",\n      800: \"#3730A3\",\n      900: \"#312E81\",\n      950: \"#1E1B4E\",\n    },\n    accent: {\n      50: \"#ECFEFF\",\n      100: \"#CFFAFE\",\n      200: \"#A5F3FC\",\n      300: \"#67E8F9\",\n      400: \"#22D3EE\",\n      500: \"#06B6D4\",\n      600: \"#0891B2\",\n      700: \"#0E7490\",\n      800: \"#155E75\",\n      900: \"#164E63\",\n      950: \"#083344\",\n    },\n  },\n\n  fonts: {\n    sans: \"Inter\",\n    mono: \"JetBrains Mono\",\n  },\n\n  radius: {\n    sm: \"0.5rem\",\n    md: \"0.75rem\",\n    lg: \"1rem\",\n  },\n\n  spacing: {\n    pageX: \"1.25rem\",\n    pageY: \"1.25rem\",\n  },\n};\n\n/**\n * Generates CSS custom property assignments from the token palettes.\n * Used by AppThemeProvider to inject on :root at runtime.\n */\nexport function getTokenCSSProperties(): Record<string, string> {\n  const props: Record<string, string> = {};\n  for (const [palette, shades] of Object.entries(tokens.colors)) {\n    for (const [shade, value] of Object.entries(shades)) {\n      props[`--color-${palette}-${shade}`] = value;\n    }\n  }\n  return props;\n}\n"],"names":["tokens","getTokenCSSProperties","props","palette","shades","shade","value"],"mappings":"AA8CO,MAAMA,IAAiB;AAAA,EAC5B,QAAQ;AAAA,IACN,OAAO;AAAA,MACL,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,IAEP,QAAQ;AAAA,MACN,IAAI;AAAA,MACJ,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,MACL,KAAK;AAAA,IAAA;AAAA,EACP;AAAA,EAGF,OAAO;AAAA,IACL,MAAM;AAAA,IACN,MAAM;AAAA,EAAA;AAAA,EAGR,QAAQ;AAAA,IACN,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EAAA;AAAA,EAGN,SAAS;AAAA,IACP,OAAO;AAAA,IACP,OAAO;AAAA,EAAA;AAEX;AAMO,SAASC,IAAgD;AAC9D,QAAMC,IAAgC,CAAA;AACtC,aAAW,CAACC,GAASC,CAAM,KAAK,OAAO,QAAQJ,EAAO,MAAM;AAC1D,eAAW,CAACK,GAAOC,CAAK,KAAK,OAAO,QAAQF,CAAM;AAChD,MAAAF,EAAM,WAAWC,CAAO,IAAIE,CAAK,EAAE,IAAIC;AAG3C,SAAOJ;AACT;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@schandlergarcia/sf-web-components",
-  "version": "1.7.0",
+  "version": "1.9.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} />;
 }
-
-