@melt-js/comps-vben 0.0.0-stage → 2026.11.8-2

package/src/shadcn-ui/ui/avatar/AvatarFallback.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { AvatarFallbackProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { AvatarFallback } from 'reka-ui';
+
+const props = defineProps<
+  AvatarFallbackProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <AvatarFallback
+    data-slot="avatar-fallback"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-muted flex size-full items-center justify-center rounded-full',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </AvatarFallback>
+</template>

package/src/shadcn-ui/ui/avatar/AvatarImage.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { AvatarImageProps } from 'reka-ui';
+
+import { AvatarImage } from 'reka-ui';
+
+const props = defineProps<AvatarImageProps>();
+</script>
+
+<template>
+  <AvatarImage
+    data-slot="avatar-image"
+    v-bind="props"
+    class="aspect-square size-full"
+  >
+    <slot></slot>
+  </AvatarImage>
+</template>

package/src/shadcn-ui/ui/avatar/index.ts

@@ -0,0 +1,3 @@
+export { default as Avatar } from './Avatar.vue';
+export { default as AvatarFallback } from './AvatarFallback.vue';
+export { default as AvatarImage } from './AvatarImage.vue';

package/src/shadcn-ui/ui/badge/Badge.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { BadgeVariants } from './badge';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { Primitive } from 'reka-ui';
+
+import { badgeVariants } from './badge';
+
+const props = defineProps<
+  PrimitiveProps & {
+    class?: HTMLAttributes['class'];
+    variant?: BadgeVariants['variant'];
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <Primitive
+    data-slot="badge"
+    :class="cn(badgeVariants({ variant }), props.class)"
+    v-bind="delegatedProps"
+  >
+    <slot></slot>
+  </Primitive>
+</template>

package/src/shadcn-ui/ui/badge/badge.ts

@@ -0,0 +1,25 @@
+import type { VariantProps } from 'class-variance-authority';
+
+import { cva } from 'class-variance-authority';
+
+export const badgeVariants = cva(
+  'inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60',
+        outline:
+          'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  },
+);
+export type BadgeVariants = VariantProps<typeof badgeVariants>;

package/src/shadcn-ui/ui/badge/index.ts

@@ -0,0 +1,3 @@
+export * from './badge';
+
+export { default as Badge } from './Badge.vue';

package/src/shadcn-ui/ui/breadcrumb/Breadcrumb.vue

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

package/src/shadcn-ui/ui/breadcrumb/BreadcrumbEllipsis.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { MoreHorizontal } from '@lucide/vue';
+
+const props = defineProps<{
+  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>
+      <MoreHorizontal class="size-4" />
+    </slot>
+    <span class="sr-only">More</span>
+  </span>
+</template>

package/src/shadcn-ui/ui/breadcrumb/BreadcrumbItem.vue

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

package/src/shadcn-ui/ui/breadcrumb/BreadcrumbLink.vue

@@ -0,0 +1,27 @@
+<script lang="ts" setup>
+import type { PrimitiveProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Primitive } from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<PrimitiveProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    as: 'a',
+  },
+);
+</script>
+
+<template>
+  <Primitive
+    data-slot="breadcrumb-link"
+    :as="as"
+    :as-child="asChild"
+    :class="cn('hover:text-foreground transition-colors', props.class)"
+  >
+    <slot></slot>
+  </Primitive>
+</template>

package/src/shadcn-ui/ui/breadcrumb/BreadcrumbList.vue

@@ -0,0 +1,23 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  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></slot>
+  </ol>
+</template>

package/src/shadcn-ui/ui/breadcrumb/BreadcrumbPage.vue

@@ -0,0 +1,21 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  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></slot>
+  </span>
+</template>

package/src/shadcn-ui/ui/breadcrumb/BreadcrumbSeparator.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronRight } from '@lucide/vue';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <li
+    data-slot="breadcrumb-separator"
+    role="presentation"
+    aria-hidden="true"
+    :class="cn('[&>svg]:size-3.5', props.class)"
+  >
+    <slot>
+      <ChevronRight />
+    </slot>
+  </li>
+</template>

package/src/shadcn-ui/ui/breadcrumb/index.ts

@@ -0,0 +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';

package/src/shadcn-ui/ui/button/Button.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import type { ButtonVariants } from './button';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Primitive } from 'reka-ui';
+
+import { buttonVariants } from './button';
+
+interface Props extends PrimitiveProps {
+  class?: HTMLAttributes['class'];
+  size?: ButtonVariants['size'];
+  variant?: ButtonVariants['variant'];
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  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></slot>
+  </Primitive>
+</template>

package/src/shadcn-ui/ui/button/button.ts

@@ -0,0 +1,35 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+
+export const buttonVariants = cva(
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',
+  {
+    defaultVariants: {
+      size: 'default',
+      variant: 'default',
+    },
+    variants: {
+      size: {
+        default: 'h-9 px-4 py-2',
+        icon: 'h-8 w-8 rounded-sm px-1 text-lg',
+        lg: 'h-10 rounded-md px-4',
+        sm: 'h-8 rounded-md px-2 text-xs',
+        xs: 'h-8 w-8 rounded-sm px-1 text-xs',
+      },
+      variant: {
+        default:
+          'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive:
+          'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive-hover',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        heavy: 'hover:bg-heavy hover:text-heavy-foreground',
+        icon: 'hover:bg-accent hover:text-accent-foreground text-foreground/80',
+        link: 'text-primary underline-offset-4 hover:underline',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+      },
+    },
+  },
+);
+export type ButtonVariants = VariantProps<typeof buttonVariants>;

package/src/shadcn-ui/ui/button/index.ts

@@ -0,0 +1,3 @@
+export * from './button';
+
+export { default as Button } from './Button.vue';

package/src/shadcn-ui/ui/card/Card.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card"
+    :class="
+      cn(
+        'bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/card/CardAction.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  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></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/card/CardContent.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div data-slot="card-content" :class="cn('px-6', props.class)">
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/card/CardDescription.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <p
+    data-slot="card-description"
+    :class="cn('text-muted-foreground text-sm', props.class)"
+  >
+    <slot></slot>
+  </p>
+</template>

package/src/shadcn-ui/ui/card/CardFooter.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card-footer"
+    :class="cn('flex items-center px-6 [.border-t]:pt-6', props.class)"
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/card/CardHeader.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <div
+    data-slot="card-header"
+    :class="
+      cn(
+        '@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/card/CardTitle.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <h3
+    data-slot="card-title"
+    :class="cn('leading-none font-semibold', props.class)"
+  >
+    <slot></slot>
+  </h3>
+</template>

package/src/shadcn-ui/ui/card/index.ts

@@ -0,0 +1,7 @@
+export { default as Card } from './Card.vue';
+export { default as CardAction } from './CardAction.vue';
+export { default as CardContent } from './CardContent.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';

package/src/shadcn-ui/ui/checkbox/Checkbox.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { CheckboxRootEmits, CheckboxRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Check, Minus } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  CheckboxRootProps & {
+    class?: HTMLAttributes['class'];
+    indeterminate?: boolean;
+  }
+>();
+const emits = defineEmits<CheckboxRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'indeterminate');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <CheckboxRoot
+    v-slot="slotProps"
+    data-slot="checkbox"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'peer border-input data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-sm border shadow-xs transition-shadow outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50',
+        indeterminate && 'bg-primary text-primary-foreground border-primary',
+        props.class,
+      )
+    "
+  >
+    <CheckboxIndicator
+      data-slot="checkbox-indicator"
+      class="grid place-content-center text-current transition-none"
+      :force-mount="indeterminate ? true : undefined"
+    >
+      <slot v-bind="slotProps">
+        <Minus v-if="indeterminate" class="size-3.5" />
+        <Check v-else class="size-3.5" />
+      </slot>
+    </CheckboxIndicator>
+  </CheckboxRoot>
+</template>

package/src/shadcn-ui/ui/checkbox/index.ts

@@ -0,0 +1 @@
+export { default as Checkbox } from './Checkbox.vue';

package/src/shadcn-ui/ui/context-menu/ContextMenu.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { ContextMenuRootEmits, ContextMenuRootProps } from 'reka-ui';
+
+import { ContextMenuRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = withDefaults(defineProps<ContextMenuRootProps>(), {
+  modal: false,
+});
+const emits = defineEmits<ContextMenuRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <ContextMenuRoot data-slot="context-menu" v-bind="forwarded">
+    <slot></slot>
+  </ContextMenuRoot>
+</template>

package/src/shadcn-ui/ui/context-menu/ContextMenuCheckboxItem.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import type {
+  ContextMenuCheckboxItemEmits,
+  ContextMenuCheckboxItemProps,
+} from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Check } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import {
+  ContextMenuCheckboxItem,
+  ContextMenuItemIndicator,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+const props = defineProps<
+  ContextMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<ContextMenuCheckboxItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <ContextMenuCheckboxItem
+    data-slot="context-menu-checkbox-item"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm py-1.5 pr-2 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <span
+      class="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center"
+    >
+      <ContextMenuItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </ContextMenuItemIndicator>
+    </span>
+    <slot></slot>
+  </ContextMenuCheckboxItem>
+</template>