@aleph-alpha/ui-library 1.18.0 → 1.20.0

package/docs/public-docs/getting-started-designers.md

@@ -2,16 +2,29 @@
 
 ---
 
-## Figma Access & Library Links
+## Figma design system
 
-Figma components and design files:
+The design system is published as a Figma **library** for the Aleph Alpha organisation. Add it to each design file and build with **library instances** (**components** from **Assets**, and **variables** and **styles** from property pickers) so your work stays connected when the team publishes updates.
 
-- **[AA Design System Components (Figma)](https://www.figma.com/design/SrZQ19QVN1sQkuAMnMC746/AA26--WIP-?node-id=580-9181&t=2HPn1uKWpFKHnrMR-1)** — component library and design system.
+### Adding Components to your Figma file
 
-## Using Design Tokens in Figma
+1. In the left sidebar, click the **Assets** tab next to **Files**. That switches the sidebar from the layer list to Assets.
+2. Click **Browse team libraries**.
+3. In the libraries dialog, select **Your organisation** in the left sidebar.
+4. Select **AA26 (WIP)**, then enable it with **Add to file**.
 
-Coming soon.
+You can then drag **components** from the **Assets** tab into your file.
+
+See Figma documentation for more details on how to manage libraries in [Add or remove a library from a design file](https://help.figma.com/hc/en-us/articles/1500008731201-Add-or-remove-a-library-from-a-design-file).
+
+!!! note "Beta"
+
+    The Figma library is in **beta**. Components will change in look and feel (and sometimes structure) as we iterate with the Design team. Expect updates over time.
+
+### Design tokens
+
+With the library enabled on the file, open the **Style and variables** picker in the **right sidebar** on properties such as fill, stroke, spacing, and typography to apply **variables** and **styles** from the design system.
 
 ## Link to Contribution Model
 
-Coming soon.
+Coming soon.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@aleph-alpha/ui-library",
-  "version": "1.18.0",
+  "version": "1.20.0",
   "license": "Apache-2.0",
   "type": "module",
   "main": "dist/system/lib.js",

package/src/components/UiDropdownMenu/UiDropdownMenu.stories.ts

@@ -20,6 +20,7 @@ import UiButton from '../UiButton/UiButton.vue';
 import UiIconButton from '../UiIconButton/UiIconButton.vue';
 import UiToggle from '../UiToggle/UiToggle.vue';
 import { UiIcon } from '../UiIcon';
+import { UiAvatar, UiAvatarFallback, UiAvatarImage } from '../UiAvatar';
 
 const meta: Meta<typeof UiDropdownMenu> = {
   title: 'Components/UiDropdownMenu',
@@ -1016,3 +1017,112 @@ export const WithSoftToggleTriggerAndText: Story = {
     },
   },
 };
+
+const avatarTriggerTemplateSource = `<script setup lang="ts">
+import { ref } from 'vue'
+import {
+  UiDropdownMenu,
+  UiDropdownMenuTrigger,
+  UiDropdownMenuContent,
+  UiDropdownMenuItem,
+  UiDropdownMenuSeparator,
+  UiButton,
+  UiAvatar,
+  UiAvatarImage,
+  UiAvatarFallback,
+  UiIcon,
+} from '@aleph-alpha/ui-library'
+
+const open = ref(false)
+</script>
+
+<template>
+  <UiDropdownMenu v-model:open="open">
+    <UiDropdownMenuTrigger as-child>
+      <UiButton variant="outline" class="h-auto gap-3 px-3 py-2">
+        <UiAvatar>
+          <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+          <UiAvatarFallback>CN</UiAvatarFallback>
+        </UiAvatar>
+        <div class="flex flex-col items-start overflow-hidden">
+          <span class="truncate text-sm font-medium">Sofia Davis</span>
+          <span class="truncate text-xs text-muted-foreground font-normal">sofia@example.com</span>
+        </div>
+        <UiIcon name="chevrons-up-down" :size="16" class="shrink-0 text-muted-foreground" />
+      </UiButton>
+    </UiDropdownMenuTrigger>
+    <UiDropdownMenuContent class="w-56" align="start">
+      <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
+      <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
+      <UiDropdownMenuItem>Notifications</UiDropdownMenuItem>
+      <UiDropdownMenuSeparator />
+      <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
+    </UiDropdownMenuContent>
+  </UiDropdownMenu>
+</template>`;
+
+/**
+ * Dropdown menu with a trigger containing an avatar, title, description, and chevron icon.
+ */
+export const WithAvatarTrigger: Story = {
+  render: (args) => ({
+    components: {
+      UiDropdownMenu,
+      UiDropdownMenuTrigger,
+      UiDropdownMenuContent,
+      UiDropdownMenuItem,
+      UiDropdownMenuSeparator,
+      UiButton,
+      UiAvatar,
+      UiAvatarFallback,
+      UiAvatarImage,
+      UiIcon,
+    },
+    setup() {
+      const open = ref(args.open);
+      const modal = ref(args.modal);
+      watch(
+        () => args.open,
+        (v) => {
+          open.value = v;
+        },
+      );
+      watch(
+        () => args.modal,
+        (v) => {
+          modal.value = v;
+        },
+      );
+      return { open, modal };
+    },
+    template: `<UiDropdownMenu v-model:open="open" :modal="modal">
+      <UiDropdownMenuTrigger as-child>
+        <UiButton variant="outline" class="h-auto gap-3 px-3 py-2">
+          <UiAvatar>
+            <UiAvatarImage src="https://github.com/shadcn.png" alt="@shadcn" />
+            <UiAvatarFallback>CN</UiAvatarFallback>
+          </UiAvatar>
+          <div class="flex flex-col items-start overflow-hidden">
+            <span class="truncate text-sm font-medium">Sofia Davis</span>
+            <span class="truncate text-xs text-muted-foreground font-normal">sofia@example.com</span>
+          </div>
+          <UiIcon name="chevrons-up-down" :size="16" class="shrink-0 text-muted-foreground" />
+        </UiButton>
+      </UiDropdownMenuTrigger>
+      <UiDropdownMenuContent class="w-56" align="start">
+        <UiDropdownMenuItem>Profile</UiDropdownMenuItem>
+        <UiDropdownMenuItem>Settings</UiDropdownMenuItem>
+        <UiDropdownMenuItem>Notifications</UiDropdownMenuItem>
+        <UiDropdownMenuSeparator />
+        <UiDropdownMenuItem>Sign Out</UiDropdownMenuItem>
+      </UiDropdownMenuContent>
+    </UiDropdownMenu>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: avatarTriggerTemplateSource,
+      },
+    },
+  },
+};

package/src/components/UiField/UiField.vue

@@ -40,7 +40,7 @@
   }
 
   function partitionSlots(groupNames: string[]) {
-    const children = slots.default?.() ?? [];
+    const children = slots.default?.({}) ?? [];
     const group = children.filter((v) => groupNames.includes(getSlotName(v) ?? ''));
     const rest = children.filter((v) => !groupNames.includes(getSlotName(v) ?? ''));
     return { group, rest };
@@ -49,7 +49,7 @@
   const labelPartition = computed(() => partitionSlots(['UiFieldLabel', 'UiFieldDescription']));
 
   const inputPartition = computed(() => {
-    const children = slots.default?.() ?? [];
+    const children = slots.default?.({}) ?? [];
     const content = children.filter((v) => getSlotName(v) === 'UiFieldContent');
     const desc = children.filter((v) => getSlotName(v) === 'UiFieldDescription');
     const rest = children.filter((v) => {

package/src/components/UiField/UiFieldError.vue

@@ -10,7 +10,7 @@
   const props = defineProps<UiFieldErrorProps>();
 
   const slots = useSlots();
-  const hasDefaultSlotContent = computed(() => (slots.default?.().length ?? 0) > 0);
+  const hasDefaultSlotContent = computed(() => (slots.default?.({}).length ?? 0) > 0);
 </script>
 
 <template>

package/src/components/core/badge/Badge.vue

@@ -2,10 +2,13 @@
   import type { PrimitiveProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import type { BadgeVariants } from '.';
+  import type { VHoverVariant } from '@/directives/vHover';
   import { reactiveOmit } from '@vueuse/core';
   import { Primitive } from 'reka-ui';
+  import { computed } from 'vue';
   import { cn } from '@/lib/utils';
   import { badgeVariants } from '.';
+  import { vHover } from '@/directives/vHover';
 
   const props = defineProps<
     PrimitiveProps & {
@@ -14,13 +17,33 @@
     }
   >();
 
-  const delegatedProps = reactiveOmit(props, 'class');
+  type BadgeVariant = NonNullable<BadgeVariants['variant']>;
+
+  const VARIANT_TO_V_HOVER_OVERLAY = new Map<BadgeVariant, VHoverVariant | false>([
+    ['default', 'subtle'],
+    ['secondary', 'default'],
+    ['destructive', 'default'],
+    ['outline', 'default'],
+  ]);
+
+  const delegatedProps = reactiveOmit(props, 'class', 'variant');
+
+  const badgeClass = computed(() => cn(badgeVariants({ variant: props.variant }), props.class));
+
+  const hoverOverlayVariant = computed(
+    () => VARIANT_TO_V_HOVER_OVERLAY.get(props.variant ?? 'default') ?? false,
+  );
 </script>
 
 <template>
+  <Primitive v-if="asChild" data-slot="badge" :class="badgeClass" v-bind="delegatedProps">
+    <slot />
+  </Primitive>
   <Primitive
+    v-else
+    v-hover="hoverOverlayVariant"
     data-slot="badge"
-    :class="cn(badgeVariants({ variant }), props.class)"
+    :class="badgeClass"
     v-bind="delegatedProps"
   >
     <slot />

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

@@ -8,12 +8,11 @@ export const badgeVariants = cva(
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
-        secondary:
-          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        default: 'border-transparent bg-primary text-primary-foreground',
+        secondary: 'border-transparent bg-secondary text-secondary-foreground',
         destructive:
-          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-[#FF8D8F] dark:text-black',
-        outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+          'border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-[#FF8D8F] dark:text-black',
+        outline: 'text-foreground',
       },
     },
     defaultVariants: {

package/src/components/core/button/Button.vue

@@ -2,9 +2,12 @@
   import type { PrimitiveProps } from 'reka-ui';
   import type { HTMLAttributes } from 'vue';
   import type { ButtonVariants } from '.';
+  import type { VHoverVariant } from '@/directives/vHover';
   import { Primitive } from 'reka-ui';
+  import { computed } from 'vue';
   import { cn } from '@/lib/utils';
   import { buttonVariants } from '.';
+  import { vHover } from '@/directives/vHover';
 
   interface Props extends PrimitiveProps {
     variant?: ButtonVariants['variant'];
@@ -15,14 +18,39 @@
   const props = withDefaults(defineProps<Props>(), {
     as: 'button',
   });
+
+  type ButtonVariant = NonNullable<ButtonVariants['variant']>;
+
+  /** Background overlay via `v-hover`; `link` uses `overlay-link-hover-subtle` (color) instead. */
+  const VARIANT_TO_V_HOVER_OVERLAY = new Map<ButtonVariant, VHoverVariant | false>([
+    ['default', 'subtle'],
+    ['link', false],
+    ['secondary', 'default'],
+    ['destructive', 'default'],
+    ['outline', 'default'],
+    ['ghost', 'default'],
+  ]);
+
+  const buttonClass = computed(() =>
+    cn(buttonVariants({ variant: props.variant, size: props.size }), props.class),
+  );
+
+  const hoverOverlayVariant = computed(
+    () => VARIANT_TO_V_HOVER_OVERLAY.get(props.variant ?? 'default') ?? false,
+  );
 </script>
 
 <template>
+  <Primitive v-if="asChild" data-slot="button" :as="as" :as-child="true" :class="buttonClass">
+    <slot />
+  </Primitive>
   <Primitive
+    v-else
+    v-hover="hoverOverlayVariant"
     data-slot="button"
     :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, size }), props.class)"
+    :as-child="false"
+    :class="buttonClass"
   >
     <slot />
   </Primitive>

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

@@ -8,14 +8,14 @@ export const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary/90',
+        default: 'bg-primary text-primary-foreground',
         destructive:
-          'bg-destructive text-destructive-foreground hover:bg-destructive/90 focus-visible:border-transparent focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
-        outline:
-          'border border-input bg-transparent text-foreground shadow-xs hover:bg-hover-default',
-        secondary: 'bg-secondary text-secondary-foreground hover:bg-secondary/80',
-        ghost: 'text-foreground hover:bg-hover-default',
-        link: 'text-link underline-offset-4 hover:underline',
+          'bg-destructive text-destructive-foreground focus-visible:border-transparent focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40',
+        outline: 'border border-input bg-transparent text-foreground shadow-xs',
+        secondary: 'bg-secondary text-secondary-foreground',
+        ghost:
+          'text-foreground hover:border-border-button-outlined focus-visible:border-border-button-outlined',
+        link: 'text-link overlay-link-hover-subtle',
       },
       size: {
         default: 'h-9 px-4 py-2 has-[>svg]:px-3',

package/src/directives/index.ts

@@ -0,0 +1 @@
+export { vHover, type VHoverVariant } from './vHover';

package/src/directives/vHover.stories.ts

@@ -0,0 +1,129 @@
+import type { Meta, StoryObj } from '@storybook/vue3-vite';
+import { defineComponent } from 'vue';
+import { vHover } from '@/directives/vHover';
+
+const VHoverDemo = defineComponent({
+  name: 'VHoverDemo',
+  directives: { hover: vHover },
+  methods: {
+    copyVHover(variant: 'subtle' | 'default' | 'strong', e: MouseEvent) {
+      const el = e.currentTarget as HTMLElement;
+      const snippet = `v-hover="'${variant}'"`;
+      navigator.clipboard
+        .writeText(snippet)
+        .then(() => {
+          el.classList.add('copied');
+          setTimeout(() => el.classList.remove('copied'), 1500);
+        })
+        .catch(() => {
+          /* clipboard unavailable (e.g. some test / non-secure contexts) */
+        });
+    },
+  },
+  template: `
+    <div class="p-8 bg-white dark:bg-background min-h-screen">
+      <style>
+        .copy-btn { cursor: pointer; transition: all 0.15s; }
+        .copy-btn:hover { background: rgba(0,0,0,0.05); }
+        .copy-btn.copied { background: #22c55e22; }
+        .copy-btn.copied::after { content: ' ✓'; color: #22c55e; }
+      </style>
+
+      <div class="mb-6">
+        <h2 class="text-xl font-bold text-content-on-surface-primary mb-1">v-hover</h2>
+        <p class="text-sm text-content-on-surface-muted max-w-2xl">
+          Registers as <code class="text-xs">v-hover</code> when using
+          <code class="text-xs">app.directive('hover', vHover)</code> from the library install.
+          Injects a single overlay layer; visible on <code class="text-xs">:hover</code> when
+          <code class="text-xs">@media (hover: hover)</code> and on <code class="text-xs">:focus-visible</code>.
+          Variants map to
+          <code class="text-xs">--overlay-hover-subtle</code>,
+          <code class="text-xs">--overlay-hover-default</code>, and
+          <code class="text-xs">--overlay-hover-strong</code>.
+          Hover or Tab+focus each tile to compare intensity.
+        </p>
+      </div>
+
+      <div class="flex flex-wrap gap-8">
+        <div class="flex flex-col items-center gap-2">
+          <button
+            type="button"
+            v-hover="'subtle'"
+            class="h-24 w-40 rounded-md bg-background-button-primary-button text-content-on-button-primary-button text-sm font-medium flex items-center justify-center border border-border-surface-default shadow-xs"
+          >
+            subtle
+          </button>
+          <div class="text-center">
+            <span class="text-xs text-content-on-surface-primary font-medium block">subtle</span>
+            <code
+              class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded"
+              @click="copyVHover('subtle', $event)"
+            >v-hover="'subtle'"</code>
+          </div>
+        </div>
+
+        <div class="flex flex-col items-center gap-2">
+          <button
+            type="button"
+            v-hover="'default'"
+            class="h-24 w-40 rounded-md bg-background-button-primary-button text-content-on-button-primary-button text-sm font-medium flex items-center justify-center border border-border-surface-default shadow-xs"
+          >
+            default
+          </button>
+          <div class="text-center">
+            <span class="text-xs text-content-on-surface-primary font-medium block">default</span>
+            <code
+              class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded"
+              @click="copyVHover('default', $event)"
+            >v-hover="'default'"</code>
+          </div>
+        </div>
+
+        <div class="flex flex-col items-center gap-2">
+          <button
+            type="button"
+            v-hover="'strong'"
+            class="h-24 w-40 rounded-md bg-background-button-primary-button text-content-on-button-primary-button text-sm font-medium flex items-center justify-center border border-border-surface-default shadow-xs"
+          >
+            strong
+          </button>
+          <div class="text-center">
+            <span class="text-xs text-content-on-surface-primary font-medium block">strong</span>
+            <code
+              class="copy-btn text-[10px] text-content-on-surface-muted block mt-0.5 px-1 py-0.5 rounded"
+              @click="copyVHover('strong', $event)"
+            >v-hover="'strong'"</code>
+          </div>
+        </div>
+      </div>
+    </div>
+  `,
+});
+
+const meta: Meta<typeof VHoverDemo> = {
+  title: 'Directives/v-hover',
+  component: VHoverDemo,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component:
+          'Overlay hover directive: `false` disables; string `subtle` | `default` | `strong` or `{ variant }`. Used by Button and Badge.',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof VHoverDemo>;
+
+/**
+ * Three overlay intensities on the same button fill so you can compare subtle, default, and strong.
+ */
+export const Variants: Story = {
+  render: () => ({
+    components: { VHoverDemo },
+    template: '<VHoverDemo />',
+  }),
+};

package/src/directives/vHover.ts

@@ -0,0 +1,70 @@
+import type { DirectiveBinding, ObjectDirective } from 'vue';
+
+export type VHoverVariant = 'subtle' | 'default' | 'strong';
+
+const OVERLAY_EL = Symbol('vHoverOverlayEl');
+
+type VHoverBinding = VHoverVariant | false | null | undefined | { variant: VHoverVariant };
+
+function resolveVariant(binding: DirectiveBinding<VHoverBinding>): VHoverVariant | null {
+  const v = binding.value;
+  if (v === false || v === null || v === undefined) return null;
+  if (typeof v === 'object' && v !== null && 'variant' in v) {
+    const { variant } = v;
+    if (variant === 'subtle' || variant === 'default' || variant === 'strong') return variant;
+    return null;
+  }
+  if (v === 'subtle' || v === 'default' || v === 'strong') return v;
+  return null;
+}
+
+function detach(el: HTMLElement): void {
+  const overlay = (el as unknown as Record<symbol, HTMLElement>)[OVERLAY_EL];
+  overlay?.remove();
+  delete (el as unknown as Record<symbol, unknown>)[OVERLAY_EL];
+  el.classList.remove('v-hover-root');
+}
+
+function attach(el: HTMLElement, variant: VHoverVariant): void {
+  detach(el);
+
+  el.classList.add('v-hover-root');
+
+  const overlay = document.createElement('span');
+  overlay.className = 'v-hover-overlay';
+  overlay.setAttribute('data-v-hover-variant', variant);
+  overlay.setAttribute('aria-hidden', 'true');
+  el.prepend(overlay);
+  (el as unknown as Record<symbol, HTMLElement>)[OVERLAY_EL] = overlay;
+}
+
+function setVariant(el: HTMLElement, variant: VHoverVariant): void {
+  const overlay = (el as unknown as Record<symbol, HTMLElement>)[OVERLAY_EL];
+  if (overlay?.isConnected) {
+    overlay.setAttribute('data-v-hover-variant', variant);
+  }
+}
+
+export const vHover: ObjectDirective<HTMLElement, VHoverBinding> = {
+  mounted(el, binding) {
+    const variant = resolveVariant(binding);
+    if (variant) attach(el, variant);
+  },
+
+  updated(el, binding) {
+    const variant = resolveVariant(binding);
+    if (!variant) {
+      detach(el);
+      return;
+    }
+    if ((el as unknown as Record<symbol, HTMLElement>)[OVERLAY_EL]?.isConnected) {
+      setVariant(el, variant);
+    } else {
+      attach(el, variant);
+    }
+  },
+
+  unmounted(el) {
+    detach(el);
+  },
+};

package/src/index.ts

@@ -5,6 +5,9 @@
 export * from './components';
 export * from './patterns';
 export * from './templates';
+export * from './directives';
+
+import { vHover } from './directives/vHover';
 
 const components = import.meta.glob(
   ['@/components/**/*.vue', '@/patterns/**/*.vue', '@/templates/**/*.vue'],
@@ -15,6 +18,7 @@ const components = import.meta.glob(
 
 export default {
   install(app, options) {
+    app.directive('hover', vHover);
     Object.values(components).forEach((component: any) => {
       app.component(component.default.__name, component.default);
     });

package/src/patterns/UiDataTable/UiDataTable.stories.ts

@@ -229,7 +229,7 @@ const data: Payment[] = [
   { id: '3', amount: 837, status: 'processing', email: 'monserrat44@gmail.com' },
 ];
 
-// Use UiDataTableColumnHeader for sortable columns with dropdown menu
+// Use UiDataTableColumnHeader for sortable columns (click to cycle: unsorted → asc → desc)
 const columns: ColumnDef<Payment>[] = [
   {
     accessorKey: 'status',
@@ -1575,3 +1575,100 @@ export const WithCellFormatting: Story = {
     template: '<UiDataTable v-bind="args" />',
   }),
 };
+
+const withRowClickTemplateSource = `<script setup lang="ts">
+import { ref, h } from 'vue';
+import { UiDataTable, UiDataTableColumnHeader } from '@aleph-alpha/ui-library';
+import type { ColumnDef } from '@tanstack/vue-table';
+
+interface Payment {
+  id: string;
+  amount: number;
+  status: string;
+  email: string;
+}
+
+const data: Payment[] = [
+  { id: '1', amount: 316, status: 'success', email: 'ken99@yahoo.com' },
+  { id: '2', amount: 242, status: 'success', email: 'abe45@gmail.com' },
+  { id: '3', amount: 837, status: 'processing', email: 'monserrat44@gmail.com' },
+];
+
+const columns: ColumnDef<Payment>[] = [
+  {
+    accessorKey: 'status',
+    header: ({ column }) => h(UiDataTableColumnHeader, { column, title: 'Status' }),
+    size: 120,
+  },
+  {
+    accessorKey: 'email',
+    header: ({ column }) => h(UiDataTableColumnHeader, { column, title: 'Email' }),
+    size: 250,
+  },
+  {
+    accessorKey: 'amount',
+    header: ({ column }) => h(UiDataTableColumnHeader, {
+      column,
+      title: 'Amount',
+      class: 'justify-end'
+    }),
+    cell: ({ row }) => {
+      const amount = Number.parseFloat(row.getValue('amount'));
+      return new Intl.NumberFormat('de-DE', {
+        style: 'currency',
+        currency: 'EUR',
+      }).format(amount);
+    },
+    size: 120,
+  },
+];
+
+const clickedRow = ref<Payment | null>(null);
+</script>
+
+<template>
+  <UiDataTable
+    :data="data"
+    :columns="columns"
+    :on-row-click="(row) => (clickedRow = row)"
+  />
+  <div v-if="clickedRow" class="mt-4 rounded border p-3 text-sm">
+    Clicked: {{ clickedRow.email }} - {{ clickedRow.status }}
+  </div>
+</template>`;
+
+export const WithRowClick: Story = {
+  args: {
+    data: payments,
+    columns: sortableColumns,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: withRowClickTemplateSource,
+      },
+    },
+  },
+  render: (args) => ({
+    components: { UiDataTable },
+    setup() {
+      const clickedRow = ref<Payment | null>(null);
+      return {
+        args,
+        clickedRow,
+        handleRowClick: (row: Payment) => {
+          clickedRow.value = row;
+        },
+      };
+    },
+    template: `
+      <div>
+        <UiDataTable v-bind="args" :on-row-click="handleRowClick" />
+        <div v-if="clickedRow" class="mt-4 rounded border p-3 text-sm">
+          Clicked: <strong>{{ clickedRow.email }}</strong> - {{ clickedRow.status }} - {{ new Intl.NumberFormat('de-DE', { style: 'currency', currency: 'EUR' }).format(clickedRow.amount) }}
+        </div>
+        <div v-else class="text-muted-foreground mt-4 text-sm">Click a row to see its data</div>
+      </div>
+    `,
+  }),
+};