@fluityy/designsystem 0.2.10 → 0.2.12

package/dist/components/Chart/AreaChart.d.ts

@@ -0,0 +1,17 @@
+import { ChartSeries } from './chartTheme';
+export interface AreaChartProps {
+    data: Array<Record<string, string | number>>;
+    series: ChartSeries[];
+    xKey: string;
+    height?: number;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    showBrush?: boolean;
+    smooth?: boolean;
+    /** Empilha as series (stacked area). */
+    stacked?: boolean;
+    formatValue?: (value: number) => string;
+    formatLabel?: (label: string | number) => string;
+    className?: string;
+}
+export declare function AreaChart({ data, series, xKey, height, showGrid, showLegend, showBrush, smooth, stacked, formatValue, formatLabel, className, }: AreaChartProps): import("react").JSX.Element;

package/dist/components/Chart/BarChart.d.ts

@@ -0,0 +1,21 @@
+import { ChartSeries } from './chartTheme';
+export interface BarChartProps {
+    data: Array<Record<string, string | number>>;
+    series: ChartSeries[];
+    xKey: string;
+    height?: number;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    /** "vertical" = barras em pe (default). "horizontal" = barras deitadas. */
+    orientation?: "vertical" | "horizontal";
+    /** Empilha as series (stacked bars). */
+    stacked?: boolean;
+    /** Raio das pontas das barras. */
+    radius?: number;
+    /** Largura maxima de cada barra em px. Default: 24. */
+    maxBarSize?: number;
+    formatValue?: (value: number) => string;
+    formatLabel?: (label: string | number) => string;
+    className?: string;
+}
+export declare function BarChart({ data, series, xKey, height, showGrid, showLegend, orientation, stacked, radius, maxBarSize, formatValue, formatLabel, className, }: BarChartProps): import("react").JSX.Element;

package/dist/components/Chart/ChartLegend.d.ts

@@ -0,0 +1,12 @@
+export interface ChartLegendItem {
+    dataKey: string;
+    name: string;
+    color: string;
+}
+export interface ChartLegendProps {
+    items: ChartLegendItem[];
+    hidden: Set<string>;
+    onToggle: (dataKey: string) => void;
+    className?: string;
+}
+export declare function ChartLegend({ items, hidden, onToggle, className }: ChartLegendProps): import("react").JSX.Element;

package/dist/components/Chart/ChartTooltip.d.ts

@@ -0,0 +1,8 @@
+import { TooltipContentProps } from 'recharts';
+export interface ChartTooltipProps extends Partial<TooltipContentProps<number, string>> {
+    /** Formata o valor numerico exibido. */
+    formatValue?: (value: number) => string;
+    /** Formata o titulo (label do eixo X). */
+    formatLabel?: (label: string | number) => string;
+}
+export declare function ChartTooltip({ active, payload, label, formatValue, formatLabel, }: ChartTooltipProps): import("react").JSX.Element | null;

package/dist/components/Chart/DonutChart.d.ts

@@ -0,0 +1,24 @@
+export interface DonutDatum {
+    /** Rotulo da fatia. */
+    name: string;
+    /** Valor numerico. */
+    value: number;
+    /** Cor da fatia. Default: cor da paleta pelo indice. */
+    color?: string;
+}
+export interface DonutChartProps {
+    data: DonutDatum[];
+    height?: number;
+    /** Raio interno (0 = pie/pizza, >0 = donut/rosca). Default: 60. */
+    innerRadius?: number;
+    /** Raio externo. Default: 90. */
+    outerRadius?: number;
+    showLegend?: boolean;
+    /** Texto exibido no centro (apenas donut). */
+    centerLabel?: React.ReactNode;
+    /** Sublabel abaixo do centerLabel. */
+    centerSublabel?: React.ReactNode;
+    formatValue?: (value: number) => string;
+    className?: string;
+}
+export declare function DonutChart({ data, height, innerRadius, outerRadius, showLegend, centerLabel, centerSublabel, formatValue, className, }: DonutChartProps): import("react").JSX.Element;

package/dist/components/Chart/LineChart.d.ts

@@ -0,0 +1,17 @@
+import { ChartSeries } from './chartTheme';
+export interface LineChartProps {
+    data: Array<Record<string, string | number>>;
+    series: ChartSeries[];
+    /** Chave do eixo X (categoria/tempo). */
+    xKey: string;
+    height?: number;
+    showGrid?: boolean;
+    showLegend?: boolean;
+    showBrush?: boolean;
+    /** Linhas suavizadas (curva) ao inves de retas. */
+    smooth?: boolean;
+    formatValue?: (value: number) => string;
+    formatLabel?: (label: string | number) => string;
+    className?: string;
+}
+export declare function LineChart({ data, series, xKey, height, showGrid, showLegend, showBrush, smooth, formatValue, formatLabel, className, }: LineChartProps): import("react").JSX.Element;

package/dist/components/Chart/Sparkline.d.ts

@@ -0,0 +1,26 @@
+export type SparklineVariant = "area" | "line" | "bar";
+export interface SparklineProps {
+    /** Pontos do sparkline. Aceita array de numeros ou objetos `{value}`. */
+    data: ReadonlyArray<number> | ReadonlyArray<{
+        value: number;
+    }>;
+    variant?: SparklineVariant;
+    /** Cor base — aceita CSS var ou cor literal. Default: chart-1. */
+    color?: string;
+    /** Altura em pixels. Default: 40. */
+    height?: number;
+    /** Suaviza a curva (monotone). Default: true. */
+    smooth?: boolean;
+    /** Espessura do traço. Default: 1.75. */
+    strokeWidth?: number;
+    /** Preenche a area sob a curva. Default: true. So aplica em `area`. */
+    filled?: boolean;
+    /** Habilita tooltip em hover. Default: true. */
+    interactive?: boolean;
+    /** Formata o valor exibido no tooltip. */
+    formatValue?: (value: number) => string;
+    /** Rotulo exibido antes do valor no tooltip. */
+    tooltipLabel?: string;
+    className?: string;
+}
+export declare function Sparkline({ data, variant, color, height, smooth, strokeWidth, filled, interactive, formatValue, tooltipLabel, className, }: SparklineProps): import("react").JSX.Element;

package/dist/components/Chart/chartTheme.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Paleta categorica para charts. Os valores sao CSS vars geradas pelos tokens
+ * do DS (semantic.chart.*) — trocar tema/marca/modo cascateia automaticamente.
+ */
+export declare const CHART_PALETTE: readonly ["var(--flui-semantic-chart-1)", "var(--flui-semantic-chart-2)", "var(--flui-semantic-chart-3)", "var(--flui-semantic-chart-4)", "var(--flui-semantic-chart-5)", "var(--flui-semantic-chart-6)"];
+export declare const CHART_GRID = "var(--flui-semantic-chart-grid)";
+export declare const CHART_AXIS = "var(--flui-semantic-chart-axis)";
+export declare function paletteColor(index: number): string;
+export interface ChartSeries {
+    /** Chave do objeto `data` que contem o valor desta serie. */
+    dataKey: string;
+    /** Rotulo exibido em tooltip/legenda. Default: dataKey. */
+    name?: string;
+    /** Cor da serie. Default: cor da paleta pelo indice. */
+    color?: string;
+}

package/dist/components/Chart/index.d.ts

@@ -0,0 +1,8 @@
+export { LineChart, type LineChartProps } from './LineChart';
+export { AreaChart, type AreaChartProps } from './AreaChart';
+export { BarChart, type BarChartProps } from './BarChart';
+export { DonutChart, type DonutChartProps, type DonutDatum } from './DonutChart';
+export { Sparkline, type SparklineProps, type SparklineVariant } from './Sparkline';
+export { ChartTooltip, type ChartTooltipProps } from './ChartTooltip';
+export { ChartLegend, type ChartLegendProps, type ChartLegendItem } from './ChartLegend';
+export { CHART_PALETTE, CHART_GRID, CHART_AXIS, paletteColor, type ChartSeries, } from './chartTheme';

package/dist/components/MetricCard/MetricCard.d.ts

@@ -0,0 +1,30 @@
+import { SparklineVariant } from '../Chart/Sparkline';
+export type MetricTone = "primary" | "accent" | "success" | "warning" | "danger" | "neutral";
+export type MetricCardSize = "sm" | "md" | "lg";
+export interface MetricCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Rotulo da metrica (ex: "CPU Time"). */
+    label: React.ReactNode;
+    /** Valor principal exibido em destaque. */
+    value: React.ReactNode;
+    /** Unidade opcional ao lado do valor (ex: "ms", "%"). */
+    unit?: React.ReactNode;
+    /** Variacao % vs periodo anterior. */
+    delta?: number;
+    /** Formata o numero do delta. Default: `↗ N.NN%`. */
+    formatDelta?: (n: number) => string;
+    /** Forca o tom do delta. `"auto"` usa sinal (+ primary / − neutral). */
+    deltaTone?: "auto" | MetricTone;
+    /** Pontos do sparkline. Se vazio/ausente, sparkline e omitido. */
+    data?: ReadonlyArray<number> | ReadonlyArray<{
+        value: number;
+    }>;
+    /** Tipo do sparkline. Default: "area". */
+    sparklineVariant?: SparklineVariant;
+    /** Tom geral (sparkline e indicador). Default: "primary". */
+    tone?: MetricTone;
+    /** Barra inferior colorida. Aceita boolean (usa `tone`) ou um tom especifico. */
+    indicator?: boolean | MetricTone;
+    /** Tamanho do card. Default: "md". */
+    size?: MetricCardSize;
+}
+export declare const MetricCard: import('react').ForwardRefExoticComponent<MetricCardProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,13 @@
+export interface SegmentedControlProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    size?: "sm" | "md";
+    /** Distribui os segmentos com largura igual. */
+    fullWidth?: boolean;
+}
+export declare function SegmentedControl({ value, defaultValue, onValueChange, size, fullWidth, className, children, ...props }: SegmentedControlProps): import("react").JSX.Element;
+export interface SegmentedControlItemProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value"> {
+    value: string;
+}
+export declare function SegmentedControlItem({ value, className, children, disabled, ...props }: SegmentedControlItemProps): import("react").JSX.Element;

package/dist/components/index.d.ts

@@ -13,8 +13,10 @@ export * from './Progress/Progress';
 export * from './Divider/Divider';
 export * from './Breadcrumb/Breadcrumb';
 export * from './StatCard/StatCard';
+export * from './MetricCard/MetricCard';
 export * from './Alert/Alert';
 export * from './Tabs/Tabs';
+export * from './SegmentedControl/SegmentedControl';
 export * from './Accordion/Accordion';
 export * from './Tooltip/Tooltip';
 export * from './Popover/Popover';
@@ -23,5 +25,6 @@ export * from './Drawer/Drawer';
 export * from './Toast/Toast';
 export * from './Textarea/Textarea';
 export * from './CodeBlock/CodeBlock';
+export * from './Chart';
 export * from './ProfileSettingsModal/ProfileSettingsModal';
 export * from '../theme/ThemeProvider';