mokkun 0.1.5 → 0.1.6

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

@@ -0,0 +1,134 @@
+/**
+ * Browser Component
+ * 階層構造を持つデータの中から項目を単一選択するコンポーネント
+ *
+ * https://smarthr.design/products/components/browser/
+ *
+ * 機能:
+ * - 階層的なデータの表示
+ * - 複数カラム表示（最大3列）
+ * - キーボードナビゲーション
+ * - 単一選択
+ * - アクセシビリティ対応（ARIA属性）
+ *
+ * 用途:
+ * - カテゴリ選択
+ * - ファイルブラウジング
+ * - 組織階層の選択
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * Browserアイテムの定義
+ */
+export interface BrowserItem {
+    /** アイテムの値（一意） */
+    value: string;
+    /** 表示ラベル */
+    label: string;
+    /** 子アイテム */
+    children?: BrowserItem[];
+    /** 無効化 */
+    disabled?: boolean;
+}
+/**
+ * Browserの状態
+ */
+export interface BrowserState {
+    /** 選択中のアイテムのvalue */
+    selectedValue: string | null;
+    /** 選択パス（ルートからのvalue配列） */
+    selectedPath: string[];
+    /** フォーカス中のカラムインデックス */
+    focusedColumnIndex: number;
+    /** 各カラムでフォーカス中のアイテムのインデックス */
+    focusedItemIndexes: number[];
+}
+/**
+ * Browserのコールバック
+ */
+export interface BrowserCallbacks {
+    /** アイテム選択時 */
+    onSelect?: (value: string, path: string[], item: BrowserItem) => void;
+    /** 選択変更時 */
+    onChange?: (value: string | null, path: string[]) => void;
+}
+/**
+ * Browserの設定
+ */
+export interface BrowserConfig {
+    /** アイテムの配列 */
+    items: BrowserItem[];
+    /** 初期選択値 */
+    defaultValue?: string;
+    /** ID属性 */
+    id?: string;
+    /** カスタムCSSクラス */
+    className?: string;
+    /** 最大カラム数（デフォルト: 3） */
+    maxColumns?: number;
+    /** 高さ（デフォルト: 'auto'） */
+    height?: string;
+}
+/**
+ * Browserコンポーネント
+ */
+export declare class Browser {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    private columnsWrapper;
+    private itemsMap;
+    private parentMap;
+    constructor(container: HTMLElement, config: BrowserConfig, callbacks?: BrowserCallbacks);
+    /**
+     * Browserをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を選択
+     */
+    selectValue(value: string): void;
+    /**
+     * 選択をクリア
+     */
+    clearSelection(): void;
+    /**
+     * 現在の選択値を取得
+     */
+    getValue(): string | null;
+    /**
+     * 現在の選択パスを取得
+     */
+    getPath(): string[];
+    /**
+     * 現在の状態を取得
+     */
+    getState(): BrowserState;
+    /**
+     * アイテムを更新
+     */
+    setItems(items: BrowserItem[]): void;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    private buildItemsMap;
+    private getPathToValue;
+    private getColumnsData;
+    private renderColumns;
+    private renderColumn;
+    private renderItem;
+    private renderArrowIcon;
+    private handleItemSelect;
+    private handleKeyDown;
+    private moveFocus;
+    private selectFocusedOrMoveRight;
+    private focusCurrentItem;
+    static renderField(field: InputField): string;
+}
+/**
+ * Browserを作成
+ */
+export declare function createBrowser(container: HTMLElement, config: BrowserConfig, callbacks?: BrowserCallbacks): Browser;

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;