@loafmarkets/ui 0.0.8 → 0.0.9

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 (5) hide show
  1. package/dist/index.js +63 -43
  2. package/dist/index.js.map +1 -1
  3. package/dist/index.mjs +63 -43
  4. package/dist/index.mjs.map +1 -1
  5. package/package.json +1 -1
package/dist/index.mjs CHANGED
@@ -1930,12 +1930,37 @@ var PropertyHeroHeader = React5.forwardRef(
1930
1930
  const tradeHoverColor = "#f5dd9a";
1931
1931
  const [isTradeInteracting, setIsTradeInteracting] = React5.useState(false);
1932
1932
  const [isOfferInteracting, setIsOfferInteracting] = React5.useState(false);
1933
+ const headingStyle = {
1934
+ fontSize: "2.5rem",
1935
+ marginBottom: "0.5rem",
1936
+ color: "#ffffff",
1937
+ textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
1938
+ fontWeight: 600,
1939
+ lineHeight: 1.2
1940
+ };
1941
+ const priceBlockStyle = {
1942
+ fontSize: "1.25rem",
1943
+ fontWeight: 600,
1944
+ color: "var(--color-accent, #f0b90b)",
1945
+ marginLeft: "1rem",
1946
+ paddingLeft: "1rem",
1947
+ borderLeft: "1px solid rgba(255, 255, 255, 0.3)",
1948
+ display: "flex",
1949
+ alignItems: "center"
1950
+ };
1951
+ const locationStyle = {
1952
+ fontSize: "1.25rem",
1953
+ color: "rgba(255, 255, 255, 0.9)",
1954
+ marginBottom: "0.75rem",
1955
+ display: "flex",
1956
+ alignItems: "center"
1957
+ };
1933
1958
  return /* @__PURE__ */ jsxs(
1934
1959
  "div",
1935
1960
  {
1936
1961
  ref,
1937
1962
  className: cn(
1938
- "relative w-full overflow-hidden bg-black h-[500px] rounded-[12px] max-[768px]:h-[400px] max-[768px]:rounded-lg max-[480px]:h-[350px] max-[480px]:rounded-md",
1963
+ "relative w-[1200px] h-[500px] overflow-hidden bg-black rounded-[12px]",
1939
1964
  className
1940
1965
  ),
1941
1966
  ...props,
@@ -1945,50 +1970,45 @@ var PropertyHeroHeader = React5.forwardRef(
1945
1970
  {
1946
1971
  src: imageUrl,
1947
1972
  alt: imageAlt ?? name,
1948
- className: "h-full w-full object-cover object-center block max-w-none min-w-[120%] min-h-[120%]",
1949
- style: { transform: "scale(1.0)", transformOrigin: "center" }
1973
+ className: "absolute inset-0 block h-full w-full object-cover object-center",
1974
+ style: { transform: "scale(1.20)", transformOrigin: "center" }
1950
1975
  }
1951
1976
  ),
1952
- /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 flex w-full items-end justify-between p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
1953
- /* @__PURE__ */ jsxs("div", { className: "inline-block w-auto max-w-[70%] rounded-lg bg-black/15 px-4 py-3 text-white shadow-[0px_1px_1px_rgba(0,0,0,0.3)] backdrop-blur-[3px] max-[768px]:w-full max-[768px]:max-w-full max-[768px]:px-3 max-[768px]:py-3 max-[480px]:px-3 max-[480px]:py-2", children: [
1954
- /* @__PURE__ */ jsx("h1", { className: "mb-2 text-[2.5rem] leading-tight text-white [text-shadow:0_2px_4px_rgba(0,0,0,0.3)] max-[768px]:mb-[0.4rem] max-[768px]:text-[2rem] max-[480px]:mb-[0.3rem] max-[480px]:text-[1.75rem]", children: name }),
1955
- /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center text-[1.25rem] text-white/90 max-[768px]:mb-[0.6rem] max-[768px]:text-[1.1rem] max-[480px]:mb-[0.5rem] max-[480px]:text-[1rem]", children: [
1956
- /* @__PURE__ */ jsx("span", { children: location }),
1957
- price == null ? null : /* @__PURE__ */ jsxs(
1958
- "span",
1959
- {
1960
- className: "ml-4 flex items-center border-l border-white/30 pl-4 font-semibold",
1961
- style: { color: "var(--color-accent, #e6c87e)" },
1962
- children: [
1963
- formatPrice2(price, currencySymbol),
1964
- changePercent == null ? null : /* @__PURE__ */ jsxs(
1965
- "span",
1966
- {
1967
- className: cn(
1968
- "ml-2 flex items-center text-[0.875rem] font-medium",
1969
- isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
1977
+ /* @__PURE__ */ jsxs("div", { className: "absolute bottom-0 left-0 right-0 z-10 flex w-full items-end justify-between gap-4 p-8 max-[768px]:flex-col max-[768px]:items-start max-[768px]:gap-4 max-[768px]:p-6 max-[480px]:p-4", children: [
1978
+ /* @__PURE__ */ jsxs("div", { className: "inline-block w-full rounded-lg bg-black/15 px-4 py-3 text-white shadow-[0px_1px_1px_rgba(0,0,0,0.3)] backdrop-blur-[3px] max-[768px]:w-full max-[768px]:px-3 max-[768px]:py-3 max-[480px]:px-3 max-[480px]:py-2 min-[769px]:flex-1 min-[769px]:min-w-0", children: [
1979
+ /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-2", children: [
1980
+ /* @__PURE__ */ jsx("h1", { style: headingStyle, className: "break-words", children: name }),
1981
+ /* @__PURE__ */ jsxs("div", { className: "mb-3 flex flex-wrap items-center max-[768px]:mb-[0.6rem] max-[768px]:text-[1.1rem] max-[480px]:mb-[0.5rem] max-[480px]:text-[1rem]", children: [
1982
+ /* @__PURE__ */ jsx("span", { style: locationStyle, children: location }),
1983
+ price == null ? null : /* @__PURE__ */ jsxs("span", { style: priceBlockStyle, children: [
1984
+ formatPrice2(price, currencySymbol),
1985
+ changePercent == null ? null : /* @__PURE__ */ jsxs(
1986
+ "span",
1987
+ {
1988
+ className: cn(
1989
+ "ml-2 flex items-center text-[0.875rem] font-medium",
1990
+ isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
1991
+ ),
1992
+ children: [
1993
+ /* @__PURE__ */ jsx(
1994
+ "svg",
1995
+ {
1996
+ xmlns: "http://www.w3.org/2000/svg",
1997
+ width: "12",
1998
+ height: "12",
1999
+ viewBox: "0 0 24 24",
2000
+ fill: "currentColor",
2001
+ className: "mr-[0.15rem]",
2002
+ children: /* @__PURE__ */ jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
2003
+ }
1970
2004
  ),
1971
- children: [
1972
- /* @__PURE__ */ jsx(
1973
- "svg",
1974
- {
1975
- xmlns: "http://www.w3.org/2000/svg",
1976
- width: "12",
1977
- height: "12",
1978
- viewBox: "0 0 24 24",
1979
- fill: "currentColor",
1980
- className: "mr-[0.15rem]",
1981
- children: /* @__PURE__ */ jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
1982
- }
1983
- ),
1984
- Math.abs(changePercent).toFixed(2),
1985
- "%"
1986
- ]
1987
- }
1988
- )
1989
- ]
1990
- }
1991
- )
2005
+ Math.abs(changePercent).toFixed(2),
2006
+ "%"
2007
+ ]
2008
+ }
2009
+ )
2010
+ ] })
2011
+ ] })
1992
2012
  ] }),
1993
2013
  /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: [
1994
2014
  beds == null ? null : /* @__PURE__ */ jsxs("div", { className: "flex items-center", children: [
@@ -2015,7 +2035,7 @@ var PropertyHeroHeader = React5.forwardRef(
2015
2035
  propertyTypeLabel == null ? null : /* @__PURE__ */ jsx("div", { children: propertyTypeLabel })
2016
2036
  ] })
2017
2037
  ] }),
2018
- /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-3 max-[768px]:w-full max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
2038
+ /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center gap-3 max-[768px]:w-full max-[768px]:justify-between max-[768px]:gap-2 max-[480px]:gap-2", children: [
2019
2039
  /* @__PURE__ */ jsx(
2020
2040
  "button",
2021
2041
  {