@mitcsutt/kiln-ui 0.6.0 → 0.7.0

package/dist/components/inputs/DateTimeInput/DateTimeInput.js

@@ -0,0 +1,216 @@
+import { cx as e } from "../../../utils/cx.js";
+import { CalendarIcon as t, CloseIcon as n } from "../../../icons/icons.js";
+import { useMergedRefs as r } from "../internal/refs.js";
+import { FieldContext as i, markFieldAware as a, useResolvedField as o } from "../internal/FieldContext.js";
+import s from "../internal/control.module.js";
+import { Popover as c } from "../../overlays/Popover/Popover.js";
+import { DEFAULT_LOCALE as ee, dateOf as l, dayPeriodNames as te, defaultHourCycle as ne, formatDate as u, formatDateTime as re, formatTime as ie, parseDate as d, parseDateTime as f, parseTime as ae, timeZoneName as oe, todayIn as se, zonedParts as ce, zonedToInstant as p } from "../internal/dates.js";
+import { Calendar as le } from "../Calendar/Calendar.js";
+import { useControllableState as m } from "../Combobox/useControllableState.js";
+import { DateSegments as ue, draftDate as h, draftFromParts as g, draftTime as _, segmentPattern as de, useSegmentDraft as fe } from "../internal/DateSegments.js";
+import { DEFAULT_DATE_TIME_LABELS as pe, focusSegment as me, handleBoxPointerDown as he, isLeaving as v } from "../internal/picker.js";
+import y from "../internal/picker.module.js";
+import { TimeInput as ge } from "../TimeInput/TimeInput.js";
+import { forwardRef as b, useId as _e, useMemo as x, useRef as S } from "react";
+import { jsx as C, jsxs as w } from "react/jsx-runtime";
+//#region src/components/inputs/DateTimeInput/DateTimeInput.tsx
+function T(e, t) {
+	let n = f(e ?? "", t);
+	return n ? t ? p(n.date, n.time, t) : Date.UTC(n.date.year, n.date.month - 1, n.date.day, n.time.hour, n.time.minute, n.time.second) : null;
+}
+function E(e, { min: t, max: n, isDateDisabled: r, timeZone: i }) {
+	let a = T(e, i);
+	if (a === null) return !1;
+	let o = T(t, i), s = T(n, i), c = l(e, i);
+	return o !== null && a < o || s !== null && a > s || c !== null && (r?.(u(c)) ?? !1);
+}
+var D = a(b(function({ value: a, defaultValue: p, onValueChange: b, timeZone: D, granularity: O = "minute", hourCycle: ve, min: k, max: A, isDateDisabled: j, firstDayOfWeek: ye, locale: M = ee, calendar: N = !0, clearable: P = !1, name: F, form: be, size: xe = "md", id: Se, disabled: Ce, readOnly: we, required: Te, invalid: Ee, open: De, defaultOpen: Oe, onOpenChange: ke, onBlur: Ae, onFocus: je, onKeyDown: Me, labels: Ne, className: Pe, "aria-describedby": Fe, "aria-invalid": Ie, "aria-labelledby": Le, ...Re }, ze) {
+	let I = {
+		...pe,
+		...Ne
+	}, L = o({
+		id: Se,
+		describedBy: Fe,
+		invalid: Ee,
+		ariaInvalid: Ie,
+		disabled: Ce,
+		readOnly: we,
+		required: Te
+	}), Be = _e(), R = S(null), z = S(null), Ve = r(ze, R), B = ve ?? ne(M), He = x(() => de("datetime", M, O, B), [
+		M,
+		O,
+		B
+	]), Ue = x(() => te(M), [M]), [V, We] = m(a, p ?? "", b), [Ge, H] = m(De, Oe ?? !1, ke), Ke = (e) => {
+		let t = f(e, D);
+		return t ? g(t.date, t.time) : {};
+	}, qe = (e) => re(e, O, D), [U, W] = fe(V, Ke, (e) => {
+		let t = h(e), n = _(e);
+		return !t || !n || O === "second" && e.second === void 0 ? "" : qe({
+			date: t,
+			time: O === "minute" ? {
+				...n,
+				second: 0
+			} : n
+		});
+	}, We), G = !L.disabled && !L.readOnly, K = L.invalid || E(V, {
+		min: k,
+		max: A,
+		isDateDisabled: j,
+		timeZone: D
+	}), q = Object.keys(U).length > 0, J = D ? ce(Date.now(), D) : {
+		date: se(),
+		time: {
+			hour: (/* @__PURE__ */ new Date()).getHours(),
+			minute: 0,
+			second: 0
+		}
+	}, Je = g(J.date, J.time), Ye = T(V, D), Y = D ? oe(M, D, Ye ?? Date.now()) : null, X = k ? l(k, D) : null, Z = A ? l(A, D) : null, Q = `${Be}-time`, Xe = (e) => {
+		Me?.(e), !e.defaultPrevented && N && G && e.altKey && e.key === "ArrowDown" && (e.preventDefault(), H(!0));
+	}, Ze = (() => {
+		let e = h(U);
+		return e ? u(e) : "";
+	})(), Qe = (() => {
+		let e = _(U);
+		return e ? ie(e, O) : "";
+	})(), $ = /* @__PURE__ */ w("div", {
+		ref: Ve,
+		role: "group",
+		className: e(s.box, y.root, Pe),
+		"data-size": xe,
+		"data-invalid": K || void 0,
+		"data-disabled": L.disabled || void 0,
+		"data-readonly": L.readOnly || void 0,
+		"aria-labelledby": Le ?? L.labelId,
+		"aria-describedby": L.describedBy,
+		"aria-busy": L.busy || void 0,
+		...Re,
+		onPointerDown: he,
+		onKeyDown: Xe,
+		onFocus: (e) => {
+			v(e, R, z) && je?.(e);
+		},
+		onBlur: (e) => {
+			v(e, R, z) && Ae?.(e);
+		},
+		children: [
+			/* @__PURE__ */ C(ue, {
+				pattern: He,
+				draft: U,
+				onDraftChange: W,
+				hourCycle: B,
+				periodNames: Ue,
+				labels: I,
+				reference: Je,
+				firstId: L.id,
+				disabled: L.disabled,
+				readOnly: L.readOnly,
+				invalid: K,
+				required: L.required
+			}),
+			Y || P && G && q || N ? /* @__PURE__ */ w("span", {
+				className: y.trailing,
+				children: [
+					Y ? /* @__PURE__ */ C("span", {
+						className: y.zone,
+						children: Y
+					}) : null,
+					P && G && q ? /* @__PURE__ */ C("button", {
+						type: "button",
+						className: y.button,
+						"aria-label": I.clear,
+						onClick: () => {
+							W({}), me(R.current, "first");
+						},
+						children: /* @__PURE__ */ C(n, {})
+					}) : null,
+					N ? /* @__PURE__ */ C(c.Trigger, {
+						asChild: !0,
+						children: /* @__PURE__ */ C("button", {
+							type: "button",
+							className: y.button,
+							"aria-label": I.openCalendar,
+							disabled: !G,
+							children: /* @__PURE__ */ C(t, {})
+						})
+					}) : null
+				]
+			}) : null,
+			F === void 0 ? null : /* @__PURE__ */ C("input", {
+				type: "hidden",
+				name: F,
+				form: be,
+				value: V,
+				disabled: L.disabled || void 0
+			})
+		]
+	});
+	return N ? /* @__PURE__ */ w(c, {
+		open: Ge && G,
+		onOpenChange: H,
+		children: [/* @__PURE__ */ C(c.Anchor, {
+			asChild: !0,
+			children: $
+		}), /* @__PURE__ */ C(c.Content, {
+			ref: z,
+			className: y.popover,
+			align: "start",
+			"aria-label": I.openCalendar,
+			onOpenAutoFocus: (e) => {
+				e.preventDefault();
+			},
+			children: /* @__PURE__ */ C(i.Provider, {
+				value: null,
+				children: /* @__PURE__ */ w("div", {
+					className: y.panel,
+					children: [/* @__PURE__ */ C(le, {
+						autoFocus: !0,
+						value: d(Ze) ? Ze : "",
+						min: X ? u(X) : void 0,
+						max: Z ? u(Z) : void 0,
+						isDateDisabled: j,
+						firstDayOfWeek: ye,
+						locale: M,
+						timeZone: D,
+						labels: I,
+						onValueChange: (e) => {
+							let t = d(e);
+							t && W({
+								hour: 0,
+								minute: 0,
+								second: 0,
+								...U,
+								...t
+							});
+						}
+					}), /* @__PURE__ */ w("div", {
+						className: y.timeRow,
+						children: [/* @__PURE__ */ C("span", {
+							id: Q,
+							className: y.timeLabel,
+							children: I.time
+						}), /* @__PURE__ */ C(ge, {
+							"aria-labelledby": Q,
+							value: Qe,
+							granularity: O,
+							hourCycle: B,
+							locale: M,
+							size: "sm",
+							labels: I,
+							onValueChange: (e) => {
+								let t = ae(e);
+								t && W({
+									...U,
+									...t
+								});
+							}
+						})]
+					})]
+				})
+			})
+		})]
+	}) : $;
+}));
+//#endregion
+export { D as DateTimeInput, E as isDateTimeOutOfRange };
+
+//# sourceMappingURL=DateTimeInput.js.map

package/dist/components/inputs/DateTimeInput/DateTimeInput.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeInput.js","names":["control","picker","control_module_default","picker_module_default","instantOf","parts","parseDateTime","text","timeZone","zonedToInstant","isDateTimeOutOfRange","at","value","lower","min","upper","max","date","dateOf","isDateDisabled","formatDate","DateTimeInput","markFieldAware","forwardRef","valueProp","hourCycleProp","DEFAULT_LOCALE","idProp","disabledProp","readOnlyProp","requiredProp","invalidProp","openProp","labelsProp","describedByProp","ariaInvalid","ariaLabelledBy","rest","labels","DEFAULT_DATE_TIME_LABELS","field","useResolvedField","autoId","useId","rootRef","useRef","panelRef","composedRef","useMergedRefs","ref","hourCycle","defaultHourCycle","locale","pattern","useMemo","segmentPattern","granularity","periodNames","dayPeriodNames","setValue","useControllableState","defaultValue","onValueChange","open","setOpen","defaultOpen","onOpenChange","toDraft","draftFromParts","toValue","formatDateTime","draft","setDraft","useSegmentDraft","draftDate","time","draftTime","interactive","invalid","hasEntry","nowParts","zonedParts","todayIn","reference","instant","zone","timeZoneName","minDate","maxDate","timeLabelId","handleKeyDown","onKeyDown","event","calendar","draftDateText","draftTimeText","formatTime","box","cx","className","size","handleBoxPointerDown","isLeaving","onFocus","onBlur","DateSegments","clearable","focusSegment","CloseIcon","Popover","CalendarIcon","name","FieldContext","Calendar","parseDate","next","TimeInput","parseTime"],"sources":["../../../../src/components/inputs/DateTimeInput/DateTimeInput.tsx"],"sourcesContent":["import {\n  forwardRef,\n  useId,\n  useMemo,\n  useRef,\n  type FocusEventHandler,\n  type HTMLAttributes,\n  type KeyboardEvent,\n} from 'react'\nimport { CalendarIcon, CloseIcon } from '#icons'\nimport { cx } from '#utils/cx'\nimport type { Size } from '#utils/tokens'\nimport { Popover } from '#components/overlays/Popover'\nimport { Calendar } from '#components/inputs/Calendar'\nimport { TimeInput } from '#components/inputs/TimeInput'\nimport { useControllableState } from '#components/inputs/Combobox/useControllableState'\nimport {\n  FieldContext,\n  markFieldAware,\n  useResolvedField,\n} from '#components/inputs/internal/FieldContext'\nimport { useMergedRefs } from '#components/inputs/internal/refs'\nimport {\n  DateSegments,\n  draftDate,\n  draftFromParts,\n  draftTime,\n  segmentPattern,\n  useSegmentDraft,\n  type Draft,\n} from '#components/inputs/internal/DateSegments'\nimport {\n  DEFAULT_LOCALE,\n  dateOf,\n  dayPeriodNames,\n  defaultHourCycle,\n  formatDate,\n  formatDateTime,\n  formatTime,\n  parseDate,\n  parseDateTime,\n  parseTime,\n  timeZoneName,\n  todayIn,\n  zonedParts,\n  zonedToInstant,\n  type DateTimeParts,\n  type TimeGranularity,\n} from '#components/inputs/internal/dates'\nimport {\n  DEFAULT_DATE_TIME_LABELS,\n  focusSegment,\n  handleBoxPointerDown,\n  isLeaving,\n  type DateTimeLabels,\n} from '#components/inputs/internal/picker'\nimport control from '#components/inputs/internal/control.module.css'\nimport picker from '#components/inputs/internal/picker.module.css'\n\nexport interface DateTimeInputProps extends Omit<\n  HTMLAttributes<HTMLDivElement>,\n  'onChange' | 'defaultValue' | 'onBlur' | 'onFocus'\n> {\n  /**\n   * `YYYY-MM-DDTHH:mm` (a wall-clock time, like `datetime-local`), or with `timeZone` the UTC\n   * instant `YYYY-MM-DDTHH:mm:ssZ`. `''` until every part is filled in.\n   */\n  value?: string\n  defaultValue?: string\n  onValueChange?: (value: string) => void\n  /**\n   * Makes the value an instant: it's shown and typed as the wall clock in this zone (an IANA\n   * name such as `Australia/Perth`, or `UTC`) and reported in UTC. The zone's short name shows\n   * in the box.\n   */\n  timeZone?: string\n  /** `minute` (default) or `second`: the smallest part shown and kept. */\n  granularity?: TimeGranularity\n  /** 12 (with am/pm) or 24. Defaults to the locale's own clock. */\n  hourCycle?: 12 | 24\n  /** Earliest date-time, in the same form as `value`. Earlier days can't be picked. */\n  min?: string\n  /** Latest date-time, in the same form as `value`. */\n  max?: string\n  /** Marks dates unavailable, in the calendar and when typed. */\n  isDateDisabled?: (date: string) => boolean\n  /** 0 (Sunday) to 6 (Saturday). Defaults to the locale's own week. */\n  firstDayOfWeek?: number\n  /** BCP 47 locale for the order of the parts, the clock and the calendar. Default `en-AU`. */\n  locale?: string\n  /** Show the calendar button. Default `true`. */\n  calendar?: boolean\n  /** Show a clear button while there's a value. */\n  clearable?: boolean\n  /** Submits the value (`''` when incomplete). */\n  name?: string\n  form?: string\n  size?: Size\n  disabled?: boolean\n  readOnly?: boolean\n  required?: boolean\n  /** Critical border + `aria-invalid`. Inside a `<Field error>` this is set for you. */\n  invalid?: boolean\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  /** Fires once focus leaves the whole control, calendar included. */\n  onBlur?: FocusEventHandler<HTMLElement>\n  onFocus?: FocusEventHandler<HTMLElement>\n  labels?: Partial<DateTimeLabels>\n}\n\n/** Milliseconds for ordering two values in the same zone. */\nfunction instantOf(text: string | undefined, timeZone?: string): number | null {\n  const parts = parseDateTime(text ?? '', timeZone)\n  if (!parts) return null\n  return timeZone\n    ? zonedToInstant(parts.date, parts.time, timeZone)\n    : Date.UTC(\n        parts.date.year,\n        parts.date.month - 1,\n        parts.date.day,\n        parts.time.hour,\n        parts.time.minute,\n        parts.time.second,\n      )\n}\n\n/** Whether a date-time `value` falls outside `min`/`max` or on a disabled date. */\nexport function isDateTimeOutOfRange(\n  value: string,\n  {\n    min,\n    max,\n    isDateDisabled,\n    timeZone,\n  }: {\n    min?: string\n    max?: string\n    isDateDisabled?: (date: string) => boolean\n    timeZone?: string\n  },\n): boolean {\n  const at = instantOf(value, timeZone)\n  if (at === null) return false\n  const lower = instantOf(min, timeZone)\n  const upper = instantOf(max, timeZone)\n  const date = dateOf(value, timeZone)\n  return (\n    (lower !== null && at < lower) ||\n    (upper !== null && at > upper) ||\n    (date !== null && (isDateDisabled?.(formatDate(date)) ?? false))\n  )\n}\n\n/**\n * A date and a time typed part by part, with a calendar and the time together in one panel.\n *\n * @remarks\n * `DateTimeInput` holds a moment as an ISO string. Without `timeZone` it's a wall-clock time\n * (`2026-10-15T14:30`), the same as a native `datetime-local`: right for \"the meeting is at 2:30\"\n * wherever the reader is. With `timeZone` it's an instant (`2026-10-15T03:30:00Z`), shown and typed\n * as the clock in that zone, with the zone's name in the box: right for logs, deadlines and\n * anything stored as a timestamp.\n *\n * The parts type like {@link DateInput | DateInput} and {@link TimeInput | TimeInput}. The\n * calendar button opens a {@link Calendar | Calendar} with the time beneath it; picking a day keeps\n * the time (or starts at midnight), and the panel stays open to set the time. For the usual\n * labelled field, use {@link DateTimeField | DateTimeField}.\n *\n * @privateRemarks\n * One draft holds the date and time; the panel's Calendar and TimeInput are views of it. A\n * zoned value is converted to wall time on the way in (`parseDateTime`) and back to UTC on the\n * way out (`formatDateTime`), so the parts always show the zone's clock. The ref goes to the box.\n *\n * <DateTimeInput timeZone=\"UTC\" value={publishAt} onValueChange={setPublishAt} />\n */\nexport const DateTimeInput = markFieldAware(\n  forwardRef<HTMLDivElement, DateTimeInputProps>(function DateTimeInput(\n    {\n      value: valueProp,\n      defaultValue,\n      onValueChange,\n      timeZone,\n      granularity = 'minute',\n      hourCycle: hourCycleProp,\n      min,\n      max,\n      isDateDisabled,\n      firstDayOfWeek,\n      locale = DEFAULT_LOCALE,\n      calendar = true,\n      clearable = false,\n      name,\n      form,\n      size = 'md',\n      id: idProp,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      required: requiredProp,\n      invalid: invalidProp,\n      open: openProp,\n      defaultOpen,\n      onOpenChange,\n      onBlur,\n      onFocus,\n      onKeyDown,\n      labels: labelsProp,\n      className,\n      'aria-describedby': describedByProp,\n      'aria-invalid': ariaInvalid,\n      'aria-labelledby': ariaLabelledBy,\n      ...rest\n    },\n    ref,\n  ) {\n    const labels = { ...DEFAULT_DATE_TIME_LABELS, ...labelsProp }\n    const field = useResolvedField({\n      id: idProp,\n      describedBy: describedByProp,\n      invalid: invalidProp,\n      ariaInvalid,\n      disabled: disabledProp,\n      readOnly: readOnlyProp,\n      required: requiredProp,\n    })\n    const autoId = useId()\n    const rootRef = useRef<HTMLDivElement>(null)\n    const panelRef = useRef<HTMLDivElement>(null)\n    const composedRef = useMergedRefs(ref, rootRef)\n    const hourCycle = hourCycleProp ?? defaultHourCycle(locale)\n    const pattern = useMemo(\n      () => segmentPattern('datetime', locale, granularity, hourCycle),\n      [locale, granularity, hourCycle],\n    )\n    const periodNames = useMemo(() => dayPeriodNames(locale), [locale])\n    const [value, setValue] = useControllableState(valueProp, defaultValue ?? '', onValueChange)\n    const [open, setOpen] = useControllableState(openProp, defaultOpen ?? false, onOpenChange)\n\n    const toDraft = (text: string): Draft => {\n      const parts = parseDateTime(text, timeZone)\n      return parts ? draftFromParts(parts.date, parts.time) : {}\n    }\n    const toValue = (parts: DateTimeParts) => formatDateTime(parts, granularity, timeZone)\n    const fromDraft = (draft: Draft): string => {\n      const date = draftDate(draft)\n      const time = draftTime(draft)\n      if (!date || !time || (granularity === 'second' && draft.second === undefined)) return ''\n      return toValue({ date, time: granularity === 'minute' ? { ...time, second: 0 } : time })\n    }\n    const [draft, setDraft] = useSegmentDraft(value, toDraft, fromDraft, setValue)\n    const interactive = !field.disabled && !field.readOnly\n    const invalid =\n      field.invalid || isDateTimeOutOfRange(value, { min, max, isDateDisabled, timeZone })\n    const hasEntry = Object.keys(draft).length > 0\n    const nowParts = timeZone\n      ? zonedParts(Date.now(), timeZone)\n      : { date: todayIn(), time: { hour: new Date().getHours(), minute: 0, second: 0 } }\n    const reference = draftFromParts(nowParts.date, nowParts.time)\n    const instant = instantOf(value, timeZone)\n    const zone = timeZone ? timeZoneName(locale, timeZone, instant ?? Date.now()) : null\n    const minDate = min ? dateOf(min, timeZone) : null\n    const maxDate = max ? dateOf(max, timeZone) : null\n    const timeLabelId = `${autoId}-time`\n\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n      onKeyDown?.(event)\n      if (event.defaultPrevented) return\n      if (calendar && interactive && event.altKey && event.key === 'ArrowDown') {\n        event.preventDefault()\n        setOpen(true)\n      }\n    }\n\n    const draftDateText = (() => {\n      const date = draftDate(draft)\n      return date ? formatDate(date) : ''\n    })()\n    const draftTimeText = (() => {\n      const time = draftTime(draft)\n      return time ? formatTime(time, granularity) : ''\n    })()\n\n    const box = (\n      // The group only routes what its parts don't handle: a click on its padding, and\n      // Alt + Down Arrow from any part to open the calendar.\n      // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions\n      <div\n        ref={composedRef}\n        role=\"group\"\n        className={cx(control.box, picker.root, className)}\n        data-size={size}\n        data-invalid={invalid || undefined}\n        data-disabled={field.disabled || undefined}\n        data-readonly={field.readOnly || undefined}\n        aria-labelledby={ariaLabelledBy ?? field.labelId}\n        aria-describedby={field.describedBy}\n        aria-busy={field.busy || undefined}\n        {...rest}\n        onPointerDown={handleBoxPointerDown}\n        onKeyDown={handleKeyDown}\n        onFocus={(event) => {\n          if (isLeaving(event, rootRef, panelRef)) onFocus?.(event)\n        }}\n        onBlur={(event) => {\n          if (isLeaving(event, rootRef, panelRef)) onBlur?.(event)\n        }}\n      >\n        <DateSegments\n          pattern={pattern}\n          draft={draft}\n          onDraftChange={setDraft}\n          hourCycle={hourCycle}\n          periodNames={periodNames}\n          labels={labels}\n          reference={reference}\n          firstId={field.id}\n          disabled={field.disabled}\n          readOnly={field.readOnly}\n          invalid={invalid}\n          required={field.required}\n        />\n        {zone || (clearable && interactive && hasEntry) || calendar ? (\n          <span className={picker.trailing}>\n            {zone ? <span className={picker.zone}>{zone}</span> : null}\n            {clearable && interactive && hasEntry ? (\n              <button\n                type=\"button\"\n                className={picker.button}\n                aria-label={labels.clear}\n                onClick={() => {\n                  setDraft({})\n                  focusSegment(rootRef.current, 'first')\n                }}\n              >\n                <CloseIcon />\n              </button>\n            ) : null}\n            {calendar ? (\n              <Popover.Trigger asChild>\n                <button\n                  type=\"button\"\n                  className={picker.button}\n                  aria-label={labels.openCalendar}\n                  disabled={!interactive}\n                >\n                  <CalendarIcon />\n                </button>\n              </Popover.Trigger>\n            ) : null}\n          </span>\n        ) : null}\n        {name !== undefined ? (\n          <input\n            type=\"hidden\"\n            name={name}\n            form={form}\n            value={value}\n            disabled={field.disabled || undefined}\n          />\n        ) : null}\n      </div>\n    )\n\n    if (!calendar) return box\n\n    return (\n      <Popover open={open && interactive} onOpenChange={setOpen}>\n        <Popover.Anchor asChild>{box}</Popover.Anchor>\n        <Popover.Content\n          ref={panelRef}\n          className={picker.popover}\n          align=\"start\"\n          aria-label={labels.openCalendar}\n          onOpenAutoFocus={(event) => {\n            event.preventDefault()\n          }}\n        >\n          {/* The panel's time box isn't the field's control: no label, error or id from it. */}\n          <FieldContext.Provider value={null}>\n            <div className={picker.panel}>\n              <Calendar\n                // The panel is a dialog: opening it moves focus to its current day.\n                // eslint-disable-next-line jsx-a11y/no-autofocus\n                autoFocus\n                value={parseDate(draftDateText) ? draftDateText : ''}\n                min={minDate ? formatDate(minDate) : undefined}\n                max={maxDate ? formatDate(maxDate) : undefined}\n                isDateDisabled={isDateDisabled}\n                firstDayOfWeek={firstDayOfWeek}\n                locale={locale}\n                timeZone={timeZone}\n                labels={labels}\n                onValueChange={(next) => {\n                  const date = parseDate(next)\n                  if (date) setDraft({ hour: 0, minute: 0, second: 0, ...draft, ...date })\n                }}\n              />\n              <div className={picker.timeRow}>\n                <span id={timeLabelId} className={picker.timeLabel}>\n                  {labels.time}\n                </span>\n                <TimeInput\n                  aria-labelledby={timeLabelId}\n                  value={draftTimeText}\n                  granularity={granularity}\n                  hourCycle={hourCycle}\n                  locale={locale}\n                  size=\"sm\"\n                  labels={labels}\n                  onValueChange={(next) => {\n                    const time = parseTime(next)\n                    if (time) setDraft({ ...draft, ...time })\n                  }}\n                />\n              </div>\n            </div>\n          </FieldContext.Provider>\n        </Popover.Content>\n      </Popover>\n    )\n  }),\n)\n"],"mappings":"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"}

package/dist/components/inputs/DateTimeInput/index.d.ts

@@ -0,0 +1,2 @@
+export { DateTimeInput } from './DateTimeInput.js';
+export type { DateTimeInputProps } from './DateTimeInput.js';

package/dist/components/inputs/JsonField/JsonField.d.ts

@@ -0,0 +1,23 @@
+import { type FieldLabelProps } from '../Field/index.js';
+import { type JsonInputError, type JsonInputProps } from '../JsonInput/index.js';
+export interface JsonFieldProps extends FieldLabelProps, Omit<JsonInputProps, 'invalid'> {
+}
+/** "Line 3, column 12: Remove this comma: nothing follows it". */
+export declare function describeJsonError(error: JsonInputError): string;
+/**
+ * A labelled JSON editor that says where the JSON is wrong, formats it on demand and highlights
+ * it with the theme.
+ *
+ * @remarks
+ * `JsonField` is a {@link Field | Field} around a {@link JsonInput | JsonInput}. Once typing pauses,
+ * or the field loses focus, a syntax error shows as the field's error with its line and column
+ * ("Line 3, column 12: Remove this comma: nothing follows it"), and so does a message from
+ * `validate`. An `error` you pass wins over both, so a form library can still own the message.
+ * JsonInput props and the ref go to the `<textarea>`.
+ *
+ * @privateRemarks
+ * Label + JsonInput + description + error. `className`/`style` go to the field wrapper.
+ *
+ * <JsonField label="Payload" formatOnBlur validate={check} />
+ */
+export declare const JsonField: import("react").ForwardRefExoticComponent<JsonFieldProps & import("react").RefAttributes<HTMLTextAreaElement>>;

package/dist/components/inputs/JsonField/JsonField.js

@@ -0,0 +1,33 @@
+import { Field as e } from "../Field/Field.js";
+import { splitFieldLabelProps as t } from "../internal/fieldProps.js";
+import { JsonInput as n } from "../JsonInput/JsonInput.js";
+import { forwardRef as r, useState as i } from "react";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/components/inputs/JsonField/JsonField.tsx
+function o(e) {
+	return e.line === void 0 ? e.message : `Line ${String(e.line)}, column ${String(e.column ?? 1)}: ${e.message}`;
+}
+var s = r(function(r, s) {
+	let [c, l] = t(r), { id: u, disabled: d, className: f, style: p, onValidationChange: m, ...h } = l, [g, _] = i(void 0), v = g?.error ? o(g.error) : void 0;
+	return /* @__PURE__ */ a(e, {
+		...c,
+		error: c.error ?? v,
+		htmlFor: u,
+		disabled: d,
+		className: f,
+		style: p,
+		children: /* @__PURE__ */ a(n, {
+			ref: s,
+			id: u,
+			disabled: d,
+			onValidationChange: (e) => {
+				_(e), m?.(e);
+			},
+			...h
+		})
+	});
+});
+//#endregion
+export { s as JsonField, o as describeJsonError };
+
+//# sourceMappingURL=JsonField.js.map

package/dist/components/inputs/JsonField/JsonField.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"JsonField.js","names":["describeJsonError","error","JsonField","forwardRef","fieldProps","rest","splitFieldLabelProps","props","inputRest","shown","setShown","useState","own","Field","id","JsonInput","validation","onValidationChange"],"sources":["../../../../src/components/inputs/JsonField/JsonField.tsx"],"sourcesContent":["import { forwardRef, useState } from 'react'\nimport { Field, type FieldLabelProps } from '#components/inputs/Field'\nimport {\n  JsonInput,\n  type JsonInputError,\n  type JsonInputProps,\n  type JsonValidation,\n} from '#components/inputs/JsonInput'\nimport { splitFieldLabelProps } from '#components/inputs/internal/fieldProps'\n\nexport interface JsonFieldProps extends FieldLabelProps, Omit<JsonInputProps, 'invalid'> {}\n\n/** \"Line 3, column 12: Remove this comma: nothing follows it\". */\nexport function describeJsonError(error: JsonInputError): string {\n  return error.line === undefined\n    ? error.message\n    : `Line ${String(error.line)}, column ${String(error.column ?? 1)}: ${error.message}`\n}\n\n/**\n * A labelled JSON editor that says where the JSON is wrong, formats it on demand and highlights\n * it with the theme.\n *\n * @remarks\n * `JsonField` is a {@link Field | Field} around a {@link JsonInput | JsonInput}. Once typing pauses,\n * or the field loses focus, a syntax error shows as the field's error with its line and column\n * (\"Line 3, column 12: Remove this comma: nothing follows it\"), and so does a message from\n * `validate`. An `error` you pass wins over both, so a form library can still own the message.\n * JsonInput props and the ref go to the `<textarea>`.\n *\n * @privateRemarks\n * Label + JsonInput + description + error. `className`/`style` go to the field wrapper.\n *\n * <JsonField label=\"Payload\" formatOnBlur validate={check} />\n */\nexport const JsonField = forwardRef<HTMLTextAreaElement, JsonFieldProps>(\n  function JsonField(props, ref) {\n    const [fieldProps, rest] = splitFieldLabelProps(props)\n    const { id, disabled, className, style, onValidationChange, ...inputRest } = rest\n    const [shown, setShown] = useState<JsonValidation | undefined>(undefined)\n    const own = shown?.error ? describeJsonError(shown.error) : undefined\n\n    return (\n      <Field\n        {...fieldProps}\n        error={fieldProps.error ?? own}\n        htmlFor={id}\n        disabled={disabled}\n        className={className}\n        style={style}\n      >\n        <JsonInput\n          ref={ref}\n          id={id}\n          disabled={disabled}\n          onValidationChange={(validation) => {\n            setShown(validation)\n            onValidationChange?.(validation)\n          }}\n          {...inputRest}\n        />\n      </Field>\n    )\n  },\n)\n"],"mappings":";;;;;;AAaA,SAAgBA,EAAkB,GAA+B;CAC/D,OAAOC,EAAM,SAAS,KAAA,IAClBA,EAAM,UACN,QAAQ,OAAOA,EAAM,IAAI,EAAE,WAAW,OAAOA,EAAM,UAAU,CAAC,EAAE,IAAIA,EAAM;AAChF;AAkBA,IAAaC,IAAYC,EACvB,SAAmB,GAAO,GAAK;CAC7B,IAAM,CAACC,GAAYC,KAAQC,EAAqBC,CAAK,GAC/C,EAAE,OAAI,aAAU,cAAW,UAAO,uBAAoB,GAAGC,MAAcH,GACvE,CAACI,GAAOC,KAAYC,EAAqC,KAAA,CAAS,GAClEC,IAAMH,GAAO,QAAQT,EAAkBS,EAAM,KAAK,IAAI,KAAA;CAE5D,OACE,kBAACI,GAAD;EACE,GAAIT;EACJ,OAAOA,EAAW,SAASQ;EAC3B,SAASE;EACC;EACC;EACJ;EAEP,UAAA,kBAACC,GAAD;GACO;GACD;GACM;GACV,qBAAqB,MAAe;IAElC,AADAL,EAASM,CAAU,GACnBC,IAAqBD,CAAU;GACjC;GACA,GAAIR;EACL,CAAA;CACI,CAAA;AAEX,CACF"}

package/dist/components/inputs/JsonField/index.d.ts

@@ -0,0 +1,2 @@
+export { JsonField, describeJsonError } from './JsonField.js';
+export type { JsonFieldProps } from './JsonField.js';

package/dist/components/inputs/JsonInput/JsonInput.d.ts

@@ -0,0 +1,119 @@
+import { type TextareaHTMLAttributes } from 'react';
+import { type JsonIndent } from './json.js';
+/** Why the text isn't acceptable. A syntax error has the line and column it points at. */
+export interface JsonInputError {
+    message: string;
+    line?: number;
+    column?: number;
+}
+/** What a JSON text holds, and whether it's acceptable. */
+export interface JsonValidation {
+    /** The parsed value, when the text is valid JSON. `undefined` when it's empty or invalid. */
+    parsed: unknown;
+    /** `true` when the text is valid JSON that passes `validate`, or is empty. */
+    valid: boolean;
+    /** Why it isn't valid. */
+    error?: JsonInputError;
+}
+export interface JsonInputProps extends Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'value' | 'defaultValue' | 'wrap' | 'rows' | 'cols' | 'children'> {
+    /** The text (controlled). */
+    value?: string;
+    /** The starting text (uncontrolled). */
+    defaultValue?: string;
+    /** Called with the new text, and what it holds, on every change. */
+    onValueChange?: (value: string, validation: JsonValidation) => void;
+    /**
+     * Called when the validation the input shows changes: once typing pauses for
+     * `validationDelay`, on blur, and straight away when the text becomes valid again.
+     */
+    onValidationChange?: (validation: JsonValidation) => void;
+    /**
+     * Your own rules for a value that parses: return a message to reject it, or `undefined` to
+     * accept it. Wire a JSON Schema validator in here.
+     */
+    validate?: (parsed: unknown) => string | undefined;
+    /** How long typing has to pause before an error shows, in ms. Default `500`. */
+    validationDelay?: number;
+    /** How Format indents: `2` (default), `4` or `'tab'`. Also what Tab inserts. */
+    indent?: JsonIndent;
+    /** Sort object keys when formatting or minifying. */
+    sortKeys?: boolean;
+    /** Format the text when the input loses focus, if it's valid. */
+    formatOnBlur?: boolean;
+    /** Close brackets and quotes as you type them. Default `true`. */
+    autoClose?: boolean;
+    /** Number the lines. Default `true`. */
+    lineNumbers?: boolean;
+    /** Wrap long lines instead of scrolling sideways. */
+    wrap?: boolean;
+    /** Show the Format, Minify and Copy actions above the text. Default `true`. */
+    toolbar?: boolean;
+    /** The least height, in lines. Default `4`. */
+    minRows?: number;
+    /** Grow with the text up to this many lines, then scroll. Without it, it keeps growing. */
+    maxRows?: number;
+    /** Critical border and `aria-invalid`, on top of its own validation. Set for you inside a `Field`. */
+    invalid?: boolean;
+    /** Name of the copy action. Default "Copy JSON". */
+    copyLabel?: string;
+}
+/** Parses `text` and runs `validate` on the result. Empty text is valid and holds nothing. */
+export declare function validateJson(text: string, validate?: (parsed: unknown) => string | undefined): JsonValidation;
+/**
+ * A JSON editor in a field box: it highlights with the theme, numbers the lines, marks the line
+ * with an error, and formats or minifies on demand.
+ *
+ * @remarks
+ * `JsonInput` is for JSON that people edit by hand: a config blob, a request payload, a fixture.
+ * It parses as you type and, once typing pauses, marks the line that's wrong and sets
+ * `aria-invalid`. It never changes text that isn't valid. `onValueChange` gets the text and what
+ * it holds (`parsed`, `valid` and `error`) on every change. For a labelled field that shows the
+ * error message, use {@link JsonField | JsonField}.
+ *
+ * Format re-indents the text (`indent` is `2`, `4` or `'tab'`), and Minify puts it on one line.
+ * Both keep numbers and strings exactly as written, so a long ID or a price like `1.50` survives,
+ * and both keep the order of keys unless you pass `sortKeys`. `formatOnBlur` formats valid text
+ * as the input loses focus.
+ *
+ * It grows with its content from `minRows` up to `maxRows`, then scrolls. `readOnly` makes it a
+ * viewer: no Format or Minify, and Tab moves on as usual.
+ *
+ * ## Keyboard
+ *
+ * - **Tab** indents, and **Shift+Tab** outdents, the line or the selected lines. To leave the
+ *   editor with the keyboard, press **Escape**, then **Tab**. Screen readers hear this in the
+ *   input's description.
+ * - **Enter** keeps the indent, and indents again after `{` or `[`.
+ * - Typing `{`, `[` or `"` closes it for you (`autoClose`), and typing the closer steps over it.
+ * - **Shift+Alt+F** formats.
+ *
+ * ## Your own rules and JSON Schema
+ *
+ * `validate` gets the parsed value and returns a message to reject it. That's where a JSON Schema
+ * validator goes, so Kiln doesn't bundle one. With [Ajv](https://ajv.js.org):
+ *
+ * ```tsx
+ * import Ajv from 'ajv'
+ * import { JsonField } from '@mitcsutt/kiln-ui'
+ *
+ * const ajv = new Ajv()
+ * const check = ajv.compile(payloadSchema)
+ *
+ * export function PayloadField() {
+ *   return (
+ *     <JsonField
+ *       label="Payload"
+ *       validate={(value) => (check(value) ? undefined : ajv.errorsText(check.errors))}
+ *     />
+ *   )
+ * }
+ * ```
+ *
+ * @privateRemarks
+ * A transparent textarea over a highlighted <pre> in the same grid cell, so the browser does the
+ * editing, selection, undo and IME, and the <pre> only paints. Highlighting is a built-in JSON
+ * tokenizer rather than the shiki `highlight` entry: JSON's grammar is small enough to get exactly
+ * right without a peer dependency, so the field works the same everywhere. Edits from the keyboard
+ * go through execCommand('insertText') so they stay on the native undo stack.
+ */
+export declare const JsonInput: import("react").ForwardRefExoticComponent<JsonInputProps & import("react").RefAttributes<HTMLTextAreaElement>>;