onecart-ui
Version:
Cross-platform React and React Native component library with white-label support
3 lines (2 loc) • 16.5 kB
JavaScript
;Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react");function t(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var o=t(e);const n=[{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"}],a=new Map;n.forEach((e=>{a.set(e.name,e)}));const l=({name:e,size:t=24,color:n="currentColor",className:l="",style:i={},onClick:r,ariaLabel:s})=>{const c=a.get(e);if(!c)return console.warn(`Icon "${e}" not found`),null;const p=c.path.split(" M ").map(((e,t)=>0===t?e:`M ${e}`)),d={display:"inline-block",verticalAlign:"middle",...i};return o.default.createElement("svg",{width:t,height:t,viewBox:c.viewBox,fill:"none",xmlns:"http://www.w3.org/2000/svg",className:l,style:d,onClick:r,"aria-label":s||`${e} icon`,role:"img"},p.map(((e,t)=>o.default.createElement("path",{key:t,d:e,stroke:c.fill?"none":n,fill:c.fill?n:"none",strokeWidth:"1.5",strokeLinecap:"round",strokeLinejoin:"round"}))))},i="0.0625rem",r="#525252",s="#3b3b3b",c="#111",p="#3b3b3b",d="#111",m="#ababab",g="#f1f1f1",f="Campton",h="book",u="16px",x="12px",b="none",C="none",y=e=>e&&"string"==typeof e?parseFloat(e.replace("px","")):0,w=e=>"number"==typeof e?e.toString():"book"===e?"400":e,v={display2xl:{fontFamily:"Campton",fontSize:y("52px"),fontWeight:w(500),lineHeight:y("56px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},displayXl:{fontFamily:"Campton",fontSize:y("44px"),fontWeight:w(500),lineHeight:y("48px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXl:{fontFamily:"Campton",fontSize:y("40px"),fontWeight:w(600),lineHeight:y("44px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingLg:{fontFamily:"Campton",fontSize:y("36px"),fontWeight:w(600),lineHeight:y("40px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingMd:{fontFamily:"Campton",fontSize:y("32px"),fontWeight:w(600),lineHeight:y("36px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingSm:{fontFamily:"Campton",fontSize:y("28px"),fontWeight:w(600),lineHeight:y("32px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},headingXs:{fontFamily:"Campton",fontSize:y("20px"),fontWeight:w(600),lineHeight:y("28px"),color:c,letterSpacing:"0%",textDecoration:"none",textCase:"none"},bodyXl:{fontFamily:"Campton",fontSize:y("18px"),fontWeight:w("book"),lineHeight:y("28px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyLg:{fontFamily:"Campton",fontSize:y("16px"),fontWeight:w("book"),lineHeight:y("24px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyMd:{fontFamily:"Campton",fontSize:y("14px"),fontWeight:w("book"),lineHeight:y("20px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodySm:{fontFamily:"Campton",fontSize:y("12px"),fontWeight:w("book"),lineHeight:y("20px"),color:s,letterSpacing:"0%",textDecoration:"none",textCase:"none",paragraphIndent:"0px"},bodyXs:{fontFamily:f,fontSize:y(x),fontWeight:w(h),lineHeight:y(u),color:s,letterSpacing:"0%",textDecoration:C,textCase:b,paragraphIndent:"0px"},labelLg:{fontFamily:"Campton",fontSize:y("16px"),fontWeight:w(500),lineHeight:y("16px"),color:r,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelMd:{fontFamily:"Campton",fontSize:y("14px"),fontWeight:w(500),lineHeight:y("20px"),color:r,letterSpacing:"0%",textDecoration:"none",textCase:"none"},labelSm:{fontFamily:f,fontSize:y(x),fontWeight:w(h),lineHeight:y(u),color:r,letterSpacing:"0%",textDecoration:C,textCase:b},weights:{normal:"400",medium:w(500),semibold:w(600),bold:"700"}},k={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}}},S=e.createContext(void 0);exports.Body=({size:e="lg",element:t="p",align:n="left",weight:a,color:l,truncate:i=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const f={...(()=>{let t;switch(e){case"xl":t=v.bodyXl;break;case"lg":t=v.bodyLg;break;case"md":t=v.bodyMd;break;case"sm":t=v.bodySm}let o=parseInt(t.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:t.fontFamily,fontSize:`${t.fontSize}px`,lineHeight:`${t.lineHeight}px`,fontWeight:o,color:l||t.color,textAlign:n,letterSpacing:t.letterSpacing,textDecoration:t.textDecoration||"none"};return i&&(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},h="a"===t?g:{},u=t;return o.default.createElement(u,{style:f,className:c,"data-testid":m,onClick:d,...h},s)},exports.Button=({label:t,type:n="primary",size:a="large",disabled:r=!1,leftIcon:s,rightIcon:c,icon:f,fullWidth:h=!1,style:u,accessibilityLabel:x,testID:b,onClick:C,className:y,onMouseEnter:w,onMouseLeave:k,onMouseDown:S,onMouseUp:L})=>{const M=!!f,F=s?o.default.createElement(l,{name:s,size:"large"===a?20:16}):null,z=c?o.default.createElement(l,{name:c,size:"large"===a?20:16}):null,H=f?o.default.createElement(l,{name:f,size:"large"===a?20:16}):null,[W,D]=e.useState(r?"disabled":"default"),E=s&&c;return o.default.createElement("button",{style:(()=>{const e={display:M?"inline-flex":"flex",width:M?"auto":h?"100%":"9.375rem",height:"large"===a?"2.75rem":"2rem",padding:"ghost"===n?0:"0.75rem",justifyContent:"center",alignItems:"center",gap:E?"1rem":"0.5rem",flexShrink:0,borderRadius:"62.4rem",cursor:r?"not-allowed":"pointer",opacity:r?.6:1,transition:"all 0.2s ease-in-out",border:"none"};switch(n){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=`${i} solid ${p}`;break;case"hover":e.border=`0.125rem solid ${d}`;break;case"active":e.border=`0.125rem solid ${m}`;break;case"disabled":e.border=`${i} solid ${g}`,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,...u}})(),onClick:C,disabled:r,"aria-label":x||t,"data-testid":b,className:y,onMouseEnter:e=>{r||(D("hover"),w&&w(e))},onMouseLeave:e=>{r||(D("default"),k&&k(e))},onMouseDown:e=>{r||(D("active"),S&&S(e))},onMouseUp:e=>{r||(D("hover"),L&&L(e))}},!M&&s&&o.default.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-left-icon"},F),!M&&o.default.createElement("span",{style:(()=>{const e="large"===a?v.labelLg:v.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(n){case"primary":t.color="#3b3b3b";break;case"outline":case"ghost":switch(W){case"default":t.color=p;break;case"hover":t.color=d;break;case"active":t.color=m;break;case"disabled":t.color=g}}return t})()},t),M&&o.default.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"}},H),!M&&c&&o.default.createElement("span",{style:{display:"flex",alignItems:"center",justifyContent:"center",color:"currentColor"},className:"button-right-icon"},z))},exports.Display=({size:e="2xl",element:t="h1",align:n="left",weight:a,color:l,truncate:i=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const f={...(()=>{const t="2xl"===e?v.display2xl:v.displayXl;let o=parseInt(t.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:t.fontFamily,fontSize:`${t.fontSize}px`,lineHeight:`${t.lineHeight}px`,fontWeight:o,color:l||t.color,textAlign:n,letterSpacing:t.letterSpacing,textDecoration:t.textDecoration||"none"};return i&&(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},h=t;return o.default.createElement(h,{style:f,className:c,"data-testid":m,onClick:d,...g},s)},exports.Heading=({size:e="xl",element:t="h2",align:n="left",weight:a,color:l,truncate:i=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const f={...(()=>{const t=v[{xl:"headingXl",lg:"headingLg",md:"headingMd",sm:"headingSm",xs:"headingXs"}[e]],o=a?parseInt(v.weights[a]):parseInt(t.fontWeight);return{...{fontFamily:t.fontFamily,fontSize:`${t.fontSize}px`,lineHeight:`${t.lineHeight}px`,fontWeight:o,color:l||t.color,textAlign:n,letterSpacing:t.letterSpacing,textDecoration:t.textDecoration||"none"},...i?{whiteSpace:"nowrap",overflow:"hidden",textOverflow:"ellipsis",display:"block"}:{},...r&&r>0?{display:"-webkit-box",WebkitLineClamp:r,WebkitBoxOrient:"vertical",overflow:"hidden",textOverflow:"ellipsis"}:{}}})(),...p},h="a"===t?g:{},u="h2"===t?{xl:"h1",lg:"h2",md:"h3",sm:"h4",xs:"h5"}[e]:t;return o.default.createElement(u,{style:f,className:c,"data-testid":m,onClick:d,...h},s)},exports.Icon=l,exports.IconList=({searchQuery:e="",iconSize:t=24,iconColor:a="currentColor",onIconClick:i})=>{const r=e?n.filter((t=>t.name.toLowerCase().includes(e.toLowerCase()))):n;return o.default.createElement("div",null,0===r.length?o.default.createElement("div",{style:{padding:"20px",textAlign:"center"}},'No icons found matching "',e,'"'):o.default.createElement("div",{style:{display:"grid",gridTemplateColumns:"repeat(auto-fill, minmax(100px, 1fr))",gap:"20px"}},r.map((e=>o.default.createElement("div",{key:e.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 t=e.name,void(i&&i(t));var t},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"}},o.default.createElement("div",{style:{display:"flex",alignItems:"center",justifyContent:"center",height:"50px",marginBottom:"8px"}},o.default.createElement(l,{name:e.name,size:t,color:a})),o.default.createElement("div",{style:{fontSize:"12px",textAlign:"center",wordBreak:"break-word"}},e.name))))))},exports.ThemeProvider=({children:e,theme:t})=>{const n=o.default.useMemo((()=>{var e,o,n;return{...k,...t,colors:{...k.colors,...null==t?void 0:t.colors},spacing:{...k.spacing,...null==t?void 0:t.spacing},borderRadius:{...k.borderRadius,...null==t?void 0:t.borderRadius},typography:{...k.typography,...null==t?void 0:t.typography,fontSize:{...k.typography.fontSize,...null===(e=null==t?void 0:t.typography)||void 0===e?void 0:e.fontSize},fontWeight:{...k.typography.fontWeight,...null===(o=null==t?void 0:t.typography)||void 0===o?void 0:o.fontWeight},lineHeight:{...k.typography.lineHeight,...null===(n=null==t?void 0:t.typography)||void 0===n?void 0:n.lineHeight}}}}),[t]),a=o.default.useCallback((e=>{console.log("Theme update requested, but we are using static theme for now.",e)}),[]);return o.default.createElement(S.Provider,{value:{theme:n,updateTheme:a}},e)},exports.Utility=({variant:e="button",element:t,align:n="left",weight:a,color:l,truncate:i=!1,lineClamp:r,children:s,className:c="",style:p={},onClick:d,testID:m,...g})=>{const f=t||(()=>{switch(e){case"button":case"caption":default:return"span";case"link":return"a"}})(),h={...(()=>{let t;switch(e){case"button":t=v.labelLg;break;case"link":t=v.labelMd;break;case"caption":t=v.labelSm}let o=parseInt(t.fontWeight);a&&("normal"===a?o=400:"medium"===a?o=500:"semibold"===a?o=600:"bold"===a&&(o=700));const s={fontFamily:t.fontFamily,fontSize:`${t.fontSize}px`,lineHeight:`${t.lineHeight}px`,fontWeight:o,color:l||t.color,textAlign:n,letterSpacing:t.letterSpacing,textDecoration:"link"===e?"underline":t.textDecoration||"none"};return i&&(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},u="a"===f?g:{},x=f;return o.default.createElement(x,{style:h,className:c,"data-testid":m,onClick:d,...u},s)},exports.defaultTheme=k,exports.icons=n,exports.useTheme=()=>{const t=e.useContext(S);if(!t)throw new Error("useTheme must be used within a ThemeProvider");return t};
//# sourceMappingURL=index.js.map