@astryxdesign/core 0.5.2-canary.2da7a39 → 0.5.2-canary.2e51213

package/dist/DateTimeInput/NativeDateSegment.js

@@ -0,0 +1,235 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file NativeDateSegment.tsx
+ * @input Uses React, Icon, nativeDateSegments, and DateTimeInput's date state
+ * @output Exports NativeDateSegment — the OS-picker date half of DateTimeInput
+ * @position Internal DateTimeInput surface selected by `nativePicker`
+ *
+ * Hands date picking to the platform through `<input type="date">`. Its
+ * sibling NativeTimeSegment hands time picking to `<input type="time">`, so
+ * both halves of DateTimeInput follow the same `nativePicker` choice.
+ *
+ * The input is deliberately uncontrolled and observed through native event
+ * listeners. On iOS, writing its value while the picker sheet is open can
+ * detach the sheet, and React's synthetic change event does not reliably see
+ * picker edits. External values therefore reconcile only while unfocused.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DateTimeInput/DateTimeInput.tsx (surface selection)
+ * - /packages/core/src/DateTimeInput/NativePickerSegments.test.tsx (tests)
+ * - /packages/core/src/DateTimeInput/DateTimeInput.doc.mjs (prop docs)
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { hasEditableDateSegments } from "../DateInput/nativeDateSegments.js";
+import { useMediaQuery } from "../hooks/useMediaQuery.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { Icon } from "../Icon/index.js";
+import { useLocale, useTranslator } from "../i18n/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { focusOutlineStyles, formatSharedDate, parseDateInput, plainDateFromISO, plainDateToISO, themeProps } from "../utils/index.js";
+import { nativePickerSegmentStyles as styles } from "./nativePickerSegmentStyles.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const ISO_DATE = /^\d{4}-\d{2}-\d{2}$/;
+/** The native date half rendered inside DateTimeInput's date wrapper. */
+export function NativeDateSegment({
+  id,
+  inputRef,
+  value,
+  onChange,
+  placeholder,
+  min,
+  max,
+  isDateDisabled,
+  isEffectivelyDisabled,
+  hasDisabledMessage,
+  isEffectivelyRequired,
+  isBusy,
+  statusType,
+  ariaDescribedBy
+}) {
+  const t = useTranslator();
+  const locale = useLocale();
+  const isTouchPointer = useMediaQuery('(pointer: coarse)');
+  const internalInputRef = useRef(null);
+  const mergedInputRef = useMergedRefs(inputRef, internalInputRef);
+  const [rejectedValue, setRejectedValue] = useState(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isSegmentEditable, setIsSegmentEditable] = useState(false);
+  const valueAtFocusRef = useRef(null);
+  const lastCommitRef = useRef(null);
+  const prevValueRef = useRef(value);
+  if (value !== prevValueRef.current) {
+    prevValueRef.current = value;
+    // Keep the accepted DOM value cached while a native picker is open. An
+    // optimistic rollback changes the prop but leaves the focused control alone;
+    // clearing this cache would replay that rejected edit on blur.
+    if (!isFocused) {
+      lastCommitRef.current = null;
+    }
+    if (rejectedValue !== null) {
+      setRejectedValue(null);
+    }
+  }
+  const nativeValue = value && ISO_DATE.test(value) ? value : '';
+  const isInputValid = rejectedValue === null;
+  const overlayText = nativeValue ? formatSharedDate(plainDateFromISO(nativeValue), 'date_long', locale) : placeholder;
+  const showsOverlay = !!overlayText && !(isFocused && isSegmentEditable);
+  const commitValue = useCallback(newValue => {
+    if (isEffectivelyDisabled) {
+      return;
+    }
+    if (lastCommitRef.current === newValue) {
+      return;
+    }
+    if (!newValue) {
+      lastCommitRef.current = newValue;
+      setRejectedValue(null);
+      if (value !== undefined) {
+        onChange(undefined);
+      }
+      return;
+    }
+    const parsed = parseDateInput(newValue, locale);
+    if (!parsed) {
+      return;
+    }
+    if (isDateDisabled(parsed)) {
+      setRejectedValue(newValue);
+      return;
+    }
+    setRejectedValue(null);
+    lastCommitRef.current = newValue;
+    const parsedISO = plainDateToISO(parsed);
+    if (parsedISO !== value) {
+      onChange(parsedISO);
+    }
+  }, [isDateDisabled, isEffectivelyDisabled, locale, onChange, value]);
+  const handleChange = useCallback(event => {
+    commitValue(event.target.value);
+  }, [commitValue]);
+
+  // React's synthetic change system does not reliably observe iOS picker edits.
+  const commitRef = useRef(commitValue);
+  useEffect(() => {
+    commitRef.current = commitValue;
+  });
+  useEffect(() => {
+    const input = internalInputRef.current;
+    if (!input) {
+      return;
+    }
+    const handleNative = () => commitRef.current(input.value);
+    input.addEventListener('input', handleNative);
+    input.addEventListener('change', handleNative);
+    return () => {
+      input.removeEventListener('input', handleNative);
+      input.removeEventListener('change', handleNative);
+    };
+  }, []);
+
+  // React touches defaultValue after mount when the prop changes, so capture it
+  // once. The effect below owns every later write and skips focused controls.
+  const initialValueRef = useRef(null);
+  if (initialValueRef.current === null) {
+    initialValueRef.current = nativeValue;
+  }
+  useEffect(() => {
+    if (isFocused) {
+      return;
+    }
+    const input = internalInputRef.current;
+    if (input && input.value !== nativeValue) {
+      input.value = nativeValue;
+    }
+  }, [isFocused, nativeValue]);
+  const handleFocus = useCallback(() => {
+    valueAtFocusRef.current = nativeValue;
+    setIsSegmentEditable(hasEditableDateSegments(isTouchPointer));
+    setIsFocused(true);
+  }, [isTouchPointer, nativeValue]);
+  const handleBlur = useCallback(() => {
+    const domValue = internalInputRef.current?.value;
+    const valueChangedWhileFocused = valueAtFocusRef.current !== null && valueAtFocusRef.current !== nativeValue;
+    const wasRejected = rejectedValue !== null;
+    valueAtFocusRef.current = null;
+    setIsFocused(false);
+    setRejectedValue(null);
+    if (!valueChangedWhileFocused && !wasRejected && domValue !== undefined && domValue !== nativeValue) {
+      commitValue(domValue);
+    }
+    lastCommitRef.current = null;
+  }, [commitValue, nativeValue, rejectedValue]);
+  const openPicker = useCallback(() => {
+    if (isEffectivelyDisabled) {
+      return;
+    }
+    const input = internalInputRef.current;
+    if (!input) {
+      return;
+    }
+    input.focus();
+    if (typeof input.showPicker === 'function') {
+      try {
+        input.showPicker();
+      } catch {
+        // Focus is the fallback when showPicker needs user activation or the
+        // browser does not expose it for date controls.
+      }
+    }
+  }, [isEffectivelyDisabled]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: openPicker,
+      disabled: isEffectivelyDisabled,
+      "aria-label": t('@astryx.dateInput.openCalendar'),
+      tabIndex: -1,
+      ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "calendar",
+        size: "sm",
+        color: "secondary",
+        ...themeProps('date-time-input-toggle-icon', {
+          state: 'collapsed'
+        })
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      ...stylex.props(styles.slot),
+      children: [/*#__PURE__*/_jsx("input", {
+        ref: mergedInputRef,
+        id: id,
+        type: "date"
+        // UNCONTROLLED on purpose; see initialValueRef and the sync effect.
+        ,
+        defaultValue: initialValueRef.current ?? '',
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        min: min,
+        max: max,
+        disabled: isEffectivelyDisabled && !hasDisabledMessage,
+        "aria-disabled": hasDisabledMessage ? 'true' : undefined,
+        readOnly: hasDisabledMessage || undefined,
+        "aria-describedby": ariaDescribedBy,
+        "aria-required": isEffectivelyRequired ? 'true' : undefined,
+        "aria-invalid": statusType === 'error' || !isInputValid ? 'true' : undefined,
+        "aria-busy": isBusy || undefined,
+        ...stylex.props(styles.input, showsOverlay && styles.inputTextHidden, isEffectivelyDisabled && styles.inputDisabled, !isInputValid && styles.inputInvalid)
+      }), showsOverlay && /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        ...stylex.props(styles.overlay, nativeValue ? styles.overlayValue : styles.overlayPlaceholder, isEffectivelyDisabled && styles.inputDisabled, !isInputValid && !!nativeValue && styles.inputInvalid),
+        children: overlayText
+      })]
+    }), /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      role: "alert",
+      "aria-live": "assertive",
+      children: !isInputValid ? t('@astryx.dateInput.invalidDate') : ''
+    })]
+  });
+}
+NativeDateSegment.displayName = 'NativeDateSegment';

package/dist/DateTimeInput/NativeTimeSegment.d.ts

@@ -0,0 +1,30 @@
+import type { InputStatusType } from '../Field';
+import type { ThemeProps } from '../utils/themeProps';
+import { type ISOTimeString } from '../utils';
+export type NativeTimeSegmentProps = {
+    id: string;
+    inputRef: React.Ref<HTMLInputElement>;
+    value?: ISOTimeString;
+    onChange: (value: ISOTimeString | undefined) => void;
+    placeholder: string;
+    inputLabel?: string;
+    openPickerLabel: string;
+    ariaLabelledBy?: string;
+    iconThemeProps?: ThemeProps;
+    hasAutoFocus?: boolean;
+    min?: ISOTimeString;
+    max?: ISOTimeString;
+    hourFormat: '12h' | '24h';
+    isEffectivelyDisabled: boolean;
+    hasDisabledMessage: boolean;
+    isEffectivelyRequired: boolean;
+    isBusy: boolean;
+    statusType?: InputStatusType;
+    ariaDescribedBy?: string;
+};
+/** The shared native time control rendered inside Astryx field chrome. */
+export declare function NativeTimeSegment({ id, inputRef, value, onChange, placeholder, inputLabel, openPickerLabel, ariaLabelledBy, iconThemeProps, hasAutoFocus, min, max, hourFormat, isEffectivelyDisabled, hasDisabledMessage, isEffectivelyRequired, isBusy, statusType, ariaDescribedBy, }: NativeTimeSegmentProps): import("react").JSX.Element;
+export declare namespace NativeTimeSegment {
+    var displayName: string;
+}
+//# sourceMappingURL=NativeTimeSegment.d.ts.map

package/dist/DateTimeInput/NativeTimeSegment.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NativeTimeSegment.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/NativeTimeSegment.tsx"],"names":[],"mappings":"AA4BA,OAAO,KAAK,EAAC,eAAe,EAAC,MAAM,UAAU,CAAC;AAK9C,OAAO,KAAK,EAAC,UAAU,EAAC,MAAM,qBAAqB,CAAC;AAEpD,OAAO,EAOL,KAAK,aAAa,EACnB,MAAM,UAAU,CAAC;AAmBlB,MAAM,MAAM,sBAAsB,GAAG;IACnC,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IACtC,KAAK,CAAC,EAAE,aAAa,CAAC;IACtB,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IACrD,WAAW,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,eAAe,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,cAAc,CAAC,EAAE,UAAU,CAAC;IAC5B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,GAAG,CAAC,EAAE,aAAa,CAAC;IACpB,UAAU,EAAE,KAAK,GAAG,KAAK,CAAC;IAC1B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,kBAAkB,EAAE,OAAO,CAAC;IAC5B,qBAAqB,EAAE,OAAO,CAAC;IAC/B,MAAM,EAAE,OAAO,CAAC;IAChB,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,CAAC;AAEF,0EAA0E;AAC1E,wBAAgB,iBAAiB,CAAC,EAChC,EAAE,EACF,QAAQ,EACR,KAAK,EACL,QAAQ,EACR,WAAW,EACX,UAAU,EACV,eAAe,EACf,cAAc,EACd,cAAc,EACd,YAAoB,EACpB,GAAG,EACH,GAAG,EACH,UAAU,EACV,qBAAqB,EACrB,kBAAkB,EAClB,qBAAqB,EACrB,MAAM,EACN,UAAU,EACV,eAAe,GAChB,EAAE,sBAAsB,+BA+NxB;yBAnPe,iBAAiB"}

package/dist/DateTimeInput/NativeTimeSegment.js

@@ -0,0 +1,248 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file NativeTimeSegment.tsx
+ * @input Uses React, native picker segment styles, and shared time utilities
+ * @output Exports NativeTimeSegment — the shared OS-picker time control
+ * @position Internal native control used by DateTimeInput and TimeInput
+ *
+ * Hands time picking to the platform through `<input type="time">`. The input
+ * is deliberately uncontrolled and observed through native event listeners,
+ * matching NativeDateSegment's iOS-safe value ownership: external values only
+ * reconcile while the picker is unfocused, and native edits do not depend on
+ * React's synthetic change event.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DateTimeInput/DateTimeInput.tsx (DateTimeInput integration)
+ * - /packages/core/src/TimeInput/TimeInput.tsx (TimeInput integration)
+ * - /packages/core/src/DateTimeInput/NativePickerSegments.test.tsx (DateTimeInput tests)
+ * - /packages/core/src/TimeInput/NativeTimeInput.test.tsx (TimeInput tests)
+ * - /packages/core/src/DateTimeInput/DateTimeInput.doc.mjs (DateTimeInput prop docs)
+ * - /packages/core/src/TimeInput/TimeInput.doc.mjs (TimeInput prop docs)
+ */
+import { useCallback, useEffect, useRef, useState } from 'react';
+import * as stylex from '@stylexjs/stylex';
+import { hasEditableDateSegments } from "../DateInput/nativeDateSegments.js";
+import { useMediaQuery } from "../hooks/useMediaQuery.js";
+import { useMergedRefs } from "../hooks/useMergedRefs.js";
+import { Icon } from "../Icon/index.js";
+import { useTranslator } from "../i18n/index.js";
+import { VisuallyHidden } from "../VisuallyHidden/index.js";
+import { focusOutlineStyles, formatDisplayTime12h, formatDisplayTime24h, formatISOTime, isTimeInRange, parseISOTime } from "../utils/index.js";
+import { nativePickerSegmentStyles as styles } from "./nativePickerSegmentStyles.js";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+const FRACTIONAL_SECONDS = /\.\d+$/;
+function normalizeNativeTime(value) {
+  if (!value) {
+    return undefined;
+  }
+  const withoutFraction = value.replace(FRACTIONAL_SECONDS, '');
+  const parsed = parseISOTime(withoutFraction);
+  return parsed ? formatISOTime(parsed, false) : undefined;
+}
+/** The shared native time control rendered inside Astryx field chrome. */
+export function NativeTimeSegment({
+  id,
+  inputRef,
+  value,
+  onChange,
+  placeholder,
+  inputLabel,
+  openPickerLabel,
+  ariaLabelledBy,
+  iconThemeProps,
+  hasAutoFocus = false,
+  min,
+  max,
+  hourFormat,
+  isEffectivelyDisabled,
+  hasDisabledMessage,
+  isEffectivelyRequired,
+  isBusy,
+  statusType,
+  ariaDescribedBy
+}) {
+  const t = useTranslator();
+  const isTouchPointer = useMediaQuery('(pointer: coarse)');
+  const internalInputRef = useRef(null);
+  const mergedInputRef = useMergedRefs(inputRef, internalInputRef);
+  const [rejectedValue, setRejectedValue] = useState(null);
+  const [isFocused, setIsFocused] = useState(false);
+  const [isSegmentEditable, setIsSegmentEditable] = useState(false);
+  const valueAtFocusRef = useRef(null);
+  const lastCommitRef = useRef(null);
+  const prevValueRef = useRef(value);
+  if (value !== prevValueRef.current) {
+    prevValueRef.current = value;
+    // Preserve the accepted DOM value while the OS wheel is open so an
+    // optimistic rollback cannot replay that edit when the field blurs.
+    if (!isFocused) {
+      lastCommitRef.current = null;
+    }
+    if (rejectedValue !== null) {
+      setRejectedValue(null);
+    }
+  }
+  const nativeValue = normalizeNativeTime(value) ?? '';
+  const isInputValid = rejectedValue === null;
+  const formatDisplayTime = hourFormat === '12h' ? formatDisplayTime12h : formatDisplayTime24h;
+  const overlayText = nativeValue ? formatDisplayTime(nativeValue, false) : placeholder;
+  const showsOverlay = !!overlayText && !(isFocused && isSegmentEditable);
+  const commitValue = useCallback(newValue => {
+    if (isEffectivelyDisabled || lastCommitRef.current === newValue) {
+      return;
+    }
+    if (!newValue) {
+      lastCommitRef.current = newValue;
+      setRejectedValue(null);
+      if (value !== undefined) {
+        onChange(undefined);
+      }
+      return;
+    }
+    const normalized = normalizeNativeTime(newValue);
+    if (!normalized) {
+      return;
+    }
+    if (!isTimeInRange(normalized, min, max)) {
+      setRejectedValue(newValue);
+      return;
+    }
+    setRejectedValue(null);
+    lastCommitRef.current = newValue;
+    if (normalized !== value) {
+      onChange(normalized);
+    }
+  }, [isEffectivelyDisabled, max, min, onChange, value]);
+  const handleChange = useCallback(event => {
+    commitValue(event.target.value);
+  }, [commitValue]);
+
+  // React's synthetic change system does not reliably observe iOS picker edits.
+  const commitRef = useRef(commitValue);
+  useEffect(() => {
+    commitRef.current = commitValue;
+  });
+  useEffect(() => {
+    const input = internalInputRef.current;
+    if (!input) {
+      return;
+    }
+    const handleNative = () => commitRef.current(input.value);
+    input.addEventListener('input', handleNative);
+    input.addEventListener('change', handleNative);
+    return () => {
+      input.removeEventListener('input', handleNative);
+      input.removeEventListener('change', handleNative);
+    };
+  }, []);
+
+  // React touches defaultValue after mount when the prop changes. Capture it
+  // once, then reconcile through the unfocused-only effect below.
+  const initialValueRef = useRef(null);
+  if (initialValueRef.current === null) {
+    initialValueRef.current = nativeValue;
+  }
+  useEffect(() => {
+    if (isFocused) {
+      return;
+    }
+    const input = internalInputRef.current;
+    if (input && input.value !== nativeValue) {
+      input.value = nativeValue;
+    }
+  }, [isFocused, nativeValue]);
+  const handleFocus = useCallback(() => {
+    valueAtFocusRef.current = nativeValue;
+    // The engine probe classifies whether WebKit/Blink exposes editable native
+    // segments. Date and time controls share that engine-level behavior.
+    setIsSegmentEditable(hasEditableDateSegments(isTouchPointer));
+    setIsFocused(true);
+  }, [isTouchPointer, nativeValue]);
+  const handleBlur = useCallback(() => {
+    const domValue = internalInputRef.current?.value;
+    const valueChangedWhileFocused = valueAtFocusRef.current !== null && valueAtFocusRef.current !== nativeValue;
+    const wasRejected = rejectedValue !== null;
+    valueAtFocusRef.current = null;
+    setIsFocused(false);
+    setRejectedValue(null);
+    if (!valueChangedWhileFocused && !wasRejected && domValue !== undefined && domValue !== nativeValue) {
+      commitValue(domValue);
+    }
+    lastCommitRef.current = null;
+  }, [commitValue, nativeValue, rejectedValue]);
+  const openPicker = useCallback(() => {
+    if (isEffectivelyDisabled) {
+      return;
+    }
+    const input = internalInputRef.current;
+    if (!input) {
+      return;
+    }
+    input.focus();
+    if (typeof input.showPicker === 'function') {
+      try {
+        input.showPicker();
+      } catch {
+        // Focus raises the iOS picker and is the fallback when showPicker needs
+        // user activation or is unavailable.
+      }
+    }
+  }, [isEffectivelyDisabled]);
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("button", {
+      type: "button",
+      onClick: openPicker,
+      disabled: isEffectivelyDisabled,
+      "aria-label": openPickerLabel,
+      tabIndex: -1,
+      ...stylex.props(focusOutlineStyles.focusVisible, styles.iconButton, isEffectivelyDisabled && styles.iconButtonDisabled),
+      children: /*#__PURE__*/_jsx(Icon, {
+        icon: "clock",
+        size: "sm",
+        color: "secondary",
+        ...iconThemeProps
+      })
+    }), /*#__PURE__*/_jsxs("span", {
+      ...stylex.props(styles.slot),
+      children: [/*#__PURE__*/_jsx("input", {
+        ref: mergedInputRef,
+        id: id,
+        type: "time"
+        // UNCONTROLLED on purpose; see initialValueRef and the sync effect.
+        ,
+        defaultValue: initialValueRef.current ?? '',
+        onChange: handleChange,
+        onFocus: handleFocus,
+        onBlur: handleBlur,
+        min: min,
+        max: max,
+        step: 60,
+        disabled: isEffectivelyDisabled && !hasDisabledMessage,
+        "aria-disabled": hasDisabledMessage ? 'true' : undefined,
+        readOnly: hasDisabledMessage || undefined,
+        "aria-label": ariaLabelledBy ? undefined : inputLabel,
+        "aria-labelledby": ariaLabelledBy,
+        "aria-describedby": ariaDescribedBy,
+        autoFocus: hasAutoFocus,
+        "data-autofocus": hasAutoFocus || undefined,
+        "aria-required": isEffectivelyRequired ? 'true' : undefined,
+        "aria-invalid": statusType === 'error' || !isInputValid ? 'true' : undefined,
+        "aria-busy": isBusy || undefined,
+        ...stylex.props(styles.input, showsOverlay && styles.inputTextHidden, isEffectivelyDisabled && styles.inputDisabled, !isInputValid && styles.inputInvalid)
+      }), showsOverlay && /*#__PURE__*/_jsx("span", {
+        "aria-hidden": "true",
+        ...stylex.props(styles.overlay, nativeValue ? styles.overlayValue : styles.overlayPlaceholder, isEffectivelyDisabled && styles.inputDisabled, !isInputValid && !!nativeValue && styles.inputInvalid),
+        children: overlayText
+      })]
+    }), /*#__PURE__*/_jsx(VisuallyHidden, {
+      as: "div",
+      role: "alert",
+      "aria-live": "assertive",
+      children: !isInputValid ? t('@astryx.timeInput.invalidTime') : ''
+    })]
+  });
+}
+NativeTimeSegment.displayName = 'NativeTimeSegment';

package/dist/DateTimeInput/index.d.ts

@@ -5,5 +5,5 @@
  * @position Package entry point for DateTimeInput
  */
 export { DateTimeInput } from './DateTimeInput';
-export type { DateTimeInputProps, DateTimeInputSize, DateTimeInputHourFormat, DateTimeInputTimeIncrement, DateTimeInputTimeOptionInterval, DateTimeInputStatus, DateTimeInputStatusType, ISODateTimeString, } from './DateTimeInput';
+export type { DateTimeInputProps, DateTimeInputSize, DateTimeInputHourFormat, DateTimeInputNativePicker, DateTimeInputTimeIncrement, DateTimeInputTimeOptionInterval, DateTimeInputStatus, DateTimeInputStatusType, ISODateTimeString, } from './DateTimeInput';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,0BAA0B,EAC1B,+BAA+B,EAC/B,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,aAAa,EAAC,MAAM,iBAAiB,CAAC;AAC9C,YAAY,EACV,kBAAkB,EAClB,iBAAiB,EACjB,uBAAuB,EACvB,yBAAyB,EACzB,0BAA0B,EAC1B,+BAA+B,EAC/B,mBAAmB,EACnB,uBAAuB,EACvB,iBAAiB,GAClB,MAAM,iBAAiB,CAAC"}

package/dist/DateTimeInput/nativePickerSegmentStyles.d.ts

@@ -0,0 +1,95 @@
+/**
+ * @file nativePickerSegmentStyles.ts
+ * @input Uses StyleX and Astryx typography, color, and radius tokens
+ * @output Exports styles shared by DateTimeInput's native date and time controls
+ * @position Internal styling shared by NativeDateSegment and NativeTimeSegment
+ */
+import * as stylex from '@stylexjs/stylex';
+export declare const nativePickerSegmentStyles: Readonly<{
+    readonly iconButton: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly justifyContent: stylex.StyleXClassNameFor<"justifyContent", "center">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+        readonly margin: stylex.StyleXClassNameFor<"margin", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "default" | "pointer">;
+        readonly borderRadius: stylex.StyleXClassNameFor<"borderRadius", "8px">;
+    }>;
+    readonly iconButtonDisabled: Readonly<{
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
+    }>;
+    readonly input: Readonly<{
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 0>;
+        readonly borderWidth: stylex.StyleXClassNameFor<"borderWidth", 0>;
+        readonly borderStyle: stylex.StyleXClassNameFor<"borderStyle", "none">;
+        readonly padding: stylex.StyleXClassNameFor<"padding", 0>;
+        readonly fontFamily: stylex.StyleXClassNameFor<"fontFamily", "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, Helvetica, Arial, sans-serif">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-base)" | `max(1rem, ${stylex.StyleXVar<"var(--font-size-base)">})`>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.4286">;
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
+        readonly backgroundColor: stylex.StyleXClassNameFor<"backgroundColor", "transparent">;
+        readonly outline: stylex.StyleXClassNameFor<"outline", "none">;
+        readonly height: stylex.StyleXClassNameFor<"height", "1lh" | `calc(max(1rem, ${stylex.StyleXVar<"var(--font-size-base)">}) * ${stylex.StyleXVar<"1.4286">})`>;
+        readonly WebkitAppearance: stylex.StyleXClassNameFor<"WebkitAppearance", "none">;
+        readonly appearance: stylex.StyleXClassNameFor<"appearance", "none">;
+        readonly '::-webkit-calendar-picker-indicator': stylex.StyleXClassNameFor<"::-webkit-calendar-picker-indicator", {
+            readonly display: "none";
+        }>;
+        readonly '::-webkit-date-and-time-value': stylex.StyleXClassNameFor<"::-webkit-date-and-time-value", {
+            readonly textAlign: "start";
+            readonly marginBlock: 0;
+            readonly marginInline: 0;
+            readonly paddingBlock: 0;
+            readonly paddingInline: 0;
+            readonly lineHeight: "inherit";
+            readonly minHeight: 0;
+        }>;
+        readonly '::-webkit-datetime-edit': stylex.StyleXClassNameFor<"::-webkit-datetime-edit", {
+            readonly paddingBlock: 0;
+            readonly paddingInline: 0;
+            readonly lineHeight: "inherit";
+        }>;
+    }>;
+    readonly inputDisabled: Readonly<{
+        readonly cursor: stylex.StyleXClassNameFor<"cursor", "default">;
+    }>;
+    readonly inputInvalid: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;
+    }>;
+    readonly inputTextHidden: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "transparent">;
+        readonly WebkitTextFillColor: stylex.StyleXClassNameFor<"WebkitTextFillColor", "transparent">;
+    }>;
+    readonly slot: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "relative">;
+        readonly display: stylex.StyleXClassNameFor<"display", "flex">;
+        readonly alignItems: stylex.StyleXClassNameFor<"alignItems", "center">;
+        readonly flex: stylex.StyleXClassNameFor<"flex", 1>;
+        readonly minInlineSize: stylex.StyleXClassNameFor<"minInlineSize", 0>;
+    }>;
+    readonly overlay: Readonly<{
+        readonly position: stylex.StyleXClassNameFor<"position", "absolute">;
+        readonly insetInlineStart: stylex.StyleXClassNameFor<"insetInlineStart", 0>;
+        readonly insetInlineEnd: stylex.StyleXClassNameFor<"insetInlineEnd", 0>;
+        readonly insetBlock: stylex.StyleXClassNameFor<"insetBlock", 0>;
+        readonly display: stylex.StyleXClassNameFor<"display", "block">;
+        readonly fontSize: stylex.StyleXClassNameFor<"fontSize", "var(--font-size-base)" | `max(1rem, ${stylex.StyleXVar<"var(--font-size-base)">})`>;
+        readonly lineHeight: stylex.StyleXClassNameFor<"lineHeight", "1.4286">;
+        readonly pointerEvents: stylex.StyleXClassNameFor<"pointerEvents", "none">;
+        readonly overflow: stylex.StyleXClassNameFor<"overflow", "hidden">;
+        readonly whiteSpace: stylex.StyleXClassNameFor<"whiteSpace", "nowrap">;
+        readonly textOverflow: stylex.StyleXClassNameFor<"textOverflow", "ellipsis">;
+    }>;
+    readonly overlayValue: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#0A1317, #DFE2E5)">;
+    }>;
+    readonly overlayPlaceholder: Readonly<{
+        readonly color: stylex.StyleXClassNameFor<"color", "light-dark(#4E606F, #AAAFB5)">;
+    }>;
+}>;
+//# sourceMappingURL=nativePickerSegmentStyles.d.ts.map

package/dist/DateTimeInput/nativePickerSegmentStyles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nativePickerSegmentStyles.d.ts","sourceRoot":"","sources":["../../src/DateTimeInput/nativePickerSegmentStyles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AAEH,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAQ3C,eAAO,MAAM,yBAAyB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAsGpC,CAAC"}