@kayord/ui 0.18.5 → 0.19.2

package/dist/components/ui/calendar/calendar-months.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/calendar/calendar-months.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const CalendarMonths: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CalendarMonths = ReturnType<typeof CalendarMonths>;
 export default CalendarMonths;

package/dist/components/ui/calendar/calendar-next-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronRight from "@lucide/svelte/icons/chevron-right";
+	import ChevronRightIcon from "@lucide/svelte/icons/chevron-right";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -8,7 +8,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronRight class="size-4" />
+	<ChevronRightIcon class="size-4" />
 {/snippet}
 
 <CalendarPrimitive.NextButton

package/dist/components/ui/calendar/calendar-prev-button.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { Calendar as CalendarPrimitive } from "bits-ui";
-	import ChevronLeft from "@lucide/svelte/icons/chevron-left";
+	import ChevronLeftIcon from "@lucide/svelte/icons/chevron-left";
 	import { buttonVariants } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 
@@ -8,7 +8,7 @@
 </script>
 
 {#snippet Fallback()}
-	<ChevronLeft class="size-4" />
+	<ChevronLeftIcon class="size-4" />
 {/snippet}
 
 <CalendarPrimitive.PrevButton

package/dist/components/ui/calendar/calendar.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+	import { Calendar as CalendarPrimitive } from "bits-ui";
 	import * as Calendar from "./index.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

package/dist/components/ui/calendar/calendar.svelte.d.ts

@@ -1,5 +1,6 @@
-import { Calendar as CalendarPrimitive, type WithoutChildrenOrChild } from "bits-ui";
+import { Calendar as CalendarPrimitive } from "bits-ui";
 import * as Calendar from "./index.js";
-declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "placeholder" | "ref" | "value">;
+import { type WithoutChildrenOrChild } from "../../../utils.js";
+declare const Calendar: import("svelte").Component<WithoutChildrenOrChild<CalendarPrimitive.RootProps>, {}, "value" | "placeholder" | "ref">;
 type Calendar = ReturnType<typeof Calendar>;
 export default Calendar;

package/dist/components/ui/card/card-action.svelte

@@ -0,0 +1,20 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
+</script>
+
+<div
+	bind:this={ref}
+	data-slot="card-action"
+	class={cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className)}
+	{...restProps}
+>
+	{@render children?.()}
+</div>

package/dist/components/ui/card/card-action.svelte.d.ts

@@ -0,0 +1,5 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+declare const CardAction: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
+type CardAction = ReturnType<typeof CardAction>;
+export default CardAction;

package/dist/components/ui/card/card-content.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("p-6", className)} {...restProps}>
+<div bind:this={ref} data-slot="card-content" class={cn("px-6", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/card/card-content.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const CardContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CardContent = ReturnType<typeof CardContent>;
 export default CardContent;

package/dist/components/ui/card/card-description.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,6 @@
 	}: WithElementRef<HTMLAttributes<HTMLParagraphElement>> = $props();
 </script>
 
-<p bind:this={ref} class={cn("text-muted-foreground text-sm", className)} {...restProps}>
+<p bind:this={ref} data-slot="card-description" class={cn("text-muted-foreground text-sm", className)} {...restProps}>
 	{@render children?.()}
 </p>

package/dist/components/ui/card/card-description.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const CardDescription: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLParagraphElement>>, {}, "ref">;
 type CardDescription = ReturnType<typeof CardDescription>;
 export default CardDescription;

package/dist/components/ui/card/card-footer.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex items-center p-6 pt-0", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-footer"
+	class={cn("flex items-center px-6 [.border-t]:pt-6", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/card/card-footer.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const CardFooter: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CardFooter = ReturnType<typeof CardFooter>;

package/dist/components/ui/card/card-header.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
+	import { cn, type WithElementRef } from "../../../utils.js";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,14 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("flex flex-col space-y-1.5 p-6 pb-0", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card-header"
+	class={cn(
+		"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6",
+		className
+	)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/card/card-header.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import { type WithElementRef } from "../../../utils.js";
 import type { HTMLAttributes } from "svelte/elements";
 declare const CardHeader: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CardHeader = ReturnType<typeof CardHeader>;

package/dist/components/ui/card/card-title.svelte

@@ -1,25 +1,15 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
-		level = 3,
 		children,
 		...restProps
-	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-		level?: 1 | 2 | 3 | 4 | 5 | 6;
-	} = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div
-	role="heading"
-	aria-level={level}
-	bind:this={ref}
-	class={cn("text-2xl leading-none font-semibold tracking-tight", className)}
-	{...restProps}
->
+<div bind:this={ref} data-slot="card-title" class={cn("leading-none font-semibold", className)} {...restProps}>
 	{@render children?.()}
 </div>

package/dist/components/ui/card/card-title.svelte.d.ts

@@ -1,8 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
-type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLDivElement>> & {
-    level?: 1 | 2 | 3 | 4 | 5 | 6;
-};
-declare const CardTitle: import("svelte").Component<$$ComponentProps, {}, "ref">;
+import { type WithElementRef } from "../../../utils.js";
+declare const CardTitle: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CardTitle = ReturnType<typeof CardTitle>;
 export default CardTitle;

package/dist/components/ui/card/card.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -11,6 +10,11 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
-<div bind:this={ref} class={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)} {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="card"
+	class={cn("bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm", className)}
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/card/card.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const Card: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type Card = ReturnType<typeof Card>;
 export default Card;

package/dist/components/ui/card/index.d.ts

@@ -4,4 +4,5 @@ import Description from "./card-description.svelte";
 import Footer from "./card-footer.svelte";
 import Header from "./card-header.svelte";
 import Title from "./card-title.svelte";
-export { Root, Content, Description, Footer, Header, Title, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, };
+import Action from "./card-action.svelte";
+export { Root, Content, Description, Footer, Header, Title, Action, Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction, };

package/dist/components/ui/card/index.js

@@ -4,6 +4,7 @@ import Description from "./card-description.svelte";
 import Footer from "./card-footer.svelte";
 import Header from "./card-header.svelte";
 import Title from "./card-title.svelte";
-export { Root, Content, Description, Footer, Header, Title, 
+import Action from "./card-action.svelte";
+export { Root, Content, Description, Footer, Header, Title, Action, 
 //
-Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, };
+Root as Card, Content as CardContent, Description as CardDescription, Footer as CardFooter, Header as CardHeader, Title as CardTitle, Action as CardAction, };

package/dist/components/ui/carousel/carousel-content.svelte

@@ -1,9 +1,8 @@
 <script lang="ts">
 	import emblaCarouselSvelte from "embla-carousel-svelte";
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { getEmblaContext } from "./context.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,8 +14,8 @@
 	const emblaCtx = getEmblaContext("<Carousel.Content/>");
 </script>
 
-<!-- svelte-ignore event_directive_deprecated -->
 <div
+	data-slot="carousel-content"
 	class="overflow-hidden"
 	use:emblaCarouselSvelte={{
 		options: {
@@ -27,7 +26,7 @@
 		},
 		plugins: emblaCtx.plugins,
 	}}
-	on:emblaInit={emblaCtx.onInit}
+	onemblaInit={emblaCtx.onInit}
 >
 	<div
 		bind:this={ref}

package/dist/components/ui/carousel/carousel-content.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const CarouselContent: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CarouselContent = ReturnType<typeof CarouselContent>;
 export default CarouselContent;

package/dist/components/ui/carousel/carousel-item.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-	import type { WithElementRef } from "bits-ui";
 	import type { HTMLAttributes } from "svelte/elements";
 	import { getEmblaContext } from "./context.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -16,6 +15,7 @@
 
 <div
 	bind:this={ref}
+	data-slot="carousel-item"
 	role="group"
 	aria-roledescription="slide"
 	class={cn("min-w-0 shrink-0 grow-0 basis-full", emblaCtx.orientation === "horizontal" ? "pl-4" : "pt-4", className)}

package/dist/components/ui/carousel/carousel-item.svelte.d.ts

@@ -1,5 +1,5 @@
-import type { WithElementRef } from "bits-ui";
 import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../../../utils.js";
 declare const CarouselItem: import("svelte").Component<WithElementRef<HTMLAttributes<HTMLDivElement>>, {}, "ref">;
 type CarouselItem = ReturnType<typeof CarouselItem>;
 export default CarouselItem;

package/dist/components/ui/carousel/carousel-next.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ArrowRight from "@lucide/svelte/icons/arrow-right";
+	import ArrowRightIcon from "@lucide/svelte/icons/arrow-right";
 	import type { WithoutChildren } from "bits-ui";
 	import { getEmblaContext } from "./context.js";
 	import { cn } from "../../../utils.js";
@@ -17,10 +17,11 @@
 </script>
 
 <Button
+	data-slot="carousel-next"
 	{variant}
 	{size}
 	class={cn(
-		"absolute size-8 touch-manipulation rounded-full",
+		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
 			? "top-1/2 -right-12 -translate-y-1/2"
 			: "-bottom-12 left-1/2 -translate-x-1/2 rotate-90",
@@ -32,6 +33,6 @@
 	bind:ref
 	{...restProps}
 >
-	<ArrowRight class="size-4" />
+	<ArrowRightIcon class="size-4" />
 	<span class="sr-only">Next slide</span>
 </Button>

package/dist/components/ui/carousel/carousel-previous.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import ArrowLeft from "@lucide/svelte/icons/arrow-left";
+	import ArrowLeftIcon from "@lucide/svelte/icons/arrow-left";
 	import type { WithoutChildren } from "bits-ui";
 	import { getEmblaContext } from "./context.js";
 	import { cn } from "../../../utils.js";
@@ -17,10 +17,11 @@
 </script>
 
 <Button
+	data-slot="carousel-previous"
 	{variant}
 	{size}
 	class={cn(
-		"absolute size-8 touch-manipulation rounded-full",
+		"absolute size-8 rounded-full",
 		emblaCtx.orientation === "horizontal"
 			? "top-1/2 -left-12 -translate-y-1/2"
 			: "-top-12 left-1/2 -translate-x-1/2 rotate-90",
@@ -32,6 +33,6 @@
 	{...restProps}
 	bind:ref
 >
-	<ArrowLeft class="size-4" />
+	<ArrowLeftIcon class="size-4" />
 	<span class="sr-only">Previous slide</span>
 </Button>

package/dist/components/ui/carousel/carousel.svelte

@@ -1,8 +1,9 @@
 <script lang="ts">
 	import { type CarouselAPI, type CarouselProps, type EmblaContext, setEmblaContext } from "./context.js";
-	import { cn } from "../../../utils.js";
+	import { cn, type WithElementRef } from "../../../utils.js";
 
 	let {
+		ref = $bindable(null),
 		opts = {},
 		plugins = [],
 		setApi = () => {},
@@ -10,7 +11,7 @@
 		class: className,
 		children,
 		...restProps
-	}: CarouselProps = $props();
+	}: WithElementRef<CarouselProps> = $props();
 
 	let carouselState = $state<EmblaContext>({
 		api: undefined,
@@ -82,6 +83,13 @@
 	});
 </script>
 
-<div class={cn("relative", className)} role="region" aria-roledescription="carousel" {...restProps}>
+<div
+	bind:this={ref}
+	data-slot="carousel"
+	class={cn("relative", className)}
+	role="region"
+	aria-roledescription="carousel"
+	{...restProps}
+>
 	{@render children?.()}
 </div>

package/dist/components/ui/carousel/carousel.svelte.d.ts

@@ -1,4 +1,5 @@
 import { type CarouselProps } from "./context.js";
-declare const Carousel: import("svelte").Component<CarouselProps, {}, "">;
+import { type WithElementRef } from "../../../utils.js";
+declare const Carousel: import("svelte").Component<WithElementRef<CarouselProps>, {}, "ref">;
 type Carousel = ReturnType<typeof Carousel>;
 export default Carousel;

package/dist/components/ui/carousel/context.d.ts

@@ -1,4 +1,4 @@
-import type { WithElementRef } from "bits-ui";
+import type { WithElementRef } from "../../../utils.js";
 import type { EmblaCarouselSvelteType } from "embla-carousel-svelte";
 import type emblaCarouselSvelte from "embla-carousel-svelte";
 import type { HTMLAttributes } from "svelte/elements";

package/dist/components/ui/chart/chart-container.svelte

@@ -0,0 +1,81 @@
+<script lang="ts">
+	import { cn, type WithElementRef } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import ChartStyle from "./chart-style.svelte";
+	import { setChartContext, type ChartConfig } from "./chart-utils.js";
+
+	const uid = $props.id();
+
+	let {
+		ref = $bindable(null),
+		id = uid,
+		class: className,
+		children,
+		config,
+		...restProps
+	}: WithElementRef<HTMLAttributes<HTMLElement>> & {
+		config: ChartConfig;
+	} = $props();
+
+	const chartId = `chart-${id || uid.replace(/:/g, "")}`;
+
+	setChartContext({
+		get config() {
+			return config;
+		},
+	});
+</script>
+
+<div
+	bind:this={ref}
+	data-chart={chartId}
+	data-slot="chart"
+	class={cn(
+		// "flex aspect-video justify-center text-xs [&_.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-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.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 [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+		"flex aspect-video justify-center overflow-visible text-xs",
+		// Overrides
+		//
+		// Stroke around dots/marks when hovering
+		"[&_.stroke-white]:stroke-transparent",
+		// override the default stroke color of lines
+		"[&_.lc-line]:stroke-border/50",
+
+		// by default, layerchart shows a line intersecting the point when hovering, this hides that
+		"[&_.lc-highlight-line]:stroke-0",
+
+		// by default, when you hover a point on a stacked series chart, it will drop the opacity
+		// of the other series, this overrides that
+		"[&_.lc-area-path]:opacity-100 [&_.lc-highlight-line]:opacity-100 [&_.lc-highlight-point]:opacity-100 [&_.lc-spline-path]:opacity-100 [&_.lc-text]:text-xs",
+
+		// We don't want the little tick lines between the axis labels and the chart, so we remove
+		// the stroke. The alternative is to manually disable `tickMarks` on the x/y axis of every
+		// chart.
+		"[&_.lc-axis-tick]:stroke-0",
+
+		// We don't want to display the rule on the x/y axis, as there is already going to be
+		// a grid line there and rule ends up overlapping the marks because it is rendered after
+		// the marks
+		"[&_.lc-rule-x-line:not(.lc-grid-x-rule)]:stroke-0 [&_.lc-rule-y-line:not(.lc-grid-y-rule)]:stroke-0",
+		"[&_.lc-grid-x-radial-line]:stroke-border [&_.lc-grid-x-radial-circle]:stroke-border",
+		"[&_.lc-grid-y-radial-line]:stroke-border [&_.lc-grid-y-radial-circle]:stroke-border",
+
+		// Legend adjustments
+		"[&_.lc-legend-swatch-button]:items-center [&_.lc-legend-swatch-button]:gap-1.5",
+		"[&_.lc-legend-swatch-group]:items-center [&_.lc-legend-swatch-group]:gap-4",
+		"[&_.lc-legend-swatch]:size-2.5 [&_.lc-legend-swatch]:rounded-[2px]",
+
+		// Labels
+		"[&_.lc-labels-text:not([fill])]:fill-foreground [&_text]:stroke-transparent",
+
+		// Tick labels on th x/y axes
+		"[&_.lc-axis-tick-label]:fill-muted-foreground [&_.lc-axis-tick-label]:font-normal",
+		"[&_.lc-tooltip-rects-g]:fill-transparent",
+		"[&_.lc-layout-svg-g]:fill-transparent",
+		"[&_.lc-root-container]:w-full",
+		className
+	)}
+	{...restProps}
+>
+	<ChartStyle id={chartId} {config} />
+	{@render children?.()}
+</div>

package/dist/components/ui/chart/chart-container.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type WithElementRef } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+import { type ChartConfig } from "./chart-utils.js";
+type $$ComponentProps = WithElementRef<HTMLAttributes<HTMLElement>> & {
+    config: ChartConfig;
+};
+declare const ChartContainer: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ChartContainer = ReturnType<typeof ChartContainer>;
+export default ChartContainer;

package/dist/components/ui/chart/chart-style.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+	import { THEMES, type ChartConfig } from "./chart-utils.js";
+
+	let { id, config }: { id: string; config: ChartConfig } = $props();
+
+	const colorConfig = $derived(
+		config ? Object.entries(config).filter(([, config]) => config.theme || config.color) : null
+	);
+
+	const styleOpen = ">elyts<".split("").reverse().join("");
+	const styleClose = ">elyts/<".split("").reverse().join("");
+</script>
+
+{#if colorConfig && colorConfig.length}
+	{@const themeContents = Object.entries(THEMES)
+		.map(
+			([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+	.map(([key, itemConfig]) => {
+		const color = itemConfig.theme?.[theme as keyof typeof itemConfig.theme] || itemConfig.color;
+		return color ? `  --color-${key}: ${color};` : null;
+	})
+	.join("\n")}
+}
+`
+		)
+		.join("\n")}
+
+	{#key id}
+		<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+		{@html `${styleOpen}
+		${themeContents}
+	${styleClose}`}
+	{/key}
+{/if}

package/dist/components/ui/chart/chart-style.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type ChartConfig } from "./chart-utils.js";
+type $$ComponentProps = {
+    id: string;
+    config: ChartConfig;
+};
+declare const ChartStyle: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChartStyle = ReturnType<typeof ChartStyle>;
+export default ChartStyle;