@schandlergarcia/sf-web-components 1.6.0 → 1.8.0

package/dist/components/library/heroui/Field.js.map

@@ -1 +1 @@
-{"version":3,"file":"Field.js","sources":["../../../../src/components/library/heroui/Field.jsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * HeroUI v3 Field components — simple wrappers for form field layout.\n *\n * @example\n *   import { Field, FieldLabel, FieldError } from \"@/components/library\";\n *   <Field>\n *     <FieldLabel>Name</FieldLabel>\n *     <Input />\n *     <FieldError>Required</FieldError>\n *   </Field>\n */\nexport default function HeroUIField({ className = \"\", children, ...props }) {\n  return (\n    <div className={`flex flex-col gap-1.5 ${className}`} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport const Field = HeroUIField;\n\nexport const FieldLabel = ({ className = \"\", htmlFor, children, ...props }) => (\n  <label\n    htmlFor={htmlFor}\n    className={`text-sm font-medium text-slate-700 dark:text-slate-200 ${className}`}\n    {...props}\n  >\n    {children}\n  </label>\n);\n\nexport const FieldDescription = ({ className = \"\", children, ...props }) => (\n  <p className={`text-xs text-slate-500 dark:text-slate-400 ${className}`} {...props}>\n    {children}\n  </p>\n);\n\nexport const FieldError = ({ className = \"\", errors, children, ...props }) => {\n  // Support both children and errors prop\n  const errorContent = errors?.length > 0 ? errors.join(\", \") : children;\n\n  if (!errorContent) return null;\n\n  return (\n    <p className={`text-xs text-red-600 dark:text-red-400 ${className}`} {...props}>\n      {errorContent}\n    </p>\n  );\n};\n"],"names":["HeroUIField","className","children","props","jsx","Field","FieldLabel","htmlFor","FieldDescription","FieldError","errors","errorContent"],"mappings":";;AAaA,SAAwBA,EAAY,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAAS;AAC1E,SACE,gBAAAC,EAAC,SAAI,WAAW,yBAAyBH,CAAS,IAAK,GAAGE,GACvD,UAAAD,GACH;AAEJ;AAEO,MAAMG,IAAQL,GAERM,IAAa,CAAC,EAAE,WAAAL,IAAY,IAAI,SAAAM,GAAS,UAAAL,GAAU,GAAGC,EAAA,MACjE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAAG;AAAA,IACA,WAAW,0DAA0DN,CAAS;AAAA,IAC7E,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AACH,GAGWM,IAAmB,CAAC,EAAE,WAAAP,IAAY,IAAI,UAAAC,GAAU,GAAGC,EAAA,MAC9D,gBAAAC,EAAC,OAAE,WAAW,8CAA8CH,CAAS,IAAK,GAAGE,GAC1E,UAAAD,EAAA,CACH,GAGWO,IAAa,CAAC,EAAE,WAAAR,IAAY,IAAI,QAAAS,GAAQ,UAAAR,GAAU,GAAGC,QAAY;AAE5E,QAAMQ,IAAeD,GAAQ,SAAS,IAAIA,EAAO,KAAK,IAAI,IAAIR;AAE9D,SAAKS,IAGH,gBAAAP,EAAC,OAAE,WAAW,0CAA0CH,CAAS,IAAK,GAAGE,GACtE,UAAAQ,EAAA,CACH,IALwB;AAO5B;"}
+{"version":3,"file":"Field.js","sources":["../../../../src/components/library/heroui/Field.tsx"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * HeroUI v3 Field components — simple wrappers for form field layout.\n *\n * @example\n *   import { Field, FieldLabel, FieldError } from \"@/components/library\";\n *   <Field>\n *     <FieldLabel>Name</FieldLabel>\n *     <Input />\n *     <FieldError>Required</FieldError>\n *   </Field>\n */\nexport interface HeroUIFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n}\n\nexport default function HeroUIField({ className = \"\", children, ...props }: HeroUIFieldProps) {\n  return (\n    <div className={`flex flex-col gap-1.5 ${className}`} {...props}>\n      {children}\n    </div>\n  );\n}\n\nexport const Field = HeroUIField;\n\nexport interface FieldLabelProps extends React.LabelHTMLAttributes<HTMLLabelElement> {\n  children?: React.ReactNode;\n}\n\nexport const FieldLabel = ({ className = \"\", htmlFor, children, ...props }: FieldLabelProps) => (\n  <label\n    htmlFor={htmlFor}\n    className={`text-sm font-medium text-slate-700 dark:text-slate-200 ${className}`}\n    {...props}\n  >\n    {children}\n  </label>\n);\n\nexport interface FieldDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  children?: React.ReactNode;\n}\n\nexport const FieldDescription = ({ className = \"\", children, ...props }: FieldDescriptionProps) => (\n  <p className={`text-xs text-slate-500 dark:text-slate-400 ${className}`} {...props}>\n    {children}\n  </p>\n);\n\nexport interface FieldErrorProps extends React.HTMLAttributes<HTMLParagraphElement> {\n  errors?: string[];\n  children?: React.ReactNode;\n}\n\nexport const FieldError = ({ className = \"\", errors, children, ...props }: FieldErrorProps) => {\n  // Support both children and errors prop\n  const errorContent = errors && errors.length > 0 ? errors.join(\", \") : children;\n\n  if (!errorContent) return null;\n\n  return (\n    <p className={`text-xs text-red-600 dark:text-red-400 ${className}`} {...props}>\n      {errorContent}\n    </p>\n  );\n};\n"],"names":["HeroUIField","className","children","props","jsx","Field","FieldLabel","htmlFor","FieldDescription","FieldError","errors","errorContent"],"mappings":";AAiBA,SAAwBA,EAAY,EAAE,WAAAC,IAAY,IAAI,UAAAC,GAAU,GAAGC,KAA2B;AAC5F,SACE,gBAAAC,EAAC,SAAI,WAAW,yBAAyBH,CAAS,IAAK,GAAGE,GACvD,UAAAD,GACH;AAEJ;AAEO,MAAMG,IAAQL,GAMRM,IAAa,CAAC,EAAE,WAAAL,IAAY,IAAI,SAAAM,GAAS,UAAAL,GAAU,GAAGC,EAAA,MACjE,gBAAAC;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,SAAAG;AAAA,IACA,WAAW,0DAA0DN,CAAS;AAAA,IAC7E,GAAGE;AAAA,IAEH,UAAAD;AAAA,EAAA;AACH,GAOWM,IAAmB,CAAC,EAAE,WAAAP,IAAY,IAAI,UAAAC,GAAU,GAAGC,EAAA,MAC9D,gBAAAC,EAAC,OAAE,WAAW,8CAA8CH,CAAS,IAAK,GAAGE,GAC1E,UAAAD,EAAA,CACH,GAQWO,IAAa,CAAC,EAAE,WAAAR,IAAY,IAAI,QAAAS,GAAQ,UAAAR,GAAU,GAAGC,QAA6B;AAE7F,QAAMQ,IAAeD,KAAUA,EAAO,SAAS,IAAIA,EAAO,KAAK,IAAI,IAAIR;AAEvE,SAAKS,IAGH,gBAAAP,EAAC,OAAE,WAAW,0CAA0CH,CAAS,IAAK,GAAGE,GACtE,UAAAQ,EAAA,CACH,IALwB;AAO5B;"}

package/dist/components/library/heroui/Meter.d.ts

@@ -1,6 +1,8 @@
-export default function HeroUIMeter({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export { Meter };
+import * as React from "react";
 import { Meter } from "@heroui/react";
+export interface HeroUIMeterProps {
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export default function HeroUIMeter({ children, ...props }: HeroUIMeterProps): import("react/jsx-runtime").JSX.Element;
+export { Meter };

package/dist/components/library/heroui/Meter.js

@@ -1,12 +1,11 @@
 import { jsx as t } from "react/jsx-runtime";
-import "react";
 import { Meter as o } from "@heroui/react";
-import { Meter as x } from "@heroui/react";
-function i({ children: r, ...e }) {
+import { Meter as u } from "@heroui/react";
+function p({ children: r, ...e }) {
   return /* @__PURE__ */ t(o, { ...e, children: r });
 }
 export {
-  x as Meter,
-  i as default
+  u as Meter,
+  p as default
 };
 //# sourceMappingURL=Meter.js.map

package/dist/components/library/heroui/Meter.js.map

@@ -1 +1 @@
-{"version":3,"file":"Meter.js","sources":["../../../../src/components/library/heroui/Meter.jsx"],"sourcesContent":["import React from \"react\";\nimport { Meter } from \"@heroui/react\";\n\nexport default function HeroUIMeter({ children, ...props }) {\n  return <Meter {...props}>{children}</Meter>;\n}\n\nexport { Meter };\n"],"names":["HeroUIMeter","children","props","jsx","Meter"],"mappings":";;;;AAGA,SAAwBA,EAAY,EAAE,UAAAC,GAAU,GAAGC,KAAS;AAC1D,SAAO,gBAAAC,EAACC,GAAA,EAAO,GAAGF,GAAQ,UAAAD,EAAA,CAAS;AACrC;"}
+{"version":3,"file":"Meter.js","sources":["../../../../src/components/library/heroui/Meter.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Meter } from \"@heroui/react\";\n\nexport interface HeroUIMeterProps {\n  children?: React.ReactNode;\n  [key: string]: any;\n}\n\nexport default function HeroUIMeter({ children, ...props }: HeroUIMeterProps) {\n  return <Meter {...props}>{children}</Meter>;\n}\n\nexport { Meter };\n"],"names":["HeroUIMeter","children","props","jsx","Meter"],"mappings":";;;AAQA,SAAwBA,EAAY,EAAE,UAAAC,GAAU,GAAGC,KAA2B;AAC5E,SAAO,gBAAAC,EAACC,GAAA,EAAO,GAAGF,GAAQ,UAAAD,EAAA,CAAS;AACrC;"}

package/dist/components/library/heroui/Popover.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 /**
  * HeroUI v3 Popover — simple popover for shadcn compatibility.
  * Using native HTML/CSS since HeroUI v3 doesn't have a Popover component.
@@ -9,41 +10,25 @@
  *     <PopoverContent>Content</PopoverContent>
  *   </Popover>
  */
-export default function HeroUIPopover({ children, open, onOpenChange, ...props }: {
-    [x: string]: any;
-    children: any;
-    open: any;
-    onOpenChange: any;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * HeroUI v3 Popover — simple popover for shadcn compatibility.
- * Using native HTML/CSS since HeroUI v3 doesn't have a Popover component.
- *
- * @example
- *   import { Popover, PopoverTrigger, PopoverContent } from "@/components/library";
- *   <Popover>
- *     <PopoverTrigger>Open</PopoverTrigger>
- *     <PopoverContent>Content</PopoverContent>
- *   </Popover>
- */
-export function Popover({ children, open, onOpenChange, ...props }: {
-    [x: string]: any;
-    children: any;
-    open: any;
-    onOpenChange: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function PopoverTrigger({ children, open, onOpenChange, asChild, ...props }: {
-    [x: string]: any;
-    children: any;
-    open: any;
-    onOpenChange: any;
-    asChild: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function PopoverContent({ children, open, className, align, sideOffset, ...props }: {
-    [x: string]: any;
-    children: any;
-    open: any;
-    className?: string | undefined;
-    align?: string | undefined;
-    sideOffset?: number | undefined;
-}): import("react/jsx-runtime").JSX.Element | null;
+export interface HeroUIPopoverProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export default function HeroUIPopover({ children, open, onOpenChange, ...props }: HeroUIPopoverProps): import("react/jsx-runtime").JSX.Element;
+export declare const Popover: typeof HeroUIPopover;
+export interface PopoverTriggerProps {
+    children?: React.ReactNode;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    asChild?: boolean;
+    [key: string]: any;
+}
+export declare const PopoverTrigger: ({ children, open, onOpenChange, asChild, ...props }: PopoverTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    children?: React.ReactNode;
+    open?: boolean;
+    align?: "start" | "center" | "end";
+    sideOffset?: number;
+}
+export declare const PopoverContent: ({ children, open, className, align, sideOffset, ...props }: PopoverContentProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/components/library/heroui/Popover.js

@@ -1,18 +1,18 @@
 import { jsx as c } from "react/jsx-runtime";
-import a from "react";
-function m({ children: e, open: t, onOpenChange: l, ...s }) {
+import * as a from "react";
+function m({ children: e, open: t, onOpenChange: s, ...l }) {
   const [n, r] = a.useState(!1), i = t !== void 0, d = i ? t : n, u = (o) => {
-    i || r(o), l?.(o);
+    i || r(o), s?.(o);
   };
-  return /* @__PURE__ */ c("div", { className: "relative inline-block", ...s, children: a.Children.map(e, (o) => a.isValidElement(o) ? a.cloneElement(o, { open: d, onOpenChange: u }) : o) });
+  return /* @__PURE__ */ c("div", { className: "relative inline-block", ...l, children: a.Children.map(e, (o) => a.isValidElement(o) ? a.cloneElement(o, { open: d, onOpenChange: u }) : o) });
 }
-const b = m, C = ({ children: e, open: t, onOpenChange: l, asChild: s, ...n }) => {
-  const r = () => l?.(!t);
-  return s && a.isValidElement(e) ? a.cloneElement(e, {
+const f = m, b = ({ children: e, open: t, onOpenChange: s, asChild: l, ...n }) => {
+  const r = () => s?.(!t);
+  return l && a.isValidElement(e) ? a.cloneElement(e, {
     ...n,
     onClick: r
   }) : /* @__PURE__ */ c("button", { type: "button", onClick: r, ...n, children: e });
-}, g = ({ children: e, open: t, className: l = "", align: s = "center", sideOffset: n = 4, ...r }) => {
+}, C = ({ children: e, open: t, className: s = "", align: l = "center", sideOffset: n = 4, ...r }) => {
   if (!t) return null;
   const i = {
     start: "left-0",
@@ -22,16 +22,16 @@ const b = m, C = ({ children: e, open: t, onOpenChange: l, asChild: s, ...n }) =
   return /* @__PURE__ */ c(
     "div",
     {
-      className: `absolute z-50 mt-${n} w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-900 shadow-md dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 ${i[s] || i.center} ${l}`,
+      className: `absolute z-50 mt-${n} w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-900 shadow-md dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 ${i[l] || i.center} ${s}`,
       ...r,
       children: e
     }
   );
 };
 export {
-  b as Popover,
-  g as PopoverContent,
-  C as PopoverTrigger,
+  f as Popover,
+  C as PopoverContent,
+  b as PopoverTrigger,
   m as default
 };
 //# sourceMappingURL=Popover.js.map

package/dist/components/library/heroui/Popover.js.map

@@ -1 +1 @@
-{"version":3,"file":"Popover.js","sources":["../../../../src/components/library/heroui/Popover.jsx"],"sourcesContent":["import React from \"react\";\n\n/**\n * HeroUI v3 Popover — simple popover for shadcn compatibility.\n * Using native HTML/CSS since HeroUI v3 doesn't have a Popover component.\n *\n * @example\n *   import { Popover, PopoverTrigger, PopoverContent } from \"@/components/library\";\n *   <Popover>\n *     <PopoverTrigger>Open</PopoverTrigger>\n *     <PopoverContent>Content</PopoverContent>\n *   </Popover>\n */\nexport default function HeroUIPopover({ children, open, onOpenChange, ...props }) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const isControlled = open !== undefined;\n  const actualOpen = isControlled ? open : isOpen;\n\n  const handleOpenChange = (newOpen) => {\n    if (!isControlled) setIsOpen(newOpen);\n    onOpenChange?.(newOpen);\n  };\n\n  return (\n    <div className=\"relative inline-block\" {...props}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, { open: actualOpen, onOpenChange: handleOpenChange });\n        }\n        return child;\n      })}\n    </div>\n  );\n}\n\nexport const Popover = HeroUIPopover;\n\nexport const PopoverTrigger = ({ children, open, onOpenChange, asChild, ...props }) => {\n  const handleClick = () => onOpenChange?.(!open);\n\n  // If asChild is true, clone the child element with the props\n  if (asChild && React.isValidElement(children)) {\n    return React.cloneElement(children, {\n      ...props,\n      onClick: handleClick,\n    });\n  }\n\n  // Otherwise, wrap in a button\n  return (\n    <button type=\"button\" onClick={handleClick} {...props}>\n      {children}\n    </button>\n  );\n};\n\nexport const PopoverContent = ({ children, open, className = \"\", align = \"center\", sideOffset = 4, ...props }) => {\n  if (!open) return null;\n\n  const alignClasses = {\n    start: \"left-0\",\n    center: \"left-1/2 -translate-x-1/2\",\n    end: \"right-0\"\n  };\n\n  return (\n    <div\n      className={`absolute z-50 mt-${sideOffset} w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-900 shadow-md dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 ${alignClasses[align] || alignClasses.center} ${className}`}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["HeroUIPopover","children","open","onOpenChange","props","isOpen","setIsOpen","React","isControlled","actualOpen","handleOpenChange","newOpen","jsx","child","Popover","PopoverTrigger","asChild","handleClick","PopoverContent","className","align","sideOffset","alignClasses"],"mappings":";;AAaA,SAAwBA,EAAc,EAAE,UAAAC,GAAU,MAAAC,GAAM,cAAAC,GAAc,GAAGC,KAAS;AAChF,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAC1CC,IAAeN,MAAS,QACxBO,IAAaD,IAAeN,IAAOG,GAEnCK,IAAmB,CAACC,MAAY;AACpC,IAAKH,KAAcF,EAAUK,CAAO,GACpCR,IAAeQ,CAAO;AAAA,EACxB;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,yBAAyB,GAAGR,GACxC,UAAAG,EAAM,SAAS,IAAIN,GAAU,CAACY,MACzBN,EAAM,eAAeM,CAAK,IACrBN,EAAM,aAAaM,GAAO,EAAE,MAAMJ,GAAY,cAAcC,GAAkB,IAEhFG,CACR,EAAA,CACH;AAEJ;AAEO,MAAMC,IAAUd,GAEVe,IAAiB,CAAC,EAAE,UAAAd,GAAU,MAAAC,GAAM,cAAAC,GAAc,SAAAa,GAAS,GAAGZ,QAAY;AACrF,QAAMa,IAAc,MAAMd,IAAe,CAACD,CAAI;AAG9C,SAAIc,KAAWT,EAAM,eAAeN,CAAQ,IACnCM,EAAM,aAAaN,GAAU;AAAA,IAClC,GAAGG;AAAA,IACH,SAASa;AAAA,EAAA,CACV,IAKD,gBAAAL,EAAC,YAAO,MAAK,UAAS,SAASK,GAAc,GAAGb,GAC7C,UAAAH,GACH;AAEJ,GAEaiB,IAAiB,CAAC,EAAE,UAAAjB,GAAU,MAAAC,GAAM,WAAAiB,IAAY,IAAI,OAAAC,IAAQ,UAAU,YAAAC,IAAa,GAAG,GAAGjB,QAAY;AAChH,MAAI,CAACF,EAAM,QAAO;AAElB,QAAMoB,IAAe;AAAA,IACnB,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,EAAA;AAGP,SACE,gBAAAV;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,oBAAoBS,CAAU,6IAA6IC,EAAaF,CAAK,KAAKE,EAAa,MAAM,IAAIH,CAAS;AAAA,MAC5O,GAAGf;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Popover.js","sources":["../../../../src/components/library/heroui/Popover.tsx"],"sourcesContent":["import * as React from \"react\";\n\n/**\n * HeroUI v3 Popover — simple popover for shadcn compatibility.\n * Using native HTML/CSS since HeroUI v3 doesn't have a Popover component.\n *\n * @example\n *   import { Popover, PopoverTrigger, PopoverContent } from \"@/components/library\";\n *   <Popover>\n *     <PopoverTrigger>Open</PopoverTrigger>\n *     <PopoverContent>Content</PopoverContent>\n *   </Popover>\n */\nexport interface HeroUIPopoverProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\nexport default function HeroUIPopover({ children, open, onOpenChange, ...props }: HeroUIPopoverProps) {\n  const [isOpen, setIsOpen] = React.useState(false);\n  const isControlled = open !== undefined;\n  const actualOpen = isControlled ? open : isOpen;\n\n  const handleOpenChange = (newOpen: boolean) => {\n    if (!isControlled) setIsOpen(newOpen);\n    onOpenChange?.(newOpen);\n  };\n\n  return (\n    <div className=\"relative inline-block\" {...props}>\n      {React.Children.map(children, (child) => {\n        if (React.isValidElement(child)) {\n          return React.cloneElement(child, { open: actualOpen, onOpenChange: handleOpenChange } as any);\n        }\n        return child;\n      })}\n    </div>\n  );\n}\n\nexport const Popover = HeroUIPopover;\n\nexport interface PopoverTriggerProps {\n  children?: React.ReactNode;\n  open?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  asChild?: boolean;\n  [key: string]: any;\n}\n\nexport const PopoverTrigger = ({ children, open, onOpenChange, asChild, ...props }: PopoverTriggerProps) => {\n  const handleClick = () => onOpenChange?.(!open);\n\n  // If asChild is true, clone the child element with the props\n  if (asChild && React.isValidElement(children)) {\n    return React.cloneElement(children, {\n      ...props,\n      onClick: handleClick,\n    } as any);\n  }\n\n  // Otherwise, wrap in a button\n  return (\n    <button type=\"button\" onClick={handleClick} {...props}>\n      {children}\n    </button>\n  );\n};\n\nexport interface PopoverContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  children?: React.ReactNode;\n  open?: boolean;\n  align?: \"start\" | \"center\" | \"end\";\n  sideOffset?: number;\n}\n\nexport const PopoverContent = ({ children, open, className = \"\", align = \"center\", sideOffset = 4, ...props }: PopoverContentProps) => {\n  if (!open) return null;\n\n  const alignClasses: Record<string, string> = {\n    start: \"left-0\",\n    center: \"left-1/2 -translate-x-1/2\",\n    end: \"right-0\"\n  };\n\n  return (\n    <div\n      className={`absolute z-50 mt-${sideOffset} w-72 rounded-md border border-slate-200 bg-white p-4 text-slate-900 shadow-md dark:border-slate-800 dark:bg-slate-900 dark:text-slate-50 ${alignClasses[align] || alignClasses.center} ${className}`}\n      {...props}\n    >\n      {children}\n    </div>\n  );\n};\n"],"names":["HeroUIPopover","children","open","onOpenChange","props","isOpen","setIsOpen","React","isControlled","actualOpen","handleOpenChange","newOpen","jsx","child","Popover","PopoverTrigger","asChild","handleClick","PopoverContent","className","align","sideOffset","alignClasses"],"mappings":";;AAmBA,SAAwBA,EAAc,EAAE,UAAAC,GAAU,MAAAC,GAAM,cAAAC,GAAc,GAAGC,KAA6B;AACpG,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAAM,SAAS,EAAK,GAC1CC,IAAeN,MAAS,QACxBO,IAAaD,IAAeN,IAAOG,GAEnCK,IAAmB,CAACC,MAAqB;AAC7C,IAAKH,KAAcF,EAAUK,CAAO,GACpCR,IAAeQ,CAAO;AAAA,EACxB;AAEA,SACE,gBAAAC,EAAC,OAAA,EAAI,WAAU,yBAAyB,GAAGR,GACxC,UAAAG,EAAM,SAAS,IAAIN,GAAU,CAACY,MACzBN,EAAM,eAAeM,CAAK,IACrBN,EAAM,aAAaM,GAAO,EAAE,MAAMJ,GAAY,cAAcC,GAAyB,IAEvFG,CACR,EAAA,CACH;AAEJ;AAEO,MAAMC,IAAUd,GAUVe,IAAiB,CAAC,EAAE,UAAAd,GAAU,MAAAC,GAAM,cAAAC,GAAc,SAAAa,GAAS,GAAGZ,QAAiC;AAC1G,QAAMa,IAAc,MAAMd,IAAe,CAACD,CAAI;AAG9C,SAAIc,KAAWT,EAAM,eAAeN,CAAQ,IACnCM,EAAM,aAAaN,GAAU;AAAA,IAClC,GAAGG;AAAA,IACH,SAASa;AAAA,EAAA,CACH,IAKR,gBAAAL,EAAC,YAAO,MAAK,UAAS,SAASK,GAAc,GAAGb,GAC7C,UAAAH,GACH;AAEJ,GASaiB,IAAiB,CAAC,EAAE,UAAAjB,GAAU,MAAAC,GAAM,WAAAiB,IAAY,IAAI,OAAAC,IAAQ,UAAU,YAAAC,IAAa,GAAG,GAAGjB,QAAiC;AACrI,MAAI,CAACF,EAAM,QAAO;AAElB,QAAMoB,IAAuC;AAAA,IAC3C,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,KAAK;AAAA,EAAA;AAGP,SACE,gBAAAV;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAW,oBAAoBS,CAAU,6IAA6IC,EAAaF,CAAK,KAAKE,EAAa,MAAM,IAAIH,CAAS;AAAA,MAC5O,GAAGf;AAAA,MAEH,UAAAH;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/library/heroui/Select.d.ts

@@ -1,3 +1,4 @@
+import * as React from "react";
 /**
  * HeroUI v3 Select wrapper with shadcn compatibility.
  *
@@ -5,40 +6,33 @@
  * - onValueChange -> onSelectionChange
  * - value -> selectedKeys
  */
-export default function HeroUISelect({ value, onValueChange, children, ...props }: {
-    [x: string]: any;
-    value: any;
-    onValueChange: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-/**
- * HeroUI v3 Select wrapper with shadcn compatibility.
- *
- * Translates shadcn API to HeroUI:
- * - onValueChange -> onSelectionChange
- * - value -> selectedKeys
- */
-export function Select({ value, onValueChange, children, ...props }: {
-    [x: string]: any;
-    value: any;
-    onValueChange: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function SelectTrigger({ children, size, ...props }: {
-    [x: string]: any;
-    children: any;
-    size: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function SelectValue({ placeholder, ...props }: {
-    [x: string]: any;
-    placeholder: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function SelectContent({ children, ...props }: {
-    [x: string]: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
-export function SelectItem({ value, children, ...props }: {
-    [x: string]: any;
-    value: any;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+export interface HeroUISelectProps {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export default function HeroUISelect({ value, onValueChange, children, ...props }: HeroUISelectProps): import("react/jsx-runtime").JSX.Element;
+export declare const Select: typeof HeroUISelect;
+export interface SelectTriggerProps {
+    children?: React.ReactNode;
+    size?: string;
+    [key: string]: any;
+}
+export declare const SelectTrigger: ({ children }: SelectTriggerProps) => import("react/jsx-runtime").JSX.Element;
+export interface SelectValueProps {
+    placeholder?: string;
+    [key: string]: any;
+}
+export declare const SelectValue: ({ placeholder }: SelectValueProps) => import("react/jsx-runtime").JSX.Element;
+export interface SelectContentProps {
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const SelectContent: ({ children }: SelectContentProps) => import("react/jsx-runtime").JSX.Element;
+export interface SelectItemProps {
+    value: string;
+    children?: React.ReactNode;
+    [key: string]: any;
+}
+export declare const SelectItem: ({ value, children, ...props }: SelectItemProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/library/heroui/Select.js

@@ -1,7 +1,6 @@
 import { jsx as l } from "react/jsx-runtime";
-import "react";
 import { Select as s } from "@heroui/react";
-function h({ value: e, onValueChange: t, children: o, ...n }) {
+function h({ value: e, onValueChange: t, children: n, ...o }) {
   return /* @__PURE__ */ l(
     s,
     {
@@ -10,8 +9,8 @@ function h({ value: e, onValueChange: t, children: o, ...n }) {
         const r = Array.from(c)[0];
         t?.(r || "");
       },
-      ...n,
-      children: o
+      ...o,
+      children: n
     }
   );
 }

package/dist/components/library/heroui/Select.js.map

@@ -1 +1 @@
-{"version":3,"file":"Select.js","sources":["../../../../src/components/library/heroui/Select.jsx"],"sourcesContent":["import React from \"react\";\nimport { Select as HeroSelect } from \"@heroui/react\";\n\n/**\n * HeroUI v3 Select wrapper with shadcn compatibility.\n *\n * Translates shadcn API to HeroUI:\n * - onValueChange -> onSelectionChange\n * - value -> selectedKeys\n */\nexport default function HeroUISelect({ value, onValueChange, children, ...props }) {\n  // Translate shadcn API to HeroUI API\n  const selectedKeys = value ? [value] : [];\n  const handleSelectionChange = (keys) => {\n    const selected = Array.from(keys)[0];\n    onValueChange?.(selected || \"\");\n  };\n\n  return (\n    <HeroSelect\n      selectedKeys={selectedKeys}\n      onSelectionChange={handleSelectionChange}\n      {...props}\n    >\n      {children}\n    </HeroSelect>\n  );\n}\n\n// For direct HeroUI usage\nexport const Select = HeroUISelect;\n\n// Shadcn-compatible subcomponents that just pass through children\nexport const SelectTrigger = ({ children, size, ...props }) => <>{children}</>;\nexport const SelectValue = ({ placeholder, ...props }) => <span {...props}>{placeholder}</span>;\nexport const SelectContent = ({ children, ...props }) => <>{children}</>;\nexport const SelectItem = ({ value, children, ...props }) => <HeroSelect.Item key={value} {...props}>{children}</HeroSelect.Item>;\n"],"names":["HeroUISelect","value","onValueChange","children","props","jsx","HeroSelect","keys","selected"],"mappings":";;;AAUA,SAAwBA,EAAa,EAAE,OAAAC,GAAO,eAAAC,GAAe,UAAAC,GAAU,GAAGC,KAAS;AAQjF,SACE,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,cARiBL,IAAQ,CAACA,CAAK,IAAI,CAAA;AAAA,MASnC,mBAR0B,CAACM,MAAS;AACtC,cAAMC,IAAW,MAAM,KAAKD,CAAI,EAAE,CAAC;AACnC,QAAAL,IAAgBM,KAAY,EAAE;AAAA,MAChC;AAAA,MAMK,GAAGJ;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Select.js","sources":["../../../../src/components/library/heroui/Select.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { Select as HeroSelect } from \"@heroui/react\";\n\n/**\n * HeroUI v3 Select wrapper with shadcn compatibility.\n *\n * Translates shadcn API to HeroUI:\n * - onValueChange -> onSelectionChange\n * - value -> selectedKeys\n */\nexport interface HeroUISelectProps {\n  value?: string;\n  onValueChange?: (value: string) => void;\n  children?: React.ReactNode;\n  [key: string]: any;\n}\n\nexport default function HeroUISelect({ value, onValueChange, children, ...props }: HeroUISelectProps) {\n  // Translate shadcn API to HeroUI API\n  const selectedKeys = value ? [value] : [];\n  const handleSelectionChange = (keys: any) => {\n    const selected = Array.from(keys)[0] as string;\n    onValueChange?.(selected || \"\");\n  };\n\n  const HeroSelectAny = HeroSelect as any;\n  return (\n    <HeroSelectAny\n      selectedKeys={selectedKeys}\n      onSelectionChange={handleSelectionChange}\n      {...props}\n    >\n      {children}\n    </HeroSelectAny>\n  );\n}\n\n// For direct HeroUI usage\nexport const Select = HeroUISelect;\n\n// Shadcn-compatible subcomponents that just pass through children\nexport interface SelectTriggerProps {\n  children?: React.ReactNode;\n  size?: string;\n  [key: string]: any;\n}\n\nexport const SelectTrigger = ({ children }: SelectTriggerProps) => <>{children}</>;\n\nexport interface SelectValueProps {\n  placeholder?: string;\n  [key: string]: any;\n}\n\nexport const SelectValue = ({ placeholder }: SelectValueProps) => <span>{placeholder}</span>;\n\nexport interface SelectContentProps {\n  children?: React.ReactNode;\n  [key: string]: any;\n}\n\nexport const SelectContent = ({ children }: SelectContentProps) => <>{children}</>;\n\nexport interface SelectItemProps {\n  value: string;\n  children?: React.ReactNode;\n  [key: string]: any;\n}\n\nexport const SelectItem = ({ value, children, ...props }: SelectItemProps) => {\n  const HeroSelectAny = HeroSelect as any;\n  return <HeroSelectAny.Item key={value} {...props}>{children}</HeroSelectAny.Item>;\n};\n"],"names":["HeroUISelect","value","onValueChange","children","props","jsx","HeroSelect","keys","selected"],"mappings":";;AAiBA,SAAwBA,EAAa,EAAE,OAAAC,GAAO,eAAAC,GAAe,UAAAC,GAAU,GAAGC,KAA4B;AASpG,SACE,gBAAAC;AAAA,IAFoBC;AAAAA,IAEnB;AAAA,MACC,cATiBL,IAAQ,CAACA,CAAK,IAAI,CAAA;AAAA,MAUnC,mBAT0B,CAACM,MAAc;AAC3C,cAAMC,IAAW,MAAM,KAAKD,CAAI,EAAE,CAAC;AACnC,QAAAL,IAAgBM,KAAY,EAAE;AAAA,MAChC;AAAA,MAOK,GAAGJ;AAAA,MAEH,UAAAD;AAAA,IAAA;AAAA,EAAA;AAGP;"}

package/dist/components/library/layout/PageContainer.d.ts

@@ -1,4 +1,6 @@
-export default function PageContainer({ className, children }: {
-    className?: string | undefined;
-    children: any;
-}): import("react/jsx-runtime").JSX.Element;
+import React from "react";
+export interface PageContainerProps {
+    className?: string;
+    children: React.ReactNode;
+}
+export default function PageContainer({ className, children }: PageContainerProps): import("react/jsx-runtime").JSX.Element;

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.6.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({
     />
   );
 }
-
-