diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index c4810f1..165c468 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -38,13 +38,13 @@ importers: version: 5.0.3 '@poppanator/sveltekit-svg': specifier: 4.2.1 - version: 4.2.1(svelte@4.2.18)(svgo@3.3.2)(vite@5.3.4) + version: 4.2.1(rollup@4.19.0)(svelte@4.2.18)(svgo@3.3.2)(vite@5.3.4) '@sveltejs/adapter-static': specifier: ^3.0.2 - version: 3.0.2(@sveltejs/kit@2.5.18) + version: 3.0.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.4))(svelte@4.2.18)(vite@5.3.4)) '@sveltejs/kit': specifier: ^2.5.18 - version: 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1)(svelte@4.2.18)(vite@5.3.4) + version: 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.4))(svelte@4.2.18)(vite@5.3.4) '@sveltejs/vite-plugin-svelte': specifier: ^3.1.1 version: 3.1.1(svelte@4.2.18)(vite@5.3.4) @@ -71,7 +71,7 @@ importers: version: 3.2.6(prettier@3.3.3)(svelte@4.2.18) prettier-plugin-tailwindcss: specifier: ^0.6.5 - version: 0.6.5(prettier-plugin-svelte@3.2.6)(prettier@3.3.3) + version: 0.6.5(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3) shiki: specifier: ^1.10.3 version: 1.11.1 @@ -80,7 +80,7 @@ importers: version: 4.2.18 svelte-check: specifier: ^3.8.4 - version: 3.8.4(postcss@8.4.40)(svelte@4.2.18) + version: 3.8.4(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.18) svelte-exmarkdown: specifier: ^3.0.5 version: 3.0.5(svelte@4.2.18) @@ -1738,20 +1738,22 @@ snapshots: '@polka/url@1.0.0-next.25': {} - '@poppanator/sveltekit-svg@4.2.1(svelte@4.2.18)(svgo@3.3.2)(vite@5.3.4)': + '@poppanator/sveltekit-svg@4.2.1(rollup@4.19.0)(svelte@4.2.18)(svgo@3.3.2)(vite@5.3.4)': dependencies: - '@rollup/pluginutils': 5.1.0 + '@rollup/pluginutils': 5.1.0(rollup@4.19.0) svelte: 4.2.18 svgo: 3.3.2 vite: 5.3.4 transitivePeerDependencies: - rollup - '@rollup/pluginutils@5.1.0': + '@rollup/pluginutils@5.1.0(rollup@4.19.0)': dependencies: '@types/estree': 1.0.5 estree-walker: 2.0.2 picomatch: 2.3.1 + optionalDependencies: + rollup: 4.19.0 '@rollup/rollup-android-arm-eabi@4.19.0': optional: true @@ -1805,11 +1807,11 @@ snapshots: dependencies: '@types/hast': 3.0.4 - '@sveltejs/adapter-static@3.0.2(@sveltejs/kit@2.5.18)': + '@sveltejs/adapter-static@3.0.2(@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.4))(svelte@4.2.18)(vite@5.3.4))': dependencies: - '@sveltejs/kit': 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1)(svelte@4.2.18)(vite@5.3.4) + '@sveltejs/kit': 2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.4))(svelte@4.2.18)(vite@5.3.4) - '@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1)(svelte@4.2.18)(vite@5.3.4)': + '@sveltejs/kit@2.5.18(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.4))(svelte@4.2.18)(vite@5.3.4)': dependencies: '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.4) '@types/cookie': 0.6.0 @@ -1827,7 +1829,7 @@ snapshots: tiny-glob: 0.2.9 vite: 5.3.4 - '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1)(svelte@4.2.18)(vite@5.3.4)': + '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.4))(svelte@4.2.18)(vite@5.3.4)': dependencies: '@sveltejs/vite-plugin-svelte': 3.1.1(svelte@4.2.18)(vite@5.3.4) debug: 4.3.5 @@ -1838,7 +1840,7 @@ snapshots: '@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.4)': dependencies: - '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1)(svelte@4.2.18)(vite@5.3.4) + '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.1(svelte@4.2.18)(vite@5.3.4))(svelte@4.2.18)(vite@5.3.4) debug: 4.3.5 deepmerge: 4.3.1 kleur: 4.1.5 @@ -2694,8 +2696,9 @@ snapshots: postcss-load-config@4.0.2(postcss@8.4.40): dependencies: lilconfig: 3.1.2 - postcss: 8.4.40 yaml: 2.5.0 + optionalDependencies: + postcss: 8.4.40 postcss-nested@6.2.0(postcss@8.4.40): dependencies: @@ -2725,9 +2728,10 @@ snapshots: prettier: 3.3.3 svelte: 4.2.18 - prettier-plugin-tailwindcss@0.6.5(prettier-plugin-svelte@3.2.6)(prettier@3.3.3): + prettier-plugin-tailwindcss@0.6.5(prettier-plugin-svelte@3.2.6(prettier@3.3.3)(svelte@4.2.18))(prettier@3.3.3): dependencies: prettier: 3.3.3 + optionalDependencies: prettier-plugin-svelte: 3.2.6(prettier@3.3.3)(svelte@4.2.18) prettier@3.3.3: {} @@ -2899,14 +2903,14 @@ snapshots: supports-preserve-symlinks-flag@1.0.0: {} - svelte-check@3.8.4(postcss@8.4.40)(svelte@4.2.18): + svelte-check@3.8.4(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.18): dependencies: '@jridgewell/trace-mapping': 0.3.25 chokidar: 3.6.0 picocolors: 1.0.1 sade: 1.8.1 svelte: 4.2.18 - svelte-preprocess: 5.1.4(postcss@8.4.40)(svelte@4.2.18)(typescript@5.5.4) + svelte-preprocess: 5.1.4(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.18)(typescript@5.5.4) typescript: 5.5.4 transitivePeerDependencies: - '@babel/core' @@ -2947,15 +2951,17 @@ snapshots: transitivePeerDependencies: - typescript - svelte-preprocess@5.1.4(postcss@8.4.40)(svelte@4.2.18)(typescript@5.5.4): + svelte-preprocess@5.1.4(postcss-load-config@4.0.2(postcss@8.4.40))(postcss@8.4.40)(svelte@4.2.18)(typescript@5.5.4): dependencies: '@types/pug': 2.0.10 detect-indent: 6.1.0 magic-string: 0.30.10 - postcss: 8.4.40 sorcery: 0.11.1 strip-indent: 3.0.0 svelte: 4.2.18 + optionalDependencies: + postcss: 8.4.40 + postcss-load-config: 4.0.2(postcss@8.4.40) typescript: 5.5.4 svelte@4.2.18: @@ -3116,7 +3122,7 @@ snapshots: fsevents: 2.3.3 vitefu@0.2.5(vite@5.3.4): - dependencies: + optionalDependencies: vite: 5.3.4 which@2.0.2: @@ -3139,4 +3145,4 @@ snapshots: yaml@2.5.0: {} - zwitch@2.0.4: {} \ No newline at end of file + zwitch@2.0.4: {} diff --git a/src/lib/assets/icons/accessibility.svg b/src/lib/assets/icons/accessibility.svg new file mode 100644 index 0000000..7007a6f --- /dev/null +++ b/src/lib/assets/icons/accessibility.svg @@ -0,0 +1,4 @@ + + + + \ No newline at end of file diff --git a/src/lib/assets/icons/index.ts b/src/lib/assets/icons/index.ts index 99bc2f0..4e0659b 100644 --- a/src/lib/assets/icons/index.ts +++ b/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, diff --git a/src/lib/assets/icons/more-horizontal.svg b/src/lib/assets/icons/more-horizontal.svg new file mode 100644 index 0000000..42d4206 --- /dev/null +++ b/src/lib/assets/icons/more-horizontal.svg @@ -0,0 +1,3 @@ + + + \ No newline at end of file diff --git a/src/lib/components/shared/demo.svelte b/src/lib/components/shared/demo.svelte index 1c77807..2c040bb 100644 --- a/src/lib/components/shared/demo.svelte +++ b/src/lib/components/shared/demo.svelte @@ -63,7 +63,7 @@ {#if subtitle}

diff --git a/src/lib/components/ui/avatar/index.ts b/src/lib/components/ui/avatar/index.ts index 025d1ed..1e0722b 100644 --- a/src/lib/components/ui/avatar/index.ts +++ b/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 +}; diff --git a/src/lib/components/ui/button/index.ts b/src/lib/components/ui/button/index.ts index c0672ab..a68166d 100644 --- a/src/lib/components/ui/button/index.ts +++ b/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]' diff --git a/src/lib/components/ui/menu/index.ts b/src/lib/components/ui/menu/index.ts new file mode 100644 index 0000000..8da0551 --- /dev/null +++ b/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 +}; diff --git a/src/lib/components/ui/menu/menu-checkbox-item.svelte b/src/lib/components/ui/menu/menu-checkbox-item.svelte new file mode 100644 index 0000000..a6fe41e --- /dev/null +++ b/src/lib/components/ui/menu/menu-checkbox-item.svelte @@ -0,0 +1,35 @@ + + + + + + + + + + diff --git a/src/lib/components/ui/menu/menu-content.svelte b/src/lib/components/ui/menu/menu-content.svelte new file mode 100644 index 0000000..dc9d190 --- /dev/null +++ b/src/lib/components/ui/menu/menu-content.svelte @@ -0,0 +1,27 @@ + + + + + diff --git a/src/lib/components/ui/menu/menu-item.svelte b/src/lib/components/ui/menu/menu-item.svelte new file mode 100644 index 0000000..66808c4 --- /dev/null +++ b/src/lib/components/ui/menu/menu-item.svelte @@ -0,0 +1,47 @@ + + + + {#if affix} + diff --git a/src/lib/components/ui/menu/menu-label.svelte b/src/lib/components/ui/menu/menu-label.svelte new file mode 100644 index 0000000..5a258d2 --- /dev/null +++ b/src/lib/components/ui/menu/menu-label.svelte @@ -0,0 +1,19 @@ + + + + + diff --git a/src/lib/components/ui/menu/menu-radio-group.svelte b/src/lib/components/ui/menu/menu-radio-group.svelte new file mode 100644 index 0000000..6ff9aee --- /dev/null +++ b/src/lib/components/ui/menu/menu-radio-group.svelte @@ -0,0 +1,11 @@ + + + + + diff --git a/src/lib/components/ui/menu/menu-radio-item.svelte b/src/lib/components/ui/menu/menu-radio-item.svelte new file mode 100644 index 0000000..dcadc29 --- /dev/null +++ b/src/lib/components/ui/menu/menu-radio-item.svelte @@ -0,0 +1,35 @@ + + + + + + + + + + diff --git a/src/lib/components/ui/menu/menu-separator.svelte b/src/lib/components/ui/menu/menu-separator.svelte new file mode 100644 index 0000000..267ed7e --- /dev/null +++ b/src/lib/components/ui/menu/menu-separator.svelte @@ -0,0 +1,11 @@ + + + diff --git a/src/lib/components/ui/menu/menu-shortcut.svelte b/src/lib/components/ui/menu/menu-shortcut.svelte new file mode 100644 index 0000000..0ae739c --- /dev/null +++ b/src/lib/components/ui/menu/menu-shortcut.svelte @@ -0,0 +1,13 @@ + + + + + diff --git a/src/lib/components/ui/menu/menu-sub-content.svelte b/src/lib/components/ui/menu/menu-sub-content.svelte new file mode 100644 index 0000000..90a80f2 --- /dev/null +++ b/src/lib/components/ui/menu/menu-sub-content.svelte @@ -0,0 +1,30 @@ + + + + + diff --git a/src/lib/components/ui/menu/menu-sub-trigger.svelte b/src/lib/components/ui/menu/menu-sub-trigger.svelte new file mode 100644 index 0000000..d4e7cc4 --- /dev/null +++ b/src/lib/components/ui/menu/menu-sub-trigger.svelte @@ -0,0 +1,32 @@ + + + + + + diff --git a/src/lib/config/sitemap.ts b/src/lib/config/sitemap.ts index b708bb0..c20866d 100644 --- a/src/lib/config/sitemap.ts +++ b/src/lib/config/sitemap.ts @@ -160,7 +160,7 @@ export const aside_items: Aside = { { title: 'Menu', href: '/menu', - status: 'soon' + status: 'new' }, { title: 'Modal', diff --git a/src/routes/menu/+page.svelte b/src/routes/menu/+page.svelte index 3039020..0aed015 100644 --- a/src/routes/menu/+page.svelte +++ b/src/routes/menu/+page.svelte @@ -1 +1,56 @@ -

menu

+ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/routes/menu/+page.ts b/src/routes/menu/+page.ts new file mode 100644 index 0000000..262d1be --- /dev/null +++ b/src/routes/menu/+page.ts @@ -0,0 +1,22 @@ +import type { MetaTagsProps } from 'svelte-meta-tags'; + +export function load() { + const title = 'Menu'; + const description = + 'Dropdown menu opened via button. Supports typeahead and keyboard navigation.'; + + const pageMetaTags = Object.freeze({ + title, + description, + openGraph: { + title, + description + } + }) satisfies MetaTagsProps; + + return { + pageMetaTags, + title, + description + }; +} diff --git a/src/routes/menu/affix-and-suffix.svelte b/src/routes/menu/affix-and-suffix.svelte new file mode 100644 index 0000000..60d423a --- /dev/null +++ b/src/routes/menu/affix-and-suffix.svelte @@ -0,0 +1,51 @@ + + +
+ + + + + + + Left + Center + Right + + + + + + + + + + + Left + Center + Right + + + +
diff --git a/src/routes/menu/custom-trigger.svelte b/src/routes/menu/custom-trigger.svelte new file mode 100644 index 0000000..47525ca --- /dev/null +++ b/src/routes/menu/custom-trigger.svelte @@ -0,0 +1,20 @@ + + + + + + + M + + + + + One + Two + Three + + + diff --git a/src/routes/menu/default.svelte b/src/routes/menu/default.svelte new file mode 100644 index 0000000..df58a41 --- /dev/null +++ b/src/routes/menu/default.svelte @@ -0,0 +1,18 @@ + + + + + + + + + One + Two + Three + Error + + + diff --git a/src/routes/menu/disabled-items.svelte b/src/routes/menu/disabled-items.svelte new file mode 100644 index 0000000..7244333 --- /dev/null +++ b/src/routes/menu/disabled-items.svelte @@ -0,0 +1,18 @@ + + + + + + + + + One + Two + Three + Error + + + diff --git a/src/routes/menu/link-items.svelte b/src/routes/menu/link-items.svelte new file mode 100644 index 0000000..2e597d9 --- /dev/null +++ b/src/routes/menu/link-items.svelte @@ -0,0 +1,17 @@ + + + + + + + + + One + Two + Three + + + diff --git a/src/routes/menu/menu-position.svelte b/src/routes/menu/menu-position.svelte new file mode 100644 index 0000000..2f4d173 --- /dev/null +++ b/src/routes/menu/menu-position.svelte @@ -0,0 +1,16 @@ + + + + + + + + + One + Two + + +