Status Select

        <!--
@component
## 概要
- StatusSelect は、ステータス選択のサンプル表示用のコンポーネントです。
選択肢ごとに異なるスタイルを適用し、選択中のステータスにはチェックマークを表示します。

## Usage
```svelte
<StatusSelect />
```
-->

<script lang="ts">
  import Select from '$lib/components/ui/atoms/Select.svelte';

  let options = [
    { label: 'ステータス1', value: 'status_1', labelClass: 'text-primary', iconClass: 'bg-primary' },
    { label: 'ステータス2', value: 'status_2', labelClass: 'text-destructive', iconClass: 'bg-destructive' },
    { label: 'ステータス3', value: 'status_3', labelClass: 'text-success', iconClass: 'bg-success' },
    { label: 'ステータス4', value: 'status_4', labelClass: 'text-subtle-foreground', iconClass: 'bg-subtle-foreground' },
  ];

  let value = $state(options[0].value);
</script>

<div class="flex flex-col items-center w-52 gap-2" data-rabee-ui="status-select">
  <Select class="flex flex-col w-full gap-4" {options} placeholder="選択してください" bind:value>
    {#snippet optionContent({ option })}
      {#if option}
        <div class="flex items-center gap-2 p-2">
          <div class="flex items-center justify-center size-4">
            <div class={['size-2 rounded-full', option.iconClass]}></div>
          </div>
          <span class={option.labelClass}>{option.label}</span>
        </div>
      {:else}
        <div class="p-2 text-muted-foreground">未選択</div>
      {/if}
    {/snippet}
  </Select>
</div>