@wallarm-org/design-system 1.0.0-rc-feature-AS-877-fix-filter-code.4 → 1.0.0-rc-feature-AS-884.1

package/dist/components/Calendar/CalendarContent.js

@@ -6,7 +6,7 @@ const CalendarContent = /*#__PURE__*/ forwardRef(({ children, className }, ref)=
         children: /*#__PURE__*/ jsx(DatePicker.Positioner, {
             children: /*#__PURE__*/ jsx(DatePicker.Content, {
                 ref: ref,
-                className: cn('flex bg-bg-surface-1 rounded-12 shadow-lg', 'border border-border-primary-light', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className),
+                className: cn('flex bg-bg-surface-2 rounded-12 shadow-md', 'border border-border-primary-light', 'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95', 'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95', className),
                 children: children
             })
         })

package/dist/components/Calendar/CalendarGrid.js

@@ -16,7 +16,7 @@ const CalendarGrid = ({ showArrows = true, showJumpToToday = false, monthOffset
             const targetMonth = visibleRange.start.month;
             return /*#__PURE__*/ jsxs(DatePicker.View, {
                 view: "day",
-                className: "flex flex-col gap-8",
+                className: "flex flex-col",
                 children: [
                     /*#__PURE__*/ jsx(CalendarHeader, {
                         showArrows: showArrows,
@@ -59,7 +59,7 @@ const CalendarGrid = ({ showArrows = true, showJumpToToday = false, monthOffset
                                                     children: /*#__PURE__*/ jsx("div", {
                                                         className: cn('flex items-center justify-center relative', 'w-40 h-40 p-2'),
                                                         children: /*#__PURE__*/ jsx("span", {
-                                                            className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'text-text-secondary', (cellState.inRange || cellState.inHoveredRange) && 'bg-states-primary-pressed', cellState.selected && 'bg-bg-fill-brand text-text-primary-alt'),
+                                                            className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'text-text-secondary', (cellState.inRange || cellState.inHoveredRange) && 'bg-states-primary-pressed', cellState.selected && 'bg-bg-fill-brand text-text-primary-alt font-medium'),
                                                             children: day.day
                                                         })
                                                     })
@@ -77,11 +77,11 @@ const CalendarGrid = ({ showArrows = true, showJumpToToday = false, monthOffset
                                                         className: cn('flex items-center justify-center relative', 'w-40 h-40 p-2'),
                                                         children: [
                                                             /*#__PURE__*/ jsx("span", {
-                                                                className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'text-text-primary', (cellState.inRange || cellState.inHoveredRange) && 'bg-states-primary-pressed', cellState.selected && 'bg-bg-fill-brand text-text-primary-alt'),
+                                                                className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'text-text-primary', (cellState.inRange || cellState.inHoveredRange) && 'bg-states-primary-pressed', cellState.selected && 'bg-bg-fill-brand text-text-primary-alt font-medium'),
                                                                 children: day.day
                                                             }),
                                                             isToday && /*#__PURE__*/ jsx("span", {
-                                                                className: cn('absolute bottom-4 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full', 'bg-bg-fill-brand', cellState.selected && 'bg-text-primary-alt')
+                                                                className: cn('absolute bottom-7 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full', 'bg-bg-fill-brand', cellState.selected && 'bg-text-primary-alt')
                                                             })
                                                         ]
                                                     })
@@ -94,11 +94,11 @@ const CalendarGrid = ({ showArrows = true, showJumpToToday = false, monthOffset
                                                     className: cn('flex items-center justify-center relative', 'w-40 h-40 p-2', 'cursor-pointer select-none', 'outline-none'),
                                                     children: [
                                                         /*#__PURE__*/ jsx("span", {
-                                                            className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'transition-colors', '[[data-selected]_&]:bg-bg-fill-brand [[data-selected]_&]:text-text-primary-alt', '[[data-in-range]_&]:bg-states-primary-pressed', '[[data-outside-range]_&]:text-text-secondary', '[[data-disabled]_&]:cursor-not-allowed [[data-disabled]_&]:line-through [[data-disabled]_&]:text-text-secondary', 'not-[[data-selected]_&]:not-[[data-disabled]_&]:hover:bg-states-primary-hover', 'not-[[data-selected]_&]:not-[[data-disabled]_&]:active:bg-states-primary-pressed', '[:focus-visible_&]:ring-3 [:focus-visible_&]:ring-focus-primary', '[[data-selected]:focus-visible_&]:ring-focus-brand'),
+                                                            className: cn('flex items-center justify-center', 'w-36 h-36 rounded-8', 'font-mono text-sm leading-sm', 'transition-colors', '[[data-selected]_&]:bg-bg-fill-brand [[data-selected]_&]:text-text-primary-alt [[data-selected]_&]:font-medium', '[[data-in-range]_&]:bg-states-primary-pressed', '[[data-outside-range]_&]:text-text-secondary', '[[data-disabled]_&]:cursor-not-allowed [[data-disabled]_&]:line-through [[data-disabled]_&]:text-text-secondary', 'not-[[data-selected]_&]:not-[[data-disabled]_&]:hover:bg-states-primary-hover', 'not-[[data-selected]_&]:not-[[data-disabled]_&]:active:bg-states-primary-pressed', '[:focus-visible_&]:ring-3 [:focus-visible_&]:ring-focus-primary', '[[data-selected]:focus-visible_&]:ring-focus-brand'),
                                                             children: day.day
                                                         }),
                                                         isToday && /*#__PURE__*/ jsx("span", {
-                                                            className: cn('absolute bottom-4 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full', 'bg-bg-fill-brand', '[[data-selected]_&]:bg-text-primary-alt')
+                                                            className: cn('absolute bottom-7 left-1/2 -translate-x-1/2 w-4 h-4 rounded-full', 'bg-bg-fill-brand', '[[data-selected]_&]:bg-text-primary-alt')
                                                         })
                                                     ]
                                                 })

package/dist/components/Calendar/CalendarGrids.js

@@ -7,7 +7,7 @@ const CalendarGrids = /*#__PURE__*/ forwardRef(({ className }, ref)=>{
     const { isRange } = useCalendarContext();
     return /*#__PURE__*/ jsxs("div", {
         ref: ref,
-        className: cn('flex px-12 pb-12 pt-12', isRange && 'gap-12', className),
+        className: cn('flex px-12 pb-8 first:pt-12', isRange && 'gap-12', className),
         children: [
             /*#__PURE__*/ jsx(CalendarGrid, {
                 showArrows: !isRange,

package/dist/components/Calendar/CalendarHeader.js

@@ -63,7 +63,7 @@ const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRan
                                                             api.setFocusedValue(todayDate);
                                                         },
                                                         children: /*#__PURE__*/ jsx(JumpToTodayIcon, {
-                                                            size: "sm"
+                                                            size: "md"
                                                         })
                                                     })
                                                 }),
@@ -94,7 +94,7 @@ const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRan
                                                             size: "small",
                                                             "aria-label": "Previous month",
                                                             children: /*#__PURE__*/ jsx(ArrowLeft, {
-                                                                size: "sm"
+                                                                size: "md"
                                                             })
                                                         })
                                                     })
@@ -116,7 +116,7 @@ const CalendarHeader = ({ showArrows = true, showJumpToToday = false, visibleRan
                                                             size: "small",
                                                             "aria-label": "Next month",
                                                             children: /*#__PURE__*/ jsx(ArrowRight, {
-                                                                size: "sm"
+                                                                size: "md"
                                                             })
                                                         })
                                                     })

package/dist/components/Calendar/CalendarInputHeader.js

@@ -1,7 +1,6 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useCallback } from "react";
 import { DatePicker } from "@ark-ui/react";
-import { ArrowRight } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { DateInput } from "../DateInput/index.js";
 import { useCalendarContext } from "./CalendarContext.js";
@@ -30,7 +29,7 @@ const SingleDateInputInner = ({ api, readonly })=>{
         children: /*#__PURE__*/ jsx(DateInput, {
             value: inputValue,
             onChange: handleChange,
-            isReadOnly: readonly,
+            readOnly: readonly,
             granularity: "day"
         })
     });
@@ -79,20 +78,18 @@ const RangeDateInputInner = ({ api, readonly })=>{
             /*#__PURE__*/ jsx(DateInput, {
                 value: startValue,
                 onChange: handleStartChange,
-                isReadOnly: readonly,
+                readOnly: readonly,
                 granularity: "day"
             }),
-            /*#__PURE__*/ jsx("div", {
-                className: "flex items-center justify-center shrink-0 basis-20",
+            /*#__PURE__*/ jsx("span", {
+                className: "flex items-center justify-center shrink-0 basis-20 font-sans text-sm leading-sm text-text-secondary",
                 "aria-hidden": "true",
-                children: /*#__PURE__*/ jsx(ArrowRight, {
-                    size: "md"
-                })
+                children: "→"
             }),
             /*#__PURE__*/ jsx(DateInput, {
                 value: endValue,
                 onChange: handleEndChange,
-                isReadOnly: readonly,
+                readOnly: readonly,
                 granularity: "day"
             })
         ]

package/dist/components/Calendar/CalendarKeyboardHints.js

@@ -9,21 +9,26 @@ const CalendarKeyboardHints = /*#__PURE__*/ forwardRef(({ className }, ref)=>/*#
             /*#__PURE__*/ jsxs("div", {
                 className: "flex items-center gap-4",
                 children: [
-                    /*#__PURE__*/ jsx(Kbd, {
-                        size: "small",
-                        children: "←"
-                    }),
-                    /*#__PURE__*/ jsx(Kbd, {
-                        size: "small",
-                        children: "↑"
-                    }),
-                    /*#__PURE__*/ jsx(Kbd, {
-                        size: "small",
-                        children: "↓"
-                    }),
-                    /*#__PURE__*/ jsx(Kbd, {
-                        size: "small",
-                        children: "→"
+                    /*#__PURE__*/ jsxs("div", {
+                        className: "flex items-center gap-2",
+                        children: [
+                            /*#__PURE__*/ jsx(Kbd, {
+                                size: "small",
+                                children: "←"
+                            }),
+                            /*#__PURE__*/ jsx(Kbd, {
+                                size: "small",
+                                children: "↑"
+                            }),
+                            /*#__PURE__*/ jsx(Kbd, {
+                                size: "small",
+                                children: "↓"
+                            }),
+                            /*#__PURE__*/ jsx(Kbd, {
+                                size: "small",
+                                children: "→"
+                            })
+                        ]
                     }),
                     /*#__PURE__*/ jsx("span", {
                         className: "font-sans font-medium text-xs text-text-secondary",
@@ -49,7 +54,7 @@ const CalendarKeyboardHints = /*#__PURE__*/ forwardRef(({ className }, ref)=>/*#
                 children: [
                     /*#__PURE__*/ jsx(Kbd, {
                         size: "small",
-                        children: "Esc"
+                        children: "ESC"
                     }),
                     /*#__PURE__*/ jsx("span", {
                         className: "font-sans font-medium text-xs text-text-secondary",

package/dist/components/DateFormatProvider/DateFormatProvider.d.ts

@@ -0,0 +1,30 @@
+import { type FC, type ReactNode } from 'react';
+import { type DateOrder } from './context';
+export interface DateFormatProviderProps {
+    /**
+     * Order in which date segments render across every DS temporal input and
+     * the calendar. Set once at the app root.
+     */
+    order: DateOrder;
+    /**
+     * Hour cycle applied to every DS temporal input with time segments and
+     * every time dropdown. `12` (AM/PM) or `24`. When omitted, the browser
+     * locale decides. Can be overridden per-input via the `hourCycle` prop.
+     */
+    hourCycle?: 12 | 24;
+    children: ReactNode;
+}
+/**
+ * Application-level provider for temporal display format.
+ *
+ * Mount once near the root — DateInput, DateRangeInput, TimeInput, and
+ * Calendar all pick up the chosen `order` and `hourCycle` via
+ * `useDateFormat`. If no provider is mounted, DS defaults to `day-first`
+ * order and locale-driven hour cycle.
+ *
+ * @example
+ * <DateFormatProvider order='month-first' hourCycle={24}>
+ *   <App />
+ * </DateFormatProvider>
+ */
+export declare const DateFormatProvider: FC<DateFormatProviderProps>;

package/dist/components/DateFormatProvider/DateFormatProvider.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+import { useMemo } from "react";
+import { DateFormatContext } from "./context.js";
+const DateFormatProvider = ({ order, hourCycle, children })=>{
+    const value = useMemo(()=>({
+            order,
+            hourCycle
+        }), [
+        order,
+        hourCycle
+    ]);
+    return /*#__PURE__*/ jsx(DateFormatContext.Provider, {
+        value: value,
+        children: children
+    });
+};
+DateFormatProvider.displayName = 'DateFormatProvider';
+export { DateFormatProvider };

package/dist/components/DateFormatProvider/context.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Order in which date segments are rendered by temporal inputs and the
+ * calendar.
+ *
+ * - `day-first` — "24 Apr, 2026" (segments: DD MMM YYYY)
+ * - `month-first` — "Apr 24, 2026" (segments: MMM DD YYYY)
+ *
+ * Year stays last in both; time segments, when present, are appended after
+ * the date with a leading space.
+ */
+export type DateOrder = 'day-first' | 'month-first';
+export interface DateFormatContextValue {
+    order: DateOrder;
+    /**
+     * App-wide hour cycle — `12` (AM/PM) or `24`. When `undefined`, the
+     * browser locale decides (react-aria's default).
+     *
+     * Individual inputs can still override with an `hourCycle` prop for
+     * per-component exceptions. Precedence: prop > context > locale.
+     */
+    hourCycle?: 12 | 24;
+}
+export declare const DateFormatContext: import("react").Context<DateFormatContextValue | undefined>;

package/dist/components/DateFormatProvider/context.js

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+const DateFormatContext = createContext(void 0);
+export { DateFormatContext };

package/dist/components/DateFormatProvider/index.d.ts

@@ -0,0 +1,4 @@
+export type { DateFormatContextValue, DateOrder } from './context';
+export type { DateFormatProviderProps } from './DateFormatProvider';
+export { DateFormatProvider } from './DateFormatProvider';
+export { useDateFormat } from './useDateFormat';

package/dist/components/DateFormatProvider/index.js

@@ -0,0 +1,3 @@
+import { DateFormatProvider } from "./DateFormatProvider.js";
+import { useDateFormat } from "./useDateFormat.js";
+export { DateFormatProvider, useDateFormat };

package/dist/components/DateFormatProvider/useDateFormat.d.ts

@@ -0,0 +1,11 @@
+import { type DateFormatContextValue } from './context';
+/**
+ * Read the active date-segment order and hour cycle.
+ *
+ * Does **not** throw when called outside `DateFormatProvider` — formats are
+ * an optional app-level concern, so the hook falls back to `day-first`
+ * order and locale-driven hour cycle (`hourCycle: undefined`). This keeps
+ * every DS temporal input working out of the box in apps that haven't
+ * mounted the provider.
+ */
+export declare const useDateFormat: () => DateFormatContextValue;

package/dist/components/DateFormatProvider/useDateFormat.js

@@ -0,0 +1,7 @@
+import { useContext } from "react";
+import { DateFormatContext } from "./context.js";
+const DEFAULT_DATE_FORMAT = {
+    order: 'day-first'
+};
+const useDateFormat = ()=>useContext(DateFormatContext) ?? DEFAULT_DATE_FORMAT;
+export { useDateFormat };

package/dist/components/DateInput/DateInput.d.ts

@@ -1,22 +1,33 @@
-import { type AriaDateFieldProps, type DateValue } from '@react-aria/datepicker';
-import type { DateInputBaseProps } from './types';
-export type DateInputProps = Omit<AriaDateFieldProps<DateValue>, 'label' | 'description' | 'errorMessage'> & DateInputBaseProps & {
-    /**
-     * Determines the smallest unit of time that can be edited.
-     * - 'day': Date only (default)
-     * - 'hour': Date with hours
-     * - 'minute': Date with hours and minutes
-     * - 'second': Date with hours, minutes, and seconds
-     */
-    granularity?: 'day' | 'hour' | 'minute' | 'second';
+import { type FC, type Ref } from 'react';
+import { type DateValue } from '@react-aria/datepicker';
+import { type TemporalGranularity, type TemporalInputCommonProps, type TemporalInputTimeProps } from '../TemporalCore';
+/**
+ * Subset of `@react-aria/datepicker`'s `AriaDateFieldProps` surfaced by DateInput.
+ *
+ * Declared explicitly (not via `Omit<AriaDateFieldProps, ...>`) so the DS public
+ * type doesn't track React-Aria's evolution — props are added here intentionally.
+ */
+interface DateInputAriaSubset {
+    value?: DateValue | null;
+    defaultValue?: DateValue | null;
+    onChange?: (value: DateValue | null) => void;
+    minValue?: DateValue;
+    maxValue?: DateValue;
+    placeholderValue?: DateValue;
+    name?: string;
+    autoFocus?: boolean;
+    /** Marks the field as required in assistive tech and HTML form validation. */
+    isRequired?: boolean;
+    ref?: Ref<HTMLDivElement>;
+}
+type DateOnlyGranularity = {
+    granularity?: 'day';
+    showTimeDropdown?: never;
+    timeStep?: never;
 };
-export declare const DateInput: import("react").ForwardRefExoticComponent<Omit<AriaDateFieldProps<DateValue>, "label" | "description" | "errorMessage"> & DateInputBaseProps & {
-    /**
-     * Determines the smallest unit of time that can be edited.
-     * - 'day': Date only (default)
-     * - 'hour': Date with hours
-     * - 'minute': Date with hours and minutes
-     * - 'second': Date with hours, minutes, and seconds
-     */
-    granularity?: "day" | "hour" | "minute" | "second";
-} & import("react").RefAttributes<HTMLDivElement>>;
+type DateTimeGranularity = {
+    granularity: Exclude<TemporalGranularity, 'day'>;
+} & TemporalInputTimeProps;
+export type DateInputProps = TemporalInputCommonProps & DateInputAriaSubset & (DateOnlyGranularity | DateTimeGranularity);
+export declare const DateInput: FC<DateInputProps>;
+export {};

package/dist/components/DateInput/DateInput.js

@@ -1,54 +1,72 @@
 import { jsx } from "react/jsx-runtime";
-import { forwardRef, useRef } from "react";
+import { useRef } from "react";
 import { createCalendar } from "@internationalized/date";
+import { composeRefs } from "@radix-ui/react-compose-refs";
 import { useDateField } from "@react-aria/datepicker";
 import { useLocale } from "@react-aria/i18n";
 import { useDateFieldState } from "@react-stately/datepicker";
+import { Calendar } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
-import { useTemporalField } from "../TemporalCore/index.js";
-import { DateInputInternal } from "./DateInputInternal.js";
-const DateInput = /*#__PURE__*/ forwardRef(({ icon, value: controlledValue, defaultValue, onChange, error = false, disabled = false, granularity = 'day', placeholder, showTimeDropdown, timeStep, hourCycle, className, ...props }, forwardedRef)=>{
+import { TestIdProvider } from "../../utils/testId.js";
+import { useDateFormat } from "../DateFormatProvider/index.js";
+import { getDefaultTemporalPlaceholder } from "../TemporalCore/index.js";
+import { DateInputInternal } from "./internal/index.js";
+const DateInput = (props)=>{
+    const { 'data-testid': testId, showIcon = true, value: controlledValue, defaultValue, onChange, error = false, disabled = false, readOnly = false, isRequired, granularity = 'day', showTimeDropdown, timeStep = 30, placeholder, size = 'default', minValue, maxValue, placeholderValue, name, autoFocus, ref, ...wrapperProps } = props;
+    const resolvedPlaceholder = placeholder ?? getDefaultTemporalPlaceholder({
+        granularity
+    });
+    const { hourCycle: resolvedHourCycle } = useDateFormat();
     const { locale } = useLocale();
-    const ref = useRef(null);
-    const finalRef = forwardedRef || ref;
-    const { value, onChange: handleChange } = useTemporalField({
+    const internalRef = useRef(null);
+    const state = useDateFieldState({
         value: controlledValue,
         defaultValue,
-        onChange
-    });
-    const state = useDateFieldState({
-        ...props,
-        value,
-        onChange: handleChange,
+        onChange,
+        minValue,
+        maxValue,
+        placeholderValue,
+        isRequired,
         locale,
         isDisabled: disabled,
         isInvalid: error,
+        isReadOnly: readOnly,
         granularity,
-        hourCycle,
+        hourCycle: resolvedHourCycle,
         createCalendar: createCalendar,
         shouldForceLeadingZeros: true
     });
     const { fieldProps } = useDateField({
-        ...props,
+        name,
+        autoFocus,
         isDisabled: disabled,
-        isInvalid: error
-    }, state, finalRef);
+        isInvalid: error,
+        isReadOnly: readOnly,
+        isRequired
+    }, state, internalRef);
     return /*#__PURE__*/ jsx("div", {
-        className: cn('min-w-256 flex-1', className),
-        children: /*#__PURE__*/ jsx(DateInputInternal, {
-            ...fieldProps,
-            icon: icon,
-            ref: finalRef,
-            state: state,
-            error: error,
-            disabled: disabled,
-            placeholder: placeholder,
-            showTimeDropdown: showTimeDropdown,
-            timeStep: timeStep,
-            hourCycle: hourCycle,
-            className: cn('w-full')
+        ...wrapperProps,
+        "data-slot": "date-input",
+        "data-testid": testId,
+        className: cn('min-w-256 flex-1', wrapperProps.className),
+        children: /*#__PURE__*/ jsx(TestIdProvider, {
+            value: testId,
+            children: /*#__PURE__*/ jsx(DateInputInternal, {
+                ...fieldProps,
+                icon: showIcon ? Calendar : void 0,
+                ref: composeRefs(internalRef, ref),
+                state: state,
+                error: error,
+                disabled: disabled,
+                readOnly: readOnly,
+                placeholder: resolvedPlaceholder,
+                showTimeDropdown: showTimeDropdown,
+                timeStep: timeStep,
+                hourCycle: resolvedHourCycle,
+                size: size
+            })
         })
     });
-});
+};
 DateInput.displayName = 'DateInput';
 export { DateInput };

package/dist/components/DateInput/index.d.ts

@@ -1,3 +1 @@
 export { DateInput, type DateInputProps } from './DateInput';
-export { DateInputInternal, type DateInputInternalProps } from './DateInputInternal';
-export type { DateInputBaseProps } from './types';

package/dist/components/DateInput/index.js

@@ -1,3 +1,2 @@
 import { DateInput } from "./DateInput.js";
-import { DateInputInternal } from "./DateInputInternal.js";
-export { DateInput, DateInputInternal };
+export { DateInput };

package/dist/components/DateInput/internal/DateInputInternal.d.ts

@@ -0,0 +1,31 @@
+import { type FC, type Ref } from 'react';
+import type { DateFieldState, TimeFieldState } from '@react-stately/datepicker';
+import type { GroupDOMAttributes } from '@react-types/shared';
+import type { SvgIconProps } from '../../../icons';
+import { type TemporalInputSize, type TemporalInputTimeProps } from '../../TemporalCore';
+/**
+ * Internal props — intentionally narrow. `TemporalInputCommonProps` is not
+ * extended here because it pulls in `HTMLAttributes<HTMLDivElement>`, whose
+ * `onAbort` handler collides with the one in `@react-types/shared`'s
+ * `GroupDOMAttributes`. The outer `DateInput` / `TimeInput` wrappers own the
+ * HTML-attribute surface; this internal only consumes the specific concerns
+ * it actually renders.
+ */
+interface DateInputInternalProps extends GroupDOMAttributes, TemporalInputTimeProps {
+    state: DateFieldState | TimeFieldState;
+    icon?: FC<SvgIconProps>;
+    ref?: Ref<HTMLDivElement>;
+    error?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    placeholder?: string;
+    size?: TemporalInputSize;
+    /**
+     * Resolved hour cycle. The public `DateInput` / `TimeInput` wrappers read
+     * this from `DateFormatProvider` and pass it down — it isn't a public
+     * prop on those components.
+     */
+    hourCycle?: 12 | 24;
+}
+export declare const DateInputInternal: FC<DateInputInternalProps>;
+export {};

package/dist/components/DateInput/{DateInputInternal.js → internal/DateInputInternal.js}

@@ -1,15 +1,19 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { forwardRef, useCallback, useRef, useState } from "react";
+import { useCallback, useRef, useState } from "react";
 import { CalendarDateTime, getLocalTimeZone, now } from "@internationalized/date";
-import { cn } from "../../utils/cn.js";
-import { InputGroup, InputGroupAddon } from "../InputGroup/index.js";
-import { TemporalClear, TemporalPlaceholder, TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../TemporalCore/index.js";
-const DateInputInternal = /*#__PURE__*/ forwardRef(({ state, icon: IconComponent, error, disabled, placeholder, showTimeDropdown, timeStep = 30, hourCycle, ...props }, ref)=>{
+import { cn } from "../../../utils/cn.js";
+import { InputGroup, InputGroupAddon } from "../../InputGroup/index.js";
+import { TemporalClear, TemporalPlaceholder, TemporalSegmentGroup, TimeDropdown, useTimeDropdownKeyCapture } from "../../TemporalCore/index.js";
+function anchorTimeToToday(timeValue) {
+    const t = now(getLocalTimeZone());
+    return new CalendarDateTime(t.year, t.month, t.day, timeValue.hour, timeValue.minute, 0);
+}
+const DateInputInternal = ({ state, icon: IconComponent, error, disabled, readOnly, placeholder, showTimeDropdown, timeStep, hourCycle, size, ref, ...props })=>{
     const dropdownRef = useRef(null);
     const [isFocused, setIsFocused] = useState(false);
     const [isDropdownOpen, setIsDropdownOpen] = useState(false);
     const hasValue = state.segments.some((seg)=>seg.isEditable && !seg.isPlaceholder);
-    const showPlaceholder = placeholder && !hasValue && !isFocused;
+    const showPlaceholder = !!placeholder && !hasValue && !isFocused;
     const hasTimeSegments = state.segments.some((seg)=>'hour' === seg.type || 'minute' === seg.type);
     const hasDateSegments = state.segments.some((seg)=>'year' === seg.type || 'month' === seg.type || 'day' === seg.type);
     const handleClear = ()=>{
@@ -24,23 +28,20 @@ const DateInputInternal = /*#__PURE__*/ forwardRef(({ state, icon: IconComponent
         setIsDropdownOpen(false);
     };
     const handleTimeSelect = useCallback((timeValue)=>{
-        if (state.value) {
-            const newValue = state.value.set({
+        if (hasDateSegments) {
+            const dateState = state;
+            const current = dateState.value;
+            const next = current && 'hour' in current ? current.set({
                 hour: timeValue.hour,
                 minute: timeValue.minute,
                 second: 0,
                 millisecond: 0
-            });
-            state.setValue(newValue);
-        } else if (hasDateSegments) {
-            const today = now(getLocalTimeZone());
-            const newValue = new CalendarDateTime(today.year, today.month, today.day, timeValue.hour, timeValue.minute, 0);
-            state.setValue(newValue);
-        } else {
-            const todayDate = now(getLocalTimeZone());
-            const newValue = new CalendarDateTime(todayDate.year, todayDate.month, todayDate.day, timeValue.hour, timeValue.minute, 0);
-            state.setValue(newValue);
+            }) : anchorTimeToToday(timeValue);
+            dateState.setValue(next);
+            return;
         }
+        const timeState = state;
+        timeState.setValue(anchorTimeToToday(timeValue));
     }, [
         state,
         hasDateSegments
@@ -51,28 +52,32 @@ const DateInputInternal = /*#__PURE__*/ forwardRef(({ state, icon: IconComponent
         dropdownRef,
         onOpen: ()=>setIsDropdownOpen(true)
     });
-    const currentTimeValue = state.value && hasTimeSegments ? state.value : null;
+    const currentTimeValue = null !== state.value && hasTimeSegments ? state.value : null;
     return /*#__PURE__*/ jsxs(InputGroup, {
+        size: size,
         children: [
             IconComponent && /*#__PURE__*/ jsx(InputGroupAddon, {
                 children: /*#__PURE__*/ jsx(IconComponent, {})
             }),
             /*#__PURE__*/ jsxs("div", {
-                className: cn('relative flex-1', !IconComponent && 'pl-12'),
+                className: cn('relative flex-1 h-full', !IconComponent && 'pl-12'),
                 onKeyDownCapture: handleKeyDownCapture,
                 children: [
-                    showPlaceholder && /*#__PURE__*/ jsx(TemporalPlaceholder, {
-                        text: placeholder
+                    showPlaceholder && placeholder && /*#__PURE__*/ jsx(TemporalPlaceholder, {
+                        text: placeholder,
+                        className: cn(!IconComponent && 'pl-12')
                     }),
                     /*#__PURE__*/ jsx(TemporalSegmentGroup, {
                         ...props,
                         ref: ref,
                         "data-slot": "input",
-                        className: cn('h-36', showPlaceholder && 'opacity-0'),
+                        className: cn('h-full', showPlaceholder && 'opacity-0', readOnly && 'cursor-not-allowed'),
                         "aria-invalid": error || void 0,
                         "aria-disabled": disabled || void 0,
+                        "data-readonly": readOnly || void 0,
                         state: state,
                         disabled: disabled,
+                        readOnly: readOnly,
                         onFocus: handleFocus,
                         onBlur: handleBlur
                     }),
@@ -87,7 +92,7 @@ const DateInputInternal = /*#__PURE__*/ forwardRef(({ state, icon: IconComponent
                     })
                 ]
             }),
-            hasValue && /*#__PURE__*/ jsx(InputGroupAddon, {
+            hasValue && !readOnly && /*#__PURE__*/ jsx(InputGroupAddon, {
                 align: "inline-end",
                 children: /*#__PURE__*/ jsx(TemporalClear, {
                     onClick: handleClear,
@@ -96,5 +101,6 @@ const DateInputInternal = /*#__PURE__*/ forwardRef(({ state, icon: IconComponent
             })
         ]
     });
-});
+};
+DateInputInternal.displayName = 'DateInputInternal';
 export { DateInputInternal };

package/dist/components/DateInput/internal/index.d.ts

@@ -0,0 +1 @@
+export { DateInputInternal } from './DateInputInternal';

package/dist/components/DateInput/internal/index.js

@@ -0,0 +1,2 @@
+import { DateInputInternal } from "./DateInputInternal.js";
+export { DateInputInternal };