@astryxdesign/core 0.1.2 → 0.1.3

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

@@ -4,7 +4,7 @@
 
 /**
  * @file TimeInput.tsx
- * @input Uses React, useId, useState, useEffect, useCallback, useRef, Field, Icon
+ * @input Uses React, useId, useState, useCallback, useRef, Field, Icon, InputGroupContext
  * @output Exports TimeInput component, TimeInputProps
  * @position Core implementation; consumed by index.ts, tested by TimeInput.test.tsx
  *
@@ -22,11 +22,15 @@ import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars, borderV
 import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
 import { Icon } from "../Icon/index.js";
 import { Spinner } from "../Spinner/index.js";
-import { parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, adjustTime, isTimeInRange, mergeProps, mergeRefs } from "../utils/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { parseTimeInput, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, adjustTime, isTimeInRange, mergeProps, mergeRefs, getInputARIA } from "../utils/index.js";
 import { useSize } from "../SizeContext/SizeContext.js";
 import { useInputContainer } from "../hooks/useInputContainer.js";
+import { useInputGroup } from "../InputGroup/InputGroupContext.js";
+import { groupStyles } from "../InputGroup/groupStyles.js";
+import { useTooltip } from "../Tooltip/index.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";
 const sizeStyles = {
   sm: {
     kZKoxP: "x6k0iem",
@@ -68,6 +72,7 @@ export function TimeInput({
   isOptional = false,
   isRequired = false,
   isDisabled = false,
+  disabledMessage,
   value,
   onChange,
   changeAction,
@@ -91,14 +96,29 @@ export function TimeInput({
 }) {
   const size = useSize(sizeProp, 'md');
   const id = useId();
+  const inputLabelID = useId();
   const descriptionID = useId();
   const statusMessageID = useId();
   const inputRef = useRef(null);
   const containerRef = useRef(null);
+  const inputGroup = useInputGroup();
   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 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 +130,10 @@ export function TimeInput({
     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);
 
   // Pending input while user is typing (null = show formatted value)
   const [pendingInput, setPendingInput] = useState(null);
@@ -162,6 +185,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 +198,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 +238,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 +264,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 +281,106 @@ export function TimeInput({
     inputRef,
     disabled: isDisabled
   });
-  return /*#__PURE__*/_jsx(Field, {
+  const inputWrapper = /*#__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', {
+      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),
+    children: [/*#__PURE__*/_jsx("div", {
+      ...{
+        className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "clock",
+        size: "sm",
+        color: "secondary"
+      })
+    }), inputGroup && /*#__PURE__*/_jsx(VisuallyHidden, {
+      id: inputLabelID,
+      children: label
+    }), inputGroup && description && /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      id: descriptionID,
+      children: description
+    }), inputGroup && status?.message && /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      id: statusMessageID,
+      role: status.type === 'error' ? 'alert' : 'status',
+      "aria-live": status.type === 'error' ? 'assertive' : 'polite',
+      children: status.message
+    }), /*#__PURE__*/_jsx("input", {
+      ref: mergeRefs(ref, inputRef),
+      id: id,
+      type: "text",
+      value: displayValue,
+      onChange: handleInputChange,
+      onFocus: handleFocus,
+      onBlur: handleBlur,
+      onKeyDown: handleInputKeyDown,
+      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,
+      "aria-required": isRequired === true ? 'true' : undefined,
+      "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+      "aria-busy": isBusy || undefined,
+      "aria-labelledby": ariaLabelledBy,
+      ...{
+        0: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
+        },
+        2: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc"
+        },
+        1: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
+        },
+        3: {
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
+        }
+      }[!!isDisabled << 1 | !!!isInputValid << 0]
+    }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+      size: "sm"
+    }), hasClear && value && !isDisabled && /*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: handleClear,
+      "aria-label": `Clear ${label}`,
+      ...{
+        className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "close",
+        size: "sm",
+        color: "secondary"
+      })
+    }), status && !inputGroup && /*#__PURE__*/_jsx(Icon, {
+      icon: statusIconMap[status.type],
+      size: "md",
+      color: statusIconColorMap[status.type]
+    })]
+  });
+  if (inputGroup) {
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+    });
+  }
+  return /*#__PURE__*/_jsxs(Field, {
     label: label,
     isLabelHidden: isLabelHidden,
     description: description,
@@ -258,74 +396,7 @@ export function TimeInput({
     } : undefined,
     labelTooltip: labelTooltip,
     width: width,
-    children: /*#__PURE__*/_jsxs("div", {
-      ref: containerRef,
-      onClick: handleWrapperClick,
-      onMouseUp: handleWrapperMouseUp,
-      ...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], xstyle), className, style),
-      children: [/*#__PURE__*/_jsx("div", {
-        ...{
-          className: "x78zum5 x6s0dn4 xl56j7k x2lah0s"
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "clock",
-          size: "sm",
-          color: "secondary"
-        })
-      }), /*#__PURE__*/_jsx("input", {
-        ref: mergeRefs(ref, inputRef),
-        id: id,
-        type: "text",
-        value: displayValue,
-        onChange: handleInputChange,
-        onFocus: handleFocus,
-        onBlur: handleBlur,
-        onKeyDown: handleInputKeyDown,
-        placeholder: displayPlaceholder,
-        disabled: isDisabled,
-        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,
-        ...{
-          0: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5"
-          },
-          2: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc"
-          },
-          1: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xv1l7n4"
-          },
-          3: {
-            className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 x1h6gzvc xv1l7n4"
-          }
-        }[!!isDisabled << 1 | !!!isInputValid << 0]
-      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
-        size: "sm"
-      }), hasClear && value && !isDisabled && /*#__PURE__*/_jsx("button", {
-        type: "button",
-        onClick: handleClear,
-        "aria-label": `Clear ${label}`,
-        ...{
-          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
-        },
-        children: /*#__PURE__*/_jsx(Icon, {
-          icon: "close",
-          size: "sm",
-          color: "secondary"
-        })
-      }), status && /*#__PURE__*/_jsx(Icon, {
-        icon: statusIconMap[status.type],
-        size: "md",
-        color: statusIconColorMap[status.type]
-      })]
-    })
+    children: [inputWrapper, showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
   });
 }
 TimeInput.displayName = 'TimeInput';

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"}