chore: add TypeScript types for support us button component and updat…

package.json

@@ -38,9 +38,14 @@
   },
   "devDependencies": {
     "@tailwindcss/postcss": "^4.2.1",
+    "@types/react": "^19.2.14",
     "autoprefixer": "^10.4.27",
     "postcss": "^8.5.6",
     "tailwindcss": "^4.2.1",
     "typescript": "^5.9.3"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
   }
 }

src/types/index.ts

@@ -0,0 +1,155 @@
+import type { ReactNode } from "react";
+
+/* =========================
+   Theme
+========================= */
+
+export type Theme = "AOSSIE" | "light" | "dark" | "minimal" | "corporate";
+
+/* =========================================================
+   Button Variant
+========================================================= */
+
+export type ButtonVariant = "solid" | "outline" | "ghost" | "gradient";
+
+/* =========================
+   IMAGE TYPE
+========================= */
+
+export type Image = {
+  src?: string;
+  alt?: string;
+};
+
+/* =========================
+   Hero SECTION
+========================= */
+
+export type Hero = {
+  /** Optional Hero background Image */
+  Image?: Image;
+
+  title: string;
+  description: string;
+
+  /** Label like: YOU'RE SPONSORING */
+  sponsorLabel?: string;
+};
+
+/* =========================
+   PROJECT INFORMATION
+========================= */
+
+export type projectInformation = {
+  name: string;
+  description: string;
+};
+
+/* =========================
+   ORGANIZATION INFORMATION
+========================= */
+
+export type organizationInformation = {
+  name: string;
+  description: string;
+
+  /** Organization logo */
+  logo?: Image | string;
+
+  projectInformation: projectInformation;
+};
+
+/* =========================
+   SPONSOR TIERS
+========================= */
+
+export type Tier = "Platinum" | "Gold" | "Silver" | "Bronze";
+
+/* =========================
+   SPONSOR CARD
+========================= */
+
+export type sponsor = {
+  name: string;
+
+  /** Sponsor logo or avatar */
+  logo?: string;
+
+  /** Sponsor website */
+  link?: string;
+
+  /** Sponsorship tier */
+  sponsorshipTier?: Tier;
+};
+
+/* =========================
+   CURRENT SPONSORS
+========================= */
+
+export type sponsors = sponsor[];
+
+/* =========================
+   SPONSOR LINKS (CTA)
+========================= */
+
+export type sponsorLink = {
+  name: string;
+  url: string;
+  icon?: ReactNode;
+  className?: string;
+
+  /** open link in new tab */
+  newTab?: boolean;
+};
+
+/* =========================
+   CTA SECTION
+========================= */
+
+export type CTASection = {
+  title: string;
+  description: string;
+  sponsorLink: sponsorLink[];
+};
+
+/* =========================
+   BACKGROUND PATTERNS
+========================= */
+
+export type Pattern = "dots" | "grid" | "stripes" | "none";
+
+/* =========================
+   SUPPORT US COMPO PROPS
+========================= */
+
+export interface supportUsButtonProps {
+  // Theme for the button, can be one of "AOSSIE", "light", "dark", "minimal", or "corporate"
+  Theme?: Theme;
+
+  // Optional background pattern for the button, can be one of "dots", "grid", "stripes", or "none"
+  pattern?: Pattern;
+
+  // Information about the Hero section, including title, description, sponsor label, and optional background Image
+  hero: Hero;
+
+  // Information about the organization, including name, description, logo, and project information
+  organizationInformation: organizationInformation;
+
+  // List of current sponsors, each with name, optional logo, link, and sponsorship tier
+  sponsors: sponsors;
+
+  // Information about the call-to-action section, including title, description, and sponsor links
+  ctaSection: CTASection;
+
+  // Optional class name for custom styling
+  classNames?: {
+    container?: string;
+    Hero?: string;
+    organizationInformation?: string;
+    sponsors?: string;
+    ctaSection?: string;
+  };
+
+  // Optional button variant for styling the call-to-action buttons
+  buttonVariant?: ButtonVariant;
+}