@gumigumih/react-calculator-input-form 1.1.5 → 2.0.0

package/dist/styles/calculator.css

@@ -1,13 +1,13 @@
 /* 電卓入力フォーム用スタイル */
 
-/* 背景とレイアウト */
-.calculator-overlay {
+/* 背景とレイアウト */
+.calculator-overlay {
   position: fixed;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba(0, 0, 0, 0.5); /* 黒の半透明 */
+  background: rgba(0, 0, 0, 0.5); /* 黒の半透明 */
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,8 +64,8 @@
 }
 
 /* メインカード */
-.calculator-modal {
-  background: white;
+.calculator-modal {
+  background: var(--calculator-surface, white);
   border-radius: 0.75rem;
   width: 100%;
   max-width: 24rem;
@@ -91,10 +91,10 @@
   gap: 0.75rem;
 }
 
-.calculator-logo {
-  width: 2.5rem;
-  height: 2.5rem;
-  background-color: #60a5fa;
+.calculator-logo {
+  width: 2.5rem;
+  height: 2.5rem;
+  background-color: var(--calculator-primary, #60a5fa);
   border-radius: 50%;
   display: flex;
   align-items: center;
@@ -131,10 +131,10 @@
   transition: all 0.2s ease-in-out;
 }
 
-.calculator-close-button:hover {
-  background-color: #6b7280;
-  color: white;
-}
+.calculator-close-button:hover {
+  background-color: var(--calculator-danger, #6b7280);
+  color: white;
+}
 
 /* 参加者セクション */
 .calculator-participants {
@@ -159,10 +159,10 @@
   border-color: #d1d5db;
 }
 
-.calculator-participant-row.selected {
-  border-color: #3b82f6;
-  background-color: #eff6ff;
-}
+.calculator-participant-row.selected {
+  border-color: var(--calculator-primary, #3b82f6);
+  background-color: color-mix(in srgb, var(--calculator-primary, #3b82f6) 10%, white);
+}
 
 .calculator-participant-info {
   display: flex;
@@ -211,10 +211,10 @@
   gap: 0.5rem;
 }
 
-.calculator-add-button {
+.calculator-add-button {
   flex: 1;
   padding: 0.5rem 1rem;
-  background-color: #3b82f6;
+  background-color: var(--calculator-primary, #3b82f6);
   color: white;
   border: none;
   border-radius: 0.5rem;
@@ -224,13 +224,13 @@
   transition: background-color 0.2s;
 }
 
-.calculator-add-button:hover {
-  background-color: #2563eb;
-}
+.calculator-add-button:hover {
+  background-color: color-mix(in srgb, var(--calculator-primary, #3b82f6) 85%, black);
+}
 
-.calculator-remove-button {
+.calculator-remove-button {
   padding: 0.5rem 1rem;
-  background-color: #6b7280;
+  background-color: var(--calculator-danger, #6b7280);
   color: white;
   border: none;
   border-radius: 0.5rem;
@@ -240,9 +240,9 @@
   transition: background-color 0.2s;
 }
 
-.calculator-remove-button:hover {
-  background-color: #4b5563;
-}
+.calculator-remove-button:hover {
+  background-color: color-mix(in srgb, var(--calculator-danger, #6b7280) 85%, black);
+}
 
 /* 電卓キーパッド */
 .calculator-keypad-section {
@@ -309,23 +309,23 @@
   background-color: #dbeafe;
 }
 
-.calculator-keypad-button.operator {
-  background-color: #ff9f0a; /* iOS calculator orange */
+.calculator-keypad-button.operator {
+  background-color: var(--calculator-operator, #ff9f0a); /* iOS calculator orange */
   color: #ffffff;
 }
 
-.calculator-keypad-button.operator:hover {
-  background-color: #ffb340; /* lighter on hover */
-}
+.calculator-keypad-button.operator:hover {
+  background-color: color-mix(in srgb, var(--calculator-operator, #ff9f0a) 85%, white); /* lighter on hover */
+}
 
-.calculator-keypad-button.clear {
-  background-color: #ef4444;
+.calculator-keypad-button.clear {
+  background-color: var(--calculator-danger, #ef4444);
   color: white;
 }
 
-.calculator-keypad-button.clear:hover {
-  background-color: #dc2626;
-}
+.calculator-keypad-button.clear:hover {
+  background-color: color-mix(in srgb, var(--calculator-danger, #ef4444) 85%, black);
+}
 
 .calculator-keypad-button.backspace {
   background-color: #a5a5a5; /* iOS-like function key gray */
@@ -349,25 +349,25 @@
 /* 税込=薄い水色系（クールで落ち着いた色） */
 
 /* 薄い水色基調（税込） */
-.calculator-keypad-button.include {
-  background-color: #a5f3fc; /* cyan-200 */
+.calculator-keypad-button.include {
+  background-color: color-mix(in srgb, var(--calculator-success, #a5f3fc) 30%, white); /* cyan-200 */
   color: #374151; /* 数字ボタンと同じ文字色 */
 }
 
-.calculator-keypad-button.include:hover {
-  background-color: #67e8f9; /* cyan-300 */
-}
+.calculator-keypad-button.include:hover {
+  background-color: var(--calculator-success, #67e8f9); /* cyan-300 */
+}
 
 /* 税抜=薄い桃色系（温かみのある色） */
 /* 薄い桃色基調（税抜） */
-.calculator-keypad-button.exclude {
-  background-color: #fce7f3; /* pink-200 */
+.calculator-keypad-button.exclude {
+  background-color: color-mix(in srgb, var(--calculator-danger, #fce7f3) 20%, white); /* pink-200 */
   color: #374151; /* 数字ボタンと同じ文字色 */
 }
 
-.calculator-keypad-button.exclude:hover {
-  background-color: #fbcfe8; /* pink-300 */
-}
+.calculator-keypad-button.exclude:hover {
+  background-color: color-mix(in srgb, var(--calculator-danger, #fbcfe8) 35%, white); /* pink-300 */
+}
 
 .calculator-action-buttons {
   display: grid;
@@ -375,9 +375,9 @@
   gap: 0.75rem;
 }
 
-.calculator-equals-button {
+.calculator-equals-button {
   padding: 0.75rem;
-  background-color: #ff9f0a; /* distinct from tax buttons, iOS-like */
+  background-color: var(--calculator-operator, #ff9f0a); /* distinct from tax buttons, iOS-like */
   color: #ffffff;
   font-size: 1rem;
   font-weight: 700;
@@ -388,13 +388,13 @@
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 
-.calculator-equals-button:hover {
-  background-color: #ffb340;
-}
+.calculator-equals-button:hover {
+  background-color: color-mix(in srgb, var(--calculator-operator, #ff9f0a) 85%, white);
+}
 
-.calculator-decide-button {
+.calculator-decide-button {
   padding: 0.75rem;
-  background-color: #10b981;
+  background-color: var(--calculator-success, #10b981);
   color: white;
   font-size: 1rem;
   font-weight: 700;
@@ -406,9 +406,9 @@
   grid-column: 1 / -1; /* 横幅100%（2列分） */
 }
 
-.calculator-decide-button:hover {
-  background-color: #059669;
-}
+.calculator-decide-button:hover {
+  background-color: color-mix(in srgb, var(--calculator-success, #10b981) 85%, black);
+}
 
 /* 合計と計算ボタン */
 .calculator-total-section {
@@ -435,14 +435,14 @@
   color: #111827;
 }
 
-.calculator-per-person {
-  color: #2563eb;
-}
+.calculator-per-person {
+  color: var(--calculator-primary, #2563eb);
+}
 
-.calculator-calculate-button {
+.calculator-calculate-button {
   width: 100%;
   padding: 1rem;
-  background-color: #10b981;
+  background-color: var(--calculator-success, #10b981);
   color: white;
   font-size: 1.125rem;
   font-weight: bold;
@@ -453,9 +453,9 @@
   box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
 }
 
-.calculator-calculate-button:hover {
-  background-color: #059669;
-}
+.calculator-calculate-button:hover {
+  background-color: color-mix(in srgb, var(--calculator-success, #10b981) 85%, black);
+}
 
 /* レスポンシブ対応 */
 @media (max-width: 640px) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gumigumih/react-calculator-input-form",
-  "version": "1.1.5",
+  "version": "2.0.0",
   "description": "React電卓入力フォームプラグイン - 税込税抜計算機能付き",
   "type": "module",
   "main": "dist/index.js",
@@ -9,6 +9,10 @@
   "files": [
     "dist"
   ],
+  "sideEffects": [
+    "*.css",
+    "dist/styles/*.css"
+  ],
   "exports": {
     ".": {
       "import": "./dist/index.esm.js",
@@ -16,19 +20,18 @@
       "types": "./dist/index.d.ts"
     },
     "./styles": {
-      "import": "./src/styles/calculator.css",
-      "require": "./src/styles/calculator.css"
+      "default": "./dist/styles/calculator.css"
     }
   },
   "scripts": {
-    "build": "rollup -c",
+    "build": "npm run clean && rollup -c",
     "dev": "rollup -c -w",
-    "test": "jest --runInBand",
-    "test:watch": "jest --watch --runInBand",
-    "test:coverage": "jest --coverage --runInBand",
+    "test": "jest --runInBand",
+    "test:watch": "jest --watch --runInBand",
+    "test:coverage": "jest --coverage --runInBand",
     "lint": "eslint src --ext .ts,.tsx",
     "typecheck": "tsc -p tsconfig.json --noEmit",
-    "clean": "rm -rf dist",
+    "clean": "node -e \"require('fs').rmSync('dist', { recursive: true, force: true })\"",
     "docs:dev": "cd docs && npm run dev",
     "docs:build": "cd docs && npm run build",
     "docs:preview": "cd docs && npm run preview",
@@ -64,12 +67,8 @@
   },
   "peerDependencies": {
     "react": ">=16.8.0",
-    "react-dom": ">=16.8.0"
-  },
-  "dependencies": {
-    "@types/styled-components": "^5.1.34",
-    "react-number-format": "^5.4.4",
-    "styled-components": "^6.1.19"
+    "react-dom": ">=16.8.0",
+    "react-number-format": "^5.4.4"
   },
   "devDependencies": {
     "@eslint/js": "^9.34.0",

package/dist/components/atoms/__tests__/Button.test.d.ts

@@ -1 +0,0 @@
-export {};

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

@@ -1 +0,0 @@
-export {};

package/dist/setupTests.d.ts

@@ -1 +0,0 @@
-import '@testing-library/jest-dom';

package/dist/styles/index.ts

@@ -1 +0,0 @@
-