virtual-ui-lib 1.0.63 → 1.0.65

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.js CHANGED
@@ -37,6 +37,8 @@ __export(index_exports, {
37
37
  DividerLine: () => DividerLine,
38
38
  FileUpload: () => FileUpload,
39
39
  Footer: () => Footer,
40
+ ImageCard: () => ImageCard,
41
+ ImageSlider: () => ImageSlider,
40
42
  Loader: () => Loader,
41
43
  LoadingSpinner: () => LoadingSpinner,
42
44
  Navbar: () => Navbar,
@@ -1945,6 +1947,324 @@ var Charts = ({
1945
1947
  textTransform: "capitalize"
1946
1948
  } }, type)), renderChart());
1947
1949
  };
1950
+
1951
+ // src/components/ImageCard/ImageCard.jsx
1952
+ var import_react24 = __toESM(require("react"));
1953
+ var ImageCard = ({
1954
+ image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
1955
+ tag = "Travel",
1956
+ title = "Discover the Hidden Peaks of the Himalayas",
1957
+ description = "A breathtaking journey through untouched landscapes, ancient monasteries, and snow-capped summits that few have ever seen.",
1958
+ buttonText = "Read More",
1959
+ accent = "#6366f1",
1960
+ bg = "#0f172a",
1961
+ radius = "20px",
1962
+ onButtonClick = () => {
1963
+ }
1964
+ }) => {
1965
+ const [hovered, setHovered] = (0, import_react24.useState)(false);
1966
+ const alpha = (hex, op) => {
1967
+ const r = parseInt(hex.slice(1, 3), 16);
1968
+ const g = parseInt(hex.slice(3, 5), 16);
1969
+ const b = parseInt(hex.slice(5, 7), 16);
1970
+ return `rgba(${r},${g},${b},${op})`;
1971
+ };
1972
+ return /* @__PURE__ */ import_react24.default.createElement(
1973
+ "div",
1974
+ {
1975
+ onMouseEnter: () => setHovered(true),
1976
+ onMouseLeave: () => setHovered(false),
1977
+ style: {
1978
+ background: bg,
1979
+ borderRadius: radius,
1980
+ overflow: "hidden",
1981
+ width: "300px",
1982
+ border: `1px solid ${hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"}`,
1983
+ fontFamily: "system-ui, sans-serif",
1984
+ transition: "border-color 0.25s, transform 0.25s",
1985
+ transform: hovered ? "translateY(-4px)" : "none",
1986
+ boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
1987
+ }
1988
+ },
1989
+ /* @__PURE__ */ import_react24.default.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ import_react24.default.createElement(
1990
+ "img",
1991
+ {
1992
+ src: image,
1993
+ alt: title,
1994
+ style: {
1995
+ width: "100%",
1996
+ height: "100%",
1997
+ objectFit: "cover",
1998
+ transform: hovered ? "scale(1.05)" : "scale(1)",
1999
+ transition: "transform 0.4s ease"
2000
+ }
2001
+ }
2002
+ ), /* @__PURE__ */ import_react24.default.createElement("div", { style: {
2003
+ position: "absolute",
2004
+ inset: 0,
2005
+ background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
2006
+ } }), tag && /* @__PURE__ */ import_react24.default.createElement("div", { style: {
2007
+ position: "absolute",
2008
+ top: "12px",
2009
+ left: "12px",
2010
+ padding: "4px 10px",
2011
+ borderRadius: "20px",
2012
+ background: alpha(accent, 0.85),
2013
+ fontSize: "10px",
2014
+ fontWeight: "700",
2015
+ color: "#fff",
2016
+ letterSpacing: "0.5px",
2017
+ textTransform: "uppercase"
2018
+ } }, tag)),
2019
+ /* @__PURE__ */ import_react24.default.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ import_react24.default.createElement("h3", { style: {
2020
+ fontSize: "15px",
2021
+ fontWeight: "700",
2022
+ color: "#fff",
2023
+ margin: "0 0 8px",
2024
+ lineHeight: 1.4
2025
+ } }, title), /* @__PURE__ */ import_react24.default.createElement("p", { style: {
2026
+ fontSize: "13px",
2027
+ color: "rgba(255,255,255,0.45)",
2028
+ lineHeight: 1.65,
2029
+ margin: "0 0 18px"
2030
+ } }, description), /* @__PURE__ */ import_react24.default.createElement(
2031
+ "button",
2032
+ {
2033
+ onClick: onButtonClick,
2034
+ style: {
2035
+ width: "100%",
2036
+ padding: "11px",
2037
+ borderRadius: "12px",
2038
+ border: "none",
2039
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
2040
+ color: "#fff",
2041
+ fontSize: "13px",
2042
+ fontWeight: "700",
2043
+ cursor: "pointer",
2044
+ fontFamily: "inherit",
2045
+ transition: "opacity 0.2s"
2046
+ },
2047
+ onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
2048
+ onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
2049
+ },
2050
+ buttonText
2051
+ ))
2052
+ );
2053
+ };
2054
+
2055
+ // src/components/ImageSlider/ImageSlider.jsx
2056
+ var import_react25 = __toESM(require("react"));
2057
+ var ImageSlider = ({
2058
+ images = [
2059
+ {
2060
+ src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
2061
+ title: "Hidden Peaks of Himalayas",
2062
+ tag: "Travel"
2063
+ },
2064
+ {
2065
+ src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600&q=80",
2066
+ title: "City Lights at Night",
2067
+ tag: "Urban"
2068
+ },
2069
+ {
2070
+ src: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=600&q=80",
2071
+ title: "Tropical Beach Paradise",
2072
+ tag: "Nature"
2073
+ },
2074
+ {
2075
+ src: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=600&q=80",
2076
+ title: "Starry Mountain Night",
2077
+ tag: "Adventure"
2078
+ }
2079
+ ],
2080
+ accent = "#6366f1",
2081
+ bg = "#0f172a",
2082
+ radius = "20px",
2083
+ showDots = true,
2084
+ showCaption = true,
2085
+ autoPlay = false
2086
+ }) => {
2087
+ const [current, setCurrent] = (0, import_react25.useState)(0);
2088
+ const [dir, setDir] = (0, import_react25.useState)(null);
2089
+ const alpha = (hex, op) => {
2090
+ const r = parseInt(hex.slice(1, 3), 16);
2091
+ const g = parseInt(hex.slice(3, 5), 16);
2092
+ const b = parseInt(hex.slice(5, 7), 16);
2093
+ return `rgba(${r},${g},${b},${op})`;
2094
+ };
2095
+ const prev = () => {
2096
+ setDir("left");
2097
+ setCurrent((c) => (c - 1 + images.length) % images.length);
2098
+ };
2099
+ const next = () => {
2100
+ setDir("right");
2101
+ setCurrent((c) => (c + 1) % images.length);
2102
+ };
2103
+ const goTo = (i) => {
2104
+ setDir(i > current ? "right" : "left");
2105
+ setCurrent(i);
2106
+ };
2107
+ const img = images[current];
2108
+ return /* @__PURE__ */ import_react25.default.createElement("div", { style: {
2109
+ background: bg,
2110
+ borderRadius: radius,
2111
+ overflow: "hidden",
2112
+ width: "300px",
2113
+ border: "1px solid rgba(255,255,255,0.07)",
2114
+ fontFamily: "system-ui, sans-serif",
2115
+ boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
2116
+ } }, /* @__PURE__ */ import_react25.default.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ import_react25.default.createElement(
2117
+ "img",
2118
+ {
2119
+ key: current,
2120
+ src: img.src,
2121
+ alt: img.title,
2122
+ style: {
2123
+ width: "100%",
2124
+ height: "100%",
2125
+ objectFit: "cover",
2126
+ animation: `sliderFade 0.35s ease`
2127
+ }
2128
+ }
2129
+ ), /* @__PURE__ */ import_react25.default.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ import_react25.default.createElement("div", { style: {
2130
+ position: "absolute",
2131
+ inset: 0,
2132
+ background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%)"
2133
+ } }), img.tag && /* @__PURE__ */ import_react25.default.createElement("div", { style: {
2134
+ position: "absolute",
2135
+ top: "12px",
2136
+ left: "12px",
2137
+ padding: "4px 10px",
2138
+ borderRadius: "20px",
2139
+ background: alpha(accent, 0.85),
2140
+ fontSize: "10px",
2141
+ fontWeight: "700",
2142
+ color: "#fff",
2143
+ letterSpacing: "0.5px",
2144
+ textTransform: "uppercase"
2145
+ } }, img.tag), /* @__PURE__ */ import_react25.default.createElement("div", { style: {
2146
+ position: "absolute",
2147
+ top: "12px",
2148
+ right: "12px",
2149
+ padding: "4px 10px",
2150
+ borderRadius: "20px",
2151
+ background: "rgba(0,0,0,0.5)",
2152
+ fontSize: "10px",
2153
+ fontWeight: "600",
2154
+ color: "rgba(255,255,255,0.7)"
2155
+ } }, current + 1, " / ", images.length), /* @__PURE__ */ import_react25.default.createElement(
2156
+ "button",
2157
+ {
2158
+ onClick: prev,
2159
+ style: {
2160
+ position: "absolute",
2161
+ left: "10px",
2162
+ top: "50%",
2163
+ transform: "translateY(-50%)",
2164
+ width: "34px",
2165
+ height: "34px",
2166
+ borderRadius: "50%",
2167
+ background: "rgba(0,0,0,0.5)",
2168
+ border: "1px solid rgba(255,255,255,0.15)",
2169
+ color: "#fff",
2170
+ cursor: "pointer",
2171
+ display: "flex",
2172
+ alignItems: "center",
2173
+ justifyContent: "center",
2174
+ transition: "background 0.2s",
2175
+ padding: 0
2176
+ },
2177
+ onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
2178
+ onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
2179
+ },
2180
+ /* @__PURE__ */ import_react25.default.createElement(
2181
+ "svg",
2182
+ {
2183
+ width: "14",
2184
+ height: "14",
2185
+ viewBox: "0 0 24 24",
2186
+ fill: "none",
2187
+ stroke: "currentColor",
2188
+ strokeWidth: "2.5",
2189
+ strokeLinecap: "round"
2190
+ },
2191
+ /* @__PURE__ */ import_react25.default.createElement("polyline", { points: "15 18 9 12 15 6" })
2192
+ )
2193
+ ), /* @__PURE__ */ import_react25.default.createElement(
2194
+ "button",
2195
+ {
2196
+ onClick: next,
2197
+ style: {
2198
+ position: "absolute",
2199
+ right: "10px",
2200
+ top: "50%",
2201
+ transform: "translateY(-50%)",
2202
+ width: "34px",
2203
+ height: "34px",
2204
+ borderRadius: "50%",
2205
+ background: "rgba(0,0,0,0.5)",
2206
+ border: "1px solid rgba(255,255,255,0.15)",
2207
+ color: "#fff",
2208
+ cursor: "pointer",
2209
+ display: "flex",
2210
+ alignItems: "center",
2211
+ justifyContent: "center",
2212
+ transition: "background 0.2s",
2213
+ padding: 0
2214
+ },
2215
+ onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
2216
+ onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
2217
+ },
2218
+ /* @__PURE__ */ import_react25.default.createElement(
2219
+ "svg",
2220
+ {
2221
+ width: "14",
2222
+ height: "14",
2223
+ viewBox: "0 0 24 24",
2224
+ fill: "none",
2225
+ stroke: "currentColor",
2226
+ strokeWidth: "2.5",
2227
+ strokeLinecap: "round"
2228
+ },
2229
+ /* @__PURE__ */ import_react25.default.createElement("polyline", { points: "9 18 15 12 9 6" })
2230
+ )
2231
+ )), showCaption && /* @__PURE__ */ import_react25.default.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ import_react25.default.createElement(
2232
+ "p",
2233
+ {
2234
+ style: {
2235
+ fontSize: "14px",
2236
+ fontWeight: "700",
2237
+ color: "#fff",
2238
+ margin: 0,
2239
+ lineHeight: 1.4,
2240
+ animation: "sliderFade 0.3s ease"
2241
+ },
2242
+ key: current + "-title"
2243
+ },
2244
+ img.title
2245
+ )), showDots && /* @__PURE__ */ import_react25.default.createElement("div", { style: {
2246
+ display: "flex",
2247
+ justifyContent: "center",
2248
+ gap: "6px",
2249
+ padding: "12px 16px 16px"
2250
+ } }, images.map((_, i) => /* @__PURE__ */ import_react25.default.createElement(
2251
+ "button",
2252
+ {
2253
+ key: i,
2254
+ onClick: () => goTo(i),
2255
+ style: {
2256
+ width: i === current ? "20px" : "6px",
2257
+ height: "6px",
2258
+ borderRadius: "3px",
2259
+ border: "none",
2260
+ cursor: "pointer",
2261
+ padding: 0,
2262
+ background: i === current ? accent : "rgba(255,255,255,0.2)",
2263
+ transition: "all 0.25s ease"
2264
+ }
2265
+ }
2266
+ ))));
2267
+ };
1948
2268
  // Annotate the CommonJS export names for ESM import in node:
1949
2269
  0 && (module.exports = {
1950
2270
  Avatar,
@@ -1955,6 +2275,8 @@ var Charts = ({
1955
2275
  DividerLine,
1956
2276
  FileUpload,
1957
2277
  Footer,
2278
+ ImageCard,
2279
+ ImageSlider,
1958
2280
  Loader,
1959
2281
  LoadingSpinner,
1960
2282
  Navbar,
package/dist/index.mjs CHANGED
@@ -1888,6 +1888,324 @@ var Charts = ({
1888
1888
  textTransform: "capitalize"
1889
1889
  } }, type)), renderChart());
1890
1890
  };
1891
+
1892
+ // src/components/ImageCard/ImageCard.jsx
1893
+ import React24, { useState as useState17 } from "react";
1894
+ var ImageCard = ({
1895
+ image = "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
1896
+ tag = "Travel",
1897
+ title = "Discover the Hidden Peaks of the Himalayas",
1898
+ description = "A breathtaking journey through untouched landscapes, ancient monasteries, and snow-capped summits that few have ever seen.",
1899
+ buttonText = "Read More",
1900
+ accent = "#6366f1",
1901
+ bg = "#0f172a",
1902
+ radius = "20px",
1903
+ onButtonClick = () => {
1904
+ }
1905
+ }) => {
1906
+ const [hovered, setHovered] = useState17(false);
1907
+ const alpha = (hex, op) => {
1908
+ const r = parseInt(hex.slice(1, 3), 16);
1909
+ const g = parseInt(hex.slice(3, 5), 16);
1910
+ const b = parseInt(hex.slice(5, 7), 16);
1911
+ return `rgba(${r},${g},${b},${op})`;
1912
+ };
1913
+ return /* @__PURE__ */ React24.createElement(
1914
+ "div",
1915
+ {
1916
+ onMouseEnter: () => setHovered(true),
1917
+ onMouseLeave: () => setHovered(false),
1918
+ style: {
1919
+ background: bg,
1920
+ borderRadius: radius,
1921
+ overflow: "hidden",
1922
+ width: "300px",
1923
+ border: `1px solid ${hovered ? alpha(accent, 0.3) : "rgba(255,255,255,0.07)"}`,
1924
+ fontFamily: "system-ui, sans-serif",
1925
+ transition: "border-color 0.25s, transform 0.25s",
1926
+ transform: hovered ? "translateY(-4px)" : "none",
1927
+ boxShadow: hovered ? `0 16px 40px rgba(0,0,0,0.5)` : "0 4px 20px rgba(0,0,0,0.3)"
1928
+ }
1929
+ },
1930
+ /* @__PURE__ */ React24.createElement("div", { style: { position: "relative", width: "100%", height: "180px", overflow: "hidden" } }, /* @__PURE__ */ React24.createElement(
1931
+ "img",
1932
+ {
1933
+ src: image,
1934
+ alt: title,
1935
+ style: {
1936
+ width: "100%",
1937
+ height: "100%",
1938
+ objectFit: "cover",
1939
+ transform: hovered ? "scale(1.05)" : "scale(1)",
1940
+ transition: "transform 0.4s ease"
1941
+ }
1942
+ }
1943
+ ), /* @__PURE__ */ React24.createElement("div", { style: {
1944
+ position: "absolute",
1945
+ inset: 0,
1946
+ background: "linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 60%)"
1947
+ } }), tag && /* @__PURE__ */ React24.createElement("div", { style: {
1948
+ position: "absolute",
1949
+ top: "12px",
1950
+ left: "12px",
1951
+ padding: "4px 10px",
1952
+ borderRadius: "20px",
1953
+ background: alpha(accent, 0.85),
1954
+ fontSize: "10px",
1955
+ fontWeight: "700",
1956
+ color: "#fff",
1957
+ letterSpacing: "0.5px",
1958
+ textTransform: "uppercase"
1959
+ } }, tag)),
1960
+ /* @__PURE__ */ React24.createElement("div", { style: { padding: "18px" } }, /* @__PURE__ */ React24.createElement("h3", { style: {
1961
+ fontSize: "15px",
1962
+ fontWeight: "700",
1963
+ color: "#fff",
1964
+ margin: "0 0 8px",
1965
+ lineHeight: 1.4
1966
+ } }, title), /* @__PURE__ */ React24.createElement("p", { style: {
1967
+ fontSize: "13px",
1968
+ color: "rgba(255,255,255,0.45)",
1969
+ lineHeight: 1.65,
1970
+ margin: "0 0 18px"
1971
+ } }, description), /* @__PURE__ */ React24.createElement(
1972
+ "button",
1973
+ {
1974
+ onClick: onButtonClick,
1975
+ style: {
1976
+ width: "100%",
1977
+ padding: "11px",
1978
+ borderRadius: "12px",
1979
+ border: "none",
1980
+ background: `linear-gradient(135deg, ${accent}, ${alpha(accent, 0.7)})`,
1981
+ color: "#fff",
1982
+ fontSize: "13px",
1983
+ fontWeight: "700",
1984
+ cursor: "pointer",
1985
+ fontFamily: "inherit",
1986
+ transition: "opacity 0.2s"
1987
+ },
1988
+ onMouseEnter: (e) => e.currentTarget.style.opacity = "0.85",
1989
+ onMouseLeave: (e) => e.currentTarget.style.opacity = "1"
1990
+ },
1991
+ buttonText
1992
+ ))
1993
+ );
1994
+ };
1995
+
1996
+ // src/components/ImageSlider/ImageSlider.jsx
1997
+ import React25, { useState as useState18 } from "react";
1998
+ var ImageSlider = ({
1999
+ images = [
2000
+ {
2001
+ src: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=600&q=80",
2002
+ title: "Hidden Peaks of Himalayas",
2003
+ tag: "Travel"
2004
+ },
2005
+ {
2006
+ src: "https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?w=600&q=80",
2007
+ title: "City Lights at Night",
2008
+ tag: "Urban"
2009
+ },
2010
+ {
2011
+ src: "https://images.unsplash.com/photo-1500534314209-a25ddb2bd429?w=600&q=80",
2012
+ title: "Tropical Beach Paradise",
2013
+ tag: "Nature"
2014
+ },
2015
+ {
2016
+ src: "https://images.unsplash.com/photo-1519681393784-d120267933ba?w=600&q=80",
2017
+ title: "Starry Mountain Night",
2018
+ tag: "Adventure"
2019
+ }
2020
+ ],
2021
+ accent = "#6366f1",
2022
+ bg = "#0f172a",
2023
+ radius = "20px",
2024
+ showDots = true,
2025
+ showCaption = true,
2026
+ autoPlay = false
2027
+ }) => {
2028
+ const [current, setCurrent] = useState18(0);
2029
+ const [dir, setDir] = useState18(null);
2030
+ const alpha = (hex, op) => {
2031
+ const r = parseInt(hex.slice(1, 3), 16);
2032
+ const g = parseInt(hex.slice(3, 5), 16);
2033
+ const b = parseInt(hex.slice(5, 7), 16);
2034
+ return `rgba(${r},${g},${b},${op})`;
2035
+ };
2036
+ const prev = () => {
2037
+ setDir("left");
2038
+ setCurrent((c) => (c - 1 + images.length) % images.length);
2039
+ };
2040
+ const next = () => {
2041
+ setDir("right");
2042
+ setCurrent((c) => (c + 1) % images.length);
2043
+ };
2044
+ const goTo = (i) => {
2045
+ setDir(i > current ? "right" : "left");
2046
+ setCurrent(i);
2047
+ };
2048
+ const img = images[current];
2049
+ return /* @__PURE__ */ React25.createElement("div", { style: {
2050
+ background: bg,
2051
+ borderRadius: radius,
2052
+ overflow: "hidden",
2053
+ width: "300px",
2054
+ border: "1px solid rgba(255,255,255,0.07)",
2055
+ fontFamily: "system-ui, sans-serif",
2056
+ boxShadow: "0 10px 40px rgba(0,0,0,0.4)"
2057
+ } }, /* @__PURE__ */ React25.createElement("div", { style: { position: "relative", width: "100%", height: "200px", overflow: "hidden", background: "#000" } }, /* @__PURE__ */ React25.createElement(
2058
+ "img",
2059
+ {
2060
+ key: current,
2061
+ src: img.src,
2062
+ alt: img.title,
2063
+ style: {
2064
+ width: "100%",
2065
+ height: "100%",
2066
+ objectFit: "cover",
2067
+ animation: `sliderFade 0.35s ease`
2068
+ }
2069
+ }
2070
+ ), /* @__PURE__ */ React25.createElement("style", null, `@keyframes sliderFade { from { opacity: 0; transform: scale(1.03); } to { opacity: 1; transform: scale(1); } }`), /* @__PURE__ */ React25.createElement("div", { style: {
2071
+ position: "absolute",
2072
+ inset: 0,
2073
+ background: "linear-gradient(to top, rgba(0,0,0,0.65) 0%, transparent 55%)"
2074
+ } }), img.tag && /* @__PURE__ */ React25.createElement("div", { style: {
2075
+ position: "absolute",
2076
+ top: "12px",
2077
+ left: "12px",
2078
+ padding: "4px 10px",
2079
+ borderRadius: "20px",
2080
+ background: alpha(accent, 0.85),
2081
+ fontSize: "10px",
2082
+ fontWeight: "700",
2083
+ color: "#fff",
2084
+ letterSpacing: "0.5px",
2085
+ textTransform: "uppercase"
2086
+ } }, img.tag), /* @__PURE__ */ React25.createElement("div", { style: {
2087
+ position: "absolute",
2088
+ top: "12px",
2089
+ right: "12px",
2090
+ padding: "4px 10px",
2091
+ borderRadius: "20px",
2092
+ background: "rgba(0,0,0,0.5)",
2093
+ fontSize: "10px",
2094
+ fontWeight: "600",
2095
+ color: "rgba(255,255,255,0.7)"
2096
+ } }, current + 1, " / ", images.length), /* @__PURE__ */ React25.createElement(
2097
+ "button",
2098
+ {
2099
+ onClick: prev,
2100
+ style: {
2101
+ position: "absolute",
2102
+ left: "10px",
2103
+ top: "50%",
2104
+ transform: "translateY(-50%)",
2105
+ width: "34px",
2106
+ height: "34px",
2107
+ borderRadius: "50%",
2108
+ background: "rgba(0,0,0,0.5)",
2109
+ border: "1px solid rgba(255,255,255,0.15)",
2110
+ color: "#fff",
2111
+ cursor: "pointer",
2112
+ display: "flex",
2113
+ alignItems: "center",
2114
+ justifyContent: "center",
2115
+ transition: "background 0.2s",
2116
+ padding: 0
2117
+ },
2118
+ onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
2119
+ onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
2120
+ },
2121
+ /* @__PURE__ */ React25.createElement(
2122
+ "svg",
2123
+ {
2124
+ width: "14",
2125
+ height: "14",
2126
+ viewBox: "0 0 24 24",
2127
+ fill: "none",
2128
+ stroke: "currentColor",
2129
+ strokeWidth: "2.5",
2130
+ strokeLinecap: "round"
2131
+ },
2132
+ /* @__PURE__ */ React25.createElement("polyline", { points: "15 18 9 12 15 6" })
2133
+ )
2134
+ ), /* @__PURE__ */ React25.createElement(
2135
+ "button",
2136
+ {
2137
+ onClick: next,
2138
+ style: {
2139
+ position: "absolute",
2140
+ right: "10px",
2141
+ top: "50%",
2142
+ transform: "translateY(-50%)",
2143
+ width: "34px",
2144
+ height: "34px",
2145
+ borderRadius: "50%",
2146
+ background: "rgba(0,0,0,0.5)",
2147
+ border: "1px solid rgba(255,255,255,0.15)",
2148
+ color: "#fff",
2149
+ cursor: "pointer",
2150
+ display: "flex",
2151
+ alignItems: "center",
2152
+ justifyContent: "center",
2153
+ transition: "background 0.2s",
2154
+ padding: 0
2155
+ },
2156
+ onMouseEnter: (e) => e.currentTarget.style.background = alpha(accent, 0.8),
2157
+ onMouseLeave: (e) => e.currentTarget.style.background = "rgba(0,0,0,0.5)"
2158
+ },
2159
+ /* @__PURE__ */ React25.createElement(
2160
+ "svg",
2161
+ {
2162
+ width: "14",
2163
+ height: "14",
2164
+ viewBox: "0 0 24 24",
2165
+ fill: "none",
2166
+ stroke: "currentColor",
2167
+ strokeWidth: "2.5",
2168
+ strokeLinecap: "round"
2169
+ },
2170
+ /* @__PURE__ */ React25.createElement("polyline", { points: "9 18 15 12 9 6" })
2171
+ )
2172
+ )), showCaption && /* @__PURE__ */ React25.createElement("div", { style: { padding: "14px 16px 4px" } }, /* @__PURE__ */ React25.createElement(
2173
+ "p",
2174
+ {
2175
+ style: {
2176
+ fontSize: "14px",
2177
+ fontWeight: "700",
2178
+ color: "#fff",
2179
+ margin: 0,
2180
+ lineHeight: 1.4,
2181
+ animation: "sliderFade 0.3s ease"
2182
+ },
2183
+ key: current + "-title"
2184
+ },
2185
+ img.title
2186
+ )), showDots && /* @__PURE__ */ React25.createElement("div", { style: {
2187
+ display: "flex",
2188
+ justifyContent: "center",
2189
+ gap: "6px",
2190
+ padding: "12px 16px 16px"
2191
+ } }, images.map((_, i) => /* @__PURE__ */ React25.createElement(
2192
+ "button",
2193
+ {
2194
+ key: i,
2195
+ onClick: () => goTo(i),
2196
+ style: {
2197
+ width: i === current ? "20px" : "6px",
2198
+ height: "6px",
2199
+ borderRadius: "3px",
2200
+ border: "none",
2201
+ cursor: "pointer",
2202
+ padding: 0,
2203
+ background: i === current ? accent : "rgba(255,255,255,0.2)",
2204
+ transition: "all 0.25s ease"
2205
+ }
2206
+ }
2207
+ ))));
2208
+ };
1891
2209
  export {
1892
2210
  Avatar,
1893
2211
  AvatarCard,
@@ -1897,6 +2215,8 @@ export {
1897
2215
  DividerLine,
1898
2216
  FileUpload,
1899
2217
  Footer,
2218
+ ImageCard,
2219
+ ImageSlider,
1900
2220
  Loader,
1901
2221
  LoadingSpinner,
1902
2222
  Navbar,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "virtual-ui-lib",
3
- "version": "1.0.63",
3
+ "version": "1.0.65",
4
4
  "description": "Virtual UI React Component Library",
5
5
  "author": "Ankush",
6
6
  "license": "ISC",