create-windy 0.1.0

package/template/apps/web/src/components/ui/sidebar/SidebarTrigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { PanelLeftIcon } from "@lucide/vue";
+
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+import { Button } from "@/components/ui/button";
+import { useSidebar } from "./utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+  <Button
+    data-sidebar="trigger"
+    data-slot="sidebar-trigger"
+    variant="ghost"
+    size="icon-sm"
+    :class="cn('', props.class)"
+    @click="toggleSidebar"
+  >
+    <PanelLeftIcon class="cn-rtl-flip" />
+    <span class="sr-only">Toggle Sidebar</span>
+  </Button>
+</template>

package/template/apps/web/src/components/ui/sidebar/index.ts

@@ -0,0 +1,62 @@
+import type { VariantProps } from "class-variance-authority";
+import type { HTMLAttributes } from "vue";
+import { cva } from "class-variance-authority";
+
+export interface SidebarProps {
+  side?: "left" | "right";
+  variant?: "sidebar" | "floating" | "inset";
+  collapsible?: "offcanvas" | "icon" | "none";
+  class?: HTMLAttributes["class"];
+}
+
+export { default as Sidebar } from "./Sidebar.vue";
+export { default as SidebarContent } from "./SidebarContent.vue";
+export { default as SidebarFooter } from "./SidebarFooter.vue";
+export { default as SidebarGroup } from "./SidebarGroup.vue";
+export { default as SidebarGroupAction } from "./SidebarGroupAction.vue";
+export { default as SidebarGroupContent } from "./SidebarGroupContent.vue";
+export { default as SidebarGroupLabel } from "./SidebarGroupLabel.vue";
+export { default as SidebarHeader } from "./SidebarHeader.vue";
+export { default as SidebarInput } from "./SidebarInput.vue";
+export { default as SidebarInset } from "./SidebarInset.vue";
+export { default as SidebarMenu } from "./SidebarMenu.vue";
+export { default as SidebarMenuAction } from "./SidebarMenuAction.vue";
+export { default as SidebarMenuBadge } from "./SidebarMenuBadge.vue";
+export { default as SidebarMenuButton } from "./SidebarMenuButton.vue";
+export { default as SidebarMenuItem } from "./SidebarMenuItem.vue";
+export { default as SidebarMenuSkeleton } from "./SidebarMenuSkeleton.vue";
+export { default as SidebarMenuSub } from "./SidebarMenuSub.vue";
+export { default as SidebarMenuSubButton } from "./SidebarMenuSubButton.vue";
+export { default as SidebarMenuSubItem } from "./SidebarMenuSubItem.vue";
+export { default as SidebarProvider } from "./SidebarProvider.vue";
+export { default as SidebarRail } from "./SidebarRail.vue";
+export { default as SidebarSeparator } from "./SidebarSeparator.vue";
+export { default as SidebarTrigger } from "./SidebarTrigger.vue";
+
+export { useSidebar } from "./utils";
+
+export const sidebarMenuButtonVariants = cva(
+  "ring-sidebar-ring hover:bg-sidebar-accent hover:text-sidebar-accent-foreground active:bg-sidebar-accent active:text-sidebar-accent-foreground data-active:bg-primary/8 data-active:text-sidebar-foreground data-active:font-medium dark:data-active:bg-sidebar-accent dark:data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground gap-2 rounded-md p-2 text-left text-sm transition-[width,height,padding,background-color,color] group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! focus-visible:ring-2 peer/menu-button group/menu-button flex w-full items-center overflow-hidden outline-hidden disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate",
+  {
+    variants: {
+      variant: {
+        default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+        outline:
+          "bg-background hover:bg-sidebar-accent hover:text-sidebar-accent-foreground shadow-[0_0_0_1px_var(--sidebar-border)] hover:shadow-[0_0_0_1px_var(--sidebar-accent)]",
+      },
+      size: {
+        default: "h-8 text-sm",
+        sm: "h-7 text-xs",
+        lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+export type SidebarMenuButtonVariants = VariantProps<
+  typeof sidebarMenuButtonVariants
+>;

package/template/apps/web/src/components/ui/sidebar/sidebar-width.ts

@@ -0,0 +1,29 @@
+import {
+  SIDEBAR_COLLAPSE_THRESHOLD_PX,
+  SIDEBAR_WIDTH_DEFAULT_PX,
+  SIDEBAR_WIDTH_MAX_PX,
+  SIDEBAR_WIDTH_MIN_PX,
+} from "./utils";
+
+export interface SidebarResizeResult {
+  open: boolean;
+  width: number;
+}
+
+export function resolveSidebarResize(width: number): SidebarResizeResult {
+  if (!Number.isFinite(width) || width <= SIDEBAR_COLLAPSE_THRESHOLD_PX) {
+    return { open: false, width: SIDEBAR_WIDTH_MIN_PX };
+  }
+  return {
+    open: true,
+    width: Math.min(
+      SIDEBAR_WIDTH_MAX_PX,
+      Math.max(SIDEBAR_WIDTH_MIN_PX, Math.round(width)),
+    ),
+  };
+}
+
+export function restoreSidebarWidth(value: string | null): number {
+  const parsed = value ? Number.parseInt(value, 10) : SIDEBAR_WIDTH_DEFAULT_PX;
+  return resolveSidebarResize(parsed).width;
+}

package/template/apps/web/src/components/ui/sidebar/sidebar-width.webtest.ts

@@ -0,0 +1,28 @@
+import { describe, expect, test } from "vitest";
+import { SIDEBAR_WIDTH_MAX_PX, SIDEBAR_WIDTH_MIN_PX } from "./utils";
+import { resolveSidebarResize, restoreSidebarWidth } from "./sidebar-width";
+
+describe("sidebar width", () => {
+  test("拖过窄阈值后折叠", () => {
+    expect(resolveSidebarResize(160)).toEqual({
+      open: false,
+      width: SIDEBAR_WIDTH_MIN_PX,
+    });
+  });
+
+  test("展开宽度限制在最小和最大边界内", () => {
+    expect(resolveSidebarResize(161)).toEqual({
+      open: true,
+      width: SIDEBAR_WIDTH_MIN_PX,
+    });
+    expect(resolveSidebarResize(600)).toEqual({
+      open: true,
+      width: SIDEBAR_WIDTH_MAX_PX,
+    });
+  });
+
+  test("无效的持久化值恢复为安全宽度", () => {
+    expect(restoreSidebarWidth("invalid")).toBe(SIDEBAR_WIDTH_MIN_PX);
+    expect(restoreSidebarWidth(null)).toBe(256);
+  });
+});

package/template/apps/web/src/components/ui/sidebar/utils.ts

@@ -0,0 +1,26 @@
+import type { ComputedRef, Ref } from "vue";
+import { createContext } from "reka-ui";
+
+export const SIDEBAR_COOKIE_NAME = "sidebar_state";
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = "16rem";
+export const SIDEBAR_WIDTH_MOBILE = "18rem";
+export const SIDEBAR_WIDTH_ICON = "3rem";
+export const SIDEBAR_WIDTH_DEFAULT_PX = 256;
+export const SIDEBAR_WIDTH_ICON_PX = 48;
+export const SIDEBAR_WIDTH_MIN_PX = 192;
+export const SIDEBAR_WIDTH_MAX_PX = 384;
+export const SIDEBAR_COLLAPSE_THRESHOLD_PX = 160;
+export const SIDEBAR_KEYBOARD_SHORTCUT = "b";
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+  state: ComputedRef<"expanded" | "collapsed">;
+  open: Ref<boolean>;
+  setOpen: (value: boolean) => void;
+  isMobile: Ref<boolean>;
+  openMobile: Ref<boolean>;
+  setOpenMobile: (value: boolean) => void;
+  sidebarWidth: Ref<number>;
+  resizeSidebar: (width: number) => void;
+  toggleSidebar: () => void;
+}>("Sidebar");

package/template/apps/web/src/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+interface SkeletonProps {
+  class?: HTMLAttributes["class"];
+}
+
+const props = defineProps<SkeletonProps>();
+</script>
+
+<template>
+  <div
+    data-slot="skeleton"
+    :class="cn('bg-muted rounded-md animate-pulse', props.class)"
+  />
+</template>

package/template/apps/web/src/components/ui/skeleton/index.ts

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.vue";

package/template/apps/web/src/components/ui/sonner/Sonner.vue

@@ -0,0 +1,70 @@
+<script lang="ts" setup>
+import { computed } from "vue";
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+  XIcon,
+} from "@lucide/vue";
+
+import type { ToasterProps } from "vue-sonner";
+import { Toaster as Sonner } from "vue-sonner";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<ToasterProps>();
+
+const toasterProps = computed(() => {
+  const { toastOptions: _toastOptions, ...rest } = props;
+  return rest;
+});
+const resolvedToastOptions = computed(
+  () =>
+    props.toastOptions ?? {
+      classes: {
+        toast: "rounded-2xl",
+      },
+    },
+);
+</script>
+
+<template>
+  <Sonner
+    :class="cn('toaster group', props.class)"
+    :style="{
+      '--normal-bg': 'var(--popover)',
+      '--normal-text': 'var(--popover-foreground)',
+      '--normal-border': 'var(--border)',
+      '--border-radius': 'var(--radius)',
+      '--gray2': 'hsl(var(--popover) / 0.9)',
+      '--gray3': 'var(--border)',
+      '--gray4': 'var(--border)',
+      '--gray5': 'var(--border)',
+      '--gray12': 'var(--popover-foreground)',
+    }"
+    :toast-options="resolvedToastOptions"
+    v-bind="toasterProps"
+  >
+    <template #success-icon>
+      <CircleCheckIcon class="size-4" />
+    </template>
+    <template #info-icon>
+      <InfoIcon class="size-4" />
+    </template>
+    <template #warning-icon>
+      <TriangleAlertIcon class="size-4" />
+    </template>
+    <template #error-icon>
+      <OctagonXIcon class="size-4" />
+    </template>
+    <template #loading-icon>
+      <div>
+        <Loader2Icon class="size-4 animate-spin" />
+      </div>
+    </template>
+    <template #close-icon>
+      <XIcon class="size-4" />
+    </template>
+  </Sonner>
+</template>

package/template/apps/web/src/components/ui/sonner/index.ts

@@ -0,0 +1 @@
+export { default as Toaster } from "./Sonner.vue";

package/template/apps/web/src/components/ui/switch/Switch.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = withDefaults(
+  defineProps<
+    SwitchRootProps & {
+      class?: HTMLAttributes["class"];
+      size?: "sm" | "default";
+    }
+  >(),
+  {
+    size: "default",
+  },
+);
+
+const emits = defineEmits<SwitchRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class", "size");
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SwitchRoot
+    v-slot="slotProps"
+    data-slot="switch"
+    :data-size="size"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'data-[state=checked]:bg-primary data-[state=unchecked]:bg-muted-foreground/35 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 shrink-0 rounded-full border border-transparent focus-visible:ring-3 aria-invalid:ring-3 data-[size=default]:h-5 data-[size=default]:w-9 data-[size=sm]:h-4 data-[size=sm]:w-7 peer group/switch relative inline-flex items-center transition-colors outline-none after:absolute after:-inset-x-3 after:-inset-y-2 data-disabled:cursor-not-allowed data-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <SwitchThumb
+      data-slot="switch-thumb"
+      class="bg-background rounded-full shadow-xs group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 group-data-[size=default]/switch:data-[state=checked]:translate-x-4 group-data-[size=sm]/switch:data-[state=checked]:translate-x-3 group-data-[size=default]/switch:data-[state=unchecked]:translate-x-0.5 group-data-[size=sm]/switch:data-[state=unchecked]:translate-x-0.5 pointer-events-none block ring-0 transition-transform"
+    >
+      <slot name="thumb" v-bind="slotProps" />
+    </SwitchThumb>
+  </SwitchRoot>
+</template>

package/template/apps/web/src/components/ui/switch/Switch.webtest.ts

@@ -0,0 +1,23 @@
+import { describe, expect, test } from "vitest";
+import { mount } from "@vue/test-utils";
+import Switch from "./Switch.vue";
+
+describe("Switch", () => {
+  test("真实点击按 Reka data-state 更新受控状态", async () => {
+    const wrapper = mount({
+      components: { Switch },
+      data: () => ({ checked: true }),
+      template: '<Switch v-model="checked" aria-label="测试开关" />',
+    });
+    const control = wrapper.get('[role="switch"]');
+    expect(control.attributes("data-state")).toBe("checked");
+    expect(control.classes()).toContain("data-[state=checked]:bg-primary");
+
+    await control.trigger("click");
+
+    expect(control.attributes("data-state")).toBe("unchecked");
+    expect(control.classes()).toContain(
+      "data-[state=unchecked]:bg-muted-foreground/35",
+    );
+  });
+});

package/template/apps/web/src/components/ui/switch/index.ts

@@ -0,0 +1 @@
+export { default as Switch } from "./Switch.vue";

package/template/apps/web/src/components/ui/table/Table.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <div data-slot="table-container" class="relative w-full overflow-x-auto">
+    <table
+      data-slot="table"
+      :class="cn('w-full caption-bottom text-sm', props.class)"
+    >
+      <slot />
+    </table>
+  </div>
+</template>

package/template/apps/web/src/components/ui/table/TableBody.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <tbody
+    data-slot="table-body"
+    :class="cn('[&_tr:last-child]:border-0', props.class)"
+  >
+    <slot />
+  </tbody>
+</template>

package/template/apps/web/src/components/ui/table/TableCaption.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <caption
+    data-slot="table-caption"
+    :class="cn('text-muted-foreground mt-4 text-sm', props.class)"
+  >
+    <slot />
+  </caption>
+</template>

package/template/apps/web/src/components/ui/table/TableCell.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <td
+    data-slot="table-cell"
+    :class="
+      cn(
+        'p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </td>
+</template>

package/template/apps/web/src/components/ui/table/TableEmpty.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { cn } from "@/lib/utils";
+import TableCell from "./TableCell.vue";
+import TableRow from "./TableRow.vue";
+
+const props = withDefaults(
+  defineProps<{
+    class?: HTMLAttributes["class"];
+    colspan?: number;
+  }>(),
+  {
+    colspan: 1,
+  },
+);
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <TableRow>
+    <TableCell
+      :class="
+        cn(
+          'p-4 whitespace-nowrap align-middle text-sm text-foreground',
+          props.class,
+        )
+      "
+      v-bind="delegatedProps"
+    >
+      <div class="flex items-center justify-center py-10">
+        <slot />
+      </div>
+    </TableCell>
+  </TableRow>
+</template>

package/template/apps/web/src/components/ui/table/TableFooter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <tfoot
+    data-slot="table-footer"
+    :class="
+      cn('bg-muted/50 border-t font-medium [&>tr]:last:border-b-0', props.class)
+    "
+  >
+    <slot />
+  </tfoot>
+</template>

package/template/apps/web/src/components/ui/table/TableHead.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <th
+    data-slot="table-head"
+    :class="
+      cn(
+        'text-foreground h-10 px-2 text-left align-middle font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </th>
+</template>

package/template/apps/web/src/components/ui/table/TableHeader.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <thead data-slot="table-header" :class="cn('[&_tr]:border-b', props.class)">
+    <slot />
+  </thead>
+</template>

package/template/apps/web/src/components/ui/table/TableRow.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from "vue";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"];
+}>();
+</script>
+
+<template>
+  <tr
+    data-slot="table-row"
+    :class="
+      cn(
+        'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors has-aria-expanded:bg-muted/50',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </tr>
+</template>

package/template/apps/web/src/components/ui/table/index.ts

@@ -0,0 +1,9 @@
+export { default as Table } from "./Table.vue";
+export { default as TableBody } from "./TableBody.vue";
+export { default as TableCaption } from "./TableCaption.vue";
+export { default as TableCell } from "./TableCell.vue";
+export { default as TableEmpty } from "./TableEmpty.vue";
+export { default as TableFooter } from "./TableFooter.vue";
+export { default as TableHead } from "./TableHead.vue";
+export { default as TableHeader } from "./TableHeader.vue";
+export { default as TableRow } from "./TableRow.vue";

package/template/apps/web/src/components/ui/table/utils.ts

@@ -0,0 +1,10 @@
+import type { Updater } from "@tanstack/vue-table";
+
+import type { Ref } from "vue";
+import { isFunction } from "@tanstack/vue-table";
+
+export function valueUpdater<T>(updaterOrValue: Updater<T>, ref: Ref<T>) {
+  ref.value = isFunction(updaterOrValue)
+    ? updaterOrValue(ref.value)
+    : updaterOrValue;
+}

package/template/apps/web/src/components/ui/tabs/Tabs.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { TabsRootEmits, TabsRootProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsRoot, useForwardPropsEmits } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  TabsRootProps & { class?: HTMLAttributes["class"] }
+>();
+const emits = defineEmits<TabsRootEmits>();
+
+const delegatedProps = reactiveOmit(props, "class");
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <TabsRoot
+    v-slot="slotProps"
+    data-slot="tabs"
+    :data-orientation="forwarded.orientation || 'horizontal'"
+    v-bind="forwarded"
+    :class="cn('gap-2 group/tabs flex data-horizontal:flex-col', props.class)"
+  >
+    <slot v-bind="slotProps" />
+  </TabsRoot>
+</template>

package/template/apps/web/src/components/ui/tabs/TabsContent.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { TabsContentProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsContent } from "reka-ui";
+import { cn } from "@/lib/utils";
+
+const props = defineProps<
+  TabsContentProps & { class?: HTMLAttributes["class"] }
+>();
+
+const delegatedProps = reactiveOmit(props, "class");
+</script>
+
+<template>
+  <TabsContent
+    data-slot="tabs-content"
+    :class="cn('text-sm flex-1 outline-none', props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot />
+  </TabsContent>
+</template>

package/template/apps/web/src/components/ui/tabs/TabsList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { TabsListProps } from "reka-ui";
+import type { HTMLAttributes } from "vue";
+import type { TabsListVariants } from ".";
+import { reactiveOmit } from "@vueuse/core";
+import { TabsList } from "reka-ui";
+import { cn } from "@/lib/utils";
+import { tabsListVariants } from ".";
+
+const props = withDefaults(
+  defineProps<
+    TabsListProps & {
+      class?: HTMLAttributes["class"];
+      variant?: TabsListVariants["variant"];
+    }
+  >(),
+  {
+    variant: "default",
+  },
+);
+
+const delegatedProps = reactiveOmit(props, "class", "variant");
+</script>
+
+<template>
+  <TabsList
+    data-slot="tabs-list"
+    :data-variant="variant"
+    v-bind="delegatedProps"
+    :class="cn(tabsListVariants({ variant }), props.class)"
+  >
+    <slot />
+  </TabsList>
+</template>