@loafmarkets/ui 0.1.76 → 0.1.77

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.
package/dist/index.d.mts CHANGED
@@ -978,8 +978,8 @@ type OfferingProgressCardProps = {
978
978
  raisedAmount?: number;
979
979
  targetAmount?: number;
980
980
  isPrivateClient?: boolean;
981
- /** "default" = full card with header/countdown, "compact" = bar-only (demo style) */
982
- variant?: 'default' | 'compact';
981
+ /** "default" = full card with header/countdown, "compact" = bar-only, "home" = countdown left + spinner right */
982
+ variant?: 'default' | 'compact' | 'home';
983
983
  style?: React__default.CSSProperties;
984
984
  className?: string;
985
985
  };
package/dist/index.d.ts CHANGED
@@ -978,8 +978,8 @@ type OfferingProgressCardProps = {
978
978
  raisedAmount?: number;
979
979
  targetAmount?: number;
980
980
  isPrivateClient?: boolean;
981
- /** "default" = full card with header/countdown, "compact" = bar-only (demo style) */
982
- variant?: 'default' | 'compact';
981
+ /** "default" = full card with header/countdown, "compact" = bar-only, "home" = countdown left + spinner right */
982
+ variant?: 'default' | 'compact' | 'home';
983
983
  style?: React__default.CSSProperties;
984
984
  className?: string;
985
985
  };
package/dist/index.js CHANGED
@@ -9733,6 +9733,90 @@ function OfferingProgressCard({
9733
9733
  ] })
9734
9734
  ] });
9735
9735
  }
9736
+ if (variant === "home") {
9737
+ const isPreLive = !ipoStarted && ipoStatus !== "CLOSED" && ipoStatus !== "CANCELLED";
9738
+ return /* @__PURE__ */ jsxRuntime.jsxs(Container, { style, className, children: [
9739
+ /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
9740
+ /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
9741
+ /* @__PURE__ */ jsxRuntime.jsx(fa.FaChartLine, {}),
9742
+ " Offering Progress"
9743
+ ] }),
9744
+ /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", alignItems: "center", gap: "0.4rem" }, children: ipoStarted ? /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: "#0ecb81", children: [
9745
+ /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { $color: "#0ecb81", $pulse: true }),
9746
+ "LIVE"
9747
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(StatusSpan, { $color: statusColor || "#D4AF37", children: [
9748
+ /* @__PURE__ */ jsxRuntime.jsx(StatusDot, { $color: statusColor || "#D4AF37" }),
9749
+ statusLabel || "Preparing"
9750
+ ] }) })
9751
+ ] }),
9752
+ isPreLive ? /* @__PURE__ */ jsxRuntime.jsxs(HomePreLiveRow, { children: [
9753
+ countdown ? /* @__PURE__ */ jsxRuntime.jsxs(HomeCountdownSide, { children: [
9754
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownLabel, { children: "Opens In" }),
9755
+ /* @__PURE__ */ jsxRuntime.jsxs(CountdownDigits, { children: [
9756
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.days).padStart(2, "0") }),
9757
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "D" }),
9758
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
9759
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.hours).padStart(2, "0") }),
9760
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "H" }),
9761
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
9762
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.minutes).padStart(2, "0") }),
9763
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "M" }),
9764
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownSeparator, { children: ":" }),
9765
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownNumber, { children: String(countdown.seconds).padStart(2, "0") }),
9766
+ /* @__PURE__ */ jsxRuntime.jsx(CountdownUnitLabel, { children: "S" })
9767
+ ] })
9768
+ ] }) : /* @__PURE__ */ jsxRuntime.jsx(HomeCountdownSide, { children: /* @__PURE__ */ jsxRuntime.jsx(PreLiveStatus, { $statusColor: statusColor, children: "Sale Not Yet Open" }) }),
9769
+ /* @__PURE__ */ jsxRuntime.jsxs(HomeUnitsSide, { children: [
9770
+ /* @__PURE__ */ jsxRuntime.jsx(HomeUnitsLabel, { children: "Units Subscribed" }),
9771
+ /* @__PURE__ */ jsxRuntime.jsxs(HomeUnitsValue, { children: [
9772
+ /* @__PURE__ */ jsxRuntime.jsx(HomeSpinner, {}),
9773
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
9774
+ " / ",
9775
+ supplyToSell.toLocaleString()
9776
+ ] })
9777
+ ] })
9778
+ ] })
9779
+ ] }) : /* @__PURE__ */ jsxRuntime.jsxs(LiveBody, { children: [
9780
+ /* @__PURE__ */ jsxRuntime.jsxs(LiveTopRow, { children: [
9781
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { children: [
9782
+ /* @__PURE__ */ jsxRuntime.jsxs(LiveLabel, { children: [
9783
+ "Offering Subscribed ",
9784
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: "\u24D8" })
9785
+ ] }),
9786
+ /* @__PURE__ */ jsxRuntime.jsxs(LivePercent, { children: [
9787
+ percentSold.toFixed(1),
9788
+ "%",
9789
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "arrow", children: "\u2191" })
9790
+ ] })
9791
+ ] }),
9792
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { textAlign: "right" }, children: [
9793
+ /* @__PURE__ */ jsxRuntime.jsx(LiveLabel, { children: "Units Subscribed" }),
9794
+ /* @__PURE__ */ jsxRuntime.jsxs(UnitsValue, { children: [
9795
+ /* @__PURE__ */ jsxRuntime.jsx("span", { children: totalSold.toLocaleString() }),
9796
+ /* @__PURE__ */ jsxRuntime.jsxs("small", { children: [
9797
+ "/ ",
9798
+ supplyToSell.toLocaleString()
9799
+ ] })
9800
+ ] })
9801
+ ] })
9802
+ ] }),
9803
+ /* @__PURE__ */ jsxRuntime.jsx(ProgressBarOuter, { children: /* @__PURE__ */ jsxRuntime.jsx(ProgressBarInner, { style: { width: `${Math.min(percentSold, 100)}%` } }) }),
9804
+ /* @__PURE__ */ jsxRuntime.jsxs(ProgressInfo, { children: [
9805
+ /* @__PURE__ */ jsxRuntime.jsxs(ProgressSubscribers, { children: [
9806
+ "Subscribers: ",
9807
+ subscriberCount.toLocaleString()
9808
+ ] }),
9809
+ /* @__PURE__ */ jsxRuntime.jsxs(ProgressAmounts, { children: [
9810
+ /* @__PURE__ */ jsxRuntime.jsx("span", { className: "raised", children: formatCurrency3(computedRaised) }),
9811
+ /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "target", children: [
9812
+ " / ",
9813
+ formatCurrency3(computedTarget)
9814
+ ] })
9815
+ ] })
9816
+ ] })
9817
+ ] })
9818
+ ] });
9819
+ }
9736
9820
  return /* @__PURE__ */ jsxRuntime.jsxs(Container, { style, className, children: [
9737
9821
  /* @__PURE__ */ jsxRuntime.jsxs(Header2, { children: [
9738
9822
  /* @__PURE__ */ jsxRuntime.jsxs("h3", { children: [
@@ -10041,6 +10125,52 @@ var CompactContainer = styled25__default.default.div`
10041
10125
  flex-direction: column;
10042
10126
  gap: 0.5rem;
10043
10127
  `;
10128
+ var HomePreLiveRow = styled25__default.default.div`
10129
+ display: flex;
10130
+ align-items: center;
10131
+ justify-content: space-between;
10132
+ padding-top: 1rem;
10133
+ `;
10134
+ var HomeCountdownSide = styled25__default.default.div`
10135
+ display: flex;
10136
+ flex-direction: column;
10137
+ align-items: center;
10138
+ flex: 1;
10139
+ `;
10140
+ var HomeUnitsSide = styled25__default.default.div`
10141
+ text-align: center;
10142
+ flex-shrink: 0;
10143
+ `;
10144
+ var HomeUnitsLabel = styled25__default.default.div`
10145
+ font-size: 0.6rem;
10146
+ color: var(--color-text-secondary);
10147
+ text-transform: uppercase;
10148
+ letter-spacing: 0.1em;
10149
+ margin-bottom: 0.2rem;
10150
+ `;
10151
+ var HomeUnitsValue = styled25__default.default.div`
10152
+ font-size: 1.1rem;
10153
+ font-weight: 700;
10154
+ font-family: monospace;
10155
+ span {
10156
+ color: var(--color-text-secondary);
10157
+ font-weight: 400;
10158
+ }
10159
+ `;
10160
+ var HomeSpinner = styled25__default.default.span`
10161
+ display: inline-block;
10162
+ width: 14px;
10163
+ height: 14px;
10164
+ border: 2px solid rgba(255, 255, 255, 0.1);
10165
+ border-top-color: var(--color-accent, #f0b90b);
10166
+ border-radius: 50%;
10167
+ animation: homeSpin 1s linear infinite;
10168
+ vertical-align: middle;
10169
+ margin-right: 0.15rem;
10170
+ @keyframes homeSpin {
10171
+ to { transform: rotate(360deg); }
10172
+ }
10173
+ `;
10044
10174
  var MAX_DISPLAY_AMOUNT = 6e4;
10045
10175
  var formatCurrency4 = (amount) => {
10046
10176
  if (amount >= 1e6) return `$${(amount / 1e6).toFixed(2)}M`;