feat: add per-package UI

Author: WarningImHack3r

package.json

@@ -28,7 +28,7 @@
 		"@sveltejs/kit": "^2.20.7",
 		"@sveltejs/vite-plugin-svelte": "^5.0.3",
 		"@tailwindcss/typography": "^0.5.16",
-		"@tailwindcss/vite": "^4.1.4",
+		"@tailwindcss/vite": "^4.1.5",
 		"@total-typescript/ts-reset": "^0.6.1",
 		"@types/eslint-config-prettier": "^6.11.3",
 		"@types/node": "^22.15.2",
@@ -59,7 +59,7 @@
 		"svelte-sonner": "https://pkg.pr.new/wobsoriano/svelte-sonner@126",
 		"tailwind-merge": "^3.2.0",
 		"tailwind-variants": "^1.0.0",
-		"tailwindcss": "^4.1.4",
+		"tailwindcss": "^4.1.5",
 		"tslib": "^2.8.1",
 		"tw-animate-css": "^1.2.8",
 		"typescript": "^5.8.3",

pnpm-lock.yaml

@@ -0,0 +1,32 @@
+<!--
+@component
+
+Based on https://bits-ui.com/docs/components/collapsible#best-practices
+-->
+<script lang="ts">
+	import { Collapsible, type WithoutChildrenOrChild } from "bits-ui";
+	import { slide, type SlideParams } from "svelte/transition";
+	import type { Snippet } from "svelte";
+
+	let {
+		ref = $bindable(null),
+		duration = 200,
+		axis = undefined,
+		children,
+		...restProps
+	}: WithoutChildrenOrChild<Collapsible.ContentProps> & {
+		duration?: number;
+		axis?: SlideParams["axis"];
+		children?: Snippet;
+	} = $props();
+</script>
+
+<Collapsible.Content forceMount bind:ref {...restProps}>
+	{#snippet child({ props, open })}
+		{#if open}
+			<div {...props} transition:slide={{ duration, axis }} class="flex">
+				{@render children?.()}
+			</div>
+		{/if}
+	{/snippet}
+</Collapsible.Content>

src/lib/components/AnimatedCollapsibleContent.svelte

@@ -0,0 +1,15 @@
+import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+
+const Root = CollapsiblePrimitive.Root;
+const Trigger = CollapsiblePrimitive.Trigger;
+const Content = CollapsiblePrimitive.Content;
+
+export {
+	Root,
+	Content,
+	Trigger,
+	//
+	Root as Collapsible,
+	Content as CollapsibleContent,
+	Trigger as CollapsibleTrigger,
+};