@14ch/svelte-ui 0.0.12 → 0.0.14

package/dist/components/IconButton.svelte

@@ -13,11 +13,92 @@
 		MouseHandler,
 		TouchHandler,
 		PointerHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
+	import type { ButtonVariant, BadgeVariant } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type IconButtonProps = {
+		// Snippet
+		children: Snippet;
+
+		// HTML属性系
+		buttonAttributes?: HTMLButtonAttributes | undefined;
+		type?: 'button' | 'submit' | 'reset' | null | undefined;
+		tabindex?: number | null;
+
+		// スタイル/レイアウト
+		customStyle?: HTMLButtonAttributes['style'];
+		variant?: ButtonVariant;
+		size?: number;
+		fontSize?: number;
+		color?: string;
+		rounded?: boolean;
+
+		// アイコン関連
+		icon?: string;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// バッジ関連
+		hasBadge?: boolean;
+		badgeCount?: number;
+		badgeVariant?: BadgeVariant;
+		badgeColor?: string;
+		badgeMax?: number;
+
+		// 状態/動作
+		disabled?: boolean;
+		loading?: boolean;
+		pressed?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel: string;
+		ariaDescribedby?: string;
+		ariaPressed?: boolean;
+		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;
+
+		// その他
+		[key: string]: any;
+	};
+
 	let {
 		// 基本プロパティ
 		children,
@@ -96,85 +177,7 @@
 
 		// その他
 		...restProps
-	}: {
-		// Snippet
-		children: Snippet;
-
-		// HTML属性系
-		buttonAttributes?: HTMLButtonAttributes | undefined;
-		type?: 'button' | 'submit' | 'reset' | null | undefined;
-		tabindex?: number | null;
-
-		// スタイル/レイアウト
-		customStyle?: HTMLButtonAttributes['style'];
-		variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
-		size?: number;
-		fontSize?: number;
-		color?: string;
-		rounded?: boolean;
-
-		// アイコン関連
-		icon?: string;
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-
-		// バッジ関連
-		hasBadge?: boolean;
-		badgeCount?: number;
-		badgeVariant?: 'dot' | 'count';
-		badgeColor?: string;
-		badgeMax?: number;
-
-		// 状態/動作
-		disabled?: boolean;
-		loading?: boolean;
-		pressed?: boolean;
-
-		// ARIA/アクセシビリティ
-		ariaLabel: string;
-		ariaDescribedby?: string;
-		ariaPressed?: boolean;
-		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;
-
-		// その他
-		[key: string]: any;
-	} = $props();
+	}: IconButtonProps = $props();
 
 	// =========================================================================
 	// Methods

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

@@ -1,14 +1,15 @@
 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 = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+import type { ButtonVariant, BadgeVariant } from '../types/propOptions';
+export type IconButtonProps = {
     children: Snippet;
     buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: 'button' | 'submit' | 'reset' | null | undefined;
     tabindex?: number | null;
     customStyle?: HTMLButtonAttributes['style'];
-    variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
+    variant?: ButtonVariant;
     size?: number;
     fontSize?: number;
     color?: string;
@@ -21,7 +22,7 @@ type $$ComponentProps = {
     iconVariant?: IconVariant;
     hasBadge?: boolean;
     badgeCount?: number;
-    badgeVariant?: 'dot' | 'count';
+    badgeVariant?: BadgeVariant;
     badgeColor?: string;
     badgeMax?: number;
     disabled?: boolean;
@@ -56,6 +57,6 @@ type $$ComponentProps = {
     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

@@ -15,11 +15,63 @@
 		MouseHandler,
 		TouchHandler,
 		PointerHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
 
 	// =========================================================================
 	// 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(),
@@ -72,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?: 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();
+	}: ImageUploaderProps = $props();
 
 	let dropAreaRef: HTMLButtonElement;
 	let fileInputRef: HTMLInputElement;

package/dist/components/ImageUploader.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 = {
+import type { BivariantValueHandler, FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/callbackHandlers';
+export type ImageUploaderProps = {
     value: FileList | null | undefined;
     multiple?: boolean;
     maxFileSize?: number;
@@ -32,7 +32,7 @@ type $$ComponentProps = {
     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

@@ -15,11 +15,105 @@
 		TouchHandler,
 		PointerHandler,
 		BivariantValueHandler
-	} from '../types/eventHandlers';
+	} from '../types/callbackHandlers';
+	import type { FocusStyle } from '../types/propOptions';
 
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type InputProps = {
+		// 基本プロパティ
+		name?: string;
+		value: string | number | null | undefined;
+
+		// 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?: FocusStyle;
+		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,
@@ -112,98 +206,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?: 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;
-	} = $props();
+	}: InputProps = $props();
 
 	let ref: HTMLInputElement | undefined = $state();
 	let isFocused: boolean = $state(false);
@@ -379,6 +382,7 @@
 	// $derived
 	// =========================================================================
 	const getDisplayValue = (): string => {
+		if (value === null || value === undefined) return '';
 		if (type === 'number' && typeof value === 'number') {
 			return value.toLocaleString();
 		}
@@ -970,7 +974,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,9 +1,10 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant, IconWeight, IconGrade, IconOpticalSize } from '../types/icon';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/callbackHandlers';
+import type { FocusStyle } from '../types/propOptions';
+export type InputProps = {
     name?: string;
-    value: string | number;
+    value: string | number | null | undefined;
     id?: string | null;
     type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'number';
     tabindex?: number | null;
@@ -17,7 +18,7 @@ type $$ComponentProps = {
     spellcheck?: boolean | null;
     inputAttributes?: HTMLInputAttributes | undefined;
     inline?: boolean;
-    focusStyle?: 'background' | 'outline' | 'none';
+    focusStyle?: FocusStyle;
     placeholder?: string;
     fullWidth?: boolean;
     width?: string | number | null;
@@ -68,7 +69,7 @@ type $$ComponentProps = {
     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>;