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

package/src/shadcn-ui/ui/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { DropdownMenuTriggerProps } from 'reka-ui';
+
+import { DropdownMenuTrigger, useForwardProps } from 'reka-ui';
+
+const props = defineProps<DropdownMenuTriggerProps>();
+
+const forwardedProps = useForwardProps(props);
+</script>
+
+<template>
+  <DropdownMenuTrigger
+    data-slot="dropdown-menu-trigger"
+    v-bind="forwardedProps"
+  >
+    <slot></slot>
+  </DropdownMenuTrigger>
+</template>

package/src/shadcn-ui/ui/dropdown-menu/index.ts

@@ -0,0 +1,16 @@
+export { default as DropdownMenu } from './DropdownMenu.vue';
+
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue';
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue';
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue';
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue';
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue';
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue';
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue';
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue';
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue';
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue';
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue';
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue';
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue';
+export { DropdownMenuPortal } from 'reka-ui';

package/src/shadcn-ui/ui/form/FormControl.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import { Slot } from 'reka-ui';
+
+import { useFormField } from './useFormField';
+
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+</script>
+
+<template>
+  <Slot
+    :id="formItemId"
+    data-slot="form-control"
+    :aria-describedby="
+      !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
+    "
+    :aria-invalid="!!error"
+  >
+    <slot></slot>
+  </Slot>
+</template>

package/src/shadcn-ui/ui/form/FormDescription.vue

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

package/src/shadcn-ui/ui/form/FormField.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { provide, toRefs } from 'vue';
+
+import { FORM_FIELD_INJECTION_KEY } from './injectionKeys';
+
+const props = withDefaults(
+  defineProps<{
+    dirty?: boolean;
+    error?: string;
+    name: string;
+    touched?: boolean;
+    valid?: boolean;
+  }>(),
+  {
+    dirty: false,
+    error: undefined,
+    touched: false,
+    valid: true,
+  },
+);
+
+const { dirty, error, name, touched, valid } = toRefs(props);
+
+provide(FORM_FIELD_INJECTION_KEY, {
+  dirty,
+  error,
+  name,
+  touched,
+  valid,
+});
+</script>
+
+<template>
+  <slot></slot>
+</template>

package/src/shadcn-ui/ui/form/FormItem.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+
+import { provide } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { useId } from 'reka-ui';
+
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+
+const id = useId();
+provide(FORM_ITEM_INJECTION_KEY, id);
+</script>
+
+<template>
+  <div data-slot="form-item" :class="cn(props.class)">
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/form/FormLabel.vue

@@ -0,0 +1,25 @@
+<script lang="ts" setup>
+import type { LabelProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Label } from '../label';
+import { useFormField } from './useFormField';
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
+
+const { error, formItemId } = useFormField();
+</script>
+
+<template>
+  <Label
+    data-slot="form-label"
+    :data-error="!!error"
+    :class="cn(props.class)"
+    :for="formItemId"
+  >
+    <slot></slot>
+  </Label>
+</template>

package/src/shadcn-ui/ui/form/FormMessage.vue

@@ -0,0 +1,24 @@
+<script lang="ts" setup>
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { useFormField } from './useFormField';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+
+const { error, formMessageId } = useFormField();
+</script>
+
+<template>
+  <p
+    v-if="error"
+    :id="formMessageId"
+    data-slot="form-message"
+    :class="cn('text-destructive text-sm', props.class)"
+  >
+    {{ error }}
+  </p>
+</template>

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

@@ -0,0 +1,10 @@
+export { default as FormControl } from './FormControl.vue';
+export { default as FormDescription } from './FormDescription.vue';
+export { default as FormField } from './FormField.vue';
+export { default as FormItem } from './FormItem.vue';
+export { default as FormLabel } from './FormLabel.vue';
+export { default as FormMessage } from './FormMessage.vue';
+export {
+  FORM_FIELD_INJECTION_KEY,
+  FORM_ITEM_INJECTION_KEY,
+} from './injectionKeys';

package/src/shadcn-ui/ui/form/injectionKeys.ts

@@ -0,0 +1,16 @@
+import type { InjectionKey, Ref } from 'vue';
+
+export interface FormFieldContext {
+  dirty: Readonly<Ref<boolean>>;
+  error: Readonly<Ref<string | undefined>>;
+  name: Readonly<Ref<string>>;
+  touched: Readonly<Ref<boolean>>;
+  valid: Readonly<Ref<boolean>>;
+}
+
+export const FORM_ITEM_INJECTION_KEY = Symbol(
+  'FORM_ITEM_INJECTION_KEY',
+) as InjectionKey<string>;
+export const FORM_FIELD_INJECTION_KEY = Symbol(
+  'FORM_FIELD_INJECTION_KEY',
+) as InjectionKey<FormFieldContext>;

package/src/shadcn-ui/ui/form/useFormField.ts

@@ -0,0 +1,35 @@
+import { computed, inject } from 'vue';
+
+import {
+  FORM_FIELD_INJECTION_KEY,
+  FORM_ITEM_INJECTION_KEY,
+} from './injectionKeys';
+
+export function useFormField() {
+  const fieldContext = inject(FORM_FIELD_INJECTION_KEY);
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
+
+  if (!fieldContext)
+    throw new Error('useFormField should be used within <FormField>');
+  if (!fieldItemContext)
+    throw new Error('useFormField should be used within <FormItem>');
+
+  const { dirty, error, name, touched, valid } = fieldContext;
+  const id = fieldItemContext;
+
+  const fieldState = {
+    valid: computed(() => valid.value),
+    isDirty: computed(() => dirty.value),
+    isTouched: computed(() => touched.value),
+    error,
+  };
+
+  return {
+    id,
+    name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+}

package/src/shadcn-ui/ui/hover-card/HoverCard.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HoverCardRootEmits, HoverCardRootProps } from 'reka-ui';
+
+import { HoverCardRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<HoverCardRootProps>();
+const emits = defineEmits<HoverCardRootEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+  <HoverCardRoot v-slot="slotProps" data-slot="hover-card" v-bind="forwarded">
+    <slot v-bind="slotProps"></slot>
+  </HoverCardRoot>
+</template>

package/src/shadcn-ui/ui/hover-card/HoverCardContent.vue

@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import type { HoverCardContentProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { HoverCardContent, HoverCardPortal, useForwardProps } from 'reka-ui';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<HoverCardContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    sideOffset: 4,
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <HoverCardPortal>
+    <HoverCardContent
+      data-slot="hover-card-content"
+      v-bind="{ ...$attrs, ...forwardedProps }"
+      :class="
+        cn(
+          'z-popup bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 w-64 rounded-md border p-4 shadow-md outline-hidden',
+          props.class,
+        )
+      "
+    >
+      <slot></slot>
+    </HoverCardContent>
+  </HoverCardPortal>
+</template>

package/src/shadcn-ui/ui/hover-card/HoverCardTrigger.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HoverCardTriggerProps } from 'reka-ui';
+
+import { HoverCardTrigger } from 'reka-ui';
+
+const props = defineProps<HoverCardTriggerProps>();
+</script>
+
+<template>
+  <HoverCardTrigger data-slot="hover-card-trigger" v-bind="props">
+    <slot></slot>
+  </HoverCardTrigger>
+</template>

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

@@ -0,0 +1,3 @@
+export { default as HoverCard } from './HoverCard.vue';
+export { default as HoverCardContent } from './HoverCardContent.vue';
+export { default as HoverCardTrigger } from './HoverCardTrigger.vue';

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

@@ -0,0 +1,32 @@
+export * from './accordion';
+export * from './alert-dialog';
+export * from './avatar';
+export * from './badge';
+export * from './breadcrumb';
+export * from './button';
+export * from './card';
+export * from './checkbox';
+export * from './dialog';
+export * from './dropdown-menu';
+export * from './form';
+export * from './hover-card';
+export * from './input';
+export * from './label';
+export * from './number-field';
+export * from './pagination';
+export * from './pin-input';
+export * from './popover';
+export * from './progress';
+export * from './radio-group';
+export * from './resizable';
+export * from './scroll-area';
+export * from './select';
+export * from './separator';
+export * from './sheet';
+export * from './switch';
+export * from './tabs';
+export * from './textarea';
+export * from './toggle';
+export * from './toggle-group';
+export * from './tooltip';
+export * from './tree';

package/src/shadcn-ui/ui/input/Input.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { useVModel } from '@vueuse/core';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+  defaultValue?: number | string;
+  modelValue?: number | string;
+}>();
+
+const emits = defineEmits<{
+  (e: 'update:modelValue', payload: number | string): void;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emits, {
+  defaultValue: props.defaultValue,
+  passive: true,
+});
+</script>
+
+<template>
+  <input
+    v-model="modelValue"
+    :class="
+      cn(
+        'border-input bg-background ring-offset-background placeholder:text-muted-foreground/50 focus-visible:outline-none flex h-10 w-full rounded-md border px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  />
+</template>
+<style lang="scss" scoped>
+input {
+  --ring: var(--primary);
+
+  &:focus-visible {
+    box-shadow: inset 0 0 0 1px hsl(var(--ring));
+  }
+
+  &::-ms-reveal,
+  &::-ms-clear {
+    display: none;
+  }
+
+  &::-webkit-credentials-auto-fill-button,
+  &::-webkit-inner-spin-button,
+  &::-webkit-outer-spin-button {
+    display: none;
+  }
+}
+</style>

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

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

package/src/shadcn-ui/ui/label/Label.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { LabelProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { Label } from 'reka-ui';
+
+const props = defineProps<LabelProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <Label
+    data-slot="label"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </Label>
+</template>

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

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

package/src/shadcn-ui/ui/number-field/NumberField.vue

@@ -0,0 +1,29 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  NumberFieldRootProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<NumberFieldRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <NumberFieldRoot
+    v-slot="slotProps"
+    v-bind="forwarded"
+    :class="cn('grid gap-1.5', props.class)"
+  >
+    <slot v-bind="slotProps"></slot>
+  </NumberFieldRoot>
+</template>

package/src/shadcn-ui/ui/number-field/NumberFieldContent.vue

@@ -0,0 +1,22 @@
+<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
+    :class="
+      cn(
+        'relative [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5 [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+  </div>
+</template>

package/src/shadcn-ui/ui/number-field/NumberFieldDecrement.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Minus } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  NumberFieldDecrementProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <NumberFieldDecrement
+    data-slot="decrement"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'absolute top-1/2 -translate-y-1/2 left-0 p-3 disabled:cursor-not-allowed disabled:opacity-20',
+        props.class,
+      )
+    "
+  >
+    <slot>
+      <Minus class="size-4" />
+    </slot>
+  </NumberFieldDecrement>
+</template>

package/src/shadcn-ui/ui/number-field/NumberFieldIncrement.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { Plus } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  NumberFieldIncrementProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <NumberFieldIncrement
+    data-slot="increment"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'absolute top-1/2 -translate-y-1/2 right-0 disabled:cursor-not-allowed disabled:opacity-20 p-3',
+        props.class,
+      )
+    "
+  >
+    <slot>
+      <Plus class="h-4 w-4" />
+    </slot>
+  </NumberFieldIncrement>
+</template>

package/src/shadcn-ui/ui/number-field/NumberFieldInput.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { NumberFieldInput } from 'reka-ui';
+
+const props = defineProps<{
+  class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+  <NumberFieldInput
+    data-slot="input"
+    :class="
+      cn(
+        'flex h-9 w-full rounded-md border border-input bg-transparent py-1 text-sm text-center shadow-sm transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class,
+      )
+    "
+  />
+</template>

package/src/shadcn-ui/ui/number-field/index.ts

@@ -0,0 +1,5 @@
+export { default as NumberField } from './NumberField.vue';
+export { default as NumberFieldContent } from './NumberFieldContent.vue';
+export { default as NumberFieldDecrement } from './NumberFieldDecrement.vue';
+export { default as NumberFieldIncrement } from './NumberFieldIncrement.vue';
+export { default as NumberFieldInput } from './NumberFieldInput.vue';

package/src/shadcn-ui/ui/pagination/Pagination.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationRoot, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  PaginationRootProps & {
+    class?: HTMLAttributes['class'];
+  }
+>();
+const emits = defineEmits<PaginationRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <PaginationRoot
+    v-slot="slotProps"
+    data-slot="pagination"
+    v-bind="forwarded"
+    :class="cn('mx-auto flex w-full justify-center', props.class)"
+  >
+    <slot v-bind="slotProps"></slot>
+  </PaginationRoot>
+</template>