@brumaombra/ui-vintage 0.7.7 → 0.7.9

package/src/components/loading-state-card/LoadingStateCard.vue

@@ -4,35 +4,39 @@ import { useI18n } from 'vue-i18n';
 import { Loading03Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Card, CardContent } from '../ui/card';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    icon: { type: [Object, Array], default: () => Loading03Icon },
-    title: { type: String, default: '' },
-    description: { type: String, default: '' }
+const props = withDefaults(defineProps<{
+    icon?: HugeiconsIconDefinition;
+    title?: string;
+    description?: string;
+}>(), {
+    icon: () => Loading03Icon,
+    title: '',
+    description: ''
 });
 
 const { t } = useI18n();
-
 const resolvedTitle = computed(() => props.title || t('uiVintage.common.loading.title') || 'Loading...');
 const resolvedDescription = computed(() => props.description || t('uiVintage.common.loading.description') || 'Please wait a moment while we load the content.');
 </script>
 
 <template>
     <Card class="flex flex-col items-center justify-center px-4 py-8 text-center md:py-12">
-        <CardContent class="flex flex-col items-center justify-center !p-0 text-center">
+        <CardContent class="flex flex-col items-center justify-center p-0! text-center">
             <!-- Loading spinner icon -->
-            <div class="flex items-center justify-center text-4xl text-[var(--text-secondary-light)] opacity-60 dark:text-[var(--text-secondary-dark)]">
+            <div class="flex items-center justify-center text-4xl text-(--text-secondary-light) opacity-60 dark:text-(--text-secondary-dark)">
                 <HugeiconsIcon :icon="props.icon" class="size-10 animate-spin" />
             </div>
 
             <!-- Title -->
-            <h3 v-if="resolvedTitle" class="text-sm font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)] md:text-lg">
+            <h3 v-if="resolvedTitle" class="text-sm font-bold text-(--text-primary-light) dark:text-(--text-primary-dark) md:text-lg">
                 {{ resolvedTitle }}
             </h3>
 
             <!-- Description -->
-            <p v-if="resolvedDescription" class="max-w-md text-xs text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)] md:text-sm">
+            <p v-if="resolvedDescription" class="max-w-md text-xs text-(--text-secondary-light) dark:text-(--text-secondary-dark) md:text-sm">
                 {{ resolvedDescription }}
             </p>
 

package/src/components/message-dialog/MessageDialog.vue

@@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { computed } from "vue";
-import { AlertCircleIcon, InformationCircleIcon, Tick02Icon } from "@hugeicons/core-free-icons";
-import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "../ui/alert-dialog";
-import { Button } from "../ui/button";
-import { getUiVintageRuntimeMessage } from "../../lib/i18n";
-import { closeMessageDialog, messageDialogState, resolveActiveMessageDialog } from "./message-dialog-state";
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed } from 'vue';
+import { AlertCircleIcon, InformationCircleIcon, Tick02Icon } from '@hugeicons/core-free-icons';
+import { AlertDialog, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from '../ui/alert-dialog';
+import { Button } from '../ui/button';
+import { getUiVintageRuntimeMessage } from '../../lib/i18n';
+import { closeMessageDialog, messageDialogState, resolveActiveMessageDialog } from './message-dialog-state';
 
 // Active dialog state
 const currentDialog = computed(() => messageDialogState.current);
@@ -28,29 +28,29 @@ const resolvedCloseText = computed(() => {
 const defaultMessageIcon = computed(() => {
     const current = currentDialog.value;
     if (!current) return InformationCircleIcon;
-    if (current.options.type === "error" || current.options.type === "warning") return AlertCircleIcon;
-    if (current.options.type === "success") return Tick02Icon;
+    if (current.options.type === 'error' || current.options.type === 'warning') return AlertCircleIcon;
+    if (current.options.type === 'success') return Tick02Icon;
     return InformationCircleIcon;
 });
 
 // Resolved container classes for the message icon
 const messageIconClasses = computed(() => {
     const current = currentDialog.value;
-    if (!current) return "border-[var(--border)] bg-[var(--bg-surface-light)] dark:bg-[var(--bg-surface-dark)]";
-    if (current.options.type === "error") return "border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30";
-    if (current.options.type === "warning") return "border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/30";
-    if (current.options.type === "success") return "border-green-200 bg-green-50 dark:border-green-900/50 dark:bg-green-950/30";
-    return "border-[var(--border)] bg-[var(--bg-surface-light)] dark:bg-[var(--bg-surface-dark)]";
+    if (!current) return 'border-(--border) bg-(--bg-surface-light) dark:bg-(--bg-surface-dark)';
+    if (current.options.type === 'error') return 'border-red-200 bg-red-50 dark:border-red-900/50 dark:bg-red-950/30';
+    if (current.options.type === 'warning') return 'border-amber-200 bg-amber-50 dark:border-amber-900/50 dark:bg-amber-950/30';
+    if (current.options.type === 'success') return 'border-green-200 bg-green-50 dark:border-green-900/50 dark:bg-green-950/30';
+    return 'border-(--border) bg-(--bg-surface-light) dark:bg-(--bg-surface-dark)';
 });
 
 // Resolved glyph color classes
 const messageGlyphClasses = computed(() => {
     const current = currentDialog.value;
-    if (!current) return "text-blue-600";
-    if (current.options.type === "error") return "text-red-600";
-    if (current.options.type === "warning") return "text-amber-600";
-    if (current.options.type === "success") return "text-green-600";
-    return "text-blue-600";
+    if (!current) return 'text-blue-600';
+    if (current.options.type === 'error') return 'text-red-600';
+    if (current.options.type === 'warning') return 'text-amber-600';
+    if (current.options.type === 'success') return 'text-green-600';
+    return 'text-blue-600';
 });
 
 // Close the dialog when the shell requests it

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

@@ -1,11 +1,3 @@
-export { default as MessageDialog } from "./MessageDialog.vue";
-export {
-    closeMessageDialog,
-    messageDialogState,
-    resolveActiveMessageDialog,
-    showMessageDialog
-} from "./message-dialog-state";
-export type {
-    DialogMessageType,
-    ShowMessageDialogOptions
-} from "./message-dialog-state";
+export { default as MessageDialog } from './MessageDialog.vue';
+export { closeMessageDialog, messageDialogState, resolveActiveMessageDialog, showMessageDialog } from './message-dialog-state';
+export type { DialogMessageType, ShowMessageDialogOptions } from './message-dialog-state';

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

@@ -1,7 +1,8 @@
-import { h, markRaw, reactive, render } from "vue";
+import { h, markRaw, reactive, render } from 'vue';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
-export type DialogMessageType = "error" | "success" | "info" | "warning";
-export type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
+export type DialogMessageType = 'error' | 'success' | 'info' | 'warning';
+export type { HugeiconsIconDefinition };
 
 export interface ShowMessageDialogOptions {
     type?: DialogMessageType;
@@ -14,7 +15,7 @@ export interface ShowMessageDialogOptions {
 
 interface MessageDialogRequest {
     id: number;
-    options: Omit<ShowMessageDialogOptions, "icon" | "closeButtonIcon"> & {
+    options: Omit<ShowMessageDialogOptions, 'icon' | 'closeButtonIcon'> & {
         icon: HugeiconsIconDefinition | null;
         closeButtonIcon: HugeiconsIconDefinition | null;
     };
@@ -33,7 +34,7 @@ const DIALOG_CLOSE_DURATION_MS = 300;
 let closeTimer: ReturnType<typeof setTimeout> | null = null;
 let messageDialogMountPromise: Promise<void> | null = null;
 
-const MESSAGE_DIALOG_ROOT_ID = "ui-vintage-message-dialog-root";
+const MESSAGE_DIALOG_ROOT_ID = 'ui-vintage-message-dialog-root';
 
 // Shared message dialog state
 export const messageDialogState: MessageDialogState = reactive({
@@ -48,7 +49,7 @@ const markIcon = (icon: HugeiconsIconDefinition | null | undefined) => icon ? ma
 // Mount the dialog once on demand
 const ensureMessageDialogMounted = () => {
     // Skip mounting during SSR
-    if (typeof document === "undefined") {
+    if (typeof document === 'undefined') {
         return Promise.resolve();
     }
 
@@ -66,7 +67,7 @@ const ensureMessageDialogMounted = () => {
     // Start the lazy mount
     messageDialogMountPromise = (async () => {
         // Load the component only when needed
-        const { default: MessageDialog } = await import("./MessageDialog.vue");
+        const { default: MessageDialog } = await import('./MessageDialog.vue');
 
         // Guard against a concurrent mount
         if (document.getElementById(MESSAGE_DIALOG_ROOT_ID)) {
@@ -74,7 +75,7 @@ const ensureMessageDialogMounted = () => {
         }
 
         // Create the host element and render the component
-        const container = document.createElement("div");
+        const container = document.createElement('div');
         container.id = MESSAGE_DIALOG_ROOT_ID;
         document.body.appendChild(container);
         render(h(MessageDialog), container);
@@ -155,10 +156,10 @@ export const showMessageDialog = (options: ShowMessageDialogOptions) => {
         enqueueMessageDialog({
             id: nextMessageDialogId += 1,
             options: {
-                type: options.type ?? "info",
-                title: options.title ?? "",
+                type: options.type ?? 'info',
+                title: options.title ?? '',
                 message: options.message,
-                closeText: options.closeText ?? "",
+                closeText: options.closeText ?? '',
                 icon: markIcon(options.icon),
                 closeButtonIcon: markIcon(options.closeButtonIcon)
             },

package/src/components/message-toast/MessageToast.vue

@@ -1,44 +1,44 @@
 <script setup lang="ts">
-import { AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { computed } from "vue";
-import { getUiVintageRuntimeMessage } from "../../lib/i18n";
-import { Button } from "../ui/button";
-import { closeMessageToast, messageToastState } from "./message-toast-state";
+import { AlertCircleIcon, Cancel01Icon, CheckmarkCircle02Icon, InformationCircleIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { computed } from 'vue';
+import { getUiVintageRuntimeMessage } from '../../lib/i18n';
+import { Button } from '../ui/button';
+import { closeMessageToast, messageToastState } from './message-toast-state';
 
 // Current toast data
 const currentToast = computed(() => messageToastState.current);
 
 // Localized dismiss label resolved from bundled library messages
-const closeAriaLabel = computed(() => getUiVintageRuntimeMessage("uiVintage.buttons.close", "Close"));
+const closeAriaLabel = computed(() => getUiVintageRuntimeMessage('uiVintage.buttons.close', 'Close'));
 
 // Determine toast type for styling and icon selection
-const toastType = computed(() => currentToast.value?.type ?? "success");
+const toastType = computed(() => currentToast.value?.type ?? 'success');
 
 // Resolved icon based on toast type
 const toastIcon = computed(() => {
-    if (toastType.value === "success") return CheckmarkCircle02Icon;
+    if (toastType.value === 'success') return CheckmarkCircle02Icon;
     return toastType.value === "info" ? InformationCircleIcon : AlertCircleIcon;
 });
 
 // Resolved icon color classes based on toast type
 const toastIconClasses = computed(() => {
-    if (toastType.value === "error") return "text-red-600 dark:text-red-400";
-    if (toastType.value === "warning") return "text-amber-600 dark:text-amber-400";
-    if (toastType.value === "info") return "text-blue-600 dark:text-blue-400";
-    return "text-green-600 dark:text-green-400";
+    if (toastType.value === 'error') return 'text-red-600 dark:text-red-400';
+    if (toastType.value === 'warning') return 'text-amber-600 dark:text-amber-400';
+    if (toastType.value === 'info') return 'text-blue-600 dark:text-blue-400';
+    return 'text-green-600 dark:text-green-400';
 });
 
 // Resolved aria-live politeness based on toast type
 const toastAriaLive = computed(() => {
-    if (toastType.value === "error" || toastType.value === "warning") return "assertive";
-    return "polite";
+    if (toastType.value === 'error' || toastType.value === 'warning') return 'assertive';
+    return 'polite';
 });
 </script>
 
 <template>
     <Transition name="toast">
-        <div v-if="messageToastState.current && messageToastState.isOpen" class="fixed inset-x-3 bottom-3 z-[60] rounded border border-border bg-card p-4 text-card-foreground transition-colors duration-300 ease-in-out sm:inset-x-auto sm:right-6 sm:bottom-6 sm:max-w-[350px] sm:min-w-[250px]" role="alert" :aria-live="toastAriaLive" aria-atomic="true">
+        <div v-if="messageToastState.current && messageToastState.isOpen" class="fixed inset-x-3 bottom-3 z-60 rounded border border-border bg-card p-4 text-card-foreground transition-colors duration-300 ease-in-out sm:inset-x-auto sm:right-6 sm:bottom-6 sm:max-w-87.5 sm:min-w-62.5" role="alert" :aria-live="toastAriaLive" aria-atomic="true">
             <div class="flex items-center gap-4">
                 <!-- Leading type icon -->
                 <HugeiconsIcon :icon="toastIcon" class="size-5" :class="toastIconClasses" />

package/src/components/message-toast/index.ts

@@ -1,9 +1,2 @@
-export {
-    closeMessageToast,
-    messageToastState,
-    showMessageToast
-} from "./message-toast-state";
-export type {
-    MessageToastType,
-    ShowMessageToastOptions
-} from "./message-toast-state";
+export { closeMessageToast, messageToastState, showMessageToast } from './message-toast-state';
+export type { MessageToastType, ShowMessageToastOptions } from './message-toast-state';

package/src/components/message-toast/message-toast-state.ts

@@ -1,6 +1,6 @@
-import { h, reactive, render } from "vue";
+import { h, reactive, render } from 'vue';
 
-export type MessageToastType = "success" | "info" | "warning" | "error";
+export type MessageToastType = 'success' | 'info' | 'warning' | 'error';
 
 export interface ShowMessageToastOptions {
     message: string;
@@ -20,7 +20,7 @@ interface MessageToastState {
 
 const TOAST_CLOSE_DURATION_MS = 300;
 const DEFAULT_TOAST_DURATION_MS = 5000;
-const MESSAGE_TOAST_ROOT_ID = "ui-vintage-message-toast-root";
+const MESSAGE_TOAST_ROOT_ID = 'ui-vintage-message-toast-root';
 
 let dismissTimer: ReturnType<typeof setTimeout> | null = null;
 let clearTimer: ReturnType<typeof setTimeout> | null = null;
@@ -37,7 +37,7 @@ export const messageToastState: MessageToastState = reactive({
 // Mount the toast once on demand
 const ensureMessageToastMounted = () => {
     // Skip mounting during SSR
-    if (typeof document === "undefined") {
+    if (typeof document === 'undefined') {
         return Promise.resolve();
     }
 
@@ -55,7 +55,7 @@ const ensureMessageToastMounted = () => {
     // Start the lazy mount
     messageToastMountPromise = (async () => {
         // Load the component only when needed
-        const { default: MessageToast } = await import("./MessageToast.vue");
+        const { default: MessageToast } = await import('./MessageToast.vue');
 
         // Guard against a concurrent mount
         if (document.getElementById(MESSAGE_TOAST_ROOT_ID)) {
@@ -63,7 +63,7 @@ const ensureMessageToastMounted = () => {
         }
 
         // Create the host element and render the component
-        const container = document.createElement("div");
+        const container = document.createElement('div');
         container.id = MESSAGE_TOAST_ROOT_ID;
         document.body.appendChild(container);
         render(h(MessageToast), container);
@@ -90,7 +90,7 @@ const clearMessageToastTimers = () => {
     }
 
     // Clear any pending open frame from a previous toast
-    if (openFrame !== null && typeof cancelAnimationFrame !== "undefined") {
+    if (openFrame !== null && typeof cancelAnimationFrame !== 'undefined') {
         cancelAnimationFrame(openFrame);
         openFrame = null;
     }
@@ -132,14 +132,14 @@ export const showMessageToast = (options: ShowMessageToastOptions) => {
     // Update the toast state while keeping the shell closed until the renderer is mounted
     messageToastState.current = {
         message: options.message,
-        type: options.type ?? "success"
+        type: options.type ?? 'success'
     };
     messageToastState.isOpen = false;
 
     // Mount first so the initial visible transition can run after the component exists
     void ensureMessageToastMounted().then(() => {
         // Guard against a toast change during the async mount
-        if (toastId !== activeToastId || !messageToastState.current || typeof requestAnimationFrame === "undefined") {
+        if (toastId !== activeToastId || !messageToastState.current || typeof requestAnimationFrame === 'undefined') {
             return;
         }
 

package/src/components/page-header/PageHeader.vue

@@ -2,10 +2,13 @@
 import { Comment, Text, computed, useSlots, type VNode } from 'vue';
 
 // Props
-const props = defineProps({
-    title: { type: String, required: true },
-    headingLevel: { type: Number, default: 1 },
-    size: { type: String, default: 'large', validator: (value: unknown) => ['small', 'medium', 'large'].includes(String(value)) }
+const props = withDefaults(defineProps<{
+    title: string;
+    headingLevel?: number;
+    size?: 'small' | 'medium' | 'large';
+}>(), {
+    headingLevel: 1,
+    size: 'large'
 });
 
 const slots = useSlots();
@@ -24,7 +27,7 @@ const hasSlotContent = computed(() => {
 
 // Get size classes based on size prop
 const getSizeClasses = (size: string) => {
-    const baseClasses = 'font-bold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]';
+    const baseClasses = 'font-bold text-(--text-primary-light) dark:text-(--text-primary-dark)';
 
     // Return classes based on size
     switch (size) {

package/src/components/progress-component/ProgressComponent.vue

@@ -2,12 +2,15 @@
 import { Progress } from '../ui/progress';
 
 // Props
-const props = defineProps({
-    title: { type: String, required: true },
-    bottomLeftLabel: { type: String, default: '' },
-    bottomRightLabel: { type: String, default: '' },
-    value: { type: Number, required: true },
-    max: { type: Number, required: true }
+const props = withDefaults(defineProps<{
+    title: string;
+    bottomLeftLabel?: string;
+    bottomRightLabel?: string;
+    value: number;
+    max: number;
+}>(), {
+    bottomLeftLabel: '',
+    bottomRightLabel: ''
 });
 </script>
 
@@ -16,12 +19,12 @@ const props = defineProps({
         <!-- Header with icon and label -->
         <div class="flex items-center justify-between">
             <!-- Title of the progress bar -->
-            <span class="text-sm font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+            <span class="text-sm font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)">
                 {{ props.title }}
             </span>
 
             <!-- Current value / max -->
-            <span class="text-sm font-semibold text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]">
+            <span class="text-sm font-semibold text-(--text-primary-light) dark:text-(--text-primary-dark)">
                 {{ props.value }} / {{ props.max }}
             </span>
         </div>
@@ -32,12 +35,12 @@ const props = defineProps({
         <!-- Bottom labels -->
         <div v-if="props.bottomLeftLabel || props.bottomRightLabel" class="flex items-center justify-between text-xs">
             <!-- Bottom left label -->
-            <span v-if="props.bottomLeftLabel" class="text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+            <span v-if="props.bottomLeftLabel" class="text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
                 {{ props.bottomLeftLabel }}
             </span>
 
             <!-- Bottom right label -->
-            <span v-if="props.bottomRightLabel" class="text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+            <span v-if="props.bottomRightLabel" class="text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
                 {{ props.bottomRightLabel }}
             </span>
         </div>

package/src/components/single-value-card/SingleValueCard.vue

@@ -1,43 +1,46 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { Card, CardContent } from "../ui/card";
+import { computed } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '../ui/card';
+import type { HugeiconsIconDefinition } from '../../lib/common-types';
 
 // Props
-const props = defineProps({
-    value: { type: [String, Number], required: true },
-    label: { type: String, required: true },
-    icon: { type: Object, required: true },
-    valueColor: { type: String, default: "default", validator: (value: unknown) => ["default", "green", "red", "gray"].includes(String(value)) }
+const props = withDefaults(defineProps<{
+    value: string | number;
+    label: string;
+    icon: HugeiconsIconDefinition;
+    valueColor?: 'default' | 'green' | 'red' | 'gray';
+}>(), {
+    valueColor: 'default'
 });
 
 // Value classes
 const valueClass = computed(() => {
     switch (props.valueColor) {
-        case "green":
-            return "text-green-600 dark:text-green-400";
-        case "red":
-            return "text-red-600 dark:text-red-400";
-        case "gray":
-            return "text-gray-600 dark:text-gray-400";
+        case 'green':
+            return 'text-green-600 dark:text-green-400';
+        case 'red':
+            return 'text-red-600 dark:text-red-400';
+        case 'gray':
+            return 'text-gray-600 dark:text-gray-400';
         default:
-            return "text-[var(--text-primary-light)] dark:text-[var(--text-primary-dark)]";
+            return 'text-(--text-primary-light) dark:text-(--text-primary-dark)';
     }
 });
 </script>
 
 <template>
-    <Card class="flex-row items-center !p-4">
-        <CardContent class="!p-0 gap-0 flex-row items-center">
+    <Card class="flex-row items-center p-4!">
+        <CardContent class="flex-row items-center gap-0 p-0!">
             <!-- Icon -->
-            <Card color="gray" class="mr-4 flex h-12 w-12 flex-shrink-0 items-center justify-center !p-0">
+            <Card color="gray" class="mr-4 flex h-12 w-12 shrink-0 items-center justify-center p-0!">
                 <HugeiconsIcon :icon="props.icon" class="size-5" />
             </Card>
 
             <!-- Content -->
             <div class="flex flex-col">
                 <!-- Label -->
-                <span class="mb-1 text-xs font-semibold text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]">
+                <span class="mb-1 text-xs font-semibold text-(--text-secondary-light) dark:text-(--text-secondary-dark)">
                     {{ props.label }}
                 </span>
 

package/src/components/slider-form-component/SliderFormComponent.vue

@@ -1,9 +1,10 @@
 <script setup lang="ts">
-import { computed } from "vue";
-import { Card } from "../ui/card";
-import { Slider } from "../ui/slider";
+import { computed } from 'vue';
+import { Card } from '../ui/card';
+import { Slider } from '../ui/slider';
 
-interface SliderFormComponentProps {
+// Props
+const props = withDefaults(defineProps<{
     id?: string;
     label: string;
     description?: string;
@@ -12,21 +13,18 @@ interface SliderFormComponentProps {
     max?: number;
     step?: number;
     valueText?: string;
-}
-
-// Props
-const props = withDefaults(defineProps<SliderFormComponentProps>(), {
+}>(), {
     id: undefined,
-    description: "",
+    description: '',
     min: 0,
     max: 100,
     step: 1,
-    valueText: ""
+    valueText: ''
 });
 
 // Emits
 const emits = defineEmits<{
-    (e: "update:modelValue", value: number): void;
+    (e: 'update:modelValue', value: number): void;
 }>();
 
 const sliderValue = computed(() => [props.modelValue]);
@@ -34,7 +32,7 @@ const resolvedValueText = computed(() => props.valueText || String(props.modelVa
 
 // Emit the first slider value back to the parent
 const handleUpdateModelValue = (value?: number[]) => {
-    emits("update:modelValue", value?.[0] ?? props.min);
+    emits('update:modelValue', value?.[0] ?? props.min);
 };
 </script>
 
@@ -59,13 +57,6 @@ const handleUpdateModelValue = (value?: number[]) => {
         </div>
 
         <!-- Slider control -->
-        <Slider
-            :id="props.id"
-            :model-value="sliderValue"
-            :min="props.min"
-            :max="props.max"
-            :step="props.step"
-            @update:model-value="handleUpdateModelValue"
-        />
+        <Slider :id="props.id" :model-value="sliderValue" :min="props.min" :max="props.max" :step="props.step" @update:model-value="handleUpdateModelValue" />
     </Card>
 </template>

package/src/components/slider-form-component/index.ts

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

package/src/components/switch-form-component/SwitchFormComponent.vue

@@ -1,25 +1,23 @@
 <script setup lang="ts">
-import { Card } from "../ui/card";
-import { Switch } from "../ui/switch";
+import { Card } from '../ui/card';
+import { Switch } from '../ui/switch';
 
-interface SwitchFormComponentProps {
+// Props
+const props = defineProps<{
     id: string;
     label: string;
     description: string;
     modelValue: boolean;
-}
-
-// Props
-const props = defineProps<SwitchFormComponentProps>();
+}>();
 
 // Emits
 const emits = defineEmits<{
-    (e: "update:modelValue", value: boolean): void;
+    (e: 'update:modelValue', value: boolean): void;
 }>();
 </script>
 
 <template>
-    <Card class="flex flex-col gap-2 sm:!gap-3 px-4 py-3">
+    <Card class="flex flex-col gap-2 px-4 py-3 sm:gap-3!">
         <!-- Switch label and control -->
         <div class="flex items-center justify-between gap-4">
             <!-- Switch label -->

package/src/components/switch-form-component/index.ts

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

package/src/components/text-link/TextLink.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import type { Component, PropType } from 'vue';
+import type { Component } from 'vue';
 
 // Props
-const props = defineProps({
-    to: { type: String, required: true },
-    text: { type: String, required: true },
-    linkComponent: { type: [String, Object] as PropType<Component | string>, default: 'a' }
+const props = withDefaults(defineProps<{
+    to: string;
+    text: string;
+    linkComponent?: Component | string;
+}>(), {
+    linkComponent: 'a'
 });
 
 // Emits
-const emits = defineEmits(['click']);
+const emits = defineEmits<{
+    click: [event: MouseEvent];
+}>();
 
 // Get link props based on the type of link component
 const getLinkProps = () => {
@@ -27,7 +31,7 @@ const handleClick = (event: MouseEvent) => {
 </script>
 
 <template>
-    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-[var(--text-primary-light)] hover:underline dark:text-[var(--text-primary-dark)]" @click="handleClick">
+    <component :is="props.linkComponent" v-bind="getLinkProps()" class="cursor-pointer font-semibold text-(--text-primary-light) hover:underline dark:text-(--text-primary-dark)" @click="handleClick">
         {{ props.text }}
     </component>
 </template>