@hanzo/ui-shadcn 5.7.2

package/dist/primitives/charts/line/chart-line-multiple.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A multiple line 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: "Line Chart - Multiple" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(LineChart, { 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, {}) }), _jsx(Line, { dataKey: "desktop", type: "monotone", stroke: "var(--color-desktop)", strokeWidth: 2, dot: false }), _jsx(Line, { dataKey: "mobile", type: "monotone", stroke: "var(--color-mobile)", strokeWidth: 2, dot: false })] }) }) }), _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: "Showing total visitors for the last 6 months" })] }) }) })] }));
+}

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

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

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

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

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

@@ -0,0 +1,27 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { CartesianGrid, Line, LineChart, XAxis } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A line chart with step";
+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: "Line Chart - Step" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { children: _jsx(ChartContainer, { config: chartConfig, children: _jsxs(LineChart, { 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(Line, { dataKey: "desktop", type: "step", stroke: "var(--color-desktop)", strokeWidth: 2, dot: false })] }) }) }), _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" })] })] }));
+}

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

@@ -0,0 +1,11 @@
+export { default as LineDefault } from './chart-line-default';
+export { default as LineDotsColors } from './chart-line-dots-colors';
+export { default as LineDotsCustom } from './chart-line-dots-custom';
+export { default as LineDots } from './chart-line-dots';
+export { default as LineInteractive } from './chart-line-interactive';
+export { default as LineLabelCustom } from './chart-line-label-custom';
+export { default as LineLabel } from './chart-line-label';
+export { default as LineLinear } from './chart-line-linear';
+export { default as LineMultiple } from './chart-line-multiple';
+export { default as LineStep } from './chart-line-step';
+//# sourceMappingURL=index.d.ts.map

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

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

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

@@ -0,0 +1,11 @@
+// Auto-generated index for line charts
+export { default as LineDefault } from './chart-line-default';
+export { default as LineDotsColors } from './chart-line-dots-colors';
+export { default as LineDotsCustom } from './chart-line-dots-custom';
+export { default as LineDots } from './chart-line-dots';
+export { default as LineInteractive } from './chart-line-interactive';
+export { default as LineLabelCustom } from './chart-line-label-custom';
+export { default as LineLabel } from './chart-line-label';
+export { default as LineLinear } from './chart-line-linear';
+export { default as LineMultiple } from './chart-line-multiple';
+export { default as LineStep } from './chart-line-step';

package/dist/primitives/charts/pie/chart-pie-donut-active.d.ts

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-donut-active.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/pie/chart-pie-donut-active.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,WAAW,wCAAwC,CAAA;AAoChE,MAAM,CAAC,OAAO,UAAU,SAAS,4CA4ChC"}

package/dist/primitives/charts/pie/chart-pie-donut-active.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Pie, PieChart, Sector } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A donut chart with an active sector";
+const chartData = [
+    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 187, 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, { className: "flex flex-col", children: [_jsxs(CardHeader, { className: "items-center pb-0", children: [_jsx(CardTitle, { children: "Pie Chart - Donut Active" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { className: "flex-1 pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "mx-auto aspect-square max-h-[250px]", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Pie, { data: chartData, dataKey: "visitors", nameKey: "browser", innerRadius: 60, strokeWidth: 5, activeIndex: 0, activeShape: ({ outerRadius = 0, ...props }) => (_jsx(Sector, { ...props, outerRadius: outerRadius + 10 })) })] }) }) }), _jsxs(CardFooter, { className: "flex-col gap-2 text-sm", 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: "leading-none text-muted-foreground", children: "Showing total visitors for the last 6 months" })] })] }));
+}

package/dist/primitives/charts/pie/chart-pie-donut-text.d.ts

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

package/dist/primitives/charts/pie/chart-pie-donut-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-donut-text.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/pie/chart-pie-donut-text.tsx"],"names":[],"mappings":"AAqBA,eAAO,MAAM,WAAW,4BAA4B,CAAA;AAoCpD,MAAM,CAAC,OAAO,UAAU,SAAS,4CAuEhC"}

package/dist/primitives/charts/pie/chart-pie-donut-text.js

@@ -0,0 +1,50 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { TrendingUp } from "lucide-react";
+import { Label, Pie, PieChart } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A donut chart with text";
+const chartData = [
+    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 287, fill: "var(--color-firefox)" },
+    { browser: "edge", visitors: 173, fill: "var(--color-edge)" },
+    { browser: "other", visitors: 190, 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() {
+    const totalVisitors = React.useMemo(() => {
+        return chartData.reduce((acc, curr) => acc + curr.visitors, 0);
+    }, []);
+    return (_jsxs(Card, { className: "flex flex-col", children: [_jsxs(CardHeader, { className: "items-center pb-0", children: [_jsx(CardTitle, { children: "Pie Chart - Donut with Text" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { className: "flex-1 pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "mx-auto aspect-square max-h-[250px]", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Pie, { data: chartData, dataKey: "visitors", nameKey: "browser", innerRadius: 60, strokeWidth: 5, children: _jsx(Label, { content: ({ viewBox }) => {
+                                        if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                                            return (_jsxs("text", { x: viewBox.cx, y: viewBox.cy, textAnchor: "middle", dominantBaseline: "middle", children: [_jsx("tspan", { x: viewBox.cx, y: viewBox.cy, className: "fill-foreground text-3xl font-bold", children: totalVisitors.toLocaleString() }), _jsx("tspan", { x: viewBox.cx, y: (viewBox.cy || 0) + 24, className: "fill-muted-foreground", children: "Visitors" })] }));
+                                        }
+                                    } }) })] }) }) }), _jsxs(CardFooter, { className: "flex-col gap-2 text-sm", 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: "leading-none text-muted-foreground", children: "Showing total visitors for the last 6 months" })] })] }));
+}

package/dist/primitives/charts/pie/chart-pie-donut.d.ts

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

package/dist/primitives/charts/pie/chart-pie-donut.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-donut.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/pie/chart-pie-donut.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,kBAAkB,CAAA;AAoC1C,MAAM,CAAC,OAAO,UAAU,SAAS,4CAoChC"}

package/dist/primitives/charts/pie/chart-pie-donut.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Pie, PieChart } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A donut chart";
+const chartData = [
+    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 187, 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, { className: "flex flex-col", children: [_jsxs(CardHeader, { className: "items-center pb-0", children: [_jsx(CardTitle, { children: "Pie Chart - Donut" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { className: "flex-1 pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "mx-auto aspect-square max-h-[250px]", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Pie, { data: chartData, dataKey: "visitors", nameKey: "browser", innerRadius: 60 })] }) }) }), _jsxs(CardFooter, { className: "flex-col gap-2 text-sm", 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: "leading-none text-muted-foreground", children: "Showing total visitors for the last 6 months" })] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-interactive.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/pie/chart-pie-interactive.tsx"],"names":[],"mappings":"AA4BA,eAAO,MAAM,WAAW,6BAA6B,CAAA;AA0CrD,MAAM,CAAC,OAAO,UAAU,SAAS,4CAyHhC"}

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

@@ -0,0 +1,65 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Label, Pie, PieChart, Sector } from "recharts";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartStyle, ChartTooltip, ChartTooltipContent, } from "../../chart";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../../select";
+export const description = "An interactive pie chart";
+const desktopData = [
+    { month: "january", desktop: 186, fill: "var(--color-january)" },
+    { month: "february", desktop: 305, fill: "var(--color-february)" },
+    { month: "march", desktop: 237, fill: "var(--color-march)" },
+    { month: "april", desktop: 173, fill: "var(--color-april)" },
+    { month: "may", desktop: 209, fill: "var(--color-may)" },
+];
+const chartConfig = {
+    visitors: {
+        label: "Visitors",
+    },
+    desktop: {
+        label: "Desktop",
+    },
+    mobile: {
+        label: "Mobile",
+    },
+    january: {
+        label: "January",
+        color: "hsl(var(--chart-1))",
+    },
+    february: {
+        label: "February",
+        color: "hsl(var(--chart-2))",
+    },
+    march: {
+        label: "March",
+        color: "hsl(var(--chart-3))",
+    },
+    april: {
+        label: "April",
+        color: "hsl(var(--chart-4))",
+    },
+    may: {
+        label: "May",
+        color: "hsl(var(--chart-5))",
+    },
+};
+export default function Component() {
+    const id = "pie-interactive";
+    const [activeMonth, setActiveMonth] = React.useState(desktopData[0].month);
+    const activeIndex = React.useMemo(() => desktopData.findIndex((item) => item.month === activeMonth), [activeMonth]);
+    const months = React.useMemo(() => desktopData.map((item) => item.month), []);
+    return (_jsxs(Card, { "data-chart": id, className: "flex flex-col", children: [_jsx(ChartStyle, { id: id, config: chartConfig }), _jsxs(CardHeader, { className: "flex-row items-start space-y-0 pb-0", children: [_jsxs("div", { className: "grid gap-1", children: [_jsx(CardTitle, { children: "Pie Chart - Interactive" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsxs(Select, { value: activeMonth, onValueChange: setActiveMonth, children: [_jsx(SelectTrigger, { className: "ml-auto h-7 w-[130px] rounded-lg pl-2.5", "aria-label": "Select a value", children: _jsx(SelectValue, { placeholder: "Select month" }) }), _jsx(SelectContent, { align: "end", className: "rounded-xl", children: months.map((key) => {
+                                    const config = chartConfig[key];
+                                    if (!config) {
+                                        return null;
+                                    }
+                                    return (_jsx(SelectItem, { value: key, className: "rounded-lg [&_span]:flex", children: _jsxs("div", { className: "flex items-center gap-2 text-xs", children: [_jsx("span", { className: "flex h-3 w-3 shrink-0 rounded-sm", style: {
+                                                        backgroundColor: `var(--color-${key})`,
+                                                    } }), config?.label] }) }, key));
+                                }) })] })] }), _jsx(CardContent, { className: "flex flex-1 justify-center pb-0", children: _jsx(ChartContainer, { id: id, config: chartConfig, className: "mx-auto aspect-square w-full max-w-[300px]", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Pie, { data: desktopData, dataKey: "desktop", nameKey: "month", innerRadius: 60, strokeWidth: 5, activeIndex: activeIndex, activeShape: ({ outerRadius = 0, ...props }) => (_jsxs("g", { children: [_jsx(Sector, { ...props, outerRadius: outerRadius + 10 }), _jsx(Sector, { ...props, outerRadius: outerRadius + 25, innerRadius: outerRadius + 12 })] })), children: _jsx(Label, { content: ({ viewBox }) => {
+                                        if (viewBox && "cx" in viewBox && "cy" in viewBox) {
+                                            return (_jsxs("text", { x: viewBox.cx, y: viewBox.cy, textAnchor: "middle", dominantBaseline: "middle", children: [_jsx("tspan", { x: viewBox.cx, y: viewBox.cy, className: "fill-foreground text-3xl font-bold", children: desktopData[activeIndex].desktop.toLocaleString() }), _jsx("tspan", { x: viewBox.cx, y: (viewBox.cy || 0) + 24, className: "fill-muted-foreground", children: "Visitors" })] }));
+                                        }
+                                    } }) })] }) }) })] }));
+}

package/dist/primitives/charts/pie/chart-pie-label-custom.d.ts

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

package/dist/primitives/charts/pie/chart-pie-label-custom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-label-custom.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/pie/chart-pie-label-custom.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,oCAAoC,CAAA;AAoC5D,MAAM,CAAC,OAAO,UAAU,SAAS,4CAkDhC"}

package/dist/primitives/charts/pie/chart-pie-label-custom.js

@@ -0,0 +1,44 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Pie, PieChart } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A pie chart with a custom label";
+const chartData = [
+    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 187, 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, { className: "flex flex-col", children: [_jsxs(CardHeader, { className: "items-center pb-0", children: [_jsx(CardTitle, { children: "Pie Chart - Custom Label" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { className: "flex-1 pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "mx-auto aspect-square max-h-[250px] px-0", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { nameKey: "visitors", hideLabel: true }) }), _jsx(Pie, { data: chartData, dataKey: "visitors", labelLine: false, label: ({ payload, ...props }) => {
+                                    return (_jsx("text", { cx: props.cx, cy: props.cy, x: props.x, y: props.y, textAnchor: props.textAnchor, dominantBaseline: props.dominantBaseline, fill: "hsla(var(--foreground))", children: payload.visitors }));
+                                }, nameKey: "browser" })] }) }) }), _jsxs(CardFooter, { className: "flex-col gap-2 text-sm", 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: "leading-none text-muted-foreground", children: "Showing total visitors for the last 6 months" })] })] }));
+}

package/dist/primitives/charts/pie/chart-pie-label-list.d.ts

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

package/dist/primitives/charts/pie/chart-pie-label-list.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-label-list.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/pie/chart-pie-label-list.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,kCAAkC,CAAA;AAoC1D,MAAM,CAAC,OAAO,UAAU,SAAS,4CAwChC"}

package/dist/primitives/charts/pie/chart-pie-label-list.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { LabelList, Pie, PieChart } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A pie chart with a label list";
+const chartData = [
+    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 187, 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, { className: "flex flex-col", children: [_jsxs(CardHeader, { className: "items-center pb-0", children: [_jsx(CardTitle, { children: "Pie Chart - Label List" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { className: "flex-1 pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "mx-auto aspect-square max-h-[250px] [&_.recharts-text]:fill-background", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { nameKey: "visitors", hideLabel: true }) }), _jsx(Pie, { data: chartData, dataKey: "visitors", children: _jsx(LabelList, { dataKey: "browser", className: "fill-background", stroke: "none", fontSize: 12, formatter: (value) => chartConfig[value]?.label }) })] }) }) }), _jsxs(CardFooter, { className: "flex-col gap-2 text-sm", 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: "leading-none text-muted-foreground", children: "Showing total visitors for the last 6 months" })] })] }));
+}

package/dist/primitives/charts/pie/chart-pie-label.d.ts

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

package/dist/primitives/charts/pie/chart-pie-label.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-label.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/pie/chart-pie-label.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,6BAA6B,CAAA;AAoCrD,MAAM,CAAC,OAAO,UAAU,SAAS,4CA4BhC"}

package/dist/primitives/charts/pie/chart-pie-label.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Pie, PieChart } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A pie chart with a label";
+const chartData = [
+    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 187, 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, { className: "flex flex-col", children: [_jsxs(CardHeader, { className: "items-center pb-0", children: [_jsx(CardTitle, { children: "Pie Chart - Label" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { className: "flex-1 pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "mx-auto aspect-square max-h-[250px] pb-0 [&_.recharts-pie-label-text]:fill-foreground", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Pie, { data: chartData, dataKey: "visitors", label: true, nameKey: "browser" })] }) }) }), _jsxs(CardFooter, { className: "flex-col gap-2 text-sm", 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: "leading-none text-muted-foreground", children: "Showing total visitors for the last 6 months" })] })] }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-legend.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/pie/chart-pie-legend.tsx"],"names":[],"mappings":"AAkBA,eAAO,MAAM,WAAW,8BAA8B,CAAA;AAoCtD,MAAM,CAAC,OAAO,UAAU,SAAS,4CAuBhC"}

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

@@ -0,0 +1,41 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Pie, PieChart } from "recharts";
+import { Card, CardContent, CardDescription, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartLegend, ChartLegendContent, } from "../../chart";
+export const description = "A pie chart with a legend";
+const chartData = [
+    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 187, 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, { className: "flex flex-col", children: [_jsxs(CardHeader, { className: "items-center pb-0", children: [_jsx(CardTitle, { children: "Pie Chart - Legend" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { className: "flex-1 pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "mx-auto aspect-square max-h-[300px]", children: _jsxs(PieChart, { children: [_jsx(Pie, { data: chartData, dataKey: "visitors" }), _jsx(ChartLegend, { content: _jsx(ChartLegendContent, { nameKey: "browser" }), className: "-translate-y-2 flex-wrap gap-2 [&>*]:basis-1/4 [&>*]:justify-center" })] }) }) })] }));
+}

package/dist/primitives/charts/pie/chart-pie-separator-none.d.ts

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

package/dist/primitives/charts/pie/chart-pie-separator-none.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chart-pie-separator-none.d.ts","sourceRoot":"","sources":["../../../../primitives/charts/pie/chart-pie-separator-none.tsx"],"names":[],"mappings":"AAoBA,eAAO,MAAM,WAAW,kCAAkC,CAAA;AAoC1D,MAAM,CAAC,OAAO,UAAU,SAAS,4CAoChC"}

package/dist/primitives/charts/pie/chart-pie-separator-none.js

@@ -0,0 +1,42 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { TrendingUp } from "lucide-react";
+import { Pie, PieChart } from "recharts";
+import { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, } from "../../card";
+import { ChartContainer, ChartTooltip, ChartTooltipContent, } from "../../chart";
+export const description = "A pie chart with no separator";
+const chartData = [
+    { browser: "chrome", visitors: 275, fill: "var(--color-chrome)" },
+    { browser: "safari", visitors: 200, fill: "var(--color-safari)" },
+    { browser: "firefox", visitors: 187, 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, { className: "flex flex-col", children: [_jsxs(CardHeader, { className: "items-center pb-0", children: [_jsx(CardTitle, { children: "Pie Chart - Separator None" }), _jsx(CardDescription, { children: "January - June 2024" })] }), _jsx(CardContent, { className: "flex-1 pb-0", children: _jsx(ChartContainer, { config: chartConfig, className: "mx-auto aspect-square max-h-[250px]", children: _jsxs(PieChart, { children: [_jsx(ChartTooltip, { cursor: false, content: _jsx(ChartTooltipContent, { hideLabel: true }) }), _jsx(Pie, { data: chartData, dataKey: "visitors", nameKey: "browser", stroke: "0" })] }) }) }), _jsxs(CardFooter, { className: "flex-col gap-2 text-sm", 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: "leading-none text-muted-foreground", children: "Showing total visitors for the last 6 months" })] })] }));
+}

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

@@ -0,0 +1,10 @@
+export { default as PieDonutActive } from './chart-pie-donut-active';
+export { default as PieDonutText } from './chart-pie-donut-text';
+export { default as PieDonut } from './chart-pie-donut';
+export { default as PieInteractive } from './chart-pie-interactive';
+export { default as PieLabelCustom } from './chart-pie-label-custom';
+export { default as PieLabelList } from './chart-pie-label-list';
+export { default as PieLabel } from './chart-pie-label';
+export { default as PieLegend } from './chart-pie-legend';
+export { default as PieSeparatorNone } from './chart-pie-separator-none';
+//# sourceMappingURL=index.d.ts.map