@astryxdesign/core 0.1.1 → 0.1.2-canary.04e71b2

package/dist/TextInput/TextInput.js

@@ -4,7 +4,7 @@
 
 /**
  * @file TextInput.tsx
- * @input Uses React, useId, ChangeEvent, Field, Icon
+ * @input Uses React, useId, ChangeEvent, Field, Icon, InputGroupContext
  * @output Exports TextInput component, TextInputProps
  * @position Core implementation; consumed by index.ts, tested by TextInput.test.tsx
  *
@@ -22,6 +22,9 @@ import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars, borderV
 import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
 import { Icon, renderIconSlot } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
+import { useTooltip } from "../Tooltip/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { getInputARIA } from "../utils/index.js";
 const sizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -45,7 +48,7 @@ import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
 import { useInputGroup } from "../InputGroup/InputGroupContext.js";
 import { themeProps } from "../utils/themeProps.js";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 /**
  * A text input component for collecting user input.
  *
@@ -63,6 +66,7 @@ export function TextInput({
   isOptional = false,
   isRequired = false,
   isDisabled = false,
+  disabledMessage,
   startIcon,
   status,
   size: sizeProp,
@@ -86,6 +90,7 @@ export function TextInput({
 }) {
   const size = useSize(sizeProp, 'md');
   const id = useId();
+  const inputLabelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
   const inputRef = useRef(null);
@@ -94,6 +99,20 @@ export function TextInput({
   const [, startTransition] = useTransition();
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
+
+  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
+  // tooltip listeners attach to the input container (which already exists) and
+  // the input stays perceivable via aria-disabled instead of the native
+  // disabled attribute. The field is made read-only so it can't be typed into,
+  // and value mutation is blocked by the isDisabled guard in handleChange.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The container div is not naturally focusable; focusin bubbles up from
+    // the input, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
   const statusIconMap = {
     warning: 'warning',
     error: 'error',
@@ -104,8 +123,17 @@ export function TextInput({
     error: 'error',
     success: 'success'
   };
-  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined;
+  const {
+    ariaLabelledBy,
+    ariaDescribedBy
+  } = getInputARIA(inputLabelID, [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
   const handleChange = e => {
+    // Value can't change while showing a disabled message (the field is
+    // read-only and non-native-disabled), but guard the handler too so the
+    // optimistic value and callbacks never fire.
+    if (isDisabled) {
+      return;
+    }
     const newValue = e.target.value;
     onChange?.(newValue, e);
     if (changeAction && !e.defaultPrevented) {
@@ -132,7 +160,13 @@ export function TextInput({
     disabled: isDisabled
   });
   const inputWrapper = /*#__PURE__*/_jsxs("div", {
-    ref: containerRef,
+    ref: el => {
+      containerRef.current = el;
+      // Anchor + hover/focus listeners for the disabled-message tooltip.
+      // Handlers are gated internally by isEnabled, and anchor names
+      // compose, so attaching unconditionally is safe.
+      disabledMessageTooltip.ref(el);
+    },
     onClick: handleWrapperClick,
     onMouseUp: handleWrapperMouseUp,
     ...mergeProps(themeProps('text-input', {
@@ -142,6 +176,9 @@ export function TextInput({
     children: [startIcon && renderIconSlot(startIcon, {
       size: 'sm',
       color: 'secondary'
+    }), inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
+      id: inputLabelID,
+      children: label
     }), /*#__PURE__*/_jsx("input", {
       ...rest,
       ref: mergeRefs(ref, inputRef),
@@ -156,15 +193,21 @@ export function TextInput({
         }
         onKeyDown?.(e);
       } : undefined,
-      placeholder: placeholder,
-      disabled: isDisabled,
+      placeholder: placeholder
+      // With a disabledMessage the input keeps focusability via aria-disabled
+      // so the reason is focus-discoverable; readOnly + the handleChange guard
+      // keep the value from changing.
+      ,
+      disabled: isDisabled && !showsDisabledMessage,
+      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+      readOnly: showsDisabledMessage || undefined,
       autoFocus: hasAutoFocus,
       "data-autofocus": hasAutoFocus || undefined,
       "aria-describedby": ariaDescribedBy,
       "aria-required": isRequired === true ? 'true' : undefined,
       "aria-invalid": status?.type === 'error' ? 'true' : undefined,
       "aria-busy": isBusy || undefined,
-      "aria-label": inputGroup ? label : undefined,
+      "aria-labelledby": ariaLabelledBy,
       ...{
         0: {
           className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
@@ -194,9 +237,11 @@ export function TextInput({
     })]
   });
   if (inputGroup) {
-    return inputWrapper;
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+    });
   }
-  return /*#__PURE__*/_jsx(Field, {
+  return /*#__PURE__*/_jsxs(Field, {
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
@@ -212,7 +257,7 @@ export function TextInput({
     } : undefined,
     labelTooltip: labelTooltip,
     width: width,
-    children: inputWrapper
+    children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 TextInput.displayName = 'TextInput';

package/dist/TimeInput/TimeInput.d.ts

@@ -51,6 +51,28 @@ export interface TimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
      * @default false
      */
     isDisabled?: boolean;
+    /**
+     * Explains why the input is disabled. When set together with
+     * `isDisabled`, the input shows a tooltip with this text on hover and
+     * keyboard focus, and the field stays focusable (via `aria-disabled`)
+     * so the reason is discoverable by keyboard and assistive technology.
+     * Typing and arrow-key adjustment stay blocked.
+     *
+     * Use this instead of wrapping a disabled input in `Tooltip` — disabled
+     * controls don't emit the pointer events an external tooltip needs.
+     *
+     * @example
+     * ```
+     * <TimeInput
+     *   label="Start time"
+     *   value={time}
+     *   onChange={setTime}
+     *   isDisabled
+     *   disabledMessage="You need the Editor role to change this"
+     * />
+     * ```
+     */
+    disabledMessage?: string;
     /**
      * The selected time in ISO format (HH:MM or HH:MM:SS).
      */
@@ -147,7 +169,7 @@ export interface TimeInputProps extends Omit<BaseProps, 'onChange' | 'defaultVal
  * />
  * ```
  */
-export declare function TimeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, value, onChange, changeAction, isLoading, min, max, hasSeconds, hasClear, hasAutoFocus, hourFormat, increment, placeholder, 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, size: sizeProp, status, 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":"AA6BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAGlB,OAAO,EACL,KAAK,aAAa,EASnB,MAAM,UAAU,CAAC;AAClB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAyD9C,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;;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,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,UAAkB,EAClB,QAAgB,EAChB,YAAoB,EACpB,UAAkB,EAClB,SAAa,EACb,WAA6B,EAC7B,IAAI,EAAE,QAAQ,EACd,MAAM,EACN,YAAY,EACZ,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,GACJ,EAAE,cAAc,+BAiRhB;yBA5Se,SAAS"}
+{"version":3,"file":"TimeInput.d.ts","sourceRoot":"","sources":["../../src/TimeInput/TimeInput.tsx"],"names":[],"mappings":"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"}

package/dist/TimeInput/TimeInput.js

@@ -25,6 +25,7 @@ import { Spinner } from "../Spinner/index.js";
 import { parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, adjustTime, isTimeInRange, mergeProps, mergeRefs } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
+import { useTooltip } from "../Tooltip/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const sizeStyles = {
@@ -68,6 +69,7 @@ export function TimeInput({
   isOptional = false,
   isRequired = false,
   isDisabled = false,
+  disabledMessage,
   value,
   onChange,
   changeAction,
@@ -99,6 +101,19 @@ export function TimeInput({
   const [optimisticValue, setOptimisticValue] = useOptimistic(value);
   const isBusy = isLoading || optimisticValue !== value;
 
+  // Disabled-reason tooltip. Disabled controls swallow pointer events, so the
+  // tooltip listeners attach to the input container (which already exists) and
+  // the input stays perceivable via aria-disabled instead of the disabled
+  // attribute. Typing is blocked with readOnly and value mutation guards.
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    // The container div is not naturally focusable; focusin bubbles up from
+    // the input, so always attach focus listeners.
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+
   // Status icon mapping
   const statusIconMap = {
     warning: 'warning',
@@ -110,7 +125,7 @@ export function TimeInput({
     error: 'error',
     success: 'success'
   };
-  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined;
+  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null, showsDisabledMessage ? disabledMessageTooltip.describedBy : null].filter(Boolean).join(' ') || undefined;
 
   // Pending input while user is typing (null = show formatted value)
   const [pendingInput, setPendingInput] = useState(null);
@@ -162,6 +177,11 @@ export function TimeInput({
 
   // Handle input text change - update immediately if valid
   const handleInputChange = useCallback(e => {
+    // With a disabledMessage the input drops `disabled` for focusability, so
+    // guard value mutation explicitly (readOnly also blocks typing).
+    if (isDisabled) {
+      return;
+    }
     const newValue = e.target.value;
     setPendingInput(newValue);
 
@@ -170,12 +190,18 @@ export function TimeInput({
     if (parsed && isTimeInRange(parsed, min, max) && parsed !== value) {
       fireChange(parsed);
     }
-  }, [hasSeconds, min, max, value, fireChange]);
+  }, [hasSeconds, min, max, value, fireChange, isDisabled]);
 
   // Handle focus
   const handleFocus = useCallback(() => {
+    // A disabled input stays focusable (via aria-disabled) so its reason is
+    // discoverable, but it must not present editing affordances — keep the
+    // static placeholder rather than swapping in the format hint.
+    if (isDisabled) {
+      return;
+    }
     setIsFocused(true);
-  }, []);
+  }, [isDisabled]);
 
   // Handle blur - validate and clear pending input
   const handleBlur = useCallback(_e => {
@@ -204,6 +230,11 @@ export function TimeInput({
 
   // Handle keyboard navigation on input
   const handleInputKeyDown = useCallback(e => {
+    // Arrow-key adjustment mutates the value; block it while showing a
+    // disabled reason (the input keeps focusability via aria-disabled).
+    if (isDisabled) {
+      return;
+    }
     if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
       e.preventDefault();
 
@@ -225,7 +256,7 @@ export function TimeInput({
         fireChange(newTime);
       }
     }
-  }, [value, hasSeconds, increment, min, max, fireChange]);
+  }, [value, hasSeconds, increment, min, max, fireChange, isDisabled]);
 
   // Handle clear button click
   const handleClear = useCallback(() => {
@@ -242,7 +273,7 @@ export function TimeInput({
     inputRef,
     disabled: isDisabled
   });
-  return /*#__PURE__*/_jsx(Field, {
+  return /*#__PURE__*/_jsxs(Field, {
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
@@ -258,8 +289,14 @@ export function TimeInput({
     } : undefined,
     labelTooltip: labelTooltip,
     width: width,
-    children: /*#__PURE__*/_jsxs("div", {
-      ref: containerRef,
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: el => {
+        containerRef.current = el;
+        // Anchor + hover/focus listeners for the disabled-message tooltip.
+        // Handlers are gated internally by isEnabled, so attaching
+        // unconditionally is safe.
+        disabledMessageTooltip.ref(el);
+      },
       onClick: handleWrapperClick,
       onMouseUp: handleWrapperMouseUp,
       ...mergeProps(themeProps('time-input', {
@@ -284,8 +321,14 @@ export function TimeInput({
         onFocus: handleFocus,
         onBlur: handleBlur,
         onKeyDown: handleInputKeyDown,
-        placeholder: displayPlaceholder,
-        disabled: isDisabled,
+        placeholder: displayPlaceholder
+        // With a disabledMessage the input keeps focusability via
+        // aria-disabled so the reason is focus-discoverable; typing and
+        // arrow-key adjustment are blocked with readOnly and the guards.
+        ,
+        disabled: isDisabled && !showsDisabledMessage,
+        "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+        readOnly: showsDisabledMessage || undefined,
         autoFocus: hasAutoFocus,
         "data-autofocus": hasAutoFocus || undefined,
         "aria-describedby": ariaDescribedBy,
@@ -325,7 +368,7 @@ export function TimeInput({
         size: "md",
         color: statusIconColorMap[status.type]
       })]
-    })
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 TimeInput.displayName = 'TimeInput';

package/dist/Timestamp/Timestamp.d.ts

@@ -8,7 +8,7 @@ export interface TimestampProps extends BaseProps<HTMLTimeElement> {
     value: string | number;
     /**
      * Display format.
-     * - `'relative'`: "2 hours ago", "yesterday", "just now"
+     * - `'relative'`: "2 hours ago", "yesterday", "now"
      * - `'auto'`: Relative for recent times, `date_time` for older
      * - `'date'`: "Mar 21, 2025"
      * - `'date_time'`: "Mar 21, 2025, 2:51 PM"

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,EACV,QAAQ,EACR,QAAQ,EACR,SAAS,EACT,UAAU,EACX,MAAM,gBAAgB,CAAC;AAExB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,MAAM,GACN,MAAM,GACN,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;;;;;;;;;;;OAWG;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;AAqMD;;;;;;;;;;;;;;;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,+BAqFhB;yBArGe,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;AAE9E,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAW5C,MAAM,MAAM,eAAe,GACvB,UAAU,GACV,MAAM,GACN,MAAM,GACN,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;;;;;;;;;;;OAWG;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;AA8ND;;;;;;;;;;;;;;;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,+BAqFhB;yBArGe,SAAS"}

package/dist/Timestamp/Timestamp.js

@@ -45,6 +45,18 @@ const YEAR = 365 * DAY;
 
 /** Default auto threshold: 7 days in seconds */
 const DEFAULT_AUTO_THRESHOLD = 7 * DAY;
+
+/**
+ * Tolerance (in seconds) for treating a *future* timestamp as the present.
+ * A value only a handful of seconds ahead of our reference clock is almost
+ * always clock skew — the displayed `now` lagging the real clock, or the value
+ * being produced on a slightly faster clock — not a genuine future event, so
+ * it reads as "now" rather than a confusing "in a few seconds". The future
+ * side gets a wider window than the past (which only needs to absorb the
+ * sub-second render-time lag) because future drift is far more likely to be
+ * skew than real.
+ */
+const FUTURE_SKEW_TOLERANCE = 30;
 function parseValue(value) {
   if (typeof value === 'number') {
     // Heuristic: if the number is less than 1e12, treat as seconds; otherwise ms.
@@ -55,9 +67,25 @@ function parseValue(value) {
 }
 function getRelativeTimeString(date, now) {
   const diffSeconds = Math.round((now.getTime() - date.getTime()) / 1000);
+
+  // Treat values at (or a hair before/after) the present as "now". The
+  // internal `now` reference is captured at render time, so it can lag the
+  // real clock; a value equal to "right now" can land a fraction of a second
+  // in the future and round to a small negative delta. Without this clamp,
+  // such values fall into the future branch and render "in a few seconds".
+  if (Math.abs(diffSeconds) < 10) {
+    return 'now';
+  }
   if (diffSeconds < 0) {
     // Future dates
     const absDiff = Math.abs(diffSeconds);
+    // A value only a few seconds ahead of our clock is almost always skew, not
+    // a genuine future event — render it as the present rather than a
+    // confusing "in a few seconds". Wider than the past window above on
+    // purpose (see FUTURE_SKEW_TOLERANCE).
+    if (absDiff <= FUTURE_SKEW_TOLERANCE) {
+      return 'now';
+    }
     if (absDiff < MINUTE) {
       return 'in a few seconds';
     }
@@ -80,9 +108,6 @@ function getRelativeTimeString(date, now) {
     const years = Math.round(absDiff / YEAR);
     return `in ${years} ${years === 1 ? 'year' : 'years'}`;
   }
-  if (diffSeconds < 10) {
-    return 'just now';
-  }
   if (diffSeconds < MINUTE) {
     return `${diffSeconds} seconds ago`;
   }

package/dist/Toast/Toast.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAyD3D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,SAAiB,EACjB,SAAS,GACV,EAAE,UAAU,+BAmGZ;yBA3Ge,KAAK"}
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/Toast/Toast.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,OAAO,CAAC;AAiBrC,OAAO,KAAK,EAAC,SAAS,EAAE,kBAAkB,EAAC,MAAM,SAAS,CAAC;AAyD3D,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,SAAS,CAAC;IAChB,IAAI,EAAE,SAAS,CAAC;IAChB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,UAAU,EAAE,OAAO,CAAC;IACpB,gBAAgB,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,SAAS,EAAE,CAAC,MAAM,EAAE,kBAAkB,KAAK,IAAI,CAAC;CACjD;AAED;;;;;;;;;;;;;;;;;;GAkBG;AACH,wBAAgB,KAAK,CAAC,EACpB,IAAI,EACJ,IAAI,EACJ,UAAU,EACV,UAAU,EACV,gBAAgB,EAChB,SAAiB,EACjB,SAAS,GACV,EAAE,UAAU,+BAiHZ;yBAzHe,KAAK"}

package/dist/Toast/Toast.js

@@ -88,6 +88,20 @@ export function Toast({
       }
     };
   }, [autoHideDuration, startTimer]);
+
+  // Pause the auto-hide timer while the window is not focused, so a toast
+  // doesn't silently expire while the user is in another window or tab.
+  useEffect(() => {
+    if (!isAutoHide) {
+      return;
+    }
+    window.addEventListener('blur', pauseTimer);
+    window.addEventListener('focus', resumeTimer);
+    return () => {
+      window.removeEventListener('blur', pauseTimer);
+      window.removeEventListener('focus', resumeTimer);
+    };
+  }, [isAutoHide, pauseTimer, resumeTimer]);
   const handleDismiss = useCallback(() => {
     onDismiss('manual');
   }, [onDismiss]);

package/dist/Toast/ToastViewport.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAEV,aAAa,EAEd,MAAM,SAAS,CAAC;AA2DjB,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACtE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAsB,EACtB,UAAc,EACd,KAAK,EACL,UAAiB,EACjB,QAAQ,GACT,EAAE,kBAAkB,+BAuJpB;yBA7Je,aAAa"}
+{"version":3,"file":"ToastViewport.d.ts","sourceRoot":"","sources":["../../src/Toast/ToastViewport.tsx"],"names":[],"mappings":"AAkBA,OAAO,KAAK,EAAa,aAAa,EAAqB,MAAM,SAAS,CAAC;AA2D3E,MAAM,WAAW,kBAAkB;IACjC,QAAQ,CAAC,EAAE,aAAa,CAAC;IACzB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE;QAAC,GAAG,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,KAAK,CAAC,EAAE,MAAM,CAAC;QAAC,GAAG,CAAC,EAAE,MAAM,CAAA;KAAC,CAAC;IACtE;;;;OAIG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,aAAa,CAAC,EAC5B,QAAsB,EACtB,UAAc,EACd,KAAK,EACL,UAAiB,EACjB,QAAQ,GACT,EAAE,kBAAkB,+BAqSpB;yBA3Se,aAAa"}

package/dist/Toast/ToastViewport.js

@@ -2,11 +2,12 @@
 
 'use client';
 
-import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useCallback, useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { spacingVars, durationVars, easeVars } from "../theme/tokens.stylex.js";
 import { mergeProps } from "../utils/index.js";
+import { INTERACTIVE_SELECTORS } from "../hooks/useClickableContainer.js";
 import { Toast } from "./Toast.js";
 import { ToastContext } from "./ToastContext.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
@@ -74,6 +75,39 @@ export function ToastViewport({
   const [exitingIds, setExitingIds] = useState(new Set());
   const toastsRef = useRef(toasts);
   toastsRef.current = toasts;
+
+  // Show the popover on mount so it enters the top layer.
+  const viewportRef = useRef(null);
+  // The element that was focused before the user jumped into the viewport
+  // (via F6). Used to restore focus once all toasts are dismissed so focus
+  // never falls to <body>.
+  const prevFocusRef = useRef(null);
+  // When a toast is dismissed while focus lives inside it, we need to move
+  // focus to a sensible neighbor after that toast unmounts. This holds the
+  // id of the toast whose removal should trigger a focus handoff.
+  const focusHandoffIdRef = useRef(null);
+  // The next toast id that should receive focus once the dismissed toast has
+  // unmounted, or 'restore' to fall back to the previously-focused element.
+  const pendingFocusRef = useRef(null);
+
+  // Collect a focusable control within a toast node, if any.
+  // Reuses the canonical INTERACTIVE_SELECTORS list (native controls plus
+  // role-based interactive elements) instead of a hand-rolled subset, then
+  // narrows to the first candidate that can actually receive focus —
+  // excluding elements opted out with `tabindex="-1"` and disabled controls.
+  const getFocusable = useCallback(container => {
+    if (!container) {
+      return null;
+    }
+    const candidates = container.querySelectorAll(INTERACTIVE_SELECTORS);
+    for (const candidate of candidates) {
+      if (candidate.getAttribute('tabindex') === '-1' || candidate.hasAttribute('disabled') || candidate.getAttribute('aria-disabled') === 'true') {
+        continue;
+      }
+      return candidate;
+    }
+    return null;
+  }, []);
   const addToast = useCallback(entry => {
     setToasts(prev => {
       const {
@@ -97,6 +131,25 @@ export function ToastViewport({
     if (entry) {
       entry.options.onHide?.(reason);
     }
+    // If focus currently lives inside the toast being dismissed, remember
+    // that its removal must hand focus off to a neighbor (or the element
+    // focused before the user entered the viewport) rather than <body>.
+    const el = viewportRef.current;
+    const active = document.activeElement;
+    const dismissedNode = el?.querySelector(`[data-toast-id="${id}"]`) ?? null;
+    if (dismissedNode && active instanceof Node && dismissedNode.contains(active)) {
+      focusHandoffIdRef.current = id;
+      // Pick the neighbor to receive focus while the DOM is still intact:
+      // prefer the next toast, then the previous, else restore.
+      const remaining = toastsRef.current.filter(t => t.id !== id);
+      if (remaining.length > 0) {
+        const dismissedIndex = toastsRef.current.findIndex(t => t.id === id);
+        const next = toastsRef.current[dismissedIndex + 1] ?? toastsRef.current[dismissedIndex - 1];
+        pendingFocusRef.current = next ? next.id : 'restore';
+      } else {
+        pendingFocusRef.current = 'restore';
+      }
+    }
     setExitingIds(prev => {
       if (prev.has(id)) {
         return prev;
@@ -115,6 +168,41 @@ export function ToastViewport({
     });
     setToasts(prev => prev.filter(t => t.id !== id));
   }, []);
+
+  // After a dismissed toast unmounts, hand focus off so it never falls to
+  // <body>. Runs in a layout effect once the toast list no longer contains
+  // the dismissed toast.
+  useLayoutEffect(() => {
+    const handoffId = focusHandoffIdRef.current;
+    const target = pendingFocusRef.current;
+    if (handoffId == null || target == null) {
+      return;
+    }
+    // Wait until the dismissed toast is actually gone from the list.
+    if (toasts.some(t => t.id === handoffId)) {
+      return;
+    }
+    focusHandoffIdRef.current = null;
+    pendingFocusRef.current = null;
+    const el = viewportRef.current;
+    if (target !== 'restore' && el) {
+      const nextNode = el.querySelector(`[data-toast-id="${target}"]`);
+      const focusable = getFocusable(nextNode) ?? nextNode;
+      if (focusable) {
+        focusable.focus();
+        return;
+      }
+    }
+    // No remaining toast to receive focus — restore the previously-focused
+    // element if it's still connected, else fall back to the container.
+    const prev = prevFocusRef.current;
+    prevFocusRef.current = null;
+    if (prev && prev.isConnected) {
+      prev.focus();
+    } else if (el) {
+      el.focus();
+    }
+  }, [toasts, getFocusable]);
   const findByUniqueID = useCallback(uid => {
     return toastsRef.current.find(t => t.options.uniqueID === uid);
   }, []);
@@ -139,7 +227,6 @@ export function ToastViewport({
   }
 
   // Show the popover on mount so it enters the top layer
-  const viewportRef = useRef(null);
   useEffect(() => {
     if (!isTopLayer) {
       return;
@@ -153,13 +240,54 @@ export function ToastViewport({
       }
     }
   }, [isTopLayer]);
+
+  // F6 jumps focus into the toast viewport — the standard "go to
+  // notifications" affordance. Focus the first control in the newest toast,
+  // or the viewport container if none. Toasts are non-modal, so this only
+  // moves focus in; Shift+Tab / Escape let focus leave naturally.
+  const hasToasts = toasts.length > 0;
+  useEffect(() => {
+    if (!hasToasts) {
+      return;
+    }
+    const handleKeyDown = e => {
+      if (e.key !== 'F6') {
+        return;
+      }
+      const el = viewportRef.current;
+      if (!el) {
+        return;
+      }
+      // Already inside the viewport — nothing to do.
+      const active = document.activeElement;
+      if (active instanceof Node && el.contains(active)) {
+        return;
+      }
+      e.preventDefault();
+      // Remember where focus was so it can be restored on dismiss.
+      if (active instanceof HTMLElement) {
+        prevFocusRef.current = active;
+      }
+      // Newest toast is the last one rendered in the DOM.
+      const toastNodes = el.querySelectorAll('[data-toast-id]');
+      const newest = toastNodes[toastNodes.length - 1] ?? null;
+      const focusable = getFocusable(newest) ?? newest ?? el;
+      focusable.focus();
+    };
+    document.addEventListener('keydown', handleKeyDown);
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [hasToasts, getFocusable]);
   const posStyle = position === 'topEnd' ? styles.topEnd : position === 'topStart' ? styles.topStart : position === 'bottomStart' ? styles.bottomStart : styles.bottomEnd;
   return /*#__PURE__*/_jsxs(ToastContext, {
     value: contextValue,
     children: [children, /*#__PURE__*/_jsx("div", {
       ref: viewportRef,
       role: "region",
-      "aria-label": "Notifications"
+      "aria-label": "Notifications",
+      "aria-modal": false,
+      tabIndex: -1
       // popover="manual" promotes to the top layer (above dialogs).
       // Omitted inside dialogs where the viewport is already in a top layer.
       ,
@@ -174,6 +302,7 @@ export function ToastViewport({
         const dur = o.autoHideDuration ?? 5000;
         const isExiting = exitingIds.has(entry.id);
         return /*#__PURE__*/_jsx("div", {
+          "data-toast-id": entry.id,
           ...{
             0: {
               className: "x67bb7w xrvj5dj x1tu4anv xvmdzux xjshnde xuedmi6 xsagj69 xlr8y92 x1sopeo2 x5rzir7"