palettecn 0.1.0

package/dist/web/server/_ssr/components-BzCiScpA.mjs

@@ -0,0 +1,1452 @@
+import { i as __toESM } from "../_runtime.mjs";
+import { u as require_react } from "../_libs/@ai-sdk/react+[...].mjs";
+import { s as require_jsx_runtime, t as Icons } from "../_libs/@lobehub/icons+[...].mjs";
+import { C as Link, L as ArrowUpRight, M as ChevronRight, N as ChevronLeft, a as Trash2, f as Plus, i as TrendingUp, x as Minus } from "../_libs/lucide-react.mjs";
+import { t as cva } from "../_libs/class-variance-authority+clsx.mjs";
+import { i as Slot } from "../_libs/@radix-ui/react-arrow+[...].mjs";
+import { n as Root, t as Indicator } from "../_libs/radix-ui__react-progress.mjs";
+import { a as FieldGroup, c as FieldSet, d as Spinner, f as buttonVariants, l as Input, n as Field, o as FieldLabel, p as cn, r as FieldDescription, s as FieldLegend, t as Button, u as Separator$1 } from "./field-1-agM60DBf.mjs";
+import { a as CartesianGrid, c as ResponsiveContainer, i as Area, l as Tooltip, n as BarChart, o as Bar, r as XAxis, s as Rectangle, t as AreaChart } from "../_libs/recharts+[...].mjs";
+import "../_libs/d3-scale+[...].mjs";
+import "../_libs/d3-format.mjs";
+import { t as DayPicker } from "../_libs/react-day-picker.mjs";
+//#region node_modules/.nitro/vite/services/ssr/assets/components-BzCiScpA.js
+var import_react = /* @__PURE__ */ __toESM(require_react());
+var import_jsx_runtime = require_jsx_runtime();
+function Calendar({ className, classNames, showOutsideDays = true, components: userComponents, ...props }) {
+	const defaultClassNames = {
+		months: "relative flex flex-col sm:flex-row gap-4",
+		month: "w-full",
+		month_caption: "relative mx-10 mb-1 flex h-9 items-center justify-center z-20",
+		caption_label: "text-sm font-medium",
+		nav: "absolute top-0 flex w-full justify-between z-10",
+		button_previous: cn(buttonVariants({ variant: "ghost" }), "size-9 text-muted-foreground/80 hover:text-foreground p-0"),
+		button_next: cn(buttonVariants({ variant: "ghost" }), "size-9 text-muted-foreground/80 hover:text-foreground p-0"),
+		weekday: "size-9 p-0 text-xs font-medium text-muted-foreground/80",
+		day_button: "relative flex size-9 items-center justify-center whitespace-nowrap rounded-lg p-0 text-foreground outline-offset-2 group-[[data-selected]:not(.range-middle)]:[transition-property:color,background-color,border-radius,box-shadow] group-[[data-selected]:not(.range-middle)]:duration-150 focus:outline-none group-data-[disabled]:pointer-events-none focus-visible:z-10 hover:bg-accent group-data-[selected]:bg-primary hover:text-foreground group-data-[selected]:text-primary-foreground group-data-[disabled]:text-foreground/30 group-data-[disabled]:line-through group-data-[outside]:text-foreground/30 group-data-[outside]:group-data-[selected]:text-primary-foreground focus-visible:outline focus-visible:outline-2 focus-visible:outline-ring/70 group-[.range-start:not(.range-end)]:rounded-e-none group-[.range-end:not(.range-start)]:rounded-s-none group-[.range-middle]:rounded-none group-data-[selected]:group-[.range-middle]:bg-accent group-data-[selected]:group-[.range-middle]:text-foreground",
+		day: "group size-9 px-0 text-sm",
+		range_start: "range-start",
+		range_end: "range-end",
+		range_middle: "range-middle",
+		today: "*:after:pointer-events-none *:after:absolute *:after:bottom-1 *:after:start-1/2 *:after:z-10 *:after:size-[3px] *:after:-translate-x-1/2 *:after:rounded-full *:after:bg-primary [&[data-selected]:not(.range-middle)>*]:after:bg-background [&[data-disabled]>*]:after:bg-foreground/30 *:after:transition-colors",
+		outside: "text-muted-foreground data-selected:bg-accent/50 data-selected:text-muted-foreground",
+		hidden: "invisible",
+		week_number: "size-9 p-0 text-xs font-medium text-muted-foreground/80"
+	};
+	const mergedClassNames = Object.keys(defaultClassNames).reduce((acc, key) => ({
+		...acc,
+		[key]: classNames?.[key] ? cn(defaultClassNames[key], classNames[key]) : defaultClassNames[key]
+	}), {});
+	const mergedComponents = {
+		Chevron: (props) => {
+			if (props.orientation === "left") return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronLeft, {
+				size: 16,
+				strokeWidth: 2,
+				...props,
+				"aria-hidden": "true"
+			});
+			return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChevronRight, {
+				size: 16,
+				strokeWidth: 2,
+				...props,
+				"aria-hidden": "true"
+			});
+		},
+		...userComponents
+	};
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(DayPicker, {
+		showOutsideDays,
+		className: cn("w-fit", className),
+		classNames: mergedClassNames,
+		components: mergedComponents,
+		...props
+	});
+}
+Calendar.displayName = "Calendar";
+var THEMES$1 = {
+	light: "",
+	dark: ".dark"
+};
+var ChartContext$1 = import_react.createContext(null);
+function useChart$1() {
+	const context = import_react.use(ChartContext$1);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+}
+function ChartContainer$1({ id, className, children, config, ...props }) {
+	const uniqueId = import_react.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContext$1, {
+		value: { config },
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			"data-slot": "chart",
+			"data-chart": chartId,
+			className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			...props,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartStyle$1, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResponsiveContainer, { children })]
+		})
+	});
+}
+var ChartStyle$1 = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES$1).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] || itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n") } });
+};
+var ChartTooltip$1 = Tooltip;
+function ChartTooltipContent$1({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+	const { config } = useChart$1();
+	const tooltipLabel = import_react.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const itemConfig = getPayloadConfigFromPayload$1(config, item, `${labelKey || item?.dataKey || item?.name || "value"}`);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: cn("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className),
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "grid gap-1.5",
+			children: payload.map((item, index) => {
+				const itemConfig = getPayloadConfigFromPayload$1(config, item, `${nameKey || item.name || item.dataKey || "value"}`);
+				const indicatorColor = color || item.payload.fill || item.color;
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"w-1": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label || item.name
+							})]
+						}), item.value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-foreground font-mono font-medium tabular-nums",
+							children: item.value.toLocaleString()
+						})]
+					})] })
+				}, item.dataKey);
+			})
+		})]
+	});
+}
+function getPayloadConfigFromPayload$1(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+var badgeVariants = cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2", {
+	variants: { variant: {
+		default: "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+		secondary: "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+		destructive: "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+		outline: "text-foreground"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function Badge({ className, variant, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: cn(badgeVariants({ variant }), className),
+		...props
+	});
+}
+var itemVariants = cva("[a]:hover:bg-muted rounded-lg border text-sm group/item flex w-full flex-wrap items-center transition-colors duration-100 outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 [a]:transition-colors", {
+	variants: {
+		variant: {
+			default: "border-transparent",
+			outline: "border-border",
+			muted: "bg-muted/50 border-transparent"
+		},
+		size: {
+			default: "gap-2.5 px-3 py-2.5",
+			sm: "gap-2.5 px-3 py-2.5",
+			xs: "gap-2 px-2.5 py-2 in-data-[slot=dropdown-menu-content]:p-0"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+function Item({ className, variant = "default", size = "default", asChild = false, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(asChild ? Slot : "div", {
+		"data-slot": "item",
+		"data-variant": variant,
+		"data-size": size,
+		className: cn(itemVariants({
+			variant,
+			size,
+			className
+		})),
+		...props
+	});
+}
+var itemMediaVariants = cva("gap-2 group-has-data-[slot=item-description]/item:translate-y-0.5 group-has-data-[slot=item-description]/item:self-start flex shrink-0 items-center justify-center [&_svg]:pointer-events-none", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "[&_svg:not([class*='size-'])]:size-4",
+		image: "size-10 overflow-hidden rounded-sm group-data-[size=sm]/item:size-8 group-data-[size=xs]/item:size-6 [&_img]:size-full [&_img]:object-cover"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function ItemMedia({ className, variant = "default", ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "item-media",
+		"data-variant": variant,
+		className: cn(itemMediaVariants({
+			variant,
+			className
+		})),
+		...props
+	});
+}
+function ItemContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "item-content",
+		className: cn("gap-1 group-data-[size=xs]/item:gap-0 flex flex-1 flex-col [&+[data-slot=item-content]]:flex-none", className),
+		...props
+	});
+}
+function ItemTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "item-title",
+		className: cn("gap-2 text-sm leading-snug font-medium underline-offset-4 line-clamp-1 flex w-fit items-center", className),
+		...props
+	});
+}
+function ItemDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+		"data-slot": "item-description",
+		className: cn("text-muted-foreground text-left text-sm leading-normal group-data-[size=xs]/item:text-xs line-clamp-2 font-normal [&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary", className),
+		...props
+	});
+}
+function ItemActions({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "item-actions",
+		className: cn("gap-2 flex items-center", className),
+		...props
+	});
+}
+function ItemFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "item-footer",
+		className: cn("gap-2 flex basis-full items-center justify-between", className),
+		...props
+	});
+}
+function Progress$1({ className, value, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Root, {
+		"data-slot": "progress",
+		className: cn("bg-muted h-1 rounded-full relative flex w-full items-center overflow-x-hidden", className),
+		...props,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Indicator, {
+			"data-slot": "progress-indicator",
+			className: "bg-primary size-full flex-1 transition-all",
+			style: { transform: `translateX(-${100 - (value || 0)}%)` }
+		})
+	});
+}
+function Card({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "card",
+		className: cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-none", className),
+		...props
+	});
+}
+function CardHeader({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "card-header",
+		className: cn("@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-2 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6", className),
+		...props
+	});
+}
+function CardTitle({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "card-title",
+		className: cn("leading-none font-semibold", className),
+		...props
+	});
+}
+function CardDescription({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "card-description",
+		className: cn("text-muted-foreground text-sm", className),
+		...props
+	});
+}
+function CardContent({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "card-content",
+		className: cn("px-6", className),
+		...props
+	});
+}
+function CardFooter({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		"data-slot": "card-footer",
+		className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+		...props
+	});
+}
+var THEMES = {
+	light: "",
+	dark: ".dark"
+};
+var ChartContext = import_react.createContext(null);
+function useChart() {
+	const context = import_react.use(ChartContext);
+	if (!context) throw new Error("useChart must be used within a <ChartContainer />");
+	return context;
+}
+function ChartContainer({ id, className, children, config, ...props }) {
+	const uniqueId = import_react.useId();
+	const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContext, {
+		value: { config },
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			"data-slot": "chart",
+			"data-chart": chartId,
+			className: cn("[&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line[stroke='#ccc']]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line_[stroke='#ccc']]:stroke-border flex aspect-video justify-center text-xs [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-hidden [&_.recharts-sector]:outline-hidden [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-surface]:outline-hidden", className),
+			...props,
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartStyle, {
+				id: chartId,
+				config
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ResponsiveContainer, { children })]
+		})
+	});
+}
+var ChartStyle = ({ id, config }) => {
+	const colorConfig = Object.entries(config).filter(([, config]) => config.theme || config.color);
+	if (!colorConfig.length) return null;
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("style", { dangerouslySetInnerHTML: { __html: Object.entries(THEMES).map(([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme] || itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	}).join("\n")}
+}
+`).join("\n") } });
+};
+var ChartTooltip = Tooltip;
+function ChartTooltipContent({ active, payload, className, indicator = "dot", hideLabel = false, hideIndicator = false, label, labelFormatter, labelClassName, formatter, color, nameKey, labelKey }) {
+	const { config } = useChart();
+	const tooltipLabel = import_react.useMemo(() => {
+		if (hideLabel || !payload?.length) return null;
+		const [item] = payload;
+		const itemConfig = getPayloadConfigFromPayload(config, item, `${labelKey || item?.dataKey || item?.name || "value"}`);
+		const value = !labelKey && typeof label === "string" ? config[label]?.label || label : itemConfig?.label;
+		if (labelFormatter) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: cn("font-medium", labelClassName),
+			children: labelFormatter(value, payload)
+		});
+		if (!value) return null;
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: cn("font-medium", labelClassName),
+			children: value
+		});
+	}, [
+		label,
+		labelFormatter,
+		payload,
+		hideLabel,
+		labelClassName,
+		config,
+		labelKey
+	]);
+	if (!active || !payload?.length) return null;
+	const nestLabel = payload.length === 1 && indicator !== "dot";
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: cn("border-border/50 bg-background grid min-w-[8rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl", className),
+		children: [!nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "grid gap-1.5",
+			children: payload.filter((item) => item.type !== "none").map((item, index) => {
+				const itemConfig = getPayloadConfigFromPayload(config, item, `${nameKey || item.name || item.dataKey || "value"}`);
+				const indicatorColor = color || item.payload.fill || item.color;
+				return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: cn("[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5", indicator === "dot" && "items-center"),
+					children: formatter && item?.value !== void 0 && item.name ? formatter(item.value, item.name, item, index, item.payload) : /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [itemConfig?.icon ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(itemConfig.icon, {}) : !hideIndicator && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+							"h-2.5 w-2.5": indicator === "dot",
+							"w-1": indicator === "line",
+							"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+							"my-0.5": nestLabel && indicator === "dashed"
+						}),
+						style: {
+							"--color-bg": indicatorColor,
+							"--color-border": indicatorColor
+						}
+					}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+						className: cn("flex flex-1 justify-between leading-none", nestLabel ? "items-end" : "items-center"),
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+							className: "grid gap-1.5",
+							children: [nestLabel ? tooltipLabel : null, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+								className: "text-muted-foreground",
+								children: itemConfig?.label || item.name
+							})]
+						}), item.value && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "text-foreground font-mono font-medium tabular-nums",
+							children: item.value.toLocaleString()
+						})]
+					})] })
+				}, item.dataKey);
+			})
+		})]
+	});
+}
+function getPayloadConfigFromPayload(config, payload, key) {
+	if (typeof payload !== "object" || payload === null) return;
+	const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null ? payload.payload : void 0;
+	let configLabelKey = key;
+	if (key in payload && typeof payload[key] === "string") configLabelKey = payload[key];
+	else if (payloadPayload && key in payloadPayload && typeof payloadPayload[key] === "string") configLabelKey = payloadPayload[key];
+	return configLabelKey in config ? config[configLabelKey] : config[key];
+}
+var 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)"
+	}
+];
+var chartConfig = {
+	visitors: { label: "Visitors" },
+	chrome: {
+		label: "Chrome",
+		color: "var(--chart-1)"
+	},
+	safari: {
+		label: "Safari",
+		color: "var(--chart-2)"
+	},
+	firefox: {
+		label: "Firefox",
+		color: "var(--chart-3)"
+	},
+	edge: {
+		label: "Edge",
+		color: "var(--chart-4)"
+	},
+	other: {
+		label: "Other",
+		color: "var(--chart-5)"
+	}
+};
+function ChartBarActive() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: "Bar Chart - Active" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "January - June 2024" })] }),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContainer, {
+			config: chartConfig,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(BarChart, {
+				accessibilityLayer: true,
+				data: chartData,
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, { vertical: false }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+						dataKey: "browser",
+						tickLine: false,
+						tickMargin: 10,
+						axisLine: false,
+						tickFormatter: (value) => chartConfig[value]?.label
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip, {
+						cursor: false,
+						content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltipContent, { hideLabel: true })
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Bar, {
+						dataKey: "visitors",
+						strokeWidth: 2,
+						radius: 8,
+						activeIndex: 2,
+						activeBar: ({ ...props }) => {
+							return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Rectangle, {
+								...props,
+								fillOpacity: .8,
+								stroke: props.payload.fill,
+								strokeDasharray: 4,
+								strokeDashoffset: 4
+							});
+						}
+					})
+				]
+			})
+		}) }),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardFooter, {
+			className: "flex-col items-start gap-2 text-sm",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex gap-2 leading-none font-medium",
+				children: ["Trending up by 5.2% this month ", /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrendingUp, { className: "h-4 w-4" })]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "text-muted-foreground leading-none",
+				children: "Showing total visitors for the last 6 months"
+			})]
+		})
+	] });
+}
+function AnimatedCard({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		role: "region",
+		"aria-labelledby": "card-title",
+		"aria-describedby": "card-description",
+		className: cn("group/animated-card relative overflow-hidden rounded-xl border shadow-sm", className),
+		...props
+	});
+}
+function CardBody({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		role: "group",
+		className: cn("flex flex-col space-y-1.5 border-t p-4", className),
+		...props
+	});
+}
+function CardVisual({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: cn("h-[180px] w-full overflow-hidden", className),
+		...props
+	});
+}
+function Visual3({ mainColor = "var(--chart1)", secondaryColor = "var(--chart2)", gridColor = "var(--muted)" }) {
+	const [hovered, setHovered] = (0, import_react.useState)(false);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "absolute inset-0 z-20",
+		onMouseEnter: () => setHovered(true),
+		onMouseLeave: () => setHovered(false),
+		style: {
+			"--color": mainColor,
+			"--secondary-color": secondaryColor
+		}
+	}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "relative h-full overflow-hidden rounded-t-lg",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layer4, {
+				color: mainColor,
+				secondaryColor,
+				hovered
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layer3, { color: mainColor }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layer2, { color: mainColor }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Layer1, {
+				color: mainColor,
+				secondaryColor
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(EllipseGradient, { color: mainColor }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(GridLayer, { color: gridColor })
+		]
+	})] });
+}
+var GridLayer = ({ color }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		style: { "--grid-color": color },
+		className: "pointer-events-none absolute inset-0 z-4 size-full bg-transparent bg-[linear-gradient(to_right,var(--grid-color)_1px,transparent_1px),linear-gradient(to_bottom,var(--grid-color)_1px,transparent_1px)] bg-size-[20px_20px] bg-center opacity-70 [mask-image:radial-gradient(ellipse_50%_50%_at_50%_50%,#000_60%,transparent_100%)]"
+	});
+};
+var EllipseGradient = ({ color }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "absolute inset-0 z-5 flex size-full items-center justify-center",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+			width: "356",
+			height: "196",
+			viewBox: "0 0 356 180",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+				width: "356",
+				height: "180",
+				fill: "url(#paint0_radial_12_207)"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("radialGradient", {
+				id: "paint0_radial_12_207",
+				cx: "0",
+				cy: "0",
+				r: "1",
+				gradientUnits: "userSpaceOnUse",
+				gradientTransform: "translate(178 98) rotate(90) scale(98 178)",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+						stopColor: color,
+						stopOpacity: "0.25"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+						offset: "0.34",
+						stopColor: color,
+						stopOpacity: "0.15"
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+						offset: "1",
+						stopOpacity: "0"
+					})
+				]
+			}) })]
+		})
+	});
+};
+var Layer1 = ({ color, secondaryColor }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "absolute top-4 left-4 z-[8] flex items-center gap-1",
+		style: {
+			"--color": color,
+			"--secondary-color": secondaryColor
+		},
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex shrink-0 items-center rounded-full border bg-background/25 px-1.5 py-0.5 backdrop-blur-sm transition-opacity duration-300 ease-in-out group-hover/animated-card:opacity-0",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1.5 w-1.5 rounded-full bg-(--color)" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "ml-1 text-[10px]",
+				children: "+15,2%"
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex shrink-0 items-center rounded-full border bg-background/25 px-1.5 py-0.5 backdrop-blur-sm transition-opacity duration-300 ease-in-out group-hover/animated-card:opacity-0",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-1.5 w-1.5 rounded-full bg-(--secondary-color)" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+				className: "ml-1 text-[10px]",
+				children: "+18,7%"
+			})]
+		})]
+	});
+};
+var Layer2 = ({ color }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "group relative h-full",
+		style: { "--color": color },
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "ease-[cubic-bezier(0.6, 0.6, 0, 1)] absolute inset-0 z-7 flex translate-y-full items-start justify-center bg-transparent p-4 transition-transform duration-500 group-hover/animated-card:translate-y-0",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "ease-[cubic-bezier(0.6, 0, 1)] rounded-md border bg-background/25 p-1.5 opacity-0 backdrop-blur-sm transition-opacity duration-500 group-hover/animated-card:opacity-100",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center gap-2",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "h-2 w-2 shrink-0 rounded-full bg-(--color)" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "text-xs",
+						children: "Random Data Visualization"
+					})]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+					className: "text-xs text-muted-foreground",
+					children: "Displaying some interesting stats."
+				})]
+			})
+		})
+	});
+};
+var Layer3 = ({ color }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "ease-[cubic-bezier(0.6, 0.6, 0, 1)] absolute inset-0 z-6 flex translate-y-full items-center justify-center size-full opacity-0 transition-all duration-500 group-hover/animated-card:translate-y-0 group-hover/animated-card:opacity-100",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", {
+			width: "100%",
+			height: "100%",
+			viewBox: "0 0 356 180",
+			fill: "none",
+			xmlns: "http://www.w3.org/2000/svg",
+			preserveAspectRatio: "none",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+				width: "356",
+				height: "180",
+				fill: "url(#paint0_linear_29_3)"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("defs", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
+				id: "paint0_linear_29_3",
+				x1: "178",
+				y1: "0",
+				x2: "178",
+				y2: "180",
+				gradientUnits: "userSpaceOnUse",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+					offset: "0.35",
+					stopColor: color,
+					stopOpacity: "0"
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+					offset: "1",
+					stopColor: color,
+					stopOpacity: "0.3"
+				})]
+			}) })]
+		})
+	});
+};
+var Layer4 = ({ color, secondaryColor, hovered }) => {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "ease-[cubic-bezier(0.6, 0.6, 0, 1)] absolute inset-0 z-8 flex size-full items-center justify-center text-foreground/10 transition-transform duration-500 group-hover/animated-card:scale-150",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", {
+			width: "356",
+			height: "180",
+			xmlns: "http://www.w3.org/2000/svg",
+			children: [
+				{
+					width: 15,
+					height: 20,
+					y: 110,
+					hoverHeight: 20,
+					hoverY: 130,
+					x: 40,
+					fill: "currentColor",
+					hoverFill: secondaryColor
+				},
+				{
+					width: 15,
+					height: 20,
+					y: 90,
+					hoverHeight: 20,
+					hoverY: 130,
+					x: 60,
+					fill: color,
+					hoverFill: color
+				},
+				{
+					width: 15,
+					height: 40,
+					y: 70,
+					hoverHeight: 30,
+					hoverY: 120,
+					x: 80,
+					fill: color,
+					hoverFill: color
+				},
+				{
+					width: 15,
+					height: 30,
+					y: 80,
+					hoverHeight: 50,
+					hoverY: 100,
+					x: 100,
+					fill: color,
+					hoverFill: color
+				},
+				{
+					width: 15,
+					height: 30,
+					y: 110,
+					hoverHeight: 40,
+					hoverY: 110,
+					x: 120,
+					fill: "currentColor",
+					hoverFill: secondaryColor
+				},
+				{
+					width: 15,
+					height: 50,
+					y: 110,
+					hoverHeight: 20,
+					hoverY: 130,
+					x: 140,
+					fill: "currentColor",
+					hoverFill: secondaryColor
+				},
+				{
+					width: 15,
+					height: 50,
+					y: 60,
+					hoverHeight: 30,
+					hoverY: 120,
+					x: 160,
+					fill: color,
+					hoverFill: color
+				},
+				{
+					width: 15,
+					height: 30,
+					y: 80,
+					hoverHeight: 20,
+					hoverY: 130,
+					x: 180,
+					fill: color,
+					hoverFill: color
+				},
+				{
+					width: 15,
+					height: 20,
+					y: 110,
+					hoverHeight: 40,
+					hoverY: 110,
+					x: 200,
+					fill: "currentColor",
+					hoverFill: secondaryColor
+				},
+				{
+					width: 15,
+					height: 40,
+					y: 70,
+					hoverHeight: 60,
+					hoverY: 90,
+					x: 220,
+					fill: color,
+					hoverFill: color
+				},
+				{
+					width: 15,
+					height: 30,
+					y: 110,
+					hoverHeight: 70,
+					hoverY: 80,
+					x: 240,
+					fill: "currentColor",
+					hoverFill: secondaryColor
+				},
+				{
+					width: 15,
+					height: 50,
+					y: 110,
+					hoverHeight: 50,
+					hoverY: 100,
+					x: 260,
+					fill: "currentColor",
+					hoverFill: secondaryColor
+				},
+				{
+					width: 15,
+					height: 20,
+					y: 110,
+					hoverHeight: 80,
+					hoverY: 70,
+					x: 280,
+					fill: "currentColor",
+					hoverFill: secondaryColor
+				},
+				{
+					width: 15,
+					height: 30,
+					y: 80,
+					hoverHeight: 90,
+					hoverY: 60,
+					x: 300,
+					fill: color,
+					hoverFill: color
+				}
+			].map((rect, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+				width: rect.width,
+				height: hovered ? rect.hoverHeight : rect.height,
+				x: rect.x,
+				y: hovered ? rect.hoverY : rect.y,
+				fill: hovered ? rect.hoverFill : rect.fill,
+				rx: "2",
+				ry: "2",
+				className: "ease-[cubic-bezier(0.6, 0.6, 0, 1)] transition-all duration-500"
+			}, index))
+		})
+	});
+};
+function ShoppingCartOne() {
+	const cartItem = {
+		id: 1,
+		name: "Apple AirPods Pro (2nd gen)",
+		category: "Headphones",
+		image: "https://images.unsplash.com/photo-1624258919367-5dc28f5dc293?ixlib=rb-4.1.0&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&q=80&w=1160",
+		price: 129,
+		originalPrice: 129,
+		quantity: 1
+	};
+	const [quantity, setQuantity] = (0, import_react.useState)(cartItem.quantity);
+	const incrementQuantity = () => setQuantity((prev) => prev + 1);
+	const decrementQuantity = () => setQuantity((prev) => Math.max(1, prev - 1));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: "w-full bg-card border shadow-none rounded-xl not-prose p-4 flex-row gap-4",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+			className: "size-22 bg-white rounded-xl overflow-hidden flex-shrink-0",
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+				src: cartItem.image,
+				alt: cartItem.name,
+				className: "w-full h-full object-cover"
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "flex-1 flex flex-col space-y-4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex gap-4",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex-1",
+					children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: cartItem.category }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: cartItem.name })]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+					size: "icon",
+					variant: "destructive",
+					children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Trash2, { className: "h-4 w-4" })
+				})]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex items-center justify-between",
+				children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+					className: "flex items-center bg-background text-foreground rounded-lg border",
+					children: [
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+							variant: "ghost",
+							size: "icon",
+							className: "h-8 w-8 rounded-lg hover:bg-muted",
+							onClick: decrementQuantity,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Minus, { className: "h-4 w-4" })
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+							className: "w-8 text-center text-sm font-medium",
+							children: quantity
+						}),
+						/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+							variant: "ghost",
+							size: "icon",
+							className: "h-8 w-8 rounded-lg hover:bg-muted",
+							onClick: incrementQuantity,
+							children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Plus, { className: "h-4 w-4" })
+						})
+					]
+				}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("p", {
+					className: "text-xl font-semibold",
+					children: ["$", (cartItem.price * quantity).toFixed(2)]
+				})]
+			})]
+		})]
+	});
+}
+function Calendar20() {
+	const [date, setDate] = (0, import_react.useState)(new Date(2025, 5, 12));
+	const [selectedTime, setSelectedTime] = (0, import_react.useState)("10:00");
+	const timeSlots = Array.from({ length: 37 }, (_, i) => {
+		const totalMinutes = i * 15;
+		const hour = Math.floor(totalMinutes / 60) + 9;
+		const minute = totalMinutes % 60;
+		return `${hour.toString().padStart(2, "0")}:${minute.toString().padStart(2, "0")}`;
+	});
+	const bookedDates = Array.from({ length: 3 }, (_, i) => new Date(2025, 5, 17 + i));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, {
+		className: "gap-0 p-0",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardContent, {
+			className: "relative p-0 md:pr-48",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "p-6",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Calendar, {
+					mode: "single",
+					selected: date,
+					onSelect: setDate,
+					defaultMonth: date,
+					disabled: bookedDates,
+					showOutsideDays: false,
+					modifiers: { booked: bookedDates },
+					modifiersClassNames: { booked: "[&>button]:line-through opacity-100" },
+					className: "bg-transparent -ml-1.5 p-0 [--cell-size:--spacing(10)] md:[--cell-size:--spacing(12)]",
+					formatters: { formatWeekdayName: (date) => {
+						return date.toLocaleString("en-US", { weekday: "short" });
+					} }
+				})
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "no-scrollbar @min-7xl:w-40 inset-y-0 right-0 flex max-h-72 scroll-pb-6 flex-col gap-4 overflow-y-auto border-t p-6 md:absolute md:max-h-none md:border-t-0 md:border-l",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+					className: "grid gap-2",
+					children: timeSlots.map((time) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+						variant: selectedTime === time ? "default" : "outline",
+						onClick: () => setSelectedTime(time),
+						className: "w-auto shadow-none",
+						children: time
+					}, time))
+				})
+			})]
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardFooter, {
+			className: "flex flex-col gap-4 border-t px-6 !py-5 md:flex-row",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "text-sm",
+				children: date && selectedTime ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+					"Your meeting is booked for",
+					" ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", {
+						className: "font-medium",
+						children: [
+							" ",
+							date?.toLocaleDateString("en-US", {
+								weekday: "long",
+								day: "numeric",
+								month: "long"
+							}),
+							" "
+						]
+					}),
+					"at ",
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+						className: "font-medium",
+						children: selectedTime
+					}),
+					"."
+				] }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: "Select a date and time for your meeting." })
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+				disabled: !date || !selectedTime,
+				className: "w-full md:ml-auto md:w-auto",
+				variant: "outline",
+				children: "Continue"
+			})]
+		})]
+	});
+}
+function Profile() {
+	const ProfileCardDemo = () => {
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(GlassmorphismProfileCard, {
+			avatarUrl: "https://github.com/mrozio13pl.png",
+			name: "mraza",
+			title: "Web Developer",
+			bio: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+				"Bored, ",
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", {
+					className: "line-through",
+					children: "passionate"
+				}),
+				" web developer and a real Arch user."
+			] }),
+			socialLinks: [{
+				id: "github",
+				icon: Icons,
+				label: "GitHub",
+				href: "https://github.com/mrozio13pl"
+			}, {
+				id: "linkedin",
+				icon: Link,
+				label: "Website",
+				href: "https://mraza.pages.dev/"
+			}],
+			actionButton: {
+				text: "Contact Me",
+				href: "#"
+			}
+		});
+	};
+	const GlassmorphismProfileCard = ({ avatarUrl, name, title, bio, socialLinks = [], actionButton }) => {
+		const [hoveredItem, setHoveredItem] = (0, import_react.useState)(null);
+		return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "relative w-full",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "relative flex flex-col items-center p-6 rounded-xl border bg-card",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "w-24 h-24 mb-4 rounded-full p-1 border-2",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("img", {
+							src: avatarUrl,
+							alt: `${name}'s Avatar`,
+							className: "w-full h-full rounded-full object-cover",
+							onError: (e) => {
+								const target = e.target;
+								target.onerror = null;
+								target.src = `https://placehold.co/96x96/6366f1/white?text=${name.charAt(0)}`;
+							}
+						})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", {
+						className: "text-2xl font-bold font-serif text-card-foreground",
+						children: name
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "mt-1 text-sm font-medium text-primary",
+						children: title
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", {
+						className: "mt-4 text-center text-sm leading-relaxed text-muted-foreground",
+						children: bio
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Separator$1, { className: "w-1/2! h-px my-4 rounded-full bg-border" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "flex items-center justify-center gap-3",
+						children: socialLinks.map((item) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(SocialButton, {
+							item,
+							setHoveredItem,
+							hoveredItem
+						}, item.id))
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ActionButton, { action: actionButton })
+				]
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute inset-0 rounded-3xl -z-10 transition-all duration-500 ease-out" })]
+		});
+	};
+	const SocialButton = ({ item, setHoveredItem, hoveredItem }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "relative",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("a", {
+			href: item.href,
+			onClick: (e) => e.preventDefault(),
+			className: "relative flex items-center justify-center w-12 h-12 rounded-full transition-all duration-300 ease-out group overflow-hidden bg-secondary/50 hover:bg-secondary",
+			onMouseEnter: () => setHoveredItem(item.id),
+			onMouseLeave: () => setHoveredItem(null),
+			"aria-label": item.label,
+			children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+				className: "relative z-10 flex items-center justify-center",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(item.icon, {
+					size: 20,
+					className: "transition-all duration-200 ease-out text-secondary-foreground/70 group-hover:text-secondary-foreground"
+				})
+			})
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tooltip, {
+			item,
+			hoveredItem
+		})]
+	});
+	const ActionButton = ({ action }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("a", {
+		href: action.href,
+		onClick: (e) => e.preventDefault(),
+		className: "flex items-center gap-2 px-6 py-3 mt-4 rounded-full font-semibold text-base backdrop-blur-sm transition-all duration-300 ease-out hover:scale-[1.03] active:scale-95 group bg-primary text-primary-foreground",
+		style: { boxShadow: "0 4px 20px rgba(0,0,0,0.15)" },
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: action.text }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ArrowUpRight, {
+			size: 16,
+			className: "transition-transform duration-300 ease-out group-hover:rotate-45"
+		})]
+	});
+	const Tooltip = ({ item, hoveredItem }) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		role: "tooltip",
+		className: `absolute -top-12 left-1/2 -translate-x-1/2 z-50 px-3 py-1.5 rounded-lg backdrop-blur-md border text-xs font-medium whitespace-nowrap transition-all duration-300 ease-out pointer-events-none bg-popover text-popover-foreground border-border ${hoveredItem === item.id ? "opacity-100 translate-y-0" : "opacity-0 translate-y-2"}`,
+		style: { boxShadow: "0 4px 20px rgba(0,0,0,0.1)" },
+		children: [item.label, /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "absolute -bottom-1 left-1/2 -translate-x-1/2 w-2 h-2 rotate-45 bg-popover border-b border-r border-border" })]
+	});
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+		className: "font-sans bg-background w-full",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ProfileCardDemo, {})
+	});
+}
+function AnimatedHatchedPatternAreaChart() {
+	const chartData = [
+		{
+			month: "January",
+			desktop: 342,
+			mobile: 245
+		},
+		{
+			month: "February",
+			desktop: 876,
+			mobile: 654
+		},
+		{
+			month: "March",
+			desktop: 512,
+			mobile: 387
+		},
+		{
+			month: "April",
+			desktop: 629,
+			mobile: 521
+		},
+		{
+			month: "May",
+			desktop: 458,
+			mobile: 412
+		},
+		{
+			month: "June",
+			desktop: 781,
+			mobile: 598
+		},
+		{
+			month: "July",
+			desktop: 394,
+			mobile: 312
+		},
+		{
+			month: "August",
+			desktop: 925,
+			mobile: 743
+		},
+		{
+			month: "September",
+			desktop: 647,
+			mobile: 489
+		},
+		{
+			month: "October",
+			desktop: 532,
+			mobile: 476
+		},
+		{
+			month: "November",
+			desktop: 803,
+			mobile: 687
+		},
+		{
+			month: "December",
+			desktop: 271,
+			mobile: 198
+		}
+	];
+	const chartConfig = {
+		desktop: {
+			label: "Desktop",
+			color: "var(--chart-1)"
+		},
+		mobile: {
+			label: "Mobile",
+			color: "var(--chart-2)"
+		}
+	};
+	const [activeProperty, setActiveProperty] = (0, import_react.useState)(null);
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Card, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardHeader, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardTitle, { children: ["Hatched Area Chart", /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Badge, {
+		variant: "outline",
+		className: "gap-1 text-green-500 bg-green-500/10 border-none ml-2",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(TrendingUp, { className: "h-4 w-4" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { children: "5.2%" })]
+	})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "Showing total visitors for the last 6 months" })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartContainer$1, {
+		config: chartConfig,
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AreaChart, {
+			accessibilityLayer: true,
+			data: chartData,
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CartesianGrid, {
+					vertical: false,
+					strokeDasharray: "3 3"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(XAxis, {
+					dataKey: "month",
+					tickLine: false,
+					axisLine: false,
+					tickMargin: 8,
+					tickFormatter: (value) => value.slice(0, 3)
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltip$1, {
+					cursor: false,
+					content: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartTooltipContent$1, {})
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("defs", { children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(HatchedBackgroundPattern, { config: chartConfig }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
+						id: "hatched-background-pattern-grad-desktop",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+							offset: "5%",
+							stopColor: "var(--color-desktop)",
+							stopOpacity: .4
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+							offset: "95%",
+							stopColor: "var(--color-desktop)",
+							stopOpacity: 0
+						})]
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("linearGradient", {
+						id: "hatched-background-pattern-grad-mobile",
+						x1: "0",
+						y1: "0",
+						x2: "0",
+						y2: "1",
+						children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+							offset: "5%",
+							stopColor: "var(--color-mobile)",
+							stopOpacity: .4
+						}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)("stop", {
+							offset: "95%",
+							stopColor: "var(--color-mobile)",
+							stopOpacity: 0
+						})]
+					})
+				] }),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Area, {
+					onMouseEnter: () => setActiveProperty("mobile"),
+					onMouseLeave: () => setActiveProperty(null),
+					dataKey: "mobile",
+					type: "natural",
+					fill: activeProperty === "mobile" ? "url(#hatched-background-pattern-mobile)" : "url(#hatched-background-pattern-grad-mobile)",
+					fillOpacity: .4,
+					stroke: "var(--color-mobile)",
+					stackId: "a",
+					strokeWidth: .8
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Area, {
+					onMouseEnter: () => setActiveProperty("desktop"),
+					onMouseLeave: () => setActiveProperty(null),
+					dataKey: "desktop",
+					type: "natural",
+					fill: activeProperty === "desktop" ? "url(#hatched-background-pattern-desktop)" : "url(#hatched-background-pattern-grad-desktop)",
+					fillOpacity: .4,
+					stroke: "var(--color-desktop)",
+					stackId: "a",
+					strokeWidth: .8
+				})
+			]
+		})
+	}) })] });
+}
+var HatchedBackgroundPattern = ({ config }) => {
+	const items = Object.fromEntries(Object.entries(config).map(([key, value]) => [key, value.color]));
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_jsx_runtime.Fragment, { children: Object.entries(items).map(([key, value]) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("pattern", {
+		id: `hatched-background-pattern-${key}`,
+		x: "0",
+		y: "0",
+		width: "6.81",
+		height: "6.81",
+		patternUnits: "userSpaceOnUse",
+		patternTransform: "rotate(-45)",
+		overflow: "visible",
+		children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("g", {
+			overflow: "visible",
+			className: "will-change-transform",
+			children: [
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("animateTransform", {
+					attributeName: "transform",
+					type: "translate",
+					from: "0 0",
+					to: "6 0",
+					dur: "1s",
+					repeatCount: "indefinite"
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+					width: "10",
+					height: "10",
+					opacity: .05,
+					fill: value
+				}),
+				/* @__PURE__ */ (0, import_jsx_runtime.jsx)("rect", {
+					width: "1",
+					height: "10",
+					fill: value
+				})
+			]
+		})
+	}, key)) });
+};
+function SimpleForm() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Card, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardContent, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FieldSet, { children: [
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLegend, { children: "Address Information" }),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldDescription, { children: "We need your address to deliver your order." }),
+		/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(FieldGroup, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+			htmlFor: "street",
+			children: "Street Address"
+		}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+			id: "street",
+			type: "text",
+			placeholder: "123 Main St"
+		})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+			className: "grid grid-cols-2 gap-4",
+			children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+				htmlFor: "city",
+				children: "City"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+				id: "city",
+				type: "text",
+				placeholder: "New York"
+			})] }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Field, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(FieldLabel, {
+				htmlFor: "zip",
+				children: "Postal Code"
+			}), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Input, {
+				id: "zip",
+				type: "text",
+				placeholder: "90502"
+			})] })]
+		})] })
+	] }) }) });
+}
+function Downloading() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Item, {
+		variant: "outline",
+		className: "rounded-xl bg-card",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemMedia, {
+				variant: "icon",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Spinner, {})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ItemContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemTitle, { children: "Downloading..." }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemDescription, { children: "731 MB / 1000 MB" })] }),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemActions, {
+				className: "hidden sm:flex",
+				children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, {
+					variant: "outline",
+					size: "sm",
+					children: "Cancel"
+				})
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemFooter, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Progress$1, { value: 73 }) })
+		]
+	});
+}
+function AnimatedCard3Demo() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(AnimatedCard, {
+		className: "bg-card shadow-none",
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardVisual, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Visual3, {}) }), /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(CardBody, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardTitle, { children: "Just find the right caption" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CardDescription, { children: "This card will tell everything you want" })] })]
+	});
+}
+function AuthenticateItem({ className, ...props }) {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(Item, {
+		variant: "outline",
+		className: cn("bg-card", className),
+		...props,
+		children: [/* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ItemContent, { children: [/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemTitle, { children: "Two-factor authentication" }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemDescription, { children: "Verify via email or phone number." })] }), /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ItemActions, { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Button, { children: "Sign up" }) })]
+	});
+}
+function ComponentsPage() {
+	return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+		className: "grid grid-cols-1 @md:grid-cols-2 @6xl:grid-cols-3 gap-4 mx-2",
+		children: [
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-4 w-full",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(ShoppingCartOne, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedCard3Demo, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(SimpleForm, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Downloading, {})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-4 w-full @md:row-span-2 @6xl:row-span-1",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Calendar20, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AnimatedHatchedPatternAreaChart, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthenticateItem, { className: "@6xl:flex hidden" }),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "@6xl:hidden",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartBarActive, {})
+					})
+				]
+			}),
+			/* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", {
+				className: "flex flex-col gap-4 w-full",
+				children: [
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)(Profile, {}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "@6xl:hidden",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(AuthenticateItem, {})
+					}),
+					/* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", {
+						className: "@6xl:block hidden",
+						children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ChartBarActive, {})
+					})
+				]
+			})
+		]
+	});
+}
+//#endregion
+export { ComponentsPage };