feat: add Underline Tab component (#608)

* feat: add Underline Tab component * chore: pr fixes * chore: add .js extensions
2025-12-05 17:20:55 +01:00
parent c1920e0c02
commit eff364baa4
9 changed files with 347 additions and 0 deletions
@@ -0,0 +1,33 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+  import { useUnderlineTabs } from './underline-tabs.svelte.js';
+  import { box } from 'svelte-toolbelt';
+
+  const uid = $props.id();
+
+  let {
+    ref = $bindable(null),
+    value = $bindable(''),
+    id = uid,
+    class: className,
+    ...restProps
+  }: Omit<TabsPrimitive.RootProps, 'orientation' | 'id'> & { id?: string } = $props();
+
+  useUnderlineTabs({
+    value: box.with(
+      () => value,
+      (v) => (value = v)
+    ),
+    id: box.with(() => id)
+  });
+</script>
+
+<TabsPrimitive.Root
+  bind:ref
+  bind:value
+  orientation="horizontal"
+  data-slot="underline-tabs"
+  class={cn('ui:flex ui:flex-col ui:gap-2', className)}
+  {...restProps}
+/>