next: fix circular deps (#1305)

sites/docs/package.json

@@ -65,7 +65,7 @@
 		"@internationalized/date": "^3.5.6",
 		"@unovis/svelte": "1.4.3",
 		"@unovis/ts": "1.4.3",
-		"bits-ui": "1.0.0-next.13",
+		"bits-ui": "1.0.0-next.14",
 		"clsx": "^2.1.1",
 		"d3-scale": "^4.0.2",
 		"embla-carousel-autoplay": "8.1.6",

sites/docs/src/lib/registry/default/ui/accordion/accordion-content.svelte

@@ -1,16 +1,13 @@
 <script lang="ts">
-	import { Accordion as AccordionPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-	import type { Snippet } from "svelte";
+	import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
 	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: WithoutChildrenOrChild<AccordionPrimitive.ContentProps> & {
-		children: Snippet;
-	} = $props();
+	}: WithoutChild<AccordionPrimitive.ContentProps> = $props();
 </script>
 
 <AccordionPrimitive.Content

sites/docs/src/lib/registry/default/ui/alert-dialog/alert-dialog-content.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { AlertDialog as AlertDialogPrimitive, type WithoutChild } from "bits-ui";
-	import * as AlertDialog from "./index.js";
+	import AlertDialogOverlay from "./alert-dialog-overlay.svelte";
 	import { cn } from "$lib/utils.js";
 
 	let {
@@ -10,8 +10,8 @@
 	}: WithoutChild<AlertDialogPrimitive.ContentProps> = $props();
 </script>
 
-<AlertDialog.Portal>
-	<AlertDialog.Overlay />
+<AlertDialogPrimitive.Portal>
+	<AlertDialogOverlay />
 	<AlertDialogPrimitive.Content
 		bind:ref
 		class={cn(
@@ -20,4 +20,4 @@
 		)}
 		{...restProps}
 	/>
-</AlertDialog.Portal>
+</AlertDialogPrimitive.Portal>

sites/docs/src/lib/registry/default/ui/alert-dialog/alert-dialog-footer.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { type PrimitiveDivAttributes, cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: PrimitiveDivAttributes = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div

sites/docs/src/lib/registry/default/ui/alert-dialog/alert-dialog-header.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { type PrimitiveDivAttributes, cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: PrimitiveDivAttributes = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div

sites/docs/src/lib/registry/default/ui/alert-dialog/index.ts

@@ -1,9 +1,7 @@
 import { AlertDialog as AlertDialogPrimitive } from "bits-ui";
-
 import Title from "./alert-dialog-title.svelte";
 import Action from "./alert-dialog-action.svelte";
 import Cancel from "./alert-dialog-cancel.svelte";
-import Portal from "./alert-dialog-portal.svelte";
 import Footer from "./alert-dialog-footer.svelte";
 import Header from "./alert-dialog-header.svelte";
 import Overlay from "./alert-dialog-overlay.svelte";
@@ -12,6 +10,7 @@ import Description from "./alert-dialog-description.svelte";
 
 const Root = AlertDialogPrimitive.Root;
 const Trigger = AlertDialogPrimitive.Trigger;
+const Portal = AlertDialogPrimitive.Portal;
 
 export {
 	Root,

sites/docs/src/lib/registry/default/ui/alert/alert-description.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { type PrimitiveDivAttributes, cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: PrimitiveDivAttributes = $props();
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> = $props();
 </script>
 
 <div bind:this={ref} class={cn("text-sm [&_p]:leading-relaxed", className)} {...restProps}>

sites/docs/src/lib/registry/default/ui/alert/alert-title.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-	import type { AlertHeadingLevel } from "./index.js";
-	import { type PrimitiveDivAttributes, cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		level = 5,
 		children,
 		...restProps
-	}: PrimitiveDivAttributes & {
-		level?: AlertHeadingLevel;
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
+		level?: 1 | 2 | 3 | 4 | 5 | 6;
 	} = $props();
 </script>
 

sites/docs/src/lib/registry/default/ui/alert/alert.svelte

@@ -1,14 +1,35 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const alertVariants = tv({
+		base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
+		variants: {
+			variant: {
+				default: "bg-background text-foreground",
+				destructive:
+					"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
+</script>
+
 <script lang="ts">
-	import { type AlertVariant, alertVariants } from "./index.js";
-	import { type PrimitiveDivAttributes, cn } from "$lib/utils.js";
+	import type { HTMLAttributes } from "svelte/elements";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		variant = "default",
 		children,
 		...restProps
-	}: PrimitiveDivAttributes & {
+	}: WithElementRef<HTMLAttributes<HTMLDivElement>> & {
 		variant?: AlertVariant;
 	} = $props();
 </script>

sites/docs/src/lib/registry/default/ui/alert/index.ts

@@ -1,25 +1,7 @@
-import { type VariantProps, tv } from "tailwind-variants";
-
 import Root from "./alert.svelte";
 import Description from "./alert-description.svelte";
 import Title from "./alert-title.svelte";
-
-export const alertVariants = tv({
-	base: "[&>svg]:text-foreground relative w-full rounded-lg border p-4 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg~*]:pl-7",
-	variants: {
-		variant: {
-			default: "bg-background text-foreground",
-			destructive:
-				"border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-	},
-});
-
-export type AlertVariant = VariantProps<typeof alertVariants>["variant"];
-export type AlertHeadingLevel = 1 | 2 | 3 | 4 | 5 | 6;
+export { alertVariants, type AlertVariant } from "./alert.svelte";
 
 export {
 	Root,

sites/docs/src/lib/registry/default/ui/badge/badge.svelte

@@ -1,6 +1,31 @@
+<script lang="ts" module>
+	import { type VariantProps, tv } from "tailwind-variants";
+
+	export const badgeVariants = tv({
+		base: "focus:ring-ring 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-offset-2",
+		variants: {
+			variant: {
+				default:
+					"bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
+				secondary:
+					"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
+				destructive:
+					"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
+				outline: "text-foreground",
+			},
+		},
+		defaultVariants: {
+			variant: "default",
+		},
+	});
+
+	export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+</script>
+
 <script lang="ts">
-	import { type BadgeVariant, badgeVariants } from "./index.js";
-	import { type PrimitiveAnchorAttributes, cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -9,7 +34,7 @@
 		variant = "default",
 		children,
 		...restProps
-	}: PrimitiveAnchorAttributes & {
+	}: WithElementRef<HTMLAnchorAttributes> & {
 		variant?: BadgeVariant;
 	} = $props();
 </script>

sites/docs/src/lib/registry/default/ui/badge/index.ts

@@ -1,21 +1,2 @@
-import { type VariantProps, tv } from "tailwind-variants";
 export { default as Badge } from "./badge.svelte";
-
-export const badgeVariants = tv({
-	base: "focus:ring-ring 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-offset-2",
-	variants: {
-		variant: {
-			default: "bg-primary text-primary-foreground hover:bg-primary/80 border-transparent",
-			secondary:
-				"bg-secondary text-secondary-foreground hover:bg-secondary/80 border-transparent",
-			destructive:
-				"bg-destructive text-destructive-foreground hover:bg-destructive/80 border-transparent",
-			outline: "text-foreground",
-		},
-	},
-	defaultVariants: {
-		variant: "default",
-	},
-});
-
-export type BadgeVariant = VariantProps<typeof badgeVariants>["variant"];
+export { badgeVariants, type BadgeVariant } from "./badge.svelte";

sites/docs/src/lib/registry/default/ui/breadcrumb/breadcrumb-ellipsis.svelte

@@ -1,15 +1,14 @@
 <script lang="ts">
 	import Ellipsis from "lucide-svelte/icons/ellipsis";
-	import type { WithoutChildren } from "bits-ui";
-	import { type PrimitiveSpanAttributes, cn } from "$lib/utils.js";
+	import type { WithElementRef, WithoutChildren } from "bits-ui";
+	import type { HTMLAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		...restProps
-	}: WithoutChildren<PrimitiveSpanAttributes> = $props();
-
-	export { className as class };
+	}: WithoutChildren<WithElementRef<HTMLAttributes<HTMLSpanElement>>> = $props();
 </script>
 
 <span

sites/docs/src/lib/registry/default/ui/breadcrumb/breadcrumb-item.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { type PrimitiveLiAttributes, cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLLiAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: PrimitiveLiAttributes = $props();
+	}: WithElementRef<HTMLLiAttributes> = $props();
 </script>
 
 <li bind:this={ref} class={cn("inline-flex items-center gap-1.5", className)} {...restProps}>

sites/docs/src/lib/registry/default/ui/breadcrumb/breadcrumb-link.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import type { HTMLAnchorAttributes } from "svelte/elements";
 	import type { Snippet } from "svelte";
-	import { type PrimitiveAnchorAttributes, cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
@@ -10,7 +11,7 @@
 		child,
 		children,
 		...restProps
-	}: PrimitiveAnchorAttributes & {
+	}: WithElementRef<HTMLAnchorAttributes> & {
 		child?: Snippet<[{ props: HTMLAnchorAttributes }]>;
 	} = $props();
 

sites/docs/src/lib/registry/default/ui/breadcrumb/breadcrumb-list.svelte

@@ -1,12 +1,14 @@
 <script lang="ts">
-	import { type PrimitiveOlAttributes, cn } from "$lib/utils.js";
+	import type { WithElementRef } from "bits-ui";
+	import type { HTMLOlAttributes } from "svelte/elements";
+	import { cn } from "$lib/utils.js";
 
 	let {
 		ref = $bindable(null),
 		class: className,
 		children,
 		...restProps
-	}: PrimitiveOlAttributes = $props();
+	}: WithElementRef<HTMLOlAttributes> = $props();
 </script>
 
 <ol