@astryxdesign/core 0.1.9 → 0.2.0-canary.136a00f

package/dist/TimeInput/TimeInput.d.ts

@@ -1,5 +1,5 @@
 import * as stylex from '@stylexjs/stylex';
-import { type InputStatus } from '../Field';
+import { type InputStatus, type FieldStatusVariant } from '../Field';
 import { type ISOTimeString } from '../utils';
 import type { BaseProps } from '../BaseProps';
 import type { SizeValue } from '../utils/types';
@@ -144,6 +144,14 @@ export interface TimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
      * If message is provided, displays below the input.
      */
     status?: InputStatus;
+    /**
+     * How the status message is placed relative to the input.
+     * - 'attached': message overlaps directly below the input (bordered treatment)
+     * - 'detached': message floats below as a separate element with spacing
+     * - 'tooltip': no message box; the status icon becomes a focusable info-tip button that reveals the message on hover, keyboard focus, or tap
+     * @default 'attached'
+     */
+    statusVariant?: FieldStatusVariant;
     /**
      * Width of the field. Numbers are treated as pixels, strings are used as-is
      * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
@@ -169,7 +177,7 @@ export interface TimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
  * />
  * ```
  */
-export declare function TimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, hasSeconds, hasClear, hasAutoFocus, hourFormat, increment, placeholder: placeholderFromProps, size: sizeProp, status, labelTooltip, width, xstyle, className, style, ref, }: TimeInputProps): import("react").JSX.Element;
+export declare function TimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, disabledMessage, value, onChange, changeAction, isLoading, min, max, hasSeconds, hasClear, hasAutoFocus, hourFormat, increment, placeholder: placeholderFromProps, size: sizeProp, status, statusVariant, labelTooltip, width, xstyle, className, style, ref, }: TimeInputProps): import("react").JSX.Element;
 export declare namespace TimeInput {
     var displayName: string;
 }

package/dist/TimeInput/TimeInput.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAIlB,OAAO,EACL,KAAK,aAAa,EAUnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA8D9C,QAAA,MAAM,UAAU;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,KAAK,CAAC;AAIhD,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,QAAgB,EAChB,YAAoB,EACpB,UAAkB,EAClB,SAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,cAAc,+BAsXhB;yBAlZe,SAAS"}
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"AA8BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAS3C,OAAO,EAEL,KAAK,WAAW,EAKhB,KAAK,kBAAkB,EACxB,MAAM,UAAU,CAAC;AAIlB,OAAO,EACL,KAAK,aAAa,EAUnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AA+D9C,QAAA,MAAM,UAAU;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAEpD,MAAM,MAAM,mBAAmB,GAAG,KAAK,GAAG,KAAK,CAAC;AAIhD,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;;;;;;;;;;;;;;;;;;OAoBG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,mBAAmB,CAAC;IAEjC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;;;;OAMG;IACH,aAAa,CAAC,EAAE,kBAAkB,CAAC;IAEnC;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,eAAe,EACf,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,QAAgB,EAChB,YAAoB,EACpB,UAAkB,EAClB,SAAa,EACb,WAAW,EAAE,oBAAoB,EACjC,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,aAA0B,EAC1B,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,cAAc,+BA4WhB;yBAzYe,SAAS"}

package/dist/TimeInput/TimeInput.js

@@ -27,6 +27,7 @@ import { parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTi
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useAnnounce } from "../hooks/useAnnounce.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
+import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { groupStyles } from "../InputGroup/groupStyles.js";
 import { useTooltip } from "../Tooltip/index.js";
@@ -89,6 +90,7 @@ export function TimeInput({
   placeholder: placeholderFromProps,
   size: sizeProp,
   status,
+  statusVariant = 'attached',
   labelTooltip,
   width,
   xstyle,
@@ -136,20 +138,21 @@ export function TimeInput({
   });
 
   // Status icon mapping
-  const statusIconMap = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success'
-  };
-  const statusIconColorMap = {
-    warning: 'warning',
-    error: 'error',
-    success: 'success'
-  };
+  const {
+    statusIcon,
+    describedBy: statusTooltipDescribedBy
+  } = useInputStatusIcon({
+    status,
+    statusVariant,
+    isInGroup: !!inputGroup
+  });
   const {
     ariaLabelledBy,
     ariaDescribedBy
-  } = getInputARIA(inputLabelID, [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+  } = getInputARIA(inputLabelID, [description ? descriptionID : null, statusVariant !== 'tooltip' && status?.message ? statusMessageID : null,
+  // The tooltip variant renders no message box; describe the input by the
+  // tooltip's content instead so the status is still announced.
+  statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
 
   // Pending input while user is typing (null = show formatted value)
   const [pendingInput, setPendingInput] = useState(null);
@@ -310,7 +313,7 @@ export function TimeInput({
     ...mergeProps(themeProps('time-input', {
       size,
       status: status?.type ?? null
-    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
+    }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && !isDisabled && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], inputGroup && groupStyles.inGroup, xstyle), className, style),
     children: [/*#__PURE__*/_jsx("div", {
       ...{
         className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
@@ -390,11 +393,7 @@ export function TimeInput({
         size: "sm",
         color: "secondary"
       })
-    }), status && !inputGroup && /*#__PURE__*/_jsx(Icon, {
-      icon: statusIconMap[status.type],
-      size: "md",
-      color: statusIconColorMap[status.type]
-    })]
+    }), statusIcon]
   });
   if (inputGroup) {
     return /*#__PURE__*/_jsxs(_Fragment, {
@@ -415,6 +414,7 @@ export function TimeInput({
       message: status.message,
       messageID: status.message ? statusMessageID : undefined
     } : undefined,
+    statusVariant: statusVariant,
     labelTooltip: labelTooltip,
     width: width,
     children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]

package/dist/Timestamp/Timestamp.d.ts

@@ -1,5 +1,6 @@
 import type { TextType, TextSize, TextColor, TextWeight } from '../theme/types';
 import type { BaseProps } from '../BaseProps';
+import type { TimestampTooltipEntry } from './tooltipEntries';
 export type TimestampFormat = 'relative' | 'auto' | 'date' | 'date_long' | 'date_weekday' | 'date_time' | 'time' | 'system_date' | 'system_date_time' | 'system_time';
 export interface TimestampProps extends BaseProps<HTMLTimeElement> {
     /** Ref forwarded to the root `<time>` element. */
@@ -32,8 +33,35 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
      */
     hasTooltip?: boolean;
     /**
-     * Whether to append the timezone abbreviation after the timestamp.
-     * Applies to date_time, time, system_date_time, and system_time formats.
+     * Lines to show in the hover tooltip, so one instant can be read in several
+     * time zones and/or formats at once. Each entry is one line, rendered in the
+     * order given, with an optional label.
+     *
+     * Configuring entries also attaches the tooltip to absolute formats, which
+     * otherwise have no tooltip at all. `hasTooltip={false}` still suppresses it,
+     * and an empty array is treated as no configuration.
+     *
+     * @default undefined — a single line with the full absolute time in the
+     *   viewer's own time zone
+     * @example
+     * ```
+     * <Timestamp
+     *   value={savedAt}
+     *   tooltipEntries={[
+     *     {label: 'Your time'},
+     *     {timezoneID: 'UTC', label: 'UTC'},
+     *   ]}
+     * />
+     * ```
+     */
+    tooltipEntries?: ReadonlyArray<TimestampTooltipEntry>;
+    /**
+     * Whether to append the timezone abbreviation after the timestamp text.
+     * Applies to the date_time and time formats. The system_* formats stay
+     * machine-readable and never carry a timezone abbreviation.
+     *
+     * Affects the visible text only — use `tooltipEntries` to control the
+     * tooltip's time zones.
      * @default false
      */
     isTimezoneShown?: boolean;
@@ -79,7 +107,7 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
  * <Timestamp value={event.timestamp} format="system_date_time" />
  * ```
  */
-export declare function Timestamp({ value, format, autoThreshold, hasTooltip, isTimezoneShown, isLive, type, size, color, weight, xstyle, className, style, ref, 'data-testid': testId, }: TimestampProps): import("react").JSX.Element | null;
+export declare function Timestamp({ value, format, autoThreshold, hasTooltip, tooltipEntries, isTimezoneShown, isLive, type, size, color, weight, xstyle, className, style, ref, 'data-testid': testId, }: TimestampProps): import("react").JSX.Element | null;
 export declare namespace Timestamp {
     var displayName: string;
 }

package/dist/Timestamp/Timestamp.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAG9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAa5C,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;OAIG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAqPD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,GACtB,EAAE,cAAc,sCA6GhB;yBA7He,SAAS"}
+{"version":3,"file":"Timestamp.d.ts","sourceRoot":"","sources":["../../src/Timestamp/Timestamp.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,QAAQ,EAAE,QAAQ,EAAE,SAAS,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAG9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAK5C,OAAO,KAAK,EAAC,qBAAqB,EAAC,MAAM,kBAAkB,CAAC;AAU5D,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,MAAM,GACN,MAAM,GACN,WAAW,GACX,cAAc,GACd,WAAW,GACX,MAAM,GACN,aAAa,GACb,kBAAkB,GAClB,aAAa,CAAC;AAElB,MAAM,WAAW,cAAe,SAAQ,SAAS,CAAC,eAAe,CAAC;IAChE,kDAAkD;IAClD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC,uFAAuF;IACvF,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB;;;;;;;;;;;;;OAaG;IACH,MAAM,CAAC,EAAE,eAAe,CAAC;IACzB;;;OAGG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;;;;;;;;;;;;;;;;;;;OAqBG;IACH,cAAc,CAAC,EAAE,aAAa,CAAC,qBAAqB,CAAC,CAAC;IACtD;;;;;;;;OAQG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;OAEG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,MAAM,CAAC,EAAE,UAAU,CAAC;IACpB,sCAAsC;IACtC,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AA2LD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,MAAe,EACf,aAAsC,EACtC,UAAiB,EACjB,cAAc,EACd,eAAuB,EACvB,MAAc,EACd,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,aAAa,EAAE,MAAM,GACtB,EAAE,cAAc,sCA4IhB;yBA7Je,SAAS"}

package/dist/Timestamp/Timestamp.js

@@ -15,16 +15,17 @@
  * - /apps/storybook/stories/Timestamp.stories.tsx
  * - /packages/cli/templates/blocks/components/Timestamp/ (showcase blocks)
  */
-import { useEffect, useRef, useState, lazy, Suspense } from 'react';
+import { useEffect, useRef, useState, lazy, Suspense, Fragment } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import { Text } from "../Text/index.js";
 import { mergeProps, mergeRefs } from "../utils/index.js";
 import { useDevWarning } from "../hooks/useDevWarning.js";
 import { themeProps } from "../utils/themeProps.js";
 import "../theme/tokens.stylex.js";
-import { colorVars } from "../theme/tokens.stylex.js";
-import { SHARED_DATE_FORMAT_OPTIONS } from "../utils/plainDate.js";
-import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { colorVars, spacingVars } from "../theme/tokens.stylex.js";
+import { formatInstant } from "./formatInstant.js";
+import { formatTooltipLines } from "./tooltipEntries.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 const LazyXDSTooltip = /*#__PURE__*/lazy(async () => import('../Tooltip/Tooltip').then(mod => ({
   default: mod.Tooltip
 })));
@@ -137,73 +138,6 @@ function getRelativeTimeString(date, now) {
   const years = Math.floor(diffSeconds / YEAR);
   return `${years} ${years === 1 ? 'year' : 'years'} ago`;
 }
-function pad(n) {
-  return String(n).padStart(2, '0');
-}
-function formatTimestamp(date, format, isTimezoneShown) {
-  switch (format) {
-    case 'date':
-      return new Intl.DateTimeFormat(undefined, SHARED_DATE_FORMAT_OPTIONS.date).format(date);
-    case 'date_long':
-      return new Intl.DateTimeFormat(undefined, SHARED_DATE_FORMAT_OPTIONS.date_long).format(date);
-    case 'date_weekday':
-      return new Intl.DateTimeFormat(undefined, SHARED_DATE_FORMAT_OPTIONS.date_weekday).format(date);
-    case 'date_time':
-      return new Intl.DateTimeFormat(undefined, {
-        year: 'numeric',
-        month: 'short',
-        day: 'numeric',
-        hour: 'numeric',
-        minute: '2-digit',
-        ...(isTimezoneShown ? {
-          timeZoneName: 'short'
-        } : {})
-      }).format(date);
-    case 'time':
-      return new Intl.DateTimeFormat(undefined, {
-        hour: 'numeric',
-        minute: '2-digit',
-        ...(isTimezoneShown ? {
-          timeZoneName: 'short'
-        } : {})
-      }).format(date);
-    case 'system_date':
-      {
-        const y = date.getFullYear();
-        const m = pad(date.getMonth() + 1);
-        const d = pad(date.getDate());
-        return `${y}-${m}-${d}`;
-      }
-    case 'system_date_time':
-      {
-        const y = date.getFullYear();
-        const m = pad(date.getMonth() + 1);
-        const d = pad(date.getDate());
-        const h = pad(date.getHours());
-        const min = pad(date.getMinutes());
-        const s = pad(date.getSeconds());
-        return `${y}-${m}-${d} ${h}:${min}:${s}`;
-      }
-    case 'system_time':
-      {
-        const h = pad(date.getHours());
-        const min = pad(date.getMinutes());
-        const s = pad(date.getSeconds());
-        return `${h}:${min}:${s}`;
-      }
-  }
-}
-function getFullAbsoluteString(date) {
-  return new Intl.DateTimeFormat(undefined, {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric',
-    hour: 'numeric',
-    minute: '2-digit',
-    second: '2-digit',
-    timeZoneName: 'short'
-  }).format(date);
-}
 
 /** Returns the interval (in ms) at which a relative timestamp should update. */
 function getLiveInterval(diffSeconds) {
@@ -250,6 +184,7 @@ export function Timestamp({
   format = 'auto',
   autoThreshold = DEFAULT_AUTO_THRESHOLD,
   hasTooltip = true,
+  tooltipEntries,
   isTimezoneShown = false,
   isLive = false,
   type = 'supporting',
@@ -276,11 +211,14 @@ export function Timestamp({
   const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
   const effectiveFormat = format === 'auto' ? Math.abs(diffSeconds) <= autoThreshold ? 'relative' : 'date_time' : format;
 
-  // Format the display text
-  const displayText = !isValidDate ? '' : effectiveFormat === 'relative' ? getRelativeTimeString(date, now) : isAbsoluteFormat(effectiveFormat) ? formatTimestamp(date, effectiveFormat, isTimezoneShown) : '';
+  // Format the display text. No time zone is passed: the visible text always
+  // reads in the viewer's own zone, and only the tooltip names others.
+  const displayText = !isValidDate ? '' : effectiveFormat === 'relative' ? getRelativeTimeString(date, now) : isAbsoluteFormat(effectiveFormat) ? formatInstant(date, effectiveFormat, {
+    isTimezoneShown
+  }) : '';
 
   // Full absolute text for tooltip and aria-label
-  const fullAbsoluteText = isValidDate ? getFullAbsoluteString(date) : '';
+  const fullAbsoluteText = isValidDate ? formatInstant(date, 'full') : '';
 
   // Live updates
   useEffect(() => {
@@ -299,7 +237,16 @@ export function Timestamp({
   if (!isValidDate) {
     return null;
   }
-  const showTooltip = hasTooltip && effectiveFormat === 'relative';
+
+  // An empty array is not a second way to spell "off" — `hasTooltip` stays the
+  // only on/off axis — so normalize it away before anything reads it.
+  const entries = tooltipEntries !== undefined && tooltipEntries.length > 0 ? tooltipEntries : undefined;
+
+  // Absolute formats have never carried a tooltip. Leaving that gate closed
+  // when a consumer has explicitly configured tooltip lines would let `format`
+  // silently suppress another prop's output, so entry presence opens it too.
+  // With no entries this reduces to the original condition exactly.
+  const showTooltip = hasTooltip && (effectiveFormat === 'relative' || entries !== undefined);
   const timestampProps = mergeProps(themeProps('timestamp', {
     format: effectiveFormat
   }), {
@@ -338,12 +285,36 @@ export function Timestamp({
     })
   });
   if (showTooltip) {
+    // Built inside the branch so a timestamp without a tooltip allocates none
+    // of it. With no entries the content stays the bare string it has always
+    // been — no wrapper element is introduced around the default line.
+    const tooltipContent = entries === undefined ? fullAbsoluteText : /*#__PURE__*/_jsx("dl", {
+      ...{
+        className: "xrvj5dj x1pmbctz x1tw44j4 x10im51j xrxpjvj"
+      },
+      children: formatTooltipLines(date, entries).map((line, index) =>
+      /*#__PURE__*/
+      // eslint-disable-next-line @eslint-react/no-array-index-key -- tooltip lines are fixed positional slots and two entries may legitimately be identical
+      _jsxs(Fragment, {
+        children: [/*#__PURE__*/_jsx("dt", {
+          ...{
+            className: "x10im51j xrxpjvj xyri2b xepvkrk"
+          },
+          children: line.label ?? ''
+        }), /*#__PURE__*/_jsx("dd", {
+          ...{
+            className: "x10im51j xrxpjvj"
+          },
+          children: line.value
+        })]
+      }, index))
+    });
     return /*#__PURE__*/_jsxs(_Fragment, {
       children: [timeElement, /*#__PURE__*/_jsx(Suspense, {
         fallback: null,
         children: /*#__PURE__*/_jsx(LazyXDSTooltip, {
           anchorRef: timeRef,
-          content: fullAbsoluteText,
+          content: tooltipContent,
           placement: "above"
         })
       })]

package/dist/Timestamp/formatInstant.d.ts

@@ -0,0 +1,41 @@
+import type { TimestampFormat } from './Timestamp';
+/**
+ * Every format that names a fixed instant, plus `'full'` — the long absolute
+ * style ("February 19, 2026 at 5:00:00 PM UTC") that backs a relative
+ * timestamp's accessible name and the tooltip's default line.
+ *
+ * `'relative'` and `'auto'` are excluded: a relative phrase names no instant,
+ * so a zone could not change what it says.
+ */
+export type InstantFormat = Exclude<TimestampFormat, 'relative' | 'auto'> | 'full';
+export interface FormatInstantOptions {
+    /**
+     * IANA time zone identifier. Omit for the viewer's own zone — which is what
+     * `Intl` already does with no `timeZone`, so the omitted path never
+     * constructs an explicit-zone formatter and cannot drift from the host
+     * default.
+     *
+     * Must already be one the platform accepts. An identifier `Intl` does not
+     * recognize throws a `RangeError` from its constructor, before any
+     * formatting happens; deciding what to do about that belongs to whoever
+     * took the identifier from a consumer, not here (tooltipEntries resolves
+     * and warns in `resolveTimezoneID`, then passes only what survived).
+     */
+    timeZone?: string;
+    /**
+     * Whether to append the zone abbreviation. Honoured by `date_time` and
+     * `time` only: `'full'` always carries one because that is the style, and
+     * the `system_*` shapes never do — a trailing "PST" would break anything
+     * parsing them, which is why `isTimezoneShown` has never applied to them.
+     * @default false
+     */
+    isTimezoneShown?: boolean;
+}
+/**
+ * Renders one instant in one absolute format.
+ *
+ * Pure: the same arguments always produce the same string for a given host
+ * locale (and, when no `timeZone` is given, host zone).
+ */
+export declare function formatInstant(date: Date, format: InstantFormat, { timeZone, isTimezoneShown }?: FormatInstantOptions): string;
+//# sourceMappingURL=formatInstant.d.ts.map

package/dist/Timestamp/formatInstant.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"formatInstant.d.ts","sourceRoot":"","sources":["../../src/Timestamp/formatInstant.ts"],"names":[],"mappings":"AAgCA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,aAAa,CAAC;AAMjD;;;;;;;GAOG;AACH,MAAM,MAAM,aAAa,GACrB,OAAO,CAAC,eAAe,EAAE,UAAU,GAAG,MAAM,CAAC,GAC7C,MAAM,CAAC;AAEX,MAAM,WAAW,oBAAoB;IACnC;;;;;;;;;;;OAWG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;OAMG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B;AA6ED;;;;;GAKG;AACH,wBAAgB,aAAa,CAC3B,IAAI,EAAE,IAAI,EACV,MAAM,EAAE,aAAa,EACrB,EAAC,QAAQ,EAAE,eAAuB,EAAC,GAAE,oBAAyB,GAC7D,MAAM,CA0DR"}

package/dist/Timestamp/formatInstant.js

@@ -0,0 +1,177 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file formatInstant.ts
+ * @input A Date, one absolute format name, and an optional time zone
+ * @output That instant rendered as a string
+ * @position Leaf shared by Timestamp's visible text and each of its tooltip
+ *   lines; owns every absolute format Timestamp can produce
+ *
+ * Timestamp renders the same instant on two surfaces — the visible text and,
+ * on hover, one line per configured time zone. They differ only in which zone
+ * they name and whether they carry a zone abbreviation, so they are one
+ * formatter parameterized by zone rather than two switches that have to be
+ * kept in step by hand. Adding a member to `TimestampFormat` now fails to
+ * compile in exactly one place.
+ *
+ * Each caller keeps its own policy for the zone abbreviation: the visible text
+ * takes it straight from the `isTimezoneShown` prop, a tooltip line derives it
+ * from how many zones are on screen (see tooltipEntries.ts). Only the
+ * rendering is shared, not the decision.
+ *
+ * Omitting `timeZone` means the viewer's own zone. That path hands `Intl` no
+ * `timeZone` and keeps `system_*` on plain `Date` getters, so it produces
+ * exactly what it produced before this module existed.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Timestamp/Timestamp.tsx
+ * - /packages/core/src/Timestamp/tooltipEntries.ts
+ * - /packages/core/src/Timestamp/Timestamp.test.tsx
+ */
+
+import { SHARED_DATE_FORMAT_OPTIONS, getTimeZoneParts } from "../utils/plainDate.js";
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Every format that names a fixed instant, plus `'full'` — the long absolute
+ * style ("February 19, 2026 at 5:00:00 PM UTC") that backs a relative
+ * timestamp's accessible name and the tooltip's default line.
+ *
+ * `'relative'` and `'auto'` are excluded: a relative phrase names no instant,
+ * so a zone could not change what it says.
+ */
+
+// =============================================================================
+// Option bags
+// =============================================================================
+
+/** The long absolute style, with seconds and a zone name. */
+const FULL_OPTIONS = {
+  year: 'numeric',
+  month: 'long',
+  day: 'numeric',
+  hour: 'numeric',
+  minute: '2-digit',
+  second: '2-digit',
+  timeZoneName: 'short'
+};
+
+/** The time-of-day part, shared by `time` and `date_time`. */
+const TIME_OPTIONS = {
+  hour: 'numeric',
+  minute: '2-digit'
+};
+
+/**
+ * The date part here is spelled out rather than taken from
+ * `SHARED_DATE_FORMAT_OPTIONS.date`. That bag is shared with DateInput, and
+ * pointing `date_time` at it would mean a change made for date-only fields
+ * silently reshaped every date-and-time reading too. The two agree today; they
+ * are not the same decision.
+ */
+const DATE_TIME_OPTIONS = {
+  year: 'numeric',
+  month: 'short',
+  day: 'numeric',
+  ...TIME_OPTIONS
+};
+
+// =============================================================================
+// Formatting
+// =============================================================================
+
+function pad(n) {
+  return String(n).padStart(2, '0');
+}
+
+/** The fields a `system_*` string is assembled from. */
+
+/**
+ * Wall-clock fields for an instant: in the named zone, or — with no zone —
+ * the viewer's own, read straight off the `Date`. The zone-less branch
+ * deliberately stays on plain getters so the default rendering never gains a
+ * dependency on `Intl` zone data it did not have before.
+ *
+ * The explicit return type is load-bearing: it is what forces the two branches
+ * to keep producing the same shape.
+ */
+function getWallClock(date, timeZone) {
+  return timeZone === undefined ? {
+    year: date.getFullYear(),
+    month: date.getMonth() + 1,
+    day: date.getDate(),
+    hour: date.getHours(),
+    minute: date.getMinutes(),
+    second: date.getSeconds()
+  } : getTimeZoneParts(date.getTime(), timeZone);
+}
+
+/**
+ * Renders one instant in one absolute format.
+ *
+ * Pure: the same arguments always produce the same string for a given host
+ * locale (and, when no `timeZone` is given, host zone).
+ */
+export function formatInstant(date, format, {
+  timeZone,
+  isTimezoneShown = false
+} = {}) {
+  const zone = timeZone === undefined ? {} : {
+    timeZone
+  };
+  const zoneName = isTimezoneShown ? {
+    timeZoneName: 'short'
+  } : {};
+  switch (format) {
+    case 'full':
+      return new Intl.DateTimeFormat(undefined, {
+        ...FULL_OPTIONS,
+        ...zone
+      }).format(date);
+    case 'date':
+      return new Intl.DateTimeFormat(undefined, {
+        ...SHARED_DATE_FORMAT_OPTIONS.date,
+        ...zone
+      }).format(date);
+    case 'date_long':
+      return new Intl.DateTimeFormat(undefined, {
+        ...SHARED_DATE_FORMAT_OPTIONS.date_long,
+        ...zone
+      }).format(date);
+    case 'date_weekday':
+      return new Intl.DateTimeFormat(undefined, {
+        ...SHARED_DATE_FORMAT_OPTIONS.date_weekday,
+        ...zone
+      }).format(date);
+    case 'date_time':
+      return new Intl.DateTimeFormat(undefined, {
+        ...DATE_TIME_OPTIONS,
+        ...zoneName,
+        ...zone
+      }).format(date);
+    case 'time':
+      return new Intl.DateTimeFormat(undefined, {
+        ...TIME_OPTIONS,
+        ...zoneName,
+        ...zone
+      }).format(date);
+    case 'system_date':
+      {
+        const w = getWallClock(date, timeZone);
+        return `${w.year}-${pad(w.month)}-${pad(w.day)}`;
+      }
+    case 'system_date_time':
+      {
+        const w = getWallClock(date, timeZone);
+        return `${w.year}-${pad(w.month)}-${pad(w.day)} ${pad(w.hour)}:${pad(w.minute)}:${pad(w.second)}`;
+      }
+    case 'system_time':
+      {
+        const w = getWallClock(date, timeZone);
+        return `${pad(w.hour)}:${pad(w.minute)}:${pad(w.second)}`;
+      }
+  }
+}

package/dist/Timestamp/index.d.ts

@@ -8,4 +8,5 @@
  */
 export { Timestamp } from './Timestamp';
 export type { TimestampProps, TimestampFormat } from './Timestamp';
+export type { TimestampTooltipEntry, TimestampTooltipFormat, } from './tooltipEntries';
 //# sourceMappingURL=index.d.ts.map

package/dist/Timestamp/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Timestamp/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EAAC,cAAc,EAAE,eAAe,EAAC,MAAM,aAAa,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Timestamp/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EAAC,cAAc,EAAE,eAAe,EAAC,MAAM,aAAa,CAAC;AACjE,YAAY,EACV,qBAAqB,EACrB,sBAAsB,GACvB,MAAM,kBAAkB,CAAC"}

package/dist/Timestamp/tooltipEntries.d.ts

@@ -0,0 +1,56 @@
+import type { InstantFormat } from './formatInstant';
+/**
+ * Formats available to a tooltip line.
+ *
+ * Every `TimestampFormat` that names a fixed instant, plus `'full'` — the long
+ * absolute style the tooltip has always shown ("February 19, 2026 at 5:00:00 PM
+ * UTC"). `'relative'` and `'auto'` are excluded: a relative phrase ignores any
+ * zone, which would make `timezoneID` silently inert on that line.
+ *
+ * `'full'` lives only in this vocabulary, never in `TimestampFormat` — nothing
+ * asked for it as a visible display format, and keeping it out means new
+ * members added to `TimestampFormat` become valid tooltip formats for free.
+ *
+ * The public spelling of {@link InstantFormat}: consumers reading Timestamp's
+ * props should not have to know the name of its internal formatter.
+ */
+export type TimestampTooltipFormat = InstantFormat;
+/** One line of the Timestamp tooltip. */
+export interface TimestampTooltipEntry {
+    /**
+     * IANA time zone identifier, e.g. `'UTC'`, `'America/Los_Angeles'`.
+     * Omit it — or pass `'local'` — for the viewer's own zone.
+     *
+     * Prefer region identifiers. Fixed-offset abbreviations such as `'EST'` are
+     * accepted by the platform but never observe daylight saving, so they read
+     * an hour wrong for half the year — `'America/New_York'` is what people
+     * usually mean by "Eastern".
+     *
+     * An identifier the platform does not recognize falls back to the viewer's
+     * zone with a console warning rather than throwing.
+     */
+    timezoneID?: string;
+    /**
+     * How this line renders the instant.
+     * @default 'full'
+     */
+    format?: TimestampTooltipFormat;
+    /**
+     * Text shown beside the time, e.g. `'Local'`, `'UTC'`, `'Pacific'`.
+     * Supplied already translated; Timestamp never invents or localizes labels.
+     */
+    label?: string;
+}
+/** A rendered tooltip line. */
+export interface TimestampTooltipLine {
+    label?: string;
+    value: string;
+}
+/**
+ * Renders one tooltip line per entry, in the order given.
+ *
+ * Pure: the same `date` and `entries` always produce the same lines for a given
+ * host zone and locale.
+ */
+export declare function formatTooltipLines(date: Date, entries: ReadonlyArray<TimestampTooltipEntry>): ReadonlyArray<TimestampTooltipLine>;
+//# sourceMappingURL=tooltipEntries.d.ts.map

package/dist/Timestamp/tooltipEntries.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltipEntries.d.ts","sourceRoot":"","sources":["../../src/Timestamp/tooltipEntries.ts"],"names":[],"mappings":"AAyBA,OAAO,KAAK,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAMnD;;;;;;;;;;;;;;GAcG;AACH,MAAM,MAAM,sBAAsB,GAAG,aAAa,CAAC;AAEnD,yCAAyC;AACzC,MAAM,WAAW,qBAAqB;IACpC;;;;;;;;;;;OAWG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB;AAED,+BAA+B;AAC/B,MAAM,WAAW,oBAAoB;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,MAAM,CAAC;CACf;AAqGD;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAChC,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,aAAa,CAAC,qBAAqB,CAAC,GAC5C,aAAa,CAAC,oBAAoB,CAAC,CAoBrC"}