@3birds/midori-ui 0.0.16 → 0.0.17

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/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.17",
 	"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",