@brumaombra/ui-vintage 0.7.8 → 0.7.10

package/src/components/blog/index.ts

@@ -1,4 +1,5 @@
 export { default as AllPostsSection } from './AllPostsSection.vue';
+export { default as BlogContentRenderer } from './BlogContentRenderer.vue';
 export { default as BlogFAQSection } from './BlogFAQSection.vue';
 export { default as BlogInfoSection } from './BlogInfoSection.vue';
 export { default as BlogHeaderSection } from './BlogHeaderSection.vue';

package/src/components/busy-indicator/BusyIndicator.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import { Busy } from "../ui/busy";
-import { busyIndicatorState } from "./busy-indicator-state";
+import { Busy } from '../ui/busy';
+import { busyIndicatorState } from './busy-indicator-state';
 </script>
 
 <template>

package/src/components/busy-indicator/busy-indicator-state.ts

@@ -1,27 +1,26 @@
-import { h, reactive, render } from "vue";
-import type { HTMLAttributes } from "vue";
+import { h, reactive, render, type HTMLAttributes } from 'vue';
 
 export interface SetBusyOptions {
     label?: string;
-    class?: HTMLAttributes["class"];
-    overlayClass?: HTMLAttributes["class"];
+    class?: HTMLAttributes['class'];
+    overlayClass?: HTMLAttributes['class'];
 }
 
 interface BusyIndicatorState {
     show: boolean;
     label: string;
-    class: HTMLAttributes["class"];
-    overlayClass: HTMLAttributes["class"];
+    class: HTMLAttributes['class'];
+    overlayClass: HTMLAttributes['class'];
 }
 
-const BUSY_INDICATOR_ROOT_ID = "ui-vintage-busy-indicator-root";
+const BUSY_INDICATOR_ROOT_ID = 'ui-vintage-busy-indicator-root';
 
 let busyIndicatorMountPromise: Promise<void> | null = null;
 
 // Shared busy state
 export const busyIndicatorState: BusyIndicatorState = reactive({
     show: false,
-    label: "Loading...",
+    label: 'Loading...',
     class: undefined,
     overlayClass: undefined
 });
@@ -29,7 +28,7 @@ export const busyIndicatorState: BusyIndicatorState = reactive({
 // Mount the busy indicator once on demand
 const ensureBusyIndicatorMounted = () => {
     // Skip mounting during SSR
-    if (typeof document === "undefined") {
+    if (typeof document === 'undefined') {
         return Promise.resolve();
     }
 
@@ -47,7 +46,7 @@ const ensureBusyIndicatorMounted = () => {
     // Start the lazy mount
     busyIndicatorMountPromise = (async () => {
         // Load the component only when needed
-        const { default: BusyIndicator } = await import("./BusyIndicator.vue");
+        const { default: BusyIndicator } = await import('./BusyIndicator.vue');
 
         // Guard against a concurrent mount
         if (document.getElementById(BUSY_INDICATOR_ROOT_ID)) {
@@ -55,7 +54,7 @@ const ensureBusyIndicatorMounted = () => {
         }
 
         // Create the host element and render the component
-        const container = document.createElement("div");
+        const container = document.createElement('div');
         container.id = BUSY_INDICATOR_ROOT_ID;
         document.body.appendChild(container);
         render(h(BusyIndicator), container);
@@ -71,7 +70,7 @@ const ensureBusyIndicatorMounted = () => {
 export const setBusy = (show: boolean, options: SetBusyOptions = {}) => {
     // Prepare the overlay before showing it
     if (show) {
-        busyIndicatorState.label = options.label ?? busyIndicatorState.label ?? "Loading...";
+        busyIndicatorState.label = options.label ?? busyIndicatorState.label ?? 'Loading...';
         busyIndicatorState.class = options.class;
         busyIndicatorState.overlayClass = options.overlayClass;
         void ensureBusyIndicatorMounted();

package/src/components/busy-indicator/index.ts

@@ -1,3 +1,3 @@
-export { default as BusyIndicator } from "./BusyIndicator.vue";
-export { busyIndicatorState, setBusy } from "./busy-indicator-state";
-export type { SetBusyOptions } from "./busy-indicator-state";
+export { default as BusyIndicator } from './BusyIndicator.vue';
+export { busyIndicatorState, setBusy } from './busy-indicator-state';
+export type { SetBusyOptions } from './busy-indicator-state';

package/src/components/card-grid/CardGrid.vue

@@ -1,21 +1,35 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="T extends { id: PropertyKey }">
 import { PackageIcon } from '@hugeicons/core-free-icons';
 import { EmptyStateCard } from '../empty-state-card';
 import { LoadMoreButton } from '../load-more-button';
 import { LoadingStateCard } from '../loading-state-card';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    items: { type: Array, default: () => [] },
-    busy: { type: Boolean, default: false },
-    loadMoreBusy: { type: Boolean, default: false },
-    hasMore: { type: Boolean, default: false },
-    emptyMessage: { type: String, required: true },
-    emptyIcon: { type: Object, default: () => PackageIcon }
+const props = withDefaults(defineProps<{
+    items?: T[];
+    busy?: boolean;
+    loadMoreBusy?: boolean;
+    hasMore?: boolean;
+    emptyMessage: string;
+    emptyIcon?: HugeiconsIconDefinition;
+}>(), {
+    items: () => [],
+    busy: false,
+    loadMoreBusy: false,
+    hasMore: false,
+    emptyIcon: () => PackageIcon
 });
 
 // Emits
-const emits = defineEmits(['load-more']);
+const emits = defineEmits<{
+    'load-more': [];
+}>();
+
+// Slots
+defineSlots<{
+    card(props: { item: T; key?: PropertyKey }): unknown;
+}>();
 
 // Handle load more
 const handleLoadMore = () => {
@@ -29,13 +43,13 @@ const handleLoadMore = () => {
         <LoadingStateCard v-if="props.busy" />
 
         <!-- Empty state -->
-        <EmptyStateCard v-else-if="!props.items || props.items.length === 0"
+        <EmptyStateCard v-else-if="props.items.length === 0"
             :description="props.emptyMessage"
             :icon="props.emptyIcon" />
 
         <!-- Cards grid -->
         <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 md:gap-6 xl:gap-4">
-            <slot name="card" v-for="item in props.items" :item="item" :key="(item as any).id" />
+            <slot name="card" v-for="item in props.items" :item="item" :key="item.id" />
         </div>
 
         <!-- Load more button -->

package/src/components/chip/Chip.vue

@@ -1,30 +1,30 @@
 <script setup lang="ts">
-import { Cancel01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import type { HTMLAttributes } from "vue"
-import { getSurfaceToneClasses, type ToneColor } from "../../lib/color-tokens"
-import { cn } from "../../lib/utils"
+import { Cancel01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import type { HTMLAttributes } from 'vue';
+import { getSurfaceToneClasses, type ToneColor } from '../../lib/color-tokens';
+import { cn } from '../../lib/utils';
 
 // Props
 const props = withDefaults(defineProps<{
-    text: string
-    color?: ToneColor
-    removeLabel?: string
-    class?: HTMLAttributes["class"]
+    text: string;
+    color?: ToneColor;
+    removeLabel?: string;
+    class?: HTMLAttributes['class'];
 }>(), {
-    color: "gray",
-    removeLabel: "Remove"
-})
+    color: 'gray',
+    removeLabel: 'Remove'
+});
 
 // Emits
 const emits = defineEmits<{
     remove: []
-}>()
+}>();
 
 // Handle remove button click
 const handleRemove = () => {
-    emits("remove")
-}
+    emits('remove');
+};
 </script>
 
 <template>

package/src/components/chip/index.ts

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

package/src/components/confirm-dialog/ConfirmDialog.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { computed } from "vue";
-import { InformationCircleIcon } from "@hugeicons/core-free-icons";
-import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../ui/alert-dialog";
-import { Button } from "../ui/button";
-import { cancelActiveConfirmDialog, closeConfirmDialog, confirmActiveDialog, confirmDialogState } from "./confirm-dialog-state";
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed } from 'vue';
+import { InformationCircleIcon } from '@hugeicons/core-free-icons';
+import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';
+import { Button } from '../ui/button';
+import { cancelActiveConfirmDialog, closeConfirmDialog, confirmActiveDialog, confirmDialogState } from './confirm-dialog-state';
 
 const currentDialog = computed(() => confirmDialogState.current);
 
@@ -24,9 +24,9 @@ const handleOpenChange = (open: boolean) => {
             <div class="px-5 pb-5 pt-5 sm:px-6 sm:pb-4 sm:pt-6">
                 <div class="flex flex-col gap-4 sm:flex-row sm:items-start">
                     <!-- Dialog icon -->
-                    <div class="flex size-12 shrink-0 self-center items-center justify-center rounded border border-[var(--border-light)] bg-[var(--bg-surface-light)] sm:size-10 sm:self-start dark:border-[var(--border-dark)] dark:bg-[var(--bg-surface-dark)]">
-                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 text-[var(--button-primary-light)] dark:text-[var(--button-primary-dark)]" />
-                        <HugeiconsIcon v-else :icon="InformationCircleIcon" :stroke-width="1.8" class="size-6 text-[var(--button-primary-light)] dark:text-[var(--button-primary-dark)]" />
+                    <div class="flex size-12 shrink-0 self-center items-center justify-center rounded border border-(--border-light) bg-(--bg-surface-light) sm:size-10 sm:self-start dark:border-(--border-dark) dark:bg-(--bg-surface-dark)">
+                        <HugeiconsIcon v-if="currentDialog.options.icon" :icon="currentDialog.options.icon" :stroke-width="1.8" class="size-6 text-(--button-primary-light) dark:text-(--button-primary-dark)" />
+                        <HugeiconsIcon v-else :icon="InformationCircleIcon" :stroke-width="1.8" class="size-6 text-(--button-primary-light) dark:text-(--button-primary-dark)" />
                     </div>
 
                     <!-- Dialog header -->

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

@@ -1,8 +1,9 @@
-import { h, markRaw, reactive, render } from "vue";
-import type { ButtonVariants } from "../ui/button";
+import { h, markRaw, reactive, render } from 'vue';
+import type { ButtonVariants } from '../ui/button';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
-export type DialogButtonVariant = NonNullable<ButtonVariants["variant"]>;
-export type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
+export type DialogButtonVariant = NonNullable<ButtonVariants['variant']>;
+export type { HugeiconsIconDefinition };
 
 export interface ShowConfirmDialogOptions {
     title?: string;
@@ -20,7 +21,7 @@ export interface ShowConfirmDialogOptions {
 
 interface ConfirmDialogRequest {
     id: number;
-    options: Required<Omit<ShowConfirmDialogOptions, "icon" | "confirmButtonIcon" | "cancelButtonIcon" | "onConfirm" | "onCancel">> & {
+    options: Required<Omit<ShowConfirmDialogOptions, 'icon' | 'confirmButtonIcon' | 'cancelButtonIcon' | 'onConfirm' | 'onCancel'>> & {
         icon: HugeiconsIconDefinition | null;
         confirmButtonIcon: HugeiconsIconDefinition | null;
         cancelButtonIcon: HugeiconsIconDefinition | null;
@@ -42,7 +43,7 @@ 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";
+const CONFIRM_DIALOG_ROOT_ID = 'ui-vintage-confirm-dialog-root';
 
 // Shared confirm dialog state
 export const confirmDialogState: ConfirmDialogState = reactive({
@@ -57,7 +58,7 @@ const markIcon = (icon: HugeiconsIconDefinition | null | undefined) => icon ? ma
 // Mount the dialog once on demand
 const ensureConfirmDialogMounted = () => {
     // Skip mounting during SSR
-    if (typeof document === "undefined") {
+    if (typeof document === 'undefined') {
         return Promise.resolve();
     }
 
@@ -75,7 +76,7 @@ const ensureConfirmDialogMounted = () => {
     // Start the lazy mount
     confirmDialogMountPromise = (async () => {
         // Load the component only when needed
-        const { default: ConfirmDialog } = await import("./ConfirmDialog.vue");
+        const { default: ConfirmDialog } = await import('./ConfirmDialog.vue');
 
         // Guard against a concurrent mount
         if (document.getElementById(CONFIRM_DIALOG_ROOT_ID)) {
@@ -83,7 +84,7 @@ const ensureConfirmDialogMounted = () => {
         }
 
         // Create the host element and render the component
-        const container = document.createElement("div");
+        const container = document.createElement('div');
         container.id = CONFIRM_DIALOG_ROOT_ID;
         document.body.appendChild(container);
         render(h(ConfirmDialog), container);
@@ -182,12 +183,12 @@ export const showConfirmDialog = (options: ShowConfirmDialogOptions) => {
         enqueueConfirmDialog({
             id: nextConfirmDialogId += 1,
             options: {
-                title: options.title ?? "Confirm",
+                title: options.title ?? 'Confirm',
                 message: options.message,
-                confirmText: options.confirmText ?? "Confirm",
-                cancelText: options.cancelText ?? "Cancel",
-                confirmButtonType: options.confirmButtonType ?? "primary",
-                cancelButtonType: options.cancelButtonType ?? "secondary",
+                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),

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

@@ -1,12 +1,3 @@
-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";
+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

@@ -1,22 +1,25 @@
-<script setup>
+<script setup lang="ts">
 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) }
+const props = withDefaults(defineProps<{
+    items?: string[];
+    variant?: 'circle' | 'checkmark' | 'numbered' | 'cross';
+}>(), {
+    items: () => [],
+    variant: 'checkmark'
 });
 
 // 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';
+    return 'flex items-center justify-center w-8 h-8 bg-(--bg-card-light) dark:bg-(--bg-card-dark) border border-(--border-light) dark:border-(--border-dark) rounded mr-4 shrink-0';
 };
 
 // Icon color classes
 const getIconClasses = () => {
-    return 'text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] text-xs';
+    return 'text-(--text-secondary-light) dark:text-(--text-secondary-dark) text-xs';
 };
 </script>
 
@@ -24,7 +27,7 @@ const getIconClasses = () => {
     <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">
+                <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()">
@@ -48,7 +51,7 @@ const getIconClasses = () => {
 
                         <!-- Content -->
                         <div class="flex-1">
-                            <div class="text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] leading-relaxed">
+                            <div class="text-(--text-primary-light) dark:text-(--text-primary-dark) leading-relaxed">
                                 {{ item }}
                             </div>
                         </div>

package/src/components/content/BlogTable.vue

@@ -1,26 +1,30 @@
-<script setup>
+<script setup lang="ts">
 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 }
+const props = withDefaults(defineProps<{
+    headers?: string[];
+    rows?: string[][];
+    highlightCol?: number;
+}>(), {
+    headers: () => [],
+    rows: () => [],
+    highlightCol: -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)]' : '';
+const getHeaderClasses = (colIndex: number) => {
+    const baseClasses = 'text-left font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-(--bg-selected-light) dark:bg-(--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)]' : '';
+const getCellClasses = (colIndex: number) => {
+    const baseClasses = 'align-top text-(--text-primary-light) dark:text-(--text-primary-dark) leading-relaxed whitespace-normal';
+    const firstColClass = colIndex === 0 ? 'font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)' : '';
+    const highlightClass = props.highlightCol === colIndex ? 'bg-(--bg-selected-light) dark:bg-(--bg-selected-dark)' : '';
     return [baseClasses, firstColClass, highlightClass];
 };
 </script>
@@ -33,7 +37,7 @@ const getCellClasses = colIndex => {
                     <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">
+                            <TableRow class="bg-transparent text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark) hover:bg-transparent">
                                 <TableHead v-for="(header, colIndex) in props.headers" :key="colIndex" :class="getHeaderClasses(colIndex)">
                                     {{ header }}
                                 </TableHead>
@@ -42,7 +46,7 @@ const getCellClasses = colIndex => {
 
                         <!-- 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">
+                            <TableRow v-for="(row, rowIndex) in props.rows" :key="rowIndex" class="text-(--text-secondary-light) dark:text-(--text-secondary-dark) hover:bg-transparent">
                                 <TableCell v-for="(cell, colIndex) in row" :key="colIndex" :class="getCellClasses(colIndex)">
                                     {{ cell }}
                                 </TableCell>

package/src/components/content/ProseHr.vue

@@ -1,10 +1,13 @@
-<script setup>
+<script setup lang="ts">
 import { ChartLineData02Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    icon: { type: Object, default: () => ChartLineData02Icon }
+const props = withDefaults(defineProps<{
+    icon?: HugeiconsIconDefinition;
+}>(), {
+    icon: () => ChartLineData02Icon
 });
 </script>
 
@@ -12,15 +15,15 @@ const props = defineProps({
     <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)]" />
+            <div class="h-px flex-1 bg-linear-to-r from-transparent via-(--border-light) to-(--border-light) dark:via-(--border-dark) dark:to-(--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 class="flex h-9 w-9 items-center justify-center rounded bg-(--bg-card-light) dark:bg-(--bg-card-dark) border border-(--border-light) dark:border-(--border-dark)">
+                <HugeiconsIcon :icon="props.icon" class="size-4 text-(--text-secondary-light) dark:text-(--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 class="h-px flex-1 bg-linear-to-l from-transparent via-(--border-light) to-(--border-light) dark:via-(--border-dark) dark:to-(--border-dark)" />
         </div>
     </div>
 </template>

package/src/components/content/Terminal.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+import { CheckmarkCircle02Icon, Copy01Icon, TerminalIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { Button } from '../ui/button';
+import { Card } from '../ui/card';
+
+// Props
+const props = withDefaults(defineProps<{
+    commands?: string[];
+    title?: string;
+    prompt?: string;
+    copyable?: boolean;
+}>(), {
+    commands: () => [],
+    title: '',
+    prompt: '$',
+    copyable: true
+});
+
+const { t } = useI18n();
+const copied = ref(false);
+const commandText = computed(() => props.commands.join('\n'));
+const resolvedTitle = computed(() => props.title || t('uiVintage.terminal.title'));
+
+// Copy all command lines to the clipboard
+const copyCommands = async () => {
+    // Check if copy is enabled
+    if (!props.copyable || !commandText.value || !navigator.clipboard) {
+        return;
+    }
+
+    // Copy the command text to the clipboard
+    await navigator.clipboard.writeText(commandText.value);
+    copied.value = true;
+    window.setTimeout(() => {
+        copied.value = false;
+    }, 1800);
+};
+</script>
+
+<template>
+    <div class="not-prose my-6 sm:my-12">
+        <Card class="gap-0! sm:gap-0! overflow-hidden p-0! text-(--text-primary-light) dark:text-(--text-primary-dark)">
+            <!-- Terminal header -->
+            <div class="flex items-center justify-between gap-3 border-b border-(--border-light) bg-(--bg-card-light) px-3 py-2 sm:px-4 dark:border-(--border-dark) dark:bg-(--bg-card-dark)">
+                <div class="flex min-w-0 items-center gap-2">
+                    <HugeiconsIcon :icon="TerminalIcon" class="size-4 shrink-0 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
+                    <span class="truncate text-xs font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)">{{ resolvedTitle }}</span>
+                </div>
+
+                <!-- Copy command button -->
+                <Button v-if="props.copyable"
+                    variant="ghost"
+                    size="icon"
+                    class="size-7 text-(--text-secondary-light) hover:bg-(--bg-selected-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:bg-(--bg-selected-dark) dark:hover:text-(--text-primary-dark)"
+                    :aria-label="t('uiVintage.terminal.copy')"
+                    :title="t('uiVintage.terminal.copy')"
+                    :disabled="!commandText"
+                    @click="copyCommands">
+                    <HugeiconsIcon :icon="copied ? CheckmarkCircle02Icon : Copy01Icon" class="size-4" />
+                </Button>
+            </div>
+
+            <!-- Terminal commands -->
+            <pre class="overflow-x-auto bg-(--bg-surface-light) px-4 py-3 text-xs leading-6 dark:bg-(--bg-surface-dark) sm:px-5 sm:py-4 sm:text-sm"><code><span v-for="(command, index) in props.commands" :key="`${command}-${index}`" class="flex min-w-max"><span class="mr-3 select-none text-(--text-secondary-light) dark:text-(--text-secondary-dark)" aria-hidden="true">{{ props.prompt }}</span><span>{{ command }}</span></span></code></pre>
+        </Card>
+    </div>
+</template>

package/src/components/content/index.ts

@@ -1,3 +1,4 @@
 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';
+export { default as Terminal } from './Terminal.vue';