@14ch/svelte-ui 0.0.1

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

@@ -0,0 +1,31 @@
+import 'dayjs/locale/ja';
+import 'dayjs/locale/en';
+import 'dayjs/locale/fr';
+import 'dayjs/locale/de';
+import 'dayjs/locale/es';
+import 'dayjs/locale/zh-cn';
+type $$ComponentProps = {
+    value: Date | {
+        start: Date;
+        end: Date;
+    } | undefined;
+    locale?: 'en' | 'ja' | 'fr' | 'de' | 'es' | 'zh-cn';
+    minDate?: Date;
+    maxDate?: Date;
+    id?: string;
+    mode?: 'single' | 'range';
+    onchange: (value: Date | {
+        start: Date;
+        end: Date;
+    } | undefined) => void;
+    onOpen?: Function;
+    onClose?: Function;
+};
+declare const DatepickerCalendar: import("svelte").Component<$$ComponentProps, {
+    reset: () => void;
+    focusCalendar: () => void;
+    handlePopupOpen: () => void;
+    handlePopupClose: () => void;
+}, "value">;
+type DatepickerCalendar = ReturnType<typeof DatepickerCalendar>;
+export default DatepickerCalendar;

package/dist/components/Dialog.svelte

@@ -0,0 +1,245 @@
+<!-- Dialog.svelte -->
+
+<script lang="ts">
+	/**
+	 * 🚨 CRITICAL: DO NOT MANAGE DIALOG STATE FROM PARENT COMPONENTS
+	 *
+	 * This Dialog component manages its own open/closed state internally.
+	 * Parent components must NEVER create their own Dialog state variables.
+	 *
+	 * ❌ WRONG: let isDialogOpen = $state(false)
+	 * ✅ RIGHT: Use dialogRef.open(), dialogRef.close(), dialogRef.toggle()
+	 * ✅ RIGHT: Use onOpen/onClose callbacks for side effects
+	 *
+	 * This prevents state synchronization bugs and ensures consistent behavior.
+	 */
+	import type { Snippet } from 'svelte';
+	import Modal from './Modal.svelte';
+	import { getStyleFromNumber } from '../utils/style';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// Snippet
+		header,
+		children,
+		footer,
+
+		// 基本プロパティ
+		title = '',
+		description,
+
+		// HTML属性
+		id,
+
+		// スタイル/レイアウト
+		width = 320,
+		bodyStyle = '',
+		noPadding = false,
+
+		// 状態/動作
+		isOpen = $bindable(false),
+		scrollable = false,
+		closeIfClickOutside = true,
+		restoreFocus = false,
+
+		// ARIA/アクセシビリティ
+		ariaLabel,
+		ariaDescribedby
+	}: {
+		// Snippet
+		header?: Snippet;
+		children?: Snippet;
+		footer?: Snippet;
+
+		// 基本プロパティ
+		title?: string;
+		description?: string;
+
+		// HTML属性
+		id?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		bodyStyle?: string;
+		noPadding?: boolean;
+
+		// 状態/動作
+		isOpen?: boolean;
+		scrollable?: boolean;
+		closeIfClickOutside?: boolean;
+		restoreFocus?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaDescribedby?: string;
+	} = $props();
+
+	let modalRef: Modal;
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	export const open = (): void => {
+		modalRef?.open(title || ariaLabel);
+	};
+
+	export const close = (): void => {
+		modalRef?.close(title || ariaLabel);
+	};
+
+	export const toggle = (): void => {
+		modalRef?.toggle(title || ariaLabel);
+	};
+
+	export const closeEnd = (): void => {
+		modalRef?.closeEnd();
+	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const dialogStyles = $derived(
+		`width: ${getStyleFromNumber(width)}; border-radius: var(--svelte-ui-dialog-border-radius); overflow: hidden;`
+	);
+
+	const bodyStyles = $derived(() => {
+		const styles = [];
+		if (noPadding) {
+			styles.push('padding: 0');
+		}
+		if (bodyStyle) {
+			styles.push(bodyStyle);
+		}
+		return styles.join('; ');
+	});
+
+	const dialogClasses = $derived(['dialog', scrollable && 'scrollable'].filter(Boolean).join(' '));
+
+	const ariaLabelledby = $derived(title ? 'dialog-title' : undefined);
+	const ariaDescribedbyValue = $derived(
+		ariaDescribedby || (description ? 'dialog-description' : undefined)
+	);
+</script>
+
+<Modal
+	bind:this={modalRef}
+	bind:isOpen
+	{closeIfClickOutside}
+	{restoreFocus}
+	componentType="Dialog"
+	{ariaLabel}
+	{ariaLabelledby}
+	ariaDescribedby={ariaDescribedbyValue}
+	customClass={dialogClasses}
+	customStyles={dialogStyles}
+	id={id ? `${id}-modal` : undefined}
+>
+	<div class="dialog">
+		{#if header || title}
+			<div class="dialog__header">
+				{#if header}
+					{@render header()}
+				{:else}
+					<div class="dialog__title" id={id ? `${id}-dialog-title` : undefined}>
+						{title || ''}
+					</div>
+				{/if}
+			</div>
+		{/if}
+		{#if description}
+			<div class="dialog__description" id={id ? `${id}-dialog-description` : undefined}>
+				{description}
+			</div>
+		{/if}
+		{#if children}
+			<div class="dialog__body" style={bodyStyles()}>
+				{@render children()}
+			</div>
+		{/if}
+		{#if footer}
+			<div class="dialog__footer">
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+</Modal>
+
+<style>:global(.dialog) {
+  color: var(--svelte-ui-dialog-title-color);
+}
+
+.dialog {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  max-height: calc(100dvh - 2em - 6px);
+  border: var(--svelte-ui-dialog-border);
+  border-radius: var(--svelte-ui-dialog-border-radius);
+  overflow: hidden;
+}
+
+.dialog__header {
+  display: flex;
+  gap: var(--svelte-ui-dialog-gap);
+  align-items: center;
+  justify-content: stretch;
+  min-height: var(--svelte-ui-dialog-header-height);
+  padding: var(--svelte-ui-dialog-padding);
+  margin-bottom: calc(0px - var(--svelte-ui-dialog-body-padding));
+}
+.dialog__header .dialog__title {
+  flex-grow: 1;
+  font-size: var(--svelte-ui-dialog-title-font-size);
+  line-height: normal;
+  color: var(--svelte-ui-dialog-title-color);
+}
+
+.dialog__body {
+  flex-shrink: 1;
+  position: relative;
+  padding: var(--svelte-ui-dialog-body-padding);
+}
+
+.dialog__footer {
+  display: flex;
+  gap: var(--svelte-ui-dialog-gap-sm);
+  justify-content: end;
+  padding: var(--svelte-ui-dialog-footer-padding);
+}
+
+.dialog__description {
+  color: var(--svelte-ui-dialog-description-color);
+  font-size: var(--svelte-ui-dialog-description-font-size);
+  line-height: 1.4;
+  margin: 0;
+  padding: var(--svelte-ui-dialog-description-padding);
+  border-bottom: 1px solid var(--svelte-ui-border-weak-color);
+}
+
+:global(.dialog.scrollable) .dialog__header {
+  margin-bottom: 0;
+  border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
+}
+:global(.dialog.scrollable) .dialog__body {
+  flex-shrink: 1;
+  padding: var(--svelte-ui-dialog-body-padding);
+  overflow: auto;
+}
+:global(.dialog.scrollable) .dialog__footer {
+  border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
+}
+
+/* Screen reader only content */
+:global(.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;
+}</style>

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

@@ -0,0 +1,38 @@
+/**
+     * 🚨 CRITICAL: DO NOT MANAGE DIALOG STATE FROM PARENT COMPONENTS
+     *
+     * This Dialog component manages its own open/closed state internally.
+     * Parent components must NEVER create their own Dialog state variables.
+     *
+     * ❌ WRONG: let isDialogOpen = $state(false)
+     * ✅ RIGHT: Use dialogRef.open(), dialogRef.close(), dialogRef.toggle()
+     * ✅ RIGHT: Use onOpen/onClose callbacks for side effects
+     *
+     * This prevents state synchronization bugs and ensures consistent behavior.
+     */
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    header?: Snippet;
+    children?: Snippet;
+    footer?: Snippet;
+    title?: string;
+    description?: string;
+    id?: string;
+    width?: string | number;
+    bodyStyle?: string;
+    noPadding?: boolean;
+    isOpen?: boolean;
+    scrollable?: boolean;
+    closeIfClickOutside?: boolean;
+    restoreFocus?: boolean;
+    ariaLabel?: string;
+    ariaDescribedby?: string;
+};
+declare const Dialog: import("svelte").Component<$$ComponentProps, {
+    open: () => void;
+    close: () => void;
+    toggle: () => void;
+    closeEnd: () => void;
+}, "isOpen">;
+type Dialog = ReturnType<typeof Dialog>;
+export default Dialog;

package/dist/components/Drawer.svelte

@@ -0,0 +1,383 @@
+<!-- Drawer.svelte -->
+
+<script lang="ts">
+	/**
+	 * 🚨 CRITICAL: DO NOT MANAGE DRAWER STATE FROM PARENT COMPONENTS
+	 *
+	 * This Drawer component manages its own open/closed state internally.
+	 * Parent components must NEVER create their own Drawer state variables.
+	 *
+	 * ❌ WRONG: let isDrawerOpen = $state(false)
+	 * ✅ RIGHT: Use drawerRef.open(), drawerRef.close(), drawerRef.toggle()
+	 * ✅ RIGHT: Use onOpen/onClose callbacks for side effects
+	 *
+	 * This prevents state synchronization bugs and ensures consistent behavior.
+	 */
+	import type { Snippet } from 'svelte';
+	import Modal from './Modal.svelte';
+	import { getStyleFromNumber } from '../utils/style';
+
+	// =========================================================================
+	// Props, States & Constants
+	// =========================================================================
+	let {
+		// Snippet
+		header,
+		children,
+		footer,
+
+		// 基本プロパティ
+		title = '',
+		description,
+
+		// HTML属性
+		id,
+
+		// スタイル/レイアウト
+		width = 240,
+		position = 'left',
+		bodyStyle = '',
+		noPadding = false,
+
+		// 状態/動作
+		isOpen = $bindable(false),
+		scrollable = true,
+		closeIfClickOutside = true,
+		restoreFocus = false,
+
+		// ARIA/アクセシビリティ
+		ariaLabel = 'Drawer',
+		ariaDescribedby
+	}: {
+		// Snippet
+		header?: Snippet;
+		children?: Snippet;
+		footer?: Snippet;
+
+		// 基本プロパティ
+		title?: string;
+		description?: string;
+
+		// HTML属性
+		id?: string;
+
+		// スタイル/レイアウト
+		width?: string | number;
+		position?: 'left' | 'right';
+		bodyStyle?: string;
+		noPadding?: boolean;
+
+		// 状態/動作
+		isOpen?: boolean;
+		scrollable?: boolean;
+		closeIfClickOutside?: boolean;
+		restoreFocus?: boolean;
+
+		// ARIA/アクセシビリティ
+		ariaLabel?: string;
+		ariaDescribedby?: string;
+	} = $props();
+
+	let modalRef: Modal;
+
+	// =========================================================================
+	// Methods
+	// =========================================================================
+	export const open = (): void => {
+		modalRef?.open(title || ariaLabel);
+	};
+
+	export const close = (): void => {
+		modalRef?.close(title || ariaLabel);
+	};
+
+	export const toggle = (): void => {
+		modalRef?.toggle(title || ariaLabel);
+	};
+
+	export const closeEnd = (): void => {
+		modalRef?.closeEnd();
+	};
+
+	// =========================================================================
+	// $derived
+	// =========================================================================
+	const drawerStyles = $derived(() => {
+		const styles = [];
+		styles.push(`width: ${getStyleFromNumber(width)}`);
+		styles.push('height: 100%');
+		styles.push('min-height: 100%');
+		styles.push(`${position}: 0`);
+		return styles.join('; ');
+	});
+
+	const bodyStyles = $derived(() => {
+		const styles = [];
+		if (noPadding) {
+			styles.push('padding: 0');
+		}
+		if (bodyStyle) {
+			styles.push(bodyStyle);
+		}
+		return styles.join('; ');
+	});
+
+	const drawerClasses = $derived(
+		['drawer', `drawer--${position}`, scrollable && 'drawer--scrollable'].filter(Boolean).join(' ')
+	);
+
+	const ariaLabelledby = $derived(title ? 'drawer-title' : undefined);
+	const ariaDescribedbyValue = $derived(
+		ariaDescribedby || (description ? 'drawer-description' : undefined)
+	);
+</script>
+
+<Modal
+	bind:this={modalRef}
+	bind:isOpen
+	{closeIfClickOutside}
+	{restoreFocus}
+	componentType="Drawer"
+	{ariaLabel}
+	{ariaLabelledby}
+	ariaDescribedby={ariaDescribedbyValue}
+	customClass={drawerClasses}
+	customStyles={drawerStyles()}
+	id={id ? `${id}-modal` : undefined}
+>
+	<div class="drawer drawer--{position} {scrollable ? 'drawer--scrollable' : ''}">
+		{#if header || title}
+			<div class="drawer__header">
+				{#if header}
+					{@render header()}
+				{:else}
+					<div class="drawer__title" id={id ? `${id}-drawer-title` : undefined}>
+						{title || ''}
+					</div>
+				{/if}
+			</div>
+		{/if}
+		{#if description}
+			<div class="drawer__description" id={id ? `${id}-drawer-description` : undefined}>
+				{description}
+			</div>
+		{/if}
+		{#if children}
+			<div class="drawer__body" style={bodyStyles()}>
+				{@render children()}
+			</div>
+		{/if}
+		{#if footer}
+			<div class="drawer__footer">
+				{@render footer()}
+			</div>
+		{/if}
+	</div>
+</Modal>
+
+<style>@charset "UTF-8";
+:global(.drawer) {
+  width: 100%;
+  height: 100%;
+  min-height: 100%;
+  padding: 0;
+  margin: 0;
+  overflow: hidden;
+  color: var(--svelte-ui-drawer-title-color);
+}
+
+:global(.drawer:-internal-dialog-in-top-layer) {
+  max-height: none;
+  max-width: none;
+  width: 100%;
+}
+
+/* 位置固有のアニメーション */
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes fadeOut {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes fadeInFromLeft {
+  from {
+    opacity: 0;
+    right: 100%;
+    transform: translateX(-50%);
+  }
+  to {
+    opacity: 1;
+    right: 100%;
+    transform: translateX(0);
+  }
+}
+@keyframes fadeInFromRight {
+  from {
+    opacity: 0;
+    left: 100%;
+    transform: translateX(-50%);
+  }
+  to {
+    opacity: 1;
+    left: 100%;
+    transform: translateX(-100%);
+  }
+}
+@keyframes fadeOutToLeft {
+  from {
+    opacity: 1;
+    right: 100%;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    right: 100%;
+    transform: translateX(-50%);
+  }
+}
+@keyframes fadeOutToRight {
+  from {
+    opacity: 1;
+    left: 100%;
+    transform: translateX(-100%);
+  }
+  to {
+    opacity: 0;
+    left: 100%;
+    transform: translateX(-50%);
+  }
+}
+:global(.drawer--right.fade-in) {
+  animation: fadeInFromRight var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+:global(.drawer--right.fade-in::backdrop) {
+  animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+:global(.drawer--left.fade-in) {
+  animation: fadeInFromLeft var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+:global(.drawer--left.fade-in::backdrop) {
+  animation: fadeIn var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+:global(.drawer--left.fade-out) {
+  animation: fadeOutToLeft var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+:global(.drawer--right.fade-out) {
+  animation: fadeOutToRight var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+:global(.drawer.fade-out::backdrop) {
+  animation: fadeOut var(--svelte-ui-transition-duration, 300ms) forwards;
+}
+
+.drawer {
+  display: flex;
+  flex-direction: column;
+  justify-content: stretch;
+  height: 100%;
+  overflow: hidden;
+}
+
+/* Position-based borders */
+.drawer--left {
+  border-right: var(--svelte-ui-drawer-border);
+}
+
+.drawer--right {
+  border-left: var(--svelte-ui-drawer-border);
+}
+
+.drawer__header {
+  display: flex;
+  gap: var(--svelte-ui-drawer-gap);
+  align-items: center;
+  justify-content: stretch;
+  min-height: var(--svelte-ui-drawer-header-height);
+  padding: var(--svelte-ui-drawer-padding);
+  margin-bottom: calc(0px - var(--svelte-ui-drawer-body-padding));
+}
+.drawer__header .drawer__title {
+  flex-grow: 1;
+  font-size: var(--svelte-ui-drawer-title-font-size);
+  line-height: normal;
+  color: var(--svelte-ui-drawer-title-color);
+}
+
+.drawer__body {
+  flex-shrink: 1;
+  position: relative;
+  padding: var(--svelte-ui-drawer-body-padding);
+  flex-grow: 1;
+}
+
+.drawer__footer {
+  display: flex;
+  gap: var(--svelte-ui-drawer-gap-sm);
+  justify-content: end;
+  padding: var(--svelte-ui-drawer-footer-padding);
+}
+
+.drawer__description {
+  color: var(--svelte-ui-drawer-description-color);
+  font-size: var(--svelte-ui-drawer-description-font-size);
+  line-height: 1.4;
+  margin: 0;
+  padding: var(--svelte-ui-drawer-description-padding);
+  border-bottom: 1px solid var(--svelte-ui-border-weak-color);
+}
+
+.drawer--scrollable .drawer__header {
+  margin-bottom: 0;
+  border-bottom: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
+}
+.drawer--scrollable .drawer__body {
+  flex-shrink: 1;
+  padding: var(--svelte-ui-drawer-body-padding);
+  overflow: auto;
+}
+.drawer--scrollable .drawer__footer {
+  border-top: solid var(--svelte-ui-border-width, 1px) var(--svelte-ui-border-weak-color);
+}
+
+/* Reduced motion support */
+@media (prefers-reduced-motion: reduce) {
+  :global(.drawer.fade-in),
+  :global(.drawer.fade-in::backdrop),
+  :global(.drawer.fade-out),
+  :global(.drawer.fade-out::backdrop),
+  :global(.drawer--left.fade-in),
+  :global(.drawer--left.fade-in::backdrop),
+  :global(.drawer--left.fade-out),
+  :global(.drawer--right.fade-in),
+  :global(.drawer--right.fade-in::backdrop),
+  :global(.drawer--right.fade-out) {
+    animation-duration: 0.01s;
+  }
+}
+/* Screen reader only content */
+:global(.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;
+}</style>