component: Menu (#29)

Co-authored-by: Davis SHYAKA <87414827+davis-shyaka@users.noreply.github.com>

src/lib/assets/icons/index.ts

@@ -1,3 +1,4 @@
+import Accessibility from './accessibility.svg?component';
 import ArrowCircleUp from './arrow-circle-up.svg?component';
 import ArrowLeft from './arrow-left.svg?component';
 import ArrowRight from './arrow-right.svg?component';
@@ -42,6 +43,7 @@ import LogoVercelCircle from './logo-vercel-circle.svg?component';
 import LogoVercel from './logo-vercel.svg?component';
 import MagnifyingGlass from './magnifying-glass.svg?component';
 import Minus from './minus.svg?component';
+import MoreHorizontal from './more-horizontal.svg?component';
 import Notification from './notification.svg?component';
 import Paperclip from './paperclip.svg?component';
 import PencilEdit from './pencil-edit.svg?component';
@@ -56,6 +58,7 @@ import ThemeSwitchLight from './theme-switch-light.svg?component';
 import ThemeSwitchSystem from './theme-switch-system.svg?component';
 
 export const Icons = {
+	Accessibility,
 	ArrowCircleUp,
 	ArrowLeft,
 	ArrowRight,
@@ -100,6 +103,7 @@ export const Icons = {
 	LogoVercel,
 	MagnifyingGlass,
 	Minus,
+	MoreHorizontal,
 	Notification,
 	Paperclip,
 	PencilEdit,

src/lib/components/shared/demo.svelte

@@ -63,7 +63,7 @@
 	</a>
 	{#if subtitle}
 		<p
-			class="prose prose-neutral mt-2 max-w-none text-gray-900 dark:prose-invert marker:content-['-'] prose-strong:font-normal prose-strong:text-gray-1000 xl:mt-4"
+			class="prose prose-neutral mt-2 max-w-none text-gray-900 transition-colors dark:prose-invert marker:content-['-'] prose-a:text-gray-900 prose-a:hover:text-gray-1000 prose-strong:font-normal prose-strong:text-gray-1000 xl:mt-4"
 		>
 			<Markdown md={subtitle} />
 			<slot name="image"></slot>

src/lib/components/ui/avatar/index.ts

@@ -3,4 +3,13 @@ import Group from './avatar-group.svelte';
 import Image from './avatar-image.svelte';
 import Root from './avatar.svelte';
 
-export { Root as Avatar, Fallback as AvatarFallback, Group as AvatarGroup, Image as AvatarImage };
+export {
+	Root as Avatar,
+	Fallback as AvatarFallback,
+	Group as AvatarGroup,
+	Image as AvatarImage,
+	Fallback,
+	Group,
+	Image,
+	Root
+};

src/lib/components/ui/button/index.ts

@@ -8,8 +8,7 @@ const button_variants = tv({
 	variants: {
 		variant: {
 			default: 'bg-gray-1000 text-background-100',
-			secondary:
-				'border border-gray-alpha-400 bg-background-100 text-gray-1000 hover:bg-gray-alpha-100',
+			secondary: 'bg-background-100 text-gray-1000 shadow-shadow-border hover:bg-gray-alpha-100',
 			tertiary: 'bg-transparent hover:bg-gray-alpha-200',
 			error: 'bg-red-800 text-contrast-fg hover:bg-red-900',
 			warning: 'active:bg-[#a35200; bg-amber-800 text-[#0a0a0a] hover:bg-[#d27504]'

src/lib/components/ui/menu/index.ts

@@ -0,0 +1,47 @@
+import { DropdownMenu as MenuPrimitive } from 'bits-ui';
+import CheckboxItem from './menu-checkbox-item.svelte';
+import Content from './menu-content.svelte';
+import Item from './menu-item.svelte';
+import Label from './menu-label.svelte';
+import RadioGroup from './menu-radio-group.svelte';
+import RadioItem from './menu-radio-item.svelte';
+import Separator from './menu-separator.svelte';
+import Shortcut from './menu-shortcut.svelte';
+import SubContent from './menu-sub-content.svelte';
+import SubTrigger from './menu-sub-trigger.svelte';
+
+const Sub = MenuPrimitive.Sub;
+const Root = MenuPrimitive.Root;
+const Trigger = MenuPrimitive.Trigger;
+const Group = MenuPrimitive.Group;
+
+export {
+	CheckboxItem,
+	Content,
+	Group,
+	Item,
+	Label,
+	Root as Menu,
+	CheckboxItem as MenuCheckboxItem,
+	Content as MenuContent,
+	Group as MenuGroup,
+	Item as MenuItem,
+	Label as MenuLabel,
+	RadioGroup as MenuRadioGroup,
+	RadioItem as MenuRadioItem,
+	Separator as MenuSeparator,
+	Shortcut as MenuShortcut,
+	Sub as MenuSub,
+	SubContent as MenuSubContent,
+	SubTrigger as MenuSubTrigger,
+	Trigger as MenuTrigger,
+	RadioGroup,
+	RadioItem,
+	Root,
+	Separator,
+	Shortcut,
+	Sub,
+	SubContent,
+	SubTrigger,
+	Trigger
+};

src/lib/components/ui/menu/menu-checkbox-item.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+	import { Icons } from '$lib/assets/icons';
+	import { cn } from '$lib/utils.js';
+	import { DropdownMenu as MenuPrimitive } from 'bits-ui';
+
+	type $$Props = MenuPrimitive.CheckboxItemProps;
+	type $$Events = MenuPrimitive.CheckboxItemEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let checked: $$Props['checked'] = undefined;
+	export { className as class };
+</script>
+
+<MenuPrimitive.CheckboxItem
+	bind:checked
+	class={cn(
+		'relative flex h-10 cursor-pointer select-none items-center rounded-md pl-8 pr-2 text-sm outline-none data-[disabled]:cursor-default data-[highlighted]:bg-gray-200 data-[disabled]:text-gray-700',
+		className
+	)}
+	{...$$restProps}
+	on:click
+	on:keydown
+	on:focusin
+	on:focusout
+	on:pointerdown
+	on:pointerleave
+	on:pointermove
+>
+	<span class="absolute left-2 flex size-3.5 items-center justify-center">
+		<MenuPrimitive.CheckboxIndicator>
+			<Icons.Check class="size-3" />
+		</MenuPrimitive.CheckboxIndicator>
+	</span>
+	<slot />
+</MenuPrimitive.CheckboxItem>

src/lib/components/ui/menu/menu-content.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+	import { cn, flyAndScale } from '$lib/utils.js';
+	import { DropdownMenu as MenuPrimitive } from 'bits-ui';
+
+	type $$Props = MenuPrimitive.ContentProps;
+	type $$Events = MenuPrimitive.ContentEvents;
+
+	let className: $$Props['class'] = undefined;
+	export let sideOffset: $$Props['sideOffset'] = 4;
+	export let transition: $$Props['transition'] = flyAndScale;
+	export let transitionConfig: $$Props['transitionConfig'] = undefined;
+	export { className as class };
+</script>
+
+<MenuPrimitive.Content
+	{transition}
+	{transitionConfig}
+	{sideOffset}
+	class={cn(
+		'z-50 min-w-[10rem] rounded-xl bg-background-100 p-2 text-gray-1000 shadow-shadow-menu focus:outline-none',
+		className
+	)}
+	{...$$restProps}
+	on:keydown
+>
+	<slot />
+</MenuPrimitive.Content>