@14ch/svelte-ui 0.0.12 → 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

@@ -18,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,
@@ -90,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?: 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();
+	}: ButtonProps = $props();
 
 	const backgroundColors = $derived({
 		filled: color ?? 'var(--svelte-ui-button-bg-filled)',

package/dist/components/Button.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 ButtonProps = {
     children: Snippet;
     buttonAttributes?: HTMLButtonAttributes | undefined;
     type?: HTMLButtonAttributes['type'];
@@ -52,6 +52,6 @@ type $$ComponentProps = {
     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

@@ -15,6 +15,69 @@
 	// =========================================================================
 	// 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,
@@ -76,85 +139,9 @@
 
 		// その他
 		...restProps
-	}: {
-		// Snippet
-		children?: Snippet;
-
-		// 基本プロパティ
-		name?: string;
-		value: boolean;
-		indeterminate?: boolean;
-
-		// HTML属性系
-		id?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
-		// スタイル/レイアウト
-		size?: 'small' | 'medium' | 'large';
+	}: CheckboxProps = $props();
 
-		// 状態/動作
-		disabled?: boolean;
-		required?: boolean;
-
-		// ARIA/アクセシビリティ
-		reducedMotion?: boolean;
-
-		// 入力イベント
-		onchange?: BivariantValueHandler<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();
-
-	// =========================================================================
-	// $derived
 	// =========================================================================
-	const containerClasses = $derived(
-		[
-			'checkbox',
-			`checkbox--${size}`,
-			disabled && 'checkbox--disabled',
-			reducedMotion && 'checkbox--no-motion'
-		]
-			.filter(Boolean)
-			.join(' ')
-	);
-
-	// =========================================================================
-
 	// Methods
 	// =========================================================================
 	const handleFocus = (event: FocusEvent) => {
@@ -283,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,7 +1,7 @@
 import { type Snippet } from 'svelte';
 import type { HTMLInputAttributes } from 'svelte/elements';
-import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler } from '../types/eventHandlers';
+export type CheckboxProps = {
     children?: Snippet;
     name?: string;
     value: boolean;
@@ -12,7 +12,7 @@ type $$ComponentProps = {
     disabled?: boolean;
     required?: boolean;
     reducedMotion?: boolean;
-    onchange?: BivariantValueHandler<boolean>;
+    onchange?: (value: boolean) => void;
     onfocus?: FocusHandler;
     onblur?: FocusHandler;
     onkeydown?: KeyboardHandler;
@@ -38,6 +38,6 @@ type $$ComponentProps = {
     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,3 +1,5 @@
+<!-- CheckboxGroup.svelte -->
+
 <script lang="ts">
 	import type { Option, OptionValue } from '../types/options';
 	import Checkbox from './Checkbox.svelte';
@@ -5,6 +7,33 @@
 	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 {
 		// 基本プロパティ
 		options,
@@ -26,43 +55,30 @@
 
 		// 入力イベント
 		onchange = () => {} // No params for type inference
-	}: {
-		// 基本プロパティ
-		options: Option[];
-		value: OptionValue[];
-
-		// スタイル/レイアウト
-		direction?: 'vertical' | 'horizontal';
-		gap?: string | number;
-		wrap?: boolean;
-		minOptionWidth?: string | number;
-		size?: 'small' | 'medium' | 'large';
-
-		// 状態/動作
-		disabled?: boolean;
-		required?: boolean;
+	}: CheckboxGroupProps = $props();
 
-		// ARIA/アクセシビリティ
-		reducedMotion?: boolean;
-
-		// 入力イベント
-		onchange?: BivariantValueHandler<OptionValue[]>;
-	} = $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>
 
@@ -75,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,6 +1,6 @@
 import type { Option, OptionValue } from '../types/options';
 import type { BivariantValueHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+export type CheckboxGroupProps = {
     options: Option[];
     value: OptionValue[];
     direction?: 'vertical' | 'horizontal';
@@ -13,6 +13,6 @@ type $$ComponentProps = {
     reducedMotion?: boolean;
     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;

package/dist/components/ColorPicker.svelte

@@ -18,6 +18,68 @@
 	// =========================================================================
 	// Props, States & Constants
 	// =========================================================================
+	export type ColorPickerProps = {
+		// 基本プロパティ
+		value: string;
+
+		// HTML属性系
+		id?: string;
+		inputAttributes?: HTMLInputAttributes | undefined;
+
+		// スタイル/レイアウト
+		customStyle?: string;
+		focusStyle?: 'background' | 'outline' | 'none';
+		fullWidth?: boolean;
+		rounded?: boolean;
+
+		// 状態/動作
+		disabled?: boolean;
+		readonly?: boolean;
+		clearable?: boolean;
+		clearButtonAriaLabel?: string;
+		iconVariant?: IconVariant;
+
+		// 入力イベント
+		onchange?: BivariantValueHandler<string>;
+		oninput?: BivariantValueHandler<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 {
 		// 基本プロパティ
 		value = $bindable(''),
@@ -78,67 +140,7 @@
 
 		// その他
 		...restProps
-	}: {
-		// 基本プロパティ
-		value: string;
-
-		// HTML属性系
-		id?: string;
-		inputAttributes?: HTMLInputAttributes | undefined;
-
-		// スタイル/レイアウト
-		customStyle?: string;
-		focusStyle?: 'background' | 'outline' | 'none';
-		fullWidth?: boolean;
-		rounded?: boolean;
-
-		// 状態/動作
-		disabled?: boolean;
-		readonly?: boolean;
-		clearable?: boolean;
-		clearButtonAriaLabel?: string;
-		iconVariant?: IconVariant;
-
-		// 入力イベント
-		onchange?: BivariantValueHandler<string>;
-		oninput?: BivariantValueHandler<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();
+	}: ColorPickerProps = $props();
 
 	let localValue: string | undefined = $state(value);
 	let prevValue: string = $state('');

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

@@ -1,7 +1,7 @@
 import type { HTMLInputAttributes } from 'svelte/elements';
 import type { IconVariant } from '../types/icon';
 import type { FocusHandler, KeyboardHandler, MouseHandler, TouchHandler, PointerHandler, BivariantValueHandler } from '../types/eventHandlers';
-type $$ComponentProps = {
+export type ColorPickerProps = {
     value: string;
     id?: string;
     inputAttributes?: HTMLInputAttributes | undefined;
@@ -41,6 +41,6 @@ type $$ComponentProps = {
     onpointercancel?: PointerHandler;
     [key: string]: any;
 };
-declare const ColorPicker: import("svelte").Component<$$ComponentProps, {}, "value">;
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "value">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;