@dynect/base 0.1.0 → 0.3.0

package/src/runtime/components/ui/menubar/MenubarRadioItem.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import type { MenubarRadioItemEmits, MenubarRadioItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Circle } from 'lucide-vue-next';
+import { MenubarItemIndicator, MenubarRadioItem, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<MenubarRadioItemProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<MenubarRadioItemEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<MenubarRadioItem
+		data-slot="menubar-radio-item"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-xs 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">
+			<MenubarItemIndicator>
+				<slot name="indicator-icon">
+					<Circle class="size-2 fill-current" />
+				</slot>
+			</MenubarItemIndicator>
+		</span>
+		<slot />
+	</MenubarRadioItem>
+</template>

package/src/runtime/components/ui/menubar/MenubarSeparator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { MenubarSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { MenubarSeparator, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<MenubarSeparator data-slot="menubar-separator" :class="cn('bg-border -mx-1 my-1 h-px', props.class)" v-bind="forwardedProps" />
+</template>

package/src/runtime/components/ui/menubar/MenubarShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<span data-slot="menubar-shortcut" :class="cn('text-muted-foreground ml-auto text-xs tracking-widest', props.class)">
+		<slot />
+	</span>
+</template>

package/src/runtime/components/ui/menubar/MenubarSub.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarSubEmits } from 'reka-ui';
+import { MenubarSub, useForwardPropsEmits } from 'reka-ui';
+
+interface MenubarSubRootProps {
+	defaultOpen?: boolean;
+	open?: boolean;
+}
+
+const props = defineProps<MenubarSubRootProps>();
+const emits = defineEmits<MenubarSubEmits>();
+
+const forwarded = useForwardPropsEmits(props, emits);
+</script>
+
+<template>
+	<MenubarSub v-slot="slotProps" data-slot="menubar-sub" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</MenubarSub>
+</template>

package/src/runtime/components/ui/menubar/MenubarSubContent.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { MenubarSubContentEmits, MenubarSubContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { MenubarPortal, MenubarSubContent, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<MenubarSubContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<MenubarPortal>
+		<MenubarSubContent
+			data-slot="menubar-sub-content"
+			v-bind="{ ...$attrs, ...forwarded }"
+			:class="
+				cn(
+					'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 z-50 min-w-[8rem] origin-(--reka-menubar-content-transform-origin) overflow-hidden rounded-md border p-1 shadow-lg',
+					props.class
+				)
+			"
+		>
+			<slot />
+		</MenubarSubContent>
+	</MenubarPortal>
+</template>

package/src/runtime/components/ui/menubar/MenubarSubTrigger.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import type { MenubarSubTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronRight } from 'lucide-vue-next';
+import { MenubarSubTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class']; inset?: boolean }>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'inset');
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<MenubarSubTrigger
+		data-slot="menubar-sub-trigger"
+		:data-inset="inset ? '' : undefined"
+		v-bind="forwardedProps"
+		:class="cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8', props.class)"
+	>
+		<slot />
+		<ChevronRight class="ml-auto size-4" />
+	</MenubarSubTrigger>
+</template>

package/src/runtime/components/ui/menubar/MenubarTrigger.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { MenubarTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { MenubarTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<MenubarTrigger data-slot="menubar-trigger" v-bind="forwardedProps" :class="cn('focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground flex items-center rounded-sm px-2 py-1 text-sm font-medium outline-hidden select-none', props.class)">
+		<slot />
+	</MenubarTrigger>
+</template>

package/src/runtime/components/ui/menubar/index.ts

@@ -0,0 +1,15 @@
+export { default as Menubar } from './Menubar.vue';
+export { default as MenubarCheckboxItem } from './MenubarCheckboxItem.vue';
+export { default as MenubarContent } from './MenubarContent.vue';
+export { default as MenubarGroup } from './MenubarGroup.vue';
+export { default as MenubarItem } from './MenubarItem.vue';
+export { default as MenubarLabel } from './MenubarLabel.vue';
+export { default as MenubarMenu } from './MenubarMenu.vue';
+export { default as MenubarRadioGroup } from './MenubarRadioGroup.vue';
+export { default as MenubarRadioItem } from './MenubarRadioItem.vue';
+export { default as MenubarSeparator } from './MenubarSeparator.vue';
+export { default as MenubarShortcut } from './MenubarShortcut.vue';
+export { default as MenubarSub } from './MenubarSub.vue';
+export { default as MenubarSubContent } from './MenubarSubContent.vue';
+export { default as MenubarSubTrigger } from './MenubarSubTrigger.vue';
+export { default as MenubarTrigger } from './MenubarTrigger.vue';

package/src/runtime/components/ui/native-select/NativeSelect.vue

@@ -0,0 +1,45 @@
+<script setup lang="ts">
+import type { AcceptableValue } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit, useVModel } from '@vueuse/core';
+import { ChevronDownIcon } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = defineProps<{ modelValue?: AcceptableValue | AcceptableValue[]; class?: HTMLAttributes['class'] }>();
+
+const emit = defineEmits<{
+	'update:modelValue': AcceptableValue;
+}>();
+
+const modelValue = useVModel(props, 'modelValue', emit, {
+	passive: true,
+	defaultValue: '',
+});
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<div class="group/native-select relative w-fit has-[select:disabled]:opacity-50" data-slot="native-select-wrapper">
+		<select
+			v-bind="{ ...$attrs, ...delegatedProps }"
+			v-model="modelValue"
+			data-slot="native-select"
+			:class="
+				cn(
+					'border-input placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 dark:hover:bg-input/50 h-9 w-full min-w-0 appearance-none rounded-md border bg-transparent px-3 py-2 pr-9 text-sm outline-none disabled:pointer-events-none disabled:cursor-not-allowed',
+					'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',
+					props.class
+				)
+			"
+		>
+			<slot />
+		</select>
+		<ChevronDownIcon class="text-muted-foreground pointer-events-none absolute top-1/2 right-3.5 size-4 -translate-y-1/2 opacity-50 select-none" aria-hidden="true" data-slot="native-select-icon" />
+	</div>
+</template>

package/src/runtime/components/ui/native-select/NativeSelectOptGroup.vue

@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+	<optgroup data-slot="native-select-optgroup" :class="cn('bg-popover text-popover-foreground', props.class)">
+		<slot />
+	</optgroup>
+</template>

package/src/runtime/components/ui/native-select/NativeSelectOption.vue

@@ -0,0 +1,15 @@
+<!-- @fallthroughAttributes true -->
+<!-- @strictTemplates true -->
+
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>();
+</script>
+
+<template>
+	<option data-slot="native-select-option" :class="cn('bg-popover text-popover-foreground', props.class)">
+		<slot />
+	</option>
+</template>

package/src/runtime/components/ui/native-select/index.ts

@@ -0,0 +1,3 @@
+export { default as NativeSelect } from './NativeSelect.vue';
+export { default as NativeSelectOptGroup } from './NativeSelectOptGroup.vue';
+export { default as NativeSelectOption } from './NativeSelectOption.vue';

package/src/runtime/components/ui/navigation-menu/NavigationMenu.vue

@@ -0,0 +1,31 @@
+<script setup lang="ts">
+import type { NavigationMenuRootEmits, NavigationMenuRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NavigationMenuRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import NavigationMenuViewport from './NavigationMenuViewport.vue';
+
+const props = withDefaults(
+	defineProps<
+		NavigationMenuRootProps & {
+			class?: HTMLAttributes['class'];
+			viewport?: boolean;
+		}
+	>(),
+	{
+		viewport: true,
+	}
+);
+const emits = defineEmits<NavigationMenuRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'viewport');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<NavigationMenuRoot v-slot="slotProps" data-slot="navigation-menu" :data-viewport="viewport" v-bind="forwarded" :class="cn('group/navigation-menu relative flex max-w-max flex-1 items-center justify-center', props.class)">
+		<slot v-bind="slotProps" />
+		<NavigationMenuViewport v-if="viewport" />
+	</NavigationMenuRoot>
+</template>

package/src/runtime/components/ui/navigation-menu/NavigationMenuContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { NavigationMenuContentEmits, NavigationMenuContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NavigationMenuContent, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<NavigationMenuContentProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<NavigationMenuContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<NavigationMenuContent
+		data-slot="navigation-menu-content"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out data-[motion^=from-]:fade-in data-[motion^=to-]:fade-out data-[motion=from-end]:slide-in-from-right-52 data-[motion=from-start]:slide-in-from-left-52 data-[motion=to-end]:slide-out-to-right-52 data-[motion=to-start]:slide-out-to-left-52 top-0 left-0 w-full p-2 pr-2.5 md:absolute md:w-auto',
+				'group-data-[viewport=false]/navigation-menu:bg-popover group-data-[viewport=false]/navigation-menu:text-popover-foreground group-data-[viewport=false]/navigation-menu:data-[state=open]:animate-in group-data-[viewport=false]/navigation-menu:data-[state=closed]:animate-out group-data-[viewport=false]/navigation-menu:data-[state=closed]:zoom-out-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:zoom-in-95 group-data-[viewport=false]/navigation-menu:data-[state=open]:fade-in-0 group-data-[viewport=false]/navigation-menu:data-[state=closed]:fade-out-0 group-data-[viewport=false]/navigation-menu:top-full group-data-[viewport=false]/navigation-menu:mt-1.5 group-data-[viewport=false]/navigation-menu:overflow-hidden group-data-[viewport=false]/navigation-menu:rounded-md group-data-[viewport=false]/navigation-menu:border group-data-[viewport=false]/navigation-menu:shadow group-data-[viewport=false]/navigation-menu:duration-200 **:data-[slot=navigation-menu-link]:focus:ring-0 **:data-[slot=navigation-menu-link]:focus:outline-none',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</NavigationMenuContent>
+</template>

package/src/runtime/components/ui/navigation-menu/NavigationMenuIndicator.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { NavigationMenuIndicatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NavigationMenuIndicator, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<NavigationMenuIndicatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<NavigationMenuIndicator
+		data-slot="navigation-menu-indicator"
+		v-bind="forwardedProps"
+		:class="cn('data-[state=visible]:animate-in data-[state=hidden]:animate-out data-[state=hidden]:fade-out data-[state=visible]:fade-in top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden', props.class)"
+	>
+		<div class="bg-border relative top-[60%] h-2 w-2 rotate-45 rounded-tl-sm shadow-md" />
+	</NavigationMenuIndicator>
+</template>

package/src/runtime/components/ui/navigation-menu/NavigationMenuItem.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { NavigationMenuItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NavigationMenuItem } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<NavigationMenuItemProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<NavigationMenuItem data-slot="navigation-menu-item" v-bind="delegatedProps" :class="cn('relative', props.class)">
+		<slot />
+	</NavigationMenuItem>
+</template>

package/src/runtime/components/ui/navigation-menu/NavigationMenuLink.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { NavigationMenuLinkEmits, NavigationMenuLinkProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NavigationMenuLink, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<NavigationMenuLinkProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<NavigationMenuLinkEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<NavigationMenuLink
+		data-slot="navigation-menu-link"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'data-active:focus:bg-accent data-active:hover:bg-accent data-active:bg-accent/50 data-active:text-accent-foreground hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground ring-ring/10 dark:ring-ring/20 dark:outline-ring/40 outline-ring/50 [&_svg:not([class*=\'text-\'])]:text-muted-foreground flex flex-col gap-1 rounded-sm p-2 text-sm transition-[color,box-shadow] focus-visible:ring-4 focus-visible:outline-1 [&_svg:not([class*=\'size-\'])]:size-4',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</NavigationMenuLink>
+</template>

package/src/runtime/components/ui/navigation-menu/NavigationMenuList.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { NavigationMenuListProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NavigationMenuList, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<NavigationMenuListProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<NavigationMenuList data-slot="navigation-menu-list" v-bind="forwardedProps" :class="cn('group flex flex-1 list-none items-center justify-center gap-1', props.class)">
+		<slot />
+	</NavigationMenuList>
+</template>

package/src/runtime/components/ui/navigation-menu/NavigationMenuTrigger.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NavigationMenuTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { ChevronDown } from 'lucide-vue-next';
+import { NavigationMenuTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { navigationMenuTriggerStyle } from '.';
+
+const props = defineProps<NavigationMenuTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<NavigationMenuTrigger data-slot="navigation-menu-trigger" v-bind="forwardedProps" :class="cn(navigationMenuTriggerStyle(), 'group', props.class)">
+		<slot />
+		<ChevronDown class="relative top-px ml-1 size-3 transition duration-300 group-data-[state=open]:rotate-180" aria-hidden="true" />
+	</NavigationMenuTrigger>
+</template>

package/src/runtime/components/ui/navigation-menu/NavigationMenuViewport.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { NavigationMenuViewportProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NavigationMenuViewport, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<NavigationMenuViewportProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwardedProps = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<div class="absolute top-full left-0 isolate z-50 flex justify-center">
+		<NavigationMenuViewport
+			data-slot="navigation-menu-viewport"
+			v-bind="forwardedProps"
+			:class="
+				cn(
+					'origin-top-center bg-popover text-popover-foreground data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-90 relative left-[var(--reka-navigation-menu-viewport-left)] mt-1.5 h-[var(--reka-navigation-menu-viewport-height)] w-full overflow-hidden rounded-md border shadow md:w-[var(--reka-navigation-menu-viewport-width)]',
+					props.class
+				)
+			"
+		/>
+	</div>
+</template>

package/src/runtime/components/ui/navigation-menu/index.ts

@@ -0,0 +1,14 @@
+import { cva } from 'class-variance-authority';
+
+export { default as NavigationMenu } from './NavigationMenu.vue';
+export { default as NavigationMenuContent } from './NavigationMenuContent.vue';
+export { default as NavigationMenuIndicator } from './NavigationMenuIndicator.vue';
+export { default as NavigationMenuItem } from './NavigationMenuItem.vue';
+export { default as NavigationMenuLink } from './NavigationMenuLink.vue';
+export { default as NavigationMenuList } from './NavigationMenuList.vue';
+export { default as NavigationMenuTrigger } from './NavigationMenuTrigger.vue';
+export { default as NavigationMenuViewport } from './NavigationMenuViewport.vue';
+
+export const navigationMenuTriggerStyle = cva(
+	'group inline-flex h-9 w-max items-center justify-center rounded-md bg-background px-4 py-2 text-sm font-medium hover:bg-accent hover:text-accent-foreground focus:bg-accent focus:text-accent-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=open]:hover:bg-accent data-[state=open]:text-accent-foreground data-[state=open]:focus:bg-accent data-[state=open]:bg-accent/50 focus-visible:ring-ring/50 outline-none transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:outline-1'
+);

package/src/runtime/components/ui/number-field/NumberField.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { NumberFieldRootEmits, NumberFieldRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { NumberFieldRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+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" />
+	</NumberFieldRoot>
+</template>

package/src/runtime/components/ui/number-field/NumberFieldContent.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div :class="cn('relative [&>[data-slot=input]]:has-[[data-slot=decrement]]:pl-5 [&>[data-slot=input]]:has-[[data-slot=increment]]:pr-5', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/number-field/NumberFieldDecrement.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NumberFieldDecrementProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Minus } from 'lucide-vue-next';
+import { NumberFieldDecrement, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+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 left-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+		<slot>
+			<Minus class="h-4 w-4" />
+		</slot>
+	</NumberFieldDecrement>
+</template>

package/src/runtime/components/ui/number-field/NumberFieldIncrement.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import type { NumberFieldIncrementProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Plus } from 'lucide-vue-next';
+import { NumberFieldIncrement, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+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 right-0 -translate-y-1/2 p-3 disabled:cursor-not-allowed disabled:opacity-20', props.class)">
+		<slot>
+			<Plus class="h-4 w-4" />
+		</slot>
+	</NumberFieldIncrement>
+</template>

package/src/runtime/components/ui/number-field/NumberFieldInput.vue

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

package/src/runtime/components/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/runtime/components/ui/pagination/Pagination.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { PaginationRootEmits, PaginationRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { PaginationRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+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(props.class)">
+		<slot v-bind="slotProps" />
+	</PaginationRoot>
+</template>