meticulous-ui 3.3.0 → 3.4.0

package/components/components/Selectbox/styles.js

@@ -0,0 +1,172 @@
+import styled, { css, keyframes } from 'styled-components';
+import grey from '../../colors/grey';
+import P from '../Typography/P';
+import ChevronDown from '../Icons/ChevronDown';
+import Search from '../Icons/Search';
+import white from '../../colors/white';
+
+const DEFAULT_BORDER = grey.m500;
+
+const rotate = keyframes`
+  from { transform: rotate(0deg); }
+  to { transform: rotate(180deg); }
+`;
+
+const reverse = keyframes`
+  from { transform: rotate(180deg); }
+  to { transform: rotate(0deg); }
+`;
+
+export const SelectBoxWrapper = styled.div`
+  max-width: ${({ $width }) => $width};
+  position: relative;
+  outline: none;
+
+  ${({ $isDisabled }) =>
+    $isDisabled &&
+    css`
+      pointer-events: none;
+      opacity: 0.7;
+    `}
+
+  ${({ $isLoading }) =>
+    $isLoading &&
+    css`
+      pointer-events: none;
+      opacity: 0.7;
+    `}
+`;
+
+export const Box = styled.div`
+  height: 3.2rem;
+  width: ${({ $width }) => $width};
+  border-radius: 0.96rem;
+  outline: none;
+  border: ${({ $isOpen, $isFocused, $border }) =>
+    $isOpen || $isFocused ? `2px solid ${$border}` : `1px solid ${DEFAULT_BORDER}`};
+  padding: 0.64rem 0.96rem 0.64rem;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  cursor: pointer;
+`;
+
+export const PWrapper = styled(P)`
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  max-width: calc(${({ $width }) => $width} - 3.2rem);
+  pointer-events: none;
+`;
+
+export const ChevronDownWrapper = styled(ChevronDown)`
+  animation: ${({ $isOpen }) => ($isOpen ? rotate : reverse)} 0.15s linear;
+  transform: rotate(${({ $isOpen }) => ($isOpen ? 180 : 0)}deg);
+`;
+
+export const OptionWrapper = styled.div`
+  border: 1px solid ${grey.m700};
+  width: calc(${({ $width }) => $width} + 1.6rem);
+  display: flex;
+  flex-direction: column;
+  position: absolute;
+  z-index: 1000;
+  background-color: ${white};
+  left: 0.24rem;
+  max-height: 0;
+  transition: max-height 0.15s ease-out;
+  opacity: 0;
+  overflow: hidden;
+
+  ${({ $isOpen }) =>
+    $isOpen &&
+    css`
+      max-height: ${({ $height }) => $height};
+      opacity: 1;
+    `};
+
+  ${({ $top }) =>
+    $top
+      ? css`
+          bottom: 100%;
+          flex-direction: column-reverse;
+          border-top-right-radius: 0.96rem;
+          border-top-left-radius: 0.96rem;
+          margin-bottom: 0.16rem;
+        `
+      : css`
+          top: 100%;
+          border-bottom-right-radius: 0.96rem;
+          border-bottom-left-radius: 0.96rem;
+          margin-top: 0.16rem;
+        `}
+`;
+
+export const OptionsList = styled.div`
+  overflow-y: auto;
+  flex: 1;
+`;
+
+export const CheckboxItem = styled.div`
+  width: ${({ $width }) => $width};
+  box-sizing: border-box;
+  background-color: ${({ $isHighlighted, $hoverColor }) =>
+    $isHighlighted ? $hoverColor : 'transparent'};
+  cursor: ${({ $isDisabled }) => ($isDisabled ? 'not-allowed' : 'pointer')};
+  padding: 0.96rem 1.6rem 1.28rem;
+  margin-top: 0.16rem;
+  display: flex;
+  align-items: center;
+  gap: 0.96rem;
+  pointer-events: ${({ $isDisabled }) => ($isDisabled ? 'none' : 'auto')};
+
+  &:active {
+    background-color: ${({ $activeColor }) => $activeColor};
+  }
+`;
+
+export const SearchContainer = styled.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid ${grey.m300};
+  background: ${white};
+
+  &:focus-within {
+    border-bottom-color: ${grey.m500};
+  }
+`;
+
+export const SearchInput = styled.input`
+  width: 100%;
+  box-sizing: border-box;
+  border: none;
+  padding: 0.8rem 1.2rem 0.8rem 0;
+  font-size: 1.92rem;
+  color: ${grey.m700};
+  background: transparent;
+  outline: none;
+
+  &::placeholder {
+    color: ${grey.m400};
+  }
+`;
+
+export const SearchIcon = styled(Search)`
+  margin: 0 1.28rem;
+`;
+
+export const SpinnerWrapper = styled.div`
+  position: absolute;
+  top: 1.28rem;
+  right: 1.92rem;
+`;
+
+export const LoadMoreSentinel = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 1.6rem 0;
+  min-height: 1.6rem;
+  width: 100%;
+`;

package/components/components/Shimmer/Shimmer.jsx

@@ -0,0 +1,27 @@
+import { ShimmerWrapper } from './styles';
+
+const toRem = (val) => {
+  if (val === undefined || val === null) return undefined;
+  return typeof val === 'number' ? `${val}rem` : val;
+};
+
+const Shimmer = ({
+  width = '100%',
+  height = '100%',
+  borderRadius = '0.64rem',
+  label = 'Loading...',
+  ...rest
+}) => {
+  return (
+    <ShimmerWrapper
+      role='status'
+      aria-label={label}
+      $width={toRem(width)}
+      $height={toRem(height)}
+      $borderRadius={toRem(borderRadius)}
+      {...rest}
+    />
+  );
+};
+
+export default Shimmer;

package/components/components/Shimmer/index.js

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

package/components/components/Shimmer/styles.js

@@ -0,0 +1,29 @@
+import styled, { keyframes } from 'styled-components';
+import grey from '../../colors/grey';
+
+const shimmerSweep = keyframes`
+  from { transform: translateX(-100%); }
+  to   { transform: translateX(100%); }
+`;
+
+export const ShimmerWrapper = styled.div`
+  position: relative;
+  overflow: hidden;
+  background-color: ${grey.m300};
+  border-radius: ${({ $borderRadius }) => $borderRadius};
+  width: ${({ $width }) => $width};
+  height: ${({ $height }) => $height};
+
+  &:after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      120deg,
+      rgba(245, 245, 245, 0) 30%,
+      ${grey.m100} 50%,
+      rgba(245, 245, 245, 0) 70%
+    );
+    animation: ${shimmerSweep} 1.8s infinite;
+  }
+`;

package/components/components/Spinner/Spinner.jsx

@@ -0,0 +1,40 @@
+import { SpinnerSVG, SpinnerCircle } from './styles';
+import colors from '../../colors/colorMap';
+import green from '../../colors/green';
+import white from '../../colors/white';
+import grey from '../../colors/grey';
+
+const SIZE_PARAMS = {
+  small: { strokeWidth: 6, $length: '2.4rem' },
+  medium: { strokeWidth: 5, $length: '3.6rem' },
+  large: { strokeWidth: 5, $length: '5rem' },
+};
+
+const Spinner = ({ color = 'green', size = 'medium', ...rest }) => {
+  const { strokeWidth, $length } = SIZE_PARAMS[size];
+  const colorValue = [white, grey.m600].includes(color) ? color : (colors[color] ?? green)?.m500;
+
+  return (
+    <SpinnerSVG
+      viewBox='0 0 50 50'
+      width={$length}
+      height={$length}
+      role='status'
+      aria-label='Loading'
+      aria-live='polite'
+      {...rest}
+    >
+      <SpinnerCircle
+        cx='25'
+        cy='25'
+        r='20'
+        fill='none'
+        stroke={colorValue}
+        strokeWidth={strokeWidth}
+        strokeLinecap='round'
+      />
+    </SpinnerSVG>
+  );
+};
+
+export default Spinner;

package/components/components/Spinner/index.js

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

package/components/components/Spinner/styles.js

@@ -0,0 +1,31 @@
+import styled, { keyframes } from 'styled-components';
+
+const rotate = keyframes`
+  100% {
+    transform: rotate(360deg);
+  }
+`;
+
+const dash = keyframes`
+  0% {
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -15;
+  }
+  100% {
+    stroke-dasharray: 100, 200;
+    stroke-dashoffset: -125;
+  }
+`;
+
+export const SpinnerSVG = styled.svg`
+  animation: ${rotate} 1.4s linear infinite;
+  transform-origin: center;
+`;
+
+export const SpinnerCircle = styled.circle`
+  animation: ${dash} 1.4s ease-in-out infinite;
+`;

package/components/components/Timer/Timer.jsx

@@ -0,0 +1,267 @@
+import { useEffect, useRef, useState } from 'react';
+
+import Glass from '../Glass';
+import TimerRing from './components/TimerRing/TimerRing';
+
+import white from '../../colors/white';
+
+import {
+  Wrapper,
+  Dimmer,
+  DotsWrapper,
+  Time,
+  TimeTxt,
+  Dots,
+  AllDots,
+  HourHand,
+  MinuteHand,
+  SecondHand,
+  AlarmRing,
+  RightActions,
+  VisuallyHidden,
+  Bullet,
+  BulletRing,
+  AddWrapper,
+  ActionBtn,
+  LeftActions,
+  MediaPauseFilledWrapper,
+  MediaStopFilledWrapper,
+  MediaPlayFilledWrapper,
+} from './styles';
+import { getSize } from './helpers';
+
+const noop = () => {};
+
+const getHandRotations = (timeZone) => () => {
+  const now = new Date();
+  const timeStr = now.toLocaleString('en-Us', { hour12: true, timeZone });
+  const timePart = timeStr.split(', ')[1].split(' ')[0];
+  const [h, m, s] = timePart.split(':').map(Number);
+  return {
+    second: s * 6,
+    minute: m * 6 + s * 0.1,
+    hour: (h % 12) * 30 + m * 0.5,
+  };
+};
+
+const Timer = ({
+  color = 'green',
+  showTime = true,
+  showTimeWithSec = true,
+  timeZone = 'Asia/Kolkata',
+  isDigital = true,
+  timerSeconds = 0,
+  onTimerAdd = noop,
+  onTimerComplete = noop,
+  onTimerRemove = noop,
+  onTimerPause = noop,
+  onTimerPlay = noop,
+  size = 30,
+  ...rest
+}) => {
+  const [time, setTime] = useState(new Date());
+  const [timerSec, setTimerSec] = useState(0);
+  const [isPaused, setPaused] = useState(false);
+  const [handRotations, setHandRotations] = useState(getHandRotations(timeZone));
+  const [bulletAngle, setBulletAngle] = useState(0);
+  const [isDismissing, setIsDismissing] = useState(false);
+  const isPausedRef = useRef(isPaused);
+  const $size = Math.round(size);
+  const ICON_SIZE = Math.round((14 * size) / 20); // Base icon size is 14px at size=20, so scale accordingly
+
+  useEffect(() => {
+    isPausedRef.current = isPaused;
+  }, [isPaused]);
+
+  const setTimer = () => {
+    setTimerSec(timerSeconds);
+    setBulletAngle((timerSeconds % 60) * 6);
+    setPaused(false);
+    onTimerAdd();
+  };
+
+  const removeTimer = () => {
+    setIsDismissing(true);
+    onTimerRemove();
+  };
+
+  const handleDismissEnd = () => {
+    setTimerSec(0);
+    setBulletAngle(0);
+    setIsDismissing(false);
+  };
+
+  const pauseTimer = () => {
+    setPaused(true);
+    onTimerPause();
+  };
+
+  const playTimer = () => {
+    setPaused(false);
+    onTimerPlay();
+  };
+
+  useEffect(() => {
+    const interval = setInterval(() => {
+      const now = new Date();
+      setTime(now);
+      setHandRotations((prev) => {
+        const timeStr = now.toLocaleString('en-Us', { hour12: true, timeZone });
+        const timePart = timeStr.split(', ')[1].split(' ')[0];
+        const [h, m, s] = timePart.split(':').map(Number);
+        const rawSecond = s * 6;
+        const rawMinute = m * 6 + s * 0.1;
+        const rawHour = (h % 12) * 30 + m * 0.5;
+        // Adjust for wrap: if raw value wrapped back below prev, add a full 360
+        const adjust = (prevVal, raw) => {
+          const prevMod = prevVal % 360;
+          return prevVal - prevMod + raw + (raw < prevMod ? 360 : 0);
+        };
+        return {
+          second: adjust(prev.second, rawSecond),
+          minute: adjust(prev.minute, rawMinute),
+          hour: adjust(prev.hour, rawHour),
+        };
+      });
+      if (!isPausedRef.current) {
+        setTimerSec((timerSec) => {
+          if (timerSec - 1 === 0) {
+            onTimerComplete();
+            setIsDismissing(true);
+          }
+          return timerSec - 1;
+        });
+        setBulletAngle((prev) => prev - 6);
+      }
+    }, 1000);
+
+    return () => clearInterval(interval);
+  }, []);
+
+  const date = time.toLocaleString('en-Us', { hour12: true, timeZone });
+  const currentTime = date.split(', ')[1];
+  const currentTimeWithoutAmPm = currentTime.split(' ')[0];
+  const amPm = currentTime.split(' ')[1];
+  const withoutSec = currentTime.split(':').slice(0, 2).join(':');
+  const hasNoTimer = !(Number.isInteger(timerSec) && timerSec > 0);
+
+  const timeLabel = `${showTimeWithSec ? currentTimeWithoutAmPm : withoutSec} ${amPm}`;
+
+  return (
+    <Wrapper $color={color} role='region' aria-label='Clock' {...{ $size }} {...rest}>
+      <Glass borderRadius={`${getSize(16.67)({ $size })}rem`} aria-hidden='true' />
+      {(!hasNoTimer || isDismissing) && (
+        <>
+          <AlarmRing
+            $dismissing={isDismissing}
+            onAnimationEnd={handleDismissEnd}
+            aria-hidden='true'
+          >
+            <TimerRing progress={timerSec >= 60 ? 1 : (timerSec % 60) / 60} />
+          </AlarmRing>
+          <BulletRing
+            {...{ $size }}
+            style={{ '--bullet-rotate': `${bulletAngle}deg` }}
+            $dismissing={isDismissing}
+            aria-hidden='true'
+          >
+            <Bullet {...{ $size }} />
+          </BulletRing>
+          <VisuallyHidden
+            role='timer'
+            aria-live='polite'
+            aria-label={`${timerSec} seconds remaining`}
+          />
+        </>
+      )}
+      {showTime && (
+        <>
+          <Dimmer aria-hidden='true' {...{ $size }}>
+            <DotsWrapper>
+              <AllDots aria-hidden='true'>
+                {[...Array(60)].map((_, i) => (
+                  <Dots key={i} $i={i} {...{ $size }} />
+                ))}
+              </AllDots>
+            </DotsWrapper>
+          </Dimmer>
+          {isDigital ? (
+            <Time as='time' dateTime={time.toISOString()} aria-label={timeLabel}>
+              <TimeTxt {...{ $size }} aria-hidden='true'>
+                {showTimeWithSec ? currentTimeWithoutAmPm : withoutSec}
+              </TimeTxt>
+              <TimeTxt {...{ $size }} aria-hidden='true'>
+                {amPm}
+              </TimeTxt>
+            </Time>
+          ) : (
+            <Time as='time' dateTime={time.toISOString()} aria-label={timeLabel}>
+              <HourHand
+                {...{ $size }}
+                style={{ '--hand-rotate': `${handRotations.hour}deg` }}
+                aria-hidden='true'
+              />
+              <MinuteHand
+                {...{ $size }}
+                style={{ '--hand-rotate': `${handRotations.minute}deg` }}
+                aria-hidden='true'
+              />
+              <SecondHand
+                {...{ $size }}
+                style={{ '--hand-rotate': `${handRotations.second}deg` }}
+                aria-hidden='true'
+              />
+            </Time>
+          )}
+        </>
+      )}
+      {timerSeconds > 0 && (
+        <LeftActions
+          {...{ $size }}
+          $noActions={hasNoTimer}
+          role='group'
+          aria-label='Timer controls'
+        >
+          <ActionBtn
+            type='button'
+            onClick={removeTimer}
+            {...{ $size }}
+            aria-label='Stop timer'
+            aria-disabled={hasNoTimer}
+          >
+            <MediaStopFilledWrapper color={white} size={ICON_SIZE} aria-hidden='true' />
+          </ActionBtn>
+          {hasNoTimer || !isPaused ? (
+            <ActionBtn
+              type='button'
+              onClick={pauseTimer}
+              {...{ $size }}
+              aria-label='Pause timer'
+              aria-disabled={hasNoTimer}
+            >
+              <MediaPauseFilledWrapper color={white} size={ICON_SIZE} aria-hidden='true' />
+            </ActionBtn>
+          ) : (
+            <ActionBtn type='button' onClick={playTimer} aria-label='Resume timer' {...{ $size }}>
+              <MediaPlayFilledWrapper color={white} size={ICON_SIZE} aria-hidden='true' />
+            </ActionBtn>
+          )}
+        </LeftActions>
+      )}
+      {timerSeconds > 0 && (
+        <RightActions role='group' {...{ $size }} aria-label='Start timer'>
+          <ActionBtn
+            type='button'
+            onClick={setTimer}
+            {...{ $size }}
+            aria-label={`Start ${timerSeconds} second timer`}
+          >
+            <AddWrapper color={white} size={$size} aria-hidden='true' />
+          </ActionBtn>
+        </RightActions>
+      )}
+    </Wrapper>
+  );
+};
+
+export default Timer;

package/components/components/Timer/components/TimerRing/TimerRing.jsx

@@ -0,0 +1,45 @@
+import { useEffect, useRef } from 'react';
+import white from '../../../../colors/white';
+import { SVG } from './styles';
+
+const RADIUS = 33;
+const CIRCUMFERENCE = 2 * Math.PI * RADIUS;
+
+const TimerRing = ({ progress }) => {
+  const circleRef = useRef(null);
+
+  useEffect(() => {
+    const offset = CIRCUMFERENCE * (1 - progress);
+    circleRef.current.style.strokeDashoffset = offset;
+  }, [progress]);
+
+  return (
+    <SVG viewBox='0 0 100 100' width='100%' height='100%'>
+      <g transform='rotate(-90, 50, 48)'>
+        <circle
+          cx={50}
+          cy={48}
+          r={RADIUS}
+          stroke='rgba(255,255,255,.2)'
+          strokeWidth={1}
+          fill='none'
+        />
+        <circle
+          ref={circleRef}
+          cx={50}
+          cy={48}
+          r={RADIUS}
+          stroke={white}
+          strokeWidth={1.33}
+          fill='none'
+          strokeLinecap='round'
+          strokeDasharray={CIRCUMFERENCE}
+          strokeDashoffset={CIRCUMFERENCE}
+          style={{ transition: 'stroke-dashoffset 0.2s linear' }}
+        />
+      </g>
+    </SVG>
+  );
+};
+
+export default TimerRing;

package/components/components/Timer/components/TimerRing/index.js

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

package/components/components/Timer/components/TimerRing/styles.js

@@ -0,0 +1,3 @@
+import styled from 'styled-components';
+
+export const SVG = styled.svg``;

package/components/components/Timer/constants.js

@@ -0,0 +1,23 @@
+import green from '../../colors/green';
+import red from '../../colors/red';
+import blue from '../../colors/blue';
+import brown from '../../colors/brown';
+import grey from '../../colors/grey';
+import indigo from '../../colors/indigo';
+import orange from '../../colors/orange';
+import teal from '../../colors/teal';
+import violet from '../../colors/violet';
+import yellow from '../../colors/yellow';
+
+export const COLOR_MAPPING = {
+  green: green.m500,
+  red: red.m500,
+  blue: blue.m500,
+  brown: brown.m500,
+  grey: grey.m500,
+  indigo: indigo.m500,
+  orange: orange.m500,
+  teal: teal.m500,
+  violet: violet.m500,
+  yellow: yellow.m500,
+};

package/components/components/Timer/helpers.js

@@ -0,0 +1,4 @@
+export const getSize =
+  (ratio) =>
+  ({ $size }) =>
+    $size / ratio;

package/components/components/Timer/index.js

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