more next

.github/workflows/docs-preview.yml

@@ -34,6 +34,9 @@ jobs:
         name: Deploy Preview to Cloudflare Pages
         steps:
             - uses: actions/checkout@v4
+              with:
+                    ref: ${{ github.event.pull_request.head.ref }}
+                    repository: ${{ github.event.pull_request.head.repo.full_name }}
             - uses: pnpm/action-setup@v4
             - uses: actions/setup-node@v4
               with:

package.json

@@ -49,7 +49,7 @@
 		"prettier-plugin-tailwindcss": "^0.5.12",
 		"pretty-quick": "^4.0.0",
 		"simple-git-hooks": "^2.10.0",
-		"svelte": "5.0.0-next.193",
+		"svelte": "5.0.0-next.200",
 		"svelte-eslint-parser": "^0.41.0"
 	},
 	"simple-git-hooks": {

sites/docs/package.json

@@ -48,7 +48,7 @@
 		"remark-gfm": "^4.0.0",
 		"rimraf": "^4.4.1",
 		"shiki": "^1.2.1",
-		"svelte": "5.0.0-next.193",
+		"svelte": "5.0.0-next.200",
 		"svelte-check": "^3.8.4",
 		"tailwind-merge": "^2.4.0",
 		"tailwind-variants": "^0.2.1",
@@ -65,9 +65,9 @@
 	"type": "module",
 	"dependencies": {
 		"@internationalized/date": "^3.5.4",
-		"@unovis/svelte": "1.4.2",
-		"@unovis/ts": "1.4.2",
-		"bits-ui": "https://pkg.pr.new/bits-ui@619",
+		"@unovis/svelte": "1.4.3",
+		"@unovis/ts": "1.4.3",
+		"bits-ui": "https://pkg.pr.new/huntabyte/bits-ui/bits-ui@216712b",
 		"clsx": "^2.1.1",
 		"cmdk-sv": "^0.0.17",
 		"d3-scale": "^4.0.2",

sites/docs/src/content/changelog.md

@@ -13,9 +13,9 @@ description: Latest updates and announcements.
 
 [Blocks](/blocks) are ready-made components that you can use to build your apps. They are fully responsive, accessible, and composable, meaning they are built using the same principles as the rest of the components in shadcn-svelte.
 
-<enhanced:img src="$lib/img/blocks/dashboard-1-dark.jpg" alt="A screenshot of the dashboard-01 block" class="h-full w-full hidden dark:block mt-6" />
+<enhanced:img src="$lib/img/examples/dashboard-dark.jpg" alt="A screenshot of the dashboard-01 block" class="h-full w-full hidden dark:block mt-6" />
 
-<enhanced:img src="$lib/img/blocks/dashboard-1-light.jpg" alt="A screenshot of the dashboard-01 block" class="h-full w-full block dark:hidden mt-6" />
+<enhanced:img src="$lib/img/examples/dashboard-light.jpg" alt="A screenshot of the dashboard-01 block" class="h-full w-full block dark:hidden mt-6" />
 
 [v0](https://v0.dev) only supports React at the moment, so you can't customize them like you can the original from [shadcn/ui](https://ui.shadcn.com). However, if having support for Svelte interests you, I'm sure the v0 team would love to hear about it. :)
 

sites/docs/src/lib/components/docs/markdown/blueprint.svelte

@@ -56,4 +56,5 @@
 	let { title, description, source, component, radix }: Props = $props();
 </script>
 
+<!-- svelte-ignore slot_element_deprecated -->
 <slot {title} {description} {source} {component} {radix} />

sites/docs/src/lib/components/docs/markdown/table.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import { type PrimitiveElementAttributes, cn } from "$lib/utils.js";
 
 	let { class: className, children, ...restProps }: PrimitiveElementAttributes = $props();
 </script>

sites/docs/src/lib/components/docs/markdown/th.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { cn } from "$lib/utils.js";
+	import { type PrimitiveElementAttributes, cn } from "$lib/utils.js";
 
 	let { class: className, children, ...restProps }: PrimitiveElementAttributes = $props();
 </script>

sites/docs/src/lib/components/docs/style-switcher.svelte

@@ -8,7 +8,7 @@
 	let {
 		class: className,
 		...restProps
-	}: WithoutChildren<Omit<PrimitiveButtonAttributes, "disabled" | "style" | "id">> = $props();
+	}: WithoutChildren<Omit<PrimitiveButtonAttributes, "style" | "id">> = $props();
 
 	const styleLabel = $derived(styles.filter((s) => s.name === $config.style)[0].label);
 

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

@@ -8,7 +8,8 @@
 	import { CustomizerCode, ThemeWrapper } from "$lib/components/docs/index.js";
 	import { cn, createCopyCodeButton } from "$lib/utils.js";
 	import { buttonVariants } from "$lib/registry/default/ui/button/index.js";
-	const activeTheme = themes.find((theme) => theme.name === $config.theme);
+
+	const activeTheme = $derived(themes.find((theme) => theme.name === $config.theme));
 
 	const { copied, copyCode, setCodeString } = createCopyCodeButton();
 </script>

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

@@ -2,7 +2,8 @@
 	import { config } from "$lib/stores/index.js";
 	import { themes } from "$lib/registry/index.js";
 	import { ThemeWrapper } from "$lib/components/docs/index.js";
-	const activeTheme = themes.find((theme) => theme.name === $config.theme);
+
+	const activeTheme = $derived(themes.find((theme) => theme.name === $config.theme));
 
 	let { setCodeString }: { setCodeString: (node: HTMLElement) => void } = $props();
 

sites/docs/src/lib/components/docs/theme-customizer/theme-customizer.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
 	import Check from "svelte-radix/Check.svelte";
-
 	import { mode } from "mode-watcher";
 	import Paintbrush from "lucide-svelte/icons/paintbrush";
 	import { Customizer, ThemeCopyCodeButton } from "./index.js";

sites/docs/src/lib/registry/default/example/cards/all.svelte

@@ -8,7 +8,7 @@
 	import CardsShare from "./share.svelte";
 	import CardsStats from "./stats.svelte";
 	import CardsCalendar from "./calendar.svelte";
-	import CardsDataTable from "./data-table.svelte";
+	// import CardsDataTable from "./data-table.svelte";
 	import CardsTeamMembers from "./team-members.svelte";
 	import CardsChat from "./chat.svelte";
 </script>
@@ -51,7 +51,7 @@
 			</div>
 		</div>
 		<div class="hidden md:block">
-			<CardsDataTable />
+			<!-- <CardsDataTable /> -->
 		</div>
 		<CardsShare />
 		<div class="xl:hidden">

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

@@ -1,27 +1,23 @@
 <script lang="ts">
 	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HoverCardPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export let align: $$Props["align"] = "center";
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		...restProps
+	}: HoverCardPrimitive.ContentProps = $props();
 </script>
 
 <HoverCardPrimitive.Content
-	{transition}
-	{transitionConfig}
+	bind:ref
 	{align}
 	{sideOffset}
 	class={cn(
 		"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none",
 		className
 	)}
-	{...$$restProps}
->
-	<slot />
-</HoverCardPrimitive.Content>
+	{...restProps}
+/>

sites/docs/src/lib/registry/new-york/example/cards/all.svelte

@@ -5,7 +5,6 @@
 		CardsChat,
 		CardsCookieSettings,
 		CardsCreateAccount,
-		CardsDataTable,
 		CardsMetric,
 		CardsPaymentMethod,
 		CardsReportIssue,
@@ -53,7 +52,7 @@
 			</div>
 		</div>
 		<div class="hidden md:block">
-			<CardsDataTable />
+			<!-- <CardsDataTable /> -->
 		</div>
 		<CardsShare />
 		<div class="xl:hidden">

sites/docs/src/lib/registry/new-york/ui/aspect-ratio/index.ts

@@ -1,3 +1,5 @@
-import Root from "./aspect-ratio.svelte";
+import { AspectRatio as AspectRatioPrimitive } from "bits-ui";
+
+const Root = AspectRatioPrimitive.Root;
 
 export { Root, Root as AspectRatio };

sites/docs/src/lib/registry/new-york/ui/command/command-dialog.svelte

@@ -1,23 +1,25 @@
 <script lang="ts">
-	import type { Dialog as DialogPrimitive } from "bits-ui";
+	import type { Dialog as DialogPrimitive, WithoutChild } from "bits-ui";
 	import type { Command as CommandPrimitive } from "cmdk-sv";
 	import Command from "./command.svelte";
 	import * as Dialog from "$lib/registry/new-york/ui/dialog/index.js";
 
-	type $$Props = DialogPrimitive.Props & CommandPrimitive.CommandProps;
-
-	export let open: $$Props["open"] = false;
-	export let value: $$Props["value"] = undefined;
+	let {
+		open = $bindable(false),
+		value = $bindable(""),
+		children,
+		...restProps
+	}: WithoutChild<DialogPrimitive.RootProps> & CommandPrimitive.CommandProps = $props();
 </script>
 
-<Dialog.Root bind:open {...$$restProps}>
+<Dialog.Root bind:open {...restProps}>
 	<Dialog.Content class="overflow-hidden p-0">
 		<Command
 			class="[&_[data-cmdk-group-heading]]:text-muted-foreground [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:font-medium [&_[data-cmdk-group]:not([hidden])_~[data-cmdk-group]]:pt-0 [&_[data-cmdk-group]]:px-2 [&_[data-cmdk-input-wrapper]_svg]:h-5 [&_[data-cmdk-input-wrapper]_svg]:w-5 [&_[data-cmdk-input]]:h-12 [&_[data-cmdk-item]]:px-2 [&_[data-cmdk-item]]:py-3 [&_[data-cmdk-item]_svg]:h-5 [&_[data-cmdk-item]_svg]:w-5"
-			{...$$restProps}
+			{...restProps}
 			bind:value
 		>
-			<slot />
+			{@render children?.()}
 		</Command>
 	</Dialog.Content>
 </Dialog.Root>

sites/docs/src/lib/registry/new-york/ui/command/command-empty.svelte

@@ -2,11 +2,9 @@
 	import { Command as CommandPrimitive } from "cmdk-sv";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = CommandPrimitive.EmptyProps;
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let { class: className, children, ...restProps }: CommandPrimitive.EmptyProps = $props();
 </script>
 
-<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...$$restProps}>
-	<slot />
+<CommandPrimitive.Empty class={cn("py-6 text-center text-sm", className)} {...restProps}>
+	{@render children?.()}
 </CommandPrimitive.Empty>

sites/docs/src/lib/registry/new-york/ui/command/command-group.svelte

@@ -1,18 +1,16 @@
 <script lang="ts">
 	import { Command as CommandPrimitive } from "cmdk-sv";
 	import { cn } from "$lib/utils.js";
-	type $$Props = CommandPrimitive.GroupProps;
 
-	let className: string | undefined | null = undefined;
-	export { className as class };
+	let { class: className, children, ...restProps }: CommandPrimitive.GroupProps = $props();
 </script>
 
 <CommandPrimitive.Group
 	class={cn(
 		"text-foreground [&_[data-cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[data-cmdk-group-heading]]:px-2 [&_[data-cmdk-group-heading]]:py-1.5 [&_[data-cmdk-group-heading]]:text-xs [&_[data-cmdk-group-heading]]:font-medium",
 		className
 	)}
-	{...$$restProps}
+	{...restProps}
 >
-	<slot />
+	{@render children?.()}
 </CommandPrimitive.Group>

sites/docs/src/lib/registry/new-york/ui/command/command-input.svelte

@@ -3,11 +3,11 @@
 	import MagnifyingGlass from "svelte-radix/MagnifyingGlass.svelte";
 	import { cn } from "$lib/utils.js";
 
-	type $$Props = CommandPrimitive.InputProps;
-
-	let className: string | undefined | null = undefined;
-	export { className as class };
-	export let value: string = "";
+	let {
+		class: className,
+		value = $bindable(""),
+		...restProps
+	}: CommandPrimitive.InputProps = $props();
 </script>
 
 <div class="flex items-center border-b px-3" data-cmdk-input-wrapper="">
@@ -17,7 +17,7 @@
 			"placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-none disabled:cursor-not-allowed disabled:opacity-50",
 			className
 		)}
-		{...$$restProps}
+		{...restProps}
 		bind:value
 	/>
 </div>

sites/docs/src/lib/registry/new-york/ui/hover-card/hover-card-content.svelte

@@ -1,27 +1,23 @@
 <script lang="ts">
 	import { LinkPreview as HoverCardPrimitive } from "bits-ui";
-	import { cn, flyAndScale } from "$lib/utils.js";
+	import { cn } from "$lib/utils.js";
 
-	type $$Props = HoverCardPrimitive.ContentProps;
-
-	let className: $$Props["class"] = undefined;
-	export let align: $$Props["align"] = "center";
-	export let sideOffset: $$Props["sideOffset"] = 4;
-	export let transition: $$Props["transition"] = flyAndScale;
-	export let transitionConfig: $$Props["transitionConfig"] = undefined;
-	export { className as class };
+	let {
+		ref = $bindable(null),
+		class: className,
+		align = "center",
+		sideOffset = 4,
+		...restProps
+	}: HoverCardPrimitive.ContentProps = $props();
 </script>
 
 <HoverCardPrimitive.Content
-	{transition}
-	{transitionConfig}
+	bind:ref
 	{sideOffset}
 	{align}
 	class={cn(
 		"bg-popover text-popover-foreground z-50 w-64 rounded-md border p-4 shadow-md outline-none",
 		className
 	)}
-	{...$$restProps}
->
-	<slot />
-</HoverCardPrimitive.Content>
+	{...restProps}
+/>

sites/docs/src/routes/(app)/examples/mail/(components)/account-switcher.svelte

@@ -30,7 +30,7 @@
 			</span>
 		</span>
 	</Select.Trigger>
-	<Select.Content sameWidth={!isCollapsed} align={isCollapsed ? "start" : undefined}>
+	<Select.Content align={isCollapsed ? "start" : undefined} class="w-fit">
 		<Select.Group>
 			{#each accounts as account}
 				<Select.Item value={account.email} textValue={account.label}>

sites/docs/src/routes/(app)/examples/mail/data.ts

@@ -1,5 +1,4 @@
-import type { ComponentType } from "svelte";
-import type { Icon } from "lucide-svelte";
+import type { Component } from "svelte";
 import Vercel from "./(components)/icons/vercel.svelte";
 import ICloud from "./(components)/icons/icloud.svelte";
 import Gmail from "./(components)/icons/gmail.svelte";
@@ -182,7 +181,7 @@ export type Mail = (typeof mails)[number];
 export type Account = {
 	label: string;
 	email: string;
-	icon: ComponentType<Icon>;
+	icon: Component;
 };
 
 export const accounts: Account[] = [

sites/docs/src/routes/+layout.svelte

@@ -7,6 +7,7 @@
 	import { config } from "$lib/stores/index.js";
 	import { Toaster as DefaultSonner } from "$lib/registry/default/ui/sonner/index.js";
 	import { Toaster as NYSonner } from "$lib/registry/new-york/ui/sonner/index.js";
+	import * as Tooltip from "$lib/registry/new-york/ui/tooltip/index.js";
 
 	let { children } = $props();
 
@@ -22,7 +23,12 @@
 {:else}
 	<DefaultSonner />
 {/if}
-
-<div class="bg-background relative flex min-h-screen flex-col" id="page" data-vaul-drawer-wrapper>
-	{@render children?.()}
-</div>
+<Tooltip.Provider>
+	<div
+		class="bg-background relative flex min-h-screen flex-col"
+		id="page"
+		data-vaul-drawer-wrapper
+	>
+		{@render children?.()}
+	</div>
+</Tooltip.Provider>

sites/docs/static/registry/styles/default-js/hover-card.json

@@ -7,7 +7,7 @@
 	"files": [
 		{
 			"name": "hover-card-content.svelte",
-			"content": "<script>import { LinkPreview as HoverCardPrimitive } from \"bits-ui\";\nimport { cn, flyAndScale } from \"$lib/utils.js\";\nlet className = undefined;\nexport let transition = flyAndScale;\nexport let transitionConfig = undefined;\nexport let align = \"center\";\nexport let sideOffset = 4;\nexport { className as class };\n</script>\n\n<HoverCardPrimitive.Content\n\t{transition}\n\t{transitionConfig}\n\t{align}\n\t{sideOffset}\n\tclass={cn(\n\t\t\"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none\",\n\t\tclassName\n\t)}\n\t{...$$restProps}\n>\n\t<slot />\n</HoverCardPrimitive.Content>\n"
+			"content": "<script>import { LinkPreview as HoverCardPrimitive } from \"bits-ui\";\nimport { cn } from \"$lib/utils.js\";\nlet {\n  ref = $bindable(null),\n  class: className,\n  align = \"center\",\n  sideOffset = 4,\n  ...restProps\n} = $props();\n</script>\n\n<HoverCardPrimitive.Content\n\tbind:ref\n\t{align}\n\t{sideOffset}\n\tclass={cn(\n\t\t\"bg-popover text-popover-foreground z-50 mt-3 w-64 rounded-md border p-4 shadow-md outline-none\",\n\t\tclassName\n\t)}\n\t{...restProps}\n/>\n"
 		},
 		{
 			"name": "index.js",