onecart-ui/dist/index.esm.js

Cross-platform React and React Native component library with white-label support

import e,{useState as t,createContext as n,useContext as o}from"react";const a=[{name:"arrow-up",path:"M8 3.33325L8 12.6666 M3.33331 7.99992L8 3.33325L12.6666 7.99992",viewBox:"0 0 16 16"},{name:"arrow-down",path:"M8 12.6666L8 3.33325 M12.6667 8.00008L8 12.6667L3.33335 8.00008",viewBox:"0 0 16 16"},{name:"arrow-left",path:"M12.6666 8.00008L3.33331 8.00008 M7.99998 3.33341L3.33331 8.00008L7.99998 12.6667",viewBox:"0 0 16 16"},{name:"arrow-right",path:"M3.33331 8.00008L12.6666 8.00008 M7.99998 12.6667L12.6666 8.00008L7.99998 3.33341",viewBox:"0 0 16 16"},{name:"check",path:"M13.3333 4.66675L6.66667 11.3334L3.33333 8.00008",viewBox:"0 0 16 16"},{name:"cross",path:"M12 4L4 12 M4 4L12 12",viewBox:"0 0 16 16"},{name:"plus",path:"M8 3.33325V12.6666 M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"minus",path:"M3.33331 7.99992H12.6666",viewBox:"0 0 16 16"},{name:"search",path:"M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z M12.6667 12.6667L14 14",viewBox:"0 0 16 16"},{name:"home",path:"M2 6L8 2L14 6V14H10V10H6V14H2V6Z",viewBox:"0 0 16 16",fill:"currentColor"},{name:"settings",path:"M6.4 14H9.6C9.6 14 9.8 13.1 10.4 12.8C11 12.5 11.9 12.8 12.4 12.3C12.8 11.9 12.6 10.9 12.8 10.4C13.1 9.8 14 9.6 14 9.6V6.4C14 6.4 13.1 6.2 12.8 5.6C12.5 5 12.8 4.1 12.3 3.6C11.9 3.2 10.9 3.4 10.4 3.2C9.8 2.9 9.6 2 9.6 2H6.4C6.4 2 6.2 2.9 5.6 3.2C5 3.5 4.1 3.2 3.6 3.7C3.2 4.1 3.4 5.1 3.2 5.6C2.9 6.2 2 6.4 2 6.4V9.6C2 9.6 2.9 9.8 3.2 10.4C3.5 11 3.2 11.9 3.7 12.4C4.1 12.8 5.1 12.6 5.6 12.8C6.2 13.1 6.4 14 6.4 14Z M10 8C10 9.1 9.1 10 8 10C6.9 10 6 9.1 6 8C6 6.9 6.9 6 8 6C9.1 6 10 6.9 10 8Z",viewBox:"0 0 16 16"},{name:"user",path:"M11 4C11 5.65685 9.65685 7 8 7C6.34315 7 5 5.65685 5 4C5 2.34315 6.34315 1 8 1C9.65685 1 11 2.34315 11 4Z M1 14C1 14 1 12 3 11C5 10 11 10 13 11C15 12 15 14 15 14",viewBox:"0 0 16 16"},{name:"cart",path:"M5.5 14C5.77614 14 6 13.7761 6 13.5C6 13.2239 5.77614 13 5.5 13C5.22386 13 5 13.2239 5 13.5C5 13.7761 5.22386 14 5.5 14Z M12.5 14C12.7761 14 13 13.7761 13 13.5C13 13.2239 12.7761 13 12.5 13C12.2239 13 12 13.2239 12 13.5C12 13.7761 12.2239 14 12.5 14Z M1 1H3L4.6 9.6C4.63333 9.74056 4.7247 9.86412 4.85172 9.94984C4.97873 10.0356 5.13221 10.0769 5.28571 10.0714H12.1429C12.2964 10.0769 12.4499 10.0356 12.5769 9.94984C12.7039 9.86412 12.7952 9.74056 12.8286 9.6L14 4H4",viewBox:"0 0 16 16"},{name:"heart",path:"M13.6319 3.36825C13.2475 2.98368 12.7898 2.67897 12.2843 2.47298C11.7788 2.267 11.2371 2.16341 10.69 2.16797C10.1429 2.16341 9.60127 2.267 9.09575 2.47298C8.59023 2.67897 8.13254 2.98368 7.74805 3.36825L7.00005 4.11625L6.25205 3.36825C5.4676 2.58281 4.40687 2.16036 3.31005 2.16797C2.21322 2.16036 1.1525 2.58281 0.368046 3.36825C-0.41646 4.15369 -0.838915 5.21442 -0.83131 6.31125C-0.838915 7.40807 -0.41646 8.4688 0.368046 9.25425L7.00005 15.8862L13.6319 9.25425C14.0165 8.86975 14.3212 8.41207 14.5272 7.90655C14.7332 7.40102 14.8368 6.85936 14.8322 6.31225C14.8368 5.76513 14.7332 5.22347 14.5272 4.71795C14.3212 4.21242 14.0165 3.75474 13.6319 3.37025V3.36825Z",viewBox:"0 0 16 16"},{name:"star",path:"M7.99998 1.33325L10.06 5.5066L14.6666 6.17994L11.3333 9.42661L12.12 14.0133L7.99998 11.8466L3.87998 14.0133L4.66665 9.42661L1.33331 6.17994L5.93998 5.5066L7.99998 1.33325Z",viewBox:"0 0 16 16",fill:"currentColor"}],i=new Map;a.forEach((e=>{i.set(e.name,e)}));const l=({name:t,size:n=24,color:o="currentColor",className:a="",style:l={},onClick:r,ariaLabel:s})=>{const c=i.get(t);if(!c)return console.warn(`Icon "${t}" not found`),null;const p=c.path.split(" M ").map(((e,t)=>0===t?e:`M ${e}`)),d={display:"inline-block",verticalAlign:"middle",...l};return e.createElement("svg",{width:n,height:n,viewBox:c.viewBox,fill:"none",xmlns:"http://www.w3.org/2000/svg",className:a,style:d,onClick:r,"aria-label":s||`${t} icon`,role:"img"},p.map(((t,n)=>e.createElement("path",{key:n,d:t,stroke:c.fill?"none":o,fill:c.fill?o:"none",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}))))},r=({searchQuery:t="",iconSize:n=24,iconColor:o="currentColor",onIconClick:i})=>{const r=t?a.filter((e=>e.name.toLowerCase().includes(t.toLowerCase()))):a;return e.createElement("div",null,0===r.length?e.createElement("div",{style:{padding:"20px",textAlign:"center"}},'No icons found matching "',t,'"'):e.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(100px, 1fr))",gap:"20px"}},r.map((t=>e.createElement("div",{key:t.name,style:{display:"flex",flexDirection:"column",alignItems:"center",padding:"12px",border:"1px solid #eee",borderRadius:"8px",cursor:i?"pointer":"default",transition:"all 0.2s ease-in-out"},onClick:()=>{return e=t.name,void(i&&i(e));var e},onMouseOver:e=>{e.currentTarget.style.backgroundColor="#f9f9f9",e.currentTarget.style.transform="translateY(-2px)",e.currentTarget.style.boxShadow="0 2px 8px rgba(0,0,0,0.05)"},onMouseOut:e=>{e.currentTarget.style.backgroundColor="transparent",e.currentTarget.style.transform="translateY(0)",e.currentTarget.style.boxShadow="none"}},e.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"50px",marginBottom:"8px"}},e.createElement(l,{name:t.name,size:n,color:o})),e.createElement("div",{style:{fontSize:"12px",textAlign:"center",wordBreak:"break-word"}},t.name))))))},s="0.0625rem",c="#525252",p="#3b3b3b",d="#111",m="#3b3b3b",g="#111",h="#ababab",x="#f1f1f1",f="Campton",u="book",b="16px",C="12px",y="none",w="none",k=e=>e&&"string"==typeof e?parseFloat(e.replace("px","")):0,v=e=>"number"==typeof e?e.toString():"book"===e?"400":e,S={display2xl:{fontFamily:"Campton",fontSize:k("52px"),fontWeight:v(500),lineHeight:k("56px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},displayXl:{fontFamily:"Campton",fontSize:k("44px"),fontWeight:v(500),lineHeight:k("48px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXl:{fontFamily:"Campton",fontSize:k("40px"),fontWeight:v(600),lineHeight:k("44px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingLg:{fontFamily:"Campton",fontSize:k("36px"),fontWeight:v(600),lineHeight:k("40px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingMd:{fontFamily:"Campton",fontSize:k("32px"),fontWeight:v(600),lineHeight:k("36px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingSm:{fontFamily:"Campton",fontSize:k("28px"),fontWeight:v(600),lineHeight:k("32px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXs:{fontFamily:"Campton",fontSize:k("20px"),fontWeight:v(600),lineHeight:k("28px"),color:d,letterSpacing:"0%",textDecoration:"none",textCase:"none"},bodyXl:{fontFamily:"Campton",fontSize:k("18px"),fontWeight:v("book"),lineHeight:k("28px"),color:p,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyLg:{fontFamily:"Campton",fontSize:k("16px"),fontWeight:v("book"),lineHeight:k("24px"),color:p,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyMd:{fontFamily:"Campton",fontSize:k("14px"),fontWeight:v("book"),lineHeight:k("20px"),color:p,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodySm:{fontFamily:"Campton",fontSize:k("12px"),fontWeight:v("book"),lineHeight:k("20px"),color:p,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyXs:{fontFamily:f,fontSize:k(C),fontWeight:v(u),lineHeight:k(b),color:p,letterSpacing:"0%",textDecoration:w,textCase:y,paragraphIndent:"0px"},labelLg:{fontFamily:"Campton",fontSize:k("16px"),fontWeight:v(500),lineHeight:k("16px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelMd:{fontFamily:"Campton",fontSize:k("14px"),fontWeight:v(500),lineHeight:k("20px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelSm:{fontFamily:f,fontSize:k(C),fontWeight:v(u),lineHeight:k(b),color:c,letterSpacing:"0%",textDecoration:w,textCase:y},weights:{normal:"400",medium:v(500),semibold:v(600),bold:"700"}},L=({label:n,type:o="primary",size:a="large",disabled:i=!1,leftIcon:r,rightIcon:c,icon:p,fullWidth:d=!1,style:f,accessibilityLabel:u,testID:b,onClick:C,className:y,onMouseEnter:w,onMouseLeave:k,onMouseDown:v,onMouseUp:L})=>{const M=!!p,F=r?e.createElement(l,{name:r,size:"large"===a?20:16}):null,z=c?e.createElement(l,{name:c,size:"large"===a?20:16}):null,H=p?e.createElement(l,{name:p,size:"large"===a?20:16}):null,[W,D]=t(i?"disabled":"default"),E=r&&c;return e.createElement("button",{style:(()=>{const e={display:M?"inline-flex":"flex",width:M?"auto":d?"100%":"9.375rem",height:"large"===a?"2.75rem":"2rem",padding:"ghost"===o?0:"0.75rem",justifyContent:"center",alignItems:"center",gap:E?"1rem":"0.5rem",flexShrink:0,borderRadius:"62.4rem",cursor:i?"not-allowed":"pointer",opacity:i?.6:1,transition:"all 0.2s ease-in-out",border:"none"};switch(o){case"primary":switch(W){case"default":e.background="#00df88";break;case"hover":e.background="#4ce9ac";break;case"active":e.background="#98f2cf";break;case"disabled":e.background="#E5FCF3",e.opacity=.6}break;case"outline":switch(e.background="transparent",W){case"default":e.border=`${s} solid ${m}`;break;case"hover":e.border=`0.125rem solid ${g}`;break;case"active":e.border=`0.125rem solid ${h}`;break;case"disabled":e.border=`${s} solid ${x}`,e.opacity=.6}break;case"ghost":e.background="transparent";break;case"destructive":switch(e.background="transparent",W){case"default":e.color="#a90000";break;case"hover":e.color="#d60000";break;case"active":e.color="#fed8d8";break;case"disabled":e.color="#feecec",e.opacity=.6}}return{...e,...f}})(),onClick:C,disabled:i,"aria-label":u||n,"data-testid":b,className:y,onMouseEnter:e=>{i||(D("hover"),w&&w(e))},onMouseLeave:e=>{i||(D("default"),k&&k(e))},onMouseDown:e=>{i||(D("active"),v&&v(e))},onMouseUp:e=>{i||(D("hover"),L&&L(e))}},!M&&r&&e.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-left-icon"},F),!M&&e.createElement("span",{style:(()=>{const e="large"===a?S.labelLg:S.labelMd,t={fontFamily:e.fontFamily,fontWeight:parseInt(e.fontWeight),fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,transition:"all 0.2s ease-in-out"};switch(o){case"primary":t.color="#3b3b3b";break;case"outline":case"ghost":switch(W){case"default":t.color=m;break;case"hover":t.color=g;break;case"active":t.color=h;break;case"disabled":t.color=x}}return t})()},n),M&&e.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"}},H),!M&&c&&e.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-right-icon"},z))},M=({size:t="2xl",element:n="h1",align:o="left",weight:a,color:i,truncate:l=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const h={...(()=>{const e="2xl"===t?S.display2xl:S.displayXl;let n=parseInt(e.fontWeight);a&&("normal"===a?n=400:"medium"===a?n=500:"semibold"===a?n=600:"bold"===a&&(n=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:n,color:i||e.color,textAlign:o,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return l&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),r&&r>0&&(s.display="-webkit-box",s.WebkitLineClamp=r,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},x=n;return e.createElement(x,{style:h,className:c,"data-testid":m,onClick:d,...g},s)},F=({size:t="xl",element:n="h2",align:o="left",weight:a,color:i,truncate:l=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const h={...(()=>{const e=S[{xl:"headingXl",lg:"headingLg",md:"headingMd",sm:"headingSm",xs:"headingXs"}[t]],n=a?parseInt(S.weights[a]):parseInt(e.fontWeight);return{...{fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:n,color:i||e.color,textAlign:o,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"},...l?{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"}:{},...r&&r>0?{display:"-webkit-box",WebkitLineClamp:r,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis"}:{}}})(),...p},x="a"===n?g:{},f="h2"===n?{xl:"h1",lg:"h2",md:"h3",sm:"h4",xs:"h5"}[t]:n;return e.createElement(f,{style:h,className:c,"data-testid":m,onClick:d,...x},s)},z=({size:t="lg",element:n="p",align:o="left",weight:a,color:i,truncate:l=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const h={...(()=>{let e;switch(t){case"xl":e=S.bodyXl;break;case"lg":e=S.bodyLg;break;case"md":e=S.bodyMd;break;case"sm":e=S.bodySm}let n=parseInt(e.fontWeight);a&&("normal"===a?n=400:"medium"===a?n=500:"semibold"===a?n=600:"bold"===a&&(n=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:n,color:i||e.color,textAlign:o,letterSpacing:e.letterSpacing,textDecoration:e.textDecoration||"none"};return l&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),r&&r>0&&(s.display="-webkit-box",s.WebkitLineClamp=r,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},x="a"===n?g:{},f=n;return e.createElement(f,{style:h,className:c,"data-testid":m,onClick:d,...x},s)},H=({variant:t="button",element:n,align:o="left",weight:a,color:i,truncate:l=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const h=n||(()=>{switch(t){case"button":case"caption":default:return"span";case"link":return"a"}})(),x={...(()=>{let e;switch(t){case"button":e=S.labelLg;break;case"link":e=S.labelMd;break;case"caption":e=S.labelSm}let n=parseInt(e.fontWeight);a&&("normal"===a?n=400:"medium"===a?n=500:"semibold"===a?n=600:"bold"===a&&(n=700));const s={fontFamily:e.fontFamily,fontSize:`${e.fontSize}px`,lineHeight:`${e.lineHeight}px`,fontWeight:n,color:i||e.color,textAlign:o,letterSpacing:e.letterSpacing,textDecoration:"link"===t?"underline":e.textDecoration||"none"};return l&&(s.whiteSpace="nowrap",s.overflow="hidden",s.textOverflow="ellipsis",s.display="block"),r&&r>0&&(s.display="-webkit-box",s.WebkitLineClamp=r,s.WebkitBoxOrient="vertical",s.overflow="hidden",s.textOverflow="ellipsis"),s})(),...p},f="a"===h?g:{},u=h;return e.createElement(u,{style:x,className:c,"data-testid":m,onClick:d,...f},s)},W={colors:{primary:"#007AFF",secondary:"#5856D6",background:"#FFFFFF",surface:"#F2F2F7",text:"#000000",textSecondary:"#8E8E93",border:"#E5E5EA",error:"#FF3B30",warning:"#FF9500",success:"#34C759"},spacing:{xs:4,sm:8,md:16,lg:24,xl:32},borderRadius:{none:0,sm:4,md:8,lg:12,full:9999},typography:{fontSize:{xs:12,sm:14,md:16,lg:18,xl:20,xxl:24},fontWeight:{normal:"400",medium:"500",semibold:"600",bold:"700"},lineHeight:{tight:1.2,normal:1.5,relaxed:1.8}}},D=n(void 0),E=({children:t,theme:n})=>{const o=e.useMemo((()=>{var e,t,o;return{...W,...n,colors:{...W.colors,...null==n?void 0:n.colors},spacing:{...W.spacing,...null==n?void 0:n.spacing},borderRadius:{...W.borderRadius,...null==n?void 0:n.borderRadius},typography:{...W.typography,...null==n?void 0:n.typography,fontSize:{...W.typography.fontSize,...null===(e=null==n?void 0:n.typography)||void 0===e?void 0:e.fontSize},fontWeight:{...W.typography.fontWeight,...null===(t=null==n?void 0:n.typography)||void 0===t?void 0:t.fontWeight},lineHeight:{...W.typography.lineHeight,...null===(o=null==n?void 0:n.typography)||void 0===o?void 0:o.lineHeight}}}}),[n]),a=e.useCallback((e=>{console.log("Theme update requested, but we are using static theme for now.",e)}),[]);return e.createElement(D.Provider,{value:{theme:o,updateTheme:a}},t)},I=()=>{const e=o(D);if(!e)throw new Error("useTheme must be used within a ThemeProvider");return e};export{z as Body,L as Button,M as Display,F as Heading,l as Icon,r as IconList,E as ThemeProvider,H as Utility,W as defaultTheme,a as icons,I as useTheme};
//# sourceMappingURL=index.esm.js.map