@customafk/lunas-ui 0.2.61 → 0.2.63

package/dist/features/charts/index.d.cts

@@ -0,0 +1,349 @@
+//#region packages/components/features/charts/types.d.ts
+/** Trend direction shared with the `Statistic` display component. */
+type ChartTrend = 'up' | 'down' | 'neutral';
+type TimeSeriesPoint = {
+  date: string | Date;
+  value: number; /** Same-bucket value from the comparison period (enables the comparison series). */
+  previousValue?: number;
+};
+type ChartSeries = {
+  key: string;
+  label: string;
+  color?: string;
+};
+type NamedValue = {
+  name: string;
+  value: number;
+};
+/** Props shared by every prebuilt chart. */
+type BaseChartProps = {
+  className?: string; /** Enable the recharts enter animation. Disable for deterministic tests. Defaults to `true`. */
+  animate?: boolean; /** Fixed height in px; otherwise the container's aspect-video ratio applies. */
+  height?: number;
+};
+//#endregion
+//#region packages/components/features/charts/components/conversion-funnel-chart.d.ts
+type FunnelStage = NamedValue & {
+  /** Config key; derived from `name` when omitted. */key?: string;
+  color?: string;
+};
+type ConversionFunnelChartProps = BaseChartProps & {
+  /** Funnel stages ordered top (widest) to bottom. */data: FunnelStage[]; /** Appends each stage's percentage of the first stage. Defaults to `true`. */
+  showConversionRates?: boolean;
+  valueFormatter?: (value: number) => string;
+};
+/**
+ * A conversion funnel for the ecommerce purchase journey — sessions, product views, carts,
+ * checkouts, purchases — with per-stage conversion rates against the first stage.
+ *
+ * @example
+ * ```tsx
+ * import { ConversionFunnelChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <ConversionFunnelChart
+ *   data={[
+ *     { name: 'Sessions', value: 50000 },
+ *     { name: 'Product views', value: 32000 },
+ *     { name: 'Added to cart', value: 8400 },
+ *     { name: 'Purchased', value: 2900 },
+ *   ]}
+ * />
+ * ```
+ */
+declare const ConversionFunnelChart: ({
+  data,
+  showConversionRates,
+  valueFormatter,
+  className,
+  animate,
+  height
+}: ConversionFunnelChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/donut-chart.d.ts
+type DonutChartSegment = NamedValue & {
+  /** Config key; derived from `name` when omitted. */key?: string;
+  color?: string;
+};
+type DonutChartProps = BaseChartProps & {
+  data: DonutChartSegment[]; /** Text under the center total, e.g. `'Total sales'`. */
+  centerLabel?: string; /** Formats the center total. Defaults to compact notation. */
+  centerValueFormatter?: (total: number) => string; /** Overrides the computed segment sum shown in the center. */
+  totalValue?: number;
+  showLegend?: boolean;
+  showCenterTotal?: boolean;
+};
+/**
+ * A donut breakdown chart with a center total — category sales, traffic sources, payment methods.
+ *
+ * @example
+ * ```tsx
+ * import { DonutChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <DonutChart
+ *   data={[
+ *     { name: 'Fashion', value: 12400 },
+ *     { name: 'Electronics', value: 8200 },
+ *   ]}
+ *   centerLabel="Total sales"
+ * />
+ * ```
+ */
+declare const DonutChart: ({
+  data,
+  centerLabel,
+  centerValueFormatter,
+  totalValue,
+  showLegend,
+  showCenterTotal,
+  className,
+  animate,
+  height
+}: DonutChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/orders-bar-chart.d.ts
+type OrdersBarChartProps = BaseChartProps & {
+  data: Array<{
+    date: string | Date;
+  } & Record<string, unknown>>; /** Simple mode: the key holding each period's count. Defaults to `'orders'`. */
+  dataKey?: string; /** Series label in simple mode. Defaults to `'Orders'`. */
+  label?: string; /** Stacked mode: one series per order status; each `key` indexes into the data rows. */
+  statuses?: ChartSeries[];
+  color?: string;
+  valueFormatter?: (value: number) => string;
+  dateFormatter?: (date: string | Date) => string; /** Defaults to `true` when `statuses` is provided. */
+  showLegend?: boolean;
+  showGrid?: boolean;
+};
+/**
+ * A bar chart for order volume per period — a single series by default, or stacked by order
+ * status when `statuses` is provided.
+ *
+ * @example
+ * ```tsx
+ * import { OrdersBarChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <OrdersBarChart
+ *   data={[{ date: '2026-06-01', completed: 32, pending: 6, cancelled: 2 }]}
+ *   statuses={[
+ *     { key: 'completed', label: 'Completed' },
+ *     { key: 'pending', label: 'Pending' },
+ *     { key: 'cancelled', label: 'Cancelled' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const OrdersBarChart: ({
+  data,
+  dataKey,
+  label,
+  statuses,
+  color,
+  valueFormatter,
+  dateFormatter,
+  showLegend,
+  showGrid,
+  className,
+  animate,
+  height
+}: OrdersBarChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/revenue-area-chart.d.ts
+type RevenueAreaChartProps = BaseChartProps & {
+  data: TimeSeriesPoint[]; /** Series label. Defaults to `'Revenue'`. */
+  label?: string; /** Comparison series label. Defaults to `'Previous period'`. */
+  comparisonLabel?: string; /** Renders `previousValue` as a second, muted area series. */
+  showComparison?: boolean;
+  color?: string;
+  comparisonColor?: string; /** Formats tooltip and Y-axis values. Defaults to compact currency. */
+  valueFormatter?: (value: number) => string;
+  dateFormatter?: (date: string | Date) => string; /** Defaults to `showComparison`. */
+  showLegend?: boolean;
+  showGrid?: boolean;
+};
+/**
+ * A gradient area chart for revenue (or any currency metric) over time, with an optional
+ * previous-period comparison series.
+ *
+ * @example
+ * ```tsx
+ * import { RevenueAreaChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <RevenueAreaChart
+ *   data={[
+ *     { date: '2026-06-01', value: 4200, previousValue: 3800 },
+ *     { date: '2026-06-02', value: 5100, previousValue: 4300 },
+ *   ]}
+ *   showComparison
+ * />
+ * ```
+ */
+declare const RevenueAreaChart: ({
+  data,
+  label,
+  comparisonLabel,
+  showComparison,
+  color,
+  comparisonColor,
+  valueFormatter,
+  dateFormatter,
+  showLegend,
+  showGrid,
+  className,
+  animate,
+  height
+}: RevenueAreaChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/revenue-orders-composed-chart.d.ts
+type RevenueOrdersPoint = {
+  date: string | Date;
+  revenue: number;
+  orders: number;
+};
+type RevenueOrdersComposedChartProps = BaseChartProps & {
+  data: RevenueOrdersPoint[];
+  revenueLabel?: string;
+  ordersLabel?: string;
+  revenueColor?: string;
+  ordersColor?: string; /** Formats the left (revenue) axis and tooltip values. Defaults to compact currency. */
+  revenueFormatter?: (value: number) => string; /** Formats the right (orders) axis and tooltip values. */
+  ordersFormatter?: (value: number) => string;
+  dateFormatter?: (date: string | Date) => string;
+  showLegend?: boolean;
+  showGrid?: boolean;
+};
+/**
+ * A dual-axis chart combining revenue bars (left axis, currency) with an orders line
+ * (right axis, count) to correlate the two metrics per period.
+ *
+ * @example
+ * ```tsx
+ * import { RevenueOrdersComposedChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <RevenueOrdersComposedChart
+ *   data={[{ date: '2026-06-01', revenue: 12400, orders: 87 }]}
+ * />
+ * ```
+ */
+declare const RevenueOrdersComposedChart: ({
+  data,
+  revenueLabel,
+  ordersLabel,
+  revenueColor,
+  ordersColor,
+  revenueFormatter,
+  ordersFormatter,
+  dateFormatter,
+  showLegend,
+  showGrid,
+  className,
+  animate,
+  height
+}: RevenueOrdersComposedChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/sales-target-radial-chart.d.ts
+type SalesTargetRadialChartProps = BaseChartProps & {
+  /** Current progress value, e.g. revenue to date. */value: number; /** The goal the value is measured against. */
+  target: number; /** Text under the center figure. Defaults to `'Target'`. */
+  label?: string; /** Formats the center figure. Defaults to percent-of-target. */
+  valueFormatter?: (value: number, target: number) => string;
+  color?: string;
+};
+/**
+ * A radial gauge showing progress toward a sales target with the completion figure in the center.
+ *
+ * @example
+ * ```tsx
+ * import { SalesTargetRadialChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <SalesTargetRadialChart value={65_000} target={100_000} label="Monthly target" />
+ * ```
+ */
+declare const SalesTargetRadialChart: ({
+  value,
+  target,
+  label,
+  valueFormatter,
+  color,
+  className,
+  animate,
+  height
+}: SalesTargetRadialChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/sparkline-chart.d.ts
+type SparklineChartProps = {
+  data: number[] | Array<{
+    value: number;
+  }>; /** Render style. Defaults to `'area'`. */
+  type?: 'line' | 'area'; /** Colors the series like the `Statistic` trend prop. Defaults to `'neutral'`. */
+  trend?: ChartTrend; /** Explicit series color; overrides `trend`. */
+  color?: string; /** Fixed height in px. Defaults to `40`. */
+  height?: number;
+  animate?: boolean;
+  className?: string;
+};
+/**
+ * A tiny, axis-less trend chart for KPI cards; pairs with the `Statistic` display component.
+ *
+ * @example
+ * ```tsx
+ * import { SparklineChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <SparklineChart data={[12, 18, 14, 26, 22, 31]} trend="up" />
+ * ```
+ */
+declare const SparklineChart: ({
+  data,
+  type,
+  trend,
+  color,
+  height,
+  animate,
+  className
+}: SparklineChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/top-products-bar-chart.d.ts
+type TopProductsBarChartProps = BaseChartProps & {
+  data: NamedValue[]; /** Series label. Defaults to `'Sales'`. */
+  label?: string; /** Number of items shown after sorting descending. Defaults to `8`. */
+  maxItems?: number;
+  color?: string;
+  valueFormatter?: (value: number) => string; /** Value labels at the end of each bar. Defaults to `true`. */
+  showValueLabels?: boolean;
+};
+/**
+ * A horizontal bar ranking chart — top products, best categories, top customers.
+ *
+ * @example
+ * ```tsx
+ * import { TopProductsBarChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <TopProductsBarChart
+ *   data={[
+ *     { name: 'Wireless Earbuds', value: 1245 },
+ *     { name: 'Smart Watch', value: 986 },
+ *   ]}
+ * />
+ * ```
+ */
+declare const TopProductsBarChart: ({
+  data,
+  label,
+  maxItems,
+  color,
+  valueFormatter,
+  showValueLabels,
+  className,
+  animate,
+  height
+}: TopProductsBarChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/utils.d.ts
+/** Cycles through the eight `--chart-N` theme palette variables. */
+declare const getChartColor: (index: number) => string;
+declare const formatCompactNumber: (value: number, locale?: string) => string;
+declare const formatCurrency: (value: number, currency?: string, locale?: string) => string;
+declare const formatPercent: (value: number, locale?: string) => string;
+declare const toDateLabel: (date: string | Date, locale?: string) => string;
+//#endregion
+export { BaseChartProps, ChartSeries, ChartTrend, ConversionFunnelChart, ConversionFunnelChartProps, DonutChart, DonutChartProps, DonutChartSegment, FunnelStage, NamedValue, OrdersBarChart, OrdersBarChartProps, RevenueAreaChart, RevenueAreaChartProps, RevenueOrdersComposedChart, RevenueOrdersComposedChartProps, RevenueOrdersPoint, SalesTargetRadialChart, SalesTargetRadialChartProps, SparklineChart, SparklineChartProps, TimeSeriesPoint, TopProductsBarChart, TopProductsBarChartProps, formatCompactNumber, formatCurrency, formatPercent, getChartColor, toDateLabel };
+//# sourceMappingURL=index.d.cts.map

package/dist/features/charts/index.d.mts

@@ -0,0 +1,349 @@
+//#region packages/components/features/charts/types.d.ts
+/** Trend direction shared with the `Statistic` display component. */
+type ChartTrend = 'up' | 'down' | 'neutral';
+type TimeSeriesPoint = {
+  date: string | Date;
+  value: number; /** Same-bucket value from the comparison period (enables the comparison series). */
+  previousValue?: number;
+};
+type ChartSeries = {
+  key: string;
+  label: string;
+  color?: string;
+};
+type NamedValue = {
+  name: string;
+  value: number;
+};
+/** Props shared by every prebuilt chart. */
+type BaseChartProps = {
+  className?: string; /** Enable the recharts enter animation. Disable for deterministic tests. Defaults to `true`. */
+  animate?: boolean; /** Fixed height in px; otherwise the container's aspect-video ratio applies. */
+  height?: number;
+};
+//#endregion
+//#region packages/components/features/charts/components/conversion-funnel-chart.d.ts
+type FunnelStage = NamedValue & {
+  /** Config key; derived from `name` when omitted. */key?: string;
+  color?: string;
+};
+type ConversionFunnelChartProps = BaseChartProps & {
+  /** Funnel stages ordered top (widest) to bottom. */data: FunnelStage[]; /** Appends each stage's percentage of the first stage. Defaults to `true`. */
+  showConversionRates?: boolean;
+  valueFormatter?: (value: number) => string;
+};
+/**
+ * A conversion funnel for the ecommerce purchase journey — sessions, product views, carts,
+ * checkouts, purchases — with per-stage conversion rates against the first stage.
+ *
+ * @example
+ * ```tsx
+ * import { ConversionFunnelChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <ConversionFunnelChart
+ *   data={[
+ *     { name: 'Sessions', value: 50000 },
+ *     { name: 'Product views', value: 32000 },
+ *     { name: 'Added to cart', value: 8400 },
+ *     { name: 'Purchased', value: 2900 },
+ *   ]}
+ * />
+ * ```
+ */
+declare const ConversionFunnelChart: ({
+  data,
+  showConversionRates,
+  valueFormatter,
+  className,
+  animate,
+  height
+}: ConversionFunnelChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/donut-chart.d.ts
+type DonutChartSegment = NamedValue & {
+  /** Config key; derived from `name` when omitted. */key?: string;
+  color?: string;
+};
+type DonutChartProps = BaseChartProps & {
+  data: DonutChartSegment[]; /** Text under the center total, e.g. `'Total sales'`. */
+  centerLabel?: string; /** Formats the center total. Defaults to compact notation. */
+  centerValueFormatter?: (total: number) => string; /** Overrides the computed segment sum shown in the center. */
+  totalValue?: number;
+  showLegend?: boolean;
+  showCenterTotal?: boolean;
+};
+/**
+ * A donut breakdown chart with a center total — category sales, traffic sources, payment methods.
+ *
+ * @example
+ * ```tsx
+ * import { DonutChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <DonutChart
+ *   data={[
+ *     { name: 'Fashion', value: 12400 },
+ *     { name: 'Electronics', value: 8200 },
+ *   ]}
+ *   centerLabel="Total sales"
+ * />
+ * ```
+ */
+declare const DonutChart: ({
+  data,
+  centerLabel,
+  centerValueFormatter,
+  totalValue,
+  showLegend,
+  showCenterTotal,
+  className,
+  animate,
+  height
+}: DonutChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/orders-bar-chart.d.ts
+type OrdersBarChartProps = BaseChartProps & {
+  data: Array<{
+    date: string | Date;
+  } & Record<string, unknown>>; /** Simple mode: the key holding each period's count. Defaults to `'orders'`. */
+  dataKey?: string; /** Series label in simple mode. Defaults to `'Orders'`. */
+  label?: string; /** Stacked mode: one series per order status; each `key` indexes into the data rows. */
+  statuses?: ChartSeries[];
+  color?: string;
+  valueFormatter?: (value: number) => string;
+  dateFormatter?: (date: string | Date) => string; /** Defaults to `true` when `statuses` is provided. */
+  showLegend?: boolean;
+  showGrid?: boolean;
+};
+/**
+ * A bar chart for order volume per period — a single series by default, or stacked by order
+ * status when `statuses` is provided.
+ *
+ * @example
+ * ```tsx
+ * import { OrdersBarChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <OrdersBarChart
+ *   data={[{ date: '2026-06-01', completed: 32, pending: 6, cancelled: 2 }]}
+ *   statuses={[
+ *     { key: 'completed', label: 'Completed' },
+ *     { key: 'pending', label: 'Pending' },
+ *     { key: 'cancelled', label: 'Cancelled' },
+ *   ]}
+ * />
+ * ```
+ */
+declare const OrdersBarChart: ({
+  data,
+  dataKey,
+  label,
+  statuses,
+  color,
+  valueFormatter,
+  dateFormatter,
+  showLegend,
+  showGrid,
+  className,
+  animate,
+  height
+}: OrdersBarChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/revenue-area-chart.d.ts
+type RevenueAreaChartProps = BaseChartProps & {
+  data: TimeSeriesPoint[]; /** Series label. Defaults to `'Revenue'`. */
+  label?: string; /** Comparison series label. Defaults to `'Previous period'`. */
+  comparisonLabel?: string; /** Renders `previousValue` as a second, muted area series. */
+  showComparison?: boolean;
+  color?: string;
+  comparisonColor?: string; /** Formats tooltip and Y-axis values. Defaults to compact currency. */
+  valueFormatter?: (value: number) => string;
+  dateFormatter?: (date: string | Date) => string; /** Defaults to `showComparison`. */
+  showLegend?: boolean;
+  showGrid?: boolean;
+};
+/**
+ * A gradient area chart for revenue (or any currency metric) over time, with an optional
+ * previous-period comparison series.
+ *
+ * @example
+ * ```tsx
+ * import { RevenueAreaChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <RevenueAreaChart
+ *   data={[
+ *     { date: '2026-06-01', value: 4200, previousValue: 3800 },
+ *     { date: '2026-06-02', value: 5100, previousValue: 4300 },
+ *   ]}
+ *   showComparison
+ * />
+ * ```
+ */
+declare const RevenueAreaChart: ({
+  data,
+  label,
+  comparisonLabel,
+  showComparison,
+  color,
+  comparisonColor,
+  valueFormatter,
+  dateFormatter,
+  showLegend,
+  showGrid,
+  className,
+  animate,
+  height
+}: RevenueAreaChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/revenue-orders-composed-chart.d.ts
+type RevenueOrdersPoint = {
+  date: string | Date;
+  revenue: number;
+  orders: number;
+};
+type RevenueOrdersComposedChartProps = BaseChartProps & {
+  data: RevenueOrdersPoint[];
+  revenueLabel?: string;
+  ordersLabel?: string;
+  revenueColor?: string;
+  ordersColor?: string; /** Formats the left (revenue) axis and tooltip values. Defaults to compact currency. */
+  revenueFormatter?: (value: number) => string; /** Formats the right (orders) axis and tooltip values. */
+  ordersFormatter?: (value: number) => string;
+  dateFormatter?: (date: string | Date) => string;
+  showLegend?: boolean;
+  showGrid?: boolean;
+};
+/**
+ * A dual-axis chart combining revenue bars (left axis, currency) with an orders line
+ * (right axis, count) to correlate the two metrics per period.
+ *
+ * @example
+ * ```tsx
+ * import { RevenueOrdersComposedChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <RevenueOrdersComposedChart
+ *   data={[{ date: '2026-06-01', revenue: 12400, orders: 87 }]}
+ * />
+ * ```
+ */
+declare const RevenueOrdersComposedChart: ({
+  data,
+  revenueLabel,
+  ordersLabel,
+  revenueColor,
+  ordersColor,
+  revenueFormatter,
+  ordersFormatter,
+  dateFormatter,
+  showLegend,
+  showGrid,
+  className,
+  animate,
+  height
+}: RevenueOrdersComposedChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/sales-target-radial-chart.d.ts
+type SalesTargetRadialChartProps = BaseChartProps & {
+  /** Current progress value, e.g. revenue to date. */value: number; /** The goal the value is measured against. */
+  target: number; /** Text under the center figure. Defaults to `'Target'`. */
+  label?: string; /** Formats the center figure. Defaults to percent-of-target. */
+  valueFormatter?: (value: number, target: number) => string;
+  color?: string;
+};
+/**
+ * A radial gauge showing progress toward a sales target with the completion figure in the center.
+ *
+ * @example
+ * ```tsx
+ * import { SalesTargetRadialChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <SalesTargetRadialChart value={65_000} target={100_000} label="Monthly target" />
+ * ```
+ */
+declare const SalesTargetRadialChart: ({
+  value,
+  target,
+  label,
+  valueFormatter,
+  color,
+  className,
+  animate,
+  height
+}: SalesTargetRadialChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/sparkline-chart.d.ts
+type SparklineChartProps = {
+  data: number[] | Array<{
+    value: number;
+  }>; /** Render style. Defaults to `'area'`. */
+  type?: 'line' | 'area'; /** Colors the series like the `Statistic` trend prop. Defaults to `'neutral'`. */
+  trend?: ChartTrend; /** Explicit series color; overrides `trend`. */
+  color?: string; /** Fixed height in px. Defaults to `40`. */
+  height?: number;
+  animate?: boolean;
+  className?: string;
+};
+/**
+ * A tiny, axis-less trend chart for KPI cards; pairs with the `Statistic` display component.
+ *
+ * @example
+ * ```tsx
+ * import { SparklineChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <SparklineChart data={[12, 18, 14, 26, 22, 31]} trend="up" />
+ * ```
+ */
+declare const SparklineChart: ({
+  data,
+  type,
+  trend,
+  color,
+  height,
+  animate,
+  className
+}: SparklineChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/components/top-products-bar-chart.d.ts
+type TopProductsBarChartProps = BaseChartProps & {
+  data: NamedValue[]; /** Series label. Defaults to `'Sales'`. */
+  label?: string; /** Number of items shown after sorting descending. Defaults to `8`. */
+  maxItems?: number;
+  color?: string;
+  valueFormatter?: (value: number) => string; /** Value labels at the end of each bar. Defaults to `true`. */
+  showValueLabels?: boolean;
+};
+/**
+ * A horizontal bar ranking chart — top products, best categories, top customers.
+ *
+ * @example
+ * ```tsx
+ * import { TopProductsBarChart } from '@customafk/lunas-ui/features/charts';
+ *
+ * <TopProductsBarChart
+ *   data={[
+ *     { name: 'Wireless Earbuds', value: 1245 },
+ *     { name: 'Smart Watch', value: 986 },
+ *   ]}
+ * />
+ * ```
+ */
+declare const TopProductsBarChart: ({
+  data,
+  label,
+  maxItems,
+  color,
+  valueFormatter,
+  showValueLabels,
+  className,
+  animate,
+  height
+}: TopProductsBarChartProps) => import("react").JSX.Element;
+//#endregion
+//#region packages/components/features/charts/utils.d.ts
+/** Cycles through the eight `--chart-N` theme palette variables. */
+declare const getChartColor: (index: number) => string;
+declare const formatCompactNumber: (value: number, locale?: string) => string;
+declare const formatCurrency: (value: number, currency?: string, locale?: string) => string;
+declare const formatPercent: (value: number, locale?: string) => string;
+declare const toDateLabel: (date: string | Date, locale?: string) => string;
+//#endregion
+export { BaseChartProps, ChartSeries, ChartTrend, ConversionFunnelChart, ConversionFunnelChartProps, DonutChart, DonutChartProps, DonutChartSegment, FunnelStage, NamedValue, OrdersBarChart, OrdersBarChartProps, RevenueAreaChart, RevenueAreaChartProps, RevenueOrdersComposedChart, RevenueOrdersComposedChartProps, RevenueOrdersPoint, SalesTargetRadialChart, SalesTargetRadialChartProps, SparklineChart, SparklineChartProps, TimeSeriesPoint, TopProductsBarChart, TopProductsBarChartProps, formatCompactNumber, formatCurrency, formatPercent, getChartColor, toDateLabel };
+//# sourceMappingURL=index.d.mts.map