@viax.io/uxm 4.36.0

package/dist/ui/date-input/date-input.css

@@ -0,0 +1,121 @@
+@charset "UTF-8";
+/* DateInput — moved from monolithic styles.css */
+.uxm-date-input {
+  position: relative;
+  width: 100%;
+  /* Icon is now a real <button> that toggles the calendar popover (not a
+     decorative span). Reset native button chrome down to the bare minimum so
+     the button's box is exactly the icon SVG — `top:50% + translateY(-50%)`
+     then centers it cleanly. No padding/margin tricks (those previously
+     misaligned the vertical center). Hover affordance is a subtle color shift
+     rather than a bg pill so the click feels precise. */
+  /* State coverage for date-input. Same shape as input-with-icon — :hover /
+     :focus / :disabled target the inner `__input`; the `--error` and
+     `--state-*` forced modifiers sit on the wrapper so the trailing
+     calendar icon can also re-tone in error mode. */
+}
+.uxm-date-input__icon {
+  align-items: center;
+  background: transparent;
+  border: none;
+  color: var(--uxm-date-input-icon-color, var(--color-text-muted));
+  cursor: pointer;
+  display: inline-flex;
+  font-family: inherit;
+  justify-content: center;
+  line-height: 1;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: var(--uxm-date-input-icon-offset, 12px);
+  top: 50%;
+  transform: translateY(-50%);
+  transition: color 0.12s;
+}
+.uxm-date-input__icon:hover {
+  color: var(--uxm-date-input-icon-hover-color, var(--color-text));
+}
+.uxm-date-input__icon > svg {
+  height: var(--uxm-date-input-icon-size, 16px);
+  width: var(--uxm-date-input-icon-size, 16px);
+}
+.uxm-date-input__popover {
+  /* Calendar inside owns its own bg / border / radius / padding, so the
+     popover wrapper just needs positioning + a drop shadow. Using a filter
+     drop-shadow follows the Calendar's rounded outline cleanly. */
+  filter: drop-shadow(0 10px 28px rgba(0, 0, 0, 0.18));
+  left: 0;
+  position: absolute;
+  top: calc(100% + 4px);
+  z-index: 10;
+}
+.uxm-date-input__input {
+  background-color: var(--uxm-date-input-background-color, var(--color-card));
+  border: 1px solid var(--uxm-date-input-border-color, var(--color-border));
+  border-radius: var(--uxm-date-input-border-radius, 8px);
+  box-sizing: border-box;
+  color: var(--uxm-date-input-color, var(--color-text));
+  font-family: inherit;
+  font-size: calc(var(--uxm-date-input-font-size, 14px) * var(--type-scale, 1));
+  outline: none;
+  padding: var(--uxm-date-input-padding-y, 10px) calc(var(--uxm-date-input-icon-offset, 12px) + var(--uxm-date-input-icon-size, 16px) + 8px) var(--uxm-date-input-padding-y, 10px) var(--uxm-date-input-padding-x, 12px);
+  transition: border-color 0.15s, background-color 0.15s, color 0.15s;
+  width: 100%;
+}
+.uxm-date-input--state-hover .uxm-date-input__input, .uxm-date-input__input:hover:not(:disabled) {
+  background-color: var(--uxm-date-input-hover-bg, var(--color-card));
+  border-color: var(--uxm-date-input-hover-border, var(--color-accent));
+}
+.uxm-date-input--state-focus .uxm-date-input__input, .uxm-date-input__input:focus {
+  border-color: var(--uxm-date-input-focus-border, var(--color-accent));
+  outline: 2px solid var(--uxm-date-input-focus-ring, var(--color-accent));
+  outline-offset: 2px;
+}
+.uxm-date-input__input:disabled {
+  background-color: var(--uxm-date-input-disabled-bg, var(--color-surface-alt));
+  border-color: var(--uxm-date-input-disabled-border, var(--color-border));
+  color: var(--uxm-date-input-disabled-color, var(--color-text-muted));
+  cursor: not-allowed;
+  opacity: var(--uxm-date-input-disabled-opacity, 0.6);
+}
+.uxm-date-input--error .uxm-date-input__input {
+  background-color: var(--uxm-date-input-error-bg, var(--color-card));
+  border-color: var(--uxm-date-input-error-border, var(--color-danger-text));
+}
+.uxm-date-input--error .uxm-date-input__icon {
+  color: var(--uxm-date-input-error-color, var(--color-danger-text));
+}
+.uxm-date-input__error-message {
+  color: var(--uxm-date-input-error-color, var(--color-danger-text));
+  font-size: calc(var(--uxm-date-input-error-message-size, 12px) * var(--type-scale, 1));
+  margin-top: 4px;
+}
+.uxm-date-input {
+  /* Clear (✕) — positioning only; chrome comes from the shared
+     `.uxm-field-clear` IconButton (same 22×22 affordance as the other
+     inputs). Base position is the trailing edge (typing-only fields with
+     no calendar icon). */
+}
+.uxm-date-input__clear {
+  position: absolute;
+  right: var(--uxm-date-input-icon-offset, 12px);
+  top: 50%;
+  transform: translateY(-50%);
+}
+.uxm-date-input {
+  /* With a calendar icon present, the ✕ sits just to its left (6px gap). */
+}
+.uxm-date-input--has-calendar .uxm-date-input__clear {
+  right: calc(var(--uxm-date-input-icon-offset, 12px) + var(--uxm-date-input-icon-size, 16px) + 6px);
+}
+.uxm-date-input {
+  /* Reserve trailing room so the value never slides under the ✕. Without a
+     calendar icon the base right padding already reserves ~one icon's worth,
+     so we bump it for the ✕; with the icon we reserve room for BOTH. */
+}
+.uxm-date-input--clearable .uxm-date-input__input {
+  padding-right: calc(var(--uxm-date-input-icon-offset, 12px) + var(--uxm-field-clear-size, 22px) + 8px);
+}
+.uxm-date-input--clearable.uxm-date-input--has-calendar .uxm-date-input__input {
+  padding-right: calc(var(--uxm-date-input-icon-offset, 12px) + var(--uxm-date-input-icon-size, 16px) + 6px + var(--uxm-field-clear-size, 22px) + 8px);
+}

package/dist/ui/date-input/date-input.d.ts

@@ -0,0 +1,79 @@
+import type { InputHTMLAttributes } from 'react';
+export type DateInputFormat = 'mdy' | 'dmy' | 'ymd';
+export type DateInputMode = 'single' | 'range';
+export interface DateInputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'type' | 'style'> {
+    /** Format mask. Drives placeholder, the digit-segment layout, and Calendar ↔ input parsing. */
+    format?: DateInputFormat;
+    /**
+     * Selection mode. `single` picks one date and closes after one click; `range`
+     * keeps the popover open after the first click and shows both dates joined by
+     * `" – "` once the second click commits the end. Range mode makes the input
+     * read-only — the `"MM/DD/YYYY – MM/DD/YYYY"` shape isn't practical to type.
+     */
+    mode?: DateInputMode;
+    /** Formatted string value (controlled). In range mode use `"start – end"`. */
+    value?: string;
+    /** Initial value for uncontrolled usage. */
+    defaultValue?: string;
+    /** Called with the masked, formatted value after each keystroke or calendar pick. */
+    onChange?: (formatted: string) => void;
+    /**
+     * Render the calendar icon button and enable the click-to-open popover.
+     * Defaults to true. Pass false for a typing-only date field (no icon, no popover).
+     */
+    calendar?: boolean;
+    /**
+     * Show a clear (✕) button when the field has a value. On by default (opt out
+     * with `clearable={false}`). The ✕ sits just left of the calendar icon (or
+     * at the trailing edge when `calendar={false}`). The component owns the reset
+     * — it wipes its own uncontrolled state and fires `onChange("")` — so no
+     * separate `onClear` is needed. Works in both single and range mode.
+     */
+    clearable?: boolean;
+    /** Accessible name for the clear button. Default `"Clear"`. */
+    clearLabel?: string;
+    /** Accessible name for the calendar trigger. Default `"Open calendar"`. */
+    openCalendarLabel?: string;
+    /** Accessible name for the calendar popover dialog. Default `"Choose date"`. */
+    calendarDialogLabel?: string;
+    /**
+     * Inline style applied to the WRAPPER (not the inner <input>). CSS custom
+     * properties set here cascade to every descendant — the input AND the
+     * popover (a sibling of the input) — so theming knobs reach all parts.
+     */
+    style?: React.CSSProperties;
+    /**
+     * When set to a non-empty string, the field renders in its error state:
+     * red border (`.uxm-date-input--error`), `aria-invalid` on the input,
+     * and the message rendered below the field. Omit (or pass an empty
+     * string) for the normal state.
+     */
+    error?: string;
+}
+export declare const FORMAT_SPEC: Record<DateInputFormat, {
+    segments: number[];
+    sep: string;
+    placeholder: string;
+}>;
+/** Auto-format raw input per the chosen format. Strips non-digits, caps at the format's total digit count, inserts separators. */
+export declare function maskDate(raw: string, format: DateInputFormat): string;
+/**
+ * Parse a formatted date string back to a Date so the Calendar can highlight
+ * it. Returns null until enough digits are typed for a complete date AND the
+ * date is real — a round-trip check rejects impossible dates like Feb 30 or
+ * Apr 31, which JS `Date` would otherwise silently roll into the next month.
+ * A non-null result is therefore always the exact date the digits spell.
+ */
+export declare function parseDate(formatted: string, format: DateInputFormat): Date | null;
+/** Format a Date back into the chosen mask. Inverse of `parseDate`. */
+export declare function formatDate(date: Date, format: DateInputFormat): string;
+/**
+ * Inline-validation message for an unparseable date, naming the expected mask.
+ * Shared with EditableCell's date field so both surface the identical wording.
+ */
+export declare function invalidDateMessage(format: DateInputFormat): string;
+export declare function DateInput({ format, mode, className, placeholder, value, defaultValue, onChange, calendar, clearable, clearLabel, openCalendarLabel, calendarDialogLabel, style, onFocus, onBlur, disabled, error, 'aria-describedby': ariaDescribedBy, ...rest }: DateInputProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace DateInput {
+    var hasError: boolean;
+}
+//# sourceMappingURL=date-input.d.ts.map

package/dist/ui/date-input/date-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"date-input.d.ts","sourceRoot":"","sources":["../../../src/ui/date-input/date-input.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAA2B,mBAAmB,EAAE,MAAM,OAAO,CAAC;AAE1E,MAAM,MAAM,eAAe,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AACpD,MAAM,MAAM,aAAa,GAAG,QAAQ,GAAG,OAAO,CAAC;AAI/C,MAAM,WAAW,cACf,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,UAAU,GAAG,OAAO,GAAG,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;IAC7G,+FAA+F;IAC/F,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,8EAA8E;IAC9E,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,4CAA4C;IAC5C,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,qFAAqF;IACrF,QAAQ,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,+DAA+D;IAC/D,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,2EAA2E;IAC3E,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,gFAAgF;IAChF,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;;OAIG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B;;;;;OAKG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,WAAW,EAAE,MAAM,CAAC,eAAe,EAAE;IAAE,QAAQ,EAAE,MAAM,EAAE,CAAC;IAAC,GAAG,EAAE,MAAM,CAAC;IAAC,WAAW,EAAE,MAAM,CAAA;CAAE,CAIzG,CAAC;AAEF,kIAAkI;AAClI,wBAAgB,QAAQ,CAAC,GAAG,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,GAAG,MAAM,CAcrE;AAED;;;;;;GAMG;AACH,wBAAgB,SAAS,CAAC,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,eAAe,GAAG,IAAI,GAAG,IAAI,CA0BjF;AAED,uEAAuE;AACvE,wBAAgB,UAAU,CAAC,IAAI,EAAE,IAAI,EAAE,MAAM,EAAE,eAAe,GAAG,MAAM,CAStE;AAyBD;;;GAGG;AACH,wBAAgB,kBAAkB,CAAC,MAAM,EAAE,eAAe,GAAG,MAAM,CAElE;AAED,wBAAgB,SAAS,CAAC,EACxB,MAAc,EACd,IAAe,EACf,SAAS,EACT,WAAW,EACX,KAAK,EACL,YAAY,EACZ,QAAQ,EACR,QAAe,EACf,SAAgB,EAChB,UAAoB,EACpB,iBAAmC,EACnC,mBAAmC,EACnC,KAAK,EACL,OAAO,EACP,MAAM,EACN,QAAQ,EACR,KAAK,EACL,kBAAkB,EAAE,eAAe,EACnC,GAAG,IAAI,EACR,EAAE,cAAc,2CAwOhB;yBA5Pe,SAAS"}

package/dist/ui/date-input/date-input.js

@@ -0,0 +1,268 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
+import { cn } from "../../helpers/index.js";
+import { useFocusOnMount } from "../../hooks/use-focus-on-mount.js";
+import { Calendar } from "../calendar/index.js";
+import { FieldError } from "../field-error/index.js";
+import { Icon } from "../icon/index.js";
+import { IconButton } from "../icon-button/index.js";
+const RANGE_SEPARATOR = " \u2013 ";
+const FORMAT_SPEC = {
+  mdy: { segments: [2, 2, 4], sep: "/", placeholder: "MM/DD/YYYY" },
+  dmy: { segments: [2, 2, 4], sep: "/", placeholder: "DD/MM/YYYY" },
+  ymd: { segments: [4, 2, 2], sep: "-", placeholder: "YYYY-MM-DD" }
+};
+function maskDate(raw, format) {
+  const spec = FORMAT_SPEC[format];
+  const maxDigits = spec.segments.reduce((sum, n) => sum + n, 0);
+  const digits = raw.replace(/\D/g, "").slice(0, maxDigits);
+  let out = "";
+  let consumed = 0;
+  for (let i = 0; i < spec.segments.length; i++) {
+    const segDigits = digits.slice(consumed, consumed + spec.segments[i]);
+    if (!segDigits) break;
+    if (i > 0) out += spec.sep;
+    out += segDigits;
+    consumed += spec.segments[i];
+  }
+  return out;
+}
+function parseDate(formatted, format) {
+  const digits = formatted.replace(/\D/g, "");
+  if (digits.length !== 8) return null;
+  let y, m, d;
+  if (format === "ymd") {
+    y = Number(digits.slice(0, 4));
+    m = Number(digits.slice(4, 6));
+    d = Number(digits.slice(6, 8));
+  } else if (format === "mdy") {
+    m = Number(digits.slice(0, 2));
+    d = Number(digits.slice(2, 4));
+    y = Number(digits.slice(4, 8));
+  } else {
+    d = Number(digits.slice(0, 2));
+    m = Number(digits.slice(2, 4));
+    y = Number(digits.slice(4, 8));
+  }
+  if (!m || !d || !y || m < 1 || m > 12 || d < 1 || d > 31) return null;
+  const date = new Date(y, m - 1, d);
+  if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d) {
+    return null;
+  }
+  return date;
+}
+function formatDate(date, format) {
+  const m = String(date.getMonth() + 1).padStart(2, "0");
+  const d = String(date.getDate()).padStart(2, "0");
+  const y = String(date.getFullYear()).padStart(4, "0");
+  switch (format) {
+    case "mdy":
+      return `${m}/${d}/${y}`;
+    case "dmy":
+      return `${d}/${m}/${y}`;
+    case "ymd":
+      return `${y}-${m}-${d}`;
+  }
+}
+function formatRangeValue(value, format) {
+  if (!value.start) return "";
+  const startStr = formatDate(value.start, format);
+  if (!value.end) return startStr;
+  return `${startStr}${RANGE_SEPARATOR}${formatDate(value.end, format)}`;
+}
+function parseRangeValue(formatted, format) {
+  const parts = formatted.split(RANGE_SEPARATOR);
+  return {
+    start: parts[0] ? parseDate(parts[0], format) : null,
+    end: parts[1] ? parseDate(parts[1], format) : null
+  };
+}
+function placeholderFor(format, mode) {
+  const single = FORMAT_SPEC[format].placeholder;
+  return mode === "range" ? `${single}${RANGE_SEPARATOR}${single}` : single;
+}
+function invalidDateMessage(format) {
+  return `Enter a valid date (${FORMAT_SPEC[format].placeholder})`;
+}
+function DateInput({
+  format = "mdy",
+  mode = "single",
+  className,
+  placeholder,
+  value,
+  defaultValue,
+  onChange,
+  calendar = true,
+  clearable = true,
+  clearLabel = "Clear",
+  openCalendarLabel = "Open calendar",
+  calendarDialogLabel = "Choose date",
+  style,
+  onFocus,
+  onBlur,
+  disabled,
+  error,
+  "aria-describedby": ariaDescribedBy,
+  ...rest
+}) {
+  const [internal, setInternal] = useState(
+    () => mode === "single" ? maskDate(defaultValue ?? "", format) : defaultValue ?? ""
+  );
+  const isControlled = value !== void 0;
+  const current = isControlled ? value : internal;
+  const [isOpen, setIsOpen] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  const errorId = useId();
+  const containerRef = useRef(null);
+  const isFirstModeEffect = useRef(true);
+  useEffect(() => {
+    if (isFirstModeEffect.current) {
+      isFirstModeEffect.current = false;
+      return;
+    }
+    setInternal("");
+    setIsOpen(false);
+    setInvalid(false);
+  }, [mode, format]);
+  useEffect(() => {
+    if (!isOpen) return;
+    const handleClick = (e) => {
+      if (containerRef.current && !containerRef.current.contains(e.target)) {
+        setIsOpen(false);
+      }
+    };
+    const handleKey = (e) => {
+      if (e.key === "Escape") setIsOpen(false);
+    };
+    document.addEventListener("mousedown", handleClick);
+    document.addEventListener("keydown", handleKey);
+    return () => {
+      document.removeEventListener("mousedown", handleClick);
+      document.removeEventListener("keydown", handleKey);
+    };
+  }, [isOpen]);
+  useFocusOnMount({ active: isOpen, returnFocus: false });
+  const handleInputChange = useCallback(
+    (e) => {
+      if (mode === "range") return;
+      const formatted = maskDate(e.target.value, format);
+      if (!isControlled) setInternal(formatted);
+      setInvalid(false);
+      onChange?.(formatted);
+    },
+    [mode, isControlled, onChange, format]
+  );
+  const handleCalendarChange = useCallback(
+    (calValue) => {
+      if (!calValue.start) return;
+      setInvalid(false);
+      if (mode === "range") {
+        const formatted = formatRangeValue(calValue, format);
+        if (!isControlled) setInternal(formatted);
+        onChange?.(formatted);
+        if (calValue.end) setIsOpen(false);
+      } else {
+        const formatted = formatDate(calValue.start, format);
+        if (!isControlled) setInternal(formatted);
+        onChange?.(formatted);
+        setIsOpen(false);
+      }
+    },
+    [mode, isControlled, onChange, format]
+  );
+  const handleClear = useCallback(() => {
+    if (!isControlled) setInternal("");
+    setInvalid(false);
+    onChange?.("");
+  }, [isControlled, onChange]);
+  const showClear = clearable && (current ?? "").length > 0 && !disabled;
+  const handleBlur = useCallback(
+    (e) => {
+      if (mode !== "range") {
+        const v = current ?? "";
+        setInvalid(v !== "" && parseDate(v, format) === null);
+      }
+      onBlur?.(e);
+    },
+    [mode, current, format, onBlur]
+  );
+  const calendarValue = (() => {
+    if (mode === "range") return parseRangeValue(current ?? "", format);
+    const date = parseDate(current ?? "", format);
+    return { start: date, end: date };
+  })();
+  const shownError = error || (invalid ? invalidDateMessage(format) : void 0);
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "uxm-date-input",
+          calendar && "uxm-date-input--has-calendar",
+          clearable && "uxm-date-input--clearable",
+          shownError && "uxm-date-input--error",
+          className
+        ),
+        ref: containerRef,
+        style,
+        children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...rest,
+              type: "text",
+              inputMode: "numeric",
+              readOnly: mode === "range",
+              className: "uxm-date-input__input",
+              placeholder: placeholder ?? placeholderFor(format, mode),
+              value: current,
+              onChange: handleInputChange,
+              onFocus: (e) => {
+                if (calendar) setIsOpen(true);
+                onFocus?.(e);
+              },
+              onBlur: handleBlur,
+              "aria-invalid": shownError ? true : void 0,
+              "aria-describedby": [shownError && errorId, ariaDescribedBy].filter(Boolean).join(" ") || void 0,
+              disabled
+            }
+          ),
+          showClear && /* @__PURE__ */ jsx(
+            IconButton,
+            {
+              className: "uxm-field-clear uxm-date-input__clear",
+              "aria-label": clearLabel,
+              onMouseDown: (e) => e.preventDefault(),
+              onClick: handleClear,
+              children: /* @__PURE__ */ jsx(Icon, { glyph: "close" })
+            }
+          ),
+          calendar && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "uxm-date-input__icon",
+              onClick: () => setIsOpen((o) => !o),
+              "aria-label": openCalendarLabel,
+              "aria-expanded": isOpen,
+              disabled,
+              children: /* @__PURE__ */ jsx(Icon, { glyph: "calendar" })
+            }
+          ),
+          calendar && isOpen && /* @__PURE__ */ jsx("div", { className: "uxm-date-input__popover", role: "dialog", "aria-label": calendarDialogLabel, children: /* @__PURE__ */ jsx("div", { onMouseDown: (e) => e.preventDefault(), children: /* @__PURE__ */ jsx(Calendar, { value: calendarValue, onChange: handleCalendarChange }) }) })
+        ]
+      }
+    ),
+    shownError && /* @__PURE__ */ jsx(FieldError, { id: errorId, className: "uxm-date-input__error-message", children: shownError })
+  ] });
+}
+DateInput.hasError = true;
+export {
+  DateInput,
+  FORMAT_SPEC,
+  formatDate,
+  invalidDateMessage,
+  maskDate,
+  parseDate
+};
+//# sourceMappingURL=date-input.js.map

package/dist/ui/date-input/date-input.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/date-input/date-input.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useRef, useState } from 'react';\n\nimport { cn } from '@/helpers';\n\nimport { useFocusOnMount } from '../../hooks/use-focus-on-mount';\nimport { Calendar, type CalendarValue } from '../calendar';\nimport { FieldError } from '../field-error';\nimport { Icon } from '../icon';\nimport { IconButton } from '../icon-button';\n\nimport type { ChangeEvent, FocusEvent, InputHTMLAttributes } from 'react';\n\nexport type DateInputFormat = 'mdy' | 'dmy' | 'ymd';\nexport type DateInputMode = 'single' | 'range';\n\nconst RANGE_SEPARATOR = ' – ';\n\nexport interface DateInputProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange' | 'value' | 'defaultValue' | 'type' | 'style'> {\n  /** Format mask. Drives placeholder, the digit-segment layout, and Calendar ↔ input parsing. */\n  format?: DateInputFormat;\n  /**\n   * Selection mode. `single` picks one date and closes after one click; `range`\n   * keeps the popover open after the first click and shows both dates joined by\n   * `\" – \"` once the second click commits the end. Range mode makes the input\n   * read-only — the `\"MM/DD/YYYY – MM/DD/YYYY\"` shape isn't practical to type.\n   */\n  mode?: DateInputMode;\n  /** Formatted string value (controlled). In range mode use `\"start – end\"`. */\n  value?: string;\n  /** Initial value for uncontrolled usage. */\n  defaultValue?: string;\n  /** Called with the masked, formatted value after each keystroke or calendar pick. */\n  onChange?: (formatted: string) => void;\n  /**\n   * Render the calendar icon button and enable the click-to-open popover.\n   * Defaults to true. Pass false for a typing-only date field (no icon, no popover).\n   */\n  calendar?: boolean;\n  /**\n   * Show a clear (✕) button when the field has a value. On by default (opt out\n   * with `clearable={false}`). The ✕ sits just left of the calendar icon (or\n   * at the trailing edge when `calendar={false}`). The component owns the reset\n   * — it wipes its own uncontrolled state and fires `onChange(\"\")` — so no\n   * separate `onClear` is needed. Works in both single and range mode.\n   */\n  clearable?: boolean;\n  /** Accessible name for the clear button. Default `\"Clear\"`. */\n  clearLabel?: string;\n  /** Accessible name for the calendar trigger. Default `\"Open calendar\"`. */\n  openCalendarLabel?: string;\n  /** Accessible name for the calendar popover dialog. Default `\"Choose date\"`. */\n  calendarDialogLabel?: string;\n  /**\n   * Inline style applied to the WRAPPER (not the inner <input>). CSS custom\n   * properties set here cascade to every descendant — the input AND the\n   * popover (a sibling of the input) — so theming knobs reach all parts.\n   */\n  style?: React.CSSProperties;\n  /**\n   * When set to a non-empty string, the field renders in its error state:\n   * red border (`.uxm-date-input--error`), `aria-invalid` on the input,\n   * and the message rendered below the field. Omit (or pass an empty\n   * string) for the normal state.\n   */\n  error?: string;\n}\n\nexport const FORMAT_SPEC: Record<DateInputFormat, { segments: number[]; sep: string; placeholder: string }> = {\n  mdy: { segments: [2, 2, 4], sep: '/', placeholder: 'MM/DD/YYYY' },\n  dmy: { segments: [2, 2, 4], sep: '/', placeholder: 'DD/MM/YYYY' },\n  ymd: { segments: [4, 2, 2], sep: '-', placeholder: 'YYYY-MM-DD' },\n};\n\n/** Auto-format raw input per the chosen format. Strips non-digits, caps at the format's total digit count, inserts separators. */\nexport function maskDate(raw: string, format: DateInputFormat): string {\n  const spec = FORMAT_SPEC[format];\n  const maxDigits = spec.segments.reduce((sum, n) => sum + n, 0);\n  const digits = raw.replace(/\\D/g, '').slice(0, maxDigits);\n  let out = '';\n  let consumed = 0;\n  for (let i = 0; i < spec.segments.length; i++) {\n    const segDigits = digits.slice(consumed, consumed + spec.segments[i]);\n    if (!segDigits) break;\n    if (i > 0) out += spec.sep;\n    out += segDigits;\n    consumed += spec.segments[i];\n  }\n  return out;\n}\n\n/**\n * Parse a formatted date string back to a Date so the Calendar can highlight\n * it. Returns null until enough digits are typed for a complete date AND the\n * date is real — a round-trip check rejects impossible dates like Feb 30 or\n * Apr 31, which JS `Date` would otherwise silently roll into the next month.\n * A non-null result is therefore always the exact date the digits spell.\n */\nexport function parseDate(formatted: string, format: DateInputFormat): Date | null {\n  const digits = formatted.replace(/\\D/g, '');\n  if (digits.length !== 8) return null;\n  let y: number, m: number, d: number;\n  if (format === 'ymd') {\n    y = Number(digits.slice(0, 4));\n    m = Number(digits.slice(4, 6));\n    d = Number(digits.slice(6, 8));\n  } else if (format === 'mdy') {\n    m = Number(digits.slice(0, 2));\n    d = Number(digits.slice(2, 4));\n    y = Number(digits.slice(4, 8));\n  } else {\n    d = Number(digits.slice(0, 2));\n    m = Number(digits.slice(2, 4));\n    y = Number(digits.slice(4, 8));\n  }\n  if (!m || !d || !y || m < 1 || m > 12 || d < 1 || d > 31) return null;\n  const date = new Date(y, m - 1, d);\n  // Round-trip guard: `new Date(2024, 1, 30)` silently rolls Feb 30 over to\n  // Mar 1 rather than failing. Require the constructed date to spell back the\n  // exact digits so callers can trust a non-null result is a real date.\n  if (date.getFullYear() !== y || date.getMonth() !== m - 1 || date.getDate() !== d) {\n    return null;\n  }\n  return date;\n}\n\n/** Format a Date back into the chosen mask. Inverse of `parseDate`. */\nexport function formatDate(date: Date, format: DateInputFormat): string {\n  const m = String(date.getMonth() + 1).padStart(2, '0');\n  const d = String(date.getDate()).padStart(2, '0');\n  const y = String(date.getFullYear()).padStart(4, '0');\n  switch (format) {\n    case 'mdy': return `${m}/${d}/${y}`;\n    case 'dmy': return `${d}/${m}/${y}`;\n    case 'ymd': return `${y}-${m}-${d}`;\n  }\n}\n\n/** Range-aware value formatter: `\"<start>\"` or `\"<start> – <end>\"`. */\nfunction formatRangeValue(value: CalendarValue, format: DateInputFormat): string {\n  if (!value.start) return '';\n  const startStr = formatDate(value.start, format);\n  if (!value.end) return startStr;\n  return `${startStr}${RANGE_SEPARATOR}${formatDate(value.end, format)}`;\n}\n\n/** Range-aware value parser. Splits on ` – ` and parses each half independently. */\nfunction parseRangeValue(formatted: string, format: DateInputFormat): CalendarValue {\n  const parts = formatted.split(RANGE_SEPARATOR);\n  return {\n    start: parts[0] ? parseDate(parts[0], format) : null,\n    end: parts[1] ? parseDate(parts[1], format) : null,\n  };\n}\n\n/** Build a placeholder that doubles up the mask for range mode. */\nfunction placeholderFor(format: DateInputFormat, mode: DateInputMode): string {\n  const single = FORMAT_SPEC[format].placeholder;\n  return mode === 'range' ? `${single}${RANGE_SEPARATOR}${single}` : single;\n}\n\n/**\n * Inline-validation message for an unparseable date, naming the expected mask.\n * Shared with EditableCell's date field so both surface the identical wording.\n */\nexport function invalidDateMessage(format: DateInputFormat): string {\n  return `Enter a valid date (${FORMAT_SPEC[format].placeholder})`;\n}\n\nexport function DateInput({\n  format = 'mdy',\n  mode = 'single',\n  className,\n  placeholder,\n  value,\n  defaultValue,\n  onChange,\n  calendar = true,\n  clearable = true,\n  clearLabel = 'Clear',\n  openCalendarLabel = 'Open calendar',\n  calendarDialogLabel = 'Choose date',\n  style,\n  onFocus,\n  onBlur,\n  disabled,\n  error,\n  'aria-describedby': ariaDescribedBy,\n  ...rest\n}: DateInputProps) {\n  // Initial state — same masker for single, plain string for range (typing\n  // disabled in range mode so no need to mask).\n  const [internal, setInternal] = useState<string>(() =>\n    mode === 'single' ? maskDate(defaultValue ?? '', format) : defaultValue ?? '',\n  );\n  const isControlled = value !== undefined;\n  const current = isControlled ? value : internal;\n\n  const [isOpen, setIsOpen] = useState(false);\n  // Inline validity: flipped true on blur when the typed value is non-empty\n  // but doesn't resolve to a real date (out-of-range like 06/36, or impossible\n  // like Feb 30). Cleared the moment the user edits again and re-checked on the\n  // next blur — mirrors EditableCell's date field so the two behave the same.\n  const [invalid, setInvalid] = useState(false);\n  const errorId = useId();\n  const containerRef = useRef<HTMLDivElement>(null);\n\n  // Mode OR format switch resets the internal value — a range string is\n  // invalid input in single mode (and vice versa), and an existing digit\n  // string would otherwise be mis-parsed under a new format's segment\n  // boundaries (e.g. \"mdy\" digits re-sliced as \"ymd\"). Also close the\n  // popover so the user starts a fresh pick under the new mode/format.\n  // Only touches uncontrolled state; if the consumer is driving `value`\n  // they own the reset themselves.\n  //\n  // The ref guard skips the FIRST run of this effect so the `useState`\n  // initializer (which masks `defaultValue`) doesn't get clobbered on mount.\n  // Without the guard, `<DateInput defaultValue=\"01/01/2020\" />` renders\n  // empty because the effect fires once at mount and overwrites the\n  // masked initial value with \"\".\n  const isFirstModeEffect = useRef(true);\n  useEffect(() => {\n    if (isFirstModeEffect.current) {\n      isFirstModeEffect.current = false;\n      return;\n    }\n    setInternal('');\n    setIsOpen(false);\n    setInvalid(false);\n  }, [mode, format]);\n\n  // Close on click outside or Escape. Mounting only when `isOpen` is true\n  // keeps the global listeners off when the popover is closed.\n  useEffect(() => {\n    if (!isOpen) return;\n    const handleClick = (e: MouseEvent) => {\n      if (containerRef.current && !containerRef.current.contains(e.target as Node)) {\n        setIsOpen(false);\n      }\n    };\n    const handleKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') setIsOpen(false);\n    };\n    document.addEventListener('mousedown', handleClick);\n    document.addEventListener('keydown', handleKey);\n    return () => {\n      document.removeEventListener('mousedown', handleClick);\n      document.removeEventListener('keydown', handleKey);\n    };\n  }, [isOpen]);\n\n  // No focus restoration on close: the field opens the popover on input\n  // `onFocus`, so restoring focus to the input after an outside-click close\n  // would immediately re-fire `onFocus` and reopen the popover — the same\n  // reopen loop TimeInput opts out of. Dismissal paths (outside click on\n  // another surface, Escape while the input keeps focus) don't strand focus\n  // on the removed panel because the panel itself never takes focus.\n  useFocusOnMount({ active: isOpen, returnFocus: false });\n\n  const handleInputChange = useCallback(\n    (e: ChangeEvent<HTMLInputElement>) => {\n      // Range mode is read-only; this guard prevents any sneaky programmatic edits.\n      if (mode === 'range') return;\n      const formatted = maskDate(e.target.value, format);\n      if (!isControlled) setInternal(formatted);\n      // Stop showing the error as soon as the user starts fixing the value;\n      // it's re-evaluated on the next blur. (No-op re-render when already false.)\n      setInvalid(false);\n      onChange?.(formatted);\n    },\n    [mode, isControlled, onChange, format],\n  );\n\n  const handleCalendarChange = useCallback(\n    (calValue: CalendarValue) => {\n      if (!calValue.start) return;\n      // A calendar pick is always a real date — clear any lingering typed-error.\n      setInvalid(false);\n      if (mode === 'range') {\n        // Calendar fires after every click: end=null after first, end set after second.\n        // Update the input either way (so the user sees the in-flight start) but only\n        // close when the range is fully committed.\n        const formatted = formatRangeValue(calValue, format);\n        if (!isControlled) setInternal(formatted);\n        onChange?.(formatted);\n        if (calValue.end) setIsOpen(false);\n      } else {\n        // Single mode — first click commits and closes.\n        const formatted = formatDate(calValue.start, format);\n        if (!isControlled) setInternal(formatted);\n        onChange?.(formatted);\n        setIsOpen(false);\n      }\n    },\n    [mode, isControlled, onChange, format],\n  );\n\n  // Clear owns its own reset: wipe the value in both single and range mode\n  // and notify via onChange(\"\"). Mirrors NumberInput / CurrencyInput — the\n  // component holds its own state, so no onClear prop is needed.\n  const handleClear = useCallback(() => {\n    if (!isControlled) setInternal('');\n    setInvalid(false);\n    onChange?.('');\n  }, [isControlled, onChange]);\n  const showClear = clearable && (current ?? '').length > 0 && !disabled;\n\n  // Validate when focus leaves the field. Empty is always fine; a non-empty\n  // value that doesn't parse to a real date flips into the error state. Range\n  // mode is read-only (filled only via the calendar, which never yields an\n  // impossible date), so it never validates here. Chains the consumer's own\n  // `onBlur` afterward so wiring it up stays possible.\n  const handleBlur = useCallback(\n    (e: FocusEvent<HTMLInputElement>) => {\n      if (mode !== 'range') {\n        const v = current ?? '';\n        setInvalid(v !== '' && parseDate(v, format) === null);\n      }\n      onBlur?.(e);\n    },\n    [mode, current, format, onBlur],\n  );\n\n  // Mirror the input's current value into the Calendar so it highlights what\n  // the user has selected. Range mode parses two halves; single mode parses one.\n  // In single mode we set `end = start` (same-day \"range\") so Calendar's click\n  // logic sees a *committed* selection, not an in-flight first-click. Otherwise\n  // the next click would be treated as the second click of a range — exactly\n  // the bug where switching back to single still drew range styling.\n  const calendarValue: CalendarValue = (() => {\n    if (mode === 'range') return parseRangeValue(current ?? '', format);\n    const date = parseDate(current ?? '', format);\n    return { start: date, end: date };\n  })();\n\n  // A consumer-supplied `error` wins; otherwise surface the internal\n  // invalid-date message. Both drive the same visual: red border,\n  // `aria-invalid`, and the message below the field.\n  const shownError = error || (invalid ? invalidDateMessage(format) : undefined);\n\n  return (\n    <>\n    <div\n      className={cn(\n        'uxm-date-input',\n        calendar && 'uxm-date-input--has-calendar',\n        clearable && 'uxm-date-input--clearable',\n        shownError && 'uxm-date-input--error',\n        className,\n      )}\n      ref={containerRef}\n      style={style}\n    >\n      <input\n        // `{...rest}` is spread FIRST so the managed props below always win —\n        // notably `aria-describedby`, which must stay linked to our error\n        // message and not be clobbered by a caller-supplied value.\n        {...rest}\n        type=\"text\"\n        inputMode=\"numeric\"\n        readOnly={mode === 'range'}\n        className=\"uxm-date-input__input\"\n        placeholder={placeholder ?? placeholderFor(format, mode)}\n        value={current}\n        onChange={handleInputChange}\n        onFocus={(e) => {\n          if (calendar) setIsOpen(true);\n          onFocus?.(e);\n        }}\n        onBlur={handleBlur}\n        aria-invalid={shownError ? true : undefined}\n        // Point at our error message while one shows AND keep any\n        // caller-supplied `aria-describedby` (e.g. unrelated help text) —\n        // both ids are announced, ours never clobbers theirs.\n        aria-describedby={[shownError && errorId, ariaDescribedBy].filter(Boolean).join(' ') || undefined}\n        disabled={disabled}\n      />\n      {showClear && (\n        <IconButton\n          className=\"uxm-field-clear uxm-date-input__clear\"\n          aria-label={clearLabel}\n          // Prevent the button from stealing focus away from whatever's\n          // currently focused — clearing must not re-open the calendar\n          // popover via the input's onFocus handler.\n          onMouseDown={(e) => e.preventDefault()}\n          onClick={handleClear}\n        >\n          <Icon glyph=\"close\" />\n        </IconButton>\n      )}\n      {calendar && (\n        <button\n          type=\"button\"\n          className=\"uxm-date-input__icon\"\n          onClick={() => setIsOpen((o) => !o)}\n          aria-label={openCalendarLabel}\n          aria-expanded={isOpen}\n          disabled={disabled}\n        >\n          <Icon glyph=\"calendar\" />\n        </button>\n      )}\n      {calendar && isOpen && (\n        <div className=\"uxm-date-input__popover\" role=\"dialog\" aria-label={calendarDialogLabel}>\n          {/* Swallow mousedown so a calendar click never blurs the input: blur\n              now runs validation (handleBlur), and a partially-typed value\n              would flash the error state for a frame before the pick lands.\n              Focus-retention only — the interactive controls are the\n              Calendar's own buttons. */}\n          {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions -- mousedown swallow for focus retention only; nothing interactive lives on this div */}\n          <div onMouseDown={(e) => e.preventDefault()}>\n            <Calendar value={calendarValue} onChange={handleCalendarChange} />\n          </div>\n        </div>\n      )}\n    </div>\n    {shownError && (\n      <FieldError id={errorId} className=\"uxm-date-input__error-message\">{shownError}</FieldError>\n    )}\n    </>\n  );\n}\n// Static marker so FormField only forwards its `error` prop into children\n// that accept one (avoids React unknown-prop warnings on non-input children).\nDateInput.hasError = true;\n"],"mappings":"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","names":[]}

package/dist/ui/date-input/index.cjs

@@ -0,0 +1,23 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var date_input_exports = {};
+module.exports = __toCommonJS(date_input_exports);
+__reExport(date_input_exports, require("./date-input.cjs"), module.exports);
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ...require("./date-input.cjs")
+});
+//# sourceMappingURL=index.cjs.map

package/dist/ui/date-input/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/date-input/index.ts"],"sourcesContent":["export * from './date-input';\n"],"mappings":";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,yBAAd;","names":[]}

package/dist/ui/date-input/index.d.ts

@@ -0,0 +1,2 @@
+export * from './date-input.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/date-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/date-input/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC"}

package/dist/ui/date-input/index.js

@@ -0,0 +1,2 @@
+export * from "./date-input.js";
+//# sourceMappingURL=index.js.map

package/dist/ui/date-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/date-input/index.ts"],"sourcesContent":["export * from './date-input';\n"],"mappings":"AAAA,cAAc;","names":[]}

package/dist/ui/detail-section/detail-section-preview.cjs

@@ -0,0 +1,56 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var detail_section_preview_exports = {};
+__export(detail_section_preview_exports, {
+  DetailSectionPreview: () => DetailSectionPreview
+});
+module.exports = __toCommonJS(detail_section_preview_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_ui = require("../../ui/index.cjs");
+var import_ui2 = require("../../ui/index.cjs");
+function DetailSectionPreview({ styles }) {
+  const cssVars = {
+    "--uxm-detail-section-bg": styles.backgroundColor,
+    "--uxm-detail-section-border-color": styles.borderColor,
+    "--uxm-detail-section-radius": `${styles.borderRadius}px`,
+    "--uxm-detail-section-padding": `${styles.padding}px`,
+    "--uxm-detail-section-icon-bg": styles.iconBg,
+    "--uxm-detail-section-icon-color": styles.iconColor,
+    "--uxm-detail-section-title-size": `${styles.titleSize}px`,
+    "--uxm-detail-section-subtitle-color": styles.subtitleColor,
+    "--uxm-detail-section-accent-width": `${styles.accentWidth}px`,
+    "--uxm-detail-section-accent-color": styles.accentColor,
+    width: 420
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    import_ui.DetailSection,
+    {
+      style: cssVars,
+      icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ui2.Icon, { glyph: "menu", size: 18, strokeWidth: 1.5 }),
+      title: "Revenue Motions",
+      subtitle: "3 active configurations",
+      children: "Defines how revenue is recognised across the customer lifecycle."
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DetailSectionPreview
+});
+//# sourceMappingURL=detail-section-preview.cjs.map

package/dist/ui/detail-section/detail-section-preview.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/ui/detail-section/detail-section-preview.tsx"],"sourcesContent":["import type { PreviewProps } from '@/previews/types';\nimport { DetailSection } from '@/ui';\nimport { Icon } from '@/ui';\n\nimport type { CSSProperties } from 'react';\n\nexport function DetailSectionPreview({ styles }: PreviewProps) {\n  // Each registry knob → matching CSS custom property; the preview consumes\n  // the real component instead of reimplementing it inline.\n  const cssVars = {\n    '--uxm-detail-section-bg': styles.backgroundColor as string,\n    '--uxm-detail-section-border-color': styles.borderColor as string,\n    '--uxm-detail-section-radius': `${styles.borderRadius}px`,\n    '--uxm-detail-section-padding': `${styles.padding}px`,\n    '--uxm-detail-section-icon-bg': styles.iconBg as string,\n    '--uxm-detail-section-icon-color': styles.iconColor as string,\n    '--uxm-detail-section-title-size': `${styles.titleSize}px`,\n    '--uxm-detail-section-subtitle-color': styles.subtitleColor as string,\n    '--uxm-detail-section-accent-width': `${styles.accentWidth}px`,\n    '--uxm-detail-section-accent-color': styles.accentColor as string,\n    width: 420,\n  } as CSSProperties;\n\n  return (\n    <DetailSection\n      style={cssVars}\n      icon={<Icon glyph=\"menu\" size={18} strokeWidth={1.5} />}\n      title=\"Revenue Motions\"\n      subtitle=\"3 active configurations\"\n    >\n      Defines how revenue is recognised across the customer lifecycle.\n    </DetailSection>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AA0BY;AAzBZ,gBAA8B;AAC9B,IAAAA,aAAqB;AAId,SAAS,qBAAqB,EAAE,OAAO,GAAiB;AAG7D,QAAM,UAAU;AAAA,IACd,2BAA2B,OAAO;AAAA,IAClC,qCAAqC,OAAO;AAAA,IAC5C,+BAA+B,GAAG,OAAO,YAAY;AAAA,IACrD,gCAAgC,GAAG,OAAO,OAAO;AAAA,IACjD,gCAAgC,OAAO;AAAA,IACvC,mCAAmC,OAAO;AAAA,IAC1C,mCAAmC,GAAG,OAAO,SAAS;AAAA,IACtD,uCAAuC,OAAO;AAAA,IAC9C,qCAAqC,GAAG,OAAO,WAAW;AAAA,IAC1D,qCAAqC,OAAO;AAAA,IAC5C,OAAO;AAAA,EACT;AAEA,SACE;AAAA,IAAC;AAAA;AAAA,MACC,OAAO;AAAA,MACP,MAAM,4CAAC,mBAAK,OAAM,QAAO,MAAM,IAAI,aAAa,KAAK;AAAA,MACrD,OAAM;AAAA,MACN,UAAS;AAAA,MACV;AAAA;AAAA,EAED;AAEJ;","names":["import_ui"]}

package/dist/ui/detail-section/detail-section-preview.d.ts

@@ -0,0 +1,3 @@
+import type { PreviewProps } from '../../previews/types.js';
+export declare function DetailSectionPreview({ styles }: PreviewProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=detail-section-preview.d.ts.map

package/dist/ui/detail-section/detail-section-preview.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"detail-section-preview.d.ts","sourceRoot":"","sources":["../../../src/ui/detail-section/detail-section-preview.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAMrD,wBAAgB,oBAAoB,CAAC,EAAE,MAAM,EAAE,EAAE,YAAY,2CA2B5D"}