@brumaombra/ui-vintage 0.7.7 → 0.7.9

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

@@ -1,17 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <li
-    data-slot="breadcrumb-item"
-    :class="cn('inline-flex items-center gap-1.5', props.class)"
-  >
-    <slot />
-  </li>
-</template>
+    <li data-slot="breadcrumb-item" :class="cn('inline-flex items-center gap-1.5', props.class)">
+        <slot />
+    </li>
+</template>

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

@@ -1,21 +1,17 @@
-<script lang="ts" setup>
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import { Primitive } from "reka-ui"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { Primitive } from 'reka-ui';
+import { cn } from '../../../lib/utils';
 
-const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes["class"] }>(), {
-  as: "a",
-})
+// Props
+const props = withDefaults(defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(), {
+    as: 'a'
+});
 </script>
 
 <template>
-  <Primitive
-    data-slot="breadcrumb-link"
-    :as="as"
-    :as-child="asChild"
-    :class="cn('text-muted-foreground hover:underline', props.class)"
-  >
-    <slot />
-  </Primitive>
-</template>
+    <Primitive data-slot="breadcrumb-link" :as="as" :as-child="asChild" :class="cn('text-muted-foreground hover:underline', props.class)">
+        <slot />
+    </Primitive>
+</template>

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

@@ -1,17 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <ol
-    data-slot="breadcrumb-list"
-    :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm break-words sm:gap-2.5', props.class)"
-  >
-    <slot />
-  </ol>
-</template>
+    <ol data-slot="breadcrumb-list" :class="cn('text-muted-foreground flex flex-wrap items-center gap-1.5 text-sm wrap-break-word sm:gap-2.5', props.class)">
+        <slot />
+    </ol>
+</template>

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

@@ -1,20 +1,15 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { cn } from "../../../lib/utils"
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '../../../lib/utils';
 
+// Props
 const props = defineProps<{
-  class?: HTMLAttributes["class"]
-}>()
+    class?: HTMLAttributes['class'];
+}>();
 </script>
 
 <template>
-  <span
-    data-slot="breadcrumb-page"
-    role="link"
-    aria-disabled="true"
-    aria-current="page"
-    :class="cn('text-foreground font-normal', props.class)"
-  >
-    <slot />
-  </span>
-</template>
+    <span data-slot="breadcrumb-page" role="link" aria-disabled="true" aria-current="page" :class="cn('text-foreground font-normal', props.class)">
+        <slot />
+    </span>
+</template>

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

@@ -1,23 +1,19 @@
-<script lang="ts" setup>
-import type { HTMLAttributes } from "vue"
-import { ArrowRight01Icon } 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 { ArrowRight01Icon } 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>
-  <li
-    data-slot="breadcrumb-separator"
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('[&>svg]:size-3.5', props.class)"
-  >
-    <slot>
-      <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5" />
-    </slot>
-  </li>
-</template>
+    <li data-slot="breadcrumb-separator" role="presentation" aria-hidden="true" :class="cn('[&>svg]:size-3.5', props.class)">
+        <slot>
+            <HugeiconsIcon :icon="ArrowRight01Icon" class="size-3.5" />
+        </slot>
+    </li>
+</template>

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

@@ -1,7 +1,7 @@
-export { default as Breadcrumb } from "./Breadcrumb.vue"
-export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue"
-export { default as BreadcrumbItem } from "./BreadcrumbItem.vue"
-export { default as BreadcrumbLink } from "./BreadcrumbLink.vue"
-export { default as BreadcrumbList } from "./BreadcrumbList.vue"
-export { default as BreadcrumbPage } from "./BreadcrumbPage.vue"
-export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue"
+export { default as Breadcrumb } from './Breadcrumb.vue';
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue';
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue';
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue';
+export { default as BreadcrumbList } from './BreadcrumbList.vue';
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue';
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue';

package/src/components/ui/busy/Busy.vue

@@ -1,45 +1,52 @@
 <script setup lang="ts">
-import type { HTMLAttributes } from "vue"
-import { Loading03Icon } from "@hugeicons/core-free-icons"
-import { HugeiconsIcon } from "@hugeicons/vue"
-import { cn } from "../../../lib/utils"
+import type { HTMLAttributes } from 'vue';
+import { Loading03Icon } from '@hugeicons/core-free-icons';
+import { HugeiconsIcon } from '@hugeicons/vue';
+import { cn } from '../../../lib/utils';
 
-interface BusyProps {
-  show?: boolean
-  label?: string
-  class?: HTMLAttributes["class"]
-  overlayClass?: HTMLAttributes["class"]
-}
-
-const props = withDefaults(defineProps<BusyProps>(), {
-  show: false,
-  label: "Loading...",
-})
+// Props
+const props = withDefaults(defineProps<{
+    show?: boolean;
+    label?: string;
+    class?: HTMLAttributes['class'];
+    overlayClass?: HTMLAttributes['class'];
+}>(), {
+    show: false,
+    label: 'Loading...'
+});
 </script>
 
 <template>
-  <Transition name="busy-fade">
-    <div v-if="props.show" data-slot="busy-overlay" :class="cn('fixed inset-0 z-50 flex items-center justify-center bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] duration-300 ease-out', props.overlayClass)">
-      <div data-slot="busy-content" role="status" aria-live="polite" aria-busy="true" :class="cn('bg-card text-card-foreground flex w-72 flex-col items-center justify-center gap-4 rounded border border-border px-8 py-7 text-center shadow-2xl', props.class)">
-        <slot>
-          <HugeiconsIcon data-slot="busy-spinner" :icon="Loading03Icon" class="size-10 animate-spin text-primary" />
-          <span v-if="props.label" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">
-            {{ props.label }}
-          </span>
-        </slot>
-      </div>
-    </div>
-  </Transition>
+    <Transition name="busy-fade">
+        <div v-if="props.show" data-slot="busy-overlay" :class="cn(
+            'fixed inset-0 z-50 flex items-center justify-center bg-black/45 backdrop-blur-[2px] transition-[opacity,backdrop-filter] duration-300 ease-out',
+            props.overlayClass,
+        )
+            ">
+            <div data-slot="busy-content" role="status" aria-live="polite" aria-busy="true" :class="cn(
+                'bg-card text-card-foreground flex w-72 flex-col items-center justify-center gap-4 rounded border border-border px-8 py-7 text-center shadow-2xl',
+                props.class,
+            )
+                ">
+                <slot>
+                    <HugeiconsIcon data-slot="busy-spinner" :icon="Loading03Icon" class="size-10 animate-spin text-primary" />
+                    <span v-if="props.label" data-slot="busy-label" class="text-xs font-semibold text-foreground sm:text-sm">
+                        {{ props.label }}
+                    </span>
+                </slot>
+            </div>
+        </div>
+    </Transition>
 </template>
 
 <style scoped>
 .busy-fade-enter-active,
 .busy-fade-leave-active {
-  transition: opacity 0.3s ease-out;
+    transition: opacity 0.3s ease-out;
 }
 
 .busy-fade-enter-from,
 .busy-fade-leave-to {
-  opacity: 0;
+    opacity: 0;
 }
 </style>

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

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

package/src/components/ui/button/Button.vue

@@ -1,24 +1,23 @@
 <script setup lang="ts">
-import type { PrimitiveProps } from "reka-ui"
-import type { HTMLAttributes } from "vue"
-import type { ButtonVariants } from "."
-import { Primitive } from "reka-ui"
-import { cn } from "../../../lib/utils"
-import { buttonVariants } from "."
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { ButtonVariants } from '.';
+import { Primitive } from 'reka-ui';
+import { cn } from '../../../lib/utils';
+import { buttonVariants } from '.';
 
-interface Props extends PrimitiveProps {
-  variant?: ButtonVariants["variant"]
-  size?: ButtonVariants["size"]
-  class?: HTMLAttributes["class"]
-}
-
-const props = withDefaults(defineProps<Props>(), {
-  as: "button",
-})
+// Props
+const props = withDefaults(defineProps<PrimitiveProps & {
+    variant?: ButtonVariants['variant'];
+    size?: ButtonVariants['size'];
+    class?: HTMLAttributes['class'];
+}>(), {
+    as: 'button'
+});
 </script>
 
 <template>
-  <Primitive data-slot="button" :data-variant="variant" :data-size="size" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
-    <slot />
-  </Primitive>
-</template>
+    <Primitive data-slot="button" :data-variant="variant" :data-size="size" :as="as" :as-child="asChild" :class="cn(buttonVariants({ variant, size }), props.class)">
+        <slot />
+    </Primitive>
+</template>

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

@@ -1,41 +1,60 @@
-import type { ClassProp } from "class-variance-authority/types"
-import { cva } from "class-variance-authority"
-import { getButtonVariantClasses } from "../../../lib/color-tokens"
+import type { ClassProp } from 'class-variance-authority/types';
+import { cva } from 'class-variance-authority';
+import { getButtonVariantClasses } from '../../../lib/color-tokens';
 
-export { default as Button } from "./Button.vue"
+export { default as Button } from './Button.vue';
 
 export type ButtonVariants = {
-  variant?: "primary" | "secondary" | "ghost" | "link" | "gray" | "green" | "red" | "blue" | "yellow" | null | undefined
-  size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined
-}
+    variant?:
+    | 'primary'
+    | 'secondary'
+    | 'ghost'
+    | 'link'
+    | 'gray'
+    | 'green'
+    | 'red'
+    | 'blue'
+    | 'yellow'
+    | null
+    | undefined;
+    size?:
+    | 'default'
+    | 'sm'
+    | 'lg'
+    | 'icon'
+    | 'icon-sm'
+    | 'icon-lg'
+    | null
+    | undefined;
+};
 
 export const buttonVariants: (props?: ButtonVariants & ClassProp) => string = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-xs font-semibold transition-all duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 enabled:active:scale-[0.98] sm:text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
-  {
-    variants: {
-      variant: {
-        primary: getButtonVariantClasses("primary"),
-        secondary: getButtonVariantClasses("secondary"),
-        ghost: getButtonVariantClasses("ghost"),
-        link: getButtonVariantClasses("link"),
-        gray: getButtonVariantClasses("gray"),
-        green: getButtonVariantClasses("green"),
-        red: getButtonVariantClasses("red"),
-        blue: getButtonVariantClasses("blue"),
-        yellow: getButtonVariantClasses("yellow"),
-      },
-      size: {
-        "default": "min-h-12 px-4 py-3 has-[>svg]:px-3",
-        "sm": "min-h-10 gap-1.5 px-3 py-2 has-[>svg]:px-2.5",
-        "lg": "min-h-[52px] px-4 py-3 has-[>svg]:px-4",
-        "icon": "size-12",
-        "icon-sm": "size-10",
-        "icon-lg": "size-[52px]",
-      },
+    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded text-xs font-semibold transition-all duration-300 ease-in-out disabled:pointer-events-none disabled:opacity-50 enabled:active:scale-[0.98] sm:text-sm [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+    {
+        variants: {
+            variant: {
+                primary: getButtonVariantClasses('primary'),
+                secondary: getButtonVariantClasses('secondary'),
+                ghost: getButtonVariantClasses('ghost'),
+                link: getButtonVariantClasses('link'),
+                gray: getButtonVariantClasses('gray'),
+                green: getButtonVariantClasses('green'),
+                red: getButtonVariantClasses('red'),
+                blue: getButtonVariantClasses('blue'),
+                yellow: getButtonVariantClasses('yellow'),
+            },
+            size: {
+                default: 'min-h-12 px-4 py-3 has-[>svg]:px-3',
+                sm: 'min-h-10 gap-1.5 px-3 py-2 has-[>svg]:px-2.5',
+                lg: 'min-h-[52px] px-4 py-3 has-[>svg]:px-4',
+                icon: 'size-12',
+                'icon-sm': 'size-10',
+                'icon-lg': 'size-[52px]',
+            },
+        },
+        defaultVariants: {
+            variant: 'primary',
+            size: 'default',
+        },
     },
-    defaultVariants: {
-      variant: "primary",
-      size: "default",
-    },
-  },
-)
+);