meticulous-ui 3.0.6 → 3.1.0

package/README.md

@@ -78,6 +78,7 @@ import blue from 'meticulous-ui/colors/blue';
 | `PageLoader`    | Renders a loader with line at the top of page                    |
 | `Button`        | Renders a button to click & take an action                       |
 | `Shimmer`       | Animated skeleton loading placeholder                            |
+| `Carousel`      | Carousel providing slider between components displaying slides   |
 | `RootComponent` | This is the required wrapper for any app that uses meticulous-ui |
 
 ## 📦 Icon Components

package/components/Carousel/Carousel.js

@@ -0,0 +1,164 @@
+import { jsxs as b, jsx as t } from "react/jsx-runtime";
+import { useState as x, useRef as k, useEffect as C } from "react";
+import q from "../Icons/ChevronLeft/ChevronLeft.js";
+import G from "../Icons/ChevronRight/ChevronRight.js";
+import { Wrapper as J, SlideArea as Q, NavButton as V, SlideViewport as S, SlideTrack as Z, PauseButton as ee, ProgressBar as te, DotsWrapper as re, Dot as ne } from "./styles.js";
+const $ = 50, E = 2e3, oe = () => /* @__PURE__ */ b("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
+  /* @__PURE__ */ t("rect", { x: "2", y: "1", width: "3", height: "10", rx: "1" }),
+  /* @__PURE__ */ t("rect", { x: "7", y: "1", width: "3", height: "10", rx: "1" })
+] }), se = () => /* @__PURE__ */ t("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ t("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) }), de = ({
+  data: P,
+  renderCarousel: F,
+  visibleSlides: g = 1,
+  overlayArrows: o = !1,
+  arrowTop: d,
+  areDotsHidden: W = !1,
+  autoSlide: h = !1,
+  autoSlideSec: M = 3,
+  loop: f = !1,
+  dragToSlide: T = !1,
+  showProgress: _ = !1,
+  defaultIndex: z = 0,
+  onSlideChange: D
+}) => {
+  const [n, p] = x(z), [y, i] = x(!0), [X, L] = x(!1), [a, u] = x(!1), m = k(null), c = k(null), l = k(null), s = P.length - g, v = () => p((e) => f && e === 0 ? s : Math.max(e - 1, 0)), w = () => p((e) => f && e >= s ? 0 : Math.min(e + 1, s));
+  C(() => {
+    D == null || D(n);
+  }, [n]);
+  const B = () => {
+    o && (clearTimeout(l.current), i(!0), l.current = setTimeout(() => i(!1), E));
+  }, H = () => {
+    u(!0), o && (clearTimeout(l.current), i(!0));
+  }, U = () => {
+    u(!1), o && (l.current = setTimeout(() => i(!1), E));
+  };
+  C(() => {
+    if (o)
+      return l.current = setTimeout(() => i(!1), E), () => clearTimeout(l.current);
+  }, [o]), C(() => {
+    if (!h || a) return;
+    const e = setInterval(() => {
+      p((r) => r >= s ? 0 : r + 1);
+    }, M * 1e3);
+    return () => clearInterval(e);
+  }, [h, M, a, s]);
+  const j = (e) => {
+    m.current = e.touches[0].clientX, B();
+  }, A = (e) => {
+    if (m.current === null) return;
+    const r = m.current - e.changedTouches[0].clientX;
+    r > $ ? w() : r < -$ && v(), m.current = null;
+  }, K = (e) => {
+    T && (c.current = e.clientX);
+  }, N = (e) => {
+    if (!T || c.current === null) return;
+    const r = c.current - e.clientX;
+    r > $ ? w() : r < -$ && v(), c.current = null;
+  }, O = (e) => {
+    e.key === "ArrowLeft" ? (e.preventDefault(), v()) : e.key === "ArrowRight" && (e.preventDefault(), w());
+  }, Y = -(n * (100 / g)), R = d !== void 0 ? typeof d == "number" ? `${d}px` : d : void 0, I = s + 1;
+  return /* @__PURE__ */ b(
+    J,
+    {
+      onClick: B,
+      onMouseEnter: H,
+      onMouseLeave: U,
+      onKeyDown: O,
+      role: "region",
+      "aria-label": "Carousel",
+      children: [
+        /* @__PURE__ */ b(Q, { onTouchStart: j, onTouchEnd: A, children: [
+          /* @__PURE__ */ t(
+            V,
+            {
+              onClick: v,
+              disabled: !f && n === 0,
+              "aria-label": "Previous slide",
+              $overlay: o,
+              $visible: y,
+              $arrowTop: R,
+              $viewportFocused: X,
+              children: /* @__PURE__ */ t(q, { size: 20, "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ t(
+            S,
+            {
+              tabIndex: 0,
+              "aria-label": "Carousel slides. Use arrow keys to navigate.",
+              $draggable: T,
+              onFocus: () => {
+                L(!0), u(!0);
+              },
+              onBlur: () => {
+                L(!1), u(!1);
+              },
+              onMouseDown: K,
+              onMouseUp: N,
+              onMouseLeave: () => {
+                c.current = null;
+              },
+              children: /* @__PURE__ */ t(Z, { $translateX: Y, $visibleSlides: g, children: P.map(F) })
+            }
+          ),
+          /* @__PURE__ */ t(
+            V,
+            {
+              onClick: w,
+              disabled: !f && n === s,
+              "aria-label": "Next slide",
+              $overlay: o,
+              $visible: y,
+              $arrowTop: R,
+              $viewportFocused: X,
+              children: /* @__PURE__ */ t(G, { size: 20, "aria-hidden": "true" })
+            }
+          ),
+          h && /* @__PURE__ */ t(
+            ee,
+            {
+              onClick: () => u((e) => !e),
+              "aria-label": a ? "Play slideshow" : "Pause slideshow",
+              children: a ? /* @__PURE__ */ t(se, {}) : /* @__PURE__ */ t(oe, {})
+            }
+          )
+        ] }),
+        /* @__PURE__ */ b(
+          "div",
+          {
+            "aria-live": "polite",
+            "aria-atomic": "true",
+            style: {
+              position: "absolute",
+              width: 1,
+              height: 1,
+              overflow: "hidden",
+              clip: "rect(0,0,0,0)",
+              whiteSpace: "nowrap"
+            },
+            children: [
+              "Slide ",
+              n + 1,
+              " of ",
+              I
+            ]
+          }
+        ),
+        h && _ && /* @__PURE__ */ t(te, { $duration: M, $paused: a }, n),
+        !W && /* @__PURE__ */ t(re, { children: Array.from({ length: I }).map((e, r) => /* @__PURE__ */ t(
+          ne,
+          {
+            $active: r === n,
+            onClick: () => p(r),
+            "aria-label": `Slide ${r + 1} of ${I}`,
+            "aria-current": r === n ? "true" : void 0
+          },
+          r
+        )) })
+      ]
+    }
+  );
+};
+export {
+  de as default
+};

package/components/Carousel/index.js

@@ -0,0 +1,4 @@
+import r from "./Carousel.js";
+export {
+  r as default
+};

package/components/Carousel/styles.js

@@ -0,0 +1,166 @@
+import o, { keyframes as i } from "styled-components";
+const d = o.div`
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 100%;
+  gap: 12px;
+  outline: none;
+`, a = o.div`
+  position: relative;
+  width: 100%;
+`, s = o.div`
+  overflow: hidden;
+  width: 100%;
+  outline: none;
+  cursor: ${({ $draggable: e }) => e ? "grab" : "default"};
+
+  &:active {
+    cursor: ${({ $draggable: e }) => e ? "grabbing" : "default"};
+  }
+`, p = o.div`
+  display: flex;
+  width: 100%;
+  transform: translateX(${({ $translateX: e }) => e}%);
+  transition: transform 0.35s ease;
+
+  @media (prefers-reduced-motion: reduce) {
+    transition: none;
+  }
+
+  & > * {
+    flex: 0 0 ${({ $visibleSlides: e }) => 100 / e}%;
+    min-width: 0;
+    box-sizing: border-box;
+  }
+`, c = o.button`
+  position: absolute;
+  top: ${({ $arrowTop: e }) => e ?? "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;
+
+  &:first-of-type {
+    left: ${({ $overlay: e }) => e ? "12px" : "-16px"};
+  }
+
+  &:last-of-type {
+    right: ${({ $overlay: e }) => e ? "12px" : "-16px"};
+  }
+
+  &:hover:not(:disabled) {
+    background: #f5f5f5;
+  }
+
+  &:disabled {
+    opacity: 0.3;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: none;
+    background: #ffe4ec;
+    border-color: #f9a8c0;
+  }
+
+  ${({ $viewportFocused: e }) => e && `
+    border-color: #bdbdbd;
+  `}
+
+  ${({ $overlay: e, $visible: t }) => e && !t && `
+    opacity: 0;
+    pointer-events: none;
+  `}
+`, l = o.div`
+  display: flex;
+  gap: 6px;
+  align-items: center;
+`, u = o.button`
+  width: ${({ $active: e }) => e ? "20px" : "8px"};
+  height: 8px;
+  border-radius: 4px;
+  border: none;
+  background: ${({ $active: e }) => e ? "#333" : "#ccc"};
+  cursor: pointer;
+  padding: 0;
+  transition:
+    width 0.2s ease,
+    background 0.2s ease;
+`, r = i`
+  from { width: 0%; }
+  to { width: 100%; }
+`, f = o.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: ${r} ${({ $duration: e }) => e}s linear forwards;
+    animation-play-state: ${({ $paused: e }) => e ? "paused" : "running"};
+
+    @media (prefers-reduced-motion: reduce) {
+      animation: none;
+      width: 100%;
+    }
+  }
+`, b = o.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;
+  }
+`;
+export {
+  u as Dot,
+  l as DotsWrapper,
+  c as NavButton,
+  b as PauseButton,
+  f as ProgressBar,
+  a as SlideArea,
+  p as SlideTrack,
+  s as SlideViewport,
+  d as Wrapper
+};

package/components/Toast/Toast.js

@@ -1,22 +1,22 @@
-import { jsxs as c, jsx as t } from "react/jsx-runtime";
-import { useState as i, useRef as h, useEffect as R, createElement as N } from "react";
+import { jsxs as i, jsx as t } from "react/jsx-runtime";
+import { useState as l, useRef as h, useEffect as R, createElement as N } from "react";
 import { createPortal as b } from "react-dom";
 import { Logo as j } from "./helpers.js";
 import k from "../../colors/grey.js";
-import { COLOR_MAP as y, INFO as A, INFO_COLORS as B, ERROR as M } from "./constants.js";
+import { COLOR_MAP as y, INFO as A, INFO_COLORS as B, ERROR as v } from "./constants.js";
 import { ToastWrapper as D, Message as I, Title as W, Subtitle as _, CloseButtonContainer as z, ProgressRing as q, CloseWrapper as G, ToastsContainer as H } from "./styles.js";
-const w = () => {
+const x = () => {
 }, ee = ({ toasts: e, ...r }) => {
-  const [o, s] = i(e);
+  const [o, s] = l(e);
   R(() => {
     s(e);
   }, [e]);
-  const l = ({ type: a, id: u, title: m, subtitle: n, onExpire: d = w }, f) => /* @__PURE__ */ N(J, { type: a, title: m, subtitle: n, key: u, onExpire: d });
+  const u = ({ type: a, id: m, title: d, subtitle: n, duration: f, onExpire: c = x }, C) => /* @__PURE__ */ N(J, { type: a, title: d, subtitle: n, duration: f, key: m, onExpire: c });
   return b(
-    /* @__PURE__ */ t(H, { ...r, children: [...o].reverse().map(l) }),
+    /* @__PURE__ */ t(H, { ...r, children: [...o].reverse().map(u) }),
     document.body
   );
-}, v = (e, r, o) => () => {
+}, w = (e, r, o) => () => {
   e(!0), setTimeout(() => {
     r(!1), o();
   }, 500);
@@ -24,49 +24,49 @@ const w = () => {
   type: e = A,
   visible: r = !0,
   duration: o = 5,
-  onExpire: s = w,
-  title: l,
+  onExpire: s = x,
+  title: u,
   subtitle: a,
-  ...u
+  ...m
 }) => {
-  const [m, n] = i(r), [d, f] = i(!1), [x, C] = i(!1), T = h(null), p = h((o - 0.5) * 1e3), O = h(null), g = (F) => {
-    O.current = Date.now(), T.current = setTimeout(v(f, n, s), F);
+  const [d, n] = l(r), [f, c] = l(!1), [C, O] = l(!1), T = h(null), p = h((o - 0.5) * 1e3), g = h(null), $ = (F) => {
+    g.current = Date.now(), T.current = setTimeout(w(c, n, s), F);
   };
   R(() => {
     n(r);
-  }, [r]), R(() => (g(p.current), () => clearTimeout(T.current)), []);
+  }, [r]), R(() => ($(p.current), () => clearTimeout(T.current)), []);
   const L = () => {
-    clearTimeout(T.current), p.current -= Date.now() - O.current, C(!0);
+    clearTimeout(T.current), p.current -= Date.now() - g.current, O(!0);
   }, E = () => {
-    C(!1), g(p.current);
-  }, { main: $, side: P, bg: S } = y[e] ?? B;
-  if (m)
-    return /* @__PURE__ */ c(
+    O(!1), $(p.current);
+  }, { main: M, side: P, bg: S } = y[e] ?? B;
+  if (d)
+    return /* @__PURE__ */ i(
       D,
       {
         $bg: S,
-        role: e === M ? "alert" : "status",
-        "aria-live": e === M ? "assertive" : "polite",
+        role: e === v ? "alert" : "status",
+        "aria-live": e === v ? "assertive" : "polite",
         "aria-atomic": "true",
-        className: `${d ? "fade-out" : "fade-in"}`,
+        className: `${f ? "fade-out" : "fade-in"}`,
         onMouseEnter: L,
         onMouseLeave: E,
-        ...u,
+        ...m,
         children: [
-          /* @__PURE__ */ t(j, { type: e, $main: $, $side: P }),
-          /* @__PURE__ */ c(I, { children: [
-            /* @__PURE__ */ t(W, { children: l }),
+          /* @__PURE__ */ t(j, { type: e, $main: M, $side: P }),
+          /* @__PURE__ */ i(I, { children: [
+            /* @__PURE__ */ t(W, { children: u }),
             a && /* @__PURE__ */ t(_, { children: a })
           ] }),
-          /* @__PURE__ */ c(z, { children: [
-            /* @__PURE__ */ c(
+          /* @__PURE__ */ i(z, { children: [
+            /* @__PURE__ */ i(
               q,
               {
                 "aria-hidden": "true",
                 viewBox: "0 0 28 28",
                 $duration: o,
-                $color: $,
-                $paused: x,
+                $color: M,
+                $paused: C,
                 children: [
                   /* @__PURE__ */ t("circle", { cx: "14", cy: "14", r: "12" }),
                   /* @__PURE__ */ t("circle", { cx: "14", cy: "14", r: "12" })
@@ -79,7 +79,7 @@ const w = () => {
                 "aria-label": "Close notification",
                 size: 13,
                 color: k.m600,
-                onClick: v(f, n, s)
+                onClick: w(c, n, s)
               }
             )
           ] })

package/index.js

@@ -2,50 +2,52 @@ import { default as a } from "./components/Pagination/Pagination.js";
 import { default as r, ToastContainer as f } from "./components/Toast/Toast.js";
 import { default as d } from "./components/Spinner/Spinner.js";
 import { default as s } from "./components/Loader/Loader.js";
-import { default as u } from "./components/PageLoader/PageLoader.js";
+import { default as m } from "./components/PageLoader/PageLoader.js";
 import { default as n } from "./components/OtpInput/OtpInput.js";
 import { default as c } from "./components/Dropdown/Dropdown.js";
-import { default as P } from "./components/RootComponent/RootComponent.js";
-import { default as C } from "./components/Selectbox/Selectbox.js";
+import { default as C } from "./components/RootComponent/RootComponent.js";
+import { default as T } from "./components/Selectbox/Selectbox.js";
 import { default as S } from "./components/Button/Button.js";
 import { default as h } from "./components/Timer/Timer.js";
 import { default as R } from "./components/Shimmer/Shimmer.js";
 import { default as w } from "./components/VideoPlayer/VideoPlayer.js";
 import { default as B } from "./components/Image/Image.js";
-import { default as F } from "./components/Typography/Headings/index.js";
-import { default as H } from "./components/Typography/P/P.js";
-import { default as U } from "./components/Input/Input/Input.js";
-import { default as j } from "./components/Input/Textarea/Textarea.js";
-import { default as v } from "./components/Input/Checkbox/Checkbox.js";
-import { default as A } from "./components/Input/RadioGroup/RadioGroup.js";
-import { default as J } from "./components/Input/FileUploader/FileUploader.js";
-import { default as M } from "./colors/index.js";
-import { default as Q } from "./utils/index.js";
-import { default as X } from "./components/Icons/index.js";
+import { default as F } from "./components/Carousel/Carousel.js";
+import { default as H } from "./components/Typography/Headings/index.js";
+import { default as U } from "./components/Typography/P/P.js";
+import { default as j } from "./components/Input/Input/Input.js";
+import { default as v } from "./components/Input/Textarea/Textarea.js";
+import { default as A } from "./components/Input/Checkbox/Checkbox.js";
+import { default as J } from "./components/Input/RadioGroup/RadioGroup.js";
+import { default as M } from "./components/Input/FileUploader/FileUploader.js";
+import { default as Q } from "./colors/index.js";
+import { default as X } from "./utils/index.js";
+import { default as Z } from "./components/Icons/index.js";
 export {
   S as Button,
-  v as Checkbox,
+  F as Carousel,
+  A as Checkbox,
   c as Dropdown,
-  J as FileUploader,
-  F as Headings,
+  M as FileUploader,
+  H as Headings,
   B as Image,
-  U as Input,
+  j as Input,
   s as Loader,
   n as OtpInput,
-  H as P,
-  u as PageLoader,
+  U as P,
+  m as PageLoader,
   a as Pagination,
-  A as RadioGroup,
-  P as RootComponent,
-  C as Selectbox,
+  J as RadioGroup,
+  C as RootComponent,
+  T as Selectbox,
   R as Shimmer,
   d as Spinner,
-  j as Textarea,
+  v as Textarea,
   h as Timer,
   r as Toast,
   f as ToastContainer,
   w as VideoPlayer,
-  M as colors,
-  X as icons,
-  Q as utils
+  Q as colors,
+  Z as icons,
+  X as utils
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.0.6",
+  "version": "3.1.0",
   "license": "MIT",
   "description": "A comprehensive React UI component library with a wide range of customizable components, icons, colors, and utilities for building modern web applications.",
   "main": "./index.js",