meticulous-ui 3.3.0 → 3.4.0

package/components/Spinner/Spinner.js

@@ -1,18 +1,17 @@
-import { jsx as i } from "react/jsx-runtime";
-import { SpinnerSVG as s, SpinnerCircle as a } from "./styles.js";
-import h from "../../colors/colorMap.js";
-import d from "../../colors/green.js";
-import p from "../../colors/white.js";
-import c from "../../colors/grey.js";
-const g = {
+import { jsx as t } from "react/jsx-runtime";
+import { SpinnerSVG as l, SpinnerCircle as s } from "./styles.js";
+import a from "../../colors/colorMap.js";
+import h from "../../colors/green.js";
+import d from "../../colors/white.js";
+import p from "../../colors/grey.js";
+const c = {
   small: { strokeWidth: 6, $length: "2.4rem" },
   medium: { strokeWidth: 5, $length: "3.6rem" },
   large: { strokeWidth: 5, $length: "5rem" }
-}, $ = ({ color: e = "green", size: o = "medium", ...n }) => {
-  var t;
-  const { strokeWidth: m, $length: r } = g[o], l = [p, c.m600].includes(e) ? e : (t = h[e] ?? d) == null ? void 0 : t.m500;
-  return /* @__PURE__ */ i(
-    s,
+}, W = ({ color: e = "green", size: i = "medium", ...o }) => {
+  const { strokeWidth: n, $length: r } = c[i], m = [d, p.m600].includes(e) ? e : (a[e] ?? h)?.m500;
+  return /* @__PURE__ */ t(
+    l,
     {
       viewBox: "0 0 50 50",
       width: r,
@@ -20,16 +19,16 @@ const g = {
       role: "status",
       "aria-label": "Loading",
       "aria-live": "polite",
-      ...n,
-      children: /* @__PURE__ */ i(
-        a,
+      ...o,
+      children: /* @__PURE__ */ t(
+        s,
         {
           cx: "25",
           cy: "25",
           r: "20",
           fill: "none",
-          stroke: l,
-          strokeWidth: m,
+          stroke: m,
+          strokeWidth: n,
           strokeLinecap: "round"
         }
       )
@@ -37,5 +36,5 @@ const g = {
   );
 };
 export {
-  $ as default
+  W as default
 };

package/components/Timer/constants.js

@@ -1,7 +1,7 @@
 import o from "../../colors/green.js";
 import r from "../../colors/red.js";
-import m from "../../colors/blue.js";
-import e from "../../colors/brown.js";
+import { blue as m } from "../../colors/blue.js";
+import { brown as e } from "../../colors/brown.js";
 import i from "../../colors/grey.js";
 import t from "../../colors/indigo.js";
 import p from "../../colors/orange.js";

package/components/Timer/styles.js

@@ -1,14 +1,14 @@
 import o, { css as r, keyframes as l } from "styled-components";
-import m from "../Icons/Add/Add.js";
-import p from "../Icons/MediaStopFilled/MediaStopFilled.js";
-import c from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
-import h from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
 import i from "../../colors/white.js";
-import u from "../../colors/black.js";
-import b from "../../colors/red.js";
-import { COLOR_MAPPING as $ } from "./constants.js";
+import { black as m } from "../../colors/black.js";
+import p from "../../colors/red.js";
+import { COLOR_MAPPING as c } from "./constants.js";
 import { getSize as t } from "./helpers.js";
-const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => $[e], n = r`
+import h from "../Icons/MediaStopFilled/MediaStopFilled.js";
+import u from "../Icons/MediaPauseFilled/MediaPauseFilled.js";
+import b from "../Icons/MediaPlayFilled/MediaPlayFilled.js";
+import $ from "../Icons/Add/Add.js";
+const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => c[e], n = r`
   position: absolute;
   bottom: 50%;
   transform-origin: bottom;
@@ -80,12 +80,12 @@ const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => $[e], n = r`
   ${n};
   width: ${t(80)}rem;
   height: ${t(4)}rem;
-  background: ${u.m200};
+  background: ${m.m200};
 `, C = o.div`
   ${n};
   width: ${t(133.33)}rem;
   height: ${t(3.64)}rem;
-  background: ${b.m800};
+  background: ${p.m800};
 `, d = l`
   from { opacity: 1; transform: scale(1); }
   to   { opacity: 0; transform: scale(0.9); }
@@ -127,22 +127,22 @@ const s = 1, f = 16.67, a = 1.67, g = 3.404, v = ({ $color: e }) => $[e], n = r`
     outline: 2px solid ${i};
     outline-offset: 2px;
   }
-`, V = o(m)`
+`, V = o($)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, j = o(p)`
+`, j = o(h)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, q = o(c)`
+`, q = o(u)`
   position: absolute;
   left: 50%;
   top: 50%;
   transform: translate(-50%, -50%);
-`, J = o(h)`
+`, J = o(b)`
   position: absolute;
   left: 50%;
   top: 50%;

package/components/Toast/constants.js

@@ -1,7 +1,7 @@
 import m from "../../colors/green.js";
 import o from "../../colors/orange.js";
 import r from "../../colors/red.js";
-import n from "../../colors/blue.js";
+import { blue as n } from "../../colors/blue.js";
 const i = "success", s = "warning", e = "info", t = "error", c = {
   main: n.m500,
   side: n.m100,

package/components/Toast/helpers.js

@@ -1,17 +1,17 @@
 import { jsxs as c, jsx as i } from "react/jsx-runtime";
 import { WARNING as n, ERROR as t, SUCCESS as s } from "./constants.js";
-import g from "../Icons/Close/Close.js";
-import l from "../Icons/Check/Check.js";
-import u from "../Icons/Info/Info.js";
-import C from "../Icons/WarningTriangleFilled/WarningTriangleFilled.js";
-import d from "../../colors/white.js";
-import { Outer as h, OuterChild as z, LogoContainer as a, Icon as I } from "./styles.js";
-const L = (r, o) => r === t ? /* @__PURE__ */ i(g, { size: 16, color: o }) : r === s ? /* @__PURE__ */ i(l, { size: 18, color: o }) : r === n ? /* @__PURE__ */ i(C, { size: 28, color: d }) : /* @__PURE__ */ i(u, { size: 22, color: o }), R = (r) => r === t ? 1.6 : r === s ? 1.76 : r === n ? 2.8 : 2.08, k = ({ type: r, $main: o, $side: f }) => {
+import g from "../../colors/white.js";
+import { Outer as l, OuterChild as u, LogoContainer as C, Icon as d } from "./styles.js";
+import h from "../Icons/Close/Close.js";
+import z from "../Icons/Check/Check.js";
+import a from "../Icons/WarningTriangleFilled/WarningTriangleFilled.js";
+import I from "../Icons/Info/Info.js";
+const L = (r, o) => r === t ? /* @__PURE__ */ i(h, { size: 16, color: o }) : r === s ? /* @__PURE__ */ i(z, { size: 18, color: o }) : r === n ? /* @__PURE__ */ i(a, { size: 28, color: g }) : /* @__PURE__ */ i(I, { size: 22, color: o }), R = (r) => r === t ? 1.6 : r === s ? 1.76 : r === n ? 2.8 : 2.08, k = ({ type: r, $main: o, $side: f }) => {
   const m = L(r, o), e = r === n;
-  return /* @__PURE__ */ c(h, { "aria-hidden": "true", $side: f, children: [
-    /* @__PURE__ */ i(z, { $main: o }),
-    !e && /* @__PURE__ */ i(a, { $main: o, type: r }),
-    /* @__PURE__ */ i(I, { size: R(r), $isWarning: e, children: m })
+  return /* @__PURE__ */ c(l, { "aria-hidden": "true", $side: f, children: [
+    /* @__PURE__ */ i(u, { $main: o }),
+    !e && /* @__PURE__ */ i(C, { $main: o, type: r }),
+    /* @__PURE__ */ i(d, { size: R(r), $isWarning: e, children: m })
   ] });
 };
 export {

package/components/Toast/styles.js

@@ -1,7 +1,7 @@
 import t, { keyframes as r } from "styled-components";
 import o from "../../colors/white.js";
-import n from "../Icons/Close/Close.js";
 import a from "../../colors/grey.js";
+import n from "../Icons/Close/Close.js";
 const s = r`
   from { transform: scale(0); }
   to   { transform: scale(1); }

package/components/Typography/P/styles.js

@@ -1,5 +1,5 @@
 import r from "styled-components";
-import t from "../../../colors/black.js";
+import { black as t } from "../../../colors/black.js";
 const p = r.p`
   font-size: ${({ $size: o }) => o || "1.92rem"};
   color: ${({ $color: o }) => o || t};

package/components/VideoPlayer/styles.js

@@ -1,5 +1,5 @@
 import t from "styled-components";
-import o from "../../colors/black.js";
+import { black as o } from "../../colors/black.js";
 const r = t.div`
   position: absolute;
   inset: 0;

package/components/VideoPlayer/useSpacebarToggle.js

@@ -1,8 +1,7 @@
-import { useEffect as f } from "react";
-const l = (a, c, r) => {
-  f(() => {
-    const u = (t) => {
-      var d;
+import { useEffect as c } from "react";
+const s = (u, i, r) => {
+  c(() => {
+    const a = (t) => {
       if (![
         "Space",
         "KeyF",
@@ -17,23 +16,23 @@ const l = (a, c, r) => {
       const n = t.target;
       if (n && (n.tagName === "INPUT" || n.tagName === "TEXTAREA" || n.isContentEditable))
         return;
-      const e = a.current;
+      const e = u.current;
       if (e) {
         if (t.code === "Space")
           if (t.preventDefault(), e.paused) {
-            const i = e.play();
-            i && i.catch && i.catch(() => {
+            const o = e.play();
+            o && o.catch && o.catch(() => {
             });
           } else
             e.pause();
         else if (t.code === "KeyF")
-          t.preventDefault(), document.fullscreenElement ? document.exitFullscreen() : (d = c.current) == null || d.requestFullscreen();
+          t.preventDefault(), document.fullscreenElement ? document.exitFullscreen() : i.current?.requestFullscreen();
         else if (t.code === "ArrowUp")
-          t.preventDefault(), e.volume = Math.min(1, e.volume + 0.05), r == null || r(e.volume);
+          t.preventDefault(), e.volume = Math.min(1, e.volume + 0.05), r?.(e.volume);
         else if (t.code === "ArrowDown")
-          t.preventDefault(), e.volume = Math.max(0, e.volume - 0.05), r == null || r(e.volume);
+          t.preventDefault(), e.volume = Math.max(0, e.volume - 0.05), r?.(e.volume);
         else if (t.code === "KeyM")
-          e.muted = !e.muted, r == null || r(e.muted ? 0 : e.volume);
+          e.muted = !e.muted, r?.(e.muted ? 0 : e.volume);
         else if (t.code === "ArrowLeft") {
           if (isNaN(e.duration)) return;
           e.currentTime = Math.max(0, e.currentTime - 5);
@@ -43,9 +42,9 @@ const l = (a, c, r) => {
         }
       }
     };
-    return window.addEventListener("keydown", u, !0), () => window.removeEventListener("keydown", u, !0);
-  }, [a, c, r]);
+    return window.addEventListener("keydown", a, !0), () => window.removeEventListener("keydown", a, !0);
+  }, [u, i, r]);
 };
 export {
-  l as useSpacebarToggle
+  s as useSpacebarToggle
 };

package/components/components/Button/Button.jsx

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

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

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

package/components/components/Button/styles.js

@@ -0,0 +1,73 @@
+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;
+`;