@molecule/app-join-code-react 1.0.0

package/LICENSE

@@ -0,0 +1,115 @@
+                                 Apache License
+                           Version 2.0, January 2004
+                        http://www.apache.org/licenses/
+
+   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+
+   1. Definitions.
+
+      "License" shall mean the terms and conditions for use, reproduction,
+      and distribution as defined by Sections 1 through 9 of this document.
+
+      "Licensor" shall mean the copyright owner or entity authorized by
+      the copyright owner that is granting the License.
+
+      "Legal Entity" shall mean the union of the acting entity and all
+      other entities that control, are controlled by, or are under common
+      control with that entity. For the purposes of this definition,
+      "control" means (i) the power, direct or indirect, to cause the
+      direction or management of such entity, whether by contract or
+      otherwise, or (ii) ownership of fifty percent (50%) or more of the
+      outstanding shares, or (iii) beneficial ownership of such entity.
+
+      "You" (or "Your") shall mean an individual or Legal Entity
+      exercising permissions granted by this License.
+
+      "Source" form shall mean the preferred form for making modifications,
+      including but not limited to software source code, documentation
+      source, and configuration files.
+
+      "Object" form shall mean any form resulting from mechanical
+      transformation or translation of a Source form, including but
+      not limited to compiled object code, generated documentation,
+      and conversions to other media types.
+
+      "Work" shall mean the work of authorship, whether in Source or
+      Object form, made available under the License, as indicated by a
+      copyright notice that is included in or attached to the work.
+
+      "Derivative Works" shall mean any work, whether in Source or Object
+      form, that is based on (or derived from) the Work and for which the
+      editorial revisions, annotations, elaborations, or other modifications
+      represent, as a whole, an original work of authorship.
+
+      "Contribution" shall mean any work of authorship, including the
+      original version of the Work and any modifications or additions
+      to that Work, that is intentionally submitted to the Licensor for
+      inclusion in the Work by the copyright owner or by an individual or
+      Legal Entity authorized to submit on behalf of the copyright owner.
+
+      "Contributor" shall mean Licensor and any individual or Legal Entity
+      on behalf of whom a Contribution has been received by the Licensor and
+      subsequently incorporated within the Work.
+
+   2. Grant of Copyright License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      copyright license to reproduce, prepare Derivative Works of,
+      publicly display, publicly perform, sublicense, and distribute the
+      Work and such Derivative Works in Source or Object form.
+
+   3. Grant of Patent License. Subject to the terms and conditions of
+      this License, each Contributor hereby grants to You a perpetual,
+      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+      patent license to make, have made, use, offer to sell, sell, import,
+      and otherwise transfer the Work.
+
+   4. Redistribution. You may reproduce and distribute copies of the
+      Work or Derivative Works thereof in any medium, with or without
+      modifications, and in Source or Object form, provided that You
+      meet the following conditions:
+
+      (a) You must give any other recipients of the Work or
+          Derivative Works a copy of this License; and
+
+      (b) You must cause any modified files to carry prominent notices
+          stating that You changed the files; and
+
+      (c) You must retain, in the Source form of any Derivative Works
+          that You distribute, all copyright, patent, trademark, and
+          attribution notices from the Source form of the Work,
+          excluding those notices that do not pertain to any part of
+          the Derivative Works; and
+
+      (d) If the Work includes a "NOTICE" text file as part of its
+          distribution, then any Derivative Works that You distribute must
+          include a readable copy of the attribution notices contained
+          within such NOTICE file.
+
+   5. Submission of Contributions.
+
+   6. Trademarks. This License does not grant permission to use the trade
+      names, trademarks, service marks, or product names of the Licensor.
+
+   7. Disclaimer of Warranty. Unless required by applicable law or
+      agreed to in writing, Licensor provides the Work on an "AS IS" BASIS,
+      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+
+   8. Limitation of Liability. In no event and under no legal theory shall
+      any Contributor be liable to You for damages.
+
+   9. Accepting Warranty or Additional Liability.
+
+   Copyright 2026 Molecule Dev, Inc.
+
+   Licensed under the Apache License, Version 2.0 (the "License");
+   you may not use this file except in compliance with the License.
+   You may obtain a copy of the License at
+
+       http://www.apache.org/licenses/LICENSE-2.0
+
+   Unless required by applicable law or agreed to in writing, software
+   distributed under the License is distributed on an "AS IS" BASIS,
+   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+   See the License for the specific language governing permissions and
+   limitations under the License.

package/dist/JoinCode.d.ts

@@ -0,0 +1,26 @@
+import type { ReactElement } from 'react';
+import type { JoinCodeProps } from './types.js';
+/**
+ * Multi-slot join-code input. Renders one single-character `<input>` per slot
+ * with auto-advance focus, backspace-to-previous, and paste-to-fill behaviour.
+ *
+ * - **Controlled** when `value` is provided; the parent must update it via
+ *   `onChange`. The displayed code is clamped to `length` characters.
+ * - **Uncontrolled** otherwise; `defaultValue` seeds the initial state.
+ *
+ * Calls `onComplete(code)` once the code reaches `length` characters and every
+ * character matches `alphabet`. The fire is suppressed while `autoSubmit`
+ * is `false`.
+ *
+ * All user-visible text (label, slot aria-labels) flows through `t()` so
+ * apps can localise via the companion `@molecule/app-locales-join-code`
+ * bond.
+ *
+ * Styling is delegated to `getClassMap()` — no Tailwind utility strings live
+ * in this package.
+ *
+ * @param props - See `JoinCodeProps`.
+ * @returns The rendered join-code input.
+ */
+export declare function JoinCode(props: JoinCodeProps): ReactElement;
+//# sourceMappingURL=JoinCode.d.ts.map

package/dist/JoinCode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"JoinCode.d.ts","sourceRoot":"","sources":["../src/JoinCode.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAIV,YAAY,EACb,MAAM,OAAO,CAAA;AAMd,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAA;AAK/C;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,wBAAgB,QAAQ,CAAC,KAAK,EAAE,aAAa,GAAG,YAAY,CA8L3D"}

package/dist/JoinCode.js

@@ -0,0 +1,152 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from '@molecule/app-react';
+import { getClassMap } from '@molecule/app-ui';
+import { isValidChar, sanitizeInput } from './utils.js';
+const DEFAULT_LENGTH = 6;
+/**
+ * Multi-slot join-code input. Renders one single-character `<input>` per slot
+ * with auto-advance focus, backspace-to-previous, and paste-to-fill behaviour.
+ *
+ * - **Controlled** when `value` is provided; the parent must update it via
+ *   `onChange`. The displayed code is clamped to `length` characters.
+ * - **Uncontrolled** otherwise; `defaultValue` seeds the initial state.
+ *
+ * Calls `onComplete(code)` once the code reaches `length` characters and every
+ * character matches `alphabet`. The fire is suppressed while `autoSubmit`
+ * is `false`.
+ *
+ * All user-visible text (label, slot aria-labels) flows through `t()` so
+ * apps can localise via the companion `@molecule/app-locales-join-code`
+ * bond.
+ *
+ * Styling is delegated to `getClassMap()` — no Tailwind utility strings live
+ * in this package.
+ *
+ * @param props - See `JoinCodeProps`.
+ * @returns The rendered join-code input.
+ */
+export function JoinCode(props) {
+    const { length = DEFAULT_LENGTH, value: controlledValue, defaultValue, onChange, onComplete, autoSubmit = true, alphabet = 'alphanumeric', disabled, className, } = props;
+    const cm = getClassMap();
+    const { t } = useTranslation();
+    const isControlled = controlledValue !== undefined;
+    const [internalValue, setInternalValue] = useState(() => sanitizeInput(defaultValue ?? '', alphabet).slice(0, length));
+    const rawValue = isControlled ? (controlledValue ?? '') : internalValue;
+    const value = useMemo(() => sanitizeInput(rawValue, alphabet).slice(0, length), [rawValue, alphabet, length]);
+    const inputRefs = useRef([]);
+    const completedForRef = useRef(null);
+    // Fire onComplete once per full-and-valid value.
+    useEffect(() => {
+        if (!autoSubmit)
+            return;
+        if (value.length !== length) {
+            completedForRef.current = null;
+            return;
+        }
+        const allValid = Array.from(value).every((c) => isValidChar(c, alphabet));
+        if (!allValid)
+            return;
+        if (completedForRef.current === value)
+            return;
+        completedForRef.current = value;
+        onComplete?.(value);
+    }, [value, length, alphabet, autoSubmit, onComplete]);
+    /**
+     * Commit a new code value to controlled/uncontrolled state and notify the
+     * parent.
+     *
+     * @param next - Sanitized, length-clamped code to commit.
+     */
+    const commit = useCallback((next) => {
+        if (!isControlled)
+            setInternalValue(next);
+        onChange?.(next);
+    }, [isControlled, onChange]);
+    /**
+     * Move keyboard focus to the input at the given index, if any.
+     *
+     * @param index - Slot index.
+     */
+    const focusSlot = useCallback((index) => {
+        const target = inputRefs.current[index];
+        if (target) {
+            target.focus();
+            target.select?.();
+        }
+    }, []);
+    /**
+     * Handle a single-slot change event. The browser may pass us 0, 1, or
+     * (under some IMEs / autofill paths) multiple characters; we treat any
+     * multi-character value as a paste-style fill starting at this slot.
+     *
+     * @param index - The slot that fired the change.
+     * @param e - The React change event.
+     */
+    const handleChange = useCallback((index, e) => {
+        const incoming = sanitizeInput(e.target.value, alphabet);
+        const before = value.slice(0, index);
+        const after = value.slice(index + 1);
+        const next = (before + incoming + after).slice(0, length);
+        commit(next);
+        // Move focus forward to the slot after the last character we wrote.
+        const advanceTo = Math.min(before.length + incoming.length, length - 1);
+        if (incoming.length > 0)
+            focusSlot(advanceTo);
+    }, [alphabet, value, length, commit, focusSlot]);
+    /**
+     * Handle keyboard navigation: backspace on an empty slot focuses the
+     * previous one; arrow-left / arrow-right move focus.
+     *
+     * @param index - Slot index.
+     * @param e - The React keyboard event.
+     */
+    const handleKeyDown = useCallback((index, e) => {
+        if (e.key === 'Backspace') {
+            if ((value[index] ?? '') === '' && index > 0) {
+                // Empty slot — clear previous and move back.
+                e.preventDefault();
+                const next = (value.slice(0, index - 1) + value.slice(index)).slice(0, length);
+                commit(next);
+                focusSlot(index - 1);
+            }
+            return;
+        }
+        if (e.key === 'ArrowLeft' && index > 0) {
+            e.preventDefault();
+            focusSlot(index - 1);
+        }
+        else if (e.key === 'ArrowRight' && index < length - 1) {
+            e.preventDefault();
+            focusSlot(index + 1);
+        }
+    }, [value, length, commit, focusSlot]);
+    /**
+     * Handle paste into any slot — sanitize and fill from the current slot
+     * forward.
+     *
+     * @param index - The slot that received the paste.
+     * @param e - The React clipboard event.
+     */
+    const handlePaste = useCallback((index, e) => {
+        const text = e.clipboardData.getData('text');
+        if (!text)
+            return;
+        e.preventDefault();
+        const incoming = sanitizeInput(text, alphabet);
+        const before = value.slice(0, index);
+        const next = (before + incoming).slice(0, length);
+        commit(next);
+        const advanceTo = Math.min(before.length + incoming.length, length - 1);
+        focusSlot(advanceTo);
+    }, [alphabet, value, length, commit, focusSlot]);
+    const slots = Array.from({ length });
+    const inputMode = alphabet === 'numeric' ? 'numeric' : 'text';
+    return (_jsx("div", { className: cm.cn(cm.flex({ align: 'center', gap: 'sm' }), className), role: "group", "aria-label": t('joinCode.label', undefined, { defaultValue: 'Join code' }), children: slots.map((_, index) => {
+            const slotValue = value[index] ?? '';
+            const slotLabel = t('joinCode.slotAriaLabel', { position: index + 1 }, { defaultValue: `Join code character ${index + 1}` });
+            return (_jsx("input", { ref: (el) => {
+                    inputRefs.current[index] = el;
+                }, type: "text", inputMode: inputMode, autoComplete: "one-time-code", maxLength: 1, value: slotValue, disabled: disabled, "aria-label": slotLabel, "data-mol-id": `join-code-slot-${index}`, onChange: (e) => handleChange(index, e), onKeyDown: (e) => handleKeyDown(index, e), onPaste: (e) => handlePaste(index, e), onFocus: (e) => e.currentTarget.select?.(), className: cm.cn(cm.input({ size: 'lg' }), cm.textCenter, cm.fontWeight('bold'), cm.textSize('2xl')), style: { width: '3rem' } }, index));
+        }) }));
+}

package/dist/index.d.ts

@@ -0,0 +1,26 @@
+/**
+ * React multi-slot join-code input.
+ *
+ * Exports:
+ * - `<JoinCode>` — N-slot single-character input with auto-advance, paste-to-fill,
+ *   alphabet validation, and `onComplete` notification.
+ * - `JoinCodeProps`, `JoinCodeAlphabet` — public types.
+ *
+ * Companion locale bond: `@molecule/app-locales-join-code`.
+ *
+ * @example
+ * ```tsx
+ * import { JoinCode } from '@molecule/app-join-code-react'
+ *
+ * <JoinCode
+ *   length={6}
+ *   alphabet="alphanumeric"
+ *   onChange={(code) => setCode(code)}
+ *   onComplete={(code) => verifyCode(code)}
+ * />
+ * ```
+ * @module
+ */
+export * from './JoinCode.js';
+export * from './types.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA"}

package/dist/index.js

@@ -0,0 +1,25 @@
+/**
+ * React multi-slot join-code input.
+ *
+ * Exports:
+ * - `<JoinCode>` — N-slot single-character input with auto-advance, paste-to-fill,
+ *   alphabet validation, and `onComplete` notification.
+ * - `JoinCodeProps`, `JoinCodeAlphabet` — public types.
+ *
+ * Companion locale bond: `@molecule/app-locales-join-code`.
+ *
+ * @example
+ * ```tsx
+ * import { JoinCode } from '@molecule/app-join-code-react'
+ *
+ * <JoinCode
+ *   length={6}
+ *   alphabet="alphanumeric"
+ *   onChange={(code) => setCode(code)}
+ *   onComplete={(code) => verifyCode(code)}
+ * />
+ * ```
+ * @module
+ */
+export * from './JoinCode.js';
+export * from './types.js';

package/dist/types.d.ts

@@ -0,0 +1,53 @@
+/**
+ * Public types for `@molecule/app-join-code-react`.
+ *
+ * @module
+ */
+/**
+ * Alphabet a join code may use.
+ *
+ * - `'numeric'` — `0-9` only.
+ * - `'letters'` — `A-Z` only (case-insensitive on input, normalised to upper-case).
+ * - `'alphanumeric'` — `A-Z` + `0-9` (case-insensitive, normalised to upper-case).
+ */
+export type JoinCodeAlphabet = 'numeric' | 'letters' | 'alphanumeric';
+/**
+ * Props for the `<JoinCode>` component.
+ */
+export interface JoinCodeProps {
+    /** Number of slots / characters in the code. Defaults to `6`. */
+    length?: number;
+    /**
+     * Controlled value. When provided, the component is controlled and ignores
+     * `defaultValue`. The value may be shorter than `length`; missing slots
+     * render empty.
+     */
+    value?: string;
+    /**
+     * Initial value when uncontrolled. Ignored when `value` is provided.
+     */
+    defaultValue?: string;
+    /**
+     * Called whenever the code changes (typing, paste, backspace).
+     * The argument is the *current* code (may be shorter than `length`).
+     */
+    onChange?: (code: string) => void;
+    /**
+     * Called when the code reaches the configured `length` and every character
+     * passes alphabet validation. Fires once per completion (re-fires when the
+     * code is cleared and re-completed).
+     */
+    onComplete?: (code: string) => void;
+    /**
+     * Whether to fire `onComplete` automatically when `length` is reached.
+     * Defaults to `true`.
+     */
+    autoSubmit?: boolean;
+    /** Allowed character set. Defaults to `'alphanumeric'`. */
+    alphabet?: JoinCodeAlphabet;
+    /** Whether the input is disabled. */
+    disabled?: boolean;
+    /** Optional className applied to the outer wrapper. */
+    className?: string;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH;;;;;;GAMG;AACH,MAAM,MAAM,gBAAgB,GAAG,SAAS,GAAG,SAAS,GAAG,cAAc,CAAA;AAErE;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,iEAAiE;IACjE,MAAM,CAAC,EAAE,MAAM,CAAA;IACf;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACjC;;;;OAIG;IACH,UAAU,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAA;IACnC;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,2DAA2D;IAC3D,QAAQ,CAAC,EAAE,gBAAgB,CAAA;IAC3B,qCAAqC;IACrC,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB"}

package/dist/types.js

@@ -0,0 +1,6 @@
+/**
+ * Public types for `@molecule/app-join-code-react`.
+ *
+ * @module
+ */
+export {};

package/dist/utils.d.ts

@@ -0,0 +1,34 @@
+/**
+ * Internal utilities for the JoinCode component.
+ *
+ * @module
+ */
+import type { JoinCodeAlphabet } from './types.js';
+/**
+ * Build a regex matching characters that should be stripped from input under
+ * the given alphabet. The returned regex has the global flag set.
+ *
+ * @param alphabet - The alphabet name.
+ * @returns A regex usable with `String.prototype.replace`.
+ */
+export declare function buildStripRegex(alphabet: JoinCodeAlphabet): RegExp;
+/**
+ * Sanitize a raw string by stripping disallowed characters and normalising to
+ * upper-case (when the alphabet is `'letters'` or `'alphanumeric'`).
+ *
+ * @param raw - The raw string to sanitize.
+ * @param alphabet - The alphabet name.
+ * @returns The sanitized string.
+ */
+export declare function sanitizeInput(raw: string, alphabet: JoinCodeAlphabet): string;
+/**
+ * Test whether a single character is valid for the given alphabet. The test
+ * runs against already-normalised characters (upper-case for letters /
+ * alphanumeric), so callers should sanitize first.
+ *
+ * @param char - The single character to test.
+ * @param alphabet - The alphabet name.
+ * @returns `true` when the character is allowed, `false` otherwise.
+ */
+export declare function isValidChar(char: string, alphabet: JoinCodeAlphabet): boolean;
+//# sourceMappingURL=utils.d.ts.map

package/dist/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../src/utils.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAA;AAoBlD;;;;;;GAMG;AACH,wBAAgB,eAAe,CAAC,QAAQ,EAAE,gBAAgB,GAAG,MAAM,CAElE;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,GAAG,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,GAAG,MAAM,CAG7E;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,gBAAgB,GAAG,OAAO,CAI7E"}

package/dist/utils.js

@@ -0,0 +1,59 @@
+/**
+ * Internal utilities for the JoinCode component.
+ *
+ * @module
+ */
+/**
+ * Regular-expression source matching a single character of the given alphabet.
+ *
+ * @param alphabet - The alphabet name.
+ * @returns A character-class string (e.g. `'A-Z0-9'`).
+ */
+function alphabetSource(alphabet) {
+    switch (alphabet) {
+        case 'numeric':
+            return '0-9';
+        case 'letters':
+            return 'A-Za-z';
+        case 'alphanumeric':
+        default:
+            return 'A-Za-z0-9';
+    }
+}
+/**
+ * Build a regex matching characters that should be stripped from input under
+ * the given alphabet. The returned regex has the global flag set.
+ *
+ * @param alphabet - The alphabet name.
+ * @returns A regex usable with `String.prototype.replace`.
+ */
+export function buildStripRegex(alphabet) {
+    return new RegExp(`[^${alphabetSource(alphabet)}]`, 'g');
+}
+/**
+ * Sanitize a raw string by stripping disallowed characters and normalising to
+ * upper-case (when the alphabet is `'letters'` or `'alphanumeric'`).
+ *
+ * @param raw - The raw string to sanitize.
+ * @param alphabet - The alphabet name.
+ * @returns The sanitized string.
+ */
+export function sanitizeInput(raw, alphabet) {
+    const stripped = raw.replace(buildStripRegex(alphabet), '');
+    return alphabet === 'numeric' ? stripped : stripped.toUpperCase();
+}
+/**
+ * Test whether a single character is valid for the given alphabet. The test
+ * runs against already-normalised characters (upper-case for letters /
+ * alphanumeric), so callers should sanitize first.
+ *
+ * @param char - The single character to test.
+ * @param alphabet - The alphabet name.
+ * @returns `true` when the character is allowed, `false` otherwise.
+ */
+export function isValidChar(char, alphabet) {
+    if (char.length !== 1)
+        return false;
+    const re = new RegExp(`^[${alphabetSource(alphabet)}]$`);
+    return re.test(char);
+}

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@molecule/app-join-code-react",
+  "version": "1.0.0",
+  "description": "Multi-slot join-code input with auto-advance, paste-to-fill, and alphabet validation. Used for live quiz join, virtual classroom room codes, and similar short-code entry UX.",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "scripts": {
+    "build": "tsc",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist"
+  ],
+  "keywords": [
+    "molecule",
+    "join-code",
+    "react"
+  ],
+  "license": "Apache-2.0",
+  "peerDependencies": {
+    "@molecule/app-i18n": "^1.0.0",
+    "@molecule/app-react": "^1.0.0",
+    "@molecule/app-ui": "^1.0.0",
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@molecule/app-i18n": "1.0.0",
+    "@molecule/app-react": "1.0.0",
+    "@molecule/app-ui": "1.0.0",
+    "@testing-library/react": "16.3.2",
+    "@types/node": "26.1.2",
+    "@types/react": "19.2.17",
+    "jsdom": "30.0.1",
+    "react": "19.2.8",
+    "react-dom": "19.2.8",
+    "typescript": "6.0.3",
+    "vitest": "4.1.10"
+  }
+}