@brumaombra/ui-vintage 0.7.7 → 0.7.9

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>

package/src/components/ui/card/CardFooter.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-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
-    <slot />
-  </div>
+    <div data-slot="card-footer" :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)">
+        <slot />
+    </div>
 </template>

package/src/components/ui/card/CardHeader.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-header" :class="cn('@container/card-header grid auto-rows-min items-start px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 gap-2', props.class)">
-    <slot />
-  </div>
+    <div data-slot="card-header" :class="cn(
+        '@container/card-header grid auto-rows-min items-start px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6 gap-2',
+        props.class,
+    )
+        ">
+        <slot />
+    </div>
 </template>

package/src/components/ui/card/CardText.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>
-  <p data-slot="card-text" :class="cn('text-xs sm:text-sm text-[var(--text-secondary-light)] dark:text-[var(--text-secondary-dark)]', props.class)">
-    <slot />
-  </p>
+    <p data-slot="card-text" :class="cn(
+        'text-xs sm:text-sm text-(--text-secondary-light) dark:text-(--text-secondary-dark)',
+        props.class,
+    )
+        ">
+        <slot />
+    </p>
 </template>

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

@@ -1,14 +1,16 @@
 <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>
-  <h3 data-slot="card-title" :class="cn('leading-none font-semibold text-sm sm:text-base', props.class)">
-    <slot />
-  </h3>
+    <h3 data-slot="card-title" :class="cn('leading-none font-semibold text-sm sm:text-base', props.class)
+        ">
+        <slot />
+    </h3>
 </template>

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

@@ -1,8 +1,8 @@
-export { default as Card } from "./Card.vue"
-export { default as CardAction } from "./CardAction.vue"
-export { default as CardContent } from "./CardContent.vue"
-export { default as CardText } from "./CardText.vue"
-export { default as CardDescription } from "./CardDescription.vue"
-export { default as CardFooter } from "./CardFooter.vue"
-export { default as CardHeader } from "./CardHeader.vue"
-export { default as CardTitle } from "./CardTitle.vue"
+export { default as Card } from './Card.vue';
+export { default as CardAction } from './CardAction.vue';
+export { default as CardContent } from './CardContent.vue';
+export { default as CardText } from './CardText.vue';
+export { default as CardDescription } from './CardDescription.vue';
+export { default as CardFooter } from './CardFooter.vue';
+export { default as CardHeader } from './CardHeader.vue';
+export { default as CardTitle } from './CardTitle.vue';