@sauravluitel/date-time-picker-custom 1.0.0

package/README.md

@@ -0,0 +1,56 @@
+# Premium Date & Time Picker Custom
+
+A high-performance, responsive React Date and Time picker project built with **Vite**, **Framer Motion**, and **Lucide React**.
+
+## ✨ Features
+
+- **📱 Dedicated Mobile UI**:
+  - **Date Picker**: Smooth wheel-like scroll select for Years, Months, and Days.
+  - **Time Picker**: Interactive Visual Clock Face—ideal for illiterate users or quick selection.
+- **🖥️ Premium Desktop UI**:
+  - **Date Picker**: Full-featured, elegant calendar grid.
+  - **Time Picker**: Efficient grid-based select for Hours and Minutes.
+- **⌨️ Hybrid Input**: Support for both manual typing (with validation) and mouse/touch selection.
+- **🎨 Aesthetics**: 
+  - Glassmorphism design system.
+  - Smooth micro-animations with Framer Motion.
+  - Modern typography using the *Outfit* Google font.
+  - Premium dark theme with vibrant blue accents.
+
+## 🚀 Getting Started
+
+1. **Install dependencies**:
+   ```bash
+   npm install
+   ```
+
+2. **Run the development server**:
+   ```bash
+   npm run dev
+   ```
+
+## 📦 Project Structure
+
+- `src/components/DatePicker`: Contains the DatePicker logic and responsive views.
+- `src/components/TimePicker`: Contains the TimePicker logic and the Visual Clock Face.
+- `src/components/Shared`: Reusable components like the `SharedInput`.
+- `src/hooks`: Custom hooks like `useMediaQuery` for layout switching.
+- `src/index.css`: Core design system and theme variables.
+
+## 🛠️ Usage
+
+```jsx
+import { DatePicker, TimePicker } from './components';
+
+function MyComponent() {
+  const [date, setDate] = useState(new Date());
+  const [time, setTime] = useState('12:00');
+
+  return (
+    <>
+      <DatePicker value={date} onChange={setDate} />
+      <TimePicker value={time} onChange={setTime} />
+    </>
+  );
+}
+```

package/dist/date-time-picker-custom.css

@@ -0,0 +1 @@
+@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap";.datepicker-wrapper,.datepicker-wrapper *,.timepicker-wrapper,.timepicker-wrapper *{box-sizing:border-box;margin:0;padding:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;-webkit-tap-highlight-color:transparent;font-family:Outfit,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif;color:var(--text)}.datepicker-wrapper button,.timepicker-wrapper button{cursor:pointer;border:none;background:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;outline:none;color:inherit}.datepicker-wrapper input,.timepicker-wrapper input{outline:none;border:none;background:transparent;-moz-appearance:none;appearance:none;-webkit-appearance:none;box-shadow:none;color:inherit}:root{--primary: #3b82f6;--primary-glow: rgba(59, 130, 246, .4);--secondary: #6366f1;--bg: #0f172a;--card-bg: rgba(30, 41, 59, 1);--text: #f8fafc;--text-dim: #94a3b8;--border: rgba(255, 255, 255, .1);--border-active: rgba(59, 130, 246, .5);--glass: rgba(15, 23, 42, .6);--hover-overlay: rgba(255, 255, 255, .1);--shadow-heavy: rgba(0, 0, 0, .5);--mobile-sheet-bg: rgba(15, 23, 42, 1);--radius: 12px;--transition: all .3s cubic-bezier(.4, 0, .2, 1)}@media(prefers-color-scheme:light){:root{--bg: #f1f5f9;--card-bg: rgba(255, 255, 255, 1);--text: #0f172a;--text-dim: #64748b;--border: rgba(0, 0, 0, .1);--glass: rgba(255, 255, 255, .8);--hover-overlay: rgba(0, 0, 0, .05);--shadow-heavy: rgba(0, 0, 0, .15);--mobile-sheet-bg: rgba(255, 255, 255, 1)}}.glass-card{background:var(--card-bg);border:1px solid var(--border);border-radius:var(--radius);box-shadow:0 8px 32px #0000004d}::-webkit-scrollbar{width:6px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#fff3}.animate-scale{transition:transform .2s ease}.animate-scale:active{transform:scale(.95)}.picker-dropdown{position:absolute;z-index:1000;margin-top:8px;overflow:hidden;box-shadow:0 10px 40px var(--shadow-heavy);background:var(--card-bg)!important}.picker-dropdown.mobile{position:fixed!important;inset:auto 0 0!important;border-radius:20px 20px 0 0!important;margin:0!important;max-height:48vh!important;width:100%!important;padding-bottom:calc(10px + env(safe-area-inset-bottom));box-shadow:0 -8px 32px var(--shadow-heavy);background:var(--mobile-sheet-bg)!important;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}@media(max-width:768px){.picker-dropdown.desktop{display:none!important}}.mobile-backdrop{position:fixed;inset:0;background:#0009;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999}.input-container.drop-up+.picker-dropdown{top:auto!important;bottom:100%!important;margin-bottom:8px;margin-top:0}.input-container.drop-down+.picker-dropdown{top:100%!important;bottom:auto!important}.scroll-columns{display:flex;justify-content:center;height:120px;min-height:120px;max-height:120px;overflow:hidden;position:relative;width:100%;margin:0 auto}.scroll-columns:after{content:"";position:absolute;top:44px;left:5%;width:90%;height:32px;background:var(--hover-overlay);border-top:1px solid var(--border);border-bottom:1px solid var(--border);pointer-events:none;border-radius:8px}.scroll-col{flex:1;max-width:70px;height:100%;max-height:120px;overflow-y:scroll;-webkit-overflow-scrolling:touch;scrollbar-width:none;display:flex;flex-direction:column;align-items:center;scroll-snap-type:y mandatory;padding:0;overscroll-behavior:none;position:relative;z-index:2}.scroll-col:before,.scroll-col:after{content:"";display:block;min-height:44px;flex-shrink:0;width:100%}.scroll-col::-webkit-scrollbar{display:none}.scroll-item{height:32px;min-height:32px;line-height:32px;display:flex;align-items:center;justify-content:center;font-size:1rem;color:var(--text-dim);transition:var(--transition);cursor:pointer;width:100%;scroll-snap-align:center;margin:0}.scroll-item.selected{font-weight:700;color:var(--primary);opacity:1;font-size:1.15rem}.mobile-scroll-picker{padding:16px 8px}.mobile-header{text-align:center;margin-bottom:12px;padding:0 16px}.mobile-header h3{margin-bottom:2px;font-size:1.2rem}.selected-preview{font-size:.9rem;color:var(--primary);font-weight:600}.confirm-btn{margin-top:16px;background-color:var(--primary)!important;padding:12px;border-radius:12px;font-weight:700;width:calc(100% - 32px);margin-left:16px;margin-right:16px;font-size:1rem;box-shadow:0 4px 12px var(--shadow-heavy);color:#fff!important;display:flex;justify-content:center;align-items:center}.input-container{display:flex;align-items:center;padding:10px 16px;gap:12px;transition:var(--transition);border:1px solid var(--border);width:100%;max-width:320px;position:relative;cursor:pointer}.input-container.focused{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-glow);background:var(--card-bg)}.input-icon-wrapper{cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--text-dim);transition:var(--transition)}.input-container.focused .input-icon-wrapper{color:var(--primary)}.shared-input{background:transparent;border:none;color:var(--text);font-size:16px;width:100%;font-weight:500;padding:0;margin:0;line-height:1.2}.shared-input:focus{outline:none!important;box-shadow:none!important}.shared-input::-moz-placeholder{color:var(--text-dim);opacity:.5}.shared-input::placeholder{color:var(--text-dim);opacity:.5}.clear-btn{color:var(--text-dim);opacity:.6;transition:var(--transition);display:flex;align-items:center;padding:4px;border-radius:50%}.clear-btn:hover{opacity:1;background:var(--hover-overlay);color:#ef4444}.input-container.error{border-color:#ef4444}.datepicker-wrapper{position:relative;width:-moz-fit-content;width:fit-content}.selector-view{width:320px;padding:16px}.grid-selector{display:grid;gap:8px;padding:8px}.grid-selector.column-3{grid-template-columns:repeat(3,1fr)}.grid-selector.column-4{grid-template-columns:repeat(4,1fr)}.select-cell{padding:12px 8px;border-radius:8px;font-size:.9rem;transition:var(--transition)}.select-cell:hover{background:var(--primary-glow);color:var(--primary)}.select-cell.active{background:var(--primary);color:#fff}.desktop-calendar{width:320px;padding:16px}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;font-weight:600}.header-nav{display:flex;gap:4px}.nav-btn{cursor:pointer;padding:4px 8px;border-radius:6px;transition:var(--transition)}.nav-btn:hover{background:var(--hover-overlay);color:var(--primary)}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.calendar-day-header{font-size:.8rem;color:var(--text-dim);text-align:center;font-weight:600}.calendar-day-cell{width:100%;aspect-ratio:1;display:flex;align-items:center;justify-content:center;border-radius:8px;font-size:.9rem;transition:var(--transition);cursor:pointer}.calendar-day-cell:hover{background:var(--primary-glow);color:var(--primary)}.calendar-day-cell.active{background:var(--primary)!important;color:#fff!important}.calendar-day-cell.today{border:1px solid var(--primary);font-weight:700}.timepicker-wrapper{position:relative;width:-moz-fit-content;width:fit-content}.desktop-time-picker{width:260px;padding:12px;transition:width .3s ease}.desktop-time-picker.with-seconds{width:340px}.time-select-grid{display:flex;gap:12px}.time-col{flex:1;display:flex;flex-direction:column}.col-label{font-size:.8rem;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px;text-align:center}.time-scroll{height:200px;overflow-y:auto;display:flex;flex-direction:column;gap:4px}.time-btn{padding:8px;border-radius:6px;font-size:.9rem;transition:var(--transition)}.time-btn:hover{background:var(--hover-overlay);color:var(--primary)}.time-btn.active{background:var(--primary);color:#fff}.desktop-footer{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);display:flex;justify-content:flex-end}.confirm-btn.small{padding:6px 12px;font-size:.85rem;border-radius:8px;background:var(--primary);color:#fff;display:flex;align-items:center;font-weight:600}

package/dist/date-time-picker-custom.es.js

@@ -0,0 +1,700 @@
+import pe, { useState as V, useEffect as B, useRef as Y } from "react";
+import { X as ge, Calendar as xe, ChevronLeft as oe, ChevronRight as ce, Clock as ye, Check as be } from "lucide-react";
+import { format as X, parse as ve, isValid as je, startOfMonth as Te, endOfMonth as Me, eachDayOfInterval as Ne, getDay as ke, subMonths as ae, addMonths as le, isSameDay as ie } from "date-fns";
+import { AnimatePresence as fe, motion as re } from "framer-motion";
+var te = { exports: {} }, Z = {};
+var ue;
+function we() {
+  if (ue) return Z;
+  ue = 1;
+  var m = /* @__PURE__ */ Symbol.for("react.transitional.element"), b = /* @__PURE__ */ Symbol.for("react.fragment");
+  function L(i, a, h) {
+    var T = null;
+    if (h !== void 0 && (T = "" + h), a.key !== void 0 && (T = "" + a.key), "key" in a) {
+      h = {};
+      for (var v in a)
+        v !== "key" && (h[v] = a[v]);
+    } else h = a;
+    return a = h.ref, {
+      $$typeof: m,
+      type: i,
+      key: T,
+      ref: a !== void 0 ? a : null,
+      props: h
+    };
+  }
+  return Z.Fragment = b, Z.jsx = L, Z.jsxs = L, Z;
+}
+var K = {};
+var de;
+function Re() {
+  return de || (de = 1, process.env.NODE_ENV !== "production" && (function() {
+    function m(e) {
+      if (e == null) return null;
+      if (typeof e == "function")
+        return e.$$typeof === R ? null : e.displayName || e.name || null;
+      if (typeof e == "string") return e;
+      switch (e) {
+        case S:
+          return "Fragment";
+        case C:
+          return "Profiler";
+        case A:
+          return "StrictMode";
+        case l:
+          return "Suspense";
+        case u:
+          return "SuspenseList";
+        case F:
+          return "Activity";
+      }
+      if (typeof e == "object")
+        switch (typeof e.tag == "number" && console.error(
+          "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
+        ), e.$$typeof) {
+          case z:
+            return "Portal";
+          case U:
+            return e.displayName || "Context";
+          case M:
+            return (e._context.displayName || "Context") + ".Consumer";
+          case H:
+            var n = e.render;
+            return e = e.displayName, e || (e = n.displayName || n.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+          case g:
+            return n = e.displayName || null, n !== null ? n : m(e.type) || "Memo";
+          case x:
+            n = e._payload, e = e._init;
+            try {
+              return m(e(n));
+            } catch {
+            }
+        }
+      return null;
+    }
+    function b(e) {
+      return "" + e;
+    }
+    function L(e) {
+      try {
+        b(e);
+        var n = !1;
+      } catch {
+        n = !0;
+      }
+      if (n) {
+        n = console;
+        var r = n.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+        return r.call(
+          n,
+          "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
+          o
+        ), b(e);
+      }
+    }
+    function i(e) {
+      if (e === S) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === x)
+        return "<...>";
+      try {
+        var n = m(e);
+        return n ? "<" + n + ">" : "<...>";
+      } catch {
+        return "<...>";
+      }
+    }
+    function a() {
+      var e = O.A;
+      return e === null ? null : e.getOwner();
+    }
+    function h() {
+      return Error("react-stack-top-frame");
+    }
+    function T(e) {
+      if (_.call(e, "key")) {
+        var n = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (n && n.isReactWarning) return !1;
+      }
+      return e.key !== void 0;
+    }
+    function v(e, n) {
+      function r() {
+        E || (E = !0, console.error(
+          "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
+          n
+        ));
+      }
+      r.isReactWarning = !0, Object.defineProperty(e, "key", {
+        get: r,
+        configurable: !0
+      });
+    }
+    function q() {
+      var e = m(this.type);
+      return P[e] || (P[e] = !0, console.error(
+        "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
+      )), e = this.props.ref, e !== void 0 ? e : null;
+    }
+    function D(e, n, r, o, f, k) {
+      var p = r.ref;
+      return e = {
+        $$typeof: W,
+        type: e,
+        key: n,
+        props: r,
+        _owner: o
+      }, (p !== void 0 ? p : null) !== null ? Object.defineProperty(e, "ref", {
+        enumerable: !1,
+        get: q
+      }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: 0
+      }), Object.defineProperty(e, "_debugInfo", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: null
+      }), Object.defineProperty(e, "_debugStack", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: f
+      }), Object.defineProperty(e, "_debugTask", {
+        configurable: !1,
+        enumerable: !1,
+        writable: !0,
+        value: k
+      }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
+    }
+    function d(e, n, r, o, f, k) {
+      var p = n.children;
+      if (p !== void 0)
+        if (o)
+          if (G(p)) {
+            for (o = 0; o < p.length; o++)
+              N(p[o]);
+            Object.freeze && Object.freeze(p);
+          } else
+            console.error(
+              "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
+            );
+        else N(p);
+      if (_.call(n, "key")) {
+        p = m(e);
+        var I = Object.keys(n).filter(function(Q) {
+          return Q !== "key";
+        });
+        o = 0 < I.length ? "{key: someKey, " + I.join(": ..., ") + ": ...}" : "{key: someKey}", s[p + o] || (I = 0 < I.length ? "{" + I.join(": ..., ") + ": ...}" : "{}", console.error(
+          `A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,
+          o,
+          p,
+          I,
+          p
+        ), s[p + o] = !0);
+      }
+      if (p = null, r !== void 0 && (L(r), p = "" + r), T(n) && (L(n.key), p = "" + n.key), "key" in n) {
+        r = {};
+        for (var J in n)
+          J !== "key" && (r[J] = n[J]);
+      } else r = n;
+      return p && v(
+        r,
+        typeof e == "function" ? e.displayName || e.name || "Unknown" : e
+      ), D(
+        e,
+        p,
+        r,
+        a(),
+        f,
+        k
+      );
+    }
+    function N(e) {
+      j(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === x && (e._payload.status === "fulfilled" ? j(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    }
+    function j(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === W;
+    }
+    var w = pe, W = /* @__PURE__ */ Symbol.for("react.transitional.element"), z = /* @__PURE__ */ Symbol.for("react.portal"), S = /* @__PURE__ */ Symbol.for("react.fragment"), A = /* @__PURE__ */ Symbol.for("react.strict_mode"), C = /* @__PURE__ */ Symbol.for("react.profiler"), M = /* @__PURE__ */ Symbol.for("react.consumer"), U = /* @__PURE__ */ Symbol.for("react.context"), H = /* @__PURE__ */ Symbol.for("react.forward_ref"), l = /* @__PURE__ */ Symbol.for("react.suspense"), u = /* @__PURE__ */ Symbol.for("react.suspense_list"), g = /* @__PURE__ */ Symbol.for("react.memo"), x = /* @__PURE__ */ Symbol.for("react.lazy"), F = /* @__PURE__ */ Symbol.for("react.activity"), R = /* @__PURE__ */ Symbol.for("react.client.reference"), O = w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, _ = Object.prototype.hasOwnProperty, G = Array.isArray, c = console.createTask ? console.createTask : function() {
+      return null;
+    };
+    w = {
+      react_stack_bottom_frame: function(e) {
+        return e();
+      }
+    };
+    var E, P = {}, y = w.react_stack_bottom_frame.bind(
+      w,
+      h
+    )(), $ = c(i(h)), s = {};
+    K.Fragment = S, K.jsx = function(e, n, r) {
+      var o = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return d(
+        e,
+        n,
+        r,
+        !1,
+        o ? Error("react-stack-top-frame") : y,
+        o ? c(i(e)) : $
+      );
+    }, K.jsxs = function(e, n, r) {
+      var o = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return d(
+        e,
+        n,
+        r,
+        !0,
+        o ? Error("react-stack-top-frame") : y,
+        o ? c(i(e)) : $
+      );
+    };
+  })()), K;
+}
+var me;
+function _e() {
+  return me || (me = 1, process.env.NODE_ENV === "production" ? te.exports = we() : te.exports = Re()), te.exports;
+}
+var t = _e();
+const Ee = (m) => {
+  const [b, L] = V(!1);
+  return B(() => {
+    const i = window.matchMedia(m);
+    i.matches !== b && L(i.matches);
+    const a = () => L(i.matches);
+    return i.addEventListener("change", a), () => i.removeEventListener("change", a);
+  }, [b, m]), b;
+}, se = () => Ee("(max-width: 768px)"), he = ({
+  icon: m,
+  value: b,
+  onChange: L,
+  onToggle: i,
+  placeholder: a,
+  error: h,
+  onClear: T,
+  mask: v,
+  onFocus: q,
+  onBlur: D
+}) => {
+  const d = se(), [N, j] = V(!1), [w, W] = V("down"), z = Y(null), S = Y(null), A = () => {
+    if (S.current) {
+      const l = S.current.getBoundingClientRect(), u = window.innerHeight - l.bottom, g = l.top;
+      u < 350 && g > u ? W("up") : W("down");
+    }
+  }, C = (l) => {
+    l && l.stopPropagation(), A(), i();
+  }, M = (l, u) => {
+    const g = parseInt(l, 10);
+    return isNaN(g) ? l : u === "month" ? Math.min(Math.max(g, 1), 12).toString().padStart(2, "0") : u === "day" ? Math.min(Math.max(g, 1), 31).toString().padStart(2, "0") : u === "hour" ? Math.min(Math.max(g, 0), 23).toString().padStart(2, "0") : u === "hour12" ? Math.min(Math.max(g, 1), 12).toString().padStart(2, "0") : u === "minsec" ? Math.min(Math.max(g, 0), 59).toString().padStart(2, "0") : l;
+  }, U = (l) => {
+    if (!v) return l;
+    if (v === "date") {
+      const u = l.replace(/[^0-9]/g, "");
+      let g = u.substring(0, 4), x = u.substring(4, 6), F = u.substring(6, 8), R = g;
+      return u.length > 4 ? (x.length === 2 && (x = M(x, "month")), R += "/" + x) : u.length === 4 && l.length === 4 && (R += "/"), u.length > 6 ? (F.length === 2 && (F = M(F, "day")), R += "/" + F) : u.length === 6 && l.length === 7 && (R += "/"), R;
+    }
+    if (v.includes("time")) {
+      const u = v.endsWith("-ampm"), g = v.includes("seconds"), x = l.replace(/[^0-9]/g, ""), F = l.toLowerCase().match(/[ap]/);
+      let R = "";
+      u && F && (R = F[0] === "a" ? "AM" : "PM");
+      let O = x.substring(0, 2);
+      x.substring(2, 4), x.substring(4, 6);
+      let _ = O;
+      if (x.length >= 2 && (O.length === 2 && (O = M(O, u ? "hour12" : "hour")), _ = O + ":", x.length > 2)) {
+        let G = x.substring(2, 4);
+        if (G.length === 2 && (G = M(G, "minsec")), _ += G, x.length >= 4)
+          if (g) {
+            if (_ += ":", x.length > 4) {
+              let c = x.substring(4, 6);
+              c.length === 2 && (c = M(c, "minsec")), _ += c, x.length >= 6 && u && (_ += " " + (R || ""));
+            }
+          } else u && (_ += " " + (R || ""));
+      }
+      return u && R && !_.includes(R) && (_.includes(" ") || (_ += " "), _ += R), _.trimEnd();
+    }
+    return l;
+  }, H = (l) => {
+    const u = l.target.value, g = U(u);
+    L(g);
+  };
+  return /* @__PURE__ */ t.jsxs(
+    "div",
+    {
+      ref: S,
+      className: `input-container glass-card ${N ? "focused" : ""} ${h ? "error" : ""} drop-${w}`,
+      onClick: C,
+      children: [
+        /* @__PURE__ */ t.jsx("div", { className: "input-icon-wrapper", children: /* @__PURE__ */ t.jsx(m, { size: 18, className: "input-icon" }) }),
+        /* @__PURE__ */ t.jsx(
+          "input",
+          {
+            ref: z,
+            type: "text",
+            placeholder: a,
+            className: "shared-input",
+            value: b,
+            onChange: H,
+            readOnly: d,
+            onFocus: (l) => {
+              j(!0), A(), q && q(l);
+            },
+            onBlur: (l) => {
+              j(!1), D && D(l);
+            },
+            onClick: (l) => {
+              d ? C(l) : l.stopPropagation();
+            }
+          }
+        ),
+        b && T && /* @__PURE__ */ t.jsx("button", { className: "clear-btn", onClick: (l) => {
+          l.stopPropagation(), T();
+        }, children: /* @__PURE__ */ t.jsx(ge, { size: 14 }) })
+      ]
+    }
+  );
+}, Pe = ({ value: m, onChange: b, placeholder: L = "YYYY/MM/DD" }) => {
+  const i = se(), [a, h] = V(!1), [T, v] = V("calendar"), [q, D] = V(m ? X(new Date(m), "yyyy/MM/dd") : ""), [d, N] = V(m ? new Date(m) : /* @__PURE__ */ new Date()), [j, w] = V(m ? new Date(m) : /* @__PURE__ */ new Date()), [W, z] = V(!1), S = Y(null), A = Y(null), C = Y(null), M = Y(null), U = Y(null), H = Y(0), l = Array.from({ length: 151 }, (s, e) => (/* @__PURE__ */ new Date()).getFullYear() - 100 + e), u = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"], g = new Date(d.getFullYear(), d.getMonth() + 1, 0).getDate(), x = Array.from({ length: g }, (s, e) => e + 1);
+  B(() => {
+    if (!W && !a)
+      if (m) {
+        const s = X(new Date(m), "yyyy/MM/dd");
+        D(s), w(new Date(m)), N(new Date(m));
+      } else
+        D(""), N(/* @__PURE__ */ new Date());
+  }, [m, W, a]), B(() => {
+    if (a && i) {
+      const s = () => {
+        const r = l.indexOf(d.getFullYear());
+        A.current && r !== -1 && (A.current.scrollTop = r * 32), C.current && (C.current.scrollTop = d.getMonth() * 32), M.current && (M.current.scrollTop = (d.getDate() - 1) * 32);
+      };
+      s();
+      const e = setTimeout(s, 50), n = setTimeout(s, 300);
+      return () => {
+        clearTimeout(e), clearTimeout(n);
+      };
+    }
+  }, [a, i]);
+  const F = () => {
+    if (!a) {
+      const s = m ? new Date(m) : /* @__PURE__ */ new Date();
+      N(s), w(s), v("calendar"), H.current = Date.now();
+    }
+    h(!a);
+  }, R = () => {
+    b(d), D(X(d, "yyyy/MM/dd")), h(!1);
+  }, O = (s) => {
+    if (D(s), s === "") {
+      b(null), N(/* @__PURE__ */ new Date());
+      return;
+    }
+    const e = ve(s, "yyyy/MM/dd", /* @__PURE__ */ new Date());
+    je(e) && (b(e), w(e), N(e));
+  }, _ = (s) => {
+    i ? N(s) : (b(s), D(X(s, "yyyy/MM/dd")), h(!1));
+  }, G = (s) => {
+    const e = new Date(j);
+    e.setFullYear(s), w(e), v("calendar");
+  }, c = (s) => {
+    const e = new Date(j);
+    e.setMonth(s), w(e), v("calendar");
+  };
+  B(() => {
+    const s = (e) => {
+      S.current && !S.current.contains(e.target) && h(!1);
+    };
+    return document.addEventListener("mousedown", s), () => document.removeEventListener("mousedown", s);
+  }, []), B(() => (i && a ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [a, i]);
+  const E = () => /* @__PURE__ */ t.jsxs("div", { className: "selector-view", children: [
+    /* @__PURE__ */ t.jsx("div", { className: "calendar-header", children: /* @__PURE__ */ t.jsx("span", { children: "Select Month" }) }),
+    /* @__PURE__ */ t.jsx("div", { className: "grid-selector column-3", children: u.map((s, e) => /* @__PURE__ */ t.jsx(
+      "button",
+      {
+        className: `select-cell ${j.getMonth() === e ? "active" : ""}`,
+        onClick: () => c(e),
+        children: s
+      },
+      s
+    )) })
+  ] }), P = () => {
+    const s = Math.floor(j.getFullYear() / 12) * 12, e = Array.from({ length: 12 }, (n, r) => s + r);
+    return /* @__PURE__ */ t.jsxs("div", { className: "selector-view", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "calendar-header", children: [
+        /* @__PURE__ */ t.jsx("button", { onClick: () => w(ae(j, 144)), children: /* @__PURE__ */ t.jsx(oe, { size: 16 }) }),
+        /* @__PURE__ */ t.jsx("span", { children: "Select Year" }),
+        /* @__PURE__ */ t.jsx("button", { onClick: () => w(le(j, 144)), children: /* @__PURE__ */ t.jsx(ce, { size: 16 }) })
+      ] }),
+      /* @__PURE__ */ t.jsx("div", { className: "grid-selector column-3", children: e.map((n) => /* @__PURE__ */ t.jsx(
+        "button",
+        {
+          className: `select-cell ${j.getFullYear() === n ? "active" : ""}`,
+          onClick: () => G(n),
+          children: n
+        },
+        n
+      )) })
+    ] });
+  }, y = () => {
+    const s = ["Su", "Mo", "Tu", "We", "Th", "Fr", "Sa"], e = Te(j), n = Me(j), r = Ne({ start: e, end: n }), o = Array(ke(e)).fill(null);
+    return T === "year" ? P() : T === "month" ? E() : /* @__PURE__ */ t.jsxs("div", { className: "desktop-calendar", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "calendar-header", children: [
+        /* @__PURE__ */ t.jsx("button", { onClick: () => w(ae(j, 1)), children: /* @__PURE__ */ t.jsx(oe, { size: 18 }) }),
+        /* @__PURE__ */ t.jsxs("div", { className: "header-nav", children: [
+          /* @__PURE__ */ t.jsx("span", { className: "nav-btn", onClick: () => v("month"), children: X(j, "MMMM") }),
+          /* @__PURE__ */ t.jsx("span", { className: "nav-btn", onClick: () => v("year"), children: X(j, "yyyy") })
+        ] }),
+        /* @__PURE__ */ t.jsx("button", { onClick: () => w(le(j, 1)), children: /* @__PURE__ */ t.jsx(ce, { size: 18 }) })
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: "calendar-grid", children: [
+        s.map((f) => /* @__PURE__ */ t.jsx("div", { className: "calendar-day-header", children: f }, f)),
+        o.map((f, k) => /* @__PURE__ */ t.jsx("div", {}, `empty-${k}`)),
+        r.map((f) => /* @__PURE__ */ t.jsx(
+          "button",
+          {
+            className: `calendar-day-cell ${ie(f, new Date(m)) ? "active" : ""} ${ie(f, /* @__PURE__ */ new Date()) ? "today" : ""}`,
+            onClick: () => _(f),
+            children: X(f, "d")
+          },
+          f.toString()
+        ))
+      ] })
+    ] });
+  }, $ = () => {
+    const s = (n, r) => {
+      const o = new Date(d);
+      let f = o.getDate();
+      n === "year" && o.setFullYear(r), n === "month" && o.setMonth(r), n === "day" && (o.setDate(r), f = r);
+      const k = new Date(o.getFullYear(), o.getMonth() + 1, 0).getDate();
+      f > k && o.setDate(k), N(o), n === "year" && A.current && A.current.scrollTo({ top: l.indexOf(r) * 32, behavior: "smooth" }), n === "month" && C.current && C.current.scrollTo({ top: r * 32, behavior: "smooth" }), n === "day" && M.current && M.current.scrollTo({ top: (r - 1) * 32, behavior: "smooth" }), n !== "day" && f > k && M.current && M.current.scrollTo({ top: (k - 1) * 32, behavior: "smooth" });
+    }, e = (n, r, o) => {
+      if (Date.now() - H.current < 500) return;
+      const f = n.target.scrollTop, k = Math.round(f / 32);
+      if (k >= 0 && k < o.length) {
+        const p = o[k];
+        U.current && clearTimeout(U.current), U.current = setTimeout(() => {
+          let I = d.getFullYear(), J = d.getMonth(), Q = d.getDate();
+          r === "year" && (I = p), r === "month" && (J = p), r === "day" && (Q = p);
+          const ee = new Date(I, J + 1, 0).getDate();
+          Q > ee && (Q = ee);
+          const ne = new Date(I, J, Q);
+          ne.setHours(d.getHours(), d.getMinutes(), d.getSeconds(), d.getMilliseconds()), d.getTime() !== ne.getTime() && N(ne), r !== "day" && d.getDate() > ee && M.current && M.current.scrollTo({ top: (ee - 1) * 32, behavior: "smooth" });
+        }, 150);
+      }
+    };
+    return /* @__PURE__ */ t.jsxs("div", { className: "mobile-scroll-picker", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "mobile-header", children: [
+        /* @__PURE__ */ t.jsx("h3", { children: "Select Date" }),
+        /* @__PURE__ */ t.jsx("span", { className: "selected-preview", children: X(d, "dd MMM yyyy") })
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: "scroll-columns", style: { touchAction: "pan-y" }, children: [
+        /* @__PURE__ */ t.jsx("div", { className: "scroll-col year-col", ref: A, onScroll: (n) => e(n, "year", l), children: l.map((n) => /* @__PURE__ */ t.jsx("div", { className: `scroll-item ${d.getFullYear() === n ? "selected" : ""}`, onClick: () => s("year", n), children: n }, n)) }),
+        /* @__PURE__ */ t.jsx("div", { className: "scroll-col month-col", ref: C, onScroll: (n) => e(n, "month", u.map((r, o) => o)), children: u.map((n, r) => /* @__PURE__ */ t.jsx("div", { className: `scroll-item ${d.getMonth() === r ? "selected" : ""}`, onClick: () => s("month", r), children: n }, n)) }),
+        /* @__PURE__ */ t.jsx("div", { className: "scroll-col day-col", ref: M, onScroll: (n) => e(n, "day", x), children: x.map((n) => /* @__PURE__ */ t.jsx("div", { className: `scroll-item ${d.getDate() === n ? "selected" : ""}`, onClick: () => s("day", n), children: n }, n)) })
+      ] }),
+      /* @__PURE__ */ t.jsx("button", { className: "confirm-btn", onClick: R, children: "Confirm" })
+    ] });
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: "datepicker-wrapper", ref: S, children: [
+    /* @__PURE__ */ t.jsx(
+      he,
+      {
+        icon: xe,
+        value: q,
+        onChange: O,
+        onToggle: F,
+        placeholder: L,
+        mask: "date",
+        onFocus: () => z(!0),
+        onBlur: () => z(!1),
+        onClear: () => {
+          D(""), b(null);
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(fe, { children: a && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      i && /* @__PURE__ */ t.jsx(
+        re.div,
+        {
+          className: "mobile-backdrop",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          onClick: () => h(!1)
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        re.div,
+        {
+          initial: { y: i ? "100%" : 20, opacity: 0 },
+          animate: { y: 0, opacity: 1 },
+          exit: { y: i ? "100%" : 20, opacity: 0 },
+          transition: { type: "spring", damping: 25, stiffness: 200 },
+          className: `picker-dropdown glass-card ${i ? "mobile" : "desktop"}`,
+          children: i ? $() : y()
+        }
+      )
+    ] }) })
+  ] });
+}, Oe = ({ value: m, onChange: b, placeholder: L = "HH/MM AM/PM", showSeconds: i = !1, use12h: a = !0 }) => {
+  const h = se(), [T, v] = V(!1), [q, D] = V(m || ""), [d, N] = V(m || ""), [j, w] = V(!1), W = Y(null), z = Y(null), S = Y(null), A = Y(null), C = Y(null), M = Y(null), U = Y(0), H = a ? Array.from({ length: 12 }, (c, E) => (E + 1).toString().padStart(2, "0")) : Array.from({ length: 24 }, (c, E) => E.toString().padStart(2, "0")), l = Array.from({ length: 60 }, (c, E) => E.toString().padStart(2, "0")), u = Array.from({ length: 60 }, (c, E) => E.toString().padStart(2, "0")), g = ["AM", "PM"];
+  B(() => {
+    !j && !T && (D(m || ""), N(m || ""));
+  }, [m, j, T]), B(() => {
+    if (T && h) {
+      let c = "01:00";
+      i && (c += ":00"), a && (c += " AM");
+      const P = (d || c).split(" "), y = P[0].split(":"), $ = P[1] || "AM", s = () => {
+        const r = H.indexOf(y[0]);
+        z.current && r !== -1 && (z.current.scrollTop = r * 32), S.current && (S.current.scrollTop = parseInt(y[1] || 0) * 32), A.current && i && (A.current.scrollTop = parseInt(y[2] || 0) * 32), C.current && a && (C.current.scrollTop = g.indexOf($) * 32);
+      };
+      s();
+      const e = setTimeout(s, 50), n = setTimeout(s, 300);
+      return () => {
+        clearTimeout(e), clearTimeout(n);
+      };
+    }
+  }, [T, h]);
+  const x = () => {
+    if (!T) {
+      let c = "01:00";
+      i && (c += ":00"), a && (c += " AM"), N(q || c), U.current = Date.now();
+    }
+    v(!T);
+  }, F = () => {
+    D(d), b(d), v(!1);
+  }, R = (c) => {
+    D(c);
+    const P = c.split(" ")[0].split(":");
+    P.length >= 2 ? P.every(($) => $.length === 2) && (b(c), N(c)) : c === "" && (b(""), N(""));
+  }, O = (c) => {
+    N(c), h || D(c);
+  };
+  B(() => {
+    const c = (E) => {
+      W.current && !W.current.contains(E.target) && v(!1);
+    };
+    return document.addEventListener("mousedown", c), () => document.removeEventListener("mousedown", c);
+  }, []), B(() => (h && T ? document.body.style.overflow = "hidden" : document.body.style.overflow = "", () => {
+    document.body.style.overflow = "";
+  }), [T, h]);
+  const _ = () => {
+    let c = "01:00";
+    i && (c += ":00"), a && (c += " AM");
+    const P = (d || c).split(" "), y = P[0].split(":"), $ = P[1] || "AM", s = (e = y[0] || "12", n = y[1] || "00", r = y[2] || "00", o = $) => {
+      let f = `${e}:${n}`;
+      i && (f += `:${r}`), a && (f += ` ${o}`), O(f);
+    };
+    return /* @__PURE__ */ t.jsxs("div", { className: `desktop-time-picker ${i ? "with-seconds" : ""}`, children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "time-select-grid", children: [
+        /* @__PURE__ */ t.jsxs("div", { className: "time-col", children: [
+          /* @__PURE__ */ t.jsx("span", { className: "col-label", children: "Hrs" }),
+          /* @__PURE__ */ t.jsx("div", { className: "time-scroll", children: H.map((e) => /* @__PURE__ */ t.jsx("button", { className: `time-btn ${y[0] === e ? "active" : ""}`, onClick: () => s(e), children: e }, e)) })
+        ] }),
+        /* @__PURE__ */ t.jsxs("div", { className: "time-col", children: [
+          /* @__PURE__ */ t.jsx("span", { className: "col-label", children: "Min" }),
+          /* @__PURE__ */ t.jsx("div", { className: "time-scroll", children: l.map((e) => /* @__PURE__ */ t.jsx("button", { className: `time-btn ${y[1] === e ? "active" : ""}`, onClick: () => s(void 0, e), children: e }, e)) })
+        ] }),
+        i && /* @__PURE__ */ t.jsxs("div", { className: "time-col", children: [
+          /* @__PURE__ */ t.jsx("span", { className: "col-label", children: "Sec" }),
+          /* @__PURE__ */ t.jsx("div", { className: "time-scroll", children: u.map((e) => /* @__PURE__ */ t.jsx("button", { className: `time-btn ${y[2] === e ? "active" : ""}`, onClick: () => s(void 0, void 0, e), children: e }, e)) })
+        ] }),
+        a && /* @__PURE__ */ t.jsxs("div", { className: "time-col", children: [
+          /* @__PURE__ */ t.jsx("span", { className: "col-label", children: "Mode" }),
+          /* @__PURE__ */ t.jsx("div", { className: "time-scroll", children: g.map((e) => /* @__PURE__ */ t.jsx("button", { className: `time-btn ${$ === e ? "active" : ""}`, onClick: () => s(void 0, void 0, void 0, e), children: e }, e)) })
+        ] })
+      ] }),
+      /* @__PURE__ */ t.jsx("div", { className: "desktop-footer", children: /* @__PURE__ */ t.jsxs("button", { className: "confirm-btn small", onClick: F, children: [
+        /* @__PURE__ */ t.jsx(be, { size: 16, style: { marginRight: "6px" } }),
+        " Done"
+      ] }) })
+    ] });
+  }, G = () => {
+    let c = "01:00";
+    i && (c += ":00"), a && (c += " AM");
+    const P = (d || c).split(" "), y = P[0].split(":"), $ = P[1] || "AM", s = (r, o) => {
+      const f = [...y];
+      for (; f.length < (i ? 3 : 2); ) f.push("00");
+      f[r] = o;
+      let k = f.slice(0, i ? 3 : 2).join(":");
+      a && (k += ` ${$}`), O(k), r === 0 && z.current && z.current.scrollTo({ top: H.indexOf(o) * 32, behavior: "smooth" }), r === 1 && S.current && S.current.scrollTo({ top: l.indexOf(o) * 32, behavior: "smooth" }), r === 2 && A.current && A.current.scrollTo({ top: u.indexOf(o) * 32, behavior: "smooth" });
+    }, e = (r) => {
+      let o = y.slice(0, i ? 3 : 2).join(":");
+      a && (o += ` ${r}`), O(o), C.current && C.current.scrollTo({ top: g.indexOf(r) * 32, behavior: "smooth" });
+    }, n = (r, o, f, k) => {
+      if (Date.now() - U.current < 500) return;
+      const p = r.target.scrollTop, I = Math.round(p / 32);
+      if (I >= 0 && I < k.length) {
+        const J = k[I];
+        M.current && clearTimeout(M.current), M.current = setTimeout(() => {
+          o === "part" ? y[f] !== J && s(f, J) : o === "ampm" && $ !== J && e(J);
+        }, 150);
+      }
+    };
+    return /* @__PURE__ */ t.jsxs("div", { className: "mobile-scroll-picker", children: [
+      /* @__PURE__ */ t.jsxs("div", { className: "mobile-header", children: [
+        /* @__PURE__ */ t.jsx("h3", { children: "Select Time" }),
+        /* @__PURE__ */ t.jsx("span", { className: "selected-preview", children: d || "--:--" })
+      ] }),
+      /* @__PURE__ */ t.jsxs("div", { className: "scroll-columns", style: { touchAction: "pan-y" }, children: [
+        /* @__PURE__ */ t.jsx("div", { className: "scroll-col hour-col", ref: z, onScroll: (r) => n(r, "part", 0, H), children: H.map((r) => /* @__PURE__ */ t.jsx("div", { className: `scroll-item ${y[0] === r ? "selected" : ""}`, onClick: () => s(0, r), children: r }, r)) }),
+        /* @__PURE__ */ t.jsx("div", { className: "scroll-col min-col", ref: S, onScroll: (r) => n(r, "part", 1, l), children: l.map((r) => /* @__PURE__ */ t.jsx("div", { className: `scroll-item ${y[1] === r ? "selected" : ""}`, onClick: () => s(1, r), children: r }, r)) }),
+        i && /* @__PURE__ */ t.jsx("div", { className: "scroll-col sec-col", ref: A, onScroll: (r) => n(r, "part", 2, u), children: u.map((r) => /* @__PURE__ */ t.jsx("div", { className: `scroll-item ${y[2] === r ? "selected" : ""}`, onClick: () => s(2, r), children: r }, r)) }),
+        a && /* @__PURE__ */ t.jsx("div", { className: "scroll-col ampm-col", ref: C, onScroll: (r) => n(r, "ampm", null, g), children: g.map((r) => /* @__PURE__ */ t.jsx("div", { className: `scroll-item ${$ === r ? "selected" : ""}`, onClick: () => e(r), children: r }, r)) })
+      ] }),
+      /* @__PURE__ */ t.jsx("button", { className: "confirm-btn", onClick: F, children: "Confirm" })
+    ] });
+  };
+  return /* @__PURE__ */ t.jsxs("div", { className: "timepicker-wrapper", ref: W, children: [
+    /* @__PURE__ */ t.jsx(
+      he,
+      {
+        icon: ye,
+        value: q,
+        onChange: R,
+        onToggle: x,
+        placeholder: i ? "HH:MM:SS AM/PM" : "HH:MM AM/PM",
+        mask: i ? a ? "time-seconds-ampm" : "time-seconds" : a ? "time-ampm" : "time",
+        onFocus: () => w(!0),
+        onBlur: () => w(!1),
+        onClear: () => {
+          D(""), N(""), b("");
+        }
+      }
+    ),
+    /* @__PURE__ */ t.jsx(fe, { children: T && /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
+      h && /* @__PURE__ */ t.jsx(
+        re.div,
+        {
+          className: "mobile-backdrop",
+          initial: { opacity: 0 },
+          animate: { opacity: 1 },
+          exit: { opacity: 0 },
+          onClick: () => v(!1)
+        }
+      ),
+      /* @__PURE__ */ t.jsx(
+        re.div,
+        {
+          initial: { y: h ? "100%" : 20, opacity: 0 },
+          animate: { y: 0, opacity: 1 },
+          exit: { y: h ? "100%" : 20, opacity: 0 },
+          transition: { type: "spring", damping: 25, stiffness: 200 },
+          className: `picker-dropdown glass-card ${h ? "mobile" : "desktop"}`,
+          children: h ? G() : _()
+        }
+      )
+    ] }) })
+  ] });
+};
+export {
+  Pe as DatePicker,
+  he as SharedInput,
+  Oe as TimePicker
+};

package/dist/date-time-picker-custom.umd.js

@@ -0,0 +1,6 @@
+(function(z,c){typeof exports=="object"&&typeof module<"u"?c(exports,require("react"),require("lucide-react"),require("date-fns"),require("framer-motion")):typeof define=="function"&&define.amd?define(["exports","react","lucide-react","date-fns","framer-motion"],c):(z=typeof globalThis<"u"?globalThis:z||self,c(z.DateTimePickerCustom={},z.React,z.lucideReact,z.dateFns,z.framerMotion))})(this,(function(z,c,Z,M,K){"use strict";var te={exports:{}},$={};var ce;function ie(){if(ce)return $;ce=1;var m=Symbol.for("react.transitional.element"),v=Symbol.for("react.fragment");function W(u,l,p){var k=null;if(p!==void 0&&(k=""+p),l.key!==void 0&&(k=""+l.key),"key"in l){p={};for(var j in l)j!=="key"&&(p[j]=l[j])}else p=l;return l=p.ref,{$$typeof:m,type:u,key:k,ref:l!==void 0?l:null,props:p}}return $.Fragment=v,$.jsx=W,$.jsxs=W,$}var ee={};var ae;function ue(){return ae||(ae=1,process.env.NODE_ENV!=="production"&&(function(){function m(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===w?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case C:return"Fragment";case O:return"Profiler";case P:return"StrictMode";case i:return"Suspense";case d:return"SuspenseList";case V:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case J:return"Portal";case B:return e.displayName||"Context";case N:return(e._context.displayName||"Context")+".Consumer";case U:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case y:return r=e.displayName||null,r!==null?r:m(e.type)||"Memo";case x:r=e._payload,e=e._init;try{return m(e(r))}catch{}}return null}function v(e){return""+e}function W(e){try{v(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),v(e)}}function u(e){if(e===C)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===x)return"<...>";try{var r=m(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function l(){var e=I.A;return e===null?null:e.getOwner()}function p(){return Error("react-stack-top-frame")}function k(e){if(_.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function j(e,r){function n(){D||(D=!0,console.error("%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",r))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function Q(){var e=m(this.type);return Y[e]||(Y[e]=!0,console.error("Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release.")),e=this.props.ref,e!==void 0?e:null}function A(e,r,n,o,h,S){var g=n.ref;return e={$$typeof:H,type:e,key:r,props:n,_owner:o},(g!==void 0?g:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:Q}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:h}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:S}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function f(e,r,n,o,h,S){var g=r.children;if(g!==void 0)if(o)if(X(g)){for(o=0;o<g.length;o++)R(g[o]);Object.freeze&&Object.freeze(g)}else console.error("React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead.");else R(g);if(_.call(r,"key")){g=m(e);var F=Object.keys(r).filter(function(q){return q!=="key"});o=0<F.length?"{key: someKey, "+F.join(": ..., ")+": ...}":"{key: someKey}",s[g+o]||(F=0<F.length?"{"+F.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+  let props = %s;
+  <%s {...props} />
+React keys must be passed directly to JSX without using spread:
+  let props = %s;
+  <%s key={someKey} {...props} />`,o,g,F,g),s[g+o]=!0)}if(g=null,n!==void 0&&(W(n),g=""+n),k(r)&&(W(r.key),g=""+r.key),"key"in r){n={};for(var G in r)G!=="key"&&(n[G]=r[G])}else n=r;return g&&j(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),A(e,g,n,l(),h,S)}function R(e){T(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===x&&(e._payload.status==="fulfilled"?T(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function T(e){return typeof e=="object"&&e!==null&&e.$$typeof===H}var E=c,H=Symbol.for("react.transitional.element"),J=Symbol.for("react.portal"),C=Symbol.for("react.fragment"),P=Symbol.for("react.strict_mode"),O=Symbol.for("react.profiler"),N=Symbol.for("react.consumer"),B=Symbol.for("react.context"),U=Symbol.for("react.forward_ref"),i=Symbol.for("react.suspense"),d=Symbol.for("react.suspense_list"),y=Symbol.for("react.memo"),x=Symbol.for("react.lazy"),V=Symbol.for("react.activity"),w=Symbol.for("react.client.reference"),I=E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,_=Object.prototype.hasOwnProperty,X=Array.isArray,a=console.createTask?console.createTask:function(){return null};E={react_stack_bottom_frame:function(e){return e()}};var D,Y={},b=E.react_stack_bottom_frame.bind(E,p)(),L=a(u(p)),s={};ee.Fragment=C,ee.jsx=function(e,r,n){var o=1e4>I.recentlyCreatedOwnerStacks++;return f(e,r,n,!1,o?Error("react-stack-top-frame"):b,o?a(u(e)):L)},ee.jsxs=function(e,r,n){var o=1e4>I.recentlyCreatedOwnerStacks++;return f(e,r,n,!0,o?Error("react-stack-top-frame"):b,o?a(u(e)):L)}})()),ee}var le;function de(){return le||(le=1,process.env.NODE_ENV==="production"?te.exports=ie():te.exports=ue()),te.exports}var t=de();const fe=m=>{const[v,W]=c.useState(!1);return c.useEffect(()=>{const u=window.matchMedia(m);u.matches!==v&&W(u.matches);const l=()=>W(u.matches);return u.addEventListener("change",l),()=>u.removeEventListener("change",l)},[v,m]),v},re=()=>fe("(max-width: 768px)"),se=({icon:m,value:v,onChange:W,onToggle:u,placeholder:l,error:p,onClear:k,mask:j,onFocus:Q,onBlur:A})=>{const f=re(),[R,T]=c.useState(!1),[E,H]=c.useState("down"),J=c.useRef(null),C=c.useRef(null),P=()=>{if(C.current){const i=C.current.getBoundingClientRect(),d=window.innerHeight-i.bottom,y=i.top;d<350&&y>d?H("up"):H("down")}},O=i=>{i&&i.stopPropagation(),P(),u()},N=(i,d)=>{const y=parseInt(i,10);return isNaN(y)?i:d==="month"?Math.min(Math.max(y,1),12).toString().padStart(2,"0"):d==="day"?Math.min(Math.max(y,1),31).toString().padStart(2,"0"):d==="hour"?Math.min(Math.max(y,0),23).toString().padStart(2,"0"):d==="hour12"?Math.min(Math.max(y,1),12).toString().padStart(2,"0"):d==="minsec"?Math.min(Math.max(y,0),59).toString().padStart(2,"0"):i},B=i=>{if(!j)return i;if(j==="date"){const d=i.replace(/[^0-9]/g,"");let y=d.substring(0,4),x=d.substring(4,6),V=d.substring(6,8),w=y;return d.length>4?(x.length===2&&(x=N(x,"month")),w+="/"+x):d.length===4&&i.length===4&&(w+="/"),d.length>6?(V.length===2&&(V=N(V,"day")),w+="/"+V):d.length===6&&i.length===7&&(w+="/"),w}if(j.includes("time")){const d=j.endsWith("-ampm"),y=j.includes("seconds"),x=i.replace(/[^0-9]/g,""),V=i.toLowerCase().match(/[ap]/);let w="";d&&V&&(w=V[0]==="a"?"AM":"PM");let I=x.substring(0,2);x.substring(2,4),x.substring(4,6);let _=I;if(x.length>=2&&(I.length===2&&(I=N(I,d?"hour12":"hour")),_=I+":",x.length>2)){let X=x.substring(2,4);if(X.length===2&&(X=N(X,"minsec")),_+=X,x.length>=4)if(y){if(_+=":",x.length>4){let a=x.substring(4,6);a.length===2&&(a=N(a,"minsec")),_+=a,x.length>=6&&d&&(_+=" "+(w||""))}}else d&&(_+=" "+(w||""))}return d&&w&&!_.includes(w)&&(_.includes(" ")||(_+=" "),_+=w),_.trimEnd()}return i},U=i=>{const d=i.target.value,y=B(d);W(y)};return t.jsxs("div",{ref:C,className:`input-container glass-card ${R?"focused":""} ${p?"error":""} drop-${E}`,onClick:O,children:[t.jsx("div",{className:"input-icon-wrapper",children:t.jsx(m,{size:18,className:"input-icon"})}),t.jsx("input",{ref:J,type:"text",placeholder:l,className:"shared-input",value:v,onChange:U,readOnly:f,onFocus:i=>{T(!0),P(),Q&&Q(i)},onBlur:i=>{T(!1),A&&A(i)},onClick:i=>{f?O(i):i.stopPropagation()}}),v&&k&&t.jsx("button",{className:"clear-btn",onClick:i=>{i.stopPropagation(),k()},children:t.jsx(Z.X,{size:14})})]})},me=({value:m,onChange:v,placeholder:W="YYYY/MM/DD"})=>{const u=re(),[l,p]=c.useState(!1),[k,j]=c.useState("calendar"),[Q,A]=c.useState(m?M.format(new Date(m),"yyyy/MM/dd"):""),[f,R]=c.useState(m?new Date(m):new Date),[T,E]=c.useState(m?new Date(m):new Date),[H,J]=c.useState(!1),C=c.useRef(null),P=c.useRef(null),O=c.useRef(null),N=c.useRef(null),B=c.useRef(null),U=c.useRef(0),i=Array.from({length:151},(s,e)=>new Date().getFullYear()-100+e),d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],y=new Date(f.getFullYear(),f.getMonth()+1,0).getDate(),x=Array.from({length:y},(s,e)=>e+1);c.useEffect(()=>{if(!H&&!l)if(m){const s=M.format(new Date(m),"yyyy/MM/dd");A(s),E(new Date(m)),R(new Date(m))}else A(""),R(new Date)},[m,H,l]),c.useEffect(()=>{if(l&&u){const s=()=>{const n=i.indexOf(f.getFullYear());P.current&&n!==-1&&(P.current.scrollTop=n*32),O.current&&(O.current.scrollTop=f.getMonth()*32),N.current&&(N.current.scrollTop=(f.getDate()-1)*32)};s();const e=setTimeout(s,50),r=setTimeout(s,300);return()=>{clearTimeout(e),clearTimeout(r)}}},[l,u]);const V=()=>{if(!l){const s=m?new Date(m):new Date;R(s),E(s),j("calendar"),U.current=Date.now()}p(!l)},w=()=>{v(f),A(M.format(f,"yyyy/MM/dd")),p(!1)},I=s=>{if(A(s),s===""){v(null),R(new Date);return}const e=M.parse(s,"yyyy/MM/dd",new Date);M.isValid(e)&&(v(e),E(e),R(e))},_=s=>{u?R(s):(v(s),A(M.format(s,"yyyy/MM/dd")),p(!1))},X=s=>{const e=new Date(T);e.setFullYear(s),E(e),j("calendar")},a=s=>{const e=new Date(T);e.setMonth(s),E(e),j("calendar")};c.useEffect(()=>{const s=e=>{C.current&&!C.current.contains(e.target)&&p(!1)};return document.addEventListener("mousedown",s),()=>document.removeEventListener("mousedown",s)},[]),c.useEffect(()=>(u&&l?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[l,u]);const D=()=>t.jsxs("div",{className:"selector-view",children:[t.jsx("div",{className:"calendar-header",children:t.jsx("span",{children:"Select Month"})}),t.jsx("div",{className:"grid-selector column-3",children:d.map((s,e)=>t.jsx("button",{className:`select-cell ${T.getMonth()===e?"active":""}`,onClick:()=>a(e),children:s},s))})]}),Y=()=>{const s=Math.floor(T.getFullYear()/12)*12,e=Array.from({length:12},(r,n)=>s+n);return t.jsxs("div",{className:"selector-view",children:[t.jsxs("div",{className:"calendar-header",children:[t.jsx("button",{onClick:()=>E(M.subMonths(T,144)),children:t.jsx(Z.ChevronLeft,{size:16})}),t.jsx("span",{children:"Select Year"}),t.jsx("button",{onClick:()=>E(M.addMonths(T,144)),children:t.jsx(Z.ChevronRight,{size:16})})]}),t.jsx("div",{className:"grid-selector column-3",children:e.map(r=>t.jsx("button",{className:`select-cell ${T.getFullYear()===r?"active":""}`,onClick:()=>X(r),children:r},r))})]})},b=()=>{const s=["Su","Mo","Tu","We","Th","Fr","Sa"],e=M.startOfMonth(T),r=M.endOfMonth(T),n=M.eachDayOfInterval({start:e,end:r}),o=Array(M.getDay(e)).fill(null);return k==="year"?Y():k==="month"?D():t.jsxs("div",{className:"desktop-calendar",children:[t.jsxs("div",{className:"calendar-header",children:[t.jsx("button",{onClick:()=>E(M.subMonths(T,1)),children:t.jsx(Z.ChevronLeft,{size:18})}),t.jsxs("div",{className:"header-nav",children:[t.jsx("span",{className:"nav-btn",onClick:()=>j("month"),children:M.format(T,"MMMM")}),t.jsx("span",{className:"nav-btn",onClick:()=>j("year"),children:M.format(T,"yyyy")})]}),t.jsx("button",{onClick:()=>E(M.addMonths(T,1)),children:t.jsx(Z.ChevronRight,{size:18})})]}),t.jsxs("div",{className:"calendar-grid",children:[s.map(h=>t.jsx("div",{className:"calendar-day-header",children:h},h)),o.map((h,S)=>t.jsx("div",{},`empty-${S}`)),n.map(h=>t.jsx("button",{className:`calendar-day-cell ${M.isSameDay(h,new Date(m))?"active":""} ${M.isSameDay(h,new Date)?"today":""}`,onClick:()=>_(h),children:M.format(h,"d")},h.toString()))]})]})},L=()=>{const s=(r,n)=>{const o=new Date(f);let h=o.getDate();r==="year"&&o.setFullYear(n),r==="month"&&o.setMonth(n),r==="day"&&(o.setDate(n),h=n);const S=new Date(o.getFullYear(),o.getMonth()+1,0).getDate();h>S&&o.setDate(S),R(o),r==="year"&&P.current&&P.current.scrollTo({top:i.indexOf(n)*32,behavior:"smooth"}),r==="month"&&O.current&&O.current.scrollTo({top:n*32,behavior:"smooth"}),r==="day"&&N.current&&N.current.scrollTo({top:(n-1)*32,behavior:"smooth"}),r!=="day"&&h>S&&N.current&&N.current.scrollTo({top:(S-1)*32,behavior:"smooth"})},e=(r,n,o)=>{if(Date.now()-U.current<500)return;const h=r.target.scrollTop,S=Math.round(h/32);if(S>=0&&S<o.length){const g=o[S];B.current&&clearTimeout(B.current),B.current=setTimeout(()=>{let F=f.getFullYear(),G=f.getMonth(),q=f.getDate();n==="year"&&(F=g),n==="month"&&(G=g),n==="day"&&(q=g);const ne=new Date(F,G+1,0).getDate();q>ne&&(q=ne);const oe=new Date(F,G,q);oe.setHours(f.getHours(),f.getMinutes(),f.getSeconds(),f.getMilliseconds()),f.getTime()!==oe.getTime()&&R(oe),n!=="day"&&f.getDate()>ne&&N.current&&N.current.scrollTo({top:(ne-1)*32,behavior:"smooth"})},150)}};return t.jsxs("div",{className:"mobile-scroll-picker",children:[t.jsxs("div",{className:"mobile-header",children:[t.jsx("h3",{children:"Select Date"}),t.jsx("span",{className:"selected-preview",children:M.format(f,"dd MMM yyyy")})]}),t.jsxs("div",{className:"scroll-columns",style:{touchAction:"pan-y"},children:[t.jsx("div",{className:"scroll-col year-col",ref:P,onScroll:r=>e(r,"year",i),children:i.map(r=>t.jsx("div",{className:`scroll-item ${f.getFullYear()===r?"selected":""}`,onClick:()=>s("year",r),children:r},r))}),t.jsx("div",{className:"scroll-col month-col",ref:O,onScroll:r=>e(r,"month",d.map((n,o)=>o)),children:d.map((r,n)=>t.jsx("div",{className:`scroll-item ${f.getMonth()===n?"selected":""}`,onClick:()=>s("month",n),children:r},r))}),t.jsx("div",{className:"scroll-col day-col",ref:N,onScroll:r=>e(r,"day",x),children:x.map(r=>t.jsx("div",{className:`scroll-item ${f.getDate()===r?"selected":""}`,onClick:()=>s("day",r),children:r},r))})]}),t.jsx("button",{className:"confirm-btn",onClick:w,children:"Confirm"})]})};return t.jsxs("div",{className:"datepicker-wrapper",ref:C,children:[t.jsx(se,{icon:Z.Calendar,value:Q,onChange:I,onToggle:V,placeholder:W,mask:"date",onFocus:()=>J(!0),onBlur:()=>J(!1),onClear:()=>{A(""),v(null)}}),t.jsx(K.AnimatePresence,{children:l&&t.jsxs(t.Fragment,{children:[u&&t.jsx(K.motion.div,{className:"mobile-backdrop",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:()=>p(!1)}),t.jsx(K.motion.div,{initial:{y:u?"100%":20,opacity:0},animate:{y:0,opacity:1},exit:{y:u?"100%":20,opacity:0},transition:{type:"spring",damping:25,stiffness:200},className:`picker-dropdown glass-card ${u?"mobile":"desktop"}`,children:u?L():b()})]})})]})},he=({value:m,onChange:v,placeholder:W="HH/MM AM/PM",showSeconds:u=!1,use12h:l=!0})=>{const p=re(),[k,j]=c.useState(!1),[Q,A]=c.useState(m||""),[f,R]=c.useState(m||""),[T,E]=c.useState(!1),H=c.useRef(null),J=c.useRef(null),C=c.useRef(null),P=c.useRef(null),O=c.useRef(null),N=c.useRef(null),B=c.useRef(0),U=l?Array.from({length:12},(a,D)=>(D+1).toString().padStart(2,"0")):Array.from({length:24},(a,D)=>D.toString().padStart(2,"0")),i=Array.from({length:60},(a,D)=>D.toString().padStart(2,"0")),d=Array.from({length:60},(a,D)=>D.toString().padStart(2,"0")),y=["AM","PM"];c.useEffect(()=>{!T&&!k&&(A(m||""),R(m||""))},[m,T,k]),c.useEffect(()=>{if(k&&p){let a="01:00";u&&(a+=":00"),l&&(a+=" AM");const Y=(f||a).split(" "),b=Y[0].split(":"),L=Y[1]||"AM",s=()=>{const n=U.indexOf(b[0]);J.current&&n!==-1&&(J.current.scrollTop=n*32),C.current&&(C.current.scrollTop=parseInt(b[1]||0)*32),P.current&&u&&(P.current.scrollTop=parseInt(b[2]||0)*32),O.current&&l&&(O.current.scrollTop=y.indexOf(L)*32)};s();const e=setTimeout(s,50),r=setTimeout(s,300);return()=>{clearTimeout(e),clearTimeout(r)}}},[k,p]);const x=()=>{if(!k){let a="01:00";u&&(a+=":00"),l&&(a+=" AM"),R(Q||a),B.current=Date.now()}j(!k)},V=()=>{A(f),v(f),j(!1)},w=a=>{A(a);const Y=a.split(" ")[0].split(":");Y.length>=2?Y.every(L=>L.length===2)&&(v(a),R(a)):a===""&&(v(""),R(""))},I=a=>{R(a),p||A(a)};c.useEffect(()=>{const a=D=>{H.current&&!H.current.contains(D.target)&&j(!1)};return document.addEventListener("mousedown",a),()=>document.removeEventListener("mousedown",a)},[]),c.useEffect(()=>(p&&k?document.body.style.overflow="hidden":document.body.style.overflow="",()=>{document.body.style.overflow=""}),[k,p]);const _=()=>{let a="01:00";u&&(a+=":00"),l&&(a+=" AM");const Y=(f||a).split(" "),b=Y[0].split(":"),L=Y[1]||"AM",s=(e=b[0]||"12",r=b[1]||"00",n=b[2]||"00",o=L)=>{let h=`${e}:${r}`;u&&(h+=`:${n}`),l&&(h+=` ${o}`),I(h)};return t.jsxs("div",{className:`desktop-time-picker ${u?"with-seconds":""}`,children:[t.jsxs("div",{className:"time-select-grid",children:[t.jsxs("div",{className:"time-col",children:[t.jsx("span",{className:"col-label",children:"Hrs"}),t.jsx("div",{className:"time-scroll",children:U.map(e=>t.jsx("button",{className:`time-btn ${b[0]===e?"active":""}`,onClick:()=>s(e),children:e},e))})]}),t.jsxs("div",{className:"time-col",children:[t.jsx("span",{className:"col-label",children:"Min"}),t.jsx("div",{className:"time-scroll",children:i.map(e=>t.jsx("button",{className:`time-btn ${b[1]===e?"active":""}`,onClick:()=>s(void 0,e),children:e},e))})]}),u&&t.jsxs("div",{className:"time-col",children:[t.jsx("span",{className:"col-label",children:"Sec"}),t.jsx("div",{className:"time-scroll",children:d.map(e=>t.jsx("button",{className:`time-btn ${b[2]===e?"active":""}`,onClick:()=>s(void 0,void 0,e),children:e},e))})]}),l&&t.jsxs("div",{className:"time-col",children:[t.jsx("span",{className:"col-label",children:"Mode"}),t.jsx("div",{className:"time-scroll",children:y.map(e=>t.jsx("button",{className:`time-btn ${L===e?"active":""}`,onClick:()=>s(void 0,void 0,void 0,e),children:e},e))})]})]}),t.jsx("div",{className:"desktop-footer",children:t.jsxs("button",{className:"confirm-btn small",onClick:V,children:[t.jsx(Z.Check,{size:16,style:{marginRight:"6px"}})," Done"]})})]})},X=()=>{let a="01:00";u&&(a+=":00"),l&&(a+=" AM");const Y=(f||a).split(" "),b=Y[0].split(":"),L=Y[1]||"AM",s=(n,o)=>{const h=[...b];for(;h.length<(u?3:2);)h.push("00");h[n]=o;let S=h.slice(0,u?3:2).join(":");l&&(S+=` ${L}`),I(S),n===0&&J.current&&J.current.scrollTo({top:U.indexOf(o)*32,behavior:"smooth"}),n===1&&C.current&&C.current.scrollTo({top:i.indexOf(o)*32,behavior:"smooth"}),n===2&&P.current&&P.current.scrollTo({top:d.indexOf(o)*32,behavior:"smooth"})},e=n=>{let o=b.slice(0,u?3:2).join(":");l&&(o+=` ${n}`),I(o),O.current&&O.current.scrollTo({top:y.indexOf(n)*32,behavior:"smooth"})},r=(n,o,h,S)=>{if(Date.now()-B.current<500)return;const g=n.target.scrollTop,F=Math.round(g/32);if(F>=0&&F<S.length){const G=S[F];N.current&&clearTimeout(N.current),N.current=setTimeout(()=>{o==="part"?b[h]!==G&&s(h,G):o==="ampm"&&L!==G&&e(G)},150)}};return t.jsxs("div",{className:"mobile-scroll-picker",children:[t.jsxs("div",{className:"mobile-header",children:[t.jsx("h3",{children:"Select Time"}),t.jsx("span",{className:"selected-preview",children:f||"--:--"})]}),t.jsxs("div",{className:"scroll-columns",style:{touchAction:"pan-y"},children:[t.jsx("div",{className:"scroll-col hour-col",ref:J,onScroll:n=>r(n,"part",0,U),children:U.map(n=>t.jsx("div",{className:`scroll-item ${b[0]===n?"selected":""}`,onClick:()=>s(0,n),children:n},n))}),t.jsx("div",{className:"scroll-col min-col",ref:C,onScroll:n=>r(n,"part",1,i),children:i.map(n=>t.jsx("div",{className:`scroll-item ${b[1]===n?"selected":""}`,onClick:()=>s(1,n),children:n},n))}),u&&t.jsx("div",{className:"scroll-col sec-col",ref:P,onScroll:n=>r(n,"part",2,d),children:d.map(n=>t.jsx("div",{className:`scroll-item ${b[2]===n?"selected":""}`,onClick:()=>s(2,n),children:n},n))}),l&&t.jsx("div",{className:"scroll-col ampm-col",ref:O,onScroll:n=>r(n,"ampm",null,y),children:y.map(n=>t.jsx("div",{className:`scroll-item ${L===n?"selected":""}`,onClick:()=>e(n),children:n},n))})]}),t.jsx("button",{className:"confirm-btn",onClick:V,children:"Confirm"})]})};return t.jsxs("div",{className:"timepicker-wrapper",ref:H,children:[t.jsx(se,{icon:Z.Clock,value:Q,onChange:w,onToggle:x,placeholder:u?"HH:MM:SS AM/PM":"HH:MM AM/PM",mask:u?l?"time-seconds-ampm":"time-seconds":l?"time-ampm":"time",onFocus:()=>E(!0),onBlur:()=>E(!1),onClear:()=>{A(""),R(""),v("")}}),t.jsx(K.AnimatePresence,{children:k&&t.jsxs(t.Fragment,{children:[p&&t.jsx(K.motion.div,{className:"mobile-backdrop",initial:{opacity:0},animate:{opacity:1},exit:{opacity:0},onClick:()=>j(!1)}),t.jsx(K.motion.div,{initial:{y:p?"100%":20,opacity:0},animate:{y:0,opacity:1},exit:{y:p?"100%":20,opacity:0},transition:{type:"spring",damping:25,stiffness:200},className:`picker-dropdown glass-card ${p?"mobile":"desktop"}`,children:p?X():_()})]})})]})};z.DatePicker=me,z.SharedInput=se,z.TimePicker=he,Object.defineProperty(z,Symbol.toStringTag,{value:"Module"})}));

package/dist/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "@sauravluitel/date-time-picker-custom",
+  "version": "1.0.0",
+  "description": "Premium React Date and Time Pickers with dedicated Mobile and Desktop UI",
+  "author": "Antigravity AI",
+  "type": "module",
+  "main": "dist/date-time-picker-custom.umd.js",
+  "module": "dist/date-time-picker-custom.es.js",
+  "exports": {
+    ".": {
+      "import": "./dist/date-time-picker-custom.es.js",
+      "require": "./dist/date-time-picker-custom.umd.js"
+    },
+    "./style.css": "./dist/date-time-picker-custom.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "prepare": "npm run build"
+  },
+  "dependencies": {
+    "date-fns": "^4.1.0",
+    "framer-motion": "^12.34.3",
+    "lucide-react": "^0.575.0"
+  },
+  "peerDependencies": {
+    "react": ">=18.0.0",
+    "react-dom": ">=18.0.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-router-dom": "^7.13.1",
+    "vite": "^7.3.1"
+  }
+}