@samsheena/payment-ui 1.0.0

package/README.md

@@ -0,0 +1,17 @@
+# glh-payment-ui
+
+Frontend-only Payment Account + Subscription UI.
+
+- ₹5/month fixed
+- Plans exist but only 6-month plan enabled & default
+- Always shows 100% discount and Net Payable ₹0
+- No backend
+
+## Install
+npm i glh-payment-ui
+
+## Usage
+import { AccountButton } from "glh-payment-ui";
+import "glh-payment-ui/dist/styles.css";
+
+Place <AccountButton /> in the center area of your navbar.

package/dist/index.cjs.js

@@ -0,0 +1,286 @@
+'use strict';
+
+var React = require('react');
+
+const PRICE_PER_MONTH = 5;
+const PLAN_LIST = [{
+  key: "monthly",
+  label: "Monthly",
+  months: 1,
+  enabled: false
+}, {
+  key: "3m",
+  label: "3 Months",
+  months: 3,
+  enabled: false
+}, {
+  key: "6m",
+  label: "6 Months",
+  months: 6,
+  enabled: true
+},
+// ONLY enabled + default
+{
+  key: "1y",
+  label: "Yearly",
+  months: 12,
+  enabled: false
+}, {
+  key: "3y",
+  label: "3 Years",
+  months: 36,
+  enabled: false
+}];
+function PaymentModal({
+  open,
+  onClose
+}) {
+  const defaultPlanKey = "6m";
+  const [fullName, setFullName] = React.useState("");
+  const [email, setEmail] = React.useState("");
+  const [planKey, setPlanKey] = React.useState(defaultPlanKey);
+  const [accountCreated, setAccountCreated] = React.useState(false);
+  const selectedPlan = React.useMemo(() => {
+    return PLAN_LIST.find(p => p.key === planKey) || PLAN_LIST[2];
+  }, [planKey]);
+  const total = React.useMemo(() => selectedPlan.months * PRICE_PER_MONTH, [selectedPlan]);
+  const discountPercent = 100;
+  const discountAmount = total; // 100% discount
+  const netPayable = 0; // always zero
+
+  function handleBackdropClick(e) {
+    if (e.target?.classList?.contains("glh-pay-backdrop")) onClose?.();
+  }
+  function createAccountAndSubscribe() {
+    // Frontend-only: store in localStorage so app can show "created" state later
+    const payload = {
+      createdAt: new Date().toISOString(),
+      fullName,
+      email,
+      plan: selectedPlan,
+      pricePerMonth: PRICE_PER_MONTH,
+      total,
+      discountPercent,
+      discountAmount,
+      netPayable
+    };
+    try {
+      localStorage.setItem("glh_payment_account", JSON.stringify(payload));
+      setAccountCreated(true);
+    } catch (err) {
+      // ignore; still show UI success
+      setAccountCreated(true);
+    }
+  }
+  if (!open) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-backdrop",
+    onMouseDown: handleBackdropClick,
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-modal",
+    onMouseDown: e => e.stopPropagation()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-header"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "glh-pay-title"
+  }, "Create Payment Account"), /*#__PURE__*/React.createElement("button", {
+    className: "glh-pay-close",
+    onClick: onClose,
+    "aria-label": "Close"
+  }, "\u2715")), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-body"
+  }, !accountCreated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-row"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-label"
+  }, "Full Name"), /*#__PURE__*/React.createElement("input", {
+    className: "glh-pay-input",
+    value: fullName,
+    onChange: e => setFullName(e.target.value),
+    placeholder: "Enter your name"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-label"
+  }, "Email"), /*#__PURE__*/React.createElement("input", {
+    className: "glh-pay-input",
+    value: email,
+    onChange: e => setEmail(e.target.value),
+    placeholder: "Enter your email"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-label",
+    style: {
+      marginBottom: 8
+    }
+  }, "Subscription Plans (\u20B9", PRICE_PER_MONTH, " / month)"), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-plans"
+  }, PLAN_LIST.map(p => {
+    const disabled = !p.enabled;
+    const selected = p.key === planKey;
+    function pickPlan() {
+      if (disabled) return;
+      setPlanKey(p.key);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: p.key,
+      className: ["glh-pay-plan", disabled ? "glh-pay-planDisabled" : "", selected ? "glh-pay-selected" : ""].join(" "),
+      onClick: pickPlan,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: e => {
+        if ((e.key === "Enter" || e.key === " ") && !disabled) pickPlan();
+      },
+      "aria-disabled": disabled,
+      "aria-pressed": selected
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "grid",
+        gap: 4
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontWeight: 900
+      }
+    }, p.label), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 12,
+        color: "rgba(0,0,0,0.65)"
+      }
+    }, "Duration: ", p.months, " month(s)")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        gap: 8,
+        alignItems: "center"
+      }
+    }, p.enabled ? /*#__PURE__*/React.createElement("span", {
+      className: "glh-pay-pill"
+    }, "ENABLED") : /*#__PURE__*/React.createElement("span", {
+      className: "glh-pay-pill"
+    }, "DISABLED"), selected ? /*#__PURE__*/React.createElement("span", {
+      className: "glh-pay-pill"
+    }, "SELECTED") : null));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-summary"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Total (", selectedPlan.months, " \xD7 \u20B9", PRICE_PER_MONTH, ")"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "\u20B9", total)), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Discount"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, discountPercent, "% (-\u20B9", discountAmount, ")")), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "Net Payable"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "\u20B9", netPayable))), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-note"
+  }, "Note: This package is frontend-only. Payment is always \u20B90 because 100% discount is applied.")) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 6
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 900,
+      fontSize: 16,
+      marginBottom: 8
+    }
+  }, "\u2705 Account Created"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13,
+      color: "rgba(0,0,0,0.7)"
+    }
+  }, "Your subscription is ready with ", /*#__PURE__*/React.createElement("b", null, "100% discount"), ". Net payable is ", /*#__PURE__*/React.createElement("b", null, "\u20B90"), "."), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-summary",
+    style: {
+      marginTop: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Selected Plan"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, selectedPlan.label)), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Total"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "\u20B9", total)), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Discount"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "100% (-\u20B9", total, ")")), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "Net Payable"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "\u20B90"))))), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-footer"
+  }, !accountCreated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: "glh-pay-secondary",
+    onClick: onClose
+  }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+    className: "glh-pay-primary",
+    onClick: createAccountAndSubscribe,
+    disabled: !fullName || !email,
+    title: !fullName || !email ? "Enter name & email" : "Create account",
+    style: !fullName || !email ? {
+      opacity: 0.6,
+      cursor: "not-allowed"
+    } : null
+  }, "Create Account")) : /*#__PURE__*/React.createElement("button", {
+    className: "glh-pay-primary",
+    onClick: onClose
+  }, "Done"))));
+}
+
+/**
+ * AccountButton
+ * - Place this component in the CENTER area of your navbar.
+ * - It renders a button and a modal for account creation + subscription summary.
+ */
+function AccountButton({
+  buttonText = "Account",
+  wrapperClassName = "",
+  buttonClassName = "",
+  onAccountCreated
+}) {
+  const [open, setOpen] = React.useState(false);
+  const [hasAccount, setHasAccount] = React.useState(false);
+  React.useEffect(() => {
+    try {
+      const saved = localStorage.getItem("glh_payment_account");
+      setHasAccount(!!saved);
+    } catch (e) {
+      setHasAccount(false);
+    }
+  }, [open]);
+  function handleClose() {
+    setOpen(false);
+    // refresh state after close
+    try {
+      const saved = localStorage.getItem("glh_payment_account");
+      const ok = !!saved;
+      setHasAccount(ok);
+      if (ok && typeof onAccountCreated === "function") {
+        onAccountCreated(JSON.parse(saved));
+      }
+    } catch (e) {
+      // ignore
+    }
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `glh-pay-centerWrap ${wrapperClassName}`
+  }, /*#__PURE__*/React.createElement("button", {
+    className: `glh-pay-btn ${buttonClassName}`,
+    onClick: () => setOpen(true),
+    type: "button"
+  }, hasAccount ? `${buttonText} ✓` : buttonText)), /*#__PURE__*/React.createElement(PaymentModal, {
+    open: open,
+    onClose: handleClose
+  }));
+}
+
+exports.AccountButton = AccountButton;
+//# sourceMappingURL=index.cjs.js.map

package/dist/index.cjs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs.js","sources":["../src/components/PaymentModal.jsx","../src/components/AccountButton.jsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\r\nimport \"./styles.css\";\r\n\r\nconst PRICE_PER_MONTH = 5;\r\n\r\nconst PLAN_LIST = [\r\n  { key: \"monthly\", label: \"Monthly\", months: 1, enabled: false },\r\n  { key: \"3m\", label: \"3 Months\", months: 3, enabled: false },\r\n  { key: \"6m\", label: \"6 Months\", months: 6, enabled: true },     // ONLY enabled + default\r\n  { key: \"1y\", label: \"Yearly\", months: 12, enabled: false },\r\n  { key: \"3y\", label: \"3 Years\", months: 36, enabled: false }\r\n];\r\n\r\nexport function PaymentModal({ open, onClose }) {\r\n  const defaultPlanKey = \"6m\";\r\n\r\n  const [fullName, setFullName] = useState(\"\");\r\n  const [email, setEmail] = useState(\"\");\r\n  const [planKey, setPlanKey] = useState(defaultPlanKey);\r\n  const [accountCreated, setAccountCreated] = useState(false);\r\n\r\n  const selectedPlan = useMemo(() => {\r\n    return PLAN_LIST.find((p) => p.key === planKey) || PLAN_LIST[2];\r\n  }, [planKey]);\r\n\r\n  const total = useMemo(() => selectedPlan.months * PRICE_PER_MONTH, [selectedPlan]);\r\n  const discountPercent = 100;\r\n  const discountAmount = total;        // 100% discount\r\n  const netPayable = 0;                // always zero\r\n\r\n  function handleBackdropClick(e) {\r\n    if (e.target?.classList?.contains(\"glh-pay-backdrop\")) onClose?.();\r\n  }\r\n\r\n  function createAccountAndSubscribe() {\r\n    // Frontend-only: store in localStorage so app can show \"created\" state later\r\n    const payload = {\r\n      createdAt: new Date().toISOString(),\r\n      fullName,\r\n      email,\r\n      plan: selectedPlan,\r\n      pricePerMonth: PRICE_PER_MONTH,\r\n      total,\r\n      discountPercent,\r\n      discountAmount,\r\n      netPayable\r\n    };\r\n    try {\r\n      localStorage.setItem(\"glh_payment_account\", JSON.stringify(payload));\r\n      setAccountCreated(true);\r\n    } catch (err) {\r\n      // ignore; still show UI success\r\n      setAccountCreated(true);\r\n    }\r\n  }\r\n\r\n  if (!open) return null;\r\n\r\n  return (\r\n    <div className=\"glh-pay-backdrop\" onMouseDown={handleBackdropClick} role=\"dialog\" aria-modal=\"true\">\r\n      <div className=\"glh-pay-modal\" onMouseDown={(e) => e.stopPropagation()}>\r\n        <div className=\"glh-pay-header\">\r\n          <h3 className=\"glh-pay-title\">Create Payment Account</h3>\r\n          <button className=\"glh-pay-close\" onClick={onClose} aria-label=\"Close\">✕</button>\r\n        </div>\r\n\r\n        <div className=\"glh-pay-body\">\r\n          {!accountCreated ? (\r\n            <>\r\n              <div className=\"glh-pay-row\">\r\n                <div>\r\n                  <div className=\"glh-pay-label\">Full Name</div>\r\n                  <input\r\n                    className=\"glh-pay-input\"\r\n                    value={fullName}\r\n                    onChange={(e) => setFullName(e.target.value)}\r\n                    placeholder=\"Enter your name\"\r\n                  />\r\n                </div>\r\n\r\n                <div>\r\n                  <div className=\"glh-pay-label\">Email</div>\r\n                  <input\r\n                    className=\"glh-pay-input\"\r\n                    value={email}\r\n                    onChange={(e) => setEmail(e.target.value)}\r\n                    placeholder=\"Enter your email\"\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"glh-pay-label\" style={{ marginBottom: 8 }}>\r\n                Subscription Plans (₹{PRICE_PER_MONTH} / month)\r\n              </div>\r\n\r\n              <div className=\"glh-pay-plans\">\r\n                {PLAN_LIST.map((p) => {\r\n                  const disabled = !p.enabled;\r\n                  const selected = p.key === planKey;\r\n\r\n                  function pickPlan() {\r\n                    if (disabled) return;\r\n                    setPlanKey(p.key);\r\n                  }\r\n\r\n                  return (\r\n                    <div\r\n                      key={p.key}\r\n                      className={[\r\n                        \"glh-pay-plan\",\r\n                        disabled ? \"glh-pay-planDisabled\" : \"\",\r\n                        selected ? \"glh-pay-selected\" : \"\"\r\n                      ].join(\" \")}\r\n                      onClick={pickPlan}\r\n                      role=\"button\"\r\n                      tabIndex={disabled ? -1 : 0}\r\n                      onKeyDown={(e) => {\r\n                        if ((e.key === \"Enter\" || e.key === \" \") && !disabled) pickPlan();\r\n                      }}\r\n                      aria-disabled={disabled}\r\n                      aria-pressed={selected}\r\n                    >\r\n                      <div style={{ display: \"grid\", gap: 4 }}>\r\n                        <div style={{ fontWeight: 900 }}>{p.label}</div>\r\n                        <div style={{ fontSize: 12, color: \"rgba(0,0,0,0.65)\" }}>\r\n                          Duration: {p.months} month(s)\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\r\n                        {p.enabled ? <span className=\"glh-pay-pill\">ENABLED</span> : <span className=\"glh-pay-pill\">DISABLED</span>}\r\n                        {selected ? <span className=\"glh-pay-pill\">SELECTED</span> : null}\r\n                      </div>\r\n                    </div>\r\n                  );\r\n                })}\r\n              </div>\r\n\r\n              <div className=\"glh-pay-summary\">\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Total ({selectedPlan.months} × ₹{PRICE_PER_MONTH})</span>\r\n                  <span className=\"glh-pay-strong\">₹{total}</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Discount</span>\r\n                  <span className=\"glh-pay-strong\">{discountPercent}% (-₹{discountAmount})</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span className=\"glh-pay-strong\">Net Payable</span>\r\n                  <span className=\"glh-pay-strong\">₹{netPayable}</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"glh-pay-note\">\r\n                Note: This package is frontend-only. Payment is always ₹0 because 100% discount is applied.\r\n              </div>\r\n            </>\r\n          ) : (\r\n            <div style={{ padding: 6 }}>\r\n              <div style={{ fontWeight: 900, fontSize: 16, marginBottom: 8 }}>✅ Account Created</div>\r\n              <div style={{ fontSize: 13, color: \"rgba(0,0,0,0.7)\" }}>\r\n                Your subscription is ready with <b>100% discount</b>. Net payable is <b>₹0</b>.\r\n              </div>\r\n\r\n              <div className=\"glh-pay-summary\" style={{ marginTop: 14 }}>\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Selected Plan</span>\r\n                  <span className=\"glh-pay-strong\">{selectedPlan.label}</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Total</span>\r\n                  <span className=\"glh-pay-strong\">₹{total}</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Discount</span>\r\n                  <span className=\"glh-pay-strong\">100% (-₹{total})</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span className=\"glh-pay-strong\">Net Payable</span>\r\n                  <span className=\"glh-pay-strong\">₹0</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        <div className=\"glh-pay-footer\">\r\n          {!accountCreated ? (\r\n            <>\r\n              <button className=\"glh-pay-secondary\" onClick={onClose}>Cancel</button>\r\n              <button\r\n                className=\"glh-pay-primary\"\r\n                onClick={createAccountAndSubscribe}\r\n                disabled={!fullName || !email}\r\n                title={!fullName || !email ? \"Enter name & email\" : \"Create account\"}\r\n                style={!fullName || !email ? { opacity: 0.6, cursor: \"not-allowed\" } : null}\r\n              >\r\n                Create Account\r\n              </button>\r\n            </>\r\n          ) : (\r\n            <button className=\"glh-pay-primary\" onClick={onClose}>Done</button>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { PaymentModal } from \"./PaymentModal.jsx\";\r\nimport \"./styles.css\";\r\n\r\n/**\r\n * AccountButton\r\n * - Place this component in the CENTER area of your navbar.\r\n * - It renders a button and a modal for account creation + subscription summary.\r\n */\r\nexport function AccountButton({\r\n  buttonText = \"Account\",\r\n  wrapperClassName = \"\",\r\n  buttonClassName = \"\",\r\n  onAccountCreated\r\n}) {\r\n  const [open, setOpen] = useState(false);\r\n  const [hasAccount, setHasAccount] = useState(false);\r\n\r\n  useEffect(() => {\r\n    try {\r\n      const saved = localStorage.getItem(\"glh_payment_account\");\r\n      setHasAccount(!!saved);\r\n    } catch (e) {\r\n      setHasAccount(false);\r\n    }\r\n  }, [open]);\r\n\r\n  function handleClose() {\r\n    setOpen(false);\r\n    // refresh state after close\r\n    try {\r\n      const saved = localStorage.getItem(\"glh_payment_account\");\r\n      const ok = !!saved;\r\n      setHasAccount(ok);\r\n      if (ok && typeof onAccountCreated === \"function\") {\r\n        onAccountCreated(JSON.parse(saved));\r\n      }\r\n    } catch (e) {\r\n      // ignore\r\n    }\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <div className={`glh-pay-centerWrap ${wrapperClassName}`}>\r\n        <button\r\n          className={`glh-pay-btn ${buttonClassName}`}\r\n          onClick={() => setOpen(true)}\r\n          type=\"button\"\r\n        >\r\n          {hasAccount ? `${buttonText} ✓` : buttonText}\r\n        </button>\r\n      </div>\r\n\r\n      <PaymentModal open={open} onClose={handleClose} />\r\n    </>\r\n  );\r\n}\r\n"],"names":["PRICE_PER_MONTH","PLAN_LIST","key","label","months","enabled","PaymentModal","open","onClose","defaultPlanKey","fullName","setFullName","useState","email","setEmail","planKey","setPlanKey","accountCreated","setAccountCreated","selectedPlan","useMemo","find","p","total","discountPercent","discountAmount","netPayable","handleBackdropClick","e","target","classList","contains","createAccountAndSubscribe","payload","createdAt","Date","toISOString","plan","pricePerMonth","localStorage","setItem","JSON","stringify","err","React","createElement","className","onMouseDown","role","stopPropagation","onClick","Fragment","value","onChange","placeholder","style","marginBottom","map","disabled","selected","pickPlan","join","tabIndex","onKeyDown","display","gap","fontWeight","fontSize","color","alignItems","padding","marginTop","title","opacity","cursor","AccountButton","buttonText","wrapperClassName","buttonClassName","onAccountCreated","setOpen","hasAccount","setHasAccount","useEffect","saved","getItem","handleClose","ok","parse","type"],"mappings":"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"}

package/dist/index.esm.js

@@ -0,0 +1,284 @@
+import React, { useState, useMemo, useEffect } from 'react';
+
+const PRICE_PER_MONTH = 5;
+const PLAN_LIST = [{
+  key: "monthly",
+  label: "Monthly",
+  months: 1,
+  enabled: false
+}, {
+  key: "3m",
+  label: "3 Months",
+  months: 3,
+  enabled: false
+}, {
+  key: "6m",
+  label: "6 Months",
+  months: 6,
+  enabled: true
+},
+// ONLY enabled + default
+{
+  key: "1y",
+  label: "Yearly",
+  months: 12,
+  enabled: false
+}, {
+  key: "3y",
+  label: "3 Years",
+  months: 36,
+  enabled: false
+}];
+function PaymentModal({
+  open,
+  onClose
+}) {
+  const defaultPlanKey = "6m";
+  const [fullName, setFullName] = useState("");
+  const [email, setEmail] = useState("");
+  const [planKey, setPlanKey] = useState(defaultPlanKey);
+  const [accountCreated, setAccountCreated] = useState(false);
+  const selectedPlan = useMemo(() => {
+    return PLAN_LIST.find(p => p.key === planKey) || PLAN_LIST[2];
+  }, [planKey]);
+  const total = useMemo(() => selectedPlan.months * PRICE_PER_MONTH, [selectedPlan]);
+  const discountPercent = 100;
+  const discountAmount = total; // 100% discount
+  const netPayable = 0; // always zero
+
+  function handleBackdropClick(e) {
+    if (e.target?.classList?.contains("glh-pay-backdrop")) onClose?.();
+  }
+  function createAccountAndSubscribe() {
+    // Frontend-only: store in localStorage so app can show "created" state later
+    const payload = {
+      createdAt: new Date().toISOString(),
+      fullName,
+      email,
+      plan: selectedPlan,
+      pricePerMonth: PRICE_PER_MONTH,
+      total,
+      discountPercent,
+      discountAmount,
+      netPayable
+    };
+    try {
+      localStorage.setItem("glh_payment_account", JSON.stringify(payload));
+      setAccountCreated(true);
+    } catch (err) {
+      // ignore; still show UI success
+      setAccountCreated(true);
+    }
+  }
+  if (!open) return null;
+  return /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-backdrop",
+    onMouseDown: handleBackdropClick,
+    role: "dialog",
+    "aria-modal": "true"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-modal",
+    onMouseDown: e => e.stopPropagation()
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-header"
+  }, /*#__PURE__*/React.createElement("h3", {
+    className: "glh-pay-title"
+  }, "Create Payment Account"), /*#__PURE__*/React.createElement("button", {
+    className: "glh-pay-close",
+    onClick: onClose,
+    "aria-label": "Close"
+  }, "\u2715")), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-body"
+  }, !accountCreated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-row"
+  }, /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-label"
+  }, "Full Name"), /*#__PURE__*/React.createElement("input", {
+    className: "glh-pay-input",
+    value: fullName,
+    onChange: e => setFullName(e.target.value),
+    placeholder: "Enter your name"
+  })), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-label"
+  }, "Email"), /*#__PURE__*/React.createElement("input", {
+    className: "glh-pay-input",
+    value: email,
+    onChange: e => setEmail(e.target.value),
+    placeholder: "Enter your email"
+  }))), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-label",
+    style: {
+      marginBottom: 8
+    }
+  }, "Subscription Plans (\u20B9", PRICE_PER_MONTH, " / month)"), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-plans"
+  }, PLAN_LIST.map(p => {
+    const disabled = !p.enabled;
+    const selected = p.key === planKey;
+    function pickPlan() {
+      if (disabled) return;
+      setPlanKey(p.key);
+    }
+    return /*#__PURE__*/React.createElement("div", {
+      key: p.key,
+      className: ["glh-pay-plan", disabled ? "glh-pay-planDisabled" : "", selected ? "glh-pay-selected" : ""].join(" "),
+      onClick: pickPlan,
+      role: "button",
+      tabIndex: disabled ? -1 : 0,
+      onKeyDown: e => {
+        if ((e.key === "Enter" || e.key === " ") && !disabled) pickPlan();
+      },
+      "aria-disabled": disabled,
+      "aria-pressed": selected
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "grid",
+        gap: 4
+      }
+    }, /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontWeight: 900
+      }
+    }, p.label), /*#__PURE__*/React.createElement("div", {
+      style: {
+        fontSize: 12,
+        color: "rgba(0,0,0,0.65)"
+      }
+    }, "Duration: ", p.months, " month(s)")), /*#__PURE__*/React.createElement("div", {
+      style: {
+        display: "flex",
+        gap: 8,
+        alignItems: "center"
+      }
+    }, p.enabled ? /*#__PURE__*/React.createElement("span", {
+      className: "glh-pay-pill"
+    }, "ENABLED") : /*#__PURE__*/React.createElement("span", {
+      className: "glh-pay-pill"
+    }, "DISABLED"), selected ? /*#__PURE__*/React.createElement("span", {
+      className: "glh-pay-pill"
+    }, "SELECTED") : null));
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-summary"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Total (", selectedPlan.months, " \xD7 \u20B9", PRICE_PER_MONTH, ")"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "\u20B9", total)), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Discount"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, discountPercent, "% (-\u20B9", discountAmount, ")")), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "Net Payable"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "\u20B9", netPayable))), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-note"
+  }, "Note: This package is frontend-only. Payment is always \u20B90 because 100% discount is applied.")) : /*#__PURE__*/React.createElement("div", {
+    style: {
+      padding: 6
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontWeight: 900,
+      fontSize: 16,
+      marginBottom: 8
+    }
+  }, "\u2705 Account Created"), /*#__PURE__*/React.createElement("div", {
+    style: {
+      fontSize: 13,
+      color: "rgba(0,0,0,0.7)"
+    }
+  }, "Your subscription is ready with ", /*#__PURE__*/React.createElement("b", null, "100% discount"), ". Net payable is ", /*#__PURE__*/React.createElement("b", null, "\u20B90"), "."), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-summary",
+    style: {
+      marginTop: 14
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Selected Plan"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, selectedPlan.label)), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Total"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "\u20B9", total)), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", null, "Discount"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "100% (-\u20B9", total, ")")), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-line"
+  }, /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "Net Payable"), /*#__PURE__*/React.createElement("span", {
+    className: "glh-pay-strong"
+  }, "\u20B90"))))), /*#__PURE__*/React.createElement("div", {
+    className: "glh-pay-footer"
+  }, !accountCreated ? /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    className: "glh-pay-secondary",
+    onClick: onClose
+  }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+    className: "glh-pay-primary",
+    onClick: createAccountAndSubscribe,
+    disabled: !fullName || !email,
+    title: !fullName || !email ? "Enter name & email" : "Create account",
+    style: !fullName || !email ? {
+      opacity: 0.6,
+      cursor: "not-allowed"
+    } : null
+  }, "Create Account")) : /*#__PURE__*/React.createElement("button", {
+    className: "glh-pay-primary",
+    onClick: onClose
+  }, "Done"))));
+}
+
+/**
+ * AccountButton
+ * - Place this component in the CENTER area of your navbar.
+ * - It renders a button and a modal for account creation + subscription summary.
+ */
+function AccountButton({
+  buttonText = "Account",
+  wrapperClassName = "",
+  buttonClassName = "",
+  onAccountCreated
+}) {
+  const [open, setOpen] = useState(false);
+  const [hasAccount, setHasAccount] = useState(false);
+  useEffect(() => {
+    try {
+      const saved = localStorage.getItem("glh_payment_account");
+      setHasAccount(!!saved);
+    } catch (e) {
+      setHasAccount(false);
+    }
+  }, [open]);
+  function handleClose() {
+    setOpen(false);
+    // refresh state after close
+    try {
+      const saved = localStorage.getItem("glh_payment_account");
+      const ok = !!saved;
+      setHasAccount(ok);
+      if (ok && typeof onAccountCreated === "function") {
+        onAccountCreated(JSON.parse(saved));
+      }
+    } catch (e) {
+      // ignore
+    }
+  }
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: `glh-pay-centerWrap ${wrapperClassName}`
+  }, /*#__PURE__*/React.createElement("button", {
+    className: `glh-pay-btn ${buttonClassName}`,
+    onClick: () => setOpen(true),
+    type: "button"
+  }, hasAccount ? `${buttonText} ✓` : buttonText)), /*#__PURE__*/React.createElement(PaymentModal, {
+    open: open,
+    onClose: handleClose
+  }));
+}
+
+export { AccountButton };
+//# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.esm.js","sources":["../src/components/PaymentModal.jsx","../src/components/AccountButton.jsx"],"sourcesContent":["import React, { useMemo, useState } from \"react\";\r\nimport \"./styles.css\";\r\n\r\nconst PRICE_PER_MONTH = 5;\r\n\r\nconst PLAN_LIST = [\r\n  { key: \"monthly\", label: \"Monthly\", months: 1, enabled: false },\r\n  { key: \"3m\", label: \"3 Months\", months: 3, enabled: false },\r\n  { key: \"6m\", label: \"6 Months\", months: 6, enabled: true },     // ONLY enabled + default\r\n  { key: \"1y\", label: \"Yearly\", months: 12, enabled: false },\r\n  { key: \"3y\", label: \"3 Years\", months: 36, enabled: false }\r\n];\r\n\r\nexport function PaymentModal({ open, onClose }) {\r\n  const defaultPlanKey = \"6m\";\r\n\r\n  const [fullName, setFullName] = useState(\"\");\r\n  const [email, setEmail] = useState(\"\");\r\n  const [planKey, setPlanKey] = useState(defaultPlanKey);\r\n  const [accountCreated, setAccountCreated] = useState(false);\r\n\r\n  const selectedPlan = useMemo(() => {\r\n    return PLAN_LIST.find((p) => p.key === planKey) || PLAN_LIST[2];\r\n  }, [planKey]);\r\n\r\n  const total = useMemo(() => selectedPlan.months * PRICE_PER_MONTH, [selectedPlan]);\r\n  const discountPercent = 100;\r\n  const discountAmount = total;        // 100% discount\r\n  const netPayable = 0;                // always zero\r\n\r\n  function handleBackdropClick(e) {\r\n    if (e.target?.classList?.contains(\"glh-pay-backdrop\")) onClose?.();\r\n  }\r\n\r\n  function createAccountAndSubscribe() {\r\n    // Frontend-only: store in localStorage so app can show \"created\" state later\r\n    const payload = {\r\n      createdAt: new Date().toISOString(),\r\n      fullName,\r\n      email,\r\n      plan: selectedPlan,\r\n      pricePerMonth: PRICE_PER_MONTH,\r\n      total,\r\n      discountPercent,\r\n      discountAmount,\r\n      netPayable\r\n    };\r\n    try {\r\n      localStorage.setItem(\"glh_payment_account\", JSON.stringify(payload));\r\n      setAccountCreated(true);\r\n    } catch (err) {\r\n      // ignore; still show UI success\r\n      setAccountCreated(true);\r\n    }\r\n  }\r\n\r\n  if (!open) return null;\r\n\r\n  return (\r\n    <div className=\"glh-pay-backdrop\" onMouseDown={handleBackdropClick} role=\"dialog\" aria-modal=\"true\">\r\n      <div className=\"glh-pay-modal\" onMouseDown={(e) => e.stopPropagation()}>\r\n        <div className=\"glh-pay-header\">\r\n          <h3 className=\"glh-pay-title\">Create Payment Account</h3>\r\n          <button className=\"glh-pay-close\" onClick={onClose} aria-label=\"Close\">✕</button>\r\n        </div>\r\n\r\n        <div className=\"glh-pay-body\">\r\n          {!accountCreated ? (\r\n            <>\r\n              <div className=\"glh-pay-row\">\r\n                <div>\r\n                  <div className=\"glh-pay-label\">Full Name</div>\r\n                  <input\r\n                    className=\"glh-pay-input\"\r\n                    value={fullName}\r\n                    onChange={(e) => setFullName(e.target.value)}\r\n                    placeholder=\"Enter your name\"\r\n                  />\r\n                </div>\r\n\r\n                <div>\r\n                  <div className=\"glh-pay-label\">Email</div>\r\n                  <input\r\n                    className=\"glh-pay-input\"\r\n                    value={email}\r\n                    onChange={(e) => setEmail(e.target.value)}\r\n                    placeholder=\"Enter your email\"\r\n                  />\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"glh-pay-label\" style={{ marginBottom: 8 }}>\r\n                Subscription Plans (₹{PRICE_PER_MONTH} / month)\r\n              </div>\r\n\r\n              <div className=\"glh-pay-plans\">\r\n                {PLAN_LIST.map((p) => {\r\n                  const disabled = !p.enabled;\r\n                  const selected = p.key === planKey;\r\n\r\n                  function pickPlan() {\r\n                    if (disabled) return;\r\n                    setPlanKey(p.key);\r\n                  }\r\n\r\n                  return (\r\n                    <div\r\n                      key={p.key}\r\n                      className={[\r\n                        \"glh-pay-plan\",\r\n                        disabled ? \"glh-pay-planDisabled\" : \"\",\r\n                        selected ? \"glh-pay-selected\" : \"\"\r\n                      ].join(\" \")}\r\n                      onClick={pickPlan}\r\n                      role=\"button\"\r\n                      tabIndex={disabled ? -1 : 0}\r\n                      onKeyDown={(e) => {\r\n                        if ((e.key === \"Enter\" || e.key === \" \") && !disabled) pickPlan();\r\n                      }}\r\n                      aria-disabled={disabled}\r\n                      aria-pressed={selected}\r\n                    >\r\n                      <div style={{ display: \"grid\", gap: 4 }}>\r\n                        <div style={{ fontWeight: 900 }}>{p.label}</div>\r\n                        <div style={{ fontSize: 12, color: \"rgba(0,0,0,0.65)\" }}>\r\n                          Duration: {p.months} month(s)\r\n                        </div>\r\n                      </div>\r\n\r\n                      <div style={{ display: \"flex\", gap: 8, alignItems: \"center\" }}>\r\n                        {p.enabled ? <span className=\"glh-pay-pill\">ENABLED</span> : <span className=\"glh-pay-pill\">DISABLED</span>}\r\n                        {selected ? <span className=\"glh-pay-pill\">SELECTED</span> : null}\r\n                      </div>\r\n                    </div>\r\n                  );\r\n                })}\r\n              </div>\r\n\r\n              <div className=\"glh-pay-summary\">\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Total ({selectedPlan.months} × ₹{PRICE_PER_MONTH})</span>\r\n                  <span className=\"glh-pay-strong\">₹{total}</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Discount</span>\r\n                  <span className=\"glh-pay-strong\">{discountPercent}% (-₹{discountAmount})</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span className=\"glh-pay-strong\">Net Payable</span>\r\n                  <span className=\"glh-pay-strong\">₹{netPayable}</span>\r\n                </div>\r\n              </div>\r\n\r\n              <div className=\"glh-pay-note\">\r\n                Note: This package is frontend-only. Payment is always ₹0 because 100% discount is applied.\r\n              </div>\r\n            </>\r\n          ) : (\r\n            <div style={{ padding: 6 }}>\r\n              <div style={{ fontWeight: 900, fontSize: 16, marginBottom: 8 }}>✅ Account Created</div>\r\n              <div style={{ fontSize: 13, color: \"rgba(0,0,0,0.7)\" }}>\r\n                Your subscription is ready with <b>100% discount</b>. Net payable is <b>₹0</b>.\r\n              </div>\r\n\r\n              <div className=\"glh-pay-summary\" style={{ marginTop: 14 }}>\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Selected Plan</span>\r\n                  <span className=\"glh-pay-strong\">{selectedPlan.label}</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Total</span>\r\n                  <span className=\"glh-pay-strong\">₹{total}</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span>Discount</span>\r\n                  <span className=\"glh-pay-strong\">100% (-₹{total})</span>\r\n                </div>\r\n                <div className=\"glh-pay-line\">\r\n                  <span className=\"glh-pay-strong\">Net Payable</span>\r\n                  <span className=\"glh-pay-strong\">₹0</span>\r\n                </div>\r\n              </div>\r\n            </div>\r\n          )}\r\n        </div>\r\n\r\n        <div className=\"glh-pay-footer\">\r\n          {!accountCreated ? (\r\n            <>\r\n              <button className=\"glh-pay-secondary\" onClick={onClose}>Cancel</button>\r\n              <button\r\n                className=\"glh-pay-primary\"\r\n                onClick={createAccountAndSubscribe}\r\n                disabled={!fullName || !email}\r\n                title={!fullName || !email ? \"Enter name & email\" : \"Create account\"}\r\n                style={!fullName || !email ? { opacity: 0.6, cursor: \"not-allowed\" } : null}\r\n              >\r\n                Create Account\r\n              </button>\r\n            </>\r\n          ) : (\r\n            <button className=\"glh-pay-primary\" onClick={onClose}>Done</button>\r\n          )}\r\n        </div>\r\n      </div>\r\n    </div>\r\n  );\r\n}\r\n","import React, { useEffect, useState } from \"react\";\r\nimport { PaymentModal } from \"./PaymentModal.jsx\";\r\nimport \"./styles.css\";\r\n\r\n/**\r\n * AccountButton\r\n * - Place this component in the CENTER area of your navbar.\r\n * - It renders a button and a modal for account creation + subscription summary.\r\n */\r\nexport function AccountButton({\r\n  buttonText = \"Account\",\r\n  wrapperClassName = \"\",\r\n  buttonClassName = \"\",\r\n  onAccountCreated\r\n}) {\r\n  const [open, setOpen] = useState(false);\r\n  const [hasAccount, setHasAccount] = useState(false);\r\n\r\n  useEffect(() => {\r\n    try {\r\n      const saved = localStorage.getItem(\"glh_payment_account\");\r\n      setHasAccount(!!saved);\r\n    } catch (e) {\r\n      setHasAccount(false);\r\n    }\r\n  }, [open]);\r\n\r\n  function handleClose() {\r\n    setOpen(false);\r\n    // refresh state after close\r\n    try {\r\n      const saved = localStorage.getItem(\"glh_payment_account\");\r\n      const ok = !!saved;\r\n      setHasAccount(ok);\r\n      if (ok && typeof onAccountCreated === \"function\") {\r\n        onAccountCreated(JSON.parse(saved));\r\n      }\r\n    } catch (e) {\r\n      // ignore\r\n    }\r\n  }\r\n\r\n  return (\r\n    <>\r\n      <div className={`glh-pay-centerWrap ${wrapperClassName}`}>\r\n        <button\r\n          className={`glh-pay-btn ${buttonClassName}`}\r\n          onClick={() => setOpen(true)}\r\n          type=\"button\"\r\n        >\r\n          {hasAccount ? `${buttonText} ✓` : buttonText}\r\n        </button>\r\n      </div>\r\n\r\n      <PaymentModal open={open} onClose={handleClose} />\r\n    </>\r\n  );\r\n}\r\n"],"names":["PRICE_PER_MONTH","PLAN_LIST","key","label","months","enabled","PaymentModal","open","onClose","defaultPlanKey","fullName","setFullName","useState","email","setEmail","planKey","setPlanKey","accountCreated","setAccountCreated","selectedPlan","useMemo","find","p","total","discountPercent","discountAmount","netPayable","handleBackdropClick","e","target","classList","contains","createAccountAndSubscribe","payload","createdAt","Date","toISOString","plan","pricePerMonth","localStorage","setItem","JSON","stringify","err","React","createElement","className","onMouseDown","role","stopPropagation","onClick","Fragment","value","onChange","placeholder","style","marginBottom","map","disabled","selected","pickPlan","join","tabIndex","onKeyDown","display","gap","fontWeight","fontSize","color","alignItems","padding","marginTop","title","opacity","cursor","AccountButton","buttonText","wrapperClassName","buttonClassName","onAccountCreated","setOpen","hasAccount","setHasAccount","useEffect","saved","getItem","handleClose","ok","parse","type"],"mappings":";;AAGA,MAAMA,eAAe,GAAG,CAAC;AAEzB,MAAMC,SAAS,GAAG,CAChB;AAAEC,EAAAA,GAAG,EAAE,SAAS;AAAEC,EAAAA,KAAK,EAAE,SAAS;AAAEC,EAAAA,MAAM,EAAE,CAAC;AAAEC,EAAAA,OAAO,EAAE;AAAM,CAAC,EAC/D;AAAEH,EAAAA,GAAG,EAAE,IAAI;AAAEC,EAAAA,KAAK,EAAE,UAAU;AAAEC,EAAAA,MAAM,EAAE,CAAC;AAAEC,EAAAA,OAAO,EAAE;AAAM,CAAC,EAC3D;AAAEH,EAAAA,GAAG,EAAE,IAAI;AAAEC,EAAAA,KAAK,EAAE,UAAU;AAAEC,EAAAA,MAAM,EAAE,CAAC;AAAEC,EAAAA,OAAO,EAAE;AAAK,CAAC;AAAM;AAChE;AAAEH,EAAAA,GAAG,EAAE,IAAI;AAAEC,EAAAA,KAAK,EAAE,QAAQ;AAAEC,EAAAA,MAAM,EAAE,EAAE;AAAEC,EAAAA,OAAO,EAAE;AAAM,CAAC,EAC1D;AAAEH,EAAAA,GAAG,EAAE,IAAI;AAAEC,EAAAA,KAAK,EAAE,SAAS;AAAEC,EAAAA,MAAM,EAAE,EAAE;AAAEC,EAAAA,OAAO,EAAE;AAAM,CAAC,CAC5D;AAEM,SAASC,YAAYA,CAAC;EAAEC,IAAI;AAAEC,EAAAA;AAAQ,CAAC,EAAE;EAC9C,MAAMC,cAAc,GAAG,IAAI;EAE3B,MAAM,CAACC,QAAQ,EAAEC,WAAW,CAAC,GAAGC,QAAQ,CAAC,EAAE,CAAC;EAC5C,MAAM,CAACC,KAAK,EAAEC,QAAQ,CAAC,GAAGF,QAAQ,CAAC,EAAE,CAAC;EACtC,MAAM,CAACG,OAAO,EAAEC,UAAU,CAAC,GAAGJ,QAAQ,CAACH,cAAc,CAAC;EACtD,MAAM,CAACQ,cAAc,EAAEC,iBAAiB,CAAC,GAAGN,QAAQ,CAAC,KAAK,CAAC;AAE3D,EAAA,MAAMO,YAAY,GAAGC,OAAO,CAAC,MAAM;AACjC,IAAA,OAAOnB,SAAS,CAACoB,IAAI,CAAEC,CAAC,IAAKA,CAAC,CAACpB,GAAG,KAAKa,OAAO,CAAC,IAAId,SAAS,CAAC,CAAC,CAAC;AACjE,EAAA,CAAC,EAAE,CAACc,OAAO,CAAC,CAAC;AAEb,EAAA,MAAMQ,KAAK,GAAGH,OAAO,CAAC,MAAMD,YAAY,CAACf,MAAM,GAAGJ,eAAe,EAAE,CAACmB,YAAY,CAAC,CAAC;EAClF,MAAMK,eAAe,GAAG,GAAG;AAC3B,EAAA,MAAMC,cAAc,GAAGF,KAAK,CAAC;AAC7B,EAAA,MAAMG,UAAU,GAAG,CAAC,CAAC;;EAErB,SAASC,mBAAmBA,CAACC,CAAC,EAAE;AAC9B,IAAA,IAAIA,CAAC,CAACC,MAAM,EAAEC,SAAS,EAAEC,QAAQ,CAAC,kBAAkB,CAAC,EAAEvB,OAAO,IAAI;AACpE,EAAA;EAEA,SAASwB,yBAAyBA,GAAG;AACnC;AACA,IAAA,MAAMC,OAAO,GAAG;MACdC,SAAS,EAAE,IAAIC,IAAI,EAAE,CAACC,WAAW,EAAE;MACnC1B,QAAQ;MACRG,KAAK;AACLwB,MAAAA,IAAI,EAAElB,YAAY;AAClBmB,MAAAA,aAAa,EAAEtC,eAAe;MAC9BuB,KAAK;MACLC,eAAe;MACfC,cAAc;AACdC,MAAAA;KACD;IACD,IAAI;MACFa,YAAY,CAACC,OAAO,CAAC,qBAAqB,EAAEC,IAAI,CAACC,SAAS,CAACT,OAAO,CAAC,CAAC;MACpEf,iBAAiB,CAAC,IAAI,CAAC;IACzB,CAAC,CAAC,OAAOyB,GAAG,EAAE;AACZ;MACAzB,iBAAiB,CAAC,IAAI,CAAC;AACzB,IAAA;AACF,EAAA;AAEA,EAAA,IAAI,CAACX,IAAI,EAAE,OAAO,IAAI;EAEtB,oBACEqC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,kBAAkB;AAACC,IAAAA,WAAW,EAAEpB,mBAAoB;AAACqB,IAAAA,IAAI,EAAC,QAAQ;IAAC,YAAA,EAAW;GAAM,eACjGJ,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,eAAe;AAACC,IAAAA,WAAW,EAAGnB,CAAC,IAAKA,CAAC,CAACqB,eAAe;GAAG,eACrEL,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;GAAgB,eAC7BF,KAAA,CAAAC,aAAA,CAAA,IAAA,EAAA;AAAIC,IAAAA,SAAS,EAAC;AAAe,GAAA,EAAC,wBAA0B,CAAC,eACzDF,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQC,IAAAA,SAAS,EAAC,eAAe;AAACI,IAAAA,OAAO,EAAE1C,OAAQ;IAAC,YAAA,EAAW;AAAO,GAAA,EAAC,QAAS,CAC7E,CAAC,eAENoC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAc,GAAA,EAC1B,CAAC7B,cAAc,gBACd2B,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAO,QAAA,EAAA,IAAA,eACEP,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAa,GAAA,eAC1BF,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA,IAAA,eACED,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAe,GAAA,EAAC,WAAc,CAAC,eAC9CF,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,eAAe;AACzBM,IAAAA,KAAK,EAAE1C,QAAS;IAChB2C,QAAQ,EAAGzB,CAAC,IAAKjB,WAAW,CAACiB,CAAC,CAACC,MAAM,CAACuB,KAAK,CAAE;AAC7CE,IAAAA,WAAW,EAAC;GACb,CACE,CAAC,eAENV,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA,IAAA,eACED,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAe,GAAA,EAAC,OAAU,CAAC,eAC1CF,KAAA,CAAAC,aAAA,CAAA,OAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,eAAe;AACzBM,IAAAA,KAAK,EAAEvC,KAAM;IACbwC,QAAQ,EAAGzB,CAAC,IAAKd,QAAQ,CAACc,CAAC,CAACC,MAAM,CAACuB,KAAK,CAAE;AAC1CE,IAAAA,WAAW,EAAC;AAAkB,GAC/B,CACE,CACF,CAAC,eAENV,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,eAAe;AAACS,IAAAA,KAAK,EAAE;AAAEC,MAAAA,YAAY,EAAE;AAAE;GAAE,EAAC,4BACpC,EAACxD,eAAe,EAAC,WACnC,CAAC,eAEN4C,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAe,GAAA,EAC3B7C,SAAS,CAACwD,GAAG,CAAEnC,CAAC,IAAK;AACpB,IAAA,MAAMoC,QAAQ,GAAG,CAACpC,CAAC,CAACjB,OAAO;AAC3B,IAAA,MAAMsD,QAAQ,GAAGrC,CAAC,CAACpB,GAAG,KAAKa,OAAO;IAElC,SAAS6C,QAAQA,GAAG;AAClB,MAAA,IAAIF,QAAQ,EAAE;AACd1C,MAAAA,UAAU,CAACM,CAAC,CAACpB,GAAG,CAAC;AACnB,IAAA;IAEA,oBACE0C,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;MACE3C,GAAG,EAAEoB,CAAC,CAACpB,GAAI;MACX4C,SAAS,EAAE,CACT,cAAc,EACdY,QAAQ,GAAG,sBAAsB,GAAG,EAAE,EACtCC,QAAQ,GAAG,kBAAkB,GAAG,EAAE,CACnC,CAACE,IAAI,CAAC,GAAG,CAAE;AACZX,MAAAA,OAAO,EAAEU,QAAS;AAClBZ,MAAAA,IAAI,EAAC,QAAQ;AACbc,MAAAA,QAAQ,EAAEJ,QAAQ,GAAG,EAAE,GAAG,CAAE;MAC5BK,SAAS,EAAGnC,CAAC,IAAK;AAChB,QAAA,IAAI,CAACA,CAAC,CAAC1B,GAAG,KAAK,OAAO,IAAI0B,CAAC,CAAC1B,GAAG,KAAK,GAAG,KAAK,CAACwD,QAAQ,EAAEE,QAAQ,EAAE;MACnE,CAAE;AACF,MAAA,eAAA,EAAeF,QAAS;MACxB,cAAA,EAAcC;KAAS,eAEvBf,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKU,MAAAA,KAAK,EAAE;AAAES,QAAAA,OAAO,EAAE,MAAM;AAAEC,QAAAA,GAAG,EAAE;AAAE;KAAE,eACtCrB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKU,MAAAA,KAAK,EAAE;AAAEW,QAAAA,UAAU,EAAE;AAAI;AAAE,KAAA,EAAE5C,CAAC,CAACnB,KAAW,CAAC,eAChDyC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKU,MAAAA,KAAK,EAAE;AAAEY,QAAAA,QAAQ,EAAE,EAAE;AAAEC,QAAAA,KAAK,EAAE;AAAmB;AAAE,KAAA,EAAC,YAC7C,EAAC9C,CAAC,CAAClB,MAAM,EAAC,WACjB,CACF,CAAC,eAENwC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKU,MAAAA,KAAK,EAAE;AAAES,QAAAA,OAAO,EAAE,MAAM;AAAEC,QAAAA,GAAG,EAAE,CAAC;AAAEI,QAAAA,UAAU,EAAE;AAAS;AAAE,KAAA,EAC3D/C,CAAC,CAACjB,OAAO,gBAAGuC,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,SAAS,EAAC;AAAc,KAAA,EAAC,SAAa,CAAC,gBAAGF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,SAAS,EAAC;AAAc,KAAA,EAAC,UAAc,CAAC,EAC1Ga,QAAQ,gBAAGf,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,MAAAA,SAAS,EAAC;AAAc,KAAA,EAAC,UAAc,CAAC,GAAG,IAC1D,CACF,CAAC;AAEV,EAAA,CAAC,CACE,CAAC,eAENF,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;GAAiB,eAC9BF,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAc,GAAA,eAC3BF,KAAA,CAAAC,aAAA,eAAM,SAAO,EAAC1B,YAAY,CAACf,MAAM,EAAC,cAAI,EAACJ,eAAe,EAAC,GAAO,CAAC,eAC/D4C,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;GAAgB,EAAC,QAAC,EAACvB,KAAY,CAC5C,CAAC,eACNqB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;GAAc,eAC3BF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,EAAM,UAAc,CAAC,eACrBD,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;AAAgB,GAAA,EAAEtB,eAAe,EAAC,YAAK,EAACC,cAAc,EAAC,GAAO,CAC3E,CAAC,eACNmB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;GAAc,eAC3BF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;AAAgB,GAAA,EAAC,aAAiB,CAAC,eACnDF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;GAAgB,EAAC,QAAC,EAACpB,UAAiB,CACjD,CACF,CAAC,eAENkB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAc,GAAA,EAAC,kGAEzB,CACL,CAAC,gBAEHF,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKU,IAAAA,KAAK,EAAE;AAAEe,MAAAA,OAAO,EAAE;AAAE;GAAE,eACzB1B,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKU,IAAAA,KAAK,EAAE;AAAEW,MAAAA,UAAU,EAAE,GAAG;AAAEC,MAAAA,QAAQ,EAAE,EAAE;AAAEX,MAAAA,YAAY,EAAE;AAAE;AAAE,GAAA,EAAC,wBAAsB,CAAC,eACvFZ,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKU,IAAAA,KAAK,EAAE;AAAEY,MAAAA,QAAQ,EAAE,EAAE;AAAEC,MAAAA,KAAK,EAAE;AAAkB;GAAE,EAAC,kCACtB,eAAAxB,KAAA,CAAAC,aAAA,CAAA,GAAA,EAAA,IAAA,EAAG,eAAgB,CAAC,EAAA,mBAAiB,eAAAD,KAAA,CAAAC,aAAA,YAAG,SAAK,CAAC,KAC3E,CAAC,eAEND,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC,iBAAiB;AAACS,IAAAA,KAAK,EAAE;AAAEgB,MAAAA,SAAS,EAAE;AAAG;GAAE,eACxD3B,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;GAAc,eAC3BF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,EAAM,eAAmB,CAAC,eAC1BD,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;GAAgB,EAAE3B,YAAY,CAAChB,KAAY,CACxD,CAAC,eACNyC,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;GAAc,eAC3BF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,EAAM,OAAW,CAAC,eAClBD,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;GAAgB,EAAC,QAAC,EAACvB,KAAY,CAC5C,CAAC,eACNqB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;GAAc,eAC3BF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA,IAAA,EAAM,UAAc,CAAC,eACrBD,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;GAAgB,EAAC,eAAQ,EAACvB,KAAK,EAAC,GAAO,CACpD,CAAC,eACNqB,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;GAAc,eAC3BF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;AAAgB,GAAA,EAAC,aAAiB,CAAC,eACnDF,KAAA,CAAAC,aAAA,CAAA,MAAA,EAAA;AAAMC,IAAAA,SAAS,EAAC;GAAgB,EAAC,SAAQ,CACtC,CACF,CACF,CAEJ,CAAC,eAENF,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;AAAKC,IAAAA,SAAS,EAAC;AAAgB,GAAA,EAC5B,CAAC7B,cAAc,gBACd2B,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAO,QAAA,EAAA,IAAA,eACEP,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQC,IAAAA,SAAS,EAAC,mBAAmB;AAACI,IAAAA,OAAO,EAAE1C;AAAQ,GAAA,EAAC,QAAc,CAAC,eACvEoC,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AACEC,IAAAA,SAAS,EAAC,iBAAiB;AAC3BI,IAAAA,OAAO,EAAElB,yBAA0B;AACnC0B,IAAAA,QAAQ,EAAE,CAAChD,QAAQ,IAAI,CAACG,KAAM;IAC9B2D,KAAK,EAAE,CAAC9D,QAAQ,IAAI,CAACG,KAAK,GAAG,oBAAoB,GAAG,gBAAiB;AACrE0C,IAAAA,KAAK,EAAE,CAAC7C,QAAQ,IAAI,CAACG,KAAK,GAAG;AAAE4D,MAAAA,OAAO,EAAE,GAAG;AAAEC,MAAAA,MAAM,EAAE;AAAc,KAAC,GAAG;AAAK,GAAA,EAC7E,gBAEO,CACR,CAAC,gBAEH9B,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;AAAQC,IAAAA,SAAS,EAAC,iBAAiB;AAACI,IAAAA,OAAO,EAAE1C;AAAQ,GAAA,EAAC,MAAY,CAEjE,CACF,CACF,CAAC;AAEV;;AC3MA;AACA;AACA;AACA;AACA;AACO,SAASmE,aAAaA,CAAC;AAC5BC,EAAAA,UAAU,GAAG,SAAS;AACtBC,EAAAA,gBAAgB,GAAG,EAAE;AACrBC,EAAAA,eAAe,GAAG,EAAE;AACpBC,EAAAA;AACF,CAAC,EAAE;EACD,MAAM,CAACxE,IAAI,EAAEyE,OAAO,CAAC,GAAGpE,QAAQ,CAAC,KAAK,CAAC;EACvC,MAAM,CAACqE,UAAU,EAAEC,aAAa,CAAC,GAAGtE,QAAQ,CAAC,KAAK,CAAC;AAEnDuE,EAAAA,SAAS,CAAC,MAAM;IACd,IAAI;AACF,MAAA,MAAMC,KAAK,GAAG7C,YAAY,CAAC8C,OAAO,CAAC,qBAAqB,CAAC;AACzDH,MAAAA,aAAa,CAAC,CAAC,CAACE,KAAK,CAAC;IACxB,CAAC,CAAC,OAAOxD,CAAC,EAAE;MACVsD,aAAa,CAAC,KAAK,CAAC;AACtB,IAAA;AACF,EAAA,CAAC,EAAE,CAAC3E,IAAI,CAAC,CAAC;EAEV,SAAS+E,WAAWA,GAAG;IACrBN,OAAO,CAAC,KAAK,CAAC;AACd;IACA,IAAI;AACF,MAAA,MAAMI,KAAK,GAAG7C,YAAY,CAAC8C,OAAO,CAAC,qBAAqB,CAAC;AACzD,MAAA,MAAME,EAAE,GAAG,CAAC,CAACH,KAAK;MAClBF,aAAa,CAACK,EAAE,CAAC;AACjB,MAAA,IAAIA,EAAE,IAAI,OAAOR,gBAAgB,KAAK,UAAU,EAAE;AAChDA,QAAAA,gBAAgB,CAACtC,IAAI,CAAC+C,KAAK,CAACJ,KAAK,CAAC,CAAC;AACrC,MAAA;IACF,CAAC,CAAC,OAAOxD,CAAC,EAAE;AACV;AAAA,IAAA;AAEJ,EAAA;EAEA,oBACEgB,KAAA,CAAAC,aAAA,CAAAD,KAAA,CAAAO,QAAA,EAAA,IAAA,eACEP,KAAA,CAAAC,aAAA,CAAA,KAAA,EAAA;IAAKC,SAAS,EAAE,sBAAsB+B,gBAAgB,CAAA;GAAG,eACvDjC,KAAA,CAAAC,aAAA,CAAA,QAAA,EAAA;IACEC,SAAS,EAAE,CAAA,YAAA,EAAegC,eAAe,CAAA,CAAG;AAC5C5B,IAAAA,OAAO,EAAEA,MAAM8B,OAAO,CAAC,IAAI,CAAE;AAC7BS,IAAAA,IAAI,EAAC;AAAQ,GAAA,EAEZR,UAAU,GAAG,CAAA,EAAGL,UAAU,IAAI,GAAGA,UAC5B,CACL,CAAC,eAENhC,KAAA,CAAAC,aAAA,CAACvC,YAAY,EAAA;AAACC,IAAAA,IAAI,EAAEA,IAAK;AAACC,IAAAA,OAAO,EAAE8E;AAAY,GAAE,CACjD,CAAC;AAEP;;;;"}

package/dist/styles.css

@@ -0,0 +1,207 @@
+.glh-pay-centerWrap {
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+  
+  .glh-pay-btn {
+    -webkit-appearance: none;
+       -moz-appearance: none;
+            appearance: none;
+    border: 1px solid rgba(0,0,0,0.15);
+    background: #ffffff;
+    color: #111;
+    padding: 10px 16px;
+    border-radius: 10px;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.06s ease, box-shadow 0.2s ease, background 0.2s ease;
+    box-shadow: 0 6px 18px rgba(0,0,0,0.06);
+  }
+  
+  .glh-pay-btn:active {
+    transform: scale(0.98);
+  }
+  
+  .glh-pay-btn:hover {
+    background: #fafafa;
+  }
+  
+  .glh-pay-backdrop {
+    position: fixed;
+    inset: 0;
+    background: rgba(0,0,0,0.45);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 16px;
+    z-index: 9999;
+  }
+  
+  .glh-pay-modal {
+    width: 100%;
+    max-width: 520px;
+    background: #fff;
+    border-radius: 16px;
+    box-shadow: 0 20px 60px rgba(0,0,0,0.25);
+    overflow: hidden;
+  }
+  
+  .glh-pay-header {
+    padding: 16px 18px;
+    border-bottom: 1px solid rgba(0,0,0,0.08);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+  }
+  
+  .glh-pay-title {
+    margin: 0;
+    font-size: 16px;
+    font-weight: 800;
+  }
+  
+  .glh-pay-close {
+    border: none;
+    background: transparent;
+    cursor: pointer;
+    font-size: 18px;
+    line-height: 1;
+    padding: 6px 10px;
+    border-radius: 10px;
+  }
+  
+  .glh-pay-close:hover {
+    background: rgba(0,0,0,0.06);
+  }
+  
+  .glh-pay-body {
+    padding: 16px 18px;
+  }
+  
+  .glh-pay-row {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+    margin-bottom: 14px;
+  }
+  
+  .glh-pay-label {
+    font-size: 12px;
+    font-weight: 700;
+    color: rgba(0,0,0,0.7);
+  }
+  
+  .glh-pay-input {
+    width: 100%;
+    padding: 10px 12px;
+    border-radius: 10px;
+    border: 1px solid rgba(0,0,0,0.15);
+    outline: none;
+  }
+  
+  .glh-pay-input:focus {
+    border-color: rgba(0,0,0,0.35);
+  }
+  
+  .glh-pay-plans {
+    display: grid;
+    grid-template-columns: 1fr;
+    gap: 10px;
+  }
+  
+  .glh-pay-plan {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    gap: 12px;
+    padding: 12px 12px;
+    border-radius: 12px;
+    border: 1px solid rgba(0,0,0,0.12);
+    background: #fff;
+    cursor: pointer;
+  }
+  
+  .glh-pay-plan:hover {
+    background: #fafafa;
+  }
+  
+  .glh-pay-planDisabled {
+    opacity: 0.45;
+    cursor: not-allowed;
+  }
+  
+  .glh-pay-pill {
+    font-size: 11px;
+    font-weight: 800;
+    padding: 4px 8px;
+    border-radius: 999px;
+    background: rgba(0,0,0,0.06);
+  }
+  
+  .glh-pay-selected {
+    border-color: rgba(0,0,0,0.4);
+    box-shadow: 0 10px 22px rgba(0,0,0,0.08);
+  }
+  
+  .glh-pay-summary {
+    margin-top: 14px;
+    padding: 12px;
+    border-radius: 12px;
+    border: 1px dashed rgba(0,0,0,0.22);
+    background: rgba(0,0,0,0.02);
+    display: grid;
+    gap: 6px;
+  }
+  
+  .glh-pay-line {
+    display: flex;
+    justify-content: space-between;
+    gap: 10px;
+    font-size: 13px;
+  }
+  
+  .glh-pay-strong {
+    font-weight: 900;
+  }
+  
+  .glh-pay-footer {
+    padding: 14px 18px 18px;
+    border-top: 1px solid rgba(0,0,0,0.08);
+    display: flex;
+    gap: 10px;
+    justify-content: flex-end;
+  }
+  
+  .glh-pay-primary {
+    border: none;
+    background: #111;
+    color: #fff;
+    padding: 10px 14px;
+    border-radius: 12px;
+    font-weight: 800;
+    cursor: pointer;
+  }
+  
+  .glh-pay-primary:hover {
+    opacity: 0.92;
+  }
+  
+  .glh-pay-secondary {
+    border: 1px solid rgba(0,0,0,0.15);
+    background: #fff;
+    color: #111;
+    padding: 10px 14px;
+    border-radius: 12px;
+    font-weight: 800;
+    cursor: pointer;
+  }
+  
+  .glh-pay-note {
+    margin-top: 10px;
+    font-size: 12px;
+    color: rgba(0,0,0,0.65);
+  }
+  

package/package.json

@@ -0,0 +1,51 @@
+{
+    "name": "@samsheena/payment-ui",
+    "version": "1.0.0",
+    "description": "Frontend-only payment account + subscription UI (₹5/month) with 100% discount",
+    "main": "dist/index.cjs.js",
+    "module": "dist/index.esm.js",
+    "types": "dist/index.d.ts",
+    "files": [
+      "dist"
+    ],
+    "sideEffects": [
+      "*.css"
+    ],
+   "scripts": {
+  "clean": "rimraf dist",
+  "build": "npm run clean && rollup -c rollup.config.cjs",
+  "dev": "rollup -c rollup.config.cjs -w",
+  "prepublishOnly": "npm run build"
+},
+
+    "keywords": [
+      "react",
+      "subscription",
+      "payment",
+      "modal",
+      "navbar",
+      "frontend-only"
+    ],
+    "author": "",
+    "license": "MIT",
+    "peerDependencies": {
+      "react": ">=17",
+      "react-dom": ">=17"
+    },
+    "devDependencies": {
+      "@babel/core": "^7.26.0",
+      "@babel/preset-react": "^7.26.0",
+      "@rollup/plugin-babel": "^6.0.4",
+      "@rollup/plugin-commonjs": "^28.0.2",
+      "@rollup/plugin-node-resolve": "^16.0.0",
+      "autoprefixer": "^10.4.20",
+      "postcss": "^8.4.49",
+      "rimraf": "^6.0.1",
+      "rollup": "^4.28.1",
+      "rollup-plugin-peer-deps-external": "^2.2.4",
+      "rollup-plugin-postcss": "^4.0.2",
+      "react": "^18.3.1",
+      "react-dom": "^18.3.1"
+    }
+  }
+