@14ch/svelte-ui 0.0.1

package/dist/components/skeleton/SkeletonMedia.svelte

@@ -0,0 +1,115 @@
+<!-- SkeletonMedia.svelte -->
+
+<script lang="ts">
+	import SkeletonBox from './SkeletonBox.svelte';
+	import SkeletonText from './SkeletonText.svelte';
+	import { getStyleFromNumber } from '../../utils/style';
+	import type {
+		SkeletonMediaConfig,
+		SkeletonThumbnailConfig,
+		SkeletonTextConfig
+	} from '../../types/skeleton';
+
+	let {
+		width = '100%',
+		mediaConfig = {},
+		animated = true
+	}: {
+		width?: string | number;
+		mediaConfig?: Partial<SkeletonMediaConfig>;
+		animated?: boolean;
+	} = $props();
+
+	// デフォルト設定
+	const DEFAULT_MEDIA_CONFIG: Partial<SkeletonMediaConfig> = {
+		type: 'media',
+		layout: 'horizontal',
+		thumbnailConfig: { width: '160px', aspectRatio: '16/9' },
+		textConfig: { width: '100%', lines: 2 }
+	};
+
+	// マージされた設定
+	const mergedMediaConfig = $derived({
+		...DEFAULT_MEDIA_CONFIG,
+		...mediaConfig
+	});
+
+	// レイアウト方向を取得
+	const layoutDirection = $derived(mergedMediaConfig.layout || 'horizontal');
+
+	// デフォルト設定
+	const DEFAULT_THUMBNAIL_CONFIG: SkeletonThumbnailConfig = {
+		type: 'thumbnail',
+		width: '120px',
+		radius: 'var(--svelte-ui-skeleton-button-border-radius)',
+		customStyle: ''
+	};
+	const DEFAULT_TEXT_CONFIG: SkeletonTextConfig = {
+		type: 'text',
+		width: '100%',
+		lines: 2,
+		customStyle: ''
+	};
+
+	// マージされた設定
+	const mergedThumbnailConfig = $derived({
+		...DEFAULT_THUMBNAIL_CONFIG,
+		...(mergedMediaConfig.thumbnailConfig || {})
+	});
+
+	const mergedTextConfig = $derived({
+		...DEFAULT_TEXT_CONFIG,
+		...(mergedMediaConfig.textConfig || {})
+	});
+
+	const widthStyle = $derived(getStyleFromNumber(width));
+	const thumbnailWidthStyle = $derived(getStyleFromNumber(mergedThumbnailConfig.width));
+	const thumbnailHeightStyle = $derived(
+		mergedThumbnailConfig.height ? getStyleFromNumber(mergedThumbnailConfig.height) : ''
+	);
+	const textWidthStyle = $derived(getStyleFromNumber(mergedTextConfig.width));
+
+	// heightとaspectRatioの優先順位を制御
+	const finalThumbnailHeight = $derived(mergedThumbnailConfig.height ? thumbnailHeightStyle : '');
+	const finalThumbnailAspectRatio = $derived(
+		mergedThumbnailConfig.height ? undefined : mergedThumbnailConfig.aspectRatio
+	);
+</script>
+
+<div
+	class="skeleton-media"
+	class:skeleton-media--vertical={layoutDirection === 'vertical'}
+	style="width: {widthStyle}"
+>
+	<SkeletonBox
+		width={thumbnailWidthStyle}
+		{...finalThumbnailHeight && { height: finalThumbnailHeight }}
+		aspectRatio={finalThumbnailAspectRatio}
+		radius={mergedThumbnailConfig.radius}
+		{animated}
+		customStyle={mergedThumbnailConfig.customStyle}
+	/>
+	<SkeletonText
+		textConfig={{
+			width: textWidthStyle,
+			lines: mergedTextConfig.lines,
+			fontSize: mergedTextConfig.fontSize
+		}}
+		{animated}
+	/>
+</div>
+
+<style>
+	.skeleton-media {
+		display: grid;
+		grid-template-columns: auto 1fr;
+		gap: 16px;
+	}
+
+	.skeleton-media--vertical {
+		grid-template-columns: 1fr;
+		grid-template-rows: auto 1fr;
+		justify-items: center;
+		gap: 8px;
+	}
+</style>

package/dist/components/skeleton/SkeletonMedia.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { SkeletonMediaConfig } from '../../types/skeleton';
+type $$ComponentProps = {
+    width?: string | number;
+    mediaConfig?: Partial<SkeletonMediaConfig>;
+    animated?: boolean;
+};
+declare const SkeletonMedia: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonMedia = ReturnType<typeof SkeletonMedia>;
+export default SkeletonMedia;

package/dist/components/skeleton/SkeletonText.svelte

@@ -0,0 +1,75 @@
+<!-- SkeletonText.svelte -->
+
+<script lang="ts">
+	import SkeletonBox from './SkeletonBox.svelte';
+	import { getStyleFromNumber } from '../../utils/style';
+	import type { SkeletonTextConfig } from '../../types/skeleton';
+
+	// =========================================================================
+	// Props
+	// =========================================================================
+
+	let {
+		// 基本プロパティ
+		textConfig = {},
+		animated = true
+	}: {
+		textConfig?: Partial<SkeletonTextConfig>;
+		animated?: boolean;
+	} = $props();
+
+	// デフォルト設定
+	const DEFAULT_TEXT_CONFIG: SkeletonTextConfig = {
+		type: 'text',
+		width: '100%',
+		lines: 1,
+		customStyle: ''
+	};
+
+	// マージされた設定
+	const mergedTextConfig = $derived({
+		...DEFAULT_TEXT_CONFIG,
+		...textConfig
+	});
+
+	// =========================================================================
+	// State
+	// =========================================================================
+
+	let containerRef: HTMLDivElement;
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+
+	const widthStyle = $derived(getStyleFromNumber(mergedTextConfig.width));
+	const fontSizeStyle = $derived(getStyleFromNumber(mergedTextConfig.fontSize));
+</script>
+
+<div
+	bind:this={containerRef}
+	class="skeleton-text"
+	style="font-size: {fontSizeStyle}; {mergedTextConfig.customStyle}"
+>
+	{#each Array(mergedTextConfig.lines) as _, index}
+		<div class="skeleton-text__line" style="width: {widthStyle}">
+			<SkeletonBox
+				width="100%"
+				height="1em"
+				radius="var(--svelte-ui-skeleton-text-border-radius)"
+				{animated}
+			/>
+		</div>
+	{/each}
+</div>
+
+<style>.skeleton-text {
+  display: block;
+  width: 100%;
+}
+
+.skeleton-text__line {
+  display: inline-block;
+  position: relative;
+  width: 100%;
+}</style>

package/dist/components/skeleton/SkeletonText.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { SkeletonTextConfig } from '../../types/skeleton';
+type $$ComponentProps = {
+    textConfig?: Partial<SkeletonTextConfig>;
+    animated?: boolean;
+};
+declare const SkeletonText: import("svelte").Component<$$ComponentProps, {}, "">;
+type SkeletonText = ReturnType<typeof SkeletonText>;
+export default SkeletonText;

package/dist/index.d.ts

@@ -0,0 +1,42 @@
+export { default as Button } from './components/Button.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as CheckboxGroup } from './components/CheckboxGroup.svelte';
+export { default as ColorPicker } from './components/ColorPicker.svelte';
+export { default as Combobox } from './components/Combobox.svelte';
+export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
+export { default as Datepicker } from './components/Datepicker.svelte';
+export { default as DatepickerCalendar } from './components/DatepickerCalendar.svelte';
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as Drawer } from './components/Drawer.svelte';
+export { default as Fab } from './components/Fab.svelte';
+export { default as FileUploader } from './components/FileUploader.svelte';
+export { default as Icon } from './components/Icon.svelte';
+export { default as IconButton } from './components/IconButton.svelte';
+export { default as ImageUploader } from './components/ImageUploader.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
+export { default as Modal } from './components/Modal.svelte';
+export { default as Pagination } from './components/Pagination.svelte';
+export { default as Popup } from './components/Popup.svelte';
+export { default as PopupMenu } from './components/PopupMenu.svelte';
+export { default as PopupMenuButton } from './components/PopupMenuButton.svelte';
+export { default as Radio } from './components/Radio.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Slider } from './components/Slider.svelte';
+export { default as Snackbar } from './components/Snackbar.svelte';
+export { default as SnackbarItem } from './components/SnackbarItem.svelte';
+export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
+export { default as SkeletonText } from './components/skeleton/SkeletonText.svelte';
+export { default as SkeletonBox } from './components/skeleton/SkeletonBox.svelte';
+export { default as SkeletonAvatar } from './components/skeleton/SkeletonAvatar.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Tab } from './components/Tab.svelte';
+export { default as TabItem } from './components/TabItem.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+export * from './utils/accessibility';
+export * from './utils/formatText';
+export * from './utils/mobile';
+export * from './utils/snackbar.svelte';
+export * from './utils/style';
+export type { MenuItem } from './types/menuItem';

package/dist/index.js

@@ -0,0 +1,43 @@
+// Components
+export { default as Button } from './components/Button.svelte';
+export { default as Checkbox } from './components/Checkbox.svelte';
+export { default as CheckboxGroup } from './components/CheckboxGroup.svelte';
+export { default as ColorPicker } from './components/ColorPicker.svelte';
+export { default as Combobox } from './components/Combobox.svelte';
+export { default as ConfirmDialog } from './components/ConfirmDialog.svelte';
+export { default as Datepicker } from './components/Datepicker.svelte';
+export { default as DatepickerCalendar } from './components/DatepickerCalendar.svelte';
+export { default as Dialog } from './components/Dialog.svelte';
+export { default as Drawer } from './components/Drawer.svelte';
+export { default as Fab } from './components/Fab.svelte';
+export { default as FileUploader } from './components/FileUploader.svelte';
+export { default as Icon } from './components/Icon.svelte';
+export { default as IconButton } from './components/IconButton.svelte';
+export { default as ImageUploader } from './components/ImageUploader.svelte';
+export { default as Input } from './components/Input.svelte';
+export { default as LoadingSpinner } from './components/LoadingSpinner.svelte';
+export { default as Modal } from './components/Modal.svelte';
+export { default as Pagination } from './components/Pagination.svelte';
+export { default as Popup } from './components/Popup.svelte';
+export { default as PopupMenu } from './components/PopupMenu.svelte';
+export { default as PopupMenuButton } from './components/PopupMenuButton.svelte';
+export { default as Radio } from './components/Radio.svelte';
+export { default as RadioGroup } from './components/RadioGroup.svelte';
+export { default as Select } from './components/Select.svelte';
+export { default as Slider } from './components/Slider.svelte';
+export { default as Snackbar } from './components/Snackbar.svelte';
+export { default as SnackbarItem } from './components/SnackbarItem.svelte';
+export { default as Skeleton } from './components/skeleton/Skeleton.svelte';
+export { default as SkeletonText } from './components/skeleton/SkeletonText.svelte';
+export { default as SkeletonBox } from './components/skeleton/SkeletonBox.svelte';
+export { default as SkeletonAvatar } from './components/skeleton/SkeletonAvatar.svelte';
+export { default as Switch } from './components/Switch.svelte';
+export { default as Tab } from './components/Tab.svelte';
+export { default as TabItem } from './components/TabItem.svelte';
+export { default as Textarea } from './components/Textarea.svelte';
+// Utils
+export * from './utils/accessibility';
+export * from './utils/formatText';
+export * from './utils/mobile';
+export * from './utils/snackbar.svelte';
+export * from './utils/style';

package/dist/types/icon.d.ts

@@ -0,0 +1,4 @@
+export type IconVariant = 'outlined' | 'rounded' | 'sharp';
+export type IconWeight = 100 | 200 | 300 | 400 | 500 | 600 | 700;
+export type IconGrade = number;
+export type IconOpticalSize = number;

package/dist/types/icon.js

@@ -0,0 +1,2 @@
+// Icon関連の型定義
+export {};

package/dist/types/menuItem.d.ts

@@ -0,0 +1,8 @@
+export type MenuItem = {
+    title: string;
+    href?: string;
+    callback?: () => void;
+    icon?: string;
+    matchingPath?: string[];
+    strictMatch?: boolean;
+};

package/dist/types/menuItem.js

@@ -0,0 +1 @@
+export {};

package/dist/types/options.d.ts

@@ -0,0 +1,6 @@
+export type Option = {
+    value: OptionValue;
+    label: string;
+    disabled?: boolean;
+};
+export type OptionValue = string | number | null;

package/dist/types/options.js

@@ -0,0 +1,4 @@
+// =========================================================================
+// Common Option Types
+// =========================================================================
+export {};

package/dist/types/skeleton.d.ts

@@ -0,0 +1,77 @@
+export type SkeletonPatternConfig = SkeletonBoxConfig | SkeletonTextConfig | SkeletonAvatarConfig | SkeletonMediaConfig | SkeletonButtonConfig | SkeletonHeadingConfig | SkeletonPresetConfig;
+type SkeletonPatternCommonConfig = {
+    customStyle?: string;
+    repeat?: number;
+    repeatDirection?: 'horizontal' | 'vertical';
+    repeatGap?: string | number;
+};
+export type SkeletonBoxConfig = SkeletonPatternCommonConfig & {
+    type: 'box';
+    width?: string | number;
+    height?: string | number;
+    radius?: string | number;
+};
+export type SkeletonTextConfig = SkeletonPatternCommonConfig & {
+    type: 'text';
+    width?: string | number;
+    lines?: number;
+    fontSize?: string | number;
+    radius?: string | number;
+};
+export type SkeletonAvatarConfig = SkeletonPatternCommonConfig & {
+    type: 'avatar';
+    avatarImageConfig?: SkeletonAvatarImageConfig;
+    textConfig?: Partial<SkeletonTextConfig>;
+    showName?: boolean;
+};
+export type SkeletonAvatarImageConfig = SkeletonPatternCommonConfig & {
+    type: 'avatar-image';
+    size?: string | number;
+    radius?: string | number;
+};
+export type SkeletonMediaConfig = SkeletonPatternCommonConfig & {
+    type: 'media';
+    width?: string | number;
+    layout?: 'horizontal' | 'vertical';
+    thumbnailConfig?: Partial<SkeletonThumbnailConfig>;
+    textConfig?: Partial<SkeletonTextConfig>;
+};
+export type SkeletonThumbnailConfig = SkeletonPatternCommonConfig & {
+    type: 'thumbnail';
+    width?: string | number;
+    height?: string | number;
+    aspectRatio?: string | number;
+    radius?: string | number;
+};
+export type SkeletonButtonConfig = SkeletonPatternCommonConfig & {
+    type: 'button';
+    width?: string | number;
+    height?: string | number;
+    radius?: string | number;
+    align?: 'left' | 'center' | 'right';
+};
+export type SkeletonHeadingConfig = SkeletonPatternCommonConfig & {
+    type: 'heading';
+    width?: string | number;
+    fontSize?: string | number;
+    radius?: string | number;
+};
+export type SkeletonPresetConfig = SkeletonPatternCommonConfig & {
+    type: 'article-detail' | 'article-list' | 'product-list' | 'video-list' | 'user-list' | 'button-group';
+    layout?: 'horizontal' | 'vertical';
+    width?: string | number;
+    height?: string | number;
+    aspectRatio?: string | number;
+    radius?: string | number;
+    lines?: number;
+    fontSize?: string | number;
+    showName?: boolean;
+    align?: 'left' | 'center' | 'right';
+    thumbnailConfig?: Partial<SkeletonThumbnailConfig>;
+    textConfig?: Partial<SkeletonTextConfig>;
+    avatarImageConfig?: SkeletonAvatarImageConfig;
+};
+export declare const isPresetPattern: (pattern: SkeletonPatternConfig) => pattern is SkeletonPresetConfig;
+export declare const isMediaPattern: (pattern: SkeletonPatternConfig) => pattern is SkeletonMediaConfig;
+export declare const isAvatarPattern: (pattern: SkeletonPatternConfig) => pattern is SkeletonAvatarConfig;
+export {};

package/dist/types/skeleton.js

@@ -0,0 +1,19 @@
+// =========================================================================
+// Type Guards
+// =========================================================================
+export const isPresetPattern = (pattern) => {
+    return [
+        'article-detail',
+        'article-list',
+        'product-list',
+        'video-list',
+        'user-list',
+        'button-group'
+    ].includes(pattern.type);
+};
+export const isMediaPattern = (pattern) => {
+    return pattern.type === 'media';
+};
+export const isAvatarPattern = (pattern) => {
+    return pattern.type === 'avatar';
+};

package/dist/utils/accessibility.d.ts

@@ -0,0 +1,48 @@
+/**
+ * スクリーンリーダー向けアナウンス機能
+ * アクセシビリティを向上させるために、UIの状態変化をスクリーンリーダーに通知する
+ */
+/**
+ * スクリーンリーダーにメッセージをアナウンスする
+ * @param message - アナウンスするメッセージ
+ * @param priority - アナウンスの優先度（'polite' | 'assertive'）
+ * @param delay - 要素を削除するまでの時間（ミリ秒）
+ */
+export declare const announceToScreenReader: (message: string, priority?: "polite" | "assertive", delay?: number) => void;
+/**
+ * コンポーネントの開閉状態をアナウンスする
+ * @param componentName - コンポーネント名
+ * @param isOpen - 開閉状態
+ * @param title - タイトル（任意）
+ */
+export declare const announceOpenClose: (componentName: string, isOpen: boolean, title?: string) => void;
+/**
+ * 値の変更をアナウンスする
+ * @param field - フィールド名
+ * @param value - 新しい値
+ * @param unit - 単位（任意）
+ */
+export declare const announceValueChange: (field: string, value: string | number, unit?: string) => void;
+/**
+ * エラーメッセージをアナウンスする
+ * @param message - エラーメッセージ
+ */
+export declare const announceError: (message: string) => void;
+/**
+ * 成功メッセージをアナウンスする
+ * @param message - 成功メッセージ
+ */
+export declare const announceSuccess: (message: string) => void;
+/**
+ * 読み込み状態をアナウンスする
+ * @param isLoading - 読み込み状態
+ * @param message - カスタムメッセージ（任意）
+ */
+export declare const announceLoading: (isLoading: boolean, message?: string) => void;
+/**
+ * 選択状態をアナウンスする
+ * @param item - 選択されたアイテム
+ * @param total - 全体数（任意）
+ * @param index - インデックス（任意）
+ */
+export declare const announceSelection: (item: string, total?: number, index?: number) => void;

package/dist/utils/accessibility.js

@@ -0,0 +1,87 @@
+/**
+ * スクリーンリーダー向けアナウンス機能
+ * アクセシビリティを向上させるために、UIの状態変化をスクリーンリーダーに通知する
+ */
+/**
+ * スクリーンリーダーにメッセージをアナウンスする
+ * @param message - アナウンスするメッセージ
+ * @param priority - アナウンスの優先度（'polite' | 'assertive'）
+ * @param delay - 要素を削除するまでの時間（ミリ秒）
+ */
+export const announceToScreenReader = (message, priority = 'polite', delay = 1000) => {
+    if (!message.trim())
+        return;
+    const announcement = document.createElement('div');
+    announcement.setAttribute('aria-live', priority);
+    announcement.setAttribute('aria-atomic', 'true');
+    announcement.className = 'sr-only';
+    announcement.textContent = message;
+    document.body.appendChild(announcement);
+    // アナウンス後に削除
+    setTimeout(() => {
+        if (document.body.contains(announcement)) {
+            document.body.removeChild(announcement);
+        }
+    }, delay);
+};
+/**
+ * コンポーネントの開閉状態をアナウンスする
+ * @param componentName - コンポーネント名
+ * @param isOpen - 開閉状態
+ * @param title - タイトル（任意）
+ */
+export const announceOpenClose = (componentName, isOpen, title) => {
+    const displayName = title || componentName;
+    const status = isOpen ? 'opened' : 'closed';
+    announceToScreenReader(`${displayName} ${status}`);
+};
+/**
+ * 値の変更をアナウンスする
+ * @param field - フィールド名
+ * @param value - 新しい値
+ * @param unit - 単位（任意）
+ */
+export const announceValueChange = (field, value, unit) => {
+    const unitText = unit ? ` ${unit}` : '';
+    announceToScreenReader(`${field} changed to ${value}${unitText}`);
+};
+/**
+ * エラーメッセージをアナウンスする
+ * @param message - エラーメッセージ
+ */
+export const announceError = (message) => {
+    announceToScreenReader(`Error: ${message}`, 'assertive');
+};
+/**
+ * 成功メッセージをアナウンスする
+ * @param message - 成功メッセージ
+ */
+export const announceSuccess = (message) => {
+    announceToScreenReader(`Success: ${message}`, 'polite');
+};
+/**
+ * 読み込み状態をアナウンスする
+ * @param isLoading - 読み込み状態
+ * @param message - カスタムメッセージ（任意）
+ */
+export const announceLoading = (isLoading, message) => {
+    if (isLoading) {
+        announceToScreenReader(message || 'Loading started', 'polite');
+    }
+    else {
+        announceToScreenReader(message || 'Loading completed', 'polite');
+    }
+};
+/**
+ * 選択状態をアナウンスする
+ * @param item - 選択されたアイテム
+ * @param total - 全体数（任意）
+ * @param index - インデックス（任意）
+ */
+export const announceSelection = (item, total, index) => {
+    let message = `${item} selected`;
+    if (typeof index === 'number' && typeof total === 'number') {
+        message += `, ${index + 1} of ${total}`;
+    }
+    announceToScreenReader(message);
+};

package/dist/utils/formatText.d.ts

@@ -0,0 +1,4 @@
+export declare const convertToHtml: (value: string | number | null) => string | number | null;
+export declare const convertToLink: (str: string) => string;
+export declare const escapeHtml: (value: string) => string;
+export declare const convertToHtmlWithLink: (value: string | number | null) => string | number | null;

package/dist/utils/formatText.js

@@ -0,0 +1,44 @@
+import DOMPurify from 'dompurify';
+export const convertToHtml = (value) => {
+    if (typeof value === 'string') {
+        const escapedValue = escapeHtml(value);
+        let html = escapedValue
+            .replace(/ +/g, (match) => ' '.repeat(match.length))
+            .replace(/\n/g, '<br />');
+        // 最後の行が空だったら空白を追加
+        const lines = html.split('<br />');
+        if (lines.length > 0 && lines[lines.length - 1] === '') {
+            html += '&nbsp;';
+        }
+        return html;
+    }
+    else {
+        return value;
+    }
+};
+export const convertToLink = (str) => {
+    let text = str;
+    text = text.replace(/((http|https|ftp):\/\/[\w?=&./#~%-;,*!$'():@+]+(?![\w\s?&./#~%";,=*'()-]*>))/g, '<a href="$1" target="_blank" rel="noopener noreferrer">$1</a> ');
+    return text;
+};
+export const escapeHtml = (value) => {
+    const map = {
+        '&': '&amp;',
+        '<': '&lt;',
+        '>': '&gt;',
+        '"': '&quot;',
+        "'": '&#039;'
+    };
+    const escapedValue = value.replace(/[&<>"']/g, (m) => map[m]);
+    return DOMPurify.sanitize(escapedValue);
+};
+export const convertToHtmlWithLink = (value) => {
+    if (typeof value === 'string') {
+        const html = convertToHtml(value);
+        const htmlWithLink = convertToLink(html);
+        return htmlWithLink;
+    }
+    else {
+        return value;
+    }
+};

package/dist/utils/mobile.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Mobile detection and utilities
+ */
+export declare const isMobileDevice: () => boolean;
+export declare const getViewportSize: () => {
+    width: number;
+    height: number;
+};
+export declare const disableBodyScroll: () => () => void;