@hipaymn/miniapp-ui-library 0.0.0-stage → 1.0.0

package/README.md

@@ -1,3 +1,128 @@
-# Temporary Holding Version
+# hipay-miniapp-ui-library
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+React components for HiPay mini apps.
+
+## Install
+
+```bash
+yarn add hipay-miniapp-ui-library
+```
+
+Peer dependencies: React 19, React DOM 19, and React Router 7.
+
+## Setup
+
+Import the stylesheet once, and wrap the app with `BrowserRouter` and `ToastProvider`. `Header` uses React Router, so it must render inside a router.
+
+```tsx
+import { BrowserRouter } from "react-router-dom";
+import { ToastProvider } from "hipay-miniapp-ui-library";
+import "hipay-miniapp-ui-library/style.css";
+
+export function App() {
+  return (
+    <BrowserRouter>
+      <ToastProvider>
+        <YourScreen />
+      </ToastProvider>
+    </BrowserRouter>
+  );
+}
+```
+
+The theme font is [Manrope](https://fonts.google.com/specimen/Manrope). It is loaded by the stylesheet.
+
+## Layout
+
+`Layout` fills the screen. `header` stays at the top and `footer` stays at the bottom.
+
+```tsx
+import { Button, Header, Layout } from "hipay-miniapp-ui-library";
+
+<Layout
+  header={<Header title="HiPay" />}
+  footer={<Button text="Continue" variant="secondary" className="w-full" />}
+>
+  <p>Screen content</p>
+</Layout>
+```
+
+`Header` props:
+
+| Prop | Description |
+| --- | --- |
+| `title` | Centered title. Required. |
+| `isArrowLeft` | Shows the back button. Defaults to `true`. |
+| `handleBack` | Called when the back button is pressed. |
+| `leftIcon` | Image URL for the button on the right. |
+| `handeClickLeftIcon` | Called when that button is pressed. |
+
+## Button
+
+```tsx
+<Button text="Continue" variant="secondary" className="w-full" onClick={submit} />
+<Button text="Saving" variant="primary" loading className="w-full" />
+<Button text="Back" variant="transparent" isRightIcon={false} />
+```
+
+`variant` is `"primary"`, `"secondary"`, or `"transparent"`. A white arrow shows on the right by default. Set `isRightIcon={false}` to hide it, or `rightIconColor="black"` for the dark arrow. `loading` keeps the label and shows `Loader` beside it. `leftIcon` and `rightIcon` are image URLs.
+
+## Input
+
+Boxed field with a floating label. Pass `currency` to show a symbol in front of a grouped amount. `onChange` still receives the raw digits, such as `"20000"`.
+
+```tsx
+<Input label="Үнийн дүн" currency="₮" value={amount} onChange={handleAmount} />
+<Input label="Утасны дугаар" editable error="Буруу дугаар" />
+```
+
+`editable` shows a pencil icon. `rightIcon` replaces that icon.
+
+## MainInput
+
+Underline field. `onChange` receives the string value.
+
+```tsx
+<MainInput
+  label="Утас"
+  value={phone}
+  prefix={<span>+976</span>}
+  onChange={setPhone}
+/>
+
+<MainInput label="Нууц үг" isPassword value={password} onChange={setPassword} />
+<MainInput label="Нэр" value={name} error="Буруу утга" onChange={setName} />
+```
+
+The label sits on the line when the field is empty, and moves above the border when the field is focused or filled. `labelAlwaysOnTop` keeps it above the border. `isLoading` shows a spinner.
+
+## Toast
+
+Call `useToast()` inside `ToastProvider`.
+
+```tsx
+const { show } = useToast();
+
+show.success("Payment successful", 3000);
+show.error("Payment failed");
+show({ message: "Check the amount", variant: "warning", title: "Анхааруулга" });
+```
+
+`show.success`, `show.error`, `show.warning`, and `show.info` take a message and an optional duration in milliseconds.
+
+## Loader
+
+```tsx
+<Loader />
+<Loader size="large" color="#22272C" />
+<Loader size={24} animating={false} />
+```
+
+`size` is `"small"`, `"large"`, or a pixel number. The default color is `#FF3B63`.
+
+## Local preview
+
+```bash
+yarn dev
+yarn build
+```

package/dist/index.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});let e=require("react-router-dom"),t=require("react/jsx-runtime"),n=require("react");function r({title:n,isArrowLeft:r=!0,leftIcon:i,handeClickLeftIcon:a,handleBack:o}){return(0,e.useNavigate)(),(0,t.jsx)(`header`,{className:`sticky top-0 z-10 w-full border-b border-black-10 bg-white`,children:(0,t.jsxs)(`div`,{className:`relative flex h-14 items-center justify-between px-6 sm:h-16`,children:[r&&(0,t.jsx)(`button`,{type:`button`,onClick:o,"aria-label":`Header action`,className:`absolute left-3 flex h-9 w-9 items-center justify-center rounded-full transition hover:bg-gray-100 active:bg-gray-200 sm:left-4`,children:(0,t.jsx)(`img`,{src:`data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.75%2018.26L7.77333%2012.2833C7.0675%2011.5775%207.0675%2010.4225%207.77333%209.71666L13.75%203.73999'%20stroke='%23292D32'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e`,alt:``,className:`pointer-events-none h-6 w-6`,style:{touchAction:`none`}})}),(0,t.jsx)(`h1`,{className:`absolute left-1/2 max-w-[70%] -translate-x-1/2 truncate text-center text-base font-bold text-black`,children:n}),i&&(0,t.jsx)(`button`,{type:`button`,onClick:a,className:`absolute right-3 flex h-9 w-9 items-center justify-center sm:right-4`,children:(0,t.jsx)(`img`,{src:i,alt:``,className:`pointer-events-none h-6 w-6`,style:{touchAction:`none`}})})]})})}function i({header:e,footer:n,children:r}){return(0,t.jsxs)(`div`,{className:`flex min-h-dvh flex-col`,children:[e!=null&&(0,t.jsx)(`header`,{className:`shrink-0`,children:e}),(0,t.jsx)(`main`,{className:`flex-1 px-4 pt-4`,children:r}),n!=null&&(0,t.jsx)(`footer`,{className:`shrink-0 px-4 pt-4 pb-safe`,children:n})]})}function a(e){var t,n,r=``;if(typeof e==`string`||typeof e==`number`)r+=e;else if(typeof e==`object`){if(Array.isArray(e)){var i=e.length;for(t=0;t<i;t++)e[t]&&(n=a(e[t]))&&(r&&(r+=` `),r+=n)}else for(n in e)e[n]&&(r&&(r+=` `),r+=n)}return r}function o(){for(var e,t,n=0,r=``,i=arguments.length;n<i;n++)(e=arguments[n])&&(t=a(e))&&(r&&(r+=` `),r+=t);return r}var s=`data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%2313F0A9'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M7.75%2012L10.58%2014.83L16.25%209.16998'%20stroke='%2313F0A9'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e`,c=`data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%208V13'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.9945%2016H12.0035'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e`,l=`data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%208V13'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.9945%2016H12.0035'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e`,u=`data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202Z'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%2016V11'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12.0055%208H11.9965'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e`,d=`data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.33398%203.33331L12.6667%2012.666'%20stroke='black'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M3.33337%2012.666L12.6661%203.33331'%20stroke='black'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e`,f={success:{border:`border-primary`,bar:`bg-hipay`,icon:s,title:`Амжилттай`},error:{border:`border-hipay`,bar:`bg-hipay`,icon:c,title:`Алдаа гарлаа`},warning:{border:`border-yellow-500`,bar:`bg-hipay`,icon:l,title:`Анхааруулга`},info:{border:`border-blue-500`,bar:`bg-hipay`,icon:u,title:`Анхааруулга`}},p=(0,n.createContext)(null);function m(){let e=(0,n.useContext)(p);if(!e)throw Error(`useToast must be used within ToastProvider`);return e}function h({toast:e,onClose:r}){let{id:i,title:a,message:s,variant:c,duration:l}=e,u=f[c];return(0,n.useEffect)(()=>{let e=setTimeout(()=>r(i),l);return()=>clearTimeout(e)},[i,l,r]),(0,t.jsxs)(`div`,{onClick:()=>r(i),className:o(`pointer-events-auto relative w-96 overflow-hidden rounded-[5px] bg-white text-left shadow-toast`,u.border),children:[(0,t.jsxs)(`div`,{className:`flex items-start justify-between px-4 py-2.5`,children:[(0,t.jsxs)(`div`,{className:`flex flex-row items-start gap-2`,children:[(0,t.jsx)(`div`,{className:`mt-1`,children:(0,t.jsx)(`img`,{src:u.icon,alt:``,className:`h-5 w-5`})}),(0,t.jsxs)(`div`,{className:`flex flex-col gap-1`,children:[(0,t.jsx)(`p`,{className:`font-sans text-sm font-semibold leading-6 text-primary`,children:a??u.title}),(0,t.jsx)(`p`,{className:`font-sans text-sm font-medium leading-6 text-primary`,children:s})]})]}),(0,t.jsx)(`div`,{className:`mt-1`,children:(0,t.jsx)(`img`,{src:d,alt:``,className:`h-4 w-4`})})]}),(0,t.jsx)(`div`,{className:`absolute inset-x-0 bottom-0 h-1 bg-black-10`,children:(0,t.jsx)(`div`,{className:o(`toast-progress h-full w-full`,u.bar),style:{animationDuration:`${l}ms`}})})]})}var g=0;function _({children:e}){let[r,i]=(0,n.useState)([]),a=(0,n.useCallback)(e=>{i(t=>t.filter(t=>t.id!==e))},[]),o=(0,n.useMemo)(()=>{let e=({title:e,message:t,variant:n=`info`,duration:r=3e3})=>{i(i=>[...i,{id:++g,title:e??f[n].title,message:t,variant:n,duration:r}])};return{show:Object.assign(e,{success:(t,n)=>e({message:t,variant:`success`,duration:n}),error:(t,n)=>e({message:t,variant:`error`,duration:n}),warning:(t,n)=>e({message:t,variant:`warning`,duration:n}),info:(t,n)=>e({message:t,variant:`info`,duration:n})})}},[]);return(0,t.jsxs)(p.Provider,{value:o,children:[e,(0,t.jsx)(`div`,{className:`pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 px-4 right-0 items-center`,style:{top:`4.5rem`},children:r.map(e=>(0,t.jsx)(h,{toast:e,onClose:a},e.id))})]})}var v=12,y={small:20,large:36};function b({animating:e=!0,color:n=`#FF3B63`,size:r=`small`,hidesWhenStopped:i=!0,className:a}){if(!e&&i)return null;let s=typeof r==`number`?r:y[r],c=Math.max(2,Math.round(s*.09)),l=Math.round(s*.28);return(0,t.jsx)(`span`,{role:`status`,"aria-label":`Loading`,"aria-busy":e||void 0,className:o(`relative inline-block shrink-0`,a),style:{width:s,height:s},children:Array.from({length:v},(r,i)=>(0,t.jsx)(`span`,{className:o(`absolute top-0 left-1/2 rounded-full`,e&&`loader-tick`),style:{width:c,height:l,marginLeft:-c/2,backgroundColor:n,opacity:e?void 0:.25,transform:`rotate(${360/v*i}deg)`,transformOrigin:`center ${s/2}px`,animationDelay:e?`${-(v-i)/v}s`:void 0}},i))})}var x=`relative inline-flex items-center justify-center font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2`,S={primary:`bg-white text-black border border-black-70 rounded-2xl focus:ring-primary shadow-glass backdrop-glass w-full`,secondary:`!bg-secondary text-white rounded-2xl focus:ring-secondary shadow-glass/10 backdrop-glass w-full`,transparent:`bg-transparent text-primary border border-black-25 rounded-full focus:ring-black-25 w-full`},C={md:`px-4 py-3.5 text-sm`},w={primary:`bg-secondary-gradient rounded-2xl text-white`,secondary:`bg-secondary-gradient rounded-2xl text-white`,transparent:`bg-transparent text-primary border border-black-25 rounded-full`},T={primary:`hover:bg-gray-50`,secondary:`hover:bg-secondary/80`,transparent:`hover:brightness-95`};function E({text:e,variant:n=`primary`,size:r=`md`,loading:i=!1,disabled:a=!1,onClick:s,leftIcon:c,rightIcon:l,className:u,isRightIcon:d=!0,rightIconColor:f=`white`}){let p=a||i,m=n===`secondary`||p&&n!==`transparent`;return(0,t.jsx)(`button`,{type:`button`,onClick:s,disabled:p,"aria-disabled":p,"aria-busy":i||void 0,className:o(x,C[r],p?w[n]:S[n],!p&&T[n],p&&`cursor-not-allowed`,u),children:i?(0,t.jsxs)(`span`,{className:`flex w-full items-center justify-center gap-2 text-sm font-medium leading-6`,children:[(0,t.jsx)(b,{size:20}),e]}):(0,t.jsxs)(t.Fragment,{children:[(0,t.jsxs)(`span`,{className:`flex w-full items-center justify-center gap-2 text-sm font-medium leading-6`,children:[c&&(0,t.jsx)(`img`,{src:c,alt:``,className:o(`h-4 w-4 shrink-0`,m&&`brightness-0 invert`),style:{touchAction:`none`,pointerEvents:`none`}}),e]}),d&&(0,t.jsx)(`img`,{src:f===`white`?l||`data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.9168%2015.8333C10.7519%2015.8327%2010.591%2015.7831%2010.4544%2015.691C10.3177%2015.5988%2010.2115%2015.4682%2010.149%2015.3157C10.0866%2015.1632%2010.0708%2014.9956%2010.1036%2014.8341C10.1364%2014.6726%2010.2164%2014.5244%2010.3334%2014.4083L14.1668%2010.5917C14.2449%2010.5142%2014.3069%2010.422%2014.3492%2010.3205C14.3915%2010.2189%2014.4133%2010.11%2014.4133%2010C14.4133%209.89%2014.3915%209.78108%2014.3492%209.67953C14.3069%209.57798%2014.2449%209.48581%2014.1668%209.40834L10.3334%205.59168C10.2553%205.51421%2010.1933%205.42204%2010.151%205.32049C10.1087%205.21894%2010.0869%205.11002%2010.0869%205.00001C10.0869%204.89%2010.1087%204.78108%2010.151%204.67953C10.1933%204.57798%2010.2553%204.48581%2010.3334%204.40834C10.4896%204.25313%2010.7008%204.16602%2010.9209%204.16602C11.1411%204.16602%2011.3523%204.25313%2011.5084%204.40834L15.3334%208.23334C15.8016%208.70209%2016.0646%209.33751%2016.0646%2010C16.0646%2010.6625%2015.8016%2011.2979%2015.3334%2011.7667L11.5084%2015.5917C11.4306%2015.6689%2011.3382%2015.73%2011.2367%2015.7715C11.1351%2015.813%2011.0264%2015.834%2010.9168%2015.8333Z'%20fill='white'%20fill-opacity='0.6'/%3e%3cpath%20d='M5.08375%2015.8333C4.91894%2015.8327%204.75803%2015.7831%204.62138%2015.691C4.48472%2015.5988%204.37846%2015.4682%204.31602%2015.3157C4.25358%2015.1632%204.23778%2014.9956%204.2706%2014.8341C4.30342%2014.6726%204.38339%2014.5244%204.50041%2014.4083L8.90875%2010L4.50041%205.59168C4.42231%205.51421%204.36031%205.42204%204.318%205.32049C4.2757%205.21894%204.25391%205.11002%204.25391%205.00001C4.25391%204.89%204.2757%204.78108%204.318%204.67953C4.36031%204.57798%204.42231%204.48581%204.50041%204.40834C4.65655%204.25313%204.86776%204.16602%205.08791%204.16602C5.30807%204.16602%205.51928%204.25313%205.67541%204.40834L10.6754%209.40834C10.7535%209.48581%2010.8155%209.57798%2010.8578%209.67953C10.9001%209.78108%2010.9219%209.89%2010.9219%2010C10.9219%2010.11%2010.9001%2010.2189%2010.8578%2010.3205C10.8155%2010.422%2010.7535%2010.5142%2010.6754%2010.5917L5.67541%2015.5917C5.59755%2015.6689%205.5052%2015.73%205.40367%2015.7715C5.30214%2015.813%205.19342%2015.834%205.08375%2015.8333Z'%20fill='white'%20fill-opacity='0.6'/%3e%3c/svg%3e`:l||`data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.9168%2015.8333C10.7519%2015.8327%2010.591%2015.7831%2010.4544%2015.691C10.3177%2015.5988%2010.2115%2015.4682%2010.149%2015.3157C10.0866%2015.1632%2010.0708%2014.9956%2010.1036%2014.8341C10.1364%2014.6726%2010.2164%2014.5244%2010.3334%2014.4083L14.1668%2010.5917C14.2449%2010.5142%2014.3069%2010.422%2014.3492%2010.3205C14.3915%2010.2189%2014.4133%2010.11%2014.4133%2010C14.4133%209.89%2014.3915%209.78108%2014.3492%209.67953C14.3069%209.57798%2014.2449%209.48581%2014.1668%209.40834L10.3334%205.59168C10.2553%205.51421%2010.1933%205.42204%2010.151%205.32049C10.1087%205.21894%2010.0869%205.11002%2010.0869%205.00001C10.0869%204.89%2010.1087%204.78108%2010.151%204.67953C10.1933%204.57798%2010.2553%204.48581%2010.3334%204.40834C10.4896%204.25313%2010.7008%204.16602%2010.9209%204.16602C11.1411%204.16602%2011.3523%204.25313%2011.5084%204.40834L15.3334%208.23334C15.8016%208.70209%2016.0646%209.33751%2016.0646%2010C16.0646%2010.6625%2015.8016%2011.2979%2015.3334%2011.7667L11.5084%2015.5917C11.4306%2015.6689%2011.3382%2015.73%2011.2367%2015.7715C11.1351%2015.813%2011.0264%2015.834%2010.9168%2015.8333Z'%20fill='black'%20fill-opacity='0.6'/%3e%3cpath%20d='M5.08375%2015.8333C4.91894%2015.8327%204.75803%2015.7831%204.62138%2015.691C4.48472%2015.5988%204.37846%2015.4682%204.31602%2015.3157C4.25358%2015.1632%204.23778%2014.9956%204.2706%2014.8341C4.30342%2014.6726%204.38339%2014.5244%204.50041%2014.4083L8.90875%2010L4.50041%205.59168C4.42231%205.51421%204.36031%205.42204%204.318%205.32049C4.2757%205.21894%204.25391%205.11002%204.25391%205.00001C4.25391%204.89%204.2757%204.78108%204.318%204.67953C4.36031%204.57798%204.42231%204.48581%204.50041%204.40834C4.65655%204.25313%204.86776%204.16602%205.08791%204.16602C5.30807%204.16602%205.51928%204.25313%205.67541%204.40834L10.6754%209.40834C10.7535%209.48581%2010.8155%209.57798%2010.8578%209.67953C10.9001%209.78108%2010.9219%209.89%2010.9219%2010C10.9219%2010.11%2010.9001%2010.2189%2010.8578%2010.3205C10.8155%2010.422%2010.7535%2010.5142%2010.6754%2010.5917L5.67541%2015.5917C5.59755%2015.6689%205.5052%2015.73%205.40367%2015.7715C5.30214%2015.813%205.19342%2015.834%205.08375%2015.8333Z'%20fill='black'%20fill-opacity='0.6'/%3e%3c/svg%3e`,alt:``,className:`pointer-events-none absolute right-4 top-1/2 -translate-y-1/2`,style:{touchAction:`none`}})]})})}function D(e){return e.replace(/\D/g,``)}function O(e){return e?Number(e).toLocaleString(`en-US`):``}function k({label:e,error:r,editable:i=!1,rightIcon:a,currency:s,id:c,className:l,value:u,defaultValue:d,onChange:f,onFocus:p,onBlur:m,inputMode:h,...g}){let _=(0,n.useId)(),v=c??_,y=(0,n.useRef)(null),b=(0,n.useRef)(null),[x,S]=(0,n.useState)(0),[C,w]=(0,n.useState)(!1),[T,E]=(0,n.useState)(()=>D(d==null?``:String(d))),k=s?D(u==null?T:String(u)):``,A=s?O(k):``,j=!!(s&&(C||A)),M=a??(i?(0,t.jsx)(`img`,{src:`data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.2603%203.59997L5.05034%2012.29C4.74034%2012.62%204.44034%2013.27%204.38034%2013.72L4.01034%2016.96C3.88034%2018.13%204.72034%2018.93%205.88034%2018.73L9.10034%2018.18C9.55034%2018.1%2010.1803%2017.77%2010.4903%2017.43L18.7003%208.73997C20.1203%207.23997%2020.7603%205.52997%2018.5503%203.43997C16.3503%201.36997%2014.6803%202.09997%2013.2603%203.59997Z'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.8896%205.05005C12.3196%207.81005%2014.5596%209.92005%2017.3396%2010.2'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M3%2022H21'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e`,alt:``,className:`h-6 w-6`}):null);(0,n.useLayoutEffect)(()=>{S(b.current?.offsetWidth??0)},[s]);function N(e){if(!s){f?.(e);return}let t=e.target.selectionStart??e.target.value.length,n=D(e.target.value.slice(0,t)).length,r=D(e.target.value);u??E(r),e.target.value=r,f?.(e),requestAnimationFrame(()=>{let e=y.current;if(!e)return;let t=O(r),i=0,a=t.length;for(let e=0;e<t.length;e+=1)if(/\d/.test(t[e]??``)&&(i+=1),i>=n){a=e+1;break}n===0&&(a=0),e.setSelectionRange(a,a)})}return(0,t.jsxs)(`div`,{className:`flex flex-col gap-1 pt-3`,children:[(0,t.jsxs)(`div`,{className:`relative`,children:[(0,t.jsx)(`input`,{...g,ref:y,id:v,placeholder:` `,inputMode:s?`numeric`:h,value:s?A:u,defaultValue:s?void 0:d,onChange:N,onFocus:e=>{w(!0),p?.(e)},onBlur:e=>{w(!1),m?.(e)},style:j?{paddingLeft:16+x+2}:void 0,className:o(`peer h-16 w-full rounded-xl border border-primary/20 bg-white px-4 text-base font-bold leading-6 text-primary outline-none`,M&&`pr-14`,l)}),(0,t.jsx)(`span`,{ref:b,"aria-hidden":!0,className:`invisible absolute text-base font-bold leading-6`,children:s}),j&&(0,t.jsx)(`span`,{className:`pointer-events-none absolute top-1/2 left-4 z-10 -translate-y-1/2 text-base font-bold leading-6 text-primary`,children:s}),(0,t.jsx)(`label`,{htmlFor:v,className:`pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-sm font-normal leading-4 text-black/50 transition-all peer-not-placeholder-shown:left-3 peer-not-placeholder-shown:top-0 peer-not-placeholder-shown:-translate-y-[70%] peer-not-placeholder-shown:bg-white peer-not-placeholder-shown:px-1.5 peer-not-placeholder-shown:text-xs peer-focus:left-3 peer-focus:top-0 peer-focus:-translate-y-[70%] peer-focus:bg-white peer-focus:px-1.5 peer-focus:text-xs`,children:e}),M&&(0,t.jsx)(`div`,{"aria-label":`Edit`,onClick:()=>y.current?.focus(),className:`absolute right-4 top-1/2 flex -translate-y-1/2 items-center justify-center`,children:M})]}),r&&(0,t.jsx)(`p`,{className:`text-sm font-normal leading-6 text-hipay font-sans ml-1`,children:r})]})}function A({ref:e,id:r,label:i,value:a,defaultValue:s,error:c,prefix:l,suffix:u,placeholder:d,type:f=`text`,isPassword:p=!1,isLoading:m=!1,labelAlwaysOnTop:h=!1,readOnly:g,disabled:_,className:v,onChange:y,onFocus:b,onBlur:x,...S}){let C=(0,n.useId)(),w=r??C,[T,E]=(0,n.useState)(!1),[D,O]=(0,n.useState)(()=>String(s??``).length>0),k=a===void 0?D:String(a).length>0,A=h||T||k;return(0,t.jsxs)(`div`,{className:o(`w-full pt-5`,v),children:[(0,t.jsxs)(`div`,{className:o(`relative border-b py-1`,c?`border-red-500`:T?`border-hipay`:`border-blackOpa20`,_&&`opacity-50`),children:[i&&(0,t.jsx)(`label`,{htmlFor:w,className:o(`pointer-events-none absolute left-0 text-sm font-normal text-black/70 transition-all duration-200`,A?`-top-5 leading-3.5`:`top-1`),children:i}),(0,t.jsxs)(`div`,{className:`flex items-center gap-2`,children:[l,(0,t.jsx)(`input`,{...S,ref:e,id:w,value:a,defaultValue:s,type:p?`password`:f,disabled:_,readOnly:g,placeholder:!i||A?d:``,"aria-invalid":c?!0:void 0,"aria-describedby":c?`${w}-error`:S[`aria-describedby`],onFocus:e=>{E(!0),b?.(e)},onBlur:e=>{E(!1),x?.(e)},onChange:e=>{O(e.target.value.length>0),y?.(e.target.value)},className:`min-w-0 flex-1 border-none bg-transparent p-0 font-sans text-base font-semibold text-primary caret-hipay outline-none read-only:cursor-default disabled:cursor-not-allowed`}),m&&(0,t.jsx)(`span`,{role:`status`,"aria-label":`Loading`,className:`h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-gray-300 border-t-hipay`}),u]})]}),c&&(0,t.jsx)(`p`,{id:`${w}-error`,className:`mt-1 text-xs text-red-500`,children:c})]})}exports.Button=E,exports.Header=r,exports.Input=k,exports.Layout=i,exports.Loader=b,exports.MainInput=A,exports.ToastProvider=_,exports.useToast=m;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":["CheckIcon","ErrorIcon","WarningIcon","InfoIcon","createContext","useContext","CloseIcon","useState","useCallback","useMemo","_Fragment","useId","useRef","useState","useId","useState","react_router_dom","react_jsx_runtime","react","Header","isArrowLeft","handleBack","title","leftIcon","handeClickLeftIcon","Layout","header","footer","r","f","n","o","clsx","success_default","error_default","warning_default","info_default","close_default","VARIANTS","ToastContext","useToast","context","ToastCard","toast","styles","variant","timer","onClose","id","duration","message","nextId","ToastProvider","toasts","setToasts","dismiss","list","value","base","children","TICK_COUNT","sizeMap","Loader","animating","hidesWhenStopped","px","size","tickWidth","tickHeight","className","color","index","baseStyles","variantStyles","sizeStyles","disabledStyles","hoverStyles","Button","isDisabled","disabled","loading","isLightIcon","text","isRightIcon","rightIconColor","rightIcon","digitsOnly","formatAmount","digits","Input","props","generatedId","inputId","inputRef","symbolRef","symbolWidth","setSymbolWidth","focused","setFocused","uncontrolledDigits","setUncontrolledDigits","defaultValue","currency","formatted","showCurrency","icon","editable","handleChange","onChange","event","cursor","digitsBeforeCursor","nextDigits","input","next","seen","pos","inputMode","onFocus","onBlur","label","error","MainInput","hasValue","setHasValue","filled","floating","labelAlwaysOnTop","prefix","isPassword","type","placeholder","isLoading","suffix"],"sources":["../src/assets/arrow-left.svg","../src/components/Header/Header.tsx","../src/components/Layout/Layout.tsx","../node_modules/clsx/dist/clsx.mjs","../src/assets/success.svg","../src/assets/error.svg","../src/assets/warning.svg","../src/assets/info.svg","../src/assets/close.svg","../src/components/Toast/Toast.tsx","../src/assets/right.svg","../src/assets/rightBlack.svg","../src/components/Loader/Loader.tsx","../src/components/Button/Button.tsx","../src/assets/edit.svg","../src/components/Input/Input.tsx","../src/components/Input/MainInput.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.75%2018.26L7.77333%2012.2833C7.0675%2011.5775%207.0675%2010.4225%207.77333%209.71666L13.75%203.73999'%20stroke='%23292D32'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","import { useNavigate } from \"react-router-dom\";\nimport arrowLeft from \"@assets/arrow-left.svg\";\n\ndeclare global {\n  interface Window {\n    ReactNativeWebView?: {\n      postMessage: (message: string) => void;\n    };\n    HPSNative?: {\n      call: (method: string) => Promise<{ idEp: string }>;\n    };\n  }\n}\n\nexport type HeaderProps = {\n  title: string;\n  icon?: string;\n  leftIcon?: string;\n  isArrowLeft?: boolean;\n  onIconClick?: () => void;\n  handeClickLeftIcon?: () => void;\n  handleBack?: () => void;\n};\n\nexport function Header({\n  title,\n  isArrowLeft = true,\n  leftIcon,\n  handeClickLeftIcon,\n  handleBack,\n}: HeaderProps) {\n  const navigate = useNavigate();\n\n  return (\n    <header className=\"sticky top-0 z-10 w-full border-b border-black-10 bg-white\">\n      <div className=\"relative flex h-14 items-center justify-between px-6 sm:h-16\">\n        {isArrowLeft && (\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            aria-label=\"Header action\"\n            className=\"absolute left-3 flex h-9 w-9 items-center justify-center rounded-full transition hover:bg-gray-100 active:bg-gray-200 sm:left-4\"\n          >\n            <img\n              src={arrowLeft}\n              alt=\"\"\n              className=\"pointer-events-none h-6 w-6\"\n              style={{ touchAction: \"none\" }}\n            />\n          </button>\n        )}\n\n        <h1 className=\"absolute left-1/2 max-w-[70%] -translate-x-1/2 truncate text-center text-base font-bold text-black\">\n          {title}\n        </h1>\n\n        {leftIcon && (\n          <button\n            type=\"button\"\n            onClick={handeClickLeftIcon}\n            className=\"absolute right-3 flex h-9 w-9 items-center justify-center sm:right-4\"\n          >\n            <img\n              src={leftIcon}\n              alt=\"\"\n              className=\"pointer-events-none h-6 w-6\"\n              style={{ touchAction: \"none\" }}\n            />\n          </button>\n        )}\n      </div>\n    </header>\n  );\n}\n","import type { ReactNode } from \"react\";\n\nexport type LayoutProps = {\n  header?: ReactNode;\n  footer?: ReactNode;\n  children: ReactNode;\n};\n\nexport function Layout({ header, footer, children }: LayoutProps) {\n  return (\n    <div className=\"flex min-h-dvh flex-col\">\n      {header != null && <header className=\"shrink-0\">{header}</header>}\n\n      <main className=\"flex-1 px-4 pt-4\">{children}</main>\n\n      {footer != null && (\n        <footer className=\"shrink-0 px-4 pt-4 pb-safe\">{footer}</footer>\n      )}\n    </div>\n  );\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%2313F0A9'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M7.75%2012L10.58%2014.83L16.25%209.16998'%20stroke='%2313F0A9'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%208V13'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.9945%2016H12.0035'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%208V13'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.9945%2016H12.0035'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202Z'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%2016V11'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12.0055%208H11.9965'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.33398%203.33331L12.6667%2012.666'%20stroke='black'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M3.33337%2012.666L12.6661%203.33331'%20stroke='black'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport clsx from \"clsx\";\nimport CheckIcon from \"@assets/success.svg\";\nimport ErrorIcon from \"@assets/error.svg\";\nimport WarningIcon from \"@assets/warning.svg\";\nimport InfoIcon from \"@assets/info.svg\";\nimport CloseIcon from \"@assets/close.svg\";\n\nexport type ToastVariant = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport type ToastOptions = {\n  title?: string;\n  message: string;\n  variant?: ToastVariant;\n  duration?: number;\n};\n\ntype ToastItem = Required<ToastOptions> & { id: number };\n\nconst VARIANTS: Record<\n  ToastVariant,\n  { border: string; bar: string; icon: string; title: string }\n> = {\n  success: {\n    border: \"border-primary\",\n    bar: \"bg-hipay\",\n    icon: CheckIcon as string,\n    title: \"Амжилттай\",\n  },\n  error: {\n    border: \"border-hipay\",\n    bar: \"bg-hipay\",\n    icon: ErrorIcon as string,\n    title: \"Алдаа гарлаа\",\n  },\n  warning: {\n    border: \"border-yellow-500\",\n    bar: \"bg-hipay\",\n    icon: WarningIcon,\n    title: \"Анхааруулга\",\n  },\n  info: {\n    border: \"border-blue-500\",\n    bar: \"bg-hipay\",\n    icon: InfoIcon,\n    title: \"Анхааруулга\",\n  },\n};\n\ntype ToastMethod = (message: string, duration?: number) => void;\n\ntype ShowFn = {\n  (options: ToastOptions): void;\n  success: ToastMethod;\n  error: ToastMethod;\n  warning: ToastMethod;\n  info: ToastMethod;\n};\n\ntype ToastContextValue = {\n  show: ShowFn;\n};\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport function useToast() {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error(\"useToast must be used within ToastProvider\");\n  return context;\n}\n\nfunction ToastCard({\n  toast,\n  onClose,\n}: {\n  toast: ToastItem;\n  onClose: (id: number) => void;\n}) {\n  const { id, title, message, variant, duration } = toast;\n  const styles = VARIANTS[variant];\n\n  useEffect(() => {\n    const timer = setTimeout(() => onClose(id), duration);\n    return () => clearTimeout(timer);\n  }, [id, duration, onClose]);\n\n  return (\n    <div\n      onClick={() => onClose(id)}\n      className={clsx(\n        \"pointer-events-auto relative w-96 overflow-hidden rounded-[5px] bg-white text-left shadow-toast\",\n        styles.border,\n      )}\n    >\n      <div className=\"flex items-start justify-between px-4 py-2.5\">\n        <div className=\"flex flex-row items-start gap-2\">\n          <div className=\"mt-1\">\n            <img src={styles.icon as string} alt=\"\" className=\"h-5 w-5\" />\n          </div>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-sans text-sm font-semibold leading-6 text-primary\">\n              {title ?? styles.title}\n            </p>\n            <p className=\"font-sans text-sm font-medium leading-6 text-primary\">\n              {message}\n            </p>\n          </div>\n        </div>\n        <div className=\"mt-1\">\n          <img src={CloseIcon} alt=\"\" className=\"h-4 w-4\" />\n        </div>\n      </div>\n      <div className=\"absolute inset-x-0 bottom-0 h-1 bg-black-10\">\n        <div\n          className={clsx(\"toast-progress h-full w-full\", styles.bar)}\n          style={{ animationDuration: `${duration}ms` }}\n        />\n      </div>\n    </div>\n  );\n}\n\nlet nextId = 0;\n\nexport function ToastProvider({ children }: { children: ReactNode }) {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const dismiss = useCallback((id: number) => {\n    setToasts((list) => list.filter((t) => t.id !== id));\n  }, []);\n\n  const value = useMemo<ToastContextValue>(() => {\n    const base = ({\n      title,\n      message,\n      variant = \"info\",\n      duration = 3000,\n    }: ToastOptions) => {\n      setToasts((list) => [\n        ...list,\n        {\n          id: ++nextId,\n          title: title ?? VARIANTS[variant].title,\n          message,\n          variant,\n          duration,\n        },\n      ]);\n    };\n\n    const show = Object.assign(base, {\n      success: (message: string, duration?: number) =>\n        base({ message, variant: \"success\", duration }),\n      error: (message: string, duration?: number) =>\n        base({ message, variant: \"error\", duration }),\n      warning: (message: string, duration?: number) =>\n        base({ message, variant: \"warning\", duration }),\n      info: (message: string, duration?: number) =>\n        base({ message, variant: \"info\", duration }),\n    });\n\n    return { show };\n  }, []);\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      <div\n        className=\"pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 px-4 right-0 items-center\"\n        style={{ top: \"4.5rem\" }}\n      >\n        {toasts.map((toast) => (\n          <ToastCard key={toast.id} toast={toast} onClose={dismiss} />\n        ))}\n      </div>\n    </ToastContext.Provider>\n  );\n}\n","export default \"data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.9168%2015.8333C10.7519%2015.8327%2010.591%2015.7831%2010.4544%2015.691C10.3177%2015.5988%2010.2115%2015.4682%2010.149%2015.3157C10.0866%2015.1632%2010.0708%2014.9956%2010.1036%2014.8341C10.1364%2014.6726%2010.2164%2014.5244%2010.3334%2014.4083L14.1668%2010.5917C14.2449%2010.5142%2014.3069%2010.422%2014.3492%2010.3205C14.3915%2010.2189%2014.4133%2010.11%2014.4133%2010C14.4133%209.89%2014.3915%209.78108%2014.3492%209.67953C14.3069%209.57798%2014.2449%209.48581%2014.1668%209.40834L10.3334%205.59168C10.2553%205.51421%2010.1933%205.42204%2010.151%205.32049C10.1087%205.21894%2010.0869%205.11002%2010.0869%205.00001C10.0869%204.89%2010.1087%204.78108%2010.151%204.67953C10.1933%204.57798%2010.2553%204.48581%2010.3334%204.40834C10.4896%204.25313%2010.7008%204.16602%2010.9209%204.16602C11.1411%204.16602%2011.3523%204.25313%2011.5084%204.40834L15.3334%208.23334C15.8016%208.70209%2016.0646%209.33751%2016.0646%2010C16.0646%2010.6625%2015.8016%2011.2979%2015.3334%2011.7667L11.5084%2015.5917C11.4306%2015.6689%2011.3382%2015.73%2011.2367%2015.7715C11.1351%2015.813%2011.0264%2015.834%2010.9168%2015.8333Z'%20fill='white'%20fill-opacity='0.6'/%3e%3cpath%20d='M5.08375%2015.8333C4.91894%2015.8327%204.75803%2015.7831%204.62138%2015.691C4.48472%2015.5988%204.37846%2015.4682%204.31602%2015.3157C4.25358%2015.1632%204.23778%2014.9956%204.2706%2014.8341C4.30342%2014.6726%204.38339%2014.5244%204.50041%2014.4083L8.90875%2010L4.50041%205.59168C4.42231%205.51421%204.36031%205.42204%204.318%205.32049C4.2757%205.21894%204.25391%205.11002%204.25391%205.00001C4.25391%204.89%204.2757%204.78108%204.318%204.67953C4.36031%204.57798%204.42231%204.48581%204.50041%204.40834C4.65655%204.25313%204.86776%204.16602%205.08791%204.16602C5.30807%204.16602%205.51928%204.25313%205.67541%204.40834L10.6754%209.40834C10.7535%209.48581%2010.8155%209.57798%2010.8578%209.67953C10.9001%209.78108%2010.9219%209.89%2010.9219%2010C10.9219%2010.11%2010.9001%2010.2189%2010.8578%2010.3205C10.8155%2010.422%2010.7535%2010.5142%2010.6754%2010.5917L5.67541%2015.5917C5.59755%2015.6689%205.5052%2015.73%205.40367%2015.7715C5.30214%2015.813%205.19342%2015.834%205.08375%2015.8333Z'%20fill='white'%20fill-opacity='0.6'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.9168%2015.8333C10.7519%2015.8327%2010.591%2015.7831%2010.4544%2015.691C10.3177%2015.5988%2010.2115%2015.4682%2010.149%2015.3157C10.0866%2015.1632%2010.0708%2014.9956%2010.1036%2014.8341C10.1364%2014.6726%2010.2164%2014.5244%2010.3334%2014.4083L14.1668%2010.5917C14.2449%2010.5142%2014.3069%2010.422%2014.3492%2010.3205C14.3915%2010.2189%2014.4133%2010.11%2014.4133%2010C14.4133%209.89%2014.3915%209.78108%2014.3492%209.67953C14.3069%209.57798%2014.2449%209.48581%2014.1668%209.40834L10.3334%205.59168C10.2553%205.51421%2010.1933%205.42204%2010.151%205.32049C10.1087%205.21894%2010.0869%205.11002%2010.0869%205.00001C10.0869%204.89%2010.1087%204.78108%2010.151%204.67953C10.1933%204.57798%2010.2553%204.48581%2010.3334%204.40834C10.4896%204.25313%2010.7008%204.16602%2010.9209%204.16602C11.1411%204.16602%2011.3523%204.25313%2011.5084%204.40834L15.3334%208.23334C15.8016%208.70209%2016.0646%209.33751%2016.0646%2010C16.0646%2010.6625%2015.8016%2011.2979%2015.3334%2011.7667L11.5084%2015.5917C11.4306%2015.6689%2011.3382%2015.73%2011.2367%2015.7715C11.1351%2015.813%2011.0264%2015.834%2010.9168%2015.8333Z'%20fill='black'%20fill-opacity='0.6'/%3e%3cpath%20d='M5.08375%2015.8333C4.91894%2015.8327%204.75803%2015.7831%204.62138%2015.691C4.48472%2015.5988%204.37846%2015.4682%204.31602%2015.3157C4.25358%2015.1632%204.23778%2014.9956%204.2706%2014.8341C4.30342%2014.6726%204.38339%2014.5244%204.50041%2014.4083L8.90875%2010L4.50041%205.59168C4.42231%205.51421%204.36031%205.42204%204.318%205.32049C4.2757%205.21894%204.25391%205.11002%204.25391%205.00001C4.25391%204.89%204.2757%204.78108%204.318%204.67953C4.36031%204.57798%204.42231%204.48581%204.50041%204.40834C4.65655%204.25313%204.86776%204.16602%205.08791%204.16602C5.30807%204.16602%205.51928%204.25313%205.67541%204.40834L10.6754%209.40834C10.7535%209.48581%2010.8155%209.57798%2010.8578%209.67953C10.9001%209.78108%2010.9219%209.89%2010.9219%2010C10.9219%2010.11%2010.9001%2010.2189%2010.8578%2010.3205C10.8155%2010.422%2010.7535%2010.5142%2010.6754%2010.5917L5.67541%2015.5917C5.59755%2015.6689%205.5052%2015.73%205.40367%2015.7715C5.30214%2015.813%205.19342%2015.834%205.08375%2015.8333Z'%20fill='black'%20fill-opacity='0.6'/%3e%3c/svg%3e\"","import clsx from \"clsx\";\n\nconst TICK_COUNT = 12;\n\nconst sizeMap = {\n  small: 20,\n  large: 36,\n} as const;\n\nexport type LoaderSize = keyof typeof sizeMap;\n\nexport interface LoaderProps {\n  animating?: boolean;\n  color?: string;\n  size?: LoaderSize | number;\n  hidesWhenStopped?: boolean;\n  className?: string;\n}\n\nexport function Loader({\n  animating = true,\n  color = \"#FF3B63\",\n  size = \"small\",\n  hidesWhenStopped = true,\n  className,\n}: LoaderProps) {\n  if (!animating && hidesWhenStopped) return null;\n\n  const px = typeof size === \"number\" ? size : sizeMap[size];\n  const tickWidth = Math.max(2, Math.round(px * 0.09));\n  const tickHeight = Math.round(px * 0.28);\n\n  return (\n    <span\n      role=\"status\"\n      aria-label=\"Loading\"\n      aria-busy={animating || undefined}\n      className={clsx(\"relative inline-block shrink-0\", className)}\n      style={{ width: px, height: px }}\n    >\n      {Array.from({ length: TICK_COUNT }, (_, index) => (\n        <span\n          key={index}\n          className={clsx(\n            \"absolute top-0 left-1/2 rounded-full\",\n            animating && \"loader-tick\",\n          )}\n          style={{\n            width: tickWidth,\n            height: tickHeight,\n            marginLeft: -tickWidth / 2,\n            backgroundColor: color,\n            opacity: animating ? undefined : 0.25,\n            transform: `rotate(${index * (360 / TICK_COUNT)}deg)`,\n            transformOrigin: `center ${px / 2}px`,\n            animationDelay: animating\n              ? `${-(TICK_COUNT - index) / TICK_COUNT}s`\n              : undefined,\n          }}\n        />\n      ))}\n    </span>\n  );\n}\n","import clsx from \"clsx\";\nimport Right from \"@assets/right.svg\";\nimport RightBlack from \"@assets/rightBlack.svg\";\nimport { Loader } from \"@components/Loader/Loader\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"transparent\";\nexport type ButtonSize = \"md\";\n\nexport type ButtonProps = {\n  text: string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  leftIcon?: string;\n  rightIcon?: string;\n  className?: string;\n  isRightIcon?: boolean;\n  rightIconColor?: string;\n};\n\nconst baseStyles =\n  \"relative inline-flex items-center justify-center font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2\";\n\nconst variantStyles: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-white text-black border border-black-70 rounded-2xl focus:ring-primary shadow-glass backdrop-glass w-full\",\n  secondary:\n    \"!bg-secondary text-white rounded-2xl focus:ring-secondary shadow-glass/10 backdrop-glass w-full\",\n  transparent:\n    \"bg-transparent text-primary border border-black-25 rounded-full focus:ring-black-25 w-full\",\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n  md: \"px-4 py-3.5 text-sm\",\n};\n\nconst disabledStyles: Record<ButtonVariant, string> = {\n  primary: \"bg-secondary-gradient rounded-2xl text-white\",\n  secondary: \"bg-secondary-gradient rounded-2xl text-white\",\n  transparent:\n    \"bg-transparent text-primary border border-black-25 rounded-full\",\n};\n\nconst hoverStyles: Record<ButtonVariant, string> = {\n  primary: \"hover:bg-gray-50\",\n  secondary: \"hover:bg-secondary/80\",\n  transparent: \"hover:brightness-95\",\n};\n\nexport function Button({\n  text,\n  variant = \"primary\",\n  size = \"md\",\n  loading = false,\n  disabled = false,\n  onClick,\n  leftIcon,\n  rightIcon,\n  className,\n  isRightIcon = true,\n  rightIconColor = \"white\",\n}: ButtonProps) {\n  const isDisabled = disabled || loading;\n  const isLightIcon =\n    variant === \"secondary\" || (isDisabled && variant !== \"transparent\");\n  const loaderColor =\n    variant === \"transparent\" || (!isDisabled && variant === \"primary\")\n      ? \"#161621\"\n      : \"#ffffff\";\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={isDisabled}\n      aria-disabled={isDisabled}\n      aria-busy={loading || undefined}\n      className={clsx(\n        baseStyles,\n        sizeStyles[size],\n        isDisabled ? disabledStyles[variant] : variantStyles[variant],\n        !isDisabled && hoverStyles[variant],\n        isDisabled && \"cursor-not-allowed\",\n        className,\n      )}\n    >\n      {loading ? (\n        <span className=\"flex w-full items-center justify-center gap-2 text-sm font-medium leading-6\">\n          <Loader size={20} />\n          {text}\n        </span>\n      ) : (\n        <>\n          <span className=\"flex w-full items-center justify-center gap-2 text-sm font-medium leading-6\">\n            {leftIcon && (\n              <img\n                src={leftIcon}\n                alt=\"\"\n                className={clsx(\n                  \"h-4 w-4 shrink-0\",\n                  isLightIcon && \"brightness-0 invert\",\n                )}\n                style={{ touchAction: \"none\", pointerEvents: \"none\" }}\n              />\n            )}\n            {text}\n          </span>\n          {isRightIcon && (\n            <img\n              src={\n                rightIconColor === \"white\"\n                  ? rightIcon || Right\n                  : rightIcon || RightBlack\n              }\n              alt=\"\"\n              className=\"pointer-events-none absolute right-4 top-1/2 -translate-y-1/2\"\n              style={{ touchAction: \"none\" }}\n            />\n          )}\n        </>\n      )}\n    </button>\n  );\n}\n","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.2603%203.59997L5.05034%2012.29C4.74034%2012.62%204.44034%2013.27%204.38034%2013.72L4.01034%2016.96C3.88034%2018.13%204.72034%2018.93%205.88034%2018.73L9.10034%2018.18C9.55034%2018.1%2010.1803%2017.77%2010.4903%2017.43L18.7003%208.73997C20.1203%207.23997%2020.7603%205.52997%2018.5503%203.43997C16.3503%201.36997%2014.6803%202.09997%2013.2603%203.59997Z'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.8896%205.05005C12.3196%207.81005%2014.5596%209.92005%2017.3396%2010.2'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M3%2022H21'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","import {\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport clsx from \"clsx\";\nimport editIcon from \"@assets/edit.svg\";\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label: string;\n  error?: string;\n  editable?: boolean;\n  rightIcon?: ReactNode;\n  currency?: string;\n}\n\nfunction digitsOnly(value: string) {\n  return value.replace(/\\D/g, \"\");\n}\n\nfunction formatAmount(digits: string) {\n  if (!digits) return \"\";\n  return Number(digits).toLocaleString(\"en-US\");\n}\n\nexport function Input({\n  label,\n  error,\n  editable = false,\n  rightIcon,\n  currency,\n  id,\n  className,\n  value,\n  defaultValue,\n  onChange,\n  onFocus,\n  onBlur,\n  inputMode,\n  ...props\n}: InputProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const symbolRef = useRef<HTMLSpanElement>(null);\n  const [symbolWidth, setSymbolWidth] = useState(0);\n  const [focused, setFocused] = useState(false);\n  const [uncontrolledDigits, setUncontrolledDigits] = useState(() =>\n    digitsOnly(defaultValue == null ? \"\" : String(defaultValue)),\n  );\n\n  const digits = currency\n    ? digitsOnly(value == null ? uncontrolledDigits : String(value))\n    : \"\";\n  const formatted = currency ? formatAmount(digits) : \"\";\n  const showCurrency = Boolean(currency && (focused || formatted));\n  const icon =\n    rightIcon ??\n    (editable ? <img src={editIcon} alt=\"\" className=\"h-6 w-6\" /> : null);\n\n  useLayoutEffect(() => {\n    setSymbolWidth(symbolRef.current?.offsetWidth ?? 0);\n  }, [currency]);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (!currency) {\n      onChange?.(event);\n      return;\n    }\n\n    const cursor = event.target.selectionStart ?? event.target.value.length;\n    const digitsBeforeCursor = digitsOnly(\n      event.target.value.slice(0, cursor),\n    ).length;\n    const nextDigits = digitsOnly(event.target.value);\n    if (value == null) setUncontrolledDigits(nextDigits);\n\n    event.target.value = nextDigits;\n    onChange?.(event);\n\n    requestAnimationFrame(() => {\n      const input = inputRef.current;\n      if (!input) return;\n      const next = formatAmount(nextDigits);\n      let seen = 0;\n      let pos = next.length;\n      for (let index = 0; index < next.length; index += 1) {\n        if (/\\d/.test(next[index] ?? \"\")) seen += 1;\n        if (seen >= digitsBeforeCursor) {\n          pos = index + 1;\n          break;\n        }\n      }\n      if (digitsBeforeCursor === 0) pos = 0;\n      input.setSelectionRange(pos, pos);\n    });\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1 pt-3\">\n      <div className=\"relative\">\n        <input\n          {...props}\n          ref={inputRef}\n          id={inputId}\n          placeholder=\" \"\n          inputMode={currency ? \"numeric\" : inputMode}\n          value={currency ? formatted : value}\n          defaultValue={currency ? undefined : defaultValue}\n          onChange={handleChange}\n          onFocus={(event) => {\n            setFocused(true);\n            onFocus?.(event);\n          }}\n          onBlur={(event) => {\n            setFocused(false);\n            onBlur?.(event);\n          }}\n          style={\n            showCurrency ? { paddingLeft: 16 + symbolWidth + 2 } : undefined\n          }\n          className={clsx(\n            \"peer h-16 w-full rounded-xl border border-primary/20 bg-white px-4 text-base font-bold leading-6 text-primary outline-none\",\n            icon && \"pr-14\",\n            className,\n          )}\n        />\n        <span\n          ref={symbolRef}\n          aria-hidden\n          className=\"invisible absolute text-base font-bold leading-6\"\n        >\n          {currency}\n        </span>\n        {showCurrency && (\n          <span className=\"pointer-events-none absolute top-1/2 left-4 z-10 -translate-y-1/2 text-base font-bold leading-6 text-primary\">\n            {currency}\n          </span>\n        )}\n        <label\n          htmlFor={inputId}\n          className=\"pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-sm font-normal leading-4 text-black/50 transition-all peer-not-placeholder-shown:left-3 peer-not-placeholder-shown:top-0 peer-not-placeholder-shown:-translate-y-[70%] peer-not-placeholder-shown:bg-white peer-not-placeholder-shown:px-1.5 peer-not-placeholder-shown:text-xs peer-focus:left-3 peer-focus:top-0 peer-focus:-translate-y-[70%] peer-focus:bg-white peer-focus:px-1.5 peer-focus:text-xs\"\n        >\n          {label}\n        </label>\n        {icon && (\n          <div\n            aria-label=\"Edit\"\n            onClick={() => inputRef.current?.focus()}\n            className=\"absolute right-4 top-1/2 flex -translate-y-1/2 items-center justify-center\"\n          >\n            {icon}\n          </div>\n        )}\n      </div>\n      {error && (\n        <p className=\"text-sm font-normal leading-6 text-hipay font-sans ml-1\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n","import {\n  useId,\n  useState,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport clsx from \"clsx\";\n\ntype NativeInputProps = InputHTMLAttributes<HTMLInputElement>;\n\ntype InputPropsWithoutOverrides = {\n  [Key in keyof NativeInputProps as Key extends \"onChange\" | \"prefix\"\n    ? never\n    : Key]: NativeInputProps[Key];\n};\n\nexport interface MainInputProps extends InputPropsWithoutOverrides {\n  ref?: Ref<HTMLInputElement>;\n  label?: string;\n  error?: string;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  isPassword?: boolean;\n  isLoading?: boolean;\n  labelAlwaysOnTop?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport function MainInput({\n  ref,\n  id,\n  label,\n  value,\n  defaultValue,\n  error,\n  prefix,\n  suffix,\n  placeholder,\n  type = \"text\",\n  isPassword = false,\n  isLoading = false,\n  labelAlwaysOnTop = false,\n  readOnly,\n  disabled,\n  className,\n  onChange,\n  onFocus,\n  onBlur,\n  ...props\n}: MainInputProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const [focused, setFocused] = useState(false);\n  const [hasValue, setHasValue] = useState(\n    () => String(defaultValue ?? \"\").length > 0,\n  );\n\n  const filled = value !== undefined ? String(value).length > 0 : hasValue;\n\n  const floating = labelAlwaysOnTop || focused || filled;\n\n  return (\n    <div className={clsx(\"w-full pt-5\", className)}>\n      <div\n        className={clsx(\n          \"relative border-b py-1\",\n          error\n            ? \"border-red-500\"\n            : focused\n              ? \"border-hipay\"\n              : \"border-blackOpa20\",\n          disabled && \"opacity-50\",\n        )}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={clsx(\n              \"pointer-events-none absolute left-0 text-sm font-normal text-black/70 transition-all duration-200\",\n              floating ? \"-top-5 leading-3.5\" : \"top-1\",\n            )}\n          >\n            {label}\n          </label>\n        )}\n\n        <div className=\"flex items-center gap-2\">\n          {prefix}\n\n          <input\n            {...props}\n            ref={ref}\n            id={inputId}\n            value={value}\n            defaultValue={defaultValue}\n            type={isPassword ? \"password\" : type}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={!label || floating ? placeholder : \"\"}\n            aria-invalid={error ? true : undefined}\n            aria-describedby={\n              error ? `${inputId}-error` : props[\"aria-describedby\"]\n            }\n            onFocus={(event) => {\n              setFocused(true);\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              setFocused(false);\n              onBlur?.(event);\n            }}\n            onChange={(event) => {\n              setHasValue(event.target.value.length > 0);\n              onChange?.(event.target.value);\n            }}\n            className=\"min-w-0 flex-1 border-none bg-transparent p-0 font-sans text-base font-semibold text-primary caret-hipay outline-none read-only:cursor-default disabled:cursor-not-allowed\"\n          />\n\n          {isLoading && (\n            <span\n              role=\"status\"\n              aria-label=\"Loading\"\n              className=\"h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-gray-300 border-t-hipay\"\n            />\n          )}\n\n          {suffix}\n        </div>\n      </div>\n\n      {error && (\n        <p id={`${inputId}-error`} className=\"mt-1 text-xs text-red-500\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"ignoreList":[3],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,135 @@
+import { InputHTMLAttributes } from 'react';
+import { JSX } from 'react';
+import { ReactNode } from 'react';
+import { Ref } from 'react';
+
+export declare function Button({ text, variant, size, loading, disabled, onClick, leftIcon, rightIcon, className, isRightIcon, rightIconColor, }: ButtonProps): JSX.Element;
+
+export declare type ButtonProps = {
+    text: string;
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    loading?: boolean;
+    disabled?: boolean;
+    onClick?: () => void;
+    leftIcon?: string;
+    rightIcon?: string;
+    className?: string;
+    isRightIcon?: boolean;
+    rightIconColor?: string;
+};
+
+declare type ButtonSize = "md";
+
+declare type ButtonVariant = "primary" | "secondary" | "transparent";
+
+export declare function Header({ title, isArrowLeft, leftIcon, handeClickLeftIcon, handleBack, }: HeaderProps): JSX.Element;
+
+export declare type HeaderProps = {
+    title: string;
+    icon?: string;
+    leftIcon?: string;
+    isArrowLeft?: boolean;
+    onIconClick?: () => void;
+    handeClickLeftIcon?: () => void;
+    handleBack?: () => void;
+};
+
+export declare function Input({ label, error, editable, rightIcon, currency, id, className, value, defaultValue, onChange, onFocus, onBlur, inputMode, ...props }: InputProps): JSX.Element;
+
+export declare interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    error?: string;
+    editable?: boolean;
+    rightIcon?: ReactNode;
+    currency?: string;
+}
+
+declare type InputPropsWithoutOverrides = {
+    [Key in keyof NativeInputProps as Key extends "onChange" | "prefix" ? never : Key]: NativeInputProps[Key];
+};
+
+export declare function Layout({ header, footer, children }: LayoutProps): JSX.Element;
+
+export declare type LayoutProps = {
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+};
+
+export declare function Loader({ animating, color, size, hidesWhenStopped, className, }: LoaderProps): JSX.Element | null;
+
+export declare interface LoaderProps {
+    animating?: boolean;
+    color?: string;
+    size?: LoaderSize | number;
+    hidesWhenStopped?: boolean;
+    className?: string;
+}
+
+export declare type LoaderSize = keyof typeof sizeMap;
+
+export declare function MainInput({ ref, id, label, value, defaultValue, error, prefix, suffix, placeholder, type, isPassword, isLoading, labelAlwaysOnTop, readOnly, disabled, className, onChange, onFocus, onBlur, ...props }: MainInputProps): JSX.Element;
+
+export declare interface MainInputProps extends InputPropsWithoutOverrides {
+    ref?: Ref<HTMLInputElement>;
+    label?: string;
+    error?: string;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+    isPassword?: boolean;
+    isLoading?: boolean;
+    labelAlwaysOnTop?: boolean;
+    onChange?: (value: string) => void;
+}
+
+declare type NativeInputProps = InputHTMLAttributes<HTMLInputElement>;
+
+declare type ShowFn = {
+    (options: ToastOptions): void;
+    success: ToastMethod;
+    error: ToastMethod;
+    warning: ToastMethod;
+    info: ToastMethod;
+};
+
+declare const sizeMap: {
+    readonly small: 20;
+    readonly large: 36;
+};
+
+declare type ToastContextValue = {
+    show: ShowFn;
+};
+
+declare type ToastMethod = (message: string, duration?: number) => void;
+
+declare type ToastOptions = {
+    title?: string;
+    message: string;
+    variant?: ToastVariant;
+    duration?: number;
+};
+
+export declare function ToastProvider({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+
+export declare type ToastVariant = "success" | "error" | "warning" | "info";
+
+export declare function useToast(): ToastContextValue;
+
+export { }
+
+declare global {
+    interface Window {
+        ReactNativeWebView?: {
+            postMessage: (message: string) => void;
+        };
+        HPSNative?: {
+            call: (method: string) => Promise<{
+                idEp: string;
+            }>;
+        };
+    }
+}

package/dist/index.js

@@ -0,0 +1,434 @@
+import { useNavigate as e } from "react-router-dom";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+import { createContext as i, useCallback as a, useContext as o, useEffect as s, useId as c, useLayoutEffect as l, useMemo as u, useRef as d, useState as f } from "react";
+//#endregion
+//#region src/components/Header/Header.tsx
+function p({ title: t, isArrowLeft: i = !0, leftIcon: a, handeClickLeftIcon: o, handleBack: s }) {
+	return e(), /* @__PURE__ */ n("header", {
+		className: "sticky top-0 z-10 w-full border-b border-black-10 bg-white",
+		children: /* @__PURE__ */ r("div", {
+			className: "relative flex h-14 items-center justify-between px-6 sm:h-16",
+			children: [
+				i && /* @__PURE__ */ n("button", {
+					type: "button",
+					onClick: s,
+					"aria-label": "Header action",
+					className: "absolute left-3 flex h-9 w-9 items-center justify-center rounded-full transition hover:bg-gray-100 active:bg-gray-200 sm:left-4",
+					children: /* @__PURE__ */ n("img", {
+						src: "data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.75%2018.26L7.77333%2012.2833C7.0675%2011.5775%207.0675%2010.4225%207.77333%209.71666L13.75%203.73999'%20stroke='%23292D32'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e",
+						alt: "",
+						className: "pointer-events-none h-6 w-6",
+						style: { touchAction: "none" }
+					})
+				}),
+				/* @__PURE__ */ n("h1", {
+					className: "absolute left-1/2 max-w-[70%] -translate-x-1/2 truncate text-center text-base font-bold text-black",
+					children: t
+				}),
+				a && /* @__PURE__ */ n("button", {
+					type: "button",
+					onClick: o,
+					className: "absolute right-3 flex h-9 w-9 items-center justify-center sm:right-4",
+					children: /* @__PURE__ */ n("img", {
+						src: a,
+						alt: "",
+						className: "pointer-events-none h-6 w-6",
+						style: { touchAction: "none" }
+					})
+				})
+			]
+		})
+	});
+}
+//#endregion
+//#region src/components/Layout/Layout.tsx
+function m({ header: e, footer: t, children: i }) {
+	return /* @__PURE__ */ r("div", {
+		className: "flex min-h-dvh flex-col",
+		children: [
+			e != null && /* @__PURE__ */ n("header", {
+				className: "shrink-0",
+				children: e
+			}),
+			/* @__PURE__ */ n("main", {
+				className: "flex-1 px-4 pt-4",
+				children: i
+			}),
+			t != null && /* @__PURE__ */ n("footer", {
+				className: "shrink-0 px-4 pt-4 pb-safe",
+				children: t
+			})
+		]
+	});
+}
+//#endregion
+//#region node_modules/clsx/dist/clsx.mjs
+function h(e) {
+	var t, n, r = "";
+	if (typeof e == "string" || typeof e == "number") r += e;
+	else if (typeof e == "object") {
+		if (Array.isArray(e)) {
+			var i = e.length;
+			for (t = 0; t < i; t++) e[t] && (n = h(e[t])) && (r && (r += " "), r += n);
+		} else for (n in e) e[n] && (r && (r += " "), r += n);
+	}
+	return r;
+}
+function g() {
+	for (var e, t, n = 0, r = "", i = arguments.length; n < i; n++) (e = arguments[n]) && (t = h(e)) && (r && (r += " "), r += t);
+	return r;
+}
+//#endregion
+//#region src/assets/success.svg
+var _ = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%2313F0A9'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M7.75%2012L10.58%2014.83L16.25%209.16998'%20stroke='%2313F0A9'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", v = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%208V13'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.9945%2016H12.0035'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", y = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%208V13'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.9945%2016H12.0035'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", b = "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202Z'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%2016V11'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12.0055%208H11.9965'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", x = "data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.33398%203.33331L12.6667%2012.666'%20stroke='black'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M3.33337%2012.666L12.6661%203.33331'%20stroke='black'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e", S = {
+	success: {
+		border: "border-primary",
+		bar: "bg-hipay",
+		icon: _,
+		title: "Амжилттай"
+	},
+	error: {
+		border: "border-hipay",
+		bar: "bg-hipay",
+		icon: v,
+		title: "Алдаа гарлаа"
+	},
+	warning: {
+		border: "border-yellow-500",
+		bar: "bg-hipay",
+		icon: y,
+		title: "Анхааруулга"
+	},
+	info: {
+		border: "border-blue-500",
+		bar: "bg-hipay",
+		icon: b,
+		title: "Анхааруулга"
+	}
+}, C = i(null);
+function w() {
+	let e = o(C);
+	if (!e) throw Error("useToast must be used within ToastProvider");
+	return e;
+}
+function T({ toast: e, onClose: t }) {
+	let { id: i, title: a, message: o, variant: c, duration: l } = e, u = S[c];
+	return s(() => {
+		let e = setTimeout(() => t(i), l);
+		return () => clearTimeout(e);
+	}, [
+		i,
+		l,
+		t
+	]), /* @__PURE__ */ r("div", {
+		onClick: () => t(i),
+		className: g("pointer-events-auto relative w-96 overflow-hidden rounded-[5px] bg-white text-left shadow-toast", u.border),
+		children: [/* @__PURE__ */ r("div", {
+			className: "flex items-start justify-between px-4 py-2.5",
+			children: [/* @__PURE__ */ r("div", {
+				className: "flex flex-row items-start gap-2",
+				children: [/* @__PURE__ */ n("div", {
+					className: "mt-1",
+					children: /* @__PURE__ */ n("img", {
+						src: u.icon,
+						alt: "",
+						className: "h-5 w-5"
+					})
+				}), /* @__PURE__ */ r("div", {
+					className: "flex flex-col gap-1",
+					children: [/* @__PURE__ */ n("p", {
+						className: "font-sans text-sm font-semibold leading-6 text-primary",
+						children: a ?? u.title
+					}), /* @__PURE__ */ n("p", {
+						className: "font-sans text-sm font-medium leading-6 text-primary",
+						children: o
+					})]
+				})]
+			}), /* @__PURE__ */ n("div", {
+				className: "mt-1",
+				children: /* @__PURE__ */ n("img", {
+					src: x,
+					alt: "",
+					className: "h-4 w-4"
+				})
+			})]
+		}), /* @__PURE__ */ n("div", {
+			className: "absolute inset-x-0 bottom-0 h-1 bg-black-10",
+			children: /* @__PURE__ */ n("div", {
+				className: g("toast-progress h-full w-full", u.bar),
+				style: { animationDuration: `${l}ms` }
+			})
+		})]
+	});
+}
+var E = 0;
+function D({ children: e }) {
+	let [t, i] = f([]), o = a((e) => {
+		i((t) => t.filter((t) => t.id !== e));
+	}, []), s = u(() => {
+		let e = ({ title: e, message: t, variant: n = "info", duration: r = 3e3 }) => {
+			i((i) => [...i, {
+				id: ++E,
+				title: e ?? S[n].title,
+				message: t,
+				variant: n,
+				duration: r
+			}]);
+		};
+		return { show: Object.assign(e, {
+			success: (t, n) => e({
+				message: t,
+				variant: "success",
+				duration: n
+			}),
+			error: (t, n) => e({
+				message: t,
+				variant: "error",
+				duration: n
+			}),
+			warning: (t, n) => e({
+				message: t,
+				variant: "warning",
+				duration: n
+			}),
+			info: (t, n) => e({
+				message: t,
+				variant: "info",
+				duration: n
+			})
+		}) };
+	}, []);
+	return /* @__PURE__ */ r(C.Provider, {
+		value: s,
+		children: [e, /* @__PURE__ */ n("div", {
+			className: "pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 px-4 right-0 items-center",
+			style: { top: "4.5rem" },
+			children: t.map((e) => /* @__PURE__ */ n(T, {
+				toast: e,
+				onClose: o
+			}, e.id))
+		})]
+	});
+}
+//#endregion
+//#region src/components/Loader/Loader.tsx
+var O = 12, k = {
+	small: 20,
+	large: 36
+};
+function A({ animating: e = !0, color: t = "#FF3B63", size: r = "small", hidesWhenStopped: i = !0, className: a }) {
+	if (!e && i) return null;
+	let o = typeof r == "number" ? r : k[r], s = Math.max(2, Math.round(o * .09)), c = Math.round(o * .28);
+	return /* @__PURE__ */ n("span", {
+		role: "status",
+		"aria-label": "Loading",
+		"aria-busy": e || void 0,
+		className: g("relative inline-block shrink-0", a),
+		style: {
+			width: o,
+			height: o
+		},
+		children: Array.from({ length: O }, (r, i) => /* @__PURE__ */ n("span", {
+			className: g("absolute top-0 left-1/2 rounded-full", e && "loader-tick"),
+			style: {
+				width: s,
+				height: c,
+				marginLeft: -s / 2,
+				backgroundColor: t,
+				opacity: e ? void 0 : .25,
+				transform: `rotate(${360 / O * i}deg)`,
+				transformOrigin: `center ${o / 2}px`,
+				animationDelay: e ? `${-(O - i) / O}s` : void 0
+			}
+		}, i))
+	});
+}
+//#endregion
+//#region src/components/Button/Button.tsx
+var j = "relative inline-flex items-center justify-center font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2", M = {
+	primary: "bg-white text-black border border-black-70 rounded-2xl focus:ring-primary shadow-glass backdrop-glass w-full",
+	secondary: "!bg-secondary text-white rounded-2xl focus:ring-secondary shadow-glass/10 backdrop-glass w-full",
+	transparent: "bg-transparent text-primary border border-black-25 rounded-full focus:ring-black-25 w-full"
+}, N = { md: "px-4 py-3.5 text-sm" }, P = {
+	primary: "bg-secondary-gradient rounded-2xl text-white",
+	secondary: "bg-secondary-gradient rounded-2xl text-white",
+	transparent: "bg-transparent text-primary border border-black-25 rounded-full"
+}, F = {
+	primary: "hover:bg-gray-50",
+	secondary: "hover:bg-secondary/80",
+	transparent: "hover:brightness-95"
+};
+function I({ text: e, variant: i = "primary", size: a = "md", loading: o = !1, disabled: s = !1, onClick: c, leftIcon: l, rightIcon: u, className: d, isRightIcon: f = !0, rightIconColor: p = "white" }) {
+	let m = s || o, h = i === "secondary" || m && i !== "transparent";
+	return /* @__PURE__ */ n("button", {
+		type: "button",
+		onClick: c,
+		disabled: m,
+		"aria-disabled": m,
+		"aria-busy": o || void 0,
+		className: g(j, N[a], m ? P[i] : M[i], !m && F[i], m && "cursor-not-allowed", d),
+		children: o ? /* @__PURE__ */ r("span", {
+			className: "flex w-full items-center justify-center gap-2 text-sm font-medium leading-6",
+			children: [/* @__PURE__ */ n(A, { size: 20 }), e]
+		}) : /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ r("span", {
+			className: "flex w-full items-center justify-center gap-2 text-sm font-medium leading-6",
+			children: [l && /* @__PURE__ */ n("img", {
+				src: l,
+				alt: "",
+				className: g("h-4 w-4 shrink-0", h && "brightness-0 invert"),
+				style: {
+					touchAction: "none",
+					pointerEvents: "none"
+				}
+			}), e]
+		}), f && /* @__PURE__ */ n("img", {
+			src: p === "white" ? u || "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.9168%2015.8333C10.7519%2015.8327%2010.591%2015.7831%2010.4544%2015.691C10.3177%2015.5988%2010.2115%2015.4682%2010.149%2015.3157C10.0866%2015.1632%2010.0708%2014.9956%2010.1036%2014.8341C10.1364%2014.6726%2010.2164%2014.5244%2010.3334%2014.4083L14.1668%2010.5917C14.2449%2010.5142%2014.3069%2010.422%2014.3492%2010.3205C14.3915%2010.2189%2014.4133%2010.11%2014.4133%2010C14.4133%209.89%2014.3915%209.78108%2014.3492%209.67953C14.3069%209.57798%2014.2449%209.48581%2014.1668%209.40834L10.3334%205.59168C10.2553%205.51421%2010.1933%205.42204%2010.151%205.32049C10.1087%205.21894%2010.0869%205.11002%2010.0869%205.00001C10.0869%204.89%2010.1087%204.78108%2010.151%204.67953C10.1933%204.57798%2010.2553%204.48581%2010.3334%204.40834C10.4896%204.25313%2010.7008%204.16602%2010.9209%204.16602C11.1411%204.16602%2011.3523%204.25313%2011.5084%204.40834L15.3334%208.23334C15.8016%208.70209%2016.0646%209.33751%2016.0646%2010C16.0646%2010.6625%2015.8016%2011.2979%2015.3334%2011.7667L11.5084%2015.5917C11.4306%2015.6689%2011.3382%2015.73%2011.2367%2015.7715C11.1351%2015.813%2011.0264%2015.834%2010.9168%2015.8333Z'%20fill='white'%20fill-opacity='0.6'/%3e%3cpath%20d='M5.08375%2015.8333C4.91894%2015.8327%204.75803%2015.7831%204.62138%2015.691C4.48472%2015.5988%204.37846%2015.4682%204.31602%2015.3157C4.25358%2015.1632%204.23778%2014.9956%204.2706%2014.8341C4.30342%2014.6726%204.38339%2014.5244%204.50041%2014.4083L8.90875%2010L4.50041%205.59168C4.42231%205.51421%204.36031%205.42204%204.318%205.32049C4.2757%205.21894%204.25391%205.11002%204.25391%205.00001C4.25391%204.89%204.2757%204.78108%204.318%204.67953C4.36031%204.57798%204.42231%204.48581%204.50041%204.40834C4.65655%204.25313%204.86776%204.16602%205.08791%204.16602C5.30807%204.16602%205.51928%204.25313%205.67541%204.40834L10.6754%209.40834C10.7535%209.48581%2010.8155%209.57798%2010.8578%209.67953C10.9001%209.78108%2010.9219%209.89%2010.9219%2010C10.9219%2010.11%2010.9001%2010.2189%2010.8578%2010.3205C10.8155%2010.422%2010.7535%2010.5142%2010.6754%2010.5917L5.67541%2015.5917C5.59755%2015.6689%205.5052%2015.73%205.40367%2015.7715C5.30214%2015.813%205.19342%2015.834%205.08375%2015.8333Z'%20fill='white'%20fill-opacity='0.6'/%3e%3c/svg%3e" : u || "data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.9168%2015.8333C10.7519%2015.8327%2010.591%2015.7831%2010.4544%2015.691C10.3177%2015.5988%2010.2115%2015.4682%2010.149%2015.3157C10.0866%2015.1632%2010.0708%2014.9956%2010.1036%2014.8341C10.1364%2014.6726%2010.2164%2014.5244%2010.3334%2014.4083L14.1668%2010.5917C14.2449%2010.5142%2014.3069%2010.422%2014.3492%2010.3205C14.3915%2010.2189%2014.4133%2010.11%2014.4133%2010C14.4133%209.89%2014.3915%209.78108%2014.3492%209.67953C14.3069%209.57798%2014.2449%209.48581%2014.1668%209.40834L10.3334%205.59168C10.2553%205.51421%2010.1933%205.42204%2010.151%205.32049C10.1087%205.21894%2010.0869%205.11002%2010.0869%205.00001C10.0869%204.89%2010.1087%204.78108%2010.151%204.67953C10.1933%204.57798%2010.2553%204.48581%2010.3334%204.40834C10.4896%204.25313%2010.7008%204.16602%2010.9209%204.16602C11.1411%204.16602%2011.3523%204.25313%2011.5084%204.40834L15.3334%208.23334C15.8016%208.70209%2016.0646%209.33751%2016.0646%2010C16.0646%2010.6625%2015.8016%2011.2979%2015.3334%2011.7667L11.5084%2015.5917C11.4306%2015.6689%2011.3382%2015.73%2011.2367%2015.7715C11.1351%2015.813%2011.0264%2015.834%2010.9168%2015.8333Z'%20fill='black'%20fill-opacity='0.6'/%3e%3cpath%20d='M5.08375%2015.8333C4.91894%2015.8327%204.75803%2015.7831%204.62138%2015.691C4.48472%2015.5988%204.37846%2015.4682%204.31602%2015.3157C4.25358%2015.1632%204.23778%2014.9956%204.2706%2014.8341C4.30342%2014.6726%204.38339%2014.5244%204.50041%2014.4083L8.90875%2010L4.50041%205.59168C4.42231%205.51421%204.36031%205.42204%204.318%205.32049C4.2757%205.21894%204.25391%205.11002%204.25391%205.00001C4.25391%204.89%204.2757%204.78108%204.318%204.67953C4.36031%204.57798%204.42231%204.48581%204.50041%204.40834C4.65655%204.25313%204.86776%204.16602%205.08791%204.16602C5.30807%204.16602%205.51928%204.25313%205.67541%204.40834L10.6754%209.40834C10.7535%209.48581%2010.8155%209.57798%2010.8578%209.67953C10.9001%209.78108%2010.9219%209.89%2010.9219%2010C10.9219%2010.11%2010.9001%2010.2189%2010.8578%2010.3205C10.8155%2010.422%2010.7535%2010.5142%2010.6754%2010.5917L5.67541%2015.5917C5.59755%2015.6689%205.5052%2015.73%205.40367%2015.7715C5.30214%2015.813%205.19342%2015.834%205.08375%2015.8333Z'%20fill='black'%20fill-opacity='0.6'/%3e%3c/svg%3e",
+			alt: "",
+			className: "pointer-events-none absolute right-4 top-1/2 -translate-y-1/2",
+			style: { touchAction: "none" }
+		})] })
+	});
+}
+//#endregion
+//#region src/components/Input/Input.tsx
+function L(e) {
+	return e.replace(/\D/g, "");
+}
+function R(e) {
+	return e ? Number(e).toLocaleString("en-US") : "";
+}
+function z({ label: e, error: t, editable: i = !1, rightIcon: a, currency: o, id: s, className: u, value: p, defaultValue: m, onChange: h, onFocus: _, onBlur: v, inputMode: y, ...b }) {
+	let x = c(), S = s ?? x, C = d(null), w = d(null), [T, E] = f(0), [D, O] = f(!1), [k, A] = f(() => L(m == null ? "" : String(m))), j = o ? L(p == null ? k : String(p)) : "", M = o ? R(j) : "", N = !!(o && (D || M)), P = a ?? (i ? /* @__PURE__ */ n("img", {
+		src: "data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.2603%203.59997L5.05034%2012.29C4.74034%2012.62%204.44034%2013.27%204.38034%2013.72L4.01034%2016.96C3.88034%2018.13%204.72034%2018.93%205.88034%2018.73L9.10034%2018.18C9.55034%2018.1%2010.1803%2017.77%2010.4903%2017.43L18.7003%208.73997C20.1203%207.23997%2020.7603%205.52997%2018.5503%203.43997C16.3503%201.36997%2014.6803%202.09997%2013.2603%203.59997Z'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.8896%205.05005C12.3196%207.81005%2014.5596%209.92005%2017.3396%2010.2'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M3%2022H21'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e",
+		alt: "",
+		className: "h-6 w-6"
+	}) : null);
+	l(() => {
+		E(w.current?.offsetWidth ?? 0);
+	}, [o]);
+	function F(e) {
+		if (!o) {
+			h?.(e);
+			return;
+		}
+		let t = e.target.selectionStart ?? e.target.value.length, n = L(e.target.value.slice(0, t)).length, r = L(e.target.value);
+		p ?? A(r), e.target.value = r, h?.(e), requestAnimationFrame(() => {
+			let e = C.current;
+			if (!e) return;
+			let t = R(r), i = 0, a = t.length;
+			for (let e = 0; e < t.length; e += 1) if (/\d/.test(t[e] ?? "") && (i += 1), i >= n) {
+				a = e + 1;
+				break;
+			}
+			n === 0 && (a = 0), e.setSelectionRange(a, a);
+		});
+	}
+	return /* @__PURE__ */ r("div", {
+		className: "flex flex-col gap-1 pt-3",
+		children: [/* @__PURE__ */ r("div", {
+			className: "relative",
+			children: [
+				/* @__PURE__ */ n("input", {
+					...b,
+					ref: C,
+					id: S,
+					placeholder: " ",
+					inputMode: o ? "numeric" : y,
+					value: o ? M : p,
+					defaultValue: o ? void 0 : m,
+					onChange: F,
+					onFocus: (e) => {
+						O(!0), _?.(e);
+					},
+					onBlur: (e) => {
+						O(!1), v?.(e);
+					},
+					style: N ? { paddingLeft: 16 + T + 2 } : void 0,
+					className: g("peer h-16 w-full rounded-xl border border-primary/20 bg-white px-4 text-base font-bold leading-6 text-primary outline-none", P && "pr-14", u)
+				}),
+				/* @__PURE__ */ n("span", {
+					ref: w,
+					"aria-hidden": !0,
+					className: "invisible absolute text-base font-bold leading-6",
+					children: o
+				}),
+				N && /* @__PURE__ */ n("span", {
+					className: "pointer-events-none absolute top-1/2 left-4 z-10 -translate-y-1/2 text-base font-bold leading-6 text-primary",
+					children: o
+				}),
+				/* @__PURE__ */ n("label", {
+					htmlFor: S,
+					className: "pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-sm font-normal leading-4 text-black/50 transition-all peer-not-placeholder-shown:left-3 peer-not-placeholder-shown:top-0 peer-not-placeholder-shown:-translate-y-[70%] peer-not-placeholder-shown:bg-white peer-not-placeholder-shown:px-1.5 peer-not-placeholder-shown:text-xs peer-focus:left-3 peer-focus:top-0 peer-focus:-translate-y-[70%] peer-focus:bg-white peer-focus:px-1.5 peer-focus:text-xs",
+					children: e
+				}),
+				P && /* @__PURE__ */ n("div", {
+					"aria-label": "Edit",
+					onClick: () => C.current?.focus(),
+					className: "absolute right-4 top-1/2 flex -translate-y-1/2 items-center justify-center",
+					children: P
+				})
+			]
+		}), t && /* @__PURE__ */ n("p", {
+			className: "text-sm font-normal leading-6 text-hipay font-sans ml-1",
+			children: t
+		})]
+	});
+}
+//#endregion
+//#region src/components/Input/MainInput.tsx
+function B({ ref: e, id: t, label: i, value: a, defaultValue: o, error: s, prefix: l, suffix: u, placeholder: d, type: p = "text", isPassword: m = !1, isLoading: h = !1, labelAlwaysOnTop: _ = !1, readOnly: v, disabled: y, className: b, onChange: x, onFocus: S, onBlur: C, ...w }) {
+	let T = c(), E = t ?? T, [D, O] = f(!1), [k, A] = f(() => String(o ?? "").length > 0), j = a === void 0 ? k : String(a).length > 0, M = _ || D || j;
+	return /* @__PURE__ */ r("div", {
+		className: g("w-full pt-5", b),
+		children: [/* @__PURE__ */ r("div", {
+			className: g("relative border-b py-1", s ? "border-red-500" : D ? "border-hipay" : "border-blackOpa20", y && "opacity-50"),
+			children: [i && /* @__PURE__ */ n("label", {
+				htmlFor: E,
+				className: g("pointer-events-none absolute left-0 text-sm font-normal text-black/70 transition-all duration-200", M ? "-top-5 leading-3.5" : "top-1"),
+				children: i
+			}), /* @__PURE__ */ r("div", {
+				className: "flex items-center gap-2",
+				children: [
+					l,
+					/* @__PURE__ */ n("input", {
+						...w,
+						ref: e,
+						id: E,
+						value: a,
+						defaultValue: o,
+						type: m ? "password" : p,
+						disabled: y,
+						readOnly: v,
+						placeholder: !i || M ? d : "",
+						"aria-invalid": s ? !0 : void 0,
+						"aria-describedby": s ? `${E}-error` : w["aria-describedby"],
+						onFocus: (e) => {
+							O(!0), S?.(e);
+						},
+						onBlur: (e) => {
+							O(!1), C?.(e);
+						},
+						onChange: (e) => {
+							A(e.target.value.length > 0), x?.(e.target.value);
+						},
+						className: "min-w-0 flex-1 border-none bg-transparent p-0 font-sans text-base font-semibold text-primary caret-hipay outline-none read-only:cursor-default disabled:cursor-not-allowed"
+					}),
+					h && /* @__PURE__ */ n("span", {
+						role: "status",
+						"aria-label": "Loading",
+						className: "h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-gray-300 border-t-hipay"
+					}),
+					u
+				]
+			})]
+		}), s && /* @__PURE__ */ n("p", {
+			id: `${E}-error`,
+			className: "mt-1 text-xs text-red-500",
+			children: s
+		})]
+	});
+}
+//#endregion
+export { I as Button, p as Header, z as Input, m as Layout, A as Loader, B as MainInput, D as ToastProvider, w as useToast };
+
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["CheckIcon","ErrorIcon","WarningIcon","InfoIcon","CloseIcon","_Fragment","Header","useNavigate","isArrowLeft","handleBack","title","leftIcon","handeClickLeftIcon","Layout","header","footer","r","f","n","o","clsx","success_default","error_default","warning_default","info_default","close_default","VARIANTS","ToastContext","createContext","useToast","context","useContext","ToastCard","toast","styles","variant","useEffect","timer","onClose","id","duration","message","nextId","ToastProvider","toasts","setToasts","useState","dismiss","useCallback","list","value","useMemo","base","children","TICK_COUNT","sizeMap","Loader","animating","hidesWhenStopped","px","size","tickWidth","tickHeight","className","color","index","baseStyles","variantStyles","sizeStyles","disabledStyles","hoverStyles","Button","isDisabled","disabled","loading","isLightIcon","text","Fragment","isRightIcon","rightIconColor","rightIcon","digitsOnly","formatAmount","digits","Input","props","generatedId","useId","inputId","inputRef","useRef","symbolRef","symbolWidth","setSymbolWidth","focused","setFocused","uncontrolledDigits","setUncontrolledDigits","defaultValue","currency","formatted","showCurrency","icon","editable","handleChange","event","cursor","digitsBeforeCursor","nextDigits","onChange","input","next","seen","pos","inputMode","onFocus","onBlur","label","error","MainInput","hasValue","setHasValue","filled","floating","labelAlwaysOnTop","prefix","isPassword","type","placeholder","isLoading","suffix"],"sources":["../src/assets/arrow-left.svg","../src/components/Header/Header.tsx","../src/components/Layout/Layout.tsx","../node_modules/clsx/dist/clsx.mjs","../src/assets/success.svg","../src/assets/error.svg","../src/assets/warning.svg","../src/assets/info.svg","../src/assets/close.svg","../src/components/Toast/Toast.tsx","../src/assets/right.svg","../src/assets/rightBlack.svg","../src/components/Loader/Loader.tsx","../src/components/Button/Button.tsx","../src/assets/edit.svg","../src/components/Input/Input.tsx","../src/components/Input/MainInput.tsx"],"sourcesContent":["export default \"data:image/svg+xml,%3csvg%20width='22'%20height='22'%20viewBox='0%200%2022%2022'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.75%2018.26L7.77333%2012.2833C7.0675%2011.5775%207.0675%2010.4225%207.77333%209.71666L13.75%203.73999'%20stroke='%23292D32'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","import { useNavigate } from \"react-router-dom\";\nimport arrowLeft from \"@assets/arrow-left.svg\";\n\ndeclare global {\n  interface Window {\n    ReactNativeWebView?: {\n      postMessage: (message: string) => void;\n    };\n    HPSNative?: {\n      call: (method: string) => Promise<{ idEp: string }>;\n    };\n  }\n}\n\nexport type HeaderProps = {\n  title: string;\n  icon?: string;\n  leftIcon?: string;\n  isArrowLeft?: boolean;\n  onIconClick?: () => void;\n  handeClickLeftIcon?: () => void;\n  handleBack?: () => void;\n};\n\nexport function Header({\n  title,\n  isArrowLeft = true,\n  leftIcon,\n  handeClickLeftIcon,\n  handleBack,\n}: HeaderProps) {\n  const navigate = useNavigate();\n\n  return (\n    <header className=\"sticky top-0 z-10 w-full border-b border-black-10 bg-white\">\n      <div className=\"relative flex h-14 items-center justify-between px-6 sm:h-16\">\n        {isArrowLeft && (\n          <button\n            type=\"button\"\n            onClick={handleBack}\n            aria-label=\"Header action\"\n            className=\"absolute left-3 flex h-9 w-9 items-center justify-center rounded-full transition hover:bg-gray-100 active:bg-gray-200 sm:left-4\"\n          >\n            <img\n              src={arrowLeft}\n              alt=\"\"\n              className=\"pointer-events-none h-6 w-6\"\n              style={{ touchAction: \"none\" }}\n            />\n          </button>\n        )}\n\n        <h1 className=\"absolute left-1/2 max-w-[70%] -translate-x-1/2 truncate text-center text-base font-bold text-black\">\n          {title}\n        </h1>\n\n        {leftIcon && (\n          <button\n            type=\"button\"\n            onClick={handeClickLeftIcon}\n            className=\"absolute right-3 flex h-9 w-9 items-center justify-center sm:right-4\"\n          >\n            <img\n              src={leftIcon}\n              alt=\"\"\n              className=\"pointer-events-none h-6 w-6\"\n              style={{ touchAction: \"none\" }}\n            />\n          </button>\n        )}\n      </div>\n    </header>\n  );\n}\n","import type { ReactNode } from \"react\";\n\nexport type LayoutProps = {\n  header?: ReactNode;\n  footer?: ReactNode;\n  children: ReactNode;\n};\n\nexport function Layout({ header, footer, children }: LayoutProps) {\n  return (\n    <div className=\"flex min-h-dvh flex-col\">\n      {header != null && <header className=\"shrink-0\">{header}</header>}\n\n      <main className=\"flex-1 px-4 pt-4\">{children}</main>\n\n      {footer != null && (\n        <footer className=\"shrink-0 px-4 pt-4 pb-safe\">{footer}</footer>\n      )}\n    </div>\n  );\n}\n","function r(e){var t,f,n=\"\";if(\"string\"==typeof e||\"number\"==typeof e)n+=e;else if(\"object\"==typeof e)if(Array.isArray(e)){var o=e.length;for(t=0;t<o;t++)e[t]&&(f=r(e[t]))&&(n&&(n+=\" \"),n+=f)}else for(f in e)e[f]&&(n&&(n+=\" \"),n+=f);return n}export function clsx(){for(var e,t,f=0,n=\"\",o=arguments.length;f<o;f++)(e=arguments[f])&&(t=r(e))&&(n&&(n+=\" \"),n+=t);return n}export default clsx;","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%2313F0A9'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M7.75%2012L10.58%2014.83L16.25%209.16998'%20stroke='%2313F0A9'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%208V13'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.9945%2016H12.0035'%20stroke='%23FF3B63'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022Z'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%208V13'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.9945%2016H12.0035'%20stroke='%23FFC53D'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M12%202C6.5%202%202%206.5%202%2012C2%2017.5%206.5%2022%2012%2022C17.5%2022%2022%2017.5%2022%2012C22%206.5%2017.5%202%2012%202Z'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12%2016V11'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M12.0055%208H11.9965'%20stroke='black'%20stroke-width='1.5'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='16'%20height='16'%20viewBox='0%200%2016%2016'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M3.33398%203.33331L12.6667%2012.666'%20stroke='black'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M3.33337%2012.666L12.6661%203.33331'%20stroke='black'%20stroke-opacity='0.7'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","import {\n  createContext,\n  useCallback,\n  useContext,\n  useEffect,\n  useMemo,\n  useState,\n  type ReactNode,\n} from \"react\";\nimport clsx from \"clsx\";\nimport CheckIcon from \"@assets/success.svg\";\nimport ErrorIcon from \"@assets/error.svg\";\nimport WarningIcon from \"@assets/warning.svg\";\nimport InfoIcon from \"@assets/info.svg\";\nimport CloseIcon from \"@assets/close.svg\";\n\nexport type ToastVariant = \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport type ToastOptions = {\n  title?: string;\n  message: string;\n  variant?: ToastVariant;\n  duration?: number;\n};\n\ntype ToastItem = Required<ToastOptions> & { id: number };\n\nconst VARIANTS: Record<\n  ToastVariant,\n  { border: string; bar: string; icon: string; title: string }\n> = {\n  success: {\n    border: \"border-primary\",\n    bar: \"bg-hipay\",\n    icon: CheckIcon as string,\n    title: \"Амжилттай\",\n  },\n  error: {\n    border: \"border-hipay\",\n    bar: \"bg-hipay\",\n    icon: ErrorIcon as string,\n    title: \"Алдаа гарлаа\",\n  },\n  warning: {\n    border: \"border-yellow-500\",\n    bar: \"bg-hipay\",\n    icon: WarningIcon,\n    title: \"Анхааруулга\",\n  },\n  info: {\n    border: \"border-blue-500\",\n    bar: \"bg-hipay\",\n    icon: InfoIcon,\n    title: \"Анхааруулга\",\n  },\n};\n\ntype ToastMethod = (message: string, duration?: number) => void;\n\ntype ShowFn = {\n  (options: ToastOptions): void;\n  success: ToastMethod;\n  error: ToastMethod;\n  warning: ToastMethod;\n  info: ToastMethod;\n};\n\ntype ToastContextValue = {\n  show: ShowFn;\n};\n\nconst ToastContext = createContext<ToastContextValue | null>(null);\n\nexport function useToast() {\n  const context = useContext(ToastContext);\n  if (!context) throw new Error(\"useToast must be used within ToastProvider\");\n  return context;\n}\n\nfunction ToastCard({\n  toast,\n  onClose,\n}: {\n  toast: ToastItem;\n  onClose: (id: number) => void;\n}) {\n  const { id, title, message, variant, duration } = toast;\n  const styles = VARIANTS[variant];\n\n  useEffect(() => {\n    const timer = setTimeout(() => onClose(id), duration);\n    return () => clearTimeout(timer);\n  }, [id, duration, onClose]);\n\n  return (\n    <div\n      onClick={() => onClose(id)}\n      className={clsx(\n        \"pointer-events-auto relative w-96 overflow-hidden rounded-[5px] bg-white text-left shadow-toast\",\n        styles.border,\n      )}\n    >\n      <div className=\"flex items-start justify-between px-4 py-2.5\">\n        <div className=\"flex flex-row items-start gap-2\">\n          <div className=\"mt-1\">\n            <img src={styles.icon as string} alt=\"\" className=\"h-5 w-5\" />\n          </div>\n          <div className=\"flex flex-col gap-1\">\n            <p className=\"font-sans text-sm font-semibold leading-6 text-primary\">\n              {title ?? styles.title}\n            </p>\n            <p className=\"font-sans text-sm font-medium leading-6 text-primary\">\n              {message}\n            </p>\n          </div>\n        </div>\n        <div className=\"mt-1\">\n          <img src={CloseIcon} alt=\"\" className=\"h-4 w-4\" />\n        </div>\n      </div>\n      <div className=\"absolute inset-x-0 bottom-0 h-1 bg-black-10\">\n        <div\n          className={clsx(\"toast-progress h-full w-full\", styles.bar)}\n          style={{ animationDuration: `${duration}ms` }}\n        />\n      </div>\n    </div>\n  );\n}\n\nlet nextId = 0;\n\nexport function ToastProvider({ children }: { children: ReactNode }) {\n  const [toasts, setToasts] = useState<ToastItem[]>([]);\n\n  const dismiss = useCallback((id: number) => {\n    setToasts((list) => list.filter((t) => t.id !== id));\n  }, []);\n\n  const value = useMemo<ToastContextValue>(() => {\n    const base = ({\n      title,\n      message,\n      variant = \"info\",\n      duration = 3000,\n    }: ToastOptions) => {\n      setToasts((list) => [\n        ...list,\n        {\n          id: ++nextId,\n          title: title ?? VARIANTS[variant].title,\n          message,\n          variant,\n          duration,\n        },\n      ]);\n    };\n\n    const show = Object.assign(base, {\n      success: (message: string, duration?: number) =>\n        base({ message, variant: \"success\", duration }),\n      error: (message: string, duration?: number) =>\n        base({ message, variant: \"error\", duration }),\n      warning: (message: string, duration?: number) =>\n        base({ message, variant: \"warning\", duration }),\n      info: (message: string, duration?: number) =>\n        base({ message, variant: \"info\", duration }),\n    });\n\n    return { show };\n  }, []);\n\n  return (\n    <ToastContext.Provider value={value}>\n      {children}\n      <div\n        className=\"pointer-events-none fixed inset-x-0 z-50 flex flex-col gap-2 px-4 right-0 items-center\"\n        style={{ top: \"4.5rem\" }}\n      >\n        {toasts.map((toast) => (\n          <ToastCard key={toast.id} toast={toast} onClose={dismiss} />\n        ))}\n      </div>\n    </ToastContext.Provider>\n  );\n}\n","export default \"data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.9168%2015.8333C10.7519%2015.8327%2010.591%2015.7831%2010.4544%2015.691C10.3177%2015.5988%2010.2115%2015.4682%2010.149%2015.3157C10.0866%2015.1632%2010.0708%2014.9956%2010.1036%2014.8341C10.1364%2014.6726%2010.2164%2014.5244%2010.3334%2014.4083L14.1668%2010.5917C14.2449%2010.5142%2014.3069%2010.422%2014.3492%2010.3205C14.3915%2010.2189%2014.4133%2010.11%2014.4133%2010C14.4133%209.89%2014.3915%209.78108%2014.3492%209.67953C14.3069%209.57798%2014.2449%209.48581%2014.1668%209.40834L10.3334%205.59168C10.2553%205.51421%2010.1933%205.42204%2010.151%205.32049C10.1087%205.21894%2010.0869%205.11002%2010.0869%205.00001C10.0869%204.89%2010.1087%204.78108%2010.151%204.67953C10.1933%204.57798%2010.2553%204.48581%2010.3334%204.40834C10.4896%204.25313%2010.7008%204.16602%2010.9209%204.16602C11.1411%204.16602%2011.3523%204.25313%2011.5084%204.40834L15.3334%208.23334C15.8016%208.70209%2016.0646%209.33751%2016.0646%2010C16.0646%2010.6625%2015.8016%2011.2979%2015.3334%2011.7667L11.5084%2015.5917C11.4306%2015.6689%2011.3382%2015.73%2011.2367%2015.7715C11.1351%2015.813%2011.0264%2015.834%2010.9168%2015.8333Z'%20fill='white'%20fill-opacity='0.6'/%3e%3cpath%20d='M5.08375%2015.8333C4.91894%2015.8327%204.75803%2015.7831%204.62138%2015.691C4.48472%2015.5988%204.37846%2015.4682%204.31602%2015.3157C4.25358%2015.1632%204.23778%2014.9956%204.2706%2014.8341C4.30342%2014.6726%204.38339%2014.5244%204.50041%2014.4083L8.90875%2010L4.50041%205.59168C4.42231%205.51421%204.36031%205.42204%204.318%205.32049C4.2757%205.21894%204.25391%205.11002%204.25391%205.00001C4.25391%204.89%204.2757%204.78108%204.318%204.67953C4.36031%204.57798%204.42231%204.48581%204.50041%204.40834C4.65655%204.25313%204.86776%204.16602%205.08791%204.16602C5.30807%204.16602%205.51928%204.25313%205.67541%204.40834L10.6754%209.40834C10.7535%209.48581%2010.8155%209.57798%2010.8578%209.67953C10.9001%209.78108%2010.9219%209.89%2010.9219%2010C10.9219%2010.11%2010.9001%2010.2189%2010.8578%2010.3205C10.8155%2010.422%2010.7535%2010.5142%2010.6754%2010.5917L5.67541%2015.5917C5.59755%2015.6689%205.5052%2015.73%205.40367%2015.7715C5.30214%2015.813%205.19342%2015.834%205.08375%2015.8333Z'%20fill='white'%20fill-opacity='0.6'/%3e%3c/svg%3e\"","export default \"data:image/svg+xml,%3csvg%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M10.9168%2015.8333C10.7519%2015.8327%2010.591%2015.7831%2010.4544%2015.691C10.3177%2015.5988%2010.2115%2015.4682%2010.149%2015.3157C10.0866%2015.1632%2010.0708%2014.9956%2010.1036%2014.8341C10.1364%2014.6726%2010.2164%2014.5244%2010.3334%2014.4083L14.1668%2010.5917C14.2449%2010.5142%2014.3069%2010.422%2014.3492%2010.3205C14.3915%2010.2189%2014.4133%2010.11%2014.4133%2010C14.4133%209.89%2014.3915%209.78108%2014.3492%209.67953C14.3069%209.57798%2014.2449%209.48581%2014.1668%209.40834L10.3334%205.59168C10.2553%205.51421%2010.1933%205.42204%2010.151%205.32049C10.1087%205.21894%2010.0869%205.11002%2010.0869%205.00001C10.0869%204.89%2010.1087%204.78108%2010.151%204.67953C10.1933%204.57798%2010.2553%204.48581%2010.3334%204.40834C10.4896%204.25313%2010.7008%204.16602%2010.9209%204.16602C11.1411%204.16602%2011.3523%204.25313%2011.5084%204.40834L15.3334%208.23334C15.8016%208.70209%2016.0646%209.33751%2016.0646%2010C16.0646%2010.6625%2015.8016%2011.2979%2015.3334%2011.7667L11.5084%2015.5917C11.4306%2015.6689%2011.3382%2015.73%2011.2367%2015.7715C11.1351%2015.813%2011.0264%2015.834%2010.9168%2015.8333Z'%20fill='black'%20fill-opacity='0.6'/%3e%3cpath%20d='M5.08375%2015.8333C4.91894%2015.8327%204.75803%2015.7831%204.62138%2015.691C4.48472%2015.5988%204.37846%2015.4682%204.31602%2015.3157C4.25358%2015.1632%204.23778%2014.9956%204.2706%2014.8341C4.30342%2014.6726%204.38339%2014.5244%204.50041%2014.4083L8.90875%2010L4.50041%205.59168C4.42231%205.51421%204.36031%205.42204%204.318%205.32049C4.2757%205.21894%204.25391%205.11002%204.25391%205.00001C4.25391%204.89%204.2757%204.78108%204.318%204.67953C4.36031%204.57798%204.42231%204.48581%204.50041%204.40834C4.65655%204.25313%204.86776%204.16602%205.08791%204.16602C5.30807%204.16602%205.51928%204.25313%205.67541%204.40834L10.6754%209.40834C10.7535%209.48581%2010.8155%209.57798%2010.8578%209.67953C10.9001%209.78108%2010.9219%209.89%2010.9219%2010C10.9219%2010.11%2010.9001%2010.2189%2010.8578%2010.3205C10.8155%2010.422%2010.7535%2010.5142%2010.6754%2010.5917L5.67541%2015.5917C5.59755%2015.6689%205.5052%2015.73%205.40367%2015.7715C5.30214%2015.813%205.19342%2015.834%205.08375%2015.8333Z'%20fill='black'%20fill-opacity='0.6'/%3e%3c/svg%3e\"","import clsx from \"clsx\";\n\nconst TICK_COUNT = 12;\n\nconst sizeMap = {\n  small: 20,\n  large: 36,\n} as const;\n\nexport type LoaderSize = keyof typeof sizeMap;\n\nexport interface LoaderProps {\n  animating?: boolean;\n  color?: string;\n  size?: LoaderSize | number;\n  hidesWhenStopped?: boolean;\n  className?: string;\n}\n\nexport function Loader({\n  animating = true,\n  color = \"#FF3B63\",\n  size = \"small\",\n  hidesWhenStopped = true,\n  className,\n}: LoaderProps) {\n  if (!animating && hidesWhenStopped) return null;\n\n  const px = typeof size === \"number\" ? size : sizeMap[size];\n  const tickWidth = Math.max(2, Math.round(px * 0.09));\n  const tickHeight = Math.round(px * 0.28);\n\n  return (\n    <span\n      role=\"status\"\n      aria-label=\"Loading\"\n      aria-busy={animating || undefined}\n      className={clsx(\"relative inline-block shrink-0\", className)}\n      style={{ width: px, height: px }}\n    >\n      {Array.from({ length: TICK_COUNT }, (_, index) => (\n        <span\n          key={index}\n          className={clsx(\n            \"absolute top-0 left-1/2 rounded-full\",\n            animating && \"loader-tick\",\n          )}\n          style={{\n            width: tickWidth,\n            height: tickHeight,\n            marginLeft: -tickWidth / 2,\n            backgroundColor: color,\n            opacity: animating ? undefined : 0.25,\n            transform: `rotate(${index * (360 / TICK_COUNT)}deg)`,\n            transformOrigin: `center ${px / 2}px`,\n            animationDelay: animating\n              ? `${-(TICK_COUNT - index) / TICK_COUNT}s`\n              : undefined,\n          }}\n        />\n      ))}\n    </span>\n  );\n}\n","import clsx from \"clsx\";\nimport Right from \"@assets/right.svg\";\nimport RightBlack from \"@assets/rightBlack.svg\";\nimport { Loader } from \"@components/Loader/Loader\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"transparent\";\nexport type ButtonSize = \"md\";\n\nexport type ButtonProps = {\n  text: string;\n  variant?: ButtonVariant;\n  size?: ButtonSize;\n  loading?: boolean;\n  disabled?: boolean;\n  onClick?: () => void;\n  leftIcon?: string;\n  rightIcon?: string;\n  className?: string;\n  isRightIcon?: boolean;\n  rightIconColor?: string;\n};\n\nconst baseStyles =\n  \"relative inline-flex items-center justify-center font-medium transition-all focus:outline-none focus:ring-2 focus:ring-offset-2\";\n\nconst variantStyles: Record<ButtonVariant, string> = {\n  primary:\n    \"bg-white text-black border border-black-70 rounded-2xl focus:ring-primary shadow-glass backdrop-glass w-full\",\n  secondary:\n    \"!bg-secondary text-white rounded-2xl focus:ring-secondary shadow-glass/10 backdrop-glass w-full\",\n  transparent:\n    \"bg-transparent text-primary border border-black-25 rounded-full focus:ring-black-25 w-full\",\n};\n\nconst sizeStyles: Record<ButtonSize, string> = {\n  md: \"px-4 py-3.5 text-sm\",\n};\n\nconst disabledStyles: Record<ButtonVariant, string> = {\n  primary: \"bg-secondary-gradient rounded-2xl text-white\",\n  secondary: \"bg-secondary-gradient rounded-2xl text-white\",\n  transparent:\n    \"bg-transparent text-primary border border-black-25 rounded-full\",\n};\n\nconst hoverStyles: Record<ButtonVariant, string> = {\n  primary: \"hover:bg-gray-50\",\n  secondary: \"hover:bg-secondary/80\",\n  transparent: \"hover:brightness-95\",\n};\n\nexport function Button({\n  text,\n  variant = \"primary\",\n  size = \"md\",\n  loading = false,\n  disabled = false,\n  onClick,\n  leftIcon,\n  rightIcon,\n  className,\n  isRightIcon = true,\n  rightIconColor = \"white\",\n}: ButtonProps) {\n  const isDisabled = disabled || loading;\n  const isLightIcon =\n    variant === \"secondary\" || (isDisabled && variant !== \"transparent\");\n  const loaderColor =\n    variant === \"transparent\" || (!isDisabled && variant === \"primary\")\n      ? \"#161621\"\n      : \"#ffffff\";\n\n  return (\n    <button\n      type=\"button\"\n      onClick={onClick}\n      disabled={isDisabled}\n      aria-disabled={isDisabled}\n      aria-busy={loading || undefined}\n      className={clsx(\n        baseStyles,\n        sizeStyles[size],\n        isDisabled ? disabledStyles[variant] : variantStyles[variant],\n        !isDisabled && hoverStyles[variant],\n        isDisabled && \"cursor-not-allowed\",\n        className,\n      )}\n    >\n      {loading ? (\n        <span className=\"flex w-full items-center justify-center gap-2 text-sm font-medium leading-6\">\n          <Loader size={20} />\n          {text}\n        </span>\n      ) : (\n        <>\n          <span className=\"flex w-full items-center justify-center gap-2 text-sm font-medium leading-6\">\n            {leftIcon && (\n              <img\n                src={leftIcon}\n                alt=\"\"\n                className={clsx(\n                  \"h-4 w-4 shrink-0\",\n                  isLightIcon && \"brightness-0 invert\",\n                )}\n                style={{ touchAction: \"none\", pointerEvents: \"none\" }}\n              />\n            )}\n            {text}\n          </span>\n          {isRightIcon && (\n            <img\n              src={\n                rightIconColor === \"white\"\n                  ? rightIcon || Right\n                  : rightIcon || RightBlack\n              }\n              alt=\"\"\n              className=\"pointer-events-none absolute right-4 top-1/2 -translate-y-1/2\"\n              style={{ touchAction: \"none\" }}\n            />\n          )}\n        </>\n      )}\n    </button>\n  );\n}\n","export default \"data:image/svg+xml,%3csvg%20width='24'%20height='24'%20viewBox='0%200%2024%2024'%20fill='none'%20xmlns='http://www.w3.org/2000/svg'%3e%3cpath%20d='M13.2603%203.59997L5.05034%2012.29C4.74034%2012.62%204.44034%2013.27%204.38034%2013.72L4.01034%2016.96C3.88034%2018.13%204.72034%2018.93%205.88034%2018.73L9.10034%2018.18C9.55034%2018.1%2010.1803%2017.77%2010.4903%2017.43L18.7003%208.73997C20.1203%207.23997%2020.7603%205.52997%2018.5503%203.43997C16.3503%201.36997%2014.6803%202.09997%2013.2603%203.59997Z'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M11.8896%205.05005C12.3196%207.81005%2014.5596%209.92005%2017.3396%2010.2'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3cpath%20d='M3%2022H21'%20stroke='%2322272C'%20stroke-width='1.5'%20stroke-miterlimit='10'%20stroke-linecap='round'%20stroke-linejoin='round'/%3e%3c/svg%3e\"","import {\n  useId,\n  useLayoutEffect,\n  useRef,\n  useState,\n  type ChangeEvent,\n  type InputHTMLAttributes,\n  type ReactNode,\n} from \"react\";\nimport clsx from \"clsx\";\nimport editIcon from \"@assets/edit.svg\";\n\nexport interface InputProps extends InputHTMLAttributes<HTMLInputElement> {\n  label: string;\n  error?: string;\n  editable?: boolean;\n  rightIcon?: ReactNode;\n  currency?: string;\n}\n\nfunction digitsOnly(value: string) {\n  return value.replace(/\\D/g, \"\");\n}\n\nfunction formatAmount(digits: string) {\n  if (!digits) return \"\";\n  return Number(digits).toLocaleString(\"en-US\");\n}\n\nexport function Input({\n  label,\n  error,\n  editable = false,\n  rightIcon,\n  currency,\n  id,\n  className,\n  value,\n  defaultValue,\n  onChange,\n  onFocus,\n  onBlur,\n  inputMode,\n  ...props\n}: InputProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const inputRef = useRef<HTMLInputElement>(null);\n  const symbolRef = useRef<HTMLSpanElement>(null);\n  const [symbolWidth, setSymbolWidth] = useState(0);\n  const [focused, setFocused] = useState(false);\n  const [uncontrolledDigits, setUncontrolledDigits] = useState(() =>\n    digitsOnly(defaultValue == null ? \"\" : String(defaultValue)),\n  );\n\n  const digits = currency\n    ? digitsOnly(value == null ? uncontrolledDigits : String(value))\n    : \"\";\n  const formatted = currency ? formatAmount(digits) : \"\";\n  const showCurrency = Boolean(currency && (focused || formatted));\n  const icon =\n    rightIcon ??\n    (editable ? <img src={editIcon} alt=\"\" className=\"h-6 w-6\" /> : null);\n\n  useLayoutEffect(() => {\n    setSymbolWidth(symbolRef.current?.offsetWidth ?? 0);\n  }, [currency]);\n\n  function handleChange(event: ChangeEvent<HTMLInputElement>) {\n    if (!currency) {\n      onChange?.(event);\n      return;\n    }\n\n    const cursor = event.target.selectionStart ?? event.target.value.length;\n    const digitsBeforeCursor = digitsOnly(\n      event.target.value.slice(0, cursor),\n    ).length;\n    const nextDigits = digitsOnly(event.target.value);\n    if (value == null) setUncontrolledDigits(nextDigits);\n\n    event.target.value = nextDigits;\n    onChange?.(event);\n\n    requestAnimationFrame(() => {\n      const input = inputRef.current;\n      if (!input) return;\n      const next = formatAmount(nextDigits);\n      let seen = 0;\n      let pos = next.length;\n      for (let index = 0; index < next.length; index += 1) {\n        if (/\\d/.test(next[index] ?? \"\")) seen += 1;\n        if (seen >= digitsBeforeCursor) {\n          pos = index + 1;\n          break;\n        }\n      }\n      if (digitsBeforeCursor === 0) pos = 0;\n      input.setSelectionRange(pos, pos);\n    });\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1 pt-3\">\n      <div className=\"relative\">\n        <input\n          {...props}\n          ref={inputRef}\n          id={inputId}\n          placeholder=\" \"\n          inputMode={currency ? \"numeric\" : inputMode}\n          value={currency ? formatted : value}\n          defaultValue={currency ? undefined : defaultValue}\n          onChange={handleChange}\n          onFocus={(event) => {\n            setFocused(true);\n            onFocus?.(event);\n          }}\n          onBlur={(event) => {\n            setFocused(false);\n            onBlur?.(event);\n          }}\n          style={\n            showCurrency ? { paddingLeft: 16 + symbolWidth + 2 } : undefined\n          }\n          className={clsx(\n            \"peer h-16 w-full rounded-xl border border-primary/20 bg-white px-4 text-base font-bold leading-6 text-primary outline-none\",\n            icon && \"pr-14\",\n            className,\n          )}\n        />\n        <span\n          ref={symbolRef}\n          aria-hidden\n          className=\"invisible absolute text-base font-bold leading-6\"\n        >\n          {currency}\n        </span>\n        {showCurrency && (\n          <span className=\"pointer-events-none absolute top-1/2 left-4 z-10 -translate-y-1/2 text-base font-bold leading-6 text-primary\">\n            {currency}\n          </span>\n        )}\n        <label\n          htmlFor={inputId}\n          className=\"pointer-events-none absolute left-4 top-1/2 z-10 -translate-y-1/2 text-sm font-normal leading-4 text-black/50 transition-all peer-not-placeholder-shown:left-3 peer-not-placeholder-shown:top-0 peer-not-placeholder-shown:-translate-y-[70%] peer-not-placeholder-shown:bg-white peer-not-placeholder-shown:px-1.5 peer-not-placeholder-shown:text-xs peer-focus:left-3 peer-focus:top-0 peer-focus:-translate-y-[70%] peer-focus:bg-white peer-focus:px-1.5 peer-focus:text-xs\"\n        >\n          {label}\n        </label>\n        {icon && (\n          <div\n            aria-label=\"Edit\"\n            onClick={() => inputRef.current?.focus()}\n            className=\"absolute right-4 top-1/2 flex -translate-y-1/2 items-center justify-center\"\n          >\n            {icon}\n          </div>\n        )}\n      </div>\n      {error && (\n        <p className=\"text-sm font-normal leading-6 text-hipay font-sans ml-1\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n","import {\n  useId,\n  useState,\n  type InputHTMLAttributes,\n  type ReactNode,\n  type Ref,\n} from \"react\";\nimport clsx from \"clsx\";\n\ntype NativeInputProps = InputHTMLAttributes<HTMLInputElement>;\n\ntype InputPropsWithoutOverrides = {\n  [Key in keyof NativeInputProps as Key extends \"onChange\" | \"prefix\"\n    ? never\n    : Key]: NativeInputProps[Key];\n};\n\nexport interface MainInputProps extends InputPropsWithoutOverrides {\n  ref?: Ref<HTMLInputElement>;\n  label?: string;\n  error?: string;\n  prefix?: ReactNode;\n  suffix?: ReactNode;\n  isPassword?: boolean;\n  isLoading?: boolean;\n  labelAlwaysOnTop?: boolean;\n  onChange?: (value: string) => void;\n}\n\nexport function MainInput({\n  ref,\n  id,\n  label,\n  value,\n  defaultValue,\n  error,\n  prefix,\n  suffix,\n  placeholder,\n  type = \"text\",\n  isPassword = false,\n  isLoading = false,\n  labelAlwaysOnTop = false,\n  readOnly,\n  disabled,\n  className,\n  onChange,\n  onFocus,\n  onBlur,\n  ...props\n}: MainInputProps) {\n  const generatedId = useId();\n  const inputId = id ?? generatedId;\n  const [focused, setFocused] = useState(false);\n  const [hasValue, setHasValue] = useState(\n    () => String(defaultValue ?? \"\").length > 0,\n  );\n\n  const filled = value !== undefined ? String(value).length > 0 : hasValue;\n\n  const floating = labelAlwaysOnTop || focused || filled;\n\n  return (\n    <div className={clsx(\"w-full pt-5\", className)}>\n      <div\n        className={clsx(\n          \"relative border-b py-1\",\n          error\n            ? \"border-red-500\"\n            : focused\n              ? \"border-hipay\"\n              : \"border-blackOpa20\",\n          disabled && \"opacity-50\",\n        )}\n      >\n        {label && (\n          <label\n            htmlFor={inputId}\n            className={clsx(\n              \"pointer-events-none absolute left-0 text-sm font-normal text-black/70 transition-all duration-200\",\n              floating ? \"-top-5 leading-3.5\" : \"top-1\",\n            )}\n          >\n            {label}\n          </label>\n        )}\n\n        <div className=\"flex items-center gap-2\">\n          {prefix}\n\n          <input\n            {...props}\n            ref={ref}\n            id={inputId}\n            value={value}\n            defaultValue={defaultValue}\n            type={isPassword ? \"password\" : type}\n            disabled={disabled}\n            readOnly={readOnly}\n            placeholder={!label || floating ? placeholder : \"\"}\n            aria-invalid={error ? true : undefined}\n            aria-describedby={\n              error ? `${inputId}-error` : props[\"aria-describedby\"]\n            }\n            onFocus={(event) => {\n              setFocused(true);\n              onFocus?.(event);\n            }}\n            onBlur={(event) => {\n              setFocused(false);\n              onBlur?.(event);\n            }}\n            onChange={(event) => {\n              setHasValue(event.target.value.length > 0);\n              onChange?.(event.target.value);\n            }}\n            className=\"min-w-0 flex-1 border-none bg-transparent p-0 font-sans text-base font-semibold text-primary caret-hipay outline-none read-only:cursor-default disabled:cursor-not-allowed\"\n          />\n\n          {isLoading && (\n            <span\n              role=\"status\"\n              aria-label=\"Loading\"\n              className=\"h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-gray-300 border-t-hipay\"\n            />\n          )}\n\n          {suffix}\n        </div>\n      </div>\n\n      {error && (\n        <p id={`${inputId}-error`} className=\"mt-1 text-xs text-red-500\">\n          {error}\n        </p>\n      )}\n    </div>\n  );\n}\n"],"ignoreList":[3],"mappings":"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"}

package/dist/style.css

@@ -0,0 +1,2 @@
+@import "https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap";@layer components;@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-translate-x:0;--tw-translate-y:0;--tw-translate-z:0;--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-border-style:solid;--tw-leading:initial;--tw-font-weight:initial;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial;--tw-duration:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000}}}@layer theme{:root,:host{--font-sans:"Manrope", system-ui, -apple-system, sans-serif;--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-500:oklch(63.7% .237 25.331);--color-yellow-500:oklch(79.5% .184 86.047);--color-blue-500:oklch(62.3% .214 259.815);--color-gray-50:oklch(98.5% .002 247.839);--color-gray-100:#f8f9fb;--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-black:#000;--color-white:#fff;--spacing:.25rem;--text-xs:12px;--text-xs--line-height:calc(1 / .75);--text-sm:14px;--text-sm--line-height:calc(1.25 / .875);--text-base:16px;--text-base--line-height:calc(1.5 / 1);--text-lg:18px;--text-2xl:24px;--font-weight-normal:400;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--radius-sm:4px;--radius-md:8px;--radius-lg:12px;--radius-xl:16px;--radius-2xl:24px;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:#161621;--color-primaryOpa70:#22272cb3;--color-blackOpa5:#22272c0d;--color-blackOpa10:#0000001a;--color-blackOpa20:#0003;--color-black-10:#f5f7fa;--color-black-25:#e5e7eb;--color-black-50:#00000080;--color-black-60:#0009;--color-black-70:#000000b3;--color-secondary:#2b2b38;--color-hipay:#ff3b63;--text-xxs:10px;--radius-base:10px}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring:where(:not(iframe)){outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab, red, red)){::placeholder{color:color-mix(in oklab, currentcolor 50%, transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-auto{pointer-events:auto}.pointer-events-none{pointer-events:none}.invisible{visibility:hidden}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.sticky{position:sticky}.inset-x-0{inset-inline:0}.-top-5{top:calc(var(--spacing) * -5)}.top-0{top:0}.top-1{top:var(--spacing)}.top-1\/2{top:50%}.right-0{right:0}.right-3{right:calc(var(--spacing) * 3)}.right-4{right:calc(var(--spacing) * 4)}.bottom-0{bottom:0}.left-0{left:0}.left-1\/2{left:50%}.left-3{left:calc(var(--spacing) * 3)}.left-4{left:calc(var(--spacing) * 4)}.z-10{z-index:10}.z-50{z-index:50}.mt-1{margin-top:var(--spacing)}.ml-1{margin-left:var(--spacing)}.flex{display:flex}.inline-block{display:inline-block}.inline-flex{display:inline-flex}.h-1{height:var(--spacing)}.h-4{height:calc(var(--spacing) * 4)}.h-5{height:calc(var(--spacing) * 5)}.h-6{height:calc(var(--spacing) * 6)}.h-9{height:calc(var(--spacing) * 9)}.h-14{height:calc(var(--spacing) * 14)}.h-16{height:calc(var(--spacing) * 16)}.h-full{height:100%}.min-h-dvh{min-height:100dvh}.w-4{width:calc(var(--spacing) * 4)}.w-5{width:calc(var(--spacing) * 5)}.w-6{width:calc(var(--spacing) * 6)}.w-9{width:calc(var(--spacing) * 9)}.w-96{width:calc(var(--spacing) * 96)}.w-full{width:100%}.max-w-\[70\%\]{max-width:70%}.min-w-0{min-width:0}.flex-1{flex:1}.shrink-0{flex-shrink:0}.-translate-x-1\/2{--tw-translate-x:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.-translate-y-1\/2{--tw-translate-y:calc(calc(1 / 2 * 100%) * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-not-allowed{cursor:not-allowed}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-center{align-items:center}.items-start{align-items:flex-start}.justify-between{justify-content:space-between}.justify-center{justify-content:center}.gap-1{gap:var(--spacing)}.gap-2{gap:calc(var(--spacing) * 2)}.truncate{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.overflow-hidden{overflow:hidden}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-\[5px\]{border-radius:5px}.rounded-full{border-radius:2147483647px}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-2{border-style:var(--tw-border-style);border-width:2px}.border-b{border-bottom-style:var(--tw-border-style);border-bottom-width:1px}.border-none{--tw-border-style:none;border-style:none}.border-black-10{border-color:var(--color-black-10)}.border-black-25{border-color:var(--color-black-25)}.border-black-70{border-color:var(--color-black-70)}.border-blackOpa20{border-color:var(--color-blackOpa20)}.border-blue-500{border-color:var(--color-blue-500)}.border-gray-300{border-color:var(--color-gray-300)}.border-hipay{border-color:var(--color-hipay)}.border-primary{border-color:var(--color-primary)}.border-primary\/20{border-color:#16162133}@supports (color:color-mix(in lab, red, red)){.border-primary\/20{border-color:color-mix(in oklab, var(--color-primary) 20%, transparent)}}.border-red-500{border-color:var(--color-red-500)}.border-yellow-500{border-color:var(--color-yellow-500)}.border-t-hipay{border-top-color:var(--color-hipay)}.\!bg-secondary{background-color:var(--color-secondary)!important}.bg-black-10{background-color:var(--color-black-10)}.bg-hipay{background-color:var(--color-hipay)}.bg-transparent{background-color:#0000}.bg-white{background-color:var(--color-white)}.p-0{padding:0}.px-4{padding-inline:calc(var(--spacing) * 4)}.px-6{padding-inline:calc(var(--spacing) * 6)}.py-1{padding-block:var(--spacing)}.py-2\.5{padding-block:calc(var(--spacing) * 2.5)}.py-3\.5{padding-block:calc(var(--spacing) * 3.5)}.pt-3{padding-top:calc(var(--spacing) * 3)}.pt-4{padding-top:calc(var(--spacing) * 4)}.pt-5{padding-top:calc(var(--spacing) * 5)}.pr-14{padding-right:calc(var(--spacing) * 14)}.text-center{text-align:center}.text-left{text-align:left}.font-sans{font-family:var(--font-sans)}.text-base{font-size:var(--text-base);line-height:var(--tw-leading,var(--text-base--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xs{font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.leading-3\.5{--tw-leading:calc(var(--spacing) * 3.5);line-height:calc(var(--spacing) * 3.5)}.leading-4{--tw-leading:calc(var(--spacing) * 4);line-height:calc(var(--spacing) * 4)}.leading-6{--tw-leading:calc(var(--spacing) * 6);line-height:calc(var(--spacing) * 6)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-normal{--tw-font-weight:var(--font-weight-normal);font-weight:var(--font-weight-normal)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.text-black{color:var(--color-black)}.text-black\/50{color:#00000080}@supports (color:color-mix(in lab, red, red)){.text-black\/50{color:color-mix(in oklab, var(--color-black) 50%, transparent)}}.text-black\/70{color:#000000b3}@supports (color:color-mix(in lab, red, red)){.text-black\/70{color:color-mix(in oklab, var(--color-black) 70%, transparent)}}.text-hipay{color:var(--color-hipay)}.text-primary{color:var(--color-primary)}.text-red-500{color:var(--color-red-500)}.text-white{color:var(--color-white)}.caret-hipay{caret-color:var(--color-hipay)}.opacity-50{opacity:.5}.shadow-glass{box-shadow:0 15px 80px #00000080}.shadow-toast{box-shadow:-1px -1px 4px #0000001a,2px 2px 4px #0000001a}.brightness-0{--tw-brightness:brightness(0%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.backdrop-glass{-webkit-backdrop-filter:blur(30px)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.transition-all{transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}.duration-200{--tw-duration:.2s;transition-duration:.2s}.outline-none{--tw-outline-style:none;outline-style:none}.bg-light-gradient{background:linear-gradient(#e5e7eb 0%,#f5f7fa 100%)}.bg-secondary-gradient{background:linear-gradient(#22272c4d 0%,#1f1f1f4d 100%)}.peer-not-placeholder-shown\:top-0:is(:where(.peer):not(:placeholder-shown)~*){top:0}.peer-not-placeholder-shown\:left-3:is(:where(.peer):not(:placeholder-shown)~*){left:calc(var(--spacing) * 3)}.peer-not-placeholder-shown\:-translate-y-\[70\%\]:is(:where(.peer):not(:placeholder-shown)~*){--tw-translate-y:calc(70% * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-not-placeholder-shown\:bg-white:is(:where(.peer):not(:placeholder-shown)~*){background-color:var(--color-white)}.peer-not-placeholder-shown\:px-1\.5:is(:where(.peer):not(:placeholder-shown)~*){padding-inline:calc(var(--spacing) * 1.5)}.peer-not-placeholder-shown\:text-xs:is(:where(.peer):not(:placeholder-shown)~*){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.peer-focus\:top-0:is(:where(.peer):focus~*){top:0}.peer-focus\:left-3:is(:where(.peer):focus~*){left:calc(var(--spacing) * 3)}.peer-focus\:-translate-y-\[70\%\]:is(:where(.peer):focus~*){--tw-translate-y:calc(70% * -1);translate:var(--tw-translate-x) var(--tw-translate-y)}.peer-focus\:bg-white:is(:where(.peer):focus~*){background-color:var(--color-white)}.peer-focus\:px-1\.5:is(:where(.peer):focus~*){padding-inline:calc(var(--spacing) * 1.5)}.peer-focus\:text-xs:is(:where(.peer):focus~*){font-size:var(--text-xs);line-height:var(--tw-leading,var(--text-xs--line-height))}.read-only\:cursor-default:read-only{cursor:default}@media (hover:hover){.hover\:bg-gray-50:hover{background-color:var(--color-gray-50)}.hover\:bg-gray-100:hover{background-color:var(--color-gray-100)}.hover\:bg-secondary\/80:hover{background-color:#2b2b38cc}@supports (color:color-mix(in lab, red, red)){.hover\:bg-secondary\/80:hover{background-color:color-mix(in oklab, var(--color-secondary) 80%, transparent)}}.hover\:brightness-95:hover{--tw-brightness:brightness(95%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}}.focus\:ring-2:focus{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow)}.focus\:ring-black-25:focus{--tw-ring-color:var(--color-black-25)}.focus\:ring-primary:focus{--tw-ring-color:var(--color-primary)}.focus\:ring-secondary:focus{--tw-ring-color:var(--color-secondary)}.focus\:ring-offset-2:focus{--tw-ring-offset-width:2px;--tw-ring-offset-shadow:var(--tw-ring-inset,) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color)}.focus\:outline-none:focus{--tw-outline-style:none;outline-style:none}.active\:bg-gray-200:active{background-color:var(--color-gray-200)}.disabled\:cursor-not-allowed:disabled{cursor:not-allowed}@media (width>=40rem){.sm\:right-4{right:calc(var(--spacing) * 4)}.sm\:left-4{left:calc(var(--spacing) * 4)}.sm\:h-16{height:calc(var(--spacing) * 16)}}}.selectable{-webkit-user-select:text;user-select:text}[class^=ant-],[class*=\ ant-]{box-sizing:border-box}.pt-safe{padding-top:max(env(safe-area-inset-top), 24px)}.pb-safe{padding-bottom:max(16px, env(safe-area-inset-bottom,0px))}.scroll-container{-webkit-overflow-scrolling:touch;overscroll-behavior-y:contain;height:100%;overflow-y:auto}@keyframes toast-progress{0%{transform:scaleX(1)}to{transform:scaleX(0)}}.toast-progress{transform-origin:0;animation-name:toast-progress;animation-timing-function:linear;animation-fill-mode:forwards}@keyframes loader-tick{0%{opacity:1}to{opacity:.15}}.loader-tick{animation-name:loader-tick;animation-duration:1s;animation-timing-function:linear;animation-iteration-count:infinite}@property --tw-translate-x{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-y{syntax:"*";inherits:false;initial-value:0}@property --tw-translate-z{syntax:"*";inherits:false;initial-value:0}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-leading{syntax:"*";inherits:false}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@property --tw-duration{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@keyframes spin{to{transform:rotate(360deg)}}
+/*$vite$:1*/

package/package.json

@@ -1,6 +1,63 @@
 {
   "name": "@hipaymn/miniapp-ui-library",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "1.0.0",
+  "description": "HiPay mini app UI library",
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.js"
+      },
+      "require": {
+        "types": "./dist/index.d.ts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "prepublishOnly": "yarn build"
+  },
+  "author": "davkharbayarnaran-design <davkharbayarnaran@gmail.com>",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "dependencies": {
+    "clsx": "^2.1.1",
+    "react-hook-form": "^7.90.0"
+  },
+  "devDependencies": {
+    "@microsoft/api-extractor": "^7.59.4",
+    "@tailwindcss/vite": "^4.3.3",
+    "@types/node": "^26.6.5",
+    "@types/react": "^19.3.0",
+    "@types/react-dom": "^19.3.0",
+    "@typescript/typescript6": "^6.0.2",
+    "@vitejs/plugin-react": "^6.1.2",
+    "react": "^19.3.0",
+    "react-dom": "^19.3.0",
+    "react-router-dom": "^7.18.4",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.4",
+    "vite-plugin-dts": "^5.1.2"
+  }
+}