@geekapps/silo-elements-nextjs 0.2.27 → 0.2.28

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 (6) hide show
  1. package/dist/VideoPlayer.js +164 -99
  2. package/dist/VideoPlayer.js.map +1 -1
  3. package/dist/index.js +164 -99
  4. package/dist/index.js.map +1 -1
  5. package/dist/styles.css +1 -1
  6. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -3,7 +3,7 @@ import { useMultipartUpload, useBatchUpload, useSignedUrl, useFileStatus } from
3
3
  export { SiloProvider, useBatchUpload, useFileStatus, useMultipartUpload, useSignedUrl, useSiloClient } from '@geekapps/silo-nextjs';
4
4
  import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
5
5
  import gsap from 'gsap';
6
- import { Play, Settings, Captions, Volume2, Pause, VolumeX, Minimize, Maximize } from 'lucide-react';
6
+ import { Play, Pause, VolumeX, Volume2, Captions, Settings, Minimize, Maximize } from 'lucide-react';
7
7
 
8
8
  // src/ImageUploader.tsx
9
9
 
@@ -1942,7 +1942,7 @@ function Video({
1942
1942
  {
1943
1943
  ref: chromeRef,
1944
1944
  onClick: togglePlay,
1945
- className: `absolute inset-0 z-30 flex flex-col justify-between transition-opacity duration-200 ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
1945
+ className: `absolute inset-0 z-30 flex flex-col transition-opacity duration-200 ${isFullscreen ? "justify-between" : "justify-end"} ${controlsVisible ? "opacity-100" : "opacity-0 pointer-events-none"}`,
1946
1946
  children: [
1947
1947
  isFullscreen && /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 top-0 h-32 bg-linear-to-b from-black/70 to-transparent" }),
1948
1948
  /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute inset-x-0 bottom-0 h-40 bg-linear-to-t from-black/80 to-transparent" }),
@@ -1953,20 +1953,52 @@ function Video({
1953
1953
  /* @__PURE__ */ jsxs("footer", { onClick: (e) => e.stopPropagation(), className: "relative z-10 px-4 pb-4 text-white", children: [
1954
1954
  settingsOpen && /* @__PURE__ */ jsxs(Fragment, { children: [
1955
1955
  /* @__PURE__ */ jsx("div", { className: "fixed inset-0 z-40", onClick: () => setSettingsOpen(false) }),
1956
- /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 z-50 mb-3 flex flex-col gap-2.5", style: { animation: "spFadeIn 0.15s ease" }, children: [
1957
- /* @__PURE__ */ jsxs("div", { className: "w-52 overflow-hidden rounded-2xl bg-[#1a1a1a]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/8", children: [
1958
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
1959
- /* @__PURE__ */ jsx(Settings, { className: "size-4 text-white/60" }),
1960
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Video Quality" })
1961
- ] }),
1956
+ /* @__PURE__ */ jsxs("div", { className: "absolute bottom-full right-0 z-50 mb-2 w-56 overflow-hidden rounded-2xl bg-[#1c1c1e]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/10", style: { animation: "spFadeIn 0.15s ease" }, children: [
1957
+ settingsTab === "root" && /* @__PURE__ */ jsx("div", { children: [
1958
+ { id: "quality", label: "Qualidade", value: qualities.find((q) => q.id === selectedQuality)?.label ?? "Auto" },
1959
+ ...parsed.subtitles.length > 0 ? [{ id: "subtitles", label: "Legendas", value: subtitleStyle.track === "off" ? "Desligado" : parsed.subtitles.find((s) => s.srclang === subtitleStyle.track)?.label ?? subtitleStyle.track }] : [],
1960
+ ...audioTracks.length > 1 ? [{ id: "audio", label: "\xC1udio", value: audioTracks.find((t) => t.id === selectedAudio)?.label ?? "" }] : [],
1961
+ { id: "playback", label: "Velocidade", value: playbackRate === 1 ? "Normal" : `${playbackRate}\xD7` }
1962
+ ].map((item) => /* @__PURE__ */ jsxs(
1963
+ "button",
1964
+ {
1965
+ type: "button",
1966
+ onClick: () => setSettingsTab(item.id),
1967
+ className: "flex w-full items-center justify-between gap-3 px-4 py-3 text-sm transition hover:bg-white/8 first:pt-3.5 last:pb-3.5",
1968
+ children: [
1969
+ /* @__PURE__ */ jsx("span", { className: "text-white/80", children: item.label }),
1970
+ /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5 text-xs text-white/40", children: [
1971
+ item.value,
1972
+ /* @__PURE__ */ jsx("svg", { className: "size-3 opacity-50", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M4.5 3l3 3-3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) })
1973
+ ] })
1974
+ ]
1975
+ },
1976
+ item.id
1977
+ )) }),
1978
+ settingsTab === "quality" && /* @__PURE__ */ jsxs("div", { children: [
1979
+ /* @__PURE__ */ jsxs(
1980
+ "button",
1981
+ {
1982
+ type: "button",
1983
+ onClick: () => setSettingsTab("root"),
1984
+ className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
1985
+ children: [
1986
+ /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
1987
+ "Qualidade"
1988
+ ]
1989
+ }
1990
+ ),
1962
1991
  /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [...qualities].reverse().map((quality) => /* @__PURE__ */ jsxs(
1963
1992
  "button",
1964
1993
  {
1965
1994
  type: "button",
1966
- onClick: () => changeQuality(quality.id),
1967
- className: "flex w-full items-center gap-3 px-4 py-2 text-sm transition hover:bg-white/8",
1995
+ onClick: () => {
1996
+ changeQuality(quality.id);
1997
+ setSettingsTab("root");
1998
+ },
1999
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
1968
2000
  children: [
1969
- /* @__PURE__ */ jsx("span", { className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
2001
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${selectedQuality === quality.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
1970
2002
  /* @__PURE__ */ jsxs("span", { className: selectedQuality === quality.id ? "font-semibold text-white" : "text-white/55", children: [
1971
2003
  quality.label,
1972
2004
  quality.id === "auto" ? " (ABR)" : ""
@@ -1976,73 +2008,98 @@ function Video({
1976
2008
  quality.id
1977
2009
  )) })
1978
2010
  ] }),
1979
- (parsed.subtitles.length > 0 || audioTracks.length > 1) && /* @__PURE__ */ jsx("div", { className: `overflow-hidden rounded-2xl bg-[#1a1a1a]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/8 ${parsed.subtitles.length > 0 && audioTracks.length > 1 ? "w-80" : "w-52"}`, children: /* @__PURE__ */ jsxs("div", { className: `grid ${parsed.subtitles.length > 0 && audioTracks.length > 1 ? "grid-cols-2 divide-x divide-white/8" : "grid-cols-1"}`, children: [
1980
- parsed.subtitles.length > 0 && /* @__PURE__ */ jsxs("div", { children: [
1981
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
1982
- /* @__PURE__ */ jsx(Captions, { className: "size-4 text-white/60" }),
1983
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Subtitles" })
1984
- ] }),
1985
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [{ srclang: "off", label: "Off" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsxs(
1986
- "button",
1987
- {
1988
- type: "button",
1989
- onClick: () => {
1990
- const next = s.srclang === "off" ? "off" : s.srclang;
1991
- setSubtitleMode(next);
1992
- setSubtitleStyle((st) => ({ ...st, track: next }));
1993
- },
1994
- className: "flex w-full items-center gap-3 px-4 py-2 text-sm transition hover:bg-white/8",
1995
- children: [
1996
- /* @__PURE__ */ jsx("span", { className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
1997
- /* @__PURE__ */ jsx("span", { className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55", children: s.label })
1998
- ]
2011
+ settingsTab === "subtitles" && /* @__PURE__ */ jsxs("div", { children: [
2012
+ /* @__PURE__ */ jsxs(
2013
+ "button",
2014
+ {
2015
+ type: "button",
2016
+ onClick: () => setSettingsTab("root"),
2017
+ className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
2018
+ children: [
2019
+ /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2020
+ "Legendas"
2021
+ ]
2022
+ }
2023
+ ),
2024
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: [{ srclang: "off", label: "Desligado" }, ...parsed.subtitles].map((s) => /* @__PURE__ */ jsxs(
2025
+ "button",
2026
+ {
2027
+ type: "button",
2028
+ onClick: () => {
2029
+ const next = s.srclang === "off" ? "off" : s.srclang;
2030
+ setSubtitleMode(next);
2031
+ setSubtitleStyle((st) => ({ ...st, track: next }));
2032
+ setSettingsTab("root");
1999
2033
  },
2000
- s.srclang
2001
- )) })
2002
- ] }),
2003
- audioTracks.length > 1 && /* @__PURE__ */ jsxs("div", { children: [
2004
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
2005
- /* @__PURE__ */ jsx(Volume2, { className: "size-4 text-white/60" }),
2006
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Audio" })
2007
- ] }),
2008
- /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
2009
- "button",
2010
- {
2011
- type: "button",
2012
- onClick: () => changeAudio(track.id),
2013
- className: "flex w-full items-center gap-3 px-4 py-2 text-sm transition hover:bg-white/8",
2014
- children: [
2015
- /* @__PURE__ */ jsx("span", { className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`, children: /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) }),
2016
- /* @__PURE__ */ jsx("span", { className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55", children: track.label })
2017
- ]
2034
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2035
+ children: [
2036
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${subtitleStyle.track === s.srclang ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2037
+ /* @__PURE__ */ jsx("span", { className: subtitleStyle.track === s.srclang ? "font-semibold text-white" : "text-white/55", children: s.label })
2038
+ ]
2039
+ },
2040
+ s.srclang
2041
+ )) })
2042
+ ] }),
2043
+ settingsTab === "audio" && /* @__PURE__ */ jsxs("div", { children: [
2044
+ /* @__PURE__ */ jsxs(
2045
+ "button",
2046
+ {
2047
+ type: "button",
2048
+ onClick: () => setSettingsTab("root"),
2049
+ className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
2050
+ children: [
2051
+ /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2052
+ "\xC1udio"
2053
+ ]
2054
+ }
2055
+ ),
2056
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: audioTracks.map((track) => /* @__PURE__ */ jsxs(
2057
+ "button",
2058
+ {
2059
+ type: "button",
2060
+ onClick: () => {
2061
+ changeAudio(track.id);
2062
+ setSettingsTab("root");
2018
2063
  },
2019
- track.id
2020
- )) })
2021
- ] })
2022
- ] }) }),
2023
- /* @__PURE__ */ jsxs("div", { className: "w-64 overflow-hidden rounded-2xl bg-[#1a1a1a]/95 shadow-2xl backdrop-blur-xl ring-1 ring-white/8", children: [
2024
- /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5 px-4 py-3 border-b border-white/8", children: [
2025
- /* @__PURE__ */ jsxs("svg", { className: "size-4 text-white/60", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
2026
- /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9" }),
2027
- /* @__PURE__ */ jsx("path", { d: "M12 12l-2-4M12 12l3.5-1.5", strokeLinecap: "round" })
2028
- ] }),
2029
- /* @__PURE__ */ jsx("span", { className: "text-sm font-semibold text-white", children: "Playback Speed" })
2030
- ] }),
2031
- /* @__PURE__ */ jsxs("div", { className: "px-4 pb-4 pt-3", children: [
2032
- /* @__PURE__ */ jsx(
2033
- "input",
2034
- {
2035
- type: "range",
2036
- min: 0,
2037
- max: PLAYBACK_SPEEDS.length - 1,
2038
- step: 1,
2039
- value: PLAYBACK_SPEEDS.indexOf(playbackRate) === -1 ? PLAYBACK_SPEEDS.indexOf(1) : PLAYBACK_SPEEDS.indexOf(playbackRate),
2040
- onChange: (e) => setPlaybackRate(PLAYBACK_SPEEDS[Number(e.target.value)] ?? 1),
2041
- className: "w-full accent-white"
2042
- }
2043
- ),
2044
- /* @__PURE__ */ jsx("div", { className: "mt-1.5 flex justify-between", children: PLAYBACK_SPEEDS.map((s) => /* @__PURE__ */ jsx("span", { className: `text-[10px] font-medium ${playbackRate === s ? "text-white font-bold" : "text-white/40"}`, children: s === 1 ? "1x" : `${s}x` }, s)) })
2045
- ] })
2064
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2065
+ children: [
2066
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${selectedAudio === track.id ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2067
+ /* @__PURE__ */ jsx("span", { className: selectedAudio === track.id ? "font-semibold text-white" : "text-white/55", children: track.label })
2068
+ ]
2069
+ },
2070
+ track.id
2071
+ )) })
2072
+ ] }),
2073
+ settingsTab === "playback" && /* @__PURE__ */ jsxs("div", { children: [
2074
+ /* @__PURE__ */ jsxs(
2075
+ "button",
2076
+ {
2077
+ type: "button",
2078
+ onClick: () => setSettingsTab("root"),
2079
+ className: "flex w-full items-center gap-2 border-b border-white/8 px-4 py-3 text-xs font-semibold text-white/50 transition hover:text-white",
2080
+ children: [
2081
+ /* @__PURE__ */ jsx("svg", { className: "size-3.5", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M7.5 3L4.5 6l3 3", stroke: "currentColor", strokeWidth: "1.5", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2082
+ "Velocidade"
2083
+ ]
2084
+ }
2085
+ ),
2086
+ /* @__PURE__ */ jsx("div", { className: "py-1.5", children: PLAYBACK_SPEEDS.map((speed) => /* @__PURE__ */ jsxs(
2087
+ "button",
2088
+ {
2089
+ type: "button",
2090
+ onClick: () => {
2091
+ setPlaybackRate(speed);
2092
+ setSettingsOpen(false);
2093
+ setSettingsTab("root");
2094
+ },
2095
+ className: "flex w-full items-center gap-3 px-4 py-2.5 text-sm transition hover:bg-white/8",
2096
+ children: [
2097
+ /* @__PURE__ */ jsx("svg", { className: `size-4 shrink-0 ${playbackRate === speed ? "text-white" : "text-transparent"}`, viewBox: "0 0 16 16", fill: "none", children: /* @__PURE__ */ jsx("path", { d: "M3 8l3.5 3.5L13 4.5", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }),
2098
+ /* @__PURE__ */ jsx("span", { className: playbackRate === speed ? "font-semibold text-white" : "text-white/55", children: speed === 1 ? "Normal" : `${speed}\xD7` })
2099
+ ]
2100
+ },
2101
+ speed
2102
+ )) })
2046
2103
  ] })
2047
2104
  ] }),
2048
2105
  /* @__PURE__ */ jsx("style", { children: `@keyframes spFadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}` })
@@ -2056,30 +2113,38 @@ function Video({
2056
2113
  onPointerDown: handleProgressPointerDown,
2057
2114
  className: "group relative mb-2 h-5 cursor-pointer",
2058
2115
  children: [
2059
- preview && /* @__PURE__ */ jsxs(
2060
- "div",
2061
- {
2062
- className: "pointer-events-none absolute bottom-8 z-50 -translate-x-1/2 rounded-lg bg-black/80 p-1 shadow-2xl ring-1 ring-white/15 backdrop-blur",
2063
- style: { left: preview.left },
2064
- children: [
2065
- /* @__PURE__ */ jsx(
2066
- "div",
2067
- {
2068
- className: "overflow-hidden rounded-md bg-neutral-900",
2069
- style: {
2070
- width: preview.cue.w ?? 160,
2071
- height: preview.cue.h ?? 90,
2072
- backgroundImage: `url(${preview.cue.image})`,
2073
- backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x}px -${preview.cue.y}px` : "center",
2074
- backgroundSize: preview.cue.x != null ? "auto" : "cover",
2075
- backgroundRepeat: "no-repeat"
2116
+ preview && (() => {
2117
+ const srcW = preview.cue.w ?? 160;
2118
+ const srcH = preview.cue.h ?? 90;
2119
+ const aspect = srcW / srcH;
2120
+ const thumbH = Math.max(120, Math.min(playerHeight * 0.25, 300));
2121
+ const thumbW = Math.round(thumbH * aspect);
2122
+ const scale = thumbH / srcH;
2123
+ return /* @__PURE__ */ jsxs(
2124
+ "div",
2125
+ {
2126
+ className: "pointer-events-none absolute bottom-10 z-60 -translate-x-1/2 rounded-xl bg-black/80 p-1.5 shadow-2xl ring-1 ring-white/15 backdrop-blur",
2127
+ style: { left: preview.left },
2128
+ children: [
2129
+ /* @__PURE__ */ jsx(
2130
+ "div",
2131
+ {
2132
+ className: "overflow-hidden rounded-lg bg-neutral-900",
2133
+ style: {
2134
+ width: thumbW,
2135
+ height: thumbH,
2136
+ backgroundImage: `url(${preview.cue.image})`,
2137
+ backgroundPosition: preview.cue.x != null && preview.cue.y != null ? `-${preview.cue.x * scale}px -${preview.cue.y * scale}px` : "center",
2138
+ backgroundSize: preview.cue.x != null ? `auto ${thumbH}px` : "cover",
2139
+ backgroundRepeat: "no-repeat"
2140
+ }
2076
2141
  }
2077
- }
2078
- ),
2079
- /* @__PURE__ */ jsx("div", { className: "pt-1 text-center text-[11px] font-semibold text-white/80", children: formatTime(preview.time) })
2080
- ]
2081
- }
2082
- ),
2142
+ ),
2143
+ /* @__PURE__ */ jsx("div", { className: "pt-1.5 text-center text-xs font-semibold text-white/80", children: formatTime(preview.time) })
2144
+ ]
2145
+ }
2146
+ );
2147
+ })(),
2083
2148
  /* @__PURE__ */ jsxs("div", { className: "absolute left-0 right-0 top-1/2 -translate-y-1/2 overflow-hidden rounded-full bg-white/22 transition-[height] duration-150 group-hover:h-1", style: { height: "2px" }, children: [
2084
2149
  /* @__PURE__ */ jsx(
2085
2150
  "div",