meticulous-ui 3.3.0 → 3.4.0

package/components/components/Toast/styles.js

@@ -0,0 +1,289 @@
+import styled, { keyframes } from 'styled-components';
+
+import white from '../../colors/white';
+
+// Icons
+import Close from '../Icons/Close';
+import grey from '../../colors/grey';
+
+const outerRingGrow = keyframes`
+  from { transform: scale(0); }
+  to   { transform: scale(1); }
+`;
+
+const innerRingGrow = keyframes`
+  from { transform: translate(-50%, -50%) scale(0); }
+  to   { transform: translate(-50%, -50%) scale(1); }
+`;
+
+const slideIn = keyframes`
+  from {
+    opacity: 0;
+    transform: translateX(100%); /* Start off-screen to the right */
+  }
+  to {
+    opacity: 1;
+    transform: translateX(0); /* Move to its final position */
+  }
+`;
+
+/* Define the animation for exit */
+const slideOut = keyframes`
+  from {
+    opacity: 1;
+    transform: translateX(0);
+  }
+  to {
+    opacity: 0;
+    transform: translateX(100%); /* Move off-screen to the right */
+  }
+`;
+
+export const ToastsContainer = styled.div`
+  position: fixed;
+  top: 1.6rem;
+  right: 1.6rem;
+  z-index: 9999;
+
+  display: flex;
+  flex-direction: column;
+  gap: 1.6rem;
+`;
+
+export const ToastWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  background-color: ${({ $bg }) => $bg};
+  height: 7.68rem;
+  width: 44.8rem;
+  border-radius: 1.28rem;
+  padding: 0.64rem 2.56rem;
+  box-shadow: rgba(0, 0, 0, 0.14) 0px 3px 8px;
+  transition: all 0.5s ease;
+
+  &.fade-in {
+    opacity: 1;
+    animation: ${slideIn} 0.5s ease-out forwards; /* slide down + fade */
+  }
+
+  &.fade-out {
+    opacity: 0;
+    animation: ${slideOut} 0.5s ease-in forwards; /* slide right */
+  }
+
+  @media screen and (max-width: 768px) {
+    height: 5.76rem;
+    width: 33.6rem;
+    border-radius: 0.96rem;
+    padding: 0.48rem 1.28rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    height: 5.2rem;
+    width: 30rem;
+    border-radius: 0.88rem;
+    padding: 0.44rem 1.12rem;
+  }
+
+  @media screen and (max-width: 380px) {
+    height: 4.8rem;
+    width: 27rem;
+    border-radius: 0.8rem;
+    padding: 0.4rem 1rem;
+  }
+`;
+
+export const LogoContainer = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background-color: ${white};
+  width: 2.88rem;
+  height: 2.88rem;
+  border-radius: 50%;
+
+  @media screen and (max-width: 768px) {
+    width: 2.16rem;
+    height: 2.16rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    width: 1.92rem;
+    height: 1.92rem;
+  }
+
+  @media screen and (max-width: 380px) {
+    width: 1.76rem;
+    height: 1.76rem;
+  }
+`;
+
+export const Outer = styled.div`
+  position: relative;
+  width: 6.4rem;
+  height: 6.4rem;
+  border-radius: 50%;
+  background-color: ${({ $side }) => $side};
+  animation: ${outerRingGrow} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both;
+
+  @media screen and (max-width: 768px) {
+    width: 4.8rem;
+    height: 4.8rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    width: 4.3rem;
+    height: 4.3rem;
+  }
+
+  @media screen and (max-width: 380px) {
+    width: 3.9rem;
+    height: 3.9rem;
+  }
+`;
+
+export const Icon = styled.div`
+  position: absolute;
+  top: ${({ $isWarning }) => ($isWarning ? '49%' : '50%')};
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: ${({ size }) => size}rem;
+  height: ${({ size }) => size}rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  @media screen and (max-width: 768px) {
+    top: 42.8%;
+    left: 42.8%;
+    transform: translate(
+      ${({ $isWarning }) => ($isWarning ? '-45.8%' : '-42.8%')},
+      ${({ $isWarning }) => ($isWarning ? '-50.8%' : '-42.8%')}
+    );
+    scale: 0.75;
+  }
+`;
+
+export const OuterChild = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: 4.8rem;
+  height: 4.8rem;
+  border-radius: 50%;
+  background-color: ${({ $main }) => $main};
+  animation: ${innerRingGrow} 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.65s both;
+
+  @media screen and (max-width: 768px) {
+    width: 3.6rem;
+    height: 3.6rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    width: 3.2rem;
+    height: 3.2rem;
+  }
+
+  @media screen and (max-width: 380px) {
+    width: 2.9rem;
+    height: 2.9rem;
+  }
+`;
+
+const RING_CIRCUMFERENCE = 75.4; // 2 * π * 12
+
+const timerProgress = keyframes`
+  from { stroke-dashoffset: ${RING_CIRCUMFERENCE}; }
+  to   { stroke-dashoffset: 0; }
+`;
+
+export const CloseButtonContainer = styled.div`
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 2.8rem;
+  height: 2.8rem;
+`;
+
+export const ProgressRing = styled.svg`
+  position: absolute;
+  inset: 0;
+  transform: rotate(-90deg);
+  pointer-events: none;
+
+  circle {
+    fill: none;
+    stroke: ${({ $color }) => $color};
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-dasharray: ${RING_CIRCUMFERENCE};
+  }
+
+  circle:first-child {
+    opacity: 0.15;
+    stroke-dashoffset: 0;
+  }
+
+  circle:last-child {
+    stroke-dashoffset: ${RING_CIRCUMFERENCE};
+    animation: ${timerProgress} ${({ $duration }) => $duration - 0.5}s linear forwards;
+    animation-play-state: ${({ $paused }) => ($paused ? 'paused' : 'running')};
+  }
+`;
+
+export const CloseWrapper = styled(Close)`
+  cursor: pointer;
+`;
+
+export const Title = styled.div`
+  font-weight: 600;
+  font-size: 1.92rem;
+  color: ${grey.m800};
+
+  @media screen and (max-width: 480px) {
+    font-size: 1.72rem;
+  }
+
+  @media screen and (max-width: 380px) {
+    font-size: 1.56rem;
+  }
+`;
+
+export const Message = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 0.32rem;
+  width: 33.6rem;
+
+  @media screen and (max-width: 768px) {
+    width: 24rem;
+  }
+
+  @media screen and (max-width: 480px) {
+    width: 21rem;
+  }
+
+  @media screen and (max-width: 380px) {
+    max-width: 18rem;
+    width: auto;
+  }
+`;
+
+export const Subtitle = styled.div`
+  font-weight: 400;
+  font-size: 1.6rem;
+  color: ${grey.m700};
+
+  @media screen and (max-width: 480px) {
+    font-size: 1.44rem;
+  }
+
+  @media screen and (max-width: 380px) {
+    font-size: 1.32rem;
+  }
+`;

package/components/components/Typography/Headings/H1.jsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const H1Wrapper = styled.h1`
+  color: ${({ $color }) => $color};
+  font-size: 5.76rem;
+`;
+
+const H1 = ({ color, children, ...rest }) => {
+  return (
+    <H1Wrapper $color={color} {...rest}>
+      {children}
+    </H1Wrapper>
+  );
+};
+
+export default H1;

package/components/components/Typography/Headings/H2.jsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const H2Wrapper = styled.h2`
+  color: ${({ $color }) => $color};
+  font-size: 4.8rem;
+`;
+
+const H2 = ({ color, children, ...rest }) => {
+  return (
+    <H2Wrapper $color={color} {...rest}>
+      {children}
+    </H2Wrapper>
+  );
+};
+
+export default H2;

package/components/components/Typography/Headings/H3.jsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const H3Wrapper = styled.h3`
+  color: ${({ $color }) => $color};
+  font-size: 3.84rem;
+`;
+
+const H3 = ({ color, children, ...rest }) => {
+  return (
+    <H3Wrapper $color={color} {...rest}>
+      {children}
+    </H3Wrapper>
+  );
+};
+
+export default H3;

package/components/components/Typography/Headings/H4.jsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const H4Wrapper = styled.h4`
+  color: ${({ $color }) => $color};
+  font-size: 2.88rem;
+`;
+
+const H4 = ({ color, children, ...rest }) => {
+  return (
+    <H4Wrapper $color={color} {...rest}>
+      {children}
+    </H4Wrapper>
+  );
+};
+
+export default H4;

package/components/components/Typography/Headings/H5.jsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const H5Wrapper = styled.h5`
+  color: ${({ $color }) => $color};
+  font-size: 2.24rem;
+`;
+
+const H5 = ({ color, children, ...rest }) => {
+  return (
+    <H5Wrapper $color={color} {...rest}>
+      {children}
+    </H5Wrapper>
+  );
+};
+
+export default H5;

package/components/components/Typography/Headings/H6.jsx

@@ -0,0 +1,16 @@
+import styled from 'styled-components';
+
+const H6Wrapper = styled.h6`
+  color: ${({ $color }) => $color};
+  font-size: 1.92rem;
+`;
+
+const H6 = ({ color, children, ...rest }) => {
+  return (
+    <H6Wrapper $color={color} {...rest}>
+      {children}
+    </H6Wrapper>
+  );
+};
+
+export default H6;

package/components/components/Typography/Headings/index.js

@@ -0,0 +1,9 @@
+import H1 from './H1';
+import H2 from './H2';
+import H3 from './H3';
+import H4 from './H4';
+import H5 from './H5';
+import H6 from './H6';
+
+export { H1, H2, H3, H4, H5, H6 };
+export default { H1, H2, H3, H4, H5, H6 };

package/components/components/Typography/P/P.jsx

@@ -0,0 +1,11 @@
+import { PWrapper } from './styles';
+
+const P = ({ color, size, children, ...rest }) => {
+  return (
+    <PWrapper $color={color} $size={size} {...rest}>
+      {children}
+    </PWrapper>
+  );
+};
+
+export default P;

package/components/components/Typography/P/index.js

@@ -0,0 +1,3 @@
+import P from './P';
+
+export default P;

package/components/components/Typography/P/styles.js

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import black from '../../../colors/black';
+
+export const PWrapper = styled.p`
+  font-size: ${({ $size }) => $size || '1.92rem'};
+  color: ${({ $color }) => $color || black};
+  margin: 0;
+  height: auto;
+`;

package/components/components/VideoPlayer/VideoPlayer.jsx

@@ -0,0 +1,46 @@
+import { useRef, useState } from 'react';
+import { VideoContainer, Video, ShimmerOverlay } from './styles';
+import { useSpacebarToggle } from './useSpacebarToggle';
+import VolumeBar from './components/Volumebar/Volumebar';
+import { useVolumeOverlay } from './useVolumeOverlay';
+import Shimmer from '../Shimmer';
+
+const VideoPlayer = ({
+  link,
+  thumbnail,
+  width = '600',
+  borderRadius = 8,
+  height = 'auto',
+  hasShimmer = true,
+  ...rest
+}) => {
+  const videoRef = useRef(null);
+  const containerRef = useRef(null);
+  const { volume, showVolume } = useVolumeOverlay();
+  const [loaded, setLoaded] = useState(false);
+
+  useSpacebarToggle(videoRef, containerRef, showVolume);
+
+  return (
+    <VideoContainer ref={containerRef} $width={width} $height={height} {...rest}>
+      {hasShimmer && (
+        <ShimmerOverlay $loaded={loaded} $borderRadius={borderRadius}>
+          <Shimmer borderRadius={`${borderRadius}px`} />
+        </ShimmerOverlay>
+      )}
+      <Video
+        $borderRadius={borderRadius}
+        ref={videoRef}
+        src={link}
+        poster={thumbnail}
+        controls
+        onLoadedData={() => setLoaded(true)}
+      >
+        Your browser does not support the video tag.
+      </Video>
+      <VolumeBar volume={volume} />
+    </VideoContainer>
+  );
+};
+
+export default VideoPlayer;

package/components/components/VideoPlayer/components/Volumebar/Volumebar.jsx

@@ -0,0 +1,17 @@
+import { Wrapper, Track, Fill, Label } from './styles';
+
+const VolumeBar = ({ volume }) => {
+  if (volume === null) return null;
+  const pct = Math.round(volume);
+
+  return (
+    <Wrapper aria-hidden='true'>
+      <Track>
+        <Fill $pct={pct} />
+      </Track>
+      <Label>{pct}</Label>
+    </Wrapper>
+  );
+};
+
+export default VolumeBar;

package/components/components/VideoPlayer/components/Volumebar/index.js

@@ -0,0 +1,3 @@
+import Volumebar from './Volumebar';
+
+export default Volumebar;

package/components/components/VideoPlayer/components/Volumebar/styles.js

@@ -0,0 +1,39 @@
+import styled from 'styled-components';
+
+export const Wrapper = styled.div`
+  position: absolute;
+  right: 1.28rem;
+  top: 2.56rem;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 0.96rem;
+  pointer-events: none;
+  user-select: none;
+`;
+
+export const Track = styled.div`
+  width: 0.64rem;
+  height: 12.8rem;
+  background: rgba(255, 255, 255, 0.25);
+  border-radius: 0.32rem;
+  overflow: hidden;
+  display: flex;
+  align-items: flex-end;
+`;
+
+export const Fill = styled.div`
+  width: 100%;
+  height: ${({ $pct }) => $pct}%;
+  background: #fff;
+  border-radius: 0.32rem;
+  transition: height 0.1s ease;
+`;
+
+export const Label = styled.span`
+  font-size: 1.76rem;
+  color: rgba(255, 255, 255, 0.85);
+  font-weight: 500;
+  width: 5.6rem;
+  text-align: center;
+`;

package/components/components/VideoPlayer/index.js

@@ -0,0 +1,3 @@
+import VideoPlayer from './VideoPlayer';
+
+export default VideoPlayer;

package/components/components/VideoPlayer/styles.js

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+import black from '../../colors/black';
+
+export const ShimmerOverlay = styled.div`
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+  border-radius: ${({ $borderRadius }) => $borderRadius}px;
+  opacity: ${({ $loaded }) => ($loaded ? 0 : 1)};
+  transition: opacity 0.35s ease-out;
+  pointer-events: none;
+`;
+
+export const VideoContainer = styled.div`
+  position: relative;
+  display: inline-block;
+  width: ${({ $width }) => $width}px;
+  height: ${({ $height }) => $height}px;
+
+  &:fullscreen video {
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+    background: ${black.m900};
+  }
+`;
+
+export const Video = styled.video`
+  border-radius: ${({ $borderRadius }) => $borderRadius}px;
+  width: 100%;
+  height: 100%;
+  max-width: ${({ width }) => width}px;
+  aspect-ratio: 16 / 9;
+  background-color: #000;
+  object-fit: contain;
+
+  &:fullscreen {
+    width: 100vw;
+    height: 100vh;
+    object-fit: contain;
+  }
+`;

package/components/components/VideoPlayer/useSpacebarToggle.js

@@ -0,0 +1,75 @@
+import { useEffect } from 'react';
+
+export const useSpacebarToggle = (videoRef, containerRef, showVolume) => {
+  useEffect(() => {
+    const onKeyDown = (e) => {
+      // Use code instead of key for layout safety
+      if (
+        ![
+          'Space',
+          'KeyF',
+          'Escape',
+          'ArrowUp',
+          'ArrowDown',
+          'ArrowLeft',
+          'ArrowRight',
+          'KeyM',
+        ].includes(e.code)
+      )
+        return;
+
+      const target = e.target;
+
+      // Don't hijack typing or editable content
+      if (
+        target &&
+        (target.tagName === 'INPUT' || target.tagName === 'TEXTAREA' || target.isContentEditable)
+      ) {
+        return;
+      }
+
+      const video = videoRef.current;
+      if (!video) return;
+
+      if (e.code === 'Space') {
+        e.preventDefault();
+        if (video.paused) {
+          const playPromise = video.play();
+          if (playPromise && playPromise.catch) {
+            playPromise.catch(() => {});
+          }
+        } else {
+          video.pause();
+        }
+      } else if (e.code === 'KeyF') {
+        e.preventDefault();
+        if (!document.fullscreenElement) {
+          containerRef.current?.requestFullscreen();
+        } else {
+          document.exitFullscreen();
+        }
+      } else if (e.code === 'ArrowUp') {
+        e.preventDefault();
+        video.volume = Math.min(1, video.volume + 0.05);
+        showVolume?.(video.volume);
+      } else if (e.code === 'ArrowDown') {
+        e.preventDefault();
+        video.volume = Math.max(0, video.volume - 0.05);
+        showVolume?.(video.volume);
+      } else if (e.code === 'KeyM') {
+        video.muted = !video.muted;
+        showVolume?.(video.muted ? 0 : video.volume);
+      } else if (e.code === 'ArrowLeft') {
+        if (isNaN(video.duration)) return;
+        video.currentTime = Math.max(0, video.currentTime - 5);
+      } else if (e.code === 'ArrowRight') {
+        if (isNaN(video.duration)) return;
+        video.currentTime = Math.min(video.duration, video.currentTime + 5);
+      }
+    };
+
+    window.addEventListener('keydown', onKeyDown, true);
+
+    return () => window.removeEventListener('keydown', onKeyDown, true);
+  }, [videoRef, containerRef, showVolume]);
+};

package/components/components/VideoPlayer/useVolumeOverlay.js

@@ -0,0 +1,14 @@
+import { useState, useRef, useCallback } from 'react';
+
+export const useVolumeOverlay = () => {
+  const [volume, setVolume] = useState(null);
+  const timerRef = useRef(null);
+
+  const showVolume = useCallback((vol) => {
+    setVolume(Math.round(vol * 100));
+    clearTimeout(timerRef.current);
+    timerRef.current = setTimeout(() => setVolume(null), 1500);
+  }, []);
+
+  return { volume, showVolume };
+};