From 934706961d2f5d1a2f1ece84259f9f8fc5815bf4 Mon Sep 17 00:00:00 2001
From: Face <69168154+face-hh@users.noreply.github.com>
Date: Sun, 29 Jun 2025 00:21:40 +0300
Subject: [PATCH] fix collapsible on ssr

---
 .../ui/collapsible/collapsible-content.svelte     | 15 +++++++++++++--
 .../ui/collapsible/collapsible-trigger.svelte     | 15 +++++++++++++--
 .../components/ui/collapsible/collapsible.svelte  | 10 +++++++++-
 3 files changed, 35 insertions(+), 5 deletions(-)

diff --git a/website/src/lib/components/ui/collapsible/collapsible-content.svelte b/website/src/lib/components/ui/collapsible/collapsible-content.svelte
index bdabb55..6239883 100644
--- a/website/src/lib/components/ui/collapsible/collapsible-content.svelte
+++ b/website/src/lib/components/ui/collapsible/collapsible-content.svelte
@@ -1,7 +1,18 @@
 <script lang="ts">
 	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import { browser } from "$app/environment";
 
-	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.ContentProps = $props();
+	let { 
+		ref = $bindable(null), 
+		children,
+		...restProps 
+	}: CollapsiblePrimitive.ContentProps = $props();
 </script>
 
-<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />
+{#if browser}
+	<CollapsiblePrimitive.Content bind:ref data-slot="collapsible-content" {...restProps} />
+{:else}
+	<div data-slot="collapsible-content" {...restProps}>
+		{@render children?.()}
+	</div>
+{/if}
diff --git a/website/src/lib/components/ui/collapsible/collapsible-trigger.svelte b/website/src/lib/components/ui/collapsible/collapsible-trigger.svelte
index ece7ad6..039dd82 100644
--- a/website/src/lib/components/ui/collapsible/collapsible-trigger.svelte
+++ b/website/src/lib/components/ui/collapsible/collapsible-trigger.svelte
@@ -1,7 +1,18 @@
 <script lang="ts">
 	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import { browser } from "$app/environment";
 
-	let { ref = $bindable(null), ...restProps }: CollapsiblePrimitive.TriggerProps = $props();
+	let { 
+		ref = $bindable(null), 
+		children,
+		...restProps 
+	}: CollapsiblePrimitive.TriggerProps = $props();
 </script>
 
-<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />
+{#if browser}
+	<CollapsiblePrimitive.Trigger bind:ref data-slot="collapsible-trigger" {...restProps} />
+{:else}
+	<button data-slot="collapsible-trigger" {...restProps}>
+		{@render children?.()}
+	</button>
+{/if}
diff --git a/website/src/lib/components/ui/collapsible/collapsible.svelte b/website/src/lib/components/ui/collapsible/collapsible.svelte
index 39cdd4e..e6cd0bd 100644
--- a/website/src/lib/components/ui/collapsible/collapsible.svelte
+++ b/website/src/lib/components/ui/collapsible/collapsible.svelte
@@ -1,11 +1,19 @@
 <script lang="ts">
 	import { Collapsible as CollapsiblePrimitive } from "bits-ui";
+	import { browser } from "$app/environment";
 
 	let {
 		ref = $bindable(null),
 		open = $bindable(false),
+		children,
 		...restProps
 	}: CollapsiblePrimitive.RootProps = $props();
 </script>
 
-<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />
+{#if browser}
+	<CollapsiblePrimitive.Root bind:ref bind:open data-slot="collapsible" {...restProps} />
+{:else}
+	<div data-slot="collapsible">
+		{@render children?.()}
+	</div>
+{/if}