@kayord/ui 0.19.0 → 0.19.2

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;

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

@@ -0,0 +1,152 @@
+<script lang="ts">
+	import { cn, type WithElementRef, type WithoutChildren } from "../../../utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { getPayloadConfigFromPayload, useChart, type TooltipPayload } from "./chart-utils.js";
+	import { getTooltipContext, Tooltip as TooltipPrimitive } from "layerchart";
+	import type { Snippet } from "svelte";
+
+	// eslint-disable-next-line @typescript-eslint/no-explicit-any
+	function defaultFormatter(value: any, _payload: TooltipPayload[]) {
+		return `${value}`;
+	}
+
+	let {
+		ref = $bindable(null),
+		class: className,
+		hideLabel = false,
+		indicator = "dot",
+		hideIndicator = false,
+		labelKey,
+		label,
+		labelFormatter = defaultFormatter,
+		labelClassName,
+		formatter,
+		nameKey,
+		color,
+		...restProps
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+		hideLabel?: boolean;
+		label?: string;
+		indicator?: "line" | "dot" | "dashed";
+		nameKey?: string;
+		labelKey?: string;
+		hideIndicator?: boolean;
+		labelClassName?: string;
+		labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+		((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+		formatter?: Snippet<
+			[
+				{
+					value: unknown;
+					name: string;
+					item: TooltipPayload;
+					index: number;
+					payload: TooltipPayload[];
+				},
+			]
+		>;
+	} = $props();
+
+	const chart = useChart();
+	const tooltipCtx = getTooltipContext();
+
+	const formattedLabel = $derived.by(() => {
+		if (hideLabel || !tooltipCtx.payload?.length) return null;
+
+		const [item] = tooltipCtx.payload;
+		const key = labelKey || item?.label || item?.name || "value";
+
+		const itemConfig = getPayloadConfigFromPayload(chart.config, item, key);
+
+		const value =
+			!labelKey && typeof label === "string"
+				? chart.config[label as keyof typeof chart.config]?.label || label
+				: (itemConfig?.label ?? item.label);
+
+		if (!value) return null;
+		if (!labelFormatter) return value;
+		return labelFormatter(value, tooltipCtx.payload);
+	});
+
+	const nestLabel = $derived(tooltipCtx.payload.length === 1 && indicator !== "dot");
+</script>
+
+{#snippet TooltipLabel()}
+	{#if formattedLabel}
+		<div class={cn("font-medium", labelClassName)}>
+			{#if typeof formattedLabel === "function"}
+				{@render formattedLabel()}
+			{:else}
+				{formattedLabel}
+			{/if}
+		</div>
+	{/if}
+{/snippet}
+
+<TooltipPrimitive.Root variant="none">
+	<div
+		class={cn(
+			"border-border/50 bg-background grid min-w-[9rem] items-start gap-1.5 rounded-lg border px-2.5 py-1.5 text-xs shadow-xl",
+			className
+		)}
+		{...restProps}
+	>
+		{#if !nestLabel}
+			{@render TooltipLabel()}
+		{/if}
+		<div class="grid gap-1.5">
+			{#each tooltipCtx.payload as item, i (item.key + i)}
+				{@const key = `${nameKey || item.key || item.name || "value"}`}
+				{@const itemConfig = getPayloadConfigFromPayload(chart.config, item, key)}
+				{@const indicatorColor = color || item.payload?.color || item.color}
+				<div
+					class={cn(
+						"[&>svg]:text-muted-foreground flex w-full flex-wrap items-stretch gap-2 [&>svg]:size-2.5",
+						indicator === "dot" && "items-center"
+					)}
+				>
+					{#if formatter && item.value !== undefined && item.name}
+						{@render formatter({
+							value: item.value,
+							name: item.name,
+							item,
+							index: i,
+							payload: tooltipCtx.payload,
+						})}
+					{:else}
+						{#if itemConfig?.icon}
+							<itemConfig.icon />
+						{:else if !hideIndicator}
+							<div
+								style="--color-bg: {indicatorColor}; --color-border: {indicatorColor};"
+								class={cn("shrink-0 rounded-[2px] border-(--color-border) bg-(--color-bg)", {
+									"size-2.5": indicator === "dot",
+									"h-full w-1": indicator === "line",
+									"w-0 border-[1.5px] border-dashed bg-transparent": indicator === "dashed",
+									"my-0.5": nestLabel && indicator === "dashed",
+								})}
+							></div>
+						{/if}
+						<div
+							class={cn("flex flex-1 shrink-0 justify-between leading-none", nestLabel ? "items-end" : "items-center")}
+						>
+							<div class="grid gap-1.5">
+								{#if nestLabel}
+									{@render TooltipLabel()}
+								{/if}
+								<span class="text-muted-foreground">
+									{itemConfig?.label || item.name}
+								</span>
+							</div>
+							{#if item.value}
+								<span class="text-foreground font-mono font-medium tabular-nums">
+									{item.value.toLocaleString()}
+								</span>
+							{/if}
+						</div>
+					{/if}
+				</div>
+			{/each}
+		</div>
+	</div>
+</TooltipPrimitive.Root>

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

@@ -0,0 +1,27 @@
+import { type WithElementRef, type WithoutChildren } from "../../../utils.js";
+import type { HTMLAttributes } from "svelte/elements";
+import { type TooltipPayload } from "./chart-utils.js";
+import type { Snippet } from "svelte";
+type $$ComponentProps = WithoutChildren<WithElementRef<HTMLAttributes<HTMLDivElement>>> & {
+    hideLabel?: boolean;
+    label?: string;
+    indicator?: "line" | "dot" | "dashed";
+    nameKey?: string;
+    labelKey?: string;
+    hideIndicator?: boolean;
+    labelClassName?: string;
+    labelFormatter?: // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    ((value: any, payload: TooltipPayload[]) => string | number | Snippet) | null;
+    formatter?: Snippet<[
+        {
+            value: unknown;
+            name: string;
+            item: TooltipPayload;
+            index: number;
+            payload: TooltipPayload[];
+        }
+    ]>;
+};
+declare const ChartTooltip: import("svelte").Component<$$ComponentProps, {}, "ref">;
+type ChartTooltip = ReturnType<typeof ChartTooltip>;
+export default ChartTooltip;

package/dist/components/ui/chart/chart-utils.d.ts

@@ -0,0 +1,36 @@
+import type { Tooltip } from "layerchart";
+import { type Component, type ComponentProps, type Snippet } from "svelte";
+export declare const THEMES: {
+    readonly light: "";
+    readonly dark: ".dark";
+};
+export type ChartConfig = {
+    [k in string]: {
+        label?: string;
+        icon?: Component;
+    } & ({
+        color?: string;
+        theme?: never;
+    } | {
+        color?: never;
+        theme: Record<keyof typeof THEMES, string>;
+    });
+};
+export type ExtractSnippetParams<T> = T extends Snippet<[infer P]> ? P : never;
+export type TooltipPayload = ExtractSnippetParams<ComponentProps<typeof Tooltip.Root>["children"]>["payload"][number];
+export declare function getPayloadConfigFromPayload(config: ChartConfig, payload: TooltipPayload, key: string): ({
+    label?: string;
+    icon?: Component;
+} & ({
+    color?: string;
+    theme?: never;
+} | {
+    color?: never;
+    theme: Record<keyof typeof THEMES, string>;
+})) | undefined;
+type ChartContextValue = {
+    config: ChartConfig;
+};
+export declare function setChartContext(value: ChartContextValue): ChartContextValue;
+export declare function useChart(): ChartContextValue;
+export {};

package/dist/components/ui/chart/chart-utils.js

@@ -0,0 +1,33 @@
+import { getContext, setContext } from "svelte";
+export const THEMES = { light: "", dark: ".dark" };
+// Helper to extract item config from a payload.
+export function getPayloadConfigFromPayload(config, payload, key) {
+    if (typeof payload !== "object" || payload === null)
+        return undefined;
+    const payloadPayload = "payload" in payload && typeof payload.payload === "object" && payload.payload !== null
+        ? payload.payload
+        : undefined;
+    let configLabelKey = key;
+    if (payload.key === key) {
+        configLabelKey = payload.key;
+    }
+    else if (payload.name === key) {
+        configLabelKey = payload.name;
+    }
+    else 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];
+}
+const chartContextKey = Symbol("chart-context");
+export function setChartContext(value) {
+    return setContext(chartContextKey, value);
+}
+export function useChart() {
+    return getContext(chartContextKey);
+}

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

@@ -0,0 +1,4 @@
+import ChartContainer from "./chart-container.svelte";
+import ChartTooltip from "./chart-tooltip.svelte";
+export { getPayloadConfigFromPayload, type ChartConfig } from "./chart-utils.js";
+export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };

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

@@ -0,0 +1,4 @@
+import ChartContainer from "./chart-container.svelte";
+import ChartTooltip from "./chart-tooltip.svelte";
+export { getPayloadConfigFromPayload } from "./chart-utils.js";
+export { ChartContainer, ChartTooltip, ChartContainer as Container, ChartTooltip as Tooltip };

package/dist/components/ui/checkbox/checkbox.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import Check from "@lucide/svelte/icons/check";
-	import Minus from "@lucide/svelte/icons/minus";
-	import { cn } from "../../../utils.js";
+	import { Checkbox as CheckboxPrimitive } from "bits-ui";
+	import CheckIcon from "@lucide/svelte/icons/check";
+	import MinusIcon from "@lucide/svelte/icons/minus";
+	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -15,8 +15,9 @@
 
 <CheckboxPrimitive.Root
 	bind:ref
+	data-slot="checkbox"
 	class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
+		"border-input dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive peer flex size-4 shrink-0 items-center justify-center rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
 	bind:checked
@@ -24,11 +25,11 @@
 	{...restProps}
 >
 	{#snippet children({ checked, indeterminate })}
-		<div class="flex size-4 items-center justify-center text-current">
-			{#if indeterminate}
-				<Minus class="size-3.5" />
-			{:else}
-				<Check class={cn("size-3.5", !checked && "text-transparent")} />
+		<div data-slot="checkbox-indicator" class="text-current transition-none">
+			{#if checked}
+				<CheckIcon class="size-3.5" />
+			{:else if indeterminate}
+				<MinusIcon class="size-3.5" />
 			{/if}
 		</div>
 	{/snippet}

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

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+</script>
+
+<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />

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

@@ -0,0 +1,4 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const CollapsibleContent: import("svelte").Component<CollapsiblePrimitive.ContentProps, {}, "ref">;
+type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
+export default CollapsibleContent;

package/dist/components/ui/collapsible/collapsible-trigger.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+</script>
+
+<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />

package/dist/components/ui/collapsible/collapsible-trigger.svelte.d.ts

@@ -0,0 +1,4 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+declare const CollapsibleTrigger: import("svelte").Component<CollapsiblePrimitive.TriggerProps, {}, "ref">;
+type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
+export default CollapsibleTrigger;