@aleph-alpha/ui-library 1.13.0 → 1.14.0

package/src/components/UiStepper/__tests__/UiStepper.test.ts

@@ -0,0 +1,167 @@
+import '@testing-library/jest-dom/vitest';
+import { render, waitFor } from '@testing-library/vue';
+import userEvent from '@testing-library/user-event';
+import { describe, expect, test, vi } from 'vitest';
+import { ref } from 'vue';
+import {
+  UiStepper,
+  UiStepperItem,
+  UiStepperTrigger,
+  UiStepperIndicator,
+  UiStepperTitle,
+  UiStepperDescription,
+  UiStepperSeparator,
+} from '../index';
+
+const components = {
+  UiStepper,
+  UiStepperItem,
+  UiStepperTrigger,
+  UiStepperIndicator,
+  UiStepperTitle,
+  UiStepperDescription,
+  UiStepperSeparator,
+};
+
+const stepperTemplate = `
+  <UiStepper v-bind="stepperProps" v-on="stepperEvents">
+    <UiStepperItem :step="1">
+      <UiStepperTrigger>
+        <UiStepperIndicator>1</UiStepperIndicator>
+        <UiStepperTitle>Step 1</UiStepperTitle>
+      </UiStepperTrigger>
+      <UiStepperSeparator />
+    </UiStepperItem>
+    <UiStepperItem :step="2">
+      <UiStepperTrigger>
+        <UiStepperIndicator>2</UiStepperIndicator>
+        <UiStepperTitle>Step 2</UiStepperTitle>
+      </UiStepperTrigger>
+      <UiStepperSeparator />
+    </UiStepperItem>
+    <UiStepperItem :step="3">
+      <UiStepperTrigger>
+        <UiStepperIndicator>3</UiStepperIndicator>
+        <UiStepperTitle>Step 3</UiStepperTitle>
+      </UiStepperTrigger>
+    </UiStepperItem>
+  </UiStepper>
+`;
+
+describe('UiStepper', () => {
+  test('activates step specified by defaultValue prop', () => {
+    const { getAllByRole } = render({
+      components,
+      template: stepperTemplate,
+      setup() {
+        return { stepperProps: { defaultValue: 2, linear: false }, stepperEvents: {} };
+      },
+    });
+
+    const triggers = getAllByRole('button');
+    expect(triggers[0]).toHaveAttribute('data-state', 'completed');
+    expect(triggers[1]).toHaveAttribute('data-state', 'active');
+    expect(triggers[2]).toHaveAttribute('data-state', 'inactive');
+  });
+
+  test('emits update:modelValue when a step trigger is clicked', async () => {
+    const user = userEvent.setup();
+    const onUpdateModelValue = vi.fn();
+
+    const { getAllByRole } = render({
+      components,
+      template: stepperTemplate,
+      setup() {
+        return {
+          stepperProps: { defaultValue: 1, linear: false },
+          stepperEvents: { 'update:modelValue': onUpdateModelValue },
+        };
+      },
+    });
+
+    const triggers = getAllByRole('button');
+    expect(triggers.length).toBe(3);
+
+    await user.click(triggers[1]);
+
+    expect(onUpdateModelValue).toHaveBeenCalledWith(2);
+  });
+
+  test('reflects controlled modelValue and updates when it changes', async () => {
+    const modelValue = ref(1);
+
+    const { getAllByRole } = render({
+      components,
+      template: `
+        <UiStepper v-model="modelValue" :linear="false">
+          <UiStepperItem :step="1">
+            <UiStepperTrigger>
+              <UiStepperIndicator>1</UiStepperIndicator>
+              <UiStepperTitle>Step 1</UiStepperTitle>
+            </UiStepperTrigger>
+            <UiStepperSeparator />
+          </UiStepperItem>
+          <UiStepperItem :step="2">
+            <UiStepperTrigger>
+              <UiStepperIndicator>2</UiStepperIndicator>
+              <UiStepperTitle>Step 2</UiStepperTitle>
+            </UiStepperTrigger>
+          </UiStepperItem>
+        </UiStepper>
+      `,
+      setup() {
+        return { modelValue };
+      },
+    });
+
+    const triggers = getAllByRole('button');
+    expect(triggers[0]).toHaveAttribute('data-state', 'active');
+    expect(triggers[1]).toHaveAttribute('data-state', 'inactive');
+
+    modelValue.value = 2;
+
+    await waitFor(() => {
+      expect(triggers[0]).toHaveAttribute('data-state', 'completed');
+      expect(triggers[1]).toHaveAttribute('data-state', 'active');
+    });
+  });
+
+  test('does not activate a disabled step when clicked', async () => {
+    const user = userEvent.setup();
+    const onUpdateModelValue = vi.fn();
+
+    const { getAllByRole } = render({
+      components,
+      template: `
+        <UiStepper :default-value="1" :linear="false" @update:modelValue="onUpdateModelValue">
+          <UiStepperItem :step="1">
+            <UiStepperTrigger>
+              <UiStepperIndicator>1</UiStepperIndicator>
+              <UiStepperTitle>Step 1</UiStepperTitle>
+            </UiStepperTrigger>
+            <UiStepperSeparator />
+          </UiStepperItem>
+          <UiStepperItem :step="2" :disabled="true">
+            <UiStepperTrigger>
+              <UiStepperIndicator>2</UiStepperIndicator>
+              <UiStepperTitle>Step 2</UiStepperTitle>
+            </UiStepperTrigger>
+          </UiStepperItem>
+        </UiStepper>
+      `,
+      setup() {
+        return { onUpdateModelValue };
+      },
+    });
+
+    const triggers = getAllByRole('button', { hidden: true });
+    const step2Trigger = triggers[1];
+    expect(step2Trigger).toBeDisabled();
+
+    await user.click(step2Trigger);
+
+    expect(triggers[0]).toHaveAttribute('data-state', 'active');
+    expect(step2Trigger).toHaveAttribute('data-state', 'inactive');
+    expect(onUpdateModelValue).not.toHaveBeenCalledWith(2);
+  });
+});

package/src/components/UiStepper/index.ts

@@ -0,0 +1,9 @@
+export { default as UiStepper } from './UiStepper.vue';
+export { default as UiStepperItem } from './UiStepperItem.vue';
+export { default as UiStepperTrigger } from './UiStepperTrigger.vue';
+export { default as UiStepperIndicator } from './UiStepperIndicator.vue';
+export { default as UiStepperTitle } from './UiStepperTitle.vue';
+export { default as UiStepperDescription } from './UiStepperDescription.vue';
+export { default as UiStepperSeparator } from './UiStepperSeparator.vue';
+
+export * from './types';

package/src/components/UiStepper/types.ts

@@ -0,0 +1,65 @@
+/** Orientation of the stepper layout. */
+export type UiStepperOrientation = 'horizontal' | 'vertical';
+
+/**
+ * A step-by-step navigation component for multi-step workflows. Use for
+ * wizards, checkout flows, onboarding sequences, or any process with
+ * sequential steps.
+ *
+ * @category Navigation
+ * @useCases wizard, checkout flow, onboarding, multi-step form, progress tracker
+ * @keywords stepper, steps, wizard, progress, sequential, workflow, multi-step
+ * @related UiProgress, UiTabs
+ */
+export type UiStepperProps = {
+  /**
+   * The controlled value of the active step.
+   * - Omit for uncontrolled mode (uses defaultValue)
+   * - Use `v-model` for controlled mode
+   * @example
+   * ```vue
+   * <!-- Uncontrolled -->
+   * <UiStepper :default-value="1">...</UiStepper>
+   *
+   * <!-- Controlled -->
+   * <UiStepper v-model="currentStep">...</UiStepper>
+   * ```
+   */
+  modelValue?: number;
+  /**
+   * The step that should be active when initially rendered (uncontrolled mode).
+   * @default 1
+   */
+  defaultValue?: number;
+  /** The orientation of the stepper layout. */
+  orientation?: UiStepperOrientation;
+  /**
+   * Whether navigation must be sequential (user cannot skip ahead to incomplete steps).
+   * @default true
+   */
+  linear?: boolean;
+};
+
+/**
+ * Props for the UiStepperTrigger component.
+ */
+export type UiStepperTriggerProps = {
+  /**
+   * Renders as the child element instead of the default trigger button.
+   * Use with UiIconButton or UiButton to customize the trigger appearance.
+   * @default false
+   */
+  asChild?: boolean;
+};
+
+/**
+ * Props for the UiStepperItem component.
+ */
+export type UiStepperItemProps = {
+  /** The step number this item represents (required). */
+  step: number;
+  /** Whether this step is disabled and cannot be navigated to. */
+  disabled?: boolean;
+  /** Whether this step is marked as completed. */
+  completed?: boolean;
+};

package/src/components/core/alert/index.ts

@@ -10,9 +10,9 @@ export const alertVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-popover text-popover-foreground',
+        default: 'bg-background-surface-muted text-content-on-surface-primary',
         destructive:
-          'text-destructive bg-popover [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
+          'text-destructive bg-background-surface-muted [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',
       },
     },
     defaultVariants: {

package/src/components/core/alert-dialog/AlertDialogContent.vue

@@ -33,7 +33,7 @@
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border p-6 shadow-lg duration-200 sm:max-w-lg',
+          'bg-background-surface-modal data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-lg border border-border-surface-default p-6 shadow-lg duration-200 sm:max-w-lg',
           props.class,
         )
       "

package/src/components/core/card/Card.vue

@@ -12,7 +12,7 @@
     data-slot="card"
     :class="
       cn(
-        'bg-popover text-popover-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        'bg-background-surface-muted text-content-on-surface-primary flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
         props.class,
       )
     "

package/src/components/core/drawer/DrawerContent.vue

@@ -36,7 +36,7 @@
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-popover data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:slide-out-to-bottom-2 fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-lg border shadow-lg duration-200',
+          'bg-background-surface-modal data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=open]:slide-in-from-bottom-2 data-[state=closed]:slide-out-to-bottom-2 fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-lg border border-border-surface-default shadow-lg duration-200',
           props.class,
         )
       "

package/src/components/core/dropdown-menu/DropdownMenuContent.vue

@@ -29,7 +29,7 @@
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border p-1 shadow-md',
+          'bg-background-surface-floating text-content-on-surface-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 max-h-(--reka-dropdown-menu-content-available-height) min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border border-border-surface-default p-1 shadow-xs',
           props.class,
         )
       "

package/src/components/core/dropdown-menu/DropdownMenuSubContent.vue

@@ -19,7 +19,7 @@
     v-bind="forwarded"
     :class="
       cn(
-        'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+        'bg-background-surface-floating text-content-on-surface-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 min-w-[8rem] origin-(--reka-dropdown-menu-content-transform-origin) overflow-hidden rounded-md border border-border-surface-default p-1 shadow-xs',
         props.class,
       )
     "

package/src/components/core/input/Input.vue

@@ -25,7 +25,7 @@
     data-slot="input"
     :class="
       cn(
-        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input h-9 w-full min-w-0 rounded-md border bg-input-background px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
+        'file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground border-input h-9 w-full min-w-0 rounded-md border bg-background-input-default px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm',
         'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
         'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
         props.class,

package/src/components/core/native-select/NativeSelect.vue

@@ -37,7 +37,7 @@
       data-slot="native-select"
       :class="
         cn(
-          'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground h-9 w-full min-w-0 appearance-none rounded-md border bg-input-background px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+          'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground h-9 w-full min-w-0 appearance-none rounded-md border bg-background-input-default px-3 py-2 pr-9 text-sm shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
           'focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]',
           'aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive',
           props.class,

package/src/components/core/native-select/NativeSelectOptGroup.vue

@@ -11,7 +11,7 @@
 <template>
   <optgroup
     data-slot="native-select-optgroup"
-    :class="cn('bg-popover text-popover-foreground', props.class)"
+    :class="cn('bg-background-surface-floating text-content-on-surface-primary', props.class)"
   >
     <slot />
   </optgroup>

package/src/components/core/native-select/NativeSelectOption.vue

@@ -11,7 +11,7 @@
 <template>
   <option
     data-slot="native-select-option"
-    :class="cn('bg-popover text-popover-foreground', props.class)"
+    :class="cn('bg-background-surface-floating text-content-on-surface-primary', props.class)"
   >
     <slot />
   </option>

package/src/components/core/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+  import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'reka-ui';
+  import { NavigationMenuRoot, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import NavigationMenuViewport from './NavigationMenuViewport.vue';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = withDefaults(
+    defineProps<
+      NavigationMenuRootProps & {
+        viewport?: boolean;
+      }
+    >(),
+    {
+      viewport: true,
+    },
+  );
+  const emits = defineEmits<NavigationMenuRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <NavigationMenuRoot
+    v-slot="slotProps"
+    data-slot="navigation-menu"
+    :data-viewport="viewport"
+    v-bind="{ ...forwarded, ...$attrs }"
+    :class="
+      cn(
+        'group/navigation-menu relative flex max-w-max flex-1 items-center justify-center',
+        $attrs.class ?? '',
+      )
+    "
+  >
+    <slot v-bind="slotProps" />
+    <NavigationMenuViewport v-if="viewport" />
+  </NavigationMenuRoot>
+</template>

package/src/components/core/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+  import type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'reka-ui';
+  import { NavigationMenuContent, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuContentProps>();
+  const emits = defineEmits<NavigationMenuContentEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <NavigationMenuContent
+    data-slot="navigation-menu-content"
+    v-bind="{ ...forwarded, ...$attrs }"
+    :class="
+      cn(
+        'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+        'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+        $attrs.class ?? '',
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuContent>
+</template>

package/src/components/core/navigation-menu/NavigationMenuIndicator.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import type { NavigationMenuIndicatorProps } from 'reka-ui';
+  import { NavigationMenuIndicator, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuIndicatorProps>();
+
+  const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <NavigationMenuIndicator
+    data-slot="navigation-menu-indicator"
+    v-bind="{ ...forwardedProps, ...$attrs }"
+    :class="
+      cn(
+        'data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden',
+        $attrs.class ?? '',
+      )
+    "
+  >
+    <div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+  </NavigationMenuIndicator>
+</template>

package/src/components/core/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+  import type { NavigationMenuItemProps } from 'reka-ui';
+  import { NavigationMenuItem } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuItemProps>();
+</script>
+
+<template>
+  <NavigationMenuItem
+    data-slot="navigation-menu-item"
+    v-bind="{ ...props, ...$attrs }"
+    :class="cn('relative', $attrs.class ?? '')"
+  >
+    <slot />
+  </NavigationMenuItem>
+</template>

package/src/components/core/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'reka-ui';
+  import { NavigationMenuLink, useForwardPropsEmits } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuLinkProps>();
+  const emits = defineEmits<NavigationMenuLinkEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <NavigationMenuLink
+    data-slot="navigation-menu-link"
+    v-bind="{ ...forwarded, ...$attrs }"
+    :class="
+      cn(
+        'data-[active]:focus:bg-accent data-[active]:hover:bg-accent data-[active]:bg-accent/50 data-[active]:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\'size-\'])]:size-4',
+        $attrs.class ?? '',
+      )
+    "
+  >
+    <slot />
+  </NavigationMenuLink>
+</template>

package/src/components/core/navigation-menu/NavigationMenuList.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+  import type { NavigationMenuListProps } from 'reka-ui';
+  import { NavigationMenuList, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuListProps>();
+
+  const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <NavigationMenuList
+    data-slot="navigation-menu-list"
+    v-bind="{ ...forwardedProps, ...$attrs }"
+    :class="cn('group flex flex-1 list-none items-center justify-center gap-1', $attrs.class ?? '')"
+  >
+    <slot />
+  </NavigationMenuList>
+</template>

package/src/components/core/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+  import type { NavigationMenuTriggerProps } from 'reka-ui';
+  import { ChevronDown } from 'lucide-vue-next';
+  import { NavigationMenuTrigger, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+  import { navigationMenuTriggerStyle } from '.';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuTriggerProps>();
+
+  const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <NavigationMenuTrigger
+    data-slot="navigation-menu-trigger"
+    v-bind="{ ...forwardedProps, ...$attrs }"
+    :class="cn(navigationMenuTriggerStyle(), 'group', $attrs.class ?? '')"
+  >
+    <slot />
+    <ChevronDown
+      class="relative top-[1px] ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180"
+      aria-hidden="true"
+    />
+  </NavigationMenuTrigger>
+</template>

package/src/components/core/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+  import type { NavigationMenuViewportProps } from 'reka-ui';
+  import { NavigationMenuViewport, useForwardProps } from 'reka-ui';
+  import { cn } from '@/lib/utils';
+
+  defineOptions({ inheritAttrs: false });
+
+  const props = defineProps<NavigationMenuViewportProps>();
+
+  const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <div class="absolute top-full left-0 isolate z-50 flex justify-center">
+    <NavigationMenuViewport
+      data-slot="navigation-menu-viewport"
+      v-bind="{ ...forwardedProps, ...$attrs }"
+      :class="
+        cn(
+          'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)] left-[var(--reka-navigation-menu-viewport-left)]',
+          $attrs.class ?? '',
+        )
+      "
+    />
+  </div>
+</template>

package/src/components/core/navigation-menu/index.ts

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+
+export { default as NavigationMenu } from './NavigationMenu.vue';
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue';
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue';
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue';
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue';
+export { default as NavigationMenuList } from './NavigationMenuList.vue';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue';
+
+export const navigationMenuTriggerStyle = cva(
+  'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 data-[active]:bg-accent/50 data-[active]:text-accent-foreground data-[active]:hover:bg-accent data-[active]:focus:bg-accent focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1',
+);

package/src/components/core/popover/PopoverContent.vue

@@ -30,7 +30,7 @@
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border p-4 shadow-md outline-none',
+          'bg-background-surface-floating text-content-on-surface-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-72 origin-(--reka-popover-content-transform-origin) rounded-md border border-border-surface-default p-4 shadow-xs outline-none',
           props.class,
         )
       "

package/src/components/core/select/SelectContent.vue

@@ -30,7 +30,7 @@
       v-bind="{ ...$attrs, ...forwarded }"
       :class="
         cn(
-          'bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          'bg-background-surface-floating text-content-on-surface-primary data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 relative z-50 max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border border-border-surface-default shadow-xs',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class,

package/src/components/core/select/SelectTrigger.vue

@@ -24,7 +24,7 @@
     v-bind="forwardedProps"
     :class="
       cn(
-        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex w-fit items-center justify-between gap-2 rounded-md border bg-background-input-default px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
         props.class,
       )
     "

package/src/components/core/sheet/Sheet.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+  import type { DialogRootEmits, DialogRootProps } from 'reka-ui';
+  import { DialogRoot, useForwardPropsEmits } from 'reka-ui';
+
+  const props = defineProps<DialogRootProps>();
+  const emits = defineEmits<DialogRootEmits>();
+
+  const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <DialogRoot v-slot="slotProps" data-slot="sheet" v-bind="forwarded">
+    <slot v-bind="slotProps" />
+  </DialogRoot>
+</template>