@hanzo/ui 5.3.33 → 5.3.35

package/dist/primitives/charts/area/chart-area-axes.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "An area chart with axes";
+const chartData = [
+    { month: "January", desktop: 186, mobile: 80 },
+    { month: "February", desktop: 305, mobile: 200 },
+    { month: "March", desktop: 237, mobile: 120 },
+    { month: "April", desktop: 73, mobile: 190 },
+    { month: "May", desktop: 209, mobile: 130 },
+    { month: "June", desktop: 214, mobile: 140 },
+];
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "hsl(var(--chart-2))",
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Area Chart - Axes" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: {
+                            left: -20,
+                            right: 12,
+                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(YAxis, { tickLine: false, axisLine: false, tickMargin: 8, tickCount: 3 }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, {}) }), _jsx(Area, { dataKey: "mobile", type: "natural", fill: "var(--color-mobile)", fillOpacity: 0.4, stroke: "var(--color-mobile)", stackId: "a" }), _jsx(Area, { dataKey: "desktop", type: "natural", fill: "var(--color-desktop)", fillOpacity: 0.4, stroke: "var(--color-desktop)", stackId: "a" })] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "flex items-center gap-2 leading-none text-muted-foreground", children: "January - June 2024" })] }) }) })] }));
+}

package/dist/primitives/charts/area/chart-area-default.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "A simple area chart";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-area-default.d.ts.map

package/dist/primitives/charts/area/chart-area-default.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-default.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/chart-area-default.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,wBAAwB,CAAA;AAkBhD,MAAM,CAAC,OAAO,UAAU,SAAS,4CAuDhC"}

package/dist/primitives/charts/area/chart-area-default.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A simple area chart";
+const chartData = [
+    { month: "January", desktop: 186 },
+    { month: "February", desktop: 305 },
+    { month: "March", desktop: 237 },
+    { month: "April", desktop: 73 },
+    { month: "May", desktop: 209 },
+    { month: "June", desktop: 214 },
+];
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Area Chart" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: {
+                            left: 12,
+                            right: 12,
+                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line" }) }), _jsx(Area, { dataKey: "desktop", type: "natural", fill: "var(--color-desktop)", fillOpacity: 0.4, stroke: "var(--color-desktop)" })] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "flex items-center gap-2 leading-none text-muted-foreground", children: "January - June 2024" })] }) }) })] }));
+}

package/dist/primitives/charts/area/chart-area-gradient.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "An area chart with gradient fill";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-area-gradient.d.ts.map

package/dist/primitives/charts/area/chart-area-gradient.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-gradient.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/chart-area-gradient.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,qCAAqC,CAAA;AAsB7D,MAAM,CAAC,OAAO,UAAU,SAAS,4CAuFhC"}

package/dist/primitives/charts/area/chart-area-gradient.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "An area chart with gradient fill";
+const chartData = [
+    { month: "January", desktop: 186, mobile: 80 },
+    { month: "February", desktop: 305, mobile: 200 },
+    { month: "March", desktop: 237, mobile: 120 },
+    { month: "April", desktop: 73, mobile: 190 },
+    { month: "May", desktop: 209, mobile: 130 },
+    { month: "June", desktop: 214, mobile: 140 },
+];
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "hsl(var(--chart-2))",
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Area Chart - Gradient" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: {
+                            left: 12,
+                            right: 12,
+                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, {}) }), _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(Area, { dataKey: "mobile", type: "natural", fill: "url(#fillMobile)", fillOpacity: 0.4, stroke: "var(--color-mobile)", stackId: "a" }), _jsx(Area, { dataKey: "desktop", type: "natural", fill: "url(#fillDesktop)", fillOpacity: 0.4, stroke: "var(--color-desktop)", stackId: "a" })] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "flex items-center gap-2 leading-none text-muted-foreground", children: "January - June 2024" })] }) }) })] }));
+}

package/dist/primitives/charts/area/chart-area-icons.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "An area chart with icons";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-area-icons.d.ts.map

package/dist/primitives/charts/area/chart-area-icons.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-icons.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/chart-area-icons.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,WAAW,6BAA6B,CAAA;AAwBrD,MAAM,CAAC,OAAO,UAAU,SAAS,4CAiEhC"}

package/dist/primitives/charts/area/chart-area-icons.js

@@ -0,0 +1,33 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingDown, TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "An area chart with icons";
+const chartData = [
+    { month: "January", desktop: 186, mobile: 80 },
+    { month: "February", desktop: 305, mobile: 200 },
+    { month: "March", desktop: 237, mobile: 120 },
+    { month: "April", desktop: 73, mobile: 190 },
+    { month: "May", desktop: 209, mobile: 130 },
+    { month: "June", desktop: 214, mobile: 140 },
+];
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+        icon: TrendingDown,
+    },
+    mobile: {
+        label: "Mobile",
+        color: "hsl(var(--chart-2))",
+        icon: TrendingUp,
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Area Chart - Icons" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: {
+                            left: 12,
+                            right: 12,
+                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line" }) }), _jsx(Area, { dataKey: "mobile", type: "natural", fill: "var(--color-mobile)", fillOpacity: 0.4, stroke: "var(--color-mobile)", stackId: "a" }), _jsx(Area, { dataKey: "desktop", type: "natural", fill: "var(--color-desktop)", fillOpacity: 0.4, stroke: "var(--color-desktop)", stackId: "a" }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) })] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "flex items-center gap-2 leading-none text-muted-foreground", children: "January - June 2024" })] }) }) })] }));
+}

package/dist/primitives/charts/area/chart-area-interactive.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "An interactive area chart";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-area-interactive.d.ts.map

package/dist/primitives/charts/area/chart-area-interactive.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-interactive.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/chart-area-interactive.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,WAAW,8BAA8B,CAAA;AA8GtD,MAAM,CAAC,OAAO,UAAU,SAAS,4CA+HhC"}

package/dist/primitives/charts/area/chart-area-interactive.js

@@ -0,0 +1,143 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "../../chart";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../select";
+export const description = "An interactive area chart";
+const chartData = [
+    { 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 chartConfig = {
+    visitors: {
+        label: "Visitors",
+    },
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "hsl(var(--chart-2))",
+    },
+};
+export default function Component() {
+    const [timeRange, setTimeRange] = React.useState("90d");
+    const filteredData = chartData.filter((item) => {
+        const date = new Date(item.date);
+        const referenceDate = new Date("2024-06-30");
+        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 date >= startDate;
+    });
+    return (_jsxs(Card, { 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 text-center sm:text-left", children: [_jsx(CardTitle, { children: "Area Chart - Interactive" }), _jsx(CardDescription, { children: "Showing total visitors for the last 3 months" })] }), _jsxs(Select, { value: timeRange, onValueChange: setTimeRange, children: [_jsx(SelectTrigger, { className: "w-[160px] rounded-lg sm:ml-auto", "aria-label": "Select a value", 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: chartConfig, className: "aspect-auto h-[250px] w-full", 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, {}) })] }) }) })] }));
+}

package/dist/primitives/charts/area/chart-area-legend.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "An area chart with a legend";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-area-legend.d.ts.map

package/dist/primitives/charts/area/chart-area-legend.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-legend.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/chart-area-legend.tsx"],"names":[],"mappings":"AAsBA,eAAO,MAAM,WAAW,gCAAgC,CAAA;AAsBxD,MAAM,CAAC,OAAO,UAAU,SAAS,4CAiEhC"}

package/dist/primitives/charts/area/chart-area-legend.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartLegend, ChartLegendContent, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "An area chart with a legend";
+const chartData = [
+    { month: "January", desktop: 186, mobile: 80 },
+    { month: "February", desktop: 305, mobile: 200 },
+    { month: "March", desktop: 237, mobile: 120 },
+    { month: "April", desktop: 73, mobile: 190 },
+    { month: "May", desktop: 209, mobile: 130 },
+    { month: "June", desktop: 214, mobile: 140 },
+];
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "hsl(var(--chart-2))",
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Area Chart - Legend" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: {
+                            left: 12,
+                            right: 12,
+                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line" }) }), _jsx(Area, { dataKey: "mobile", type: "natural", fill: "var(--color-mobile)", fillOpacity: 0.4, stroke: "var(--color-mobile)", stackId: "a" }), _jsx(Area, { dataKey: "desktop", type: "natural", fill: "var(--color-desktop)", fillOpacity: 0.4, stroke: "var(--color-desktop)", stackId: "a" }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, {}) })] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "flex items-center gap-2 leading-none text-muted-foreground", children: "January - June 2024" })] }) }) })] }));
+}

package/dist/primitives/charts/area/chart-area-linear.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "A linear area chart";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-area-linear.d.ts.map

package/dist/primitives/charts/area/chart-area-linear.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-linear.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/chart-area-linear.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,wBAAwB,CAAA;AAkBhD,MAAM,CAAC,OAAO,UAAU,SAAS,4CAuDhC"}

package/dist/primitives/charts/area/chart-area-linear.js

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A linear area chart";
+const chartData = [
+    { month: "January", desktop: 186 },
+    { month: "February", desktop: 305 },
+    { month: "March", desktop: 237 },
+    { month: "April", desktop: 73 },
+    { month: "May", desktop: 209 },
+    { month: "June", desktop: 214 },
+];
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Area Chart - Linear" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: {
+                            left: 12,
+                            right: 12,
+                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "dot", hideLabel: true }) }), _jsx(Area, { dataKey: "desktop", type: "linear", fill: "var(--color-desktop)", fillOpacity: 0.4, stroke: "var(--color-desktop)" })] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "flex items-center gap-2 leading-none text-muted-foreground", children: "January - June 2024" })] }) }) })] }));
+}

package/dist/primitives/charts/area/chart-area-stacked-expand.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "A stacked area chart with expand stacking";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-area-stacked-expand.d.ts.map

package/dist/primitives/charts/area/chart-area-stacked-expand.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-stacked-expand.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/chart-area-stacked-expand.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,8CAA8C,CAAA;AA0BtE,MAAM,CAAC,OAAO,UAAU,SAAS,4CA0EhC"}

package/dist/primitives/charts/area/chart-area-stacked-expand.js

@@ -0,0 +1,36 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A stacked area chart with expand stacking";
+const chartData = [
+    { month: "January", desktop: 186, mobile: 80, other: 45 },
+    { month: "February", desktop: 305, mobile: 200, other: 100 },
+    { month: "March", desktop: 237, mobile: 120, other: 150 },
+    { month: "April", desktop: 73, mobile: 190, other: 50 },
+    { month: "May", desktop: 209, mobile: 130, other: 100 },
+    { month: "June", desktop: 214, mobile: 140, other: 160 },
+];
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "hsl(var(--chart-2))",
+    },
+    other: {
+        label: "Other",
+        color: "hsl(var(--chart-3))",
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Area Chart - Stacked Expanded" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6months" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: {
+                            left: 12,
+                            right: 12,
+                            top: 12,
+                        }, stackOffset: "expand", children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "line" }) }), _jsx(Area, { dataKey: "other", type: "natural", fill: "var(--color-other)", fillOpacity: 0.1, stroke: "var(--color-other)", stackId: "a" }), _jsx(Area, { dataKey: "mobile", type: "natural", fill: "var(--color-mobile)", fillOpacity: 0.4, stroke: "var(--color-mobile)", stackId: "a" }), _jsx(Area, { dataKey: "desktop", type: "natural", fill: "var(--color-desktop)", fillOpacity: 0.4, stroke: "var(--color-desktop)", stackId: "a" })] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "flex items-center gap-2 leading-none text-muted-foreground", children: "January - June 2024" })] }) }) })] }));
+}

package/dist/primitives/charts/area/chart-area-stacked.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "A stacked area chart";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-area-stacked.d.ts.map

package/dist/primitives/charts/area/chart-area-stacked.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-stacked.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/chart-area-stacked.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,yBAAyB,CAAA;AAsBjD,MAAM,CAAC,OAAO,UAAU,SAAS,4CAgEhC"}

package/dist/primitives/charts/area/chart-area-stacked.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A stacked area chart";
+const chartData = [
+    { month: "January", desktop: 186, mobile: 80 },
+    { month: "February", desktop: 305, mobile: 200 },
+    { month: "March", desktop: 237, mobile: 120 },
+    { month: "April", desktop: 73, mobile: 190 },
+    { month: "May", desktop: 209, mobile: 130 },
+    { month: "June", desktop: 214, mobile: 140 },
+];
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+    },
+    mobile: {
+        label: "Mobile",
+        color: "hsl(var(--chart-2))",
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Area Chart - Stacked" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: {
+                            left: 12,
+                            right: 12,
+                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { indicator: "dot" }) }), _jsx(Area, { dataKey: "mobile", type: "natural", fill: "var(--color-mobile)", fillOpacity: 0.4, stroke: "var(--color-mobile)", stackId: "a" }), _jsx(Area, { dataKey: "desktop", type: "natural", fill: "var(--color-desktop)", fillOpacity: 0.4, stroke: "var(--color-desktop)", stackId: "a" })] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "flex items-center gap-2 leading-none text-muted-foreground", children: "January - June 2024" })] }) }) })] }));
+}

package/dist/primitives/charts/area/chart-area-step.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "A step area chart";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-area-step.d.ts.map

package/dist/primitives/charts/area/chart-area-step.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-area-step.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/chart-area-step.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,sBAAsB,CAAA;AAmB9C,MAAM,CAAC,OAAO,UAAU,SAAS,4CAuDhC"}

package/dist/primitives/charts/area/chart-area-step.js

@@ -0,0 +1,28 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, TrendingUp } from "lucide-react";
+import { Area, AreaChart, CartesianGrid, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A step area chart";
+const chartData = [
+    { month: "January", desktop: 186 },
+    { month: "February", desktop: 305 },
+    { month: "March", desktop: 237 },
+    { month: "April", desktop: 73 },
+    { month: "May", desktop: 209 },
+    { month: "June", desktop: 214 },
+];
+const chartConfig = {
+    desktop: {
+        label: "Desktop",
+        color: "hsl(var(--chart-1))",
+        icon: Activity,
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Area Chart - Step" }), _jsx(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(AreaChart, { accessibilityLayer: true, data: chartData, margin: {
+                            left: 12,
+                            right: 12,
+                        }, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "month", tickLine: false, axisLine: false, tickMargin: 8, tickFormatter: (value) => value.slice(0, 3) }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Area, { dataKey: "desktop", type: "step", fill: "var(--color-desktop)", fillOpacity: 0.4, stroke: "var(--color-desktop)" })] }) }) }), _jsx(CardFooter, { children: _jsx("div", { className: "flex w-full items-start gap-2 text-sm", children: _jsxs("div", { className: "grid gap-2", children: [_jsxs("div", { className: "flex items-center gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "flex items-center gap-2 leading-none text-muted-foreground", children: "January - June 2024" })] }) }) })] }));
+}

package/dist/primitives/charts/area/index.d.ts

@@ -0,0 +1,11 @@
+export { default as AreaAxes } from './chart-area-axes';
+export { default as AreaDefault } from './chart-area-default';
+export { default as AreaGradient } from './chart-area-gradient';
+export { default as AreaIcons } from './chart-area-icons';
+export { default as AreaInteractive } from './chart-area-interactive';
+export { default as AreaLegend } from './chart-area-legend';
+export { default as AreaLinear } from './chart-area-linear';
+export { default as AreaStackedExpand } from './chart-area-stacked-expand';
+export { default as AreaStacked } from './chart-area-stacked';
+export { default as AreaStep } from './chart-area-step';
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/charts/area/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/area/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAA;AACvD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,uBAAuB,CAAA;AAC/D,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAA;AACzD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAA;AACrE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,qBAAqB,CAAA;AAC3D,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,6BAA6B,CAAA;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAA;AAC7D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAA"}

package/dist/primitives/charts/area/index.js

@@ -0,0 +1,11 @@
+// Auto-generated index for area charts
+export { default as AreaAxes } from './chart-area-axes';
+export { default as AreaDefault } from './chart-area-default';
+export { default as AreaGradient } from './chart-area-gradient';
+export { default as AreaIcons } from './chart-area-icons';
+export { default as AreaInteractive } from './chart-area-interactive';
+export { default as AreaLegend } from './chart-area-legend';
+export { default as AreaLinear } from './chart-area-linear';
+export { default as AreaStackedExpand } from './chart-area-stacked-expand';
+export { default as AreaStacked } from './chart-area-stacked';
+export { default as AreaStep } from './chart-area-step';

package/dist/primitives/charts/bar/chart-bar-active.d.ts

@@ -0,0 +1,3 @@
+export declare const description = "A bar chart with an active bar";
+export default function Component(): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=chart-bar-active.d.ts.map

package/dist/primitives/charts/bar/chart-bar-active.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-bar-active.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/bar/chart-bar-active.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,mCAAmC,CAAA;AAoC3D,MAAM,CAAC,OAAO,UAAU,SAAS,4CAsDhC"}

package/dist/primitives/charts/bar/chart-bar-active.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Bar, BarChart, CartesianGrid, Rectangle, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A bar chart with an active bar";
+const chartData = [
+    { browser: "chrome", visitors: 187, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 275, fill: "var(--color-firefox)" },
+    { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+    { browser: "other", visitors: 90, fill: "var(--color-other)" },
+];
+const chartConfig = {
+    visitors: {
+        label: "Visitors",
+    },
+    chrome: {
+        label: "Chrome",
+        color: "hsl(var(--chart-1))",
+    },
+    safari: {
+        label: "Safari",
+        color: "hsl(var(--chart-2))",
+    },
+    firefox: {
+        label: "Firefox",
+        color: "hsl(var(--chart-3))",
+    },
+    edge: {
+        label: "Edge",
+        color: "hsl(var(--chart-4))",
+    },
+    other: {
+        label: "Other",
+        color: "hsl(var(--chart-5))",
+    },
+};
+export default function Component() {
+    return (_jsxs(Card, { children: [_jsxs(CardHeader, { children: [_jsx(CardTitle, { children: "Bar Chart - Active" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(BarChart, { accessibilityLayer: true, data: chartData, children: [_jsx(CartesianGrid, { vertical: false }), _jsx(XAxis, { dataKey: "browser", tickLine: false, tickMargin: 10, axisLine: false, tickFormatter: (value) => chartConfig[value]?.label }), _jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Bar, { dataKey: "visitors", strokeWidth: 2, radius: 8, activeIndex: 2, activeBar: ({ ...props }) => {
+                                    return (_jsx(Rectangle, { ...props, fillOpacity: 0.8, stroke: props.payload.fill, strokeDasharray: 4, strokeDashoffset: 4 }));
+                                } })] }) }) }), _jsxs(CardFooter, { className: "flex-col items-start gap-2 text-sm", children: [_jsxs("div", { className: "flex gap-2 font-medium leading-none", children: ["Trending up by 5.2% this month ", _jsx(TrendingUp, { className: "h-4 w-4" })] }), _jsx("div", { className: "leading-none text-muted-foreground", children: "Showing total visitors for the last 6 months" })] })] }));
+}