function GoalTracker({ title, currentAmount, targetAmount, currency = "¥" }) { const progress = Math.min(currentAmount / targetAmount * 100, 100); return /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-sm p-4 bg-white rounded-lg shadow-md", __source: { fileName: "", lineNumber: 5, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center mb-2", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg font-semibold", __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, title), /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 8, columnNumber: 9 }, __self: this }, currency, currentAmount.toLocaleString(), " / ", currency, targetAmount.toLocaleString())), /*#__PURE__*/ React.createElement("div", { className: "w-full h-4 bg-gray-200 rounded-full", __source: { fileName: "", lineNumber: 15, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "h-full bg-blue-500 rounded-full transition-all duration-300 ease-in-out", style: { width: `${progress}%` }, __source: { fileName: "", lineNumber: 16, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "mt-2 text-right", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "font-roboto text-sm text-gray-600", __source: { fileName: "", lineNumber: 23, columnNumber: 9 }, __self: this }, progress.toFixed(1), "%"))); } function GoalTrackerStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4 space-y-4", __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(GoalTracker, { title: "新車購入", currentAmount: 1500000, targetAmount: 3000000, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(GoalTracker, { title: "海外旅行", currentAmount: 200000, targetAmount: 500000, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(GoalTracker, { title: "結婚資金", currentAmount: 2000000, targetAmount: 5000000, __source: { fileName: "", lineNumber: 46, columnNumber: 7 }, __self: this })); } function BudgetCategory({ title, amount, icon, color }) { return /*#__PURE__*/ React.createElement("div", { className: `rounded-lg p-4 ${color} shadow-md w-[200px] transition-transform hover:scale-105`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 6, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 7, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "font-roboto text-lg text-white", __source: { fileName: "", lineNumber: 8, columnNumber: 11 }, __self: this }, title), /*#__PURE__*/ React.createElement("p", { className: "font-roboto text-2xl font-bold text-white", __source: { fileName: "", lineNumber: 9, columnNumber: 11 }, __self: this }, "¥", amount.toLocaleString())), /*#__PURE__*/ React.createElement("i", { className: `${icon} text-2xl text-white`, __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }))); } function BudgetCategoryStory() { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-wrap gap-4 p-4", __source: { fileName: "", lineNumber: 21, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(BudgetCategory, { title: "食費", amount: 25000, icon: "fas fa-utensils", color: "bg-[#FF6B6B]", __source: { fileName: "", lineNumber: 22, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BudgetCategory, { title: "交通費", amount: 12000, icon: "fas fa-train", color: "bg-[#4ECDC4]", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(BudgetCategory, { title: "娯楽", amount: 30000, icon: "fas fa-gamepad", color: "bg-[#45B7D1]", __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); } function ChatInterface({ messages = [], onSendMessage = ()=>{} }) { const [inputValue, setInputValue] = useState(""); const handleSubmit = (e)=>{ e.preventDefault(); if (inputValue.trim()) { onSendMessage(inputValue); setInputValue(""); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col h-[600px] w-full bg-white rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 13, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex-1 overflow-y-auto p-4 space-y-4", __source: { fileName: "", lineNumber: 14, columnNumber: 7 }, __self: this }, messages.map((message, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${message.isUser ? "justify-end" : "justify-start"}`, __source: { fileName: "", lineNumber: 16, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[70%] p-3 rounded-lg ${message.isUser ? "bg-blue-500 text-white" : "bg-gray-100"}`, __source: { fileName: "", lineNumber: 20, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, message.text))))), /*#__PURE__*/ React.createElement("form", { onSubmit: handleSubmit, className: "border-t p-4", __source: { fileName: "", lineNumber: 28, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex gap-2", __source: { fileName: "", lineNumber: 29, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "text", name: "message", value: inputValue, onChange: (e)=>setInputValue(e.target.value), className: "flex-1 p-2 border rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500", placeholder: "メッセージを入力...", __source: { fileName: "", lineNumber: 30, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "px-4 py-2 bg-blue-500 text-white rounded-lg hover:bg-blue-600 transition-colors", __source: { fileName: "", lineNumber: 38, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 42, columnNumber: 13 }, __self: this }))))); } function ChatInterfaceStory() { const [messages, setMessages] = useState([ { text: "こんにちは！", isUser: false }, { text: "お元気ですか？", isUser: true }, { text: "はい、元気です！", isUser: false } ]); const handleSendMessage = (text)=>{ setMessages([ ...messages, { text, isUser: true } ]); }; return /*#__PURE__*/ React.createElement("div", { className: "p-4 bg-gray-100 min-h-screen", __source: { fileName: "", lineNumber: 62, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ChatInterface, { messages: messages, onSendMessage: handleSendMessage, __source: { fileName: "", lineNumber: 63, columnNumber: 7 }, __self: this })); } function AssetOverview({ savings = 0, expenses = 0, currency = "¥" }) { return /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-lg p-6 w-[320px]", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col gap-4", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 5, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-lg font-roboto text-gray-800", __source: { fileName: "", lineNumber: 6, columnNumber: 11 }, __self: this }, "財務概要"), /*#__PURE__*/ React.createElement("i", { className: "fas fa-wallet text-blue-500", __source: { fileName: "", lineNumber: 7, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "space-y-4", __source: { fileName: "", lineNumber: 10, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-blue-50 p-4 rounded-md", __source: { fileName: "", lineNumber: 11, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 12, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 13, columnNumber: 15 }, __self: this }, "貯金"), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold text-blue-600 font-roboto", __source: { fileName: "", lineNumber: 14, columnNumber: 15 }, __self: this }, currency, savings.toLocaleString()))), /*#__PURE__*/ React.createElement("div", { className: "bg-red-50 p-4 rounded-md", __source: { fileName: "", lineNumber: 21, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex justify-between items-center", __source: { fileName: "", lineNumber: 22, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-gray-600 font-roboto", __source: { fileName: "", lineNumber: 23, columnNumber: 15 }, __self: this }, "支出"), /*#__PURE__*/ React.createElement("span", { className: "text-xl font-bold text-red-600 font-roboto", __source: { fileName: "", lineNumber: 24, columnNumber: 15 }, __self: this }, currency, expenses.toLocaleString())))))); } function AssetOverviewStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-8 bg-gray-100 flex flex-wrap gap-4", __source: { fileName: "", lineNumber: 38, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AssetOverview, { savings: 1250000, expenses: 458000, __source: { fileName: "", lineNumber: 39, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(AssetOverview, { savings: 890000, expenses: 125000, __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement(AssetOverview, { savings: 2500000, expenses: 780000, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this })); } function MainComponent() { const [email, setEmail] = useState(""); const [password, setPassword] = useState(""); const [useBiometric, setUseBiometric] = useState(false); const [error, setError] = useState(""); const handleLogin = async (e)=>{ e.preventDefault(); setError(""); if (!email || !password) { setError("メールアドレスとパスワードを入力してください"); return; } }; const handleBiometric = async ()=>{ if (!window.PublicKeyCredential) { setError("お使いのブラウザは生体認証に対応していません"); return; } setUseBiometric(true); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex items-center justify-center bg-gray-50 py-12 px-4 sm:px-6 lg:px-8", __source: { fileName: "", lineNumber: 26, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-md w-full space-y-8", __source: { fileName: "", lineNumber: 27, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "mt-6 text-center text-3xl font-bold text-gray-900 font-roboto", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "ログイン")), /*#__PURE__*/ React.createElement("form", { className: "mt-8 space-y-6", onSubmit: handleLogin, __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "rounded-md shadow-sm -space-y-px", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 35, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "email", name: "email", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-t-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm", placeholder: "メールアドレス", value: email, onChange: (e)=>setEmail(e.target.value), __source: { fileName: "", lineNumber: 36, columnNumber: 15 }, __self: this })), /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 46, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "password", name: "password", required: true, className: "appearance-none rounded-none relative block w-full px-3 py-2 border border-gray-300 placeholder-gray-500 text-gray-900 rounded-b-md focus:outline-none focus:ring-blue-500 focus:border-blue-500 focus:z-10 sm:text-sm", placeholder: "パスワード", value: password, onChange: (e)=>setPassword(e.target.value), __source: { fileName: "", lineNumber: 47, columnNumber: 15 }, __self: this }))), error && /*#__PURE__*/ React.createElement("div", { className: "text-red-500 text-sm text-center", __source: { fileName: "", lineNumber: 60, columnNumber: 13 }, __self: this }, error), /*#__PURE__*/ React.createElement("div", { className: "flex items-center justify-between", __source: { fileName: "", lineNumber: 63, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { type: "button", onClick: handleBiometric, className: "group relative w-1/2 flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 64, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-fingerprint mr-2", __source: { fileName: "", lineNumber: 69, columnNumber: 15 }, __self: this }), "生体認証"), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "group relative w-1/2 ml-3 flex justify-center py-2 px-4 border border-transparent text-sm font-medium rounded-md text-white bg-blue-600 hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-500", __source: { fileName: "", lineNumber: 73, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-sign-in-alt mr-2", __source: { fileName: "", lineNumber: 77, columnNumber: 15 }, __self: this }), "ログイン"))))); }