@astryxdesign/core 0.4.6 → 0.4.7-canary.0b6762d

package/src/theme/MediaTheme.doc.mjs

@@ -68,7 +68,7 @@ export const docs = {
       {
         guidance: true,
         description:
-          'Prefer mode="auto" when the surface color comes from a theme token. A token named "inverted" is not guaranteed to be inverted, and auto measures what was actually painted instead of trusting the name — including deciding that a surface needs no media context at all.',
+          'Prefer mode="auto" when the surface color comes from a theme token. A token named "inverted" is not guaranteed to be inverted, and auto measures what was actually painted instead of trusting the name. It can even decide that a surface needs no media context at all.',
       },
       {
         guidance: true,
@@ -93,14 +93,14 @@ export const docs = {
       type: "'dark' | 'light' | 'auto' | 'off'",
       required: true,
       description:
-        'Surface luminance context: dark for content over dark backgrounds (light text, white-tinted interactions), light for content over light backgrounds (dark text, black-tinted interactions), auto to decide from the painted surface — no media context when the ambient text already reads on the surface (3:1), otherwise the side that reads better — and off to turn it off explicitly. The element renders either way, so a surface can switch contexts without remounting children.',
+        'Surface luminance context: dark for content over dark backgrounds (light text, white-tinted interactions), light for content over light backgrounds (dark text, black-tinted interactions), auto to decide from the painted surface (no media context when the ambient text already reads on the surface at 3:1, otherwise the side that reads better), and off to turn it off explicitly. The element renders either way, so a surface can switch contexts without remounting children.',
     },
     {
       name: 'fallback',
       type: "'dark' | 'light'",
       default: "'dark'",
       description:
-        'Which side auto uses when the surface cannot be measured: during SSR, on the first client frame, and whenever the backdrop is not knowable from CSS — most often a background-image, whose pixels need sampling (useImageMode) rather than a computed style. Ignored unless mode is auto.',
+        'Which side auto uses when the surface cannot be measured: during SSR, on the first client frame, and whenever the backdrop is not knowable from CSS, most often a background-image, whose pixels need sampling (useImageMode) rather than a computed style. Ignored unless mode is auto.',
     },
     {
       name: 'children',
@@ -126,7 +126,7 @@ export const docsDense = {
       {
         guidance: true,
         description:
-          'Prefer mode="auto" when surface color comes from a theme token — a token named "inverted" is not guaranteed to be; auto measures what was painted.',
+          'Prefer mode="auto" when surface color comes from a theme token; a token named "inverted" is not guaranteed to be; auto measures what was painted.',
       },
       {
         guidance: true,
@@ -148,6 +148,6 @@ export const docsDense = {
   propDescriptions: {
     mode: 'surface luminance context: dark for content over dark backgrounds (light text, white-tinted interactions), light for content over light backgrounds (dark text, black-tinted interactions), auto to decide from painted surface (none if ambient text already reads at 3:1, else better-reading side), off to turn off explicitly (element still renders, so children never remount)',
     fallback:
-      'side auto uses when surface is unmeasurable (SSR, first frame, background-image — those need useImageMode sampling); ignored unless mode is auto',
+      'side auto uses when surface is unmeasurable (SSR, first frame, background-image, which needs useImageMode sampling); ignored unless mode is auto',
   },
 };

package/src/utils/timeParser.test.ts

@@ -135,6 +135,9 @@ describe('parseTimeInput', () => {
   it('parses compact formats', () => {
     expect(parseTimeInput('1430')).toBe('14:30');
     expect(parseTimeInput('0000')).toBe('00:00');
+    expect(parseTimeInput('0230pm')).toBe('14:30');
+    expect(parseTimeInput('1230am')).toBe('00:30');
+    expect(parseTimeInput('023045pm', true)).toBe('14:30:45');
   });
 
   it('parses hour-only with meridiem', () => {
@@ -259,7 +262,9 @@ describe('adjustTime', () => {
 
   it('wraps large negative deltas in constant time', () => {
     expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7)).toBe('10:00');
-    expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7 - 30)).toBe('09:30');
+    expect(adjustTime('10:00' as ISOTimeString, -1440 * 1e7 - 30)).toBe(
+      '09:30',
+    );
   });
 
   it('adds minutes', () => {

package/src/utils/timeParser.ts

@@ -4,7 +4,7 @@
  * @file timeParser.ts
  * @input Uses string parsing
  * @output Exports time parsing and formatting utilities
- * @position Shared utility; used by TimePicker
+ * @position Shared utility; used by TimeInput and DateTimeInput
  *
  * SYNC: When modified, update this header
  */
@@ -175,16 +175,29 @@ export function parseTimeInput(
   // Remove AM/PM suffix
   const timeStr = trimmed.replace(/\s*[ap]\.?m?\.?\s*$/i, '').trim();
 
+  const convertHourTo24Hour = (hour: number): number | null => {
+    if (!hasMeridiem) {
+      return hour;
+    }
+    if (hour < 1 || hour > 12) {
+      return null;
+    }
+    if (isPM && hour !== 12) {
+      return hour + 12;
+    }
+    if (isAM && hour === 12) {
+      return 0;
+    }
+    return hour;
+  };
+
   // Handle formats like "2pm" -> "2"
   if (/^\d{1,2}$/.test(timeStr)) {
     const hour = parseInt(timeStr, 10);
-    if (hour >= 1 && hour <= 12 && hasMeridiem) {
-      let hour24 = hour;
-      if (isPM && hour !== 12) {
-        hour24 = hour + 12;
-      }
-      if (isAM && hour === 12) {
-        hour24 = 0;
+    if (hasMeridiem) {
+      const hour24 = convertHourTo24Hour(hour);
+      if (hour24 === null) {
+        return null;
       }
       return formatISOTime(
         {hour: hour24, minute: 0, second: 0},
@@ -201,8 +214,15 @@ export function parseTimeInput(
   if (/^\d{4}$/.test(timeStr)) {
     const hour = parseInt(timeStr.slice(0, 2), 10);
     const minute = parseInt(timeStr.slice(2, 4), 10);
-    if (hour >= 0 && hour <= 23 && minute >= 0 && minute <= 59) {
-      return formatISOTime({hour, minute, second: 0}, includeSeconds);
+    const hour24 = convertHourTo24Hour(hour);
+    if (
+      hour24 !== null &&
+      hour24 >= 0 &&
+      hour24 <= 23 &&
+      minute >= 0 &&
+      minute <= 59
+    ) {
+      return formatISOTime({hour: hour24, minute, second: 0}, includeSeconds);
     }
     return null;
   }
@@ -212,15 +232,17 @@ export function parseTimeInput(
     const hour = parseInt(timeStr.slice(0, 2), 10);
     const minute = parseInt(timeStr.slice(2, 4), 10);
     const second = parseInt(timeStr.slice(4, 6), 10);
+    const hour24 = convertHourTo24Hour(hour);
     if (
-      hour >= 0 &&
-      hour <= 23 &&
+      hour24 !== null &&
+      hour24 >= 0 &&
+      hour24 <= 23 &&
       minute >= 0 &&
       minute <= 59 &&
       second >= 0 &&
       second <= 59
     ) {
-      return formatISOTime({hour, minute, second}, includeSeconds);
+      return formatISOTime({hour: hour24, minute, second}, includeSeconds);
     }
     return null;
   }

package/src/__tests__/inputWidthContract.test.tsx

@@ -1,69 +0,0 @@
-// Copyright (c) Meta Platforms, Inc. and affiliates.
-
-import {describe, it, expect} from 'vitest';
-
-import {docs as CheckboxInputDocs} from '../CheckboxInput/CheckboxInput.doc.mjs';
-import {docs as CheckboxListDocs} from '../CheckboxList/CheckboxList.doc.mjs';
-import {docs as DateInputDocs} from '../DateInput/DateInput.doc.mjs';
-import {docs as DateRangeInputDocs} from '../DateRangeInput/DateRangeInput.doc.mjs';
-import {docs as DateTimeInputDocs} from '../DateTimeInput/DateTimeInput.doc.mjs';
-import {docs as FileInputDocs} from '../FileInput/FileInput.doc.mjs';
-import {docs as MultiSelectorDocs} from '../MultiSelector/MultiSelector.doc.mjs';
-import {docs as NumberInputDocs} from '../NumberInput/NumberInput.doc.mjs';
-import {docs as RadioListDocs} from '../RadioList/RadioList.doc.mjs';
-import {docs as SelectorDocs} from '../Selector/Selector.doc.mjs';
-import {docs as SliderDocs} from '../Slider/Slider.doc.mjs';
-import {docs as SwitchDocs} from '../Switch/Switch.doc.mjs';
-import {docs as TextAreaDocs} from '../TextArea/TextArea.doc.mjs';
-import {docs as TextInputDocs} from '../TextInput/TextInput.doc.mjs';
-import {docs as TimeInputDocs} from '../TimeInput/TimeInput.doc.mjs';
-import {docs as TokenizerDocs} from '../Tokenizer/Tokenizer.doc.mjs';
-import {docs as TypeaheadDocs} from '../Typeahead/Typeahead.doc.mjs';
-
-const inputDocsSuite = [
-  {name: 'CheckboxInput', docs: CheckboxInputDocs},
-  {name: 'CheckboxList', docs: CheckboxListDocs},
-  {name: 'DateInput', docs: DateInputDocs},
-  {name: 'DateRangeInput', docs: DateRangeInputDocs},
-  {name: 'DateTimeInput', docs: DateTimeInputDocs},
-  {name: 'FileInput', docs: FileInputDocs},
-  {name: 'MultiSelector', docs: MultiSelectorDocs},
-  {name: 'NumberInput', docs: NumberInputDocs},
-  {name: 'RadioList', docs: RadioListDocs},
-  {name: 'Selector', docs: SelectorDocs},
-  {name: 'Slider', docs: SliderDocs},
-  {name: 'Switch', docs: SwitchDocs},
-  {name: 'TextArea', docs: TextAreaDocs},
-  {name: 'TextInput', docs: TextInputDocs},
-  {name: 'TimeInput', docs: TimeInputDocs},
-  {name: 'Tokenizer', docs: TokenizerDocs},
-  {name: 'Typeahead', docs: TypeaheadDocs},
-];
-
-describe('Input Family width Prop Contract (#4163)', () => {
-  inputDocsSuite.forEach(({name, docs}) => {
-    it(`documents the width prop for ${name}`, () => {
-      // `docs` is the ComponentDoc union (single vs multi component); narrow it
-      // for structural access to either the top-level props or the first
-      // sub-component's props.
-      const doc = docs as {
-        props?: {name: string; type: string}[];
-        components?: {props?: {name: string; type: string}[]}[];
-      };
-      const propsList = (doc.props || doc.components?.[0]?.props) as {
-        name: string;
-        type: string;
-      }[];
-      expect(
-        propsList,
-        `${name}.doc.mjs must expose a props array`,
-      ).toBeDefined();
-      const widthProp = propsList.find(p => p.name === 'width');
-      expect(
-        widthProp,
-        `${name}.doc.mjs must document the width prop`,
-      ).toBeDefined();
-      expect(widthProp?.type).toBe('SizeValue');
-    });
-  });
-});