mokkun 0.1.5 → 0.2.0

package/dist/types/renderer/components/notification-bar.d.ts

@@ -0,0 +1,251 @@
+/**
+ * NotificationBar Component
+ * 通知バーコンポーネント
+ *
+ *
+ * - タイプ（info/success/warning/error/sync）
+ * - アクションボタン対応
+ * - 閉じるボタン
+ * - アニメーション（スライドイン）
+ * - 複数通知のスタック表示対応
+ * - `data-type` for styling
+ * - `role="alert"` or `role="status"` for accessibility
+ *
+ * @see https://smarthr.design/products/components/notification-bar/
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * 通知バーのタイプ
+ * - info: 情報通知
+ * - success: 成功通知
+ * - warning: 警告通知
+ * - error: エラー通知
+ * - sync: 同期中通知
+ */
+export type NotificationBarType = 'info' | 'success' | 'warning' | 'error' | 'sync';
+/**
+ * 通知バーの状態
+ */
+export interface NotificationBarState {
+    /** メッセージ */
+    message: string;
+    /** 表示状態 */
+    visible: boolean;
+    /** 強調表示 */
+    bold: boolean;
+}
+/**
+ * 通知バーのコールバック
+ */
+export interface NotificationBarCallbacks {
+    /** 閉じるボタンクリック時 */
+    onClose?: () => void;
+    /** アクションボタンクリック時 */
+    onAction?: () => void;
+}
+/**
+ * 通知バーの設定
+ */
+export interface NotificationBarConfig {
+    /** メッセージ */
+    message: string;
+    /** タイプ（カラー） */
+    type?: NotificationBarType;
+    /** アクションボタンのラベル */
+    actionLabel?: string;
+    /** 閉じるボタンを表示するか */
+    closable?: boolean;
+    /** 強調表示（背景色を濃くする） */
+    bold?: boolean;
+    /** アクセシビリティ用のロール */
+    role?: 'alert' | 'status';
+    /** アクセシビリティ用のラベル */
+    ariaLabel?: string;
+}
+/**
+ * 通知バーコンポーネント
+ */
+export declare class NotificationBar {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private closeHandler;
+    private actionHandler;
+    constructor(container: HTMLElement, config: NotificationBarConfig, callbacks?: NotificationBarCallbacks);
+    /**
+     * 通知バーをレンダリング
+     */
+    render(): void;
+    /**
+     * メッセージを設定
+     */
+    setMessage(message: string): void;
+    /**
+     * 表示状態を設定
+     */
+    setVisible(visible: boolean): void;
+    /**
+     * 強調表示を設定
+     */
+    setBold(bold: boolean): void;
+    /**
+     * 通知を表示
+     */
+    show(): void;
+    /**
+     * 通知を非表示
+     */
+    hide(): void;
+    /**
+     * 現在のメッセージを取得
+     */
+    getMessage(): string;
+    /**
+     * 表示状態を取得
+     */
+    isVisible(): boolean;
+    /**
+     * 強調表示状態を取得
+     */
+    isBold(): boolean;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): Readonly<NotificationBarState>;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * 通知バーの内容をレンダリング
+     */
+    private renderContent;
+    /**
+     * アクションボタンをレンダリング
+     */
+    private renderActionButton;
+    /**
+     * 閉じるボタンをレンダリング
+     */
+    private renderCloseButton;
+    /**
+     * アクションボタンクリックハンドラー
+     */
+    private handleAction;
+    /**
+     * 閉じるボタンクリックハンドラー
+     */
+    private handleClose;
+    /**
+     * イベントリスナーをクリーンアップ
+     */
+    private cleanup;
+    static renderField(field: InputField): string;
+}
+/**
+ * 通知アイテム
+ */
+export interface NotificationItem {
+    /** 通知ID */
+    id: string;
+    /** メッセージ */
+    message: string;
+    /** タイプ */
+    type?: NotificationBarType;
+    /** アクションラベル */
+    actionLabel?: string;
+    /** 強調表示 */
+    bold?: boolean;
+    /** アクセシビリティ用のロール */
+    role?: 'alert' | 'status';
+    /** アクションコールバック */
+    onAction?: () => void;
+}
+/**
+ * 通知スタックの状態
+ */
+export interface NotificationBarStackState {
+    /** 通知一覧 */
+    notifications: NotificationItem[];
+}
+/**
+ * 通知スタックのコールバック
+ */
+export interface NotificationBarStackCallbacks {
+    /** 通知が閉じられた時 */
+    onNotificationClose?: (id: string) => void;
+    /** 全通知が閉じられた時 */
+    onAllClosed?: () => void;
+}
+/**
+ * 通知スタックの設定
+ */
+export interface NotificationBarStackConfig {
+    /** 初期通知リスト */
+    notifications?: NotificationItem[];
+    /** 最大表示数 */
+    maxVisible?: number;
+}
+/**
+ * 通知スタックコンポーネント
+ * 複数の通知をスタック表示する
+ */
+export declare class NotificationBarStack {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private notificationBars;
+    constructor(container: HTMLElement, config?: NotificationBarStackConfig, callbacks?: NotificationBarStackCallbacks);
+    /**
+     * スタックをレンダリング
+     */
+    render(): void;
+    /**
+     * 通知を追加
+     */
+    addNotification(notification: Omit<NotificationItem, 'id'> & {
+        id?: string;
+    }): string;
+    /**
+     * 通知を削除
+     */
+    removeNotification(id: string): void;
+    /**
+     * 全通知をクリア
+     */
+    clearAll(): void;
+    /**
+     * 通知数を取得
+     */
+    getCount(): number;
+    /**
+     * 通知一覧を取得
+     */
+    getNotifications(): Readonly<NotificationItem[]>;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): Readonly<NotificationBarStackState>;
+    /**
+     * コンポーネントを破棄
+     */
+    destroy(): void;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+}
+/**
+ * 通知バーを作成
+ */
+export declare function createNotificationBar(container: HTMLElement, config: NotificationBarConfig, callbacks?: NotificationBarCallbacks): NotificationBar;
+/**
+ * 通知スタックを作成
+ */
+export declare function createNotificationBarStack(container: HTMLElement, config?: NotificationBarStackConfig, callbacks?: NotificationBarStackCallbacks): NotificationBarStack;

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

@@ -0,0 +1,167 @@
+/**
+ * Pagination Component
+ * ページネーションコンポーネント
+ *
+ * 機能:
+ * - ページ番号表示
+ * - 前後ボタン
+ * - 最初/最後へのジャンプ
+ * - ページサイズ選択
+ * - 表示件数表示
+ * - コンパクト表示モード
+ */
+import type { InputField } from '../../types/schema';
+/**
+ * ページネーションの状態
+ */
+export interface PaginationState {
+    /** 現在のページ（1始まり） */
+    currentPage: number;
+    /** 1ページあたりのアイテム数 */
+    pageSize: number;
+    /** 総アイテム数 */
+    totalItems: number;
+    /** 総ページ数 */
+    totalPages: number;
+}
+/**
+ * ページネーションのコールバック
+ */
+export interface PaginationCallbacks {
+    /** ページ変更時 */
+    onPageChange?: (page: number, state: PaginationState) => void;
+    /** ページサイズ変更時 */
+    onPageSizeChange?: (pageSize: number, state: PaginationState) => void;
+}
+/**
+ * ページネーションの設定
+ */
+export interface PaginationConfig {
+    /** 総アイテム数 */
+    totalItems: number;
+    /** 初期ページ（1始まり、デフォルト: 1） */
+    initialPage?: number;
+    /** 初期ページサイズ（デフォルト: 10） */
+    initialPageSize?: number;
+    /** ページサイズの選択肢（デフォルト: [10, 25, 50, 100]） */
+    pageSizeOptions?: number[];
+    /** ページサイズ選択を表示するか（デフォルト: true） */
+    showPageSizeSelector?: boolean;
+    /** 表示件数を表示するか（デフォルト: true） */
+    showItemCount?: boolean;
+    /** 最初/最後へのジャンプボタンを表示するか（デフォルト: true） */
+    showJumpButtons?: boolean;
+    /** ページ番号ボタンの最大表示数（デフォルト: 7） */
+    maxPageButtons?: number;
+    /** コンパクトモード（デフォルト: false） */
+    compact?: boolean;
+    /** 位置（デフォルト: 'center'） */
+    align?: 'left' | 'center' | 'right';
+}
+/**
+ * ページネーションコンポーネント
+ */
+export declare class Pagination {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(container: HTMLElement, config: PaginationConfig, callbacks?: PaginationCallbacks);
+    /**
+     * ページネーションをレンダリング
+     */
+    render(): void;
+    /**
+     * 指定したページへ移動
+     */
+    goToPage(page: number): void;
+    /**
+     * 次のページへ移動
+     */
+    nextPage(): void;
+    /**
+     * 前のページへ移動
+     */
+    previousPage(): void;
+    /**
+     * 最初のページへ移動
+     */
+    firstPage(): void;
+    /**
+     * 最後のページへ移動
+     */
+    lastPage(): void;
+    /**
+     * ページサイズを設定
+     */
+    setPageSize(pageSize: number): void;
+    /**
+     * 総アイテム数を更新
+     */
+    setTotalItems(totalItems: number): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): PaginationState;
+    /**
+     * 現在のページを取得
+     */
+    getCurrentPage(): number;
+    /**
+     * ページサイズを取得
+     */
+    getPageSize(): number;
+    /**
+     * 表示中のアイテム範囲を取得
+     */
+    getItemRange(): {
+        start: number;
+        end: number;
+    };
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ページ番号を有効範囲内にクランプ
+     */
+    private clampPage;
+    /**
+     * ページサイズセレクターをレンダリング
+     */
+    private renderPageSizeSelector;
+    /**
+     * ナビゲーションをレンダリング
+     */
+    private renderNavigation;
+    /**
+     * ページ番号ボタンをレンダリング
+     */
+    private renderPageButtons;
+    /**
+     * 表示するページ番号を計算
+     */
+    private calculateVisiblePages;
+    /**
+     * ボタンを作成
+     */
+    private createButton;
+    /**
+     * ページ番号ボタンを作成
+     */
+    private createPageButton;
+    /**
+     * 表示件数をレンダリング
+     */
+    private renderItemCount;
+    /**
+     * PaginationフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     */
+    static renderField(field: InputField): string;
+}
+/**
+ * Paginationを作成するファクトリ関数
+ */
+export declare function createPagination(container: HTMLElement, config: PaginationConfig, callbacks?: PaginationCallbacks): Pagination;

package/dist/types/renderer/components/photo-manager-renderer.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Photo Manager Renderer
+ * 写真管理画面のHTML生成（静的レンダリング用）
+ */
+import type { PhotoManagerField } from '../../types/schema';
+/**
+ * 写真管理フィールドをHTML文字列としてレンダリング
+ */
+export declare function renderPhotoManagerField(field: PhotoManagerField): string;

package/dist/types/renderer/components/radio-button-panel.d.ts

@@ -0,0 +1,152 @@
+/**
+ * RadioButtonPanel Component
+ * ラジオボタンパネルコンポーネント
+ *
+ * Card-style radio button group component:
+ * - Visual panel/card appearance for each option
+ * - Icon and image support
+ * - Description text
+ * - Disabled state (group and per-option)
+ * - Selected state highlighting
+ * - Vertical/horizontal/grid layouts
+ * - Full ARIA 1.2 compliance with keyboard navigation
+ */
+/**
+ * ラジオボタンパネルのオプション
+ */
+export interface RadioButtonPanelOption {
+    /** 値 */
+    value: string;
+    /** ラベル */
+    label: string;
+    /** 説明テキスト */
+    description?: string;
+    /** アイコン（SVG文字列） */
+    icon?: string;
+    /** 画像URL */
+    image?: string;
+    /** 無効化 */
+    disabled?: boolean;
+}
+/**
+ * ラジオボタンパネルの状態
+ */
+export interface RadioButtonPanelState {
+    /** 選択された値 */
+    selectedValue: string | null;
+    /** 無効化状態 */
+    disabled: boolean;
+    /** フォーカスされているオプションのインデックス */
+    focusedIndex: number;
+}
+/**
+ * ラジオボタンパネルのコールバック
+ */
+export interface RadioButtonPanelCallbacks {
+    /** 値変更時（値と状態を受け取る） */
+    onChange?: (value: string, state: RadioButtonPanelState) => void;
+    /** 値変更時（値のみを受け取る） */
+    onValueChange?: (value: string) => void;
+}
+/**
+ * ラジオボタンパネルの設定
+ */
+export interface RadioButtonPanelConfig {
+    /** name属性（フォーム用、必須） */
+    name: string;
+    /** オプション配列 */
+    options: RadioButtonPanelOption[];
+    /** 初期選択値 */
+    defaultValue?: string;
+    /** レイアウト方向 */
+    direction?: 'horizontal' | 'vertical';
+    /** グリッドカラム数（horizontal時のみ） */
+    columns?: 1 | 2 | 3 | 4;
+    /** サイズ */
+    size?: 'small' | 'medium' | 'large';
+    /** 無効化（グループ全体） */
+    disabled?: boolean;
+    /** 必須 */
+    required?: boolean;
+    /** 幅 */
+    width?: string | number;
+}
+/**
+ * ラジオボタンパネルコンポーネント
+ */
+export declare class RadioButtonPanel {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private optionElements;
+    constructor(container: HTMLElement, config: RadioButtonPanelConfig, callbacks?: RadioButtonPanelCallbacks);
+    /**
+     * ラジオボタンパネルをレンダリング
+     */
+    render(): void;
+    /**
+     * 値を設定
+     */
+    setValue(value: string | null): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): RadioButtonPanelState;
+    /**
+     * 現在の値を取得
+     */
+    getValue(): string | null;
+    /**
+     * 無効化されているかどうかを取得
+     */
+    isDisabled(): boolean;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * オプションをレンダリング
+     */
+    private renderOption;
+    /**
+     * メディア（アイコン/画像）をレンダリング
+     */
+    private renderMedia;
+    /**
+     * コンテンツ（ラベル + 説明）をレンダリング
+     */
+    private renderContent;
+    /**
+     * インジケーター（ラジオ円）をレンダリング
+     */
+    private renderIndicator;
+    /**
+     * オプションクリックを処理
+     */
+    private handleOptionClick;
+    /**
+     * キーボードナビゲーションを処理
+     */
+    private handleKeyboardNavigation;
+    /**
+     * 次のオプションにフォーカス
+     */
+    private focusNextOption;
+    /**
+     * 前のオプションにフォーカス
+     */
+    private focusPreviousOption;
+    /**
+     * 指定されたインデックスのオプションにフォーカス
+     */
+    private focusOption;
+}
+/**
+ * RadioButtonPanelを作成するファクトリ関数
+ */
+export declare function createRadioButtonPanel(container: HTMLElement, config: RadioButtonPanelConfig, callbacks?: RadioButtonPanelCallbacks): RadioButtonPanel;

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

@@ -0,0 +1,117 @@
+/**
+ * RadioButton Component
+ * ラジオボタンコンポーネント
+ *
+ *
+ * - `checked` / `defaultChecked` for state
+ * - `data-state="checked|unchecked"` for styling
+ * - `error` state with error messages
+ * - `role="radio"` with `aria-checked` for accessibility
+ */
+import type { RadioGroupField } from '../../types/schema';
+/**
+ * ラジオボタンの状態
+ */
+export interface RadioButtonState {
+    /** 選択状態 */
+    checked: boolean;
+    /** 無効化状態 */
+    disabled: boolean;
+}
+/**
+ * ラジオボタンのコールバック
+ */
+export interface RadioButtonCallbacks {
+    /** 状態変更時 */
+    onChange?: (checked: boolean, state: RadioButtonState) => void;
+    /** 選択状態変更時 */
+    onCheckedChange?: (checked: boolean) => void;
+}
+/**
+ * ラジオボタンの設定
+ */
+export interface RadioButtonConfig {
+    /** 初期選択状態 */
+    defaultChecked?: boolean;
+    /** 無効化 */
+    disabled?: boolean;
+    /** 選択時ラベル */
+    checkedLabel?: string;
+    /** 非選択時ラベル */
+    uncheckedLabel?: string;
+    /** サイズ */
+    size?: 'small' | 'medium' | 'large';
+    /** name属性（グループ化用） */
+    name?: string;
+    /** value属性 */
+    value?: string;
+    /** ラベル位置 */
+    labelPosition?: 'left' | 'right';
+}
+/**
+ * ラジオボタンコンポーネント
+ */
+export declare class RadioButton {
+    private config;
+    private state;
+    private callbacks;
+    private container;
+    private instanceId;
+    constructor(container: HTMLElement, config?: RadioButtonConfig, callbacks?: RadioButtonCallbacks);
+    /**
+     * ラジオボタンをレンダリング
+     */
+    render(): void;
+    /**
+     * 選択状態を設定
+     */
+    setChecked(checked: boolean): void;
+    /**
+     * 無効化状態を設定
+     */
+    setDisabled(disabled: boolean): void;
+    /**
+     * 現在の状態を取得
+     */
+    getState(): RadioButtonState;
+    /**
+     * 選択状態を取得
+     */
+    isChecked(): boolean;
+    /**
+     * 無効化されているかどうかを取得
+     */
+    isDisabled(): boolean;
+    /**
+     * value属性を取得
+     */
+    getValue(): string | undefined;
+    /**
+     * name属性を取得
+     */
+    getName(): string | undefined;
+    /**
+     * 初期状態を作成
+     */
+    private createInitialState;
+    /**
+     * ラジオボタンをレンダリング
+     */
+    private renderRadio;
+    /**
+     * ラベルをレンダリング
+     */
+    private renderLabel;
+    /**
+     * ラジオグループフィールドをHTMLとしてレンダリング（静的メソッド）
+     * SSR/初期レンダリング用
+     *
+     * @param field - ラジオグループフィールド定義
+     * @returns 生成されたHTML文字列
+     */
+    static renderField(field: RadioGroupField): string;
+}
+/**
+ * RadioButtonを作成するファクトリ関数
+ */
+export declare function createRadioButton(container: HTMLElement, config?: RadioButtonConfig, callbacks?: RadioButtonCallbacks): RadioButton;