time-picker-input 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2024
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

package/README.md

@@ -0,0 +1,162 @@
+# Time Picker Input
+
+A customizable React time input component that enforces 12-hour or 24-hour format, bypassing OS and browser settings for consistent time input across all platforms.
+
+## Features
+
+- 🎯 **Format Enforcement**: Enforce 12-hour or 24-hour format regardless of OS/browser settings
+- 🎨 **Customizable**: Built with Tailwind CSS and fully customizable styling
+- ♿ **Accessible**: Built on Radix UI primitives for full accessibility support
+- ⌨️ **Keyboard Friendly**: Full keyboard navigation support
+- 📱 **Mobile Friendly**: Touch-friendly time picker with scrollable lists
+- 🎭 **TypeScript**: Full TypeScript support with exported types
+
+## Installation
+
+```bash
+npm install time-picker-input
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+```bash
+npm install react react-dom tailwindcss
+```
+
+## Usage
+
+### Basic Example
+
+```tsx
+import { useState } from "react";
+import { TimeInput } from "time-picker-input";
+
+function App() {
+  const [time, setTime] = useState("");
+
+  return (
+    <TimeInput
+      value={time}
+      onChange={setTime}
+      format={24} // or 12 for 12-hour format
+    />
+  );
+}
+```
+
+### 12-Hour Format
+
+```tsx
+import { TimeInput } from "time-picker-input";
+
+<TimeInput
+  value={time}
+  onChange={setTime}
+  format={12}
+/>
+```
+
+### With Form Integration
+
+```tsx
+import { TimeInput, TimeInputProps } from "time-picker-input";
+
+function MyForm() {
+  const [time, setTime] = useState("14:30");
+
+  return (
+    <form>
+      <label>
+        Select Time:
+        <TimeInput
+          value={time}
+          onChange={(value) => setTime(value)}
+          onBlur={() => console.log("Time input blurred")}
+          format={24}
+          className="w-full"
+        />
+      </label>
+    </form>
+  );
+}
+```
+
+### With Error Styling
+
+```tsx
+<TimeInput
+  value={time}
+  onChange={setTime}
+  className="border-red-500 focus-within:ring-red-500"
+/>
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `value` | `string` | **required** | Time value in `HH:mm` format (24-hour format internally) |
+| `onChange` | `(value: string) => void` | **required** | Callback fired when time changes |
+| `onBlur` | `() => void` | `undefined` | Callback fired when input loses focus |
+| `disabled` | `boolean` | `false` | Disables the input |
+| `className` | `string` | `undefined` | Additional CSS classes |
+| `format` | `12 \| 24` | `24` | Time format to display (12-hour or 24-hour) |
+
+## Value Format
+
+The component always stores and returns time values in **24-hour format** (`HH:mm`), regardless of the display format:
+
+- `"00:00"` - Midnight (12:00 AM in 12-hour format)
+- `"12:00"` - Noon (12:00 PM in 12-hour format)
+- `"14:30"` - 2:30 PM (2:30 PM in 12-hour format)
+- `"23:59"` - 11:59 PM
+
+## Styling
+
+The component uses Tailwind CSS and follows shadcn/ui design patterns. You can customize the appearance by:
+
+1. **Passing className prop**: Add custom classes to override default styles
+2. **CSS Variables**: The component uses CSS variables for theming. Ensure your Tailwind config includes the necessary color variables:
+
+```css
+:root {
+  --background: 0 0% 100%;
+  --foreground: 220 39% 11%;
+  --primary: 218 91% 59%;
+  --primary-foreground: 0 0% 98%;
+  --muted: 220 14% 96%;
+  --muted-foreground: 220 8.9% 46.1%;
+  --accent: 220 14% 96%;
+  --accent-foreground: 220 39% 11%;
+  --border: 220 13% 91%;
+  --input: 220 13% 91%;
+  --ring: 218 91% 59%;
+  --popover: 0 0% 100%;
+  --popover-foreground: 220 39% 11%;
+}
+```
+
+## Keyboard Navigation
+
+- **Tab**: Navigate between hours and minutes inputs
+- **Arrow Right / Colon (`:`)** : Move from hours to minutes
+- **Arrow Left**: Move from minutes to hours
+- **Enter**: Move to minutes when hours input is complete
+- **Numbers**: Direct input of time values
+
+## Browser Support
+
+Works in all modern browsers that support:
+- React 18+
+- CSS Grid and Flexbox
+- ES6+ JavaScript
+
+## License
+
+MIT
+
+## Contributing
+
+Contributions are welcome! Please feel free to submit a Pull Request.

package/dist/components/ui/popover.d.ts

@@ -0,0 +1,6 @@
+import { default as React } from 'react';
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+declare const Popover: React.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: React.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React.RefAttributes<HTMLButtonElement>>;
+declare const PopoverContent: React.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { Popover, PopoverTrigger, PopoverContent };

package/dist/components/ui/scroll-area.d.ts

@@ -0,0 +1,5 @@
+import { default as React } from 'react';
+import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
+declare const ScrollArea: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+declare const ScrollBar: React.ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export { ScrollArea, ScrollBar };

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { TimeInput } from './time-input';
+export type { TimeInputProps } from './time-input';

package/dist/index.esm

@@ -0,0 +1,274 @@
+import { jsx as n, jsxs as $ } from "react/jsx-runtime";
+import H, { useRef as k, useState as I } from "react";
+import { clsx as ee } from "clsx";
+import { twMerge as te } from "tailwind-merge";
+import { Clock as re } from "lucide-react";
+import * as b from "@radix-ui/react-popover";
+import * as h from "@radix-ui/react-scroll-area";
+function f(...a) {
+  return te(ee(a));
+}
+const ne = b.Root, oe = b.Trigger, O = H.forwardRef(({ className: a, align: i = "center", sideOffset: u = 4, ...l }, m) => /* @__PURE__ */ n(b.Portal, { children: /* @__PURE__ */ n(
+  b.Content,
+  {
+    ref: m,
+    align: i,
+    sideOffset: u,
+    className: f(
+      "z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+      a
+    ),
+    ...l
+  }
+) }));
+O.displayName = b.Content.displayName;
+const V = H.forwardRef(({ className: a, children: i, ...u }, l) => /* @__PURE__ */ $(
+  h.Root,
+  {
+    ref: l,
+    className: f("relative overflow-hidden", a),
+    ...u,
+    children: [
+      /* @__PURE__ */ n(h.Viewport, { className: "h-full w-full rounded-[inherit]", children: i }),
+      /* @__PURE__ */ n(j, {}),
+      /* @__PURE__ */ n(h.Corner, {})
+    ]
+  }
+));
+V.displayName = h.Root.displayName;
+const j = H.forwardRef(({ className: a, orientation: i = "vertical", ...u }, l) => /* @__PURE__ */ n(
+  h.ScrollAreaScrollbar,
+  {
+    ref: l,
+    orientation: i,
+    className: f(
+      "flex touch-none select-none transition-colors",
+      i === "vertical" && "h-full w-2.5 border-l border-l-transparent p-[1px]",
+      i === "horizontal" && "h-2.5 flex-col border-t border-t-transparent p-[1px]",
+      a
+    ),
+    ...u,
+    children: /* @__PURE__ */ n(h.ScrollAreaThumb, { className: "relative flex-1 rounded-full bg-border" })
+  }
+));
+j.displayName = h.ScrollAreaScrollbar.displayName;
+const ue = ({ value: a, onChange: i, onBlur: u, disabled: l, className: m, format: D }) => {
+  const d = D || 24, T = k(null), y = k(null), [q, L] = I(!1), [w, x] = I(""), [v, P] = I(""), [N, C] = I("AM"), R = k(null), E = k(null), S = (t) => {
+    if (!t) return { hours: "", minutes: "" };
+    const e = t.split(":");
+    return {
+      hours: e[0] || "",
+      minutes: e[1] || ""
+    };
+  }, _ = () => {
+    if (!a) return { hours: "", minutes: "", amPm: "AM" };
+    const { hours: t, minutes: e } = S(a);
+    if (d === 12) {
+      const r = parseInt(t) || 0;
+      return r === 0 ? { hours: "12", minutes: e, amPm: "AM" } : r < 12 ? { hours: String(r), minutes: e, amPm: "AM" } : r === 12 ? { hours: "12", minutes: e, amPm: "PM" } : { hours: String(r - 12), minutes: e, amPm: "PM" };
+    }
+    return { hours: t, minutes: e, amPm: "AM" };
+  }, { hours: z, minutes: p, amPm: F } = _(), G = (t) => {
+    const e = parseInt(t) || 0;
+    return e === 0 ? { hour: "12", amPm: "AM" } : e < 12 ? { hour: String(e), amPm: "AM" } : e === 12 ? { hour: "12", amPm: "PM" } : { hour: String(e - 12), amPm: "PM" };
+  }, K = (t, e) => {
+    const r = parseInt(t) || 0;
+    return e === "AM" ? r === 12 ? "00" : String(r).padStart(2, "0") : r === 12 ? "12" : String(r + 12).padStart(2, "0");
+  }, J = (t) => {
+    if (L(t), t && a) {
+      const { hours: e, minutes: r } = S(a);
+      if (d === 12) {
+        const { hour: o, amPm: s } = G(e);
+        x(o), P(r), C(s), setTimeout(() => {
+          var A;
+          const c = parseInt(o) - 1, g = (A = R.current) == null ? void 0 : A.querySelector(`[data-hour-index="${c}"]`);
+          g && g.scrollIntoView({ block: "center", behavior: "smooth" });
+        }, 100);
+      } else
+        x(e), P(r), setTimeout(() => {
+          var c;
+          const o = parseInt(e) || 0, s = (c = R.current) == null ? void 0 : c.querySelector(`[data-hour-index="${o}"]`);
+          s && s.scrollIntoView({ block: "center", behavior: "smooth" });
+        }, 100);
+      setTimeout(() => {
+        var c;
+        const o = parseInt(r) || 0, s = (c = E.current) == null ? void 0 : c.querySelector(`[data-minute-index="${o}"]`);
+        s && s.scrollIntoView({ block: "center", behavior: "smooth" });
+      }, 150);
+    } else t && !a && (x(""), P(""), C("AM"));
+  }, M = (t, e, r) => {
+    let o = t;
+    d === 12 && r && (o = K(t, r));
+    const s = o ? String(parseInt(o) || 0).padStart(2, "0") : "00", c = e ? String(parseInt(e) || 0).padStart(2, "0") : "00", g = `${s}:${c}`;
+    i(g);
+  }, Q = m == null ? void 0 : m.includes("border-red-500"), U = (t) => {
+    var o;
+    let e = t.target.value.replace(/\D/g, "");
+    e.length > 2 && (e = e.slice(0, 2)), e.length === 2 && ((o = y.current) == null || o.focus());
+    const r = parseInt(e);
+    if (d === 12) {
+      if (e && (isNaN(r) || r < 1 || r > 12))
+        return;
+      const s = S(a).hours, c = parseInt(s) >= 12 ? "PM" : "AM", g = K(e || "12", c), A = e ? `${g}:${p.padStart(2, "0") || "00"}` : p ? `00:${p.padStart(2, "0")}` : "";
+      i(A);
+    } else {
+      if (e && (isNaN(r) || r < 0 || r > 23))
+        return;
+      const s = e ? `${e.padStart(2, "0")}:${p.padStart(2, "0") || "00"}` : p ? `00:${p.padStart(2, "0")}` : "";
+      i(s);
+    }
+  }, W = (t) => {
+    let e = t.target.value.replace(/\D/g, "");
+    e.length > 2 && (e = e.slice(0, 2));
+    const r = parseInt(e);
+    if (e && (isNaN(r) || r < 0 || r > 59))
+      return;
+    const o = S(a).hours, s = o ? `${o.padStart(2, "0")}:${e.padStart(2, "0") || "00"}` : e ? `00:${e.padStart(2, "0")}` : "";
+    i(s);
+  }, X = (t) => {
+    var e, r;
+    (t.key === "ArrowRight" || t.key === ":") && (t.preventDefault(), (e = y.current) == null || e.focus()), t.key === "Enter" && z.length === 2 && (t.preventDefault(), (r = y.current) == null || r.focus());
+  }, Y = (t) => {
+    var e;
+    t.key === "ArrowLeft" && (t.preventDefault(), (e = T.current) == null || e.focus());
+  }, Z = () => {
+    const { hours: t, minutes: e } = S(a), r = t ? String(parseInt(t) || 0).padStart(2, "0") : "00", o = e ? String(parseInt(e) || 0).padStart(2, "0") : "00", s = `${r}:${o}`;
+    i(s), u == null || u();
+  }, B = (m == null ? void 0 : m.split(" ").filter(
+    (t) => !t.includes("border-red-500") && !t.includes("focus:border-red-500")
+  ).join(" ")) || "";
+  return /* @__PURE__ */ $(
+    "div",
+    {
+      className: f(
+        "flex h-10 w-full items-center gap-1 rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        Q && "border-red-500 focus-within:ring-red-500",
+        l && "cursor-not-allowed opacity-50",
+        B
+      ),
+      onBlur: Z,
+      children: [
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: T,
+            type: "text",
+            inputMode: "numeric",
+            value: z,
+            onChange: U,
+            onKeyDown: X,
+            disabled: l,
+            placeholder: "HH",
+            maxLength: 2,
+            className: "w-12 text-center bg-transparent border-0 outline-none focus:outline-none p-0 placeholder:text-muted-foreground"
+          }
+        ),
+        /* @__PURE__ */ n("span", { className: "text-muted-foreground font-medium select-none", children: ":" }),
+        /* @__PURE__ */ n(
+          "input",
+          {
+            ref: y,
+            type: "text",
+            inputMode: "numeric",
+            value: p,
+            onChange: W,
+            onKeyDown: Y,
+            disabled: l,
+            placeholder: "mm",
+            maxLength: 2,
+            className: "w-12 text-center bg-transparent border-0 outline-none focus:outline-none p-0 placeholder:text-muted-foreground"
+          }
+        ),
+        d === 12 && /* @__PURE__ */ n("span", { className: "text-muted-foreground font-medium select-none ml-1", children: F }),
+        /* @__PURE__ */ $(ne, { open: q, onOpenChange: J, children: [
+          /* @__PURE__ */ n(oe, { asChild: !0, children: /* @__PURE__ */ n(
+            "button",
+            {
+              type: "button",
+              disabled: l,
+              className: "ml-auto flex-shrink-0 cursor-pointer hover:text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-50",
+              children: /* @__PURE__ */ n(re, { className: "h-4 w-4 text-muted-foreground" })
+            }
+          ) }),
+          /* @__PURE__ */ n(O, { className: "w-auto p-2", align: "end", children: /* @__PURE__ */ $("div", { className: "flex items-center gap-2", children: [
+            /* @__PURE__ */ n("div", { className: "flex flex-col", children: /* @__PURE__ */ n(V, { className: "h-48 w-16", children: /* @__PURE__ */ n("div", { className: "py-20", ref: R, children: d === 12 ? Array.from({ length: 12 }, (t, e) => e + 1).map((t) => {
+              const e = String(t).padStart(2, "0"), r = w === String(t);
+              return /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  "data-hour-index": t - 1,
+                  onClick: () => {
+                    x(String(t)), M(String(t), v, d === 12 ? N : void 0);
+                  },
+                  className: f(
+                    "w-full py-2 text-center text-sm hover:bg-accent hover:text-accent-foreground transition-colors",
+                    r && "bg-primary text-primary-foreground font-medium"
+                  ),
+                  children: e
+                },
+                t
+              );
+            }) : Array.from({ length: 24 }, (t, e) => e).map((t) => {
+              const e = String(t).padStart(2, "0");
+              return /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  "data-hour-index": t,
+                  onClick: () => {
+                    x(e), M(e, v, D === 12 ? N : void 0);
+                  },
+                  className: f(
+                    "w-full py-2 text-center text-sm hover:bg-accent hover:text-accent-foreground transition-colors",
+                    w === e && "bg-primary text-primary-foreground font-medium"
+                  ),
+                  children: e
+                },
+                t
+              );
+            }) }) }) }),
+            /* @__PURE__ */ n("span", { className: "text-lg font-medium", children: ":" }),
+            /* @__PURE__ */ n("div", { className: "flex flex-col", children: /* @__PURE__ */ n(V, { className: "h-48 w-16", children: /* @__PURE__ */ n("div", { className: "py-20", ref: E, children: Array.from({ length: 60 }, (t, e) => e).map((t) => {
+              const e = String(t).padStart(2, "0");
+              return /* @__PURE__ */ n(
+                "button",
+                {
+                  type: "button",
+                  "data-minute-index": t,
+                  onClick: () => {
+                    P(e), M(w, e, d === 12 ? N : void 0);
+                  },
+                  className: f(
+                    "w-full py-2 text-center text-sm hover:bg-accent hover:text-accent-foreground transition-colors",
+                    v === e && "bg-primary text-primary-foreground font-medium"
+                  ),
+                  children: e
+                },
+                t
+              );
+            }) }) }) }),
+            d === 12 && /* @__PURE__ */ n("div", { className: "flex flex-col", children: /* @__PURE__ */ n(V, { className: "h-48 w-16", children: /* @__PURE__ */ n("div", { className: "py-20", children: ["AM", "PM"].map((t) => /* @__PURE__ */ n(
+              "button",
+              {
+                type: "button",
+                onClick: () => {
+                  C(t), M(w, v, t);
+                },
+                className: f(
+                  "w-full py-2 text-center text-sm hover:bg-accent hover:text-accent-foreground transition-colors",
+                  N === t && "bg-primary text-primary-foreground font-medium"
+                ),
+                children: t
+              },
+              t
+            )) }) }) })
+          ] }) })
+        ] })
+      ]
+    }
+  );
+};
+export {
+  ue as TimeInput
+};

package/dist/index.js

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const n=require("react/jsx-runtime"),d=require("react"),Z=require("clsx"),B=require("tailwind-merge"),ee=require("lucide-react"),te=require("@radix-ui/react-popover"),re=require("@radix-ui/react-scroll-area");function H(o){const a=Object.create(null,{[Symbol.toStringTag]:{value:"Module"}});if(o){for(const c in o)if(c!=="default"){const u=Object.getOwnPropertyDescriptor(o,c);Object.defineProperty(a,c,u.get?u:{enumerable:!0,get:()=>o[c]})}}return a.default=o,Object.freeze(a)}const y=H(te),x=H(re);function p(...o){return B.twMerge(Z.clsx(o))}const ne=y.Root,oe=y.Trigger,q=d.forwardRef(({className:o,align:a="center",sideOffset:c=4,...u},f)=>n.jsx(y.Portal,{children:n.jsx(y.Content,{ref:f,align:a,sideOffset:c,className:p("z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",o),...u})}));q.displayName=y.Content.displayName;const k=d.forwardRef(({className:o,children:a,...c},u)=>n.jsxs(x.Root,{ref:u,className:p("relative overflow-hidden",o),...c,children:[n.jsx(x.Viewport,{className:"h-full w-full rounded-[inherit]",children:a}),n.jsx(O,{}),n.jsx(x.Corner,{})]}));k.displayName=x.Root.displayName;const O=d.forwardRef(({className:o,orientation:a="vertical",...c},u)=>n.jsx(x.ScrollAreaScrollbar,{ref:u,orientation:a,className:p("flex touch-none select-none transition-colors",a==="vertical"&&"h-full w-2.5 border-l border-l-transparent p-[1px]",a==="horizontal"&&"h-2.5 flex-col border-t border-t-transparent p-[1px]",o),...c,children:n.jsx(x.ScrollAreaThumb,{className:"relative flex-1 rounded-full bg-border"})}));O.displayName=x.ScrollAreaScrollbar.displayName;const se=({value:o,onChange:a,onBlur:c,disabled:u,className:f,format:$})=>{const m=$||24,V=d.useRef(null),v=d.useRef(null),[_,z]=d.useState(!1),[w,b]=d.useState(""),[P,j]=d.useState(""),[N,I]=d.useState("AM"),R=d.useRef(null),C=d.useRef(null),S=t=>{if(!t)return{hours:"",minutes:""};const e=t.split(":");return{hours:e[0]||"",minutes:e[1]||""}},E=()=>{if(!o)return{hours:"",minutes:"",amPm:"AM"};const{hours:t,minutes:e}=S(o);if(m===12){const r=parseInt(t)||0;return r===0?{hours:"12",minutes:e,amPm:"AM"}:r<12?{hours:String(r),minutes:e,amPm:"AM"}:r===12?{hours:"12",minutes:e,amPm:"PM"}:{hours:String(r-12),minutes:e,amPm:"PM"}}return{hours:t,minutes:e,amPm:"AM"}},{hours:T,minutes:h,amPm:K}=E(),L=t=>{const e=parseInt(t)||0;return e===0?{hour:"12",amPm:"AM"}:e<12?{hour:String(e),amPm:"AM"}:e===12?{hour:"12",amPm:"PM"}:{hour:String(e-12),amPm:"PM"}},D=(t,e)=>{const r=parseInt(t)||0;return e==="AM"?r===12?"00":String(r).padStart(2,"0"):r===12?"12":String(r+12).padStart(2,"0")},F=t=>{if(z(t),t&&o){const{hours:e,minutes:r}=S(o);if(m===12){const{hour:s,amPm:i}=L(e);b(s),j(r),I(i),setTimeout(()=>{var A;const l=parseInt(s)-1,g=(A=R.current)==null?void 0:A.querySelector(`[data-hour-index="${l}"]`);g&&g.scrollIntoView({block:"center",behavior:"smooth"})},100)}else b(e),j(r),setTimeout(()=>{var l;const s=parseInt(e)||0,i=(l=R.current)==null?void 0:l.querySelector(`[data-hour-index="${s}"]`);i&&i.scrollIntoView({block:"center",behavior:"smooth"})},100);setTimeout(()=>{var l;const s=parseInt(r)||0,i=(l=C.current)==null?void 0:l.querySelector(`[data-minute-index="${s}"]`);i&&i.scrollIntoView({block:"center",behavior:"smooth"})},150)}else t&&!o&&(b(""),j(""),I("AM"))},M=(t,e,r)=>{let s=t;m===12&&r&&(s=D(t,r));const i=s?String(parseInt(s)||0).padStart(2,"0"):"00",l=e?String(parseInt(e)||0).padStart(2,"0"):"00",g=`${i}:${l}`;a(g)},G=f==null?void 0:f.includes("border-red-500"),J=t=>{var s;let e=t.target.value.replace(/\D/g,"");e.length>2&&(e=e.slice(0,2)),e.length===2&&((s=v.current)==null||s.focus());const r=parseInt(e);if(m===12){if(e&&(isNaN(r)||r<1||r>12))return;const i=S(o).hours,l=parseInt(i)>=12?"PM":"AM",g=D(e||"12",l),A=e?`${g}:${h.padStart(2,"0")||"00"}`:h?`00:${h.padStart(2,"0")}`:"";a(A)}else{if(e&&(isNaN(r)||r<0||r>23))return;const i=e?`${e.padStart(2,"0")}:${h.padStart(2,"0")||"00"}`:h?`00:${h.padStart(2,"0")}`:"";a(i)}},Q=t=>{let e=t.target.value.replace(/\D/g,"");e.length>2&&(e=e.slice(0,2));const r=parseInt(e);if(e&&(isNaN(r)||r<0||r>59))return;const s=S(o).hours,i=s?`${s.padStart(2,"0")}:${e.padStart(2,"0")||"00"}`:e?`00:${e.padStart(2,"0")}`:"";a(i)},U=t=>{var e,r;(t.key==="ArrowRight"||t.key===":")&&(t.preventDefault(),(e=v.current)==null||e.focus()),t.key==="Enter"&&T.length===2&&(t.preventDefault(),(r=v.current)==null||r.focus())},W=t=>{var e;t.key==="ArrowLeft"&&(t.preventDefault(),(e=V.current)==null||e.focus())},X=()=>{const{hours:t,minutes:e}=S(o),r=t?String(parseInt(t)||0).padStart(2,"0"):"00",s=e?String(parseInt(e)||0).padStart(2,"0"):"00",i=`${r}:${s}`;a(i),c==null||c()},Y=(f==null?void 0:f.split(" ").filter(t=>!t.includes("border-red-500")&&!t.includes("focus:border-red-500")).join(" "))||"";return n.jsxs("div",{className:p("flex h-10 w-full items-center gap-1 rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background transition-colors focus-within:outline-none focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",G&&"border-red-500 focus-within:ring-red-500",u&&"cursor-not-allowed opacity-50",Y),onBlur:X,children:[n.jsx("input",{ref:V,type:"text",inputMode:"numeric",value:T,onChange:J,onKeyDown:U,disabled:u,placeholder:"HH",maxLength:2,className:"w-12 text-center bg-transparent border-0 outline-none focus:outline-none p-0 placeholder:text-muted-foreground"}),n.jsx("span",{className:"text-muted-foreground font-medium select-none",children:":"}),n.jsx("input",{ref:v,type:"text",inputMode:"numeric",value:h,onChange:Q,onKeyDown:W,disabled:u,placeholder:"mm",maxLength:2,className:"w-12 text-center bg-transparent border-0 outline-none focus:outline-none p-0 placeholder:text-muted-foreground"}),m===12&&n.jsx("span",{className:"text-muted-foreground font-medium select-none ml-1",children:K}),n.jsxs(ne,{open:_,onOpenChange:F,children:[n.jsx(oe,{asChild:!0,children:n.jsx("button",{type:"button",disabled:u,className:"ml-auto flex-shrink-0 cursor-pointer hover:text-foreground transition-colors disabled:cursor-not-allowed disabled:opacity-50",children:n.jsx(ee.Clock,{className:"h-4 w-4 text-muted-foreground"})})}),n.jsx(q,{className:"w-auto p-2",align:"end",children:n.jsxs("div",{className:"flex items-center gap-2",children:[n.jsx("div",{className:"flex flex-col",children:n.jsx(k,{className:"h-48 w-16",children:n.jsx("div",{className:"py-20",ref:R,children:m===12?Array.from({length:12},(t,e)=>e+1).map(t=>{const e=String(t).padStart(2,"0"),r=w===String(t);return n.jsx("button",{type:"button","data-hour-index":t-1,onClick:()=>{b(String(t)),M(String(t),P,m===12?N:void 0)},className:p("w-full py-2 text-center text-sm hover:bg-accent hover:text-accent-foreground transition-colors",r&&"bg-primary text-primary-foreground font-medium"),children:e},t)}):Array.from({length:24},(t,e)=>e).map(t=>{const e=String(t).padStart(2,"0"),r=w===e;return n.jsx("button",{type:"button","data-hour-index":t,onClick:()=>{b(e),M(e,P,$===12?N:void 0)},className:p("w-full py-2 text-center text-sm hover:bg-accent hover:text-accent-foreground transition-colors",r&&"bg-primary text-primary-foreground font-medium"),children:e},t)})})})}),n.jsx("span",{className:"text-lg font-medium",children:":"}),n.jsx("div",{className:"flex flex-col",children:n.jsx(k,{className:"h-48 w-16",children:n.jsx("div",{className:"py-20",ref:C,children:Array.from({length:60},(t,e)=>e).map(t=>{const e=String(t).padStart(2,"0"),r=P===e;return n.jsx("button",{type:"button","data-minute-index":t,onClick:()=>{j(e),M(w,e,m===12?N:void 0)},className:p("w-full py-2 text-center text-sm hover:bg-accent hover:text-accent-foreground transition-colors",r&&"bg-primary text-primary-foreground font-medium"),children:e},t)})})})}),m===12&&n.jsx("div",{className:"flex flex-col",children:n.jsx(k,{className:"h-48 w-16",children:n.jsx("div",{className:"py-20",children:["AM","PM"].map(t=>{const e=N===t;return n.jsx("button",{type:"button",onClick:()=>{I(t),M(w,P,t)},className:p("w-full py-2 text-center text-sm hover:bg-accent hover:text-accent-foreground transition-colors",e&&"bg-primary text-primary-foreground font-medium"),children:t},t)})})})})]})})]})]})};exports.TimeInput=se;

package/dist/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { ClassValue } from 'clsx';
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/time-input.d.ts

@@ -0,0 +1,9 @@
+export interface TimeInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    disabled?: boolean;
+    className?: string;
+    format?: 12 | 24;
+}
+export declare const TimeInput: ({ value, onChange, onBlur, disabled, className, format }: TimeInputProps) => import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -0,0 +1,63 @@
+{
+  "name": "time-picker-input",
+  "version": "1.0.0",
+  "type": "module",
+  "description": "A customizable React time input component that enforces 12-hour or 24-hour format, bypassing OS and browser settings for consistent time input across all platforms",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "dev": "vite",
+    "lint": "eslint .",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "time-picker",
+    "time-input",
+    "time-selector",
+    "12-hour",
+    "24-hour",
+    "tailwindcss",
+    "shadcn-ui",
+    "radix-ui"
+  ],
+  "author": "",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^18.0.0",
+    "react-dom": "^18.0.0",
+    "tailwindcss": "^3.0.0"
+  },
+  "dependencies": {
+    "@radix-ui/react-popover": "^1.1.14",
+    "@radix-ui/react-scroll-area": "^1.2.9",
+    "clsx": "^2.1.1",
+    "lucide-react": "^0.462.0",
+    "tailwind-merge": "^2.6.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.32.0",
+    "@types/node": "^22.16.5",
+    "@types/react": "^18.3.23",
+    "@types/react-dom": "^18.3.7",
+    "@vitejs/plugin-react-swc": "^3.11.0",
+    "autoprefixer": "^10.4.21",
+    "eslint": "^9.32.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-refresh": "^0.4.20",
+    "globals": "^15.15.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "^5.8.3",
+    "typescript-eslint": "^8.38.0",
+    "vite": "^5.4.19",
+    "vite-plugin-dts": "^4.3.0"
+  }
+}