From 724071af02780ecea7da4c773fca40381e42756c Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Mon, 22 Dec 2025 14:23:01 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0Tabs=E7=BB=84?=
 =?UTF-8?q?=E4=BB=B6/=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/lib/components/ui/tabs/Tabs.svelte        | 23 +++++++++++++++++++
 src/lib/components/ui/tabs/TabsContent.svelte | 16 +++++++++++++
 src/lib/components/ui/tabs/TabsList.svelte    | 17 ++++++++++++++
 src/lib/components/ui/tabs/TabsTrigger.svelte | 20 ++++++++++++++++
 src/lib/components/ui/tabs/index.ts           |  4 ++++
 5 files changed, 80 insertions(+)
 create mode 100644 src/lib/components/ui/tabs/Tabs.svelte
 create mode 100644 src/lib/components/ui/tabs/TabsContent.svelte
 create mode 100644 src/lib/components/ui/tabs/TabsList.svelte
 create mode 100644 src/lib/components/ui/tabs/TabsTrigger.svelte
 create mode 100644 src/lib/components/ui/tabs/index.ts

diff --git a/src/lib/components/ui/tabs/Tabs.svelte b/src/lib/components/ui/tabs/Tabs.svelte
new file mode 100644
index 0000000..db0bf9e
--- /dev/null
+++ b/src/lib/components/ui/tabs/Tabs.svelte
@@ -0,0 +1,23 @@
+<script lang="ts">
+  import { Tabs as BitsTabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+  // import type { SvelteComponent } from 'svelte';
+
+  interface Props {
+    value?: string;
+    onValueChange?: (value: string) => void;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let {
+    value = $bindable(),
+    onValueChange,
+    className,
+    children,
+  }: Props = $props();
+</script>
+
+<BitsTabs.Root bind:value {onValueChange} class={`w-full ${className}`}>
+  {@render children?.()}
+</BitsTabs.Root>
diff --git a/src/lib/components/ui/tabs/TabsContent.svelte b/src/lib/components/ui/tabs/TabsContent.svelte
new file mode 100644
index 0000000..f1f554a
--- /dev/null
+++ b/src/lib/components/ui/tabs/TabsContent.svelte
@@ -0,0 +1,16 @@
+<script lang="ts">
+  import { Tabs as BitsTabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value: string;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { value, className, children }: Props = $props();
+</script>
+
+<BitsTabs.Content {value} class={`flex-1 outline-none ${className}`}>
+  {@render children?.()}
+</BitsTabs.Content>
diff --git a/src/lib/components/ui/tabs/TabsList.svelte b/src/lib/components/ui/tabs/TabsList.svelte
new file mode 100644
index 0000000..2841932
--- /dev/null
+++ b/src/lib/components/ui/tabs/TabsList.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Tabs as BitsTabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { className, children }: Props = $props();
+</script>
+
+<BitsTabs.List
+  class={`tabs-box tabs flex gap-2 border-b border-gray-200  dark:border-gray-700 ${className}`}
+>
+  {@render children?.()}
+</BitsTabs.List>
diff --git a/src/lib/components/ui/tabs/TabsTrigger.svelte b/src/lib/components/ui/tabs/TabsTrigger.svelte
new file mode 100644
index 0000000..bb45ad5
--- /dev/null
+++ b/src/lib/components/ui/tabs/TabsTrigger.svelte
@@ -0,0 +1,20 @@
+<script lang="ts">
+  import { Tabs as BitsTabs } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    value: string;
+    className?: string;
+    children?: Snippet;
+  }
+
+  let { value, className, children }: Props = $props();
+</script>
+
+<BitsTabs.Trigger
+  {value}
+  class={`tab transition-colors data-[state='active']:bg-white data-[state='active']:shadow data-[state='inactive']:hover:bg-gray-200
+    ${className}`}
+>
+  {@render children?.()}
+</BitsTabs.Trigger>
diff --git a/src/lib/components/ui/tabs/index.ts b/src/lib/components/ui/tabs/index.ts
new file mode 100644
index 0000000..69fe143
--- /dev/null
+++ b/src/lib/components/ui/tabs/index.ts
@@ -0,0 +1,4 @@
+export { default as Tabs } from './Tabs.svelte';
+export { default as TabsList } from './TabsList.svelte';
+export { default as TabsTrigger } from './TabsTrigger.svelte';
+export { default as TabsContent } from './TabsContent.svelte';