@14ch/svelte-ui 0.0.11 → 0.0.13

package/dist/assets/styles/variables.scss

@@ -376,7 +376,6 @@
 	--svelte-ui-input-icon-space-double-inline: calc(var(--svelte-ui-form-icon-space) * 2);
 	--svelte-ui-input-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-input-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-input-readonly-bg: var(--svelte-ui-form-bg);
 	--svelte-ui-input-text-color: var(--svelte-ui-text-color);
 	--svelte-ui-input-placeholder-color: var(--svelte-ui-text-placeholder-color);
 	--svelte-ui-input-icon-color: var(--svelte-ui-text-subtle-color);
@@ -396,11 +395,6 @@
 	--svelte-ui-textarea-icon-space-inline: var(--svelte-ui-form-icon-space);
 	--svelte-ui-textarea-icon-top: 2px;
 	--svelte-ui-textarea-icon-top-inline: -2px;
-	--svelte-ui-textarea-bg: var(--svelte-ui-form-bg);
-	--svelte-ui-textarea-border-color: var(--svelte-ui-border-weak-color);
-	--svelte-ui-textarea-readonly-bg: var(--svelte-ui-form-bg);
-	--svelte-ui-textarea-text-color: var(--svelte-ui-text-color);
-	--svelte-ui-textarea-placeholder-color: var(--svelte-ui-text-placeholder-color);
 	--svelte-ui-textarea-icon-color: var(--svelte-ui-text-subtle-color);
 
 	/* Select */

package/dist/components/Button.svelte

@@ -4,6 +4,13 @@
 	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';
 	import Icon from './Icon.svelte';
 	import LoadingSpinner from './LoadingSpinner.svelte';
 	import { getStyleFromNumber } from '../utils/style';
@@ -11,6 +18,80 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type ButtonProps = {
+		// Snippet
+		children: Snippet;
+
+		// HTML属性系
+		buttonAttributes?: HTMLButtonAttributes | undefined;
+		type?: HTMLButtonAttributes['type'];
+		tabindex?: number | null;
+
+		// スタイル/レイアウト
+		customStyle?: HTMLButtonAttributes['style'];
+		variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
+		size?: 'small' | 'medium' | 'large';
+		color?: string;
+		fullWidth?: boolean;
+		minWidth?: string | number;
+		rounded?: boolean;
+		popup?: boolean;
+
+		// アイコン関連
+		icon?: string;
+		iconFilled?: boolean;
+		iconWeight?: IconWeight;
+		iconGrade?: IconGrade;
+		iconOpticalSize?: IconOpticalSize;
+		iconVariant?: IconVariant;
+
+		// 状態/動作
+		disabled?: boolean;
+		loading?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaDescribedby?: string;
+		ariaExpanded?: 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 {
 		// Snippet
 		children,
@@ -83,79 +164,7 @@
 
 		// その他
 		...restProps
-	}: {
-		// Snippet
-		children: Snippet;
-
-		// HTML属性系
-		buttonAttributes?: HTMLButtonAttributes | undefined;
-		type?: HTMLButtonAttributes['type'];
-		tabindex?: number | null;
-
-		// スタイル/レイアウト
-		customStyle?: HTMLButtonAttributes['style'];
-		variant?: 'ghost' | 'filled' | 'outlined' | 'glass';
-		size?: 'small' | 'medium' | 'large';
-		color?: string;
-		fullWidth?: boolean;
-		minWidth?: string | number;
-		rounded?: boolean;
-		popup?: boolean;
-
-		// アイコン関連
-		icon?: string;
-		iconFilled?: boolean;
-		iconWeight?: IconWeight;
-		iconGrade?: IconGrade;
-		iconOpticalSize?: IconOpticalSize;
-		iconVariant?: IconVariant;
-
-		// 状態/動作
-		disabled?: boolean;
-		loading?: boolean;
-
-		// ARIA/アクセシビリティ
-		ariaLabel?: string;
-		ariaDescribedby?: string;
-		ariaExpanded?: boolean;
-		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
-
-		// その他
-		[key: string]: any;
-	} = $props();
+	}: ButtonProps = $props();
 
 	const backgroundColors = $derived({
 		filled: color ?? 'var(--svelte-ui-button-bg-filled)',

package/dist/components/Button.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 ButtonProps = {
     children: Snippet;
     buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: HTMLButtonAttributes['type'];
@@ -26,31 +27,31 @@ type $$ComponentProps = {
     ariaDescribedby?: string;
     ariaExpanded?: 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 Button: import("svelte").Component<$$ComponentProps, {}, "">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/Checkbox.svelte

@@ -3,10 +3,81 @@
 <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 CheckboxProps = {
+		// Snippet
+		children?: Snippet;
+
+		// 基本プロパティ
+		name?: string;
+		value: boolean;
+		indeterminate?: boolean;
+
+		// HTML属性系
+		id?: string;
+		inputAttributes?: HTMLInputAttributes | undefined;
+
+		// スタイル/レイアウト
+		size?: 'small' | 'medium' | 'large';
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ARIA/アクセシビリティ
+		reducedMotion?: boolean;
+
+		// 入力イベント
+		onchange?: (value: boolean) => void;
+
+		// フォーカスイベント
+		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,
@@ -68,85 +139,9 @@
 
 		// その他
 		...restProps
-	}: {
-		// Snippet
-		children?: Snippet;
-
-		// 基本プロパティ
-		name?: string;
-		value: boolean;
-		indeterminate?: boolean;
-
-		// HTML属性系
-		id?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
-		// スタイル/レイアウト
-		size?: 'small' | 'medium' | 'large';
-
-		// 状態/動作
-		disabled?: boolean;
-		required?: boolean;
-
-		// ARIA/アクセシビリティ
-		reducedMotion?: boolean;
-
-		// 入力イベント
-		onchange?: (value: boolean) => 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
-
-		// マウスイベント
-		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
-
-		// その他
-		[key: string]: any;
-	} = $props();
-
-	// =========================================================================
-	// $derived
-	// =========================================================================
-	const containerClasses = $derived(
-		[
-			'checkbox',
-			`checkbox--${size}`,
-			disabled && 'checkbox--disabled',
-			reducedMotion && 'checkbox--no-motion'
-		]
-			.filter(Boolean)
-			.join(' ')
-	);
+	}: CheckboxProps = $props();
 
 	// =========================================================================
-
 	// Methods
 	// =========================================================================
 	const handleFocus = (event: FocusEvent) => {
@@ -275,6 +270,20 @@
 	const handleChange = (event: Event) => {
 		onchange(value);
 	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const containerClasses = $derived(
+		[
+			'checkbox',
+			`checkbox--${size}`,
+			disabled && 'checkbox--disabled',
+			reducedMotion && 'checkbox--no-motion'
+		]
+			.filter(Boolean)
+			.join(' ')
+	);
 </script>
 
 <div class={containerClasses} data-testid="checkbox">

package/dist/components/Checkbox.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 CheckboxProps = {
     children?: Snippet;
     name?: string;
     value: boolean;
@@ -12,31 +13,31 @@ type $$ComponentProps = {
     required?: boolean;
     reducedMotion?: boolean;
     onchange?: (value: boolean) => void;
-    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 Checkbox: import("svelte").Component<$$ComponentProps, {}, "value" | "indeterminate">;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/CheckboxGroup.svelte

@@ -1,8 +1,38 @@
+<!-- CheckboxGroup.svelte -->
+
 <script lang="ts">
 	import type { Option, OptionValue } from '../types/options';
 	import Checkbox from './Checkbox.svelte';
 	import { onMount } from 'svelte';
 	import { getStyleFromNumber } from '../utils/style';
+	import type { BivariantValueHandler } from '../types/eventHandlers';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+
+	export type CheckboxGroupProps = {
+		// 基本プロパティ
+		options: Option[];
+		value: OptionValue[];
+
+		// スタイル/レイアウト
+		direction?: 'vertical' | 'horizontal';
+		gap?: string | number;
+		wrap?: boolean;
+		minOptionWidth?: string | number;
+		size?: 'small' | 'medium' | 'large';
+
+		// 状態/動作
+		disabled?: boolean;
+		required?: boolean;
+
+		// ARIA/アクセシビリティ
+		reducedMotion?: boolean;
+
+		// 入力イベント
+		onchange?: BivariantValueHandler<OptionValue[]>;
+	};
 
 	let {
 		// 基本プロパティ
@@ -25,43 +55,30 @@
 
 		// 入力イベント
 		onchange = () => {} // No params for type inference
-	}: {
-		// 基本プロパティ
-		options: Option[];
-		value: OptionValue[];
+	}: CheckboxGroupProps = $props();
 
-		// スタイル/レイアウト
-		direction?: 'vertical' | 'horizontal';
-		gap?: string | number;
-		wrap?: boolean;
-		minOptionWidth?: string | number;
-		size?: 'small' | 'medium' | 'large';
-
-		// 状態/動作
-		disabled?: boolean;
-		required?: boolean;
-
-		// ARIA/アクセシビリティ
-		reducedMotion?: boolean;
-
-		// 入力イベント
-		onchange?: (value: OptionValue[]) => void;
-	} = $props();
 	let localValues: Record<string, boolean> = $state({});
 
+	// =========================================================================
+	// Lifecycle
+	// =========================================================================
 	onMount(() => {
 		options.forEach((option) => {
-			localValues[option.value] = false;
+			localValues[String(option.value)] = false;
 		});
 	});
 
+	// =========================================================================
+	// Methods
+	// =========================================================================
 	const handleChange = () => {
-		value = options.filter((option) => localValues[option.value]).map((option) => option.value);
+		value = options
+			.filter((option) => localValues[String(option.value)])
+			.map((option) => option.value);
 		onchange(value);
 	};
 
 	const gapStyle = gap !== undefined ? getStyleFromNumber(gap) : undefined;
-
 	const minOptionWidthStyle = getStyleFromNumber(minOptionWidth);
 </script>
 
@@ -74,10 +91,10 @@
     "
 >
 	{#each options as option (option.value)}
-		{#if localValues[option.value] !== undefined}
+		{#if localValues[String(option.value)] !== undefined}
 			<li class="checkbox-group__option">
 				<Checkbox
-					bind:value={localValues[option.value]}
+					bind:value={localValues[String(option.value)]}
 					{size}
 					{disabled}
 					{required}

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

@@ -1,5 +1,6 @@
 import type { Option, OptionValue } from '../types/options';
-type $$ComponentProps = {
+import type { BivariantValueHandler } from '../types/eventHandlers';
+export type CheckboxGroupProps = {
     options: Option[];
     value: OptionValue[];
     direction?: 'vertical' | 'horizontal';
@@ -10,8 +11,8 @@ type $$ComponentProps = {
     disabled?: boolean;
     required?: boolean;
     reducedMotion?: boolean;
-    onchange?: (value: OptionValue[]) => void;
+    onchange?: BivariantValueHandler<OptionValue[]>;
 };
-declare const CheckboxGroup: import("svelte").Component<$$ComponentProps, {}, "value">;
+declare const CheckboxGroup: import("svelte").Component<CheckboxGroupProps, {}, "value">;
 type CheckboxGroup = ReturnType<typeof CheckboxGroup>;
 export default CheckboxGroup;