@14ch/svelte-ui 0.0.12 → 0.0.13

package/dist/components/Dialog.svelte

@@ -20,6 +20,35 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type DialogProps = {
+		// Snippet
+		header?: Snippet;
+		children?: Snippet;
+		footer?: Snippet;
+
+		// 基本プロパティ
+		title?: string;
+		description?: string;
+
+		// HTML属性
+		id?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		bodyStyle?: string;
+		noPadding?: boolean;
+
+		// 状態/動作
+		isOpen?: boolean;
+		scrollable?: boolean;
+		closeIfClickOutside?: boolean;
+		restoreFocus?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaDescribedby?: string;
+	};
+
 	let {
 		// Snippet
 		header,
@@ -47,34 +76,7 @@
 		// ARIA/アクセシビリティ
 		ariaLabel,
 		ariaDescribedby
-	}: {
-		// Snippet
-		header?: Snippet;
-		children?: Snippet;
-		footer?: Snippet;
-
-		// 基本プロパティ
-		title?: string;
-		description?: string;
-
-		// HTML属性
-		id?: string;
-
-		// スタイル/レイアウト
-		width?: string | number;
-		bodyStyle?: string;
-		noPadding?: boolean;
-
-		// 状態/動作
-		isOpen?: boolean;
-		scrollable?: boolean;
-		closeIfClickOutside?: boolean;
-		restoreFocus?: boolean;
-
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
-		ariaDescribedby?: string;
-	} = $props();
+	}: DialogProps = $props();
 
 	let modalRef: Modal;
 

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

@@ -11,7 +11,7 @@
      * This prevents state synchronization bugs and ensures consistent behavior.
      */
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+export type DialogProps = {
     header?: Snippet;
     children?: Snippet;
     footer?: Snippet;
@@ -28,7 +28,7 @@ type $$ComponentProps = {
     ariaLabel?: string;
     ariaDescribedby?: string;
 };
-declare const Dialog: import("svelte").Component<$$ComponentProps, {
+declare const Dialog: import("svelte").Component<DialogProps, {
     open: () => void;
     close: () => void;
     toggle: () => void;

package/dist/components/Drawer.svelte

@@ -20,6 +20,36 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type DrawerProps = {
+		// Snippet
+		header?: Snippet;
+		children?: Snippet;
+		footer?: Snippet;
+
+		// 基本プロパティ
+		title?: string;
+		description?: string;
+
+		// HTML属性
+		id?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		position?: 'left' | 'right';
+		bodyStyle?: string;
+		noPadding?: boolean;
+
+		// 状態/動作
+		isOpen?: boolean;
+		scrollable?: boolean;
+		closeIfClickOutside?: boolean;
+		restoreFocus?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaDescribedby?: string;
+	};
+
 	let {
 		// Snippet
 		header,
@@ -48,35 +78,7 @@
 		// ARIA/アクセシビリティ
 		ariaLabel = 'Drawer',
 		ariaDescribedby
-	}: {
-		// Snippet
-		header?: Snippet;
-		children?: Snippet;
-		footer?: Snippet;
-
-		// 基本プロパティ
-		title?: string;
-		description?: string;
-
-		// HTML属性
-		id?: string;
-
-		// スタイル/レイアウト
-		width?: string | number;
-		position?: 'left' | 'right';
-		bodyStyle?: string;
-		noPadding?: boolean;
-
-		// 状態/動作
-		isOpen?: boolean;
-		scrollable?: boolean;
-		closeIfClickOutside?: boolean;
-		restoreFocus?: boolean;
-
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
-		ariaDescribedby?: string;
-	} = $props();
+	}: DrawerProps = $props();
 
 	let modalRef: Modal;
 

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

@@ -11,7 +11,7 @@
      * This prevents state synchronization bugs and ensures consistent behavior.
      */
 import type { Snippet } from 'svelte';
-type $$ComponentProps = {
+export type DrawerProps = {
     header?: Snippet;
     children?: Snippet;
     footer?: Snippet;
@@ -29,7 +29,7 @@ type $$ComponentProps = {
     ariaLabel?: string;
     ariaDescribedby?: string;
 };
-declare const Drawer: import("svelte").Component<$$ComponentProps, {
+declare const Drawer: import("svelte").Component<DrawerProps, {
     open: () => void;
     close: () => void;
     toggle: () => void;

package/dist/components/Fab.svelte

@@ -17,6 +17,61 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type FabProps = {
+		children?: Snippet;
+		buttonAttributes?: HTMLButtonAttributes | undefined;
+		type?: HTMLButtonAttributes['type'];
+		customStyle?: HTMLButtonAttributes['style'];
+		disabled?: boolean;
+		loading?: boolean;
+		icon?: string;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+		color?: string;
+		variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
+		position?: 'left' | 'center' | 'right';
+		hasShadow?: boolean;
+		reducedMotion?: boolean;
+		ariaLabel?: string;
+		ariaDescribedby?: string;
+		// フォーカスイベント
+		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;
+		[key: string]: any;
+	};
+
 	let {
 		// Snippet
 		children,
@@ -84,60 +139,7 @@
 
 		// その他
 		...restProps
-	}: {
-		children?: Snippet;
-		buttonAttributes?: HTMLButtonAttributes | undefined;
-		type?: HTMLButtonAttributes['type'];
-		customStyle?: HTMLButtonAttributes['style'];
-		disabled?: boolean;
-		loading?: boolean;
-		icon?: string;
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-		color?: string;
-		variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
-		position?: 'left' | 'center' | 'right';
-		hasShadow?: boolean;
-		reducedMotion?: boolean;
-		ariaLabel?: string;
-		ariaDescribedby?: string;
-		// フォーカスイベント
-		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;
-		[key: string]: any;
-	} = $props();
+	}: FabProps = $props();
 
 	// =========================================================================
 	// Methods

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

@@ -2,7 +2,7 @@ import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+export type FabProps = {
     children?: Snippet;
     buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: HTMLButtonAttributes['type'];
@@ -47,6 +47,6 @@ type $$ComponentProps = {
     onpointercancel?: PointerHandler;
     [key: string]: any;
 };
-declare const Fab: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Fab: import("svelte").Component<FabProps, {}, "">;
 type Fab = ReturnType<typeof Fab>;
 export default Fab;

package/dist/components/FileUploader.svelte

@@ -19,6 +19,56 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type FileUploaderProps = {
+		// 基本プロパティ
+		value: FileList | null | undefined;
+		multiple?: boolean;
+		maxFileSize?: number;
+		placeholder?: string;
+
+		// HTML属性系
+		id?: string;
+		accept?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		height?: string | number;
+		rounded?: boolean;
+
+		// アイコン系
+		icon?: string;
+		iconSize?: number;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+		removeFileAriaLabel?: string;
+
+		// 入力イベント
+		onchange?: BivariantValueHandler<FileList | null | undefined>;
+
+		// フォーカスイベント
+		onfocus?: FocusHandler;
+		onblur?: FocusHandler;
+
+		// キーボードイベント
+		onkeydown?: KeyboardHandler;
+		onkeyup?: KeyboardHandler;
+
+		// マウスイベント
+		onmouseenter?: MouseHandler;
+		onmouseleave?: MouseHandler;
+
+		// タッチイベント
+		ontouchstart?: TouchHandler;
+		ontouchend?: TouchHandler;
+
+		// ポインターイベント
+		onpointerenter?: PointerHandler;
+		onpointerleave?: PointerHandler;
+	};
+
 	let {
 		// 基本プロパティ
 		value = $bindable(),
@@ -67,55 +117,7 @@
 		// ポインターイベント
 		onpointerenter = () => {}, // No params for type inference
 		onpointerleave = () => {} // No params for type inference
-	}: {
-		// 基本プロパティ
-		value: FileList | null | undefined;
-		multiple?: boolean;
-		maxFileSize?: number;
-		placeholder?: string;
-
-		// HTML属性系
-		id?: string;
-		accept?: string;
-
-		// スタイル/レイアウト
-		width?: string | number;
-		height?: string | number;
-		rounded?: boolean;
-
-		// アイコン系
-		icon?: string;
-		iconSize?: number;
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-		removeFileAriaLabel?: string;
-
-		// 入力イベント
-		onchange?: BivariantValueHandler<FileList | null | undefined>;
-
-		// フォーカスイベント
-		onfocus?: FocusHandler;
-		onblur?: FocusHandler;
-
-		// キーボードイベント
-		onkeydown?: KeyboardHandler;
-		onkeyup?: KeyboardHandler;
-
-		// マウスイベント
-		onmouseenter?: MouseHandler;
-		onmouseleave?: MouseHandler;
-
-		// タッチイベント
-		ontouchstart?: TouchHandler;
-		ontouchend?: TouchHandler;
-
-		// ポインターイベント
-		onpointerenter?: PointerHandler;
-		onpointerleave?: PointerHandler;
-	} = $props();
+	}: FileUploaderProps = $props();
 
 	let dropAreaRef: HTMLButtonElement;
 	let fileInputRef: HTMLInputElement;

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

@@ -1,6 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+export type FileUploaderProps = {
     value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
@@ -30,7 +30,7 @@ type $$ComponentProps = {
     onpointerenter?: PointerHandler;
     onpointerleave?: PointerHandler;
 };
-declare const FileUploader: import("svelte").Component<$$ComponentProps, {
+declare const FileUploader: import("svelte").Component<FileUploaderProps, {
     reset: () => void;
 }, "value">;
 type FileUploader = ReturnType<typeof FileUploader>;

package/dist/components/Icon.svelte

@@ -8,6 +8,34 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type IconProps = {
+		// Snippet
+		children: Snippet;
+
+		// 基本プロパティ
+		title?: string;
+		fallbackText?: string;
+
+		// スタイル/レイアウト
+		size?: number;
+		color?: string;
+		customStyle?: string;
+
+		// アイコン関連
+		filled?: boolean;
+		weight?: IconWeight;
+		grade?: IconGrade;
+		opticalSize?: IconOpticalSize;
+		variant?: IconVariant;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		decorative?: boolean;
+
+		// その他
+		[key: string]: any;
+	};
+
 	let {
 		// Snippet
 		children,
@@ -34,33 +62,7 @@
 
 		// その他
 		...restProps
-	}: {
-		// Snippet
-		children: Snippet;
-
-		// 基本プロパティ
-		title?: string;
-		fallbackText?: string;
-
-		// スタイル/レイアウト
-		size?: number;
-		color?: string;
-		customStyle?: string;
-
-		// アイコン関連
-		filled?: boolean;
-		weight?: IconWeight;
-		grade?: IconGrade;
-		opticalSize?: IconOpticalSize;
-		variant?: IconVariant;
-
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
-		decorative?: boolean;
-
-		// その他
-		[key: string]: any;
-	} = $props();
+	}: IconProps = $props();
 
 	// =========================================================================
 	// $derived

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

@@ -1,6 +1,6 @@
 import type { Snippet } from 'svelte';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-type $$ComponentProps = {
+export type IconProps = {
     children: Snippet;
     title?: string;
     fallbackText?: string;
@@ -16,6 +16,6 @@ type $$ComponentProps = {
     decorative?: boolean;
     [key: string]: any;
 };
-declare const Icon: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Icon: import("svelte").Component<IconProps, {}, "">;
 type Icon = ReturnType<typeof Icon>;
 export default Icon;