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

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

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

package/src/shadcn-ui/ui/resizable/ResizableHandle.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import type {
+  SplitterResizeHandleEmits,
+  SplitterResizeHandleProps,
+} from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { GripVertical } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SplitterResizeHandle, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  SplitterResizeHandleProps & {
+    class?: HTMLAttributes['class'];
+    withHandle?: boolean;
+  }
+>();
+const emits = defineEmits<SplitterResizeHandleEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'withHandle');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SplitterResizeHandle
+    data-slot="resizable-handle"
+    v-bind="forwarded"
+    :class="
+      cn(
+        'bg-border focus-visible:ring-ring relative flex w-px items-center justify-center after:absolute after:inset-y-0 after:left-1/2 after:w-1 after:-translate-x-1/2 focus-visible:ring-1 focus-visible:ring-offset-1 focus-visible:outline-hidden data-[orientation=vertical]:h-px data-[orientation=vertical]:w-full data-[orientation=vertical]:after:left-0 data-[orientation=vertical]:after:h-1 data-[orientation=vertical]:after:w-full data-[orientation=vertical]:after:-translate-y-1/2 data-[orientation=vertical]:after:translate-x-0 [&[data-orientation=vertical]>div]:rotate-90',
+        props.class,
+      )
+    "
+  >
+    <template v-if="props.withHandle">
+      <div
+        class="bg-border z-10 flex h-4 w-3 items-center justify-center rounded-xs border"
+      >
+        <slot>
+          <GripVertical class="size-2.5" />
+        </slot>
+      </div>
+    </template>
+  </SplitterResizeHandle>
+</template>

package/src/shadcn-ui/ui/resizable/ResizablePanel.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SplitterPanelEmits, SplitterPanelProps } from 'reka-ui';
+
+import { ref } from 'vue';
+
+import { SplitterPanel, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<SplitterPanelProps>();
+const emits = defineEmits<SplitterPanelEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+
+const panelRef = ref<InstanceType<typeof SplitterPanel>>();
+
+defineExpose({
+  collapse: () => panelRef.value?.collapse(),
+  expand: () => panelRef.value?.expand(),
+  getSize: () => panelRef.value?.getSize(),
+  resize: (size: number) => panelRef.value?.resize(size),
+});
+</script>
+
+<template>
+  <SplitterPanel
+    ref="panelRef"
+    v-slot="slotProps"
+    data-slot="resizable-panel"
+    v-bind="forwarded"
+  >
+    <slot v-bind="slotProps"></slot>
+  </SplitterPanel>
+</template>

package/src/shadcn-ui/ui/resizable/ResizablePanelGroup.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import type { SplitterGroupEmits, SplitterGroupProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { SplitterGroup, useForwardPropsEmits } from 'reka-ui';
+
+const props = defineProps<
+  SplitterGroupProps & { class?: HTMLAttributes['class'] }
+>();
+const emits = defineEmits<SplitterGroupEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SplitterGroup
+    v-slot="slotProps"
+    data-slot="resizable-panel-group"
+    v-bind="forwarded"
+    :class="
+      cn('flex h-full w-full data-[orientation=vertical]:flex-col', props.class)
+    "
+  >
+    <slot v-bind="slotProps"></slot>
+  </SplitterGroup>
+</template>

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

@@ -0,0 +1,3 @@
+export { default as ResizableHandle } from './ResizableHandle.vue';
+export { default as ResizablePanel } from './ResizablePanel.vue';
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue';

package/src/shadcn-ui/ui/scroll-area/ScrollArea.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { ScrollAreaRootProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'reka-ui';
+
+import ScrollBar from './ScrollBar.vue';
+
+const props = defineProps<
+  ScrollAreaRootProps & {
+    class?: HTMLAttributes['class'];
+    onScroll?: (event: Event) => void;
+  }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'onScroll');
+</script>
+
+<template>
+  <ScrollAreaRoot
+    data-slot="scroll-area"
+    v-bind="delegatedProps"
+    :class="cn('relative overflow-hidden', props.class)"
+  >
+    <ScrollAreaViewport
+      as-child
+      data-slot="scroll-area-viewport"
+      class="h-full w-full rounded-[inherit] focus:outline-hidden"
+      @scroll="props.onScroll"
+    >
+      <slot></slot>
+    </ScrollAreaViewport>
+    <ScrollBar />
+    <ScrollAreaCorner />
+  </ScrollAreaRoot>
+</template>

package/src/shadcn-ui/ui/scroll-area/ScrollBar.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import type { ScrollAreaScrollbarProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    orientation: 'vertical',
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <ScrollAreaScrollbar
+    data-slot="scroll-area-scrollbar"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'flex touch-none p-px transition-colors select-none',
+        orientation === 'vertical' &&
+          'h-full w-2.5 border-l border-l-transparent',
+        orientation === 'horizontal' &&
+          'h-2.5 flex-col border-t border-t-transparent',
+        props.class,
+      )
+    "
+  >
+    <ScrollAreaThumb
+      data-slot="scroll-area-thumb"
+      class="bg-border relative flex-1 rounded-full"
+    />
+  </ScrollAreaScrollbar>
+</template>

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

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

package/src/shadcn-ui/ui/select/Select.vue

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

package/src/shadcn-ui/ui/select/SelectContent.vue

@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import type { SelectContentEmits, SelectContentProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import {
+  SelectContent,
+  SelectPortal,
+  SelectViewport,
+  useForwardPropsEmits,
+} from 'reka-ui';
+
+import SelectScrollDownButton from './SelectScrollDownButton.vue';
+import SelectScrollUpButton from './SelectScrollUpButton.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = withDefaults(
+  defineProps<SelectContentProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    position: 'popper',
+  },
+);
+const emits = defineEmits<SelectContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+  <SelectPortal>
+    <SelectContent
+      data-slot="select-content"
+      v-bind="{ ...$attrs, ...forwarded }"
+      :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 relative max-h-(--reka-select-content-available-height) min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-md border shadow-md',
+          position === 'popper' &&
+            'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
+          props.class,
+        )
+      "
+    >
+      <SelectScrollUpButton />
+      <SelectViewport
+        :class="
+          cn(
+            'p-1',
+            position === 'popper' &&
+              'h-(--reka-select-trigger-height) w-full min-w-(--reka-select-trigger-width) scroll-my-1',
+          )
+        "
+      >
+        <slot></slot>
+      </SelectViewport>
+      <SelectScrollDownButton />
+    </SelectContent>
+  </SelectPortal>
+</template>

package/src/shadcn-ui/ui/select/SelectGroup.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { SelectGroupProps } from 'reka-ui';
+
+import { SelectGroup } from 'reka-ui';
+
+const props = defineProps<SelectGroupProps>();
+</script>
+
+<template>
+  <SelectGroup data-slot="select-group" v-bind="props">
+    <slot></slot>
+  </SelectGroup>
+</template>

package/src/shadcn-ui/ui/select/SelectItem.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { SelectItemProps } 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 {
+  SelectItem,
+  SelectItemIndicator,
+  SelectItemText,
+  useForwardProps,
+} from 'reka-ui';
+
+const props = defineProps<
+  SelectItemProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectItem
+    data-slot="select-item"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'focus:bg-accent focus:text-accent-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2',
+        props.class,
+      )
+    "
+  >
+    <span class="absolute right-2 flex size-3.5 items-center justify-center">
+      <SelectItemIndicator>
+        <slot name="indicator-icon">
+          <Check class="size-4" />
+        </slot>
+      </SelectItemIndicator>
+    </span>
+
+    <SelectItemText>
+      <slot></slot>
+    </SelectItemText>
+  </SelectItem>
+</template>

package/src/shadcn-ui/ui/select/SelectItemText.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { SelectItemTextProps } from 'reka-ui';
+
+import { SelectItemText } from 'reka-ui';
+
+const props = defineProps<SelectItemTextProps>();
+</script>
+
+<template>
+  <SelectItemText data-slot="select-item-text" v-bind="props">
+    <slot></slot>
+  </SelectItemText>
+</template>

package/src/shadcn-ui/ui/select/SelectLabel.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { SelectLabelProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { SelectLabel } from 'reka-ui';
+
+const props = defineProps<
+  SelectLabelProps & { class?: HTMLAttributes['class'] }
+>();
+</script>
+
+<template>
+  <SelectLabel
+    data-slot="select-label"
+    :class="cn('text-muted-foreground px-2 py-1.5 text-xs', props.class)"
+  >
+    <slot></slot>
+  </SelectLabel>
+</template>

package/src/shadcn-ui/ui/select/SelectScrollDownButton.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SelectScrollDownButtonProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronDown } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SelectScrollDownButton, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  SelectScrollDownButtonProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectScrollDownButton
+    data-slot="select-scroll-down-button"
+    v-bind="forwardedProps"
+    :class="
+      cn('flex cursor-default items-center justify-center py-1', props.class)
+    "
+  >
+    <slot>
+      <ChevronDown class="size-4" />
+    </slot>
+  </SelectScrollDownButton>
+</template>

package/src/shadcn-ui/ui/select/SelectScrollUpButton.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SelectScrollUpButtonProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronUp } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SelectScrollUpButton, useForwardProps } from 'reka-ui';
+
+const props = defineProps<
+  SelectScrollUpButtonProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectScrollUpButton
+    data-slot="select-scroll-up-button"
+    v-bind="forwardedProps"
+    :class="
+      cn('flex cursor-default items-center justify-center py-1', props.class)
+    "
+  >
+    <slot>
+      <ChevronUp class="size-4" />
+    </slot>
+  </SelectScrollUpButton>
+</template>

package/src/shadcn-ui/ui/select/SelectSeparator.vue

@@ -0,0 +1,24 @@
+<script setup lang="ts">
+import type { SelectSeparatorProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { SelectSeparator } from 'reka-ui';
+
+const props = defineProps<
+  SelectSeparatorProps & { class?: HTMLAttributes['class'] }
+>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <SelectSeparator
+    data-slot="select-separator"
+    v-bind="delegatedProps"
+    :class="cn('bg-border pointer-events-none -mx-1 my-1 h-px', props.class)"
+  />
+</template>

package/src/shadcn-ui/ui/select/SelectTrigger.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { SelectTriggerProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { ChevronDown } from '@lucide/vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SelectIcon, SelectTrigger, useForwardProps } from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<
+    SelectTriggerProps & {
+      class?: HTMLAttributes['class'];
+      size?: 'default' | 'sm';
+    }
+  >(),
+  { size: 'default' },
+);
+
+const delegatedProps = reactiveOmit(props, 'class', 'size');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+  <SelectTrigger
+    data-slot="select-trigger"
+    :data-size="size"
+    v-bind="forwardedProps"
+    :class="
+      cn(
+        'border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*=\'text-\'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-4',
+        props.class,
+      )
+    "
+  >
+    <slot></slot>
+    <SelectIcon as-child>
+      <ChevronDown class="size-4 opacity-50" />
+    </SelectIcon>
+  </SelectTrigger>
+</template>

package/src/shadcn-ui/ui/select/SelectValue.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { SelectValueProps } from 'reka-ui';
+
+import { SelectValue } from 'reka-ui';
+
+const props = defineProps<SelectValueProps>();
+</script>
+
+<template>
+  <SelectValue data-slot="select-value" v-bind="props">
+    <slot></slot>
+  </SelectValue>
+</template>

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

@@ -0,0 +1,11 @@
+export { default as Select } from './Select.vue';
+export { default as SelectContent } from './SelectContent.vue';
+export { default as SelectGroup } from './SelectGroup.vue';
+export { default as SelectItem } from './SelectItem.vue';
+export { default as SelectItemText } from './SelectItemText.vue';
+export { default as SelectLabel } from './SelectLabel.vue';
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue';
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue';
+export { default as SelectSeparator } from './SelectSeparator.vue';
+export { default as SelectTrigger } from './SelectTrigger.vue';
+export { default as SelectValue } from './SelectValue.vue';

package/src/shadcn-ui/ui/separator/Separator.vue

@@ -0,0 +1,33 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui';
+
+import type { HTMLAttributes } from 'vue';
+
+import { cn } from '@melt-js/libs-vben/shared/utils';
+
+import { reactiveOmit } from '@vueuse/core';
+import { Separator } from 'reka-ui';
+
+const props = withDefaults(
+  defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    orientation: 'horizontal',
+    decorative: true,
+  },
+);
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+  <Separator
+    data-slot="separator"
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px',
+        props.class,
+      )
+    "
+  />
+</template>

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

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

package/src/shadcn-ui/ui/sheet/Sheet.vue

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

package/src/shadcn-ui/ui/sheet/SheetClose.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { DialogCloseProps } from 'reka-ui';
+
+import { DialogClose } from 'reka-ui';
+
+const props = defineProps<DialogCloseProps>();
+</script>
+
+<template>
+  <DialogClose data-slot="sheet-close" v-bind="props">
+    <slot></slot>
+  </DialogClose>
+</template>