pukaad-ui-lib 1.3.3 → 1.5.0

package/dist/runtime/components/ui/avatar/AvatarFallback.vue

@@ -12,16 +12,16 @@ const delegatedProps = reactiveOmit(props, "class");
 </script>
 
 <template>
-  <AvatarFallback
-    data-slot="avatar-fallback"
-    v-bind="delegatedProps"
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
     :class="
   cn(
     'bg-muted flex size-full items-center justify-center rounded-full',
     props.class
   )
-"
-  >
-    <slot />
-  </AvatarFallback>
+"
+  >
+    <slot />
+  </AvatarFallback>
 </template>

package/dist/runtime/components/ui/avatar/AvatarImage.vue

@@ -10,11 +10,11 @@ const props = defineProps({
 </script>
 
 <template>
-  <AvatarImage
-    data-slot="avatar-image"
-    v-bind="props"
-    class="aspect-square size-full"
-  >
-    <slot />
-  </AvatarImage>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot />
+  </AvatarImage>
 </template>

package/dist/runtime/components/ui/button/Button.vue

@@ -13,12 +13,12 @@ const props = defineProps({
 </script>
 
 <template>
-  <Primitive
-    data-slot="button"
-    :as="as"
-    :as-child="asChild"
-    :class="cn(buttonVariants({ variant, color, size }), props.class)"
-  >
-    <slot />
-  </Primitive>
+  <Primitive
+    data-slot="button"
+    :as="as"
+    :as-child="asChild"
+    :class="cn(buttonVariants({ variant, color, size }), props.class)"
+  >
+    <slot />
+  </Primitive>
 </template>

package/dist/runtime/components/ui/button/index.d.ts

@@ -1,7 +1,7 @@
 import type { VariantProps } from "class-variance-authority";
 export { default as Button } from "./Button.vue.js";
 export declare const buttonVariants: (props?: ({
-    variant?: "default" | "outline" | "ghost" | "link" | null | undefined;
+    variant?: "default" | "outline" | "ghost" | "link" | "text" | null | undefined;
     color?: "default" | "primary" | "secondary" | "destructive" | null | undefined;
     size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/runtime/components/ui/button/index.js

@@ -1,14 +1,15 @@
 import { cva } from "class-variance-authority";
 export { default as Button } from "./Button.vue";
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_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",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all cursor-pointer disabled:pointer-events-none disabled:opacity-50 [&_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: {
         default: "shadow-sm",
         outline: "shadow-sm",
         ghost: "",
-        link: "underline-offset-4 hover:underline"
+        link: "underline-offset-4 hover:underline",
+        text: ""
       },
       color: {
         default: "text-foreground",
@@ -85,6 +86,27 @@ export const buttonVariants = cva(
         variant: "ghost",
         color: "destructive",
         class: "text-destructive hover:bg-destructive/90 hover:text-destructive-foreground"
+      },
+      // text variant - just plain text with color, no background or hover effects
+      {
+        variant: "text",
+        color: "default",
+        class: "text-foreground hover:opacity-80"
+      },
+      {
+        variant: "text",
+        color: "primary",
+        class: "text-primary hover:opacity-80"
+      },
+      {
+        variant: "text",
+        color: "secondary",
+        class: "text-secondary hover:opacity-80"
+      },
+      {
+        variant: "text",
+        color: "destructive",
+        class: "text-destructive hover:opacity-80"
       }
     ],
     defaultVariants: {

package/dist/runtime/components/ui/card/Card.vue

@@ -1,17 +1,17 @@
 <template>
-  <Form v-slot="{ meta }" @submit="onSubmit">
-    <div
-      data-slot="card"
+  <Form v-slot="{ meta }" @submit="onSubmit">
+    <div
+      data-slot="card"
       :class="
   cn(
     'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-4',
     props.class
   )
-"
-    >
-      <slot name="default" :meta="meta" />
-    </div>
-  </Form>
+"
+    >
+      <slot name="default" :meta="meta" />
+    </div>
+  </Form>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/card/CardAction.vue

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="card-action"
+  <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>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/card/CardContent.vue

@@ -1,10 +1,10 @@
 <template>
-  <div
-    data-slot="card-content"
-    :class="cn('px-4 font-body-large', props.class)"
-  >
-    <slot />
-  </div>
+  <div
+    data-slot="card-content"
+    :class="cn('px-4 font-body-large', props.class)"
+  >
+    <slot />
+  </div>
 </template>
 
 <script setup>

package/dist/runtime/components/ui/card/CardDescription.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <p
-    data-slot="card-description"
-    :class="cn('text-muted-foreground font-body-large', props.class)"
-  >
-    <slot />
-  </p>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground font-body-large', props.class)"
+  >
+    <slot />
+  </p>
 </template>

package/dist/runtime/components/ui/card/CardFooter.vue

@@ -6,12 +6,12 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="card-footer"
+  <div
+    data-slot="card-footer"
     :class="
   cn('flex items-center px-4 [.border-t]:pt-6 font-body-large', props.class)
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/card/CardHeader.vue

@@ -6,15 +6,15 @@ const props = defineProps({
 </script>
 
 <template>
-  <div
-    data-slot="card-header"
+  <div
+    data-slot="card-header"
     :class="
   cn(
     '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
     props.class
   )
-"
-  >
-    <slot />
-  </div>
+"
+  >
+    <slot />
+  </div>
 </template>

package/dist/runtime/components/ui/card/CardTitle.vue

@@ -6,10 +6,10 @@ const props = defineProps({
 </script>
 
 <template>
-  <h3
-    data-slot="card-title"
-    :class="cn('leading-none font-title-medium-prominent', props.class)"
-  >
-    <slot />
-  </h3>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-title-medium-prominent', props.class)"
+  >
+    <slot />
+  </h3>
 </template>

package/dist/runtime/components/ui/carousel/Carousel.d.vue.ts

@@ -0,0 +1,37 @@
+import type { CarouselProps, WithClassAsProps } from "./interface.js";
+type __VLS_Props = CarouselProps & WithClassAsProps;
+declare var __VLS_1: {
+    canScrollNext: any;
+    canScrollPrev: any;
+    carouselApi: any;
+    carouselRef: any;
+    orientation: any;
+    scrollNext: any;
+    scrollPrev: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    canScrollNext: import("vue").Ref<boolean, boolean>;
+    canScrollPrev: import("vue").Ref<boolean, boolean>;
+    carouselApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
+    carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    orientation: "vertical" | "horizontal" | undefined;
+    scrollNext: () => void;
+    scrollPrev: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "init-api": (payload: import("embla-carousel").EmblaCarouselType | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onInit-api"?: ((payload: import("embla-carousel").EmblaCarouselType | undefined) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/Carousel.vue

@@ -0,0 +1,47 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+import { useProvideCarousel } from "./useCarousel";
+const props = defineProps({
+  opts: { type: null, required: false },
+  plugins: { type: null, required: false },
+  orientation: { type: String, required: false, default: "horizontal" },
+  class: { type: null, required: false }
+});
+const emits = defineEmits(["init-api"]);
+const { canScrollNext, canScrollPrev, carouselApi, carouselRef, orientation, scrollNext, scrollPrev } = useProvideCarousel(props, emits);
+defineExpose({
+  canScrollNext,
+  canScrollPrev,
+  carouselApi,
+  carouselRef,
+  orientation,
+  scrollNext,
+  scrollPrev
+});
+function onKeyDown(event) {
+  const prevKey = props.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+  const nextKey = props.orientation === "vertical" ? "ArrowDown" : "ArrowRight";
+  if (event.key === prevKey) {
+    event.preventDefault();
+    scrollPrev();
+    return;
+  }
+  if (event.key === nextKey) {
+    event.preventDefault();
+    scrollNext();
+  }
+}
+</script>
+
+<template>
+  <div
+    data-slot="carousel"
+    :class="cn('relative', props.class)"
+    role="region"
+    aria-roledescription="carousel"
+    tabindex="0"
+    @keydown="onKeyDown"
+  >
+    <slot :can-scroll-next :can-scroll-prev :carousel-api :carousel-ref :orientation :scroll-next :scroll-prev />
+  </div>
+</template>

package/dist/runtime/components/ui/carousel/Carousel.vue.d.ts

@@ -0,0 +1,37 @@
+import type { CarouselProps, WithClassAsProps } from "./interface.js";
+type __VLS_Props = CarouselProps & WithClassAsProps;
+declare var __VLS_1: {
+    canScrollNext: any;
+    canScrollPrev: any;
+    carouselApi: any;
+    carouselRef: any;
+    orientation: any;
+    scrollNext: any;
+    scrollPrev: any;
+};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {
+    canScrollNext: import("vue").Ref<boolean, boolean>;
+    canScrollPrev: import("vue").Ref<boolean, boolean>;
+    carouselApi: import("vue").Ref<import("embla-carousel").EmblaCarouselType | undefined, import("embla-carousel").EmblaCarouselType | undefined>;
+    carouselRef: import("vue").Ref<HTMLElement | undefined, HTMLElement | undefined>;
+    orientation: "vertical" | "horizontal" | undefined;
+    scrollNext: () => void;
+    scrollPrev: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {} & {
+    "init-api": (payload: import("embla-carousel").EmblaCarouselType | undefined) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onInit-api"?: ((payload: import("embla-carousel").EmblaCarouselType | undefined) => any) | undefined;
+}>, {
+    orientation: "horizontal" | "vertical";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselContent.d.vue.ts

@@ -0,0 +1,14 @@
+import type { WithClassAsProps } from "./interface.js";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WithClassAsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WithClassAsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselContent.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+import { useCarousel } from "./useCarousel";
+defineOptions({
+  inheritAttrs: false
+});
+const props = defineProps({
+  class: { type: null, required: false }
+});
+const { carouselRef, orientation } = useCarousel();
+</script>
+
+<template>
+  <div
+    ref="carouselRef"
+    data-slot="carousel-content"
+    class="overflow-hidden"
+  >
+    <div
+      :class="
+  cn(
+    'flex',
+    orientation === 'horizontal' ? '-ml-4' : '-mt-4 flex-col',
+    props.class
+  )
+"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+</template>

package/dist/runtime/components/ui/carousel/CarouselContent.vue.d.ts

@@ -0,0 +1,14 @@
+import type { WithClassAsProps } from "./interface.js";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WithClassAsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WithClassAsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselItem.d.vue.ts

@@ -0,0 +1,14 @@
+import type { WithClassAsProps } from "./interface.js";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WithClassAsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WithClassAsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselItem.vue

@@ -0,0 +1,23 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+import { useCarousel } from "./useCarousel";
+const props = defineProps({
+  class: { type: null, required: false }
+});
+const { orientation } = useCarousel();
+</script>
+
+<template>
+  <div
+    data-slot="carousel-item"
+    role="group"
+    aria-roledescription="slide"
+    :class="cn(
+  'min-w-0 shrink-0 grow-0 basis-full',
+  orientation === 'horizontal' ? 'pl-4' : 'pt-4',
+  props.class
+)"
+  >
+    <slot />
+  </div>
+</template>

package/dist/runtime/components/ui/carousel/CarouselItem.vue.d.ts

@@ -0,0 +1,14 @@
+import type { WithClassAsProps } from "./interface.js";
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<WithClassAsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<WithClassAsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselNext.d.vue.ts

@@ -0,0 +1,22 @@
+import type { WithClassAsProps } from "./interface.js";
+import type { ButtonVariants } from "@/runtime/components/ui/button";
+type __VLS_Props = {
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+} & WithClassAsProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "default" | "outline" | "ghost" | "link" | "text" | null;
+    size: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselNext.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+import { Button } from "@/runtime/components/ui/button";
+import { useCarousel } from "./useCarousel";
+const props = defineProps({
+  variant: { type: null, required: false, default: "outline" },
+  size: { type: null, required: false, default: "icon" },
+  class: { type: null, required: false }
+});
+const { orientation, canScrollNext, scrollNext } = useCarousel();
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-next"
+    :disabled="!canScrollNext"
+    :class="
+  cn(
+    'absolute size-8 rounded-full',
+    orientation === 'horizontal' ? 'top-1/2 -right-12 -translate-y-1/2' : '-bottom-12 left-1/2 -translate-x-1/2 rotate-90',
+    props.class
+  )
+"
+    :variant="variant"
+    :size="size"
+    @click="scrollNext"
+  >
+    <slot>
+      <Icon name="lucide:chevron-right" />
+      <span class="sr-only">Next Slide</span>
+    </slot>
+  </Button>
+</template>

package/dist/runtime/components/ui/carousel/CarouselNext.vue.d.ts

@@ -0,0 +1,22 @@
+import type { WithClassAsProps } from "./interface.js";
+import type { ButtonVariants } from "@/runtime/components/ui/button";
+type __VLS_Props = {
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+} & WithClassAsProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "default" | "outline" | "ghost" | "link" | "text" | null;
+    size: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselPrevious.d.vue.ts

@@ -0,0 +1,22 @@
+import type { WithClassAsProps } from "./interface.js";
+import type { ButtonVariants } from "@/runtime/components/ui/button";
+type __VLS_Props = {
+    variant?: ButtonVariants["variant"];
+    size?: ButtonVariants["size"];
+} & WithClassAsProps;
+declare var __VLS_10: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_10) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    variant: "default" | "outline" | "ghost" | "link" | "text" | null;
+    size: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/runtime/components/ui/carousel/CarouselPrevious.vue

@@ -0,0 +1,33 @@
+<script setup>
+import { cn } from "@/runtime/plugins/shadcn";
+import { Button } from "@/runtime/components/ui/button";
+import { useCarousel } from "./useCarousel";
+const props = defineProps({
+  variant: { type: null, required: false, default: "outline" },
+  size: { type: null, required: false, default: "icon" },
+  class: { type: null, required: false }
+});
+const { orientation, canScrollPrev, scrollPrev } = useCarousel();
+</script>
+
+<template>
+  <Button
+    data-slot="carousel-previous"
+    :disabled="!canScrollPrev"
+    :class="
+  cn(
+    'absolute size-8 rounded-full',
+    orientation === 'horizontal' ? 'top-1/2 -left-12 -translate-y-1/2' : '-top-12 left-1/2 -translate-x-1/2 rotate-90',
+    props.class
+  )
+"
+    :variant="variant"
+    :size="size"
+    @click="scrollPrev"
+  >
+    <slot>
+      <Icon name="lucide:chevron-left" />
+      <span class="sr-only">Previous Slide</span>
+    </slot>
+  </Button>
+</template>