@birdycom/omniaui-react 0.11.0 → 0.11.1

package/src/components/Tabs.tsx

@@ -1,45 +1,45 @@
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface TabItem {
-  value: string;
-  label: ReactNode;
-  content: ReactNode;
-}
-
-export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
-  tabs: TabItem[];
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  /** Radio group name (generated when omitted). */
-  name?: string;
-}
-
-/** `.oc-tabset`: radio triggers + panels; CSS (`:has()`) shows the selected panel. */
-export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
-  { tabs, value, defaultValue, onChange, name, className, ...rest },
-  ref,
-) {
-  const auto = useId();
-  const group = name ?? `oc-tabs-${auto.replace(/:/g, "")}`;
-  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? tabs[0]?.value ?? "", onChange);
-  return (
-    <div ref={ref} className={cx("oc-tabset", className)} {...rest}>
-      <div className="oc-tab-list" role="tablist">
-        {tabs.map((t) => (
-          <label className="oc-tab-trigger" key={t.value}>
-            <input type="radio" name={group} value={t.value} checked={current === t.value} onChange={() => setCurrent(t.value)} /> {t.label}
-          </label>
-        ))}
-      </div>
-      {tabs.map((t) => (
-        <div className="oc-tab-panel" key={t.value}>{t.content}</div>
-      ))}
-    </div>
-  );
-});
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface TabItem {
+  value: string;
+  label: ReactNode;
+  content: ReactNode;
+}
+
+export interface TabsProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+  tabs: TabItem[];
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Radio group name (generated when omitted). */
+  name?: string;
+}
+
+/** `.oc-tabset`: radio triggers + panels; CSS (`:has()`) shows the selected panel. */
+export const Tabs = forwardRef<HTMLDivElement, TabsProps>(function Tabs(
+  { tabs, value, defaultValue, onChange, name, className, ...rest },
+  ref,
+) {
+  const auto = useId();
+  const group = name ?? `oc-tabs-${auto.replace(/:/g, "")}`;
+  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? tabs[0]?.value ?? "", onChange);
+  return (
+    <div ref={ref} className={cx("oc-tabset", className)} {...rest}>
+      <div className="oc-tab-list" role="tablist">
+        {tabs.map((t) => (
+          <label className="oc-tab-trigger" key={t.value}>
+            <input type="radio" name={group} value={t.value} checked={current === t.value} onChange={() => setCurrent(t.value)} /> {t.label}
+          </label>
+        ))}
+      </div>
+      {tabs.map((t) => (
+        <div className="oc-tab-panel" key={t.value}>{t.content}</div>
+      ))}
+    </div>
+  );
+});

package/src/components/TagInput.tsx

@@ -1,73 +1,73 @@
-"use client";
-
-import { forwardRef, useState } from "react";
-import type { HTMLAttributes, KeyboardEvent } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface TagInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
-  value?: string[];
-  defaultValue?: string[];
-  onChange?: (tags: string[]) => void;
-  /** Suggestion buttons below the control (already used tags are hidden). */
-  suggestions?: string[];
-  placeholder?: string;
-  /** Accessible name of the text input. */
-  label?: string;
-  disabled?: boolean;
-}
-
-/** `.oc-tag-input`: chips with remove buttons and a free-text input (Enter or comma adds, Backspace removes). */
-export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(function TagInput(
-  { value, defaultValue = [], onChange, suggestions, placeholder = "Add tag...", label = "Add tag", disabled, className, ...rest },
-  ref,
-) {
-  const [tags, setTags] = useControllable<string[]>(value, defaultValue, onChange);
-  const [draft, setDraft] = useState("");
-
-  const add = (raw: string) => {
-    const tag = raw.trim();
-    if (tag && !tags.includes(tag)) setTags([...tags, tag]);
-    setDraft("");
-  };
-  const remove = (tag: string) => setTags(tags.filter((t) => t !== tag));
-  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
-    if (e.key === "Enter" || e.key === ",") {
-      e.preventDefault();
-      add(draft);
-    } else if (e.key === "Backspace" && !draft && tags.length) {
-      remove(tags[tags.length - 1]);
-    }
-  };
-  const open = suggestions?.filter((s) => !tags.includes(s)) ?? [];
-
-  return (
-    <>
-      <div ref={ref} className={cx("oc-tag-input", className)} {...rest}>
-        {tags.map((tag) => (
-          <span className="oc-tag" key={tag}>
-            {tag}{" "}
-            <button className="oc-tag-remove" type="button" aria-label={`Remove ${tag}`} disabled={disabled} onClick={() => remove(tag)}>&times;</button>
-          </span>
-        ))}
-        <input
-          type="text"
-          placeholder={placeholder}
-          aria-label={label}
-          value={draft}
-          disabled={disabled}
-          onChange={(e) => setDraft(e.target.value)}
-          onKeyDown={onKeyDown}
-          onBlur={() => draft && add(draft)}
-        />
-      </div>
-      {open.length > 0 && (
-        <div className="oc-tag-suggestions">
-          {open.map((s) => (
-            <button type="button" key={s} disabled={disabled} onClick={() => add(s)}>{s}</button>
-          ))}
-        </div>
-      )}
-    </>
-  );
-});
+"use client";
+
+import { forwardRef, useState } from "react";
+import type { HTMLAttributes, KeyboardEvent } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface TagInputProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange" | "defaultValue"> {
+  value?: string[];
+  defaultValue?: string[];
+  onChange?: (tags: string[]) => void;
+  /** Suggestion buttons below the control (already used tags are hidden). */
+  suggestions?: string[];
+  placeholder?: string;
+  /** Accessible name of the text input. */
+  label?: string;
+  disabled?: boolean;
+}
+
+/** `.oc-tag-input`: chips with remove buttons and a free-text input (Enter or comma adds, Backspace removes). */
+export const TagInput = forwardRef<HTMLDivElement, TagInputProps>(function TagInput(
+  { value, defaultValue = [], onChange, suggestions, placeholder = "Add tag...", label = "Add tag", disabled, className, ...rest },
+  ref,
+) {
+  const [tags, setTags] = useControllable<string[]>(value, defaultValue, onChange);
+  const [draft, setDraft] = useState("");
+
+  const add = (raw: string) => {
+    const tag = raw.trim();
+    if (tag && !tags.includes(tag)) setTags([...tags, tag]);
+    setDraft("");
+  };
+  const remove = (tag: string) => setTags(tags.filter((t) => t !== tag));
+  const onKeyDown = (e: KeyboardEvent<HTMLInputElement>) => {
+    if (e.key === "Enter" || e.key === ",") {
+      e.preventDefault();
+      add(draft);
+    } else if (e.key === "Backspace" && !draft && tags.length) {
+      remove(tags[tags.length - 1]);
+    }
+  };
+  const open = suggestions?.filter((s) => !tags.includes(s)) ?? [];
+
+  return (
+    <>
+      <div ref={ref} className={cx("oc-tag-input", className)} {...rest}>
+        {tags.map((tag) => (
+          <span className="oc-tag" key={tag}>
+            {tag}{" "}
+            <button className="oc-tag-remove" type="button" aria-label={`Remove ${tag}`} disabled={disabled} onClick={() => remove(tag)}>&times;</button>
+          </span>
+        ))}
+        <input
+          type="text"
+          placeholder={placeholder}
+          aria-label={label}
+          value={draft}
+          disabled={disabled}
+          onChange={(e) => setDraft(e.target.value)}
+          onKeyDown={onKeyDown}
+          onBlur={() => draft && add(draft)}
+        />
+      </div>
+      {open.length > 0 && (
+        <div className="oc-tag-suggestions">
+          {open.map((s) => (
+            <button type="button" key={s} disabled={disabled} onClick={() => add(s)}>{s}</button>
+          ))}
+        </div>
+      )}
+    </>
+  );
+});

package/src/components/TerminalLog.tsx

@@ -1,63 +1,63 @@
-// File: packages/react/src/components/TerminalLog.tsx
-// Map: types -> TerminalLog (bar: dots, title, status -> body role=log: lines + prompt) -> auto-scroll effect
-// Same markup as packages/ui/snippets/terminal-log.html. New lines scroll into view (autoScroll).
-"use client";
-
-import { forwardRef, useEffect, useRef } from "react";
-import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
-import { cx } from "../utils";
-
-export type TerminalLogLevel = "info" | "success" | "warn" | "error" | "debug";
-
-export interface TerminalLogLine {
-  level: TerminalLogLevel;
-  message: ReactNode;
-  /** "09:41:02". Leave out for a two-column line. */
-  time?: string;
-  /** Text in the level column (defaults to the level name; "ok" for success). */
-  label?: string;
-}
-
-export interface TerminalLogProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-  lines: TerminalLogLine[];
-  title?: ReactNode;
-  /** Text next to the pulsing dot ("Live"). No dot when empty. */
-  status?: ReactNode;
-  /** Prompt line with a blinking cursor. `true` = empty prompt. */
-  prompt?: ReactNode | true;
-  /** Max height of the body, e.g. "12rem". */
-  height?: string;
-  /** Keep the newest line in view. Default true. */
-  autoScroll?: boolean;
-}
-
-/** `.oc-terminal-log`: dark console window. */
-export const TerminalLog = forwardRef<HTMLDivElement, TerminalLogProps>(function TerminalLog(
-  { lines, title, status, prompt, height, autoScroll = true, className, style, "aria-label": label = "Log output", ...rest },
-  ref,
-) {
-  const body = useRef<HTMLDivElement>(null);
-  useEffect(() => {
-    if (autoScroll && body.current) body.current.scrollTop = body.current.scrollHeight;
-  }, [lines.length, autoScroll]);
-  const vars = height ? ({ "--oc-terminal-log-height": height } as CSSProperties) : undefined;
-  return (
-    <div ref={ref} className={cx("oc-terminal-log", className)} style={{ ...vars, ...style }} {...rest}>
-      <div className="oc-terminal-log__bar">
-        <i /><i /><i />
-        {title != null && <span className="oc-terminal-log__title">{title}</span>}
-        {status != null && <span className="oc-terminal-log__status">{status}</span>}
-      </div>
-      <div ref={body} className="oc-terminal-log__body" role="log" aria-live="polite" aria-label={label} tabIndex={0}>
-        {lines.map((l, i) => (
-          <p key={i} className={cx("oc-terminal-log__line", `oc-terminal-log__line--${l.level}`)}>
-            {l.time && <time className="oc-terminal-log__time">{l.time}</time>}
-            <span className="oc-terminal-log__level">{l.label ?? (l.level === "success" ? "ok" : l.level)}</span>
-            <span className="oc-terminal-log__msg">{l.message}</span>
-          </p>
-        ))}
-        {prompt != null && prompt !== false && <p className="oc-terminal-log__prompt">{prompt === true ? null : prompt}</p>}
-      </div>
-    </div>
-  );
-});
+// File: packages/react/src/components/TerminalLog.tsx
+// Map: types -> TerminalLog (bar: dots, title, status -> body role=log: lines + prompt) -> auto-scroll effect
+// Same markup as packages/ui/snippets/terminal-log.html. New lines scroll into view (autoScroll).
+"use client";
+
+import { forwardRef, useEffect, useRef } from "react";
+import type { CSSProperties, HTMLAttributes, ReactNode } from "react";
+import { cx } from "../utils";
+
+export type TerminalLogLevel = "info" | "success" | "warn" | "error" | "debug";
+
+export interface TerminalLogLine {
+  level: TerminalLogLevel;
+  message: ReactNode;
+  /** "09:41:02". Leave out for a two-column line. */
+  time?: string;
+  /** Text in the level column (defaults to the level name; "ok" for success). */
+  label?: string;
+}
+
+export interface TerminalLogProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
+  lines: TerminalLogLine[];
+  title?: ReactNode;
+  /** Text next to the pulsing dot ("Live"). No dot when empty. */
+  status?: ReactNode;
+  /** Prompt line with a blinking cursor. `true` = empty prompt. */
+  prompt?: ReactNode | true;
+  /** Max height of the body, e.g. "12rem". */
+  height?: string;
+  /** Keep the newest line in view. Default true. */
+  autoScroll?: boolean;
+}
+
+/** `.oc-terminal-log`: dark console window. */
+export const TerminalLog = forwardRef<HTMLDivElement, TerminalLogProps>(function TerminalLog(
+  { lines, title, status, prompt, height, autoScroll = true, className, style, "aria-label": label = "Log output", ...rest },
+  ref,
+) {
+  const body = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (autoScroll && body.current) body.current.scrollTop = body.current.scrollHeight;
+  }, [lines.length, autoScroll]);
+  const vars = height ? ({ "--oc-terminal-log-height": height } as CSSProperties) : undefined;
+  return (
+    <div ref={ref} className={cx("oc-terminal-log", className)} style={{ ...vars, ...style }} {...rest}>
+      <div className="oc-terminal-log__bar">
+        <i /><i /><i />
+        {title != null && <span className="oc-terminal-log__title">{title}</span>}
+        {status != null && <span className="oc-terminal-log__status">{status}</span>}
+      </div>
+      <div ref={body} className="oc-terminal-log__body" role="log" aria-live="polite" aria-label={label} tabIndex={0}>
+        {lines.map((l, i) => (
+          <p key={i} className={cx("oc-terminal-log__line", `oc-terminal-log__line--${l.level}`)}>
+            {l.time && <time className="oc-terminal-log__time">{l.time}</time>}
+            <span className="oc-terminal-log__level">{l.label ?? (l.level === "success" ? "ok" : l.level)}</span>
+            <span className="oc-terminal-log__msg">{l.message}</span>
+          </p>
+        ))}
+        {prompt != null && prompt !== false && <p className="oc-terminal-log__prompt">{prompt === true ? null : prompt}</p>}
+      </div>
+    </div>
+  );
+});

package/src/components/Textarea.tsx

@@ -1,19 +1,19 @@
-import { forwardRef } from "react";
-import type { TextareaHTMLAttributes } from "react";
-import { cx } from "../utils";
-
-export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
-  error?: boolean;
-}
-
-/** `<textarea class="oc-input">` */
-export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({ error, className, ...rest }, ref) {
-  return (
-    <textarea
-      ref={ref}
-      className={cx("oc-input", error && "oc-input--error", className)}
-      aria-invalid={error ? true : rest["aria-invalid"]}
-      {...rest}
-    />
-  );
-});
+import { forwardRef } from "react";
+import type { TextareaHTMLAttributes } from "react";
+import { cx } from "../utils";
+
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  error?: boolean;
+}
+
+/** `<textarea class="oc-input">` */
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea({ error, className, ...rest }, ref) {
+  return (
+    <textarea
+      ref={ref}
+      className={cx("oc-input", error && "oc-input--error", className)}
+      aria-invalid={error ? true : rest["aria-invalid"]}
+      {...rest}
+    />
+  );
+});

package/src/components/ThemeSwitch.tsx

@@ -1,45 +1,45 @@
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { HTMLAttributes } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export type ThemeMode = "system" | "light" | "dark";
-
-const LABELS: Record<ThemeMode, string> = { system: "System", light: "Light", dark: "Dark" };
-
-export interface ThemeSwitchProps extends Omit<HTMLAttributes<HTMLElement>, "onChange" | "defaultValue"> {
-  value?: ThemeMode;
-  defaultValue?: ThemeMode;
-  onChange?: (mode: ThemeMode) => void;
-  /** Which modes to offer (default all three). */
-  modes?: ThemeMode[];
-  /** Radio group name (generated when omitted). */
-  name?: string;
-  /** Render a `div role="radiogroup"` (compact app bars) instead of a `fieldset`. */
-  as?: "fieldset" | "div";
-}
-
-/**
- * `.oc-theme-switch` radio group. The CSS applies `color-scheme` through `:has()`,
- * so no state is needed; `onChange` lets you persist the choice.
- */
-export const ThemeSwitch = forwardRef<HTMLElement, ThemeSwitchProps>(function ThemeSwitch(
-  { value, defaultValue = "system", onChange, modes = ["system", "light", "dark"], name, as = "fieldset", className, "aria-label": ariaLabel = "Color theme", ...rest },
-  ref,
-) {
-  const auto = useId();
-  const group = name ?? `oc-theme-${auto.replace(/:/g, "")}`;
-  const [current, setCurrent] = useControllable<ThemeMode>(value, defaultValue, onChange);
-  const items = modes.map((m) => (
-    <label key={m}>
-      <input type="radio" name={group} value={m} checked={current === m} onChange={() => setCurrent(m)} /> {LABELS[m]}
-    </label>
-  ));
-  return as === "div" ? (
-    <div ref={ref as React.Ref<HTMLDivElement>} className={cx("oc-theme-switch", className)} role="radiogroup" aria-label={ariaLabel} {...rest}>{items}</div>
-  ) : (
-    <fieldset ref={ref as React.Ref<HTMLFieldSetElement>} className={cx("oc-theme-switch", className)} aria-label={ariaLabel} {...rest}>{items}</fieldset>
-  );
-});
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { HTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export type ThemeMode = "system" | "light" | "dark";
+
+const LABELS: Record<ThemeMode, string> = { system: "System", light: "Light", dark: "Dark" };
+
+export interface ThemeSwitchProps extends Omit<HTMLAttributes<HTMLElement>, "onChange" | "defaultValue"> {
+  value?: ThemeMode;
+  defaultValue?: ThemeMode;
+  onChange?: (mode: ThemeMode) => void;
+  /** Which modes to offer (default all three). */
+  modes?: ThemeMode[];
+  /** Radio group name (generated when omitted). */
+  name?: string;
+  /** Render a `div role="radiogroup"` (compact app bars) instead of a `fieldset`. */
+  as?: "fieldset" | "div";
+}
+
+/**
+ * `.oc-theme-switch` radio group. The CSS applies `color-scheme` through `:has()`,
+ * so no state is needed; `onChange` lets you persist the choice.
+ */
+export const ThemeSwitch = forwardRef<HTMLElement, ThemeSwitchProps>(function ThemeSwitch(
+  { value, defaultValue = "system", onChange, modes = ["system", "light", "dark"], name, as = "fieldset", className, "aria-label": ariaLabel = "Color theme", ...rest },
+  ref,
+) {
+  const auto = useId();
+  const group = name ?? `oc-theme-${auto.replace(/:/g, "")}`;
+  const [current, setCurrent] = useControllable<ThemeMode>(value, defaultValue, onChange);
+  const items = modes.map((m) => (
+    <label key={m}>
+      <input type="radio" name={group} value={m} checked={current === m} onChange={() => setCurrent(m)} /> {LABELS[m]}
+    </label>
+  ));
+  return as === "div" ? (
+    <div ref={ref as React.Ref<HTMLDivElement>} className={cx("oc-theme-switch", className)} role="radiogroup" aria-label={ariaLabel} {...rest}>{items}</div>
+  ) : (
+    <fieldset ref={ref as React.Ref<HTMLFieldSetElement>} className={cx("oc-theme-switch", className)} aria-label={ariaLabel} {...rest}>{items}</fieldset>
+  );
+});

package/src/components/TimeInput.tsx

@@ -1,76 +1,76 @@
-// File: packages/react/src/components/TimeInput.tsx
-// Map: helper (digits -> HH:mm) -> component (text field + datalist of slots)
-// Same markup as packages/ui/snippets/time-input.html. JS only adds the colon while typing ("0930" -> "09:30").
-"use client";
-
-import { forwardRef, useId } from "react";
-import type { InputHTMLAttributes } from "react";
-import { cx } from "../utils";
-import { useControllable } from "../hooks";
-
-export interface TimeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "list"> {
-  /** "HH:mm" or "" (empty). */
-  value?: string;
-  defaultValue?: string;
-  onChange?: (value: string) => void;
-  /** Suggested times shown by the browser while typing (datalist). */
-  slots?: string[];
-  error?: boolean;
-}
-
-/** Keep up to 4 digits and put a colon after the first two: "0930" -> "09:30". Short input is completed on blur. */
-export function formatTime24h(raw: string): string {
-  const digits = raw.replace(/\D/g, "").slice(0, 4);
-  return digits.length <= 2 ? digits : `${digits.slice(0, 2)}:${digits.slice(2)}`;
-}
-
-/** On blur: "9" -> "09:00", "930" -> "09:30". Leaves other text alone (pattern marks it invalid). */
-function completeTime(text: string): string {
-  const digits = text.replace(/\D/g, "");
-  if (digits.length === 1 || digits.length === 2) return `${digits.padStart(2, "0")}:00`;
-  if (digits.length === 3) return `0${digits[0]}:${digits.slice(1)}`;
-  return text;
-}
-
-/** `.oc-time-input`: 24h text field (pattern HH:mm) with optional datalist suggestions. */
-export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(function TimeInput(
-  { value, defaultValue, onChange, slots, error, className, onBlur, placeholder = "hh:mm", ...rest },
-  ref,
-) {
-  const listId = `oc-time-${useId().replace(/:/g, "")}`;
-  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? "", onChange);
-  return (
-    <>
-      <input
-        ref={ref}
-        className={cx("oc-input", "oc-time-input", className)}
-        type="text"
-        inputMode="numeric"
-        maxLength={5}
-        pattern="([01][0-9]|2[0-3]):[0-5][0-9]"
-        placeholder={placeholder}
-        list={slots?.length ? listId : undefined}
-        aria-invalid={error ? true : undefined}
-        value={current}
-        onChange={(e) => {
-          // A picked datalist option already has the colon; typed digits get one.
-          const v = e.target.value;
-          setCurrent(/^\d{2}:\d{2}$/.test(v) ? v : formatTime24h(v));
-        }}
-        onBlur={(e) => {
-          const done = completeTime(current);
-          if (done !== current) setCurrent(done);
-          onBlur?.(e);
-        }}
-        {...rest}
-      />
-      {slots?.length ? (
-        <datalist id={listId}>
-          {slots.map((s) => (
-            <option key={s} value={s} />
-          ))}
-        </datalist>
-      ) : null}
-    </>
-  );
-});
+// File: packages/react/src/components/TimeInput.tsx
+// Map: helper (digits -> HH:mm) -> component (text field + datalist of slots)
+// Same markup as packages/ui/snippets/time-input.html. JS only adds the colon while typing ("0930" -> "09:30").
+"use client";
+
+import { forwardRef, useId } from "react";
+import type { InputHTMLAttributes } from "react";
+import { cx } from "../utils";
+import { useControllable } from "../hooks";
+
+export interface TimeInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "value" | "defaultValue" | "onChange" | "type" | "list"> {
+  /** "HH:mm" or "" (empty). */
+  value?: string;
+  defaultValue?: string;
+  onChange?: (value: string) => void;
+  /** Suggested times shown by the browser while typing (datalist). */
+  slots?: string[];
+  error?: boolean;
+}
+
+/** Keep up to 4 digits and put a colon after the first two: "0930" -> "09:30". Short input is completed on blur. */
+export function formatTime24h(raw: string): string {
+  const digits = raw.replace(/\D/g, "").slice(0, 4);
+  return digits.length <= 2 ? digits : `${digits.slice(0, 2)}:${digits.slice(2)}`;
+}
+
+/** On blur: "9" -> "09:00", "930" -> "09:30". Leaves other text alone (pattern marks it invalid). */
+function completeTime(text: string): string {
+  const digits = text.replace(/\D/g, "");
+  if (digits.length === 1 || digits.length === 2) return `${digits.padStart(2, "0")}:00`;
+  if (digits.length === 3) return `0${digits[0]}:${digits.slice(1)}`;
+  return text;
+}
+
+/** `.oc-time-input`: 24h text field (pattern HH:mm) with optional datalist suggestions. */
+export const TimeInput = forwardRef<HTMLInputElement, TimeInputProps>(function TimeInput(
+  { value, defaultValue, onChange, slots, error, className, onBlur, placeholder = "hh:mm", ...rest },
+  ref,
+) {
+  const listId = `oc-time-${useId().replace(/:/g, "")}`;
+  const [current, setCurrent] = useControllable<string>(value, defaultValue ?? "", onChange);
+  return (
+    <>
+      <input
+        ref={ref}
+        className={cx("oc-input", "oc-time-input", className)}
+        type="text"
+        inputMode="numeric"
+        maxLength={5}
+        pattern="([01][0-9]|2[0-3]):[0-5][0-9]"
+        placeholder={placeholder}
+        list={slots?.length ? listId : undefined}
+        aria-invalid={error ? true : undefined}
+        value={current}
+        onChange={(e) => {
+          // A picked datalist option already has the colon; typed digits get one.
+          const v = e.target.value;
+          setCurrent(/^\d{2}:\d{2}$/.test(v) ? v : formatTime24h(v));
+        }}
+        onBlur={(e) => {
+          const done = completeTime(current);
+          if (done !== current) setCurrent(done);
+          onBlur?.(e);
+        }}
+        {...rest}
+      />
+      {slots?.length ? (
+        <datalist id={listId}>
+          {slots.map((s) => (
+            <option key={s} value={s} />
+          ))}
+        </datalist>
+      ) : null}
+    </>
+  );
+});