negodesign 0.0.70 → 0.0.72

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import emblaCarouselSvelte from "embla-carousel-svelte";
 	import { cn, type WithElementRef } from "../../../utils.js";
 	import { getEmblaContext } from "./context.js";
+	import type { Action } from "svelte/action";
 	import type { HTMLAttributes } from "svelte/elements";
 
 	let {
@@ -12,32 +12,46 @@
 	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 
 	const emblaCtx = getEmblaContext("<Carousel.Content/>");
+
+	let containerEl = $state<HTMLDivElement | null>(null);
+
+	$effect(() => {
+		emblaCtx.setContainer(containerEl);
+	});
+
+	const carouselKeyboard = ((node: HTMLElement) => {
+		const handler = (event: KeyboardEvent) => emblaCtx.handleKeyDown(event);
+		node.addEventListener("keydown", handler);
+		return {
+			destroy() {
+				node.removeEventListener("keydown", handler);
+			},
+		};
+	}) satisfies Action;
 </script>
 
 <div
+	bind:this={ref}
 	data-slot="carousel-content"
 	class="overflow-hidden"
-	use:emblaCarouselSvelte={{
-		options: {
-			container: "[data-embla-container]",
-			slides: "[data-embla-slide]",
-			...emblaCtx.options,
-			axis: emblaCtx.orientation === "horizontal" ? "x" : "y",
-		},
-		plugins: emblaCtx.plugins,
-	}}
-	onemblaInit={emblaCtx.onInit}
+	{...restProps}
 >
+	<!-- svelte-ignore a11y_no_noninteractive_tabindex -->
 	<div
-		bind:this={ref}
+		bind:this={containerEl}
+		use:carouselKeyboard
+		role="region"
+		aria-roledescription="carousel"
+		aria-label="Carousel"
+		tabindex="0"
 		class={cn(
-			"flex",
-			emblaCtx.orientation === "horizontal" ? "-ms-4" : "-mt-4 flex-col",
+			emblaCtx.orientation === "horizontal"
+				? "flex flex-row overflow-x-auto snap-x snap-mandatory scroll-smooth no-scrollbar -ms-4"
+				: "flex flex-col overflow-y-auto snap-y snap-mandatory scroll-smooth no-scrollbar -mt-4",
 			className
 		)}
-		data-embla-container=""
-		{...restProps}
+		onscroll={emblaCtx.onScroll}
 	>
 		{@render children?.()}
 	</div>
-</div>
+</div>

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

@@ -19,11 +19,10 @@
 	role="group"
 	aria-roledescription="slide"
 	class={cn(
-		"min-w-0 shrink-0 grow-0 basis-full",
+		"w-min shrink-0 grow-0",
 		emblaCtx.orientation === "horizontal" ? "ps-4" : "pt-4",
-		className
+		className,
 	)}
-	data-embla-slide=""
 	{...restProps}
 >
 	{@render children?.()}

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

@@ -4,7 +4,7 @@
 	import { Button, type Props } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 	import { getEmblaContext } from "./context.js";
-	import type { WithoutChildren } from "bits-ui";
+	import type { WithoutChildren } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

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

@@ -4,7 +4,7 @@
 	import { Button, type Props } from "../button/index.js";
 	import { cn } from "../../../utils.js";
 	import { getEmblaContext } from "./context.js";
-	import type { WithoutChildren } from "bits-ui";
+	import type { WithoutChildren } from "../../../utils.js";
 
 	let {
 		ref = $bindable(null),

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

@@ -18,44 +18,122 @@
 		...restProps
 	}: WithElementRef<CarouselProps> = $props();
 
+	let isVertical = $derived(orientation === "vertical");
+	let available = $state(false);
+
 	// svelte-ignore state_referenced_locally
-	let carouselState = $state<EmblaContext>({
-		api: undefined,
-		scrollPrev,
-		scrollNext,
+	let ctx = $state<EmblaContext>({
 		orientation,
+		containerEl: undefined,
 		canScrollNext: false,
 		canScrollPrev: false,
-		handleKeyDown,
-		options: opts,
-		plugins,
-		onInit,
-		scrollSnaps: [],
 		selectedIndex: 0,
+		scrollSnaps: [],
+		scrollPrev,
+		scrollNext,
 		scrollTo,
+		onScroll,
+		handleKeyDown,
+		plugins,
+		setContainer,
 	});
 
-	setEmblaContext(carouselState);
+	setEmblaContext(ctx);
 
-	function scrollPrev() {
-		carouselState.api?.scrollPrev();
+	function setContainer(el: HTMLDivElement | null | undefined) {
+		ctx.containerEl = el ?? undefined;
+		available = el != null;
+		updateScrollSnaps();
+		onScroll();
 	}
 
-	function scrollNext() {
-		carouselState.api?.scrollNext();
+	function getSlides(): HTMLElement[] {
+		const container = ctx.containerEl;
+		if (!container) return [];
+		return Array.from(
+			container.querySelectorAll<HTMLElement>("[data-slot='carousel-item']")
+		);
+	}
+
+	function updateScrollSnaps() {
+		const container = ctx.containerEl;
+		if (!container) {
+			ctx.scrollSnaps = [];
+			return;
+		}
+		const scrollPos = isVertical ? container.scrollTop : container.scrollLeft;
+		const origin = isVertical
+			? container.getBoundingClientRect().top
+			: container.getBoundingClientRect().left;
+		ctx.scrollSnaps = getSlides().map((slide) => {
+			const slidePos = isVertical
+				? slide.getBoundingClientRect().top
+				: slide.getBoundingClientRect().left;
+			return slidePos - origin + scrollPos;
+		});
+	}
+
+	function onScroll() {
+		const container = ctx.containerEl;
+		if (!container) return;
+		const pos = isVertical ? container.scrollTop : container.scrollLeft;
+		const size = isVertical ? container.clientHeight : container.clientWidth;
+		const scrollSize = isVertical
+			? container.scrollHeight
+			: container.scrollWidth;
+		const max = Math.max(0, scrollSize - size);
+		ctx.canScrollPrev = pos > 1;
+		ctx.canScrollNext = pos < max - 1;
+		const snaps = ctx.scrollSnaps;
+		let closest = 0;
+		let minDistance = Infinity;
+		for (let i = 0; i < snaps.length; i++) {
+			const distance = Math.abs(snaps[i] - pos);
+			if (distance < minDistance) {
+				minDistance = distance;
+				closest = i;
+			}
+		}
+		ctx.selectedIndex = minDistance === Infinity ? 0 : closest;
 	}
 
 	function scrollTo(index: number, jump?: boolean) {
-		carouselState.api?.scrollTo(index, jump);
+		const container = ctx.containerEl;
+		const snaps = ctx.scrollSnaps;
+		if (!container || snaps.length === 0) return;
+		const target = Math.min(Math.max(index, 0), snaps.length - 1);
+		const snap = snaps[target];
+		container.scrollTo({
+			left: isVertical ? 0 : snap,
+			top: isVertical ? snap : 0,
+			behavior: jump ? "instant" : "smooth",
+		});
+	}
+
+	function scrollPrev() {
+		scrollTo(ctx.selectedIndex - 1);
 	}
 
-	function onSelect() {
-		if (!carouselState.api) return;
-		carouselState.selectedIndex = carouselState.api.selectedScrollSnap();
-		carouselState.canScrollNext = carouselState.api.canScrollNext();
-		carouselState.canScrollPrev = carouselState.api.canScrollPrev();
+	function scrollNext() {
+		scrollTo(ctx.selectedIndex + 1);
+	}
+
+	function buildApi(): CarouselAPI {
+		return {
+			scrollPrev,
+			scrollNext,
+			canScrollPrev: ctx.canScrollPrev,
+			canScrollNext: ctx.canScrollNext,
+			selectedIndex: ctx.selectedIndex,
+			scrollTo,
+			scrollSnapList: () => ctx.scrollSnaps.slice(),
+		};
 	}
 
+	$effect(() => {
+		setApi(buildApi());
+	});
+
 	function handleKeyDown(e: KeyboardEvent) {
 		if (e.key === "ArrowLeft") {
 			e.preventDefault();
@@ -66,18 +144,65 @@
 		}
 	}
 
-	function onInit(event: CustomEvent<CarouselAPI>) {
-		carouselState.api = event.detail;
-		setApi(carouselState.api);
+	$effect(() => {
+		if (!available) return;
+		const container = ctx.containerEl;
+		if (!container) return;
+		const plugin = plugins[0];
+		if (!plugin?.delay) return;
 
-		carouselState.scrollSnaps = carouselState.api.scrollSnapList();
-		carouselState.api.on("select", onSelect);
-		onSelect();
-	}
+		let stopped = false;
+		let timer: number | undefined;
+		let lastIndex = ctx.selectedIndex;
+
+		const clearTimer = () => {
+			if (timer !== undefined) window.clearTimeout(timer);
+		};
+
+		const cleanup = () => {
+			stopped = true;
+			clearTimer();
+		};
+
+		const schedule = () => {
+			if (stopped) return;
+			timer = window.setTimeout(() => {
+				if (stopped) return;
+				if (ctx.canScrollNext) {
+					scrollNext();
+				} else if (plugin.loop) {
+					scrollTo(0, true);
+				}
+				lastIndex = ctx.selectedIndex;
+				schedule();
+			}, plugin.delay);
+		};
+
+		const onPointer = () => {
+			if (stopped) return;
+			if (plugin.stopOnInteraction) cleanup();
+		};
+
+		const onScrollReset = () => {
+			if (stopped || plugin.stopOnInteraction) return;
+			if (ctx.selectedIndex !== lastIndex) {
+				clearTimer();
+				lastIndex = ctx.selectedIndex;
+				schedule();
+			}
+		};
+
+		container.addEventListener("pointerdown", onPointer);
+		container.addEventListener("touchstart", onPointer);
+		container.addEventListener("scroll", onScrollReset, { passive: true });
+
+		schedule();
 
-	$effect(() => {
 		return () => {
-			carouselState.api?.off("select", onSelect);
+			cleanup();
+			container.removeEventListener("pointerdown", onPointer);
+			container.removeEventListener("touchstart", onPointer);
+			container.removeEventListener("scroll", onScrollReset);
 		};
 	});
 </script>
@@ -91,4 +216,4 @@
 	{...restProps}
 >
 	{@render children?.()}
-</div>
+</div>

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

@@ -1,10 +1,20 @@
 import type { WithElementRef } from "../../../utils.js";
-import type { EmblaCarouselSvelteType, default as emblaCarouselSvelte } from "embla-carousel-svelte";
 import type { HTMLAttributes } from "svelte/elements";
-export type CarouselAPI = NonNullable<NonNullable<EmblaCarouselSvelteType["$$_attributes"]>["on:emblaInit"]> extends (evt: CustomEvent<infer CarouselAPI>) => void ? CarouselAPI : never;
-type EmblaCarouselConfig = NonNullable<Parameters<typeof emblaCarouselSvelte>[1]>;
-export type CarouselOptions = EmblaCarouselConfig["options"];
-export type CarouselPlugins = EmblaCarouselConfig["plugins"];
+export type CarouselAPI = {
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    canScrollPrev: boolean;
+    canScrollNext: boolean;
+    selectedIndex: number;
+    scrollTo: (index: number) => void;
+    scrollSnapList: () => number[];
+};
+export type CarouselOptions = Record<string, unknown>;
+export type CarouselPlugins = {
+    delay?: number;
+    stopOnInteraction?: boolean;
+    loop?: boolean;
+}[];
 export type CarouselProps = {
     opts?: CarouselOptions;
     plugins?: CarouselPlugins;
@@ -12,20 +22,19 @@ export type CarouselProps = {
     orientation?: "horizontal" | "vertical";
 } & WithElementRef<HTMLAttributes<HTMLDivElement>>;
 export type EmblaContext = {
-    api: CarouselAPI | undefined;
     orientation: "horizontal" | "vertical";
-    scrollNext: () => void;
-    scrollPrev: () => void;
+    containerEl: HTMLElement | undefined;
     canScrollNext: boolean;
     canScrollPrev: boolean;
+    selectedIndex: number;
+    scrollSnaps: number[];
+    scrollPrev: () => void;
+    scrollNext: () => void;
+    scrollTo: (index: number, jump?: boolean) => void;
+    onScroll: () => void;
     handleKeyDown: (e: KeyboardEvent) => void;
-    options: CarouselOptions;
     plugins: CarouselPlugins;
-    onInit: (e: CustomEvent<CarouselAPI>) => void;
-    scrollTo: (index: number, jump?: boolean) => void;
-    scrollSnaps: number[];
-    selectedIndex: number;
+    setContainer: (el: HTMLDivElement | null | undefined) => void;
 };
 export declare function setEmblaContext(config: EmblaContext): EmblaContext;
 export declare function getEmblaContext(name?: string): EmblaContext;
-export {};

package/dist/components/ui/carousel/context.js

@@ -1,12 +1,12 @@
 import { getContext, hasContext, setContext } from "svelte";
-const EMBLA_CAROUSEL_CONTEXT = Symbol("EMBLA_CAROUSEL_CONTEXT");
+const CAROUSEL_CONTEXT = Symbol("CAROUSEL_CONTEXT");
 export function setEmblaContext(config) {
-    setContext(EMBLA_CAROUSEL_CONTEXT, config);
+    setContext(CAROUSEL_CONTEXT, config);
     return config;
 }
 export function getEmblaContext(name = "This component") {
-    if (!hasContext(EMBLA_CAROUSEL_CONTEXT)) {
+    if (!hasContext(CAROUSEL_CONTEXT)) {
         throw new Error(`${name} must be used within a <Carousel.Root> component`);
     }
-    return getContext(EMBLA_CAROUSEL_CONTEXT);
+    return getContext(CAROUSEL_CONTEXT);
 }

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

@@ -4,3 +4,5 @@ import Next from "./carousel-next.svelte";
 import Previous from "./carousel-previous.svelte";
 import Root from "./carousel.svelte";
 export { Root, Content, Item, Previous, Next, Root as Carousel, Content as CarouselContent, Item as CarouselItem, Previous as CarouselPrevious, Next as CarouselNext, };
+export { autoplay, type AutoplayOptions } from "./autoplay.js";
+export type { CarouselAPI, CarouselOptions, CarouselPlugins, CarouselProps, } from "./context.js";

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

@@ -6,3 +6,4 @@ import Root from "./carousel.svelte";
 export { Root, Content, Item, Previous, Next, 
 //
 Root as Carousel, Content as CarouselContent, Item as CarouselItem, Previous as CarouselPrevious, Next as CarouselNext, };
+export { autoplay } from "./autoplay.js";

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

@@ -1,40 +1,97 @@
 <script lang="ts">
-	import { Checkbox as CheckboxPrimitive } from "bits-ui";
-	import { cn, type WithoutChildrenOrChild } from "../../../utils.js";
-	import { HugeiconsIcon } from "@hugeicons/svelte"
-	import { Tick02Icon } from '@hugeicons/core-free-icons';
-	import { MinusSignIcon } from '@hugeicons/core-free-icons';
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { cn } from "../../../utils.js";
+	import { HugeiconsIcon } from "@hugeicons/svelte";
+	import { Tick02Icon } from "@hugeicons/core-free-icons";
+	import { MinusSignIcon } from "@hugeicons/core-free-icons";
+
+	type CheckboxState = boolean | "indeterminate";
 
 	let {
 		ref = $bindable(null),
 		checked = $bindable(false),
 		indeterminate = $bindable(false),
+		onCheckedChange,
+		disabled = false,
+		id,
+		value,
+		name,
 		class: className,
+		children,
+		onclick,
 		...restProps
-	}: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+	}: HTMLButtonAttributes & {
+		checked?: CheckboxState;
+		indeterminate?: boolean;
+		onCheckedChange?: (checked: boolean) => void;
+		id?: string;
+		value?: string;
+		name?: string;
+		children?: Snippet<[{ checked: boolean; indeterminate: boolean }]>;
+		ref?: HTMLButtonElement | null;
+	} = $props();
+
+	const state = $derived(
+		checked === "indeterminate" || indeterminate ? "indeterminate" : checked ? "checked" : "unchecked"
+	);
+	const isChecked = $derived(checked !== false && checked !== "indeterminate");
+	const isIndeterminate = $derived(state === "indeterminate");
+
+	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		if (disabled) return;
+		onclick?.(event);
+		const next = isIndeterminate ? true : !isChecked;
+		indeterminate = false;
+		checked = next;
+		onCheckedChange?.(next);
+	}
 </script>
 
-<CheckboxPrimitive.Root
-	bind:ref
+<button
+	bind:this={ref}
+	type="button"
+	role="checkbox"
+	aria-checked={isIndeterminate ? "mixed" : isChecked}
 	data-slot="checkbox"
+	data-state={state}
+	disabled={disabled}
+	{id}
+	{name}
+	{value}
 	class={cn(
 		"border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary aria-invalid:aria-checked:border-primary aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 flex size-4 items-center justify-center rounded-[6px] border transition-shadow group-has-disabled/field:opacity-50 focus-visible:ring-[3px] aria-invalid:ring-[3px] peer relative shrink-0 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 disabled:cursor-not-allowed disabled:opacity-50",
 		className
 	)}
-	bind:checked
-	bind:indeterminate
+	onclick={handleClick}
 	{...restProps}
 >
-	{#snippet children({ checked, indeterminate })}
+	{#if children}
+		{@render children({ checked: isChecked, indeterminate: isIndeterminate })}
+	{:else}
 		<div
 			data-slot="checkbox-indicator"
 			class="[&>svg]:size-3.5 grid place-content-center text-current transition-none"
 		>
-			{#if checked}
-				<HugeiconsIcon icon={Tick02Icon} strokeWidth={2}  />
-			{:else if indeterminate}
-				<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2}  />
+			{#if isChecked}
+				<HugeiconsIcon icon={Tick02Icon} strokeWidth={2} />
+			{:else if isIndeterminate}
+				<HugeiconsIcon icon={MinusSignIcon} strokeWidth={2} />
 			{/if}
 		</div>
-	{/snippet}
-</CheckboxPrimitive.Root>
+	{/if}
+</button>
+
+{#if name}
+	<input
+		type="checkbox"
+		class="sr-only pointer-events-none"
+		tabindex="-1"
+		aria-hidden="true"
+		{name}
+		{value}
+		checked={isChecked}
+		disabled={disabled}
+		onchange={() => {}}
+	/>
+{/if}

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

@@ -1,4 +1,19 @@
-import { Checkbox as CheckboxPrimitive } from "bits-ui";
-declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type CheckboxState = boolean | "indeterminate";
+type $$ComponentProps = HTMLButtonAttributes & {
+    checked?: CheckboxState;
+    indeterminate?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    id?: string;
+    value?: string;
+    name?: string;
+    children?: Snippet<[{
+        checked: boolean;
+        indeterminate: boolean;
+    }]>;
+    ref?: HTMLButtonElement | null;
+};
+declare const Checkbox: import("svelte").Component<$$ComponentProps, {}, "ref" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

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

@@ -1,7 +1,31 @@
 <script lang="ts">
-	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import { cn } from "../../../utils.js";
+	import { useCollapsibleContext } from "./collapsible.svelte";
 
-	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		...restProps
+	}: {
+		ref?: HTMLDivElement | null;
+		class?: string;
+		children?: Snippet;
+		[key: string]: unknown;
+	} = $props();
+
+	const state = useCollapsibleContext();
 </script>
 
-<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />
+{#if state.open}
+	<div
+		bind:this={ref}
+		data-slot="collapsible-content"
+		data-state={state.open ? "open" : "closed"}
+		class={cn("animate-fade-in", className)}
+		{...restProps}
+	>
+		{@render children?.()}
+	</div>
+{/if}

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

@@ -1,4 +1,10 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-declare const CollapsibleContent: import("svelte").Component<CollapsiblePrimitive.ContentProps, {}, "ref">;
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    ref?: HTMLDivElement | null;
+    class?: string;
+    children?: Snippet;
+    [key: string]: unknown;
+};
+declare const CollapsibleContent: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type CollapsibleContent = ReturnType<typeof CollapsibleContent>;
 export default CollapsibleContent;

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

@@ -1,7 +1,52 @@
 <script lang="ts">
-	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import type { Snippet } from "svelte";
+	import type { HTMLButtonAttributes } from "svelte/elements";
+	import { useCollapsibleContext } from "./collapsible.svelte";
 
-	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+	let {
+		ref = $bindable(null),
+		class: className,
+		children,
+		child,
+		onclick,
+		...restProps
+	}: HTMLButtonAttributes & {
+		children?: Snippet;
+		child?: Snippet<[{ props: Record<string, unknown> }]>;
+		ref?: HTMLButtonElement | null;
+	} = $props();
+
+	const state = useCollapsibleContext();
+
+	function handleClick(event: MouseEvent & { currentTarget: HTMLButtonElement }) {
+		onclick?.(event);
+		state.toggle();
+	}
+
+	const triggerProps = $derived({
+		type: "button",
+		"data-slot": "collapsible-trigger",
+		"data-state": state.open ? "open" : "closed",
+		"aria-expanded": state.open,
+		disabled: state.disabled || undefined,
+		class: className
+	});
 </script>
 
-<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />
+{#if child}
+	{@render child({ props: { ...triggerProps, onclick: handleClick, ...restProps } })}
+{:else}
+	<button
+		bind:this={ref}
+		type="button"
+		data-slot="collapsible-trigger"
+		data-state={state.open ? "open" : "closed"}
+		aria-expanded={state.open}
+		disabled={state.disabled}
+		class={className}
+		onclick={handleClick}
+		{...restProps}
+	>
+		{@render children?.()}
+	</button>
+{/if}

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

@@ -1,4 +1,12 @@
-import { Collapsible as CollapsiblePrimitive } from "bits-ui";
-declare const CollapsibleTrigger: import("svelte").Component<CollapsiblePrimitive.TriggerProps, {}, "ref">;
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
+type $$ComponentProps = HTMLButtonAttributes & {
+    children?: Snippet;
+    child?: Snippet<[{
+        props: Record<string, unknown>;
+    }]>;
+    ref?: HTMLButtonElement | null;
+};
+declare const CollapsibleTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type CollapsibleTrigger = ReturnType<typeof CollapsibleTrigger>;
 export default CollapsibleTrigger;