@brumaombra/ui-vintage 0.7.7 → 0.7.9

package/src/components/blog/CategoriesSection.vue

@@ -1,9 +1,17 @@
-<script setup>
+<script setup lang="ts">
 import CategoriesList from './CategoriesList.vue';
 
 // Props
-const props = defineProps({
-    categories: { type: Array, default: () => [] }
+const props = withDefaults(defineProps<{
+    categories?: Array<{
+        path: string;
+        slug?: string;
+        name: string;
+        image?: string;
+        count: number;
+    }>;
+}>(), {
+    categories: () => []
 });
 </script>
 

package/src/components/blog/CategoryCard.vue

@@ -1,19 +1,21 @@
-<script setup>
+<script setup lang="ts">
 import { NuxtImg } from '#components';
 import { Badge } from '../ui/badge';
 import { Card, CardContent } from '../ui/card';
 
 // Props
-const props = defineProps({
-    name: { type: String, required: true },
-    image: { type: String, default: '' },
-    count: { type: Number, required: true }
+const props = withDefaults(defineProps<{
+    name: string;
+    image?: string;
+    count: number;
+}>(), {
+    image: ''
 });
 </script>
 
 <template>
-    <Card class="!p-0 overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
-        <CardContent class="gap-0 !p-0">
+    <Card class="p-0! overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
+        <CardContent class="gap-0 p-0!">
             <!-- Background Image -->
             <div v-if="props.image" class="relative w-full h-36 overflow-hidden">
                 <NuxtImg :src="props.image" :alt="props.name" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
@@ -22,7 +24,7 @@ const props = defineProps({
             <!-- Content -->
             <div class="p-4 flex items-center justify-between">
                 <!-- Name -->
-                <span class="text-sm font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] truncate mr-3">
+                <span class="text-sm font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) truncate mr-3">
                     {{ props.name }}
                 </span>
 

package/src/components/blog/HeaderCarousel.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { NuxtImg } from '#components';
 import { ref, computed, onMounted, onUnmounted } from 'vue';
 import { useI18n } from 'vue-i18n';
@@ -11,15 +11,24 @@ import { Card, CardContent } from '../ui/card';
 const { t } = useI18n();
 
 // Props
-const props = defineProps({
-    featuredPosts: { type: Array, default: () => [] }
+const props = withDefaults(defineProps<{
+    featuredPosts?: Array<{
+        path: string;
+        title: string;
+        description?: string;
+        image?: string;
+        categoryText?: string;
+        categoryPath?: string;
+    }>;
+}>(), {
+    featuredPosts: () => []
 });
 
 // Carousel state
 const currentSlide = ref(0);
 const slideCount = computed(() => props.featuredPosts.length || 0);
-const intervalId = ref(null);
-const direction = ref('forward');
+const intervalId = ref<ReturnType<typeof setInterval> | null>(null);
+const direction = ref<'forward' | 'backward'>('forward');
 
 // Start auto-play functionality
 const startAutoPlay = () => {
@@ -44,7 +53,7 @@ const prevSlide = () => {
 };
 
 // Go to specific slide
-const goToSlide = index => {
+const goToSlide = (index: number) => {
     // Determine direction
     if (index > currentSlide.value) {
         direction.value = 'forward';
@@ -73,8 +82,8 @@ onUnmounted(() => {
         <div class="relative overflow-hidden rounded">
             <TransitionGroup name="slide">
                 <div v-for="(post, index) in props.featuredPosts" :id="`carousel-slide-${index}`" :key="post.path || post.title || index" v-show="currentSlide === index" class="w-full" :data-direction="direction">
-                    <Card class="!p-0 overflow-hidden cursor-pointer">
-                        <CardContent class="gap-0 !p-0">
+                    <Card class="p-0! overflow-hidden cursor-pointer">
+                        <CardContent class="gap-0 p-0!">
                             <!-- Slide image -->
                             <NuxtLink :to="post.path">
                                 <div class="relative w-full h-56 md:h-80 overflow-hidden">
@@ -91,13 +100,13 @@ onUnmounted(() => {
 
                                 <!-- Title -->
                                 <NuxtLink :to="post.path">
-                                    <h3 class="text-base md:text-3xl font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-3 line-clamp-2 hover:opacity-75 transition-opacity duration-200">
+                                    <h3 class="text-base md:text-3xl font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) mb-3 line-clamp-2 hover:opacity-75 transition-opacity duration-200">
                                         {{ post.title }}
                                     </h3>
                                 </NuxtLink>
 
                                 <!-- Description -->
-                                <p class="text-xs md:!text-base text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-6 line-clamp-2 leading-relaxed">
+                                <p class="text-xs md:text-base! text-(--text-secondary-light) dark:text-(--text-secondary-dark) mb-6 line-clamp-2 leading-relaxed">
                                     {{ post.description }}
                                 </p>
 
@@ -116,7 +125,7 @@ onUnmounted(() => {
                                         <button v-for="(_, idx) in props.featuredPosts"
                                             :key="idx"
                                             @click="goToSlide(idx)"
-                                            :class="['h-5 w-5 sm:!h-4 sm:!w-4 shrink-0 rounded-[2px] transition-all duration-300 cursor-pointer bg-[var(--border-light)] dark:bg-[var(--border-dark)]', currentSlide === idx ? '!w-8 sm:!w-7 !bg-[var(--text-primary-light)] dark:!bg-[var(--text-primary-dark)]' : '']"
+                                            :class="['h-5 w-5 sm:h-4! sm:w-4! shrink-0 rounded-[2px] transition-all duration-300 cursor-pointer bg-(--border-light) dark:bg-(--border-dark)', currentSlide === idx ? 'w-8! sm:w-7! bg-(--text-primary-light)! dark:bg-(--text-primary-dark)!' : '']"
                                             :aria-label="t('uiVintage.blog.goToSlide', { index: idx + 1 })"
                                             :aria-current="currentSlide === idx"
                                             role="tab"
@@ -135,16 +144,16 @@ onUnmounted(() => {
         <button v-if="props.featuredPosts.length > 1"
             @click="prevSlide"
             :aria-label="t('uiVintage.blog.previousSlide')"
-            class="absolute left-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-[var(--border-light)] dark:border-[var(--border-dark)] bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] px-3 py-3 rounded-none transition-colors duration-200 hover:border-[var(--border-hover-light)] dark:hover:border-[var(--border-hover-dark)] cursor-pointer">
-            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+            class="absolute left-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-(--border-light) dark:border-(--border-dark) bg-(--bg-card-light) dark:bg-(--bg-card-dark) px-3 py-3 rounded-none transition-colors duration-200 hover:border-(--border-hover-light) dark:hover:border-(--border-hover-dark) cursor-pointer">
+            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
         </button>
 
         <!-- Next slide -->
         <button v-if="props.featuredPosts.length > 1"
             @click="nextSlide"
             :aria-label="t('uiVintage.blog.nextSlide')"
-            class="absolute right-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-[var(--border-light)] dark:border-[var(--border-dark)] bg-[var(--bg-card-light)] dark:bg-[var(--bg-card-dark)] px-3 py-3 rounded-none transition-colors duration-200 hover:border-[var(--border-hover-light)] dark:hover:border-[var(--border-hover-dark)] cursor-pointer">
-            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]" />
+            class="absolute right-2 top-[calc(50%-4rem)] -translate-y-1/2 z-10 border border-(--border-light) dark:border-(--border-dark) bg-(--bg-card-light) dark:bg-(--bg-card-dark) px-3 py-3 rounded-none transition-colors duration-200 hover:border-(--border-hover-light) dark:hover:border-(--border-hover-dark) cursor-pointer">
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4 text-(--text-secondary-light) dark:text-(--text-secondary-dark)" />
         </button>
     </div>
 </template>

package/src/components/blog/PostCard.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { NuxtImg } from '#components';
 import { useI18n } from 'vue-i18n';
 import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
@@ -10,36 +10,41 @@ import { Card, CardContent } from '../ui/card';
 const { t } = useI18n();
 
 // Props
-const props = defineProps({
-    image: { type: String, default: '' },
-    category: { type: String, default: '' },
-    title: { type: String, default: '' },
-    description: { type: String, default: '' }
+const props = withDefaults(defineProps<{
+    image?: string;
+    category?: string;
+    title?: string;
+    description?: string;
+}>(), {
+    image: '',
+    category: '',
+    title: '',
+    description: ''
 });
 </script>
 
 <template>
-    <Card class="!p-0 overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
-        <CardContent class="h-full gap-0 !p-0">
+    <Card class="p-0! overflow-hidden group cursor-pointer transition-transform duration-300 ease-out hover:-translate-y-1 motion-reduce:transition-none motion-reduce:hover:translate-y-0">
+        <CardContent class="h-full gap-0 p-0!">
             <!-- Featured image -->
             <div v-if="props.image" class="relative w-full h-48 overflow-hidden">
                 <NuxtImg :src="props.image" :alt="props.title" height="225" width="400" format="avif" quality="35" :sizes="{ 480: '480px', 1280: '400px' }" loading="lazy" decoding="async" class="w-full h-full object-cover transition-transform duration-500 group-hover:scale-110" />
             </div>
 
             <!-- Content -->
-            <div class="p-6 flex flex-col flex-grow">
+            <div class="p-6 flex flex-col grow">
                 <!-- Category Badge -->
                 <div v-if="props.category" class="mb-3">
                     <Badge color="gray" :text="props.category" />
                 </div>
 
                 <!-- Post Title -->
-                <h2 class="text-base font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] mb-2 line-clamp-2">
+                <h2 class="text-base font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) mb-2 line-clamp-2">
                     {{ props.title }}
                 </h2>
 
                 <!-- Post Description -->
-                <p class="text-xs md:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] leading-relaxed mb-4 line-clamp-3 flex-grow">
+                <p class="text-xs md:text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark) leading-relaxed mb-4 line-clamp-3 grow">
                     {{ props.description }}
                 </p>
 

package/src/components/blog/PostsList.vue

@@ -1,9 +1,18 @@
-<script setup>
+<script setup lang="ts">
 import PostCard from './PostCard.vue';
 
 // Props
-const props = defineProps({
-    posts: { type: Array, default: () => [] }
+const props = withDefaults(defineProps<{
+    posts?: Array<{
+        path: string;
+        title: string;
+        description?: string;
+        image?: string;
+        categoryText?: string;
+        categoryPath?: string;
+    }>;
+}>(), {
+    posts: () => []
 });
 </script>
 

package/src/components/blog/SocialShareSidebar.vue

@@ -1,4 +1,4 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Facebook01Icon, Linkedin01Icon, NewTwitterIcon, Share08Icon, TelegramIcon, WhatsappIcon } from '@hugeicons/core-free-icons';
@@ -6,10 +6,10 @@ import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
 
 // Props
-const props = defineProps({
-    title: { type: String, required: true },
-    url: { type: String, required: true }
-});
+const props = defineProps<{
+    title: string;
+    url: string;
+}>();
 
 const { t } = useI18n();
 
@@ -54,11 +54,11 @@ const socialPlatforms = computed(() => {
 
 <template>
     <!-- Desktop sidebar on the right -->
-    <div class="fixed right-[calc(50%-600px)] top-[140px] z-10 hidden xl:block">
-        <Card class="!p-5 flex flex-col space-y-4 items-center">
-            <CardContent class="!p-0 gap-4 items-center">
+    <div class="fixed right-[calc(50%-600px)] top-35 z-10 hidden xl:block">
+        <Card class="p-5! flex flex-col space-y-4 items-center">
+            <CardContent class="p-0! gap-4 items-center">
                 <!-- Share icon -->
-                <HugeiconsIcon :icon="Share08Icon" class="size-5 text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] mb-2" />
+                <HugeiconsIcon :icon="Share08Icon" class="size-5 text-(--text-secondary-light) dark:text-(--text-secondary-dark) mb-2" />
 
                 <!-- Social share links (desktop) -->
                 <template v-for="platform in socialPlatforms" :key="platform.name">
@@ -76,8 +76,8 @@ const socialPlatforms = computed(() => {
 
     <!-- Mobile view (floating bar at bottom) -->
     <div class="fixed bottom-4 left-1/2 z-10 -translate-x-1/2 xl:hidden">
-        <Card class="!p-3 w-fit">
-            <CardContent class="!flex-row !p-0 items-center justify-center gap-3">
+        <Card class="p-3! w-fit">
+            <CardContent class="flex-row! p-0! items-center justify-center gap-3">
                 <!-- Social share links (mobile) -->
                 <template v-for="platform in socialPlatforms" :key="platform.name">
                     <NuxtLink :to="platform.url"

package/src/components/blog/TableOfContents.vue

@@ -1,13 +1,29 @@
-<script setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { Bookmark01Icon } from '@hugeicons/core-free-icons';
 import { Accordion } from '../ui/accordion';
 
+interface BlogTocLink {
+    id?: string;
+    text?: string;
+    depth?: number;
+    children?: BlogTocLink[];
+}
+
 // Props
-const props = defineProps({
-    content: { type: Object, required: true }
-});
+const props = defineProps<{
+    content: {
+        body?: {
+            toc?: {
+                links?: BlogTocLink[];
+            };
+        };
+        toc?: {
+            links?: BlogTocLink[];
+        };
+    };
+}>();
 
 const { t } = useI18n();
 
@@ -16,13 +32,13 @@ const headings = computed(() => {
     const tocLinks = props.content?.body?.toc?.links || props.content?.toc?.links || [];
 
     // Recursive function to flatten the nested links
-    const flattenLinks = links => {
+    const flattenLinks = (links: BlogTocLink[]): Array<{ id: string; text: string; level: number }> => {
         return links.flatMap(link => {
             // Extract the current heading
             const currentHeading = {
-                id: link.id,
-                text: link.text,
-                level: link.depth
+                id: link.id ?? '',
+                text: link.text ?? '',
+                level: link.depth ?? 0
             };
 
             // Recursively flatten the children links
@@ -36,7 +52,7 @@ const headings = computed(() => {
 });
 
 // Smooth scroll to heading
-const scrollToHeading = id => {
+const scrollToHeading = (id: string) => {
     const element = document.getElementById(id);
     if (element) {
         element.scrollIntoView({
@@ -48,16 +64,16 @@ const scrollToHeading = id => {
 };
 
 // Get classes for heading button
-const getHeadingButtonClasses = heading => {
+const getHeadingButtonClasses = (level: number) => {
     // Base classes for all titles
     const baseClasses = 'block w-full text-left px-0 py-2 md:px-3 md:py-2 rounded transition-all duration-200 hover:bg-(--bg-selected-light) dark:hover:bg-(--bg-selected-dark) cursor-pointer';
 
     // Add classes based on heading level
     let levelClasses = '';
-    if (heading.level === 2) {
+    if (level === 2) {
         levelClasses = 'text-(--text-primary-light) dark:text-(--text-primary-dark) font-semibold text-xs md:text-sm';
     } else {
-        levelClasses = 'text-(--text-secondary-light) dark:text-(--text-secondary-dark) !pl-6 text-xs md:text-sm';
+        levelClasses = 'text-(--text-secondary-light) dark:text-(--text-secondary-dark) pl-6! text-xs md:text-sm';
     }
 
     // Return combined classes
@@ -68,7 +84,7 @@ const getHeadingButtonClasses = heading => {
 <template>
     <Accordion v-if="headings.length > 0" :title="t('uiVintage.blog.tableOfContents')" :icon="Bookmark01Icon">
         <nav class="space-y-1">
-            <button v-for="heading in headings" :key="heading.id" @click="scrollToHeading(heading.id)" :class="getHeadingButtonClasses(heading)">
+            <button v-for="heading in headings" :key="heading.id" @click="scrollToHeading(heading.id)" :class="getHeadingButtonClasses(heading.level)">
                 {{ heading.text }}
             </button>
         </nav>

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 -->