@gumigumih/react-calculator-input-form 1.0.0 → 1.1.0

package/README.md

@@ -20,6 +20,7 @@
 - ⌨️ **キーボードショートカット対応**
 - 🔧 **TypeScript対応**
 - ⚙️ **カスタマイズ可能なオプション設定**
+- 🎨 **スタイルの自動読み込み**（別途CSSファイルの読み込み不要）
 
 ## 🚀 インストール
 
@@ -40,15 +41,14 @@ pnpm add @gumigumih/react-calculator-input-form
 ### 最も簡単な使用方法（推奨）
 
 ```tsx
-import { CalculatorInput } from '@gumigumih/react-calculator-input-form';
-import '@gumigumih/react-calculator-input-form/styles';
+import { CalculatorInputForm } from '@gumigumih/react-calculator-input-form';
 
 function App() {
   const [amount, setAmount] = useState('');
 
   return (
     <div>
-      <CalculatorInput
+      <CalculatorInputForm
         value={amount}
         onChange={setAmount}
         title="金額入力"
@@ -96,10 +96,10 @@ function App() {
 
 ## ⚙️ オプション設定
 
-### CalculatorInput オプション
+### CalculatorInputForm オプション
 
 ```tsx
-<CalculatorInput
+<CalculatorInputForm
   value={amount}
   onChange={setAmount}
   // 税計算の有効/無効
@@ -158,7 +158,7 @@ function App() {
 
 ```tsx
 // 日本円フォーマット
-<CalculatorInput
+<CalculatorInputForm
   value={amount}
   onChange={setAmount}
   numberFormatOptions={{
@@ -170,7 +170,7 @@ function App() {
 />
 
 // ドルフォーマット
-<CalculatorInput
+<CalculatorInputForm
   value={amount}
   onChange={setAmount}
   numberFormatOptions={{
@@ -183,7 +183,7 @@ function App() {
 />
 
 // パーセントフォーマット
-<CalculatorInput
+<CalculatorInputForm
   value={amount}
   onChange={setAmount}
   numberFormatOptions={{
@@ -200,7 +200,7 @@ react-number-formatの**すべてのプロパティ**が利用可能です。詳
 
 ## 📋 Props
 
-### CalculatorInput Props
+### CalculatorInputForm Props
 
 | プロパティ | 型 | 必須 | デフォルト | 説明 |
 |------------|----|------|------------|------|

package/dist/components/organisms/CalculatorInputForm.d.ts

@@ -0,0 +1,13 @@
+export interface CalculatorInputFormProps {
+    value: string;
+    onChange: (value: string) => void;
+    placeholder?: string;
+    className?: string;
+    title?: string;
+    description?: string;
+    enableTaxCalculation?: boolean;
+    decimalPlaces?: number;
+    numberFormatOptions?: any;
+    displayPlaceholder?: string;
+}
+export declare const CalculatorInputForm: ({ value, onChange, placeholder, className, title, description, enableTaxCalculation, decimalPlaces, numberFormatOptions, displayPlaceholder, }: CalculatorInputFormProps) => import("react/jsx-runtime").JSX.Element | null;

package/dist/index.css

@@ -0,0 +1,2 @@
+.calculator-overlay{align-items:center;background:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:9999}.calculator-background-pattern{inset:0;overflow:hidden;position:absolute}.calculator-background-pattern>div{inset:0;opacity:.1;position:absolute}.calculator-pattern-item{font-size:2rem;position:absolute}.calculator-pattern-item:first-child{font-size:2.5rem;left:2.5rem;top:2.5rem}.calculator-pattern-item:nth-child(2){font-size:1.875rem;right:5rem;top:5rem}.calculator-pattern-item:nth-child(3){font-size:1.5rem;left:5rem;top:10rem}.calculator-pattern-item:nth-child(4){font-size:1.875rem;right:10rem;top:15rem}.calculator-pattern-item:nth-child(5){font-size:1.5rem;left:10rem;top:20rem}.calculator-pattern-item:nth-child(6){bottom:10rem;font-size:1.875rem;right:5rem}.calculator-modal{background:#fff;border-radius:.75rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);max-height:90vh;max-width:24rem;overflow-y:auto;position:relative;width:100%;z-index:10}.calculator-header{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;padding:1rem}.calculator-logo-container{align-items:center;display:flex;gap:.75rem}.calculator-logo{align-items:center;background-color:#60a5fa;border-radius:50%;display:flex;height:2.5rem;justify-content:center;width:2.5rem}.calculator-logo-text{color:#fff;font-size:1.25rem;font-weight:700}.calculator-title{color:#111827;font-size:1.125rem;font-weight:700;margin:0}.calculator-subtitle{color:#6b7280;font-size:.75rem;margin:0}.calculator-close-button{background:none;border:none;border-radius:.375rem;color:#6b7280;cursor:pointer;font-size:1.25rem;padding:.5rem;transition:all .2s ease-in-out}.calculator-close-button:hover{background-color:#6b7280;color:#fff}.calculator-participants{display:flex;flex-direction:column;gap:1rem;padding:1.5rem}.calculator-participant-row{align-items:center;border:2px solid #e5e7eb;border-radius:.5rem;cursor:pointer;display:flex;justify-content:space-between;padding:1rem;transition:all .2s}.calculator-participant-row:hover{border-color:#d1d5db}.calculator-participant-row.selected{background-color:#eff6ff;border-color:#3b82f6}.calculator-participant-info{align-items:center;display:flex;gap:.75rem}.calculator-participant-name{color:#374151;font-size:1.125rem;font-weight:500}.calculator-participant-amount{align-items:center;display:flex;gap:.5rem}.calculator-amount-text{color:#111827;font-size:1.5rem;font-weight:700}.calculator-currency{color:#6b7280}.calculator-clear-button{background:none;border:none;color:#9ca3af;cursor:pointer;padding:.25rem;transition:color .2s}.calculator-clear-button:hover{color:#ef4444}.calculator-participant-controls{display:flex;gap:.5rem}.calculator-add-button{background-color:#3b82f6;border:none;border-radius:.5rem;color:#fff;cursor:pointer;flex:1;font-size:.875rem;font-weight:700;padding:.5rem 1rem;transition:background-color .2s}.calculator-add-button:hover{background-color:#2563eb}.calculator-remove-button{background-color:#6b7280;border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:.875rem;font-weight:700;padding:.5rem 1rem;transition:background-color .2s}.calculator-remove-button:hover{background-color:#4b5563}.calculator-keypad-section{border-top:none;padding:1rem}.calculator-display-input{background-color:#f3f4f6;border:none;border-radius:0!important;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace;font-size:1.5rem;outline:none;padding:.75rem 1.25rem;text-align:right;width:100%}.calculator-error{color:#ef4444;font-size:.75rem;margin-top:.25rem;padding-left:1.25rem;padding-right:1.25rem}.calculator-keypad{display:flex;flex-direction:column;gap:.5rem}.calculator-keypad-grid{display:grid;gap:.5rem;grid-template-columns:repeat(4,1fr)}.calculator-keypad-button{border:none;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);cursor:pointer;font-size:1rem;font-weight:700;padding:.75rem;transition:all .2s}.calculator-keypad-button.number{background-color:#f3f4f6;color:#374151}.calculator-keypad-button.number:hover{background-color:#dbeafe}.calculator-keypad-button.operator{background-color:#ff9f0a;color:#fff}.calculator-keypad-button.operator:hover{background-color:#ffb340}.calculator-keypad-button.clear{background-color:#ef4444;color:#fff}.calculator-keypad-button.clear:hover{background-color:#dc2626}.calculator-keypad-button.backspace{background-color:#a5a5a5;color:#fff}.calculator-keypad-button.backspace:hover{background-color:#b5b5b5}.calculator-keypad-button.decimal{background-color:#e5e7eb;color:#374151}.calculator-keypad-button.decimal:hover{background-color:#d1d5db}.calculator-keypad-button.include{background-color:#a5f3fc;color:#374151}.calculator-keypad-button.include:hover{background-color:#67e8f9}.calculator-keypad-button.exclude{background-color:#fce7f3;color:#374151}.calculator-keypad-button.exclude:hover{background-color:#fbcfe8}.calculator-action-buttons{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}.calculator-equals-button{background-color:#ff9f0a;border:none;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:.75rem;transition:background-color .2s}.calculator-equals-button:hover{background-color:#ffb340}.calculator-decide-button{background-color:#10b981;border:none;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-size:1rem;font-weight:700;grid-column:1/-1;padding:.75rem;transition:background-color .2s}.calculator-decide-button:hover{background-color:#059669}.calculator-total-section{border-top:1px solid #e5e7eb;padding:1.5rem}.calculator-total-row{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.calculator-total-label{color:#374151;font-size:1.125rem;font-weight:500}.calculator-total-amount{color:#111827;font-size:1.5rem;font-weight:700}.calculator-per-person{color:#2563eb}.calculator-calculate-button{background-color:#10b981;border:none;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-size:1.125rem;font-weight:700;padding:1rem;transition:background-color .2s;width:100%}.calculator-calculate-button:hover{background-color:#059669}@media (max-width:640px){.calculator-overlay{padding:.5rem}.calculator-modal{margin:.5rem;max-width:100%}.calculator-keypad-button{font-size:1.125rem;padding:.75rem}}.calculator-keypad-button.number.zero-wide{grid-column:span 2}
+/*# sourceMappingURL=index.css.map */

package/dist/index.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["calculator.css"],"names":[],"mappings":"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","file":"index.css","sourcesContent":["/* 電卓入力フォーム用スタイル */\n\n/* 背景とレイアウト */\n.calculator-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5); /* 黒の半透明 */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 1rem;\n}\n\n.calculator-background-pattern {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.calculator-background-pattern > div {\n  position: absolute;\n  inset: 0;\n  opacity: 0.1;\n}\n\n.calculator-pattern-item {\n  position: absolute;\n  font-size: 2rem;\n}\n\n.calculator-pattern-item:nth-child(1) {\n  top: 2.5rem;\n  left: 2.5rem;\n  font-size: 2.5rem;\n}\n.calculator-pattern-item:nth-child(2) {\n  top: 5rem;\n  right: 5rem;\n  font-size: 1.875rem;\n}\n.calculator-pattern-item:nth-child(3) {\n  top: 10rem;\n  left: 5rem;\n  font-size: 1.5rem;\n}\n.calculator-pattern-item:nth-child(4) {\n  top: 15rem;\n  right: 10rem;\n  font-size: 1.875rem;\n}\n.calculator-pattern-item:nth-child(5) {\n  top: 20rem;\n  left: 10rem;\n  font-size: 1.5rem;\n}\n.calculator-pattern-item:nth-child(6) {\n  bottom: 10rem;\n  right: 5rem;\n  font-size: 1.875rem;\n}\n\n/* メインカード */\n.calculator-modal {\n  background: white;\n  border-radius: 0.75rem;\n  width: 100%;\n  max-width: 24rem;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  max-height: 90vh;\n  overflow-y: auto;\n  position: relative;\n  z-index: 10;\n}\n\n/* ヘッダー */\n.calculator-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  border-bottom: 1px solid #e5e7eb;\n}\n\n.calculator-logo-container {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.calculator-logo {\n  width: 2.5rem;\n  height: 2.5rem;\n  background-color: #60a5fa;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.calculator-logo-text {\n  color: white;\n  font-size: 1.25rem;\n  font-weight: bold;\n}\n\n.calculator-title {\n  font-size: 1.125rem;\n  font-weight: 700;\n  color: #111827;\n  margin: 0;\n}\n\n.calculator-subtitle {\n  font-size: 0.75rem;\n  color: #6b7280;\n  margin: 0;\n}\n\n.calculator-close-button {\n  background: none;\n  border: none;\n  font-size: 1.25rem;\n  color: #6b7280;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 0.375rem;\n  transition: all 0.2s ease-in-out;\n}\n\n.calculator-close-button:hover {\n  background-color: #6b7280;\n  color: white;\n}\n\n/* 参加者セクション */\n.calculator-participants {\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.calculator-participant-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  border-radius: 0.5rem;\n  border: 2px solid #e5e7eb;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n\n.calculator-participant-row:hover {\n  border-color: #d1d5db;\n}\n\n.calculator-participant-row.selected {\n  border-color: #3b82f6;\n  background-color: #eff6ff;\n}\n\n.calculator-participant-info {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.calculator-participant-name {\n  font-size: 1.125rem;\n  font-weight: 500;\n  color: #374151;\n}\n\n.calculator-participant-amount {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.calculator-amount-text {\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: #111827;\n}\n\n.calculator-currency {\n  color: #6b7280;\n}\n\n.calculator-clear-button {\n  color: #9ca3af;\n  transition: color 0.2s;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n}\n\n.calculator-clear-button:hover {\n  color: #ef4444;\n}\n\n/* 参加者管理ボタン */\n.calculator-participant-controls {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.calculator-add-button {\n  flex: 1;\n  padding: 0.5rem 1rem;\n  background-color: #3b82f6;\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: bold;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.calculator-add-button:hover {\n  background-color: #2563eb;\n}\n\n.calculator-remove-button {\n  padding: 0.5rem 1rem;\n  background-color: #6b7280;\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: bold;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.calculator-remove-button:hover {\n  background-color: #4b5563;\n}\n\n/* 電卓キーパッド */\n.calculator-keypad-section {\n  border-top: none;\n  padding: 1rem;\n}\n\n.calculator-display {\n}\n\n.calculator-display-input {\n  text-align: right;\n  font-size: 1.5rem;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Consolas,\n    \"Liberation Mono\", Menlo, monospace;\n  background-color: #f3f4f6;\n  padding: 0.75rem 1.25rem;\n  border-radius: 0 !important; /* 角丸を確実に無効化 */\n  width: 100%;\n  box-sizing: border-box; /* パディング込みで100%に収める */\n  border: none;\n  outline: none;\n}\n\n/* エラーメッセージ */\n.calculator-error {\n  color: #ef4444;\n  font-size: 0.75rem; /* text-xs 相当 */\n  padding-left: 1.25rem;\n  padding-right: 1.25rem; /* 左右に余白 */\n  margin-top: 0.25rem;\n}\n\n/* キーパッドボタン */\n.calculator-keypad {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.calculator-keypad-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0.5rem;\n}\n\n.calculator-keypad-button {\n  padding: 0.75rem;\n  font-size: 1rem;\n  font-weight: 700;\n  border-radius: 0.5rem;\n  transition: all 0.2s;\n  border: none;\n  cursor: pointer;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\n.calculator-keypad-button.number {\n  background-color: #f3f4f6;\n  color: #374151;\n}\n\n.calculator-keypad-button.number:hover {\n  background-color: #dbeafe;\n}\n\n.calculator-keypad-button.operator {\n  background-color: #ff9f0a; /* iOS calculator orange */\n  color: #ffffff;\n}\n\n.calculator-keypad-button.operator:hover {\n  background-color: #ffb340; /* lighter on hover */\n}\n\n.calculator-keypad-button.clear {\n  background-color: #ef4444;\n  color: white;\n}\n\n.calculator-keypad-button.clear:hover {\n  background-color: #dc2626;\n}\n\n.calculator-keypad-button.backspace {\n  background-color: #a5a5a5; /* iOS-like function key gray */\n  color: #ffffff;\n}\n\n.calculator-keypad-button.backspace:hover {\n  background-color: #b5b5b5;\n}\n\n.calculator-keypad-button.decimal {\n  background-color: #e5e7eb;\n  color: #374151;\n}\n\n.calculator-keypad-button.decimal:hover {\n  background-color: #d1d5db;\n}\n\n/* 税込/税抜の視認性向上 */\n/* 税込=薄い水色系（クールで落ち着いた色） */\n\n/* 薄い水色基調（税込） */\n.calculator-keypad-button.include {\n  background-color: #a5f3fc; /* cyan-200 */\n  color: #374151; /* 数字ボタンと同じ文字色 */\n}\n\n.calculator-keypad-button.include:hover {\n  background-color: #67e8f9; /* cyan-300 */\n}\n\n/* 税抜=薄い桃色系（温かみのある色） */\n/* 薄い桃色基調（税抜） */\n.calculator-keypad-button.exclude {\n  background-color: #fce7f3; /* pink-200 */\n  color: #374151; /* 数字ボタンと同じ文字色 */\n}\n\n.calculator-keypad-button.exclude:hover {\n  background-color: #fbcfe8; /* pink-300 */\n}\n\n.calculator-action-buttons {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.75rem;\n}\n\n.calculator-equals-button {\n  padding: 0.75rem;\n  background-color: #ff9f0a; /* distinct from tax buttons, iOS-like */\n  color: #ffffff;\n  font-size: 1rem;\n  font-weight: 700;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.calculator-equals-button:hover {\n  background-color: #ffb340;\n}\n\n.calculator-decide-button {\n  padding: 0.75rem;\n  background-color: #10b981;\n  color: white;\n  font-size: 1rem;\n  font-weight: 700;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n  grid-column: 1 / -1; /* 横幅100%（2列分） */\n}\n\n.calculator-decide-button:hover {\n  background-color: #059669;\n}\n\n/* 合計と計算ボタン */\n.calculator-total-section {\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n}\n\n.calculator-total-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 1rem;\n}\n\n.calculator-total-label {\n  font-size: 1.125rem;\n  font-weight: 500;\n  color: #374151;\n}\n\n.calculator-total-amount {\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: #111827;\n}\n\n.calculator-per-person {\n  color: #2563eb;\n}\n\n.calculator-calculate-button {\n  width: 100%;\n  padding: 1rem;\n  background-color: #10b981;\n  color: white;\n  font-size: 1.125rem;\n  font-weight: bold;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.calculator-calculate-button:hover {\n  background-color: #059669;\n}\n\n/* レスポンシブ対応 */\n@media (max-width: 640px) {\n  .calculator-overlay {\n    padding: 0.5rem;\n  }\n\n  .calculator-modal {\n    max-width: 100%;\n    margin: 0.5rem;\n  }\n\n  .calculator-keypad-button {\n    padding: 0.75rem;\n    font-size: 1.125rem;\n  }\n}\n\n.calculator-keypad-button.number.zero-wide {\n  grid-column: span 2;\n}\n"]}

package/dist/index.d.ts

@@ -1,12 +1,13 @@
+import './styles/calculator.css';
 export { Button } from './components/atoms/Button';
 export { Icon } from './components/atoms/Icon';
 export { CalculatorDisplay } from './components/molecules/CalculatorDisplay';
 export { CalculatorKeypad } from './components/molecules/CalculatorKeypad';
 export { Calculator } from './components/organisms/Calculator';
-export { CalculatorInput } from './components/organisms/CalculatorInput';
+export { CalculatorInputForm } from './components/organisms/CalculatorInputForm';
 export type { ButtonProps } from './components/atoms/Button';
 export type { IconProps } from './components/atoms/Icon';
 export type { CalculatorDisplayProps } from './components/molecules/CalculatorDisplay';
 export type { CalculatorKeypadProps } from './components/molecules/CalculatorKeypad';
 export type { CalculatorProps } from './components/organisms/Calculator';
-export type { CalculatorInputProps } from './components/organisms/CalculatorInput';
+export type { CalculatorInputFormProps } from './components/organisms/CalculatorInputForm';

package/dist/index.esm.css

@@ -0,0 +1,2 @@
+.calculator-overlay{align-items:center;background:rgba(0,0,0,.5);bottom:0;display:flex;justify-content:center;left:0;padding:1rem;position:fixed;right:0;top:0;z-index:9999}.calculator-background-pattern{inset:0;overflow:hidden;position:absolute}.calculator-background-pattern>div{inset:0;opacity:.1;position:absolute}.calculator-pattern-item{font-size:2rem;position:absolute}.calculator-pattern-item:first-child{font-size:2.5rem;left:2.5rem;top:2.5rem}.calculator-pattern-item:nth-child(2){font-size:1.875rem;right:5rem;top:5rem}.calculator-pattern-item:nth-child(3){font-size:1.5rem;left:5rem;top:10rem}.calculator-pattern-item:nth-child(4){font-size:1.875rem;right:10rem;top:15rem}.calculator-pattern-item:nth-child(5){font-size:1.5rem;left:10rem;top:20rem}.calculator-pattern-item:nth-child(6){bottom:10rem;font-size:1.875rem;right:5rem}.calculator-modal{background:#fff;border-radius:.75rem;box-shadow:0 25px 50px -12px rgba(0,0,0,.25);max-height:90vh;max-width:24rem;overflow-y:auto;position:relative;width:100%;z-index:10}.calculator-header{align-items:center;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;padding:1rem}.calculator-logo-container{align-items:center;display:flex;gap:.75rem}.calculator-logo{align-items:center;background-color:#60a5fa;border-radius:50%;display:flex;height:2.5rem;justify-content:center;width:2.5rem}.calculator-logo-text{color:#fff;font-size:1.25rem;font-weight:700}.calculator-title{color:#111827;font-size:1.125rem;font-weight:700;margin:0}.calculator-subtitle{color:#6b7280;font-size:.75rem;margin:0}.calculator-close-button{background:none;border:none;border-radius:.375rem;color:#6b7280;cursor:pointer;font-size:1.25rem;padding:.5rem;transition:all .2s ease-in-out}.calculator-close-button:hover{background-color:#6b7280;color:#fff}.calculator-participants{display:flex;flex-direction:column;gap:1rem;padding:1.5rem}.calculator-participant-row{align-items:center;border:2px solid #e5e7eb;border-radius:.5rem;cursor:pointer;display:flex;justify-content:space-between;padding:1rem;transition:all .2s}.calculator-participant-row:hover{border-color:#d1d5db}.calculator-participant-row.selected{background-color:#eff6ff;border-color:#3b82f6}.calculator-participant-info{align-items:center;display:flex;gap:.75rem}.calculator-participant-name{color:#374151;font-size:1.125rem;font-weight:500}.calculator-participant-amount{align-items:center;display:flex;gap:.5rem}.calculator-amount-text{color:#111827;font-size:1.5rem;font-weight:700}.calculator-currency{color:#6b7280}.calculator-clear-button{background:none;border:none;color:#9ca3af;cursor:pointer;padding:.25rem;transition:color .2s}.calculator-clear-button:hover{color:#ef4444}.calculator-participant-controls{display:flex;gap:.5rem}.calculator-add-button{background-color:#3b82f6;border:none;border-radius:.5rem;color:#fff;cursor:pointer;flex:1;font-size:.875rem;font-weight:700;padding:.5rem 1rem;transition:background-color .2s}.calculator-add-button:hover{background-color:#2563eb}.calculator-remove-button{background-color:#6b7280;border:none;border-radius:.5rem;color:#fff;cursor:pointer;font-size:.875rem;font-weight:700;padding:.5rem 1rem;transition:background-color .2s}.calculator-remove-button:hover{background-color:#4b5563}.calculator-keypad-section{border-top:none;padding:1rem}.calculator-display-input{background-color:#f3f4f6;border:none;border-radius:0!important;box-sizing:border-box;font-family:ui-monospace,SFMono-Regular,SF Mono,Consolas,Liberation Mono,Menlo,monospace;font-size:1.5rem;outline:none;padding:.75rem 1.25rem;text-align:right;width:100%}.calculator-error{color:#ef4444;font-size:.75rem;margin-top:.25rem;padding-left:1.25rem;padding-right:1.25rem}.calculator-keypad{display:flex;flex-direction:column;gap:.5rem}.calculator-keypad-grid{display:grid;gap:.5rem;grid-template-columns:repeat(4,1fr)}.calculator-keypad-button{border:none;border-radius:.5rem;box-shadow:0 4px 6px -1px rgba(0,0,0,.1);cursor:pointer;font-size:1rem;font-weight:700;padding:.75rem;transition:all .2s}.calculator-keypad-button.number{background-color:#f3f4f6;color:#374151}.calculator-keypad-button.number:hover{background-color:#dbeafe}.calculator-keypad-button.operator{background-color:#ff9f0a;color:#fff}.calculator-keypad-button.operator:hover{background-color:#ffb340}.calculator-keypad-button.clear{background-color:#ef4444;color:#fff}.calculator-keypad-button.clear:hover{background-color:#dc2626}.calculator-keypad-button.backspace{background-color:#a5a5a5;color:#fff}.calculator-keypad-button.backspace:hover{background-color:#b5b5b5}.calculator-keypad-button.decimal{background-color:#e5e7eb;color:#374151}.calculator-keypad-button.decimal:hover{background-color:#d1d5db}.calculator-keypad-button.include{background-color:#a5f3fc;color:#374151}.calculator-keypad-button.include:hover{background-color:#67e8f9}.calculator-keypad-button.exclude{background-color:#fce7f3;color:#374151}.calculator-keypad-button.exclude:hover{background-color:#fbcfe8}.calculator-action-buttons{display:grid;gap:.75rem;grid-template-columns:1fr 1fr}.calculator-equals-button{background-color:#ff9f0a;border:none;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-size:1rem;font-weight:700;padding:.75rem;transition:background-color .2s}.calculator-equals-button:hover{background-color:#ffb340}.calculator-decide-button{background-color:#10b981;border:none;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-size:1rem;font-weight:700;grid-column:1/-1;padding:.75rem;transition:background-color .2s}.calculator-decide-button:hover{background-color:#059669}.calculator-total-section{border-top:1px solid #e5e7eb;padding:1.5rem}.calculator-total-row{align-items:center;display:flex;justify-content:space-between;margin-bottom:1rem}.calculator-total-label{color:#374151;font-size:1.125rem;font-weight:500}.calculator-total-amount{color:#111827;font-size:1.5rem;font-weight:700}.calculator-per-person{color:#2563eb}.calculator-calculate-button{background-color:#10b981;border:none;border-radius:.5rem;box-shadow:0 10px 15px -3px rgba(0,0,0,.1);color:#fff;cursor:pointer;font-size:1.125rem;font-weight:700;padding:1rem;transition:background-color .2s;width:100%}.calculator-calculate-button:hover{background-color:#059669}@media (max-width:640px){.calculator-overlay{padding:.5rem}.calculator-modal{margin:.5rem;max-width:100%}.calculator-keypad-button{font-size:1.125rem;padding:.75rem}}.calculator-keypad-button.number.zero-wide{grid-column:span 2}
+/*# sourceMappingURL=index.esm.css.map */

package/dist/index.esm.css.map

@@ -0,0 +1 @@
+{"version":3,"sources":["calculator.css"],"names":[],"mappings":"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","file":"index.esm.css","sourcesContent":["/* 電卓入力フォーム用スタイル */\n\n/* 背景とレイアウト */\n.calculator-overlay {\n  position: fixed;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  background: rgba(0, 0, 0, 0.5); /* 黒の半透明 */\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 9999;\n  padding: 1rem;\n}\n\n.calculator-background-pattern {\n  position: absolute;\n  inset: 0;\n  overflow: hidden;\n}\n\n.calculator-background-pattern > div {\n  position: absolute;\n  inset: 0;\n  opacity: 0.1;\n}\n\n.calculator-pattern-item {\n  position: absolute;\n  font-size: 2rem;\n}\n\n.calculator-pattern-item:nth-child(1) {\n  top: 2.5rem;\n  left: 2.5rem;\n  font-size: 2.5rem;\n}\n.calculator-pattern-item:nth-child(2) {\n  top: 5rem;\n  right: 5rem;\n  font-size: 1.875rem;\n}\n.calculator-pattern-item:nth-child(3) {\n  top: 10rem;\n  left: 5rem;\n  font-size: 1.5rem;\n}\n.calculator-pattern-item:nth-child(4) {\n  top: 15rem;\n  right: 10rem;\n  font-size: 1.875rem;\n}\n.calculator-pattern-item:nth-child(5) {\n  top: 20rem;\n  left: 10rem;\n  font-size: 1.5rem;\n}\n.calculator-pattern-item:nth-child(6) {\n  bottom: 10rem;\n  right: 5rem;\n  font-size: 1.875rem;\n}\n\n/* メインカード */\n.calculator-modal {\n  background: white;\n  border-radius: 0.75rem;\n  width: 100%;\n  max-width: 24rem;\n  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);\n  max-height: 90vh;\n  overflow-y: auto;\n  position: relative;\n  z-index: 10;\n}\n\n/* ヘッダー */\n.calculator-header {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  padding: 1rem;\n  border-bottom: 1px solid #e5e7eb;\n}\n\n.calculator-logo-container {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.calculator-logo {\n  width: 2.5rem;\n  height: 2.5rem;\n  background-color: #60a5fa;\n  border-radius: 50%;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.calculator-logo-text {\n  color: white;\n  font-size: 1.25rem;\n  font-weight: bold;\n}\n\n.calculator-title {\n  font-size: 1.125rem;\n  font-weight: 700;\n  color: #111827;\n  margin: 0;\n}\n\n.calculator-subtitle {\n  font-size: 0.75rem;\n  color: #6b7280;\n  margin: 0;\n}\n\n.calculator-close-button {\n  background: none;\n  border: none;\n  font-size: 1.25rem;\n  color: #6b7280;\n  cursor: pointer;\n  padding: 0.5rem;\n  border-radius: 0.375rem;\n  transition: all 0.2s ease-in-out;\n}\n\n.calculator-close-button:hover {\n  background-color: #6b7280;\n  color: white;\n}\n\n/* 参加者セクション */\n.calculator-participants {\n  padding: 1.5rem;\n  display: flex;\n  flex-direction: column;\n  gap: 1rem;\n}\n\n.calculator-participant-row {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  padding: 1rem;\n  border-radius: 0.5rem;\n  border: 2px solid #e5e7eb;\n  transition: all 0.2s;\n  cursor: pointer;\n}\n\n.calculator-participant-row:hover {\n  border-color: #d1d5db;\n}\n\n.calculator-participant-row.selected {\n  border-color: #3b82f6;\n  background-color: #eff6ff;\n}\n\n.calculator-participant-info {\n  display: flex;\n  align-items: center;\n  gap: 0.75rem;\n}\n\n.calculator-participant-name {\n  font-size: 1.125rem;\n  font-weight: 500;\n  color: #374151;\n}\n\n.calculator-participant-amount {\n  display: flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.calculator-amount-text {\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: #111827;\n}\n\n.calculator-currency {\n  color: #6b7280;\n}\n\n.calculator-clear-button {\n  color: #9ca3af;\n  transition: color 0.2s;\n  background: none;\n  border: none;\n  cursor: pointer;\n  padding: 0.25rem;\n}\n\n.calculator-clear-button:hover {\n  color: #ef4444;\n}\n\n/* 参加者管理ボタン */\n.calculator-participant-controls {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.calculator-add-button {\n  flex: 1;\n  padding: 0.5rem 1rem;\n  background-color: #3b82f6;\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: bold;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.calculator-add-button:hover {\n  background-color: #2563eb;\n}\n\n.calculator-remove-button {\n  padding: 0.5rem 1rem;\n  background-color: #6b7280;\n  color: white;\n  border: none;\n  border-radius: 0.5rem;\n  font-size: 0.875rem;\n  font-weight: bold;\n  cursor: pointer;\n  transition: background-color 0.2s;\n}\n\n.calculator-remove-button:hover {\n  background-color: #4b5563;\n}\n\n/* 電卓キーパッド */\n.calculator-keypad-section {\n  border-top: none;\n  padding: 1rem;\n}\n\n.calculator-display {\n}\n\n.calculator-display-input {\n  text-align: right;\n  font-size: 1.5rem;\n  font-family: ui-monospace, SFMono-Regular, \"SF Mono\", Consolas,\n    \"Liberation Mono\", Menlo, monospace;\n  background-color: #f3f4f6;\n  padding: 0.75rem 1.25rem;\n  border-radius: 0 !important; /* 角丸を確実に無効化 */\n  width: 100%;\n  box-sizing: border-box; /* パディング込みで100%に収める */\n  border: none;\n  outline: none;\n}\n\n/* エラーメッセージ */\n.calculator-error {\n  color: #ef4444;\n  font-size: 0.75rem; /* text-xs 相当 */\n  padding-left: 1.25rem;\n  padding-right: 1.25rem; /* 左右に余白 */\n  margin-top: 0.25rem;\n}\n\n/* キーパッドボタン */\n.calculator-keypad {\n  display: flex;\n  flex-direction: column;\n  gap: 0.5rem;\n}\n\n.calculator-keypad-grid {\n  display: grid;\n  grid-template-columns: repeat(4, 1fr);\n  gap: 0.5rem;\n}\n\n.calculator-keypad-button {\n  padding: 0.75rem;\n  font-size: 1rem;\n  font-weight: 700;\n  border-radius: 0.5rem;\n  transition: all 0.2s;\n  border: none;\n  cursor: pointer;\n  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);\n}\n\n.calculator-keypad-button.number {\n  background-color: #f3f4f6;\n  color: #374151;\n}\n\n.calculator-keypad-button.number:hover {\n  background-color: #dbeafe;\n}\n\n.calculator-keypad-button.operator {\n  background-color: #ff9f0a; /* iOS calculator orange */\n  color: #ffffff;\n}\n\n.calculator-keypad-button.operator:hover {\n  background-color: #ffb340; /* lighter on hover */\n}\n\n.calculator-keypad-button.clear {\n  background-color: #ef4444;\n  color: white;\n}\n\n.calculator-keypad-button.clear:hover {\n  background-color: #dc2626;\n}\n\n.calculator-keypad-button.backspace {\n  background-color: #a5a5a5; /* iOS-like function key gray */\n  color: #ffffff;\n}\n\n.calculator-keypad-button.backspace:hover {\n  background-color: #b5b5b5;\n}\n\n.calculator-keypad-button.decimal {\n  background-color: #e5e7eb;\n  color: #374151;\n}\n\n.calculator-keypad-button.decimal:hover {\n  background-color: #d1d5db;\n}\n\n/* 税込/税抜の視認性向上 */\n/* 税込=薄い水色系（クールで落ち着いた色） */\n\n/* 薄い水色基調（税込） */\n.calculator-keypad-button.include {\n  background-color: #a5f3fc; /* cyan-200 */\n  color: #374151; /* 数字ボタンと同じ文字色 */\n}\n\n.calculator-keypad-button.include:hover {\n  background-color: #67e8f9; /* cyan-300 */\n}\n\n/* 税抜=薄い桃色系（温かみのある色） */\n/* 薄い桃色基調（税抜） */\n.calculator-keypad-button.exclude {\n  background-color: #fce7f3; /* pink-200 */\n  color: #374151; /* 数字ボタンと同じ文字色 */\n}\n\n.calculator-keypad-button.exclude:hover {\n  background-color: #fbcfe8; /* pink-300 */\n}\n\n.calculator-action-buttons {\n  display: grid;\n  grid-template-columns: 1fr 1fr;\n  gap: 0.75rem;\n}\n\n.calculator-equals-button {\n  padding: 0.75rem;\n  background-color: #ff9f0a; /* distinct from tax buttons, iOS-like */\n  color: #ffffff;\n  font-size: 1rem;\n  font-weight: 700;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.calculator-equals-button:hover {\n  background-color: #ffb340;\n}\n\n.calculator-decide-button {\n  padding: 0.75rem;\n  background-color: #10b981;\n  color: white;\n  font-size: 1rem;\n  font-weight: 700;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n  grid-column: 1 / -1; /* 横幅100%（2列分） */\n}\n\n.calculator-decide-button:hover {\n  background-color: #059669;\n}\n\n/* 合計と計算ボタン */\n.calculator-total-section {\n  padding: 1.5rem;\n  border-top: 1px solid #e5e7eb;\n}\n\n.calculator-total-row {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n  margin-bottom: 1rem;\n}\n\n.calculator-total-label {\n  font-size: 1.125rem;\n  font-weight: 500;\n  color: #374151;\n}\n\n.calculator-total-amount {\n  font-size: 1.5rem;\n  font-weight: bold;\n  color: #111827;\n}\n\n.calculator-per-person {\n  color: #2563eb;\n}\n\n.calculator-calculate-button {\n  width: 100%;\n  padding: 1rem;\n  background-color: #10b981;\n  color: white;\n  font-size: 1.125rem;\n  font-weight: bold;\n  border: none;\n  border-radius: 0.5rem;\n  cursor: pointer;\n  transition: background-color 0.2s;\n  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);\n}\n\n.calculator-calculate-button:hover {\n  background-color: #059669;\n}\n\n/* レスポンシブ対応 */\n@media (max-width: 640px) {\n  .calculator-overlay {\n    padding: 0.5rem;\n  }\n\n  .calculator-modal {\n    max-width: 100%;\n    margin: 0.5rem;\n  }\n\n  .calculator-keypad-button {\n    padding: 0.75rem;\n    font-size: 1.125rem;\n  }\n}\n\n.calculator-keypad-button.number.zero-wide {\n  grid-column: span 2;\n}\n"]}

package/dist/index.esm.js

@@ -6421,7 +6421,13 @@ const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, de
  }) => {
     const [input, setInput] = useState(initialValue || '');
     const [error, setError] = useState('');
+    const [mounted, setMounted] = useState(false);
     const inputRef = useRef(null);
+    // DOM要素の存在確認
+    useEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
     useEffect(() => {
         if (isOpen) {
             setInput(initialValue || '');
@@ -6543,20 +6549,34 @@ const Calculator = ({ isOpen, onClose, onCalculate, initialValue = '', title, de
         setInput(normalizeNumberString(taxExcluded, decimalPlaces));
         setError('');
     };
-    if (!isOpen)
+    if (!isOpen || !mounted)
         return null;
     const modal = (jsx("div", { className: "calculator-overlay", children: jsxs("div", { className: "calculator-modal", children: [title || description ? (jsxs("div", { className: "calculator-header", children: [jsxs("div", { children: [title && jsx("h2", { className: "calculator-title", children: title }), description && jsx("p", { className: "calculator-subtitle", children: description })] }), jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })) : (jsxs("div", { className: "calculator-header", children: [jsx("div", {}), jsx("button", { onClick: onClose, className: "calculator-close-button", "aria-label": "\u9589\u3058\u308B", children: jsx(Icon, { icon: faTimes, className: "w-5 h-5" }) })] })), jsx("div", { className: "calculator-display", children: jsx(CalculatorDisplay, { value: input, error: error, inputRef: inputRef, editable: true, onChange: (v) => setInput(v), numberFormatOptions: numberFormatOptions }) }), jsx(CalculatorKeypad, { onButtonClick: handleButtonClick, onEqual: handleEqual, onDecide: handleDecide, onTaxInclude: handleTaxInclude, onTaxExclude: handleTaxExclude, enableTaxCalculation: enableTaxCalculation, decimalPlaces: decimalPlaces })] }) }));
-    return createPortal(modal, document.body);
+    // DOM要素の存在確認を行ってからポータルを作成
+    if (typeof document !== 'undefined' && document.body) {
+        return createPortal(modal, document.body);
+    }
+    return null;
 };
 
-const CalculatorInput = ({ value, onChange, placeholder = 'クリックして金額を入力', className, title, description, enableTaxCalculation = false, decimalPlaces = 6, numberFormatOptions = {}, displayPlaceholder, }) => {
+const CalculatorInputForm = ({ value, onChange, placeholder = 'クリックして金額を入力', className, title, description, enableTaxCalculation = false, decimalPlaces = 6, numberFormatOptions = {}, displayPlaceholder, }) => {
     const [isOpen, setIsOpen] = useState(false);
+    const [mounted, setMounted] = useState(false);
+    // DOM要素の存在確認
+    useEffect(() => {
+        setMounted(true);
+        return () => setMounted(false);
+    }, []);
     const handleCalculate = (val) => {
         onChange(val);
         setIsOpen(false);
     };
+    // マウント前は何も表示しない
+    if (!mounted) {
+        return null;
+    }
     return (jsxs(Fragment, { children: [jsx(NumericFormat, { value: value, onValueChange: (vals) => onChange(vals.value), placeholder: placeholder, className: className, readOnly: true, onClick: () => setIsOpen(true), ...numberFormatOptions }), jsx(Calculator, { isOpen: isOpen, onClose: () => setIsOpen(false), onCalculate: handleCalculate, initialValue: value, title: title, description: description, enableTaxCalculation: enableTaxCalculation, decimalPlaces: decimalPlaces, numberFormatOptions: numberFormatOptions, placeholder: displayPlaceholder })] }));
 };
 
-export { Button, Calculator, CalculatorDisplay, CalculatorInput, CalculatorKeypad, Icon };
+export { Button, Calculator, CalculatorDisplay, CalculatorInputForm, CalculatorKeypad, Icon };
 //# sourceMappingURL=index.esm.js.map