From da34c24f91446f55accb78ae9172ff8f91575feb Mon Sep 17 00:00:00 2001
From: R2m1liA <15258427350@163.com>
Date: Mon, 22 Dec 2025 15:36:29 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=AE=9E=E7=8E=B0Slect=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/select/Select.svelte    | 15 ++++++
 .../components/ui/select/SelectContent.svelte | 54 +++++++++++++++++++
 .../components/ui/select/SelectTrigger.svelte | 17 ++++++
 src/lib/components/ui/select/index.ts         |  3 ++
 src/routes/layout.css                         |  1 +
 src/styles/select-motion.css                  | 13 +++++
 6 files changed, 103 insertions(+)
 create mode 100644 src/lib/components/ui/select/Select.svelte
 create mode 100644 src/lib/components/ui/select/SelectContent.svelte
 create mode 100644 src/lib/components/ui/select/SelectTrigger.svelte
 create mode 100644 src/lib/components/ui/select/index.ts
 create mode 100644 src/styles/select-motion.css

diff --git a/src/lib/components/ui/select/Select.svelte b/src/lib/components/ui/select/Select.svelte
new file mode 100644
index 0000000..8b2ca43
--- /dev/null
+++ b/src/lib/components/ui/select/Select.svelte
@@ -0,0 +1,15 @@
+<script lang="ts">
+  import { Select as BitsSelect, type WithoutChildren } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = WithoutChildren<BitsSelect.RootProps> & {
+    class?: string;
+    children?: Snippet;
+  };
+
+  let { value = $bindable(), children, ...restProps }: Props = $props();
+</script>
+
+<BitsSelect.Root bind:value={value as never} {...restProps}>
+  {@render children?.()}
+</BitsSelect.Root>
diff --git a/src/lib/components/ui/select/SelectContent.svelte b/src/lib/components/ui/select/SelectContent.svelte
new file mode 100644
index 0000000..1fe8d76
--- /dev/null
+++ b/src/lib/components/ui/select/SelectContent.svelte
@@ -0,0 +1,54 @@
+<script lang="ts">
+  import { Select as BitsSelect, type WithoutChildren } from 'bits-ui';
+
+  type Props = WithoutChildren<BitsSelect.ContentProps> & {
+    items: { value: string; label: string; disabled?: boolean }[];
+    class?: string;
+  };
+
+  let { items, class: className = '', ...restProps }: Props = $props();
+</script>
+
+<BitsSelect.Portal>
+  <BitsSelect.Content
+    forceMount
+    sideOffset={4}
+    class={`data=[state=closed]:fade-out-0 select-motion w-(--bits-select-anchor-width) min-w-(--bits-select-anchor-width) rounded-xl border-[1.5px] border-base-content/20 bg-base-100 select-none  ${className}`}
+    {...restProps}
+  >
+    <BitsSelect.ScrollUpButton>up</BitsSelect.ScrollUpButton>
+    <BitsSelect.Viewport class="p-1">
+      {#each items as { value, label, disabled } (value)}
+        <BitsSelect.Item
+          {value}
+          {label}
+          {disabled}
+          class="outlined-hidden flex h-10 w-full items-center rounded-lg p-2 text-sm capitalize select-none data-disabled:opacity-50 data-highlighted:bg-gray-200"
+        >
+          {label}
+        </BitsSelect.Item>
+      {/each}
+    </BitsSelect.Viewport>
+    <BitsSelect.ScrollDownButton>down</BitsSelect.ScrollDownButton>
+  </BitsSelect.Content>
+</BitsSelect.Portal>
+
+<style lang="postcss">
+  @reference "tailwindcss";
+
+  :global(.select-content-animate) {
+    @apply transition-[opacity,transform] duration-200 ease-out will-change-transform;
+  }
+
+  :global(.select-content-animate[data-state='open']) {
+    opacity: 1;
+    transform: translateY(0);
+    pointer-events: auto;
+  }
+
+  :global(.select-content-animate[data-state='closed']) {
+    opacity: 0;
+    transform: translateY(-10px);
+    pointer-events: none;
+  }
+</style>
diff --git a/src/lib/components/ui/select/SelectTrigger.svelte b/src/lib/components/ui/select/SelectTrigger.svelte
new file mode 100644
index 0000000..713b46f
--- /dev/null
+++ b/src/lib/components/ui/select/SelectTrigger.svelte
@@ -0,0 +1,17 @@
+<script lang="ts">
+  import { Select as BitsSelect, type WithoutChildren } from 'bits-ui';
+  import type { Snippet } from 'svelte';
+
+  type Props = WithoutChildren<BitsSelect.TriggerProps> & {
+    class?: string;
+    children?: Snippet;
+  };
+
+  let { children, class: className = '' }: Props = $props();
+</script>
+
+<BitsSelect.Trigger
+  class={`select outline-none focus:border-base-content/20 focus-visible:border-primary focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2 ${className}`}
+>
+  {@render children?.()}
+</BitsSelect.Trigger>
diff --git a/src/lib/components/ui/select/index.ts b/src/lib/components/ui/select/index.ts
new file mode 100644
index 0000000..96bfb56
--- /dev/null
+++ b/src/lib/components/ui/select/index.ts
@@ -0,0 +1,3 @@
+export { default as Select } from './Select.svelte';
+export { default as SelectTrigger } from './SelectTrigger.svelte';
+export { default as SelectContent } from './SelectContent.svelte';
diff --git a/src/routes/layout.css b/src/routes/layout.css
index 421361e..80ce3db 100644
--- a/src/routes/layout.css
+++ b/src/routes/layout.css
@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@import "../styles/select-motion.css";
 @plugin "@tailwindcss/forms";
 @plugin "daisyui" {
   logs: false;
diff --git a/src/styles/select-motion.css b/src/styles/select-motion.css
new file mode 100644
index 0000000..dd39b22
--- /dev/null
+++ b/src/styles/select-motion.css
@@ -0,0 +1,13 @@
+@layer components {
+  .select-motion {
+    @apply transition-all duration-200 ease-out will-change-transform;
+  }
+
+  .select-motion[data-state="open"] {
+    @apply pointer-events-auto translate-y-0 scale-100 opacity-100;
+  }
+
+  .select-motion[data-state="closed"] {
+    @apply pointer-events-none -translate-y-2 scale-95 opacity-0;
+  }
+}