@wakastellar/ui 4.0.0 → 4.1.1

package/dist/components/waka-pagination/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js"),n=require("../button/index.cjs.js"),r=require("../select/index.cjs.js");let i=require("react");i=e.__toESM(i);let a=require("lucide-react"),o=require("react/jsx-runtime");function s(e,t,n){if(t<=n)return Array.from({length:t},(e,t)=>t+1);let r=[],i=Math.floor((n-3)/2);if(r.push(1),e<=i+2){for(let e=2;e<=Math.min(n-1,t-1);e++)r.push(e);t>n&&r.push(`ellipsis`)}else if(e>=t-i-1){r.push(`ellipsis`);for(let e=Math.max(t-n+2,2);e<=t-1;e++)r.push(e)}else{r.push(`ellipsis`);for(let t=e-i;t<=e+i;t++)r.push(t);r.push(`ellipsis`)}return t>1&&r.push(t),r}function c({page:e,totalPages:i,onPageChange:c,pageSize:l=10,pageSizeOptions:u=[10,20,50,100],onPageSizeChange:d,totalItems:f,showPageSizeSelector:p=!1,showItemsInfo:m=!1,showFirstLast:h=!0,maxVisiblePages:g=7,size:_=`md`,variant:v=`outline`,className:y,labels:b={}}){let{page:x=`Page`,of:S=`sur`,items:C=`éléments`,itemsPerPage:w=`par page`,first:T=`Première page`,previous:E=`Page précédente`,next:D=`Page suivante`,last:O=`Dernière page`}=b,k={sm:`h-7 w-7 text-xs`,md:`h-8 w-8 text-sm`,lg:`h-10 w-10 text-base`},A={sm:`h-3 w-3`,md:`h-4 w-4`,lg:`h-5 w-5`},j=s(e,i,g),M=t=>{t>=1&&t<=i&&t!==e&&c(t)},N=f?(e-1)*l+1:null,P=f?Math.min(e*l,f):null;return(0,o.jsxs)(`nav`,{role:`navigation`,"aria-label":`Pagination`,className:t.cn(`flex flex-wrap items-center gap-4 justify-between`,y),children:[m&&f!==void 0&&(0,o.jsxs)(`div`,{className:`text-sm text-muted-foreground`,children:[N,`-`,P,` `,S,` `,f,` `,C]}),p&&d&&(0,o.jsxs)(`div`,{className:`flex items-center gap-2`,children:[(0,o.jsxs)(`span`,{className:`text-sm text-muted-foreground whitespace-nowrap`,children:[w,`:`]}),(0,o.jsxs)(r.Select,{value:String(l),onValueChange:e=>d(Number(e)),children:[(0,o.jsx)(r.SelectTrigger,{className:t.cn(`w-[70px]`,_===`sm`?`h-7`:_===`lg`?`h-10`:`h-8`),children:(0,o.jsx)(r.SelectValue,{})}),(0,o.jsx)(r.SelectContent,{children:u.map(e=>(0,o.jsx)(r.SelectItem,{value:String(e),children:e},e))})]})]}),(0,o.jsxs)(`div`,{className:`flex items-center gap-1`,children:[h&&(0,o.jsx)(n.Button,{variant:v,size:`icon`,className:k[_],onClick:()=>M(1),disabled:e===1,"aria-label":T,children:(0,o.jsx)(a.ChevronsLeft,{className:A[_]})}),(0,o.jsx)(n.Button,{variant:v,size:`icon`,className:k[_],onClick:()=>M(e-1),disabled:e===1,"aria-label":E,children:(0,o.jsx)(a.ChevronLeft,{className:A[_]})}),(0,o.jsx)(`div`,{className:`flex items-center gap-1`,children:j.map((r,i)=>{if(r===`ellipsis`)return(0,o.jsx)(`span`,{className:t.cn(`flex items-center justify-center text-muted-foreground`,k[_]),children:(0,o.jsx)(a.MoreHorizontal,{className:A[_]})},`ellipsis-${i}`);let s=r===e;return(0,o.jsx)(n.Button,{variant:s?`default`:v,size:`icon`,className:t.cn(k[_],s&&`pointer-events-none`),onClick:()=>M(r),"aria-label":`${x} ${r}`,"aria-current":s?`page`:void 0,children:r},r)})}),(0,o.jsx)(n.Button,{variant:v,size:`icon`,className:k[_],onClick:()=>M(e+1),disabled:e===i,"aria-label":D,children:(0,o.jsx)(a.ChevronRight,{className:A[_]})}),h&&(0,o.jsx)(n.Button,{variant:v,size:`icon`,className:k[_],onClick:()=>M(i),disabled:e===i,"aria-label":O,children:(0,o.jsx)(a.ChevronsRight,{className:A[_]})})]}),!m&&i>0&&(0,o.jsxs)(`div`,{className:`text-sm text-muted-foreground`,children:[x,` `,e,` `,S,` `,i]})]})}function l({totalItems:e,initialPageSize:t=10,initialPage:n=1}){let[r,a]=i.useState(n),[o,s]=i.useState(t),c=Math.ceil(e/o);i.useEffect(()=>{r>c&&c>0&&a(c)},[r,c]);let l=e=>{s(e),a(1)},u=()=>{r<c&&a(r+1)},d=()=>{r>1&&a(r-1)},f=()=>a(1),p=()=>a(c),m=(r-1)*o,h=Math.min(m+o-1,e-1);return{page:r,pageSize:o,totalPages:c,setPage:a,setPageSize:l,nextPage:u,prevPage:d,firstPage:f,lastPage:p,canNextPage:r<c,canPrevPage:r>1,startIndex:m,endIndex:h}}exports.WakaPagination=c,exports.default=c,exports.usePagination=l;

package/dist/components/waka-pagination/index.es.js

@@ -0,0 +1,183 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import { Button as t } from "../button/index.es.js";
+import { Select as n, SelectContent as r, SelectItem as i, SelectTrigger as a, SelectValue as o } from "../select/index.es.js";
+import * as s from "react";
+import { ChevronLeft as c, ChevronRight as l, ChevronsLeft as u, ChevronsRight as d, MoreHorizontal as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/waka-pagination/index.tsx
+function h(e, t, n) {
+	if (t <= n) return Array.from({ length: t }, (e, t) => t + 1);
+	let r = [], i = Math.floor((n - 3) / 2);
+	if (r.push(1), e <= i + 2) {
+		for (let e = 2; e <= Math.min(n - 1, t - 1); e++) r.push(e);
+		t > n && r.push("ellipsis");
+	} else if (e >= t - i - 1) {
+		r.push("ellipsis");
+		for (let e = Math.max(t - n + 2, 2); e <= t - 1; e++) r.push(e);
+	} else {
+		r.push("ellipsis");
+		for (let t = e - i; t <= e + i; t++) r.push(t);
+		r.push("ellipsis");
+	}
+	return t > 1 && r.push(t), r;
+}
+function g({ page: s, totalPages: g, onPageChange: _, pageSize: v = 10, pageSizeOptions: y = [
+	10,
+	20,
+	50,
+	100
+], onPageSizeChange: b, totalItems: x, showPageSizeSelector: S = !1, showItemsInfo: C = !1, showFirstLast: w = !0, maxVisiblePages: T = 7, size: E = "md", variant: D = "outline", className: O, labels: k = {} }) {
+	let { page: A = "Page", of: j = "sur", items: M = "éléments", itemsPerPage: N = "par page", first: P = "Première page", previous: F = "Page précédente", next: I = "Page suivante", last: L = "Dernière page" } = k, R = {
+		sm: "h-7 w-7 text-xs",
+		md: "h-8 w-8 text-sm",
+		lg: "h-10 w-10 text-base"
+	}, z = {
+		sm: "h-3 w-3",
+		md: "h-4 w-4",
+		lg: "h-5 w-5"
+	}, B = h(s, g, T), V = (e) => {
+		e >= 1 && e <= g && e !== s && _(e);
+	}, H = x ? (s - 1) * v + 1 : null, U = x ? Math.min(s * v, x) : null;
+	return /* @__PURE__ */ m("nav", {
+		role: "navigation",
+		"aria-label": "Pagination",
+		className: e("flex flex-wrap items-center gap-4 justify-between", O),
+		children: [
+			C && x !== void 0 && /* @__PURE__ */ m("div", {
+				className: "text-sm text-muted-foreground",
+				children: [
+					H,
+					"-",
+					U,
+					" ",
+					j,
+					" ",
+					x,
+					" ",
+					M
+				]
+			}),
+			S && b && /* @__PURE__ */ m("div", {
+				className: "flex items-center gap-2",
+				children: [/* @__PURE__ */ m("span", {
+					className: "text-sm text-muted-foreground whitespace-nowrap",
+					children: [N, ":"]
+				}), /* @__PURE__ */ m(n, {
+					value: String(v),
+					onValueChange: (e) => b(Number(e)),
+					children: [/* @__PURE__ */ p(a, {
+						className: e("w-[70px]", E === "sm" ? "h-7" : E === "lg" ? "h-10" : "h-8"),
+						children: /* @__PURE__ */ p(o, {})
+					}), /* @__PURE__ */ p(r, { children: y.map((e) => /* @__PURE__ */ p(i, {
+						value: String(e),
+						children: e
+					}, e)) })]
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center gap-1",
+				children: [
+					w && /* @__PURE__ */ p(t, {
+						variant: D,
+						size: "icon",
+						className: R[E],
+						onClick: () => V(1),
+						disabled: s === 1,
+						"aria-label": P,
+						children: /* @__PURE__ */ p(u, { className: z[E] })
+					}),
+					/* @__PURE__ */ p(t, {
+						variant: D,
+						size: "icon",
+						className: R[E],
+						onClick: () => V(s - 1),
+						disabled: s === 1,
+						"aria-label": F,
+						children: /* @__PURE__ */ p(c, { className: z[E] })
+					}),
+					/* @__PURE__ */ p("div", {
+						className: "flex items-center gap-1",
+						children: B.map((n, r) => {
+							if (n === "ellipsis") return /* @__PURE__ */ p("span", {
+								className: e("flex items-center justify-center text-muted-foreground", R[E]),
+								children: /* @__PURE__ */ p(f, { className: z[E] })
+							}, `ellipsis-${r}`);
+							let i = n === s;
+							return /* @__PURE__ */ p(t, {
+								variant: i ? "default" : D,
+								size: "icon",
+								className: e(R[E], i && "pointer-events-none"),
+								onClick: () => V(n),
+								"aria-label": `${A} ${n}`,
+								"aria-current": i ? "page" : void 0,
+								children: n
+							}, n);
+						})
+					}),
+					/* @__PURE__ */ p(t, {
+						variant: D,
+						size: "icon",
+						className: R[E],
+						onClick: () => V(s + 1),
+						disabled: s === g,
+						"aria-label": I,
+						children: /* @__PURE__ */ p(l, { className: z[E] })
+					}),
+					w && /* @__PURE__ */ p(t, {
+						variant: D,
+						size: "icon",
+						className: R[E],
+						onClick: () => V(g),
+						disabled: s === g,
+						"aria-label": L,
+						children: /* @__PURE__ */ p(d, { className: z[E] })
+					})
+				]
+			}),
+			!C && g > 0 && /* @__PURE__ */ m("div", {
+				className: "text-sm text-muted-foreground",
+				children: [
+					A,
+					" ",
+					s,
+					" ",
+					j,
+					" ",
+					g
+				]
+			})
+		]
+	});
+}
+function _({ totalItems: e, initialPageSize: t = 10, initialPage: n = 1 }) {
+	let [r, i] = s.useState(n), [a, o] = s.useState(t), c = Math.ceil(e / a);
+	s.useEffect(() => {
+		r > c && c > 0 && i(c);
+	}, [r, c]);
+	let l = (e) => {
+		o(e), i(1);
+	}, u = () => {
+		r < c && i(r + 1);
+	}, d = () => {
+		r > 1 && i(r - 1);
+	}, f = () => i(1), p = () => i(c), m = (r - 1) * a, h = Math.min(m + a - 1, e - 1);
+	return {
+		page: r,
+		pageSize: a,
+		totalPages: c,
+		setPage: i,
+		setPageSize: l,
+		nextPage: u,
+		prevPage: d,
+		firstPage: f,
+		lastPage: p,
+		canNextPage: r < c,
+		canPrevPage: r > 1,
+		startIndex: m,
+		endIndex: h
+	};
+}
+//#endregion
+export { g as WakaPagination, g as default, _ as usePagination };

package/dist/components/waka-password-strength/index.cjs.js

@@ -0,0 +1,25 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js");let n=require("react");n=e.__toESM(n);let r=require("lucide-react"),i=require("react/jsx-runtime");var a={weak:{label:`Weak`,color:`bg-red-500`,bgColor:`bg-red-500/20`,percent:20},fair:{label:`Fair`,color:`bg-orange-500`,bgColor:`bg-orange-500/20`,percent:40},good:{label:`Good`,color:`bg-yellow-500`,bgColor:`bg-yellow-500/20`,percent:60},strong:{label:`Strong`,color:`bg-lime-500`,bgColor:`bg-lime-500/20`,percent:80},"very-strong":{label:`Very Strong`,color:`bg-green-500`,bgColor:`bg-green-500/20`,percent:100}},o=e=>{let{minLength:t=8,requireUppercase:n=!0,requireLowercase:r=!0,requireNumber:i=!0,requireSpecialChar:a=!0}=e,o=[];return o.push({key:`minLength`,label:`At least ${t} characters`,validate:e=>e.length>=t,required:!0}),n&&o.push({key:`uppercase`,label:`Contains uppercase letter`,validate:e=>/[A-Z]/.test(e),required:!0}),r&&o.push({key:`lowercase`,label:`Contains lowercase letter`,validate:e=>/[a-z]/.test(e),required:!0}),i&&o.push({key:`number`,label:`Contains number`,validate:e=>/[0-9]/.test(e),required:!0}),a&&o.push({key:`specialChar`,label:`Contains special character`,validate:e=>/[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(e),required:!0}),o};function s(e,t={}){let{customRequirements:r=[],overrideRequirements:i}=t,a=n.useMemo(()=>i||[...o(t),...r],[t.minLength,t.requireUppercase,t.requireLowercase,t.requireNumber,t.requireSpecialChar,r,i]);return n.useMemo(()=>{if(!e)return{level:`weak`,score:0,metRequirements:[],unmetRequirements:a.map(e=>e.key),isValid:!1};let t=[],n=[],r=0,i=0;a.forEach(a=>{a.validate(e)?(t.push(a.key),a.required!==!1&&r++):n.push(a.key),a.required!==!1&&i++});let o=i>0?r/i*100:0,s=Math.min(20,Math.max(0,e.length-8)*2),c=Math.min(10,t.length*2),l=Math.min(100,o+s+c),u;return u=l<20?`weak`:l<40?`fair`:l<60?`good`:l<80?`strong`:`very-strong`,{level:u,score:l,metRequirements:t,unmetRequirements:n,isValid:r===i}},[e,a])}function c({level:e,score:r,animated:o=!0,size:s=`default`,showLabel:c=!0,className:l}){let[u,d]=n.useState(0),f=a[e];return n.useEffect(()=>{if(!o){d(r);return}let e=u,t=r-e,n=Date.now(),i=()=>{let r=Date.now()-n,a=Math.min(r/300,1),o=1-(1-a)**3;d(e+t*o),a<1&&requestAnimationFrame(i)};requestAnimationFrame(i)},[r,o]),(0,i.jsxs)(`div`,{className:t.cn(`space-y-1.5`,l),children:[c&&(0,i.jsxs)(`div`,{className:`flex items-center justify-between text-sm`,children:[(0,i.jsx)(`span`,{className:`text-muted-foreground`,children:`Password strength`}),(0,i.jsx)(`span`,{className:t.cn(`font-medium transition-colors duration-300`,e===`weak`&&`text-red-500`,e===`fair`&&`text-orange-500`,e===`good`&&`text-yellow-500`,e===`strong`&&`text-lime-500`,e===`very-strong`&&`text-green-500`),children:f.label})]}),(0,i.jsx)(`div`,{className:t.cn(`relative w-full overflow-hidden rounded-full bg-muted`,{sm:`h-1`,default:`h-2`,lg:`h-3`}[s]),children:(0,i.jsx)(`div`,{className:t.cn(`h-full rounded-full transition-all duration-300 ease-out`,f.color,o&&`animate-strength-glow`),style:{width:`${u}%`},children:o&&(0,i.jsx)(`div`,{className:`absolute inset-0 overflow-hidden rounded-full`,children:(0,i.jsx)(`div`,{className:`animate-strength-shine absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent`})})})}),(0,i.jsx)(`style`,{children:`
+        @keyframes strength-shine {
+          0% { transform: translateX(-100%); }
+          50%, 100% { transform: translateX(100%); }
+        }
+        @keyframes strength-glow {
+          0%, 100% { opacity: 1; }
+          50% { opacity: 0.8; }
+        }
+        .animate-strength-shine {
+          animation: strength-shine 2s ease-in-out infinite;
+        }
+        .animate-strength-glow {
+          animation: strength-glow 2s ease-in-out infinite;
+        }
+      `})]})}function l({requirement:e,isMet:n,animated:a=!0,size:o=`default`}){let s={sm:{text:`text-xs`,icon:`h-3 w-3`},default:{text:`text-sm`,icon:`h-4 w-4`},lg:{text:`text-base`,icon:`h-5 w-5`}}[o];return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-2 transition-all duration-200`,s.text,n?`text-green-600 dark:text-green-400`:`text-muted-foreground`),children:[(0,i.jsx)(`div`,{className:t.cn(`flex items-center justify-center rounded-full transition-all duration-200`,n?`bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400`:`bg-muted text-muted-foreground`,a&&n&&`animate-requirement-check`),style:{padding:`2px`},children:n?(0,i.jsx)(r.Check,{className:s.icon,strokeWidth:3}):(0,i.jsx)(r.X,{className:s.icon,strokeWidth:2})}),(0,i.jsx)(`span`,{className:t.cn(n&&`line-through opacity-70`),children:e.label}),(0,i.jsx)(`style`,{children:`
+        @keyframes requirement-check {
+          0% { transform: scale(0.5); }
+          50% { transform: scale(1.2); }
+          100% { transform: scale(1); }
+        }
+        .animate-requirement-check {
+          animation: requirement-check 0.3s ease-out;
+        }
+      `})]})}function u({requirements:e,metRequirements:n,animated:r=!0,size:a=`default`,className:o}){return(0,i.jsx)(`div`,{className:t.cn(`space-y-2`,o),children:e.map(e=>(0,i.jsx)(l,{requirement:e,isMet:n.includes(e.key),animated:r,size:a},e.key))})}function d({value:e,onChange:a,showToggle:o=!0,placeholder:s=`Enter password`,label:c,disabled:l=!1,error:u,size:d=`default`,strengthLevel:f,className:p}){let[m,h]=n.useState(!1),g=n.useId(),_={sm:{input:`h-8 text-sm px-3`,icon:`h-4 w-4`,button:`h-8 w-8`},default:{input:`h-10 text-base px-4`,icon:`h-5 w-5`,button:`h-10 w-10`},lg:{input:`h-12 text-lg px-5`,icon:`h-6 w-6`,button:`h-12 w-12`}}[d],v=f?t.cn(f===`weak`&&`focus-visible:ring-red-500/50`,f===`fair`&&`focus-visible:ring-orange-500/50`,f===`good`&&`focus-visible:ring-yellow-500/50`,f===`strong`&&`focus-visible:ring-lime-500/50`,f===`very-strong`&&`focus-visible:ring-green-500/50`):``;return(0,i.jsxs)(`div`,{className:t.cn(`space-y-1.5`,p),children:[c&&(0,i.jsx)(`label`,{htmlFor:g,className:`text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70`,children:c}),(0,i.jsxs)(`div`,{className:`relative`,children:[(0,i.jsx)(`div`,{className:`pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3`,children:f===`very-strong`||f===`strong`?(0,i.jsx)(r.ShieldCheck,{className:t.cn(_.icon,`text-green-500`)}):f===`weak`?(0,i.jsx)(r.ShieldAlert,{className:t.cn(_.icon,`text-red-500`)}):(0,i.jsx)(r.Shield,{className:t.cn(_.icon,`text-muted-foreground`)})}),(0,i.jsx)(`input`,{id:g,type:m?`text`:`password`,value:e,onChange:e=>a(e.target.value),placeholder:s,disabled:l,className:t.cn(`flex w-full rounded-md border border-input bg-background ring-offset-background`,`file:border-0 file:bg-transparent file:text-sm file:font-medium`,`placeholder:text-muted-foreground`,`focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2`,`disabled:cursor-not-allowed disabled:opacity-50`,`transition-all duration-200`,_.input,`pl-10`,o&&`pr-10`,u&&`border-destructive focus-visible:ring-destructive`,v)}),o&&(0,i.jsx)(`button`,{type:`button`,onClick:()=>h(!m),disabled:l,className:t.cn(`absolute inset-y-0 right-0 flex items-center justify-center`,`text-muted-foreground hover:text-foreground`,`transition-colors duration-200`,`disabled:cursor-not-allowed disabled:opacity-50`,_.button),"aria-label":m?`Hide password`:`Show password`,children:m?(0,i.jsx)(r.EyeOff,{className:_.icon}):(0,i.jsx)(r.Eye,{className:_.icon})})]}),u&&(0,i.jsx)(`p`,{className:`text-sm text-destructive`,children:u})]})}function f({password:e,onPasswordChange:r,minLength:a=8,showInput:l=!0,showToggle:f=!0,showStrengthBar:p=!0,showChecklist:m=!0,showStrengthLabel:h=!0,animated:g=!0,customRequirements:_=[],overrideRequirements:v,requireUppercase:y=!0,requireLowercase:b=!0,requireNumber:x=!0,requireSpecialChar:S=!0,size:C=`default`,placeholder:w=`Enter password`,label:T,disabled:E=!1,error:D,className:O,onStrengthChange:k}){let A=s(e,{minLength:a,customRequirements:_,overrideRequirements:v,requireUppercase:y,requireLowercase:b,requireNumber:x,requireSpecialChar:S}),j=n.useMemo(()=>v||[...o({minLength:a,requireUppercase:y,requireLowercase:b,requireNumber:x,requireSpecialChar:S}),..._],[a,y,b,x,S,_,v]),M=n.useRef(null);return n.useEffect(()=>{k&&(!M.current||M.current.level!==A.level||M.current.score!==A.score)&&(k(A),M.current=A)},[A,k]),(0,i.jsxs)(`div`,{className:t.cn(`flex flex-col`,{sm:`gap-3`,default:`gap-4`,lg:`gap-5`}[C],O),children:[l&&r&&(0,i.jsx)(d,{value:e,onChange:r,showToggle:f,placeholder:w,label:T,disabled:E,error:D,size:C,strengthLevel:e.length>0?A.level:void 0}),p&&e.length>0&&(0,i.jsx)(c,{level:A.level,score:A.score,animated:g,size:C,showLabel:h}),m&&(0,i.jsx)(u,{requirements:j,metRequirements:A.metRequirements,animated:g,size:C})]})}function p({password:e,minLength:n=8,requireUppercase:r=!0,requireLowercase:o=!0,requireNumber:c=!0,requireSpecialChar:l=!0,className:u}){let{level:d,score:f}=s(e,{minLength:n,requireUppercase:r,requireLowercase:o,requireNumber:c,requireSpecialChar:l});if(!e)return null;let p=a[d];return(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-2`,u),children:[(0,i.jsx)(`div`,{className:`flex gap-1`,children:[`weak`,`fair`,`good`,`strong`,`very-strong`].map((e,n)=>(0,i.jsx)(`div`,{className:t.cn(`h-1 w-4 rounded-full transition-all duration-300`,n<=[`weak`,`fair`,`good`,`strong`,`very-strong`].indexOf(d)?p.color:`bg-muted`)},e))}),(0,i.jsx)(`span`,{className:t.cn(`text-xs font-medium transition-colors duration-300`,d===`weak`&&`text-red-500`,d===`fair`&&`text-orange-500`,d===`good`&&`text-yellow-500`,d===`strong`&&`text-lime-500`,d===`very-strong`&&`text-green-500`),children:p.label})]})}exports.WakaPasswordStrength=f,exports.default=f,exports.WakaPasswordStrengthIndicator=p,exports.usePasswordStrength=s;

package/dist/components/waka-password-strength/index.d.ts

@@ -94,5 +94,5 @@ export interface WakaPasswordStrengthIndicatorProps {
     requireSpecialChar?: boolean;
     className?: string;
 }
-export declare function WakaPasswordStrengthIndicator({ password, minLength, requireUppercase, requireLowercase, requireNumber, requireSpecialChar, className, }: WakaPasswordStrengthIndicatorProps): import("react/jsx-runtime").JSX.Element;
+export declare function WakaPasswordStrengthIndicator({ password, minLength, requireUppercase, requireLowercase, requireNumber, requireSpecialChar, className, }: WakaPasswordStrengthIndicatorProps): import("react/jsx-runtime").JSX.Element | null;
 export default WakaPasswordStrength;

package/dist/components/waka-password-strength/index.es.js

@@ -0,0 +1,345 @@
+"use client";
+"use client";
+import { cn as e } from "../../utils/cn.es.js";
+import * as t from "react";
+import { Check as n, Eye as r, EyeOff as i, Shield as a, ShieldAlert as o, ShieldCheck as s, X as c } from "lucide-react";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+//#region src/components/waka-password-strength/index.tsx
+var d = {
+	weak: {
+		label: "Weak",
+		color: "bg-red-500",
+		bgColor: "bg-red-500/20",
+		percent: 20
+	},
+	fair: {
+		label: "Fair",
+		color: "bg-orange-500",
+		bgColor: "bg-orange-500/20",
+		percent: 40
+	},
+	good: {
+		label: "Good",
+		color: "bg-yellow-500",
+		bgColor: "bg-yellow-500/20",
+		percent: 60
+	},
+	strong: {
+		label: "Strong",
+		color: "bg-lime-500",
+		bgColor: "bg-lime-500/20",
+		percent: 80
+	},
+	"very-strong": {
+		label: "Very Strong",
+		color: "bg-green-500",
+		bgColor: "bg-green-500/20",
+		percent: 100
+	}
+}, f = (e) => {
+	let { minLength: t = 8, requireUppercase: n = !0, requireLowercase: r = !0, requireNumber: i = !0, requireSpecialChar: a = !0 } = e, o = [];
+	return o.push({
+		key: "minLength",
+		label: `At least ${t} characters`,
+		validate: (e) => e.length >= t,
+		required: !0
+	}), n && o.push({
+		key: "uppercase",
+		label: "Contains uppercase letter",
+		validate: (e) => /[A-Z]/.test(e),
+		required: !0
+	}), r && o.push({
+		key: "lowercase",
+		label: "Contains lowercase letter",
+		validate: (e) => /[a-z]/.test(e),
+		required: !0
+	}), i && o.push({
+		key: "number",
+		label: "Contains number",
+		validate: (e) => /[0-9]/.test(e),
+		required: !0
+	}), a && o.push({
+		key: "specialChar",
+		label: "Contains special character",
+		validate: (e) => /[!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?]/.test(e),
+		required: !0
+	}), o;
+};
+function p(e, n = {}) {
+	let { customRequirements: r = [], overrideRequirements: i } = n, a = t.useMemo(() => i || [...f(n), ...r], [
+		n.minLength,
+		n.requireUppercase,
+		n.requireLowercase,
+		n.requireNumber,
+		n.requireSpecialChar,
+		r,
+		i
+	]);
+	return t.useMemo(() => {
+		if (!e) return {
+			level: "weak",
+			score: 0,
+			metRequirements: [],
+			unmetRequirements: a.map((e) => e.key),
+			isValid: !1
+		};
+		let t = [], n = [], r = 0, i = 0;
+		a.forEach((a) => {
+			a.validate(e) ? (t.push(a.key), a.required !== !1 && r++) : n.push(a.key), a.required !== !1 && i++;
+		});
+		let o = i > 0 ? r / i * 100 : 0, s = Math.min(20, Math.max(0, e.length - 8) * 2), c = Math.min(10, t.length * 2), l = Math.min(100, o + s + c), u;
+		return u = l < 20 ? "weak" : l < 40 ? "fair" : l < 60 ? "good" : l < 80 ? "strong" : "very-strong", {
+			level: u,
+			score: l,
+			metRequirements: t,
+			unmetRequirements: n,
+			isValid: r === i
+		};
+	}, [e, a]);
+}
+function m({ level: n, score: r, animated: i = !0, size: a = "default", showLabel: o = !0, className: s }) {
+	let [c, f] = t.useState(0), p = d[n];
+	return t.useEffect(() => {
+		if (!i) {
+			f(r);
+			return;
+		}
+		let e = c, t = r - e, n = Date.now(), a = () => {
+			let r = Date.now() - n, i = Math.min(r / 300, 1), o = 1 - (1 - i) ** 3;
+			f(e + t * o), i < 1 && requestAnimationFrame(a);
+		};
+		requestAnimationFrame(a);
+	}, [r, i]), /* @__PURE__ */ u("div", {
+		className: e("space-y-1.5", s),
+		children: [
+			o && /* @__PURE__ */ u("div", {
+				className: "flex items-center justify-between text-sm",
+				children: [/* @__PURE__ */ l("span", {
+					className: "text-muted-foreground",
+					children: "Password strength"
+				}), /* @__PURE__ */ l("span", {
+					className: e("font-medium transition-colors duration-300", n === "weak" && "text-red-500", n === "fair" && "text-orange-500", n === "good" && "text-yellow-500", n === "strong" && "text-lime-500", n === "very-strong" && "text-green-500"),
+					children: p.label
+				})]
+			}),
+			/* @__PURE__ */ l("div", {
+				className: e("relative w-full overflow-hidden rounded-full bg-muted", {
+					sm: "h-1",
+					default: "h-2",
+					lg: "h-3"
+				}[a]),
+				children: /* @__PURE__ */ l("div", {
+					className: e("h-full rounded-full transition-all duration-300 ease-out", p.color, i && "animate-strength-glow"),
+					style: { width: `${c}%` },
+					children: i && /* @__PURE__ */ l("div", {
+						className: "absolute inset-0 overflow-hidden rounded-full",
+						children: /* @__PURE__ */ l("div", { className: "animate-strength-shine absolute inset-0 bg-gradient-to-r from-transparent via-white/30 to-transparent" })
+					})
+				})
+			}),
+			/* @__PURE__ */ l("style", { children: "\n        @keyframes strength-shine {\n          0% { transform: translateX(-100%); }\n          50%, 100% { transform: translateX(100%); }\n        }\n        @keyframes strength-glow {\n          0%, 100% { opacity: 1; }\n          50% { opacity: 0.8; }\n        }\n        .animate-strength-shine {\n          animation: strength-shine 2s ease-in-out infinite;\n        }\n        .animate-strength-glow {\n          animation: strength-glow 2s ease-in-out infinite;\n        }\n      " })
+		]
+	});
+}
+function h({ requirement: t, isMet: r, animated: i = !0, size: a = "default" }) {
+	let o = {
+		sm: {
+			text: "text-xs",
+			icon: "h-3 w-3"
+		},
+		default: {
+			text: "text-sm",
+			icon: "h-4 w-4"
+		},
+		lg: {
+			text: "text-base",
+			icon: "h-5 w-5"
+		}
+	}[a];
+	return /* @__PURE__ */ u("div", {
+		className: e("flex items-center gap-2 transition-all duration-200", o.text, r ? "text-green-600 dark:text-green-400" : "text-muted-foreground"),
+		children: [
+			/* @__PURE__ */ l("div", {
+				className: e("flex items-center justify-center rounded-full transition-all duration-200", r ? "bg-green-100 text-green-600 dark:bg-green-900/30 dark:text-green-400" : "bg-muted text-muted-foreground", i && r && "animate-requirement-check"),
+				style: { padding: "2px" },
+				children: r ? /* @__PURE__ */ l(n, {
+					className: o.icon,
+					strokeWidth: 3
+				}) : /* @__PURE__ */ l(c, {
+					className: o.icon,
+					strokeWidth: 2
+				})
+			}),
+			/* @__PURE__ */ l("span", {
+				className: e(r && "line-through opacity-70"),
+				children: t.label
+			}),
+			/* @__PURE__ */ l("style", { children: "\n        @keyframes requirement-check {\n          0% { transform: scale(0.5); }\n          50% { transform: scale(1.2); }\n          100% { transform: scale(1); }\n        }\n        .animate-requirement-check {\n          animation: requirement-check 0.3s ease-out;\n        }\n      " })
+		]
+	});
+}
+function g({ requirements: t, metRequirements: n, animated: r = !0, size: i = "default", className: a }) {
+	return /* @__PURE__ */ l("div", {
+		className: e("space-y-2", a),
+		children: t.map((e) => /* @__PURE__ */ l(h, {
+			requirement: e,
+			isMet: n.includes(e.key),
+			animated: r,
+			size: i
+		}, e.key))
+	});
+}
+function _({ value: n, onChange: c, showToggle: d = !0, placeholder: f = "Enter password", label: p, disabled: m = !1, error: h, size: g = "default", strengthLevel: _, className: v }) {
+	let [y, b] = t.useState(!1), x = t.useId(), S = {
+		sm: {
+			input: "h-8 text-sm px-3",
+			icon: "h-4 w-4",
+			button: "h-8 w-8"
+		},
+		default: {
+			input: "h-10 text-base px-4",
+			icon: "h-5 w-5",
+			button: "h-10 w-10"
+		},
+		lg: {
+			input: "h-12 text-lg px-5",
+			icon: "h-6 w-6",
+			button: "h-12 w-12"
+		}
+	}[g], C = _ ? e(_ === "weak" && "focus-visible:ring-red-500/50", _ === "fair" && "focus-visible:ring-orange-500/50", _ === "good" && "focus-visible:ring-yellow-500/50", _ === "strong" && "focus-visible:ring-lime-500/50", _ === "very-strong" && "focus-visible:ring-green-500/50") : "";
+	return /* @__PURE__ */ u("div", {
+		className: e("space-y-1.5", v),
+		children: [
+			p && /* @__PURE__ */ l("label", {
+				htmlFor: x,
+				className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+				children: p
+			}),
+			/* @__PURE__ */ u("div", {
+				className: "relative",
+				children: [
+					/* @__PURE__ */ l("div", {
+						className: "pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3",
+						children: _ === "very-strong" || _ === "strong" ? /* @__PURE__ */ l(s, { className: e(S.icon, "text-green-500") }) : _ === "weak" ? /* @__PURE__ */ l(o, { className: e(S.icon, "text-red-500") }) : /* @__PURE__ */ l(a, { className: e(S.icon, "text-muted-foreground") })
+					}),
+					/* @__PURE__ */ l("input", {
+						id: x,
+						type: y ? "text" : "password",
+						value: n,
+						onChange: (e) => c(e.target.value),
+						placeholder: f,
+						disabled: m,
+						className: e("flex w-full rounded-md border border-input bg-background ring-offset-background", "file:border-0 file:bg-transparent file:text-sm file:font-medium", "placeholder:text-muted-foreground", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "transition-all duration-200", S.input, "pl-10", d && "pr-10", h && "border-destructive focus-visible:ring-destructive", C)
+					}),
+					d && /* @__PURE__ */ l("button", {
+						type: "button",
+						onClick: () => b(!y),
+						disabled: m,
+						className: e("absolute inset-y-0 right-0 flex items-center justify-center", "text-muted-foreground hover:text-foreground", "transition-colors duration-200", "disabled:cursor-not-allowed disabled:opacity-50", S.button),
+						"aria-label": y ? "Hide password" : "Show password",
+						children: l(y ? i : r, { className: S.icon })
+					})
+				]
+			}),
+			h && /* @__PURE__ */ l("p", {
+				className: "text-sm text-destructive",
+				children: h
+			})
+		]
+	});
+}
+function v({ password: n, onPasswordChange: r, minLength: i = 8, showInput: a = !0, showToggle: o = !0, showStrengthBar: s = !0, showChecklist: c = !0, showStrengthLabel: d = !0, animated: h = !0, customRequirements: v = [], overrideRequirements: y, requireUppercase: b = !0, requireLowercase: x = !0, requireNumber: S = !0, requireSpecialChar: C = !0, size: w = "default", placeholder: T = "Enter password", label: E, disabled: D = !1, error: O, className: k, onStrengthChange: A }) {
+	let j = p(n, {
+		minLength: i,
+		customRequirements: v,
+		overrideRequirements: y,
+		requireUppercase: b,
+		requireLowercase: x,
+		requireNumber: S,
+		requireSpecialChar: C
+	}), M = t.useMemo(() => y || [...f({
+		minLength: i,
+		requireUppercase: b,
+		requireLowercase: x,
+		requireNumber: S,
+		requireSpecialChar: C
+	}), ...v], [
+		i,
+		b,
+		x,
+		S,
+		C,
+		v,
+		y
+	]), N = t.useRef(null);
+	return t.useEffect(() => {
+		A && (!N.current || N.current.level !== j.level || N.current.score !== j.score) && (A(j), N.current = j);
+	}, [j, A]), /* @__PURE__ */ u("div", {
+		className: e("flex flex-col", {
+			sm: "gap-3",
+			default: "gap-4",
+			lg: "gap-5"
+		}[w], k),
+		children: [
+			a && r && /* @__PURE__ */ l(_, {
+				value: n,
+				onChange: r,
+				showToggle: o,
+				placeholder: T,
+				label: E,
+				disabled: D,
+				error: O,
+				size: w,
+				strengthLevel: n.length > 0 ? j.level : void 0
+			}),
+			s && n.length > 0 && /* @__PURE__ */ l(m, {
+				level: j.level,
+				score: j.score,
+				animated: h,
+				size: w,
+				showLabel: d
+			}),
+			c && /* @__PURE__ */ l(g, {
+				requirements: M,
+				metRequirements: j.metRequirements,
+				animated: h,
+				size: w
+			})
+		]
+	});
+}
+function y({ password: t, minLength: n = 8, requireUppercase: r = !0, requireLowercase: i = !0, requireNumber: a = !0, requireSpecialChar: o = !0, className: s }) {
+	let { level: c, score: f } = p(t, {
+		minLength: n,
+		requireUppercase: r,
+		requireLowercase: i,
+		requireNumber: a,
+		requireSpecialChar: o
+	});
+	if (!t) return null;
+	let m = d[c];
+	return /* @__PURE__ */ u("div", {
+		className: e("flex items-center gap-2", s),
+		children: [/* @__PURE__ */ l("div", {
+			className: "flex gap-1",
+			children: [
+				"weak",
+				"fair",
+				"good",
+				"strong",
+				"very-strong"
+			].map((t, n) => /* @__PURE__ */ l("div", { className: e("h-1 w-4 rounded-full transition-all duration-300", n <= [
+				"weak",
+				"fair",
+				"good",
+				"strong",
+				"very-strong"
+			].indexOf(c) ? m.color : "bg-muted") }, t))
+		}), /* @__PURE__ */ l("span", {
+			className: e("text-xs font-medium transition-colors duration-300", c === "weak" && "text-red-500", c === "fair" && "text-orange-500", c === "good" && "text-yellow-500", c === "strong" && "text-lime-500", c === "very-strong" && "text-green-500"),
+			children: m.label
+		})]
+	});
+}
+//#endregion
+export { v as WakaPasswordStrength, v as default, y as WakaPasswordStrengthIndicator, p as usePasswordStrength };

package/dist/components/waka-payment-method-picker/index.cjs.js

@@ -0,0 +1 @@
+"use client";"use client";const e=require("../../_virtual/_rolldown/runtime.cjs.js"),t=require("../../utils/cn.cjs.js");let n=require("react");n=e.__toESM(n);let r=require("lucide-react"),i=require("react/jsx-runtime");var a=({className:e})=>(0,i.jsxs)(`svg`,{viewBox:`0 0 48 32`,className:e,fill:`none`,children:[(0,i.jsx)(`rect`,{width:`48`,height:`32`,rx:`4`,fill:`#1A1F71`}),(0,i.jsx)(`path`,{d:`M19.5 21H17L18.8 11H21.3L19.5 21ZM15.1 11L12.7 18L12.4 16.5L11.5 12C11.5 12 11.4 11 10 11H6.1L6 11.2C6 11.2 7.5 11.5 9.3 12.6L11.5 21H14.1L17.9 11H15.1ZM35 21H37.3L35.3 11H33.2C32.1 11 31.8 11.9 31.8 11.9L28 21H30.6L31.1 19.5H34.3L35 21ZM31.9 17.5L33.3 13.5L34.1 17.5H31.9ZM28.4 13.5L28.7 11.8C28.7 11.8 27.3 11.2 25.8 11.2C24.2 11.2 21.4 11.9 21.4 14.5C21.4 17 24.9 17 24.9 18.3C24.9 19.6 21.7 19.3 20.4 18.3L20.1 20.1C20.1 20.1 21.5 20.8 23.5 20.8C25.5 20.8 27.6 19.7 27.6 17.3C27.6 14.8 24 14.5 24 13.4C24 12.3 26.5 12.4 27.7 13.1L28.4 13.5Z`,fill:`white`})]}),o=({className:e})=>(0,i.jsxs)(`svg`,{viewBox:`0 0 48 32`,className:e,fill:`none`,children:[(0,i.jsx)(`rect`,{width:`48`,height:`32`,rx:`4`,fill:`#252525`}),(0,i.jsx)(`circle`,{cx:`19`,cy:`16`,r:`9`,fill:`#EB001B`}),(0,i.jsx)(`circle`,{cx:`29`,cy:`16`,r:`9`,fill:`#F79E1B`}),(0,i.jsx)(`path`,{d:`M24 9.5C25.9 11 27.1 13.4 27.1 16C27.1 18.6 25.9 21 24 22.5C22.1 21 20.9 18.6 20.9 16C20.9 13.4 22.1 11 24 9.5Z`,fill:`#FF5F00`})]}),s=({className:e})=>(0,i.jsxs)(`svg`,{viewBox:`0 0 48 32`,className:e,fill:`none`,children:[(0,i.jsx)(`rect`,{width:`48`,height:`32`,rx:`4`,fill:`#006FCF`}),(0,i.jsx)(`path`,{d:`M10 20V12H14.5L15.5 13.5L16.5 12H35V19.5C35 19.5 34.3 20 33.5 20H23.5L22.5 18.5V20H19V18C19 18 18.5 18.5 17.5 18.5H16.5V20H10ZM11 13V19H13.5L15.5 16L17.5 19H20V15.5L22 19H24L26 15.5V19H28V13H25L23 16.5L21 13H11ZM29 13V19H31V17H33C34.1 17 35 16.1 35 15C35 13.9 34.1 13 33 13H29ZM31 14.5H32.5C32.8 14.5 33 14.7 33 15C33 15.3 32.8 15.5 32.5 15.5H31V14.5Z`,fill:`white`})]}),c=({className:e})=>(0,i.jsxs)(`svg`,{viewBox:`0 0 48 32`,className:e,fill:`none`,children:[(0,i.jsx)(`rect`,{width:`48`,height:`32`,rx:`4`,fill:`#003087`}),(0,i.jsx)(`path`,{d:`M19.5 8H25C27.8 8 29.5 9.5 29 12.5C28.5 16 26 17.5 23.5 17.5H21.5L20.5 23H17L19.5 8Z`,fill:`#009CDE`}),(0,i.jsx)(`path`,{d:`M22 10H26.5C28.5 10 29.5 11 29.2 13C28.8 15.5 27 16.5 25 16.5H23.5L22.8 20.5H20L22 10Z`,fill:`white`})]}),l=({className:e})=>(0,i.jsxs)(`svg`,{viewBox:`0 0 48 32`,className:e,fill:`none`,children:[(0,i.jsx)(`rect`,{width:`48`,height:`32`,rx:`4`,fill:`#000000`}),(0,i.jsx)(`path`,{d:`M15.5 11.5C16.2 10.6 16.7 9.4 16.5 8.2C15.4 8.3 14.1 9 13.3 9.9C12.6 10.7 12 11.9 12.2 13.1C13.4 13.2 14.7 12.4 15.5 11.5Z`,fill:`white`}),(0,i.jsx)(`path`,{d:`M16.5 13.3C14.9 13.2 13.5 14.2 12.7 14.2C11.9 14.2 10.7 13.4 9.4 13.4C7.7 13.4 6.1 14.4 5.2 16C3.3 19.2 4.7 24 6.5 26.6C7.4 27.9 8.5 29.3 9.9 29.3C11.2 29.2 11.7 28.4 13.3 28.4C14.8 28.4 15.3 29.3 16.7 29.2C18.1 29.2 19.1 27.9 20 26.6C21 25.1 21.4 23.7 21.5 23.6C21.4 23.6 18.4 22.4 18.4 18.9C18.3 16 20.7 14.6 20.8 14.5C19.4 12.5 17.3 12.3 16.5 13.3Z`,fill:`white`,transform:`scale(0.6) translate(12, 1)`}),(0,i.jsx)(`text`,{x:`24`,y:`19`,fill:`white`,fontSize:`8`,fontFamily:`system-ui`,fontWeight:`600`,children:`Pay`})]}),u=({className:e})=>(0,i.jsxs)(`svg`,{viewBox:`0 0 48 32`,className:e,fill:`none`,children:[(0,i.jsx)(`rect`,{width:`48`,height:`32`,rx:`4`,fill:`#FFFFFF`,stroke:`#E0E0E0`}),(0,i.jsx)(`path`,{d:`M22.8 16.6V20.4H21.4V10H25.2C26.1 10 26.9 10.3 27.6 10.9C28.3 11.5 28.6 12.3 28.6 13.3C28.6 14.3 28.3 15.1 27.6 15.7C26.9 16.3 26.1 16.6 25.1 16.6H22.8ZM22.8 11.3V15.3H25.2C25.7 15.3 26.2 15.1 26.5 14.7C26.9 14.3 27.1 13.9 27.1 13.3C27.1 12.8 26.9 12.3 26.5 11.9C26.1 11.5 25.7 11.3 25.1 11.3H22.8Z`,fill:`#5F6368`}),(0,i.jsx)(`path`,{d:`M32.8 13.4C33.9 13.4 34.8 13.7 35.5 14.4C36.2 15.1 36.5 15.9 36.5 17V20.4H35.1V19.3H35C34.4 20.2 33.6 20.6 32.5 20.6C31.6 20.6 30.8 20.3 30.2 19.8C29.6 19.3 29.3 18.6 29.3 17.8C29.3 17 29.6 16.3 30.3 15.8C30.9 15.3 31.8 15 32.9 15C33.8 15 34.6 15.2 35.1 15.5V15.2C35.1 14.7 34.9 14.2 34.5 13.9C34.1 13.5 33.6 13.3 33 13.3C32.1 13.3 31.5 13.7 31 14.4L29.8 13.7C30.5 12.8 31.5 13.4 32.8 13.4ZM30.8 17.8C30.8 18.2 31 18.5 31.3 18.8C31.6 19.1 32 19.2 32.5 19.2C33.2 19.2 33.8 19 34.3 18.5C34.8 18 35.1 17.5 35.1 16.9C34.6 16.5 33.9 16.3 33.1 16.3C32.5 16.3 32 16.5 31.6 16.8C31.1 17.1 30.8 17.4 30.8 17.8Z`,fill:`#5F6368`}),(0,i.jsx)(`path`,{d:`M43 13.6L38.7 23.3H37.2L38.8 19.9L36 13.6H37.6L39.5 18.3L41.4 13.6H43Z`,fill:`#5F6368`}),(0,i.jsx)(`path`,{d:`M16.5 15.5C16.5 15.1 16.5 14.7 16.4 14.3H10.5V16.6H13.9C13.8 17.3 13.4 18 12.7 18.4V19.9H14.7C15.9 18.8 16.5 17.3 16.5 15.5Z`,fill:`#4285F4`}),(0,i.jsx)(`path`,{d:`M10.5 21.3C12.1 21.3 13.5 20.8 14.7 19.9L12.7 18.4C12.1 18.8 11.4 19 10.5 19C9 19 7.7 18 7.2 16.7H5.2V18.2C6.3 20.2 8.3 21.3 10.5 21.3Z`,fill:`#34A853`}),(0,i.jsx)(`path`,{d:`M7.2 16.7C7 16.2 6.9 15.6 6.9 15C6.9 14.4 7 13.8 7.2 13.3V11.8H5.2C4.6 13 4.2 14.4 4.2 15C4.2 15.6 4.6 17 5.2 18.2L7.2 16.7Z`,fill:`#FBBC05`}),(0,i.jsx)(`path`,{d:`M10.5 11C11.5 11 12.4 11.4 13.1 12L14.8 10.3C13.5 9.1 12.1 8.5 10.5 8.5C8.3 8.5 6.3 9.6 5.2 11.8L7.2 13.3C7.7 12 9 11 10.5 11Z`,fill:`#EA4335`})]}),d=({className:e})=>(0,i.jsxs)(`svg`,{viewBox:`0 0 48 32`,className:e,fill:`none`,children:[(0,i.jsx)(`rect`,{width:`48`,height:`32`,rx:`4`,fill:`#1E3A5F`}),(0,i.jsx)(`path`,{d:`M24 7L10 14V16H38V14L24 7Z`,fill:`white`}),(0,i.jsx)(`rect`,{x:`12`,y:`17`,width:`3`,height:`7`,fill:`white`}),(0,i.jsx)(`rect`,{x:`18`,y:`17`,width:`3`,height:`7`,fill:`white`}),(0,i.jsx)(`rect`,{x:`27`,y:`17`,width:`3`,height:`7`,fill:`white`}),(0,i.jsx)(`rect`,{x:`33`,y:`17`,width:`3`,height:`7`,fill:`white`}),(0,i.jsx)(`rect`,{x:`10`,y:`25`,width:`28`,height:`2`,fill:`white`})]}),f=[{type:`credit_card`,label:`Credit or Debit Card`,description:`Pay securely with your card`,acceptedBrands:[`visa`,`mastercard`,`amex`]},{type:`paypal`,label:`PayPal`,description:`Fast and secure payment`},{type:`apple_pay`,label:`Apple Pay`,description:`Pay with Face ID or Touch ID`},{type:`google_pay`,label:`Google Pay`,description:`Fast checkout with Google`},{type:`bank_transfer`,label:`Bank Transfer`,description:`Direct bank payment`}],p=({type:e,brand:n,className:f})=>{let p=t.cn(`h-8 w-12 rounded`,f);if(e===`credit_card`&&n)switch(n){case`visa`:return(0,i.jsx)(a,{className:p});case`mastercard`:return(0,i.jsx)(o,{className:p});case`amex`:return(0,i.jsx)(s,{className:p});default:return(0,i.jsx)(r.CreditCard,{className:t.cn(`h-6 w-6 text-muted-foreground`,f)})}switch(e){case`credit_card`:return(0,i.jsx)(r.CreditCard,{className:t.cn(`h-6 w-6 text-muted-foreground`,f)});case`paypal`:return(0,i.jsx)(c,{className:p});case`apple_pay`:return(0,i.jsx)(l,{className:p});case`google_pay`:return(0,i.jsx)(u,{className:p});case`bank_transfer`:return(0,i.jsx)(d,{className:p});default:return(0,i.jsx)(r.CreditCard,{className:t.cn(`h-6 w-6 text-muted-foreground`,f)})}},m=({brands:e,className:n})=>(0,i.jsxs)(`div`,{className:t.cn(`flex items-center gap-1`,n),children:[e.includes(`visa`)&&(0,i.jsx)(a,{className:`h-6 w-9`}),e.includes(`mastercard`)&&(0,i.jsx)(o,{className:`h-6 w-9`}),e.includes(`amex`)&&(0,i.jsx)(s,{className:`h-6 w-9`})]});function h({value:e,onChange:a,savedMethods:o=[],options:s=f,showAddNew:c=!0,onAddNew:l,onDelete:u,allowDelete:d=!0,variant:h=`card`,size:v=`md`,layout:y=`list`,columns:b=2,showBrandIcons:x=!0,disabled:S=!1,className:C,label:w,error:T,required:E=!1}){let[D,O]=n.useState(null),k={sm:{container:`p-3`,text:`text-sm`,subtext:`text-xs`,icon:`h-5 w-8`,gap:`gap-2`},md:{container:`p-4`,text:`text-base`,subtext:`text-sm`,icon:`h-6 w-10`,gap:`gap-3`},lg:{container:`p-5`,text:`text-lg`,subtext:`text-base`,icon:`h-8 w-12`,gap:`gap-4`}},A={1:`grid-cols-1`,2:`grid-cols-1 sm:grid-cols-2`,3:`grid-cols-1 sm:grid-cols-2 lg:grid-cols-3`},j=(e,t)=>{S||a?.(e,t)},M=e=>{S||l?.(e)},N=(e,t)=>{e.stopPropagation(),!S&&u?.(t)},P=e=>o.filter(t=>t.type===e),F=t=>e===t,I=e=>(0,i.jsx)(`div`,{className:t.cn(`h-5 w-5 rounded-full border-2 flex items-center justify-center transition-all duration-200`,e?`border-primary bg-primary`:`border-muted-foreground/30`),children:e&&(0,i.jsx)(`div`,{className:`h-2 w-2 rounded-full bg-primary-foreground animate-in zoom-in-50 duration-200`})}),L=e=>(0,i.jsx)(`div`,{className:t.cn(`h-6 w-6 rounded-full flex items-center justify-center transition-all duration-200`,e?`bg-primary text-primary-foreground`:`bg-muted text-muted-foreground`),children:e&&(0,i.jsx)(r.Check,{className:`h-4 w-4 animate-in zoom-in-50 duration-200`})}),R=e=>{let n=F(e.id);return(0,i.jsx)(`button`,{type:`button`,onClick:()=>j(e.id,e),disabled:S,className:t.cn(`group relative w-full text-left rounded-lg border transition-all duration-200`,k[v].container,h===`card`&&[`bg-card hover:bg-accent/50`,n&&`border-primary ring-2 ring-primary/20 bg-primary/5`,!n&&`border-border hover:border-primary/50`],h===`radio`&&[`bg-transparent hover:bg-accent/30`,n&&`border-primary`,!n&&`border-border`],S&&`opacity-50 cursor-not-allowed`,!S&&`cursor-pointer`),children:(0,i.jsxs)(`div`,{className:t.cn(`flex items-center`,k[v].gap),children:[h===`radio`&&I(n),(0,i.jsx)(p,{type:e.type,brand:e.brand,className:k[v].icon}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsx)(`div`,{className:t.cn(`font-medium truncate`,k[v].text),children:e.label||g(e)}),(0,i.jsx)(`div`,{className:t.cn(`text-muted-foreground`,k[v].subtext),children:_(e)})]}),e.isDefault&&(0,i.jsx)(`span`,{className:`px-2 py-0.5 text-xs font-medium bg-primary/10 text-primary rounded-full`,children:`Default`}),h===`card`&&L(n),d&&u&&(0,i.jsx)(`button`,{type:`button`,onClick:t=>N(t,e.id),className:t.cn(`opacity-0 group-hover:opacity-100 p-1.5 rounded-md transition-all duration-200`,`text-muted-foreground hover:text-destructive hover:bg-destructive/10`),"aria-label":`Delete ${e.label||`payment method`}`,children:(0,i.jsx)(r.Trash2,{className:`h-4 w-4`})})]})},e.id)};return(0,i.jsxs)(`div`,{className:t.cn(`w-full`,C),children:[w&&(0,i.jsxs)(`label`,{className:`block text-sm font-medium mb-2`,children:[w,E&&(0,i.jsx)(`span`,{className:`text-destructive ml-1`,children:`*`})]}),(0,i.jsxs)(`div`,{className:t.cn(y===`list`&&`space-y-3`,y===`grid`&&t.cn(`grid gap-3`,A[b])),role:`radiogroup`,"aria-label":w||`Payment method selection`,children:[o.length>0&&!s.length&&(0,i.jsx)(i.Fragment,{children:o.map(R)}),s.map(e=>{let n=P(e.type),a=F(e.type),o=D===e.type;return(0,i.jsxs)(`div`,{className:`space-y-2`,children:[(0,i.jsx)(`button`,{type:`button`,onClick:()=>{n.length>0?O(o?null:e.type):j(e.type,e)},disabled:S||e.disabled,className:t.cn(`group relative w-full text-left rounded-lg border transition-all duration-200`,k[v].container,h===`card`&&[`bg-card hover:bg-accent/50`,a&&`border-primary ring-2 ring-primary/20 bg-primary/5`,!a&&`border-border hover:border-primary/50`],h===`radio`&&[`bg-transparent hover:bg-accent/30`,a&&`border-primary`,!a&&`border-border`],(S||e.disabled)&&`opacity-50 cursor-not-allowed`,!(S||e.disabled)&&`cursor-pointer`),children:(0,i.jsxs)(`div`,{className:t.cn(`flex items-center`,k[v].gap),children:[h===`radio`&&I(a),(0,i.jsx)(p,{type:e.type,className:k[v].icon}),(0,i.jsxs)(`div`,{className:`flex-1 min-w-0`,children:[(0,i.jsx)(`div`,{className:t.cn(`font-medium`,k[v].text),children:e.label}),e.description&&(0,i.jsx)(`div`,{className:t.cn(`text-muted-foreground`,k[v].subtext),children:e.description})]}),e.type===`credit_card`&&x&&e.acceptedBrands&&(0,i.jsx)(m,{brands:e.acceptedBrands}),h===`card`&&n.length===0&&L(a),n.length>0&&(0,i.jsxs)(`span`,{className:t.cn(`px-2 py-0.5 text-xs font-medium rounded-full`,`bg-muted text-muted-foreground`),children:[n.length,` saved`]})]})}),o&&n.length>0&&(0,i.jsxs)(`div`,{className:`ml-4 pl-4 border-l-2 border-muted space-y-2 animate-in slide-in-from-top-2 duration-200`,children:[n.map(R),c&&(0,i.jsxs)(`button`,{type:`button`,onClick:()=>M(e.type),disabled:S,className:t.cn(`w-full flex items-center gap-3 p-3 rounded-lg border border-dashed`,`text-muted-foreground hover:text-foreground hover:border-primary/50`,`transition-all duration-200`,S&&`opacity-50 cursor-not-allowed`),children:[(0,i.jsx)(r.Plus,{className:`h-5 w-5`}),(0,i.jsxs)(`span`,{className:k[v].subtext,children:[`Add new `,e.label.toLowerCase()]})]})]})]},e.type)}),c&&!s.length&&(0,i.jsxs)(`button`,{type:`button`,onClick:()=>M(`credit_card`),disabled:S,className:t.cn(`w-full flex items-center justify-center gap-3 rounded-lg border-2 border-dashed`,k[v].container,`text-muted-foreground hover:text-foreground hover:border-primary/50`,`transition-all duration-200`,S&&`opacity-50 cursor-not-allowed`),children:[(0,i.jsx)(r.Plus,{className:`h-5 w-5`}),(0,i.jsx)(`span`,{className:t.cn(`font-medium`,k[v].text),children:`Add Payment Method`})]})]}),T&&(0,i.jsx)(`p`,{className:`mt-2 text-sm text-destructive`,children:T})]})}function g(e){switch(e.type){case`credit_card`:let t=e.brand?e.brand.charAt(0).toUpperCase()+e.brand.slice(1):`Card`;return e.last4?`${t} ending in ${e.last4}`:t;case`paypal`:return e.email||`PayPal`;case`apple_pay`:return`Apple Pay`;case`google_pay`:return`Google Pay`;case`bank_transfer`:return e.bankName||`Bank Account`;default:return`Payment Method`}}function _(e){switch(e.type){case`credit_card`:return e.expiryDate?`Expires ${e.expiryDate}`:e.last4?`**** **** **** ${e.last4}`:``;case`paypal`:return e.email||``;case`bank_transfer`:return e.last4?`Account ending in ${e.last4}`:``;default:return``}}function v(e){return(0,i.jsx)(h,{variant:`card`,layout:`grid`,columns:2,...e})}function y(e){return(0,i.jsx)(h,{variant:`radio`,layout:`list`,...e})}function b(e){return(0,i.jsx)(h,{variant:`radio`,size:`sm`,...e})}function x(e=[],t=f){let[r,i]=n.useState(e.find(e=>e.isDefault)?.id||e[0]?.id),[a,o]=n.useState(e);return{value:r,onChange:i,selectedMethod:n.useMemo(()=>{let e=a.find(e=>e.id===r);if(e)return e;let n=t.find(e=>e.type===r);if(n)return{type:n.type,id:n.type}},[r,a,t]),methods:a,addMethod:n.useCallback(e=>{o(t=>[...t,e]),i(e.id)},[]),removeMethod:n.useCallback(e=>{o(t=>t.filter(t=>t.id!==e)),r===e&&i(a[0]?.id)},[r,a]),setDefault:n.useCallback(e=>{o(t=>t.map(t=>({...t,isDefault:t.id===e})))},[]),options:t}}exports.WakaPaymentMethodPicker=h,exports.default=h,exports.WakaPaymentMethodPickerCards=v,exports.WakaPaymentMethodPickerCompact=b,exports.WakaPaymentMethodPickerRadio=y,exports.usePaymentMethodPicker=x;

package/dist/components/waka-payment-method-picker/index.d.ts

@@ -76,9 +76,9 @@ export declare function WakaPaymentMethodPickerCards(props: Omit<WakaPaymentMeth
 export declare function WakaPaymentMethodPickerRadio(props: Omit<WakaPaymentMethodPickerProps, "variant" | "layout">): import("react/jsx-runtime").JSX.Element;
 export declare function WakaPaymentMethodPickerCompact(props: Omit<WakaPaymentMethodPickerProps, "variant" | "size">): import("react/jsx-runtime").JSX.Element;
 export declare function usePaymentMethodPicker(savedMethods?: SavedPaymentMethod[], options?: PaymentOption[]): {
-    value: string;
-    onChange: React.Dispatch<React.SetStateAction<string>>;
-    selectedMethod: SavedPaymentMethod;
+    value: string | undefined;
+    onChange: React.Dispatch<React.SetStateAction<string | undefined>>;
+    selectedMethod: SavedPaymentMethod | undefined;
     methods: SavedPaymentMethod[];
     addMethod: (method: SavedPaymentMethod) => void;
     removeMethod: (id: string) => void;