@loafmarkets/ui 0.1.76 → 0.1.78

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