mokkun 0.1.5 → 0.2.0

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

@@ -0,0 +1,198 @@
+/**
+ * Calendar Component
+ * カレンダーを表示し日付を選択するためのコンポーネント
+ *
+ * Features:
+ * - 月表示カレンダー
+ * - 日付選択
+ * - 選択可能な日付範囲の制限 (from/to)
+ * - 月移動ナビゲーション
+ * - 今日の日付ハイライト
+ * - キーボードナビゲーション
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * カレンダーの状態
+ */
+export interface CalendarState {
+    /** 現在選択されている日付 */
+    value: Date | null;
+    /** 表示中の年月 */
+    displayedMonth: Date;
+    /** フォーカスされている日付 */
+    focusedDate: Date | null;
+    /** 無効化状態 */
+    disabled: boolean;
+}
+/**
+ * カレンダーのコールバック
+ */
+export interface CalendarCallbacks {
+    /** 日付選択時 */
+    onSelectDate: (event: MouseEvent, date: Date, state: CalendarState) => void;
+    /** 月変更時 */
+    onMonthChange?: (date: Date, state: CalendarState) => void;
+}
+/**
+ * カレンダーの設定
+ */
+export interface CalendarConfig {
+    /** 初期選択日付 */
+    value?: Date;
+    /** 選択可能な日付範囲の開始日 */
+    from?: Date;
+    /** 選択可能な日付範囲の終了日 */
+    to?: Date;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 週の開始曜日 (0: 日曜, 1: 月曜) */
+    weekStartsOn?: 0 | 1;
+    /** ロケール */
+    locale?: string;
+    /** aria-label */
+    ariaLabel?: string;
+}
+/**
+ * カレンダーコンポーネント
+ */
+export declare class Calendar {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private calendarElement;
+    constructor(container: HTMLElement, config: CalendarConfig | undefined, callbacks: CalendarCallbacks);
+    /**
+     * カレンダーをレンダリング
+     */
+    render(): void;
+    /**
+     * 選択日付を設定
+     */
+    setValue(value: Date | null): void;
+    /**
+     * 選択日付を取得
+     */
+    getValue(): Date | null;
+    /**
+     * 表示月を設定
+     */
+    setDisplayedMonth(date: Date): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 選択可能範囲を設定
+     */
+    setRange(from?: Date, to?: Date): void;
+    /**
+     * 状態を取得
+     */
+    getState(): CalendarState;
+    /**
+     * 破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ヘッダーをレンダリング
+     */
+    private renderHeader;
+    /**
+     * カレンダーグリッドをレンダリング
+     */
+    private renderGrid;
+    /**
+     * 曜日ヘッダーをレンダリング
+     */
+    private renderWeekdayHeader;
+    /**
+     * 週の行をレンダリング
+     */
+    private renderWeekRow;
+    /**
+     * 日付セルをレンダリング
+     */
+    private renderDateCell;
+    /**
+     * キーボードナビゲーションを設定
+     */
+    private setupKeyboardNavigation;
+    /**
+     * 日付にフォーカス
+     */
+    private focusDate;
+    /**
+     * 前月クリック
+     */
+    private handlePrevMonth;
+    /**
+     * 次月クリック
+     */
+    private handleNextMonth;
+    /**
+     * 日付クリック
+     */
+    private handleDateClick;
+    /**
+     * 日付を正規化（時刻を0時0分0秒に）
+     */
+    private normalizeDate;
+    /**
+     * 月の最初の日を取得
+     */
+    private getFirstDayOfMonth;
+    /**
+     * カレンダーの週を取得
+     */
+    private getCalendarWeeks;
+    /**
+     * 曜日ラベルを取得
+     */
+    private getWeekdayLabels;
+    /**
+     * 年月をフォーマット
+     */
+    private formatMonthYear;
+    /**
+     * 日付をフルフォーマット
+     */
+    private formatDateFull;
+    /**
+     * 今日かどうか
+     */
+    private isToday;
+    /**
+     * 選択されているかどうか
+     */
+    private isSelected;
+    /**
+     * 日付が無効化されているかどうか
+     */
+    private isDateDisabled;
+    /**
+     * 日付が範囲内かどうか
+     */
+    private isDateInRange;
+    /**
+     * 日数を加算
+     */
+    private addDays;
+    /**
+     * 左矢印アイコン
+     */
+    private getChevronLeftIcon;
+    /**
+     * 右矢印アイコン
+     */
+    private getChevronRightIcon;
+    static renderField(field: InputField): string;
+}
+/**
+ * カレンダーコンポーネントを作成
+ */
+export declare function createCalendar(container: HTMLElement, config: CalendarConfig | undefined, callbacks: CalendarCallbacks): Calendar;

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

@@ -0,0 +1,132 @@
+/**
+ * Checkbox Component
+ * チェックボックスコンポーネント
+ *
+ *
+ * - `checked` / `defaultChecked` for state
+ * - `indeterminate` state support (一部選択)
+ * - `data-state="checked|unchecked|indeterminate"` for styling
+ * - `error` state with error messages
+ * - `role="checkbox"` with `aria-checked` for accessibility
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * チェックボックスの状態
+ */
+export interface CheckboxState {
+    /** チェック状態 */
+    checked: boolean;
+    /** 中間状態（一部選択） */
+    indeterminate: boolean;
+    /** 無効化状態 */
+    disabled: boolean;
+}
+/**
+ * チェックボックスのコールバック
+ */
+export interface CheckboxCallbacks {
+    /** 状態変更時 */
+    onChange?: (checked: boolean, state: CheckboxState) => void;
+    /** チェック状態変更時 */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * チェックボックスの設定
+ */
+export interface CheckboxConfig {
+    /** 初期チェック状態 */
+    defaultChecked?: boolean;
+    /** 初期中間状態 */
+    defaultIndeterminate?: boolean;
+    /** 無効化 */
+    disabled?: boolean;
+    /** チェック時ラベル */
+    checkedLabel?: string;
+    /** 非チェック時ラベル */
+    uncheckedLabel?: string;
+    /** サイズ */
+    size?: 'small' | 'medium' | 'large';
+    /** name属性（フォーム用） */
+    name?: string;
+    /** ラベル位置 */
+    labelPosition?: 'left' | 'right';
+}
+/**
+ * チェックボックスコンポーネント
+ */
+export declare class Checkbox {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(container: HTMLElement, config?: CheckboxConfig, callbacks?: CheckboxCallbacks);
+    /**
+     * チェックボックスをレンダリング
+     */
+    render(): void;
+    /**
+     * チェック状態を設定
+     */
+    setChecked(checked: boolean): void;
+    /**
+     * 中間状態を設定
+     */
+    setIndeterminate(indeterminate: boolean): void;
+    /**
+     * 状態をトグル
+     */
+    toggle(): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): CheckboxState;
+    /**
+     * チェック状態を取得
+     */
+    isChecked(): boolean;
+    /**
+     * 中間状態かどうかを取得
+     */
+    isIndeterminate(): boolean;
+    /**
+     * 無効化されているかどうかを取得
+     */
+    isDisabled(): boolean;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * チェックボックスをレンダリング
+     */
+    private renderCheckbox;
+    /**
+     * ラベルをレンダリング
+     */
+    private renderLabel;
+    /**
+     * チェックボックスグループフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - チェックボックスグループフィールド定義
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: InputField): string;
+    /**
+     * 単一チェックボックスをレンダリング
+     */
+    private static renderSingleCheckbox;
+    /**
+     * チェックボックスグループをレンダリング
+     */
+    private static renderCheckboxGroup;
+}
+/**
+ * Checkboxを作成するファクトリ関数
+ */
+export declare function createCheckbox(container: HTMLElement, config?: CheckboxConfig, callbacks?: CheckboxCallbacks): Checkbox;

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

@@ -0,0 +1,120 @@
+import type { InputField } from '../../types/schema';
+/**
+ * Chip component state
+ */
+export interface ChipState {
+    /** Whether the chip is selected */
+    selected: boolean;
+    /** Whether the chip is disabled */
+    disabled: boolean;
+}
+/**
+ * Chip component callbacks
+ */
+export interface ChipCallbacks {
+    /** Called when chip is clicked (selection toggle) */
+    onClick?: (selected: boolean, state: ChipState) => void;
+    /** Called when delete button is clicked */
+    onDelete?: (state: ChipState) => void;
+}
+/**
+ * Chip component configuration
+ */
+export interface ChipConfig {
+    /** Label text for the chip */
+    label: string;
+    /** Icon to display before the label (emoji, SVG path, or HTML string) */
+    icon?: string;
+    /** Whether to show delete button */
+    deletable?: boolean;
+    /** Whether the chip is selected by default */
+    selected?: boolean;
+    /** Whether the chip is disabled */
+    disabled?: boolean;
+    /** Size variant */
+    size?: 'small' | 'medium' | 'large';
+    /** Color variant */
+    color?: 'default' | 'primary' | 'success' | 'warning' | 'error' | 'info';
+    /** Accessible label for screen readers */
+    ariaLabel?: string;
+}
+/**
+ * Chip component
+ *
+ * A small UI element for displaying tags, filter conditions, or categories.
+ * Supports selection toggle, delete button, icons, and color variations.
+ *
+ * @example
+ * ```typescript
+ * const chip = createChip(container, {
+ *   label: 'JavaScript',
+ *   icon: '🚀',
+ *   deletable: true,
+ *   color: 'primary'
+ * }, {
+ *   onClick: (selected) => console.log('Selected:', selected),
+ *   onDelete: () => console.log('Deleted')
+ * })
+ * ```
+ */
+export declare class Chip {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    constructor(container: HTMLElement, config: ChipConfig, callbacks?: ChipCallbacks);
+    /**
+     * Create initial component state
+     */
+    private createInitialState;
+    /**
+     * Render the chip component
+     */
+    render(): void;
+    /**
+     * Render the chip element
+     */
+    private renderChip;
+    /**
+     * Render the delete button
+     */
+    private renderDeleteButton;
+    /**
+     * Handle chip click (selection toggle)
+     */
+    private handleChipClick;
+    /**
+     * Handle delete button click
+     */
+    private handleDelete;
+    /**
+     * Set the selected state
+     */
+    setSelected(selected: boolean): void;
+    /**
+     * Set the disabled state
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * Update component state
+     */
+    private setState;
+    /**
+     * Get current component state
+     */
+    getState(): ChipState;
+    /**
+     * Update chip configuration
+     */
+    updateConfig(config: Partial<ChipConfig>): void;
+    static renderField(field: InputField): string;
+}
+/**
+ * Factory function to create a Chip component
+ *
+ * @param container - HTMLElement to render the chip into
+ * @param config - Chip configuration
+ * @param callbacks - Event callbacks
+ * @returns Chip instance
+ */
+export declare function createChip(container: HTMLElement, config: ChipConfig, callbacks?: ChipCallbacks): Chip;

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

@@ -0,0 +1,217 @@
+/**
+ * Combobox Component
+ * コンボボックスコンポーネント
+ *
+ * Features:
+ * - Single and multi-selection modes
+ * - Search/filter functionality
+ * - Async option loading with debounce
+ * - Grouped options support
+ * - Custom option rendering
+ * - Full keyboard navigation
+ * - ARIA accessibility
+ *
+ * API follows standard conventions from Headless UI and Radix UI:
+ * - `role="combobox"` with `aria-haspopup="listbox"`
+ * - `aria-expanded` for dropdown state
+ * - `aria-activedescendant` for keyboard navigation
+ * - `data-state="open|closed"` for styling
+ */
+import type { ComboboxField } from '../../types/schema';
+/**
+ * コンボボックスの選択肢
+ */
+export interface ComboboxOption {
+    /** 値 */
+    value: string | number;
+    /** ラベル */
+    label: string;
+    /** 無効化 */
+    disabled?: boolean;
+    /** グループ名 */
+    group?: string;
+    /** アイコンHTML */
+    icon?: string;
+    /** 説明 */
+    description?: string;
+    /** カスタムデータ */
+    data?: Record<string, unknown>;
+}
+/**
+ * コンボボックスの状態
+ */
+export interface ComboboxState {
+    /** 選択された値 */
+    selectedValues: (string | number)[];
+    /** 入力テキスト */
+    inputValue: string;
+    /** ドロップダウン開閉状態 */
+    isOpen: boolean;
+    /** ハイライト中のオプションインデックス */
+    highlightedIndex: number;
+    /** フィルタリング/ロード済みオプション */
+    filteredOptions: ComboboxOption[];
+    /** グループ化されたオプション */
+    groupedOptions: Map<string, ComboboxOption[]>;
+    /** ローディング状態 */
+    isLoading: boolean;
+    /** エラーメッセージ */
+    error: string | null;
+}
+/**
+ * コンボボックスのコールバック
+ */
+export interface ComboboxCallbacks {
+    /** 選択変更時 */
+    onChange?: (values: (string | number)[], state: ComboboxState) => void;
+    /** 入力変更時 */
+    onInputChange?: (value: string, state: ComboboxState) => void;
+    /** ドロップダウン開閉時 */
+    onOpen?: (state: ComboboxState) => void;
+    /** ドロップダウン閉じる時 */
+    onClose?: (state: ComboboxState) => void;
+    /** オプションハイライト時 */
+    onHighlight?: (option: ComboboxOption | null, state: ComboboxState) => void;
+    /** 非同期ロードエラー時 */
+    onError?: (error: Error, state: ComboboxState) => void;
+}
+/**
+ * コンボボックスの設定
+ */
+export interface ComboboxConfig {
+    /** コンポーネントID */
+    id: string;
+    /** プレースホルダー */
+    placeholder?: string;
+    /** 選択モード */
+    mode: 'single' | 'multi';
+    /** 静的オプション */
+    options?: ComboboxOption[];
+    /** 非同期ローダー関数 */
+    loadOptions?: (query: string) => Promise<ComboboxOption[]>;
+    /** デバウンス遅延（ms） */
+    debounceMs?: number;
+    /** クリア可能 */
+    clearable?: boolean;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 必須フィールド */
+    required?: boolean;
+    /** 非同期ロード最小検索文字数 */
+    minSearchLength?: number;
+    /** 最大選択数（multiモード） */
+    maxSelections?: number;
+    /** カスタムオプションレンダラー */
+    renderOption?: (option: ComboboxOption) => string;
+    /** カスタム選択値レンダラー */
+    renderSelected?: (option: ComboboxOption) => string;
+    /** オプションなしメッセージ */
+    noOptionsMessage?: string;
+    /** ローディングメッセージ */
+    loadingMessage?: string;
+    /** name属性（フォーム用） */
+    name?: string;
+}
+/**
+ * コンボボックスコンポーネント
+ */
+export declare class Combobox {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private debounceTimer;
+    private inputRef;
+    private listboxRef;
+    private documentClickHandler;
+    private abortController;
+    constructor(container: HTMLElement, config: ComboboxConfig, callbacks?: ComboboxCallbacks, initialValues?: (string | number)[]);
+    /**
+     * コンボボックスをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を取得
+     */
+    getValue(): (string | number)[];
+    /**
+     * 値を設定
+     */
+    setValue(values: (string | number)[]): void;
+    /**
+     * 選択されたオプションを取得
+     */
+    getSelectedOptions(): ComboboxOption[];
+    /**
+     * ドロップダウンを開く
+     */
+    open(): void;
+    /**
+     * ドロップダウンを閉じる
+     */
+    close(): void;
+    /**
+     * ドロップダウンの開閉状態をトグル
+     */
+    toggle(): void;
+    /**
+     * ドロップダウンが開いているか
+     */
+    isOpenState(): boolean;
+    /**
+     * オプションを設定
+     */
+    setOptions(options: ComboboxOption[]): void;
+    /**
+     * オプションを追加
+     */
+    addOption(option: ComboboxOption): void;
+    /**
+     * オプションを削除
+     */
+    removeOption(value: string | number): void;
+    /**
+     * 状態を取得
+     */
+    getState(): ComboboxState;
+    /**
+     * クリーンアップ
+     */
+    destroy(): void;
+    private createInitialState;
+    private setState;
+    private updateFilteredOptions;
+    private filterOptions;
+    private groupOptions;
+    private loadOptionsAsync;
+    private renderInputArea;
+    private createInputElement;
+    private renderTags;
+    private renderIndicators;
+    private renderDropdown;
+    private renderOption;
+    private setupEventListeners;
+    private handleInputFocus;
+    private handleInput;
+    private handleKeyDown;
+    private handleClear;
+    private handleOptionClick;
+    private handleOptionHover;
+    private selectOption;
+    private deselectOption;
+    private clearSelection;
+    private selectHighlighted;
+    private removeLastSelected;
+    private highlightNext;
+    private highlightPrevious;
+    private highlightOption;
+    /**
+     * コンボボックスフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - コンボボックスフィールド定義
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: ComboboxField): string;
+}