@astryxdesign/core 0.6.2 → 0.6.3-canary.039a67e

package/dist/TimeInput/TouchTimeField.js

@@ -0,0 +1,417 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file TouchTimeField.tsx
+ * @input Uses React, Field, BottomSheet, Wheel, DateInput touch geometry
+ *   tokens, and shared time utilities
+ * @output Exports TouchTimeField — the bottom-sheet surface behind TimeInput
+ * @position Internal component; consumed by TimeInput.tsx for `presentation`
+ *   sheet surfaces (`spec:AST-043` DEC-3: the time half of DateTimeInput's sheet)
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/TimeInput/TimeInput.tsx
+ * - /packages/core/src/TimeInput/TimeInput.doc.mjs
+ * - /packages/core/src/DateTimeInput/TouchDateTimeField.tsx (wheel behavior)
+ */
+import { useCallback, useId, useMemo, useOptimistic, useRef, useState, useTransition } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { BottomSheet } from "../BottomSheet/index.js";
+import { Button } from "../Button/index.js";
+import { Field, InputClearButton, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
+import { useInputGroup } from "../InputGroup/InputGroupContext.js";
+import { groupStyles } from "../InputGroup/groupStyles.js";
+import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
+import { Icon } from "../Icon/index.js";
+import { useTranslator } from "../i18n/index.js";
+import "../theme/tokens.stylex.js";
+import { sizeVars, spacingVars } from "../theme/tokens.stylex.js";
+import { useSize } from "../SizeContext/SizeContext.js";
+import { Spinner } from "../Spinner/index.js";
+import { useTooltip } from "../Tooltip/index.js";
+import { Wheel } from "../DateInput/Wheel.js";
+import "../DateInput/tokens.stylex.js";
+import { dateInputTouchGeometry } from "../DateInput/tokens.stylex.js";
+import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
+import { themeProps } from "../utils/themeProps.js";
+import { clampTime, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, getInputARIA, isTimeInRange, mergeProps, parseISOTime } from "../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const sizeStyles = {
+  sm: {
+    kZKoxP: "x6k0iem",
+    k7Eaqz: "x1i9suas",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x1ueg155",
+    k7Eaqz: "x1i9suas",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "xssyfek",
+    k7Eaqz: "x1i9suas",
+    $$css: true
+  }
+};
+const styles = {
+  iconButton: {
+    k1xSpc: "x78zum5",
+    kGNEyG: "x6s0dn4",
+    kjj79g: "xl56j7k",
+    kmVPX3: "x1717udv",
+    kogj98: "x1ghz6dp",
+    kMzoRj: "xc342km",
+    ksu8eU: "xng3xce",
+    kWkggS: "xjbqb8w",
+    kkrTdU: "x1ypdohk x16khyan",
+    kmuXW: "x2lah0s",
+    $$css: true
+  }
+};
+function twoDigits(value) {
+  return String(value).padStart(2, '0');
+}
+function hour12From24(hour) {
+  return hour === 0 ? 12 : hour > 12 ? hour - 12 : hour;
+}
+function hour24From12(hour, meridiem) {
+  if (meridiem === 0) {
+    return hour === 12 ? 0 : hour;
+  }
+  return hour === 12 ? 12 : hour + 12;
+}
+function timeToSeconds(time) {
+  if (time == null) {
+    return null;
+  }
+  const parsed = parseISOTime(time);
+  return parsed == null ? null : parsed.hour * 3600 + parsed.minute * 60 + parsed.second;
+}
+function rangeOverlaps(startSecond, endSecond, min, max) {
+  const minSecond = timeToSeconds(min);
+  const maxSecond = timeToSeconds(max);
+  return (minSecond == null || endSecond >= minSecond) && (maxSecond == null || startSecond <= maxSecond);
+}
+
+/**
+ * The Astryx bottom-sheet time surface: a read-only closed field that opens
+ * hour/minute(/second/meridiem) wheels in a BottomSheet. Wheels commit live,
+ * clamped to `min`/`max`; the footer Save button only closes the sheet.
+ */
+export function TouchTimeField({
+  label,
+  isLabelHidden = false,
+  description,
+  isOptional = false,
+  isRequired = false,
+  isDisabled = false,
+  disabledMessage,
+  value,
+  onChange,
+  changeAction,
+  isLoading = false,
+  min,
+  max,
+  hasSeconds = false,
+  hasClear = false,
+  hourFormat = '12h',
+  placeholder: placeholderFromProps,
+  size: sizeProp,
+  status,
+  statusVariant = 'attached',
+  labelTooltip,
+  width,
+  xstyle,
+  className,
+  style,
+  ref
+}) {
+  const t = useTranslator();
+  const isEffectivelyRequired = useResolvedRequired({
+    isRequired,
+    isOptional
+  });
+  const placeholder = placeholderFromProps ?? t('@astryx.timeInput.placeholder');
+  const size = useSize(sizeProp, 'md');
+  const id = useId();
+  const inputLabelID = useId();
+  const descriptionID = useId();
+  const statusMessageID = useId();
+  const inputRef = useRef(null);
+  const mergedInputRef = useMergedRefs(ref, inputRef);
+  const inputGroup = useInputGroup();
+  const [isSheetOpen, setIsSheetOpen] = useState(false);
+  const [, startTransition] = useTransition();
+  const [optimisticValue, setOptimisticValue] = useOptimistic(value);
+  const isBusy = isLoading || optimisticValue !== value;
+  const isEffectivelyDisabled = isDisabled || isLoading;
+  const showsDisabledMessage = isDisabled && !!disabledMessage;
+  const disabledMessageTooltip = useTooltip({
+    placement: 'above',
+    focusTrigger: 'always',
+    isEnabled: showsDisabledMessage
+  });
+  const {
+    statusIcon,
+    describedBy: statusTooltipDescribedBy
+  } = useInputStatusIcon({
+    status,
+    statusVariant,
+    isInGroup: !!inputGroup
+  });
+  const {
+    ariaLabelledBy,
+    ariaDescribedBy
+  } = getInputARIA(inputLabelID, [description ? descriptionID : null, statusVariant !== 'tooltip' && status?.message ? statusMessageID : null, statusTooltipDescribedBy, showsDisabledMessage ? disabledMessageTooltip.describedBy : null], inputGroup);
+  const fireChange = useCallback(newValue => {
+    if (isEffectivelyDisabled) {
+      return;
+    }
+    onChange?.(newValue);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue(newValue);
+        await changeAction(newValue);
+      });
+    }
+  }, [changeAction, isEffectivelyDisabled, onChange, setOptimisticValue]);
+  const formatDisplayTime = hourFormat === '12h' ? formatDisplayTime12h : formatDisplayTime24h;
+  const displayValue = optimisticValue ? formatDisplayTime(optimisticValue, hasSeconds) : '';
+  const fallbackTime = useMemo(() => {
+    const now = new Date();
+    return formatISOTime({
+      hour: now.getHours(),
+      minute: now.getMinutes(),
+      second: now.getSeconds()
+    }, hasSeconds);
+  }, [hasSeconds]);
+  const parsedWheelTime = useMemo(() => parseISOTime(optimisticValue ?? fallbackTime) ?? {
+    hour: 0,
+    minute: 0,
+    second: 0
+  }, [fallbackTime, optimisticValue]);
+  const composeWheelTime = useCallback(patch => {
+    const meridiem = patch.meridiem ?? (parsedWheelTime.hour < 12 ? 0 : 1);
+    let hour = parsedWheelTime.hour;
+    if (patch.hour24 !== undefined) {
+      hour = patch.hour24;
+    } else if (patch.hour12 !== undefined) {
+      hour = hour24From12(patch.hour12, meridiem);
+    } else if (patch.meridiem !== undefined) {
+      hour = hour24From12(hour12From24(hour), patch.meridiem);
+    }
+    return formatISOTime({
+      hour,
+      minute: patch.minute ?? parsedWheelTime.minute,
+      second: hasSeconds ? patch.second ?? parsedWheelTime.second : 0
+    }, hasSeconds);
+  }, [hasSeconds, parsedWheelTime]);
+  const commitWheelTime = useCallback(rawTime => {
+    const next = clampTime(rawTime, min, max, hasSeconds);
+    if (next !== optimisticValue && isTimeInRange(next, min, max)) {
+      fireChange(next);
+    }
+  }, [fireChange, hasSeconds, max, min, optimisticValue]);
+  const hourOptions = useMemo(() => {
+    if (hourFormat === '24h') {
+      return Array.from({
+        length: 24
+      }, (_, hour) => ({
+        value: hour,
+        label: twoDigits(hour),
+        isDisabled: !rangeOverlaps(hour * 3600, hour * 3600 + 3599, min, max)
+      }));
+    }
+    const meridiem = parsedWheelTime.hour < 12 ? 0 : 1;
+    return Array.from({
+      length: 12
+    }, (_, index) => {
+      const hour = index + 1;
+      const hour24 = hour24From12(hour, meridiem);
+      return {
+        value: hour,
+        label: String(hour),
+        isDisabled: !rangeOverlaps(hour24 * 3600, hour24 * 3600 + 3599, min, max)
+      };
+    });
+  }, [hourFormat, max, min, parsedWheelTime.hour]);
+  const minuteOptions = useMemo(() => Array.from({
+    length: 60
+  }, (_, minute) => {
+    const start = parsedWheelTime.hour * 3600 + minute * 60;
+    return {
+      value: minute,
+      label: twoDigits(minute),
+      isDisabled: !rangeOverlaps(start, start + (hasSeconds ? 59 : 0), min, max)
+    };
+  }), [hasSeconds, max, min, parsedWheelTime.hour]);
+  const secondOptions = useMemo(() => Array.from({
+    length: 60
+  }, (_, second) => ({
+    value: second,
+    label: twoDigits(second),
+    isDisabled: !isTimeInRange(formatISOTime({
+      hour: parsedWheelTime.hour,
+      minute: parsedWheelTime.minute,
+      second
+    }, true), min, max)
+  })), [max, min, parsedWheelTime.hour, parsedWheelTime.minute]);
+  const meridiemOptions = useMemo(() => [{
+    value: 0,
+    label: t('@astryx.dateTimeInput.meridiemAM'),
+    isDisabled: !rangeOverlaps(0, 11 * 3600 + 3599, min, max)
+  }, {
+    value: 1,
+    label: t('@astryx.dateTimeInput.meridiemPM'),
+    isDisabled: !rangeOverlaps(12 * 3600, 23 * 3600 + 3599, min, max)
+  }], [max, min, t]);
+  const openSheet = useCallback(() => {
+    if (!isEffectivelyDisabled) {
+      setIsSheetOpen(true);
+    }
+  }, [isEffectivelyDisabled]);
+  const inputWrapper = /*#__PURE__*/_jsxs("div", {
+    ref: el => {
+      disabledMessageTooltip.ref(el);
+    },
+    ...mergeProps(themeProps('time-input', {
+      size,
+      status: status?.type ?? null,
+      disabled: isDisabled ? 'disabled' : null
+    }), 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("button", {
+      type: "button",
+      onClick: openSheet,
+      disabled: isEffectivelyDisabled,
+      "aria-label": t('@astryx.timeInput.openPicker', {
+        label
+      }),
+      tabIndex: -1,
+      ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton),
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "clock",
+        size: "sm",
+        color: "secondary"
+      })
+    }), /*#__PURE__*/_jsx("input", {
+      ref: mergedInputRef,
+      id: id,
+      type: "text",
+      role: "combobox",
+      value: displayValue,
+      readOnly: true,
+      inputMode: "none",
+      onChange: () => {},
+      onClick: openSheet,
+      placeholder: placeholder,
+      disabled: isEffectivelyDisabled && !showsDisabledMessage,
+      "aria-disabled": showsDisabledMessage ? 'true' : undefined,
+      "aria-describedby": ariaDescribedBy,
+      "aria-required": isEffectivelyRequired ? 'true' : undefined,
+      "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+      "aria-busy": isBusy || undefined,
+      "aria-expanded": isSheetOpen,
+      "aria-haspopup": "dialog",
+      "aria-autocomplete": "none",
+      autoComplete: "off",
+      "aria-labelledby": ariaLabelledBy,
+      ...{
+        className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv xjbqb8w x1a2a7pz x1ypdohk x16khyan"
+      }
+    }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+      size: "sm"
+    }), hasClear && optimisticValue && !isEffectivelyDisabled && /*#__PURE__*/_jsx(InputClearButton, {
+      label: t('@astryx.timeInput.clearLabel', {
+        label
+      }),
+      onClick: () => fireChange(undefined)
+    }), statusIcon, /*#__PURE__*/_jsx(BottomSheet, {
+      isOpen: isSheetOpen,
+      onOpenChange: setIsSheetOpen,
+      label: label,
+      height: "hug",
+      children: /*#__PURE__*/_jsxs("div", {
+        ...{
+          className: "x9f619 x78zum5 xdt5ytf xh8yej3 xeuugli x1txdalj x1pzlopt x1adxfkp x1awphl8"
+        },
+        children: [/*#__PURE__*/_jsxs("div", {
+          ...{
+            className: "x78zum5 xh8yej3 xeuugli xm8gem x1txdalj"
+          },
+          children: [/*#__PURE__*/_jsx(Wheel, {
+            label: t('@astryx.dateTimeInput.hourWheel'),
+            options: hourOptions,
+            value: hourFormat === '24h' ? parsedWheelTime.hour : hour12From24(parsedWheelTime.hour),
+            isActive: isSheetOpen,
+            onChange: hour => commitWheelTime(hourFormat === '24h' ? composeWheelTime({
+              hour24: hour
+            }) : composeWheelTime({
+              hour12: hour
+            }))
+          }), /*#__PURE__*/_jsx(Wheel, {
+            label: t('@astryx.dateTimeInput.minuteWheel'),
+            options: minuteOptions,
+            value: parsedWheelTime.minute,
+            isActive: isSheetOpen,
+            onChange: minute => commitWheelTime(composeWheelTime({
+              minute
+            }))
+          }), hasSeconds && /*#__PURE__*/_jsx(Wheel, {
+            label: t('@astryx.dateTimeInput.secondWheel'),
+            options: secondOptions,
+            value: parsedWheelTime.second,
+            isActive: isSheetOpen,
+            onChange: second => commitWheelTime(composeWheelTime({
+              second
+            }))
+          }), hourFormat === '12h' && /*#__PURE__*/_jsx(Wheel, {
+            label: t('@astryx.dateTimeInput.meridiemWheel'),
+            options: meridiemOptions,
+            value: parsedWheelTime.hour < 12 ? 0 : 1,
+            isActive: isSheetOpen,
+            onChange: meridiem => commitWheelTime(composeWheelTime({
+              meridiem
+            }))
+          })]
+        }), /*#__PURE__*/_jsx("div", {
+          ...{
+            className: "x78zum5 xr1yuqi xfsso4q"
+          },
+          children: /*#__PURE__*/_jsx(Button, {
+            variant: "primary",
+            size: "md",
+            width: "100%",
+            label: t('@astryx.dateInput.savePicking'),
+            onClick: () => setIsSheetOpen(false)
+          })
+        })]
+      })
+    }), showsDisabledMessage && disabledMessageTooltip.renderTooltip(disabledMessage)]
+  });
+  if (inputGroup) {
+    return inputWrapper;
+  }
+  return /*#__PURE__*/_jsx(Field, {
+    label: label,
+    isLabelHidden: isLabelHidden,
+    description: description,
+    inputID: id,
+    descriptionID: description ? descriptionID : undefined,
+    isOptional: isOptional,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    status: status ? {
+      type: status.type,
+      message: status.message,
+      messageID: status.message ? statusMessageID : undefined
+    } : undefined,
+    statusVariant: statusVariant,
+    labelTooltip: labelTooltip,
+    width: width,
+    children: inputWrapper
+  });
+}
+TouchTimeField.displayName = 'TouchTimeField';

package/dist/TimeInput/index.d.ts

@@ -7,6 +7,6 @@
  * SYNC: When modified, update this header and /packages/core/src/TimeInput/TimeInput.doc.mjs
  */
 export { TimeInput } from './TimeInput';
-export type { TimeInputProps, TimeInputSize, TimeInputHourFormat, TimeInputNativePicker, TimeInputStatus, TimeInputStatusType, } from './TimeInput';
+export type { TimeInputProps, TimeInputSize, TimeInputHourFormat, TimeInputNativePicker, TimeInputPresentation, TimeInputStatus, TimeInputStatusType, } from './TimeInput';
 export type { ISOTimeString } from '../utils';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeInput/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC;AACrB,YAAY,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/TimeInput/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,qBAAqB,EACrB,qBAAqB,EACrB,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC;AACrB,YAAY,EAAC,aAAa,EAAC,MAAM,UAAU,CAAC"}

package/dist/Timer/Timer.d.ts

@@ -0,0 +1,49 @@
+import type { BaseProps } from '../BaseProps';
+import type { TextColor, TextSize, TextType, TextWeight } from '../theme/types';
+export type TimerFormat = 'elapsed' | 'clock';
+export interface TimerProps extends Omit<BaseProps<HTMLTimeElement>, 'dateTime'> {
+    /** Ref forwarded to the rendered `<time>` element. */
+    ref?: React.Ref<HTMLTimeElement>;
+    /**
+     * Unix time in milliseconds when the measured operation began. Omit it to
+     * start counting from this Timer's mount.
+     */
+    startTime?: number;
+    /**
+     * Standard duration representation.
+     * @default 'elapsed'
+     */
+    format?: TimerFormat;
+    /**
+     * Semantic text type. Matches Timestamp typography behavior.
+     * @default 'supporting'
+     */
+    type?: TextType;
+    /** Explicit font size override. Overrides the size from `type`. */
+    size?: TextSize;
+    /**
+     * Text color.
+     * @default 'secondary'
+     */
+    color?: TextColor;
+    /** Font weight override. */
+    weight?: TextWeight;
+}
+/**
+ * Displays a standardized elapsed duration without scheduling React tick renders.
+ *
+ * Timer writes changing text and its ISO 8601 duration directly to the owned
+ * `<time>` node. Use `elapsed` for compact duration text or `clock` for a
+ * stopwatch-like reading.
+ *
+ * @example
+ * ```
+ * <Timer />
+ * <Timer format="clock" />
+ * ```
+ */
+export declare function Timer({ startTime, format, type, size, color, weight, ref, xstyle, className, style, ...rest }: TimerProps): import("react").JSX.Element;
+export declare namespace Timer {
+    var displayName: string;
+}
+//# sourceMappingURL=Timer.d.ts.map

package/dist/Timer/Timer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Timer.d.ts","sourceRoot":"","sources":["../../src/Timer/Timer.tsx"],"names":[],"mappings":"AAqBA,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAG5C,OAAO,KAAK,EAAC,SAAS,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAC,MAAM,gBAAgB,CAAC;AAsB9E,MAAM,MAAM,WAAW,GAAG,SAAS,GAAG,OAAO,CAAC;AA8E9C,MAAM,WAAW,UAAW,SAAQ,IAAI,CACtC,SAAS,CAAC,eAAe,CAAC,EAC1B,UAAU,CACX;IACC,sDAAsD;IACtD,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IACjC;;;OAGG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB,mEAAmE;IACnE,IAAI,CAAC,EAAE,QAAQ,CAAC;IAChB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,4BAA4B;IAC5B,MAAM,CAAC,EAAE,UAAU,CAAC;CACrB;AAED;;;;;;;;;;;;GAYG;AACH,wBAAgB,KAAK,CAAC,EACpB,SAAS,EACT,MAAkB,EAClB,IAAmB,EACnB,IAAI,EACJ,KAAmB,EACnB,MAAM,EACN,GAAG,EACH,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,IAAI,EACR,EAAE,UAAU,+BA0EZ;yBAtFe,KAAK"}

package/dist/Timer/Timer.js

@@ -0,0 +1,158 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Timer.tsx
+ * @input Uses an optional start time, standardized format, Timestamp typography, BaseProps, and React ref
+ * @output Exports Timer, TimerProps, and TimerFormat with non-rendering elapsed-time updates
+ * @position Core content primitive for elapsed duration in active operations
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Timer/Timer.spec.md
+ * - /packages/core/src/Timer/Timer.doc.mjs
+ * - /packages/core/src/Timer/Timer.test.tsx
+ * - /packages/core/src/Timer/index.ts
+ * - /apps/storybook/stories/Timer.stories.tsx
+ * - /packages/cli/assets/templates/blocks/components/Timer/
+ */
+import { useEffect, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { Text } from "../Text/index.js";
+import { mergeProps } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const ONE_SECOND_MS = 1000;
+const ONE_MINUTE_MS = 60 * ONE_SECOND_MS;
+const ONE_HOUR_SECONDS = 60 * 60;
+const MAX_TIMEOUT_MS = 2_147_483_647;
+function pad(value) {
+  return String(value).padStart(2, '0');
+}
+function resolveFormat(format) {
+  return format === 'clock' ? 'clock' : 'elapsed';
+}
+function getElapsedMilliseconds(now, startTime) {
+  return Math.max(0, now - startTime);
+}
+function getPresentation(elapsedMilliseconds, format) {
+  const elapsedSeconds = Math.floor(elapsedMilliseconds / ONE_SECOND_MS);
+  if (format === 'clock') {
+    const hours = Math.floor(elapsedSeconds / ONE_HOUR_SECONDS);
+    const minutes = Math.floor(elapsedSeconds % ONE_HOUR_SECONDS / 60);
+    const seconds = elapsedSeconds % 60;
+    return {
+      dateTime: `PT${elapsedSeconds}S`,
+      text: hours > 0 ? `${String(hours)}:${pad(minutes)}:${pad(seconds)}` : `${String(minutes)}:${pad(seconds)}`
+    };
+  }
+  if (elapsedSeconds < 60) {
+    return {
+      dateTime: `PT${elapsedSeconds}S`,
+      text: `${String(elapsedSeconds)}s`
+    };
+  }
+  const totalMinutes = Math.floor(elapsedSeconds / 60);
+  if (totalMinutes < 60) {
+    return {
+      dateTime: `PT${elapsedSeconds}S`,
+      text: `${String(totalMinutes)}m ${pad(elapsedSeconds % 60)}s`
+    };
+  }
+  const representedSeconds = totalMinutes * 60;
+  return {
+    dateTime: `PT${representedSeconds}S`,
+    text: `${String(Math.floor(totalMinutes / 60))}h ${pad(totalMinutes % 60)}m`
+  };
+}
+function getMillisecondsUntilNextChange(now, startTime, elapsedMilliseconds, format) {
+  if (now < startTime) {
+    return Math.min(startTime - now + ONE_SECOND_MS, MAX_TIMEOUT_MS);
+  }
+  const precision = format === 'elapsed' && elapsedMilliseconds >= ONE_HOUR_SECONDS * ONE_SECOND_MS ? ONE_MINUTE_MS : ONE_SECOND_MS;
+  return precision - elapsedMilliseconds % precision;
+}
+/**
+ * Displays a standardized elapsed duration without scheduling React tick renders.
+ *
+ * Timer writes changing text and its ISO 8601 duration directly to the owned
+ * `<time>` node. Use `elapsed` for compact duration text or `clock` for a
+ * stopwatch-like reading.
+ *
+ * @example
+ * ```
+ * <Timer />
+ * <Timer format="clock" />
+ * ```
+ */
+export function Timer({
+  startTime,
+  format = 'elapsed',
+  type = 'supporting',
+  size,
+  color = 'secondary',
+  weight,
+  ref,
+  xstyle,
+  className,
+  style,
+  ...rest
+}) {
+  const [mountTime] = useState(() => Date.now());
+  const timerRef = useRef(null);
+  const mergedRef = useMergedRefs(ref, timerRef);
+  const resolvedFormat = resolveFormat(format);
+  const initialPresentation = getPresentation(0, resolvedFormat);
+  useEffect(() => {
+    const resolvedStartTime = startTime !== undefined && Number.isFinite(startTime) ? startTime : mountTime;
+    let timeoutID;
+    let previousDateTime;
+    let previousText;
+    const tick = () => {
+      const now = Date.now();
+      const elapsedMilliseconds = getElapsedMilliseconds(now, resolvedStartTime);
+      const presentation = getPresentation(elapsedMilliseconds, resolvedFormat);
+      const node = timerRef.current;
+      if (node != null) {
+        if (presentation.text !== previousText) {
+          node.textContent = presentation.text;
+          previousText = presentation.text;
+        }
+        if (presentation.dateTime !== previousDateTime) {
+          node.dateTime = presentation.dateTime;
+          previousDateTime = presentation.dateTime;
+        }
+      }
+      timeoutID = setTimeout(tick, getMillisecondsUntilNextChange(now, resolvedStartTime, elapsedMilliseconds, resolvedFormat));
+    };
+    tick();
+    return () => {
+      if (timeoutID !== undefined) {
+        clearTimeout(timeoutID);
+      }
+    };
+  }, [mountTime, resolvedFormat, startTime]);
+  const timerProps = mergeProps(themeProps('timer'), {
+    className,
+    style
+  });
+  return /*#__PURE__*/_jsx(Text, {
+    type: type,
+    size: size,
+    color: color,
+    weight: weight,
+    xstyle: xstyle,
+    ...timerProps,
+    children: /*#__PURE__*/_jsx("time", {
+      ...rest,
+      ref: mergedRef,
+      dateTime: "PT0S",
+      ...{
+        className: "x1heor9g xt0psk2 xjb2p0i x1qlqyl8 x1j61x8r xss6m8b x1pd3egz x15bjb6t"
+      },
+      children: initialPresentation.text
+    })
+  });
+}
+Timer.displayName = 'Timer';

package/dist/Timer/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @file index.ts
+ * @input Imports Timer, TimerProps, and TimerFormat
+ * @output Public Timer component barrel
+ * @position Component subpath entry point for @astryxdesign/core/Timer
+ */
+export { Timer } from './Timer';
+export type { TimerFormat, TimerProps } from './Timer';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Timer/index.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,EAAC,KAAK,EAAC,MAAM,SAAS,CAAC;AAC9B,YAAY,EAAC,WAAW,EAAE,UAAU,EAAC,MAAM,SAAS,CAAC"}

package/dist/Timer/index.js

@@ -0,0 +1,10 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+/**
+ * @file index.ts
+ * @input Imports Timer, TimerProps, and TimerFormat
+ * @output Public Timer component barrel
+ * @position Component subpath entry point for @astryxdesign/core/Timer
+ */
+
+export { Timer } from "./Timer.js";