@flowtomic/ui 0.1.0 → 0.1.1

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

@@ -0,0 +1,58 @@
+/**
+ * BarChart - Componente Visual
+ *
+ * Gráfico de barras simples para analytics usando SVG puro
+ */
+export interface BarChartDataPoint {
+    /**
+     * Label da barra
+     */
+    label: string;
+    /**
+     * Valor da barra
+     */
+    value: number;
+    /**
+     * Cor da barra (opcional)
+     */
+    color?: string;
+}
+export interface BarChartProps {
+    /**
+     * Dados do gráfico
+     */
+    data: BarChartDataPoint[];
+    /**
+     * Título do gráfico
+     */
+    title?: string;
+    /**
+     * Altura do gráfico em pixels
+     * @default 200
+     */
+    height?: number;
+    /**
+     * Cor padrão das barras
+     * @default "hsl(var(--primary))"
+     */
+    defaultColor?: string;
+    /**
+     * Cor das barras inativas/pendentes
+     * @default "hsl(var(--muted))"
+     */
+    inactiveColor?: string;
+    /**
+     * Se deve mostrar valores nas barras
+     * @default false
+     */
+    showValues?: boolean;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+}
+/**
+ * Componente de gráfico de barras
+ */
+export declare function BarChart({ data, title, height, defaultColor, inactiveColor, showValues, className, }: BarChartProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=bar-chart.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"bar-chart.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/bar-chart/bar-chart.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAMH,MAAM,WAAW,iBAAiB;IAChC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,MAAM,WAAW,aAAa;IAC5B;;OAEG;IACH,IAAI,EAAE,iBAAiB,EAAE,CAAC;IAE1B;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB;;;OAGG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IAEvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;GAEG;AACH,wBAAgB,QAAQ,CAAC,EACvB,IAAI,EACJ,KAAK,EACL,MAAY,EACZ,YAAoC,EACpC,aAAmC,EACnC,UAAkB,EAClB,SAAS,GACV,EAAE,aAAa,2CA2Ff"}

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

@@ -0,0 +1,23 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Card, CardContent, CardHeader, CardTitle } from "../../../atoms";
+/**
+ * Componente de gráfico de barras
+ */
+export function BarChart({ data, title, height = 200, defaultColor = "hsl(var(--primary))", inactiveColor = "hsl(var(--muted))", showValues = false, className, }) {
+    if (!data || data.length === 0) {
+        return (_jsxs(Card, { className: className, children: [title && (_jsx(CardHeader, { children: _jsx(CardTitle, { children: title }) })), _jsx(CardContent, { children: _jsx("div", { className: "flex items-center justify-center h-[200px] text-muted-foreground", children: "No data available" }) })] }));
+    }
+    // Calcular valores máximos para normalização
+    const maxValue = Math.max(...data.map((d) => d.value));
+    const chartPadding = 40;
+    const barWidth = Math.max(20, (height - chartPadding * 2) / data.length - 8);
+    const chartWidth = 300;
+    return (_jsxs(Card, { className: className, children: [title && (_jsx(CardHeader, { children: _jsx(CardTitle, { children: title }) })), _jsx(CardContent, { children: _jsx("div", { className: "w-full", children: _jsx("svg", { width: "100%", height: height, viewBox: `0 0 ${chartWidth} ${height}`, className: "overflow-visible", children: data.map((point, index) => {
+                            const barHeight = maxValue > 0 ? (point.value / maxValue) * (height - chartPadding * 2) : 0;
+                            const x = (index * chartWidth) / data.length + chartPadding / 2;
+                            const y = height - chartPadding - barHeight;
+                            const isActive = point.value > 0;
+                            const fillColor = point.color || (isActive ? defaultColor : inactiveColor);
+                            return (_jsxs("g", { children: [_jsx("rect", { x: x, y: y, width: (chartWidth - chartPadding) / data.length - 4, height: barHeight, fill: fillColor, rx: 4, className: "transition-all duration-300" }), showValues && point.value > 0 && (_jsxs("text", { x: x + (chartWidth - chartPadding) / data.length / 2 - 4, y: y - 5, fontSize: "10", fill: "currentColor", textAnchor: "middle", className: "fill-foreground", children: [point.value, "%"] })), _jsx("text", { x: x + (chartWidth - chartPadding) / data.length / 2 - 4, y: height - chartPadding + 15, fontSize: "12", fill: "currentColor", textAnchor: "middle", className: "fill-muted-foreground", children: point.label })] }, index));
+                        }) }) }) })] }));
+}

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

@@ -0,0 +1,3 @@
+export type { BarChartDataPoint, BarChartProps } from "./bar-chart";
+export { BarChart } from "./bar-chart";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/bar-chart/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,iBAAiB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AACpE,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC"}

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

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

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

@@ -0,0 +1,48 @@
+/**
+ * ChartAreaInteractive Component - Flowtomic UI
+ *
+ * Componente de gráfico de área interativo com filtro de tempo
+ */
+import { type ChartConfig } from "../../../atoms/data-display/chart";
+export type ChartAreaInteractiveDataPoint = {
+    date: string;
+    desktop: number;
+    mobile: number;
+};
+export type ChartAreaInteractiveProps = {
+    /**
+     * Dados do gráfico
+     */
+    data?: ChartAreaInteractiveDataPoint[];
+    /**
+     * Configuração do gráfico
+     */
+    config?: ChartConfig;
+    /**
+     * Título do card
+     */
+    title?: string;
+    /**
+     * Descrição do card
+     */
+    description?: string;
+    /**
+     * Valor inicial do filtro de tempo
+     * @default "90d"
+     */
+    defaultTimeRange?: "7d" | "30d" | "90d";
+    /**
+     * Altura do gráfico
+     * @default "250px"
+     */
+    height?: string;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+};
+export declare function ChartAreaInteractive({ data, config, title, description, defaultTimeRange, height, className, }: ChartAreaInteractiveProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChartAreaInteractive {
+    var displayName: string;
+}
+//# sourceMappingURL=chart-area-interactive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-interactive.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/chart-area-interactive/chart-area-interactive.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EACL,KAAK,WAAW,EAMjB,MAAM,mCAAmC,CAAC;AAgB3C,MAAM,MAAM,6BAA6B,GAAG;IAC1C,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,yBAAyB,GAAG;IACtC;;OAEG;IACH,IAAI,CAAC,EAAE,6BAA6B,EAAE,CAAC;IACvC;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,KAAK,CAAC;IACxC;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA8GF,wBAAgB,oBAAoB,CAAC,EACnC,IAAuB,EACvB,MAA2B,EAC3B,KAAkC,EAClC,WAA4D,EAC5D,gBAAwB,EACxB,MAAgB,EAChB,SAAS,GACV,EAAE,yBAAyB,2CAoH3B;yBA5He,oBAAoB"}

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

@@ -0,0 +1,151 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * ChartAreaInteractive Component - Flowtomic UI
+ *
+ * Componente de gráfico de área interativo com filtro de tempo
+ */
+import * as React from "react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "../../../atoms/data-display/chart";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../../../atoms/display/card";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../../atoms/forms/select";
+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 = {
+    visitors: {
+        label: "Visitors",
+    },
+    desktop: {
+        label: "Desktop",
+        color: "var(--chart-1)",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "var(--chart-2)",
+    },
+};
+export function ChartAreaInteractive({ data = defaultChartData, config = defaultChartConfig, title = "Area Chart - Interactive", description = "Showing total visitors for the last 3 months", defaultTimeRange = "90d", height = "250px", className, }) {
+    const [timeRange, setTimeRange] = React.useState(defaultTimeRange);
+    const filteredData = React.useMemo(() => {
+        if (!data.length)
+            return [];
+        const referenceDate = new Date(data[data.length - 1]?.date || new Date().toISOString());
+        let daysToSubtract = 90;
+        if (timeRange === "30d") {
+            daysToSubtract = 30;
+        }
+        else if (timeRange === "7d") {
+            daysToSubtract = 7;
+        }
+        const startDate = new Date(referenceDate);
+        startDate.setDate(startDate.getDate() - daysToSubtract);
+        return data.filter((item) => {
+            const date = new Date(item.date);
+            return date >= startDate;
+        });
+    }, [data, timeRange]);
+    return (_jsxs(Card, { className: className, children: [_jsxs(CardHeader, { className: "flex items-center gap-2 space-y-0 border-b py-5 sm:flex-row", children: [_jsxs("div", { className: "grid flex-1 gap-1", children: [_jsx(CardTitle, { children: title }), _jsx(CardDescription, { children: description })] }), _jsxs(Select, { value: timeRange, onValueChange: (value) => setTimeRange(value), children: [_jsx(SelectTrigger, { className: "hidden w-[160px] rounded-lg sm:ml-auto sm:flex", "aria-label": "Select time range", children: _jsx(SelectValue, { placeholder: "Last 3 months" }) }), _jsxs(SelectContent, { className: "rounded-xl", children: [_jsx(SelectItem, { value: "90d", className: "rounded-lg", children: "Last 3 months" }), _jsx(SelectItem, { value: "30d", className: "rounded-lg", children: "Last 30 days" }), _jsx(SelectItem, { value: "7d", className: "rounded-lg", children: "Last 7 days" })] })] })] }), _jsx(CardContent, { className: "px-2 pt-4 sm:px-6 sm:pt-6", children: _jsx(ChartContainer, { config: config, className: "aspect-auto w-full", style: { height }, children: _jsxs(AreaChart, { data: filteredData, children: [_jsxs("defs", { children: [_jsxs("linearGradient", { id: "fillDesktop", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: "var(--color-desktop)", stopOpacity: 0.8 }), _jsx("stop", { offset: "95%", stopColor: "var(--color-desktop)", stopOpacity: 0.1 })] }), _jsxs("linearGradient", { id: "fillMobile", x1: "0", y1: "0", x2: "0", y2: "1", children: [_jsx("stop", { offset: "5%", stopColor: "var(--color-mobile)", stopOpacity: 0.8 }), _jsx("stop", { offset: "95%", stopColor: "var(--color-mobile)", stopOpacity: 0.1 })] })] }), _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, { cursor: false, content: _jsx(ChartTooltipContent, { labelFormatter: (value) => {
+                                        return new Date(value).toLocaleDateString("en-US", {
+                                            month: "short",
+                                            day: "numeric",
+                                        });
+                                    }, indicator: "dot" }) }), _jsx(Area, { dataKey: "mobile", type: "natural", fill: "url(#fillMobile)", stroke: "var(--color-mobile)", stackId: "a" }), _jsx(Area, { dataKey: "desktop", type: "natural", fill: "url(#fillDesktop)", stroke: "var(--color-desktop)", stackId: "a" }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) })] }) }) })] }));
+}
+ChartAreaInteractive.displayName = "ChartAreaInteractive";

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

@@ -0,0 +1,3 @@
+export type { ChartAreaInteractiveDataPoint, ChartAreaInteractiveProps, } from "./chart-area-interactive";
+export { ChartAreaInteractive } from "./chart-area-interactive";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/chart-area-interactive/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,6BAA6B,EAC7B,yBAAyB,GAC1B,MAAM,0BAA0B,CAAC;AAClC,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC"}

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

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

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

@@ -0,0 +1,48 @@
+/**
+ * ChartBarInteractive Component - Flowtomic UI
+ *
+ * Componente de gráfico de barras interativo com alternância entre desktop e mobile
+ */
+import { type ChartConfig } from "../../../atoms/data-display/chart";
+export type ChartBarInteractiveDataPoint = {
+    date: string;
+    desktop: number;
+    mobile: number;
+};
+export type ChartBarInteractiveProps = {
+    /**
+     * Dados do gráfico
+     */
+    data?: ChartBarInteractiveDataPoint[];
+    /**
+     * Configuração do gráfico
+     */
+    config?: ChartConfig;
+    /**
+     * Título do card
+     */
+    title?: string;
+    /**
+     * Descrição do card
+     */
+    description?: string;
+    /**
+     * Gráfico ativo inicial
+     * @default "desktop"
+     */
+    defaultActiveChart?: "desktop" | "mobile";
+    /**
+     * Altura do gráfico
+     * @default "250px"
+     */
+    height?: string;
+    /**
+     * Classe CSS adicional
+     */
+    className?: string;
+};
+export declare function ChartBarInteractive({ data, config, title, description, defaultActiveChart, height, className, }: ChartBarInteractiveProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ChartBarInteractive {
+    var displayName: string;
+}
+//# sourceMappingURL=chart-bar-interactive.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-bar-interactive.d.ts","sourceRoot":"","sources":["../../../../../src/components/molecules/data-display/chart-bar-interactive/chart-bar-interactive.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,OAAO,EACL,KAAK,WAAW,EAIjB,MAAM,mCAAmC,CAAC;AAS3C,MAAM,MAAM,4BAA4B,GAAG;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,MAAM,EAAE,MAAM,CAAC;CAChB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC;;OAEG;IACH,IAAI,CAAC,EAAE,4BAA4B,EAAE,CAAC;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,kBAAkB,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAC;IAC1C;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AA8GF,wBAAgB,mBAAmB,CAAC,EAClC,IAAuB,EACvB,MAA2B,EAC3B,KAAiC,EACjC,WAA4D,EAC5D,kBAA8B,EAC9B,MAAgB,EAChB,SAAS,GACV,EAAE,wBAAwB,2CA0F1B;yBAlGe,mBAAmB"}

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";