mokkun 0.1.5 → 0.2.0

package/dist/types/renderer/components/textarea.d.ts

@@ -0,0 +1,173 @@
+/**
+ * Textarea Component
+ * 複数行テキスト入力コンポーネント
+ *
+ * 機能:
+ * - 自動リサイズ
+ * - 文字数カウント
+ * - 最大文字数制限
+ * - 行数指定
+ * - バリデーション表示
+ *
+ * 参考: https://smarthr.design/products/components/textarea/
+ */
+import type { TextareaField } from '../../types/schema';
+/**
+ * Textareaの状態
+ */
+export interface TextareaState {
+    /** 現在の値 */
+    value: string;
+    /** 無効化状態 */
+    disabled: boolean;
+    /** 読み取り専用状態 */
+    readonly: boolean;
+    /** エラー状態 */
+    error: boolean;
+    /** エラーメッセージ */
+    errorMessage?: string;
+    /** 文字数 */
+    characterCount: number;
+}
+/**
+ * Textareaのコールバック
+ */
+export interface TextareaCallbacks {
+    /** 値変更時 */
+    onChange?: (value: string, state: TextareaState) => void;
+    /** 入力時 */
+    onInput?: (value: string, state: TextareaState) => void;
+    /** フォーカス時 */
+    onFocus?: (state: TextareaState) => void;
+    /** ブラー時 */
+    onBlur?: (state: TextareaState) => void;
+}
+/**
+ * Textareaの設定
+ */
+export interface TextareaConfig {
+    /** 初期値 */
+    defaultValue?: string;
+    /** プレースホルダー */
+    placeholder?: string;
+    /** 行数 */
+    rows?: number;
+    /** 最小文字数 */
+    minLength?: number;
+    /** 最大文字数 */
+    maxLength?: number;
+    /** 必須フィールド */
+    required?: boolean;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 読み取り専用 */
+    readonly?: boolean;
+    /** 自動リサイズ */
+    autoResize?: boolean;
+    /** 文字数カウント表示 */
+    showCount?: boolean;
+    /** リサイズ可能 */
+    resizable?: boolean;
+    /** name属性（フォーム用） */
+    name?: string;
+    /** ID */
+    id?: string;
+    /** エラーメッセージ */
+    errorMessage?: string;
+}
+/**
+ * Textareaコンポーネント
+ */
+export declare class Textarea {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private textareaElement?;
+    private instanceId;
+    constructor(container: HTMLElement, config?: TextareaConfig, callbacks?: TextareaCallbacks);
+    /**
+     * Textareaをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を設定
+     */
+    setValue(value: string): void;
+    /**
+     * 値を取得
+     */
+    getValue(): string;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 読み取り専用状態を設定
+     */
+    setReadonly(readonly: boolean): void;
+    /**
+     * エラー状態を設定
+     */
+    setError(error: boolean, errorMessage?: string): void;
+    /**
+     * クリア
+     */
+    clear(): void;
+    /**
+     * フォーカス
+     */
+    focus(): void;
+    /**
+     * ブラー
+     */
+    blur(): void;
+    /**
+     * バリデーション実行
+     */
+    validate(): boolean;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): TextareaState;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * Textareaエレメントをレンダリング
+     */
+    private renderTextarea;
+    /**
+     * 文字数カウンターをレンダリング
+     */
+    private renderCounter;
+    /**
+     * カウンターの内容を更新
+     */
+    private updateCounterContent;
+    /**
+     * カウンターを更新
+     */
+    private updateCounter;
+    /**
+     * エラーメッセージをレンダリング
+     */
+    private renderError;
+    /**
+     * 自動リサイズ - 高さ調整
+     */
+    private adjustHeight;
+    /**
+     * テキストエリアフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - テキストエリアフィールド定義
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: TextareaField): string;
+}
+/**
+ * Textareaを作成するファクトリ関数
+ */
+export declare function createTextarea(container: HTMLElement, config?: TextareaConfig, callbacks?: TextareaCallbacks): Textarea;

package/dist/types/renderer/components/timeline.d.ts

@@ -0,0 +1,146 @@
+/**
+ * Timeline Component
+ * タイムラインコンポーネント
+ *
+ *
+ * - 日時表示（datetime / dateLabel）
+ * - 時間フォーマット（none / HH:mm:ss / HH:mm）
+ * - アイコンカスタマイズ
+ * - コンテンツのカスタマイズ
+ * - 接続線のスタイル
+ * - 現在のアイテム強調（current）
+ *
+ * @see https://smarthr.design/products/components/timeline/
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * 時間表示フォーマット
+ * - none: 時間を表示しない
+ * - HH:mm:ss: 時:分:秒
+ * - HH:mm: 時:分
+ */
+export type TimelineTimeFormat = 'none' | 'HH:mm:ss' | 'HH:mm';
+/**
+ * ビルトインアイコンタイプ
+ */
+export type TimelineIconType = 'circle' | 'dot' | 'check' | 'warning' | 'error' | 'info' | 'clock' | 'star' | 'user' | 'message';
+/**
+ * タイムラインアイテムの設定
+ */
+export interface TimelineItemConfig {
+    /** 日時（Date or ISO string） */
+    datetime: string | Date;
+    /** カスタム日付ラベル（表示用、datetimeの代わりに表示） */
+    dateLabel?: string;
+    /** 時間表示フォーマット */
+    timeFormat?: TimelineTimeFormat;
+    /** 日付サフィックスエリア（日付の後に表示される追加コンテンツ） */
+    dateSuffixArea?: string;
+    /** サイドアクションエリア（右側に表示されるアクションボタン等） */
+    sideActionArea?: string;
+    /** 現在のアイテム（強調表示） */
+    current?: boolean;
+    /** アイコン（ビルトインタイプまたはカスタムSVG） */
+    icon?: TimelineIconType | string;
+    /** アイコンの色（CSS color値） */
+    iconColor?: string;
+    /** コンテンツ（HTML文字列） */
+    content: string;
+    /** タイトル */
+    title?: string;
+}
+/**
+ * タイムラインの設定
+ */
+export interface TimelineConfig {
+    /** タイムラインアイテム配列 */
+    items: TimelineItemConfig[];
+}
+/**
+ * タイムラインの状態
+ */
+export interface TimelineState {
+    /** アイテム数 */
+    itemCount: number;
+    /** 現在のアイテムインデックス（-1 = なし） */
+    currentIndex: number;
+}
+/**
+ * タイムラインのコールバック
+ */
+export interface TimelineCallbacks {
+    /** アイテムクリック時 */
+    onItemClick?: (index: number, event: MouseEvent) => void;
+}
+/**
+ * タイムラインコンポーネント
+ */
+export declare class Timeline {
+    private config;
+    private container;
+    private callbacks;
+    private state;
+    private itemClickElements;
+    constructor(container: HTMLElement, config: TimelineConfig, callbacks?: TimelineCallbacks);
+    /**
+     * タイムラインをレンダリング
+     */
+    render(): void;
+    /**
+     * アイテムを追加
+     */
+    addItem(item: TimelineItemConfig): void;
+    /**
+     * アイテムを削除
+     */
+    removeItem(index: number): void;
+    /**
+     * アイテムを更新
+     */
+    updateItem(index: number, item: Partial<TimelineItemConfig>): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): Readonly<TimelineState>;
+    /**
+     * アイテム数を取得
+     */
+    getItemCount(): number;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * イベントハンドラーをクリーンアップ
+     */
+    private cleanup;
+    /**
+     * アイテムをレンダリング
+     */
+    private renderItem;
+    /**
+     * マーカーエリアをレンダリング
+     */
+    private renderMarkerArea;
+    /**
+     * コンテンツエリアをレンダリング
+     */
+    private renderContentArea;
+    /**
+     * ヘッダーをレンダリング
+     */
+    private renderHeader;
+    /**
+     * アイコンHTMLを取得
+     */
+    private getIconHtml;
+    static renderField(field: InputField): string;
+}
+/**
+ * タイムラインを作成
+ */
+export declare function createTimeline(container: HTMLElement, config: TimelineConfig, callbacks?: TimelineCallbacks): Timeline;

package/dist/types/renderer/components/toggle.d.ts

@@ -0,0 +1,109 @@
+/**
+ * Toggle Component
+ * トグルスイッチコンポーネント
+ *
+ * API follows standard conventions from Headless UI and Radix UI:
+ * - `checked` / `defaultChecked` for state
+ * - `data-state="checked|unchecked"` for styling
+ * - `data-disabled` when disabled
+ * - `role="switch"` with `aria-checked` for accessibility
+ * - `onCheckedChange` callback (Radix UI compatible)
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * トグルの状態
+ */
+export interface ToggleState {
+    /** チェック状態 */
+    checked: boolean;
+    /** 無効化状態 */
+    disabled: boolean;
+}
+/**
+ * トグルのコールバック
+ */
+export interface ToggleCallbacks {
+    /** 状態変更時 */
+    onChange?: (checked: boolean, state: ToggleState) => void;
+    /** Radix UI互換: 状態変更時 */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * トグルの設定
+ */
+export interface ToggleConfig {
+    /** 初期チェック状態 */
+    defaultChecked?: boolean;
+    /** 無効化 */
+    disabled?: boolean;
+    /** チェック時ラベル */
+    checkedLabel?: string;
+    /** 非チェック時ラベル */
+    uncheckedLabel?: string;
+    /** サイズ ( small/medium) */
+    size?: 'small' | 'medium' | 'large';
+    /** name属性（フォーム用） */
+    name?: string;
+    /** ラベル位置 () */
+    labelPosition?: 'left' | 'right';
+}
+/**
+ * トグルコンポーネント
+ */
+export declare class Toggle {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(container: HTMLElement, config?: ToggleConfig, callbacks?: ToggleCallbacks);
+    /**
+     * トグルをレンダリング
+     */
+    render(): void;
+    /**
+     * チェック状態を設定
+     */
+    setChecked(checked: boolean): void;
+    /**
+     * 状態をトグル
+     */
+    toggle(): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): ToggleState;
+    /**
+     * チェック状態を取得
+     */
+    isChecked(): boolean;
+    /**
+     * 無効化されているかどうかを取得
+     */
+    isDisabled(): boolean;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * トグルスイッチをレンダリング
+     */
+    private renderToggle;
+    /**
+     * ラベルをレンダリング
+     */
+    private renderLabel;
+    /**
+     * ToggleフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     */
+    static renderField(field: InputField): string;
+}
+/**
+ * Toggleを作成するファクトリ関数
+ */
+export declare function createToggle(container: HTMLElement, config?: ToggleConfig, callbacks?: ToggleCallbacks): Toggle;

package/dist/types/renderer/components/tooltip.d.ts

@@ -0,0 +1,158 @@
+/**
+ * Tooltip Component
+ * ツールチップコンポーネント
+ *
+ *
+ * - 位置指定（top/bottom/left/right）
+ * - 遅延表示（デフォルト300ms）
+ * - リッチコンテンツ対応（HTML/テキスト）
+ * - 矢印表示
+ * - `role="tooltip"` with `aria-describedby` for accessibility
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * ツールチップの位置
+ */
+export type TooltipPosition = 'top' | 'bottom' | 'left' | 'right';
+/**
+ * ツールチップの状態
+ */
+export interface TooltipState {
+    /** 表示中かどうか */
+    visible: boolean;
+    /** ホバー中かどうか */
+    hovering: boolean;
+}
+/**
+ * ツールチップのコールバック
+ */
+export interface TooltipCallbacks {
+    /** 表示時 */
+    onShow?: () => void;
+    /** 非表示時 */
+    onHide?: () => void;
+}
+/**
+ * ツールチップの設定
+ */
+export interface TooltipConfig {
+    /** ツールチップのコンテンツ（テキストまたはHTML） */
+    content: string;
+    /** 位置（デフォルト: top） */
+    position?: TooltipPosition;
+    /** 遅延表示時間（ミリ秒、デフォルト: 300） */
+    delay?: number;
+    /** 矢印を表示するか（デフォルト: true） */
+    showArrow?: boolean;
+    /** HTMLコンテンツとして解釈するか（デフォルト: false） */
+    isHtml?: boolean;
+    /** 最大幅（デフォルト: 200px） */
+    maxWidth?: string;
+    /** 無効化 */
+    disabled?: boolean;
+    /** トリガー要素にdata-tooltip-triggerを追加するか */
+    markTrigger?: boolean;
+}
+/**
+ * ツールチップコンポーネント
+ */
+export declare class Tooltip {
+    private config;
+    private state;
+    private callbacks;
+    private triggerElement;
+    private tooltipElement;
+    private instanceId;
+    private showTimeout;
+    private hideTimeout;
+    constructor(triggerElement: HTMLElement, config: TooltipConfig, callbacks?: TooltipCallbacks);
+    /**
+     * ツールチップを表示
+     */
+    show(): void;
+    /**
+     * ツールチップを非表示
+     */
+    hide(): void;
+    /**
+     * 即座にツールチップを表示（遅延なし）
+     */
+    showImmediate(): void;
+    /**
+     * 即座にツールチップを非表示（遅延なし）
+     */
+    hideImmediate(): void;
+    /**
+     * ツールチップのコンテンツを更新
+     */
+    setContent(content: string): void;
+    /**
+     * ツールチップの位置を更新
+     */
+    setPosition(position: TooltipPosition): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * ツールチップを破棄
+     */
+    destroy(): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): TooltipState;
+    /**
+     * 表示中かどうかを取得
+     */
+    isVisible(): boolean;
+    /**
+     * 初期化
+     */
+    private initialize;
+    /**
+     * イベントリスナーを追加
+     */
+    private attachEventListeners;
+    /**
+     * イベントリスナーを削除
+     */
+    private removeEventListeners;
+    /**
+     * マウスエンターハンドラー
+     */
+    private handleMouseEnter;
+    /**
+     * マウスリーブハンドラー
+     */
+    private handleMouseLeave;
+    /**
+     * フォーカスハンドラー
+     */
+    private handleFocus;
+    /**
+     * ブラーハンドラー
+     */
+    private handleBlur;
+    /**
+     * ツールチップをレンダリング
+     */
+    private render;
+    /**
+     * ツールチップの位置を計算して設定
+     */
+    private positionTooltip;
+    /**
+     * ツールチップを削除
+     */
+    private removeTooltip;
+    /**
+     * ツールチップを即座に削除（アニメーションなし）
+     */
+    private removeTooltipImmediate;
+    static renderField(field: InputField): string;
+}
+/**
+ * Tooltipを作成するファクトリ関数
+ */
+export declare function createTooltip(triggerElement: HTMLElement, config: TooltipConfig, callbacks?: TooltipCallbacks): Tooltip;

package/dist/types/renderer/components/wizard.d.ts

@@ -0,0 +1,118 @@
+/**
+ * Wizard Component
+ * ウィザード/ステップインジケーター
+ *
+ */
+import type { WizardConfig, WizardStep, InputField, StepperLayoutType, StepStatus, StepStatusWithText } from '../../types';
+/**
+ * ウィザードの状態
+ */
+export interface WizardState {
+    /** 現在のステップインデックス */
+    currentStep: number;
+    /** 総ステップ数 */
+    totalSteps: number;
+    /** 各ステップのデータ */
+    stepData: Record<string, Record<string, unknown>>;
+    /** スキップされたステップ */
+    skippedSteps: Set<number>;
+    /** 完了したステップ */
+    completedSteps: Set<number>;
+    /** 各ステップのステータス */
+    stepStatuses: Map<number, StepStatus | StepStatusWithText>;
+    /** レイアウトタイプ */
+    layout: StepperLayoutType;
+}
+/**
+ * ウィザードのコールバック
+ */
+export interface WizardCallbacks {
+    /** ステップ変更時 */
+    onStepChange?: (step: number, state: WizardState) => void;
+    /** 完了時 */
+    onComplete?: (data: Record<string, Record<string, unknown>>) => void;
+    /** フィールドレンダラー */
+    renderFields?: (fields: InputField[], container: HTMLElement) => void;
+    /** バリデーション */
+    validateStep?: (stepIndex: number, stepId: string) => boolean;
+    /** ステップクリック時 */
+    onStepClick?: (stepIndex: number, state: WizardState) => void;
+}
+/**
+ * ウィザードコンポーネント
+ */
+export declare class Wizard {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    constructor(config: WizardConfig, container: HTMLElement, callbacks?: WizardCallbacks);
+    /**
+     * ウィザードをレンダリング
+     */
+    render(): void;
+    /**
+     * 次のステップへ進む
+     */
+    nextStep(): boolean;
+    /**
+     * 前のステップへ戻る
+     */
+    previousStep(): boolean;
+    /**
+     * 特定のステップへジャンプ（完了済みのステップのみ）
+     */
+    goToStep(stepIndex: number): boolean;
+    /**
+     * 現在のステップをスキップ
+     */
+    skipStep(): boolean;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): WizardState;
+    /**
+     * ステップデータを更新
+     */
+    updateStepData(stepId: string, data: Record<string, unknown>): void;
+    /**
+     * 現在のステップ設定を取得
+     */
+    getCurrentStepConfig(): WizardStep;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * レイアウトを設定
+     */
+    setLayout(layout: StepperLayoutType): void;
+    /**
+     * ステップのステータスを設定
+     */
+    setStepStatus(stepIndex: number, status: StepStatus | StepStatusWithText): void;
+    /**
+     * ステップのステータスを取得
+     */
+    getStepStatus(stepIndex: number): StepStatus | StepStatusWithText | undefined;
+    /**
+     * ステップインジケーターをレンダリング
+     */
+    private renderStepIndicator;
+    /**
+     * 個別のステップマーカーをレンダリング
+     */
+    private renderStepMarker;
+    /**
+     * ステップアイコンをレンダリング
+     */
+    private renderStepIcon;
+    /**
+     * ステップコンテンツをレンダリング
+     */
+    private renderStepContent;
+    /**
+     * ナビゲーションボタンをレンダリング
+     */
+    private renderNavigation;
+}

package/dist/types/renderer/layouts/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Screen Layout — 画面レイアウトは shell 固定
+ */
+export { shellLayout } from './shell';
+export type { ScreenLayout, LayoutHelpers, RenderedSection } from './types';