meticulous-ui 3.4.0 → 3.4.2

package/components/components/Toast/styles.js

@@ -1,289 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,9 +0,0 @@
-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

@@ -1,11 +0,0 @@
-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

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

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

@@ -1,9 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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

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

@@ -1,39 +0,0 @@
-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

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

package/components/components/VideoPlayer/styles.js

@@ -1,42 +0,0 @@
-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

@@ -1,75 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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 };
-};