diff options
Diffstat (limited to 'frontend/src/lib/components/ui/tabs/tabs-list.svelte')
| -rw-r--r-- | frontend/src/lib/components/ui/tabs/tabs-list.svelte | 40 |
1 files changed, 40 insertions, 0 deletions
diff --git a/frontend/src/lib/components/ui/tabs/tabs-list.svelte b/frontend/src/lib/components/ui/tabs/tabs-list.svelte new file mode 100644 index 0000000..4445c0f --- /dev/null +++ b/frontend/src/lib/components/ui/tabs/tabs-list.svelte @@ -0,0 +1,40 @@ +<script lang="ts" module> + import { tv, type VariantProps } from "tailwind-variants"; + + export const tabsListVariants = tv({ + base: "rounded-lg p-[3px] group-data-horizontal/tabs:h-8 data-[variant=line]:rounded-none group/tabs-list inline-flex w-fit items-center justify-center text-muted-foreground group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col", + variants: { + variant: { + default: "bg-muted", + line: "gap-1 bg-transparent", + }, + }, + defaultVariants: { + variant: "default", + }, + }); + + export type TabsListVariant = VariantProps<typeof tabsListVariants>["variant"]; +</script> + +<script lang="ts"> + import { Tabs as TabsPrimitive } from "bits-ui"; + import { cn } from "$lib/utils.js"; + + let { + ref = $bindable(null), + variant = "default", + class: className, + ...restProps + }: TabsPrimitive.ListProps & { + variant?: TabsListVariant; + } = $props(); +</script> + +<TabsPrimitive.List + bind:ref + data-slot="tabs-list" + data-variant={variant} + class={cn(tabsListVariants({ variant }), className)} + {...restProps} +/> |