@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/sidebar/SidebarMenuSubButton.vue

@@ -0,0 +1,43 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = withDefaults(
+	defineProps<
+		PrimitiveProps & {
+			size?: 'sm' | 'md';
+			isActive?: boolean;
+			class?: HTMLAttributes['class'];
+		}
+	>(),
+	{
+		as: 'a',
+		size: 'md',
+	}
+);
+</script>
+
+<template>
+	<Primitive
+		data-slot="sidebar-menu-sub-button"
+		data-sidebar="menu-sub-button"
+		:as="as"
+		:as-child="asChild"
+		:data-size="size"
+		:data-active="isActive"
+		:class="
+			cn(
+				'text-sidebar-foreground ring-sidebar-ring hover:bg-bg-dynect-soft dark:hover:bg-bg-dynect-soft hover:text-text-fg-dynect-strong dark:hover:text-text-fg-dynect-strong active:bg-bg-dynect-soft active:text-text-fg-dynect-strong [&>svg]:text-text-fg-dynect-strong flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 outline-hidden focus-visible:ring-2 disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0',
+				'data-[active=true]:bg-bg-dynect-soft data-[active=true]:text-text-fg-dynect-strong',
+				size === 'sm' && 'text-xs',
+				size === 'md' && 'text-sm',
+				'group-data-[collapsible=icon]:hidden',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</Primitive>
+</template>

package/src/runtime/components/ui/sidebar/SidebarMenuSubItem.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>
+	<li data-slot="sidebar-menu-sub-item" data-sidebar="menu-sub-item" :class="cn('group/menu-sub-item relative', props.class)">
+		<slot />
+	</li>
+</template>

package/src/runtime/components/ui/sidebar/SidebarProvider.vue

@@ -0,0 +1,89 @@
+<script setup lang="ts">
+import type { HTMLAttributes, Ref } from 'vue';
+import { useEventListener, useMediaQuery, useVModel } from '@vueuse/core';
+import { TooltipProvider } from 'reka-ui';
+import { computed, ref } from 'vue';
+import { cn } from '@/lib/utils';
+import { provideSidebarContext, SIDEBAR_COOKIE_MAX_AGE, SIDEBAR_COOKIE_NAME, SIDEBAR_KEYBOARD_SHORTCUT, SIDEBAR_WIDTH, SIDEBAR_WIDTH_ICON } from './utils';
+
+const props = withDefaults(
+	defineProps<{
+		defaultOpen?: boolean;
+		open?: boolean;
+		class?: HTMLAttributes['class'];
+	}>(),
+	{
+		defaultOpen: undefined,
+		open: undefined,
+	}
+);
+
+const emits = defineEmits<{
+	'update:open': [open: boolean];
+}>();
+
+const cookieState = useCookie<boolean | string>(SIDEBAR_COOKIE_NAME, {
+	maxAge: SIDEBAR_COOKIE_MAX_AGE,
+});
+
+const isMobile = useMediaQuery('(max-width: 768px)');
+const openMobile = ref(false);
+
+const open = useVModel(props, 'open', emits, {
+	defaultValue: props.defaultOpen ?? (cookieState.value !== false && cookieState.value !== 'false'),
+	passive: (props.open === undefined) as false,
+}) as Ref<boolean>;
+
+function setOpen(value: boolean) {
+	open.value = value; // emits('update:open', value)
+
+	// This sets the cookie to keep the sidebar state.
+	cookieState.value = value;
+}
+
+function setOpenMobile(value: boolean) {
+	openMobile.value = value;
+}
+
+// Helper to toggle the sidebar.
+function toggleSidebar() {
+	return isMobile.value ? setOpenMobile(!openMobile.value) : setOpen(!open.value);
+}
+
+useEventListener('keydown', (event: KeyboardEvent) => {
+	if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+		event.preventDefault();
+		toggleSidebar();
+	}
+});
+
+// We add a state so that we can do data-state="expanded" or "collapsed".
+// This makes it easier to style the sidebar with Tailwind classes.
+const state = computed(() => (open.value ? 'expanded' : 'collapsed'));
+
+provideSidebarContext({
+	state,
+	open,
+	setOpen,
+	isMobile,
+	openMobile,
+	setOpenMobile,
+	toggleSidebar,
+});
+</script>
+
+<template>
+	<TooltipProvider :delay-duration="0">
+		<div
+			data-slot="sidebar-wrapper"
+			:style="{
+				'--sidebar-width': SIDEBAR_WIDTH,
+				'--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
+			}"
+			:class="cn('group/sidebar-wrapper has-data-[variant=inset]:bg-sidebar flex min-h-svh w-full', props.class)"
+			v-bind="$attrs"
+		>
+			<slot />
+		</div>
+	</TooltipProvider>
+</template>

package/src/runtime/components/ui/sidebar/SidebarRail.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { useSidebar } from './utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+
+const { toggleSidebar } = useSidebar();
+</script>
+
+<template>
+	<button
+		data-sidebar="rail"
+		data-slot="sidebar-rail"
+		aria-label="Toggle Sidebar"
+		:tabindex="-1"
+		title="Toggle Sidebar"
+		:class="
+			cn(
+				'hover:after:bg-sidebar-border absolute inset-y-0 z-20 hidden w-4 -translate-x-1/2 ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-0.5 sm:flex',
+				'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
+				'[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
+				'hover:group-data-[collapsible=offcanvas]:bg-sidebar group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full',
+				'[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
+				'[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
+				props.class
+			)
+		"
+		@click="toggleSidebar"
+	>
+		<slot />
+	</button>
+</template>

package/src/runtime/components/ui/sidebar/SidebarSeparator.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Separator } from '@/components/ui/separator';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<Separator data-slot="sidebar-separator" data-sidebar="separator" :class="cn('bg-sidebar-border mx-2 w-auto', props.class)">
+		<slot />
+	</Separator>
+</template>

package/src/runtime/components/ui/sidebar/SidebarTrigger.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { useSidebar } from './utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+
+const { toggleSidebar, state } = useSidebar();
+</script>
+
+<template>
+	<DynectButton data-sidebar="trigger" data-slot="sidebar-trigger" color="ghost" :icon-only="true" size="sm" :class="cn(props.class)" @click="toggleSidebar">
+		<SvgIconMinimiseSidebar v-if="state === 'expanded'" filled :font-controlled="false" />
+		<SvgIconColapseSidebar v-else filled :font-controlled="false" />
+		<span class="sr-only">Toggle Sidebar</span>
+	</DynectButton>
+</template>

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

@@ -0,0 +1,59 @@
+import type { VariantProps } from 'class-variance-authority';
+import type { HTMLAttributes } from 'vue';
+import { cva } from 'class-variance-authority';
+
+export interface SidebarProps {
+	side?: 'left' | 'right';
+	variant?: 'sidebar' | 'floating' | 'inset';
+	collapsible?: 'offcanvas' | 'icon' | 'none';
+	class?: HTMLAttributes['class'];
+}
+
+export { default as Sidebar } from './Sidebar.vue';
+export { default as SidebarContent } from './SidebarContent.vue';
+export { default as SidebarFooter } from './SidebarFooter.vue';
+export { default as SidebarGroup } from './SidebarGroup.vue';
+export { default as SidebarGroupAction } from './SidebarGroupAction.vue';
+export { default as SidebarGroupContent } from './SidebarGroupContent.vue';
+export { default as SidebarGroupLabel } from './SidebarGroupLabel.vue';
+export { default as SidebarHeader } from './SidebarHeader.vue';
+export { default as SidebarInput } from './SidebarInput.vue';
+export { default as SidebarInset } from './SidebarInset.vue';
+export { default as SidebarMenu } from './SidebarMenu.vue';
+export { default as SidebarMenuAction } from './SidebarMenuAction.vue';
+export { default as SidebarMenuBadge } from './SidebarMenuBadge.vue';
+export { default as SidebarMenuButton } from './SidebarMenuButton.vue';
+export { default as SidebarMenuItem } from './SidebarMenuItem.vue';
+export { default as SidebarMenuSkeleton } from './SidebarMenuSkeleton.vue';
+export { default as SidebarMenuSub } from './SidebarMenuSub.vue';
+export { default as SidebarMenuSubButton } from './SidebarMenuSubButton.vue';
+export { default as SidebarMenuSubItem } from './SidebarMenuSubItem.vue';
+export { default as SidebarProvider } from './SidebarProvider.vue';
+export { default as SidebarRail } from './SidebarRail.vue';
+export { default as SidebarSeparator } from './SidebarSeparator.vue';
+export { default as SidebarTrigger } from './SidebarTrigger.vue';
+
+export { useSidebar } from './utils';
+
+export const sidebarMenuButtonVariants = cva(
+	'peer/menu-button flex w-full items-center mb-1 gap-2 overflow-hidden rounded-md p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[active=true]:bg-bg-dynect-soft dark:data-[active=true]:bg-bg-dynect-soft data-[active=true]:font-medium data-[active=true]:text-text-fg-dynect-strong dark:data-[active=true]:text-text-fg-dynect-strong data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>span]:group-data-[collapsible=icon]:hidden group-data-[collapsible=icon]:justify-center [&>svg]:size-5 [&>svg]:shrsink-0',
+	{
+		variants: {
+			variant: {
+				default: 'text-text-body dark:text-text-body hover:bg-bg-dynect-soft dark:hover:bg-bg-dynect-soft hover:text-text-fg-dynect-strong dark:hover:text-text-fg-dynect-strong',
+				outline: 'bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-bg-dynect-soft dark:hover:bg-bg-dynect-soft hover:text-text-fg-dynect-strong dark:hover:text-text-fg-dynect-strong hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]',
+			},
+			size: {
+				default: 'h-11 text-sm ',
+				sm: 'h-7 text-xs',
+				lg: 'h-14 text-sm',
+			},
+		},
+		defaultVariants: {
+			variant: 'default',
+			size: 'default',
+		},
+	}
+);
+
+export type SidebarMenuButtonVariants = VariantProps<typeof sidebarMenuButtonVariants>;

package/src/runtime/components/ui/sidebar/utils.ts

@@ -0,0 +1,19 @@
+import type { ComputedRef, Ref } from 'vue';
+import { createContext } from 'reka-ui';
+
+export const SIDEBAR_COOKIE_NAME = 'dynect_sidebar';
+export const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
+export const SIDEBAR_WIDTH = '14.688rem';
+export const SIDEBAR_WIDTH_MOBILE = '18rem';
+export const SIDEBAR_WIDTH_ICON = '4rem';
+export const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
+
+export const [useSidebar, provideSidebarContext] = createContext<{
+	state: ComputedRef<'expanded' | 'collapsed'>;
+	open: Ref<boolean>;
+	setOpen: (value: boolean) => void;
+	isMobile: Ref<boolean>;
+	openMobile: Ref<boolean>;
+	setOpenMobile: (value: boolean) => void;
+	toggleSidebar: () => void;
+}>('Sidebar');

package/src/runtime/components/ui/skeleton/Skeleton.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+interface SkeletonProps {
+	class?: HTMLAttributes['class'];
+}
+
+const props = defineProps<SkeletonProps>();
+</script>
+
+<template>
+	<div data-slot="skeleton" :class="cn('bg-primary/10 animate-pulse rounded-md', props.class)" />
+</template>

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

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

package/src/runtime/components/ui/slider/Slider.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import type { SliderRootEmits, SliderRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SliderRange, SliderRoot, SliderThumb, SliderTrack, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<SliderRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<SliderRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<SliderRoot
+		v-slot="{ modelValue }"
+		data-slot="slider"
+		:class="cn('relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col', props.class)"
+		v-bind="forwarded"
+	>
+		<SliderTrack data-slot="slider-track" class="bg-muted relative grow overflow-hidden rounded-full data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5">
+			<SliderRange data-slot="slider-range" class="bg-primary absolute data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full" />
+		</SliderTrack>
+
+		<SliderThumb
+			v-for="(_, key) in modelValue"
+			:key="key"
+			data-slot="slider-thumb"
+			class="border-primary ring-ring/50 block size-4 shrink-0 rounded-full border bg-white shadow-sm transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50"
+		/>
+	</SliderRoot>
+</template>

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

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

package/src/runtime/components/ui/spinner/Spinner.vue

@@ -0,0 +1,13 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { Loader2Icon } from 'lucide-vue-next';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<Loader2Icon role="status" aria-label="Loading" :class="cn('size-4 animate-spin', props.class)" />
+</template>

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

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

package/src/runtime/components/ui/stepper/Stepper.vue

@@ -0,0 +1,20 @@
+<script lang="ts" setup>
+import type { StepperRootEmits, StepperRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperRoot, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<StepperRootProps & { class?: HTMLAttributes['class'] }>();
+const emits = defineEmits<StepperRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<StepperRoot v-slot="slotProps" :class="cn('flex gap-2', props.class)" v-bind="forwarded">
+		<slot v-bind="slotProps" />
+	</StepperRoot>
+</template>

package/src/runtime/components/ui/stepper/StepperDescription.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { StepperDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperDescription, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<StepperDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<StepperDescription v-slot="slotProps" v-bind="forwarded" :class="cn('text-muted-foreground text-xs', props.class)">
+		<slot v-bind="slotProps" />
+	</StepperDescription>
+</template>

package/src/runtime/components/ui/stepper/StepperIndicator.vue

@@ -0,0 +1,34 @@
+<script lang="ts" setup>
+import type { StepperIndicatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperIndicator, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<StepperIndicatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<StepperIndicator
+		v-slot="slotProps"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'text-muted-foreground/50 inline-flex h-8 w-8 items-center justify-center rounded-full',
+				// Disabled
+				'group-data-[disabled]:text-muted-foreground group-data-[disabled]:opacity-50',
+				// Active
+				'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
+				// Completed
+				'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
+				props.class
+			)
+		"
+	>
+		<slot v-bind="slotProps" />
+	</StepperIndicator>
+</template>

package/src/runtime/components/ui/stepper/StepperItem.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { StepperItemProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperItem, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<StepperItemProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<StepperItem v-slot="slotProps" v-bind="forwarded" :class="cn('group flex items-center gap-2 data-[disabled]:pointer-events-none', props.class)">
+		<slot v-bind="slotProps" />
+	</StepperItem>
+</template>

package/src/runtime/components/ui/stepper/StepperSeparator.vue

@@ -0,0 +1,29 @@
+<script lang="ts" setup>
+import type { StepperSeparatorProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperSeparator, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<StepperSeparatorProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<StepperSeparator
+		v-bind="forwarded"
+		:class="
+			cn(
+				'bg-muted',
+				// Disabled
+				'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
+				// Completed
+				'group-data-[state=completed]:bg-accent',
+				props.class
+			)
+		"
+	/>
+</template>

package/src/runtime/components/ui/stepper/StepperTitle.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { StepperTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperTitle, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<StepperTitleProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<StepperTitle v-bind="forwarded" :class="cn('text-md font-semibold whitespace-nowrap', props.class)">
+		<slot />
+	</StepperTitle>
+</template>

package/src/runtime/components/ui/stepper/StepperTrigger.vue

@@ -0,0 +1,19 @@
+<script lang="ts" setup>
+import type { StepperTriggerProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { StepperTrigger, useForwardProps } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<StepperTriggerProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardProps(delegatedProps);
+</script>
+
+<template>
+	<StepperTrigger v-bind="forwarded" :class="cn('flex flex-col items-center gap-1 rounded-md p-1 text-center', props.class)">
+		<slot />
+	</StepperTrigger>
+</template>

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

@@ -0,0 +1,7 @@
+export { default as Stepper } from './Stepper.vue';
+export { default as StepperDescription } from './StepperDescription.vue';
+export { default as StepperIndicator } from './StepperIndicator.vue';
+export { default as StepperItem } from './StepperItem.vue';
+export { default as StepperSeparator } from './StepperSeparator.vue';
+export { default as StepperTitle } from './StepperTitle.vue';
+export { default as StepperTrigger } from './StepperTrigger.vue';

package/src/runtime/components/ui/switch/Switch.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { SwitchRootEmits, SwitchRootProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<SwitchRootProps & { class?: HTMLAttributes['class'] }>();
+
+const emits = defineEmits<SwitchRootEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<SwitchRoot
+		v-slot="slotProps"
+		data-slot="switch"
+		v-bind="forwarded"
+		:class="
+			cn(
+				'peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50',
+				props.class
+			)
+		"
+	>
+		<SwitchThumb
+			data-slot="switch-thumb"
+			:class="cn('bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0')"
+		>
+			<slot name="thumb" v-bind="slotProps" />
+		</SwitchThumb>
+	</SwitchRoot>
+</template>

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

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

package/src/runtime/components/ui/table/Table.vue

@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<div data-slot="table-container" class="relative w-full overflow-auto">
+		<table data-slot="table" :class="cn('w-full caption-bottom text-sm', props.class)">
+			<slot />
+		</table>
+	</div>
+</template>

package/src/runtime/components/ui/table/TableBody.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>
+	<tbody data-slot="table-body" :class="cn(props.class)">
+		<slot />
+	</tbody>
+</template>

package/src/runtime/components/ui/table/TableCaption.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>
+	<caption data-slot="table-caption" :class="cn('text-muted-foreground mt-4 text-sm', props.class)">
+		<slot />
+	</caption>
+</template>

package/src/runtime/components/ui/table/TableCell.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>
+	<td data-slot="table-cell" :class="cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', props.class)">
+		<slot />
+	</td>
+</template>