feat: add Underline Tab component (#608)

* feat: add Underline Tab component

* chore: pr fixes

* chore: add .js extensions

packages/storybook/src/atoms/underline-tabs/fields.ts

@@ -0,0 +1 @@
+export const FIELDS = ['value', 'onValueChange', 'loop', 'disabled'] as string[];

packages/storybook/src/atoms/underline-tabs/underline-tabs.stories.svelte

@@ -0,0 +1,107 @@
+<script module>
+  import { UnderlineTabs } from '@cio/ui';
+  import { defineMeta } from '@storybook/addon-svelte-csf';
+  import { FIELDS } from './fields';
+
+  const { Story } = defineMeta({
+    title: 'Molecules/UnderlineTabs',
+    component: UnderlineTabs.Root,
+    parameters: {
+      layout: 'centered',
+      controls: {
+        include: FIELDS
+      }
+    },
+    argTypes: {
+      value: {
+        control: 'text',
+        description: 'The value of the currently selected tab',
+        table: { defaultValue: { summary: 'undefined' } }
+      },
+      onValueChange: {
+        control: false,
+        description: 'Callback function called when the selected tab changes',
+        table: {
+          type: { summary: '(value: string) => void' },
+          defaultValue: { summary: 'undefined' }
+        }
+      },
+      loop: {
+        control: 'boolean',
+        description: 'Whether tab navigation should loop',
+        table: { defaultValue: { summary: 'true' } }
+      },
+      disabled: {
+        control: 'boolean',
+        description: 'Whether the tabs are disabled',
+        table: { defaultValue: { summary: 'false' } }
+      }
+    },
+    tags: ['autodocs']
+  });
+</script>
+
+<Story name="Default">
+  {#snippet template(args)}
+    <div class="ui:w-[400px]">
+      <UnderlineTabs.Root {...args} value="home">
+        <UnderlineTabs.List>
+          <UnderlineTabs.Trigger value="home">Home</UnderlineTabs.Trigger>
+          <UnderlineTabs.Trigger value="profile">Profile</UnderlineTabs.Trigger>
+          <UnderlineTabs.Trigger value="settings">Settings</UnderlineTabs.Trigger>
+        </UnderlineTabs.List>
+        <UnderlineTabs.Content value="home">
+          <div class="ui:py-4">
+            <h3 class="ui:mb-2 ui:text-lg ui:font-semibold">Home Content</h3>
+            <p class="ui:text-muted-foreground ui:text-sm">
+              Welcome to the home tab. This is where your main content lives.
+            </p>
+          </div>
+        </UnderlineTabs.Content>
+        <UnderlineTabs.Content value="profile">
+          <div class="ui:py-4">
+            <h3 class="ui:mb-2 ui:text-lg ui:font-semibold">Profile Content</h3>
+            <p class="ui:text-muted-foreground ui:text-sm">
+              Manage your profile settings and personal information here.
+            </p>
+          </div>
+        </UnderlineTabs.Content>
+        <UnderlineTabs.Content value="settings">
+          <div class="ui:py-4">
+            <h3 class="ui:mb-2 ui:text-lg ui:font-semibold">Settings Content</h3>
+            <p class="ui:text-muted-foreground ui:text-sm">Configure your application settings and preferences.</p>
+          </div>
+        </UnderlineTabs.Content>
+      </UnderlineTabs.Root>
+    </div>
+  {/snippet}
+</Story>
+
+<Story name="Disabled Tab">
+  {#snippet template(args)}
+    <div class="w-[400px]">
+      <UnderlineTabs.Root {...args} value="home">
+        <UnderlineTabs.List>
+          <UnderlineTabs.Trigger value="home">Home</UnderlineTabs.Trigger>
+          <UnderlineTabs.Trigger value="profile">Profile</UnderlineTabs.Trigger>
+          <UnderlineTabs.Trigger value="settings" disabled>Settings</UnderlineTabs.Trigger>
+        </UnderlineTabs.List>
+        <UnderlineTabs.Content value="home">
+          <div class="py-4">
+            <p class="text-muted-foreground text-sm">Home content is shown here.</p>
+          </div>
+        </UnderlineTabs.Content>
+        <UnderlineTabs.Content value="profile">
+          <div class="py-4">
+            <p class="text-muted-foreground text-sm">Profile content is shown here.</p>
+          </div>
+        </UnderlineTabs.Content>
+        <UnderlineTabs.Content value="settings">
+          <div class="py-4">
+            <p class="text-muted-foreground text-sm">Settings content (disabled).</p>
+          </div>
+        </UnderlineTabs.Content>
+      </UnderlineTabs.Root>
+    </div>
+  {/snippet}
+</Story>

packages/ui/src/custom/underline-tabs/index.ts

@@ -0,0 +1,16 @@
+import Root from './underline-tabs.svelte';
+import Content from './underline-tabs-content.svelte';
+import List from './underline-tabs-list.svelte';
+import Trigger from './underline-tabs-trigger.svelte';
+
+export {
+	Root,
+	Content,
+	List,
+	Trigger,
+	//
+	Root as UnderlineTabs,
+	Content as UnderlineTabsContent,
+	List as UnderlineTabsList,
+	Trigger as UnderlineTabsTrigger
+};

packages/ui/src/custom/underline-tabs/underline-tabs-content.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+
+  let { ref = $bindable(null), class: className, ...restProps }: TabsPrimitive.ContentProps = $props();
+</script>
+
+<TabsPrimitive.Content
+  bind:ref
+  data-slot="underline-tabs-content"
+  class={cn('ui:flex-1 ui:outline-none', className)}
+  {...restProps}
+/>

packages/ui/src/custom/underline-tabs/underline-tabs-list.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+
+  let { ref = $bindable(null), class: className, children, ...restProps }: TabsPrimitive.ListProps = $props();
+</script>
+
+<TabsPrimitive.List
+  bind:ref
+  data-slot="underline-tabs-list"
+  class={cn(
+    'ui:text-muted-foreground ui:border-border ui:relative ui:inline-flex ui:h-9 ui:w-full ui:max-w-full ui:items-center ui:justify-start ui:overflow-x-auto ui:border-b',
+    className
+  )}
+  {...restProps}
+>
+  {@render children?.()}
+</TabsPrimitive.List>
+
+<style>
+  :global([data-slot='underline-tabs-list']) {
+    -ms-overflow-style: none; /* IE and Edge */
+    scrollbar-width: none; /* Firefox */
+  }
+
+  :global([data-slot='underline-tabs-list']::-webkit-scrollbar) {
+    display: none;
+  }
+</style>

packages/ui/src/custom/underline-tabs/underline-tabs-trigger.svelte

@@ -0,0 +1,59 @@
+<script lang="ts">
+  import { Tabs as TabsPrimitive } from 'bits-ui';
+  import { cn } from '../../tools';
+  import { receive, send, useUnderlineTabsTrigger } from './underline-tabs.svelte.js';
+  import { box } from 'svelte-toolbelt';
+
+  let {
+    ref = $bindable(null),
+    value,
+    class: className,
+    onmouseenter,
+    onmouseleave,
+    onfocus,
+    onblur,
+    children,
+    ...restProps
+  }: TabsPrimitive.TriggerProps = $props();
+
+  const state = useUnderlineTabsTrigger({
+    value: box.with(() => value),
+    onmouseenter: box.with(() => onmouseenter),
+    onmouseleave: box.with(() => onmouseleave),
+    onfocus: box.with(() => onfocus),
+    onblur: box.with(() => onblur)
+  });
+</script>
+
+<div class="ui:relative ui:h-full">
+  <TabsPrimitive.Trigger
+    bind:ref
+    data-slot="underline-tabs-trigger"
+    class={cn(
+      "dark:data-[state=active]:text-foreground data-[state=active]:text-foreground ui:text-muted-foreground ui:z-10 ui:relative ui:inline-flex ui:h-[calc(100%-3px)] ui:flex-1 ui:items-center ui:justify-center ui:gap-1.5 ui:whitespace-nowrap ui:px-3 ui:py-1 ui:text-sm ui:font-medium ui:transition-colors ui:focus:outline-none ui:disabled:pointer-events-none ui:disabled:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+      state.rootState.isHovered && state.rootState.hoveredTab === value && 'data-[state=inactive]:text-foreground!',
+      className
+    )}
+    {...state.props}
+    {...restProps}
+  >
+    {@render children?.()}
+  </TabsPrimitive.Trigger>
+  {#if state.rootState.hoveredTab === value}
+    <div
+      class={cn(
+        'ui:bg-accent ui:z-1 ui:absolute ui:top-0 ui:h-[calc(100%-3px)] ui:w-full ui:rounded-md ui:opacity-0 ui:transition-opacity ui:duration-300 ui:pointer-events-none peer-focus-visible:ui:opacity-100',
+        state.rootState.isHovered && 'ui:opacity-100'
+      )}
+      in:receive={{ key: `${state.rootState.opts.id.current}-tab-hover`, duration: 300 }}
+      out:send={{ key: `${state.rootState.opts.id.current}-tab-hover`, duration: 300 }}
+    ></div>
+  {/if}
+  {#if state.rootState.opts.value.current === value}
+    <div
+      class="ui:bg-primary ui:z-1 ui:absolute ui:-bottom-px ui:h-0.5 ui:w-full ui:pointer-events-none"
+      in:receive={{ key: `${state.rootState.opts.id.current}-tab-active-border`, duration: 200 }}
+      out:send={{ key: `${state.rootState.opts.id.current}-tab-active-border`, duration: 200 }}
+    ></div>
+  {/if}
+</div>

packages/ui/src/custom/underline-tabs/underline-tabs.svelte

@@ -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}
+/>

packages/ui/src/custom/underline-tabs/underline-tabs.svelte.ts

@@ -0,0 +1,88 @@
+import { Context } from 'runed';
+import type { ReadableBoxedValues, WritableBoxedValues } from 'svelte-toolbelt';
+import type { Tabs as TabsPrimitive } from 'bits-ui';
+import { crossfade } from 'svelte/transition';
+
+export const [send, receive] = crossfade({
+	duration: (d) => Math.sqrt(d * 200)
+});
+
+type UnderlineTabsRootProps = WritableBoxedValues<{
+	value: string;
+}> &
+	ReadableBoxedValues<{
+		id: string;
+	}>;
+
+class UnderlineTabsRootState {
+	hoveredTab = $state<string | null>(null);
+	isHovered = $state(false);
+	constructor(readonly opts: UnderlineTabsRootProps) {
+		this.hoveredTab = this.opts.value.current;
+	}
+}
+
+type UnderlineTabsTriggerProps = ReadableBoxedValues<{
+	value: string;
+	onmouseenter: TabsPrimitive.TriggerProps['onmouseenter'];
+	onmouseleave: TabsPrimitive.TriggerProps['onmouseleave'];
+	onfocus: TabsPrimitive.TriggerProps['onfocus'];
+	onblur: TabsPrimitive.TriggerProps['onblur'];
+}>;
+
+class UnderlineTabsTriggerState {
+	constructor(
+		readonly opts: UnderlineTabsTriggerProps,
+		readonly rootState: UnderlineTabsRootState
+	) {}
+
+	handleFocus() {
+		this.rootState.isHovered = true;
+		this.rootState.hoveredTab = this.opts.value.current;
+	}
+
+	handleBlur() {
+		if (this.rootState.hoveredTab === this.opts.value.current) {
+			this.rootState.isHovered = false;
+		}
+	}
+
+	onmouseenter(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseenter']>>[0]) {
+		this.handleFocus();
+		this.opts.onmouseenter.current?.(e);
+	}
+
+	onmouseleave(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onmouseleave']>>[0]) {
+		this.handleBlur();
+		this.opts.onmouseleave.current?.(e);
+	}
+
+	onfocus(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onfocus']>>[0]) {
+		this.handleFocus();
+		this.opts.onfocus.current?.(e);
+	}
+
+	onblur(e: Parameters<NonNullable<TabsPrimitive.TriggerProps['onblur']>>[0]) {
+		this.handleBlur();
+
+		this.opts.onblur.current?.(e);
+	}
+
+	props = $derived.by(() => ({
+		value: this.opts.value.current,
+		onmouseenter: this.onmouseenter.bind(this),
+		onmouseleave: this.onmouseleave.bind(this),
+		onfocus: this.onfocus.bind(this),
+		onblur: this.onblur.bind(this)
+	}));
+}
+
+const ctx = new Context<UnderlineTabsRootState>('underline-tabs-root-ctx');
+
+export function useUnderlineTabs(opts: UnderlineTabsRootProps) {
+	return ctx.set(new UnderlineTabsRootState(opts));
+}
+
+export function useUnderlineTabsTrigger(opts: UnderlineTabsTriggerProps) {
+	return new UnderlineTabsTriggerState(opts, ctx.get());
+}

packages/ui/src/index.ts

@@ -49,5 +49,6 @@ export { BarChart, LineChart, AreaChart, PieChart, scaleBand } from './base/char
 
 export * from './tools';
 
+export * as UnderlineTabs from './custom/underline-tabs';
 export * from './custom/editor/ui';
 export * as ImageCropper from './custom/image-cropper';