@crewlethq/ui 0.2.0 → 0.4.0

package/dist/chunk-S2XHHEW4.js

@@ -0,0 +1,84 @@
+import { StatusDot } from './chunk-PZSWF74H.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Tag-VNZEYLB6.css';
+import { CloseGlyph } from '@crewlethq/icons/glyphs';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function Tag(props) {
+  const {
+    variant = "neutral",
+    appearance = "soft",
+    size = "sm",
+    leadingIcon,
+    dot = false,
+    count,
+    monospace = false,
+    animateIn = false,
+    onClick,
+    pressed,
+    onRemove,
+    removeAriaLabel = "Remove tag",
+    className,
+    children,
+    ...rest
+  } = props;
+  const presses = onClick !== void 0;
+  const acts = presses || onRemove !== void 0;
+  const split = presses && onRemove !== void 0;
+  if (acts && size === "xs") {
+    console.warn('[crewlet] Tag size="xs" cannot act: an interactive tag starts at "sm", so its target clears 24px. Drawn at "sm".');
+  }
+  const drawnSize = acts && size === "xs" ? "sm" : size;
+  const classes = cx(
+    "crewlet-tag",
+    `crewlet-tag--${variant}`,
+    `crewlet-tag--${appearance}`,
+    `crewlet-tag--${drawnSize}`,
+    monospace && "crewlet-tag--monospace",
+    animateIn && "crewlet-tag--animate-in",
+    // The 24px target floor, on every form that takes a press: the pill that
+    // is itself a button, the pill holding a press and a remove, and the inert
+    // pill whose only control is the remove at its trailing edge.
+    acts && "crewlet-tag--acts",
+    presses && !split && "crewlet-tag--actionable",
+    split && "crewlet-tag--split",
+    // The press is its own element when the pill holds two controls, so the
+    // boundary the press state draws is put on the pill from here.
+    split && pressed === true && "is-pressed",
+    className
+  );
+  const inner = /* @__PURE__ */ jsxs(Fragment, { children: [
+    dot ? /* @__PURE__ */ jsx(StatusDot, { tone: variant, className: "crewlet-tag__dot" }) : null,
+    leadingIcon ? /* @__PURE__ */ jsx("span", { className: "crewlet-tag__icon", "aria-hidden": true, children: leadingIcon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "crewlet-tag__label", children }),
+    count === void 0 ? null : /* @__PURE__ */ jsx("span", { className: "crewlet-tag__count", children: count })
+  ] });
+  const remove = onRemove === void 0 ? null : /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: "crewlet-tag__remove",
+      onClick: (event) => {
+        event.stopPropagation();
+        onRemove();
+      },
+      "aria-label": removeAriaLabel,
+      children: /* @__PURE__ */ jsx(CloseGlyph, { size: "xs" })
+    }
+  );
+  if (split) {
+    return /* @__PURE__ */ jsxs("span", { ...rest, className: classes, children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "crewlet-tag__press", onClick, "aria-pressed": pressed === true, children: inner }),
+      remove
+    ] });
+  }
+  if (presses) {
+    return /* @__PURE__ */ jsx("button", { ...rest, type: "button", className: classes, onClick, "aria-pressed": pressed === true, children: inner });
+  }
+  return /* @__PURE__ */ jsxs("span", { ...rest, className: classes, children: [
+    inner,
+    remove
+  ] });
+}
+
+export { Tag };

package/dist/chunk-S4GZWSKR.js

@@ -0,0 +1,137 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './AddPill-DFWXYLIQ.css';
+import { useState, useId, useRef, useCallback, useEffect, Fragment } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var ADD_PILL_MS = 200;
+function AddPill({
+  label,
+  sections,
+  size = "sm",
+  layout = "split",
+  tabIndex,
+  onOpen,
+  className
+}) {
+  const [phase, setPhase] = useState("closed");
+  const ids = useId();
+  const closing = useRef(null);
+  const group = useRef(null);
+  const mark = useRef(null);
+  const first = useRef(null);
+  const open = phase === "preview" || phase === "locked";
+  const close = useCallback((restore) => {
+    if (closing.current !== null) clearTimeout(closing.current);
+    setPhase((was) => was === "closed" ? was : "closing");
+    closing.current = setTimeout(() => {
+      setPhase((was) => was === "closing" ? "closed" : was);
+      closing.current = null;
+    }, ADD_PILL_MS);
+    if (restore) mark.current?.focus();
+  }, []);
+  useEffect(
+    () => () => {
+      if (closing.current !== null) clearTimeout(closing.current);
+    },
+    []
+  );
+  useEffect(() => {
+    if (!open) return void 0;
+    const elsewhere = (event) => {
+      if (!group.current?.contains(event.target)) close(false);
+    };
+    document.addEventListener("mousedown", elsewhere);
+    return () => document.removeEventListener("mousedown", elsewhere);
+  }, [open, close]);
+  const press = (event) => {
+    event.stopPropagation();
+    if (phase === "locked") {
+      close(false);
+      return;
+    }
+    onOpen?.();
+    setPhase("locked");
+    requestAnimationFrame(() => first.current?.focus());
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "Escape" || phase === "closed") return;
+    event.stopPropagation();
+    close(true);
+  };
+  const onBlur = (event) => {
+    if (!open) return;
+    const to = event.relatedTarget;
+    if (to !== null && group.current?.contains(to)) return;
+    if (to !== null) close(false);
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cx("crewlet-add-pill", className),
+      "data-phase": phase,
+      "data-size": size,
+      "data-layout": layout,
+      ref: group,
+      onBlur,
+      onMouseLeave: () => {
+        if (phase === "preview") close(false);
+      },
+      children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            className: "crewlet-add-pill__mark",
+            "aria-label": label,
+            title: label,
+            "aria-expanded": open,
+            tabIndex,
+            ref: mark,
+            onKeyDown,
+            onMouseEnter: () => setPhase((was) => was === "locked" ? was : "preview"),
+            onClick: press,
+            children: [
+              /* @__PURE__ */ jsx("span", { className: "crewlet-add-pill__disc", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("svg", { viewBox: "0 0 16 16", "aria-hidden": "true", focusable: "false", children: /* @__PURE__ */ jsx("path", { d: "M8 3.5v9M3.5 8h9" }) })
+            ]
+          }
+        ),
+        phase !== "closed" && /* @__PURE__ */ jsxs("div", { className: "crewlet-add-pill__sections", "aria-hidden": phase === "closing" || void 0, children: [
+          sections.map((section, at) => {
+            const refused = section.disabled === true || section.disabledReason !== void 0;
+            return /* @__PURE__ */ jsxs(Fragment, { children: [
+              at > 0 && /* @__PURE__ */ jsx("span", { className: "crewlet-add-pill__divider", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "crewlet-add-pill__section",
+                  "aria-label": section.label,
+                  title: section.label,
+                  "aria-disabled": refused || void 0,
+                  "aria-describedby": section.disabledReason === void 0 ? void 0 : `${ids}-${section.key}`,
+                  tabIndex,
+                  ref: at === 0 ? first : void 0,
+                  onKeyDown,
+                  onClick: (event) => {
+                    event.stopPropagation();
+                    if (refused) return;
+                    close(false);
+                    section.onSelect();
+                  },
+                  children: section.icon
+                }
+              )
+            ] }, section.key);
+          }),
+          sections.map(
+            (section) => section.disabledReason === void 0 ? null : /* @__PURE__ */ jsx(VisuallyHidden, { id: `${ids}-${section.key}`, children: section.disabledReason }, `why-${section.key}`)
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+export { ADD_PILL_MS, AddPill };

package/dist/chunk-SFZOKW2G.js

@@ -0,0 +1,52 @@
+import { VisuallyHidden } from './chunk-BZFWDIV6.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './Kbd-W66MXQI5.css';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  const hinted = navigator.userAgentData?.platform;
+  return /mac|iphone|ipad|ipod/i.test(hinted || navigator.platform || navigator.userAgent);
+}
+var NAMED = {
+  Mod: { apple: ["\u2318", "Command"], other: ["Ctrl", "Control"] },
+  Ctrl: { apple: ["\u2303", "Control"], other: ["Ctrl", "Control"] },
+  Alt: { apple: ["\u2325", "Option"], other: ["Alt", "Alt"] },
+  Shift: { apple: ["\u21E7", "Shift"], other: ["Shift", "Shift"] },
+  Enter: { apple: ["\u21B5", "Return"], other: ["Enter", "Enter"] },
+  Escape: { apple: ["Esc", "Escape"], other: ["Esc", "Escape"] },
+  Backspace: { apple: ["\u232B", "Delete"], other: ["Backspace", "Backspace"] },
+  Delete: { apple: ["\u2326", "Forward delete"], other: ["Del", "Delete"] },
+  Tab: { apple: ["\u21E5", "Tab"], other: ["Tab", "Tab"] },
+  Space: { apple: ["Space", "Space"], other: ["Space", "Space"] },
+  ArrowUp: { apple: ["\u2191", "Up arrow"], other: ["\u2191", "Up arrow"] },
+  ArrowDown: { apple: ["\u2193", "Down arrow"], other: ["\u2193", "Down arrow"] },
+  ArrowLeft: { apple: ["\u2190", "Left arrow"], other: ["\u2190", "Left arrow"] },
+  ArrowRight: { apple: ["\u2192", "Right arrow"], other: ["\u2192", "Right arrow"] },
+  ContextMenu: { apple: ["Menu", "Menu key"], other: ["Menu", "Menu key"] },
+  "+": { apple: ["+", "Plus"], other: ["+", "Plus"] },
+  "-": { apple: ["-", "Minus"], other: ["-", "Minus"] },
+  "=": { apple: ["=", "Equals"], other: ["=", "Equals"] }
+};
+function keyGlyph(key, apple) {
+  const named = NAMED[key];
+  if (named) {
+    const [glyph, spoken] = apple ? named.apple : named.other;
+    return { glyph, spoken };
+  }
+  const shown = [...key].length === 1 ? key.toLocaleUpperCase() : key;
+  return { glyph: shown, spoken: shown };
+}
+var Kbd = ({ subtle = false, keys, apple, className, children, ...rest }) => {
+  if (keys === void 0) {
+    return /* @__PURE__ */ jsx("kbd", { ...rest, className: cx("crewlet-kbd", subtle && "crewlet-kbd--subtle", className), children });
+  }
+  const onApple = apple ?? isApplePlatform();
+  const mapped = keys.map((key) => keyGlyph(key, onApple));
+  return /* @__PURE__ */ jsxs("span", { ...rest, className: cx("crewlet-kbd-combo", className), children: [
+    /* @__PURE__ */ jsx("span", { className: "crewlet-kbd-keys", "aria-hidden": true, children: mapped.map((key, index) => /* @__PURE__ */ jsx("kbd", { className: cx("crewlet-kbd", subtle && "crewlet-kbd--subtle"), children: key.glyph }, index)) }),
+    /* @__PURE__ */ jsx(VisuallyHidden, { children: mapped.map((key) => key.spoken).join(" plus ") })
+  ] });
+};
+
+export { Kbd, isApplePlatform, keyGlyph };

package/dist/chunk-UG46QBLT.js

@@ -0,0 +1,325 @@
+import { Popover } from './chunk-DD5BBGBE.js';
+import { today, CalendarGrid, shiftMonth, compareDays } from './chunk-GXQ3B46I.js';
+import { IconButton } from './chunk-F27EPQ7D.js';
+import { Button } from './chunk-BZYDZBAN.js';
+import { cx } from './chunk-ODEQTPFM.js';
+import './DateTimePicker-22VNXRWC.css';
+import { useMemo, useState, useEffect } from 'react';
+import { CalendarTodayGlyph, KeyboardArrowDownGlyph, KeyboardDoubleArrowLeftGlyph, ChevronLeftGlyph, ChevronRightGlyph, KeyboardDoubleArrowRightGlyph } from '@crewlethq/icons/glyphs';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var DEFAULT_DATE_TIME_PICKER_LABELS = {
+  triggerName: (name, value) => `${name}: ${value}`,
+  unsetLabel: "nothing chosen",
+  previousYearLabel: "Previous year",
+  previousMonthLabel: "Previous month",
+  nextMonthLabel: "Next month",
+  nextYearLabel: "Next year",
+  timeLabel: "Time",
+  hourLabel: "Hour",
+  minuteLabel: "Minute",
+  secondLabel: "Second",
+  nowLabel: "Now",
+  todayLabel: "Today",
+  clearLabel: "Clear",
+  doneLabel: "Done"
+};
+var pad = (n) => String(n).padStart(2, "0");
+var MONTH_NAMES = [
+  "January",
+  "February",
+  "March",
+  "April",
+  "May",
+  "June",
+  "July",
+  "August",
+  "September",
+  "October",
+  "November",
+  "December"
+];
+var formatValue = (parsed) => `${parsed.year}-${pad(parsed.month + 1)}-${pad(parsed.day)}T${pad(parsed.hour)}:${pad(parsed.minute)}:${pad(parsed.second)}`;
+function parseValue(text) {
+  if (!text) return null;
+  const at = text.indexOf("T");
+  const date = at >= 0 ? text.slice(0, at) : text;
+  const time = at >= 0 ? text.slice(at + 1) : "00:00:00";
+  const parts = date.split("-");
+  if (parts.length < 3) return null;
+  const year = Number.parseInt(parts[0], 10);
+  const month = Number.parseInt(parts[1], 10);
+  const day = Number.parseInt(parts[2], 10);
+  if (!Number.isFinite(year) || !Number.isFinite(month) || !Number.isFinite(day)) return null;
+  const clock = time.split(":");
+  const hour = Number.parseInt(clock[0] || "0", 10);
+  const minute = Number.parseInt(clock[1] || "0", 10);
+  const second = Number.parseInt(clock[2] || "0", 10);
+  return {
+    year,
+    month: month - 1,
+    day,
+    hour: Number.isFinite(hour) ? hour : 0,
+    minute: Number.isFinite(minute) ? minute : 0,
+    second: Number.isFinite(second) ? second : 0
+  };
+}
+function formatLabel(text, showTime) {
+  const parsed = parseValue(text);
+  if (!parsed) return "";
+  const when = new Date(parsed.year, parsed.month, parsed.day, parsed.hour, parsed.minute, parsed.second);
+  return showTime ? when.toLocaleString(void 0, {
+    year: "numeric",
+    month: "short",
+    day: "numeric",
+    hour: "2-digit",
+    minute: "2-digit",
+    second: "2-digit",
+    hour12: false
+  }) : when.toLocaleDateString(void 0, { year: "numeric", month: "short", day: "numeric" });
+}
+function DateTimePicker({
+  value,
+  onChange,
+  placeholder = "Pick a date",
+  showTime = true,
+  minDate,
+  maxDate,
+  firstDayOfWeek = 0,
+  ariaLabel = "Date",
+  inline = false,
+  onDone,
+  className = "",
+  disabled = false,
+  size = "md",
+  labels: labelOverrides
+}) {
+  const labels = useMemo(
+    () => labelOverrides ? { ...DEFAULT_DATE_TIME_PICKER_LABELS, ...labelOverrides } : DEFAULT_DATE_TIME_PICKER_LABELS,
+    [labelOverrides]
+  );
+  const parsed = useMemo(() => parseValue(value), [value]);
+  const min = useMemo(() => parseValue(minDate), [minDate]);
+  const max = useMemo(() => parseValue(maxDate), [maxDate]);
+  const now = useMemo(today, []);
+  const [view, setView] = useState(
+    () => parsed ? { year: parsed.year, month: parsed.month } : { year: now.year, month: now.month }
+  );
+  const [focused, setFocused] = useState(() => parsed ?? now);
+  const year = parsed?.year;
+  const month = parsed?.month;
+  const day = parsed?.day;
+  useEffect(() => {
+    if (year === void 0 || month === void 0 || day === void 0) return;
+    setView({ year, month });
+    setFocused({ year, month, day });
+  }, [year, month, day]);
+  const outOfBounds = (date) => min !== null && compareDays(date, min) < 0 || max !== null && compareDays(date, max) > 0;
+  const step = (months) => {
+    const next = shiftMonth({ ...view, day: 1 }, months);
+    setView({ year: next.year, month: next.month });
+  };
+  const choose = (date, close) => {
+    onChange(
+      formatValue({
+        ...date,
+        hour: parsed?.hour ?? 0,
+        minute: parsed?.minute ?? 0,
+        second: parsed?.second ?? 0
+      })
+    );
+    if (!showTime) close();
+  };
+  const setTime = (hour, minute, second) => {
+    const base = parsed ?? { ...now, hour: 0, minute: 0, second: 0 };
+    onChange(formatValue({ ...base, hour, minute, second }));
+  };
+  const takeNow = () => {
+    const at = /* @__PURE__ */ new Date();
+    const wanted = {
+      year: at.getFullYear(),
+      month: at.getMonth(),
+      day: at.getDate(),
+      hour: showTime ? at.getHours() : 0,
+      minute: showTime ? at.getMinutes() : 0,
+      second: showTime ? at.getSeconds() : 0
+    };
+    const held = min !== null && compareDays(wanted, min) < 0 ? { ...min } : max !== null && compareDays(wanted, max) > 0 ? { ...max } : wanted;
+    setView({ year: held.year, month: held.month });
+    setFocused({ year: held.year, month: held.month, day: held.day });
+    onChange(formatValue(held));
+  };
+  const panel = (close) => /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__panel", children: [
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__nav", children: [
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: labels.previousYearLabel,
+          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowLeftGlyph, {}),
+          onClick: () => step(-12)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: labels.previousMonthLabel,
+          icon: /* @__PURE__ */ jsx(ChevronLeftGlyph, {}),
+          onClick: () => step(-1)
+        }
+      ),
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__title", "aria-live": "polite", children: [
+        MONTH_NAMES[view.month],
+        " ",
+        view.year
+      ] }),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: labels.nextMonthLabel,
+          icon: /* @__PURE__ */ jsx(ChevronRightGlyph, {}),
+          onClick: () => step(1)
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        IconButton,
+        {
+          size: "sm",
+          label: labels.nextYearLabel,
+          icon: /* @__PURE__ */ jsx(KeyboardDoubleArrowRightGlyph, {}),
+          onClick: () => step(12)
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx(
+      CalendarGrid,
+      {
+        label: `${MONTH_NAMES[view.month]} ${view.year}`,
+        year: view.year,
+        month: view.month,
+        focused,
+        onFocusedChange: setFocused,
+        onMonthChange: (nextYear, nextMonth) => setView({ year: nextYear, month: nextMonth }),
+        onSelect: (date) => choose(date, close),
+        selected: parsed ? [{ year: parsed.year, month: parsed.month, day: parsed.day }] : [],
+        isDisabled: outOfBounds,
+        firstDayOfWeek
+      }
+    ),
+    showTime ? /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__time", children: [
+      /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__time-label", children: labels.timeLabel }),
+      /* @__PURE__ */ jsx(
+        TimeUnit,
+        {
+          value: parsed?.hour ?? 0,
+          max: 23,
+          label: labels.hourLabel,
+          onCommit: (next) => setTime(next, parsed?.minute ?? 0, parsed?.second ?? 0)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__time-sep", "aria-hidden": "true", children: ":" }),
+      /* @__PURE__ */ jsx(
+        TimeUnit,
+        {
+          value: parsed?.minute ?? 0,
+          max: 59,
+          label: labels.minuteLabel,
+          onCommit: (next) => setTime(parsed?.hour ?? 0, next, parsed?.second ?? 0)
+        }
+      ),
+      /* @__PURE__ */ jsx("span", { className: "crewlet-datetime__time-sep", "aria-hidden": "true", children: ":" }),
+      /* @__PURE__ */ jsx(
+        TimeUnit,
+        {
+          value: parsed?.second ?? 0,
+          max: 59,
+          label: labels.secondLabel,
+          onCommit: (next) => setTime(parsed?.hour ?? 0, parsed?.minute ?? 0, next)
+        }
+      )
+    ] }) : null,
+    /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__footer", children: [
+      /* @__PURE__ */ jsxs("div", { className: "crewlet-datetime__shortcuts", children: [
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "tertiary", onClick: takeNow, children: showTime ? labels.nowLabel : labels.todayLabel }),
+        /* @__PURE__ */ jsx(Button, { size: "small", variant: "tertiary", onClick: () => onChange(""), children: labels.clearLabel })
+      ] }),
+      /* @__PURE__ */ jsx(Button, { size: "small", variant: "secondary", onClick: () => close(), children: labels.doneLabel })
+    ] })
+  ] });
+  if (inline) return panel(onDone ?? (() => void 0));
+  return /* @__PURE__ */ jsx(
+    Popover,
+    {
+      align: "start",
+      side: "bottom",
+      width: "auto",
+      label: ariaLabel,
+      className: "crewlet-datetime__popover",
+      trigger: (open, toggle) => /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          className: cx(
+            "crewlet-datetime",
+            `crewlet-datetime--${size}`,
+            value && "is-set",
+            open && "is-open",
+            disabled && "is-disabled",
+            className
+          ),
+          onClick: () => {
+            if (!disabled) toggle();
+          },
+          disabled,
+          "aria-haspopup": "dialog",
+          "aria-expanded": open,
+          "aria-label": labels.triggerName(
+            ariaLabel,
+            value ? formatLabel(value, showTime) : labels.unsetLabel
+          ),
+          children: [
+            /* @__PURE__ */ jsx(CalendarTodayGlyph, { className: "crewlet-datetime__icon", size: "sm" }),
+            /* @__PURE__ */ jsx("span", { className: cx("crewlet-datetime__label", !value && "is-placeholder"), children: value ? formatLabel(value, showTime) : placeholder }),
+            /* @__PURE__ */ jsx(KeyboardArrowDownGlyph, { className: "crewlet-datetime__chevron", size: "sm" })
+          ]
+        }
+      ),
+      children: (close) => panel(close)
+    }
+  );
+}
+function TimeUnit({ value, max, label, onCommit }) {
+  const [shown, setShown] = useState(() => pad(value));
+  useEffect(() => {
+    setShown(pad(value));
+  }, [value]);
+  const commit = () => {
+    const next = Math.max(0, Math.min(max, Number.parseInt(shown, 10) || 0));
+    setShown(pad(next));
+    if (next !== value) onCommit(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "number",
+      inputMode: "numeric",
+      min: 0,
+      max,
+      className: "crewlet-datetime__time-input",
+      value: shown,
+      "aria-label": label,
+      onChange: (event) => setShown(event.target.value.replace(/[^0-9]/g, "").slice(0, 2)),
+      onBlur: commit,
+      onKeyDown: (event) => {
+        if (event.key !== "Enter") return;
+        event.preventDefault();
+        commit();
+      },
+      onFocus: (event) => event.currentTarget.select()
+    }
+  );
+}
+
+export { DEFAULT_DATE_TIME_PICKER_LABELS, DateTimePicker };