feat: Charts

sites/docs/package.json

@@ -31,6 +31,7 @@
 		"@sveltejs/kit": "^2.5.2",
 		"@sveltejs/vite-plugin-svelte": "^3.0.2",
 		"@types/d3-scale": "^4.0.8",
+		"@types/d3-shape": "^3.1.6",
 		"@types/hast": "^3.0.4",
 		"@types/lodash.template": "^4.5.3",
 		"@types/mdast": "^4.0.3",
@@ -64,15 +65,18 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.2",
+		"@layerstack/utils": "^0.0.4",
 		"@unovis/svelte": "1.3.6-beta.1",
 		"@unovis/ts": "1.3.6-beta.1",
 		"bits-ui": "0.21.4",
 		"clsx": "^2.1.0",
 		"cmdk-sv": "^0.0.15",
 		"d3-scale": "^4.0.2",
+		"d3-shape": "^3.2.0",
 		"embla-carousel-autoplay": "8.0.0-rc19",
 		"embla-carousel-svelte": "8.0.0-rc19",
 		"formsnap": "^0.5.1",
+		"layerchart": "^0.52.1",
 		"lucide-svelte": "^0.363.0",
 		"mode-watcher": "^0.2.2",
 		"nanoid": "^5.0.6",

sites/docs/src/lib/components/colors/color-card.svelte

@@ -18,7 +18,7 @@
 	}
 </script>
 
-<div class="mb-5 flex flex-col items-center gap-2">
+<div class="mb-5 flex flex-col gap-2">
 	<div class="font-bold">Choose color format to copy:</div>
 	<RadioGroup.Root bind:value={selectedFormat} class="flex flex-row gap-5">
 		<div class="flex cursor-pointer items-center space-x-2">

sites/docs/src/lib/components/docs/announcement.svelte

@@ -1,23 +1,12 @@
 <script lang="ts">
-	import Blocks from "lucide-svelte/icons/blocks";
-	import { Icons } from "./icons/index.js";
+	import PieChart from "lucide-svelte/icons/pie-chart";
+	import ArrowRightIcon from "lucide-svelte/icons/arrow-right";
 	import { Separator } from "$lib/registry/new-york/ui/separator/index.js";
-	import { cn } from "$lib/utils.js";
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
 </script>
 
-<a
-	href="/docs/changelog"
-	class={cn(
-		"bg-muted inline-flex items-center rounded-lg px-3 py-1 text-sm font-medium",
-		className
-	)}
-	{...$$restProps}
->
-	<Blocks class="size-4" />
+<a href="/docs/changelog" class="group inline-flex items-center px-0.5 text-sm font-medium">
+	<PieChart class="size-4" />
 	<Separator class="mx-2 h-4" orientation="vertical" />
-	<span>Introducing Lift Mode</span>
-	<Icons.arrowRight class="ml-1 size-4" />
+	<span class="underline-offset-4 group-hover:underline"> npx shadcn-svelte init </span>
+	<ArrowRightIcon class="ml-1 size-4" />
 </a>

sites/docs/src/lib/components/docs/chart-display.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import ChartToolbar from "./chart-toolbar.svelte";
+	import { cn } from "$lib/utils.js";
+
+	export let name: string;
+	// TODO: Remove this
+	export let status:
+		| "Not Started"
+		| "In Progress"
+		| "Needs Parity"
+		| "Blocked (External)"
+		| "Blocked (Internal)"
+		| "Done" = "Not Started";
+	let className: string | undefined | null = undefined;
+	export { className as class };
+
+	//   const chart = await getBlock(name)
+</script>
+
+<div
+	class={cn(
+		"themes-wrapper group relative flex flex-col overflow-hidden rounded-xl border shadow transition-all duration-200 ease-in-out hover:z-30",
+		className
+	)}
+>
+	<span class="sr-only">{name}</span>
+	<ChartToolbar
+		{name}
+		{status}
+		class="bg-card text-card-foreground relative z-20 flex justify-end border-b px-3 py-2.5"
+	/>
+	<div class="relative z-10 [&>div]:rounded-none [&>div]:border-none [&>div]:shadow-none">
+		<slot></slot>
+	</div>
+</div>

sites/docs/src/lib/components/docs/chart-toolbar.svelte

@@ -0,0 +1,54 @@
+<script lang="ts">
+	import { Badge } from "$lib/registry/new-york/ui/badge/index.js";
+	import { Separator } from "$lib/registry/new-york/ui/separator/index.js";
+	import { cn } from "$lib/utils.js";
+
+	// TODO: Remove this
+	export let status:
+		| "Not Started"
+		| "In Progress"
+		| "Needs Parity"
+		| "Blocked (External)"
+		| "Blocked (Internal)"
+		| "Done" = "Not Started";
+	export let name: string;
+	let className: string | undefined | null = undefined;
+	export { className as class };
+</script>
+
+<div class={cn("flex items-center gap-2", className)}>
+	<div
+		class="text-muted-foreground flex items-center gap-1.5 pl-1 text-[13px] [&>svg]:h-[0.9rem] [&>svg]:w-[0.9rem]"
+	>
+		<!-- <ChartTitle chart={chart} /> -->
+		{name}
+	</div>
+	<div class="ml-auto flex items-center gap-2 [&>form]:flex">
+		<!-- <BlockCopyButton
+          name={chart.name}
+          code={chart.code}
+          class="[&_svg]-h-3 h-6 w-6 rounded-[6px] bg-transparent text-foreground shadow-none hover:bg-muted dark:text-foreground [&_svg]:w-3"
+        /> -->
+		<Separator orientation="vertical" class="mx-0 hidden h-4 md:flex" />
+		<!-- <ChartCodeViewer chart={chart}>{children}</ChartCodeViewer> -->
+		<Badge
+			variant="outline"
+			class={cn({
+				"border-fuchsia-400 bg-fuchsia-400/20 text-fuchsia-700 hover:bg-fuchsia-400/30 dark:bg-fuchsia-400/10 dark:text-fuchsia-300 dark:hover:bg-fuchsia-400/15":
+					status === "Not Started",
+				"border-sky-400 bg-sky-400/20 text-sky-700 hover:bg-sky-400/30 dark:bg-sky-400/10 dark:text-sky-300 dark:hover:bg-sky-400/15":
+					status === "In Progress",
+				"border-amber-400 bg-amber-400/20 text-amber-700 hover:bg-amber-400/30 dark:bg-amber-400/10 dark:text-amber-300 dark:hover:bg-amber-400/15":
+					status === "Needs Parity",
+				"border-rose-400 bg-rose-400/20 text-rose-700 hover:bg-rose-400/30 dark:bg-rose-400/10 dark:text-rose-300 dark:hover:bg-rose-400/15":
+					status === "Blocked (External)",
+				"border-pink-400 bg-pink-400/20 text-pink-700 hover:bg-pink-400/30 dark:bg-pink-400/10 dark:text-pink-300 dark:hover:bg-pink-400/15":
+					status === "Blocked (Internal)",
+				"border-lime-400 bg-lime-400/20 text-lime-700 hover:bg-lime-400/30 dark:bg-lime-400/10 dark:text-lime-300 dark:hover:bg-lime-400/15":
+					status === "Done",
+			})}
+		>
+			{status}
+		</Badge>
+	</div>
+</div>

sites/docs/src/lib/components/docs/charts-nav.svelte

@@ -0,0 +1,62 @@
+<script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
+	import { page } from "$app/stores";
+	import { ScrollArea, Scrollbar } from "$lib/registry/new-york/ui/scroll-area/index.js";
+	import { cn } from "$lib/utils.js";
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
+	export { className as class };
+
+	const links = [
+		{
+			name: "Area Chart",
+			href: "/charts#area-chart",
+		},
+		{
+			name: "Bar Chart",
+			href: "/charts#bar-chart",
+		},
+		{
+			name: "Line Chart",
+			href: "/charts#line-chart",
+		},
+		{
+			name: "Pie Chart",
+			href: "/charts#pie-chart",
+		},
+		{
+			name: "Radar Chart",
+			href: "/charts#radar-chart",
+		},
+		{
+			name: "Radial Chart",
+			href: "/charts#radial-chart",
+		},
+		{
+			name: "Tooltip",
+			href: "/charts#tooltip",
+		},
+	];
+</script>
+
+<ScrollArea class="max-w-[600px] lg:max-w-none">
+	<div class={cn("flex items-center", className)} {...$$restProps}>
+		{#each links as example, index}
+			<a
+				href={example.href}
+				class={cn(
+					"hover:text-primary flex h-7 shrink-0 items-center justify-center rounded-full px-4 text-center text-sm transition-colors",
+					$page.url.pathname.startsWith(example.href) ||
+						(index === 0 && $page.url.pathname === "/")
+						? "bg-muted text-primary font-medium"
+						: "text-muted-foreground"
+				)}
+			>
+				{example.name}
+			</a>
+		{/each}
+	</div>
+	<Scrollbar orientation="horizontal" class="invisible" />
+</ScrollArea>

sites/docs/src/lib/components/docs/index.ts

@@ -27,6 +27,8 @@ export { default as PMExecute } from "./pm-execute.svelte";
 export { default as PMAddComp } from "./pm-add-comp.svelte";
 export { default as PMCreate } from "./pm-create.svelte";
 export { default as PMInstall } from "./pm-install.svelte";
+export { default as ChartsNav } from "./charts-nav.svelte";
+export { default as ChartDisplay } from "./chart-display.svelte";
 
 export * from "./icons/index.js";
 export * from "./page-header/index.js";

sites/docs/src/lib/components/docs/nav/main-nav.svelte

@@ -12,6 +12,7 @@
 			{siteConfig.name}
 		</span>
 	</a>
+
 	<nav class="flex items-center gap-6 text-sm">
 		<a
 			href="/docs"
@@ -22,6 +23,7 @@
 		>
 			Docs
 		</a>
+
 		<a
 			href="/docs/components"
 			class={cn(
@@ -33,6 +35,27 @@
 		>
 			Components
 		</a>
+
+		<a
+			href="/blocks"
+			class={cn(
+				"hover:text-foreground/80 transition-colors",
+				$page.url.pathname.startsWith("/blocks") ? "text-foreground" : "text-foreground/60"
+			)}
+		>
+			Blocks
+		</a>
+
+		<a
+			href="/charts"
+			class={cn(
+				"hover:text-foreground/80 transition-colors",
+				$page.url.pathname.startsWith("/charts") ? "text-foreground" : "text-foreground/60"
+			)}
+		>
+			Charts
+		</a>
+
 		<a
 			href="/themes"
 			class={cn(
@@ -42,6 +65,7 @@
 		>
 			Themes
 		</a>
+
 		<a
 			href="/examples"
 			class={cn(
@@ -54,15 +78,6 @@
 			Examples
 		</a>
 
-		<a
-			href="/blocks"
-			class={cn(
-				"hover:text-foreground/80 transition-colors",
-				$page.url.pathname.startsWith("/blocks") ? "text-foreground" : "text-foreground/60"
-			)}
-		>
-			Blocks
-		</a>
 		<a
 			href="/colors"
 			class={cn(

sites/docs/src/lib/components/docs/page-header/page-header-actions.svelte

@@ -1,9 +1,13 @@
 <script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
-	let className: string | undefined | null = undefined;
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
-<div class={cn("flex w-full items-center justify-center space-x-4 py-4 md:pb-10", className)}>
-	<slot />
+<div class={cn("flex w-full items-center justify-start gap-2 py-2", className)} {...$$restProps}>
+	<slot></slot>
 </div>

sites/docs/src/lib/components/docs/page-header/page-header-description.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	export let balanced = true;
+	type $$Props = HTMLAttributes<HTMLParagraphElement>;
 
-	let className: string | undefined | null = undefined;
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
 <p
-	class={cn(
-		"text-muted-foreground max-w-[750px] text-center text-lg sm:text-xl",
-		balanced && "text-balance",
-		className
-	)}
+	class={cn("text-foreground max-w-2xl text-balance text-lg font-light", className)}
 	{...$$restProps}
 >
-	<slot />
+	<slot></slot>
 </p>

sites/docs/src/lib/components/docs/page-header/page-header-heading.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	let className: string | undefined | null = undefined;
+	type $$Props = HTMLAttributes<HTMLHeadingElement>;
+
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
 <h1
 	class={cn(
-		"text-center text-3xl font-bold leading-tight tracking-tighter md:text-6xl lg:leading-[1.1]",
+		"text-3xl font-bold leading-tight tracking-tighter md:text-4xl lg:leading-[1.1]",
 		className
 	)}
 	{...$$restProps}
 >
-	<slot />
+	<slot></slot>
 </h1>

sites/docs/src/lib/components/docs/page-header/page-header.svelte

@@ -1,16 +1,19 @@
 <script lang="ts">
+	import type { HTMLAttributes } from "svelte/elements";
 	import { cn } from "$lib/utils.js";
 
-	let className: string | undefined | null = undefined;
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props["class"] = undefined;
 	export { className as class };
 </script>
 
 <section
 	class={cn(
-		"mx-auto flex max-w-[980px] flex-col items-center gap-2 py-8 md:py-12 md:pb-8 lg:py-24 lg:pb-20",
+		"mx-auto flex flex-col items-start gap-2 px-4 py-8 md:py-12 md:pb-8 lg:py-12 lg:pb-10",
 		className
 	)}
 	{...$$restProps}
 >
-	<slot />
+	<slot></slot>
 </section>

sites/docs/src/lib/components/docs/theme-customizer/copy-code-button.svelte

@@ -15,7 +15,7 @@
 {#if activeTheme}
 	<Dialog.Root>
 		<Dialog.Trigger asChild let:builder>
-			<Button class="flex" builders={[builder]}>Copy Code</Button>
+			<Button size="sm" variant="ghost" class="flex" builders={[builder]}>Copy code</Button>
 		</Dialog.Trigger>
 		<Dialog.Content class="max-w-2xl outline-none">
 			<Dialog.Header>