@dynect/base 0.1.0 → 0.2.0

package/src/runtime/components/ui/sheet/SheetContent.vue

@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { X } from 'lucide-vue-next';
+import { DialogClose, DialogContent, DialogPortal, useForwardPropsEmits } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import SheetOverlay from './SheetOverlay.vue';
+
+interface SheetContentProps extends DialogContentProps {
+	class?: HTMLAttributes['class'];
+	side?: 'top' | 'right' | 'bottom' | 'left';
+}
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SheetContentProps>(), {
+	side: 'right',
+});
+const emits = defineEmits<DialogContentEmits>();
+
+const delegatedProps = reactiveOmit(props, 'class', 'side');
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits);
+</script>
+
+<template>
+	<DialogPortal>
+		<SheetOverlay />
+		<DialogContent
+			data-slot="sheet-content"
+			:class="
+				cn(
+					'bg-background data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-50 flex flex-col gap-4 shadow-lg transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
+					side === 'right' && 'data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm',
+					side === 'left' && 'data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm',
+					side === 'top' && 'data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b',
+					side === 'bottom' && 'data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t',
+					props.class
+				)
+			"
+			v-bind="{ ...$attrs, ...forwarded }"
+		>
+			<slot />
+
+			<DialogClose class="ring-offset-background focus:ring-ring data-[state=open]:bg-secondary absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none">
+				<X class="size-4" />
+				<span class="sr-only">Close</span>
+			</DialogClose>
+		</DialogContent>
+	</DialogPortal>
+</template>

package/src/runtime/components/ui/sheet/SheetDescription.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DialogDescriptionProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogDescription } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<DialogDescription data-slot="sheet-description" :class="cn('text-text-body dark:text-text-body text-sm leading-5 font-normal', props.class)" v-bind="delegatedProps">
+		<slot />
+	</DialogDescription>
+</template>

package/src/runtime/components/ui/sheet/SheetFooter.vue

@@ -0,0 +1,12 @@
+<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="sheet-footer" :class="cn('mt-auto flex flex-col gap-2 p-4', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/sheet/SheetHeader.vue

@@ -0,0 +1,12 @@
+<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="sheet-header" :class="cn('flex flex-col gap-1.5 p-4', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/sheet/SheetOverlay.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DialogOverlayProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogOverlay } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<DialogOverlayProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<DialogOverlay data-slot="sheet-overlay" :class="cn('data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-50 bg-black/80', props.class)" v-bind="delegatedProps">
+		<slot />
+	</DialogOverlay>
+</template>

package/src/runtime/components/ui/sheet/SheetTitle.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { DialogTitleProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import { reactiveOmit } from '@vueuse/core';
+import { DialogTitle } from 'reka-ui';
+import { cn } from '@/lib/utils';
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>();
+
+const delegatedProps = reactiveOmit(props, 'class');
+</script>
+
+<template>
+	<DialogTitle data-slot="sheet-title" :class="cn('text-text-heading dark:text-text-heading text-lg leading-7 font-semibold', props.class)" v-bind="delegatedProps">
+		<slot />
+	</DialogTitle>
+</template>

package/src/runtime/components/ui/sheet/SheetTrigger.vue

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

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

@@ -0,0 +1,8 @@
+export { default as Sheet } from './Sheet.vue';
+export { default as SheetClose } from './SheetClose.vue';
+export { default as SheetContent } from './SheetContent.vue';
+export { default as SheetDescription } from './SheetDescription.vue';
+export { default as SheetFooter } from './SheetFooter.vue';
+export { default as SheetHeader } from './SheetHeader.vue';
+export { default as SheetTitle } from './SheetTitle.vue';
+export { default as SheetTrigger } from './SheetTrigger.vue';

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

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { SidebarProps } from '.';
+import { cn } from '@/lib/utils';
+import { Sheet, SheetContent } from '@/components/ui/sheet';
+import SheetDescription from '@/components/ui/sheet/SheetDescription.vue';
+import SheetHeader from '@/components/ui/sheet/SheetHeader.vue';
+import SheetTitle from '@/components/ui/sheet/SheetTitle.vue';
+import { SIDEBAR_WIDTH_MOBILE, useSidebar } from './utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(defineProps<SidebarProps>(), {
+	side: 'left',
+	variant: 'sidebar',
+	collapsible: 'offcanvas',
+});
+
+const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+</script>
+
+<template>
+	<div v-if="collapsible === 'none'" data-slot="sidebar" :class="cn('bg-bg-primary-soft dark:bg-bg-primary-soft text-sidebar-foreground flex h-full w-(--sidebar-width) flex-col', props.class)" v-bind="$attrs">
+		<slot />
+	</div>
+
+	<Sheet v-else-if="isMobile" :open="openMobile" v-bind="$attrs" @update:open="setOpenMobile">
+		<SheetContent
+			data-sidebar="sidebar"
+			data-slot="sidebar"
+			data-mobile="true"
+			:side="side"
+			class="bg-bg-primary-soft dark:bg-bg-primary-soft text-sidebar-foreground w-(--sidebar-width) p-0 [&>button]:hidden"
+			:style="{
+				'--sidebar-width': SIDEBAR_WIDTH_MOBILE,
+			}"
+		>
+			<SheetHeader class="sr-only">
+				<SheetTitle>Sidebar</SheetTitle>
+				<SheetDescription>Displays the mobile sidebar.</SheetDescription>
+			</SheetHeader>
+			<div class="flex h-full w-full flex-col">
+				<slot />
+			</div>
+		</SheetContent>
+	</Sheet>
+
+	<div v-else class="group peer text-sidebar-foreground hidden md:block" data-slot="sidebar" :data-state="state" :data-collapsible="state === 'collapsed' ? collapsible : ''" :data-variant="variant" :data-side="side">
+		<!-- This is what handles the sidebar gap on desktop  -->
+		<div
+			:class="
+				cn(
+					'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
+					'group-data-[collapsible=offcanvas]:w-0',
+					'group-data-[side=right]:rotate-180',
+					variant === 'floating' || variant === 'inset' ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]' : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)'
+				)
+			"
+		/>
+		<div
+			:class="
+				cn(
+					'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex',
+					side === 'left' ? 'left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]' : 'right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]',
+					// Adjust the padding for floating and inset variants.
+					variant === 'floating' || variant === 'inset' ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]' : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
+					props.class
+				)
+			"
+			v-bind="$attrs"
+		>
+			<div data-sidebar="sidebar" class="bg-bg-primary-soft dark:bg-bg-primary-soft group-data-[variant=floating]:border-sidebar-border flex h-full w-full flex-col group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:shadow-sm">
+				<slot />
+			</div>
+		</div>
+	</div>
+</template>

package/src/runtime/components/ui/sidebar/SidebarContent.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 data-slot="sidebar-content" data-sidebar="content" :class="cn('flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/sidebar/SidebarFooter.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 data-slot="sidebar-footer" data-sidebar="footer" :class="cn('flex flex-col gap-2 p-2', props.class)">
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/sidebar/SidebarGroup.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 data-slot="sidebar-group" data-sidebar="group" :class="cn('relative flex w-full min-w-0 flex-col p-2', props.class)">
+		<slot />
+	</div>
+</template>

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

@@ -0,0 +1,31 @@
+<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 = defineProps<
+	PrimitiveProps & {
+		class?: HTMLAttributes['class'];
+	}
+>();
+</script>
+
+<template>
+	<Primitive
+		data-slot="sidebar-group-action"
+		data-sidebar="group-action"
+		:as="as"
+		:as-child="asChild"
+		: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 absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+				'after:absolute after:-inset-2 md:after:hidden',
+				'group-data-[collapsible=icon]:hidden',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</Primitive>
+</template>

package/src/runtime/components/ui/sidebar/SidebarGroupContent.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 data-slot="sidebar-group-content" data-sidebar="group-content" :class="cn('w-full text-sm', props.class)">
+		<slot />
+	</div>
+</template>

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

@@ -0,0 +1,30 @@
+<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 = defineProps<
+	PrimitiveProps & {
+		class?: HTMLAttributes['class'];
+	}
+>();
+</script>
+
+<template>
+	<Primitive
+		data-slot="sidebar-group-label"
+		data-sidebar="group-label"
+		:as="as"
+		:as-child="asChild"
+		:class="
+			cn(
+				'text-sidebar-foreground/70 ring-sidebar-ring flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium outline-hidden transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+				'group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</Primitive>
+</template>

package/src/runtime/components/ui/sidebar/SidebarHeader.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 data-slot="sidebar-header" data-sidebar="header" :class="cn('flex flex-col gap-2 p-2', props.class)">
+		<slot />
+	</div>
+</template>

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

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { cn } from '@/lib/utils';
+import { Input } from '@/components/ui/input';
+
+const props = defineProps<{
+	class?: HTMLAttributes['class'];
+}>();
+</script>
+
+<template>
+	<Input data-slot="sidebar-input" data-sidebar="input" :class="cn('bg-background h-8 w-full shadow-none', props.class)">
+		<slot />
+	</Input>
+</template>

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

@@ -0,0 +1,24 @@
+<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="sidebar-inset"
+		:class="
+			cn(
+				'bg-background relative flex h-screen w-[calc(100%-var(--sidebar-width))] flex-1 flex-col',
+				'md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:w-[calc(100%-var(--sidebar-width)-1rem)] md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm',
+				'md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 md:peer-data-[variant=inset]:peer-data-[state=collapsed]:w-[calc(100%-var(--sidebar-width-icon)-1rem)]',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</div>
+</template>

package/src/runtime/components/ui/sidebar/SidebarMenu.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>
+	<ul data-slot="sidebar-menu" data-sidebar="menu" :class="cn('flex w-full min-w-0 flex-col gap-1', props.class)">
+		<slot />
+	</ul>
+</template>

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

@@ -0,0 +1,41 @@
+<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 & {
+			showOnHover?: boolean;
+			class?: HTMLAttributes['class'];
+		}
+	>(),
+	{
+		as: 'button',
+	}
+);
+</script>
+
+<template>
+	<Primitive
+		data-slot="sidebar-menu-action"
+		data-sidebar="menu-action"
+		: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 peer-hover/menu-button:text-sidebar-accent-foreground absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 outline-hidden transition-transform focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
+				'after:absolute after:-inset-2 md:after:hidden',
+				'peer-data-[size=sm]/menu-button:top-1',
+				'peer-data-[size=default]/menu-button:top-1.5',
+				'peer-data-[size=lg]/menu-button:top-2.5',
+				'group-data-[collapsible=icon]:hidden',
+				showOnHover && 'peer-data-[active=true]/menu-button:text-sidebar-accent-foreground group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-[state=open]:opacity-100 md:opacity-0',
+				props.class
+			)
+		"
+		:as="as"
+		:as-child="asChild"
+	>
+		<slot />
+	</Primitive>
+</template>

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

@@ -0,0 +1,28 @@
+<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="sidebar-menu-badge"
+		data-sidebar="menu-badge"
+		:class="
+			cn(
+				'text-sidebar-foreground pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium tabular-nums select-none',
+				'peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground',
+				'peer-data-[size=sm]/menu-button:top-1',
+				'peer-data-[size=default]/menu-button:top-1.5',
+				'peer-data-[size=lg]/menu-button:top-2.5',
+				'group-data-[collapsible=icon]:hidden',
+				props.class
+			)
+		"
+	>
+		<slot />
+	</div>
+</template>

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

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import type { Component } from 'vue';
+import type { SidebarMenuButtonProps } from './SidebarMenuButtonChild.vue';
+import { reactiveOmit } from '@vueuse/core';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
+import SidebarMenuButtonChild from './SidebarMenuButtonChild.vue';
+import { useSidebar } from './utils';
+
+defineOptions({
+	inheritAttrs: false,
+});
+
+const props = withDefaults(
+	defineProps<
+		SidebarMenuButtonProps & {
+			tooltip?: string | Component;
+		}
+	>(),
+	{
+		as: 'button',
+		variant: 'default',
+		size: 'default',
+	}
+);
+
+const { isMobile, state } = useSidebar();
+
+const delegatedProps = reactiveOmit(props, 'tooltip');
+</script>
+
+<template>
+	<SidebarMenuButtonChild v-if="!tooltip" v-bind="{ ...delegatedProps, ...$attrs }">
+		<slot />
+	</SidebarMenuButtonChild>
+
+	<Tooltip v-else>
+		<TooltipTrigger as-child>
+			<SidebarMenuButtonChild v-bind="{ ...delegatedProps, ...$attrs }">
+				<slot />
+			</SidebarMenuButtonChild>
+		</TooltipTrigger>
+		<TooltipContent side="right" align="center" :hidden="state !== 'collapsed' || isMobile">
+			<template v-if="typeof tooltip === 'string'">
+				{{ tooltip }}
+			</template>
+			<component :is="tooltip" v-else />
+		</TooltipContent>
+	</Tooltip>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { PrimitiveProps } from 'reka-ui';
+import type { HTMLAttributes } from 'vue';
+import type { SidebarMenuButtonVariants } from '.';
+import { Primitive } from 'reka-ui';
+import { cn } from '@/lib/utils';
+import { sidebarMenuButtonVariants } from '.';
+
+export interface SidebarMenuButtonProps extends PrimitiveProps {
+	variant?: SidebarMenuButtonVariants['variant'];
+	size?: SidebarMenuButtonVariants['size'];
+	isActive?: boolean;
+	class?: HTMLAttributes['class'];
+}
+
+const props = withDefaults(defineProps<SidebarMenuButtonProps>(), {
+	as: 'button',
+	variant: 'default',
+	size: 'default',
+});
+</script>
+
+<template>
+	<Primitive data-slot="sidebar-menu-button" data-sidebar="menu-button" :data-size="size" :data-active="isActive" :class="cn(sidebarMenuButtonVariants({ variant, size }), props.class)" :as="as" :as-child="asChild" v-bind="$attrs">
+		<slot />
+	</Primitive>
+</template>

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

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue';
+import { computed } from 'vue';
+import { cn } from '@/lib/utils';
+import { Skeleton } from '@/components/ui/skeleton';
+
+const props = defineProps<{
+	showIcon?: boolean;
+	class?: HTMLAttributes['class'];
+}>();
+
+const width = computed(() => {
+	return `${Math.floor(Math.random() * 40) + 50}%`;
+});
+</script>
+
+<template>
+	<div data-slot="sidebar-menu-skeleton" data-sidebar="menu-skeleton" :class="cn('flex h-8 items-center gap-2 rounded-md px-2', props.class)">
+		<Skeleton v-if="showIcon" class="size-4 rounded-md" data-sidebar="menu-skeleton-icon" />
+
+		<Skeleton class="h-4 max-w-(--skeleton-width) flex-1" data-sidebar="menu-skeleton-text" :style="{ '--skeleton-width': width }" />
+	</div>
+</template>

package/src/runtime/components/ui/sidebar/SidebarMenuSub.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>
+	<ul data-slot="sidebar-menu-sub" data-sidebar="menu-badge" :class="cn('flex min-w-0 translate-x-px flex-col gap-0.5', 'group-data-[collapsible=icon]:hidden', props.class)">
+		<slot />
+	</ul>
+</template>