@14ch/svelte-ui 0.0.11 → 0.0.13

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

@@ -1,7 +1,8 @@
 import type { Snippet } from 'svelte';
 import type { HTMLButtonAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-type $$ComponentProps = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+export type IconButtonProps = {
     children: Snippet;
     buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: 'button' | 'submit' | 'reset' | null | undefined;
@@ -30,31 +31,31 @@ type $$ComponentProps = {
     ariaDescribedby?: string;
     ariaPressed?: 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;
     [key: string]: any;
 };
-declare const IconButton: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const IconButton: import("svelte").Component<IconButtonProps, {}, "">;
 type IconButton = ReturnType<typeof IconButton>;
 export default IconButton;

package/dist/components/ImageUploader.svelte

@@ -8,10 +8,70 @@
 	import { onDestroy } from 'svelte';
 	import ImageUploaderPreview from './ImageUploaderPreview.svelte';
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
+	import type {
+		BivariantValueHandler,
+		FocusHandler,
+		KeyboardHandler,
+		MouseHandler,
+		TouchHandler,
+		PointerHandler
+	} from '../types/eventHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type ImageUploaderProps = {
+		// 基本プロパティ
+		value: FileList | null | undefined;
+		multiple?: boolean;
+		maxFileSize?: number;
+		placeholder?: string;
+
+		// HTML属性系
+		id?: string;
+		accept?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		height?: string | number;
+		rounded?: boolean;
+		previewStyle?: 'plain' | 'framed';
+		previewAdaptive?: 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(),
@@ -64,57 +124,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;
-		previewStyle?: 'plain' | 'framed';
-		previewAdaptive?: boolean;
-
-		// アイコン系
-		icon?: string;
-		iconSize?: number;
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-		removeFileAriaLabel?: string;
-
-		// 入力イベント
-		onchange?: (value: FileList | null | undefined) => void;
-
-		// フォーカスイベント
-		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
-
-		// マウスイベント
-		onmouseenter?: Function; // No params for type inference
-		onmouseleave?: Function; // No params for type inference
-
-		// タッチイベント
-		ontouchstart?: Function; // No params for type inference
-		ontouchend?: Function; // No params for type inference
-
-		// ポインターイベント
-		onpointerenter?: Function; // No params for type inference
-		onpointerleave?: Function; // No params for type inference
-	} = $props();
+	}: ImageUploaderProps = $props();
 
 	let dropAreaRef: HTMLButtonElement;
 	let fileInputRef: HTMLInputElement;

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

@@ -1,5 +1,6 @@
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-type $$ComponentProps = {
+import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+export type ImageUploaderProps = {
     value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
@@ -19,19 +20,19 @@ type $$ComponentProps = {
     iconOpticalSize?: IconOpticalSize;
     iconVariant?: IconVariant;
     removeFileAriaLabel?: string;
-    onchange?: (value: FileList | null | undefined) => void;
-    onfocus?: Function;
-    onblur?: Function;
-    onkeydown?: Function;
-    onkeyup?: Function;
-    onmouseenter?: Function;
-    onmouseleave?: Function;
-    ontouchstart?: Function;
-    ontouchend?: Function;
-    onpointerenter?: Function;
-    onpointerleave?: Function;
+    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;
 };
-declare const ImageUploader: import("svelte").Component<$$ComponentProps, {
+declare const ImageUploader: import("svelte").Component<ImageUploaderProps, {
     reset: () => void;
 }, "value">;
 type ImageUploader = ReturnType<typeof ImageUploader>;

package/dist/components/ImageUploaderPreview.svelte

@@ -1,8 +1,34 @@
+<!-- ImageUploaderPreview.svelte -->
+
 <script lang="ts">
 	import { onDestroy } from 'svelte';
 	import IconButton from './IconButton.svelte';
 	import { getStyleFromNumber } from '../utils/style';
 
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	export type ImageUploaderPreviewProps = {
+		// 基本プロパティ
+		file: File;
+
+		// HTML属性系
+		id?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		height?: string | number;
+		previewAdaptive?: boolean;
+		rounded?: boolean;
+		previewStyle?: 'plain' | 'framed';
+
+		// ARIA/アクセシビリティ
+		removeFileAriaLabel?: string;
+
+		// 入力イベント
+		onRemove: () => void;
+	};
+
 	let {
 		// 基本プロパティ
 		file,
@@ -22,29 +48,13 @@
 
 		// 入力イベント
 		onRemove
-	}: {
-		// 基本プロパティ
-		file: File;
-
-		// HTML属性系
-		id?: string;
-
-		// スタイル/レイアウト
-		width?: string | number;
-		height?: string | number;
-		previewAdaptive?: boolean;
-		rounded?: boolean;
-		previewStyle?: 'plain' | 'framed';
-
-		// ARIA/アクセシビリティ
-		removeFileAriaLabel?: string;
-
-		// 入力イベント
-		onRemove: () => void;
-	} = $props();
+	}: ImageUploaderPreviewProps = $props();
 
 	let imageSizes = $state<Record<string, { width: number; height: number }>>({});
 
+	// =========================================================================
+	// Methods
+	// =========================================================================
 	const getImageUrl = (file: File): string => {
 		return URL.createObjectURL(file);
 	};
@@ -67,6 +77,9 @@
 		img.src = getImageUrl(file);
 	};
 
+	// =========================================================================
+	// $derived
+	// =========================================================================
 	// previewAdaptiveによる分岐を最初に行う
 	const imageSizeStyle = $derived.by(() => {
 		if (previewAdaptive) {

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

@@ -1,4 +1,4 @@
-type $$ComponentProps = {
+export type ImageUploaderPreviewProps = {
     file: File;
     id?: string;
     width?: string | number;
@@ -9,6 +9,6 @@ type $$ComponentProps = {
     removeFileAriaLabel?: string;
     onRemove: () => void;
 };
-declare const ImageUploaderPreview: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const ImageUploaderPreview: import("svelte").Component<ImageUploaderPreviewProps, {}, "">;
 type ImageUploaderPreview = ReturnType<typeof ImageUploaderPreview>;
 export default ImageUploaderPreview;

package/dist/components/Input.svelte

@@ -8,10 +8,111 @@
 	import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
 	import { t } from '../i18n';
 	import { convertToHtmlWithLink } from '../utils/formatText';
+	import type {
+		FocusHandler,
+		KeyboardHandler,
+		MouseHandler,
+		TouchHandler,
+		PointerHandler,
+		BivariantValueHandler
+	} from '../types/eventHandlers';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type InputProps = {
+		// 基本プロパティ
+		name?: string;
+		value: string | number;
+
+		// HTML属性系
+		id?: string | null;
+		type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
+		tabindex?: number | null;
+		maxlength?: number | null;
+		pattern?: string | null;
+		min?: number | null;
+		max?: number | null;
+		step?: number | null;
+		size?: number | null;
+		autocomplete?: HTMLInputElement['autocomplete'] | null;
+		spellcheck?: boolean | null;
+		inputAttributes?: HTMLInputAttributes | undefined;
+
+		// スタイル/レイアウト
+		inline?: boolean;
+		focusStyle?: 'background' | 'outline' | 'none';
+		placeholder?: string;
+		fullWidth?: boolean;
+		width?: string | number | null;
+		minWidth?: string | number | null;
+		maxWidth?: string | number | null;
+		rounded?: boolean;
+		customStyle?: string;
+
+		// アイコン関連
+		rightIcon?: string;
+		leftIcon?: string;
+		leftIconAriaLabel?: string;
+		rightIconAriaLabel?: string;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// 状態/動作
+		disabled?: boolean;
+		readonly?: boolean;
+		required?: boolean;
+		clearable?: boolean;
+		linkify?: 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?: BivariantValueHandler<string | number>;
+		oninput?: BivariantValueHandler<string | number>;
+
+		// アイコンイベント
+		onRightIconClick?: MouseHandler;
+		onLeftIconClick?: MouseHandler;
+
+		// その他
+		[key: string]: any;
+	};
+
 	let {
 		// 基本プロパティ
 		name,
@@ -104,98 +205,7 @@
 
 		// その他
 		...restProps
-	}: {
-		// 基本プロパティ
-		name?: string;
-		value: string | number;
-
-		// HTML属性系
-		id?: string | null;
-		type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
-		tabindex?: number | null;
-		maxlength?: number | null;
-		pattern?: string | null;
-		min?: number | null;
-		max?: number | null;
-		step?: number | null;
-		size?: number | null;
-		autocomplete?: HTMLInputElement['autocomplete'] | null;
-		spellcheck?: boolean | null;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
-		// スタイル/レイアウト
-		inline?: boolean;
-		focusStyle?: 'background' | 'outline' | 'none';
-		placeholder?: string;
-		fullWidth?: boolean;
-		width?: string | number | null;
-		minWidth?: string | number | null;
-		maxWidth?: string | number | null;
-		rounded?: boolean;
-		customStyle?: string;
-
-		// アイコン関連
-		rightIcon?: string;
-		leftIcon?: string;
-		leftIconAriaLabel?: string;
-		rightIconAriaLabel?: string;
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-
-		// 状態/動作
-		disabled?: boolean;
-		readonly?: boolean;
-		required?: boolean;
-		clearable?: boolean;
-		linkify?: 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: string | number) => void;
-		oninput?: (value: string | number) => void;
-
-		// アイコンイベント
-		onRightIconClick?: Function; // No params for type inference
-		onLeftIconClick?: Function; // No params for type inference
-
-		// その他
-		[key: string]: any;
-	} = $props();
+	}: InputProps = $props();
 
 	let ref: HTMLInputElement | undefined = $state();
 	let isFocused: boolean = $state(false);
@@ -962,7 +972,9 @@
 	}
 
 	input[readonly] {
-		background-color: var(--svelte-ui-input-readonly-bg);
+		/* Keep cursor behavior but do not add a special background.
+		 * In this library, filled backgrounds are used to indicate editable fields,
+		 * so readonly inputs intentionally have no extra background color. */
 		cursor: default;
 	}
 </style>

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

@@ -1,6 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-type $$ComponentProps = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
+export type InputProps = {
     name?: string;
     value: string | number;
     id?: string | null;
@@ -38,36 +39,36 @@ type $$ComponentProps = {
     required?: boolean;
     clearable?: boolean;
     linkify?: 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;
-    onchange?: (value: string | number) => void;
-    oninput?: (value: string | number) => void;
-    onRightIconClick?: Function;
-    onLeftIconClick?: 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?: BivariantValueHandler<string | number>;
+    oninput?: BivariantValueHandler<string | number>;
+    onRightIconClick?: MouseHandler;
+    onLeftIconClick?: MouseHandler;
     [key: string]: any;
 };
-declare const Input: import("svelte").Component<$$ComponentProps, {
+declare const Input: import("svelte").Component<InputProps, {
     focus: () => void;
 }, "value">;
 type Input = ReturnType<typeof Input>;

package/dist/components/LoadingSpinner.svelte

@@ -1,10 +1,22 @@
 <!-- LoadingSpinner.svelte -->
 
 <script lang="ts">
-	import { getStyleFromNumber } from '../utils/style';
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type LoadingSpinnerProps = {
+		// スタイル/レイアウト
+		size?: number;
+		color?: string;
+		strokeWidth?: number;
+
+		// 状態/動作
+		speed?: number;
+
+		// ARIA/アクセシビリティ
+		reducedMotion?: boolean;
+	};
+
 	let {
 		// スタイル/レイアウト
 		size = 32,
@@ -16,18 +28,7 @@
 
 		// ARIA/アクセシビリティ
 		reducedMotion = false
-	}: {
-		// スタイル/レイアウト
-		size?: number;
-		color?: string;
-		strokeWidth?: number;
-
-		// 状態/動作
-		speed?: number;
-
-		// ARIA/アクセシビリティ
-		reducedMotion?: boolean;
-	} = $props();
+	}: LoadingSpinnerProps = $props();
 
 	// =========================================================================
 	// $derived

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

@@ -1,10 +1,10 @@
-type $$ComponentProps = {
+export type LoadingSpinnerProps = {
     size?: number;
     color?: string;
     strokeWidth?: number;
     speed?: number;
     reducedMotion?: boolean;
 };
-declare const LoadingSpinner: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const LoadingSpinner: import("svelte").Component<LoadingSpinnerProps, {}, "">;
 type LoadingSpinner = ReturnType<typeof LoadingSpinner>;
 export default LoadingSpinner;