@brumaombra/ui-vintage 0.6.8 → 0.7.3

package/src/components/confirm-dialog/confirm-dialog-state.ts

@@ -0,0 +1,200 @@
+import { h, markRaw, reactive, render } from "vue";
+import type { ButtonVariants } from "../ui/button";
+
+export type DialogButtonVariant = NonNullable<ButtonVariants["variant"]>;
+export type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
+
+export interface ShowConfirmDialogOptions {
+    title?: string;
+    message: string;
+    confirmText?: string;
+    cancelText?: string;
+    confirmButtonType?: DialogButtonVariant;
+    cancelButtonType?: DialogButtonVariant;
+    icon?: HugeiconsIconDefinition | null;
+    confirmButtonIcon?: HugeiconsIconDefinition | null;
+    cancelButtonIcon?: HugeiconsIconDefinition | null;
+    onConfirm?: (() => void | Promise<void>) | null;
+    onCancel?: (() => void | Promise<void>) | null;
+}
+
+interface ConfirmDialogRequest {
+    id: number;
+    options: Required<Omit<ShowConfirmDialogOptions, "icon" | "confirmButtonIcon" | "cancelButtonIcon" | "onConfirm" | "onCancel">> & {
+        icon: HugeiconsIconDefinition | null;
+        confirmButtonIcon: HugeiconsIconDefinition | null;
+        cancelButtonIcon: HugeiconsIconDefinition | null;
+        onConfirm: (() => void | Promise<void>) | null;
+        onCancel: (() => void | Promise<void>) | null;
+    };
+    resolve: (value: boolean) => void;
+}
+
+interface ConfirmDialogState {
+    current: ConfirmDialogRequest | null;
+    busy: boolean;
+    isOpen: boolean;
+}
+
+const confirmDialogQueue: ConfirmDialogRequest[] = [];
+let nextConfirmDialogId = 0;
+const DIALOG_CLOSE_DURATION_MS = 300;
+let closeTimer: ReturnType<typeof setTimeout> | null = null;
+let confirmDialogMountPromise: Promise<void> | null = null;
+
+const CONFIRM_DIALOG_ROOT_ID = "ui-vintage-confirm-dialog-root";
+
+// Shared confirm dialog state
+export const confirmDialogState: ConfirmDialogState = reactive({
+    current: null,
+    busy: false,
+    isOpen: false
+});
+
+// Keep icon definitions non-reactive
+const markIcon = (icon: HugeiconsIconDefinition | null | undefined) => icon ? markRaw(icon) : null;
+
+// Mount the dialog once on demand
+const ensureConfirmDialogMounted = () => {
+    // Skip mounting during SSR
+    if (typeof document === "undefined") {
+        return Promise.resolve();
+    }
+
+    // Reuse the existing mount root
+    const existingRoot = document.getElementById(CONFIRM_DIALOG_ROOT_ID);
+    if (existingRoot) {
+        return Promise.resolve();
+    }
+
+    // Reuse the in-flight mount
+    if (confirmDialogMountPromise) {
+        return confirmDialogMountPromise;
+    }
+
+    // Start the lazy mount
+    confirmDialogMountPromise = (async () => {
+        // Load the component only when needed
+        const { default: ConfirmDialog } = await import("./ConfirmDialog.vue");
+
+        // Guard against a concurrent mount
+        if (document.getElementById(CONFIRM_DIALOG_ROOT_ID)) {
+            return;
+        }
+
+        // Create the host element and render the component
+        const container = document.createElement("div");
+        container.id = CONFIRM_DIALOG_ROOT_ID;
+        document.body.appendChild(container);
+        render(h(ConfirmDialog), container);
+    })().finally(() => {
+        confirmDialogMountPromise = null;
+    });
+
+    // Let callers await the mount
+    return confirmDialogMountPromise;
+};
+
+// Show the next queued dialog
+const openNextConfirmDialog = () => {
+    const nextDialog = confirmDialogQueue.shift() ?? null;
+    confirmDialogState.current = nextDialog;
+    confirmDialogState.isOpen = Boolean(nextDialog);
+};
+
+// Queue a new dialog request
+const enqueueConfirmDialog = (request: ConfirmDialogRequest) => {
+    confirmDialogQueue.push(request);
+    if (!confirmDialogState.current) {
+        openNextConfirmDialog();
+    }
+};
+
+// Clear the active dialog and continue the queue
+const clearCurrentConfirmDialog = () => {
+    confirmDialogState.busy = false;
+    confirmDialogState.isOpen = false;
+    confirmDialogState.current = null;
+    openNextConfirmDialog();
+};
+
+// Close the current dialog after the leave transition
+const scheduleCloseCurrentConfirmDialog = () => {
+    // Guard against missing or already closed dialogs
+    if (!confirmDialogState.current || !confirmDialogState.isOpen) return;
+    confirmDialogState.isOpen = false;
+
+    // Clear any existing close timer to avoid racing conditions
+    if (closeTimer) {
+        clearTimeout(closeTimer);
+    }
+
+    // Schedule the dialog to be cleared after the leave transition
+    closeTimer = setTimeout(() => {
+        closeTimer = null;
+        clearCurrentConfirmDialog();
+    }, DIALOG_CLOSE_DURATION_MS);
+};
+
+// Resolve the dialog as cancelled
+export const closeConfirmDialog = () => {
+    const current = confirmDialogState.current;
+    if (!current || !confirmDialogState.isOpen) return;
+    current.resolve(false);
+    scheduleCloseCurrentConfirmDialog();
+};
+
+// Run the cancel handler for the active dialog
+export const cancelActiveConfirmDialog = async () => {
+    const current = confirmDialogState.current;
+    if (!current || confirmDialogState.busy) return;
+    confirmDialogState.busy = true;
+
+    try {
+        await current.options.onCancel?.();
+        current.resolve(false);
+    } finally {
+        scheduleCloseCurrentConfirmDialog();
+    }
+};
+
+// Run the confirm handler for the active dialog
+export const confirmActiveDialog = async () => {
+    const current = confirmDialogState.current;
+    if (!current || confirmDialogState.busy) return;
+    confirmDialogState.busy = true;
+
+    try {
+        await current.options.onConfirm?.();
+        current.resolve(true);
+    } finally {
+        scheduleCloseCurrentConfirmDialog();
+    }
+};
+
+// Queue and show a confirm dialog
+export const showConfirmDialog = (options: ShowConfirmDialogOptions) => {
+    // Ensure the renderer exists before queuing work
+    void ensureConfirmDialogMounted();
+
+    // Return a promise that resolves with the user's choice
+    return new Promise<boolean>((resolve) => {
+        enqueueConfirmDialog({
+            id: nextConfirmDialogId += 1,
+            options: {
+                title: options.title ?? "Confirm",
+                message: options.message,
+                confirmText: options.confirmText ?? "Confirm",
+                cancelText: options.cancelText ?? "Cancel",
+                confirmButtonType: options.confirmButtonType ?? "primary",
+                cancelButtonType: options.cancelButtonType ?? "secondary",
+                icon: markIcon(options.icon),
+                confirmButtonIcon: markIcon(options.confirmButtonIcon),
+                cancelButtonIcon: markIcon(options.cancelButtonIcon),
+                onConfirm: options.onConfirm ?? null,
+                onCancel: options.onCancel ?? null
+            },
+            resolve
+        });
+    });
+};

package/src/components/confirm-dialog/index.ts

@@ -0,0 +1,12 @@
+export { default as ConfirmDialog } from "./ConfirmDialog.vue";
+export {
+    cancelActiveConfirmDialog,
+    closeConfirmDialog,
+    confirmActiveDialog,
+    confirmDialogState,
+    showConfirmDialog
+} from "./confirm-dialog-state";
+export type {
+    DialogButtonVariant,
+    ShowConfirmDialogOptions
+} from "./confirm-dialog-state";

package/src/components/content/BlogList.vue

@@ -0,0 +1,60 @@
+<script setup>
+import { Cancel01Icon, CheckmarkCircle02Icon, CircleSmallIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '../ui/card';
+
+// Props
+const props = defineProps({
+    items: { type: Array, default: () => [] },
+    variant: { type: String, default: 'checkmark', validator: value => ['circle', 'checkmark', 'numbered', 'cross'].includes(value) }
+});
+
+// Icon container classes
+const getIconContainerClasses = () => {
+    return 'flex items-center justify-center w-8 h-8 bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)] rounded mr-4 flex-shrink-0';
+};
+
+// Icon color classes
+const getIconClasses = () => {
+    return 'text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] text-xs';
+};
+</script>
+
+<template>
+    <div class="not-prose my-6 sm:my-12">
+        <Card>
+            <CardContent class="gap-0">
+                <ul class="text-xs md:text-sm !p-0 !space-y-6">
+                    <li v-for="(item, index) in props.items" :key="index" class="flex items-center">
+                        <!-- Circle -->
+                        <div v-if="props.variant === 'circle'" :class="getIconContainerClasses()">
+                            <HugeiconsIcon :icon="CircleSmallIcon" :class="getIconClasses()" />
+                        </div>
+
+                        <!-- Checkmark -->
+                        <div v-else-if="props.variant === 'checkmark'" :class="getIconContainerClasses()">
+                            <HugeiconsIcon :icon="CheckmarkCircle02Icon" :class="getIconClasses()" />
+                        </div>
+
+                        <!-- Numbered -->
+                        <div v-else-if="props.variant === 'numbered'" :class="getIconContainerClasses()">
+                            <span :class="[getIconClasses(), 'font-semibold']">{{ index + 1 }}</span>
+                        </div>
+
+                        <!-- Cross -->
+                        <div v-else-if="props.variant === 'cross'" :class="getIconContainerClasses()">
+                            <HugeiconsIcon :icon="Cancel01Icon" :class="getIconClasses()" />
+                        </div>
+
+                        <!-- Content -->
+                        <div class="flex-1">
+                            <div class="text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] leading-relaxed">
+                                {{ item }}
+                            </div>
+                        </div>
+                    </li>
+                </ul>
+            </CardContent>
+        </Card>
+    </div>
+</template>

package/src/components/content/BlogTable.vue

@@ -0,0 +1,56 @@
+<script setup>
+import { Card, CardContent } from '../ui/card';
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '../ui/table';
+
+// Props
+const props = defineProps({
+    headers: { type: Array, default: () => [] },
+    rows: { type: Array, default: () => [] },
+    highlightCol: { type: Number, default: -1 }
+});
+
+// Header cell classes
+const getHeaderClasses = colIndex => {
+    const baseClasses = 'text-left font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-[var(--bg-selected-light)] dark:bg-[var(--bg-selected-dark)]' : '';
+    return [baseClasses, highlightClass];
+};
+
+// Body cell classes
+const getCellClasses = colIndex => {
+    const baseClasses = 'align-top text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] leading-relaxed whitespace-normal';
+    const firstColClass = colIndex === 0 ? 'font-semibold text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]' : '';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-[var(--bg-selected-light)] dark:bg-[var(--bg-selected-dark)]' : '';
+    return [baseClasses, firstColClass, highlightClass];
+};
+</script>
+
+<template>
+    <div class="not-prose my-6 sm:my-12">
+        <Card>
+            <CardContent>
+                <div class="w-full overflow-x-auto">
+                    <Table class="w-full text-sm text-left">
+                        <!-- Table header -->
+                        <TableHeader>
+                            <TableRow class="bg-transparent text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] hover:bg-transparent">
+                                <TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
+                                    {{ header }}
+                                </TableHead>
+                            </TableRow>
+                        </TableHeader>
+
+                        <!-- Table body -->
+                        <TableBody>
+                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] hover:bg-transparent">
+                                <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
+                                    {{ cell }}
+                                </TableCell>
+                            </TableRow>
+                        </TableBody>
+                    </Table>
+                </div>
+            </CardContent>
+        </Card>
+    </div>
+</template>

package/src/components/content/ProseHr.vue

@@ -0,0 +1,26 @@
+<script setup>
+import { ChartLineData02Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+
+// Props
+const props = defineProps({
+    icon: { type: Object, default: () => ChartLineData02Icon }
+});
+</script>
+
+<template>
+    <div aria-hidden="true" class="not-prose my-6 sm:my-12">
+        <div class="flex items-center gap-3 sm:gap-4">
+            <!-- Left line -->
+            <div class="h-px flex-1 bg-gradient-to-r from-transparent via-[var(--border-light)] to-[var(--border-light)] dark:via-[var(--border-dark)] dark:to-[var(--border-dark)]" />
+
+            <!-- Icon in the middle -->
+            <div class="flex h-9 w-9 items-center justify-center rounded bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] border border-[var(--border-light)] dark:border-[var(--border-dark)]">
+                <HugeiconsIcon :icon="props.icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+            </div>
+
+            <!-- Right line -->
+            <div class="h-px flex-1 bg-gradient-to-l from-transparent via-[var(--border-light)] to-[var(--border-light)] dark:via-[var(--border-dark)] dark:to-[var(--border-dark)]" />
+        </div>
+    </div>
+</template>

package/{dist/components/content/index.d.ts → src/components/content/index.ts}

@@ -1,3 +1,3 @@
 export { default as BlogList } from './BlogList.vue';
 export { default as BlogTable } from './BlogTable.vue';
-export { default as ProseHr } from './ProseHr.vue';
+export { default as ProseHr } from './ProseHr.vue';

package/src/components/dashboard-shell/DashboardShell.vue

@@ -0,0 +1,205 @@
+<script setup lang="ts">
+import { NuxtImg } from "#components";
+import type { Component, HTMLAttributes } from "vue";
+import { HugeiconsIcon } from "@hugeicons/vue";
+import BackgroundGrid from "../background-grid/BackgroundGrid.vue";
+import { Separator } from "../ui/separator";
+import {
+    Sidebar,
+    SidebarContent,
+    SidebarFooter,
+    SidebarGroup,
+    SidebarGroupContent,
+    SidebarGroupLabel,
+    SidebarHeader,
+    SidebarInset,
+    SidebarMenu,
+    SidebarMenuButton,
+    SidebarMenuItem,
+    SidebarProvider,
+    SidebarTrigger
+} from "../ui/sidebar";
+import { cn } from "../../lib/utils";
+
+type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
+
+interface DashboardSidebarItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: HugeiconsIconDefinition | null;
+    href?: string;
+    to?: unknown;
+    active?: boolean;
+    newTab?: boolean;
+}
+
+interface DashboardSidebarSection {
+    id: string;
+    label?: string;
+    items: DashboardSidebarItem[];
+}
+
+interface DashboardShellProps {
+    appName?: string;
+    appLogo?: string;
+    appLinkTo?: string;
+    title?: string;
+    description?: string;
+    collapsible?: "offcanvas" | "icon" | "none";
+    compact?: boolean;
+    sidebarSections?: DashboardSidebarSection[];
+    sidebarLinkComponent?: Component | string;
+    showBackground?: boolean;
+    insetClass?: HTMLAttributes["class"];
+    topbarClass?: HTMLAttributes["class"];
+    contentContainerClass?: HTMLAttributes["class"];
+}
+
+// Props
+const props = withDefaults(defineProps<DashboardShellProps>(), {
+    appName: "",
+    appLogo: "",
+    appLinkTo: "/",
+    title: "",
+    description: "",
+    collapsible: "offcanvas",
+    compact: false,
+    sidebarSections: () => [],
+    sidebarLinkComponent: "a",
+    showBackground: true
+});
+
+// Resolve link props for sidebar items
+const getSidebarItemLinkProps = (item: DashboardSidebarItem) => {
+    const sharedProps = item.newTab ? { target: "_blank", rel: "noopener noreferrer" } : {};
+
+    // If the link component is an anchor, use href. Otherwise, use to for router links.
+    if (props.sidebarLinkComponent === "a") {
+        return {
+            href: item.href ?? "#",
+            ...sharedProps
+        };
+    }
+
+    // For non-anchor link components, assume they use a "to" prop (like Vue Router's <RouterLink>).
+    return {
+        to: item.to ?? item.href ?? "/",
+        ...sharedProps
+    };
+};
+</script>
+
+<template>
+    <SidebarProvider>
+        <!-- Sidebar -->
+        <Sidebar :collapsible="props.collapsible" :compact="props.compact">
+            <!-- Sidebar header -->
+            <SidebarHeader v-if="props.appName || $slots['sidebar-header']" class="h-16 justify-center border-b border-sidebar-border">
+                <slot name="sidebar-header">
+                    <SidebarMenu>
+                        <SidebarMenuItem>
+                            <SidebarMenuButton as-child size="lg">
+                                <a :href="props.appLinkTo" class="inline-flex items-center gap-2">
+                                    <div class="inline-flex items-center gap-2">
+                                        <!-- App logo -->
+                                        <NuxtImg v-if="props.appLogo" :src="props.appLogo" :alt="`${props.appName} logo`" width="32" height="32" :sizes="{ 320: '32px', 1280: '32px' }" loading="eager" class="size-8 shrink-0 object-contain" />
+
+                                        <!-- App name -->
+                                        <span v-if="props.appName" class="text-xl font-bold tracking-tight text-foreground">{{ props.appName }}</span>
+                                    </div>
+                                </a>
+                            </SidebarMenuButton>
+                        </SidebarMenuItem>
+                    </SidebarMenu>
+                </slot>
+            </SidebarHeader>
+
+            <!-- Sidebar sections -->
+            <SidebarContent v-if="props.sidebarSections.length">
+                <SidebarGroup v-for="section in props.sidebarSections" :key="section.id">
+                    <!-- Section label -->
+                    <SidebarGroupLabel v-if="section.label">
+                        {{ section.label }}
+                    </SidebarGroupLabel>
+
+                    <!-- Section content -->
+                    <SidebarGroupContent>
+                        <SidebarMenu class="gap-3">
+                            <SidebarMenuItem v-for="item in section.items" :key="item.id">
+                                <SidebarMenuButton as-child :is-active="item.active" :class="cn('group h-auto min-h-12 rounded border border-[var(--border-light)] px-3 py-2.5 text-[var(--text-secondary-light)] transition-all duration-200 hover:border-[var(--border-hover-light)] hover:bg-[var(--bg-selected-light)] hover:text-[var(--text-primary-light)] data-[active=true]:border-[var(--border-hover-light)] data-[active=true]:bg-[var(--bg-selected-light)] data-[active=true]:text-[var(--text-primary-light)] dark:border-[var(--border-dark)] dark:text-[var(--text-secondary-dark)] dark:hover:border-[var(--border-hover-dark)] dark:hover:bg-[var(--bg-selected-dark)] dark:hover:text-[var(--text-primary-dark)] dark:data-[active=true]:border-[var(--border-hover-dark)] dark:data-[active=true]:bg-[var(--bg-selected-dark)] dark:data-[active=true]:text-[var(--text-primary-dark)] sm:px-4 sm:py-3', item.description ? 'items-start' : 'items-center')">
+                                    <component :is="props.sidebarLinkComponent" v-bind="getSidebarItemLinkProps(item)">
+                                        <!-- Icon -->
+                                        <HugeiconsIcon v-if="item.icon" :icon="item.icon" :stroke-width="1.8" :class="cn('shrink-0 opacity-90 transition-opacity duration-200 group-hover:opacity-100', item.description ? 'mt-0.5 size-5 sm:h-5 sm:w-5' : 'size-5 self-center sm:h-6 sm:w-6')" />
+
+                                        <!-- Label and optional description -->
+                                        <div :class="cn('min-w-0 flex-1 text-left leading-tight', item.description ? 'grid' : 'flex items-center')">
+                                            <!-- Label -->
+                                            <span class="truncate font-semibold">{{ item.label }}</span>
+
+                                            <!-- Description -->
+                                            <span v-if="item.description" class="mt-0.5 text-[11px] leading-4 text-sidebar-foreground/65">
+                                                {{ item.description }}
+                                            </span>
+                                        </div>
+                                    </component>
+                                </SidebarMenuButton>
+                            </SidebarMenuItem>
+                        </SidebarMenu>
+                    </SidebarGroupContent>
+                </SidebarGroup>
+            </SidebarContent>
+
+            <!-- Sidebar footer -->
+            <SidebarFooter v-if="$slots['sidebar-footer']" class="border-t border-sidebar-border">
+                <slot name="sidebar-footer" />
+            </SidebarFooter>
+        </Sidebar>
+
+        <!-- Main shell -->
+        <SidebarInset :class="cn('relative min-h-screen min-w-0 bg-background text-foreground', props.insetClass)">
+            <!-- Background -->
+            <BackgroundGrid v-if="props.showBackground" />
+
+            <!-- Topbar -->
+            <header :class="cn('sticky top-0 z-20 flex h-16 shrink-0 items-center gap-2 border-b border-sidebar-border bg-sidebar px-4 backdrop-blur', props.topbarClass)">
+                <!-- Sidebar trigger -->
+                <SidebarTrigger class="-ml-1" />
+
+                <!-- Vertical separator -->
+                <Separator orientation="vertical" class="mr-2 data-[orientation=vertical]:h-4" />
+
+                <!-- Optional custom content on the leading side of the topbar -->
+                <slot name="topbar-leading" />
+
+                <!-- Title and description -->
+                <div class="min-w-0 flex-1">
+                    <!-- Title -->
+                    <div class="truncate text-sm font-semibold">
+                        {{ props.title }}
+                    </div>
+
+                    <!-- Description -->
+                    <div v-if="props.description" class="truncate text-xs text-muted-foreground">
+                        {{ props.description }}
+                    </div>
+                </div>
+
+                <!-- Optional custom content on the trailing side of the topbar -->
+                <slot name="topbar-trailing" />
+            </header>
+
+            <!-- Main content -->
+            <main class="relative z-10 min-w-0 flex-1">
+                <div :class="cn('mx-auto flex w-full min-w-0 max-w-7xl flex-col gap-6 px-3 py-4 sm:px-6 sm:py-6 lg:px-8 lg:py-8', props.contentContainerClass)">
+                    <slot />
+                </div>
+            </main>
+
+            <!-- Full-width footer -->
+            <footer v-if="$slots.footer" class="relative z-10 mt-auto">
+                <slot name="footer" />
+            </footer>
+        </SidebarInset>
+    </SidebarProvider>
+</template>

package/src/components/dashboard-shell/index.ts

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

package/src/components/data-list/DataList.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <table
+    data-slot="data-list"
+    :class="cn('w-full text-left text-xs md:text-sm', props.class)"
+  >
+    <tbody class="border-y border-border">
+      <slot />
+    </tbody>
+  </table>
+</template>

package/src/components/data-list/DataListItem.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <tr
+    data-slot="data-list-item"
+    :class="cn('border-b border-border last:border-b-0', props.class)"
+  >
+    <slot />
+  </tr>
+</template>

package/src/components/data-list/DataListLabel.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <td
+    data-slot="data-list-label"
+    :class="cn('py-3 align-top text-muted-foreground', props.class)"
+  >
+    <slot />
+  </td>
+</template>

package/src/components/data-list/DataListText.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <div
+    data-slot="data-list-text"
+    :class="cn('line-clamp-3', props.class)"
+  >
+    <slot />
+  </div>
+</template>

package/src/components/data-list/DataListValue.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from "vue"
+import { cn } from "../../lib/utils"
+
+const props = defineProps<{
+  class?: HTMLAttributes["class"]
+}>()
+</script>
+
+<template>
+  <td
+    data-slot="data-list-value"
+    :class="cn('py-3 pl-2 align-top text-right font-semibold text-foreground', props.class)"
+  >
+    <slot />
+  </td>
+</template>

package/src/components/data-list/index.ts

@@ -0,0 +1,5 @@
+export { default as DataList } from "./DataList.vue"
+export { default as DataListItem } from "./DataListItem.vue"
+export { default as DataListLabel } from "./DataListLabel.vue"
+export { default as DataListText } from "./DataListText.vue"
+export { default as DataListValue } from "./DataListValue.vue"