@bl33dz/fa814698dcde12f86a37ac31dd3aedf9 1.0.0

package/src/ui/accordion-content.vue

@@ -0,0 +1,21 @@
+
+
+<script setup lang="ts">
+import { AccordionContent } from '@/shadcn/accordion';
+import { cn } from '@/lib/utils';
+import { useAttrs } from 'vue';
+
+const attrs = useAttrs();
+</script>
+
+<template>
+  <AccordionContent
+    data-slot="accordion-content"
+    v-bind="attrs"
+    class="data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm"
+  >
+    <div :class="cn('pt-0 pb-4', attrs.class)">
+      <slot />
+    </div>
+  </AccordionContent>
+</template>

package/src/ui/accordion-item.vue

@@ -0,0 +1,18 @@
+
+<script setup lang="ts">
+import { AccordionItem } from '@/shadcn/accordion';
+import { cn } from '@/lib/utils';
+
+const props = defineProps({
+  class: { type: [String, Array, Object], default: '' },
+});
+</script>
+
+<template>
+  <AccordionItem
+    data-slot="accordion-item"
+    v-bind="{ ...$attrs, class: cn('border-b last:border-b-0', props.class) }"
+  >
+    <slot />
+  </AccordionItem>
+</template>

package/src/ui/accordion-trigger.vue

@@ -0,0 +1,14 @@
+<template>
+  <AccordionTrigger
+    data-slot="accordion-trigger"
+    :class="cn('focus-visible:border-ring focus-visible:ring-ring/50 flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180', $attrs['custom-class'])"
+    v-bind="$attrs"
+  >
+    <slot />
+  </AccordionTrigger>
+</template>
+
+<script setup>
+import { cn } from './cn';
+import { AccordionTrigger } from "@/shadcn/accordion/index";
+</script>

package/src/ui/accordion.vue

@@ -0,0 +1,9 @@
+<script setup lang="ts">
+import { Accordion } from '@/shadcn/accordion';
+</script>
+
+<template>
+  <Accordion data-slot="accordion" v-bind="$attrs">
+    <slot />
+  </Accordion>
+</template>

package/src/ui/alert-actions.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    data-slot="alert-actions"
+    :class="['col-start-2 mt-3 flex gap-2', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// No additional logic needed; all props/attrs are passed through
+</script>

package/src/ui/alert-description.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    data-slot="alert-description"
+    :class="['col-start-2 grid justify-items-start gap-1 text-sm [&_p]:leading-relaxed opacity-90', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// No additional logic needed; all props/attrs are passed through
+</script>

package/src/ui/alert-title.vue

@@ -0,0 +1,13 @@
+<template>
+  <div
+    data-slot="alert-title"
+    :class="['col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', $attrs.class]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup>
+// No additional logic needed; all props/attrs are passed through
+</script>

package/src/ui/alert.vue

@@ -0,0 +1,63 @@
+<template>
+  <div
+    v-if="visible"
+    data-slot="alert"
+    role="alert"
+    :class="computedClass"
+  >
+    <slot />
+    <button
+      v-if="dismissible"
+      data-slot="alert-close"
+      type="button"
+      class="absolute right-2 top-2 p-1 h-6 w-6 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none inline-flex items-center justify-center text-current hover:bg-muted"
+      @click="$emit('dismiss')"
+    >
+      <X class="size-4" />
+      <span class="sr-only">Close alert</span>
+    </button>
+  </div>
+</template>
+
+<script setup>
+import { computed, toRefs } from 'vue';
+import { X } from 'lucide-vue-next';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+  dismissible: {
+    type: Boolean,
+    default: false,
+  },
+  visible: {
+    type: Boolean,
+    default: true,
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const emit = defineEmits(['dismiss']);
+
+const variantClasses = {
+  default: 'bg-card text-card-foreground border-border',
+  destructive: 'border-red-200 bg-red-50 text-red-700 [&>svg]:text-red-600 dark:border-red-800 dark:bg-red-950 dark:text-red-300 dark:[&>svg]:text-red-400',
+  success: 'border-green-200 bg-green-50 text-green-700 [&>svg]:text-green-600 dark:border-green-800 dark:bg-green-950 dark:text-green-300 dark:[&>svg]:text-green-400',
+  warning: 'border-yellow-200 bg-yellow-50 text-yellow-700 [&>svg]:text-yellow-600 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300 dark:[&>svg]:text-yellow-400',
+  info: 'border-blue-200 bg-blue-50 text-blue-700 [&>svg]:text-blue-600 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300 dark:[&>svg]:text-blue-400',
+  'soft-primary': 'border-cyan-200 bg-cyan-50 text-cyan-700 [&>svg]:text-cyan-600 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-300 dark:[&>svg]:text-cyan-400',
+  'soft-secondary': 'border-gray-200 bg-gray-50 text-gray-700 [&>svg]:text-gray-600 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:[&>svg]:text-gray-400',
+  'soft-neutral': 'border-stone-200 bg-stone-50 text-stone-700 [&>svg]:text-stone-600 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300 dark:[&>svg]:text-stone-400',
+};
+
+const computedClass = computed(() =>
+  'relative w-full rounded-lg border px-4 py-3 text-sm 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 ' +
+  (variantClasses[props.variant] || variantClasses.default) +
+  (props.class ? ' ' + props.class : '')
+);
+</script>

package/src/ui/avatar-fallback.vue

@@ -0,0 +1,38 @@
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    :class="fallbackClass"
+    v-bind="$attrs"
+  >
+    <slot />
+  </AvatarFallback>
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+import { AvatarFallback } from '@/shadcn/avatar';
+const props = defineProps({
+  class: {
+    type: String,
+    default: '',
+  },
+});
+const fallbackClass = cn(
+  'bg-muted flex size-full items-center justify-center rounded-full',
+  // Text sizing based on parent avatar size
+  '[.size-6_&]:text-xs', // xs avatar
+  '[.size-8_&]:text-xs', // sm avatar
+  '[.size-10_&]:text-sm', // md avatar (default)
+  '[.size-12_&]:text-base', // lg avatar
+  '[.size-16_&]:text-lg', // xl avatar
+  '[.size-20_&]:text-xl', // 2xl avatar
+  '[.size-6_&_svg]:size-3', // xs avatar - 12px icon
+  '[.size-8_&_svg]:size-3.5', // sm avatar - 14px icon
+  '[.size-10_&_svg]:size-4', // md avatar - 16px icon (default)
+  '[.size-12_&_svg]:size-5', // lg avatar - 20px icon
+  '[.size-16_&_svg]:size-6', // xl avatar - 24px icon
+  '[.size-20_&_svg]:size-8', // 2xl avatar - 32px icon
+  '[&_svg]:pointer-events-none [&_svg]:shrink-0',
+  props.class
+);
+</script>

package/src/ui/avatar-group.vue

@@ -0,0 +1,32 @@
+<template>
+  <div :class="groupClass" v-bind="$attrs">
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  spacing: {
+    type: String,
+    default: 'normal',
+    validator: (val: string) => ['tight', 'normal', 'loose'].includes(val),
+  },
+  class: {
+    type: String,
+    default: '',
+  },
+});
+
+const groupClass = computed(() =>
+  cn(
+    'flex',
+    props.spacing === 'tight' && '-space-x-1',
+    props.spacing === 'normal' && '-space-x-2',
+    props.spacing === 'loose' && '-space-x-3',
+    props.class
+  )
+);
+</script>

package/src/ui/avatar-image.vue

@@ -0,0 +1,19 @@
+<template>
+  <AvatarImage
+    as="img"
+    data-slot="avatar-image"
+    :src="src"
+    :alt="alt"
+    :class="cn('aspect-square size-full', $attrs.class)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script setup lang="ts">
+import { cn } from './utils';
+import { AvatarImage } from '@/shadcn/avatar';
+const props = defineProps({
+  src: String,
+  alt: String,
+});
+</script>

package/src/ui/avatar.vue

@@ -0,0 +1,32 @@
+<template>
+  <Avatar
+    data-slot="avatar"
+    :class="[
+      'relative flex shrink-0 overflow-hidden rounded-full',
+      size === 'xs' ? 'size-6' : '',
+      size === 'sm' ? 'size-8' : '',
+      size === 'md' ? 'size-10' : '',
+      size === 'lg' ? 'size-12' : '',
+      size === 'xl' ? 'size-16' : '',
+      size === '2xl' ? 'size-20' : '',
+      $attrs.class || ''
+    ]"
+    v-bind="$attrs"
+  >
+    <slot />
+  </Avatar>
+</template>
+
+<script setup>
+import { defineProps, useAttrs } from 'vue';
+import { Avatar } from '@/shadcn/avatar';
+
+const { size } = defineProps({
+  size: {
+    type: String,
+    default: 'md',
+    validator: v => ['xs','sm','md','lg','xl','2xl'].includes(v)
+  }
+});
+const $attrs = useAttrs();
+</script>

package/src/ui/badge.vue

@@ -0,0 +1,90 @@
+
+<script setup lang="ts">
+import { computed, defineProps, useAttrs } from 'vue';
+import { cn } from './utils';
+import { X } from 'lucide-vue-next';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+    validator: v => [
+      'default', 'secondary', 'destructive', 'outline',
+      'soft-primary', 'soft-secondary', 'soft-success', 'soft-warning', 'soft-danger', 'soft-info', 'soft-purple', 'soft-pink', 'soft-indigo', 'soft-orange', 'soft-teal', 'soft-neutral'
+    ].includes(v),
+  },
+  size: {
+    type: String,
+    default: 'md',
+    validator: v => ['sm', 'md', 'lg'].includes(v),
+  },
+  dismissible: Boolean,
+  onDismiss: Function,
+});
+
+const $attrs = useAttrs();
+
+const variantClasses: Record<string, string> = {
+  default: 'border-transparent bg-primary text-primary-foreground hover:bg-primary/90',
+  secondary: 'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/90',
+  destructive: 'border-transparent bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+  outline: 'text-foreground hover:bg-accent hover:text-accent-foreground',
+  'soft-primary': 'border-blue-200 bg-blue-50 text-blue-700 hover:bg-blue-100 dark:border-blue-800 dark:bg-blue-950 dark:text-blue-300 dark:hover:bg-blue-900',
+  'soft-secondary': 'border-gray-200 bg-gray-50 text-gray-700 hover:bg-gray-100 dark:border-gray-700 dark:bg-gray-900 dark:text-gray-300 dark:hover:bg-gray-800',
+  'soft-success': 'border-green-200 bg-green-50 text-green-700 hover:bg-green-100 dark:border-green-800 dark:bg-green-950 dark:text-green-300 dark:hover:bg-green-900',
+  'soft-warning': 'border-yellow-200 bg-yellow-50 text-yellow-700 hover:bg-yellow-100 dark:border-yellow-800 dark:bg-yellow-950 dark:text-yellow-300 dark:hover:bg-yellow-900',
+  'soft-danger': 'border-red-200 bg-red-50 text-red-700 hover:bg-red-100 dark:border-red-800 dark:bg-red-950 dark:text-red-300 dark:hover:bg-red-900',
+  'soft-info': 'border-cyan-200 bg-cyan-50 text-cyan-700 hover:bg-cyan-100 dark:border-cyan-800 dark:bg-cyan-950 dark:text-cyan-300 dark:hover:bg-cyan-900',
+  'soft-purple': 'border-purple-200 bg-purple-50 text-purple-700 hover:bg-purple-100 dark:border-purple-800 dark:bg-purple-950 dark:text-purple-300 dark:hover:bg-purple-900',
+  'soft-pink': 'border-pink-200 bg-pink-50 text-pink-700 hover:bg-pink-100 dark:border-pink-800 dark:bg-pink-950 dark:text-pink-300 dark:hover:bg-pink-900',
+  'soft-indigo': 'border-indigo-200 bg-indigo-50 text-indigo-700 hover:bg-indigo-100 dark:border-indigo-800 dark:bg-indigo-950 dark:text-indigo-300 dark:hover:bg-indigo-900',
+  'soft-orange': 'border-orange-200 bg-orange-50 text-orange-700 hover:bg-orange-100 dark:border-orange-800 dark:bg-orange-950 dark:text-orange-300 dark:hover:bg-orange-900',
+  'soft-teal': 'border-teal-200 bg-teal-50 text-teal-700 hover:bg-teal-100 dark:border-teal-800 dark:bg-teal-950 dark:text-teal-300 dark:hover:bg-teal-900',
+  'soft-neutral': 'border-stone-200 bg-stone-50 text-stone-700 hover:bg-stone-100 dark:border-stone-700 dark:bg-stone-900 dark:text-stone-300 dark:hover:bg-stone-800',
+};
+
+const sizeClasses: Record<string, string> = {
+  sm: 'text-[12px] px-[4px] py-[2px] rounded-[4px] [&>svg:not(.dismiss-icon)]:size-[10px] gap-1',
+  md: 'text-[14px] px-[6px] py-[2px] rounded-[4px] [&>svg:not(.dismiss-icon)]:size-[12px] gap-1',
+  lg: 'text-[16px] px-[8px] py-[4px] rounded-[6px] [&>svg:not(.dismiss-icon)]:size-[14px] gap-1',
+};
+
+function getDismissIconClasses(size: string) {
+  switch (size) {
+    case 'sm':
+      return { iconClass: 'h-3 w-3', buttonClass: 'p-0.5' };
+    case 'lg':
+      return { iconClass: 'h-4 w-4', buttonClass: 'p-1' };
+    default:
+      return { iconClass: 'h-3.5 w-3.5', buttonClass: 'p-0.5' };
+  }
+}
+
+const { iconClass, buttonClass } = getDismissIconClasses(props.size);
+</script>
+
+<template>
+  <span
+    data-slot="badge"
+    :class="cn(
+      'inline-flex items-center justify-center border font-medium w-fit whitespace-nowrap shrink-0 [&>svg:not(.dismiss-icon)]:pointer-events-none [&>svg:not(.dismiss-icon)]:shrink-0 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 transition-[color,box-shadow] overflow-hidden',
+      variantClasses[props.variant],
+      sizeClasses[props.size],
+      props.dismissible ? 'pr-0.5 mr-0' : '',
+      $attrs.class,
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+    <template v-if="props.dismissible && props.onDismiss">
+      <button
+        type="button"
+        @click.stop="props.onDismiss()"
+        :class="cn('dismiss-icon rounded-sm opacity-70 hover:opacity-100 focus:opacity-100 focus:outline-none focus:ring-1 focus:ring-ring transition-opacity', buttonClass)"
+        aria-label="Remove"
+      >
+        <X :class="iconClass" />
+      </button>
+    </template>
+  </span>
+</template>

package/src/ui/breadcrumb-item.vue

@@ -0,0 +1,11 @@
+<template>
+  <li>
+    <span :class="['transition-colors hover:text-foreground', $attrs.class || '']" v-bind="$attrs">
+      <slot />
+    </span>
+  </li>
+</template>
+
+<script setup>
+// No props needed for base BreadcrumbItem
+</script>

package/src/ui/breadcrumb-separator.vue

@@ -0,0 +1,9 @@
+<template>
+  <li aria-hidden="true">
+    <span class="mx-1 select-none text-muted-foreground">/</span>
+  </li>
+</template>
+
+<script setup>
+// No props needed for base BreadcrumbSeparator
+</script>

package/src/ui/breadcrumb.vue

@@ -0,0 +1,11 @@
+<template>
+  <nav class="w-full" aria-label="breadcrumb">
+    <ol class="flex flex-wrap items-center gap-1 text-sm text-muted-foreground">
+      <slot />
+    </ol>
+  </nav>
+</template>
+
+<script setup>
+// No props needed for base Breadcrumb
+</script>

package/src/ui/button.vue

@@ -0,0 +1,76 @@
+<template>
+  <component
+    :is="asChild ? 'span' : 'button'"
+    data-slot="button"
+    :class="cn(baseClass, variantClass, sizeClass, $attrs.class)"
+    v-bind="$attrs"
+    :type="asChild ? undefined : type"
+    :disabled="disabled"
+    @click="$emit('click', $event)"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { computed, defineProps, useAttrs, defineEmits } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+  size: {
+    type: String,
+    default: 'default',
+  },
+  type: {
+    type: String,
+    default: 'button',
+  },
+  disabled: {
+    type: Boolean,
+    default: false,
+  },
+  asChild: {
+    type: Boolean,
+    default: false,
+  },
+});
+
+const $attrs = useAttrs();
+const emit = defineEmits(['click']);
+
+const baseClass = '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]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4 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';
+
+const variantClass = computed(() => {
+  switch (props.variant) {
+    case 'destructive':
+      return 'bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60';
+    case 'outline':
+      return 'border border-border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-transparent dark:border-border dark:hover:bg-accent';
+    case 'secondary':
+      return 'bg-secondary text-secondary-foreground hover:bg-secondary/80';
+    case 'ghost':
+      return 'hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50';
+    case 'link':
+      return 'text-primary underline-offset-4 hover:underline';
+    default:
+      return 'bg-primary text-primary-foreground hover:bg-primary/90';
+  }
+});
+
+const sizeClass = computed(() => {
+  switch (props.size) {
+    case 'sm':
+      return 'h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5';
+    case 'lg':
+      return 'h-10 rounded-md px-6 has-[>svg]:px-4';
+    case 'icon':
+      return 'size-9 rounded-md';
+    default:
+      return 'h-9 px-4 py-2 has-[>svg]:px-3';
+  }
+});
+</script>

package/src/ui/card-content.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+
+const props = defineProps({});
+</script>
+
+<template>
+  <div
+    data-slot="card-content"
+    :class="cn('px-3 space-y-4 [&:first-child]:pt-3 [&:last-child]:pb-3', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/card-description.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+
+const props = defineProps({});
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </p>
+</template>

package/src/ui/card-footer.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import { cn } from './utils';
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-3 pb-3 [.border-t]:pt-3', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/card-header.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+
+const props = defineProps({});
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="cn(
+      '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1 px-3 pt-3 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-3',
+      $attrs.class
+    )"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>

package/src/ui/card-title.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import { cn } from './utils';
+import { defineProps } from 'vue';
+
+const props = defineProps({});
+</script>
+
+<template>
+  <h4
+    data-slot="card-title"
+    :class="cn('leading-none', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </h4>
+</template>

package/src/ui/card.vue

@@ -0,0 +1,73 @@
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { cn } from './utils';
+
+const props = defineProps({
+  variant: {
+    type: String,
+    default: 'default',
+  },
+  cornerPosition: {
+    type: String,
+    default: 'top-right',
+  },
+});
+
+const clipPathValue = computed(() => {
+  if (props.variant !== 'corner-cut') return undefined;
+  switch (props.cornerPosition) {
+    case 'top-left':
+      return 'polygon(24px 0, 100% 0, 100% 100%, 0 100%, 0 24px)';
+    case 'top-right':
+      return 'polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 0 100%)';
+    case 'bottom-left':
+      return 'polygon(0 0, 100% 0, 100% 100%, 24px 100%, 0 calc(100% - 24px))';
+    case 'bottom-right':
+      return 'polygon(0 0, 100% 0, 100% calc(100% - 24px), calc(100% - 24px) 100%, 0 100%)';
+    default:
+      return undefined;
+  }
+});
+
+const customPaddingValue = computed(() => {
+  if (props.variant !== 'corner-cut') return '';
+  switch (props.cornerPosition) {
+    case 'top-left':
+    case 'bottom-left':
+      return 'pl-2';
+    case 'top-right':
+    case 'bottom-right':
+      return 'pr-2';
+    default:
+      return '';
+  }
+});
+</script>
+
+<template>
+  <div v-if="props.variant === 'corner-cut'" class="relative">
+    <!-- Border container -->
+    <div
+      :class="cn('absolute inset-0 bg-border rounded')"
+      :style="{ clipPath: clipPathValue }"
+    />
+    <!-- Content container -->
+    <div
+      data-slot="card"
+      :class="cn('bg-card text-card-foreground flex flex-col gap-3 relative rounded', customPaddingValue, $attrs.class)"
+      :style="{ clipPath: clipPathValue, margin: '1px' }"
+      v-bind="$attrs"
+    >
+      <slot />
+    </div>
+  </div>
+  <div
+    v-else
+    data-slot="card"
+    :class="cn('bg-card text-card-foreground flex flex-col gap-3 rounded-md border', $attrs.class)"
+    v-bind="$attrs"
+  >
+    <slot />
+  </div>
+</template>