@astryxdesign/core 0.4.5 → 0.4.6-canary.6a53e69

package/dist/DateInput/DateInput.js

@@ -15,7 +15,7 @@
  * - /apps/storybook/stories/DateInput.stories.tsx (storybook stories)
  * - /packages/cli/assets/templates/blocks/components/DateInput/ (showcase blocks)
  */
-import { useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
+import { use, useId, useState, useCallback, useRef, useOptimistic, useTransition } from 'react';
 import * as stylex from '@stylexjs/stylex';
 import "../theme/tokens.stylex.js";
 import { colorVars, sizeVars, radiusVars, typographyVars, typeScaleVars } from "../theme/tokens.stylex.js";
@@ -29,8 +29,10 @@ import { Spinner } from "../Spinner/index.js";
 import { Calendar } from "../Calendar/index.js";
 import { useCalendarConstraints } from "../Calendar/hooks/index.js";
 import { useInputStatusIcon } from "../hooks/useInputStatusIcon.js";
+import { useMediaQuery } from "../hooks/useMediaQuery.js";
 import { useResolvedRequired } from "../hooks/useResolvedRequired.js";
 import { usePopover } from "../Popover/index.js";
+import { TouchDateField } from "./TouchDateField.js";
 import { useTooltip } from "../Tooltip/index.js";
 import { getInputARIA, isImeKeyEvent, parseDateInput } from "../utils/index.js";
 import { plainDateFromISO, plainDateToISO, formatSharedDate } from "../utils/plainDate.js";
@@ -44,12 +46,12 @@ const styles = {
     kMzoRj: "xc342km",
     ksu8eU: "xng3xce",
     kWkggS: "xjbqb8w",
-    kkrTdU: "x1ypdohk",
+    kkrTdU: "x1ypdohk x16khyan",
     kaIpWk: "xh6dtrn",
     $$css: true
   },
   iconButtonDisabled: {
-    kkrTdU: "x1h6gzvc",
+    kkrTdU: "xt0e3qv",
     $$css: true
   }
 };
@@ -92,21 +94,33 @@ import { mergeProps, mergeRefs, isFocusDetached } from "../utils/index.js";
 import { themeProps } from "../utils/themeProps.js";
 import { focusOutlineStyles } from "../utils/focusOutline.stylex.js";
 import { stableClassName } from "../naming.js";
-import { useTranslator } from "../i18n/index.js";
+import { useTranslator, InternationalizationContext } from "../i18n/index.js";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 /**
- * A date picker component combining a text input with a calendar popover.
+ * The pointer that decides which surface a `DateInput` renders.
  *
- * @example
- * ```
- * <DateInput
- *   label="Event date"
- *   value={date}
- *   onChange={setDate}
- * />
- * ```
+ * `pointer: coarse` is the *primary* pointing device, which is what makes it
+ * the whole test. A touchscreen laptop reports `fine` (its trackpad) with
+ * `any-pointer: coarse` alongside, so it keeps the typable field — right,
+ * because its keyboard is there. A tablet reports `coarse` and gets the
+ * picker, at any width. There is deliberately no width bound: it would only
+ * re-exclude the tablets, since a narrowed desktop window is still a mouse.
+ *
+ * Deliberately NOT exported. It was, briefly, on the theory that an app might
+ * want to ask the same question and lay out to match — but nothing asked, and
+ * six other core components (CheckboxInput, ChatComposerInput, ...) just
+ * write `@media (pointer: coarse)` inline rather than sharing a constant. An
+ * export is additive later and awkward to withdraw, so it waits for a real
+ * caller.
  */
-export function DateInput({
+const TOUCH_POINTER_QUERY = '(pointer: coarse)';
+
+/**
+ * The pointer-driven field: a text input you can type into, with a calendar
+ * in a popover beside it. `DateInput` renders this whenever the primary
+ * pointer is not a finger — see {@link TOUCH_POINTER_QUERY}.
+ */
+function PointerDateField({
   label,
   isLabelHidden = false,
   description,
@@ -142,6 +156,9 @@ export function DateInput({
     isRequired,
     isOptional
   });
+  const {
+    locale
+  } = use(InternationalizationContext);
   const placeholder = placeholderFromProps ?? t('@astryx.dateInput.placeholder');
   const size = useSize(sizeProp, 'md');
   const id = useId();
@@ -219,13 +236,13 @@ export function DateInput({
   // with the ISO value; every other named member reuses Timestamp's shared
   // date mapping. Applies ONLY to the committed value, never to in-progress
   // typed input.
-  const formatCommittedValue = useCallback(iso => typeof format === 'function' ? format(iso) : formatSharedDate(plainDateFromISO(iso), format), [format]);
+  const formatCommittedValue = useCallback(iso => typeof format === 'function' ? format(iso) : formatSharedDate(plainDateFromISO(iso), format, locale), [format, locale]);
 
   // Display value: pending input if typing, otherwise formatted value
   const displayValue = pendingInput !== null ? pendingInput : optimisticValue && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? formatCommittedValue(optimisticValue) : '';
 
   // Check if current input is valid (for styling purposes)
-  const isInputValid = pendingInput === null || !pendingInput.trim() ? true : parseDateInput(pendingInput) !== null;
+  const isInputValid = pendingInput === null || !pendingInput.trim() ? true : parseDateInput(pendingInput, locale) !== null;
   const popover = usePopover({
     dialogLabel: t('@astryx.dateInput.dialogLabel'),
     closeButtonLabel: t('@astryx.dateInput.closeCalendar'),
@@ -301,7 +318,7 @@ export function DateInput({
     setPendingInput(newValue);
 
     // If the input is valid and passes constraints, update immediately
-    const parsed = parseDateInput(newValue);
+    const parsed = parseDateInput(newValue, locale);
     if (parsed && plainDateToISO(parsed) !== value && !isDateDisabled(parsed)) {
       const parsedISO = plainDateToISO(parsed);
       lastFiredValueRef.current = parsedISO;
@@ -309,7 +326,7 @@ export function DateInput({
       // Navigate calendar to show the parsed date's month
       calendarRef.current?.navigateTo(parsedISO);
     }
-  }, [value, fireChange, isDateDisabled, isEffectivelyDisabled]);
+  }, [value, fireChange, isDateDisabled, isEffectivelyDisabled, locale]);
 
   // Commit pending input (shared by blur and Enter key)
   const commitPendingInput = useCallback(() => {
@@ -323,7 +340,7 @@ export function DateInput({
       setPendingInput(null);
       return;
     }
-    const parsed = parseDateInput(pendingInput);
+    const parsed = parseDateInput(pendingInput, locale);
     if (parsed && !isDateDisabled(parsed)) {
       const parsedISO = plainDateToISO(parsed);
       if (parsedISO !== value) {
@@ -331,7 +348,7 @@ export function DateInput({
       }
     }
     setPendingInput(null);
-  }, [pendingInput, value, fireChange, isDateDisabled]);
+  }, [pendingInput, value, fireChange, isDateDisabled, locale]);
 
   // Handle blur - validate, check constraints, and clear pending input
   const handleBlur = useCallback(() => {
@@ -437,13 +454,13 @@ export function DateInput({
           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"
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx x1tgivj0 xjbqb8w x1a2a7pz xeyghm5 xt0e3qv"
         },
         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"
+          className: "x1lliihq x98rzlu xeuugli xc342km xng3xce x1717udv x9ynric xjm74w1 x6pjikd xw6l6zx xjbqb8w x1a2a7pz xeyghm5 xt0e3qv xv1l7n4"
         }
       }[!!isEffectivelyDisabled << 1 | !!!isInputValid << 0]
     }), /*#__PURE__*/_jsx(VisuallyHidden, {
@@ -497,4 +514,55 @@ export function DateInput({
     children: inputWrapper
   });
 }
+PointerDateField.displayName = 'PointerDateField';
+
+/**
+ * A date picker that fits the pointer it is being used with.
+ *
+ * With a mouse or trackpad this is a text input you can type into, with a
+ * calendar in a popover — unchanged, and still the surface every existing
+ * consumer gets. With a finger it is a picker built for one: a bottom sheet
+ * holding one month per screen, swiped sideways, with month and year wheels
+ * behind the header title for the far jumps swiping is bad at.
+ *
+ * The props are identical either way — this is one component with two
+ * surfaces, not two components — so nothing at the call site changes, and a
+ * date typed on a laptop and a date thumbed on a phone are the same value.
+ *
+ * ## Why a runtime switch and not CSS
+ *
+ * The two surfaces are structurally different — a popover anchored to a text
+ * field versus a full-width sheet holding a scroller — so "render both, hide
+ * one" would double the DOM, double the tab stops, and mount two calendars.
+ * The condition is not layout either: it is *which interaction is faster*,
+ * and that depends on the pointer, which CSS cannot hand to JS.
+ *
+ * They are two components rather than one with a branch inside because the
+ * hook lists differ; keeping them separate is what lets each own its own.
+ *
+ * ## Hydration
+ *
+ * `useMediaQuery` reports false during SSR, so server HTML is always the
+ * pointer field and the swap happens after hydration. That is deliberately
+ * unobservable: both surfaces render the SAME closed field — a bordered input
+ * with a calendar icon and the formatted date — and differ only in what
+ * opens. Nothing moves; the field just starts opening a sheet.
+ *
+ * @example
+ * ```
+ * <DateInput
+ *   label="Event date"
+ *   value={date}
+ *   onChange={setDate}
+ * />
+ * ```
+ */
+export function DateInput(props) {
+  const isTouch = useMediaQuery(TOUCH_POINTER_QUERY);
+  return isTouch ? /*#__PURE__*/_jsx(TouchDateField, {
+    ...props
+  }) : /*#__PURE__*/_jsx(PointerDateField, {
+    ...props
+  });
+}
 DateInput.displayName = 'DateInput';

package/dist/DateInput/MonthScroller.d.ts

@@ -0,0 +1,35 @@
+import { type DayOfWeek, type ISODateString, type PlainDate } from '../utils';
+export interface MonthScrollerHandle {
+    /** Bring a month to rest at the top of the scrollport. */
+    scrollToMonth: (monthIndex: number, behavior?: ScrollBehavior) => void;
+}
+export interface MonthScrollerProps {
+    /** Imperative handle for programmatic navigation (Today, the wheels). */
+    handleRef?: React.RefObject<MonthScrollerHandle | null>;
+    /** First reachable month, as a month index. */
+    minMonthIndex: number;
+    /** Last reachable month, as a month index. */
+    maxMonthIndex: number;
+    /** Month to rest on at mount. */
+    initialMonthIndex: number;
+    /** Fires as the scroller passes each month, settled or not. */
+    onVisibleMonthChange: (monthIndex: number) => void;
+    /** Currently selected date. */
+    selectedDate: PlainDate | null;
+    /** Today, for the `aria-current` marker. */
+    today: PlainDate;
+    /** Whether a date fails min/max or a custom constraint. */
+    isDateDisabled: (date: PlainDate) => boolean;
+    /** First column of the week. */
+    weekStartsOn: DayOfWeek;
+    /** Fired when a day is tapped. */
+    onSelect: (value: ISODateString) => void;
+}
+/**
+ * A vertically continuous, snap-paged run of month grids.
+ */
+export declare function MonthScroller({ handleRef, minMonthIndex, maxMonthIndex, initialMonthIndex, onVisibleMonthChange, selectedDate, today, isDateDisabled, weekStartsOn, onSelect, }: MonthScrollerProps): import("react").JSX.Element;
+export declare namespace MonthScroller {
+    var displayName: string;
+}
+//# sourceMappingURL=MonthScroller.d.ts.map

package/dist/DateInput/MonthScroller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MonthScroller.d.ts","sourceRoot":"","sources":["../../src/DateInput/MonthScroller.tsx"],"names":[],"mappings":"AAmDA,OAAO,EACL,KAAK,SAAS,EACd,KAAK,aAAa,EAClB,KAAK,SAAS,EAQf,MAAM,UAAU,CAAC;AA6MlB,MAAM,WAAW,mBAAmB;IAClC,0DAA0D;IAC1D,aAAa,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,cAAc,KAAK,IAAI,CAAC;CACxE;AAED,MAAM,WAAW,kBAAkB;IACjC,yEAAyE;IACzE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,GAAG,IAAI,CAAC,CAAC;IACxD,+CAA+C;IAC/C,aAAa,EAAE,MAAM,CAAC;IACtB,8CAA8C;IAC9C,aAAa,EAAE,MAAM,CAAC;IACtB,iCAAiC;IACjC,iBAAiB,EAAE,MAAM,CAAC;IAC1B,+DAA+D;IAC/D,oBAAoB,EAAE,CAAC,UAAU,EAAE,MAAM,KAAK,IAAI,CAAC;IACnD,+BAA+B;IAC/B,YAAY,EAAE,SAAS,GAAG,IAAI,CAAC;IAC/B,4CAA4C;IAC5C,KAAK,EAAE,SAAS,CAAC;IACjB,2DAA2D;IAC3D,cAAc,EAAE,CAAC,IAAI,EAAE,SAAS,KAAK,OAAO,CAAC;IAC7C,gCAAgC;IAChC,YAAY,EAAE,SAAS,CAAC;IACxB,kCAAkC;IAClC,QAAQ,EAAE,CAAC,KAAK,EAAE,aAAa,KAAK,IAAI,CAAC;CAC1C;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,EAC5B,SAAS,EACT,aAAa,EACb,aAAa,EACb,iBAAiB,EACjB,oBAAoB,EACpB,YAAY,EACZ,KAAK,EACL,cAAc,EACd,YAAY,EACZ,QAAQ,GACT,EAAE,kBAAkB,+BAkapB;yBA7ae,aAAa"}