meticulous-ui 3.4.0 → 3.4.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.4.0",
+  "version": "3.4.2",
   "license": "ISC",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "types": "./index.d.ts",
@@ -15,17 +15,6 @@
     "access": "public"
   },
   "sideEffects": false,
-  "exports": {
-    ".": "./index.js",
-    "./components/*": "./components/*/index.js",
-    "./hooks": "./hooks/index.js",
-    "./hooks/*": "./hooks/*.js",
-    "./utils/*": "./utils/*.js",
-    "./reactUtils": "./reactUtils/index.js",
-    "./reactUtils/*": "./reactUtils/*.js",
-    "./colors": "./colors/index.js",
-    "./colors/*": "./colors/*.js"
-  },
   "files": [
     "*"
   ],

package/components/components/Button/Button.jsx

@@ -1,87 +0,0 @@
-import { useRef } from 'react';
-import Spinner from '../Spinner/Spinner';
-import colors from '../../colors/colorMap';
-import blue from '../../colors/blue';
-import { ButtonWrapper, Content, ButtonContainer, SpinnerWrapper } from './styles';
-import Ripple from '../Ripple';
-import white from '../../colors/white';
-import grey from '../../colors/grey';
-import { MEDIUM, SIZE } from './constants';
-
-const Rippled = ({ theme, children }) => <Ripple rippleColor={theme['m100']}>{children}</Ripple>;
-
-const Button = (props) => {
-  const {
-    children,
-    theme = blue,
-    size = MEDIUM,
-    width,
-    leftIcon,
-    rightIcon,
-    isLoading,
-    textColor,
-    onKeyDown,
-    ...rest
-  } = props || {};
-
-  const lastKeyPressRef = useRef(0);
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter' || e.key === ' ') {
-      const now = Date.now();
-      if (now - lastKeyPressRef.current < 500) {
-        e.preventDefault();
-        e.stopPropagation();
-        return;
-      }
-      lastKeyPressRef.current = now;
-    }
-    onKeyDown?.(e);
-  };
-  const { m400: selectedColor, m500: hoverColor, m600: activeColor } = colors[theme] ?? blue;
-  const { height: $height, width: $width, font: $font } = SIZE[size] || {};
-
-  const txtClr = ['white', 'yellow'].includes(theme) ? grey.m600 : white;
-
-  const btnChild = (
-    <ButtonWrapper
-      type='button'
-      {...rest}
-      onKeyDown={handleKeyDown}
-      {...{
-        $hoverColor: hoverColor,
-        $activeColor: activeColor,
-        $selectedColor: selectedColor,
-        $height,
-        $width: width || $width,
-        disabled: props.disabled,
-        $isLoading: isLoading,
-      }}
-    >
-      {isLoading ? (
-        <SpinnerWrapper>
-          <Spinner size='small' color={textColor || txtClr} />
-        </SpinnerWrapper>
-      ) : (
-        <Content
-          {...{
-            $textColor: textColor || txtClr,
-            $font,
-          }}
-        >
-          {children}
-        </Content>
-      )}
-    </ButtonWrapper>
-  );
-
-  return (
-    <ButtonContainer
-      {...{ $height, $width: width || $width, disabled: props.disabled, $isLoading: isLoading }}
-    >
-      {isLoading ? btnChild : <Rippled theme={theme}>{btnChild}</Rippled>}
-    </ButtonContainer>
-  );
-};
-
-export default Button;

package/components/components/Button/constants.js

@@ -1,27 +0,0 @@
-export const SMALL = 'small';
-export const MEDIUM = 'medium';
-export const LARGE = 'large';
-export const EX_LARGE = 'ex-large';
-
-export const SIZE = {
-  [SMALL]: {
-    height: 4.48,
-    width: 8.4,
-    font: 1.6,
-  },
-  [MEDIUM]: {
-    height: 5.12,
-    width: 9.6,
-    font: 1.92,
-  },
-  [LARGE]: {
-    height: 5.76,
-    width: 10.8,
-    font: 2.24,
-  },
-  [EX_LARGE]: {
-    height: 6.4,
-    width: 12,
-    font: 2.56,
-  },
-};

package/components/components/Button/index.js

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

package/components/components/Button/styles.js

@@ -1,73 +0,0 @@
-import styled, { css } from 'styled-components';
-import grey from '../../colors/grey';
-
-export const ButtonWrapper = styled.button`
-  height: ${({ $height }) => $height}rem;
-  width: ${({ $width }) => $width}rem;
-  border-radius: 0.96rem;
-  border: none;
-  padding: 0.96rem 0.64rem;
-  background-color: ${({ $selectedColor, disabled }) => (disabled ? grey.m500 : $selectedColor)};
-  cursor: ${({ disabled, $isLoading }) =>
-    disabled ? 'not-allowed' : $isLoading ? 'auto' : 'pointer'};
-
-  ${({ $isLoading }) =>
-    $isLoading &&
-    css`
-      pointer-events: none;
-    `};
-
-  ${({ disabled, $isLoading }) =>
-    !(disabled || $isLoading) &&
-    css`
-      &:hover {
-        background-color: ${({ $hoverColor }) => $hoverColor};
-      }
-
-      &:active {
-        background-color: ${({ $activeColor }) => $activeColor};
-      }
-    `};
-
-  &:focus-visible {
-    outline: none;
-  }
-`;
-
-export const Content = styled.div`
-  font-size: ${({ $font }) => $font}rem;
-  font-weight: 500;
-  max-width: 100%;
-  overflow: hidden;
-  color: ${({ $textColor }) => $textColor};
-`;
-
-export const ButtonContainer = styled.div`
-  height: ${({ $height }) => $height}rem;
-  width: ${({ $width }) => $width}rem;
-  display: inline-block;
-  position: relative;
-  border-radius: 0.96rem;
-
-  ${({ disabled, $isLoading }) =>
-    !(disabled || $isLoading) &&
-    css`
-      box-shadow: 0 0.4rem 1.5rem rgba(0, 0, 0, 0.2);
-      transition:
-        transform 0.2s,
-        box-shadow 0.2s;
-
-      &:hover,
-      &:focus-within {
-        box-shadow: 0 0.6rem 2rem rgba(0, 0, 0, 0.3);
-        transform: translateY(-2px);
-      }
-    `};
-`;
-
-export const SpinnerWrapper = styled.div`
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-`;

package/components/components/Carousel/Carousel.jsx

@@ -1,311 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import ChevronLeft from '../Icons/ChevronLeft';
-import ChevronRight from '../Icons/ChevronRight';
-
-import {
-  Wrapper,
-  SlideArea,
-  SlideViewport,
-  SlideTrack,
-  NavButton,
-  DotsWrapper,
-  Dot,
-  ProgressBar,
-  PauseButton,
-} from './styles';
-
-const SWIPE_THRESHOLD = 50;
-const ARROW_HIDE_DELAY = 2000;
-
-const PauseIcon = () => (
-  <svg width={12} height={12} viewBox='0 0 12 12' fill='currentColor' aria-hidden='true'>
-    <rect x='2' y='1' width='3' height='10' rx='1' />
-    <rect x='7' y='1' width='3' height='10' rx='1' />
-  </svg>
-);
-
-const PlayIcon = () => (
-  <svg width={12} height={12} viewBox='0 0 12 12' fill='currentColor' aria-hidden='true'>
-    <path d='M2 1.5l9 4.5-9 4.5V1.5z' />
-  </svg>
-);
-
-const Carousel = ({
-  data,
-  renderCarousel,
-  visibleSlides = 1,
-  hasArrow = true,
-  overlayArrows = false,
-  arrowTop,
-  areDotsHidden = false,
-  autoSlide = false,
-  autoSlideSec = 3,
-  loop = false,
-  dragToSlide = false,
-  liveDrag = false,
-  liveDragMobile = true,
-  showProgress = false,
-  defaultIndex = 0,
-  onSlideChange,
-}) => {
-  const [currentIndex, setCurrentIndex] = useState(defaultIndex);
-  const [arrowsVisible, setArrowsVisible] = useState(true);
-  const [viewportFocused, setViewportFocused] = useState(false);
-  const [paused, setPaused] = useState(false);
-  const [dragOffsetPx, setDragOffsetPx] = useState(0);
-  const [dragging, setDragging] = useState(false);
-  const [isMobileOrTablet, setIsMobileOrTablet] = useState(false);
-  const touchStartX = useRef(null);
-  const dragStartX = useRef(null);
-  const hideTimer = useRef(null);
-  const viewportRef = useRef(null);
-
-  useEffect(() => {
-    const mq = window.matchMedia('(max-width: 1024px)');
-    setIsMobileOrTablet(mq.matches);
-    const handler = (e) => setIsMobileOrTablet(e.matches);
-    mq.addEventListener('change', handler);
-    return () => mq.removeEventListener('change', handler);
-  }, []);
-
-  const maxIndex = data.length - visibleSlides;
-
-  const prev = () => setCurrentIndex((i) => (loop && i === 0 ? maxIndex : Math.max(i - 1, 0)));
-  const next = () =>
-    setCurrentIndex((i) => (loop && i >= maxIndex ? 0 : Math.min(i + 1, maxIndex)));
-
-  useEffect(() => {
-    onSlideChange?.(currentIndex);
-  }, [currentIndex]);
-
-  const showArrows = () => {
-    if (!overlayArrows) return;
-    clearTimeout(hideTimer.current);
-    setArrowsVisible(true);
-    hideTimer.current = setTimeout(() => setArrowsVisible(false), ARROW_HIDE_DELAY);
-  };
-
-  const handleMouseEnter = () => {
-    setPaused(true);
-    if (!overlayArrows) return;
-    clearTimeout(hideTimer.current);
-    setArrowsVisible(true);
-  };
-
-  const handleMouseLeave = () => {
-    setPaused(false);
-    if (!overlayArrows) return;
-    hideTimer.current = setTimeout(() => setArrowsVisible(false), ARROW_HIDE_DELAY);
-  };
-
-  useEffect(() => {
-    if (!overlayArrows) return;
-    hideTimer.current = setTimeout(() => setArrowsVisible(false), ARROW_HIDE_DELAY);
-    return () => clearTimeout(hideTimer.current);
-  }, [overlayArrows]);
-
-  useEffect(() => {
-    if (!autoSlide || paused) return;
-    const id = setInterval(() => {
-      setCurrentIndex((i) => (i >= maxIndex ? 0 : i + 1));
-    }, autoSlideSec * 1000);
-    return () => clearInterval(id);
-  }, [autoSlide, autoSlideSec, paused, maxIndex]);
-
-  const getResistantOffset = (offsetPx) => {
-    if (loop) return offsetPx;
-    if (currentIndex === 0 && offsetPx > 0) return offsetPx * 0.3;
-    if (currentIndex === maxIndex && offsetPx < 0) return offsetPx * 0.3;
-    return offsetPx;
-  };
-
-  const handleTouchStart = (e) => {
-    touchStartX.current = e.touches[0].clientX;
-    if (liveDragMobile && isMobileOrTablet) setDragging(true);
-    showArrows();
-  };
-
-  const handleTouchMove = (e) => {
-    if (!liveDragMobile || !isMobileOrTablet || touchStartX.current === null) return;
-    setDragOffsetPx(getResistantOffset(e.touches[0].clientX - touchStartX.current));
-  };
-
-  const handleTouchEnd = (e) => {
-    if (liveDragMobile && isMobileOrTablet) {
-      setDragging(false);
-      setDragOffsetPx(0);
-    }
-    if (touchStartX.current === null) return;
-    const delta = touchStartX.current - e.changedTouches[0].clientX;
-    if (delta > SWIPE_THRESHOLD) next();
-    else if (delta < -SWIPE_THRESHOLD) prev();
-    touchStartX.current = null;
-  };
-
-  const handleMouseDown = (e) => {
-    if (!dragToSlide) return;
-    dragStartX.current = e.clientX;
-    if (liveDrag) setDragging(true);
-  };
-
-  const handleMouseMove = (e) => {
-    if (!dragToSlide || !liveDrag || dragStartX.current === null) return;
-    setDragOffsetPx(getResistantOffset(e.clientX - dragStartX.current));
-  };
-
-  const handleMouseUp = (e) => {
-    if (!dragToSlide || dragStartX.current === null) return;
-    if (liveDrag) {
-      setDragging(false);
-      setDragOffsetPx(0);
-    }
-    const delta = dragStartX.current - e.clientX;
-    if (delta > SWIPE_THRESHOLD) next();
-    else if (delta < -SWIPE_THRESHOLD) prev();
-    dragStartX.current = null;
-  };
-
-  const handleKeyDown = (e) => {
-    if (e.key === 'ArrowLeft') {
-      e.preventDefault();
-      prev();
-    } else if (e.key === 'ArrowRight') {
-      e.preventDefault();
-      next();
-    }
-  };
-
-  const containerWidth = viewportRef.current?.clientWidth ?? 0;
-  const dragOffsetPercent = containerWidth > 0 ? (dragOffsetPx / containerWidth) * 100 : 0;
-  const translateX = -(currentIndex * (100 / visibleSlides)) + dragOffsetPercent;
-  const arrowTopValue =
-    arrowTop !== undefined
-      ? typeof arrowTop === 'number'
-        ? `${arrowTop}px`
-        : arrowTop
-      : undefined;
-
-  const totalSlides = maxIndex + 1;
-
-  return (
-    <Wrapper
-      onClick={showArrows}
-      onMouseEnter={handleMouseEnter}
-      onMouseLeave={handleMouseLeave}
-      onMouseMove={handleMouseMove}
-      onMouseUp={handleMouseUp}
-      onKeyDown={handleKeyDown}
-      role='region'
-      aria-label='Carousel'
-    >
-      <SlideArea
-        onTouchStart={handleTouchStart}
-        onTouchMove={handleTouchMove}
-        onTouchEnd={handleTouchEnd}
-      >
-        {hasArrow && (
-          <NavButton
-            onClick={prev}
-            disabled={!loop && currentIndex === 0}
-            aria-label='Previous slide'
-            $direction='prev'
-            $overlay={overlayArrows}
-            $visible={arrowsVisible}
-            $arrowTop={arrowTopValue}
-            $viewportFocused={viewportFocused}
-          >
-            <ChevronLeft size={20} aria-hidden='true' />
-          </NavButton>
-        )}
-
-        <SlideViewport
-          ref={viewportRef}
-          tabIndex={0}
-          aria-label='Carousel slides. Use arrow keys to navigate.'
-          $draggable={dragToSlide}
-          onFocus={() => {
-            setViewportFocused(true);
-            setPaused(true);
-          }}
-          onBlur={() => {
-            setViewportFocused(false);
-            setPaused(false);
-          }}
-          onMouseDown={handleMouseDown}
-          onMouseLeave={(e) => {
-            if (e.buttons === 1) return;
-            if (liveDrag && dragging) {
-              setDragging(false);
-              setDragOffsetPx(0);
-            }
-            dragStartX.current = null;
-          }}
-        >
-          <SlideTrack $translateX={translateX} $visibleSlides={visibleSlides} $dragging={dragging}>
-            {data.map(renderCarousel)}
-          </SlideTrack>
-        </SlideViewport>
-
-        {hasArrow && (
-          <NavButton
-            onClick={next}
-            disabled={!loop && currentIndex === maxIndex}
-            aria-label='Next slide'
-            $direction='next'
-            $overlay={overlayArrows}
-            $visible={arrowsVisible}
-            $arrowTop={arrowTopValue}
-            $viewportFocused={viewportFocused}
-          >
-            <ChevronRight size={20} aria-hidden='true' />
-          </NavButton>
-        )}
-
-        {autoSlide && (
-          <PauseButton
-            onClick={() => setPaused((p) => !p)}
-            aria-label={paused ? 'Play slideshow' : 'Pause slideshow'}
-          >
-            {paused ? <PlayIcon /> : <PauseIcon />}
-          </PauseButton>
-        )}
-      </SlideArea>
-
-      <div
-        aria-live='polite'
-        aria-atomic='true'
-        style={{
-          position: 'absolute',
-          width: 1,
-          height: 1,
-          overflow: 'hidden',
-          clip: 'rect(0,0,0,0)',
-          whiteSpace: 'nowrap',
-        }}
-      >
-        Slide {currentIndex + 1} of {totalSlides}
-      </div>
-
-      {autoSlide && showProgress && (
-        <ProgressBar key={currentIndex} $duration={autoSlideSec} $paused={paused} />
-      )}
-
-      {!areDotsHidden && (
-        <DotsWrapper>
-          {Array.from({ length: totalSlides }).map((_, i) => (
-            <Dot
-              key={i}
-              $active={i === currentIndex}
-              onClick={() => setCurrentIndex(i)}
-              aria-label={`Slide ${i + 1} of ${totalSlides}`}
-              aria-current={i === currentIndex ? 'true' : undefined}
-            />
-          ))}
-        </DotsWrapper>
-      )}
-    </Wrapper>
-  );
-};
-
-export default Carousel;

package/components/components/Carousel/index.js

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

package/components/components/Carousel/styles.js

@@ -1,176 +0,0 @@
-import styled, { keyframes } from 'styled-components';
-
-export const Wrapper = styled.div`
-  position: relative;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  width: 100%;
-  gap: 12px;
-  outline: none;
-`;
-
-export const SlideArea = styled.div`
-  position: relative;
-  width: 100%;
-`;
-
-export const SlideViewport = styled.div`
-  overflow: hidden;
-  width: 100%;
-  outline: none;
-  cursor: ${({ $draggable }) => ($draggable ? 'grab' : 'default')};
-
-  &:active {
-    cursor: ${({ $draggable }) => ($draggable ? 'grabbing' : 'default')};
-  }
-`;
-
-export const SlideTrack = styled.div`
-  display: flex;
-  width: 100%;
-  transform: translateX(${({ $translateX }) => $translateX}%);
-  transition: ${({ $dragging }) => ($dragging ? 'none' : 'transform 0.35s ease')};
-
-  @media (prefers-reduced-motion: reduce) {
-    transition: none;
-  }
-
-  & > * {
-    flex: 0 0 ${({ $visibleSlides }) => 100 / $visibleSlides}%;
-    min-width: 0;
-    box-sizing: border-box;
-  }
-`;
-
-export const NavButton = styled.button`
-  position: absolute;
-  top: ${({ $arrowTop }) => $arrowTop ?? '50%'};
-  transform: translateY(-50%);
-  z-index: 1;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  border: 1px solid #e0e0e0;
-  background: #fff;
-  cursor: pointer;
-  color: #333;
-  transition:
-    background 0.15s,
-    opacity 0.3s;
-  padding: 0;
-
-  ${({ $direction, $overlay }) =>
-    $direction === 'prev'
-      ? `left: ${$overlay ? '12px' : '-16px'};`
-      : `right: ${$overlay ? '12px' : '-16px'};`}
-
-  &:hover:not(:disabled) {
-    background: #f5f5f5;
-  }
-
-  &:disabled {
-    opacity: 0.3;
-    cursor: default;
-  }
-
-  &:focus-visible {
-    outline: none;
-    background: #ffe4ec;
-    border-color: #f9a8c0;
-  }
-
-  ${({ $viewportFocused }) =>
-    $viewportFocused &&
-    `
-    border-color: #bdbdbd;
-  `}
-
-  ${({ $overlay, $visible }) =>
-    $overlay &&
-    !$visible &&
-    `
-    opacity: 0;
-    pointer-events: none;
-  `}
-`;
-
-export const DotsWrapper = styled.div`
-  display: flex;
-  gap: 6px;
-  align-items: center;
-`;
-
-export const Dot = styled.button`
-  width: ${({ $active }) => ($active ? '20px' : '8px')};
-  height: 8px;
-  border-radius: 4px;
-  border: none;
-  background: ${({ $active }) => ($active ? '#333' : '#ccc')};
-  cursor: pointer;
-  padding: 0;
-  transition:
-    width 0.2s ease,
-    background 0.2s ease;
-`;
-
-const fillProgress = keyframes`
-  from { width: 0%; }
-  to { width: 100%; }
-`;
-
-export const ProgressBar = styled.div`
-  width: 100%;
-  height: 3px;
-  background: #e0e0e0;
-  border-radius: 2px;
-  overflow: hidden;
-  position: relative;
-
-  &::after {
-    content: '';
-    position: absolute;
-    inset: 0;
-    width: 0%;
-    background: #333;
-    animation: ${fillProgress} ${({ $duration }) => $duration}s linear forwards;
-    animation-play-state: ${({ $paused }) => ($paused ? 'paused' : 'running')};
-
-    @media (prefers-reduced-motion: reduce) {
-      animation: none;
-      width: 100%;
-    }
-  }
-`;
-
-export const PauseButton = styled.button`
-  position: absolute;
-  bottom: 8px;
-  right: 8px;
-  z-index: 2;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
-  border: 1px solid rgba(255, 255, 255, 0.6);
-  background: rgba(0, 0, 0, 0.35);
-  color: #fff;
-  cursor: pointer;
-  padding: 0;
-  backdrop-filter: blur(2px);
-  transition: background 0.15s;
-
-  &:hover {
-    background: rgba(0, 0, 0, 0.55);
-  }
-
-  &:focus-visible {
-    outline: 2px solid #fff;
-    outline-offset: 2px;
-  }
-`;