@14ch/svelte-ui 0.0.1

package/README.md

@@ -0,0 +1,359 @@
+# Svelte UI
+
+A Svelte component library with TypeScript support and Material Design-inspired styling.
+
+> **⚠️ Preview Release**: This library is in preview. APIs may change before the stable 1.0 release.
+
+## Features
+
+- Material Design-inspired components
+- ARIA support and keyboard navigation
+- Touch-optimized for mobile devices
+- Dark mode and high contrast mode support
+- TypeScript definitions included
+- Tree-shakeable ES modules
+- Built with Svelte 5 runes API
+
+## Installation
+
+```bash
+npm install @14ch/svelte-ui
+# or
+pnpm add @14ch/svelte-ui
+# or
+yarn add @14ch/svelte-ui
+```
+
+## Setup
+
+### 1. Import Styles
+
+**Important**: You must import the CSS styles for the components to work properly.
+
+Add this to your main app file (e.g., `app.html`, `+layout.svelte`, or `main.js`):
+
+```javascript
+// Import all necessary styles (recommended)
+import '@14ch/svelte-ui/styles';
+```
+
+Or import individual style files:
+
+```javascript
+// Core styles (required)
+import '@14ch/svelte-ui/styles/variables.scss';
+import '@14ch/svelte-ui/styles/core.scss';
+
+// Optional styles
+import '@14ch/svelte-ui/styles/optional/fonts.scss'; // Material Symbols font
+import '@14ch/svelte-ui/styles/optional/reset.scss'; // CSS reset
+```
+
+### 2. Basic Usage
+
+```svelte
+<script>
+	import { Button, Input, Dialog } from '@14ch/svelte-ui';
+
+	let dialogRef;
+	let inputValue = $state('');
+</script>
+
+<Input bind:value={inputValue} placeholder="Enter your name" />
+
+<Button onclick={() => dialogRef.open()}>Open Dialog</Button>
+
+<Dialog bind:this={dialogRef} title="Greeting">
+	<p>Hello {inputValue}!</p>
+	<p>Welcome to Svelte UI Component Library.</p>
+	{#snippet footer()}
+		<Button onclick={() => dialogRef.close()}>Close</Button>
+	{/snippet}
+</Dialog>
+```
+
+## Available Components
+
+### Form Components
+
+- `Button` - Various button styles and states
+- `Input` - Text input with validation support
+- `Textarea` - Multi-line text input
+- `Checkbox` - Checkbox with custom styling
+- `CheckboxGroup` - Multiple checkbox selection group
+- `Radio` - Radio button groups
+- `RadioGroup` - Radio button group wrapper
+- `Select` - Dropdown selection
+- `Combobox` - Searchable dropdown
+- `Slider` - Range slider input
+- `Switch` - Toggle switch
+- `ColorPicker` - Color selection input
+- `Datepicker` - Date selection with calendar
+- `FileUploader` - File upload with drag & drop
+- `ImageUploader` - Image upload with preview
+
+### Layout & Navigation
+
+- `Tab` / `TabItem` - Tab navigation
+- `Pagination` - Page navigation
+
+### Modals
+
+- `Dialog` - Modal dialogs
+- `ConfirmDialog` - Confirmation dialogs
+- `Drawer` - Side drawer
+
+### Popups & Menus
+
+- `Popup` - Popover content
+- `PopupMenu` / `PopupMenuButton` - Context menus
+
+### Notifications & Feedback
+
+- `Snackbar` / `SnackbarItem` - Toast notifications
+- `LoadingSpinner` - Loading indicators
+
+### Skeleton Loaders
+
+- `Skeleton` - Loading placeholders with preset patterns
+
+### Icons & Buttons
+
+- `Icon` - Material Symbols icons
+- `IconButton` - Icon-based buttons
+- `Fab` - Floating Action Button
+
+## Component Examples
+
+### Button Variants
+
+```svelte
+<script>
+	import { Button } from '@14ch/svelte-ui';
+</script>
+
+<!-- Different variants -->
+<Button variant="filled">Filled Button</Button>
+<Button variant="outlined">Outlined Button</Button>
+<Button variant="text">Text Button</Button>
+
+<!-- With icons -->
+<Button icon="add">Add Item</Button>
+
+<!-- Different sizes -->
+<Button size="small">Small</Button>
+<Button size="medium">Medium</Button>
+<Button size="large">Large</Button>
+
+<!-- States -->
+<Button disabled>Disabled</Button>
+<Button loading>Loading...</Button>
+```
+
+### Form Validation
+
+```svelte
+<script>
+	import { Input, Checkbox, Button } from '@14ch/svelte-ui';
+
+	let email = $state('');
+	let password = $state('');
+	let agreed = $state(false);
+
+	const handleSubmit = () => {
+		if (!email || !password || !agreed) {
+			alert('Please fill all fields');
+			return;
+		}
+		// Handle form submission
+	};
+</script>
+
+<Input bind:value={email} type="email" placeholder="Email" required />
+
+<Input bind:value={password} type="password" placeholder="Password" required />
+
+<Checkbox bind:value={agreed}>I agree to the terms and conditions</Checkbox>
+
+<Button onclick={handleSubmit} disabled={!agreed}>Sign Up</Button>
+```
+
+### Checkbox & Radio Groups
+
+```svelte
+<script>
+	import { CheckboxGroup, RadioGroup } from '@14ch/svelte-ui';
+
+	const options = [
+		{ label: 'Option 1', value: 'opt1' },
+		{ label: 'Option 2', value: 'opt2' },
+		{ label: 'Option 3', value: 'opt3' }
+	];
+
+	let selectedCheckboxes = $state([]);
+	let selectedRadio = $state(null);
+</script>
+
+<CheckboxGroup bind:value={selectedCheckboxes} {options} direction="vertical" gap="16px" />
+
+<RadioGroup bind:value={selectedRadio} {options} direction="horizontal" gap="24px" />
+```
+
+### Skeleton Loaders
+
+```svelte
+<script>
+	import { Skeleton, SkeletonBox, SkeletonText, SkeletonAvatar } from '@14ch/svelte-ui';
+</script>
+
+<!-- Using preset patterns -->
+<Skeleton patterns={[{ type: 'article-list' }]} repeat={3} />
+<Skeleton patterns={[{ type: 'product-list' }]} repeat={4} />
+
+<!-- Using individual components for custom layouts -->
+<div>
+	<SkeletonAvatar showName={true} />
+	<SkeletonBox width="100%" height="200px" />
+	<SkeletonText lines={3} />
+</div>
+```
+
+### Dialog with Confirmation
+
+```svelte
+<script>
+	import { Button, ConfirmDialog } from '@14ch/svelte-ui';
+
+	let confirmDialogRef;
+
+	const handleDelete = () => {
+		confirmDialogRef.open();
+	};
+
+	const onConfirm = () => {
+		// Delete logic here
+		console.log('Item deleted');
+		confirmDialogRef.close();
+	};
+</script>
+
+<Button variant="outlined" onclick={handleDelete}>Delete Item</Button>
+
+<ConfirmDialog
+	bind:this={confirmDialogRef}
+	title="Confirm Delete"
+	message="Are you sure you want to delete this item? This action cannot be undone."
+	onconfirm={onConfirm}
+	oncancel={() => confirmDialogRef.close()}
+/>
+```
+
+## Dark Theme
+
+Apply dark mode by setting the `data-theme` attribute:
+
+```svelte
+<script>
+	import { Button } from '@14ch/svelte-ui';
+	import { onMount } from 'svelte';
+
+	let theme = $state('light');
+
+	const toggleTheme = () => {
+		theme = theme === 'light' ? 'dark' : 'light';
+		document.body.setAttribute('data-theme', theme);
+	};
+
+	onMount(() => {
+		document.body.setAttribute('data-theme', theme);
+	});
+</script>
+
+<Button onclick={toggleTheme}>Toggle Theme</Button>
+```
+
+You can also apply dark mode to specific sections:
+
+```svelte
+<div data-theme="dark">
+	<!-- This section and its children will use dark mode -->
+	<Button>Dark Mode Button</Button>
+</div>
+```
+
+## Customization
+
+### CSS Custom Properties
+
+The library uses CSS custom properties for easy theming:
+
+```css
+:root {
+	--svelte-ui-primary-color: #1976d2;
+	--svelte-ui-surface-color: #ffffff;
+	--svelte-ui-text-color: #1f1f1f;
+	--svelte-ui-border-radius: 8px;
+	/* ... and many more */
+}
+```
+
+### Customizing Dark Mode Colors
+
+You can customize dark mode colors by overriding CSS variables:
+
+```css
+[data-theme='dark'] {
+	--svelte-ui-primary-color: #90caf9;
+	--svelte-ui-surface-color: #121212;
+	--svelte-ui-text-color: #ffffff;
+	/* ... customize other colors as needed */
+}
+```
+
+## TypeScript Support
+
+All components come with full TypeScript definitions:
+
+```typescript
+import type { MenuItem } from '@14ch/svelte-ui';
+
+const menuItems: MenuItem[] = [
+	{ title: 'Home', href: '/' },
+	{ title: 'About', href: '/about' },
+	{ title: 'Contact', href: '/contact' }
+];
+```
+
+## Accessibility
+
+This library is built with accessibility in mind:
+
+- Proper ARIA attributes
+- Keyboard navigation support
+- Screen reader announcements
+- Focus management
+- High contrast mode support
+
+## Browser Support
+
+- Chrome/Edge 88+
+- Firefox 78+
+- Safari 14+
+
+## License
+
+MIT License - see the [LICENSE](LICENSE) file for details.
+
+## Changelog
+
+### v0.0.1
+
+- Initial release
+- 40+ components (Button, Input, Dialog, Skeleton loaders, etc.)
+- CheckboxGroup and RadioGroup
+- Skeleton component with preset patterns
+- Material Design-inspired styling
+- TypeScript support
+- ARIA, keyboard navigation, screen reader support
+- High contrast mode support
+- Svelte 5 runes API

package/dist/assets/styles/README.md

@@ -0,0 +1,144 @@
+# Svelte UI Library Styles
+
+この svelte-ui ライブラリは、ライブラリユーザーのスタイルとの競合を避けるために、スタイルを **必須スタイル** と **オプションスタイル** に分離しています。
+
+## 🎯 変更点
+
+- **v0.0.1** から、ライブラリのindex.tsでは必須スタイルのみを自動読み込み
+- リセットCSSやフォントなどは **オプション** として分離
+- ユーザーが必要に応じて選択的に読み込み可能
+
+## 📁 ファイル構成
+
+```
+dist/assets/styles/
+├── core.scss              # 🔴 必須 - コンポーネント動作に必要
+├── variables.scss          # 🔴 必須 - CSS変数
+
+├── import.scss            # 🔴 必須 - 上記2つをまとめて読み込み
+└── optional/
+    ├── reset.scss         # 🔵 オプション - リセットCSS
+    └── fonts.scss         # 🔵 オプション - フォント読み込み
+```
+
+## 🔴 必須スタイル（自動読み込み）
+
+これらのスタイルは、ライブラリをインポートすると自動的に読み込まれます：
+
+```typescript
+// ライブラリをインポートするだけで必須スタイルが読み込まれる
+import { Button } from 'svelte-ui';
+```
+
+### 含まれる内容
+
+- **Box-sizing**: `box-sizing: border-box` の設定（全コンポーネント）
+- **Button reset**: button要素のブラウザデフォルトスタイルをリセット（Button, IconButton, Fab等）
+- **Dialog reset**: dialog要素の基本スタイル（Dialog, Drawer等）
+- **Form elements**: input autofill、label等の調整（Input, Textarea, Checkbox, Radio等）
+- **Accessibility**: `.sr-only` クラス（PopupMenu等で使用）
+- **CSS variables**: 全コンポーネントで使用される変数
+- **Material Icons**: アイコンフォントの設定
+
+## 🔵 オプションスタイル（選択読み込み）
+
+必要に応じて、以下のスタイルを選択的に読み込むことができます：
+
+### 1. リセットCSS
+
+```scss
+// Eric Meyer's CSS Reset + 基本的なレイアウト設定
+@import 'svelte-ui/dist/assets/styles/optional/reset.scss';
+```
+
+### 2. フォント
+
+```scss
+// Google Fonts (Roboto, Noto Sans JP) + YakuHanJP
+@import 'svelte-ui/dist/assets/styles/optional/fonts.scss';
+```
+
+## 🚀 使用例
+
+### 最小構成（必須スタイルのみ）
+
+```typescript
+// main.ts または app.ts
+import { Button, Input, Dialog } from 'svelte-ui';
+
+// 必須スタイルは自動的に読み込まれる
+// 自分のリセットCSSやフォントを使用可能
+```
+
+### 標準構成（オプションスタイルも使用）
+
+```scss
+// app.scss
+// 必須スタイルは自動読み込みされているので、オプションのみ追加
+@import 'svelte-ui/dist/assets/styles/optional/reset.scss';
+@import 'svelte-ui/dist/assets/styles/optional/fonts.scss';
+
+// 自分のスタイル
+body {
+	background-color: #f0f0f0;
+}
+```
+
+### 部分的な使用
+
+```scss
+// app.scss
+// 自分のリセットCSSを使用し、フォントだけライブラリのものを使用
+@import 'svelte-ui/dist/assets/styles/optional/fonts.scss';
+```
+
+## 🔄 移行ガイド
+
+### 旧バージョンからの移行
+
+以前のバージョンではリセットCSSが自動的に読み込まれていました。同じ動作を維持したい場合：
+
+```scss
+// app.scss
+@import 'svelte-ui/dist/assets/styles/optional/reset.scss';
+@import 'svelte-ui/dist/assets/styles/optional/fonts.scss';
+```
+
+### 競合を避けたい場合
+
+```scss
+// 必須スタイルは自動読み込みされるので、何もしなくてOK
+// 自分のリセットCSSやフォントを使用してください
+```
+
+## 🎨 カスタマイズ
+
+CSS変数を上書きすることで、簡単にテーマをカスタマイズできます：
+
+```scss
+// カスタムテーマ
+:root {
+	--svelte-ui-primary-color: #ff6b6b;
+	--svelte-ui-button-border-radius: 8px;
+}
+```
+
+## 🔧 トラブルシューティング
+
+### スタイルが適用されない場合
+
+1. **Box-sizing**: 必須スタイルに含まれているため、基本的な要素サイズは正常に表示されます
+2. **Button要素**: 基本的なリセットは必須スタイルに含まれています
+3. **アイコン**: Material Icons は必須スタイルに含まれています
+
+### 競合が発生した場合
+
+1. **リセットCSS**: optional/reset.scss を読み込まずに、自分のリセットCSSを使用
+2. **フォント**: optional/fonts.scss を読み込まずに、自分のフォントを指定
+3. **CSS変数**: 必要に応じて上書きしてください
+
+## 📚 詳細情報
+
+- [コンポーネント一覧](../../components/)
+- [CSS変数一覧](./variables.scss)
+- [TypeScript型定義](../../types/)

package/dist/assets/styles/core.scss

@@ -0,0 +1,61 @@
+/* src/lib/assets/styles/core.scss */
+/* 
+ * Core styles required for component functionality
+ * These styles are automatically included with the library
+ */
+
+/*===================================================================
+ * Box-sizing - Required for proper component sizing
+ *===================================================================*/
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+/*===================================================================
+ * Button reset - Required for consistent button styling
+ *===================================================================*/
+button {
+	background: transparent;
+	border: none;
+	font-size: inherit;
+	font-weight: inherit;
+	cursor: pointer;
+}
+
+/*===================================================================
+ * Dialog element - Required for dialog components
+ *===================================================================*/
+dialog {
+	color: inherit;
+}
+
+/*===================================================================
+ * Form elements - Required for proper form functionality
+ *===================================================================*/
+/* Prevent autofill background color changes */
+input:-webkit-autofill {
+	transition: background-color 5000s ease-in-out 0s !important;
+}
+
+/* Label normalization - Used in Input, Textarea, Checkbox, Radio */
+label {
+	font-weight: normal;
+}
+
+/*===================================================================
+ * Accessibility - Required for screen readers
+ *===================================================================*/
+/* Screen reader only class for accessibility - Used in PopupMenu */
+.sr-only {
+	position: absolute;
+	width: 1px;
+	height: 1px;
+	padding: 0;
+	margin: -1px;
+	overflow: hidden;
+	clip: rect(0, 0, 0, 0);
+	white-space: nowrap;
+	border: 0;
+}

package/dist/assets/styles/import.scss

@@ -0,0 +1,11 @@
+/* src/lib/assets/styles/import.scss */
+/*
+ * Core styles automatically included with svelte-ui
+ * These are the minimum required styles for components to work properly
+ */
+
+@use './variables';
+@use './core';
+
+/* Material Symbols font (required for Icon component) */
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');

package/dist/assets/styles/optional/fonts.scss

@@ -0,0 +1,23 @@
+/* src/lib/assets/styles/optional/fonts.scss */
+/*
+ * Optional Font Imports
+ * Include this if you want to use our default font stack
+ * Import with: @import 'svelte-ui/styles/optional/fonts.scss';
+ */
+
+/*===================================================================
+ * Google Fonts & External Font Imports
+ *===================================================================*/
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,400,500,700');
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;400;700&display=swap');
+@import url('https://cdn.jsdelivr.net/npm/yakuhanjp@3.0.0/dist/css/yakuhanjp.min.css');
+
+/*===================================================================
+ * Font Family Settings
+ *===================================================================*/
+body * {
+	font-family:
+		YakuHanJP, Roboto, 'Noto Sans JP', 'ヒラギノ角ゴ ProN W3', 'Hiragino Kaku Gothic ProN',
+		'メイリオ', Meiryo, sans-serif;
+}