@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.0b5b49f

package/dist/DateInput/DateInput.d.ts

@@ -0,0 +1,139 @@
+import * as stylex from '@stylexjs/stylex';
+import { type InputStatus } from '../Field';
+import { type ISODateString } from '../Calendar';
+declare const sizeStyles: Readonly<{
+    readonly sm: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", "28px">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 180>;
+    }>;
+    readonly md: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", "32px">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 180>;
+    }>;
+    readonly lg: Readonly<{
+        readonly height: stylex.StyleXClassNameFor<"height", "36px">;
+        readonly minWidth: stylex.StyleXClassNameFor<"minWidth", 180>;
+    }>;
+}>;
+export type DateInputSize = keyof typeof sizeStyles;
+export type { InputStatus as DateInputStatus, InputStatusType as DateInputStatusType, } from '../Field';
+import type { BaseProps } from '../BaseProps';
+import type { SizeValue } from '../utils/types';
+export interface DateInputProps extends Omit<BaseProps, 'onChange' | 'defaultValue'> {
+    /** Ref forwarded to the root element */
+    ref?: React.Ref<HTMLInputElement>;
+    /**
+     * Label text for the input (required for accessibility).
+     */
+    label: string;
+    /**
+     * Whether to visually hide the label (still accessible to screen readers).
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /**
+     * Description text displayed between the label and input.
+     */
+    description?: string;
+    /**
+     * Whether the field is optional. Mutually exclusive with isRequired.
+     * @default false
+     */
+    isOptional?: boolean;
+    /**
+     * Whether the field is required. Mutually exclusive with isOptional.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * The selected date in ISO format (YYYY-MM-DD).
+     */
+    value?: ISODateString;
+    /**
+     * Callback fired when the date changes.
+     * Called with undefined when input is cleared.
+     */
+    onChange?: (value: ISODateString | undefined) => void;
+    /**
+     * Async action on change. Fires after onChange.
+     */
+    changeAction?: (value: ISODateString | undefined) => void | Promise<void>;
+    /**
+     * Whether the input is in a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Minimum selectable date in ISO format.
+     */
+    min?: ISODateString;
+    /**
+     * Maximum selectable date in ISO format.
+     */
+    max?: ISODateString;
+    /**
+     * Custom date constraint functions. Date is disabled if ANY function returns false.
+     */
+    dateConstraints?: ReadonlyArray<(date: Date) => boolean>;
+    /**
+     * Placeholder text shown when no date is selected.
+     * @default "Select a date"
+     */
+    placeholder?: string;
+    /**
+     * The size of the input.
+     * - 'sm': Compact size (18px height)
+     * - 'md': Default size (26px height)
+     * @default 'md'
+     */
+    size?: DateInputSize;
+    /**
+     * Status indicator for the input.
+     * When set, displays a colored border and status icon.
+     * If message is provided, displays below the input.
+     */
+    status?: InputStatus;
+    /**
+     * Width of the field. Numbers are treated as pixels, strings are used as-is
+     * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
+     * stay aligned, unlike setting width via `xstyle`/`className`/`style`.
+     */
+    width?: SizeValue;
+    /**
+     * Tooltip text to display in an info icon at the end of the label.
+     */
+    labelTooltip?: string;
+    /**
+     * Whether to show a clear button when a date is set.
+     * When clicked, resets the value to undefined and returns focus to the input.
+     * @default false
+     */
+    hasClear?: boolean;
+    /**
+     * Number of months to display in the calendar popover.
+     * @default 1
+     */
+    numberOfMonths?: 1 | 2;
+}
+/**
+ * A date picker component combining a text input with a calendar popover.
+ *
+ * @example
+ * ```
+ * <DateInput
+ *   label="Event date"
+ *   value={date}
+ *   onChange={setDate}
+ * />
+ * ```
+ */
+export declare function DateInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, value, onChange, changeAction, isLoading, min, max, dateConstraints, placeholder, size, status, labelTooltip, hasClear, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateInputProps): import("react").JSX.Element;
+export declare namespace DateInput {
+    var displayName: string;
+}
+//# sourceMappingURL=DateInput.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DateInput.d.ts","sourceRoot":"","sources":["../../src/DateInput/DateInput.tsx"],"names":[],"mappings":"AA0BA,OAAO,KAAK,MAAM,MAAM,kBAAkB,CAAC;AAU3C,OAAO,EAEL,KAAK,WAAW,EAMjB,MAAM,UAAU,CAAC;AAGlB,OAAO,EAEL,KAAK,aAAa,EAEnB,MAAM,aAAa,CAAC;AA4DrB,QAAA,MAAM,UAAU;;;;;;;;;;;;;EAad,CAAC;AAEH,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,UAAU,CAAC;AAIpD,YAAY,EACV,WAAW,IAAI,eAAe,EAC9B,eAAe,IAAI,mBAAmB,GACvC,MAAM,UAAU,CAAC;AAElB,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAC5C,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,gBAAgB,CAAC;AAG9C,MAAM,WAAW,cAAe,SAAQ,IAAI,CAC1C,SAAS,EACT,UAAU,GAAG,cAAc,CAC5B;IACC,wCAAwC;IACxC,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,gBAAgB,CAAC,CAAC;IAClC;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;OAGG;IACH,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB;;OAEG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IAErB;;OAEG;IACH,KAAK,CAAC,EAAE,aAAa,CAAC;IAEtB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,CAAC;IAEtD;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,KAAK,EAAE,aAAa,GAAG,SAAS,KAAK,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAE1E;;;OAGG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,GAAG,CAAC,EAAE,aAAa,CAAC;IAEpB;;OAEG;IACH,eAAe,CAAC,EAAE,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,KAAK,OAAO,CAAC,CAAC;IAEzD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,aAAa,CAAC;IAErB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IAErB;;;;OAIG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IACH,cAAc,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CACxB;AAED;;;;;;;;;;;GAWG;AACH,wBAAgB,SAAS,CAAC,EACxB,KAAK,EACL,aAAqB,EACrB,WAAW,EACX,UAAkB,EAClB,UAAkB,EAClB,UAAkB,EAClB,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAiB,EACjB,GAAG,EACH,GAAG,EACH,eAAe,EACf,WAA6B,EAC7B,IAAW,EACX,MAAM,EACN,YAAY,EACZ,QAAgB,EAChB,cAAkB,EAClB,KAAK,EACL,MAAM,EACN,SAAS,EACT,KAAK,EACL,GAAG,EACH,GAAG,IAAI,EACR,EAAE,cAAc,+BA8ShB;yBAxUe,SAAS"}

package/dist/DateInput/DateInput.js

@@ -0,0 +1,362 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file DateInput.tsx
+ * @input Uses React, useId, useState, useCallback, useRef, Field, Icon, Calendar, usePopover
+ * @output Exports DateInput component, DateInputProps
+ * @position Core implementation; consumed by index.ts, tested by DateInput.test.tsx
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/DateInput/DateInput.doc.mjs (props table, features, implementation notes)
+ * - /packages/core/src/DateInput/DateInput.test.tsx (tests for new/changed behavior)
+ * - /packages/core/src/DateInput/index.ts (exports if types change)
+ * - /apps/storybook/stories/DateInput.stories.tsx (storybook stories)
+ * - /packages/cli/templates/blocks/components/DateInput/ (showcase blocks)
+ */
+import { 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, borderVars } from "../theme/tokens.stylex.js";
+import { Field, inputWrapperStyles, inputStatusBorderStyles, inputStatusHoverShadowStyles, inputStatusFocusWithinStyles } from "../Field/index.js";
+import { Icon } from "../Icon/index.js";
+import { Spinner } from "../Spinner/index.js";
+import { Calendar } from "../Calendar/index.js";
+import { useCalendarConstraints } from "../Calendar/hooks/index.js";
+import { usePopover } from "../Popover/index.js";
+import { parseDateInput } from "../utils/index.js";
+import { plainDateFromISO, plainDateToISO, plainDateFormat, DATE_FORMAT_LONG } from "../utils/plainDate.js";
+const sizeStyles = {
+  sm: {
+    kZKoxP: "x6k0iem",
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  },
+  md: {
+    kZKoxP: "x1ueg155",
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  },
+  lg: {
+    kZKoxP: "xssyfek",
+    k7Eaqz: "xfb3i0g",
+    $$css: true
+  }
+};
+
+// Re-export shared types for convenience
+
+import { mergeProps, mergeRefs } from "../utils/index.js";
+import { themeProps } from "../utils/themeProps.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * A date picker component combining a text input with a calendar popover.
+ *
+ * @example
+ * ```
+ * <DateInput
+ *   label="Event date"
+ *   value={date}
+ *   onChange={setDate}
+ * />
+ * ```
+ */
+export function DateInput({
+  label,
+  isLabelHidden = false,
+  description,
+  isOptional = false,
+  isRequired = false,
+  isDisabled = false,
+  value,
+  onChange,
+  changeAction,
+  isLoading = false,
+  min,
+  max,
+  dateConstraints,
+  placeholder = 'Select a date',
+  size = 'md',
+  status,
+  labelTooltip,
+  hasClear = false,
+  numberOfMonths = 1,
+  width,
+  xstyle,
+  className,
+  style,
+  ref,
+  ...rest
+}) {
+  const id = useId();
+  const descriptionID = useId();
+  const statusMessageID = useId();
+  const inputRef = useRef(null);
+  const calendarRef = useRef(null);
+  const lastFiredValueRef = useRef(undefined);
+  const [, startTransition] = useTransition();
+  const [optimisticValue, setOptimisticValue] = useOptimistic(value);
+  const isBusy = isLoading || optimisticValue !== value;
+  const isEffectivelyDisabled = isDisabled || isBusy;
+
+  // Status icon mapping
+  const statusIconMap = {
+    warning: 'warning',
+    error: 'error',
+    success: 'success'
+  };
+  const statusIconColorMap = {
+    warning: 'warning',
+    error: 'error',
+    success: 'success'
+  };
+
+  // Constraint checking for text input validation (reuses calendar logic)
+  const {
+    isDateDisabled
+  } = useCalendarConstraints({
+    min,
+    max,
+    dateConstraints
+  });
+  const ariaDescribedBy = [description ? descriptionID : null, status?.message ? statusMessageID : null].filter(Boolean).join(' ') || undefined;
+
+  // Pending input while user is typing (null = show formatted value)
+  const [pendingInput, setPendingInput] = useState(null);
+
+  // Clear pending input when value changes externally (computed during render
+  // via prev-value ref instead of useEffect to avoid an extra render cycle)
+  const prevValueRef = useRef(value);
+  if (value !== prevValueRef.current) {
+    prevValueRef.current = value;
+    if (value !== lastFiredValueRef.current) {
+      lastFiredValueRef.current = undefined;
+      if (pendingInput !== null) {
+        setPendingInput(null);
+      }
+    }
+  }
+
+  // Display value: pending input if typing, otherwise formatted value
+  const displayValue = pendingInput !== null ? pendingInput : optimisticValue && /^\d{4}-\d{2}-\d{2}$/.test(optimisticValue) ? plainDateFormat(plainDateFromISO(optimisticValue), DATE_FORMAT_LONG) : '';
+
+  // Check if current input is valid (for styling purposes)
+  const isInputValid = pendingInput === null || !pendingInput.trim() ? true : parseDateInput(pendingInput) !== null;
+  const popover = usePopover({
+    dialogLabel: 'Choose date',
+    closeButtonLabel: 'Close calendar',
+    onHide: () => inputRef.current?.focus()
+  });
+
+  // Handle toggling the popover from button click (focus calendar)
+  const handleToggle = useCallback(() => {
+    if (!isEffectivelyDisabled) {
+      if (popover.isOpen) {
+        popover.hide();
+      } else {
+        popover.show();
+      }
+    }
+  }, [isEffectivelyDisabled, popover]);
+
+  // Handle opening the popover from input click (keep focus in input)
+  const handleInputClick = useCallback(() => {
+    if (!isEffectivelyDisabled && !popover.isOpen) {
+      popover.show({
+        skipAutoFocus: true
+      });
+    }
+  }, [isEffectivelyDisabled, popover]);
+
+  // Unified change handler that fires both onChange and changeAction
+  const fireChange = useCallback(newValue => {
+    if (isBusy) {
+      return;
+    }
+    onChange?.(newValue);
+    if (changeAction) {
+      startTransition(async () => {
+        setOptimisticValue(newValue);
+        await changeAction(newValue);
+      });
+    }
+  }, [isBusy, onChange, changeAction, startTransition, setOptimisticValue]);
+
+  // Handle clear button click
+  const handleClear = useCallback(() => {
+    fireChange(undefined);
+    inputRef.current?.focus();
+  }, [fireChange]);
+
+  // Handle date selection from calendar
+  const handleDateSelect = useCallback(selectedDate => {
+    fireChange(selectedDate);
+    setPendingInput(null);
+    popover.hide();
+  }, [fireChange, popover]);
+
+  // Handle input text change - update immediately if valid and allowed
+  const handleInputChange = useCallback(e => {
+    const newValue = e.target.value;
+    setPendingInput(newValue);
+
+    // If the input is valid and passes constraints, update immediately
+    const parsed = parseDateInput(newValue);
+    if (parsed && plainDateToISO(parsed) !== value && !isDateDisabled(parsed)) {
+      const parsedISO = plainDateToISO(parsed);
+      lastFiredValueRef.current = parsedISO;
+      fireChange(parsedISO);
+      // Navigate calendar to show the parsed date's month
+      calendarRef.current?.navigateTo(parsedISO);
+    }
+  }, [value, fireChange, isDateDisabled]);
+
+  // Commit pending input (shared by blur and Enter key)
+  const commitPendingInput = useCallback(() => {
+    if (pendingInput === null) {
+      return;
+    }
+    if (!pendingInput.trim()) {
+      if (value !== undefined) {
+        fireChange(undefined);
+      }
+      setPendingInput(null);
+      return;
+    }
+    const parsed = parseDateInput(pendingInput);
+    if (parsed && !isDateDisabled(parsed)) {
+      const parsedISO = plainDateToISO(parsed);
+      if (parsedISO !== value) {
+        fireChange(parsedISO);
+      }
+    }
+    setPendingInput(null);
+  }, [pendingInput, value, fireChange, isDateDisabled]);
+
+  // Handle blur - validate, check constraints, and clear pending input
+  const handleBlur = useCallback(() => {
+    commitPendingInput();
+  }, [commitPendingInput]);
+
+  // Handle keyboard events on input
+  const handleInputKeyDown = useCallback(e => {
+    if (e.key === 'Escape' && popover.isOpen) {
+      e.preventDefault();
+      popover.hide();
+    } else if (e.key === 'Enter') {
+      e.preventDefault();
+      commitPendingInput();
+    }
+  }, [popover, commitPendingInput]);
+  return /*#__PURE__*/_jsxs(Field, {
+    label: label,
+    isLabelHidden: isLabelHidden,
+    description: description,
+    inputID: id,
+    descriptionID: description ? descriptionID : undefined,
+    isOptional: isOptional,
+    isRequired: isRequired,
+    isDisabled: isDisabled,
+    status: status ? {
+      type: status.type,
+      message: status.message,
+      messageID: status.message ? statusMessageID : undefined
+    } : undefined,
+    labelTooltip: labelTooltip,
+    width: width,
+    children: [/*#__PURE__*/_jsxs("div", {
+      ref: popover.triggerRef,
+      ...rest,
+      ...mergeProps(themeProps('date-input', {
+        size,
+        status: status?.type ?? null
+      }), stylex.props(inputWrapperStyles.base, sizeStyles[size], isEffectivelyDisabled && inputWrapperStyles.disabled, status && inputStatusBorderStyles[status.type], status && inputStatusHoverShadowStyles[status.type], status && inputStatusFocusWithinStyles[status.type], xstyle), className, style),
+      children: [/*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: handleToggle,
+        disabled: isEffectivelyDisabled,
+        "aria-label": popover.isOpen ? 'Close calendar' : 'Open calendar',
+        ...{
+          0: {
+            className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
+          },
+          1: {
+            className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w xh6dtrn x1a2a7pz x1p25gnr x1y3gkto x1h6gzvc"
+          }
+        }[!!isEffectivelyDisabled << 0],
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "calendar",
+          size: "sm",
+          color: "secondary"
+        })
+      }), /*#__PURE__*/_jsx("input", {
+        ref: mergeRefs(ref, inputRef),
+        id: id,
+        type: "text",
+        role: "combobox",
+        value: displayValue,
+        onChange: handleInputChange,
+        onBlur: handleBlur,
+        onClick: handleInputClick,
+        onKeyDown: handleInputKeyDown,
+        placeholder: placeholder,
+        disabled: isEffectivelyDisabled,
+        "aria-describedby": ariaDescribedBy,
+        "aria-required": isRequired === true ? 'true' : undefined,
+        "aria-invalid": status?.type === 'error' ? 'true' : undefined,
+        "aria-busy": isBusy || undefined,
+        "aria-expanded": popover.isOpen,
+        "aria-haspopup": "dialog",
+        "aria-controls": popover.isOpen ? popover.id : undefined,
+        "aria-autocomplete": "none",
+        autoComplete: "off",
+        ...{
+          0: {
+            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"
+          },
+          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"
+          }
+        }[!!isEffectivelyDisabled << 1 | !!!isInputValid << 0]
+      }), hasClear && value !== undefined && !isEffectivelyDisabled && /*#__PURE__*/_jsx("button", {
+        type: "button",
+        onClick: handleClear,
+        "aria-label": `Clear ${label}`,
+        ...{
+          className: "x78zum5 x6s0dn4 xl56j7k x1717udv x1ghz6dp xc342km xng3xce xjbqb8w x1ypdohk xh6dtrn x1a2a7pz x1p25gnr x1y3gkto"
+        },
+        children: /*#__PURE__*/_jsx(Icon, {
+          icon: "close",
+          size: "sm",
+          color: "secondary"
+        })
+      }), isBusy && /*#__PURE__*/_jsx(Spinner, {
+        size: "sm"
+      }), status && /*#__PURE__*/_jsx(Icon, {
+        icon: statusIconMap[status.type],
+        size: "md",
+        color: statusIconColorMap[status.type]
+      })]
+    }), popover.render(/*#__PURE__*/_jsx(Calendar, {
+      handleRef: calendarRef,
+      mode: "single",
+      value: optimisticValue,
+      onChange: handleDateSelect,
+      min: min,
+      max: max,
+      dateConstraints: dateConstraints,
+      numberOfMonths: numberOfMonths
+    }), {
+      placement: 'below',
+      alignment: 'start'
+    })]
+  });
+}
+DateInput.displayName = 'DateInput';

package/dist/DateInput/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @file index.ts
+ * @input DateInput component exports
+ * @output Re-exports DateInput and types
+ * @position Package entry point for DateInput
+ */
+export { DateInput } from './DateInput';
+export type { DateInputProps, DateInputSize, DateInputStatus, DateInputStatusType, } from './DateInput';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/DateInput/index.ts"],"names":[],"mappings":"AAIA;;;;;GAKG;AAEH,OAAO,EAAC,SAAS,EAAC,MAAM,aAAa,CAAC;AACtC,YAAY,EACV,cAAc,EACd,aAAa,EACb,eAAe,EACf,mBAAmB,GACpB,MAAM,aAAa,CAAC"}

package/dist/DateInput/index.js

@@ -0,0 +1,11 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input DateInput component exports
+ * @output Re-exports DateInput and types
+ * @position Package entry point for DateInput
+ */
+export { DateInput } from "./DateInput.js";

package/dist/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,133 @@
+import { type InputStatus } from '../Field';
+import { type ISODateString, type DateRange } from '../Calendar';
+import type { BaseProps } from '../BaseProps';
+import type { SizeValue } from '../utils/types';
+export type { DateRange } from '../Calendar';
+export interface DateRangePreset {
+    label: string;
+    getRange: () => DateRange;
+}
+export type DateRangeInputSize = 'sm' | 'md' | 'lg';
+export type { InputStatus as DateRangeInputStatus, InputStatusType as DateRangeInputStatusType, } from '../Field';
+export interface DateRangeInputProps extends Omit<BaseProps, 'onChange' | 'defaultValue'> {
+    /** Ref forwarded to the trigger button */
+    ref?: React.Ref<HTMLButtonElement>;
+    /**
+     * Label text for the input (required for accessibility).
+     */
+    label: string;
+    /**
+     * Whether to visually hide the label (still accessible to screen readers).
+     * @default false
+     */
+    isLabelHidden?: boolean;
+    /**
+     * Description text displayed between the label and input.
+     */
+    description?: string;
+    /**
+     * Whether the field is optional. Mutually exclusive with isRequired.
+     * @default false
+     */
+    isOptional?: boolean;
+    /**
+     * Whether the field is required. Mutually exclusive with isOptional.
+     * @default false
+     */
+    isRequired?: boolean;
+    /**
+     * Whether the input is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * The selected date range, or null if no range is selected.
+     */
+    value: DateRange | null;
+    /**
+     * Callback fired when the date range changes.
+     * Called with null when the range is cleared.
+     */
+    onChange: (value: DateRange | null) => void;
+    /**
+     * Async action on change. Fires after onChange.
+     */
+    changeAction?: (value: DateRange | null) => void | Promise<void>;
+    /**
+     * Whether the input is in a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+    /**
+     * Minimum selectable date in ISO format.
+     */
+    min?: ISODateString;
+    /**
+     * Maximum selectable date in ISO format.
+     */
+    max?: ISODateString;
+    /**
+     * Custom date constraint functions.
+     * A date is disabled if ANY function returns false.
+     */
+    dateConstraints?: ReadonlyArray<(date: Date) => boolean>;
+    /**
+     * Preset date ranges shown as quick-select options beside the calendar.
+     */
+    presets?: ReadonlyArray<DateRangePreset>;
+    /**
+     * Whether to show a clear button when a range is selected.
+     * @default true
+     */
+    hasClear?: boolean;
+    /**
+     * Placeholder text shown when no range is selected.
+     * @default "Select date range"
+     */
+    placeholder?: string;
+    /**
+     * The size of the trigger.
+     * @default 'md'
+     */
+    size?: DateRangeInputSize;
+    /**
+     * Status indicator for the input.
+     */
+    status?: InputStatus;
+    /**
+     * Width of the field. Numbers are treated as pixels, strings are used as-is
+     * (e.g. `'100%'`). Sizes the whole field (label, control, and status) so they
+     * stay aligned, unlike setting width via `xstyle`/`className`/`style`.
+     */
+    width?: SizeValue;
+    /**
+     * Tooltip text to display in an info icon at the end of the label.
+     */
+    labelTooltip?: string;
+    /**
+     * Number of months to display in the calendar.
+     * @default 2
+     */
+    numberOfMonths?: 1 | 2;
+}
+/**
+ * A date range picker with a button trigger that opens a popover
+ * containing a dual-month calendar and optional preset ranges.
+ *
+ * @example
+ * ```
+ * <DateRangeInput
+ *   label="Date range"
+ *   value={range}
+ *   onChange={setRange}
+ *   presets={[
+ *     { label: "Last 7 days", getRange: () => ({start: "...", end: "..."}) },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function DateRangeInput({ label, isLabelHidden, description, isOptional, isRequired, isDisabled, value, onChange, changeAction, isLoading, min, max, dateConstraints, presets, hasClear, placeholder, size: sizeProp, status, labelTooltip, numberOfMonths, width, xstyle, className, style, ref, ...rest }: DateRangeInputProps): import("react").JSX.Element;
+export declare namespace DateRangeInput {
+    var displayName: string;
+}
+//# sourceMappingURL=DateRangeInput.d.ts.map

package/dist/DateRangeInput/DateRangeInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateRangeInput.d.ts","sourceRoot":"","sources":["../../src/DateRangeInput/DateRangeInput.tsx"],"names":[],"mappings":"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"}