@caffeinebounce/ui 0.62.2

package/dist/portal.mjs

@@ -0,0 +1,395 @@
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { createColumnHelper, useReactTable, getCoreRowModel, flexRender } from '@tanstack/react-table';
+
+// src/blocks/portal/AuthLayout.tsx
+var wrapperStyle = {
+  position: "relative",
+  minHeight: "100vh",
+  backgroundColor: "#1B1B1B",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  fontFamily: "Inter, sans-serif",
+  overflow: "hidden"
+};
+var lineStyle = {
+  position: "absolute",
+  top: "15%",
+  left: 0,
+  right: 0,
+  height: 2,
+  backgroundColor: "#FF4628"
+};
+var dotStyle = {
+  position: "absolute",
+  top: "calc(15% - 6px)",
+  right: 40,
+  width: 12,
+  height: 12,
+  borderRadius: "50%",
+  backgroundColor: "#FF4628"
+};
+var circleStyle = {
+  position: "absolute",
+  bottom: -120,
+  right: -120,
+  width: 340,
+  height: 340,
+  borderRadius: "50%",
+  backgroundColor: "#D9563F",
+  opacity: 0.15
+};
+var contentStyle = {
+  position: "relative",
+  zIndex: 1,
+  maxWidth: 440,
+  width: "100%",
+  padding: "0 24px"
+};
+function AuthLayout({ children, title, subtitle }) {
+  return /* @__PURE__ */ jsxs("div", { style: wrapperStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: lineStyle }),
+    /* @__PURE__ */ jsx("div", { style: dotStyle }),
+    /* @__PURE__ */ jsx("div", { style: circleStyle }),
+    /* @__PURE__ */ jsxs("div", { style: contentStyle, children: [
+      title && /* @__PURE__ */ jsx(
+        "h1",
+        {
+          style: {
+            color: "#FFFFFF",
+            fontWeight: 700,
+            fontSize: "1.75em",
+            margin: "0 0 0.25em"
+          },
+          children: title
+        }
+      ),
+      subtitle && /* @__PURE__ */ jsx(
+        "p",
+        {
+          style: {
+            color: "#B9C8D7",
+            fontWeight: 400,
+            fontSize: "1em",
+            margin: "0 0 2em"
+          },
+          children: subtitle
+        }
+      ),
+      children
+    ] })
+  ] });
+}
+var statusStyles = {
+  active: { backgroundColor: "#FF4628", color: "#FFFFFF" },
+  closed: { backgroundColor: "#B9C8D7", color: "#1B1B1B" },
+  "coming-soon": { backgroundColor: "#D9563F", color: "#FFFFFF" }
+};
+var statusLabels = {
+  active: "Active",
+  closed: "Closed",
+  "coming-soon": "Coming Soon"
+};
+function StatusBadge({ status }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      style: {
+        display: "inline-block",
+        padding: "0.2em 0.75em",
+        borderRadius: "999px",
+        fontSize: "0.75em",
+        fontFamily: "Inter, sans-serif",
+        fontWeight: 700,
+        lineHeight: 1.6,
+        ...statusStyles[status]
+      },
+      children: statusLabels[status]
+    }
+  );
+}
+var cardStyle = {
+  position: "relative",
+  backgroundColor: "#F8F8F8",
+  borderLeft: "3px solid #FF4628",
+  borderRadius: 8,
+  padding: "1.25em 1.5em",
+  fontFamily: "Inter, sans-serif",
+  textDecoration: "none",
+  color: "#1B1B1B",
+  display: "block",
+  cursor: "pointer"
+};
+function DealCard({
+  title,
+  subtitle,
+  status,
+  logoUrl,
+  summary,
+  href
+}) {
+  return /* @__PURE__ */ jsxs("a", { href, style: cardStyle, children: [
+    /* @__PURE__ */ jsx("div", { style: { position: "absolute", top: "1em", right: "1em" }, children: /* @__PURE__ */ jsx(StatusBadge, { status }) }),
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: "0.75em",
+          marginBottom: "0.5em"
+        },
+        children: [
+          logoUrl && /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: logoUrl,
+              alt: "",
+              style: {
+                width: 32,
+                height: 32,
+                borderRadius: 4,
+                objectFit: "contain"
+              }
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { children: [
+            /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: "1.1em" }, children: title }),
+            /* @__PURE__ */ jsx("div", { style: { fontSize: "0.85em", color: "#555" }, children: subtitle })
+          ] })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "p",
+      {
+        style: {
+          margin: 0,
+          fontSize: "0.9em",
+          fontWeight: 400,
+          color: "#333",
+          lineHeight: 1.5
+        },
+        children: summary
+      }
+    )
+  ] });
+}
+var columnHelper = createColumnHelper();
+var columns = [
+  columnHelper.accessor("label", {
+    header: () => null,
+    cell: (info) => /* @__PURE__ */ jsx("span", { style: { fontWeight: 700, color: "#1B1B1B" }, children: info.getValue() })
+  }),
+  columnHelper.accessor("value", {
+    header: () => null,
+    cell: (info) => {
+      const highlight = info.row.original.highlight;
+      return /* @__PURE__ */ jsx("span", { style: { fontWeight: highlight ? 700 : 400, color: "#1B1B1B" }, children: info.getValue() });
+    }
+  })
+];
+function DealTermsTable({ terms }) {
+  const table = useReactTable({
+    data: terms,
+    columns,
+    getCoreRowModel: getCoreRowModel()
+  });
+  return /* @__PURE__ */ jsx(
+    "table",
+    {
+      style: {
+        width: "100%",
+        borderCollapse: "collapse",
+        fontFamily: "Inter, sans-serif",
+        fontSize: "0.95em"
+      },
+      children: /* @__PURE__ */ jsx("tbody", { children: table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx("tr", { children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx(
+        "td",
+        {
+          style: {
+            padding: "0.75em 0.5em",
+            borderBottom: "1px solid #E5E5E5",
+            backgroundColor: "#FFFFFF"
+          },
+          children: flexRender(cell.column.columnDef.cell, cell.getContext())
+        },
+        cell.id
+      )) }, row.id)) })
+    }
+  );
+}
+function HighlightCard({
+  icon,
+  title,
+  description
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        flexDirection: "row",
+        gap: "1em",
+        alignItems: "flex-start",
+        backgroundColor: "#F8F8F8",
+        borderLeft: "3px solid #FF4628",
+        borderRadius: 8,
+        padding: "1em",
+        fontFamily: "Inter, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: "2.4em",
+              height: "2.4em",
+              minWidth: "2.4em",
+              backgroundColor: "#FF4628",
+              color: "#FFFFFF",
+              borderRadius: 8,
+              fontSize: "1em"
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: { fontWeight: 700, color: "#1B1B1B", marginBottom: "0.25em" },
+              children: title
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                color: "#555",
+                fontWeight: 400,
+                fontSize: "0.9em",
+                lineHeight: 1.5
+              },
+              children: description
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function SidebarContentLayout({
+  sidebarTitle,
+  sidebarSubsection,
+  pageNumber,
+  children
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("style", { children: `
+        .portal-sidebar-layout {
+          display: grid;
+          grid-template-columns: clamp(200px, 20vw, 400px) 1fr;
+          min-height: 100vh;
+          font-family: Inter, sans-serif;
+        }
+        .portal-sidebar-layout__sidebar {
+          display: flex;
+          flex-direction: column;
+          padding: 40px 32px;
+          border-right: 1px solid #E5E5E5;
+        }
+        .portal-sidebar-layout__content {
+          background: #FFFFFF;
+          padding: 40px 80px 40px 60px;
+          overflow-y: auto;
+        }
+        @media (max-width: 899px) {
+          .portal-sidebar-layout {
+            grid-template-columns: 1fr;
+          }
+          .portal-sidebar-layout__sidebar {
+            flex-direction: row;
+            align-items: center;
+            gap: 1em;
+            padding: 16px 20px;
+            border-right: none;
+            border-bottom: 1px solid #E5E5E5;
+          }
+          .portal-sidebar-layout__content {
+            padding: 24px 20px;
+          }
+        }
+      ` }),
+    /* @__PURE__ */ jsxs("div", { className: "portal-sidebar-layout", children: [
+      /* @__PURE__ */ jsxs("div", { className: "portal-sidebar-layout__sidebar", children: [
+        /* @__PURE__ */ jsx("div", { style: { fontWeight: 700, fontSize: "1.5em", color: "#FF4628" }, children: sidebarTitle }),
+        sidebarSubsection && /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              fontSize: "0.8em",
+              color: "#FF4628",
+              marginTop: "0.5em"
+            },
+            children: sidebarSubsection
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "hr",
+          {
+            style: {
+              border: "none",
+              borderTop: "1px solid #E5E5E5",
+              width: "100%",
+              margin: "1em 0"
+            }
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { flex: 1 } }),
+        pageNumber != null && /* @__PURE__ */ jsxs("div", { style: { color: "#B9C8D7", fontSize: "0.85em" }, children: [
+          "Page ",
+          pageNumber
+        ] })
+      ] }),
+      /* @__PURE__ */ jsx("div", { className: "portal-sidebar-layout__content", children })
+    ] })
+  ] });
+}
+function ThesisCallout({ title, children }) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        backgroundColor: "#1B1B1B",
+        color: "#FFFFFF",
+        borderLeft: "4px solid #FF4628",
+        borderRadius: 6,
+        padding: "1em 1.2em",
+        fontFamily: "Inter, sans-serif"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              color: "#FF4628",
+              fontSize: "0.85em",
+              textTransform: "uppercase",
+              letterSpacing: "0.08em",
+              fontWeight: 700,
+              marginBottom: "0.5em"
+            },
+            children: title
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { style: { fontSize: "0.95em", lineHeight: 1.6, fontWeight: 400 }, children })
+      ]
+    }
+  );
+}
+
+export { AuthLayout, DealCard, DealTermsTable, HighlightCard, SidebarContentLayout, StatusBadge, ThesisCallout };