@cdx-ui/primitives 0.1.7 → 0.2.1

package/src/color-slider/types.ts

@@ -0,0 +1,94 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import type { Color } from '../color';
+
+export type ColorSliderOrientation = 'horizontal' | 'vertical';
+
+export type ColorSliderConfiguration =
+  | {
+      readonly colorSpace: 'rgb';
+      readonly channel: 'red' | 'green' | 'blue';
+    }
+  | {
+      readonly colorSpace: 'hsl';
+      readonly channel: 'hue' | 'saturation' | 'lightness';
+    }
+  | {
+      readonly colorSpace: 'hsb';
+      readonly channel: 'hue' | 'saturation' | 'brightness';
+    };
+
+export interface ColorSliderCommonProps extends Omit<ViewProps, 'children'> {
+  /** Current controlled color. */
+  readonly value?: Color;
+  /** Initial color for uncontrolled usage. */
+  readonly defaultValue?: Color;
+  /** Called while the selected channel changes. */
+  readonly onValueChange?: (value: Color) => void;
+  /** Called when a pointer, keyboard, or screen reader interaction completes. */
+  readonly onValueChangeComplete?: (value: Color) => void;
+  /** Slider axis. @default `'horizontal'` */
+  readonly orientation?: ColorSliderOrientation;
+  /** Channel increment. Defaults to the channel's natural increment. */
+  readonly step?: number;
+  /** Shift-arrow and page-key increment. @default `10` */
+  readonly pageStep?: number;
+  /** Disables pointer, keyboard, and screen reader interaction. @default `false` */
+  readonly isDisabled?: boolean;
+  readonly children?: ReactNode;
+}
+
+export type IColorSliderProps = ColorSliderCommonProps & ColorSliderConfiguration;
+
+export interface IColorSliderRailProps extends ViewProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export interface IColorSliderThumbProps extends PressableProps {
+  readonly asChild?: boolean;
+  readonly children?: ReactNode;
+}
+
+export interface ColorSliderSize {
+  readonly width: number;
+  readonly height: number;
+}
+
+export interface ColorSliderLayout extends ColorSliderSize {
+  readonly x: number;
+  readonly y: number;
+}
+
+export type ColorSliderContextValue = ColorSliderConfiguration & {
+  readonly value: Color;
+  readonly channelValue: number;
+  readonly valueLabel: string;
+  readonly min: number;
+  readonly max: number;
+  readonly step: number;
+  readonly pageStep: number;
+  readonly percent: number;
+  readonly orientation: ColorSliderOrientation;
+  readonly isDisabled: boolean;
+  readonly isDragging: boolean;
+  readonly accessibilityLabel?: string;
+  readonly layout: ColorSliderLayout | null;
+  readonly thumbSize: ColorSliderSize;
+  readonly gradientColors: readonly string[];
+  readonly setLayout: (layout: ColorSliderLayout) => void;
+  readonly setThumbSize: (size: ColorSliderSize) => void;
+  readonly setIsDragging: (dragging: boolean) => void;
+  readonly setChannelValue: (value: number, complete?: boolean) => void;
+  readonly setValueFromRatio: (ratio: number, complete?: boolean) => void;
+};
+
+export interface ColorSliderKeyboardEvent {
+  readonly nativeEvent?: {
+    readonly key?: string;
+    readonly shiftKey?: boolean;
+  };
+  readonly key?: string;
+  readonly shiftKey?: boolean;
+  preventDefault?: () => void;
+}

package/src/color-slider/utils.ts

@@ -0,0 +1,79 @@
+import type { Color } from '../color';
+import type { ColorSliderConfiguration } from './types';
+
+const HUE_STOPS = [0, 60, 120, 180, 240, 300, 360] as const;
+
+export function clampColorSliderValue(value: number, min: number, max: number): number {
+  return Math.min(max, Math.max(min, value));
+}
+
+export function getColorSliderRange({ colorSpace, channel }: ColorSliderConfiguration): {
+  min: number;
+  max: number;
+} {
+  if (colorSpace === 'rgb') {
+    return { min: 0, max: 255 };
+  }
+  if (channel === 'hue') {
+    return { min: 0, max: 360 };
+  }
+  return { min: 0, max: 100 };
+}
+
+export function getColorSliderChannelValue(
+  color: Color,
+  configuration: ColorSliderConfiguration,
+): number {
+  if (configuration.colorSpace === 'rgb') {
+    return color.getChannel('rgb', configuration.channel);
+  }
+  if (configuration.colorSpace === 'hsl') {
+    return color.getChannel('hsl', configuration.channel);
+  }
+  return color.getChannel('hsb', configuration.channel);
+}
+
+export function withColorSliderChannel(
+  color: Color,
+  configuration: ColorSliderConfiguration,
+  value: number,
+): Color {
+  if (configuration.colorSpace === 'rgb') {
+    return color.withChannel('rgb', configuration.channel, value);
+  }
+  if (configuration.colorSpace === 'hsl') {
+    return color.withChannel('hsl', configuration.channel, value);
+  }
+  return color.withChannel('hsb', configuration.channel, value);
+}
+
+export function formatColorSliderValue(
+  value: number,
+  configuration: ColorSliderConfiguration,
+): string {
+  const formatted = Number.isInteger(value) ? String(value) : value.toFixed(1);
+  if (configuration.channel === 'hue') {
+    return `${formatted}°`;
+  }
+  if (configuration.colorSpace !== 'rgb') {
+    return `${formatted}%`;
+  }
+  return formatted;
+}
+
+export function getColorSliderGradientColors(
+  color: Color,
+  configuration: ColorSliderConfiguration,
+): readonly string[] {
+  if (configuration.channel === 'hue') {
+    return HUE_STOPS.map((value) =>
+      withColorSliderChannel(color, configuration, value).toString('hex'),
+    );
+  }
+
+  const { min, max } = getColorSliderRange(configuration);
+  return [
+    withColorSliderChannel(color, configuration, min).toString('hex'),
+    withColorSliderChannel(color, configuration, max).toString('hex'),
+  ];
+}

package/src/color-swatch-picker/ColorSwatchPickerItem.tsx

@@ -0,0 +1,54 @@
+import { forwardRef, useEffect, useMemo, type ComponentRef } from 'react';
+import { Pressable } from 'react-native';
+import { RadioRoot } from '../radio';
+import { ColorSwatchPickerItemProvider, useColorSwatchPickerContext } from './context';
+import type { IColorSwatchPickerItemProps } from './types';
+
+export interface ColorSwatchPickerItemProps extends IColorSwatchPickerItemProps {
+  asChild?: boolean;
+}
+
+export const ColorSwatchPickerItem = forwardRef<
+  ComponentRef<typeof Pressable>,
+  ColorSwatchPickerItemProps
+>(
+  (
+    {
+      asChild,
+      color,
+      isDisabled,
+      disabled,
+      accessibilityLabel,
+      'aria-label': ariaLabelProp,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const { registerColor } = useColorSwatchPickerContext();
+    const colorValue = color.toString('hex');
+    const label = ariaLabelProp ?? accessibilityLabel ?? colorValue;
+    const contextValue = useMemo(() => ({ color }), [color]);
+
+    useEffect(() => registerColor(color), [color, registerColor]);
+
+    return (
+      <ColorSwatchPickerItemProvider value={contextValue}>
+        <RadioRoot
+          ref={ref}
+          asChild={asChild}
+          value={colorValue}
+          isDisabled={!!(isDisabled || disabled)}
+          disabled={disabled}
+          aria-label={label}
+          accessibilityLabel={label}
+          {...props}
+        >
+          {children}
+        </RadioRoot>
+      </ColorSwatchPickerItemProvider>
+    );
+  },
+);
+
+ColorSwatchPickerItem.displayName = 'ColorSwatchPickerItem';

package/src/color-swatch-picker/ColorSwatchPickerRoot.tsx

@@ -0,0 +1,94 @@
+import { forwardRef, useCallback, useMemo, useRef, type ComponentRef } from 'react';
+import { View } from 'react-native';
+import { useControllableState } from '@cdx-ui/utils';
+import { RadioGroup } from '../radio';
+import { useOptionalColorPickerContext } from '../color-picker';
+import type { Color } from '../color';
+import { ColorSwatchPickerProvider } from './context';
+import type { IColorSwatchPickerProps } from './types';
+
+export interface ColorSwatchPickerRootProps extends IColorSwatchPickerProps {
+  asChild?: boolean;
+}
+
+export const ColorSwatchPickerRoot = forwardRef<
+  ComponentRef<typeof View>,
+  ColorSwatchPickerRootProps
+>(
+  (
+    {
+      asChild,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      isDisabled,
+      accessibilityLabel,
+      children,
+      ...props
+    },
+    ref,
+  ) => {
+    const picker = useOptionalColorPickerContext();
+    const usesPickerContext =
+      picker !== null && valueProp === undefined && defaultValue === undefined;
+
+    const [localValue, setLocalValue] = useControllableState<Color>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    const value = usesPickerContext ? picker.value : localValue;
+    const colorsRef = useRef(new Map<string, Color>());
+
+    const registerColor = useCallback((color: Color) => {
+      const key = color.toString('hex');
+      colorsRef.current.set(key, color);
+
+      return () => {
+        if (colorsRef.current.get(key) === color) {
+          colorsRef.current.delete(key);
+        }
+      };
+    }, []);
+
+    const handleValueChange = useCallback(
+      (key: string) => {
+        const color = colorsRef.current.get(key);
+
+        if (!color) {
+          return;
+        }
+
+        if (usesPickerContext) {
+          onValueChange?.(color);
+          picker.onValueChange(color);
+          return;
+        }
+
+        setLocalValue(color);
+      },
+      [onValueChange, picker, setLocalValue, usesPickerContext],
+    );
+
+    const contextValue = useMemo(() => ({ registerColor }), [registerColor]);
+
+    return (
+      <ColorSwatchPickerProvider value={contextValue}>
+        <RadioGroup
+          ref={ref}
+          asChild={asChild}
+          value={value?.toString('hex')}
+          onChange={handleValueChange}
+          isDisabled={isDisabled}
+          aria-label={props['aria-label'] ?? accessibilityLabel}
+          {...props}
+        >
+          {children}
+        </RadioGroup>
+      </ColorSwatchPickerProvider>
+    );
+  },
+);
+
+ColorSwatchPickerRoot.displayName = 'ColorSwatchPickerRoot';

package/src/color-swatch-picker/context.tsx

@@ -0,0 +1,22 @@
+import { createContext as createReactContext, useContext } from 'react';
+import { createContext } from '@cdx-ui/utils';
+import type { ColorSwatchPickerContextValue, ColorSwatchPickerItemContextValue } from './types';
+
+export const [ColorSwatchPickerProvider, useColorSwatchPickerContext] =
+  createContext<ColorSwatchPickerContextValue>('ColorSwatchPickerContext');
+
+const ColorSwatchPickerItemContext = createReactContext<ColorSwatchPickerItemContextValue | null>(
+  null,
+);
+
+export const ColorSwatchPickerItemProvider = ColorSwatchPickerItemContext.Provider;
+
+export function useColorSwatchPickerItemContext(): ColorSwatchPickerItemContextValue {
+  const context = useContext(ColorSwatchPickerItemContext);
+
+  if (!context) {
+    throw new Error('ColorSwatchPicker item slots must be used within ColorSwatchPicker.Item');
+  }
+
+  return context;
+}

package/src/color-swatch-picker/index.ts

@@ -0,0 +1,4 @@
+export { ColorSwatchPickerRoot, type ColorSwatchPickerRootProps } from './ColorSwatchPickerRoot';
+export { ColorSwatchPickerItem, type ColorSwatchPickerItemProps } from './ColorSwatchPickerItem';
+export { useColorSwatchPickerContext, useColorSwatchPickerItemContext } from './context';
+export type { IColorSwatchPickerItemProps, IColorSwatchPickerProps } from './types';

package/src/color-swatch-picker/types.ts

@@ -0,0 +1,29 @@
+import type { ReactNode } from 'react';
+import type { PressableProps, ViewProps } from 'react-native';
+import type { Color } from '../color';
+
+export interface IColorSwatchPickerProps extends Omit<ViewProps, 'children'> {
+  value?: Color;
+  defaultValue?: Color;
+  onValueChange?: (value: Color) => void;
+  isDisabled?: boolean;
+  children?: ReactNode;
+}
+
+export interface IColorSwatchPickerItemProps extends Omit<PressableProps, 'children'> {
+  color: Color;
+  isDisabled?: boolean;
+  isHovered?: boolean;
+  isActive?: boolean;
+  isFocused?: boolean;
+  isFocusVisible?: boolean;
+  children?: ReactNode;
+}
+
+export interface ColorSwatchPickerContextValue {
+  registerColor: (color: Color) => () => void;
+}
+
+export interface ColorSwatchPickerItemContextValue {
+  color: Color;
+}

package/src/date-field/DateFieldRoot.tsx

@@ -1,7 +1,7 @@
 import { forwardRef, useMemo, type ComponentRef, type ReactNode } from 'react';
 import { View, type ViewProps } from 'react-native';
 import { getDateFieldSegments, resolveDateComponentLabels } from '@cdx-ui/formatters';
-import { useControllableState, useFormControl } from '@cdx-ui/utils';
+import { useControllableState, useFormControl, useFormControlContext } from '@cdx-ui/utils';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
 import { DateFieldContext, type DateFieldValue } from './context';
@@ -39,6 +39,7 @@ export const DateFieldRoot = forwardRef<ComponentRef<typeof View>, DateFieldRoot
       isInvalid,
       isRequired,
     });
+    const { errorMessage } = useFormControlContext();
 
     const [value, setValue] = useControllableState<DateFieldValue>({
       prop: valueProp,
@@ -75,6 +76,7 @@ export const DateFieldRoot = forwardRef<ComponentRef<typeof View>, DateFieldRoot
         disabled: !!formControl.disabled,
         readOnly: !!formControl.readOnly,
         invalid: !!formControl['aria-invalid'],
+        errorMessage,
         ...segmentState,
       }),
       [
@@ -87,6 +89,7 @@ export const DateFieldRoot = forwardRef<ComponentRef<typeof View>, DateFieldRoot
         formControl.disabled,
         formControl.readOnly,
         formControl['aria-invalid'],
+        errorMessage,
         segmentState,
       ],
     );

package/src/date-field/DateFieldSegment.tsx

@@ -23,8 +23,16 @@ export const DateFieldSegment = forwardRef<ComponentRef<typeof Text>, DateFieldS
   ({ asChild, segment, segmentIndex: segmentIndexProp, style, ...props }, ref) => {
     const contextSegmentIndex = useDateFieldSegmentIndex();
     const segmentIndex = segmentIndexProp ?? contextSegmentIndex;
-    const { disabled, readOnly, focusedSegmentIndex, focusSegment, getSegmentDisplayText, labels } =
-      useDateFieldContext();
+    const {
+      disabled,
+      readOnly,
+      invalid,
+      errorMessage,
+      focusedSegmentIndex,
+      focusSegment,
+      getSegmentDisplayText,
+      labels,
+    } = useDateFieldContext();
     const isFocused = focusedSegmentIndex === segmentIndex;
     const displayText = getSegmentDisplayText(segmentIndex);
 
@@ -52,11 +60,19 @@ export const DateFieldSegment = forwardRef<ComponentRef<typeof Text>, DateFieldS
     );
 
     if (segment.isEditable && !asChild) {
+      // `aria-invalid` only reaches web screen readers; native ones need it in the name and hint.
+      const announceInvalid = invalid && Platform.OS !== 'web';
       return (
         <Pressable
           accessibilityRole="spinbutton"
-          accessibilityLabel={getDateSegmentAccessibilityLabel(segment.type, labels)}
+          accessibilityLabel={getDateSegmentAccessibilityLabel(
+            segment.type,
+            labels,
+            announceInvalid,
+          )}
+          accessibilityHint={announceInvalid ? errorMessage : undefined}
           accessibilityState={{ disabled, selected: isFocused }}
+          aria-invalid={invalid || undefined}
           disabled={disabled || readOnly}
           onPress={handlePress}
           onPressIn={preventWebFocusSteal}

package/src/date-field/context.tsx

@@ -20,6 +20,8 @@ export interface DateFieldContextValue {
   disabled: boolean;
   readOnly: boolean;
   invalid: boolean;
+  /** Message the enclosing `Field` shows for the invalid state, if any. */
+  errorMessage?: string;
   focusedSegmentIndex: number | null;
   focusSegment: (index: number) => void;
   blurSegment: (index: number) => void;

package/src/date-picker/DatePickerRoot.tsx

@@ -2,15 +2,28 @@ import {
   forwardRef,
   useCallback,
   useEffect,
+  useLayoutEffect,
   useMemo,
   useRef,
   type ComponentRef,
   type ReactNode,
 } from 'react';
 import { View, type ViewProps } from 'react-native';
-import type { DateComponentLabels, DateId } from '@cdx-ui/formatters';
-import { resolveDateComponentLabels } from '@cdx-ui/formatters';
-import { mergeRefs, useControllableState } from '@cdx-ui/utils';
+import {
+  formatDateValidationMessage,
+  getDateValidationReason,
+  resolveDateComponentLabels,
+  type DateComponentLabels,
+  type DateId,
+  type DateValidationReason,
+} from '@cdx-ui/formatters';
+import {
+  FormControlContext,
+  mergeRefs,
+  useControllableState,
+  useFormControlContext,
+  useReportFormControlValidation,
+} from '@cdx-ui/utils';
 import { DateFieldRoot } from '../date-field/DateFieldRoot';
 import { Slot } from '../slot';
 import { dataAttributes, mergeDataAttributes } from '../utils/dataAttributes';
@@ -29,12 +42,41 @@ export interface DatePickerRootProps extends Omit<ViewProps, 'children'> {
   onOpenChange?: (open: boolean) => void;
   isDisabled?: boolean;
   isReadOnly?: boolean;
+  /**
+   * Forces the invalid state. OR-ed with the picker's own validation: setting `true` marks the
+   * field invalid, but `false` never hides a `minValue` / `maxValue` / `isDateUnavailable` violation.
+   */
   isInvalid?: boolean;
   isRequired?: boolean;
-  /** Earliest selectable date, applied to the embedded calendar. Build with `dateId(...)`. */
+  /**
+   * Earliest selectable date, applied to the embedded calendar and to typed entry. Build with
+   * `dateId(...)`.
+   */
   minValue?: DateId;
-  /** Latest selectable date, applied to the embedded calendar. Build with `dateId(...)`. */
+  /**
+   * Latest selectable date, applied to the embedded calendar and to typed entry. Build with
+   * `dateId(...)`.
+   */
   maxValue?: DateId;
+  /**
+   * Returns `true` for dates that cannot be selected, such as weekends or holidays. The calendar
+   * renders them disabled; a typed unavailable date is kept and emitted but renders invalid. Pass
+   * a stable (memoized) function.
+   */
+  isDateUnavailable?: (date: DateId) => boolean;
+  /**
+   * Called when the committed value starts or stops violating `minValue`, `maxValue`, or
+   * `isDateUnavailable`, and again when the formatted message changes while the reason stays
+   * the same — a new bound, `locale`, or `labels` while the value is still `beforeMin`, for
+   * example. Receives the reason and its `labels` message formatted in `locale`, or `undefined`
+   * for both once the value is valid or cleared. Fires before paint, so state set here renders
+   * in the same frame as the invalid styling. Not needed to show the message: an empty
+   * `Field.Error` anywhere in the enclosing `Field` already renders it.
+   */
+  onValidationChange?: (
+    reason: DateValidationReason | undefined,
+    message: string | undefined,
+  ) => void;
   name?: string;
   locale?: string;
   labels?: Partial<DateComponentLabels>;
@@ -57,6 +99,8 @@ export const DatePickerRoot = forwardRef<ComponentRef<typeof View>, DatePickerRo
       isRequired,
       minValue,
       maxValue,
+      isDateUnavailable,
+      onValidationChange,
       locale = 'en-US',
       labels: labelsProp,
       ...props
@@ -83,6 +127,59 @@ export const DatePickerRoot = forwardRef<ComponentRef<typeof View>, DatePickerRo
       defaultProp: value,
     });
 
+    const validationReason = useMemo(
+      () =>
+        value === undefined
+          ? undefined
+          : getDateValidationReason(value, { minValue, maxValue, isDateUnavailable }),
+      [isDateUnavailable, maxValue, minValue, value],
+    );
+    const resolvedInvalid = !!isInvalid || validationReason !== undefined;
+    const validationMessage = useMemo(
+      () =>
+        validationReason === undefined
+          ? undefined
+          : formatDateValidationMessage(
+              labels,
+              validationReason,
+              { minValue, maxValue },
+              { locale },
+            ),
+      [labels, locale, maxValue, minValue, validationReason],
+    );
+
+    const onValidationChangeRef = useRef(onValidationChange);
+    onValidationChangeRef.current = onValidationChange;
+    const reportedValidationRef = useRef<{
+      reason: DateValidationReason | undefined;
+      message: string | undefined;
+    }>({ reason: undefined, message: undefined });
+    useLayoutEffect(() => {
+      const reported = reportedValidationRef.current;
+      if (reported.reason === validationReason && reported.message === validationMessage) {
+        return;
+      }
+      reportedValidationRef.current = { reason: validationReason, message: validationMessage };
+      onValidationChangeRef.current?.(validationReason, validationMessage);
+    }, [validationMessage, validationReason]);
+
+    const reportsToField = useReportFormControlValidation(resolvedInvalid, validationMessage);
+
+    // Without an enclosing `Field` there is nothing to report to, so provide the picker's
+    // validation to its own children (`Field.Error`, `Field.Helper`, the input group).
+    const parentFormControl = useFormControlContext();
+    const standaloneFormControl = useMemo(
+      () =>
+        reportsToField
+          ? undefined
+          : {
+              ...parentFormControl,
+              isInvalid: !!parentFormControl.isInvalid || resolvedInvalid,
+              errorMessage: validationMessage,
+            },
+      [parentFormControl, reportsToField, resolvedInvalid, validationMessage],
+    );
+
     const surfacesRef = useRef<Set<PickerSurfaceType>>(new Set());
     const anchorRef = useRef<ComponentRef<typeof View>>(null);
     const triggerRef = useRef<ComponentRef<typeof View>>(null);
@@ -133,6 +230,7 @@ export const DatePickerRoot = forwardRef<ComponentRef<typeof View>, DatePickerRo
         disabled,
         minValue,
         maxValue,
+        isDateUnavailable,
         locale,
         labels,
         registerSurface,
@@ -149,6 +247,7 @@ export const DatePickerRoot = forwardRef<ComponentRef<typeof View>, DatePickerRo
         disabled,
         minValue,
         maxValue,
+        isDateUnavailable,
         locale,
         labels,
         registerSurface,
@@ -157,6 +256,22 @@ export const DatePickerRoot = forwardRef<ComponentRef<typeof View>, DatePickerRo
 
     const Comp = asChild ? Slot : View;
 
+    const field = (
+      <DateFieldRoot
+        value={value}
+        onValueChange={(next) => setValue(next as DateId | undefined)}
+        mode="date"
+        locale={locale}
+        labels={labelsProp}
+        isDisabled={disabled}
+        isReadOnly={isReadOnly}
+        isInvalid={resolvedInvalid}
+        isRequired={isRequired}
+      >
+        {children}
+      </DateFieldRoot>
+    );
+
     return (
       <DatePickerContext.Provider value={contextValue}>
         <Comp
@@ -164,19 +279,13 @@ export const DatePickerRoot = forwardRef<ComponentRef<typeof View>, DatePickerRo
           {...props}
           {...mergeDataAttributes(props, dataAttributes({ disabled, open }))}
         >
-          <DateFieldRoot
-            value={value}
-            onValueChange={(next) => setValue(next as DateId | undefined)}
-            mode="date"
-            locale={locale}
-            labels={labelsProp}
-            isDisabled={disabled}
-            isReadOnly={isReadOnly}
-            isInvalid={isInvalid}
-            isRequired={isRequired}
-          >
-            {children}
-          </DateFieldRoot>
+          {standaloneFormControl ? (
+            <FormControlContext.Provider value={standaloneFormControl}>
+              {field}
+            </FormControlContext.Provider>
+          ) : (
+            field
+          )}
         </Comp>
       </DatePickerContext.Provider>
     );

package/src/date-picker/context.tsx

@@ -14,6 +14,7 @@ export interface DatePickerContextValue {
   disabled: boolean;
   minValue?: DateId;
   maxValue?: DateId;
+  isDateUnavailable?: (date: DateId) => boolean;
   locale: string;
   labels: DateComponentLabels;
   registerSurface: (type: PickerSurfaceType) => void;