meticulous-ui 3.5.3 → 3.6.0

package/README.md

@@ -58,29 +58,33 @@ import blue from 'meticulous-ui/colors/blue';
 
 ## 📦 Components
 
-| Component       | Description                                                                            |
-| --------------- | -------------------------------------------------------------------------------------- |
-| `Pagination`    | Fully responsive pagination component                                                  |
-| `Toast`         | Push 4 types of notifications on screen                                                |
-| `Timer`         | Renders analog / digital clock with alarm                                              |
-| `OtpInput`      | Gives inputs to enter and edit OTP                                                     |
-| `VideoPlayer`   | Renders video with keyboard shortcuts                                                  |
-| `Image`         | Renders image with shimmer, lower resolution                                           |
-| `Input`         | Renders input box to let user enter input                                              |
-| `Checkbox`      | Renders checkbox to let user give boolean value                                        |
-| `RadioGroup`    | Renders radio options in a group to let user select                                    |
-| `FileUploader`  | Renders a button type input from where user can upload                                 |
-| `Textarea`      | Renders textarea box to let user enter description                                     |
-| `Dropdown`      | Renders dropdown to select from options                                                |
-| `SelectBox`     | Renders selectbox to select multiple values from options                               |
-| `Spinner`       | Renders a spinner to show the loading state                                            |
-| `Loader`        | Renders a loader with dots to show the loading state                                   |
-| `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                         |
-| `Modal`         | Accessible dialog overlay with title, body, footer, and Escape/overlay-click dismissal |
-| `RootComponent` | This is the required wrapper for any app that uses meticulous-ui                       |
+| Component       | Description                                                                                                      |
+| --------------- | ---------------------------------------------------------------------------------------------------------------- |
+| `Pagination`    | Fully responsive pagination component                                                                            |
+| `Toast`         | Push 4 types of notifications on screen                                                                          |
+| `Timer`         | Renders analog / digital clock with alarm                                                                        |
+| `OtpInput`      | Gives inputs to enter and edit OTP                                                                               |
+| `VideoPlayer`   | Renders video with keyboard shortcuts                                                                            |
+| `Image`         | Renders image with shimmer, lower resolution                                                                     |
+| `Input`         | Renders input box to let user enter input                                                                        |
+| `Checkbox`      | Renders checkbox to let user give boolean value                                                                  |
+| `RadioGroup`    | Renders radio options in a group to let user select                                                              |
+| `FileUploader`  | Renders a button type input from where user can upload                                                           |
+| `Textarea`      | Renders textarea box to let user enter description                                                               |
+| `Dropdown`      | Renders dropdown to select from options                                                                          |
+| `Selectbox`     | Renders selectbox to select multiple values from options                                                         |
+| `Spinner`       | Renders a spinner to show the loading state                                                                      |
+| `Loader`        | Renders a loader with dots to show the loading state                                                             |
+| `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                                                   |
+| `Modal`         | Accessible dialog overlay with title, body, footer, Escape/overlay-click dismissal, and mobile bottom-sheet mode |
+| `DatePicker`    | Calendar-based date picker with month/year navigation                                                            |
+| `Headings`      | Semantic heading components: `H1`–`H6`                                                                          |
+| `P`             | Styled paragraph component                                                                                       |
+| `ToastContainer`| Renders the container that displays active Toast notifications                                                   |
+| `RootComponent` | This is the required wrapper for any app that uses meticulous-ui                                                 |
 
 ## 📦 Icon Components
 

package/components/Carousel/Carousel.js

@@ -1,12 +1,12 @@
 import { jsxs as I, jsx as r } from "react/jsx-runtime";
 import { useState as a, useRef as T, useEffect as C } from "react";
-import { Wrapper as ue, SlideArea as de, NavButton as K, SlideViewport as he, SlideTrack as fe, PauseButton as me, ProgressBar as pe, DotsWrapper as ve, Dot as ge } from "./styles.js";
-import we from "../Icons/ChevronLeft/ChevronLeft.js";
-import $e from "../Icons/ChevronRight/ChevronRight.js";
-const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
+import { Wrapper as de, SlideArea as he, NavButton as K, SlideViewport as fe, SlideTrack as me, PauseButton as pe, ProgressBar as ve, DotsWrapper as ge, Dot as we } from "./styles.js";
+import $e from "../Icons/ChevronLeft/ChevronLeft.js";
+import Me from "../Icons/ChevronRight/ChevronRight.js";
+const E = 50, O = 2e3, be = () => /* @__PURE__ */ I("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: [
   /* @__PURE__ */ r("rect", { x: "2", y: "1", width: "3", height: "10", rx: "1" }),
   /* @__PURE__ */ r("rect", { x: "7", y: "1", width: "3", height: "10", rx: "1" })
-] }), be = () => /* @__PURE__ */ r("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) }), Xe = ({
+] }), xe = () => /* @__PURE__ */ r("svg", { width: 12, height: 12, viewBox: "0 0 12 12", fill: "currentColor", "aria-hidden": "true", children: /* @__PURE__ */ r("path", { d: "M2 1.5l9 4.5-9 4.5V1.5z" }) }), ke = ({
   data: R,
   renderCarousel: N,
   visibleSlides: X = 1,
@@ -22,13 +22,14 @@ const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height:
   liveDragMobile: L = !0,
   showProgress: A = !1,
   defaultIndex: Y = 0,
-  onSlideChange: G
+  onSlideChange: G,
+  ...J
 }) => {
-  const [n, M] = a(Y), [B, d] = a(!0), [V, W] = a(!1), [h, f] = a(!1), [J, m] = a(0), [F, p] = a(!1), [y, _] = a(!1), c = T(null), o = T(null), l = T(null), z = T(null);
+  const [n, M] = a(Y), [B, d] = a(!0), [V, W] = a(!1), [h, f] = a(!1), [Q, m] = a(0), [F, p] = a(!1), [y, _] = a(!1), c = T(null), o = T(null), l = T(null), z = T(null);
   C(() => {
     const e = window.matchMedia("(max-width: 1024px)");
     _(e.matches);
-    const t = (le) => _(le.matches);
+    const t = (ue) => _(ue.matches);
     return e.addEventListener("change", t), () => e.removeEventListener("change", t);
   }, []);
   const s = R.length - X, b = () => M((e) => u && e === 0 ? s : Math.max(e - 1, 0)), x = () => M((e) => u && e >= s ? 0 : Math.min(e + 1, s));
@@ -37,9 +38,9 @@ const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height:
   }, [n]);
   const H = () => {
     i && (clearTimeout(l.current), d(!0), l.current = setTimeout(() => d(!1), O));
-  }, Q = () => {
-    f(!0), i && (clearTimeout(l.current), d(!0));
   }, Z = () => {
+    f(!0), i && (clearTimeout(l.current), d(!0));
+  }, ee = () => {
     f(!1), i && (l.current = setTimeout(() => d(!1), O));
   };
   C(() => {
@@ -52,44 +53,45 @@ const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height:
     }, k * 1e3);
     return () => clearInterval(e);
   }, [g, k, h, s]);
-  const S = (e) => u ? e : n === 0 && e > 0 || n === s && e < 0 ? e * 0.3 : e, ee = (e) => {
+  const S = (e) => u ? e : n === 0 && e > 0 || n === s && e < 0 ? e * 0.3 : e, te = (e) => {
     c.current = e.touches[0].clientX, L && y && p(!0), H();
-  }, te = (e) => {
-    !L || !y || c.current === null || m(S(e.touches[0].clientX - c.current));
   }, re = (e) => {
+    !L || !y || c.current === null || m(S(e.touches[0].clientX - c.current));
+  }, ne = (e) => {
     if (L && y && (p(!1), m(0)), c.current === null) return;
     const t = c.current - e.changedTouches[0].clientX;
     t > E ? x() : t < -E && b(), c.current = null;
-  }, ne = (e) => {
-    w && (o.current = e.clientX, $ && p(!0));
   }, se = (e) => {
-    !w || !$ || o.current === null || m(S(e.clientX - o.current));
+    w && (o.current = e.clientX, $ && p(!0));
   }, ie = (e) => {
+    !w || !$ || o.current === null || m(S(e.clientX - o.current));
+  }, oe = (e) => {
     if (!w || o.current === null) return;
     $ && (p(!1), m(0));
     const t = o.current - e.clientX;
     t > E ? x() : t < -E && b(), o.current = null;
-  }, oe = (e) => {
+  }, ae = (e) => {
     e.key === "ArrowLeft" ? (e.preventDefault(), b()) : e.key === "ArrowRight" && (e.preventDefault(), x());
-  }, U = z.current?.clientWidth ?? 0, ae = U > 0 ? J / U * 100 : 0, ce = -(n * (100 / X)) + ae, j = v !== void 0 ? typeof v == "number" ? `${v}px` : v : void 0, D = s + 1;
+  }, U = z.current?.clientWidth ?? 0, ce = U > 0 ? Q / U * 100 : 0, le = -(n * (100 / X)) + ce, j = v !== void 0 ? typeof v == "number" ? `${v}px` : v : void 0, D = s + 1;
   return /* @__PURE__ */ I(
-    ue,
+    de,
     {
       onClick: H,
-      onMouseEnter: Q,
-      onMouseLeave: Z,
-      onMouseMove: se,
-      onMouseUp: ie,
-      onKeyDown: oe,
+      onMouseEnter: Z,
+      onMouseLeave: ee,
+      onMouseMove: ie,
+      onMouseUp: oe,
+      onKeyDown: ae,
       role: "region",
       "aria-label": "Carousel",
+      ...J,
       children: [
         /* @__PURE__ */ I(
-          de,
+          he,
           {
-            onTouchStart: ee,
-            onTouchMove: te,
-            onTouchEnd: re,
+            onTouchStart: te,
+            onTouchMove: re,
+            onTouchEnd: ne,
             children: [
               P && /* @__PURE__ */ r(
                 K,
@@ -102,11 +104,11 @@ const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height:
                   $visible: B,
                   $arrowTop: j,
                   $viewportFocused: V,
-                  children: /* @__PURE__ */ r(we, { size: 20, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ r($e, { size: 20, "aria-hidden": "true" })
                 }
               ),
               /* @__PURE__ */ r(
-                he,
+                fe,
                 {
                   ref: z,
                   tabIndex: 0,
@@ -118,11 +120,11 @@ const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height:
                   onBlur: () => {
                     W(!1), f(!1);
                   },
-                  onMouseDown: ne,
+                  onMouseDown: se,
                   onMouseLeave: (e) => {
                     e.buttons !== 1 && ($ && F && (p(!1), m(0)), o.current = null);
                   },
-                  children: /* @__PURE__ */ r(fe, { $translateX: ce, $visibleSlides: X, $dragging: F, children: R.map(N) })
+                  children: /* @__PURE__ */ r(me, { $translateX: le, $visibleSlides: X, $dragging: F, children: R.map(N) })
                 }
               ),
               P && /* @__PURE__ */ r(
@@ -136,15 +138,15 @@ const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height:
                   $visible: B,
                   $arrowTop: j,
                   $viewportFocused: V,
-                  children: /* @__PURE__ */ r($e, { size: 20, "aria-hidden": "true" })
+                  children: /* @__PURE__ */ r(Me, { size: 20, "aria-hidden": "true" })
                 }
               ),
               g && /* @__PURE__ */ r(
-                me,
+                pe,
                 {
                   onClick: () => f((e) => !e),
                   "aria-label": h ? "Play slideshow" : "Pause slideshow",
-                  children: h ? /* @__PURE__ */ r(be, {}) : /* @__PURE__ */ r(Me, {})
+                  children: h ? /* @__PURE__ */ r(xe, {}) : /* @__PURE__ */ r(be, {})
                 }
               )
             ]
@@ -171,9 +173,9 @@ const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height:
             ]
           }
         ),
-        g && A && /* @__PURE__ */ r(pe, { $duration: k, $paused: h }, n),
-        !q && /* @__PURE__ */ r(ve, { children: Array.from({ length: D }).map((e, t) => /* @__PURE__ */ r(
-          ge,
+        g && A && /* @__PURE__ */ r(ve, { $duration: k, $paused: h }, n),
+        !q && /* @__PURE__ */ r(ge, { children: Array.from({ length: D }).map((e, t) => /* @__PURE__ */ r(
+          we,
           {
             $active: t === n,
             onClick: () => M(t),
@@ -187,5 +189,5 @@ const E = 50, O = 2e3, Me = () => /* @__PURE__ */ I("svg", { width: 12, height:
   );
 };
 export {
-  Xe as default
+  ke as default
 };

package/components/DatePicker/DatePicker.js

@@ -0,0 +1,223 @@
+import { jsxs as c, jsx as n, Fragment as ve } from "react/jsx-runtime";
+import { useMemo as Ce, useState as a, useCallback as Le } from "react";
+import ye from "../../colors/colorMap.js";
+import { blue as De } from "../../colors/blue.js";
+import { MODE as l, MONTHS as Q, DAYS_SHORT as Ge } from "./constants.js";
+import { buildCalendarGrid as Me, formatDate as H, isToday as $e, isSameDay as U, isRangeStart as Ye, isRangeEnd as be, isInRange as we } from "./utils.js";
+import { Wrapper as Ie, SelectedDisplay as Pe, DateChip as x, RangeArrow as Te, ModeToggle as _e, ModeBtn as X, Nav as He, NavBtn as Z, MonthLabel as ee, Footer as xe, ActionBtn as ne, Grid as Oe, DayHeader as Be, DayCell as je, DayBtn as Fe, PickerGrid as We, PickerItem as re, YearScroll as Ve } from "./styles.js";
+const qe = () => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ n("polyline", { points: "15 18 9 12 15 6" })
+  }
+), ze = () => /* @__PURE__ */ n(
+  "svg",
+  {
+    width: "16",
+    height: "16",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2.5",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    children: /* @__PURE__ */ n("polyline", { points: "9 18 15 12 9 6" })
+  }
+), i = { CALENDAR: "calendar", MONTH: "month", YEAR: "year" }, Je = /* @__PURE__ */ new Date(), le = 1924, Ke = Je.getFullYear() + 20, Qe = Array.from(
+  { length: Ke - le + 1 },
+  (L, y) => le + y
+), tn = ({
+  theme: L = "blue",
+  mode: y = l.SINGLE,
+  value: te,
+  rangeValue: O,
+  onChange: E,
+  minDate: D,
+  maxDate: G,
+  showModeToggle: ie = !0,
+  showFooter: M = !0
+}) => {
+  const $ = Ce(() => ye[L] ?? De, [L]), o = $.m500, Y = $.m700, f = $.m100, b = { $primary: o, $primaryDark: Y, $primaryLight: f }, B = /* @__PURE__ */ new Date(), [t, oe] = a(y), [w, I] = a(B.getFullYear()), [A, R] = a(B.getMonth()), [u, m] = a(i.CALENDAR), [N, P] = a(te ?? null), [r, T] = a(O?.[0] ?? null), [d, g] = a(O?.[1] ?? null), [S, k] = a(null), [v, C] = a(!1), ce = Me(w, A), j = Le(
+    (e) => !!(!e || D && e < D || G && e > G),
+    [D, G]
+  ), se = () => {
+    A === 0 ? (R(11), I((e) => e - 1)) : R((e) => e - 1);
+  }, ae = () => {
+    A === 11 ? (R(0), I((e) => e + 1)) : R((e) => e + 1);
+  }, de = (e) => {
+    if (!(!e || j(e))) {
+      if (t === l.SINGLE) {
+        P(e), M || E?.(e);
+        return;
+      }
+      !v || !r ? (T(e), g(null), C(!0)) : (g(e), C(!1), M || E?.([
+        e <= r ? e : r,
+        e <= r ? r : e
+      ]));
+    }
+  }, F = (e) => {
+    oe(e), P(null), T(null), g(null), C(!1), k(null);
+  }, he = () => {
+    if (t === l.SINGLE)
+      E?.(N);
+    else if (r && d) {
+      const [e, p] = r <= d ? [r, d] : [d, r];
+      E?.([e, p]);
+    }
+  }, ue = () => {
+    P(null), T(null), g(null), C(!1), k(null), E?.(t === l.SINGLE ? null : [null, null]);
+  }, h = v && S ? S : d, W = (e) => t === l.RANGE && Ye(e, r, h), V = (e) => t === l.RANGE && be(e, r, h), pe = (e) => t === l.RANGE && we(e, r, h), Ee = (e) => t === l.SINGLE ? U(e, N) : W(e) || V(e), q = t === l.SINGLE ? H(N) : H(
+    r ? r <= (h ?? r) ? r : h : null
+  ), Ae = t === l.RANGE ? H(h ? h >= r ? h : r : null) : null, Re = t === l.SINGLE ? !N : !r || !d, Ne = () => /* @__PURE__ */ n(We, { children: Q.map((e, p) => /* @__PURE__ */ n(
+    re,
+    {
+      $active: p === A,
+      ...b,
+      onClick: () => {
+        R(p), m(i.CALENDAR);
+      },
+      children: e.slice(0, 3)
+    },
+    e
+  )) }), fe = () => /* @__PURE__ */ n(Ve, { children: Qe.map((e) => /* @__PURE__ */ n(
+    re,
+    {
+      $active: e === w,
+      ...b,
+      onClick: () => {
+        I(e), m(i.CALENDAR);
+      },
+      children: e
+    },
+    e
+  )) }), me = () => /* @__PURE__ */ c(Oe, { children: [
+    Ge.map((e) => /* @__PURE__ */ n(Be, { children: e }, e)),
+    ce.map((e, p) => {
+      const s = !e, z = j(e), _ = !s && Ee(e), ge = !s && $e(e), J = !s && W(e), K = !s && V(e), Se = !s && pe(e), ke = !s && S && U(e, S);
+      return /* @__PURE__ */ n(
+        je,
+        {
+          $inRange: Se || J || K,
+          $rangeStart: J,
+          $rangeEnd: K,
+          $primaryLight: f,
+          children: /* @__PURE__ */ n(
+            Fe,
+            {
+              $empty: s,
+              $selected: _,
+              $today: ge,
+              $hovered: ke && !_,
+              disabled: z,
+              ...b,
+              onClick: () => de(e),
+              onMouseEnter: () => !s && k(e),
+              onMouseLeave: () => k(null),
+              "aria-label": e ? e.toDateString() : void 0,
+              "aria-pressed": _,
+              tabIndex: s || z ? -1 : 0,
+              children: e?.getDate()
+            }
+          )
+        },
+        p
+      );
+    })
+  ] });
+  return /* @__PURE__ */ c(Ie, { children: [
+    /* @__PURE__ */ n(Pe, { children: t === l.RANGE ? /* @__PURE__ */ c(ve, { children: [
+      /* @__PURE__ */ c(x, { $active: v || !r && !d, $primary: o, children: [
+        /* @__PURE__ */ n("span", { children: "From" }),
+        q
+      ] }),
+      /* @__PURE__ */ n(Te, { children: "→" }),
+      /* @__PURE__ */ c(x, { $active: !v && !!d, $primary: o, children: [
+        /* @__PURE__ */ n("span", { children: "To" }),
+        Ae
+      ] })
+    ] }) : /* @__PURE__ */ c(x, { $active: !!N, $primary: o, style: { flex: "none", width: "100%" }, children: [
+      /* @__PURE__ */ n("span", { children: "Selected" }),
+      q
+    ] }) }),
+    ie && /* @__PURE__ */ c(_e, { children: [
+      /* @__PURE__ */ n(
+        X,
+        {
+          $active: t === l.SINGLE,
+          $primary: o,
+          onClick: () => F(l.SINGLE),
+          children: "Single"
+        }
+      ),
+      /* @__PURE__ */ n(
+        X,
+        {
+          $active: t === l.RANGE,
+          $primary: o,
+          onClick: () => F(l.RANGE),
+          children: "Range"
+        }
+      )
+    ] }),
+    /* @__PURE__ */ c(He, { children: [
+      /* @__PURE__ */ n(Z, { $primary: o, onClick: se, "aria-label": "Previous month", children: /* @__PURE__ */ n(qe, {}) }),
+      /* @__PURE__ */ c("div", { style: { display: "flex", gap: 4 }, children: [
+        /* @__PURE__ */ n(
+          ee,
+          {
+            $primary: o,
+            onClick: () => m(u === i.MONTH ? i.CALENDAR : i.MONTH),
+            children: Q[A]
+          }
+        ),
+        /* @__PURE__ */ n(
+          ee,
+          {
+            $primary: o,
+            onClick: () => m(u === i.YEAR ? i.CALENDAR : i.YEAR),
+            children: w
+          }
+        )
+      ] }),
+      /* @__PURE__ */ n(Z, { $primary: o, onClick: ae, "aria-label": "Next month", children: /* @__PURE__ */ n(ze, {}) })
+    ] }),
+    u === i.CALENDAR && me(),
+    u === i.MONTH && Ne(),
+    u === i.YEAR && fe(),
+    M && u === i.CALENDAR && /* @__PURE__ */ c(xe, { children: [
+      /* @__PURE__ */ n(
+        ne,
+        {
+          $primary: o,
+          $primaryDark: Y,
+          $primaryLight: f,
+          onClick: ue,
+          children: "Clear"
+        }
+      ),
+      /* @__PURE__ */ n(
+        ne,
+        {
+          $isPrimary: !0,
+          $primary: o,
+          $primaryDark: Y,
+          $primaryLight: f,
+          disabled: Re,
+          onClick: he,
+          children: "Apply"
+        }
+      )
+    ] })
+  ] });
+};
+export {
+  tn as default
+};

package/components/DatePicker/constants.js

@@ -0,0 +1,22 @@
+const e = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+], r = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], u = {
+  SINGLE: "single",
+  RANGE: "range"
+};
+export {
+  r as DAYS_SHORT,
+  u as MODE,
+  e as MONTHS
+};

package/components/DatePicker/index.js

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

package/components/DatePicker/styles.js

@@ -0,0 +1,264 @@
+import n, { keyframes as i, css as s } from "styled-components";
+const a = i`
+  from { opacity: 0; transform: translateY(6px); }
+  to   { opacity: 1; transform: translateY(0); }
+`, d = n.div`
+  display: inline-flex;
+  flex-direction: column;
+  background: #ffffff;
+  border-radius: 20px;
+  box-shadow:
+    0 8px 40px rgba(0, 0, 0, 0.12),
+    0 2px 8px rgba(0, 0, 0, 0.06);
+  padding: 20px;
+  width: 320px;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  animation: ${a} 0.22s ease;
+  user-select: none;
+`, c = n.div`
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  margin-bottom: 16px;
+`, f = n.div`
+  flex: 1;
+  background: ${({ $active: o, $primary: t }) => o ? t : "#f1f3f4"};
+  color: ${({ $active: o }) => o ? "#fff" : "#5f6368"};
+  border-radius: 12px;
+  padding: 10px 14px;
+  font-size: 13px;
+  font-weight: 500;
+  transition:
+    background 0.18s,
+    color 0.18s;
+
+  span {
+    display: block;
+    font-size: 10px;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.6px;
+    opacity: 0.7;
+    margin-bottom: 2px;
+  }
+`, l = n.div`
+  color: #bdc1c6;
+  font-size: 16px;
+  flex-shrink: 0;
+`, x = n.div`
+  display: flex;
+  background: #f1f3f4;
+  border-radius: 10px;
+  padding: 3px;
+  margin-bottom: 16px;
+`, u = n.button`
+  flex: 1;
+  border: none;
+  background: ${({ $active: o }) => o ? "#fff" : "transparent"};
+  color: ${({ $active: o, $primary: t }) => o ? t : "#5f6368"};
+  border-radius: 8px;
+  padding: 6px 0;
+  font-size: 12px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.15s,
+    color 0.15s;
+  box-shadow: ${({ $active: o }) => o ? "0 1px 4px rgba(0,0,0,0.1)" : "none"};
+
+  &:focus-visible {
+    outline: 2px solid ${({ $primary: o }) => o};
+    outline-offset: 2px;
+  }
+`, g = n.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 12px;
+`, b = n.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  width: 32px;
+  height: 32px;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #5f6368;
+  transition:
+    background 0.15s,
+    color 0.15s;
+
+  &:hover {
+    background: #f1f3f4;
+    color: ${({ $primary: o }) => o};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ $primary: o }) => o};
+  }
+`, m = n.button`
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 14px;
+  font-weight: 600;
+  color: #202124;
+  padding: 4px 8px;
+  border-radius: 8px;
+  transition: background 0.15s;
+
+  &:hover {
+    background: #f1f3f4;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ $primary: o }) => o};
+  }
+`, y = n.div`
+  display: grid;
+  grid-template-columns: repeat(7, 1fr);
+  gap: 0;
+`, h = n.div`
+  text-align: center;
+  font-size: 11px;
+  font-weight: 600;
+  color: #9aa0a6;
+  padding: 4px 0 8px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+`, v = n.div`
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 36px;
+
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 4px 0;
+    background: ${({ $inRange: o, $primaryLight: t }) => o ? t : "transparent"};
+    border-radius: ${({ $rangeStart: o, $rangeEnd: t }) => o ? "50% 0 0 50%" : t ? "0 50% 50% 0" : "0"};
+    pointer-events: none;
+  }
+`, $ = n.button`
+  position: relative;
+  z-index: 1;
+  width: 32px;
+  height: 32px;
+  border: none;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: ${({ $empty: o, disabled: t }) => o || t ? "default" : "pointer"};
+  background: ${({ $selected: o, $hovered: t, $primary: e, $primaryLight: r }) => o ? e : t ? r : "transparent"};
+  color: ${({ $selected: o, $today: t, disabled: e, $primary: r }) => o ? "#fff" : e ? "#dadce0" : t ? r : "#202124"};
+  outline: ${({ $today: o, $selected: t, $primary: e }) => o && !t ? `2px solid ${e}` : "none"};
+  outline-offset: -2px;
+  transition:
+    background 0.12s,
+    color 0.12s;
+  pointer-events: ${({ $empty: o, disabled: t }) => o || t ? "none" : "auto"};
+
+  ${({ $empty: o }) => o && s`
+      visibility: hidden;
+    `}
+
+  &:hover {
+    background: ${({ $selected: o, $primary: t, $primaryDark: e, $primaryLight: r }) => o ? e : r};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ $primary: o }) => o};
+  }
+`, k = n.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  padding: 4px 0;
+`, w = n.button`
+  border: none;
+  background: ${({ $active: o, $primary: t }) => o ? t : "transparent"};
+  color: ${({ $active: o }) => o ? "#fff" : "#202124"};
+  border-radius: 10px;
+  padding: 8px 4px;
+  font-size: 13px;
+  font-weight: 500;
+  cursor: pointer;
+  transition:
+    background 0.13s,
+    color 0.13s;
+
+  &:hover {
+    background: ${({ $active: o, $primaryDark: t }) => o ? t : "#f1f3f4"};
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ $primary: o }) => o};
+  }
+`, z = n.div`
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: 6px;
+  max-height: 210px;
+  overflow-y: auto;
+  padding: 4px 0;
+  scrollbar-width: thin;
+`, j = n.div`
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+  margin-top: 16px;
+  padding-top: 12px;
+  border-top: 1px solid #f1f3f4;
+`, B = n.button`
+  border: none;
+  background: ${({ $isPrimary: o, $primary: t }) => o ? t : "transparent"};
+  color: ${({ $isPrimary: o, $primary: t }) => o ? "#fff" : t};
+  border-radius: 8px;
+  padding: 7px 16px;
+  font-size: 13px;
+  font-weight: 600;
+  cursor: pointer;
+  transition:
+    background 0.14s,
+    opacity 0.14s;
+
+  &:hover {
+    background: ${({ $isPrimary: o, $primaryDark: t, $primaryLight: e }) => o ? t : e};
+  }
+
+  &:disabled {
+    opacity: 0.4;
+    cursor: default;
+  }
+
+  &:focus-visible {
+    outline: 2px solid ${({ $primary: o }) => o};
+  }
+`;
+export {
+  B as ActionBtn,
+  f as DateChip,
+  $ as DayBtn,
+  v as DayCell,
+  h as DayHeader,
+  j as Footer,
+  y as Grid,
+  u as ModeBtn,
+  x as ModeToggle,
+  m as MonthLabel,
+  g as Nav,
+  b as NavBtn,
+  k as PickerGrid,
+  w as PickerItem,
+  l as RangeArrow,
+  c as SelectedDisplay,
+  d as Wrapper,
+  z as YearScroll
+};

package/components/DatePicker/utils.js

@@ -0,0 +1,21 @@
+const i = (e, t) => new Date(e, t + 1, 0).getDate(), u = (e, t) => new Date(e, t, 1).getDay(), a = (e, t) => e && t && e.getFullYear() === t.getFullYear() && e.getMonth() === t.getMonth() && e.getDate() === t.getDate(), c = (e) => a(e, /* @__PURE__ */ new Date()), g = (e, t, n) => {
+  if (!t || !n) return !1;
+  const [s, r] = t <= n ? [t, n] : [n, t];
+  return e > s && e < r;
+}, l = (e, t, n) => !t || !n ? !1 : a(e, t <= n ? t : n), D = (e, t, n) => !t || !n ? !1 : a(e, t <= n ? n : t), f = (e) => e ? e.toLocaleDateString("en-US", { month: "short", day: "numeric", year: "numeric" }) : "—", y = (e, t) => {
+  const n = i(e, t), s = u(e, t), r = [];
+  for (let o = 0; o < s; o++) r.push(null);
+  for (let o = 1; o <= n; o++) r.push(new Date(e, t, o));
+  return r;
+};
+export {
+  y as buildCalendarGrid,
+  f as formatDate,
+  i as getDaysInMonth,
+  u as getFirstDayOfMonth,
+  g as isInRange,
+  D as isRangeEnd,
+  l as isRangeStart,
+  a as isSameDay,
+  c as isToday
+};

package/components/Modal/Modal.js

@@ -1,8 +1,8 @@
-import { jsx as e, jsxs as d } from "react/jsx-runtime";
-import { useCallback as m, useEffect as h } from "react";
-import { createPortal as f } from "react-dom";
-import { Overlay as k, ModalContainer as v, ModalHeader as w, ModalTitle as x, CloseButton as b, ModalBody as g, ModalFooter as p } from "./styles.js";
-const C = () => /* @__PURE__ */ d(
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import { useState as w, useRef as s, useId as j, useEffect as f, useCallback as T, isValidElement as A } from "react";
+import { createPortal as B } from "react-dom";
+import { Overlay as D, ModalContainer as K, ModalHeader as q, ModalTitle as F, CloseButton as H, ModalBody as P, ModalFooter as U } from "./styles.js";
+const M = 'a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"])', V = () => /* @__PURE__ */ m(
   "svg",
   {
     width: "18",
@@ -13,49 +13,79 @@ const C = () => /* @__PURE__ */ d(
     strokeWidth: "2.5",
     strokeLinecap: "round",
     strokeLinejoin: "round",
+    "aria-hidden": "true",
     children: [
-      /* @__PURE__ */ e("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
-      /* @__PURE__ */ e("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+      /* @__PURE__ */ t("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+      /* @__PURE__ */ t("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
     ]
   }
-), T = ({
-  isOpen: n,
-  onClose: o,
-  title: l,
-  children: c,
-  footer: a,
-  footerAlign: u = "right",
-  width: y,
-  closeOnOverlayClick: s = !0,
-  showCloseButton: i = !0
+), Q = ({
+  isOpen: r,
+  onClose: l,
+  title: n,
+  children: R,
+  footer: h,
+  footerAlign: p = "right",
+  width: I,
+  closeOnOverlayClick: L = !0,
+  showCloseButton: y = !0,
+  isFullOnMobile: b = !1,
+  ...S
 }) => {
-  const t = m(
-    (r) => {
-      r.key === "Escape" && o?.();
+  const [v, g] = w(r), [$, i] = w(!1), c = s(null), o = s(null), k = s(null), a = j();
+  f(() => (r ? (clearTimeout(c.current), k.current = document.activeElement, g(!0), i(!1)) : (i(!0), c.current = setTimeout(() => {
+    i(!1), g(!1), k.current?.focus();
+  }, 220)), () => clearTimeout(c.current)), [r]), f(() => {
+    if (!r || !o.current) return;
+    (o.current.querySelectorAll(M)[0] ?? o.current).focus();
+  }, [r, v]);
+  const x = T((e) => {
+    if (e.key !== "Tab" || !o.current) return;
+    const d = [...o.current.querySelectorAll(M)];
+    if (!d.length) return;
+    const C = d[0], E = d[d.length - 1];
+    e.shiftKey ? document.activeElement === C && (e.preventDefault(), E.focus()) : document.activeElement === E && (e.preventDefault(), C.focus());
+  }, []), u = T(
+    (e) => {
+      e.key === "Escape" && l?.(), x(e);
     },
-    [o]
+    [l, x]
   );
-  return h(() => {
-    if (!n) return;
-    document.addEventListener("keydown", t);
-    const r = document.body.style.overflow;
+  return f(() => {
+    if (!r) return;
+    document.addEventListener("keydown", u);
+    const e = document.body.style.overflow;
     return document.body.style.overflow = "hidden", () => {
-      document.removeEventListener("keydown", t), document.body.style.overflow = r;
+      document.removeEventListener("keydown", u), document.body.style.overflow = e;
     };
-  }, [n, t]), n ? f(
-    /* @__PURE__ */ e(k, { role: "dialog", "aria-modal": "true", "aria-label": l, onClick: (r) => {
-      s && r.target === r.currentTarget && o?.();
-    }, children: /* @__PURE__ */ d(v, { $width: y, children: [
-      (l || i) && /* @__PURE__ */ d(w, { children: [
-        l && /* @__PURE__ */ e(x, { children: l }),
-        i && /* @__PURE__ */ e(b, { onClick: o, "aria-label": "Close modal", children: /* @__PURE__ */ e(C, {}) })
-      ] }),
-      /* @__PURE__ */ e(g, { children: c }),
-      a && /* @__PURE__ */ e(p, { $align: u, children: a })
-    ] }) }),
+  }, [r, u]), v ? B(
+    /* @__PURE__ */ t(D, { onClick: (e) => {
+      L && e.target === e.currentTarget && l?.();
+    }, $fullOnMobile: b, children: /* @__PURE__ */ m(
+      K,
+      {
+        ref: o,
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-labelledby": n ? a : void 0,
+        tabIndex: -1,
+        $width: I,
+        $fullOnMobile: b,
+        $isClosing: $,
+        ...S,
+        children: [
+          (n || y) && /* @__PURE__ */ m(q, { children: [
+            n && (A(n) ? /* @__PURE__ */ t("div", { id: a, children: n }) : /* @__PURE__ */ t(F, { id: a, children: n })),
+            y && /* @__PURE__ */ t(H, { onClick: l, "aria-label": "Close modal", children: /* @__PURE__ */ t(V, {}) })
+          ] }),
+          /* @__PURE__ */ t(P, { children: R }),
+          h && /* @__PURE__ */ t(U, { $align: p, children: h })
+        ]
+      }
+    ) }),
     document.body
   ) : null;
 };
 export {
-  T as default
+  Q as default
 };

package/components/Modal/styles.js

@@ -1,13 +1,22 @@
-import o, { css as r, keyframes as n } from "styled-components";
-import e from "../../colors/grey.js";
-import i from "../../colors/white.js";
-const s = n`
+import e, { css as n, keyframes as r } from "styled-components";
+import t from "../../colors/grey.js";
+import a from "../../colors/white.js";
+const s = r`
   from { opacity: 0; }
   to { opacity: 1; }
-`, a = n`
-  from { opacity: 0; transform: translateY(1.5rem); }
-  to { opacity: 1; transform: translateY(0); }
-`, m = o.div`
+`, d = r`
+  from { opacity: 0; transform: scale(0.95); }
+  to { opacity: 1; transform: scale(1); }
+`, m = r`
+  from { opacity: 1; transform: scale(1); }
+  to { opacity: 0; transform: scale(0.95); }
+`, l = r`
+  from { transform: translateY(100%); }
+  to { transform: translateY(0); }
+`, c = r`
+  from { transform: translateY(0); }
+  to { transform: translateY(100%); }
+`, g = e.div`
   position: fixed;
   inset: 0;
   background-color: rgba(0, 0, 0, 0.5);
@@ -17,30 +26,49 @@ const s = n`
   z-index: 1000;
   animation: ${s} 0.2s ease;
   padding: 1rem;
-`, f = o.div`
-  background-color: ${i};
+
+  ${({ $fullOnMobile: o }) => o && n`
+      @media (max-width: 640px) {
+        align-items: flex-end;
+        padding: 0;
+      }
+    `}
+`, h = e.div`
+  background-color: ${a};
   border-radius: 1rem;
   box-shadow: 0 1.5rem 4rem rgba(0, 0, 0, 0.2);
   display: flex;
   flex-direction: column;
   max-height: 90vh;
-  width: ${({ $width: t }) => t || "32rem"};
+  width: ${({ $width: o }) => o || "32rem"};
   max-width: 100%;
-  animation: ${a} 0.25s ease;
-`, p = o.div`
+  animation: ${({ $isClosing: o }) => o ? m : d} 0.3s ease forwards;
+
+  ${({ $fullOnMobile: o, $isClosing: i }) => o && n`
+      @media (max-width: 640px) {
+        width: 100%;
+        max-width: 100%;
+        max-height: 95dvh;
+        border-bottom-left-radius: 0;
+        border-bottom-right-radius: 0;
+        animation: ${i ? c : l} 0.22s
+          cubic-bezier(0.32, 0.72, 0, 1) ${i ? "forwards" : ""};
+      }
+    `}
+`, u = e.div`
   display: flex;
   align-items: center;
   justify-content: space-between;
   padding: 1.25rem 1.5rem;
-  border-bottom: 1px solid ${e.m200};
+  border-bottom: 1px solid ${t.m200};
   flex-shrink: 0;
-`, g = o.h2`
+`, b = e.h2`
   margin: 0;
   font-size: 2.4rem;
   font-weight: 600;
-  color: ${e.m900};
+  color: ${t.m900};
   line-height: 1.4;
-`, x = o.button`
+`, y = e.button`
   background: none;
   border: none;
   cursor: pointer;
@@ -48,7 +76,7 @@ const s = n`
   display: flex;
   align-items: center;
   justify-content: center;
-  color: ${e.m500};
+  color: ${t.m500};
   border-radius: 0.5rem;
   transition:
     background-color 0.15s,
@@ -56,44 +84,44 @@ const s = n`
   flex-shrink: 0;
 
   &:hover {
-    background-color: ${e.m100};
-    color: ${e.m800};
+    background-color: ${t.m100};
+    color: ${t.m800};
   }
 
   &:focus-visible {
-    outline: 2px solid ${e.m400};
+    outline: 2px solid ${t.m400};
     outline-offset: 2px;
   }
-`, u = o.div`
+`, $ = e.div`
   padding: 1.5rem;
   overflow-y: auto;
   flex: 1;
-  color: ${e.m700};
+  color: ${t.m700};
   font-size: 0.95rem;
   line-height: 1.6;
-`, y = o.div`
+`, w = e.div`
   display: flex;
   align-items: center;
   justify-content: flex-end;
   gap: 0.75rem;
   padding: 1rem 1.5rem;
-  border-top: 1px solid ${e.m200};
+  border-top: 1px solid ${t.m200};
   flex-shrink: 0;
 
-  ${({ $align: t }) => t === "left" && r`
+  ${({ $align: o }) => o === "left" && n`
       justify-content: flex-start;
     `}
 
-  ${({ $align: t }) => t === "center" && r`
+  ${({ $align: o }) => o === "center" && n`
       justify-content: center;
     `}
 `;
 export {
-  x as CloseButton,
-  u as ModalBody,
-  f as ModalContainer,
-  y as ModalFooter,
-  p as ModalHeader,
-  g as ModalTitle,
-  m as Overlay
+  y as CloseButton,
+  $ as ModalBody,
+  h as ModalContainer,
+  w as ModalFooter,
+  u as ModalHeader,
+  b as ModalTitle,
+  g as Overlay
 };

package/index.d.ts

@@ -119,13 +119,16 @@ export declare const ToastContainer: React.FC<ToastContainerProps>;
 export interface ModalProps {
   isOpen: boolean;
   onClose: () => void;
-  title?: string;
+  /** String or any React element (e.g. heading + badge). Strings are wrapped in the default ModalTitle style; elements are rendered as-is. */
+  title?: React.ReactNode;
   children?: React.ReactNode;
   footer?: React.ReactNode;
   footerAlign?: 'left' | 'center' | 'right';
   width?: string | number;
   closeOnOverlayClick?: boolean;
   showCloseButton?: boolean;
+  /** On viewports ≤ 640 px the modal fills the screen width and slides up from the bottom. On desktop it behaves as a normal centered modal. */
+  isFullOnMobile?: boolean;
 }
 
 export declare const Modal: React.FC<ModalProps>;
@@ -272,6 +275,36 @@ export interface DropdownProps extends Omit<React.HTMLAttributes<HTMLDivElement>
 
 export declare const Dropdown: React.FC<DropdownProps>;
 
+// ---------------------------------------------------------------------------
+// DatePicker
+// ---------------------------------------------------------------------------
+
+export type DatePickerMode = 'single' | 'range';
+
+export interface DatePickerSingleProps {
+  mode?: 'single';
+  value?: Date | null;
+  rangeValue?: never;
+  onChange?: (value: Date | null) => void;
+}
+
+export interface DatePickerRangeProps {
+  mode: 'range';
+  value?: never;
+  rangeValue?: [Date | null, Date | null];
+  onChange?: (value: [Date, Date] | [null, null]) => void;
+}
+
+export type DatePickerProps = (DatePickerSingleProps | DatePickerRangeProps) & {
+  theme?: ThemeColor;
+  minDate?: Date;
+  maxDate?: Date;
+  showModeToggle?: boolean;
+  showFooter?: boolean;
+};
+
+export declare const DatePicker: React.FC<DatePickerProps>;
+
 // ---------------------------------------------------------------------------
 // Selectbox
 // ---------------------------------------------------------------------------

package/index.js

@@ -4,46 +4,48 @@ import { default as p } from "./components/Spinner/Spinner.js";
 import { default as m } from "./components/Loader/Loader.js";
 import { default as s } from "./components/PageLoader/PageLoader.js";
 import { default as n } from "./components/OtpInput/OtpInput.js";
-import { default as g } from "./components/Dropdown/Dropdown.js";
-import { default as P } from "./components/RootComponent/RootComponent.js";
-import { default as I } from "./components/Selectbox/Selectbox.js";
-import { default as b } from "./components/Button/Button.js";
+import { default as P } from "./components/Dropdown/Dropdown.js";
+import { default as C } from "./components/RootComponent/RootComponent.js";
+import { default as c } from "./components/Selectbox/Selectbox.js";
+import { default as S } from "./components/Button/Button.js";
 import { default as h } from "./components/Modal/Modal.js";
-import { default as R } from "./components/Timer/Timer.js";
-import { default as w } from "./components/Shimmer/Shimmer.js";
-import { default as B } from "./components/VideoPlayer/VideoPlayer.js";
+import { default as D } from "./components/Timer/Timer.js";
+import { default as R } from "./components/Shimmer/Shimmer.js";
+import { default as y } from "./components/VideoPlayer/VideoPlayer.js";
 import { default as F } from "./components/Image/Image.js";
 import { default as H } from "./components/Carousel/Carousel.js";
 import { default as O } from "./components/Typography/Headings/index.js";
 import { default as V } from "./components/Typography/P/P.js";
-import { default as q } from "./components/Input/Input/Input.js";
-import { default as z } from "./components/Input/Textarea/Textarea.js";
-import { default as E } from "./components/Input/Checkbox/Checkbox.js";
-import { default as K } from "./components/Input/RadioGroup/RadioGroup.js";
-import { default as Q } from "./components/Input/FileUploader/FileUploader.js";
+import { default as q } from "./components/DatePicker/DatePicker.js";
+import { default as z } from "./components/Input/Input/Input.js";
+import { default as E } from "./components/Input/Textarea/Textarea.js";
+import { default as K } from "./components/Input/Checkbox/Checkbox.js";
+import { default as Q } from "./components/Input/RadioGroup/RadioGroup.js";
+import { default as X } from "./components/Input/FileUploader/FileUploader.js";
 export {
-  b as Button,
+  S as Button,
   H as Carousel,
-  E as Checkbox,
-  g as Dropdown,
-  Q as FileUploader,
+  K as Checkbox,
+  q as DatePicker,
+  P as Dropdown,
+  X as FileUploader,
   O as Headings,
   F as Image,
-  q as Input,
+  z as Input,
   m as Loader,
   h as Modal,
   n as OtpInput,
   V as P,
   s as PageLoader,
   a as Pagination,
-  K as RadioGroup,
-  P as RootComponent,
-  I as Selectbox,
-  w as Shimmer,
+  Q as RadioGroup,
+  C as RootComponent,
+  c as Selectbox,
+  R as Shimmer,
   p as Spinner,
-  z as Textarea,
-  R as Timer,
+  E as Textarea,
+  D as Timer,
   r as Toast,
   f as ToastContainer,
-  B as VideoPlayer
+  y as VideoPlayer
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "meticulous-ui",
-  "version": "3.5.3",
+  "version": "3.6.0",
   "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",