feat: 实现Slect组件/样式

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>