@fanvue/ui 1.18.2 → 1.20.0

package/dist/charts.d.ts

@@ -0,0 +1,372 @@
+import { Legend } from 'recharts';
+import { LegendPayload } from 'recharts/types/component/DefaultLegendContent';
+import { NameType } from 'recharts/types/component/DefaultTooltipContent';
+import { Payload } from 'recharts/types/component/DefaultTooltipContent';
+import * as React_2 from 'react';
+import { ResponsiveContainer } from 'recharts';
+import { Tooltip } from 'recharts';
+import { ValueType } from 'recharts/types/component/DefaultTooltipContent';
+
+/**
+ * Wraps any chart with a structured header containing title, subtitle,
+ * optional trend chip, date range label, info tooltip, and a loading
+ * skeleton state.
+ *
+ * @example
+ * ```tsx
+ * <ChartCard
+ *   title="Revenue"
+ *   subtitle="$4,523"
+ *   trendChip={{ label: "+12.5%", trend: "positive" }}
+ *   dateInfo="Jan 1 – Mar 17"
+ *   tooltip="Total revenue for the selected period."
+ * >
+ *   <MyLineChart />
+ * </ChartCard>
+ * ```
+ */
+export declare const ChartCard: React_2.ForwardRefExoticComponent<ChartCardProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartCard}. */
+export declare interface ChartCardProps extends Omit<React_2.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Card title text. Pass translated string for i18n. */
+    title: React_2.ReactNode;
+    /** Large subtitle value (e.g. formatted price or count). */
+    subtitle?: React_2.ReactNode;
+    /** Tooltip text shown next to the title. Pass translated string for i18n. */
+    tooltip?: React_2.ReactNode;
+    /** Accessible label for the info tooltip trigger. Override for i18n. @default "More info" */
+    tooltipAriaLabel?: string;
+    /** Date range or period label shown below the subtitle. */
+    dateInfo?: React_2.ReactNode;
+    /** Trend indicator chip config. */
+    trendChip?: {
+        /** Display label (e.g. "12.5%"). */
+        label: React_2.ReactNode;
+        /** Whether the trend is positive (green) or negative (red). */
+        trend: "positive" | "negative";
+    };
+    /** Show loading skeleton instead of content. @default false */
+    loading?: boolean;
+    /** Chart content rendered below the header. */
+    children?: React_2.ReactNode;
+}
+
+/**
+ * Centered label for radial/pie charts, rendered inside a Recharts `<Label>`.
+ *
+ * @example
+ * ```tsx
+ * <PolarRadiusAxis tick={false} tickLine={false} axisLine={false}>
+ *   <Label content={({ viewBox }) => (
+ *     <ChartCenterLabel viewBox={viewBox} value="78%" subtitle="Complete" />
+ *   )} />
+ * </PolarRadiusAxis>
+ * ```
+ */
+export declare const ChartCenterLabel: React_2.ForwardRefExoticComponent<ChartCenterLabelProps & React_2.RefAttributes<SVGTextElement>>;
+
+/** Props for {@link ChartCenterLabel}. */
+export declare interface ChartCenterLabelProps extends Omit<React_2.SVGAttributes<SVGTextElement>, "viewBox"> {
+    /** Recharts viewBox with center coordinates. */
+    viewBox?: {
+        cx?: number;
+        cy?: number;
+        [key: string]: unknown;
+    };
+    /** Primary value displayed in the center. */
+    value: React_2.ReactNode;
+    /** Secondary text below the value. */
+    subtitle: React_2.ReactNode;
+    /** Custom className for the value tspan. @default "fill-foreground-default font-bold text-3xl" */
+    valueClassName?: string;
+}
+
+/**
+ * Maps data keys to their display configuration (label, color, icon).
+ *
+ * @example
+ * ```ts
+ * const config: ChartConfig = {
+ *   revenue: {
+ *     label: t("chart.revenue"),
+ *     color: "var(--color-special-chart-teal)",
+ *   },
+ *   subscribers: {
+ *     label: t("chart.subscribers"),
+ *     theme: { light: "#2563eb", dark: "#60a5fa" },
+ *   },
+ * };
+ * ```
+ */
+export declare type ChartConfig = Record<string, ChartConfigEntry>;
+
+/**
+ * Configuration for a single data series in a chart.
+ *
+ * Each key in a {@link ChartConfig} record maps to a data key used by Recharts.
+ * Provide a human-readable `label` (supports i18n — pass translated strings)
+ * and either a single `color` or a `theme` map for light/dark mode.
+ */
+export declare type ChartConfigEntry = {
+    /** Human-readable label for this series. Pass a translated string for i18n. */
+    label?: React_2.ReactNode;
+    /** Optional icon component rendered in tooltips and legends. */
+    icon?: React_2.ComponentType;
+    /** Single color for all themes. */
+    color?: string;
+    /** Per-theme color overrides. Takes precedence over `color` when present. */
+    theme?: Record<ChartThemeKey, string>;
+};
+
+/**
+ * Wraps a Recharts chart with responsive sizing, design-token theming, and
+ * accessible config context for tooltips and legends.
+ *
+ * @example
+ * ```tsx
+ * <ChartContainer config={chartConfig} className="min-h-48">
+ *   <LineChart data={data} accessibilityLayer>
+ *     <Line dataKey="revenue" stroke="var(--color-revenue)" />
+ *   </LineChart>
+ * </ChartContainer>
+ * ```
+ */
+export declare const ChartContainer: React_2.ForwardRefExoticComponent<ChartContainerProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartContainer}. */
+export declare interface ChartContainerProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Series configuration mapping data keys to labels, colors, and icons. */
+    config: ChartConfig;
+    /**
+     * Recharts chart element(s) to render inside the responsive container.
+     * Typically a single `<AreaChart>`, `<BarChart>`, `<LineChart>`, etc.
+     */
+    children: React_2.ComponentProps<typeof ResponsiveContainer>["children"];
+}
+
+declare type ChartContextValue = {
+    config: ChartConfig;
+};
+
+/** Re-export of Recharts `Legend` — use with `content={<ChartLegendContent />}`. */
+export declare const ChartLegend: typeof Legend;
+
+/**
+ * Styled legend content for use with `<ChartLegend content={<ChartLegendContent />} />`.
+ *
+ * Reads chart config from context to resolve labels and icons.
+ *
+ * @example
+ * ```tsx
+ * <ChartLegend content={<ChartLegendContent />} />
+ * ```
+ */
+export declare const ChartLegendContent: React_2.ForwardRefExoticComponent<ChartLegendContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartLegendContent}. */
+export declare interface ChartLegendContentProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Legend payload data. Passed by Recharts. */
+    payload?: readonly LegendPayload[];
+    /** Vertical alignment — controls padding direction. @default "bottom" */
+    verticalAlign?: "top" | "bottom";
+    /** Hide the color/icon indicator. @default false */
+    hideIcon?: boolean;
+    /** Data key used to resolve the display name from config. */
+    nameKey?: string;
+}
+
+/**
+ * A positioned overlay that displays a loading spinner on top of chart content.
+ * The children are always rendered to maintain layout dimensions; the overlay
+ * covers them with a semi-transparent background and a centered spinner.
+ *
+ * @example
+ * ```tsx
+ * <ChartLoadingOverlay loading={isFetching}>
+ *   <ChartContainer config={config} className="min-h-48">
+ *     <LineChart data={data}>...</LineChart>
+ *   </ChartContainer>
+ * </ChartLoadingOverlay>
+ * ```
+ */
+export declare const ChartLoadingOverlay: React_2.ForwardRefExoticComponent<ChartLoadingOverlayProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartLoadingOverlay}. */
+export declare interface ChartLoadingOverlayProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Whether to show the loading overlay. @default false */
+    loading?: boolean;
+    /** Chart content to render underneath the overlay. */
+    children: React_2.ReactNode;
+}
+
+/**
+ * A side legend for pie/donut charts that shows each slice's label,
+ * formatted value, and a proportional progress bar.
+ *
+ * @example
+ * ```tsx
+ * <ChartPieLegend
+ *   items={[
+ *     { label: "Subscriptions", value: 4500, formattedValue: "$4,500", color: "var(--color-special-chart-teal)" },
+ *     { label: "Messages", value: 2100, formattedValue: "$2,100", color: "var(--color-special-chart-sky)" },
+ *     { label: "Tips", value: 1200, formattedValue: "$1,200", color: "var(--color-special-chart-orange)" },
+ *   ]}
+ * />
+ * ```
+ */
+export declare const ChartPieLegend: React_2.ForwardRefExoticComponent<ChartPieLegendProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** A single item in a {@link ChartPieLegend}. */
+export declare interface ChartPieLegendItem {
+    /** Display label. Pass translated string for i18n. */
+    label: React_2.ReactNode;
+    /** Numeric value for this slice. Used to calculate the proportional bar width. */
+    value: number;
+    /** Formatted display value (e.g. "$4,500"). If omitted, `value.toLocaleString()` is used. */
+    formattedValue?: React_2.ReactNode;
+    /** Slice color (CSS value). */
+    color: string;
+    /** Optional icon to show instead of the color dot. */
+    icon?: React_2.ReactNode;
+}
+
+/** Props for {@link ChartPieLegend}. */
+export declare interface ChartPieLegendProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Legend items to display. */
+    items: ChartPieLegendItem[];
+}
+
+/**
+ * Renders a grid of toggleable chips that control which series are visible
+ * on a multi-series chart. Each toggle shows a color indicator dot and a label.
+ *
+ * @example
+ * ```tsx
+ * const [visible, setVisible] = useState(new Set(["subscription", "message", "tip"]));
+ *
+ * <ChartSeriesToggle
+ *   items={[
+ *     { key: "subscription", label: "Subscription", color: "var(--color-special-chart-teal)" },
+ *     { key: "message", label: "Message", color: "var(--color-special-chart-sky)" },
+ *     { key: "tip", label: "Tip", color: "var(--color-special-chart-orange)" },
+ *   ]}
+ *   value={visible}
+ *   onValueChange={setVisible}
+ * />
+ * ```
+ */
+export declare const ChartSeriesToggle: React_2.ForwardRefExoticComponent<ChartSeriesToggleProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** A single toggleable series in a {@link ChartSeriesToggle}. */
+export declare interface ChartSeriesToggleItem {
+    /** Unique key matching the data series key and ChartConfig key. */
+    key: string;
+    /** Human-readable label. Pass translated string for i18n. */
+    label: React_2.ReactNode;
+    /** Series color (CSS value). Shown as indicator dot. */
+    color: string;
+}
+
+/** Props for {@link ChartSeriesToggle}. */
+export declare interface ChartSeriesToggleProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Available series that can be toggled. */
+    items: ChartSeriesToggleItem[];
+    /** Set of currently visible series keys. */
+    value: Set<string>;
+    /** Called when a series is toggled. Receives the updated Set. */
+    onValueChange: (value: Set<string>) => void;
+}
+
+/**
+ * Injects a scoped `<style>` tag that maps each config entry to a
+ * `--color-{key}` CSS custom property, with light/dark theme support.
+ *
+ * Rendered automatically by {@link ChartContainer} — you rarely need this directly.
+ */
+export declare const ChartStyle: React_2.NamedExoticComponent<ChartStyleProps>;
+
+/** Props for the scoped CSS variable injector used by {@link ChartContainer}. */
+export declare interface ChartStyleProps {
+    /** Unique identifier scoped to the chart instance. */
+    id: string;
+    /** Chart configuration mapping data keys to colors and themes. */
+    config: ChartConfig;
+}
+
+/** Light/dark theme key for chart color resolution. */
+export declare type ChartThemeKey = "light" | "dark";
+
+/** Re-export of Recharts `Tooltip` — use with `content={<ChartTooltipContent />}`. */
+export declare const ChartTooltip: typeof Tooltip;
+
+/**
+ * Styled tooltip content for use with `<ChartTooltip content={<ChartTooltipContent />} />`.
+ *
+ * Reads chart config from context to resolve labels, colors, and icons.
+ * Supports dot/line/dashed indicators. Pass translated `label`s in config for i18n.
+ *
+ * @example
+ * ```tsx
+ * <ChartTooltip
+ *   content={<ChartTooltipContent indicator="line" />}
+ * />
+ * ```
+ */
+export declare const ChartTooltipContent: React_2.ForwardRefExoticComponent<ChartTooltipContentProps & React_2.RefAttributes<HTMLDivElement>>;
+
+/** Props for {@link ChartTooltipContent}. */
+export declare interface ChartTooltipContentProps extends React_2.HTMLAttributes<HTMLDivElement> {
+    /** Whether the tooltip is currently active/visible. Passed by Recharts. */
+    active?: boolean;
+    /** Tooltip payload data. Passed by Recharts. */
+    payload?: Payload<ValueType, NameType>[];
+    /** Axis label. Passed by Recharts. */
+    label?: string | number;
+    /** Custom label formatter. */
+    labelFormatter?: (label: string | number, payload: Payload<ValueType, NameType>[]) => React_2.ReactNode;
+    /** Custom value formatter. */
+    formatter?: (value: ValueType, name: NameType, item: Payload<ValueType, NameType>, index: number, payload: Payload<ValueType, NameType>[]) => React_2.ReactNode;
+    /** CSS class for the label element. */
+    labelClassName?: string;
+    /** Hide the tooltip header label. @default false */
+    hideLabel?: boolean;
+    /** Hide the color indicator beside each row. @default false */
+    hideIndicator?: boolean;
+    /** Visual style of the color indicator. @default "dot" */
+    indicator?: ChartTooltipIndicator;
+    /**
+     * Data key used to resolve the display name from config.
+     * Useful when the payload `name` differs from the config key.
+     */
+    nameKey?: string;
+    /**
+     * Data key used to resolve the header label from config.
+     * Falls back to the first payload item's `dataKey`.
+     */
+    labelKey?: string;
+    /** Override indicator color for all rows. */
+    color?: string;
+}
+
+/** Indicator shape rendered beside each tooltip row. */
+export declare type ChartTooltipIndicator = "dot" | "line" | "dashed";
+
+/**
+ * Resolves the {@link ChartConfig} entry for a given tooltip/legend payload
+ * item. Recharts wraps the original data point inside `payload.payload` —
+ * this function checks both levels before falling back to a direct `key` lookup.
+ */
+export declare function resolveConfigEntry(config: ChartConfig, payload: unknown, key: string): ChartConfigEntry | undefined;
+
+/** Access the nearest {@link ChartContainer}'s config. Throws if used outside a chart. */
+export declare function useChart(): ChartContextValue;
+
+export { }
+
+
+declare module "vitest" {
+    interface Assertion<T> {
+        toHaveNoViolations(): T;
+    }
+}

package/dist/charts.mjs

@@ -0,0 +1,28 @@
+"use client";
+import { ChartCard } from "./components/Chart/ChartCard.mjs";
+import { ChartCenterLabel } from "./components/Chart/ChartCenterLabel.mjs";
+import { ChartContainer } from "./components/Chart/ChartContainer.mjs";
+import { ChartLegend, ChartLegendContent } from "./components/Chart/ChartLegend.mjs";
+import { ChartLoadingOverlay } from "./components/Chart/ChartLoadingOverlay.mjs";
+import { ChartPieLegend } from "./components/Chart/ChartPieLegend.mjs";
+import { ChartSeriesToggle } from "./components/Chart/ChartSeriesToggle.mjs";
+import { ChartStyle } from "./components/Chart/ChartStyle.mjs";
+import { ChartTooltip, ChartTooltipContent } from "./components/Chart/ChartTooltip.mjs";
+import { resolveConfigEntry } from "./components/Chart/chartUtils.mjs";
+import { useChart } from "./components/Chart/useChart.mjs";
+export {
+  ChartCard,
+  ChartCenterLabel,
+  ChartContainer,
+  ChartLegend,
+  ChartLegendContent,
+  ChartLoadingOverlay,
+  ChartPieLegend,
+  ChartSeriesToggle,
+  ChartStyle,
+  ChartTooltip,
+  ChartTooltipContent,
+  resolveConfigEntry,
+  useChart
+};
+//# sourceMappingURL=charts.mjs.map

package/dist/charts.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/dist/cjs/charts.cjs

@@ -0,0 +1,28 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const ChartCard = require("./components/Chart/ChartCard.cjs");
+const ChartCenterLabel = require("./components/Chart/ChartCenterLabel.cjs");
+const ChartContainer = require("./components/Chart/ChartContainer.cjs");
+const ChartLegend = require("./components/Chart/ChartLegend.cjs");
+const ChartLoadingOverlay = require("./components/Chart/ChartLoadingOverlay.cjs");
+const ChartPieLegend = require("./components/Chart/ChartPieLegend.cjs");
+const ChartSeriesToggle = require("./components/Chart/ChartSeriesToggle.cjs");
+const ChartStyle = require("./components/Chart/ChartStyle.cjs");
+const ChartTooltip = require("./components/Chart/ChartTooltip.cjs");
+const chartUtils = require("./components/Chart/chartUtils.cjs");
+const useChart = require("./components/Chart/useChart.cjs");
+exports.ChartCard = ChartCard.ChartCard;
+exports.ChartCenterLabel = ChartCenterLabel.ChartCenterLabel;
+exports.ChartContainer = ChartContainer.ChartContainer;
+exports.ChartLegend = ChartLegend.ChartLegend;
+exports.ChartLegendContent = ChartLegend.ChartLegendContent;
+exports.ChartLoadingOverlay = ChartLoadingOverlay.ChartLoadingOverlay;
+exports.ChartPieLegend = ChartPieLegend.ChartPieLegend;
+exports.ChartSeriesToggle = ChartSeriesToggle.ChartSeriesToggle;
+exports.ChartStyle = ChartStyle.ChartStyle;
+exports.ChartTooltip = ChartTooltip.ChartTooltip;
+exports.ChartTooltipContent = ChartTooltip.ChartTooltipContent;
+exports.resolveConfigEntry = chartUtils.resolveConfigEntry;
+exports.useChart = useChart.useChart;
+//# sourceMappingURL=charts.cjs.map

package/dist/cjs/charts.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"charts.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/cjs/components/Autocomplete/Autocomplete.cjs

@@ -2,7 +2,7 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const Popover = require("@radix-ui/react-popover");
+const PopoverPrimitive = require("@radix-ui/react-popover");
 const React = require("react");
 const cn = require("../../utils/cn.cjs");
 const ChevronDownIcon = require("../Icons/ChevronDownIcon.cjs");
@@ -27,7 +27,7 @@ function _interopNamespaceDefault(e) {
   n.default = e;
   return Object.freeze(n);
 }
-const Popover__namespace = /* @__PURE__ */ _interopNamespaceDefault(Popover);
+const PopoverPrimitive__namespace = /* @__PURE__ */ _interopNamespaceDefault(PopoverPrimitive);
 const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
 const CONTAINER_HEIGHT = {
   "48": "min-h-12",
@@ -79,7 +79,7 @@ const Autocomplete = React__namespace.forwardRef((props, ref) => {
   React__namespace.useImperativeHandle(ref, () => ac.inputRef.current);
   warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);
   const bottomText = error && errorMessage ? errorMessage : helperText;
-  return /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Root, { open: ac.isOpen && !disabled, onOpenChange: ac.handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
+  return /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Root, { open: ac.isOpen && !disabled, onOpenChange: ac.handleOpenChange, children: /* @__PURE__ */ jsxRuntime.jsxs(
     "div",
     {
       className: cn.cn("flex flex-col", fullWidth && "w-full", className),
@@ -95,7 +95,7 @@ const Autocomplete = React__namespace.forwardRef((props, ref) => {
             children: label
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Anchor, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsxs(
           "div",
           {
             className: cn.cn(
@@ -174,8 +174,8 @@ const Autocomplete = React__namespace.forwardRef((props, ref) => {
             ]
           }
         ) }),
-        /* @__PURE__ */ jsxRuntime.jsx(Popover__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
-          Popover__namespace.Content,
+        /* @__PURE__ */ jsxRuntime.jsx(PopoverPrimitive__namespace.Portal, { children: /* @__PURE__ */ jsxRuntime.jsx(
+          PopoverPrimitive__namespace.Content,
           {
             sideOffset: 4,
             collisionPadding: 8,

package/dist/cjs/components/Autocomplete/Autocomplete.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Autocomplete.cjs","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport { AutocompleteDropdownContent } from \"./AutocompleteDropdownContent\";\nimport { AutocompleteTag } from \"./AutocompleteTag\";\nimport { useAutocomplete } from \"./useAutocomplete\";\n\nexport type AutocompleteSize = \"48\" | \"40\" | \"32\";\n\nexport interface AutocompleteOption {\n  value: string;\n  label?: string;\n  disabled?: boolean;\n}\n\ninterface AutocompleteBaseProps {\n  label?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  helperText?: string;\n  /** @default \"48\" */\n  size?: AutocompleteSize;\n  /** @default false */\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  leftIcon?: React.ReactNode;\n  /** @default false */\n  fullWidth?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  clearable?: boolean;\n  clearAriaLabel?: string;\n  id?: string;\n  className?: string;\n  options: AutocompleteOption[];\n  inputValue?: string;\n  onInputChange?: (value: string) => void;\n  filterFn?: (option: AutocompleteOption, query: string) => boolean;\n  /** @default false */\n  creatable?: boolean;\n  creatableLabel?: (inputValue: string) => string;\n  onCreate?: (inputValue: string) => void;\n  /** @default false */\n  loading?: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface AutocompleteSingleProps extends AutocompleteBaseProps {\n  multiple?: false;\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n}\n\ninterface AutocompleteMultiProps extends AutocompleteBaseProps {\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (values: string[]) => void;\n}\n\nexport type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;\n\nconst CONTAINER_HEIGHT: Record<AutocompleteSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"typography-regular-body-lg\",\n  \"40\": \"typography-regular-body-lg\",\n  \"32\": \"typography-regular-body-md\",\n};\n\nconst PADDING_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"px-4 py-1.5 gap-3\",\n  \"40\": \"px-4 py-1 gap-3\",\n  \"32\": \"px-3 py-1 gap-2\",\n};\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Conditional JSX branches in the render template\nexport const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>((props, ref) => {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    helperText,\n    size = \"48\",\n    error = false,\n    errorMessage,\n    placeholder,\n    leftIcon,\n    fullWidth = false,\n    disabled = false,\n    clearable = false,\n    clearAriaLabel = \"Clear\",\n    className,\n    loading = false,\n    loadingText,\n    emptyText = \"No results\",\n    renderOption,\n    renderTag,\n  } = props;\n\n  const ac = useAutocomplete(props);\n\n  React.useImperativeHandle(ref, () => ac.inputRef.current as HTMLInputElement);\n\n  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);\n\n  const bottomText = error && errorMessage ? errorMessage : helperText;\n\n  return (\n    <Popover.Root open={ac.isOpen && !disabled} onOpenChange={ac.handleOpenChange}>\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-autocomplete-root=\"\"\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={ac.inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default\"\n          >\n            {label}\n          </label>\n        )}\n\n        <Popover.Anchor asChild>\n          {/* biome-ignore lint/a11y/noStaticElementInteractions: Container delegates click to the inner input */}\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard interaction is handled by the inner combobox input */}\n          <div\n            className={cn(\n              \"flex flex-wrap items-center overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n              error ? \"border-error-default\" : \"border-transparent\",\n              !disabled && !error && \"hover:border-neutral-400\",\n              ac.isOpen && !error && !disabled && \"border-neutral-400\",\n              CONTAINER_HEIGHT[size],\n              PADDING_CLASSES[size],\n              disabled && \"opacity-50\",\n            )}\n            onClick={ac.handleContainerClick}\n          >\n            {leftIcon && (\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n                {leftIcon}\n              </div>\n            )}\n\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n              {ac.isMulti &&\n                ac.selectedMultiOptions.map((opt) => (\n                  <AutocompleteTag\n                    key={opt.value}\n                    option={opt}\n                    disabled={disabled}\n                    onRemove={() => ac.toggleMulti(opt.value)}\n                    renderTag={renderTag}\n                  />\n                ))}\n\n              <input\n                ref={ac.inputRef}\n                id={ac.inputId}\n                role=\"combobox\"\n                type=\"text\"\n                disabled={disabled}\n                aria-expanded={ac.isOpen}\n                aria-controls={ac.isOpen ? ac.listboxId : undefined}\n                aria-activedescendant={ac.activeDescendantId}\n                aria-autocomplete=\"list\"\n                aria-describedby={bottomText ? ac.helperTextId : undefined}\n                aria-invalid={error || undefined}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledby}\n                autoComplete=\"off\"\n                placeholder={\n                  ac.isMulti && ac.selectedMultiValues.length > 0 ? undefined : placeholder\n                }\n                value={ac.displayInputValue}\n                onChange={ac.handleInputChange}\n                onKeyDown={ac.handleKeyDown}\n                onFocus={ac.handleFocus}\n                onBlur={ac.handleBlur}\n                className={cn(\n                  \"min-w-[40px] flex-1 truncate rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n                  INPUT_SIZE_CLASSES[size],\n                )}\n              />\n            </div>\n\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {loading && <SpinnerIcon className=\"size-4 animate-spin text-foreground-secondary\" />}\n              {clearable && ac.hasClearableValue && !disabled && (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={clearAriaLabel}\n                  className=\"flex size-5 shrink-0 cursor-pointer items-center justify-center text-foreground-secondary hover:text-foreground-default active:scale-95\"\n                  onClick={ac.handleClear}\n                >\n                  <CloseIcon className=\"size-4\" />\n                </button>\n              )}\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n                <ChevronDownIcon\n                  className={cn(\"size-5 transition-transform\", ac.isOpen && \"rotate-180\")}\n                />\n              </div>\n            </div>\n          </div>\n        </Popover.Anchor>\n\n        <Popover.Portal>\n          <Popover.Content\n            sideOffset={4}\n            collisionPadding={8}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\" }}\n            className={cn(\n              \"w-(--radix-popover-trigger-width) min-w-(--radix-popper-anchor-width) overflow-hidden rounded-xl border border-neutral-200 bg-surface-page text-foreground-default shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n              \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n              \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n            )}\n          >\n            <div\n              ref={ac.listRef}\n              id={ac.listboxId}\n              role=\"listbox\"\n              aria-label={label ?? ariaLabel ?? \"Options\"}\n              aria-multiselectable={ac.isMulti || undefined}\n              className=\"max-h-60 overflow-y-auto p-1\"\n            >\n              <AutocompleteDropdownContent\n                loading={loading}\n                loadingText={loadingText}\n                emptyText={emptyText}\n                visibleOptions={ac.visibleOptions}\n                listboxId={ac.listboxId}\n                activeIndex={ac.activeIndex}\n                isMulti={ac.isMulti}\n                selectedMultiValues={ac.selectedMultiValues}\n                selectedValue={ac.selectedValue}\n                onSelect={ac.handleSelect}\n                onMouseEnter={ac.setActiveIndex}\n                renderOption={renderOption}\n              />\n            </div>\n          </Popover.Content>\n        </Popover.Portal>\n\n        {bottomText && (\n          <p\n            id={ac.helperTextId}\n            className={cn(\n              \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n              error ? \"text-error-default\" : \"text-foreground-secondary\",\n            )}\n          >\n            {bottomText}\n          </p>\n        )}\n      </div>\n    </Popover.Root>\n  );\n});\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"names":["React","useAutocomplete","jsx","Popover","jsxs","cn","AutocompleteTag","SpinnerIcon","CloseIcon","ChevronDownIcon","AutocompleteDropdownContent"],"mappings":"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"}
+{"version":3,"file":"Autocomplete.cjs","sources":["../../../../src/components/Autocomplete/Autocomplete.tsx"],"sourcesContent":["import * as Popover from \"@radix-ui/react-popover\";\nimport * as React from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport { ChevronDownIcon } from \"../Icons/ChevronDownIcon\";\nimport { CloseIcon } from \"../Icons/CloseIcon\";\nimport { SpinnerIcon } from \"../Icons/SpinnerIcon\";\nimport { AutocompleteDropdownContent } from \"./AutocompleteDropdownContent\";\nimport { AutocompleteTag } from \"./AutocompleteTag\";\nimport { useAutocomplete } from \"./useAutocomplete\";\n\nexport type AutocompleteSize = \"48\" | \"40\" | \"32\";\n\nexport interface AutocompleteOption {\n  value: string;\n  label?: string;\n  disabled?: boolean;\n}\n\ninterface AutocompleteBaseProps {\n  label?: string;\n  \"aria-label\"?: string;\n  \"aria-labelledby\"?: string;\n  helperText?: string;\n  /** @default \"48\" */\n  size?: AutocompleteSize;\n  /** @default false */\n  error?: boolean;\n  errorMessage?: string;\n  placeholder?: string;\n  leftIcon?: React.ReactNode;\n  /** @default false */\n  fullWidth?: boolean;\n  /** @default false */\n  disabled?: boolean;\n  /** @default false */\n  clearable?: boolean;\n  clearAriaLabel?: string;\n  id?: string;\n  className?: string;\n  options: AutocompleteOption[];\n  inputValue?: string;\n  onInputChange?: (value: string) => void;\n  filterFn?: (option: AutocompleteOption, query: string) => boolean;\n  /** @default false */\n  creatable?: boolean;\n  creatableLabel?: (inputValue: string) => string;\n  onCreate?: (inputValue: string) => void;\n  /** @default false */\n  loading?: boolean;\n  loadingText?: string;\n  emptyText?: string;\n  renderOption?: (\n    option: AutocompleteOption,\n    state: { selected: boolean; active: boolean },\n  ) => React.ReactNode;\n  renderTag?: (option: AutocompleteOption, onRemove: () => void) => React.ReactNode;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n}\n\ninterface AutocompleteSingleProps extends AutocompleteBaseProps {\n  multiple?: false;\n  value?: string | null;\n  defaultValue?: string | null;\n  onChange?: (value: string | null) => void;\n}\n\ninterface AutocompleteMultiProps extends AutocompleteBaseProps {\n  multiple: true;\n  value?: string[];\n  defaultValue?: string[];\n  onChange?: (values: string[]) => void;\n}\n\nexport type AutocompleteProps = AutocompleteSingleProps | AutocompleteMultiProps;\n\nconst CONTAINER_HEIGHT: Record<AutocompleteSize, string> = {\n  \"48\": \"min-h-12\",\n  \"40\": \"min-h-10\",\n  \"32\": \"min-h-8\",\n};\n\nconst INPUT_SIZE_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"typography-regular-body-lg\",\n  \"40\": \"typography-regular-body-lg\",\n  \"32\": \"typography-regular-body-md\",\n};\n\nconst PADDING_CLASSES: Record<AutocompleteSize, string> = {\n  \"48\": \"px-4 py-1.5 gap-3\",\n  \"40\": \"px-4 py-1 gap-3\",\n  \"32\": \"px-3 py-1 gap-2\",\n};\n\nfunction warnMissingAccessibleName(label?: string, ariaLabel?: string, ariaLabelledBy?: string) {\n  if (process.env.NODE_ENV !== \"production\") {\n    if (!label && !ariaLabel && !ariaLabelledBy) {\n      console.warn(\n        \"Autocomplete: no accessible name provided. Pass a `label`, `aria-label`, or `aria-labelledby` prop.\",\n      );\n    }\n  }\n}\n\n// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: Conditional JSX branches in the render template\nexport const Autocomplete = React.forwardRef<HTMLInputElement, AutocompleteProps>((props, ref) => {\n  const {\n    label,\n    \"aria-label\": ariaLabel,\n    \"aria-labelledby\": ariaLabelledby,\n    helperText,\n    size = \"48\",\n    error = false,\n    errorMessage,\n    placeholder,\n    leftIcon,\n    fullWidth = false,\n    disabled = false,\n    clearable = false,\n    clearAriaLabel = \"Clear\",\n    className,\n    loading = false,\n    loadingText,\n    emptyText = \"No results\",\n    renderOption,\n    renderTag,\n  } = props;\n\n  const ac = useAutocomplete(props);\n\n  React.useImperativeHandle(ref, () => ac.inputRef.current as HTMLInputElement);\n\n  warnMissingAccessibleName(label, ariaLabel, ariaLabelledby);\n\n  const bottomText = error && errorMessage ? errorMessage : helperText;\n\n  return (\n    <Popover.Root open={ac.isOpen && !disabled} onOpenChange={ac.handleOpenChange}>\n      <div\n        className={cn(\"flex flex-col\", fullWidth && \"w-full\", className)}\n        data-autocomplete-root=\"\"\n        data-disabled={disabled ? \"\" : undefined}\n        data-error={error ? \"\" : undefined}\n      >\n        {label && (\n          <label\n            htmlFor={ac.inputId}\n            className=\"typography-semibold-body-sm px-1 pt-1 pb-2 text-foreground-default\"\n          >\n            {label}\n          </label>\n        )}\n\n        <Popover.Anchor asChild>\n          {/* biome-ignore lint/a11y/noStaticElementInteractions: Container delegates click to the inner input */}\n          {/* biome-ignore lint/a11y/useKeyWithClickEvents: Keyboard interaction is handled by the inner combobox input */}\n          <div\n            className={cn(\n              \"flex flex-wrap items-center overflow-hidden rounded-xl border bg-neutral-100 has-focus-visible:outline-none motion-safe:transition-colors\",\n              error ? \"border-error-default\" : \"border-transparent\",\n              !disabled && !error && \"hover:border-neutral-400\",\n              ac.isOpen && !error && !disabled && \"border-neutral-400\",\n              CONTAINER_HEIGHT[size],\n              PADDING_CLASSES[size],\n              disabled && \"opacity-50\",\n            )}\n            onClick={ac.handleContainerClick}\n          >\n            {leftIcon && (\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n                {leftIcon}\n              </div>\n            )}\n\n            <div className=\"flex min-w-0 flex-1 flex-wrap items-center gap-1.5\">\n              {ac.isMulti &&\n                ac.selectedMultiOptions.map((opt) => (\n                  <AutocompleteTag\n                    key={opt.value}\n                    option={opt}\n                    disabled={disabled}\n                    onRemove={() => ac.toggleMulti(opt.value)}\n                    renderTag={renderTag}\n                  />\n                ))}\n\n              <input\n                ref={ac.inputRef}\n                id={ac.inputId}\n                role=\"combobox\"\n                type=\"text\"\n                disabled={disabled}\n                aria-expanded={ac.isOpen}\n                aria-controls={ac.isOpen ? ac.listboxId : undefined}\n                aria-activedescendant={ac.activeDescendantId}\n                aria-autocomplete=\"list\"\n                aria-describedby={bottomText ? ac.helperTextId : undefined}\n                aria-invalid={error || undefined}\n                aria-label={ariaLabel}\n                aria-labelledby={ariaLabelledby}\n                autoComplete=\"off\"\n                placeholder={\n                  ac.isMulti && ac.selectedMultiValues.length > 0 ? undefined : placeholder\n                }\n                value={ac.displayInputValue}\n                onChange={ac.handleInputChange}\n                onKeyDown={ac.handleKeyDown}\n                onFocus={ac.handleFocus}\n                onBlur={ac.handleBlur}\n                className={cn(\n                  \"min-w-[40px] flex-1 truncate rounded-xl bg-transparent text-foreground-default no-underline placeholder:text-foreground-secondary placeholder:opacity-40 focus:outline-none disabled:cursor-not-allowed\",\n                  INPUT_SIZE_CLASSES[size],\n                )}\n              />\n            </div>\n\n            <div className=\"flex shrink-0 items-center gap-1\">\n              {loading && <SpinnerIcon className=\"size-4 animate-spin text-foreground-secondary\" />}\n              {clearable && ac.hasClearableValue && !disabled && (\n                <button\n                  type=\"button\"\n                  tabIndex={-1}\n                  aria-label={clearAriaLabel}\n                  className=\"flex size-5 shrink-0 cursor-pointer items-center justify-center text-foreground-secondary hover:text-foreground-default active:scale-95\"\n                  onClick={ac.handleClear}\n                >\n                  <CloseIcon className=\"size-4\" />\n                </button>\n              )}\n              <div className=\"flex size-5 shrink-0 items-center justify-center text-foreground-secondary\">\n                <ChevronDownIcon\n                  className={cn(\"size-5 transition-transform\", ac.isOpen && \"rotate-180\")}\n                />\n              </div>\n            </div>\n          </div>\n        </Popover.Anchor>\n\n        <Popover.Portal>\n          <Popover.Content\n            sideOffset={4}\n            collisionPadding={8}\n            onOpenAutoFocus={(e) => e.preventDefault()}\n            onCloseAutoFocus={(e) => e.preventDefault()}\n            style={{ zIndex: \"var(--fanvue-ui-portal-z-index, 50)\" }}\n            className={cn(\n              \"w-(--radix-popover-trigger-width) min-w-(--radix-popper-anchor-width) overflow-hidden rounded-xl border border-neutral-200 bg-surface-page text-foreground-default shadow-[0_4px_16px_rgba(0,0,0,0.10)]\",\n              \"data-[state=closed]:animate-out data-[state=open]:animate-in\",\n              \"data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0\",\n              \"data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95\",\n              \"data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2\",\n            )}\n          >\n            <div\n              ref={ac.listRef}\n              id={ac.listboxId}\n              role=\"listbox\"\n              aria-label={label ?? ariaLabel ?? \"Options\"}\n              aria-multiselectable={ac.isMulti || undefined}\n              className=\"max-h-60 overflow-y-auto p-1\"\n            >\n              <AutocompleteDropdownContent\n                loading={loading}\n                loadingText={loadingText}\n                emptyText={emptyText}\n                visibleOptions={ac.visibleOptions}\n                listboxId={ac.listboxId}\n                activeIndex={ac.activeIndex}\n                isMulti={ac.isMulti}\n                selectedMultiValues={ac.selectedMultiValues}\n                selectedValue={ac.selectedValue}\n                onSelect={ac.handleSelect}\n                onMouseEnter={ac.setActiveIndex}\n                renderOption={renderOption}\n              />\n            </div>\n          </Popover.Content>\n        </Popover.Portal>\n\n        {bottomText && (\n          <p\n            id={ac.helperTextId}\n            className={cn(\n              \"typography-regular-body-sm px-2 pt-1 pb-0.5\",\n              error ? \"text-error-default\" : \"text-foreground-secondary\",\n            )}\n          >\n            {bottomText}\n          </p>\n        )}\n      </div>\n    </Popover.Root>\n  );\n});\n\nAutocomplete.displayName = \"Autocomplete\";\n"],"names":["React","useAutocomplete","jsx","Popover","jsxs","cn","AutocompleteTag","SpinnerIcon","CloseIcon","ChevronDownIcon","AutocompleteDropdownContent"],"mappings":"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"}

package/dist/cjs/components/Chart/ChartCard.cjs

@@ -0,0 +1,88 @@
+"use client";
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const React = require("react");
+const cn = require("../../utils/cn.cjs");
+const Card = require("../Card/Card.cjs");
+const IconButton = require("../IconButton/IconButton.cjs");
+const InfoCircleIcon = require("../Icons/InfoCircleIcon.cjs");
+const Skeleton = require("../Skeleton/Skeleton.cjs");
+const Tooltip = require("../Tooltip/Tooltip.cjs");
+function _interopNamespaceDefault(e) {
+  const n = Object.create(null, { [Symbol.toStringTag]: { value: "Module" } });
+  if (e) {
+    for (const k in e) {
+      if (k !== "default") {
+        const d = Object.getOwnPropertyDescriptor(e, k);
+        Object.defineProperty(n, k, d.get ? d : {
+          enumerable: true,
+          get: () => e[k]
+        });
+      }
+    }
+  }
+  n.default = e;
+  return Object.freeze(n);
+}
+const React__namespace = /* @__PURE__ */ _interopNamespaceDefault(React);
+const TREND_CLASSES = {
+  positive: "bg-success-background text-success-default",
+  negative: "bg-error-background text-error-default"
+};
+const ChartCard = React__namespace.forwardRef(
+  ({
+    className,
+    title,
+    subtitle,
+    tooltip,
+    tooltipAriaLabel = "More info",
+    dateInfo,
+    trendChip,
+    loading = false,
+    children,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsx(Card.Card, { ref, variant: "outlined", noPadding: true, className, ...props, children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col gap-2 p-4", children: [
+      loading ? /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-4 w-32" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-7 w-44" }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { animation: "wave", variant: "rounded", className: "h-3 w-24" })
+      ] }) : /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-semibold-body-md text-foreground-default", children: title }),
+          tooltip && /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipProvider, { children: /* @__PURE__ */ jsxRuntime.jsxs(Tooltip.Tooltip, { children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxRuntime.jsx(
+              IconButton.IconButton,
+              {
+                variant: "tertiary",
+                size: "24",
+                "aria-label": tooltipAriaLabel,
+                icon: /* @__PURE__ */ jsxRuntime.jsx(InfoCircleIcon.InfoCircleIcon, { className: "size-4 text-foreground-tertiary" })
+              }
+            ) }),
+            /* @__PURE__ */ jsxRuntime.jsx(Tooltip.TooltipContent, { children: tooltip })
+          ] }) })
+        ] }),
+        subtitle && /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-bold-heading-sm text-foreground-default", children: subtitle }),
+          trendChip && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              className: cn.cn(
+                "typography-semibold-body-sm rounded-full px-2 py-0.5",
+                TREND_CLASSES[trendChip.trend]
+              ),
+              children: trendChip.label
+            }
+          )
+        ] }),
+        dateInfo && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "typography-regular-body-sm text-foreground-tertiary", children: dateInfo })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx("div", { className: "mt-auto", children })
+    ] }) });
+  }
+);
+ChartCard.displayName = "ChartCard";
+exports.ChartCard = ChartCard;
+//# sourceMappingURL=ChartCard.cjs.map