@coinlist-co/react 0.2.0 → 0.4.0

package/dist/client/components/index.js

@@ -1,125 +1,29 @@
 import {
-  useCoinListOffers
-} from "../../chunk-G3B4RLXP.js";
+  AlertBanner,
+  ChecklistStatus,
+  ClButton,
+  RequirementItem,
+  RequirementItemUi,
+  RequirementStatus,
+  RequirementVariant,
+  cn,
+  typeClasses
+} from "../../chunk-EHZ6PIGN.js";
 import {
-  useCoinList
-} from "../../chunk-32GOUV3L.js";
-import "../../chunk-Z5RFQOMS.js";
-import "../../chunk-GRVV7NLV.js";
+  useCoinList,
+  useCoinListOffers,
+  useCoinListRequirements
+} from "../../chunk-UGJUTRXC.js";
+import "../../chunk-RIFATQB5.js";
+import "../../chunk-NC45IO63.js";
 
 // src/client/components/index.ts
 import "../styles.css";
 
-// src/client/components/design-system/ClButton.tsx
-import { cva } from "class-variance-authority";
-import { forwardRef } from "react";
-
-// src/client/components/design-system/utils.ts
-import { clsx } from "clsx";
-function cn(...inputs) {
-  return clsx(inputs);
-}
-
-// src/client/components/design-system/ClButton.tsx
-import { jsx, jsxs } from "react/jsx-runtime";
-var buttonVariants = cva(
-  "inline-flex items-center justify-center gap-3 whitespace-nowrap transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-40 cursor-pointer",
-  {
-    variants: {
-      variant: {
-        // Primary — tokens auto-switch: dark bg (#171717) → light bg (#f4f4f5) in dark mode
-        primary: "bg-brand-primary text-text-inverse font-semibold hover:bg-brand-primary-hover active:bg-brand-primary-active focus-visible:ring-gray-500",
-        // Secondary — bg-section, border-border, text-text-primary all auto-switch
-        // hover maps to border token value; active has no token so uses dark: override
-        secondary: "bg-section border border-border text-text-primary font-medium hover:bg-border active:bg-[#d9d9d9] dark:active:bg-divider focus-visible:ring-gray-400",
-        // Destructive — error tokens auto-switch to translucent dark equivalents
-        // hover/active have no tokens so use dark: overrides
-        destructive: "bg-error-subtle border border-error-border text-error font-semibold hover:bg-[#fcdcd8] active:bg-[#f9c9c4] dark:hover:bg-[rgba(248,113,113,0.20)] dark:active:bg-[rgba(248,113,113,0.30)] focus-visible:ring-red-400",
-        // Ghost — transparent base; hover/active use section/border tokens (auto-switch)
-        ghost: "bg-transparent text-text-primary font-medium hover:bg-section active:bg-border focus-visible:ring-gray-400",
-        // Link — text-text-primary auto-switches light/dark
-        link: "h-auto p-0 text-text-primary font-medium underline-offset-4 hover:underline focus-visible:ring-gray-500",
-        // Destructive link — text-error auto-switches (#b42318 → #f87171 in dark)
-        destructiveLink: "h-auto p-0 text-error font-medium hover:text-[#8b1a13] active:text-[#6d1510] dark:hover:text-[#fca5a5] dark:active:text-[#f87171] focus-visible:ring-red-500"
-      },
-      size: {
-        sm: "h-9 px-4 text-sm tracking-[0.28px]",
-        default: "h-11 px-5 text-sm tracking-[0.28px]",
-        lg: "h-14 px-6 text-base",
-        icon: "h-12 w-12"
-      },
-      radius: {
-        pill: "rounded-full",
-        // compound variants below handle size-specific radii
-        rounded: ""
-      },
-      fullWidth: {
-        true: "w-full",
-        false: ""
-      }
-    },
-    compoundVariants: [
-      { size: "sm", radius: "rounded", className: "rounded-lg" },
-      { size: "default", radius: "rounded", className: "rounded-2xl" },
-      { size: "lg", radius: "rounded", className: "rounded-2xl" },
-      { size: "icon", radius: "rounded", className: "rounded-md" }
-    ],
-    defaultVariants: {
-      variant: "primary",
-      size: "default",
-      radius: "pill",
-      fullWidth: false
-    }
-  }
-);
-var ClButton = forwardRef(
-  ({
-    className,
-    variant,
-    size,
-    radius,
-    fullWidth,
-    children,
-    isLoading = false,
-    loadingText,
-    startIcon,
-    endIcon,
-    disabled,
-    ...props
-  }, ref) => {
-    const isDisabled = disabled || isLoading;
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        className: cn(
-          buttonVariants({ variant, size, radius, fullWidth }),
-          className
-        ),
-        ref,
-        disabled: isDisabled,
-        ...props,
-        children: [
-          isLoading && /* @__PURE__ */ jsx(
-            "span",
-            {
-              className: "h-4 w-4 shrink-0 animate-spin rounded-full border-2 border-current border-t-transparent opacity-60",
-              "aria-hidden": "true"
-            }
-          ),
-          startIcon && !isLoading && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: startIcon }),
-          /* @__PURE__ */ jsx("span", { className: cn(isLoading && "opacity-60"), children: isLoading && loadingText ? loadingText : children }),
-          endIcon && !isLoading && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: endIcon })
-        ]
-      }
-    );
-  }
-);
-ClButton.displayName = "ClButton";
-
 // src/client/components/design-system/logos/CoinListLogomark.tsx
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
 function CoinListLogomark(props) {
-  return /* @__PURE__ */ jsxs2(
+  return /* @__PURE__ */ jsxs(
     "svg",
     {
       width: "115",
@@ -130,28 +34,28 @@ function CoinListLogomark(props) {
       "aria-hidden": "true",
       ...props,
       children: [
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "path",
           {
             d: "M69.7519 123.966C75.8021 124.172 81.7491 123.519 87.4899 121.799C98.3871 118.531 107.531 112.58 114.922 103.947C114.922 103.947 114.922 103.947 114.888 103.912C112.859 102.193 110.831 100.507 108.837 98.8218L106.809 97.1363C106.431 96.8268 106.087 96.5172 105.709 96.2076C104.919 95.5197 104.128 94.8662 103.303 94.2126C96.2902 98.8562 88.5899 101.539 80.0991 101.883C75.8364 102.055 71.6082 101.642 67.4831 100.507C60.5047 98.6154 54.2483 95.1757 49.2294 89.7755C40.0854 79.938 36.854 68.1743 39.226 55.0348C40.7041 46.9172 44.4168 40.0723 50.0888 34.5C48.8856 34.7408 47.6825 35.016 46.5137 35.3943C37.5072 38.2148 30.5976 43.6839 25.6131 51.6639C21.6598 58.0273 19.5629 64.9411 19.3223 72.4739C19.1848 76.7047 19.4598 80.7979 20.4223 84.7879C23.4818 97.2395 30.2882 107.043 40.6698 114.335H40.7729V114.403C41.1167 114.644 41.4604 114.919 41.8042 115.16C50.2607 120.801 59.5766 123.691 69.7519 124.035V123.966Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "path",
           {
             d: "M73.1896 89.052C69.1676 90.8406 65.0081 91.8725 60.6768 92.2165C65.9707 95.209 71.7802 96.688 78.1054 96.8256C80.168 96.86 82.2305 96.6536 84.3962 96.3097C89.7245 95.4841 94.6746 93.5579 99.281 90.7374C94.9153 87.057 90.5839 83.4109 86.2181 79.7305C82.5055 83.6861 78.1741 86.8506 73.1896 89.052Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "path",
           {
             d: "M67.9643 0.241609C67.4143 0.276006 66.8643 0.344799 66.3486 0.413592C71.6425 1.4111 76.7646 3.13093 81.6116 5.71068C91.0306 10.7326 98.3527 17.9215 103.268 27.4494L105.915 25.1448C108.631 22.7714 111.347 20.3981 114.063 18.0247C107.634 11.1797 100.072 6.15784 91.2025 3.06214C85.2898 0.998336 79.2396 -0.0335643 73.0176 0.000832322C71.3675 0.000832322 69.6831 0.138419 67.9643 0.241609Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx2(
+        /* @__PURE__ */ jsx(
           "path",
           {
             d: "M26.4037 107.871C18.4628 97.9988 14.1314 86.7167 14.2002 73.818C14.2002 67.317 15.5409 61.0568 18.1191 55.1062C21.9348 46.2662 27.9506 39.1805 36.4071 34.2962C44.348 29.687 52.9763 27.8984 62.1547 29.2743C71.5738 30.7189 79.3771 35.2249 85.6336 42.2762C85.6336 42.2762 85.8398 42.5514 85.9429 42.6546C86.8711 41.8291 87.8336 41.0035 88.7618 40.178L89.8962 39.1805C90.8587 38.355 91.8212 37.4951 92.7838 36.6696C94.9838 34.7434 97.1495 32.8515 99.3152 30.9253C95.087 22.223 88.7274 15.55 80.3053 10.8377C70.3706 5.26541 59.6797 3.54557 48.37 5.02463C42.7323 5.78136 37.3352 7.50119 32.1788 10.0465C14.6815 18.7145 2.06546 36.532 1.03418 58.4771C0.862296 62.0887 1.10293 65.7348 1.65294 69.3464C3.02798 78.3239 6.32808 86.4759 11.622 93.8368C15.7471 99.5123 20.6629 104.19 26.3693 107.871H26.4037Z",
@@ -164,7 +68,7 @@ function CoinListLogomark(props) {
 }
 
 // src/client/components/CoinListSignInButton.tsx
-import { jsx as jsx3 } from "react/jsx-runtime";
+import { jsx as jsx2 } from "react/jsx-runtime";
 function CoinListSignInButton({
   onClick,
   disabled = false,
@@ -172,7 +76,7 @@ function CoinListSignInButton({
   isLoading = false,
   className
 }) {
-  return /* @__PURE__ */ jsx3(
+  return /* @__PURE__ */ jsx2(
     ClButton,
     {
       variant: "primary",
@@ -182,88 +86,22 @@ function CoinListSignInButton({
       disabled,
       isLoading,
       loadingText: "Signing in...",
-      startIcon: /* @__PURE__ */ jsx3(CoinListLogomark, { className: "h-[18px] w-[16px] shrink-0" }),
+      startIcon: /* @__PURE__ */ jsx2(CoinListLogomark, { className: "h-[18px] w-[16px] shrink-0" }),
       className,
       children: "Continue with CoinList"
     }
   );
 }
 
-// src/client/components/design-system/AlertBanner.tsx
-import { CircleCheck, Info } from "lucide-react";
-
-// src/client/components/design-system/tokens/typography.ts
-var typeClasses = {
-  hero: "text-[64px] leading-[110%] font-semibold",
-  display: "text-[48px] leading-[110%] font-semibold",
-  h1: "text-[36px] leading-[120%] font-semibold",
-  h2: "text-[28px] leading-[125%] font-semibold",
-  h3: "text-[22px] leading-[130%] font-semibold",
-  h4: "text-[18px] leading-[135%] font-medium",
-  body: "text-[16px] leading-[150%] font-normal",
-  subhead: "text-[14px] leading-[150%] font-normal",
-  caption: "text-[12px] leading-[140%] font-normal",
-  label: "text-[14px] leading-[140%] font-medium",
-  data: "text-[14px] leading-[140%] font-normal"
-};
-
-// src/client/components/design-system/AlertBanner.tsx
-import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
-var variantConfig = {
-  info: {
-    container: "bg-surface border-border",
-    text: "text-text-secondary",
-    Icon: Info
-  },
-  success: {
-    container: "bg-success-subtle border-success-border",
-    text: "text-success",
-    Icon: CircleCheck
-  },
-  warning: {
-    container: "bg-warning-subtle border-warning-border",
-    text: "text-warning",
-    Icon: Info
-  },
-  error: {
-    container: "bg-error-subtle border-error-border",
-    text: "text-error",
-    Icon: Info
-  }
-};
-function AlertBanner({
-  variant,
-  content,
-  icon = false,
-  className
-}) {
-  const { container, text, Icon } = variantConfig[variant];
-  return /* @__PURE__ */ jsxs3(
-    "div",
-    {
-      className: cn(
-        "flex items-center rounded-btn border p-3",
-        icon && "gap-2",
-        container,
-        className
-      ),
-      children: [
-        icon && /* @__PURE__ */ jsx4(Icon, { className: cn("h-4 w-4 shrink-0", text), "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx4("p", { className: cn(typeClasses.subhead, text), children: content })
-      ]
-    }
-  );
-}
-
 // src/client/components/design-system/CloseButton.tsx
 import { X } from "lucide-react";
-import { jsx as jsx5 } from "react/jsx-runtime";
+import { jsx as jsx3 } from "react/jsx-runtime";
 function CloseButton({
   onClick,
   "aria-label": ariaLabel = "Close",
   className
 }) {
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx3(
     "button",
     {
       type: "button",
@@ -273,15 +111,15 @@ function CloseButton({
         "cursor-pointer rounded-full p-1.5 text-text-secondary transition-colors hover:bg-surface hover:text-text-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-gray-400 focus-visible:ring-offset-2",
         className
       ),
-      children: /* @__PURE__ */ jsx5(X, { className: "h-5 w-5" })
+      children: /* @__PURE__ */ jsx3(X, { className: "h-5 w-5" })
     }
   );
 }
 
 // src/client/components/design-system/logos/CoinListWordmark.tsx
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx4, jsxs as jsxs2 } from "react/jsx-runtime";
 function CoinListWordmark(props) {
-  return /* @__PURE__ */ jsxs4(
+  return /* @__PURE__ */ jsxs2(
     "svg",
     {
       width: "638",
@@ -292,35 +130,35 @@ function CoinListWordmark(props) {
       "aria-hidden": "true",
       ...props,
       children: [
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M68.7724 123.966C74.8226 124.172 80.7696 123.519 86.5104 121.799C97.4076 118.531 106.551 112.58 113.942 103.947C113.942 103.947 113.942 103.947 113.908 103.912C111.879 102.193 109.851 100.507 107.857 98.8218L105.829 97.1363C105.451 96.8268 105.107 96.5172 104.729 96.2076C103.939 95.5197 103.148 94.8662 102.323 94.2126C95.3107 98.8562 87.6104 101.539 79.1196 101.883C74.8569 102.055 70.6287 101.642 66.5036 100.507C59.5252 98.6154 53.2688 95.1757 48.2499 89.7755C39.1059 79.938 35.8745 68.1743 38.2465 55.0348C39.7246 46.9172 43.4373 40.0723 49.1093 34.5C47.9061 34.7408 46.703 35.016 45.5342 35.3943C36.5277 38.2148 29.6181 43.6839 24.6336 51.6639C20.6803 58.0273 18.5834 64.9411 18.3428 72.4739C18.2053 76.7047 18.4803 80.7979 19.4428 84.7879C22.5023 97.2395 29.3087 107.043 39.6903 114.335H39.7934V114.403C40.1372 114.644 40.4809 114.919 40.8247 115.16C49.2812 120.801 58.5971 123.691 68.7724 124.035V123.966Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M72.2101 89.052C68.1881 90.8406 64.0286 91.8725 59.6973 92.2165C64.9912 95.209 70.8007 96.688 77.1259 96.8256C79.1885 96.86 81.251 96.6536 83.4167 96.3097C88.745 95.4841 93.6951 93.5579 98.3015 90.7374C93.9358 87.057 89.6044 83.4109 85.2386 79.7305C81.526 83.6861 77.1946 86.8506 72.2101 89.052Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M66.9848 0.241609C66.4348 0.276006 65.8848 0.344799 65.3691 0.413592C70.663 1.4111 75.7851 3.13093 80.6321 5.71068C90.0511 10.7326 97.3732 17.9215 102.289 27.4494L104.936 25.1448C107.652 22.7714 110.368 20.3981 113.084 18.0247C106.655 11.1797 99.092 6.15784 90.223 3.06214C84.3103 0.998336 78.2601 -0.0335643 72.0381 0.000832319C70.388 0.000832319 68.7036 0.138419 66.9848 0.241609Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx4(
           "path",
           {
             d: "M25.4242 107.871C17.4833 97.9988 13.1519 86.7167 13.2207 73.818C13.2207 67.317 14.5614 61.0568 17.1396 55.1062C20.9553 46.2662 26.9711 39.1805 35.4276 34.2962C43.3685 29.687 51.9968 27.8984 61.1752 29.2743C70.5943 30.7189 78.3976 35.2249 84.6541 42.2762C84.6541 42.2762 84.8603 42.5514 84.9634 42.6546C85.8916 41.8291 86.8541 41.0035 87.7823 40.178L88.9167 39.1805C89.8792 38.355 90.8417 37.4951 91.8043 36.6696C94.0043 34.7434 96.17 32.8515 98.3357 30.9253C94.1075 22.223 87.7479 15.55 79.3258 10.8377C69.3911 5.26541 58.7002 3.54557 47.3904 5.02463C41.7528 5.78136 36.3557 7.50119 31.1993 10.0465C13.702 18.7145 1.08597 36.532 0.0546833 58.4771C-0.117196 62.0887 0.123436 65.7348 0.673452 69.3464C2.04849 78.3239 5.34859 86.4759 10.6425 93.8368C14.7676 99.5123 19.6834 104.19 25.3898 107.871H25.4242Z",
             fill: "currentColor"
           }
         ),
-        /* @__PURE__ */ jsx6(
+        /* @__PURE__ */ jsx4(
           "path",
           {
             fillRule: "evenodd",
@@ -335,9 +173,9 @@ function CoinListWordmark(props) {
 }
 
 // src/client/components/PoweredByCoinList.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 function PoweredByCoinList({ className }) {
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs3(
     "div",
     {
       className: cn(
@@ -345,21 +183,21 @@ function PoweredByCoinList({ className }) {
         className
       ),
       children: [
-        /* @__PURE__ */ jsx7("span", { className: cn(typeClasses.caption, "tracking-[0.12px]"), children: "Powered by" }),
-        /* @__PURE__ */ jsx7(CoinListWordmark, { className: "h-3 w-auto" })
+        /* @__PURE__ */ jsx5("span", { className: cn(typeClasses.caption, "tracking-[0.12px]"), children: "Powered by" }),
+        /* @__PURE__ */ jsx5(CoinListWordmark, { className: "h-3 w-auto" })
       ]
     }
   );
 }
 
 // src/client/components/CoinListSignInCard.tsx
-import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 function CoinListSignInCard() {
   const { coinlist } = useCoinList();
   const onSignIn = async () => {
     await coinlist.startOAuth();
   };
-  return /* @__PURE__ */ jsx8(BaseCoinListSignInCard, { onSignIn });
+  return /* @__PURE__ */ jsx6(BaseCoinListSignInCard, { onSignIn });
 }
 function BaseCoinListSignInCard({
   state = "idle",
@@ -367,7 +205,7 @@ function BaseCoinListSignInCard({
   onClose,
   className
 }) {
-  return /* @__PURE__ */ jsxs6(
+  return /* @__PURE__ */ jsxs4(
     "div",
     {
       className: cn(
@@ -375,13 +213,13 @@ function BaseCoinListSignInCard({
         className
       ),
       children: [
-        onClose && /* @__PURE__ */ jsx8(CloseButton, { onClick: onClose, className: "absolute right-4 top-4" }),
-        /* @__PURE__ */ jsxs6("div", { className: "flex flex-col gap-2", children: [
-          /* @__PURE__ */ jsx8("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: "Sign in to participate" }),
-          /* @__PURE__ */ jsx8("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "A CoinList account is required to participate in this sale." })
+        onClose && /* @__PURE__ */ jsx6(CloseButton, { onClick: onClose, className: "absolute right-4 top-4" }),
+        /* @__PURE__ */ jsxs4("div", { className: "flex flex-col gap-2", children: [
+          /* @__PURE__ */ jsx6("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: "Sign in to participate" }),
+          /* @__PURE__ */ jsx6("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "A CoinList account is required to participate in this sale." })
         ] }),
-        /* @__PURE__ */ jsx8(CoinListSignInButton, { onClick: onSignIn, fullWidth: true, className: "mt-4" }),
-        state === "error" && /* @__PURE__ */ jsx8(
+        /* @__PURE__ */ jsx6(CoinListSignInButton, { onClick: onSignIn, fullWidth: true, className: "mt-4" }),
+        state === "error" && /* @__PURE__ */ jsx6(
           AlertBanner,
           {
             variant: "error",
@@ -390,18 +228,27 @@ function BaseCoinListSignInCard({
             className: "mt-4"
           }
         ),
-        /* @__PURE__ */ jsx8(PoweredByCoinList, { className: "mt-4" })
+        /* @__PURE__ */ jsx6(PoweredByCoinList, { className: "mt-4" })
       ]
     }
   );
 }
 
 // src/client/components/offers/OfferCard.tsx
-import { Fragment, jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var monthYearFormatter = new Intl.DateTimeFormat("en-US", {
   month: "short",
   year: "numeric"
 });
+var OfferCardUi = {
+  fromDomain: (offer) => ({
+    tagline: offer.tagline,
+    bannerUrl: offer.bannerUrl,
+    logoUrl: offer.logoUrl,
+    formattedStartsAt: monthYearFormatter.format(offer.startsAt),
+    formattedEndsAt: monthYearFormatter.format(offer.endsAt)
+  })
+};
 function OfferCard({
   offer,
   onClick,
@@ -409,35 +256,35 @@ function OfferCard({
   containerClassName
 }) {
   const cardLabel = "Open offer details";
-  const cardContent = /* @__PURE__ */ jsxs7(Fragment, { children: [
-    /* @__PURE__ */ jsxs7("div", { className: "relative mb-6 h-52 w-full overflow-hidden rounded-2xl border border-border/60 bg-section", children: [
-      offer.bannerUrl ? /* @__PURE__ */ jsx9(
+  const cardContent = /* @__PURE__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "relative mb-6 h-52 w-full overflow-hidden rounded-2xl border border-border/60 bg-section", children: [
+      offer.bannerUrl ? /* @__PURE__ */ jsx7(
         "img",
         {
           src: offer.bannerUrl,
           alt: "Offer banner",
           className: "h-full w-full object-cover"
         }
-      ) : /* @__PURE__ */ jsx9("div", { className: "h-full w-full bg-gradient-to-br from-surface via-section to-background" }),
-      /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-overlay/35" }),
-      /* @__PURE__ */ jsx9("div", { className: "absolute inset-0 flex items-center justify-center p-6", children: offer.logoUrl ? /* @__PURE__ */ jsx9(
+      ) : /* @__PURE__ */ jsx7("div", { className: "h-full w-full bg-gradient-to-br from-surface via-section to-background" }),
+      /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 bg-gradient-to-b from-transparent via-transparent to-overlay/35" }),
+      /* @__PURE__ */ jsx7("div", { className: "absolute inset-0 flex items-center justify-center p-6", children: offer.logoUrl ? /* @__PURE__ */ jsx7(
         "img",
         {
           src: offer.logoUrl,
           alt: "Offer logo",
           className: "h-28 w-28 rounded-full border border-border bg-surface object-cover shadow-[0_10px_24px_rgba(0,0,0,0.25)]"
         }
-      ) : /* @__PURE__ */ jsx9("div", { className: "h-28 w-28 rounded-full border border-border bg-surface shadow-[0_10px_24px_rgba(0,0,0,0.18)]" }) })
+      ) : /* @__PURE__ */ jsx7("div", { className: "h-28 w-28 rounded-full border border-border bg-surface shadow-[0_10px_24px_rgba(0,0,0,0.18)]" }) })
     ] }),
-    offer.tagline && /* @__PURE__ */ jsx9("p", { className: cn(typeClasses.h3, "min-h-[2.4rem] text-text-primary"), children: offer.tagline }),
-    /* @__PURE__ */ jsxs7("div", { className: "mt-4 grid grid-cols-2 gap-5 border-t border-divider pt-4", children: [
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx9("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Starts" }),
-        /* @__PURE__ */ jsx9("span", { className: cn(typeClasses.label, "text-text-primary"), children: monthYearFormatter.format(offer.startsAt) })
+    offer.tagline && /* @__PURE__ */ jsx7("p", { className: cn(typeClasses.h3, "min-h-[2.4rem] text-text-primary"), children: offer.tagline }),
+    /* @__PURE__ */ jsxs5("div", { className: "mt-4 grid grid-cols-2 gap-5 border-t border-divider pt-4", children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx7("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Starts" }),
+        /* @__PURE__ */ jsx7("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedStartsAt })
       ] }),
-      /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-1", children: [
-        /* @__PURE__ */ jsx9("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Ends" }),
-        /* @__PURE__ */ jsx9("span", { className: cn(typeClasses.label, "text-text-primary"), children: monthYearFormatter.format(offer.endsAt) })
+      /* @__PURE__ */ jsxs5("div", { className: "flex flex-col gap-1", children: [
+        /* @__PURE__ */ jsx7("span", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Ends" }),
+        /* @__PURE__ */ jsx7("span", { className: cn(typeClasses.label, "text-text-primary"), children: offer.formattedEndsAt })
       ] })
     ] })
   ] });
@@ -448,7 +295,7 @@ function OfferCard({
   );
   let cardNode;
   if (onClick) {
-    cardNode = /* @__PURE__ */ jsx9(
+    cardNode = /* @__PURE__ */ jsx7(
       "button",
       {
         type: "button",
@@ -459,20 +306,22 @@ function OfferCard({
       }
     );
   } else {
-    cardNode = /* @__PURE__ */ jsx9("div", { className: baseClasses, children: cardContent });
+    cardNode = /* @__PURE__ */ jsx7("div", { className: baseClasses, children: cardContent });
   }
   if (!containerClassName) {
     return cardNode;
   }
-  return /* @__PURE__ */ jsx9("div", { className: containerClassName, children: cardNode });
+  return /* @__PURE__ */ jsx7("div", { className: containerClassName, children: cardNode });
 }
 
 // src/client/components/offers/OffersGrid.tsx
-import { jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx8, jsxs as jsxs6 } from "react/jsx-runtime";
 var DEFAULT_MAX_COLUMNS = 3;
 function OffersGrid(props) {
-  const { offersState } = useCoinListOffers();
-  return /* @__PURE__ */ jsx10(BaseOffersGrid, { ...props, offersState });
+  const { offersState } = useCoinListOffers({
+    serverOffers: props.serverOffers
+  });
+  return /* @__PURE__ */ jsx8(BaseOffersGrid, { ...props, offersState });
 }
 function BaseOffersGrid({
   offersState,
@@ -489,12 +338,12 @@ function BaseOffersGrid({
     if (loading) {
       return loading;
     }
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx8(
       "output",
       {
         "aria-live": "polite",
         className: "flex min-h-40 items-center justify-center rounded-2xl border border-border bg-background p-6",
-        children: /* @__PURE__ */ jsx10("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading offers..." })
+        children: /* @__PURE__ */ jsx8("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading offers..." })
       }
     );
   }
@@ -503,7 +352,7 @@ function BaseOffersGrid({
       return error;
     }
     const errorMessage = offersState.reason === "not-authenticated" ? "Sign in to view available offers." : "Unable to load offers right now. Please try again.";
-    return /* @__PURE__ */ jsx10(
+    return /* @__PURE__ */ jsx8(
       AlertBanner,
       {
         variant: "error",
@@ -517,20 +366,20 @@ function BaseOffersGrid({
     if (emptyState) {
       return emptyState;
     }
-    return /* @__PURE__ */ jsxs8(
+    return /* @__PURE__ */ jsxs6(
       "output",
       {
         "aria-live": "polite",
         className: "flex min-h-40 flex-col items-center justify-center rounded-2xl border border-border bg-background p-6 text-center",
         children: [
-          /* @__PURE__ */ jsx10("p", { className: cn(typeClasses.body, "font-medium text-text-primary"), children: "No offers available" }),
-          /* @__PURE__ */ jsx10("p", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Check back soon for upcoming opportunities." })
+          /* @__PURE__ */ jsx8("p", { className: cn(typeClasses.body, "font-medium text-text-primary"), children: "No offers available" }),
+          /* @__PURE__ */ jsx8("p", { className: cn(typeClasses.subhead, "text-text-secondary"), children: "Check back soon for upcoming opportunities." })
         ]
       }
     );
   }
   const maxGridWidth = `calc(${cols} * 28rem + ${Math.max(cols - 1, 0)} * 1.5rem)`;
-  return /* @__PURE__ */ jsx10("div", { className: cn("flex w-full justify-center", containerClassName), children: /* @__PURE__ */ jsx10(
+  return /* @__PURE__ */ jsx8("div", { className: cn("flex w-full justify-center", containerClassName), children: /* @__PURE__ */ jsx8(
     "div",
     {
       className: cn("grid w-full gap-6", className),
@@ -538,10 +387,10 @@ function BaseOffersGrid({
         gridTemplateColumns: "repeat(auto-fit, minmax(min(100%, 20rem), 1fr))",
         maxWidth: maxGridWidth
       },
-      children: offersState.offers.map((offer) => /* @__PURE__ */ jsx10(
+      children: offersState.offers.map((offer) => /* @__PURE__ */ jsx8(
         OfferCard,
         {
-          offer,
+          offer: OfferCardUi.fromDomain(offer),
           onClick: onOfferClick ? () => onOfferClick(offer) : void 0
         },
         offer.id
@@ -549,10 +398,161 @@ function BaseOffersGrid({
     }
   ) });
 }
+
+// src/client/components/requirements/RequirementsChecklist.tsx
+import { useState } from "react";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
+var DEFAULT_LABELS = {
+  kyc_approved: "KYC Verification",
+  identity_verified: "Identity Verification",
+  proof_of_address: "Proof of Address",
+  source_of_funds: "Source of Funds",
+  external_wallet: "External Wallet",
+  whitelisted_wallet: "Whitelisted Wallet",
+  jurisdiction: "Jurisdiction Check",
+  accreditation: "Accreditation"
+};
+var DEFAULT_DESCRIPTIONS = {
+  kyc_approved: "Complete Know Your Customer verification.",
+  identity_verified: "Verify your identity.",
+  proof_of_address: "Provide proof of your residential address.",
+  source_of_funds: "Provide documentation for your source of funds.",
+  external_wallet: "Connect an external wallet.",
+  whitelisted_wallet: "Connect a whitelisted wallet.",
+  jurisdiction: "Confirm your jurisdiction eligibility.",
+  accreditation: "Verify your accreditation status."
+};
+function RequirementsChecklist(props) {
+  const { coinlist } = useCoinList();
+  const { requirementsState } = useCoinListRequirements(props.offerId, {
+    serverData: props.serverData
+  });
+  const onRequirementAction = props.onRequirementActionOverride !== void 0 ? props.onRequirementActionOverride : (requirement) => coinlist.handleRequirement(requirement);
+  const onContactSupport = props.onContactSupportOverride !== void 0 ? props.onContactSupportOverride : () => coinlist.contactSupport();
+  return /* @__PURE__ */ jsx9(
+    BaseRequirementsChecklist,
+    {
+      ...props,
+      onRequirementActionOverride: onRequirementAction,
+      onContactSupportOverride: onContactSupport,
+      requirementsState
+    }
+  );
+}
+function BaseRequirementsChecklist({
+  requirementsState,
+  optionId,
+  title,
+  description,
+  onContinue,
+  onRequirementActionOverride: onRequirementAction,
+  onContactSupportOverride: onContactSupport,
+  getLabel,
+  getDescription,
+  loading,
+  error,
+  className
+}) {
+  const [expandedIndex, setExpandedIndex] = useState(null);
+  if (requirementsState.type === "LOADING") {
+    if (loading) return loading;
+    return /* @__PURE__ */ jsx9(
+      "output",
+      {
+        "aria-live": "polite",
+        className: "flex min-h-40 items-center justify-center rounded-2xl border border-border bg-background p-6",
+        children: /* @__PURE__ */ jsx9("p", { className: cn(typeClasses.body, "text-text-secondary"), children: "Loading requirements..." })
+      }
+    );
+  }
+  if (requirementsState.type === "ERROR") {
+    if (error) return error;
+    const errorMessage = requirementsState.reason === "not-authenticated" ? "Sign in to view requirements." : "Unable to load requirements right now. Please try again.";
+    return /* @__PURE__ */ jsx9(
+      AlertBanner,
+      {
+        variant: "error",
+        icon: true,
+        content: errorMessage,
+        className: "w-full max-w-[28rem]"
+      }
+    );
+  }
+  const { requirementsByOptionId, statuses } = requirementsState;
+  const requirements = requirementsByOptionId[optionId] ?? [];
+  const requirementIds = new Set(requirements.map((r) => r.id));
+  const optionStatuses = statuses.filter((s) => requirementIds.has(s.id));
+  const statusByRequirementId = new Map(optionStatuses.map((s) => [s.id, s]));
+  const checklistStatus = ChecklistStatus.derive(optionStatuses);
+  return /* @__PURE__ */ jsxs7("div", { className: cn("flex w-full flex-col gap-4", className), children: [
+    /* @__PURE__ */ jsxs7("div", { className: "flex flex-col gap-2", children: [
+      /* @__PURE__ */ jsx9("h3", { className: cn(typeClasses.h3, "text-text-primary"), children: title }),
+      /* @__PURE__ */ jsx9("p", { className: cn(typeClasses.body, "text-text-secondary"), children: description })
+    ] }),
+    /* @__PURE__ */ jsx9("div", { className: "flex flex-col divide-y divide-divider", children: requirements.map((req, index) => {
+      const statusInfo = statusByRequirementId.get(req.id);
+      const label = getLabel ? getLabel(req) : DEFAULT_LABELS[req.type];
+      const description2 = (getDescription ? getDescription(req) : null) ?? DEFAULT_DESCRIPTIONS[req.type];
+      let onActionBound;
+      if (onRequirementAction === null) {
+        onActionBound = null;
+      } else if (onRequirementAction) {
+        onActionBound = () => onRequirementAction(req);
+      }
+      let onContactSupportBound;
+      if (onContactSupport === null) {
+        onContactSupportBound = null;
+      } else if (onContactSupport) {
+        onContactSupportBound = () => onContactSupport(req);
+      }
+      return /* @__PURE__ */ jsx9(
+        RequirementItem,
+        {
+          ui: RequirementItemUi.fromDomain(
+            req,
+            statusInfo,
+            label,
+            description2
+          ),
+          expanded: expandedIndex === index,
+          onToggle: () => setExpandedIndex((prev) => prev === index ? null : index),
+          onAction: onActionBound,
+          onContactSupport: onContactSupportBound
+        },
+        req.id
+      );
+    }) }),
+    checklistStatus === "ineligible" && /* @__PURE__ */ jsx9(
+      AlertBanner,
+      {
+        variant: "error",
+        icon: true,
+        content: "You are not eligible to participate."
+      }
+    ),
+    onContinue && /* @__PURE__ */ jsx9(
+      ClButton,
+      {
+        fullWidth: true,
+        disabled: checklistStatus !== "eligible",
+        onClick: onContinue,
+        children: "Continue"
+      }
+    )
+  ] });
+}
 export {
   BaseCoinListSignInCard,
+  BaseRequirementsChecklist,
+  ChecklistStatus,
   CoinListSignInCard,
   OfferCard,
-  OffersGrid
+  OfferCardUi,
+  OffersGrid,
+  RequirementItem,
+  RequirementItemUi,
+  RequirementStatus,
+  RequirementVariant,
+  RequirementsChecklist
 };
 //# sourceMappingURL=index.js.map