@flowtomic/ui 0.1.0 → 0.1.2

package/dist/components/molecules/data-display/chart-bar-interactive/chart-bar-interactive.js

@@ -0,0 +1,144 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ChartBarInteractive Component - Flowtomic UI
+ *
+ * Componente de gráfico de barras interativo com alternância entre desktop e mobile
+ */
+import * as React from "react";
+import { Bar, BarChart, CartesianGrid, XAxis } from "recharts";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../../atoms/data-display/chart";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../../../atoms/display/card";
+const defaultChartData = [
+    { date: "2024-04-01", desktop: 222, mobile: 150 },
+    { date: "2024-04-02", desktop: 97, mobile: 180 },
+    { date: "2024-04-03", desktop: 167, mobile: 120 },
+    { date: "2024-04-04", desktop: 242, mobile: 260 },
+    { date: "2024-04-05", desktop: 373, mobile: 290 },
+    { date: "2024-04-06", desktop: 301, mobile: 340 },
+    { date: "2024-04-07", desktop: 245, mobile: 180 },
+    { date: "2024-04-08", desktop: 409, mobile: 320 },
+    { date: "2024-04-09", desktop: 59, mobile: 110 },
+    { date: "2024-04-10", desktop: 261, mobile: 190 },
+    { date: "2024-04-11", desktop: 327, mobile: 350 },
+    { date: "2024-04-12", desktop: 292, mobile: 210 },
+    { date: "2024-04-13", desktop: 342, mobile: 380 },
+    { date: "2024-04-14", desktop: 137, mobile: 220 },
+    { date: "2024-04-15", desktop: 120, mobile: 170 },
+    { date: "2024-04-16", desktop: 138, mobile: 190 },
+    { date: "2024-04-17", desktop: 446, mobile: 360 },
+    { date: "2024-04-18", desktop: 364, mobile: 410 },
+    { date: "2024-04-19", desktop: 243, mobile: 180 },
+    { date: "2024-04-20", desktop: 89, mobile: 150 },
+    { date: "2024-04-21", desktop: 137, mobile: 200 },
+    { date: "2024-04-22", desktop: 224, mobile: 170 },
+    { date: "2024-04-23", desktop: 138, mobile: 230 },
+    { date: "2024-04-24", desktop: 387, mobile: 290 },
+    { date: "2024-04-25", desktop: 215, mobile: 250 },
+    { date: "2024-04-26", desktop: 75, mobile: 130 },
+    { date: "2024-04-27", desktop: 383, mobile: 420 },
+    { date: "2024-04-28", desktop: 122, mobile: 180 },
+    { date: "2024-04-29", desktop: 315, mobile: 240 },
+    { date: "2024-04-30", desktop: 454, mobile: 380 },
+    { date: "2024-05-01", desktop: 165, mobile: 220 },
+    { date: "2024-05-02", desktop: 293, mobile: 310 },
+    { date: "2024-05-03", desktop: 247, mobile: 190 },
+    { date: "2024-05-04", desktop: 385, mobile: 420 },
+    { date: "2024-05-05", desktop: 481, mobile: 390 },
+    { date: "2024-05-06", desktop: 498, mobile: 520 },
+    { date: "2024-05-07", desktop: 388, mobile: 300 },
+    { date: "2024-05-08", desktop: 149, mobile: 210 },
+    { date: "2024-05-09", desktop: 227, mobile: 180 },
+    { date: "2024-05-10", desktop: 293, mobile: 330 },
+    { date: "2024-05-11", desktop: 335, mobile: 270 },
+    { date: "2024-05-12", desktop: 197, mobile: 240 },
+    { date: "2024-05-13", desktop: 197, mobile: 160 },
+    { date: "2024-05-14", desktop: 448, mobile: 490 },
+    { date: "2024-05-15", desktop: 473, mobile: 380 },
+    { date: "2024-05-16", desktop: 338, mobile: 400 },
+    { date: "2024-05-17", desktop: 499, mobile: 420 },
+    { date: "2024-05-18", desktop: 315, mobile: 350 },
+    { date: "2024-05-19", desktop: 235, mobile: 180 },
+    { date: "2024-05-20", desktop: 177, mobile: 230 },
+    { date: "2024-05-21", desktop: 82, mobile: 140 },
+    { date: "2024-05-22", desktop: 81, mobile: 120 },
+    { date: "2024-05-23", desktop: 252, mobile: 290 },
+    { date: "2024-05-24", desktop: 294, mobile: 220 },
+    { date: "2024-05-25", desktop: 201, mobile: 250 },
+    { date: "2024-05-26", desktop: 213, mobile: 170 },
+    { date: "2024-05-27", desktop: 420, mobile: 460 },
+    { date: "2024-05-28", desktop: 233, mobile: 190 },
+    { date: "2024-05-29", desktop: 78, mobile: 130 },
+    { date: "2024-05-30", desktop: 340, mobile: 280 },
+    { date: "2024-05-31", desktop: 178, mobile: 230 },
+    { date: "2024-06-01", desktop: 178, mobile: 200 },
+    { date: "2024-06-02", desktop: 470, mobile: 410 },
+    { date: "2024-06-03", desktop: 103, mobile: 160 },
+    { date: "2024-06-04", desktop: 439, mobile: 380 },
+    { date: "2024-06-05", desktop: 88, mobile: 140 },
+    { date: "2024-06-06", desktop: 294, mobile: 250 },
+    { date: "2024-06-07", desktop: 323, mobile: 370 },
+    { date: "2024-06-08", desktop: 385, mobile: 320 },
+    { date: "2024-06-09", desktop: 438, mobile: 480 },
+    { date: "2024-06-10", desktop: 155, mobile: 200 },
+    { date: "2024-06-11", desktop: 92, mobile: 150 },
+    { date: "2024-06-12", desktop: 492, mobile: 420 },
+    { date: "2024-06-13", desktop: 81, mobile: 130 },
+    { date: "2024-06-14", desktop: 426, mobile: 380 },
+    { date: "2024-06-15", desktop: 307, mobile: 350 },
+    { date: "2024-06-16", desktop: 371, mobile: 310 },
+    { date: "2024-06-17", desktop: 475, mobile: 520 },
+    { date: "2024-06-18", desktop: 107, mobile: 170 },
+    { date: "2024-06-19", desktop: 341, mobile: 290 },
+    { date: "2024-06-20", desktop: 408, mobile: 450 },
+    { date: "2024-06-21", desktop: 169, mobile: 210 },
+    { date: "2024-06-22", desktop: 317, mobile: 270 },
+    { date: "2024-06-23", desktop: 480, mobile: 530 },
+    { date: "2024-06-24", desktop: 132, mobile: 180 },
+    { date: "2024-06-25", desktop: 141, mobile: 190 },
+    { date: "2024-06-26", desktop: 434, mobile: 380 },
+    { date: "2024-06-27", desktop: 448, mobile: 490 },
+    { date: "2024-06-28", desktop: 149, mobile: 200 },
+    { date: "2024-06-29", desktop: 103, mobile: 160 },
+    { date: "2024-06-30", desktop: 446, mobile: 400 },
+];
+const defaultChartConfig = {
+    views: {
+        label: "Page Views",
+    },
+    desktop: {
+        label: "Desktop",
+        color: "var(--chart-2)",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "var(--chart-1)",
+    },
+};
+export function ChartBarInteractive({ data = defaultChartData, config = defaultChartConfig, title = "Bar Chart - Interactive", description = "Showing total visitors for the last 3 months", defaultActiveChart = "desktop", height = "250px", className, }) {
+    const [activeChart, setActiveChart] = React.useState(defaultActiveChart);
+    const total = React.useMemo(() => ({
+        desktop: data.reduce((acc, curr) => acc + curr.desktop, 0),
+        mobile: data.reduce((acc, curr) => acc + curr.mobile, 0),
+    }), [data]);
+    return (_jsxs(Card, { className: `py-0 ${className || ""}`, children: [_jsxs(CardHeader, { className: "flex flex-col items-stretch border-b !p-0 sm:flex-row", children: [_jsxs("div", { className: "flex flex-1 flex-col justify-center gap-1 px-6 pt-4 pb-3 sm:!py-0", children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: description })] }), _jsx("div", { className: "flex", children: ["desktop", "mobile"].map((key) => {
+                            const chart = key;
+                            const isActive = activeChart === chart;
+                            return (_jsxs("button", { type: "button", "data-active": isActive, className: "data-[active=true]:bg-muted/50 relative z-30 flex flex-1 flex-col justify-center gap-1 border-t px-6 py-4 text-left even:border-l sm:border-t-0 sm:border-l sm:px-8 sm:py-6", onClick: () => setActiveChart(chart), "aria-label": `Show ${config[chart]?.label || chart} chart`, "aria-pressed": isActive, children: [_jsx("span", { className: "text-muted-foreground text-xs", children: config[chart]?.label || chart }), _jsx("span", { className: "text-lg leading-none font-bold sm:text-3xl", children: total[key].toLocaleString() })] }, chart));
+                        }) })] }), _jsx(CardContent, { className: "px-2 sm:p-6", children: _jsx(ChartContainer, { config: config, className: "aspect-auto w-full", style: { height }, children: _jsxs(BarChart, { accessibilityLayer: true, data: data, margin: {
+                            left: 12,
+                            right: 12,
+                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "date", tickLine: false, axisLine: false, tickMargin: 8, minTickGap: 32, tickFormatter: (value) => {
+                                    const date = new Date(value);
+                                    return date.toLocaleDateString("en-US", {
+                                        month: "short",
+                                        day: "numeric",
+                                    });
+                                } }), _jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { className: "w-[150px]", nameKey: "views", labelFormatter: (value) => {
+                                        return new Date(value).toLocaleDateString("en-US", {
+                                            month: "short",
+                                            day: "numeric",
+                                            year: "numeric",
+                                        });
+                                    } }) }), _jsx(Bar, { dataKey: activeChart, fill: `var(--color-${activeChart})` })] }) }) })] }));
+}
+ChartBarInteractive.displayName = "ChartBarInteractive";

package/dist/components/molecules/data-display/chart-bar-interactive/index.d.ts

@@ -0,0 +1,3 @@
+export type { ChartBarInteractiveDataPoint, ChartBarInteractiveProps, } from "./chart-bar-interactive";
+export { ChartBarInteractive } from "./chart-bar-interactive";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/data-display/chart-bar-interactive/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/chart-bar-interactive/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,4BAA4B,EAC5B,wBAAwB,GACzB,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,mBAAmB,EAAE,MAAM,yBAAyB,CAAC"}

package/dist/components/molecules/data-display/chart-bar-interactive/index.js

@@ -0,0 +1 @@
+export { ChartBarInteractive } from "./chart-bar-interactive";

package/dist/components/molecules/data-display/checkpoint/checkpoint.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Checkpoint Component - Flowtomic UI
+ *
+ * Componente de checkpoint display
+ */
+import { type LucideProps } from "lucide-react";
+import type { ComponentProps, HTMLAttributes } from "react";
+import * as React from "react";
+import { Button } from "../../../atoms";
+export type CheckpointProps = HTMLAttributes<HTMLDivElement>;
+export declare const Checkpoint: React.ForwardRefExoticComponent<CheckpointProps & React.RefAttributes<HTMLDivElement>>;
+export type CheckpointIconProps = LucideProps;
+export declare const CheckpointIcon: React.ForwardRefExoticComponent<Omit<LucideProps, "ref"> & React.RefAttributes<SVGSVGElement>>;
+export type CheckpointTriggerProps = ComponentProps<typeof Button> & {
+    tooltip?: string;
+};
+export declare const CheckpointTrigger: React.ForwardRefExoticComponent<Omit<CheckpointTriggerProps, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+//# sourceMappingURL=checkpoint.d.ts.map

package/dist/components/molecules/data-display/checkpoint/checkpoint.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkpoint.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/checkpoint/checkpoint.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAgB,KAAK,WAAW,EAAE,MAAM,cAAc,CAAC;AAC9D,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAE/B,OAAO,EAAE,MAAM,EAAsD,MAAM,gBAAgB,CAAC;AAE5F,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE7D,eAAO,MAAM,UAAU,wFAWtB,CAAC;AAGF,MAAM,MAAM,mBAAmB,GAAG,WAAW,CAAC;AAE9C,eAAO,MAAM,cAAc,gGAG1B,CAAC;AAGF,MAAM,MAAM,sBAAsB,GAAG,cAAc,CAAC,OAAO,MAAM,CAAC,GAAG;IACnE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AAEF,eAAO,MAAM,iBAAiB,+GAkB7B,CAAC"}

package/dist/components/molecules/data-display/checkpoint/checkpoint.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Checkpoint Component - Flowtomic UI
+ *
+ * Componente de checkpoint display
+ */
+import { BookmarkIcon } from "lucide-react";
+import * as React from "react";
+import { cn } from "@/lib/utils";
+import { Button, Separator, Tooltip, TooltipContent, TooltipTrigger } from "../../../atoms";
+export const Checkpoint = React.forwardRef(({ className, children, ...props }, ref) => (_jsxs("div", { ref: ref, className: cn("flex items-center gap-0.5 text-muted-foreground overflow-hidden", className), ...props, children: [children, _jsx(Separator, {})] })));
+Checkpoint.displayName = "Checkpoint";
+export const CheckpointIcon = React.forwardRef(({ className, children, ...props }, ref) => children ?? _jsx(BookmarkIcon, { ref: ref, className: cn("size-4 shrink-0", className), ...props }));
+CheckpointIcon.displayName = "CheckpointIcon";
+export const CheckpointTrigger = React.forwardRef(({ children, className, variant = "ghost", size = "sm", tooltip, ...props }, ref) => tooltip ? (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: _jsx(Button, { ref: ref, size: size, type: "button", variant: variant, ...props, children: children }) }), _jsx(TooltipContent, { align: "start", side: "bottom", children: tooltip })] })) : (_jsx(Button, { ref: ref, size: size, type: "button", variant: variant, ...props, children: children })));
+CheckpointTrigger.displayName = "CheckpointTrigger";

package/dist/components/molecules/data-display/checkpoint/index.d.ts

@@ -0,0 +1,3 @@
+export type { CheckpointIconProps, CheckpointProps, CheckpointTriggerProps, } from "./checkpoint";
+export { Checkpoint, CheckpointIcon, CheckpointTrigger } from "./checkpoint";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/data-display/checkpoint/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/checkpoint/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,mBAAmB,EACnB,eAAe,EACf,sBAAsB,GACvB,MAAM,cAAc,CAAC;AACtB,OAAO,EAAE,UAAU,EAAE,cAAc,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/dist/components/molecules/data-display/checkpoint/index.js

@@ -0,0 +1 @@
+export { Checkpoint, CheckpointIcon, CheckpointTrigger } from "./checkpoint";

package/dist/components/molecules/data-display/circular-progress-chart/circular-progress-chart.d.ts

@@ -0,0 +1,68 @@
+/**
+ * CircularProgressChart - Componente Visual
+ *
+ * Gráfico circular de progresso usando SVG puro
+ */
+export interface CircularProgressChartProps {
+    /**
+     * Valor atual (0-100)
+     */
+    value: number;
+    /**
+     * Valor máximo
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Label central do gráfico
+     */
+    label?: string;
+    /**
+     * Título do card
+     */
+    title?: string;
+    /**
+     * Tamanho do gráfico em pixels
+     * @default 200
+     */
+    size?: number;
+    /**
+     * Espessura da linha do gráfico
+     * @default 12
+     */
+    strokeWidth?: number;
+    /**
+     * Cor da linha de progresso
+     * @default "hsl(var(--primary))"
+     */
+    progressColor?: string;
+    /**
+     * Cor da linha de fundo
+     * @default "hsl(var(--muted))"
+     */
+    trackColor?: string;
+    /**
+     * Cores para diferentes faixas de valor
+     */
+    colorRanges?: Array<{
+        min: number;
+        max: number;
+        color: string;
+    }>;
+    /**
+     * Legenda de cores (ex: Completed, In Progress, Pending)
+     */
+    legend?: Array<{
+        label: string;
+        color: string;
+    }>;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+}
+/**
+ * Componente de gráfico circular de progresso
+ */
+export declare function CircularProgressChart({ value, max, label, title, size, strokeWidth, progressColor, trackColor, colorRanges, legend, className, }: CircularProgressChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=circular-progress-chart.d.ts.map

package/dist/components/molecules/data-display/circular-progress-chart/circular-progress-chart.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"circular-progress-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/circular-progress-chart/circular-progress-chart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,MAAM,WAAW,0BAA0B;IACzC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,GAAG,CAAC,EAAE,MAAM,CAAC;IAEb;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IAEpB;;OAEG;IACH,WAAW,CAAC,EAAE,KAAK,CAAC;QAClB,GAAG,EAAE,MAAM,CAAC;QACZ,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IAEH;;OAEG;IACH,MAAM,CAAC,EAAE,KAAK,CAAC;QACb,KAAK,EAAE,MAAM,CAAC;QACd,KAAK,EAAE,MAAM,CAAC;KACf,CAAC,CAAC;IAEH;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,EACpC,KAAK,EACL,GAAS,EACT,KAAK,EACL,KAAK,EACL,IAAU,EACV,WAAgB,EAChB,aAAqC,EACrC,UAAgC,EAChC,WAAW,EACX,MAAM,EACN,SAAS,GACV,EAAE,0BAA0B,2CA6F5B"}

package/dist/components/molecules/data-display/circular-progress-chart/circular-progress-chart.js

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * CircularProgressChart - Componente Visual
+ *
+ * Gráfico circular de progresso usando SVG puro
+ */
+import { Card, CardContent, CardHeader, CardTitle } from "../../../atoms";
+/**
+ * Componente de gráfico circular de progresso
+ */
+export function CircularProgressChart({ value, max = 100, label, title, size = 200, strokeWidth = 12, progressColor = "hsl(var(--primary))", trackColor = "hsl(var(--muted))", colorRanges, legend, className, }) {
+    // Calcular porcentagem
+    const percentage = Math.min(Math.max((value / max) * 100, 0), 100);
+    // Determinar cor baseado em ranges
+    let finalProgressColor = progressColor;
+    if (colorRanges) {
+        for (const range of colorRanges) {
+            if (percentage >= range.min && percentage <= range.max) {
+                finalProgressColor = range.color;
+                break;
+            }
+        }
+    }
+    // Calcular raio e circunferência
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - (percentage / 100) * circumference;
+    return (_jsxs(Card, { className: className, children: [title && (_jsx(CardHeader, { children: _jsx(CardTitle, { children: title }) })), _jsx(CardContent, { children: _jsxs("div", { className: "flex flex-col items-center justify-center gap-4", children: [_jsxs("div", { className: "relative", style: { width: size, height: size }, children: [_jsxs("svg", { width: size, height: size, className: "transform -rotate-90", role: "img", "aria-label": title || label || "Circular progress chart", children: [_jsx("title", { children: title || label || "Circular progress chart" }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: trackColor, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: 0, className: "opacity-20" }), _jsx("circle", { cx: size / 2, cy: size / 2, r: radius, fill: "none", stroke: finalProgressColor, strokeWidth: strokeWidth, strokeDasharray: circumference, strokeDashoffset: offset, strokeLinecap: "round", className: "transition-all duration-500 ease-in-out" })] }), label && (_jsx("div", { className: "absolute inset-0 flex items-center justify-center", style: { fontSize: size * 0.15 }, children: _jsxs("div", { className: "text-center", children: [_jsxs("div", { className: "font-bold text-foreground", children: [Math.round(percentage), "%"] }), label && _jsx("div", { className: "text-xs text-muted-foreground mt-1", children: label })] }) }))] }), legend && legend.length > 0 && (_jsx("div", { className: "flex flex-wrap gap-4 justify-center mt-2", children: legend.map((item) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "w-3 h-3 rounded-full", style: { backgroundColor: item.color } }), _jsx("span", { className: "text-xs text-muted-foreground", children: item.label })] }, `legend-${item.label}`))) }))] }) })] }));
+}

package/dist/components/molecules/data-display/circular-progress-chart/index.d.ts

@@ -0,0 +1,3 @@
+export type { CircularProgressChartProps } from "./circular-progress-chart";
+export { CircularProgressChart } from "./circular-progress-chart";
+//# sourceMappingURL=index.d.ts.map

package/dist/components/molecules/data-display/circular-progress-chart/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/circular-progress-chart/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,0BAA0B,EAAE,MAAM,2BAA2B,CAAC;AAC5E,OAAO,EAAE,qBAAqB,EAAE,MAAM,2BAA2B,CAAC"}

package/dist/components/molecules/data-display/circular-progress-chart/index.js

@@ -0,0 +1 @@
+export { CircularProgressChart } from "./circular-progress-chart";

package/dist/components/molecules/data-display/data-table/data-table-pagination.d.ts

@@ -0,0 +1,48 @@
+/**
+ * DataTablePagination Component - Design System Flowtomic UI
+ *
+ * Componente de paginação para DataTable
+ * Suporta dois tipos de visualização: text e buttons
+ * Inclui seletor de tamanho de página opcional
+ */
+import type { Table } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+export interface DataTablePaginationProps<TData> {
+    /** Instância da tabela do TanStack Table */
+    table: Table<TData>;
+    /** Tamanho da tabela */
+    size?: "sm" | "md";
+    /** Tipo de visualização da paginação */
+    paginationType?: "text" | "buttons";
+    /** Habilitar seletor de tamanho de página */
+    enablePageSizeSelector?: boolean;
+    /** Opções de tamanho de página disponíveis */
+    pageSizeOptions?: number[];
+    /** Conteúdo customizado do footer */
+    footerContent?: ReactNode;
+    /** Classe CSS adicional */
+    className?: string;
+    /** Informações de paginação (para server-side, opcional) */
+    paginationInfo?: {
+        start: number;
+        end: number;
+        total: number;
+        pageCount: number;
+    };
+}
+declare function DataTablePagination<TData>({ table, size, paginationType, enablePageSizeSelector, pageSizeOptions, footerContent, className, paginationInfo, }: DataTablePaginationProps<TData>): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTablePagination {
+    var displayName: string;
+}
+export interface DataTablePaginationSkeletonProps {
+    /** Tamanho da tabela */
+    size?: "sm" | "md";
+    /** Classe CSS adicional */
+    className?: string;
+}
+declare function DataTablePaginationSkeleton({ size, className }: DataTablePaginationSkeletonProps): import("react/jsx-runtime").JSX.Element;
+declare namespace DataTablePaginationSkeleton {
+    var displayName: string;
+}
+export { DataTablePagination, DataTablePaginationSkeleton };
+//# sourceMappingURL=data-table-pagination.d.ts.map

package/dist/components/molecules/data-display/data-table/data-table-pagination.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table-pagination.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/data-table/data-table-pagination.tsx"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAgBvC,MAAM,WAAW,wBAAwB,CAAC,KAAK;IAC7C,4CAA4C;IAC5C,KAAK,EAAE,KAAK,CAAC,KAAK,CAAC,CAAC;IACpB,wBAAwB;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,wCAAwC;IACxC,cAAc,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IACpC,6CAA6C;IAC7C,sBAAsB,CAAC,EAAE,OAAO,CAAC;IACjC,8CAA8C;IAC9C,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,qCAAqC;IACrC,aAAa,CAAC,EAAE,SAAS,CAAC;IAC1B,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,cAAc,CAAC,EAAE;QACf,KAAK,EAAE,MAAM,CAAC;QACd,GAAG,EAAE,MAAM,CAAC;QACZ,KAAK,EAAE,MAAM,CAAC;QACd,SAAS,EAAE,MAAM,CAAC;KACnB,CAAC;CACH;AAqDD,iBAAS,mBAAmB,CAAC,KAAK,EAAE,EAClC,KAAK,EACL,IAAW,EACX,cAAuB,EACvB,sBAA8B,EAC9B,eAAwC,EACxC,aAAa,EACb,SAAS,EACT,cAAc,GACf,EAAE,wBAAwB,CAAC,KAAK,CAAC,2CAuKjC;kBAhLQ,mBAAmB;;;AAwL5B,MAAM,WAAW,gCAAgC;IAC/C,wBAAwB;IACxB,IAAI,CAAC,EAAE,IAAI,GAAG,IAAI,CAAC;IACnB,2BAA2B;IAC3B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,iBAAS,2BAA2B,CAAC,EAAE,IAAW,EAAE,SAAS,EAAE,EAAE,gCAAgC,2CAoBhG;kBApBQ,2BAA2B;;;AA4BpC,OAAO,EAAE,mBAAmB,EAAE,2BAA2B,EAAE,CAAC"}

package/dist/components/molecules/data-display/data-table/data-table-pagination.js

@@ -0,0 +1,100 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import React from "react";
+import { cn } from "@/lib/utils";
+import { Button, Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../../atoms";
+// ============================================================================
+// Pagination Helpers
+// ============================================================================
+/**
+ * Gera array de números de página com ellipsis quando necessário
+ * Exemplo: [1, 2, 3, 4, 5, '...', 10]
+ */
+function generatePageNumbers(currentPage, totalPages) {
+    if (totalPages <= 1)
+        return [1];
+    if (totalPages <= 7) {
+        // Se tem 7 ou menos páginas, mostra todas
+        return Array.from({ length: totalPages }, (_, i) => i + 1);
+    }
+    const pages = [];
+    const ellipsis = "...";
+    // Sempre mostrar primeira página
+    pages.push(1);
+    if (currentPage <= 4) {
+        // Páginas iniciais: 1, 2, 3, 4, 5, ..., 10
+        for (let i = 2; i <= 5; i++) {
+            pages.push(i);
+        }
+        pages.push(ellipsis);
+        pages.push(totalPages);
+    }
+    else if (currentPage >= totalPages - 3) {
+        // Páginas finais: 1, ..., 6, 7, 8, 9, 10
+        pages.push(ellipsis);
+        for (let i = totalPages - 4; i <= totalPages; i++) {
+            pages.push(i);
+        }
+    }
+    else {
+        // Páginas do meio: 1, ..., 4, 5, 6, ..., 10
+        pages.push(ellipsis);
+        for (let i = currentPage - 1; i <= currentPage + 1; i++) {
+            pages.push(i);
+        }
+        pages.push(ellipsis);
+        pages.push(totalPages);
+    }
+    return pages;
+}
+// ============================================================================
+// DataTablePagination Component
+// ============================================================================
+function DataTablePagination({ table, size = "md", paginationType = "text", enablePageSizeSelector = false, pageSizeOptions = [20, 25, 50, 100, 200], footerContent, className, paginationInfo, }) {
+    const pagination = table.getState().pagination;
+    const pageSize = pagination.pageSize;
+    // Usar paginationInfo se fornecido (server-side), senão calcular do table
+    const currentPageInfo = paginationInfo
+        ? paginationInfo
+        : {
+            start: table.getRowModel().rows.length > 0 ? pagination.pageIndex * pagination.pageSize + 1 : 0,
+            end: Math.min((pagination.pageIndex + 1) * pagination.pageSize, table.getFilteredRowModel().rows.length),
+            total: table.getFilteredRowModel().rows.length,
+            pageCount: Math.max(1, table.getPageCount()),
+        };
+    // Garantir que o pageSize atual esteja nas opções
+    const availablePageSizes = React.useMemo(() => {
+        const sizes = new Set(pageSizeOptions);
+        if (!sizes.has(pageSize)) {
+            sizes.add(pageSize);
+        }
+        return Array.from(sizes).sort((a, b) => a - b);
+    }, [pageSizeOptions, pageSize]);
+    if (footerContent) {
+        return (_jsx("div", { className: cn("flex items-center justify-between border-t border-border bg-card px-4", size === "sm" ? "py-3 md:px-5" : "py-4 md:px-6", className), children: footerContent }));
+    }
+    return (_jsxs("div", { className: cn("flex items-center justify-between border-t border-border bg-card px-4", size === "sm" ? "py-3 md:px-5" : "py-4 md:px-6", className), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsxs("div", { className: "text-sm text-muted-foreground", children: ["Mostrando", " ", currentPageInfo.start > 0 ? `${currentPageInfo.start} a ${currentPageInfo.end}` : 0, " de", " ", currentPageInfo.total, " itens"] }), enablePageSizeSelector && (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx("span", { className: "text-sm text-muted-foreground", children: "Mostrar" }), _jsxs(Select, { value: pagination.pageSize.toString(), onValueChange: (value) => {
+                                    const newPageSize = Number(value);
+                                    table.setPageSize(newPageSize);
+                                    table.setPageIndex(0);
+                                }, children: [_jsx(SelectTrigger, { size: "sm", className: "w-[70px]", "aria-label": "Selecionar tamanho de p\u00E1gina", children: _jsx(SelectValue, {}) }), _jsx(SelectContent, { children: availablePageSizes.map((sizeOption) => (_jsx(SelectItem, { value: sizeOption.toString(), children: sizeOption }, sizeOption))) })] })] }))] }), paginationType === "text" ? (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), "aria-label": "P\u00E1gina anterior", children: "Anterior" }), _jsxs("span", { className: "text-sm text-muted-foreground", children: ["P\u00E1gina ", table.getState().pagination.pageIndex + 1, " de ", currentPageInfo.pageCount] }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), "aria-label": "Pr\u00F3xima p\u00E1gina", children: "Pr\u00F3xima" })] })) : (_jsxs("div", { className: "flex items-center gap-1", children: [_jsx(Button, { variant: "outline", size: "sm", onClick: () => table.previousPage(), disabled: !table.getCanPreviousPage(), "aria-label": "P\u00E1gina anterior", children: "Anterior" }), generatePageNumbers(table.getState().pagination.pageIndex + 1, currentPageInfo.pageCount).map((page, index, array) => {
+                        if (page === "...") {
+                            // Criar key única baseada na posição e valores adjacentes
+                            const prevPage = index > 0 ? array[index - 1] : null;
+                            const nextPage = index < array.length - 1 ? array[index + 1] : null;
+                            const uniqueKey = `ellipsis-${prevPage ?? "start"}-${nextPage ?? "end"}`;
+                            return (_jsx("span", { className: "px-2 text-sm text-muted-foreground", "aria-hidden": "true", children: "..." }, uniqueKey));
+                        }
+                        const pageNumber = page;
+                        const isActive = pageNumber === table.getState().pagination.pageIndex + 1;
+                        return (_jsx(Button, { variant: isActive ? "default" : "outline", size: "sm", onClick: () => table.setPageIndex(pageNumber - 1), className: cn(isActive && "bg-muted text-foreground hover:bg-muted"), "aria-label": `Ir para página ${pageNumber}`, "aria-current": isActive ? "page" : undefined, children: pageNumber }, pageNumber));
+                    }), _jsx(Button, { variant: "outline", size: "sm", onClick: () => table.nextPage(), disabled: !table.getCanNextPage(), "aria-label": "Pr\u00F3xima p\u00E1gina", children: "Pr\u00F3xima" })] }))] }));
+}
+DataTablePagination.displayName = "DataTablePagination";
+function DataTablePaginationSkeleton({ size = "md", className }) {
+    return (_jsxs("div", { className: cn("flex items-center justify-between border-t border-border bg-card px-4", size === "sm" ? "py-3 md:px-5" : "py-4 md:px-6", className), children: [_jsxs("div", { className: "flex items-center gap-3", children: [_jsx("div", { className: "h-5 w-32 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-5 w-24 animate-pulse rounded bg-muted" })] }), _jsxs("div", { className: "flex items-center gap-2", children: [_jsx("div", { className: "h-9 w-20 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-5 w-24 animate-pulse rounded bg-muted" }), _jsx("div", { className: "h-9 w-20 animate-pulse rounded bg-muted" })] })] }));
+}
+DataTablePaginationSkeleton.displayName = "DataTablePaginationSkeleton";
+// ============================================================================
+// Exports
+// ============================================================================
+export { DataTablePagination, DataTablePaginationSkeleton };

package/dist/components/molecules/data-display/data-table/data-table.d.ts

@@ -0,0 +1,86 @@
+/**
+ * DataTable Component - Design System Flowtomic UI
+ *
+ * Componente de tabela avançado baseado em TanStack Table
+ * Integra funcionalidades avançadas (sorting, filtering, pagination)
+ * com a estrutura visual do table.tsx base
+ */
+import { type ColumnDef, type ColumnFiltersState, type SortingState, type VisibilityState } from "@tanstack/react-table";
+import type { ReactNode } from "react";
+export interface Column<T> {
+    key: keyof T;
+    label: string;
+    render?: (value: unknown, item: T) => ReactNode;
+    sortable?: boolean;
+    width?: string;
+    tooltip?: string;
+}
+export interface DataTableProps<T extends Record<string, unknown>> {
+    /** Título da tabela */
+    title?: string;
+    /** Dados da tabela */
+    data: T[];
+    /** Definição das colunas usando TanStack Table ColumnDef */
+    columns: ColumnDef<T, unknown>[];
+    /** Callback quando um item é editado */
+    onEdit?: (item: T) => void;
+    /** Callback quando um item é deletado */
+    onDelete?: (item: T) => void;
+    /** Callback quando um item é visualizado */
+    onView?: (item: T) => void;
+    /** Classe CSS adicional */
+    className?: string;
+    /** Mensagem quando não há dados */
+    emptyMessage?: string;
+    /** Estado de carregamento */
+    loading?: boolean;
+    /** Tamanho da tabela */
+    size?: "sm" | "md";
+    /** Habilitar seleção de linhas */
+    enableRowSelection?: boolean;
+    /** Callback quando a seleção muda */
+    onSelectionChange?: (selectedRows: T[]) => void;
+    /** Habilitar paginação */
+    enablePagination?: boolean;
+    /** Tipo de visualização da paginação */
+    paginationType?: "text" | "buttons";
+    /** Tamanho da página */
+    pageSize?: number;
+    /** Opções de tamanho de página disponíveis */
+    pageSizeOptions?: number[];
+    /** Habilitar seletor de tamanho de página */
+    enablePageSizeSelector?: boolean;
+    /** Habilitar filtro global */
+    enableGlobalFilter?: boolean;
+    /** Placeholder do filtro global */
+    globalFilterPlaceholder?: string;
+    /** Habilitar ordenação */
+    enableSorting?: boolean;
+    /** Estado inicial de ordenação */
+    initialSorting?: SortingState;
+    /** Estado inicial de filtros */
+    initialColumnFilters?: ColumnFiltersState;
+    /** Estado inicial de visibilidade de colunas */
+    initialColumnVisibility?: VisibilityState;
+    /** Modo de paginação: 'client' (frontend) ou 'server' (backend) */
+    paginationMode?: "client" | "server";
+    /** Total de itens (necessário para paginação server-side) */
+    totalCount?: number;
+    /** Callback quando paginação muda (para server-side) */
+    onPaginationChange?: (pagination: {
+        pageIndex: number;
+        pageSize: number;
+    }) => void;
+    /** Modo de ordenação: 'client' (frontend) ou 'server' (backend) */
+    sortingMode?: "client" | "server";
+    /** Callback quando ordenação muda (para server-side) */
+    onSortingChange?: (sorting: SortingState) => void;
+    /** Renderizar ações customizadas no header */
+    headerActions?: ReactNode;
+    /** Renderizar conteúdo customizado no footer */
+    footerContent?: ReactNode;
+}
+declare function DataTable<T extends Record<string, unknown>>({ title, data, columns, className, emptyMessage, loading, size, enableRowSelection, onSelectionChange, enablePagination, paginationType, pageSize, pageSizeOptions, enablePageSizeSelector, enableGlobalFilter, globalFilterPlaceholder, enableSorting, initialSorting, initialColumnFilters, initialColumnVisibility, paginationMode, totalCount, onPaginationChange, sortingMode, onSortingChange, headerActions, footerContent, }: DataTableProps<T>): import("react/jsx-runtime").JSX.Element;
+export { DataTable };
+export type { ColumnDef, ColumnFiltersState, PaginationState, SortingState, VisibilityState, } from "@tanstack/react-table";
+//# sourceMappingURL=data-table.d.ts.map

package/dist/components/molecules/data-display/data-table/data-table.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"data-table.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/data-table/data-table.tsx"],"names":[],"mappings":"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"}