@14ch/svelte-ui 0.0.11 → 0.0.13

package/dist/components/Snackbar.svelte

@@ -8,6 +8,15 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type SnackbarProps = {
+		// スタイル/レイアウト
+		position?: 'top' | 'bottom';
+		maxVisible?: number;
+		variant?: 'filled' | 'outlined';
+
+		// 状態/動作
+		duration?: number;
+	};
 
 	let {
 		// スタイル/レイアウト
@@ -17,15 +26,7 @@
 
 		// 状態/動作
 		duration = 3000
-	}: {
-		// スタイル/レイアウト
-		position?: 'top' | 'bottom';
-		maxVisible?: number;
-		variant?: 'filled' | 'outlined';
-
-		// 状態/動作
-		duration?: number;
-	} = $props();
+	}: SnackbarProps = $props();
 
 	// =========================================================================
 	// Lifecycle

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

@@ -1,9 +1,9 @@
-type $$ComponentProps = {
+export type SnackbarProps = {
     position?: 'top' | 'bottom';
     maxVisible?: number;
     variant?: 'filled' | 'outlined';
     duration?: number;
 };
-declare const Snackbar: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Snackbar: import("svelte").Component<SnackbarProps, {}, "">;
 type Snackbar = ReturnType<typeof Snackbar>;
 export default Snackbar;

package/dist/components/SnackbarItem.svelte

@@ -12,6 +12,33 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type SnackbarItemProps = {
+		// Snippet
+		children?: Snippet;
+
+		// 基本プロパティ
+		message?: string;
+		type?: 'info' | 'success' | 'warning' | 'error' | 'default';
+		actionLabel?: string;
+
+		// HTML属性系
+		id: string;
+
+		// スタイル/レイアウト
+		variant?: 'filled' | 'outlined';
+		position?: 'top' | 'bottom';
+		color?: string;
+		textColor?: string;
+
+		// 状態/動作
+		duration?: number;
+		closable?: boolean;
+		closeButtonAriaLabel?: string;
+		iconVariant?: IconVariant;
+
+		// イベントハンドラー
+		onAction?: () => void;
+	};
 
 	let {
 		// Snippet
@@ -39,33 +66,7 @@
 
 		// イベントハンドラー
 		onAction
-	}: {
-		// Snippet
-		children?: Snippet;
-
-		// 基本プロパティ
-		message?: string;
-		type?: 'info' | 'success' | 'warning' | 'error' | 'default';
-		actionLabel?: string;
-
-		// HTML属性系
-		id: string;
-
-		// スタイル/レイアウト
-		variant?: 'filled' | 'outlined';
-		position?: 'top' | 'bottom';
-		color?: string;
-		textColor?: string;
-
-		// 状態/動作
-		duration?: number;
-		closable?: boolean;
-		closeButtonAriaLabel?: string;
-		iconVariant?: IconVariant;
-
-		// イベントハンドラー
-		onAction?: () => void;
-	} = $props();
+	}: SnackbarItemProps = $props();
 
 	let visible = $state(true);
 	let timeoutId: ReturnType<typeof setTimeout> | null = null;
@@ -95,7 +96,6 @@
 	// =========================================================================
 	// Methods
 	// =========================================================================
-
 	const handleClose = () => {
 		// アニメーション開始前に、他のSnackbarの位置を測定
 		if (snackbarRef) {

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { IconVariant } from '../types/icon';
-type $$ComponentProps = {
+export type SnackbarItemProps = {
     children?: Snippet;
     message?: string;
     type?: 'info' | 'success' | 'warning' | 'error' | 'default';
@@ -16,6 +16,6 @@ type $$ComponentProps = {
     iconVariant?: IconVariant;
     onAction?: () => void;
 };
-declare const SnackbarItem: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const SnackbarItem: import("svelte").Component<SnackbarItemProps, {}, "">;
 type SnackbarItem = ReturnType<typeof SnackbarItem>;
 export default SnackbarItem;

package/dist/components/Switch.svelte

@@ -3,10 +3,79 @@
 <script lang="ts">
 	import type { Snippet } from 'svelte';
 	import type { HTMLInputAttributes } from 'svelte/elements';
+	import type {
+		FocusHandler,
+		KeyboardHandler,
+		MouseHandler,
+		TouchHandler,
+		PointerHandler,
+		BivariantValueHandler
+	} from '../types/eventHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type SwitchProps = {
+		// Snippet
+		children?: Snippet;
+
+		// 基本プロパティ
+		value: boolean;
+
+		// HTML属性系
+		id?: string;
+		inputAttributes?: HTMLInputAttributes | undefined;
+
+		// スタイル/レイアウト
+		size?: 'small' | 'medium' | 'large';
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ARIA/アクセシビリティ
+		reducedMotion?: boolean;
+
+		// フォーカスイベント
+		onfocus?: FocusHandler;
+		onblur?: FocusHandler;
+
+		// キーボードイベント
+		onkeydown?: KeyboardHandler;
+		onkeyup?: KeyboardHandler;
+
+		// マウスイベント
+		onclick?: MouseHandler;
+		onmousedown?: MouseHandler;
+		onmouseup?: MouseHandler;
+		onmouseenter?: MouseHandler;
+		onmouseleave?: MouseHandler;
+		onmouseover?: MouseHandler;
+		onmouseout?: MouseHandler;
+		oncontextmenu?: MouseHandler;
+		onauxclick?: MouseHandler;
+
+		// タッチイベント
+		ontouchstart?: TouchHandler;
+		ontouchend?: TouchHandler;
+		ontouchmove?: TouchHandler;
+		ontouchcancel?: TouchHandler;
+
+		// ポインターイベント
+		onpointerdown?: PointerHandler;
+		onpointerup?: PointerHandler;
+		onpointerenter?: PointerHandler;
+		onpointerleave?: PointerHandler;
+		onpointermove?: PointerHandler;
+		onpointercancel?: PointerHandler;
+
+		// 入力イベント
+		onchange?: (value: boolean) => void;
+
+		// その他
+		[key: string]: any;
+	};
+
 	let {
 		// Snippet
 		children,
@@ -66,72 +135,11 @@
 
 		// その他
 		...restProps
-	}: {
-		// Snippet
-		children?: Snippet;
-
-		// 基本プロパティ
-		value: boolean;
-
-		// HTML属性系
-		id?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
-		// スタイル/レイアウト
-		size?: 'small' | 'medium' | 'large';
-
-		// 状態/動作
-		disabled?: boolean;
-		required?: boolean;
-
-		// ARIA/アクセシビリティ
-		reducedMotion?: boolean;
-
-		// フォーカスイベント
-		onfocus?: Function; // No params for type inference
-		onblur?: Function; // No params for type inference
-
-		// キーボードイベント
-		onkeydown?: Function; // No params for type inference
-		onkeyup?: Function; // No params for type inference
-
-		// マウスイベント
-		onclick?: Function; // No params for type inference
-		onmousedown?: Function; // No params for type inference
-		onmouseup?: Function; // No params for type inference
-		onmouseenter?: Function; // No params for type inference
-		onmouseleave?: Function; // No params for type inference
-		onmouseover?: Function; // No params for type inference
-		onmouseout?: Function; // No params for type inference
-		oncontextmenu?: Function; // No params for type inference
-		onauxclick?: Function; // No params for type inference
-
-		// タッチイベント
-		ontouchstart?: Function; // No params for type inference
-		ontouchend?: Function; // No params for type inference
-		ontouchmove?: Function; // No params for type inference
-		ontouchcancel?: Function; // No params for type inference
-
-		// ポインターイベント
-		onpointerdown?: Function; // No params for type inference
-		onpointerup?: Function; // No params for type inference
-		onpointerenter?: Function; // No params for type inference
-		onpointerleave?: Function; // No params for type inference
-		onpointermove?: Function; // No params for type inference
-		onpointercancel?: Function; // No params for type inference
-
-		// 入力イベント
-		onchange?: (value: boolean) => void;
-
-		// その他
-		[key: string]: any;
-	} = $props();
+	}: SwitchProps = $props();
 
 	let inputRef: HTMLInputElement | undefined = $state();
 	let errorId = `switch-error-${Math.random().toString(36).substring(2, 15)}`;
 
-	// =========================================================================
-
 	// =========================================================================
 	// Methods
 	// =========================================================================

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

@@ -1,6 +1,7 @@
 import type { Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-type $$ComponentProps = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+export type SwitchProps = {
     children?: Snippet;
     value: boolean;
     id?: string;
@@ -9,32 +10,32 @@ type $$ComponentProps = {
     disabled?: boolean;
     required?: boolean;
     reducedMotion?: boolean;
-    onfocus?: Function;
-    onblur?: Function;
-    onkeydown?: Function;
-    onkeyup?: Function;
-    onclick?: Function;
-    onmousedown?: Function;
-    onmouseup?: Function;
-    onmouseenter?: Function;
-    onmouseleave?: Function;
-    onmouseover?: Function;
-    onmouseout?: Function;
-    oncontextmenu?: Function;
-    onauxclick?: Function;
-    ontouchstart?: Function;
-    ontouchend?: Function;
-    ontouchmove?: Function;
-    ontouchcancel?: Function;
-    onpointerdown?: Function;
-    onpointerup?: Function;
-    onpointerenter?: Function;
-    onpointerleave?: Function;
-    onpointermove?: Function;
-    onpointercancel?: Function;
+    onfocus?: FocusHandler;
+    onblur?: FocusHandler;
+    onkeydown?: KeyboardHandler;
+    onkeyup?: KeyboardHandler;
+    onclick?: MouseHandler;
+    onmousedown?: MouseHandler;
+    onmouseup?: MouseHandler;
+    onmouseenter?: MouseHandler;
+    onmouseleave?: MouseHandler;
+    onmouseover?: MouseHandler;
+    onmouseout?: MouseHandler;
+    oncontextmenu?: MouseHandler;
+    onauxclick?: MouseHandler;
+    ontouchstart?: TouchHandler;
+    ontouchend?: TouchHandler;
+    ontouchmove?: TouchHandler;
+    ontouchcancel?: TouchHandler;
+    onpointerdown?: PointerHandler;
+    onpointerup?: PointerHandler;
+    onpointerenter?: PointerHandler;
+    onpointerleave?: PointerHandler;
+    onpointermove?: PointerHandler;
+    onpointercancel?: PointerHandler;
     onchange?: (value: boolean) => void;
     [key: string]: any;
 };
-declare const Switch: import("svelte").Component<$$ComponentProps, {}, "value">;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/Tab.svelte

@@ -3,16 +3,34 @@
 <script lang="ts">
 	import TabItem from './TabItem.svelte';
 	import type { MenuItem } from '../types/menuItem';
+	import { afterNavigate } from '$app/navigation';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type TabProps = {
+		// 基本プロパティ
+		tabItems: MenuItem[];
+		pathPrefix?: string;
+		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+		currentPath?: string;
+
+		// スタイル/レイアウト
+		textColor?: string;
+		selectedTextColor?: string;
+		selectedBarColor?: string;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaLabelledby?: string;
+	};
 
 	let {
 		// 基本プロパティ
 		tabItems = [],
 		pathPrefix = '',
 		customPathMatcher,
+		currentPath,
 
 		// スタイル/レイアウト
 		textColor = 'var(--svelte-ui-text-subtle-color)',
@@ -22,34 +40,30 @@
 		// ARIA/アクセシビリティ
 		ariaLabel = 'Tabs',
 		ariaLabelledby
-	}: {
-		// 基本プロパティ
-		tabItems: MenuItem[];
-		pathPrefix?: string;
-		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
-
-		// スタイル/レイアウト
-		textColor?: string;
-		selectedTextColor?: string;
-		selectedBarColor?: string;
+	}: TabProps = $props();
 
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
-		ariaLabelledby?: string;
-	} = $props();
+	let resolvedCurrentPath = $state('');
 
 	// =========================================================================
 	// Methods
 	// =========================================================================
-
-	// ブラウザ標準APIを使用した現在パス取得
 	const getCurrentPath = () => {
+		// アプリ側から現在パスが明示的に渡されていればそれを優先（SSR対応）
+		if (currentPath && currentPath !== '') {
+			return currentPath;
+		}
+
+		// それ以外の場合はクライアント実行時のみ window.location から取得
 		if (typeof window !== 'undefined') {
 			return window.location.pathname;
 		}
 		return '';
 	};
 
+	afterNavigate(() => {
+		resolvedCurrentPath = getCurrentPath();
+	});
+
 	// パスの正規化処理
 	const normalizePath = (path: string): string => {
 		if (!pathPrefix) return path;
@@ -131,16 +145,13 @@
 	// $derived
 	// =========================================================================
 
-	// 現在のパスを取得
-	const currentPath = $derived(getCurrentPath());
-
 	// アクティブなタブのインデックスを現在のパスに基づいて計算
 	const selectedTabIndex = $derived.by(() => {
 		for (let i = 0; i < tabItems.length; i++) {
 			const item = tabItems[i];
 			if (!item.href) continue;
 
-			if (matchPath(currentPath, item.href, item)) {
+			if (matchPath(resolvedCurrentPath, item.href, item)) {
 				return i;
 			}
 		}

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

@@ -1,14 +1,15 @@
 import type { MenuItem } from '../types/menuItem';
-type $$ComponentProps = {
+export type TabProps = {
     tabItems: MenuItem[];
     pathPrefix?: string;
     customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+    currentPath?: string;
     textColor?: string;
     selectedTextColor?: string;
     selectedBarColor?: string;
     ariaLabel?: string;
     ariaLabelledby?: string;
 };
-declare const Tab: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Tab: import("svelte").Component<TabProps, {}, "">;
 type Tab = ReturnType<typeof Tab>;
 export default Tab;

package/dist/components/TabItem.svelte

@@ -8,6 +8,25 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type TabItemProps = {
+		// 基本プロパティ
+		tabItem: MenuItem;
+
+		// スタイル/レイアウト
+		textColor: string;
+		selectedTextColor: string;
+		selectedBarColor: string;
+
+		// アイコン関連
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// 状態/動作
+		isSelected?: boolean;
+	};
 
 	let {
 		// 基本プロパティ
@@ -27,25 +46,7 @@
 
 		// 状態/動作
 		isSelected = false
-	}: {
-		// 基本プロパティ
-		tabItem: MenuItem;
-
-		// スタイル/レイアウト
-		textColor: string;
-		selectedTextColor: string;
-		selectedBarColor: string;
-
-		// アイコン関連
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-
-		// 状態/動作
-		isSelected?: boolean;
-	} = $props();
+	}: TabItemProps = $props();
 </script>
 
 <a

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

@@ -1,6 +1,6 @@
 import type { MenuItem } from '../types/menuItem';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-type $$ComponentProps = {
+export type TabItemProps = {
     tabItem: MenuItem;
     textColor: string;
     selectedTextColor: string;
@@ -12,6 +12,6 @@ type $$ComponentProps = {
     iconVariant?: IconVariant;
     isSelected?: boolean;
 };
-declare const TabItem: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const TabItem: import("svelte").Component<TabItemProps, {}, "">;
 type TabItem = ReturnType<typeof TabItem>;
 export default TabItem;