@3birds/midori-ui 0.0.16 → 0.0.18

package/dist/alert.d.ts

@@ -1,6 +1,8 @@
 import type { AlertState, AlertType } from './types';
+declare function close(): void;
 export declare const alert: {
     subscribe: (this: void, run: import("svelte/store").Subscriber<AlertState>, invalidate?: () => void) => import("svelte/store").Unsubscriber;
     trigger: (message: string, type?: AlertType, duration?: number) => void;
-    close: () => void;
+    close: typeof close;
 };
+export {};

package/dist/alert.js

@@ -5,11 +5,18 @@ const INITIAL_STATE = {
     type: 'info',
     duration: 3000
 };
+let timer;
 const { subscribe, set } = writable(INITIAL_STATE);
+function close() {
+    clearTimeout(timer);
+    set(INITIAL_STATE);
+}
 export const alert = {
     subscribe,
     trigger: (message, type = 'info', duration = 3000) => {
+        clearTimeout(timer);
         set({ show: true, message, type, duration });
+        timer = setTimeout(close, duration);
     },
-    close: () => set(INITIAL_STATE)
+    close
 };

package/dist/assets/face-man-white.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <title>face-man</title>
     <path
-      fill="currentColor"
+      fill="#e0f1e8"
       d="M9,11.75A1.25,1.25 0 0,0 7.75,13A1.25,1.25 0 0,0 9,14.25A1.25,1.25 0 0,0 10.25,13A1.25,1.25 0 0,0 9,11.75M15,11.75A1.25,1.25 0 0,0 13.75,13A1.25,1.25 0 0,0 15,14.25A1.25,1.25 0 0,0 16.25,13A1.25,1.25 0 0,0 15,11.75M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,11.71 4,11.42 4.05,11.14C6.41,10.09 8.28,8.16 9.26,5.77C11.07,8.33 14.05,10 17.42,10C18.2,10 18.95,9.91 19.67,9.74C19.88,10.45 20,11.21 20,12C20,16.41 16.41,20 12,20Z"
     />
   </svg>

package/dist/assets/face-man.svg

@@ -1,7 +1,7 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
     <title>face-man</title>
     <path
-      fill="#e0f1e8"
+      fill="currentColor"
       d="M9,11.75A1.25,1.25 0 0,0 7.75,13A1.25,1.25 0 0,0 9,14.25A1.25,1.25 0 0,0 10.25,13A1.25,1.25 0 0,0 9,11.75M15,11.75A1.25,1.25 0 0,0 13.75,13A1.25,1.25 0 0,0 15,14.25A1.25,1.25 0 0,0 16.25,13A1.25,1.25 0 0,0 15,11.75M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20C7.59,20 4,16.41 4,12C4,11.71 4,11.42 4.05,11.14C6.41,10.09 8.28,8.16 9.26,5.77C11.07,8.33 14.05,10 17.42,10C18.2,10 18.95,9.91 19.67,9.74C19.88,10.45 20,11.21 20,12C20,16.41 16.41,20 12,20Z"
     />
   </svg>

package/dist/components/Alert.svelte

@@ -2,7 +2,7 @@
 	import { alert } from '../alert';
 	import { alertSvg, checkCircleSvg, closeCircleSvg, informationSvg } from '@3birds/midori-ui';
 
-	let dialog: HTMLDialogElement | undefined;
+	let popover: HTMLButtonElement | undefined = $state(undefined);
 
 	let color: string = $derived.by(() => {
 		switch ($alert.type) {
@@ -34,29 +34,15 @@
 		}
 	});
 
-	$effect(() => {
-		if ($alert.show) {
-			dialog?.show();
-
-			setInterval(() => dialog?.close(), $alert.duration);
-		} else {
-			dialog?.close();
-		}
-	});
-
-	function handleClose() {
-		alert.close();
-	}
+	$effect(() => ($alert.show ? popover?.showPopover() : popover?.hidePopover()));
 </script>
 
-<dialog
-	bind:this={dialog}
-	onclose={handleClose}
-	onclick={alert.close}
-	class="modal h-0 w-0 bg-transparent"
+<button
+	bind:this={popover}
+	popover="manual"
+	class="alert rounded-3xl {color} fixed top-4 right-4 left-4 {$alert.show ? 'flex' : 'hidden'}"
+	onclick={() => alert.close()}
 >
-	<div class="fixed top-4 modal-box alert rounded-3xl {color} right-4 left-4" role="alert">
-		<img src={icon} alt="アラート" class="size-6" />
-		{$alert.message}
-	</div>
-</dialog>
+	<img src={icon} alt="アラート" class="size-6" />
+	{$alert.message}
+</button>

package/dist/components/Loading.svelte

@@ -1 +1,9 @@
-<span class="loading loading-spinner"></span>
+<script lang="ts">
+	let {
+		class: className
+	}: {
+		class?: string;
+	} = $props();
+</script>
+
+<span class="loading loading-spinner {className}"></span>

package/dist/components/Loading.svelte.d.ts

@@ -1,26 +1,6 @@
-export default Loading;
-type Loading = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
+type $$ComponentProps = {
+    class?: string;
 };
-declare const Loading: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
+declare const Loading: import("svelte").Component<$$ComponentProps, {}, "">;
+type Loading = ReturnType<typeof Loading>;
+export default Loading;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@3birds/midori-ui",
-	"version": "0.0.16",
+	"version": "0.0.18",
 	"type": "module",
 	"scripts": {
 		"dev": "vite dev",
@@ -25,7 +25,12 @@
 		}
 	},
 	"peerDependencies": {
-		"svelte": "^5.0.0"
+		"svelte": "^5.0.0",
+		"@sveltejs/kit": "^2.0.0",
+		"firebase": "^12.0.0",
+		"daisyui": "^5.7.38",
+		"tailwindcss": "^4.3.0",
+		"typescript": "^6.0.3"
 	},
 	"devDependencies": {
 		"@eslint/js": "^10.0.1",