@14ch/svelte-ui 0.0.1

package/dist/components/Switch.svelte

@@ -0,0 +1,454 @@
+<!-- Switch.svelte -->
+
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { HTMLInputAttributes } from 'svelte/elements';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// Snippet
+		children,
+
+		// 基本プロパティ
+		value = $bindable(false),
+
+		// HTML属性系
+		id = `switch-${Math.random().toString(36).substring(2, 15)}`,
+		inputAttributes,
+
+		// スタイル/レイアウト
+		size = 'medium',
+
+		// 状態/動作
+		disabled = false,
+		required = false,
+		reducedMotion = false,
+
+		// フォーカスイベント
+		onfocus = () => {}, // No params for type inference
+		onblur = () => {}, // No params for type inference
+
+		// キーボードイベント
+		onkeydown = () => {}, // No params for type inference
+		onkeyup = () => {}, // No params for type inference
+
+		// マウスイベント
+		onclick = () => {}, // No params for type inference
+		onmousedown = () => {}, // No params for type inference
+		onmouseup = () => {}, // No params for type inference
+		onmouseenter = () => {}, // No params for type inference
+		onmouseleave = () => {}, // No params for type inference
+		onmouseover = () => {}, // No params for type inference
+		onmouseout = () => {}, // No params for type inference
+		oncontextmenu = () => {}, // No params for type inference
+		onauxclick = () => {}, // No params for type inference
+
+		// タッチイベント
+		ontouchstart = () => {}, // No params for type inference
+		ontouchend = () => {}, // No params for type inference
+		ontouchmove = () => {}, // No params for type inference
+		ontouchcancel = () => {}, // No params for type inference
+
+		// ポインターイベント
+		onpointerdown = () => {}, // No params for type inference
+		onpointerup = () => {}, // No params for type inference
+		onpointerenter = () => {}, // No params for type inference
+		onpointerleave = () => {}, // No params for type inference
+		onpointermove = () => {}, // No params for type inference
+		onpointercancel = () => {}, // No params for type inference
+
+		// 変更イベント
+		onchange = (value: boolean) => {},
+
+		// その他
+		...restProps
+	}: {
+		// 基本プロパティ
+		value?: boolean;
+
+		// ラベル
+		children?: Snippet;
+
+		// HTML属性系
+		id?: string;
+		inputAttributes?: HTMLInputAttributes | undefined;
+
+		// サイズ
+		size?: 'small' | 'medium' | 'large';
+
+		// 無効状態
+		disabled?: boolean;
+
+		// 必須項目
+		required?: 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
+
+		// 変更イベント
+		onchange?: (value: boolean) => void;
+
+		// その他
+		[key: string]: any;
+	} = $props();
+
+	let inputRef: HTMLInputElement | undefined = $state();
+	let errorId = `switch-error-${Math.random().toString(36).substring(2, 15)}`;
+
+	// =========================================================================
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	const handleFocus = (event: FocusEvent) => {
+		if (disabled) return;
+		onfocus?.(event);
+	};
+
+	const handleBlur = (event: FocusEvent) => {
+		if (disabled) return;
+		onblur?.(event);
+	};
+
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (disabled) return;
+		onkeydown?.(event);
+		if (event.key === 'Enter' || event.key === ' ') {
+			event.preventDefault();
+			value = !value;
+			onchange?.(value);
+		}
+	};
+
+	const handleKeyUp = (event: KeyboardEvent) => {
+		if (disabled) return;
+		onkeyup?.(event);
+	};
+
+	const handleClick = (event: MouseEvent) => {
+		if (disabled) return;
+		onclick?.(event);
+		// スイッチの状態を切り替え
+		value = !value;
+		onchange?.(value);
+	};
+
+	const handleMouseDown = (event: MouseEvent) => {
+		if (disabled) return;
+		onmousedown?.(event);
+	};
+
+	const handleMouseUp = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseup?.(event);
+	};
+
+	const handleMouseEnter = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseenter?.(event);
+	};
+
+	const handleMouseLeave = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseleave?.(event);
+	};
+
+	const handleMouseOver = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseover?.(event);
+	};
+
+	const handleMouseOut = (event: MouseEvent) => {
+		if (disabled) return;
+		onmouseout?.(event);
+	};
+
+	const handleContextMenu = (event: MouseEvent) => {
+		if (disabled) return;
+		oncontextmenu?.(event);
+	};
+
+	const handleAuxClick = (event: MouseEvent) => {
+		if (disabled) return;
+		onauxclick?.(event);
+	};
+
+	const handleTouchStart = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchstart?.(event);
+	};
+
+	const handleTouchEnd = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchend?.(event);
+	};
+
+	const handleTouchMove = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchmove?.(event);
+	};
+
+	const handleTouchCancel = (event: TouchEvent) => {
+		if (disabled) return;
+		ontouchcancel?.(event);
+	};
+
+	const handlePointerDown = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerdown?.(event);
+	};
+
+	const handlePointerUp = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerup?.(event);
+	};
+
+	const handlePointerEnter = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerenter?.(event);
+	};
+
+	const handlePointerLeave = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointerleave?.(event);
+	};
+
+	const handlePointerMove = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointermove?.(event);
+	};
+
+	const handlePointerCancel = (event: PointerEvent) => {
+		if (disabled) return;
+		onpointercancel?.(event);
+	};
+
+	const handleChange = (event: Event) => {
+		if (disabled) return;
+		const target = event.target as HTMLInputElement;
+		value = target.checked;
+		onchange?.(value);
+	};
+</script>
+
+<div
+	class="switch"
+	class:switch--small={size === 'small'}
+	class:switch--medium={size === 'medium'}
+	class:switch--large={size === 'large'}
+	class:switch--disabled={disabled}
+	class:switch--checked={value}
+	class:switch--reduced-motion={reducedMotion}
+	data-testid="switch"
+>
+	<input
+		bind:this={inputRef}
+		bind:checked={value}
+		type="checkbox"
+		class="switch-input"
+		{disabled}
+		{required}
+		{id}
+		{...inputAttributes}
+		onchange={handleChange}
+		onfocus={handleFocus}
+		onblur={handleBlur}
+		onkeydown={handleKeyDown}
+		onkeyup={handleKeyUp}
+		onclick={handleClick}
+		onmousedown={handleMouseDown}
+		onmouseup={handleMouseUp}
+		onmouseenter={handleMouseEnter}
+		onmouseleave={handleMouseLeave}
+		onmouseover={handleMouseOver}
+		onmouseout={handleMouseOut}
+		oncontextmenu={handleContextMenu}
+		onauxclick={handleAuxClick}
+		ontouchstart={handleTouchStart}
+		ontouchend={handleTouchEnd}
+		ontouchmove={handleTouchMove}
+		ontouchcancel={handleTouchCancel}
+		onpointerdown={handlePointerDown}
+		onpointerup={handlePointerUp}
+		onpointerenter={handlePointerEnter}
+		onpointerleave={handlePointerLeave}
+		onpointermove={handlePointerMove}
+		onpointercancel={handlePointerCancel}
+		{...restProps}
+	/>
+
+	<label for={id} class="switch__track">
+		<span class="switch-thumb"></span>
+	</label>
+
+	<label for={id} class="switch__label" class:switch__label--disabled={disabled}>
+		{#if children}
+			{@render children()}
+		{/if}
+	</label>
+</div>
+
+<style>@charset "UTF-8";
+/* =============================================
+ * Base Styles
+  * ============================================= */
+.switch {
+  display: inline-flex;
+  align-items: center;
+  font-family: var(--svelte-ui-font-family);
+  font-size: inherit;
+  line-height: var(--svelte-ui-line-height);
+  color: var(--svelte-ui-text-color);
+}
+
+.switch-input {
+  position: absolute;
+  opacity: 0;
+  width: 1px;
+  height: 1px;
+  margin: -1px;
+  padding: 0;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+.switch__label {
+  display: inline-flex;
+  align-items: center;
+  padding-left: var(--svelte-ui-switch-gap);
+  cursor: pointer;
+  user-select: none;
+}
+.switch__label--disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.switch__track {
+  position: relative;
+  width: var(--switch-width);
+  height: var(--switch-height);
+  background-color: var(--svelte-ui-switch-inactive-color);
+  border-radius: var(--switch-border-radius);
+  transition: background-color var(--svelte-ui-transition-duration) ease, filter var(--svelte-ui-transition-duration) ease;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.switch--checked .switch__track {
+  background-color: var(--switch-active-color, var(--svelte-ui-switch-active-color));
+}
+.switch--disabled .switch__track {
+  opacity: var(--svelte-ui-switch-disabled-opacity);
+}
+
+.switch-thumb {
+  position: absolute;
+  top: var(--switch-thumb-margin);
+  left: var(--switch-thumb-margin);
+  width: var(--switch-thumb-size);
+  height: var(--switch-thumb-size);
+  background-color: var(--svelte-ui-switch-thumb-color);
+  border-radius: var(--switch-thumb-border-radius);
+  transition: transform var(--svelte-ui-transition-duration) ease;
+}
+.switch--checked .switch-thumb {
+  transform: translateX(calc(var(--switch-width) - var(--switch-thumb-size) - var(--switch-thumb-margin) * 2));
+}
+.switch--disabled .switch-thumb {
+  opacity: var(--svelte-ui-switch-disabled-opacity);
+}
+
+/* =========================================================================
+ * Size Variants
+ * ========================================================================= */
+.switch--small {
+  --switch-width: var(--svelte-ui-switch-width-sm);
+  --switch-height: var(--svelte-ui-switch-height-sm);
+  --switch-thumb-size: var(--svelte-ui-switch-thumb-size-sm);
+  --switch-thumb-margin: var(--svelte-ui-switch-thumb-margin);
+  --switch-border-radius: var(--svelte-ui-switch-border-radius);
+  --switch-thumb-border-radius: var(--svelte-ui-switch-thumb-border-radius);
+}
+
+.switch--medium {
+  --switch-width: var(--svelte-ui-switch-width);
+  --switch-height: var(--svelte-ui-switch-height);
+  --switch-thumb-size: var(--svelte-ui-switch-thumb-size);
+  --switch-thumb-margin: var(--svelte-ui-switch-thumb-margin);
+  --switch-border-radius: var(--svelte-ui-switch-border-radius);
+  --switch-thumb-border-radius: var(--svelte-ui-switch-thumb-border-radius);
+}
+
+.switch--large {
+  --switch-width: var(--svelte-ui-switch-width-lg);
+  --switch-height: var(--svelte-ui-switch-height-lg);
+  --switch-thumb-size: var(--svelte-ui-switch-thumb-size-lg);
+  --switch-thumb-margin: var(--svelte-ui-switch-thumb-margin);
+  --switch-border-radius: var(--svelte-ui-switch-border-radius);
+  --switch-thumb-border-radius: var(--svelte-ui-switch-thumb-border-radius);
+}
+
+/* =============================================
+* フォーカス状態
+* ============================================= */
+.switch-input:focus-visible + .switch__track {
+  outline: 2px solid var(--svelte-ui-focus-color);
+  outline-offset: 2px;
+}
+
+/* =========================================================================
+ * Motion & Media Queries
+ * ========================================================================= */
+/* Mobile touch targets */
+@media (hover: none) and (pointer: coarse) {
+  .switch__label {
+    min-height: var(--svelte-ui-touch-target);
+  }
+  .switch--small .switch__label {
+    min-height: var(--svelte-ui-touch-target-sm);
+  }
+  .switch--large .switch__label {
+    min-height: var(--svelte-ui-touch-target-lg);
+  }
+}
+.switch--reduced-motion * {
+  transition: none !important;
+  animation: none !important;
+}</style>

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

@@ -0,0 +1,40 @@
+import type { Snippet } from 'svelte';
+import type { HTMLInputAttributes } from 'svelte/elements';
+type $$ComponentProps = {
+    value?: boolean;
+    children?: Snippet;
+    id?: string;
+    inputAttributes?: HTMLInputAttributes | undefined;
+    size?: 'small' | 'medium' | 'large';
+    disabled?: boolean;
+    required?: 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;
+    onchange?: (value: boolean) => void;
+    [key: string]: any;
+};
+declare const Switch: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Switch = ReturnType<typeof Switch>;
+export default Switch;

package/dist/components/Tab.svelte

@@ -0,0 +1,193 @@
+<!-- Tab.svelte -->
+
+<script lang="ts">
+	import TabItem from './TabItem.svelte';
+	import type { MenuItem } from '../types/menuItem';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+
+	let {
+		// 基本プロパティ
+		tabItems = [],
+		pathPrefix = '',
+		customPathMatcher,
+
+		// スタイル/レイアウト
+		textColor = 'var(--svelte-ui-text-subtle-color)',
+		selectedTextColor = 'var(--svelte-ui-primary-color)',
+		selectedBarColor = 'var(--svelte-ui-primary-color)',
+
+		// ARIA/アクセシビリティ
+		ariaLabel = 'Tabs',
+		ariaLabelledby
+	}: {
+		// 基本プロパティ
+		tabItems: MenuItem[];
+		pathPrefix?: string;
+		customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+
+		// スタイル/レイアウト
+		textColor?: string;
+		selectedTextColor?: string;
+		selectedBarColor?: string;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaLabelledby?: string;
+	} = $props();
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+
+	// ブラウザ標準APIを使用した現在パス取得
+	const getCurrentPath = () => {
+		if (typeof window !== 'undefined') {
+			return window.location.pathname;
+		}
+		return '';
+	};
+
+	// パスの正規化処理
+	const normalizePath = (path: string): string => {
+		if (!pathPrefix) return path;
+
+		// pathPrefixが設定されている場合、それを除去
+		if (path.startsWith(pathPrefix)) {
+			const normalized = path.substring(pathPrefix.length);
+			return normalized.startsWith('/') ? normalized : '/' + normalized;
+		}
+
+		return path;
+	};
+
+	// パスマッチング関数
+	const matchPath = (currentPath: string, itemHref: string, item: MenuItem): boolean => {
+		if (customPathMatcher) {
+			return customPathMatcher(currentPath, itemHref, item);
+		}
+
+		const normalizedCurrentPath = normalizePath(currentPath);
+
+		// matchingPathのチェック
+		if (item.matchingPath?.some((href) => normalizedCurrentPath.startsWith(href))) {
+			return true;
+		}
+
+		// strictMatchの場合
+		if (item.strictMatch) {
+			return normalizedCurrentPath === itemHref;
+		}
+
+		// ルートパス (/) の特別な処理
+		if (itemHref === '/') {
+			return normalizedCurrentPath === '/';
+		}
+
+		// その他のパス
+		return normalizedCurrentPath !== '' && normalizedCurrentPath.startsWith(itemHref);
+	};
+
+	// シンプルなキーボードナビゲーション
+	const handleKeyDown = (event: KeyboardEvent) => {
+		if (tabItems.length === 0) return;
+
+		const tabList = event.currentTarget as HTMLElement;
+		const tabs = Array.from(tabList.querySelectorAll('a[role="tab"]')) as HTMLElement[];
+		const currentTab = event.target as HTMLElement;
+		const currentIndex = tabs.indexOf(currentTab);
+
+		if (currentIndex === -1) return;
+
+		let nextIndex = currentIndex;
+
+		switch (event.key) {
+			case 'ArrowLeft':
+				event.preventDefault();
+				nextIndex = currentIndex > 0 ? currentIndex - 1 : tabs.length - 1;
+				break;
+			case 'ArrowRight':
+				event.preventDefault();
+				nextIndex = currentIndex < tabs.length - 1 ? currentIndex + 1 : 0;
+				break;
+			case 'Home':
+				event.preventDefault();
+				nextIndex = 0;
+				break;
+			case 'End':
+				event.preventDefault();
+				nextIndex = tabs.length - 1;
+				break;
+			default:
+				return;
+		}
+
+		tabs[nextIndex]?.focus();
+	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+
+	// 現在のパスを取得
+	const currentPath = $derived(getCurrentPath());
+
+	// アクティブなタブのインデックスを現在のパスに基づいて計算
+	const selectedTabIndex = $derived.by(() => {
+		for (let i = 0; i < tabItems.length; i++) {
+			const item = tabItems[i];
+			if (!item.href) continue;
+
+			if (matchPath(currentPath, item.href, item)) {
+				return i;
+			}
+		}
+		return -1;
+	});
+</script>
+
+<div
+	class="tab"
+	role="tablist"
+	aria-label={ariaLabelledby ? undefined : ariaLabel}
+	aria-labelledby={ariaLabelledby}
+	tabindex="-1"
+	onkeydown={handleKeyDown}
+	data-testid="tab"
+>
+	{#each tabItems as tabItem, index}
+		<div class="tab__item">
+			<TabItem
+				{tabItem}
+				isSelected={index === selectedTabIndex}
+				{textColor}
+				{selectedTextColor}
+				{selectedBarColor}
+			/>
+		</div>
+	{/each}
+</div>
+
+<style>.tab {
+  display: flex;
+  justify-content: start;
+  width: 100%;
+  height: 100%;
+  overflow-x: auto;
+  overflow-y: visible;
+  -ms-overflow-style: none;
+  overscroll-behavior: contain;
+  box-sizing: border-box;
+}
+
+.tab::-webkit-scrollbar {
+  display: none;
+}
+
+.tab__item {
+  display: block;
+  height: 100%;
+  flex-shrink: 0;
+}</style>

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

@@ -0,0 +1,14 @@
+import type { MenuItem } from '../types/menuItem';
+type $$ComponentProps = {
+    tabItems: MenuItem[];
+    pathPrefix?: string;
+    customPathMatcher?: (currentPath: string, itemHref: string, item: MenuItem) => boolean;
+    textColor?: string;
+    selectedTextColor?: string;
+    selectedBarColor?: string;
+    ariaLabel?: string;
+    ariaLabelledby?: string;
+};
+declare const Tab: import("svelte").Component<$$ComponentProps, {}, "">;
+type Tab = ReturnType<typeof Tab>;
+export default Tab;