@brumaombra/ui-vintage 0.7.8 → 0.7.10

package/src/components/ui/calendar/CalendarCellTrigger.vue

@@ -1,39 +1,37 @@
-<script lang="ts" setup>
-import type { CalendarCellTriggerProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarCellTrigger, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from '../button'
+<script setup lang="ts">
+import type { CalendarCellTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarCellTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
 
-const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes["class"] }>(), {
-  as: "button",
-})
+// Props
+const props = withDefaults(defineProps<CalendarCellTriggerProps & { class?: HTMLAttributes['class'] }>(), {
+    as: 'button'
+});
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarCellTrigger
-    data-slot="calendar-cell-trigger"
-    :class="cn(
-      buttonVariants({ variant: 'ghost' }),
-      'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
-      '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
-      // Selected
-      'data-[selected]:bg-primary data-[selected]:text-primary-foreground data-[selected]:opacity-100 [&[data-selected]:hover]:bg-primary data-[selected]:hover:text-primary-foreground data-[selected]:focus:bg-primary data-[selected]:focus:text-primary-foreground',
-      // Disabled
-      'data-[disabled]:text-muted-foreground data-[disabled]:opacity-50',
-      // Unavailable
-      'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
-      // Outside months
-      'data-[outside-view]:text-muted-foreground',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarCellTrigger>
-</template>
+    <CalendarCellTrigger data-slot="calendar-cell-trigger" :class="cn(
+        buttonVariants({ variant: 'ghost' }),
+        'size-8 p-0 font-normal aria-selected:opacity-100 cursor-default',
+        '[&[data-today]:not([data-selected])]:bg-accent [&[data-today]:not([data-selected])]:text-accent-foreground',
+        // Selected
+        'data-selected:bg-primary data-selected:text-primary-foreground data-selected:opacity-100 [&[data-selected]:hover]:bg-primary data-selected:hover:text-primary-foreground data-selected:focus:bg-primary data-selected:focus:text-primary-foreground',
+        // Disabled
+        'data-disabled:text-muted-foreground data-disabled:opacity-50',
+        // Unavailable
+        'data-unavailable:text-destructive-foreground data-unavailable:line-through',
+        // Outside months
+        'data-outside-view:text-muted-foreground',
+        props.class,
+    )
+        " v-bind="forwardedProps">
+        <slot />
+    </CalendarCellTrigger>
+</template>

package/src/components/ui/calendar/CalendarGrid.vue

@@ -1,23 +1,20 @@
-<script lang="ts" setup>
-import type { CalendarGridProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarGrid, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarGridProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarGrid, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarGridProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarGridProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarGrid
-    data-slot="calendar-grid"
-    :class="cn('w-full border-collapse space-x-1', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarGrid>
-</template>
+    <CalendarGrid data-slot="calendar-grid" :class="cn('w-full border-collapse space-x-1', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarGrid>
+</template>

package/src/components/ui/calendar/CalendarGridBody.vue

@@ -1,15 +1,13 @@
-<script lang="ts" setup>
-import type { CalendarGridBodyProps } from "reka-ui"
-import { CalendarGridBody } from "reka-ui"
+<script setup lang="ts">
+import type { CalendarGridBodyProps } from 'reka-ui';
+import { CalendarGridBody } from 'reka-ui';
 
-const props = defineProps<CalendarGridBodyProps>()
+// Props
+const props = defineProps<CalendarGridBodyProps>();
 </script>
 
 <template>
-  <CalendarGridBody
-    data-slot="calendar-grid-body"
-    v-bind="props"
-  >
-    <slot />
-  </CalendarGridBody>
-</template>
+    <CalendarGridBody data-slot="calendar-grid-body" v-bind="props">
+        <slot />
+    </CalendarGridBody>
+</template>

package/src/components/ui/calendar/CalendarGridHead.vue

@@ -1,16 +1,14 @@
-<script lang="ts" setup>
-import type { CalendarGridHeadProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { CalendarGridHead } from "reka-ui"
+<script setup lang="ts">
+import type { CalendarGridHeadProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { CalendarGridHead } from 'reka-ui';
 
-const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarGridHeadProps & { class?: HTMLAttributes['class'] }>();
 </script>
 
 <template>
-  <CalendarGridHead
-    data-slot="calendar-grid-head"
-    v-bind="props"
-  >
-    <slot />
-  </CalendarGridHead>
-</template>
+    <CalendarGridHead data-slot="calendar-grid-head" v-bind="props">
+        <slot />
+    </CalendarGridHead>
+</template>

package/src/components/ui/calendar/CalendarGridRow.vue

@@ -1,22 +1,20 @@
-<script lang="ts" setup>
-import type { CalendarGridRowProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarGridRow, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarGridRowProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarGridRow, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarGridRowProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarGridRow
-    data-slot="calendar-grid-row"
-    :class="cn('flex', props.class)" v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarGridRow>
-</template>
+    <CalendarGridRow data-slot="calendar-grid-row" :class="cn('flex', props.class)" v-bind="forwardedProps">
+        <slot />
+    </CalendarGridRow>
+</template>

package/src/components/ui/calendar/CalendarHeadCell.vue

@@ -1,23 +1,24 @@
-<script lang="ts" setup>
-import type { CalendarHeadCellProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeadCell, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarHeadCellProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarHeadCell, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarHeadCellProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarHeadCell
-    data-slot="calendar-head-cell"
-    :class="cn('text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarHeadCell>
-</template>
+    <CalendarHeadCell data-slot="calendar-head-cell" :class="cn(
+        'text-muted-foreground rounded-md flex-1 font-normal text-[0.8rem]',
+        props.class,
+    )
+        " v-bind="forwardedProps">
+        <slot />
+    </CalendarHeadCell>
+</template>

package/src/components/ui/calendar/CalendarHeader.vue

@@ -1,23 +1,24 @@
-<script lang="ts" setup>
-import type { CalendarHeaderProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeader, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarHeaderProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarHeader, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarHeaderProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarHeader
-    data-slot="calendar-header"
-    :class="cn('flex justify-center pt-1 relative items-center w-full px-8', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot />
-  </CalendarHeader>
-</template>
+    <CalendarHeader data-slot="calendar-header" :class="cn(
+        'flex justify-center pt-1 relative items-center w-full px-8',
+        props.class,
+    )
+        " v-bind="forwardedProps">
+        <slot />
+    </CalendarHeader>
+</template>

package/src/components/ui/calendar/CalendarHeading.vue

@@ -1,30 +1,26 @@
-<script lang="ts" setup>
-import type { CalendarHeadingProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { CalendarHeading, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { CalendarHeadingProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CalendarHeading, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarHeadingProps & { class?: HTMLAttributes['class'] }>();
 
 defineSlots<{
-  default: (props: { headingValue: string }) => any
-}>()
+    default: (props: { headingValue: string }) => any;
+}>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarHeading
-    v-slot="{ headingValue }"
-    data-slot="calendar-heading"
-    :class="cn('text-sm font-semibold', props.class)"
-    v-bind="forwardedProps"
-  >
-    <slot :heading-value>
-      {{ headingValue }}
-    </slot>
-  </CalendarHeading>
-</template>
+    <CalendarHeading v-slot="{ headingValue }" data-slot="calendar-heading" :class="cn('text-sm font-semibold', props.class)" v-bind="forwardedProps">
+        <slot :heading-value>
+            {{ headingValue }}
+        </slot>
+    </CalendarHeading>
+</template>

package/src/components/ui/calendar/CalendarNextButton.vue

@@ -1,32 +1,35 @@
-<script lang="ts" setup>
-import type { CalendarNextProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ArrowRight01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { CalendarNext, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from '../button'
+<script setup lang="ts">
+import type { CalendarNextProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ArrowRight01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { CalendarNext, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
 
-const props = defineProps<CalendarNextProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarNextProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarNext
-    data-slot="calendar-next-button"
-    :class="cn(
-      buttonVariants({ variant: 'secondary' }),
-      'size-7 min-h-10 bg-transparent p-0 text-(--text-secondary-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:text-(--text-primary-dark)',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot>
-      <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
-    </slot>
-  </CalendarNext>
-</template>
+    <CalendarNext
+        data-slot="calendar-next-button"
+        :class="
+            cn(
+                buttonVariants({ variant: 'secondary' }),
+                'size-7 min-h-10 bg-transparent p-0 text-(--text-secondary-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:text-(--text-primary-dark)',
+                props.class,
+            )
+        "
+        v-bind="forwardedProps"
+    >
+        <slot>
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-4" />
+        </slot>
+    </CalendarNext>
+</template>

package/src/components/ui/calendar/CalendarPrevButton.vue

@@ -1,32 +1,35 @@
-<script lang="ts" setup>
-import type { CalendarPrevProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { ArrowLeft01Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { CalendarPrev, useForwardProps } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from '../button'
+<script setup lang="ts">
+import type { CalendarPrevProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ArrowLeft01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { CalendarPrev, useForwardProps } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
 
-const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<CalendarPrevProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+const delegatedProps = reactiveOmit(props, 'class');
 
-const forwardedProps = useForwardProps(delegatedProps)
+const forwardedProps = useForwardProps(delegatedProps);
 </script>
 
 <template>
-  <CalendarPrev
-    data-slot="calendar-prev-button"
-    :class="cn(
-      buttonVariants({ variant: 'secondary' }),
-      'size-7 min-h-10 bg-transparent p-0 text-(--text-secondary-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:text-(--text-primary-dark)',
-      props.class,
-    )"
-    v-bind="forwardedProps"
-  >
-    <slot>
-      <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4" />
-    </slot>
-  </CalendarPrev>
-</template>
+    <CalendarPrev
+        data-slot="calendar-prev-button"
+        :class="
+            cn(
+                buttonVariants({ variant: 'secondary' }),
+                'size-7 min-h-10 bg-transparent p-0 text-(--text-secondary-light) hover:text-(--text-primary-light) dark:text-(--text-secondary-dark) dark:hover:text-(--text-primary-dark)',
+                props.class,
+            )
+        "
+        v-bind="forwardedProps"
+    >
+        <slot>
+            <HugeiconsIcon :icon="ArrowLeft01Icon" class="size-4" />
+        </slot>
+    </CalendarPrev>
+</template>

package/src/components/ui/calendar/index.ts

@@ -1,14 +1,18 @@
-export { default as Calendar } from "./Calendar.vue"
-export { default as CalendarCell } from "./CalendarCell.vue"
-export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue"
-export { default as CalendarGrid } from "./CalendarGrid.vue"
-export { default as CalendarGridBody } from "./CalendarGridBody.vue"
-export { default as CalendarGridHead } from "./CalendarGridHead.vue"
-export { default as CalendarGridRow } from "./CalendarGridRow.vue"
-export { default as CalendarHeadCell } from "./CalendarHeadCell.vue"
-export { default as CalendarHeader } from "./CalendarHeader.vue"
-export { default as CalendarHeading } from "./CalendarHeading.vue"
-export { default as CalendarNextButton } from "./CalendarNextButton.vue"
-export { default as CalendarPrevButton } from "./CalendarPrevButton.vue"
+export { default as Calendar } from './Calendar.vue';
+export { default as CalendarCell } from './CalendarCell.vue';
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue';
+export { default as CalendarGrid } from './CalendarGrid.vue';
+export { default as CalendarGridBody } from './CalendarGridBody.vue';
+export { default as CalendarGridHead } from './CalendarGridHead.vue';
+export { default as CalendarGridRow } from './CalendarGridRow.vue';
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue';
+export { default as CalendarHeader } from './CalendarHeader.vue';
+export { default as CalendarHeading } from './CalendarHeading.vue';
+export { default as CalendarNextButton } from './CalendarNextButton.vue';
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue';
 
-export type LayoutTypes = "month-and-year" | "month-only" | "year-only" | undefined
+export type LayoutTypes =
+    | 'month-and-year'
+    | 'month-only'
+    | 'year-only'
+    | undefined;

package/src/components/ui/card/Card.vue

@@ -1,31 +1,39 @@
 <script setup lang="ts">
-import { computed } from "vue"
-import type { HTMLAttributes } from "vue"
-import { getSurfaceToneClasses, type ToneColor } from "../../../lib/color-tokens"
-import { cn } from "../../../lib/utils"
+import { computed } from 'vue';
+import type { HTMLAttributes } from 'vue';
+import {
+    getSurfaceToneClasses,
+    type ToneColor,
+} from '../../../lib/color-tokens';
+import { cn } from '../../../lib/utils';
 
-type CardColor = "default" | ToneColor
+type CardColor = 'default' | ToneColor;
 
 // Props
 const props = defineProps<{
-    color?: CardColor
-    class?: HTMLAttributes["class"]
-}>()
+    color?: CardColor;
+    class?: HTMLAttributes['class'];
+}>();
 
 // Get the appropriate classes
 const colorClasses = computed(() => {
     // If color is not specified or is "default", use the default card styles
-    if (!props.color || props.color === "default") {
-        return "border border-border bg-card text-card-foreground"
+    if (!props.color || props.color === 'default') {
+        return 'border border-border bg-card text-card-foreground';
     }
 
     // For other colors, use the corresponding surface tone classes
-    return getSurfaceToneClasses(props.color)
-})
+    return getSurfaceToneClasses(props.color);
+});
 </script>
 
 <template>
-    <div data-slot="card" :class="cn('flex flex-col gap-4 sm:!gap-6 rounded py-6 transition-colors duration-300 ease-in-out', colorClasses, props.class)">
+    <div data-slot="card" :class="cn(
+        'flex flex-col gap-4 sm:gap-6! rounded py-6 transition-colors duration-300 ease-in-out',
+        colorClasses,
+        props.class,
+    )
+        ">
         <slot />
     </div>
 </template>

package/src/components/ui/card/CardAction.vue

@@ -1,14 +1,19 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="card-action" :class="cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', props.class)">
-    <slot />
-  </div>
+    <div data-slot="card-action" :class="cn(
+        'col-start-2 row-span-2 row-start-1 self-start justify-self-end',
+        props.class,
+    )
+        ">
+        <slot />
+    </div>
 </template>

package/src/components/ui/card/CardContent.vue

@@ -1,14 +1,15 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <div data-slot="card-content" :class="cn('flex flex-col gap-4 px-6', props.class)">
-    <slot />
-  </div>
+    <div data-slot="card-content" :class="cn('flex flex-col gap-4 px-6', props.class)">
+        <slot />
+    </div>
 </template>

package/src/components/ui/card/CardDescription.vue

@@ -1,14 +1,23 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <p data-slot="card-description" :class="cn('text-muted-foreground text-xs sm:text-sm leading-5', props.class)">
-    <slot />
-  </p>
+    <p
+        data-slot="card-description"
+        :class="
+            cn(
+                'text-muted-foreground text-xs sm:text-sm leading-5',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </p>
 </template>