@brumaombra/ui-vintage 0.7.7 → 0.7.9

package/src/components/theme-selector/ThemeSelector.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { ComputerIcon, GibbousMoonIcon, Sun01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
+import { LaptopIcon, Moon01Icon, Sun01Icon, Tick02Icon } from '@hugeicons/core-free-icons';
 import { HugeiconsIcon } from '@hugeicons/vue';
 import { Button } from '../ui/button';
 import { Command, CommandGroup, CommandItem, CommandList } from '../ui/command';
@@ -18,9 +18,9 @@ const getThemeIcon = (theme: string) => {
     if (theme === 'light') {
         return Sun01Icon;
     } else if (theme === 'dark') {
-        return GibbousMoonIcon;
+        return Moon01Icon;
     } else {
-        return ComputerIcon;
+        return LaptopIcon;
     }
 };
 
@@ -112,7 +112,7 @@ onUnmounted(() => {
         </PopoverTrigger>
 
         <!-- Theme options -->
-        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 !p-0">
+        <PopoverContent side="bottom" align="end" :side-offset="8" class="w-44 p-0!">
             <Command :model-value="currentTheme">
                 <CommandList>
                     <CommandGroup :heading="t('uiVintage.theme.title')">

package/src/components/ui/accordion/Accordion.vue

@@ -1,21 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue";
-import { ref } from "vue";
-import { ArrowDown01Icon } from "@hugeicons/core-free-icons";
-import { HugeiconsIcon } from "@hugeicons/vue";
-import { Card, CardContent } from "@brumaombra/ui-vintage/card";
+import type { HTMLAttributes } from 'vue';
+import { ref } from 'vue';
+import { ArrowDown01Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { Card, CardContent } from '@brumaombra/ui-vintage/card';
+import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
-type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[];
-
-interface AccordionProps {
+// Props
+const props = withDefaults(defineProps<{
     title: string;
     initiallyExpanded?: boolean;
     icon?: HugeiconsIconDefinition | null;
-    iconClass?: HTMLAttributes["class"];
-}
-
-// Props
-const props = withDefaults(defineProps<AccordionProps>(), {
+    iconClass?: HTMLAttributes['class'];
+}>(), {
     initiallyExpanded: false
 });
 
@@ -28,10 +25,10 @@ const toggleExpanded = () => {
 </script>
 
 <template>
-    <Card class="p-0! overflow-hidden" @click="toggleExpanded">
+    <Card class="p-0! overflow-hidden">
         <CardContent class="p-0! gap-0">
             <!-- Header -->
-            <div class="flex items-center justify-between p-5 gap-4 text-left cursor-pointer">
+            <div class="flex items-center justify-between p-5 gap-4 text-left cursor-pointer" @click="toggleExpanded">
                 <div class="flex items-center gap-3 min-w-0">
                     <!-- Icon -->
                     <div v-if="props.icon" class="flex h-8 w-8 shrink-0 items-center justify-center rounded bg-(--bg-card-light) border border-(--border-light) dark:bg-(--bg-card-dark) dark:border-(--border-dark) md:h-10 md:w-10">

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

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

package/src/components/ui/alert/Alert.vue

@@ -1,17 +1,18 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { getSurfaceToneClasses } from "../../../lib/color-tokens"
-import { cn } from "../../../lib/utils"
-import { alertClasses, type AlertColors } from "."
+import type { HTMLAttributes } from 'vue';
+import { getSurfaceToneClasses } from '../../../lib/color-tokens';
+import { cn } from '../../../lib/utils';
+import { alertClasses, type AlertColors } from '.';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-  color?: AlertColors["color"]
-}>()
+    class?: HTMLAttributes['class'];
+    color?: AlertColors['color'];
+}>();
 </script>
 
 <template>
-  <div data-slot="alert" role="alert" :class="cn(alertClasses(), getSurfaceToneClasses(props.color ?? 'gray'), props.class)">
-    <slot />
-  </div>
+    <div data-slot="alert" role="alert" :class="cn(alertClasses(), getSurfaceToneClasses(props.color ?? 'gray'), props.class)">
+        <slot />
+    </div>
 </template>

package/src/components/ui/alert/AlertDescription.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="alert-description" :class="cn('col-start-2 grid justify-items-start gap-1 [&_p]:leading-relaxed', props.class)">
-    <slot />
-  </div>
-</template>
+    <div data-slot="alert-description" :class="cn('col-start-2 grid justify-items-start gap-1 [&_p]:leading-relaxed', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/alert/AlertTitle.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="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-bold tracking-tight text-current', props.class)">
-    <slot />
-  </div>
-</template>
+    <div data-slot="alert-title" :class="cn('col-start-2 line-clamp-1 min-h-4 font-bold tracking-tight text-current', props.class)">
+        <slot />
+    </div>
+</template>

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

@@ -1,15 +1,15 @@
-import type { ClassProp } from "class-variance-authority/types"
-import { cva } from "class-variance-authority"
-import type { ToneColor } from "../../../lib/color-tokens"
+import type { ClassProp } from 'class-variance-authority/types';
+import { cva } from 'class-variance-authority';
+import type { ToneColor } from '../../../lib/color-tokens';
 
-export { default as Alert } from "./Alert.vue"
-export { default as AlertDescription } from "./AlertDescription.vue"
-export { default as AlertTitle } from "./AlertTitle.vue"
+export { default as Alert } from './Alert.vue';
+export { default as AlertDescription } from './AlertDescription.vue';
+export { default as AlertTitle } from './AlertTitle.vue';
 
 export type AlertColors = {
-  color?: ToneColor | null | undefined
-}
+    color?: ToneColor | null | undefined;
+};
 
 export const alertClasses: (props?: ClassProp) => string = cva(
-  "relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm",
-)
+    'relative w-full rounded px-3 py-2 text-xs transition-colors duration-300 ease-in-out grid has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] grid-cols-[0_1fr] has-[>svg]:gap-x-3 gap-y-0.5 items-start [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current sm:px-4 sm:py-3 sm:text-sm',
+);

package/src/components/ui/alert-dialog/AlertDialog.vue

@@ -1,15 +1,19 @@
 <script setup lang="ts">
-import type { AlertDialogEmits, AlertDialogProps } from "reka-ui"
-import { AlertDialogRoot, useForwardPropsEmits } from "reka-ui"
+import type { AlertDialogEmits, AlertDialogProps } from 'reka-ui';
+import { AlertDialogRoot, useForwardPropsEmits } from 'reka-ui';
 
-const props = defineProps<AlertDialogProps>()
-const emits = defineEmits<AlertDialogEmits>()
+// Props
+const props = defineProps<AlertDialogProps>();
 
-const forwarded = useForwardPropsEmits(props, emits)
+// Emits
+const emits = defineEmits<AlertDialogEmits>();
+
+// Forward props and emits
+const forwarded = useForwardPropsEmits(props, emits);
 </script>
 
 <template>
-  <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
-    <slot v-bind="slotProps" />
-  </AlertDialogRoot>
-</template>
+    <AlertDialogRoot v-slot="slotProps" data-slot="alert-dialog" v-bind="forwarded">
+        <slot v-bind="slotProps" />
+    </AlertDialogRoot>
+</template>

package/src/components/ui/alert-dialog/AlertDialogAction.vue

@@ -1,18 +1,20 @@
 <script setup lang="ts">
-import type { AlertDialogActionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogAction } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from '../button'
+import type { AlertDialogActionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogAction } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
 
-const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
-    <slot />
-  </AlertDialogAction>
-</template>
+    <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+        <slot />
+    </AlertDialogAction>
+</template>

package/src/components/ui/alert-dialog/AlertDialogCancel.vue

@@ -1,22 +1,20 @@
 <script setup lang="ts">
-import type { AlertDialogCancelProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogCancel } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from '../button'
+import type { AlertDialogCancelProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogCancel } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '../button';
 
-const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogCancel v-bind="delegatedProps" :class="cn(
-    buttonVariants({ variant: 'secondary' }),
-    'mt-2 sm:mt-0',
-    props.class,
-  )">
-    <slot />
-  </AlertDialogCancel>
-</template>
+    <AlertDialogCancel v-bind="delegatedProps" :class="cn(buttonVariants({ variant: 'secondary' }), 'mt-2 sm:mt-0', props.class)">
+        <slot />
+    </AlertDialogCancel>
+</template>

package/src/components/ui/alert-dialog/AlertDialogContent.vue

@@ -1,36 +1,33 @@
 <script setup lang="ts">
-import type { AlertDialogContentEmits, AlertDialogContentProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogContent,
-  AlertDialogOverlay,
-  AlertDialogPortal,
-  useForwardPropsEmits,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { AlertDialogContentEmits, AlertDialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogContent, AlertDialogOverlay, AlertDialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
+// Keep attrs on the dialog content element
 defineOptions({
-  inheritAttrs: false,
-})
+    inheritAttrs: false
+});
 
-const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes["class"] }>()
-const emits = defineEmits<AlertDialogContentEmits>()
+// Props
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Emits
+const emits = defineEmits<AlertDialogContentEmits>();
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits)
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
+
+// Forward props and emits
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
 </script>
 
 <template>
-  <AlertDialogPortal>
-    <AlertDialogOverlay data-slot="alert-dialog-overlay" class="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
-    <AlertDialogContent data-slot="alert-dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn(
-      'bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[95%] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded border border-border shadow-2xl duration-200 sm:max-w-lg',
-      props.class,
-    )
-      ">
-      <slot />
-    </AlertDialogContent>
-  </AlertDialogPortal>
-</template>
+    <AlertDialogPortal>
+        <AlertDialogOverlay data-slot="alert-dialog-overlay" class="fixed inset-0 z-50 bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] ease-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500 data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0" />
+        <AlertDialogContent data-slot="alert-dialog-content" v-bind="{ ...$attrs, ...forwarded }" :class="cn('bg-card text-card-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-50 grid w-[95%] max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-0 overflow-hidden rounded border border-border shadow-2xl duration-200 sm:max-w-lg', props.class)">
+            <slot />
+        </AlertDialogContent>
+    </AlertDialogPortal>
+</template>

package/src/components/ui/alert-dialog/AlertDialogDescription.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import type { AlertDialogDescriptionProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import {
-  AlertDialogDescription,
-} from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { AlertDialogDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogDescription } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogDescription data-slot="alert-dialog-description" v-bind="delegatedProps" :class="cn('text-xs leading-6 text-muted-foreground sm:text-sm', props.class)">
-    <slot />
-  </AlertDialogDescription>
-</template>
+    <AlertDialogDescription data-slot="alert-dialog-description" v-bind="delegatedProps" :class="cn('text-xs leading-6 text-muted-foreground sm:text-sm', props.class)">
+        <slot />
+    </AlertDialogDescription>
+</template>

package/src/components/ui/alert-dialog/AlertDialogFooter.vue

@@ -1,18 +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="alert-dialog-footer" :class="cn(
-    'flex flex-col-reverse gap-3 border-t border-border px-5 py-4 sm:flex-row-reverse sm:px-6',
-    props.class,
-  )
-    ">
-    <slot />
-  </div>
-</template>
+    <div data-slot="alert-dialog-footer" :class="cn('flex flex-col-reverse gap-3 border-t border-border px-5 py-4 sm:flex-row-reverse sm:px-6', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/alert-dialog/AlertDialogHeader.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="alert-dialog-header" :class="cn('flex flex-col gap-1.5 text-center sm:text-left', props.class)">
-    <slot />
-  </div>
-</template>
+    <div data-slot="alert-dialog-header" :class="cn('flex flex-col gap-1.5 text-center sm:text-left', props.class)">
+        <slot />
+    </div>
+</template>

package/src/components/ui/alert-dialog/AlertDialogTitle.vue

@@ -1,17 +1,19 @@
 <script setup lang="ts">
-import type { AlertDialogTitleProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { reactiveOmit } from "@vueuse/core"
-import { AlertDialogTitle } from "reka-ui"
-import { cn } from "../../../lib/utils"
+import type { AlertDialogTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { AlertDialogTitle } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes["class"] }>()
+// Props
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>();
 
-const delegatedProps = reactiveOmit(props, "class")
+// Omit local class from delegated props
+const delegatedProps = reactiveOmit(props, 'class');
 </script>
 
 <template>
-  <AlertDialogTitle data-slot="alert-dialog-title" v-bind="delegatedProps" :class="cn('text-base font-semibold', props.class)">
-    <slot />
-  </AlertDialogTitle>
-</template>
+    <AlertDialogTitle data-slot="alert-dialog-title" v-bind="delegatedProps" :class="cn('text-base font-semibold', props.class)">
+        <slot />
+    </AlertDialogTitle>
+</template>

package/src/components/ui/alert-dialog/AlertDialogTrigger.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import type { AlertDialogTriggerProps } from "reka-ui"
-import { AlertDialogTrigger } from "reka-ui"
+import type { AlertDialogTriggerProps } from 'reka-ui';
+import { AlertDialogTrigger } from 'reka-ui';
 
-const props = defineProps<AlertDialogTriggerProps>()
+// Props
+const props = defineProps<AlertDialogTriggerProps>();
 </script>
 
 <template>
-  <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
-    <slot />
-  </AlertDialogTrigger>
-</template>
+    <AlertDialogTrigger data-slot="alert-dialog-trigger" v-bind="props">
+        <slot />
+    </AlertDialogTrigger>
+</template>

package/src/components/ui/alert-dialog/index.ts

@@ -1,9 +1,9 @@
-export { default as AlertDialog } from "./AlertDialog.vue"
-export { default as AlertDialogAction } from "./AlertDialogAction.vue"
-export { default as AlertDialogCancel } from "./AlertDialogCancel.vue"
-export { default as AlertDialogContent } from "./AlertDialogContent.vue"
-export { default as AlertDialogDescription } from "./AlertDialogDescription.vue"
-export { default as AlertDialogFooter } from "./AlertDialogFooter.vue"
-export { default as AlertDialogHeader } from "./AlertDialogHeader.vue"
-export { default as AlertDialogTitle } from "./AlertDialogTitle.vue"
-export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue"
+export { default as AlertDialog } from './AlertDialog.vue';
+export { default as AlertDialogAction } from './AlertDialogAction.vue';
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue';
+export { default as AlertDialogContent } from './AlertDialogContent.vue';
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue';
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue';
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue';
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue';
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue';

package/src/components/ui/badge/Badge.vue

@@ -1,21 +1,20 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { getSurfaceToneClasses, type ToneColor } from "../../../lib/color-tokens"
-import { cn } from "../../../lib/utils"
-
-type HugeiconsIconDefinition = readonly (readonly [string, { readonly [key: string]: string | number }])[]
+import type { HTMLAttributes } from 'vue';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { getSurfaceToneClasses, type ToneColor } from '../../../lib/color-tokens';
+import { cn } from '../../../lib/utils';
+import type { HugeiconsIconDefinition } from '../../../lib/common-types';
 
 // Props
 const props = withDefaults(defineProps<{
-    text: string
-    icon?: HugeiconsIconDefinition | null
-    color?: ToneColor
-    class?: HTMLAttributes["class"]
+    text: string;
+    icon?: HugeiconsIconDefinition | null;
+    color?: ToneColor;
+    class?: HTMLAttributes['class'];
 }>(), {
     icon: null,
-    color: "gray"
-})
+    color: 'gray'
+});
 </script>
 
 <template>

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

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

package/src/components/ui/breadcrumb/Breadcrumb.vue

@@ -1,17 +1,14 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <nav
-    aria-label="breadcrumb"
-    data-slot="breadcrumb"
-    :class="props.class"
-  >
-    <slot />
-  </nav>
-</template>
+    <nav aria-label="breadcrumb" data-slot="breadcrumb" :class="props.class">
+        <slot />
+    </nav>
+</template>

package/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -1,24 +1,20 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { MoreHorizontalIcon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { MoreHorizontalIcon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <span
-    data-slot="breadcrumb-ellipsis"
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('flex size-9 items-center justify-center', props.class)"
-  >
-    <slot>
-      <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" />
-    </slot>
-    <span class="sr-only">More</span>
-  </span>
-</template>
+    <span data-slot="breadcrumb-ellipsis" role="presentation" aria-hidden="true" :class="cn('flex size-9 items-center justify-center', props.class)">
+        <slot>
+            <HugeiconsIcon :icon="MoreHorizontalIcon" class="size-4" />
+        </slot>
+        <span class="sr-only">More</span>
+    </span>
+</template>