meticulous-ui 3.5.4 → 3.6.1

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, Escape/overlay-click dismissal, and mobile bottom-sheet mode |
-| `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/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/index.d.ts

@@ -275,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.4",
+  "version": "3.6.1",
   "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",