https://rabeeui.com/_app/immutable/chunks/BNfWesrG.js

1const n=`<!--
2@component
3## 概要
4- タブ形式のナビゲーションUIを提供するコンポーネントです
5
6## 機能
7- tabsに指定した配列からタブを動的に生成します
8
9## Props
10- tabs: タブ項目の配列
11- currentTabId: 現在選択されているタブのID
12
13## Usage
14\`\`\`svelte
15<Tabs {tabs} />
16\`\`\`
17-->
18
19<script module lang="ts">
20  import type { ClassValue } from 'svelte/elements';
21  import { cva, type VariantProps } from 'class-variance-authority';
22
23  const CROSSFADE_DURATION = 300;
24
25  export const tabsVariants = cva('relative px-3 py-1.5 font-medium leading-normal text-sm outline-offset-2 outline-ring transition-colors cursor-pointer hover:bg-accent/90 focus-visible:outline-2 focus-visible:rounded-md', {
26    variants: {
27      /** 現在のタブかどうか */
28      current: {
29        true: ['text-foreground'],
30        false: ['text-muted-foreground'],
31      },
32      /** 操作できるかどうか */
33      disabled: {
34        true: ['opacity-50 pointer-events-none'],
35        false: [],
36      },
37    },
38  });
39
40  export type TabsVariants = VariantProps<typeof tabsVariants>;
41
42  export interface TabsProps extends TabsVariants {
43    /** クラス */
44    class?: ClassValue;
45    /** タブ項目の配列 */
46    tabs: TabsItem[];
47    /** タブが選択されたときのハンドラ */
48    onChange?: (tab: TabsItem) => void;
49    /** 現在選択されているタブのID */
50    currentTabId?: number | string;
51  }
52
53  export interface TabsItem {
54    /** タブ項目のID */
55    id: number | string;
56    /** タブの項目名 */
57    label: string;
58    /** 操作できるかどうか */
59    disabled?: boolean;
60  }
61<\/script>
62
63<script lang="ts">
64  import { quintOut } from 'svelte/easing';
65  import { crossfade } from 'svelte/transition';
66
67  let { class: className, tabs, onChange, currentTabId = tabs[0].id }: TabsProps = $props();
68
69  const [send, receive] = crossfade({
70    duration: CROSSFADE_DURATION,
71    easing: quintOut,
72  });
73
74  function handleChangeTab(tab: TabsItem) {
75    if (tab.disabled) return;
76    currentTabId = tab.id;
77    onChange?.(tab);
78  }
79<\/script>
80
81<div class={[className, 'flex items-center']} data-rabee-ui="tabs">
82  {#each tabs as tab}
83    <button class={tabsVariants({ current: currentTabId === tab.id, disabled: tab.disabled })} disabled={tab.disabled} onclick={() => handleChangeTab(tab)}>
84      {tab.label}
85      {#if currentTabId === tab.id}
86        <span class="absolute bottom-0 left-0 w-full h-0.5 bg-primary" in:receive={{ key: 'floating' }} out:send={{ key: 'floating' }}></span>
87      {/if}
88    </button>
89  {/each}
90</div>
91`;export{n as default};