@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.js CHANGED
@@ -1952,12 +1952,37 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
1952
1952
  const tradeHoverColor = "#f5dd9a";
1953
1953
  const [isTradeInteracting, setIsTradeInteracting] = React5__namespace.useState(false);
1954
1954
  const [isOfferInteracting, setIsOfferInteracting] = React5__namespace.useState(false);
1955
+ const headingStyle = {
1956
+ fontSize: "2.5rem",
1957
+ marginBottom: "0.5rem",
1958
+ color: "#ffffff",
1959
+ textShadow: "0 2px 4px rgba(0, 0, 0, 0.3)",
1960
+ fontWeight: 600,
1961
+ lineHeight: 1.2
1962
+ };
1963
+ const priceBlockStyle = {
1964
+ fontSize: "1.25rem",
1965
+ fontWeight: 600,
1966
+ color: "var(--color-accent, #f0b90b)",
1967
+ marginLeft: "1rem",
1968
+ paddingLeft: "1rem",
1969
+ borderLeft: "1px solid rgba(255, 255, 255, 0.3)",
1970
+ display: "flex",
1971
+ alignItems: "center"
1972
+ };
1973
+ const locationStyle = {
1974
+ fontSize: "1.25rem",
1975
+ color: "rgba(255, 255, 255, 0.9)",
1976
+ marginBottom: "0.75rem",
1977
+ display: "flex",
1978
+ alignItems: "center"
1979
+ };
1955
1980
  return /* @__PURE__ */ jsxRuntime.jsxs(
1956
1981
  "div",
1957
1982
  {
1958
1983
  ref,
1959
1984
  className: cn(
1960
- "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",
1985
+ "relative w-[1200px] h-[500px] overflow-hidden bg-black rounded-[12px]",
1961
1986
  className
1962
1987
  ),
1963
1988
  ...props,
@@ -1967,50 +1992,45 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
1967
1992
  {
1968
1993
  src: imageUrl,
1969
1994
  alt: imageAlt ?? name,
1970
- className: "h-full w-full object-cover object-center block max-w-none min-w-[120%] min-h-[120%]",
1971
- style: { transform: "scale(1.0)", transformOrigin: "center" }
1995
+ className: "absolute inset-0 block h-full w-full object-cover object-center",
1996
+ style: { transform: "scale(1.20)", transformOrigin: "center" }
1972
1997
  }
1973
1998
  ),
1974
- /* @__PURE__ */ jsxRuntime.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: [
1975
- /* @__PURE__ */ jsxRuntime.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: [
1976
- /* @__PURE__ */ jsxRuntime.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 }),
1977
- /* @__PURE__ */ jsxRuntime.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: [
1978
- /* @__PURE__ */ jsxRuntime.jsx("span", { children: location }),
1979
- price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(
1980
- "span",
1981
- {
1982
- className: "ml-4 flex items-center border-l border-white/30 pl-4 font-semibold",
1983
- style: { color: "var(--color-accent, #e6c87e)" },
1984
- children: [
1985
- formatPrice2(price, currencySymbol),
1986
- changePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(
1987
- "span",
1988
- {
1989
- className: cn(
1990
- "ml-2 flex items-center text-[0.875rem] font-medium",
1991
- isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
1999
+ /* @__PURE__ */ jsxRuntime.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: [
2000
+ /* @__PURE__ */ jsxRuntime.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: [
2001
+ /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "min-w-0 space-y-2", children: [
2002
+ /* @__PURE__ */ jsxRuntime.jsx("h1", { style: headingStyle, className: "break-words", children: name }),
2003
+ /* @__PURE__ */ jsxRuntime.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: [
2004
+ /* @__PURE__ */ jsxRuntime.jsx("span", { style: locationStyle, children: location }),
2005
+ price == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("span", { style: priceBlockStyle, children: [
2006
+ formatPrice2(price, currencySymbol),
2007
+ changePercent == null ? null : /* @__PURE__ */ jsxRuntime.jsxs(
2008
+ "span",
2009
+ {
2010
+ className: cn(
2011
+ "ml-2 flex items-center text-[0.875rem] font-medium",
2012
+ isPositive ? "text-[#0ecb81]" : "text-[#f6465d]"
2013
+ ),
2014
+ children: [
2015
+ /* @__PURE__ */ jsxRuntime.jsx(
2016
+ "svg",
2017
+ {
2018
+ xmlns: "http://www.w3.org/2000/svg",
2019
+ width: "12",
2020
+ height: "12",
2021
+ viewBox: "0 0 24 24",
2022
+ fill: "currentColor",
2023
+ className: "mr-[0.15rem]",
2024
+ children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
2025
+ }
1992
2026
  ),
1993
- children: [
1994
- /* @__PURE__ */ jsxRuntime.jsx(
1995
- "svg",
1996
- {
1997
- xmlns: "http://www.w3.org/2000/svg",
1998
- width: "12",
1999
- height: "12",
2000
- viewBox: "0 0 24 24",
2001
- fill: "currentColor",
2002
- className: "mr-[0.15rem]",
2003
- children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: isPositive ? "M7 14l5-5 5 5H7z" : "M7 10l5 5 5-5H7z" })
2004
- }
2005
- ),
2006
- Math.abs(changePercent).toFixed(2),
2007
- "%"
2008
- ]
2009
- }
2010
- )
2011
- ]
2012
- }
2013
- )
2027
+ Math.abs(changePercent).toFixed(2),
2028
+ "%"
2029
+ ]
2030
+ }
2031
+ )
2032
+ ] })
2033
+ ] })
2014
2034
  ] }),
2015
2035
  /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-6 text-[0.95rem] text-white/90 max-[768px]:hidden", children: [
2016
2036
  beds == null ? null : /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center", children: [
@@ -2037,7 +2057,7 @@ var PropertyHeroHeader = React5__namespace.forwardRef(
2037
2057
  propertyTypeLabel == null ? null : /* @__PURE__ */ jsxRuntime.jsx("div", { children: propertyTypeLabel })
2038
2058
  ] })
2039
2059
  ] }),
2040
- /* @__PURE__ */ jsxRuntime.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: [
2060
+ /* @__PURE__ */ jsxRuntime.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: [
2041
2061
  /* @__PURE__ */ jsxRuntime.jsx(
2042
2062
  "button",
2043
2063
  {