npm - support-us-button - Versions diffs - 1.0.0 - Mend

support-us-button 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (13) hide show

package/LICENSE +163 -0
package/README.md +608 -0
package/dist/components/SupportUsButton.d.ts +4 -0
package/dist/index.cjs.js +2 -0
package/dist/index.cjs.js.map +1 -0
package/dist/index.d.ts +3 -0
package/dist/index.esm.js +2 -0
package/dist/index.esm.js.map +1 -0
package/dist/index.umd.js +2 -0
package/dist/index.umd.js.map +1 -0
package/dist/style.css +1 -0
package/dist/types/index.d.ts +67 -0
package/package.json +89 -0

package/dist/index.cjs.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.cjs.js","sources":["../src/components/SupportUsButton.tsx"],"sourcesContent":["import React from \"react\";\r\nimport type { supportUsButtonProps } from \"../types/index\";\r\nimport type { Theme } from \"../types/index\";\r\nimport type { ButtonVariant } from \"../types/index\";\r\n\r\n// Function to get the appropriate classes based on the selected theme, used for styling different sections of the component according to the chosen theme\r\nfunction classAccordingToTheme(Theme: Theme): string {\r\n switch (Theme) {\r\n case \"AOSSIE\":\r\n return \"bg-primary text-black\";\r\n case \"light\":\r\n return \"bg-gray-100 text-gray-800\";\r\n case \"dark\":\r\n return \"bg-black text-white\";\r\n case \"minimal\":\r\n return \"bg-transparent text-gray-800 border border-gray-800\";\r\n case \"corporate\":\r\n return \"bg-blue-600 text-white\";\r\n default:\r\n return \"bg-gray-200 text-gray-800\";\r\n }\r\n}\r\n\r\n// Function to get the appropriate button classes based on the selected button variant, used for styling the call-to-action buttons according to the chosen variant\r\nfunction getButtonClasses(buttonVariant: ButtonVariant): string {\r\n const base =\r\n \"w-full px-5 py-3 font-medium transition-all duration-300 flex items-center justify-center gap-2\";\r\n\r\n const variant = buttonVariant ?? \"AOSSIE\";\r\n\r\n if (variant === \"primary\") {\r\n return `${base} bg-white text-black hover:bg-white/90`;\r\n }\r\n\r\n if (variant === \"secondary\") {\r\n return `${base} border border-white/30 text-white hover:bg-white/20`;\r\n }\r\n\r\n if (variant === \"ghost\") {\r\n return `${base} text-white/80 hover:text-white hover:bg-white/10 outline-2 outline-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/20`;\r\n }\r\n\r\n if (variant === \"gradient\") {\r\n return `${base} bg-gradient-to-r from-indigo-500 to-purple-600 text-white`;\r\n }\r\n\r\n // Default to AOSSIE variant\r\n return `${base} bg-primary hover:bg-primary/90 text-black font-black py-4 transition-all active:scale-[0.98] shadow-lg shadow-primary/20`;\r\n}\r\n\r\n// Main component function that renders the support us button, taking in various props for customization and rendering different sections such as hero, organization information, sponsors, and call-to-action based on the provided data and selected theme and button variant\r\nfunction SupportUsButton({\r\n Theme = \"AOSSIE\",\r\n pattern = \"AOSSIE\",\r\n hero = {\r\n title: \"Support Our Open Source Project\",\r\n description:\r\n \"Your support helps us continue to develop and maintain our project.\",\r\n sponsorLabel: \"You're Sponsoring\",\r\n },\r\n organizationInformation,\r\n sponsors,\r\n ctaSection,\r\n classNames = {\r\n container: \"\",\r\n Hero: \"\",\r\n organizationInformation: \"\",\r\n sponsors: \"\",\r\n ctaSection: \"\",\r\n },\r\n buttonVariant = \"AOSSIE\",\r\n}: supportUsButtonProps): React.JSX.Element {\r\n return (\r\n // Container for the support us button, with dynamic classes based on the selected theme and custom class names\r\n <div\r\n className={`w-full font-sans justify-center items-center text-center ${Theme == \"light\" || Theme == \"dark\" ? classAccordingToTheme(Theme) : \"bg-black text-white\"} ${classNames.container}`}\r\n >\r\n {/* Hero section with optional background image*/}\r\n <div className=\"relative w-full h-[50vh] flex justify-center\">\r\n {hero.Image && (\r\n <img\r\n src={hero.Image.src}\r\n alt={hero.Image.alt}\r\n title={hero.Image.alt}\r\n className=\"w-full h-full object-cover object-center pointer-none:cursor-none select-none\"\r\n />\r\n )}\r\n {/* Gradient overlay */}\r\n <div className=\"absolute inset-0 bg-linear-to-b from-transparent via-black/10 to-black/95\"></div>\r\n </div>\r\n\r\n {/* Hero title and description */}\r\n <div className=\"w-full flex justify-center mt-10 mb-5\">\r\n <div\r\n className={`${classNames.Hero} w-[80%] flex text-center p-8 flex-col items-center gap-4`}\r\n >\r\n <div\r\n className={`p-2 rounded-full flex items-center justify-center bg-primary text-black`}\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\"\r\n height=\"35\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"black\"\r\n stroke=\"black\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n className=\"lucide lucide-heart-icon lucide-heart\"\r\n >\r\n <title>Support heart icon</title>\r\n <path d=\"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5\" />\r\n </svg>\r\n </div>\r\n\r\n <div className=\"w-full flex flex-col items-center gap-6\">\r\n <h1 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>\r\n {hero.title}\r\n </h1>\r\n <p\r\n className={`wrap-anywhere ${Theme === \"light\" ? \"text-slate-600\" : \"text-slate-400\"} text-lg font-semibold`}\r\n >\r\n {hero.description}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Organization information section */}\r\n <div className=\"w-full flex justify-center p-10 mb-50\">\r\n <div\r\n className={`${classNames.organizationInformation}\r\n relative w-[90%] p-15 rounded-2xl overflow-visible\r\n\r\n // Shadows for different themes\r\n ${Theme === \"AOSSIE\" && \"shadow-xl shadow-primary/20\"}\r\n ${Theme === \"light\" && \"shadow-xl shadow-gray-300/30\"}\r\n ${Theme === \"dark\" && \"shadow-xl shadow-gray-700/30\"}\r\n ${Theme === \"minimal\" && \"shadow-xl shadow-gray-800/30\"}\r\n ${Theme === \"corporate\" && \"shadow-xl shadow-blue-600/30\"}\r\n \r\n // Outline for light and dark themes\r\n ${Theme === \"light\" && \"outline-1 outline-gray-300\"}\r\n ${Theme === \"dark\" && \"outline-1 outline-gray-700\"}\r\n ${classAccordingToTheme(Theme)}`}\r\n >\r\n {/* Background grid */}\r\n <div className=\"absolute inset-0 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100\"></div>\r\n <div\r\n className={`absolute top-0 left-0 bottom-0 w-1/2 h-full rounded-2xl p-6 overflow-visible ${classAccordingToTheme(Theme)}`}\r\n ></div>\r\n\r\n {/* Content container */}\r\n <div className=\"relative z-10 flex justify-start flex-col text-start gap-4\">\r\n {/* Sponsor label */}\r\n {hero.sponsorLabel && (\r\n <span className=\"text-[10px] font-extrabold tracking-[0.2em] uppercase block\">\r\n {hero.sponsorLabel}\r\n </span>\r\n )}\r\n\r\n {/* Organization logo */}\r\n <div>\r\n {typeof organizationInformation.logo === \"string\" ? (\r\n <span\r\n className=\"block h-fit w-fit p-4 bg-black text-white rounded-2xl\"\r\n title={organizationInformation.logo}\r\n >\r\n <b className=\"text-2xl italic\">\r\n {organizationInformation.logo}\r\n </b>\r\n </span>\r\n ) : (\r\n <img\r\n className=\"w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center\"\r\n src={organizationInformation.logo?.src}\r\n alt={organizationInformation.logo?.alt}\r\n title={organizationInformation.logo?.alt}\r\n draggable={false}\r\n />\r\n )}\r\n </div>\r\n\r\n {/* Organization name and description */}\r\n <div className=\"flex flex-col gap-4\">\r\n <h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>\r\n {organizationInformation.name}\r\n </h2>\r\n <p className=\"font-[650]\">\r\n {organizationInformation.description}\r\n </p>\r\n </div>\r\n\r\n {/* Line */}\r\n <div\r\n className={`\r\n border\r\n ${Theme === \"AOSSIE\" && \"border-[#f1c514]/50\"}\r\n ${Theme === \"light\" && \"border-gray-300/50\"}\r\n ${Theme === \"dark\" && \"border-gray-700/50\"}\r\n ${Theme === \"minimal\" && \"border-gray-800/50\"}\r\n ${Theme === \"corporate\" && \"border-blue-600/50\"}`}\r\n ></div>\r\n\r\n {/* Project information */}\r\n <div className=\"flex flex-col gap-2\">\r\n <h3\r\n className={`font-bold w-fit uppercase text-sm p-2 rounded-lg\r\n ${Theme === \"AOSSIE\" && \"bg-[#edc214]\"}\r\n ${Theme === \"light\" && \"bg-gray-300/50\"}\r\n ${Theme === \"dark\" && \"bg-gray-700/50\"}\r\n ${Theme === \"minimal\" && \"bg-gray-800/50\"}\r\n ${Theme === \"corporate\" && \"bg-blue-600/50\"}`}\r\n >\r\n ABOUT PROJECT: {organizationInformation.projectInformation.name}\r\n </h3>\r\n <p\r\n className={`italic font-semibold \r\n ${Theme === \"AOSSIE\" && \"text-[#614f08]\"}\r\n ${Theme === \"light\" && \"text-gray-600\"}\r\n ${Theme === \"dark\" && \"text-gray-400\"}\r\n ${Theme === \"minimal\" && \"text-gray-800\"}\r\n ${Theme === \"corporate\" && \"text-blue-600/80\"}\r\n `}\r\n >\r\n \"{organizationInformation.projectInformation.description}\"\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Sponsors section */}\r\n <div\r\n className={`w-full flex justify-center mt-10 p-10\r\n ${Theme === \"AOSSIE\" && \"bg-[#1f1f1f]\"} \r\n ${Theme === \"light\" && \"bg-gray-300/50\"} \r\n ${Theme === \"dark\" && \"bg-gray-700/50\"}\r\n ${Theme === \"minimal\" && \"bg-gray-800/50\"}\r\n ${Theme === \"corporate\" && \"bg-blue-600/50\"}`}\r\n >\r\n {sponsors && sponsors.length > 0 && (\r\n // List of sponsors with their logos and links, styled according to the selected theme and custom class names\r\n <div\r\n className={`${classNames.sponsors} ${classAccordingToTheme(Theme)}\r\n relative w-[90%] flex flex-col p-8 rounded-2xl gap-25 mt-15 overflow-hidden`}\r\n >\r\n {/* Sponsor pattern AOSSIE */}\r\n {pattern === \"AOSSIE\" && (\r\n <div className=\"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-AOSSIE opacity-60\"></div>\r\n )}\r\n {/* Sponsor pattern Grid */}\r\n {pattern === \"grid\" && (\r\n <div className=\"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-grid opacity-60\"></div>\r\n )}\r\n {/* Sponsor pattern Dots */}\r\n {pattern === \"dots\" && (\r\n <div className=\"absolute bottom-0 inset-x-0 h-1/2 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100\"></div>\r\n )}\r\n\r\n {/* Section title */}\r\n <div className=\"mt-5 flex justify-center\">\r\n <div className=\"w-fit flex flex-col gap-5 justify-center items-center\">\r\n <h2\r\n className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}\r\n >\r\n Our Sponsors\r\n </h2>\r\n\r\n {/* Underline */}\r\n <div className={`border-3 rounded-4xl w-1/2`}></div>\r\n </div>\r\n </div>\r\n\r\n {/* Sponsor logos */}\r\n <div className=\"flex flex-row flex-wrap justify-center items-center gap-10 z-10\">\r\n {sponsors.map((sponsor, index) => (\r\n <a\r\n href={sponsor.link}\r\n key={index}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n title={`Visit ${sponsor.name}'s website`}\r\n >\r\n <div\r\n className={`${Theme === \"dark\" ? \"bg-gray-800 text-white\" : \"bg-white text-black\"} rounded-lg flex flex-col justify-center items-center gap-2 p-8 w-fit transition-transform hover:scale-[1.02] shadow-lg min-h-75 min-w-62.5 hover:border-2 \r\n\r\n // Shadows for different themes\r\n ${Theme === \"AOSSIE\" && \"shadow-primary/20\"}\r\n ${Theme === \"light\" && \"shadow-gray-300/30\"}\r\n ${Theme === \"dark\" && \"shadow-gray-700/30\"}\r\n ${Theme === \"minimal\" && \"shadow-gray-800/30\"} \r\n ${Theme === \"corporate\" && \"shadow-blue-600/30\"}\r\n \r\n // Size based on sponsorship tier\r\n ${sponsor.sponsorshipTier === \"Platinum\" && \"min-w-80 min-h-90\"}\r\n ${sponsor.sponsorshipTier === \"Gold\" && \"min-w-70 min-h-80\"}\r\n ${sponsor.sponsorshipTier === \"Silver\" && \"min-w-60 min-h-70\"}\r\n ${sponsor.sponsorshipTier === \"Bronze\" && \"min-w-50 min-h-60\"}\r\n `}\r\n >\r\n {sponsor.logo ? (\r\n <div className=\"relative\">\r\n <img\r\n src={sponsor.logo}\r\n alt={sponsor.name}\r\n title={sponsor.name}\r\n className={`w-50 h-40 object-cover object-center rounded-lg\r\n ${sponsor.sponsorshipTier === \"Platinum\" && \"w-60 h-50\"}\r\n ${sponsor.sponsorshipTier === \"Gold\" && \"w-55 h-45\"}\r\n ${sponsor.sponsorshipTier === \"Silver\" && \"w-50 h-40\"}\r\n ${sponsor.sponsorshipTier === \"Bronze\" && \"w-45 h-35\"}\r\n `}\r\n draggable={false}\r\n />\r\n {/* Sponsor tier icon */}\r\n <div\r\n className={`absolute rotate-12\r\n \r\n ${sponsor.sponsorshipTier === \"Platinum\" && \"rotate-12 -top-4 -right-1\"}\r\n ${sponsor.sponsorshipTier === \"Gold\" && \"rotate-20 -top-4.5 -right-2.5\"}\r\n ${sponsor.sponsorshipTier === \"Silver\" && \"rotate-30 -top-5.5 -right-4.5\"}\r\n ${sponsor.sponsorshipTier === \"Bronze\" && \"rotate-40 -top-3 -right-3\"}\r\n `}\r\n >\r\n {/* Platinum tier icon */}\r\n {sponsor.sponsorshipTier === \"Platinum\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Platinum tier icon</title>\r\n <path d=\"M3 7l4 4 5-7 5 7 4-4v11H3V7z\" />\r\n </svg>\r\n )}\r\n {/* Gold tier icon */}\r\n {sponsor.sponsorshipTier === \"Gold\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Gold tier icon</title>\r\n <path d=\"M6 2h12v3h3v3a5 5 0 0 1-5 5h-1a5 5 0 0 1-4 3.9V20h4v2H9v-2h4v-3.1A5 5 0 0 1 9 13H8a5 5 0 0 1-5-5V5h3V2z\" />\r\n </svg>\r\n )}\r\n {/* Silver tier icon */}\r\n {sponsor.sponsorshipTier === \"Silver\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"32\"\r\n height=\"32\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Silver tier icon</title>\r\n <path d=\"M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2l-3 6 3-2 3 2-3-6z\" />\r\n </svg>\r\n )}\r\n {/* Bronze tier icon */}\r\n {sponsor.sponsorshipTier === \"Bronze\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Bronze tier icon</title>\r\n <path d=\"M2 12l5-5 4 4 4-4 7 7-5 5-4-4-4 4-7-7z\" />\r\n </svg>\r\n )}\r\n </div>\r\n </div>\r\n ) : (\r\n <span\r\n className=\"block h-fit w-full p-5 bg-black text-white rounded-2xl\"\r\n title={sponsor.name}\r\n >\r\n <b className=\"text-3xl italic\">{sponsor.name}</b>\r\n </span>\r\n )}\r\n\r\n <div className=\"w-full\">\r\n <h3 className={`font-bold text-2xl`}>{sponsor.name}</h3>\r\n {sponsor.sponsorshipTier && (\r\n <span className=\"flex text-[16px] p-2 rounded-xl items-center mt-3.5 font-semibold bg-[#d0f2eb] text-black w-fit\">\r\n {sponsor.sponsorshipTier}\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n </a>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Call-to-action section with title, description, and sponsor links */}\r\n <div\r\n className={`w-full flex justify-center p-10 ${(Theme === \"light\" || Theme === \"dark\") && classAccordingToTheme(Theme)} ${classNames.ctaSection}`}\r\n >\r\n <div className=\"w-4/5 flex flex-col items-center gap-5 py-20 border border-primary rounded-sm mt-20 mb-20\">\r\n <h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>\r\n {ctaSection.title}\r\n </h2>\r\n <p\r\n className={`font-semibold \r\n ${Theme === \"light\" ? \"text-gray-600\" : \"text-gray-400\"}`}\r\n >\r\n {ctaSection.description}\r\n </p>\r\n <div className=\"flex flex-wrap justify-center items-center gap-5 mt-8\">\r\n {ctaSection.sponsorLink.map((link, index) => (\r\n <a\r\n href={link.url}\r\n key={index}\r\n {...(link.newTab && { target: \"_blank\" })}\r\n rel=\"noopener noreferrer\"\r\n title={`Support Us using ${link.name}`}\r\n >\r\n <div\r\n className={`${getButtonClasses(buttonVariant)} w-fit px-6 py-3`}\r\n >\r\n {link.icon && <span>{link.icon}</span>}\r\n <h3 className={`font-bold`}>{link.name}</h3>\r\n </div>\r\n </a>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default SupportUsButton;\r\n"],"names":["classAccordingToTheme","Theme","getButtonClasses","buttonVariant","base","variant","pattern","hero","title","description","sponsorLabel","organizationInformation","sponsors","ctaSection","classNames","container","Hero","_jsxs","className","children","Image","_jsx","src","alt","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","d","logo","draggable","name","projectInformation","length","map","sponsor","index","href","link","target","rel","sponsorshipTier","sponsorLink","url","newTab","icon"],"mappings":"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"}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,3 @@
+import "./styles/style.css";
+export { default } from "./components/SupportUsButton";
+export type { Theme, ButtonVariant, Image, Hero, projectInformation, organizationInformation, sponsor, sponsors, sponsorLink, CTASection, Tier, Pattern, supportUsButtonProps, } from "./types/index";

package/dist/index.esm.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ import{jsxs as e,jsx as t}from"react/jsx-runtime";function r(e){switch(e){case"AOSSIE":return"bg-primary text-black";case"light":return"bg-gray-100 text-gray-800";case"dark":return"bg-black text-white";case"minimal":return"bg-transparent text-gray-800 border border-gray-800";case"corporate":return"bg-blue-600 text-white";default:return"bg-gray-200 text-gray-800"}}function i(e){const t="w-full px-5 py-3 font-medium transition-all duration-300 flex items-center justify-center gap-2",r=e??"AOSSIE";return"primary"===r?`${t} bg-white text-black hover:bg-white/90`:"secondary"===r?`${t} border border-white/30 text-white hover:bg-white/20`:"ghost"===r?`${t} text-white/80 hover:text-white hover:bg-white/10 outline-2 outline-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/20`:"gradient"===r?`${t} bg-gradient-to-r from-indigo-500 to-purple-600 text-white`:`${t} bg-primary hover:bg-primary/90 text-black font-black py-4 transition-all active:scale-[0.98] shadow-lg shadow-primary/20`}function l({Theme:l="AOSSIE",pattern:n="AOSSIE",hero:a={title:"Support Our Open Source Project",description:"Your support helps us continue to develop and maintain our project.",sponsorLabel:"You're Sponsoring"},organizationInformation:o,sponsors:s,ctaSection:c,classNames:d={container:"",Hero:"",organizationInformation:"",sponsors:"",ctaSection:""},buttonVariant:h="AOSSIE"}){return e("div",{className:`w-full font-sans justify-center items-center text-center ${"light"==l\|\|"dark"==l?r(l):"bg-black text-white"} ${d.container}`,children:[e("div",{className:"relative w-full h-[50vh] flex justify-center",children:[a.Image&&t("img",{src:a.Image.src,alt:a.Image.alt,title:a.Image.alt,className:"w-full h-full object-cover object-center pointer-none:cursor-none select-none"}),t("div",{className:"absolute inset-0 bg-linear-to-b from-transparent via-black/10 to-black/95"})]}),t("div",{className:"w-full flex justify-center mt-10 mb-5",children:e("div",{className:`${d.Hero} w-[80%] flex text-center p-8 flex-col items-center gap-4`,children:[t("div",{className:"p-2 rounded-full flex items-center justify-center bg-primary text-black",children:e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"35",height:"35",viewBox:"0 0 24 24",fill:"black",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-heart-icon lucide-heart",children:[t("title",{children:"Support heart icon"}),t("path",{d:"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"})]})}),e("div",{className:"w-full flex flex-col items-center gap-6",children:[t("h1",{className:"font-extrabold text-4xl md:text-5xl lg:text-6xl",children:a.title}),t("p",{className:`wrap-anywhere ${"light"===l?"text-slate-600":"text-slate-400"} text-lg font-semibold`,children:a.description})]})]})}),t("div",{className:"w-full flex justify-center p-10 mb-50",children:e("div",{className:`${d.organizationInformation}\n relative w-[90%] p-15 rounded-2xl overflow-visible\n\n // Shadows for different themes\n ${"AOSSIE"===l&&"shadow-xl shadow-primary/20"}\n ${"light"===l&&"shadow-xl shadow-gray-300/30"}\n ${"dark"===l&&"shadow-xl shadow-gray-700/30"}\n ${"minimal"===l&&"shadow-xl shadow-gray-800/30"}\n ${"corporate"===l&&"shadow-xl shadow-blue-600/30"}\n \n // Outline for light and dark themes\n ${"light"===l&&"outline-1 outline-gray-300"}\n ${"dark"===l&&"outline-1 outline-gray-700"}\n ${r(l)}`,children:[t("div",{className:"absolute inset-0 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100"}),t("div",{className:`absolute top-0 left-0 bottom-0 w-1/2 h-full rounded-2xl p-6 overflow-visible ${r(l)}`}),e("div",{className:"relative z-10 flex justify-start flex-col text-start gap-4",children:[a.sponsorLabel&&t("span",{className:"text-[10px] font-extrabold tracking-[0.2em] uppercase block",children:a.sponsorLabel}),t("div",{children:"string"==typeof o.logo?t("span",{className:"block h-fit w-fit p-4 bg-black text-white rounded-2xl",title:o.logo,children:t("b",{className:"text-2xl italic",children:o.logo})}):t("img",{className:"w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center",src:o.logo?.src,alt:o.logo?.alt,title:o.logo?.alt,draggable:!1})}),e("div",{className:"flex flex-col gap-4",children:[t("h2",{className:"font-extrabold text-4xl md:text-5xl lg:text-6xl",children:o.name}),t("p",{className:"font-[650]",children:o.description})]}),t("div",{className:`\n border\n ${"AOSSIE"===l&&"border-[#f1c514]/50"}\n ${"light"===l&&"border-gray-300/50"}\n ${"dark"===l&&"border-gray-700/50"}\n ${"minimal"===l&&"border-gray-800/50"}\n ${"corporate"===l&&"border-blue-600/50"}`}),e("div",{className:"flex flex-col gap-2",children:[e("h3",{className:`font-bold w-fit uppercase text-sm p-2 rounded-lg\n ${"AOSSIE"===l&&"bg-[#edc214]"}\n ${"light"===l&&"bg-gray-300/50"}\n ${"dark"===l&&"bg-gray-700/50"}\n ${"minimal"===l&&"bg-gray-800/50"}\n ${"corporate"===l&&"bg-blue-600/50"}`,children:["ABOUT PROJECT: ",o.projectInformation.name]}),e("p",{className:`italic font-semibold \n ${"AOSSIE"===l&&"text-[#614f08]"}\n ${"light"===l&&"text-gray-600"}\n ${"dark"===l&&"text-gray-400"}\n ${"minimal"===l&&"text-gray-800"}\n ${"corporate"===l&&"text-blue-600/80"}\n `,children:['"',o.projectInformation.description,'"']})]})]})]})}),t("div",{className:`w-full flex justify-center mt-10 p-10\n ${"AOSSIE"===l&&"bg-[#1f1f1f]"} \n ${"light"===l&&"bg-gray-300/50"} \n ${"dark"===l&&"bg-gray-700/50"}\n ${"minimal"===l&&"bg-gray-800/50"}\n ${"corporate"===l&&"bg-blue-600/50"}`,children:s&&s.length>0&&e("div",{className:`${d.sponsors} ${r(l)}\n relative w-[90%] flex flex-col p-8 rounded-2xl gap-25 mt-15 overflow-hidden`,children:["AOSSIE"===n&&t("div",{className:"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-AOSSIE opacity-60"}),"grid"===n&&t("div",{className:"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-grid opacity-60"}),"dots"===n&&t("div",{className:"absolute bottom-0 inset-x-0 h-1/2 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100"}),t("div",{className:"mt-5 flex justify-center",children:e("div",{className:"w-fit flex flex-col gap-5 justify-center items-center",children:[t("h2",{className:"font-extrabold text-4xl md:text-5xl lg:text-6xl",children:"Our Sponsors"}),t("div",{className:"border-3 rounded-4xl w-1/2"})]})}),t("div",{className:"flex flex-row flex-wrap justify-center items-center gap-10 z-10",children:s.map((r,i)=>t("a",{href:r.link,target:"_blank",rel:"noopener noreferrer",title:`Visit ${r.name}'s website`,children:e("div",{className:`${"dark"===l?"bg-gray-800 text-white":"bg-white text-black"} rounded-lg flex flex-col justify-center items-center gap-2 p-8 w-fit transition-transform hover:scale-[1.02] shadow-lg min-h-75 min-w-62.5 hover:border-2 \n\n // Shadows for different themes\n ${"AOSSIE"===l&&"shadow-primary/20"}\n ${"light"===l&&"shadow-gray-300/30"}\n ${"dark"===l&&"shadow-gray-700/30"}\n ${"minimal"===l&&"shadow-gray-800/30"} \n ${"corporate"===l&&"shadow-blue-600/30"}\n \n // Size based on sponsorship tier\n ${"Platinum"===r.sponsorshipTier&&"min-w-80 min-h-90"}\n ${"Gold"===r.sponsorshipTier&&"min-w-70 min-h-80"}\n ${"Silver"===r.sponsorshipTier&&"min-w-60 min-h-70"}\n ${"Bronze"===r.sponsorshipTier&&"min-w-50 min-h-60"}\n `,children:[r.logo?e("div",{className:"relative",children:[t("img",{src:r.logo,alt:r.name,title:r.name,className:`w-50 h-40 object-cover object-center rounded-lg\n ${"Platinum"===r.sponsorshipTier&&"w-60 h-50"}\n ${"Gold"===r.sponsorshipTier&&"w-55 h-45"}\n ${"Silver"===r.sponsorshipTier&&"w-50 h-40"}\n ${"Bronze"===r.sponsorshipTier&&"w-45 h-35"}\n `,draggable:!1}),e("div",{className:`absolute rotate-12\n \n ${"Platinum"===r.sponsorshipTier&&"rotate-12 -top-4 -right-1"}\n ${"Gold"===r.sponsorshipTier&&"rotate-20 -top-4.5 -right-2.5"}\n ${"Silver"===r.sponsorshipTier&&"rotate-30 -top-5.5 -right-4.5"}\n ${"Bronze"===r.sponsorshipTier&&"rotate-40 -top-3 -right-3"}\n `,children:["Platinum"===r.sponsorshipTier&&e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"currentColor",viewBox:"0 0 24 24",children:[t("title",{children:"Platinum tier icon"}),t("path",{d:"M3 7l4 4 5-7 5 7 4-4v11H3V7z"})]}),"Gold"===r.sponsorshipTier&&e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"currentColor",viewBox:"0 0 24 24",children:[t("title",{children:"Gold tier icon"}),t("path",{d:"M6 2h12v3h3v3a5 5 0 0 1-5 5h-1a5 5 0 0 1-4 3.9V20h4v2H9v-2h4v-3.1A5 5 0 0 1 9 13H8a5 5 0 0 1-5-5V5h3V2z"})]}),"Silver"===r.sponsorshipTier&&e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",fill:"currentColor",viewBox:"0 0 24 24",children:[t("title",{children:"Silver tier icon"}),t("path",{d:"M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2l-3 6 3-2 3 2-3-6z"})]}),"Bronze"===r.sponsorshipTier&&e("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"currentColor",viewBox:"0 0 24 24",children:[t("title",{children:"Bronze tier icon"}),t("path",{d:"M2 12l5-5 4 4 4-4 7 7-5 5-4-4-4 4-7-7z"})]})]})]}):t("span",{className:"block h-fit w-full p-5 bg-black text-white rounded-2xl",title:r.name,children:t("b",{className:"text-3xl italic",children:r.name})}),e("div",{className:"w-full",children:[t("h3",{className:"font-bold text-2xl",children:r.name}),r.sponsorshipTier&&t("span",{className:"flex text-[16px] p-2 rounded-xl items-center mt-3.5 font-semibold bg-[#d0f2eb] text-black w-fit",children:r.sponsorshipTier})]})]})},i))})]})}),t("div",{className:`w-full flex justify-center p-10 ${("light"===l\|\|"dark"===l)&&r(l)} ${d.ctaSection}`,children:e("div",{className:"w-4/5 flex flex-col items-center gap-5 py-20 border border-primary rounded-sm mt-20 mb-20",children:[t("h2",{className:"font-extrabold text-4xl md:text-5xl lg:text-6xl",children:c.title}),t("p",{className:"font-semibold \n "+("light"===l?"text-gray-600":"text-gray-400"),children:c.description}),t("div",{className:"flex flex-wrap justify-center items-center gap-5 mt-8",children:c.sponsorLink.map((r,l)=>t("a",{href:r.url,...r.newTab&&{target:"_blank"},rel:"noopener noreferrer",title:`Support Us using ${r.name}`,children:e("div",{className:`${i(h)} w-fit px-6 py-3`,children:[r.icon&&t("span",{children:r.icon}),t("h3",{className:"font-bold",children:r.name})]})},l))})]})})]})}export{l as default};
2	+ //# sourceMappingURL=index.esm.js.map

package/dist/index.esm.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.esm.js","sources":["../src/components/SupportUsButton.tsx"],"sourcesContent":["import React from \"react\";\r\nimport type { supportUsButtonProps } from \"../types/index\";\r\nimport type { Theme } from \"../types/index\";\r\nimport type { ButtonVariant } from \"../types/index\";\r\n\r\n// Function to get the appropriate classes based on the selected theme, used for styling different sections of the component according to the chosen theme\r\nfunction classAccordingToTheme(Theme: Theme): string {\r\n switch (Theme) {\r\n case \"AOSSIE\":\r\n return \"bg-primary text-black\";\r\n case \"light\":\r\n return \"bg-gray-100 text-gray-800\";\r\n case \"dark\":\r\n return \"bg-black text-white\";\r\n case \"minimal\":\r\n return \"bg-transparent text-gray-800 border border-gray-800\";\r\n case \"corporate\":\r\n return \"bg-blue-600 text-white\";\r\n default:\r\n return \"bg-gray-200 text-gray-800\";\r\n }\r\n}\r\n\r\n// Function to get the appropriate button classes based on the selected button variant, used for styling the call-to-action buttons according to the chosen variant\r\nfunction getButtonClasses(buttonVariant: ButtonVariant): string {\r\n const base =\r\n \"w-full px-5 py-3 font-medium transition-all duration-300 flex items-center justify-center gap-2\";\r\n\r\n const variant = buttonVariant ?? \"AOSSIE\";\r\n\r\n if (variant === \"primary\") {\r\n return `${base} bg-white text-black hover:bg-white/90`;\r\n }\r\n\r\n if (variant === \"secondary\") {\r\n return `${base} border border-white/30 text-white hover:bg-white/20`;\r\n }\r\n\r\n if (variant === \"ghost\") {\r\n return `${base} text-white/80 hover:text-white hover:bg-white/10 outline-2 outline-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/20`;\r\n }\r\n\r\n if (variant === \"gradient\") {\r\n return `${base} bg-gradient-to-r from-indigo-500 to-purple-600 text-white`;\r\n }\r\n\r\n // Default to AOSSIE variant\r\n return `${base} bg-primary hover:bg-primary/90 text-black font-black py-4 transition-all active:scale-[0.98] shadow-lg shadow-primary/20`;\r\n}\r\n\r\n// Main component function that renders the support us button, taking in various props for customization and rendering different sections such as hero, organization information, sponsors, and call-to-action based on the provided data and selected theme and button variant\r\nfunction SupportUsButton({\r\n Theme = \"AOSSIE\",\r\n pattern = \"AOSSIE\",\r\n hero = {\r\n title: \"Support Our Open Source Project\",\r\n description:\r\n \"Your support helps us continue to develop and maintain our project.\",\r\n sponsorLabel: \"You're Sponsoring\",\r\n },\r\n organizationInformation,\r\n sponsors,\r\n ctaSection,\r\n classNames = {\r\n container: \"\",\r\n Hero: \"\",\r\n organizationInformation: \"\",\r\n sponsors: \"\",\r\n ctaSection: \"\",\r\n },\r\n buttonVariant = \"AOSSIE\",\r\n}: supportUsButtonProps): React.JSX.Element {\r\n return (\r\n // Container for the support us button, with dynamic classes based on the selected theme and custom class names\r\n <div\r\n className={`w-full font-sans justify-center items-center text-center ${Theme == \"light\" || Theme == \"dark\" ? classAccordingToTheme(Theme) : \"bg-black text-white\"} ${classNames.container}`}\r\n >\r\n {/* Hero section with optional background image*/}\r\n <div className=\"relative w-full h-[50vh] flex justify-center\">\r\n {hero.Image && (\r\n <img\r\n src={hero.Image.src}\r\n alt={hero.Image.alt}\r\n title={hero.Image.alt}\r\n className=\"w-full h-full object-cover object-center pointer-none:cursor-none select-none\"\r\n />\r\n )}\r\n {/* Gradient overlay */}\r\n <div className=\"absolute inset-0 bg-linear-to-b from-transparent via-black/10 to-black/95\"></div>\r\n </div>\r\n\r\n {/* Hero title and description */}\r\n <div className=\"w-full flex justify-center mt-10 mb-5\">\r\n <div\r\n className={`${classNames.Hero} w-[80%] flex text-center p-8 flex-col items-center gap-4`}\r\n >\r\n <div\r\n className={`p-2 rounded-full flex items-center justify-center bg-primary text-black`}\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\"\r\n height=\"35\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"black\"\r\n stroke=\"black\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n className=\"lucide lucide-heart-icon lucide-heart\"\r\n >\r\n <title>Support heart icon</title>\r\n <path d=\"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5\" />\r\n </svg>\r\n </div>\r\n\r\n <div className=\"w-full flex flex-col items-center gap-6\">\r\n <h1 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>\r\n {hero.title}\r\n </h1>\r\n <p\r\n className={`wrap-anywhere ${Theme === \"light\" ? \"text-slate-600\" : \"text-slate-400\"} text-lg font-semibold`}\r\n >\r\n {hero.description}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Organization information section */}\r\n <div className=\"w-full flex justify-center p-10 mb-50\">\r\n <div\r\n className={`${classNames.organizationInformation}\r\n relative w-[90%] p-15 rounded-2xl overflow-visible\r\n\r\n // Shadows for different themes\r\n ${Theme === \"AOSSIE\" && \"shadow-xl shadow-primary/20\"}\r\n ${Theme === \"light\" && \"shadow-xl shadow-gray-300/30\"}\r\n ${Theme === \"dark\" && \"shadow-xl shadow-gray-700/30\"}\r\n ${Theme === \"minimal\" && \"shadow-xl shadow-gray-800/30\"}\r\n ${Theme === \"corporate\" && \"shadow-xl shadow-blue-600/30\"}\r\n \r\n // Outline for light and dark themes\r\n ${Theme === \"light\" && \"outline-1 outline-gray-300\"}\r\n ${Theme === \"dark\" && \"outline-1 outline-gray-700\"}\r\n ${classAccordingToTheme(Theme)}`}\r\n >\r\n {/* Background grid */}\r\n <div className=\"absolute inset-0 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100\"></div>\r\n <div\r\n className={`absolute top-0 left-0 bottom-0 w-1/2 h-full rounded-2xl p-6 overflow-visible ${classAccordingToTheme(Theme)}`}\r\n ></div>\r\n\r\n {/* Content container */}\r\n <div className=\"relative z-10 flex justify-start flex-col text-start gap-4\">\r\n {/* Sponsor label */}\r\n {hero.sponsorLabel && (\r\n <span className=\"text-[10px] font-extrabold tracking-[0.2em] uppercase block\">\r\n {hero.sponsorLabel}\r\n </span>\r\n )}\r\n\r\n {/* Organization logo */}\r\n <div>\r\n {typeof organizationInformation.logo === \"string\" ? (\r\n <span\r\n className=\"block h-fit w-fit p-4 bg-black text-white rounded-2xl\"\r\n title={organizationInformation.logo}\r\n >\r\n <b className=\"text-2xl italic\">\r\n {organizationInformation.logo}\r\n </b>\r\n </span>\r\n ) : (\r\n <img\r\n className=\"w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center\"\r\n src={organizationInformation.logo?.src}\r\n alt={organizationInformation.logo?.alt}\r\n title={organizationInformation.logo?.alt}\r\n draggable={false}\r\n />\r\n )}\r\n </div>\r\n\r\n {/* Organization name and description */}\r\n <div className=\"flex flex-col gap-4\">\r\n <h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>\r\n {organizationInformation.name}\r\n </h2>\r\n <p className=\"font-[650]\">\r\n {organizationInformation.description}\r\n </p>\r\n </div>\r\n\r\n {/* Line */}\r\n <div\r\n className={`\r\n border\r\n ${Theme === \"AOSSIE\" && \"border-[#f1c514]/50\"}\r\n ${Theme === \"light\" && \"border-gray-300/50\"}\r\n ${Theme === \"dark\" && \"border-gray-700/50\"}\r\n ${Theme === \"minimal\" && \"border-gray-800/50\"}\r\n ${Theme === \"corporate\" && \"border-blue-600/50\"}`}\r\n ></div>\r\n\r\n {/* Project information */}\r\n <div className=\"flex flex-col gap-2\">\r\n <h3\r\n className={`font-bold w-fit uppercase text-sm p-2 rounded-lg\r\n ${Theme === \"AOSSIE\" && \"bg-[#edc214]\"}\r\n ${Theme === \"light\" && \"bg-gray-300/50\"}\r\n ${Theme === \"dark\" && \"bg-gray-700/50\"}\r\n ${Theme === \"minimal\" && \"bg-gray-800/50\"}\r\n ${Theme === \"corporate\" && \"bg-blue-600/50\"}`}\r\n >\r\n ABOUT PROJECT: {organizationInformation.projectInformation.name}\r\n </h3>\r\n <p\r\n className={`italic font-semibold \r\n ${Theme === \"AOSSIE\" && \"text-[#614f08]\"}\r\n ${Theme === \"light\" && \"text-gray-600\"}\r\n ${Theme === \"dark\" && \"text-gray-400\"}\r\n ${Theme === \"minimal\" && \"text-gray-800\"}\r\n ${Theme === \"corporate\" && \"text-blue-600/80\"}\r\n `}\r\n >\r\n \"{organizationInformation.projectInformation.description}\"\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Sponsors section */}\r\n <div\r\n className={`w-full flex justify-center mt-10 p-10\r\n ${Theme === \"AOSSIE\" && \"bg-[#1f1f1f]\"} \r\n ${Theme === \"light\" && \"bg-gray-300/50\"} \r\n ${Theme === \"dark\" && \"bg-gray-700/50\"}\r\n ${Theme === \"minimal\" && \"bg-gray-800/50\"}\r\n ${Theme === \"corporate\" && \"bg-blue-600/50\"}`}\r\n >\r\n {sponsors && sponsors.length > 0 && (\r\n // List of sponsors with their logos and links, styled according to the selected theme and custom class names\r\n <div\r\n className={`${classNames.sponsors} ${classAccordingToTheme(Theme)}\r\n relative w-[90%] flex flex-col p-8 rounded-2xl gap-25 mt-15 overflow-hidden`}\r\n >\r\n {/* Sponsor pattern AOSSIE */}\r\n {pattern === \"AOSSIE\" && (\r\n <div className=\"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-AOSSIE opacity-60\"></div>\r\n )}\r\n {/* Sponsor pattern Grid */}\r\n {pattern === \"grid\" && (\r\n <div className=\"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-grid opacity-60\"></div>\r\n )}\r\n {/* Sponsor pattern Dots */}\r\n {pattern === \"dots\" && (\r\n <div className=\"absolute bottom-0 inset-x-0 h-1/2 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100\"></div>\r\n )}\r\n\r\n {/* Section title */}\r\n <div className=\"mt-5 flex justify-center\">\r\n <div className=\"w-fit flex flex-col gap-5 justify-center items-center\">\r\n <h2\r\n className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}\r\n >\r\n Our Sponsors\r\n </h2>\r\n\r\n {/* Underline */}\r\n <div className={`border-3 rounded-4xl w-1/2`}></div>\r\n </div>\r\n </div>\r\n\r\n {/* Sponsor logos */}\r\n <div className=\"flex flex-row flex-wrap justify-center items-center gap-10 z-10\">\r\n {sponsors.map((sponsor, index) => (\r\n <a\r\n href={sponsor.link}\r\n key={index}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n title={`Visit ${sponsor.name}'s website`}\r\n >\r\n <div\r\n className={`${Theme === \"dark\" ? \"bg-gray-800 text-white\" : \"bg-white text-black\"} rounded-lg flex flex-col justify-center items-center gap-2 p-8 w-fit transition-transform hover:scale-[1.02] shadow-lg min-h-75 min-w-62.5 hover:border-2 \r\n\r\n // Shadows for different themes\r\n ${Theme === \"AOSSIE\" && \"shadow-primary/20\"}\r\n ${Theme === \"light\" && \"shadow-gray-300/30\"}\r\n ${Theme === \"dark\" && \"shadow-gray-700/30\"}\r\n ${Theme === \"minimal\" && \"shadow-gray-800/30\"} \r\n ${Theme === \"corporate\" && \"shadow-blue-600/30\"}\r\n \r\n // Size based on sponsorship tier\r\n ${sponsor.sponsorshipTier === \"Platinum\" && \"min-w-80 min-h-90\"}\r\n ${sponsor.sponsorshipTier === \"Gold\" && \"min-w-70 min-h-80\"}\r\n ${sponsor.sponsorshipTier === \"Silver\" && \"min-w-60 min-h-70\"}\r\n ${sponsor.sponsorshipTier === \"Bronze\" && \"min-w-50 min-h-60\"}\r\n `}\r\n >\r\n {sponsor.logo ? (\r\n <div className=\"relative\">\r\n <img\r\n src={sponsor.logo}\r\n alt={sponsor.name}\r\n title={sponsor.name}\r\n className={`w-50 h-40 object-cover object-center rounded-lg\r\n ${sponsor.sponsorshipTier === \"Platinum\" && \"w-60 h-50\"}\r\n ${sponsor.sponsorshipTier === \"Gold\" && \"w-55 h-45\"}\r\n ${sponsor.sponsorshipTier === \"Silver\" && \"w-50 h-40\"}\r\n ${sponsor.sponsorshipTier === \"Bronze\" && \"w-45 h-35\"}\r\n `}\r\n draggable={false}\r\n />\r\n {/* Sponsor tier icon */}\r\n <div\r\n className={`absolute rotate-12\r\n \r\n ${sponsor.sponsorshipTier === \"Platinum\" && \"rotate-12 -top-4 -right-1\"}\r\n ${sponsor.sponsorshipTier === \"Gold\" && \"rotate-20 -top-4.5 -right-2.5\"}\r\n ${sponsor.sponsorshipTier === \"Silver\" && \"rotate-30 -top-5.5 -right-4.5\"}\r\n ${sponsor.sponsorshipTier === \"Bronze\" && \"rotate-40 -top-3 -right-3\"}\r\n `}\r\n >\r\n {/* Platinum tier icon */}\r\n {sponsor.sponsorshipTier === \"Platinum\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Platinum tier icon</title>\r\n <path d=\"M3 7l4 4 5-7 5 7 4-4v11H3V7z\" />\r\n </svg>\r\n )}\r\n {/* Gold tier icon */}\r\n {sponsor.sponsorshipTier === \"Gold\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Gold tier icon</title>\r\n <path d=\"M6 2h12v3h3v3a5 5 0 0 1-5 5h-1a5 5 0 0 1-4 3.9V20h4v2H9v-2h4v-3.1A5 5 0 0 1 9 13H8a5 5 0 0 1-5-5V5h3V2z\" />\r\n </svg>\r\n )}\r\n {/* Silver tier icon */}\r\n {sponsor.sponsorshipTier === \"Silver\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"32\"\r\n height=\"32\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Silver tier icon</title>\r\n <path d=\"M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2l-3 6 3-2 3 2-3-6z\" />\r\n </svg>\r\n )}\r\n {/* Bronze tier icon */}\r\n {sponsor.sponsorshipTier === \"Bronze\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Bronze tier icon</title>\r\n <path d=\"M2 12l5-5 4 4 4-4 7 7-5 5-4-4-4 4-7-7z\" />\r\n </svg>\r\n )}\r\n </div>\r\n </div>\r\n ) : (\r\n <span\r\n className=\"block h-fit w-full p-5 bg-black text-white rounded-2xl\"\r\n title={sponsor.name}\r\n >\r\n <b className=\"text-3xl italic\">{sponsor.name}</b>\r\n </span>\r\n )}\r\n\r\n <div className=\"w-full\">\r\n <h3 className={`font-bold text-2xl`}>{sponsor.name}</h3>\r\n {sponsor.sponsorshipTier && (\r\n <span className=\"flex text-[16px] p-2 rounded-xl items-center mt-3.5 font-semibold bg-[#d0f2eb] text-black w-fit\">\r\n {sponsor.sponsorshipTier}\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n </a>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Call-to-action section with title, description, and sponsor links */}\r\n <div\r\n className={`w-full flex justify-center p-10 ${(Theme === \"light\" || Theme === \"dark\") && classAccordingToTheme(Theme)} ${classNames.ctaSection}`}\r\n >\r\n <div className=\"w-4/5 flex flex-col items-center gap-5 py-20 border border-primary rounded-sm mt-20 mb-20\">\r\n <h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>\r\n {ctaSection.title}\r\n </h2>\r\n <p\r\n className={`font-semibold \r\n ${Theme === \"light\" ? \"text-gray-600\" : \"text-gray-400\"}`}\r\n >\r\n {ctaSection.description}\r\n </p>\r\n <div className=\"flex flex-wrap justify-center items-center gap-5 mt-8\">\r\n {ctaSection.sponsorLink.map((link, index) => (\r\n <a\r\n href={link.url}\r\n key={index}\r\n {...(link.newTab && { target: \"_blank\" })}\r\n rel=\"noopener noreferrer\"\r\n title={`Support Us using ${link.name}`}\r\n >\r\n <div\r\n className={`${getButtonClasses(buttonVariant)} w-fit px-6 py-3`}\r\n >\r\n {link.icon && <span>{link.icon}</span>}\r\n <h3 className={`font-bold`}>{link.name}</h3>\r\n </div>\r\n </a>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default SupportUsButton;\r\n"],"names":["classAccordingToTheme","Theme","getButtonClasses","buttonVariant","base","variant","SupportUsButton","pattern","hero","title","description","sponsorLabel","organizationInformation","sponsors","ctaSection","classNames","container","Hero","_jsxs","className","children","Image","_jsx","src","alt","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","d","logo","draggable","name","projectInformation","length","map","sponsor","index","href","link","target","rel","sponsorshipTier","sponsorLink","url","newTab","icon"],"mappings":"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"}

package/dist/index.umd.js ADDED Viewed

	@@ -0,0 +1,2 @@
1	+ !function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t(require("react/jsx-runtime")):"function"==typeof define&&define.amd?define(["react/jsx-runtime"],t):(e="undefined"!=typeof globalThis?globalThis:e\|\|self)["support-us-button"]=t(e.jsxRuntime)}(this,function(e){"use strict";function t(e){switch(e){case"AOSSIE":return"bg-primary text-black";case"light":return"bg-gray-100 text-gray-800";case"dark":return"bg-black text-white";case"minimal":return"bg-transparent text-gray-800 border border-gray-800";case"corporate":return"bg-blue-600 text-white";default:return"bg-gray-200 text-gray-800"}}function r(e){const t="w-full px-5 py-3 font-medium transition-all duration-300 flex items-center justify-center gap-2",r=e??"AOSSIE";return"primary"===r?`${t} bg-white text-black hover:bg-white/90`:"secondary"===r?`${t} border border-white/30 text-white hover:bg-white/20`:"ghost"===r?`${t} text-white/80 hover:text-white hover:bg-white/10 outline-2 outline-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/20`:"gradient"===r?`${t} bg-gradient-to-r from-indigo-500 to-purple-600 text-white`:`${t} bg-primary hover:bg-primary/90 text-black font-black py-4 transition-all active:scale-[0.98] shadow-lg shadow-primary/20`}return function({Theme:s="AOSSIE",pattern:i="AOSSIE",hero:n={title:"Support Our Open Source Project",description:"Your support helps us continue to develop and maintain our project.",sponsorLabel:"You're Sponsoring"},organizationInformation:l,sponsors:a,ctaSection:o,classNames:c={container:"",Hero:"",organizationInformation:"",sponsors:"",ctaSection:""},buttonVariant:d="AOSSIE"}){return e.jsxs("div",{className:`w-full font-sans justify-center items-center text-center ${"light"==s\|\|"dark"==s?t(s):"bg-black text-white"} ${c.container}`,children:[e.jsxs("div",{className:"relative w-full h-[50vh] flex justify-center",children:[n.Image&&e.jsx("img",{src:n.Image.src,alt:n.Image.alt,title:n.Image.alt,className:"w-full h-full object-cover object-center pointer-none:cursor-none select-none"}),e.jsx("div",{className:"absolute inset-0 bg-linear-to-b from-transparent via-black/10 to-black/95"})]}),e.jsx("div",{className:"w-full flex justify-center mt-10 mb-5",children:e.jsxs("div",{className:`${c.Hero} w-[80%] flex text-center p-8 flex-col items-center gap-4`,children:[e.jsx("div",{className:"p-2 rounded-full flex items-center justify-center bg-primary text-black",children:e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"35",height:"35",viewBox:"0 0 24 24",fill:"black",stroke:"black",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round",className:"lucide lucide-heart-icon lucide-heart",children:[e.jsx("title",{children:"Support heart icon"}),e.jsx("path",{d:"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5"})]})}),e.jsxs("div",{className:"w-full flex flex-col items-center gap-6",children:[e.jsx("h1",{className:"font-extrabold text-4xl md:text-5xl lg:text-6xl",children:n.title}),e.jsx("p",{className:`wrap-anywhere ${"light"===s?"text-slate-600":"text-slate-400"} text-lg font-semibold`,children:n.description})]})]})}),e.jsx("div",{className:"w-full flex justify-center p-10 mb-50",children:e.jsxs("div",{className:`${c.organizationInformation}\n relative w-[90%] p-15 rounded-2xl overflow-visible\n\n // Shadows for different themes\n ${"AOSSIE"===s&&"shadow-xl shadow-primary/20"}\n ${"light"===s&&"shadow-xl shadow-gray-300/30"}\n ${"dark"===s&&"shadow-xl shadow-gray-700/30"}\n ${"minimal"===s&&"shadow-xl shadow-gray-800/30"}\n ${"corporate"===s&&"shadow-xl shadow-blue-600/30"}\n \n // Outline for light and dark themes\n ${"light"===s&&"outline-1 outline-gray-300"}\n ${"dark"===s&&"outline-1 outline-gray-700"}\n ${t(s)}`,children:[e.jsx("div",{className:"absolute inset-0 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100"}),e.jsx("div",{className:`absolute top-0 left-0 bottom-0 w-1/2 h-full rounded-2xl p-6 overflow-visible ${t(s)}`}),e.jsxs("div",{className:"relative z-10 flex justify-start flex-col text-start gap-4",children:[n.sponsorLabel&&e.jsx("span",{className:"text-[10px] font-extrabold tracking-[0.2em] uppercase block",children:n.sponsorLabel}),e.jsx("div",{children:"string"==typeof l.logo?e.jsx("span",{className:"block h-fit w-fit p-4 bg-black text-white rounded-2xl",title:l.logo,children:e.jsx("b",{className:"text-2xl italic",children:l.logo})}):e.jsx("img",{className:"w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center",src:l.logo?.src,alt:l.logo?.alt,title:l.logo?.alt,draggable:!1})}),e.jsxs("div",{className:"flex flex-col gap-4",children:[e.jsx("h2",{className:"font-extrabold text-4xl md:text-5xl lg:text-6xl",children:l.name}),e.jsx("p",{className:"font-[650]",children:l.description})]}),e.jsx("div",{className:`\n border\n ${"AOSSIE"===s&&"border-[#f1c514]/50"}\n ${"light"===s&&"border-gray-300/50"}\n ${"dark"===s&&"border-gray-700/50"}\n ${"minimal"===s&&"border-gray-800/50"}\n ${"corporate"===s&&"border-blue-600/50"}`}),e.jsxs("div",{className:"flex flex-col gap-2",children:[e.jsxs("h3",{className:`font-bold w-fit uppercase text-sm p-2 rounded-lg\n ${"AOSSIE"===s&&"bg-[#edc214]"}\n ${"light"===s&&"bg-gray-300/50"}\n ${"dark"===s&&"bg-gray-700/50"}\n ${"minimal"===s&&"bg-gray-800/50"}\n ${"corporate"===s&&"bg-blue-600/50"}`,children:["ABOUT PROJECT: ",l.projectInformation.name]}),e.jsxs("p",{className:`italic font-semibold \n ${"AOSSIE"===s&&"text-[#614f08]"}\n ${"light"===s&&"text-gray-600"}\n ${"dark"===s&&"text-gray-400"}\n ${"minimal"===s&&"text-gray-800"}\n ${"corporate"===s&&"text-blue-600/80"}\n `,children:['"',l.projectInformation.description,'"']})]})]})]})}),e.jsx("div",{className:`w-full flex justify-center mt-10 p-10\n ${"AOSSIE"===s&&"bg-[#1f1f1f]"} \n ${"light"===s&&"bg-gray-300/50"} \n ${"dark"===s&&"bg-gray-700/50"}\n ${"minimal"===s&&"bg-gray-800/50"}\n ${"corporate"===s&&"bg-blue-600/50"}`,children:a&&a.length>0&&e.jsxs("div",{className:`${c.sponsors} ${t(s)}\n relative w-[90%] flex flex-col p-8 rounded-2xl gap-25 mt-15 overflow-hidden`,children:["AOSSIE"===i&&e.jsx("div",{className:"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-AOSSIE opacity-60"}),"grid"===i&&e.jsx("div",{className:"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-grid opacity-60"}),"dots"===i&&e.jsx("div",{className:"absolute bottom-0 inset-x-0 h-1/2 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100"}),e.jsx("div",{className:"mt-5 flex justify-center",children:e.jsxs("div",{className:"w-fit flex flex-col gap-5 justify-center items-center",children:[e.jsx("h2",{className:"font-extrabold text-4xl md:text-5xl lg:text-6xl",children:"Our Sponsors"}),e.jsx("div",{className:"border-3 rounded-4xl w-1/2"})]})}),e.jsx("div",{className:"flex flex-row flex-wrap justify-center items-center gap-10 z-10",children:a.map((t,r)=>e.jsx("a",{href:t.link,target:"_blank",rel:"noopener noreferrer",title:`Visit ${t.name}'s website`,children:e.jsxs("div",{className:`${"dark"===s?"bg-gray-800 text-white":"bg-white text-black"} rounded-lg flex flex-col justify-center items-center gap-2 p-8 w-fit transition-transform hover:scale-[1.02] shadow-lg min-h-75 min-w-62.5 hover:border-2 \n\n // Shadows for different themes\n ${"AOSSIE"===s&&"shadow-primary/20"}\n ${"light"===s&&"shadow-gray-300/30"}\n ${"dark"===s&&"shadow-gray-700/30"}\n ${"minimal"===s&&"shadow-gray-800/30"} \n ${"corporate"===s&&"shadow-blue-600/30"}\n \n // Size based on sponsorship tier\n ${"Platinum"===t.sponsorshipTier&&"min-w-80 min-h-90"}\n ${"Gold"===t.sponsorshipTier&&"min-w-70 min-h-80"}\n ${"Silver"===t.sponsorshipTier&&"min-w-60 min-h-70"}\n ${"Bronze"===t.sponsorshipTier&&"min-w-50 min-h-60"}\n `,children:[t.logo?e.jsxs("div",{className:"relative",children:[e.jsx("img",{src:t.logo,alt:t.name,title:t.name,className:`w-50 h-40 object-cover object-center rounded-lg\n ${"Platinum"===t.sponsorshipTier&&"w-60 h-50"}\n ${"Gold"===t.sponsorshipTier&&"w-55 h-45"}\n ${"Silver"===t.sponsorshipTier&&"w-50 h-40"}\n ${"Bronze"===t.sponsorshipTier&&"w-45 h-35"}\n `,draggable:!1}),e.jsxs("div",{className:`absolute rotate-12\n \n ${"Platinum"===t.sponsorshipTier&&"rotate-12 -top-4 -right-1"}\n ${"Gold"===t.sponsorshipTier&&"rotate-20 -top-4.5 -right-2.5"}\n ${"Silver"===t.sponsorshipTier&&"rotate-30 -top-5.5 -right-4.5"}\n ${"Bronze"===t.sponsorshipTier&&"rotate-40 -top-3 -right-3"}\n `,children:["Platinum"===t.sponsorshipTier&&e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"currentColor",viewBox:"0 0 24 24",children:[e.jsx("title",{children:"Platinum tier icon"}),e.jsx("path",{d:"M3 7l4 4 5-7 5 7 4-4v11H3V7z"})]}),"Gold"===t.sponsorshipTier&&e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"currentColor",viewBox:"0 0 24 24",children:[e.jsx("title",{children:"Gold tier icon"}),e.jsx("path",{d:"M6 2h12v3h3v3a5 5 0 0 1-5 5h-1a5 5 0 0 1-4 3.9V20h4v2H9v-2h4v-3.1A5 5 0 0 1 9 13H8a5 5 0 0 1-5-5V5h3V2z"})]}),"Silver"===t.sponsorshipTier&&e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"32",height:"32",fill:"currentColor",viewBox:"0 0 24 24",children:[e.jsx("title",{children:"Silver tier icon"}),e.jsx("path",{d:"M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2l-3 6 3-2 3 2-3-6z"})]}),"Bronze"===t.sponsorshipTier&&e.jsxs("svg",{xmlns:"http://www.w3.org/2000/svg",width:"24",height:"24",fill:"currentColor",viewBox:"0 0 24 24",children:[e.jsx("title",{children:"Bronze tier icon"}),e.jsx("path",{d:"M2 12l5-5 4 4 4-4 7 7-5 5-4-4-4 4-7-7z"})]})]})]}):e.jsx("span",{className:"block h-fit w-full p-5 bg-black text-white rounded-2xl",title:t.name,children:e.jsx("b",{className:"text-3xl italic",children:t.name})}),e.jsxs("div",{className:"w-full",children:[e.jsx("h3",{className:"font-bold text-2xl",children:t.name}),t.sponsorshipTier&&e.jsx("span",{className:"flex text-[16px] p-2 rounded-xl items-center mt-3.5 font-semibold bg-[#d0f2eb] text-black w-fit",children:t.sponsorshipTier})]})]})},r))})]})}),e.jsx("div",{className:`w-full flex justify-center p-10 ${("light"===s\|\|"dark"===s)&&t(s)} ${c.ctaSection}`,children:e.jsxs("div",{className:"w-4/5 flex flex-col items-center gap-5 py-20 border border-primary rounded-sm mt-20 mb-20",children:[e.jsx("h2",{className:"font-extrabold text-4xl md:text-5xl lg:text-6xl",children:o.title}),e.jsx("p",{className:"font-semibold \n "+("light"===s?"text-gray-600":"text-gray-400"),children:o.description}),e.jsx("div",{className:"flex flex-wrap justify-center items-center gap-5 mt-8",children:o.sponsorLink.map((t,s)=>e.jsx("a",{href:t.url,...t.newTab&&{target:"_blank"},rel:"noopener noreferrer",title:`Support Us using ${t.name}`,children:e.jsxs("div",{className:`${r(d)} w-fit px-6 py-3`,children:[t.icon&&e.jsx("span",{children:t.icon}),e.jsx("h3",{className:"font-bold",children:t.name})]})},s))})]})})]})}});
2	+ //# sourceMappingURL=index.umd.js.map

package/dist/index.umd.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.umd.js","sources":["../src/components/SupportUsButton.tsx"],"sourcesContent":["import React from \"react\";\r\nimport type { supportUsButtonProps } from \"../types/index\";\r\nimport type { Theme } from \"../types/index\";\r\nimport type { ButtonVariant } from \"../types/index\";\r\n\r\n// Function to get the appropriate classes based on the selected theme, used for styling different sections of the component according to the chosen theme\r\nfunction classAccordingToTheme(Theme: Theme): string {\r\n switch (Theme) {\r\n case \"AOSSIE\":\r\n return \"bg-primary text-black\";\r\n case \"light\":\r\n return \"bg-gray-100 text-gray-800\";\r\n case \"dark\":\r\n return \"bg-black text-white\";\r\n case \"minimal\":\r\n return \"bg-transparent text-gray-800 border border-gray-800\";\r\n case \"corporate\":\r\n return \"bg-blue-600 text-white\";\r\n default:\r\n return \"bg-gray-200 text-gray-800\";\r\n }\r\n}\r\n\r\n// Function to get the appropriate button classes based on the selected button variant, used for styling the call-to-action buttons according to the chosen variant\r\nfunction getButtonClasses(buttonVariant: ButtonVariant): string {\r\n const base =\r\n \"w-full px-5 py-3 font-medium transition-all duration-300 flex items-center justify-center gap-2\";\r\n\r\n const variant = buttonVariant ?? \"AOSSIE\";\r\n\r\n if (variant === \"primary\") {\r\n return `${base} bg-white text-black hover:bg-white/90`;\r\n }\r\n\r\n if (variant === \"secondary\") {\r\n return `${base} border border-white/30 text-white hover:bg-white/20`;\r\n }\r\n\r\n if (variant === \"ghost\") {\r\n return `${base} text-white/80 hover:text-white hover:bg-white/10 outline-2 outline-white/10 focus-visible:outline focus-visible:outline-2 focus-visible:outline-white/20`;\r\n }\r\n\r\n if (variant === \"gradient\") {\r\n return `${base} bg-gradient-to-r from-indigo-500 to-purple-600 text-white`;\r\n }\r\n\r\n // Default to AOSSIE variant\r\n return `${base} bg-primary hover:bg-primary/90 text-black font-black py-4 transition-all active:scale-[0.98] shadow-lg shadow-primary/20`;\r\n}\r\n\r\n// Main component function that renders the support us button, taking in various props for customization and rendering different sections such as hero, organization information, sponsors, and call-to-action based on the provided data and selected theme and button variant\r\nfunction SupportUsButton({\r\n Theme = \"AOSSIE\",\r\n pattern = \"AOSSIE\",\r\n hero = {\r\n title: \"Support Our Open Source Project\",\r\n description:\r\n \"Your support helps us continue to develop and maintain our project.\",\r\n sponsorLabel: \"You're Sponsoring\",\r\n },\r\n organizationInformation,\r\n sponsors,\r\n ctaSection,\r\n classNames = {\r\n container: \"\",\r\n Hero: \"\",\r\n organizationInformation: \"\",\r\n sponsors: \"\",\r\n ctaSection: \"\",\r\n },\r\n buttonVariant = \"AOSSIE\",\r\n}: supportUsButtonProps): React.JSX.Element {\r\n return (\r\n // Container for the support us button, with dynamic classes based on the selected theme and custom class names\r\n <div\r\n className={`w-full font-sans justify-center items-center text-center ${Theme == \"light\" || Theme == \"dark\" ? classAccordingToTheme(Theme) : \"bg-black text-white\"} ${classNames.container}`}\r\n >\r\n {/* Hero section with optional background image*/}\r\n <div className=\"relative w-full h-[50vh] flex justify-center\">\r\n {hero.Image && (\r\n <img\r\n src={hero.Image.src}\r\n alt={hero.Image.alt}\r\n title={hero.Image.alt}\r\n className=\"w-full h-full object-cover object-center pointer-none:cursor-none select-none\"\r\n />\r\n )}\r\n {/* Gradient overlay */}\r\n <div className=\"absolute inset-0 bg-linear-to-b from-transparent via-black/10 to-black/95\"></div>\r\n </div>\r\n\r\n {/* Hero title and description */}\r\n <div className=\"w-full flex justify-center mt-10 mb-5\">\r\n <div\r\n className={`${classNames.Hero} w-[80%] flex text-center p-8 flex-col items-center gap-4`}\r\n >\r\n <div\r\n className={`p-2 rounded-full flex items-center justify-center bg-primary text-black`}\r\n >\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"35\"\r\n height=\"35\"\r\n viewBox=\"0 0 24 24\"\r\n fill=\"black\"\r\n stroke=\"black\"\r\n strokeWidth=\"2\"\r\n strokeLinecap=\"round\"\r\n strokeLinejoin=\"round\"\r\n className=\"lucide lucide-heart-icon lucide-heart\"\r\n >\r\n <title>Support heart icon</title>\r\n <path d=\"M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5\" />\r\n </svg>\r\n </div>\r\n\r\n <div className=\"w-full flex flex-col items-center gap-6\">\r\n <h1 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>\r\n {hero.title}\r\n </h1>\r\n <p\r\n className={`wrap-anywhere ${Theme === \"light\" ? \"text-slate-600\" : \"text-slate-400\"} text-lg font-semibold`}\r\n >\r\n {hero.description}\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Organization information section */}\r\n <div className=\"w-full flex justify-center p-10 mb-50\">\r\n <div\r\n className={`${classNames.organizationInformation}\r\n relative w-[90%] p-15 rounded-2xl overflow-visible\r\n\r\n // Shadows for different themes\r\n ${Theme === \"AOSSIE\" && \"shadow-xl shadow-primary/20\"}\r\n ${Theme === \"light\" && \"shadow-xl shadow-gray-300/30\"}\r\n ${Theme === \"dark\" && \"shadow-xl shadow-gray-700/30\"}\r\n ${Theme === \"minimal\" && \"shadow-xl shadow-gray-800/30\"}\r\n ${Theme === \"corporate\" && \"shadow-xl shadow-blue-600/30\"}\r\n \r\n // Outline for light and dark themes\r\n ${Theme === \"light\" && \"outline-1 outline-gray-300\"}\r\n ${Theme === \"dark\" && \"outline-1 outline-gray-700\"}\r\n ${classAccordingToTheme(Theme)}`}\r\n >\r\n {/* Background grid */}\r\n <div className=\"absolute inset-0 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100\"></div>\r\n <div\r\n className={`absolute top-0 left-0 bottom-0 w-1/2 h-full rounded-2xl p-6 overflow-visible ${classAccordingToTheme(Theme)}`}\r\n ></div>\r\n\r\n {/* Content container */}\r\n <div className=\"relative z-10 flex justify-start flex-col text-start gap-4\">\r\n {/* Sponsor label */}\r\n {hero.sponsorLabel && (\r\n <span className=\"text-[10px] font-extrabold tracking-[0.2em] uppercase block\">\r\n {hero.sponsorLabel}\r\n </span>\r\n )}\r\n\r\n {/* Organization logo */}\r\n <div>\r\n {typeof organizationInformation.logo === \"string\" ? (\r\n <span\r\n className=\"block h-fit w-fit p-4 bg-black text-white rounded-2xl\"\r\n title={organizationInformation.logo}\r\n >\r\n <b className=\"text-2xl italic\">\r\n {organizationInformation.logo}\r\n </b>\r\n </span>\r\n ) : (\r\n <img\r\n className=\"w-24 h-24 bg-white/80 pointer-none:cursor-none select-none rounded-2xl object-cover object-center\"\r\n src={organizationInformation.logo?.src}\r\n alt={organizationInformation.logo?.alt}\r\n title={organizationInformation.logo?.alt}\r\n draggable={false}\r\n />\r\n )}\r\n </div>\r\n\r\n {/* Organization name and description */}\r\n <div className=\"flex flex-col gap-4\">\r\n <h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>\r\n {organizationInformation.name}\r\n </h2>\r\n <p className=\"font-[650]\">\r\n {organizationInformation.description}\r\n </p>\r\n </div>\r\n\r\n {/* Line */}\r\n <div\r\n className={`\r\n border\r\n ${Theme === \"AOSSIE\" && \"border-[#f1c514]/50\"}\r\n ${Theme === \"light\" && \"border-gray-300/50\"}\r\n ${Theme === \"dark\" && \"border-gray-700/50\"}\r\n ${Theme === \"minimal\" && \"border-gray-800/50\"}\r\n ${Theme === \"corporate\" && \"border-blue-600/50\"}`}\r\n ></div>\r\n\r\n {/* Project information */}\r\n <div className=\"flex flex-col gap-2\">\r\n <h3\r\n className={`font-bold w-fit uppercase text-sm p-2 rounded-lg\r\n ${Theme === \"AOSSIE\" && \"bg-[#edc214]\"}\r\n ${Theme === \"light\" && \"bg-gray-300/50\"}\r\n ${Theme === \"dark\" && \"bg-gray-700/50\"}\r\n ${Theme === \"minimal\" && \"bg-gray-800/50\"}\r\n ${Theme === \"corporate\" && \"bg-blue-600/50\"}`}\r\n >\r\n ABOUT PROJECT: {organizationInformation.projectInformation.name}\r\n </h3>\r\n <p\r\n className={`italic font-semibold \r\n ${Theme === \"AOSSIE\" && \"text-[#614f08]\"}\r\n ${Theme === \"light\" && \"text-gray-600\"}\r\n ${Theme === \"dark\" && \"text-gray-400\"}\r\n ${Theme === \"minimal\" && \"text-gray-800\"}\r\n ${Theme === \"corporate\" && \"text-blue-600/80\"}\r\n `}\r\n >\r\n \"{organizationInformation.projectInformation.description}\"\r\n </p>\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n\r\n {/* Sponsors section */}\r\n <div\r\n className={`w-full flex justify-center mt-10 p-10\r\n ${Theme === \"AOSSIE\" && \"bg-[#1f1f1f]\"} \r\n ${Theme === \"light\" && \"bg-gray-300/50\"} \r\n ${Theme === \"dark\" && \"bg-gray-700/50\"}\r\n ${Theme === \"minimal\" && \"bg-gray-800/50\"}\r\n ${Theme === \"corporate\" && \"bg-blue-600/50\"}`}\r\n >\r\n {sponsors && sponsors.length > 0 && (\r\n // List of sponsors with their logos and links, styled according to the selected theme and custom class names\r\n <div\r\n className={`${classNames.sponsors} ${classAccordingToTheme(Theme)}\r\n relative w-[90%] flex flex-col p-8 rounded-2xl gap-25 mt-15 overflow-hidden`}\r\n >\r\n {/* Sponsor pattern AOSSIE */}\r\n {pattern === \"AOSSIE\" && (\r\n <div className=\"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-AOSSIE opacity-60\"></div>\r\n )}\r\n {/* Sponsor pattern Grid */}\r\n {pattern === \"grid\" && (\r\n <div className=\"absolute bottom-0 inset-x-0 h-1/2 sponsor-pattern-grid opacity-60\"></div>\r\n )}\r\n {/* Sponsor pattern Dots */}\r\n {pattern === \"dots\" && (\r\n <div className=\"absolute bottom-0 inset-x-0 h-1/2 bg-[radial-gradient(rgba(0,0,0,0.15)_1.5px,transparent_0)] bg-size-[20px_20px] pointer-events-none opacity-100\"></div>\r\n )}\r\n\r\n {/* Section title */}\r\n <div className=\"mt-5 flex justify-center\">\r\n <div className=\"w-fit flex flex-col gap-5 justify-center items-center\">\r\n <h2\r\n className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}\r\n >\r\n Our Sponsors\r\n </h2>\r\n\r\n {/* Underline */}\r\n <div className={`border-3 rounded-4xl w-1/2`}></div>\r\n </div>\r\n </div>\r\n\r\n {/* Sponsor logos */}\r\n <div className=\"flex flex-row flex-wrap justify-center items-center gap-10 z-10\">\r\n {sponsors.map((sponsor, index) => (\r\n <a\r\n href={sponsor.link}\r\n key={index}\r\n target=\"_blank\"\r\n rel=\"noopener noreferrer\"\r\n title={`Visit ${sponsor.name}'s website`}\r\n >\r\n <div\r\n className={`${Theme === \"dark\" ? \"bg-gray-800 text-white\" : \"bg-white text-black\"} rounded-lg flex flex-col justify-center items-center gap-2 p-8 w-fit transition-transform hover:scale-[1.02] shadow-lg min-h-75 min-w-62.5 hover:border-2 \r\n\r\n // Shadows for different themes\r\n ${Theme === \"AOSSIE\" && \"shadow-primary/20\"}\r\n ${Theme === \"light\" && \"shadow-gray-300/30\"}\r\n ${Theme === \"dark\" && \"shadow-gray-700/30\"}\r\n ${Theme === \"minimal\" && \"shadow-gray-800/30\"} \r\n ${Theme === \"corporate\" && \"shadow-blue-600/30\"}\r\n \r\n // Size based on sponsorship tier\r\n ${sponsor.sponsorshipTier === \"Platinum\" && \"min-w-80 min-h-90\"}\r\n ${sponsor.sponsorshipTier === \"Gold\" && \"min-w-70 min-h-80\"}\r\n ${sponsor.sponsorshipTier === \"Silver\" && \"min-w-60 min-h-70\"}\r\n ${sponsor.sponsorshipTier === \"Bronze\" && \"min-w-50 min-h-60\"}\r\n `}\r\n >\r\n {sponsor.logo ? (\r\n <div className=\"relative\">\r\n <img\r\n src={sponsor.logo}\r\n alt={sponsor.name}\r\n title={sponsor.name}\r\n className={`w-50 h-40 object-cover object-center rounded-lg\r\n ${sponsor.sponsorshipTier === \"Platinum\" && \"w-60 h-50\"}\r\n ${sponsor.sponsorshipTier === \"Gold\" && \"w-55 h-45\"}\r\n ${sponsor.sponsorshipTier === \"Silver\" && \"w-50 h-40\"}\r\n ${sponsor.sponsorshipTier === \"Bronze\" && \"w-45 h-35\"}\r\n `}\r\n draggable={false}\r\n />\r\n {/* Sponsor tier icon */}\r\n <div\r\n className={`absolute rotate-12\r\n \r\n ${sponsor.sponsorshipTier === \"Platinum\" && \"rotate-12 -top-4 -right-1\"}\r\n ${sponsor.sponsorshipTier === \"Gold\" && \"rotate-20 -top-4.5 -right-2.5\"}\r\n ${sponsor.sponsorshipTier === \"Silver\" && \"rotate-30 -top-5.5 -right-4.5\"}\r\n ${sponsor.sponsorshipTier === \"Bronze\" && \"rotate-40 -top-3 -right-3\"}\r\n `}\r\n >\r\n {/* Platinum tier icon */}\r\n {sponsor.sponsorshipTier === \"Platinum\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Platinum tier icon</title>\r\n <path d=\"M3 7l4 4 5-7 5 7 4-4v11H3V7z\" />\r\n </svg>\r\n )}\r\n {/* Gold tier icon */}\r\n {sponsor.sponsorshipTier === \"Gold\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Gold tier icon</title>\r\n <path d=\"M6 2h12v3h3v3a5 5 0 0 1-5 5h-1a5 5 0 0 1-4 3.9V20h4v2H9v-2h4v-3.1A5 5 0 0 1 9 13H8a5 5 0 0 1-5-5V5h3V2z\" />\r\n </svg>\r\n )}\r\n {/* Silver tier icon */}\r\n {sponsor.sponsorshipTier === \"Silver\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"32\"\r\n height=\"32\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Silver tier icon</title>\r\n <path d=\"M12 14a5 5 0 1 0 0-10 5 5 0 0 0 0 10zm0 2l-3 6 3-2 3 2-3-6z\" />\r\n </svg>\r\n )}\r\n {/* Bronze tier icon */}\r\n {sponsor.sponsorshipTier === \"Bronze\" && (\r\n <svg\r\n xmlns=\"http://www.w3.org/2000/svg\"\r\n width=\"24\"\r\n height=\"24\"\r\n fill=\"currentColor\"\r\n viewBox=\"0 0 24 24\"\r\n >\r\n <title>Bronze tier icon</title>\r\n <path d=\"M2 12l5-5 4 4 4-4 7 7-5 5-4-4-4 4-7-7z\" />\r\n </svg>\r\n )}\r\n </div>\r\n </div>\r\n ) : (\r\n <span\r\n className=\"block h-fit w-full p-5 bg-black text-white rounded-2xl\"\r\n title={sponsor.name}\r\n >\r\n <b className=\"text-3xl italic\">{sponsor.name}</b>\r\n </span>\r\n )}\r\n\r\n <div className=\"w-full\">\r\n <h3 className={`font-bold text-2xl`}>{sponsor.name}</h3>\r\n {sponsor.sponsorshipTier && (\r\n <span className=\"flex text-[16px] p-2 rounded-xl items-center mt-3.5 font-semibold bg-[#d0f2eb] text-black w-fit\">\r\n {sponsor.sponsorshipTier}\r\n </span>\r\n )}\r\n </div>\r\n </div>\r\n </a>\r\n ))}\r\n </div>\r\n </div>\r\n )}\r\n </div>\r\n\r\n {/* Call-to-action section with title, description, and sponsor links */}\r\n <div\r\n className={`w-full flex justify-center p-10 ${(Theme === \"light\" || Theme === \"dark\") && classAccordingToTheme(Theme)} ${classNames.ctaSection}`}\r\n >\r\n <div className=\"w-4/5 flex flex-col items-center gap-5 py-20 border border-primary rounded-sm mt-20 mb-20\">\r\n <h2 className={`font-extrabold text-4xl md:text-5xl lg:text-6xl`}>\r\n {ctaSection.title}\r\n </h2>\r\n <p\r\n className={`font-semibold \r\n ${Theme === \"light\" ? \"text-gray-600\" : \"text-gray-400\"}`}\r\n >\r\n {ctaSection.description}\r\n </p>\r\n <div className=\"flex flex-wrap justify-center items-center gap-5 mt-8\">\r\n {ctaSection.sponsorLink.map((link, index) => (\r\n <a\r\n href={link.url}\r\n key={index}\r\n {...(link.newTab && { target: \"_blank\" })}\r\n rel=\"noopener noreferrer\"\r\n title={`Support Us using ${link.name}`}\r\n >\r\n <div\r\n className={`${getButtonClasses(buttonVariant)} w-fit px-6 py-3`}\r\n >\r\n {link.icon && <span>{link.icon}</span>}\r\n <h3 className={`font-bold`}>{link.name}</h3>\r\n </div>\r\n </a>\r\n ))}\r\n </div>\r\n </div>\r\n </div>\r\n </div>\r\n );\r\n}\r\n\r\nexport default SupportUsButton;\r\n"],"names":["classAccordingToTheme","Theme","getButtonClasses","buttonVariant","base","variant","pattern","hero","title","description","sponsorLabel","organizationInformation","sponsors","ctaSection","classNames","container","Hero","_jsxs","className","children","Image","_jsx","src","alt","xmlns","width","height","viewBox","fill","stroke","strokeWidth","strokeLinecap","strokeLinejoin","d","logo","draggable","name","projectInformation","length","map","sponsor","index","href","link","target","rel","sponsorshipTier","sponsorLink","url","newTab","icon"],"mappings":"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"}

package/dist/style.css ADDED Viewed

@@ -0,0 +1 @@

+ /*! tailwindcss v4.2.1 | MIT License | https://tailwindcss.com */@layer theme, base, components, utilities;@layer theme{:host,:root{--font-sans:ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;--color-blue-600:oklch(54.6% 0.245 262.881);--color-indigo-500:oklch(58.5% 0.233 277.117);--color-purple-600:oklch(55.8% 0.288 302.321);--color-slate-400:oklch(70.4% 0.04 256.788);--color-slate-600:oklch(44.6% 0.043 257.281);--color-gray-100:oklch(96.7% 0.003 264.542);--color-gray-200:oklch(92.8% 0.006 264.531);--color-gray-300:oklch(87.2% 0.01 258.338);--color-gray-400:oklch(70.7% 0.022 261.325);--color-gray-600:oklch(44.6% 0.03 256.802);--color-gray-700:oklch(37.3% 0.034 259.733);--color-gray-800:oklch(27.8% 0.033 256.848);--color-black:#000;--color-white:#fff;--spacing:0.25rem;--text-sm:0.875rem;--text-sm--line-height:1.42857;--text-lg:1.125rem;--text-lg--line-height:1.55556;--text-2xl:1.5rem;--text-2xl--line-height:1.33333;--text-3xl:1.875rem;--text-3xl--line-height:1.2;--text-4xl:2.25rem;--text-4xl--line-height:1.11111;--text-5xl:3rem;--text-5xl--line-height:1;--text-6xl:3.75rem;--text-6xl--line-height:1;--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--font-weight-extrabold:800;--font-weight-black:900;--radius-sm:0.25rem;--radius-lg:0.5rem;--radius-xl:0.75rem;--radius-2xl:1rem;--radius-4xl:2rem;--default-transition-duration:150ms;--default-transition-timing-function:cubic-bezier(0.4,0,0.2,1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono);--color-primary:gold}}@layer base{*,::backdrop,::file-selector-button,:after,:before{border:0 solid;box-sizing:border-box;margin:0;padding:0}:host,html{-webkit-text-size-adjust:100%;font-feature-settings:var(--default-font-feature-settings,normal);-webkit-tap-highlight-color:transparent;font-family:var(--default-font-family,ui-sans-serif,system-ui,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji");font-variation-settings:var(--default-font-variation-settings,normal);line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4}hr{border-top-width:1px;color:inherit;height:0}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;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-feature-settings:var(--default-mono-font-feature-settings,normal);font-family:var(--default-mono-font-family,ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace);font-size:1em;font-variation-settings:var(--default-mono-font-variation-settings,normal)}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}menu,ol,ul{list-style:none}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}::file-selector-button,button,input,optgroup,select,textarea{font-feature-settings:inherit;background-color:transparent;border-radius:0;color:inherit;font:inherit;font-variation-settings:inherit;letter-spacing:inherit;opacity:1}: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}::-moz-placeholder{opacity:1}::placeholder{opacity:1}@supports (not (-webkit-appearance:-apple-pay-button)) or (contain-intrinsic-size:1px){::-moz-placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,currentcolor 50%,transparent)}}::placeholder{color:currentcolor;@supports (color:color-mix(in lab,red,red)){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,::-webkit-datetime-edit-day-field,::-webkit-datetime-edit-hour-field,::-webkit-datetime-edit-meridiem-field,::-webkit-datetime-edit-millisecond-field,::-webkit-datetime-edit-minute-field,::-webkit-datetime-edit-month-field,::-webkit-datetime-edit-second-field,::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}::file-selector-button,button,input:where([type=button],[type=reset],[type=submit]){-webkit-appearance:button;-moz-appearance:button;appearance:button}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer utilities{.pointer-events-none{pointer-events:none}.visible{visibility:visible}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.inset-0{inset:calc(var(--spacing)*0)}.inset-x-0{inset-inline:calc(var(--spacing)*0)}.start{inset-inline-start:var(--spacing)}.-top-3{top:calc(var(--spacing)*-3)}.-top-4{top:calc(var(--spacing)*-4)}.-top-4\.5{top:calc(var(--spacing)*-4.5)}.-top-5\.5{top:calc(var(--spacing)*-5.5)}.top-0{top:calc(var(--spacing)*0)}.-right-1{right:calc(var(--spacing)*-1)}.-right-2\.5{right:calc(var(--spacing)*-2.5)}.-right-3{right:calc(var(--spacing)*-3)}.-right-4\.5{right:calc(var(--spacing)*-4.5)}.bottom-0{bottom:calc(var(--spacing)*0)}.left-0{left:calc(var(--spacing)*0)}.z-10{z-index:10}.container{width:100%;@media (width >= 40rem){max-width:40rem}@media (width >= 48rem){max-width:48rem}@media (width >= 64rem){max-width:64rem}@media (width >= 80rem){max-width:80rem}@media (width >= 96rem){max-width:96rem}}.mt-3\.5{margin-top:calc(var(--spacing)*3.5)}.mt-5{margin-top:calc(var(--spacing)*5)}.mt-8{margin-top:calc(var(--spacing)*8)}.mt-10{margin-top:calc(var(--spacing)*10)}.mt-15{margin-top:calc(var(--spacing)*15)}.mt-20{margin-top:calc(var(--spacing)*20)}.mb-5{margin-bottom:calc(var(--spacing)*5)}.mb-20{margin-bottom:calc(var(--spacing)*20)}.mb-50{margin-bottom:calc(var(--spacing)*50)}.block{display:block}.contents{display:contents}.flex{display:flex}.grid{display:grid}.h-1\/2{height:50%}.h-24{height:calc(var(--spacing)*24)}.h-35{height:calc(var(--spacing)*35)}.h-40{height:calc(var(--spacing)*40)}.h-45{height:calc(var(--spacing)*45)}.h-50{height:calc(var(--spacing)*50)}.h-\[50vh\]{height:50vh}.h-fit{height:-moz-fit-content;height:fit-content}.h-full{height:100%}.min-h-60{min-height:calc(var(--spacing)*60)}.min-h-70{min-height:calc(var(--spacing)*70)}.min-h-75{min-height:calc(var(--spacing)*75)}.min-h-80{min-height:calc(var(--spacing)*80)}.min-h-90{min-height:calc(var(--spacing)*90)}.w-1\/2{width:50%}.w-4\/5{width:80%}.w-24{width:calc(var(--spacing)*24)}.w-45{width:calc(var(--spacing)*45)}.w-50{width:calc(var(--spacing)*50)}.w-55{width:calc(var(--spacing)*55)}.w-60{width:calc(var(--spacing)*60)}.w-\[80\%\]{width:80%}.w-\[90\%\]{width:90%}.w-fit{width:-moz-fit-content;width:fit-content}.w-full{width:100%}.min-w-50{min-width:calc(var(--spacing)*50)}.min-w-60{min-width:calc(var(--spacing)*60)}.min-w-62\.5{min-width:calc(var(--spacing)*62.5)}.min-w-70{min-width:calc(var(--spacing)*70)}.min-w-80{min-width:calc(var(--spacing)*80)}.rotate-12{rotate:12deg}.rotate-20{rotate:20deg}.rotate-30{rotate:30deg}.rotate-40{rotate:40deg}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-start{justify-content:flex-start}.gap-2{gap:calc(var(--spacing)*2)}.gap-4{gap:calc(var(--spacing)*4)}.gap-5{gap:calc(var(--spacing)*5)}.gap-6{gap:calc(var(--spacing)*6)}.gap-10{gap:calc(var(--spacing)*10)}.gap-25{gap:calc(var(--spacing)*25)}.overflow-hidden{overflow:hidden}.overflow-visible{overflow:visible}.rounded-2xl{border-radius:var(--radius-2xl)}.rounded-4xl{border-radius:var(--radius-4xl)}.rounded-full{border-radius:calc(infinity * 1px)}.rounded-lg{border-radius:var(--radius-lg)}.rounded-sm{border-radius:var(--radius-sm)}.rounded-xl{border-radius:var(--radius-xl)}.border{border-style:var(--tw-border-style);border-width:1px}.border-3{border-style:var(--tw-border-style);border-width:3px}.border-\[\#f1c514\]\/50{border-color:color-mix(in oklab,#f1c514 50%,transparent)}.border-blue-600\/50{border-color:color-mix(in srgb,oklch(54.6% .245 262.881) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-blue-600) 50%,transparent)}}.border-gray-300\/50{border-color:color-mix(in srgb,oklch(87.2% .01 258.338) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-gray-300) 50%,transparent)}}.border-gray-700\/50{border-color:color-mix(in srgb,oklch(37.3% .034 259.733) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-gray-700) 50%,transparent)}}.border-gray-800{border-color:var(--color-gray-800)}.border-gray-800\/50{border-color:color-mix(in srgb,oklch(27.8% .033 256.848) 50%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-gray-800) 50%,transparent)}}.border-primary{border-color:var(--color-primary)}.border-white\/30{border-color:color-mix(in srgb,#fff 30%,transparent);@supports (color:color-mix(in lab,red,red)){border-color:color-mix(in oklab,var(--color-white) 30%,transparent)}}.bg-\[\#1f1f1f\]{background-color:#1f1f1f}.bg-\[\#d0f2eb\]{background-color:#d0f2eb}.bg-\[\#edc214\]{background-color:#edc214}.bg-black{background-color:var(--color-black)}.bg-blue-600{background-color:var(--color-blue-600)}.bg-blue-600\/50{background-color:color-mix(in srgb,oklch(54.6% .245 262.881) 50%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-blue-600) 50%,transparent)}}.bg-gray-100{background-color:var(--color-gray-100)}.bg-gray-200{background-color:var(--color-gray-200)}.bg-gray-300\/50{background-color:color-mix(in srgb,oklch(87.2% .01 258.338) 50%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-gray-300) 50%,transparent)}}.bg-gray-700\/50{background-color:color-mix(in srgb,oklch(37.3% .034 259.733) 50%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-gray-700) 50%,transparent)}}.bg-gray-800{background-color:var(--color-gray-800)}.bg-gray-800\/50{background-color:color-mix(in srgb,oklch(27.8% .033 256.848) 50%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-gray-800) 50%,transparent)}}.bg-primary{background-color:var(--color-primary)}.bg-transparent{background-color:transparent}.bg-white{background-color:var(--color-white)}.bg-white\/80{background-color:color-mix(in srgb,#fff 80%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.bg-linear-to-b{--tw-gradient-position:to bottom;@supports (background-image:linear-gradient(in lab,red,red)){--tw-gradient-position:to bottom in oklab}}.bg-gradient-to-r,.bg-linear-to-b{background-image:linear-gradient(var(--tw-gradient-stops))}.bg-gradient-to-r{--tw-gradient-position:to right in oklab}.bg-\[radial-gradient$rgba\(0\,0\,0\,0\.15$_1\.5px\,transparent_0\)\]{background-image:radial-gradient(rgba(0,0,0,.15) 1.5px,transparent 0)}.from-indigo-500{--tw-gradient-from:var(--color-indigo-500);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.from-transparent{--tw-gradient-from:transparent;--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.via-black\/10{--tw-gradient-via:color-mix(in srgb,#000 10%,transparent);@supports (color:color-mix(in lab,red,red)){--tw-gradient-via:color-mix(in oklab,var(--color-black) 10%,transparent)}--tw-gradient-via-stops:var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-via) var(--tw-gradient-via-position),var(--tw-gradient-to) var(--tw-gradient-to-position);--tw-gradient-stops:var(--tw-gradient-via-stops)}.to-black\/95{--tw-gradient-to:color-mix(in srgb,#000 95%,transparent);@supports (color:color-mix(in lab,red,red)){--tw-gradient-to:color-mix(in oklab,var(--color-black) 95%,transparent)}--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.to-purple-600{--tw-gradient-to:var(--color-purple-600);--tw-gradient-stops:var(--tw-gradient-via-stops,var(--tw-gradient-position),var(--tw-gradient-from) var(--tw-gradient-from-position),var(--tw-gradient-to) var(--tw-gradient-to-position))}.bg-size-\[20px_20px\]{background-size:20px 20px}.object-cover{-o-object-fit:cover;object-fit:cover}.object-center{-o-object-position:center;object-position:center}.p-2{padding:calc(var(--spacing)*2)}.p-4{padding:calc(var(--spacing)*4)}.p-5{padding:calc(var(--spacing)*5)}.p-6{padding:calc(var(--spacing)*6)}.p-8{padding:calc(var(--spacing)*8)}.p-10{padding:calc(var(--spacing)*10)}.p-15{padding:calc(var(--spacing)*15)}.px-5{padding-inline:calc(var(--spacing)*5)}.px-6{padding-inline:calc(var(--spacing)*6)}.py-3{padding-block:calc(var(--spacing)*3)}.py-4{padding-block:calc(var(--spacing)*4)}.py-20{padding-block:calc(var(--spacing)*20)}.text-center{text-align:center}.text-start{text-align:start}.font-sans{font-family:var(--font-sans)}.text-2xl{font-size:var(--text-2xl);line-height:var(--tw-leading,var(--text-2xl--line-height))}.text-3xl{font-size:var(--text-3xl);line-height:var(--tw-leading,var(--text-3xl--line-height))}.text-4xl{font-size:var(--text-4xl);line-height:var(--tw-leading,var(--text-4xl--line-height))}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-\[10px\]{font-size:10px}.text-\[16px\]{font-size:16px}.font-\[650\]{--tw-font-weight:650;font-weight:650}.font-black{--tw-font-weight:var(--font-weight-black);font-weight:var(--font-weight-black)}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-extrabold{--tw-font-weight:var(--font-weight-extrabold);font-weight:var(--font-weight-extrabold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-\[0\.2em\]{--tw-tracking:0.2em;letter-spacing:.2em}.wrap-anywhere{overflow-wrap:anywhere}.text-\[\#614f08\]{color:#614f08}.text-black{color:var(--color-black)}.text-blue-600\/80{color:color-mix(in srgb,oklch(54.6% .245 262.881) 80%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-blue-600) 80%,transparent)}}.text-gray-400{color:var(--color-gray-400)}.text-gray-600{color:var(--color-gray-600)}.text-gray-800{color:var(--color-gray-800)}.text-slate-400{color:var(--color-slate-400)}.text-slate-600{color:var(--color-slate-600)}.text-white{color:var(--color-white)}.text-white\/80{color:color-mix(in srgb,#fff 80%,transparent);@supports (color:color-mix(in lab,red,red)){color:color-mix(in oklab,var(--color-white) 80%,transparent)}}.uppercase{text-transform:uppercase}.italic{font-style:italic}.opacity-60{opacity:60%}.opacity-100{opacity:100%}.shadow-lg{--tw-shadow:0 10px 15px -3px var(--tw-shadow-color,rgba(0,0,0,.1)),0 4px 6px -4px var(--tw-shadow-color,rgba(0,0,0,.1))}.shadow-lg,.shadow-xl{box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.shadow-xl{--tw-shadow:0 20px 25px -5px var(--tw-shadow-color,rgba(0,0,0,.1)),0 8px 10px -6px var(--tw-shadow-color,rgba(0,0,0,.1))}.shadow-blue-600\/30{--tw-shadow-color:color-mix(in srgb,oklch(54.6% 0.245 262.881) 30%,transparent);@supports (color:color-mix(in lab,red,red)){--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-blue-600) 30%,transparent) var(--tw-shadow-alpha),transparent)}}.shadow-gray-300\/30{--tw-shadow-color:color-mix(in srgb,oklch(87.2% 0.01 258.338) 30%,transparent);@supports (color:color-mix(in lab,red,red)){--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-gray-300) 30%,transparent) var(--tw-shadow-alpha),transparent)}}.shadow-gray-700\/30{--tw-shadow-color:color-mix(in srgb,oklch(37.3% 0.034 259.733) 30%,transparent);@supports (color:color-mix(in lab,red,red)){--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-gray-700) 30%,transparent) var(--tw-shadow-alpha),transparent)}}.shadow-gray-800\/30{--tw-shadow-color:color-mix(in srgb,oklch(27.8% 0.033 256.848) 30%,transparent);@supports (color:color-mix(in lab,red,red)){--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-gray-800) 30%,transparent) var(--tw-shadow-alpha),transparent)}}.shadow-primary\/20{--tw-shadow-color:color-mix(in srgb,gold 20%,transparent);@supports (color:color-mix(in lab,red,red)){--tw-shadow-color:color-mix(in oklab,color-mix(in oklab,var(--color-primary) 20%,transparent) var(--tw-shadow-alpha),transparent)}}.outline-1{outline-width:1px}.outline-1,.outline-2{outline-style:var(--tw-outline-style)}.outline-2{outline-width:2px}.outline-gray-300{outline-color:var(--color-gray-300)}.outline-gray-700{outline-color:var(--color-gray-700)}.outline-white\/10{outline-color:color-mix(in srgb,#fff 10%,transparent);@supports (color:color-mix(in lab,red,red)){outline-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}.transition-all{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:all;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.transition-transform{transition-duration:var(--tw-duration,var(--default-transition-duration));transition-property:transform,translate,scale,rotate;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function))}.duration-300{--tw-duration:300ms;transition-duration:.3s}.select-none{-webkit-user-select:none;-moz-user-select:none;user-select:none}.hover\:scale-\[1\.02\]{&:hover{@media (hover:hover){scale:1.02}}}.hover\:border-2{&:hover{@media (hover:hover){border-bottom-width:2px;border-left-width:2px;border-right-width:2px;border-style:var(--tw-border-style);border-top-width:2px}}}.hover\:bg-primary\/90{&:hover{@media (hover:hover){background-color:color-mix(in srgb,gold 90%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-primary) 90%,transparent)}}}}.hover\:bg-white\/10{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#fff 10%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 10%,transparent)}}}}.hover\:bg-white\/20{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#fff 20%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}}}.hover\:bg-white\/90{&:hover{@media (hover:hover){background-color:color-mix(in srgb,#fff 90%,transparent);@supports (color:color-mix(in lab,red,red)){background-color:color-mix(in oklab,var(--color-white) 90%,transparent)}}}}.hover\:text-white{&:hover{@media (hover:hover){color:var(--color-white)}}}.focus-visible\:outline{&:focus-visible{outline-style:var(--tw-outline-style);outline-width:1px}}.focus-visible\:outline-2{&:focus-visible{outline-style:var(--tw-outline-style);outline-width:2px}}.focus-visible\:outline-white\/20{&:focus-visible{outline-color:color-mix(in srgb,#fff 20%,transparent);@supports (color:color-mix(in lab,red,red)){outline-color:color-mix(in oklab,var(--color-white) 20%,transparent)}}}.active\:scale-\[0\.98\]{&:active{scale:.98}}.lg\:text-6xl,.md\:text-5xl,.pointer-none\:cursor-none{@media (pointer:none){cursor:none}}}.sponsor-pattern-AOSSIE{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2391c44a' fill-opacity='.6'%3E%3Ccircle cx='15' cy='20' r='10'/%3E%3Crect x='5' y='40' width='20' height='20' rx='5'/%3E%3C/g%3E%3C/svg%3E")}.sponsor-pattern-grid{background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg width='100' height='100' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%2391c44a' stroke-opacity='.4'%3E%3Cpath d='M0 0h100M0 20h100M0 40h100M0 60h100M0 80h100M0 100h100M0 0v100M20 0v100M40 0v100M60 0v100M80 0v100M100 0v100'/%3E%3C/g%3E%3C/svg%3E")}@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-gradient-position{syntax:"*";inherits:false}@property --tw-gradient-from{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-via{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-to{syntax:"<color>";inherits:false;initial-value:#0000}@property --tw-gradient-stops{syntax:"*";inherits:false}@property --tw-gradient-via-stops{syntax:"*";inherits:false}@property --tw-gradient-from-position{syntax:"<length-percentage>";inherits:false;initial-value:0}@property --tw-gradient-via-position{syntax:"<length-percentage>";inherits:false;initial-value:50%}@property --tw-gradient-to-position{syntax:"<length-percentage>";inherits:false;initial-value:100%}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{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}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-duration{syntax:"*";inherits:false}@layer properties{@supports ((-webkit-hyphens:none) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,::backdrop,:after,:before{--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-gradient-position:initial;--tw-gradient-from:#0000;--tw-gradient-via:#0000;--tw-gradient-to:#0000;--tw-gradient-stops:initial;--tw-gradient-via-stops:initial;--tw-gradient-from-position:0%;--tw-gradient-via-position:50%;--tw-gradient-to-position:100%;--tw-font-weight:initial;--tw-tracking: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;--tw-outline-style:solid;--tw-duration:initial}}}

package/dist/types/index.d.ts ADDED Viewed

@@ -0,0 +1,67 @@
+import type { ReactNode } from "react";
+export type Theme = "AOSSIE" | "light" | "dark" | "minimal" | "corporate";
+export type ButtonVariant = 'AOSSIE' | "primary" | "secondary" | "ghost" | "gradient";
+export type Image = {
+    src?: string;
+    alt?: string;
+};
+export type Hero = {
+    /** Optional Hero background Image */
+    Image?: Image;
+    title: string;
+    description: string;
+    /** Label like: YOU'RE SPONSORING */
+    sponsorLabel?: string;
+};
+export type projectInformation = {
+    name: string;
+    description: string;
+};
+export type organizationInformation = {
+    name: string;
+    description: string;
+    /** Organization logo */
+    logo?: Image | string;
+    projectInformation: projectInformation;
+};
+export type Tier = "Platinum" | "Gold" | "Silver" | "Bronze";
+export type sponsor = {
+    name: string;
+    /** Sponsor logo or avatar */
+    logo?: string;
+    /** Sponsor website */
+    link?: string;
+    /** Sponsorship tier */
+    sponsorshipTier?: Tier;
+};
+export type sponsors = sponsor[];
+export type sponsorLink = {
+    name: string;
+    url: string;
+    icon?: ReactNode;
+    className?: string;
+    /** open link in new tab */
+    newTab?: boolean;
+};
+export type CTASection = {
+    title: string;
+    description: string;
+    sponsorLink: sponsorLink[];
+};
+export type Pattern = "AOSSIE" | "dots" | "grid" | "none";
+export interface supportUsButtonProps {
+    Theme?: Theme;
+    pattern?: Pattern;
+    hero: Hero;
+    organizationInformation: organizationInformation;
+    sponsors?: sponsors;
+    ctaSection: CTASection;
+    classNames?: {
+        container?: string;
+        Hero?: string;
+        organizationInformation?: string;
+        sponsors?: string;
+        ctaSection?: string;
+    };
+    buttonVariant?: ButtonVariant;
+}

package/package.json ADDED Viewed

@@ -0,0 +1,89 @@
+{
+  "name": "support-us-button",
+  "version": "1.0.0",
+  "description": "A customizable and flexible Support Us button component for integrating sponsorship and donation options into web applications.",
+  "keywords": [
+    "aossie",
+    "support",
+    "donation",
+    "sponsor",
+    "button",
+    "widget",
+    "open-source",
+    "react",
+    "react-component",
+    "react-widget",
+    "sponsorship",
+    "support-widget",
+    "buy-me-a-coffee",
+    "donation-widget",
+    "funding-widget",
+    "creator-support",
+    "tailwind",
+    "typescript",
+    "react-18",
+    "frontend",
+    "ui-component"
+  ],
+  "homepage": "https://github.com/AOSSIE-Org/SupportUsButton#readme",
+  "bugs": {
+    "url": "https://github.com/AOSSIE-Org/SupportUsButton/issues"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/AOSSIE-Org/SupportUsButton.git"
+  },
+  "license": "GNU General Public License v3.0",
+  "author": "AOSSIE Organization",
+  "type": "module",
+  "main": "dist/index.cjs.js",
+  "module": "dist/index.esm.js",
+  "unpkg": "dist/index.umd.js",
+  "jsdelivr": "dist/index.umd.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": "./dist/index.esm.js",
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
+    },
+    "./style.css": "./dist/style.css"
+  },
+  "sideEffects": false,
+  "scripts": {
+    "build": "rollup -c",
+    "prepublishOnly": "npm run build"
+  },
+  "engines": {
+    "node": ">=14"
+  },
+  "devDependencies": {
+    "@rollup/plugin-commonjs": "^29.0.2",
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@rollup/plugin-terser": "^1.0.0",
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@tailwindcss/postcss": "^4.2.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "autoprefixer": "^10.4.27",
+    "postcss": "^8.5.6",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "rollup": "^4.59.0",
+    "rollup-plugin-dts": "^6.3.0",
+    "rollup-plugin-peer-deps-external": "^2.2.4",
+    "rollup-plugin-postcss": "^4.0.2",
+    "tailwindcss": "^4.2.1",
+    "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "dependencies": {
+    "tslib": "^2.8.1"
+  }
+}