feat: dropdown and popover (#39)

src/ambient.d.ts

@@ -1,13 +1,21 @@
+//https://github.com/JonasKruckenberg/imagetools/blob/main/packages/core/src/types.ts
+interface Picture {
+	img: {
+		h: number;
+		src: string;
+		w: number;
+	};
+	/**
+	 * Key is format. Value is srcset.
+	 */
+	sources: Record<string, string>;
+}
 declare module '*?enhanced' {
-	import type { Picture } from 'vite-imagetools';
-
 	const value: Picture;
 	export default value;
 }
 
 declare module '*&enhanced' {
-	import type { Picture } from 'vite-imagetools';
-
 	const value: Picture;
 	export default value;
 }

src/lib/componentRegistry.types.ts

@@ -2,7 +2,7 @@
 /**
  * !!!!!!!!!!
  * This file is auto-generated. Do not edit manually
- * Last generated at: 12/13/2024, 1:07:01 PM
+ * Last generated at: 12/13/2024, 8:19:11 PM
  * @version 0.0.1
  * !!!!!!!!!!
  */
@@ -219,6 +219,26 @@ export const OUI_DIRECTORIES = {
 			'dialog-21.svelte'
 		]
 	},
+	DROPDOWNS: {
+		directory: 'dropdowns',
+		components: [
+			'dropdown-01.svelte',
+			'dropdown-02.svelte',
+			'dropdown-03.svelte',
+			'dropdown-04.svelte',
+			'dropdown-05.svelte',
+			'dropdown-06.svelte',
+			'dropdown-07.svelte',
+			'dropdown-08.svelte',
+			'dropdown-09.svelte',
+			'dropdown-10.svelte',
+			'dropdown-11.svelte',
+			'dropdown-12.svelte',
+			'dropdown-13.svelte',
+			'dropdown-14.svelte',
+			'dropdown-15.svelte'
+		]
+	},
 	'HOVER-CARDS': {
 		directory: 'hover-cards',
 		components: ['hover-card-01.svelte', 'hover-card-02.svelte', 'hover-card-03.svelte']
@@ -313,6 +333,20 @@ export const OUI_DIRECTORIES = {
 			'notification-23.svelte'
 		]
 	},
+	POPOVERS: {
+		directory: 'popovers',
+		components: [
+			'popover-01.svelte',
+			'popover-02.svelte',
+			'popover-03.svelte',
+			'popover-04.svelte',
+			'popover-05.svelte',
+			'popover-06.svelte',
+			'popover-07.svelte',
+			'popover-08.svelte',
+			'popover-09.svelte'
+		]
+	},
 	RADIOS: {
 		directory: 'radios',
 		components: [
@@ -440,10 +474,12 @@ export type OUIBannersComponents = (typeof OUI_DIRECTORIES)['BANNERS']['componen
 export type OUIButtonsComponents = (typeof OUI_DIRECTORIES)['BUTTONS']['components'][number];
 export type OUICheckboxesComponents = (typeof OUI_DIRECTORIES)['CHECKBOXES']['components'][number];
 export type OUIDialogsComponents = (typeof OUI_DIRECTORIES)['DIALOGS']['components'][number];
+export type OUIDropdownsComponents = (typeof OUI_DIRECTORIES)['DROPDOWNS']['components'][number];
 export type OUIHovercardsComponents = (typeof OUI_DIRECTORIES)['HOVER-CARDS']['components'][number];
 export type OUIInputsComponents = (typeof OUI_DIRECTORIES)['INPUTS']['components'][number];
 export type OUINotificationsComponents =
 	(typeof OUI_DIRECTORIES)['NOTIFICATIONS']['components'][number];
+export type OUIPopoversComponents = (typeof OUI_DIRECTORIES)['POPOVERS']['components'][number];
 export type OUIRadiosComponents = (typeof OUI_DIRECTORIES)['RADIOS']['components'][number];
 export type OUISlidersComponents = (typeof OUI_DIRECTORIES)['SLIDERS']['components'][number];
 export type OUISwitchesComponents = (typeof OUI_DIRECTORIES)['SWITCHES']['components'][number];
@@ -459,9 +495,11 @@ export type OUIComponent = Prettify<
 	| OUIButtonsComponents
 	| OUICheckboxesComponents
 	| OUIDialogsComponents
+	| OUIDropdownsComponents
 	| OUIHovercardsComponents
 	| OUIInputsComponents
 	| OUINotificationsComponents
+	| OUIPopoversComponents
 	| OUIRadiosComponents
 	| OUISlidersComponents
 	| OUISwitchesComponents
@@ -478,9 +516,11 @@ export interface OUIDirectoryToComponent {
 	buttons: OUIButtonsComponents;
 	checkboxes: OUICheckboxesComponents;
 	dialogs: OUIDialogsComponents;
+	dropdowns: OUIDropdownsComponents;
 	'hover-cards': OUIHovercardsComponents;
 	inputs: OUIInputsComponents;
 	notifications: OUINotificationsComponents;
+	popovers: OUIPopoversComponents;
 	radios: OUIRadiosComponents;
 	sliders: OUISlidersComponents;
 	switches: OUISwitchesComponents;

src/lib/components/avatars/avatar-11.svelte

@@ -1,28 +1,35 @@
+<script lang="ts">
+	import AvatarImg01 from '$assets/avatar-80-03.jpg?w=40&h=40&enhanced';
+	import AvatarImg02 from '$assets/avatar-80-05.jpg?w=40&h=40&enhanced';
+	import AvatarImg03 from '$assets/avatar-80-06.jpg?w=40&h=40&enhanced';
+	import AvatarImg04 from '$assets/avatar-80-07.jpg?w=40&h=40&enhanced';
+</script>
+
 <div class="flex -space-x-1.5">
 	<enhanced:img
 		class="size-5 rounded-full ring-1 ring-background"
-		src="/static/avatar-80-01.jpg"
+		src={AvatarImg01}
 		alt="Avatar 01"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-5 rounded-full ring-1 ring-background"
-		src="/static/avatar-80-02.jpg"
+		src={AvatarImg02}
 		alt="Avatar 02"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-5 rounded-full ring-1 ring-background"
-		src="/static/avatar-80-03.jpg"
+		src={AvatarImg03}
 		alt="Avatar 03"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-5 rounded-full ring-1 ring-background"
-		src="/static/avatar-80-04.jpg"
+		src={AvatarImg04}
 		alt="Avatar 04"
 		loading="lazy"
 		decoding="async"

src/lib/components/avatars/avatar-12.svelte

@@ -1,28 +1,35 @@
+<script lang="ts">
+	import AvatarImg01 from '$assets/avatar-80-03.jpg?w=48&h=48&enhanced';
+	import AvatarImg02 from '$assets/avatar-80-05.jpg?w=48&h=48&enhanced';
+	import AvatarImg03 from '$assets/avatar-80-06.jpg?w=48&h=48&enhanced';
+	import AvatarImg04 from '$assets/avatar-80-07.jpg?w=48&h=48&enhanced';
+</script>
+
 <div class="flex -space-x-[0.45rem]">
 	<enhanced:img
 		class="size-6 rounded-full ring-1 ring-background"
-		src="/static/avatar-80-03.jpg"
+		src={AvatarImg01}
 		alt="Avatar 01"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-6 rounded-full ring-1 ring-background"
-		src="/static/avatar-80-05.jpg"
+		src={AvatarImg02}
 		alt="Avatar 02"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-6 rounded-full ring-1 ring-background"
-		src="/static/avatar-80-06.jpg"
+		src={AvatarImg03}
 		alt="Avatar 03"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-6 rounded-full ring-1 ring-background"
-		src="/static/avatar-80-07.jpg"
+		src={AvatarImg04}
 		alt="Avatar 04"
 		loading="lazy"
 		decoding="async"

src/lib/components/avatars/avatar-13.svelte

@@ -1,28 +1,35 @@
+<script lang="ts">
+	import AvatarImg01 from '$assets/avatar-80-03.jpg?w=56&h=56&enhanced';
+	import AvatarImg02 from '$assets/avatar-80-05.jpg?w=56&h=56&enhanced';
+	import AvatarImg03 from '$assets/avatar-80-06.jpg?w=56&h=56&enhanced';
+	import AvatarImg04 from '$assets/avatar-80-07.jpg?w=56&h=56&enhanced';
+</script>
+
 <div class="flex -space-x-[0.525rem]">
 	<enhanced:img
 		class="size-7 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-03.jpg"
+		src={AvatarImg01}
 		alt="Avatar 01"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-7 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-05.jpg"
+		src={AvatarImg02}
 		alt="Avatar 02"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-7 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-06.jpg"
+		src={AvatarImg03}
 		alt="Avatar 03"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-7 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-07.jpg"
+		src={AvatarImg04}
 		alt="Avatar 04"
 		loading="lazy"
 		decoding="async"

src/lib/components/avatars/avatar-14.svelte

@@ -1,28 +1,35 @@
+<script lang="ts">
+	import AvatarImg01 from '$assets/avatar-80-03.jpg?w=64&h=64&enhanced';
+	import AvatarImg02 from '$assets/avatar-80-05.jpg?w=64&h=64&enhanced';
+	import AvatarImg03 from '$assets/avatar-80-06.jpg?w=64&h=64&enhanced';
+	import AvatarImg04 from '$assets/avatar-80-07.jpg?w=64&h=64&enhanced';
+</script>
+
 <div class="flex -space-x-[0.6rem]">
 	<enhanced:img
 		class="size-8 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-03.jpg"
+		src={AvatarImg01}
 		alt="Avatar 01"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-8 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-05.jpg"
+		src={AvatarImg02}
 		alt="Avatar 02"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-8 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-06.jpg"
+		src={AvatarImg03}
 		alt="Avatar 03"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-8 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-07.jpg"
+		src={AvatarImg04}
 		alt="Avatar 04"
 		loading="lazy"
 		decoding="async"

src/lib/components/avatars/avatar-15.svelte

@@ -1,28 +1,35 @@
+<script lang="ts">
+	import AvatarImg01 from '$assets/avatar-80-03.jpg?w=72&h=72&enhanced';
+	import AvatarImg02 from '$assets/avatar-80-05.jpg?w=72&h=72&enhanced';
+	import AvatarImg03 from '$assets/avatar-80-06.jpg?w=72&h=72&enhanced';
+	import AvatarImg04 from '$assets/avatar-80-07.jpg?w=72&h=72&enhanced';
+</script>
+
 <div class="flex -space-x-[0.675rem]">
 	<enhanced:img
 		class="size-9 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-03.jpg"
+		src={AvatarImg01}
 		alt="Avatar 01"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-9 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-05.jpg"
+		src={AvatarImg02}
 		alt="Avatar 02"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-9 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-06.jpg"
+		src={AvatarImg03}
 		alt="Avatar 03"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-9 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-07.jpg"
+		src={AvatarImg04}
 		alt="Avatar 04"
 		loading="lazy"
 		decoding="async"

src/lib/components/avatars/avatar-16.svelte

@@ -1,28 +1,35 @@
+<script lang="ts">
+	import AvatarImg01 from '$assets/avatar-80-03.jpg?w=80&h=80&enhanced';
+	import AvatarImg02 from '$assets/avatar-80-05.jpg?w=80&h=80&enhanced';
+	import AvatarImg03 from '$assets/avatar-80-06.jpg?w=80&h=80&enhanced';
+	import AvatarImg04 from '$assets/avatar-80-07.jpg?w=80&h=80&enhanced';
+</script>
+
 <div class="flex -space-x-3">
 	<enhanced:img
 		class="size-10 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-03.jpg"
+		src={AvatarImg01}
 		alt="Avatar 01"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-10 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-05.jpg"
+		src={AvatarImg02}
 		alt="Avatar 02"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-10 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-06.jpg"
+		src={AvatarImg03}
 		alt="Avatar 03"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-10 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-07.jpg"
+		src={AvatarImg04}
 		alt="Avatar 04"
 		loading="lazy"
 		decoding="async"

src/lib/components/avatars/avatar-17.svelte

@@ -1,28 +1,35 @@
+<script lang="ts">
+	import AvatarImg01 from '$assets/avatar-80-03.jpg?w=96&h=96&enhanced';
+	import AvatarImg02 from '$assets/avatar-80-05.jpg?w=96&h=96&enhanced';
+	import AvatarImg03 from '$assets/avatar-80-06.jpg?w=96&h=96&enhanced';
+	import AvatarImg04 from '$assets/avatar-80-07.jpg?w=96&h=96&enhanced';
+</script>
+
 <div class="flex -space-x-[0.9rem]">
 	<enhanced:img
 		class="size-12 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-03.jpg"
+		src={AvatarImg01}
 		alt="Avatar 01"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-12 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-05.jpg"
+		src={AvatarImg02}
 		alt="Avatar 02"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-12 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-06.jpg"
+		src={AvatarImg03}
 		alt="Avatar 03"
 		loading="lazy"
 		decoding="async"
 	/>
 	<enhanced:img
 		class="size-12 rounded-full ring-2 ring-background"
-		src="/static/avatar-80-07.jpg"
+		src={AvatarImg04}
 		alt="Avatar 04"
 		loading="lazy"
 		decoding="async"