@misoto22/kioku-ui 0.0.0 → 0.2.0

package/dist/ContextMenu/ContextMenu.d.ts

@@ -0,0 +1,13 @@
+import { type ReactNode } from 'react';
+/** Props for a menu opened by a secondary click on a region. */
+export interface ContextMenuProps {
+    readonly children: ReactNode;
+    readonly label: string;
+    readonly menu: ReactNode;
+}
+/**
+ * Opens a menu at the pointer on a secondary click. The menu anchors to a
+ * zero-size marker placed at the click point, so it positions and flips with
+ * the same rules as any other anchored surface.
+ */
+export declare function ContextMenu({ children, label, menu }: ContextMenuProps): import("react").JSX.Element;

package/dist/ContextMenu/ContextMenu.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const contextMenuDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/ContextMenu/ContextMenu.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const contextMenuDoc = {
+  name: 'ContextMenu',
+  description: 'Opens a menu at the pointer on a secondary click.',
+  props: [{
+    name: 'children',
+    description: 'Supplies the region that accepts the click.'
+  }, {
+    name: 'label',
+    description: 'Names the menu for assistive technology.'
+  }, {
+    name: 'menu',
+    description: 'Supplies the menu items.'
+  }],
+  inheritedProps: ['None; ContextMenu owns its region and menu'],
+  example: '<ContextMenu label="Row actions" menu={items}><TableRow>...</TableRow></ContextMenu>',
+  storyId: 'core-context-menu--default'
+};

package/dist/ContextMenu/ContextMenu.js

@@ -0,0 +1,52 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { DropdownMenu } from '../DropdownMenu/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for a menu opened by a secondary click on a region. */
+
+/**
+ * Opens a menu at the pointer on a secondary click. The menu anchors to a
+ * zero-size marker placed at the click point, so it positions and flips with
+ * the same rules as any other anchored surface.
+ */
+export function ContextMenu({
+  children,
+  label,
+  menu
+}) {
+  const anchorRef = useRef(null);
+  const [point, setPoint] = useState(undefined);
+  function handleContextMenu(event) {
+    event.preventDefault();
+    setPoint({
+      left: event.clientX,
+      top: event.clientY
+    });
+  }
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx("div", {
+      onContextMenu: handleContextMenu,
+      children: children
+    }), point === undefined ? null : /*#__PURE__*/_jsx("span", {
+      "aria-hidden": "true",
+      ref: anchorRef,
+      ...{
+        className: "xqtp20y xixxii4 xnalus7"
+      },
+      style: {
+        left: point.left,
+        top: point.top
+      }
+    }), /*#__PURE__*/_jsx(DropdownMenu, {
+      anchorRef: anchorRef,
+      label: label,
+      onDismiss: () => {
+        setPoint(undefined);
+      },
+      open: point !== undefined,
+      placement: "bottom",
+      children: menu
+    })]
+  });
+}

package/dist/ContextMenu/index.d.ts

@@ -0,0 +1 @@
+export { ContextMenu, type ContextMenuProps } from './ContextMenu.js';

package/dist/ContextMenu/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { ContextMenu } from './ContextMenu.js';

package/dist/DateInput/DateInput.d.ts

@@ -0,0 +1,5 @@
+import { type TemporalInputProps } from './TemporalInput.js';
+/** Props for a calendar-date field. */
+export type DateInputProps = TemporalInputProps;
+/** Accepts one calendar date, exchanged as an ISO `YYYY-MM-DD` string. */
+export declare function DateInput(props: DateInputProps): import("react").JSX.Element;

package/dist/DateInput/DateInput.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const dateInputDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/DateInput/DateInput.doc.js

@@ -0,0 +1,18 @@
+import "../styles/stylex.css";
+export const dateInputDoc = {
+  name: 'DateInput',
+  description: 'Accepts one calendar date as an ISO string.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled date.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the ISO date string.'
+  }, {
+    name: 'value',
+    description: 'Controls the current ISO date string.'
+  }],
+  inheritedProps: ['InputHTMLAttributes<HTMLInputElement> except children, className, defaultValue, onChange, type, and value'],
+  example: '<DateInput onValueChange={setReleaseDate} value={releaseDate} />',
+  storyId: 'core-date-input--default'
+};

package/dist/DateInput/DateInput.js

@@ -0,0 +1,12 @@
+import { TemporalInput } from './TemporalInput.js';
+
+/** Props for a calendar-date field. */
+import "../styles/stylex.css";
+import { jsx as _jsx } from "react/jsx-runtime";
+/** Accepts one calendar date, exchanged as an ISO `YYYY-MM-DD` string. */
+export function DateInput(props) {
+  return /*#__PURE__*/_jsx(TemporalInput, {
+    ...props,
+    type: "date"
+  });
+}

package/dist/DateInput/TemporalInput.d.ts

@@ -0,0 +1,34 @@
+import { type InputHTMLAttributes } from 'react';
+/** Native input types that accept a point in time. */
+export type TemporalInputType = 'date' | 'datetime-local' | 'time';
+type SharedTemporalProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'children' | 'className' | 'defaultValue' | 'onChange' | 'type' | 'value'> & {
+    readonly onValueChange?: (value: string) => void;
+    /**
+     * Opens a picker of the caller's own instead of the platform's. `DatePicker`
+     * supplies one; without it the trigger opens the platform picker, which is
+     * the right default because that picker brings the phone wheel, the reader's
+     * date order and the accessibility tree with it.
+     */
+    readonly onPickerOpen?: () => void;
+    /** Names the control that opens the picker. */
+    readonly pickerLabel?: string;
+};
+type ControlledTemporalProps = SharedTemporalProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: string) => void;
+    readonly value: string;
+};
+type UncontrolledTemporalProps = SharedTemporalProps & {
+    readonly defaultValue?: string;
+    readonly value?: never;
+};
+/** Props shared by every single-value temporal field. */
+export type TemporalInputProps = ControlledTemporalProps | UncontrolledTemporalProps;
+/**
+ * @internal Shared native implementation for the temporal inputs. Values are
+ * exchanged in the ISO form the platform control uses, never a localized one.
+ */
+export declare function TemporalInput({ 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, defaultValue, disabled, id, onPickerOpen, onValueChange, pickerLabel, readOnly, required, type, value, ...props }: TemporalInputProps & {
+    readonly type: TemporalInputType;
+}): import("react").JSX.Element;
+export {};

package/dist/DateInput/TemporalInput.js

@@ -0,0 +1,169 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { semanticTokens } from '../authoring.stylex.js';
+import { Icon } from '../Icon/index.js';
+import { useFieldControl } from '../Field/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+/** Native input types that accept a point in time. */
+
+const defaultPickerLabels = {
+  date: 'Choose a date',
+  'datetime-local': 'Choose a date and time',
+  time: 'Choose a time'
+};
+
+/** Props shared by every single-value temporal field. */
+
+/**
+ * @internal Shared native implementation for the temporal inputs. Values are
+ * exchanged in the ISO form the platform control uses, never a localized one.
+ */
+export function TemporalInput({
+  'aria-describedby': ariaDescribedBy,
+  'aria-invalid': ariaInvalid,
+  defaultValue = '',
+  disabled,
+  id,
+  onPickerOpen,
+  onValueChange,
+  pickerLabel,
+  readOnly,
+  required,
+  type,
+  value,
+  ...props
+}) {
+  const field = useFieldControl();
+  const controlRef = useRef(null);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const describedBy = [field?.describedBy, ariaDescribedBy].filter(Boolean).join(' ') || undefined;
+  const resolvedInvalid = ariaInvalid ?? field?.invalid;
+  const invalid = resolvedInvalid !== undefined && resolvedInvalid !== false && resolvedInvalid !== 'false';
+  function handleChange(event) {
+    const next = event.currentTarget.value;
+    if (value === undefined) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }
+  const shown = value ?? internalValue;
+  const opensPicker = !disabled && !readOnly;
+
+  // `showPicker` is the only way to open the platform picker once its own
+  // glyph is hidden. Where it is missing the trigger is not drawn at all — a
+  // control that does nothing when pressed is worse than one that is absent,
+  // and the field still types and steps on the keyboard without it.
+  function openPicker() {
+    if (onPickerOpen) {
+      onPickerOpen();
+      return;
+    }
+    const control = controlRef.current;
+    if (typeof control?.showPicker === 'function') {
+      control.showPicker();
+    }
+  }
+  return /*#__PURE__*/_jsxs("span", {
+    ...{
+      0: {
+        className: "x1qjc9v5 xavu78a x1wxkff4 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x12uk28n"
+      },
+      4: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x12uk28n x1ixvsy6 xilcjya"
+      },
+      2: {
+        className: "x1qjc9v5 xavu78a x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xcf5wgx x9a976t xtku8dq"
+      },
+      6: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 x1ixvsy6 xcf5wgx x9a976t xtku8dq"
+      },
+      1: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x19blmh3 x1lnk2a9 x1ieeoof"
+      },
+      5: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 xc8z1lp x19blmh3 x1lnk2a9 x1ieeoof"
+      },
+      3: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 x9a976t x19blmh3 x1lnk2a9 x1ieeoof"
+      },
+      7: {
+        className: "x1qjc9v5 x8kq9my x1jnjmdy xpxnlqs x9f619 x78zum5 xr8hsnb xb3r6kr x1elc2ff xts7igz xxjumz xh8yej3 x9a976t x19blmh3 x1lnk2a9 x1ieeoof"
+      }
+    }[!!(readOnly && !disabled) << 2 | !!(invalid && !disabled) << 1 | !!disabled << 0],
+    children: [/*#__PURE__*/_jsx("input", {
+      ...props,
+      "aria-describedby": describedBy,
+      "aria-invalid": resolvedInvalid,
+      disabled: disabled,
+      id: field?.controlId ?? id,
+      onChange: handleChange,
+      readOnly: readOnly,
+      ref: controlRef,
+      required: required ?? field?.required,
+      ...{
+        0: {
+          className: "xjbqb8w xng3xce xc342km x9f619 x1y4yzzg x7ohnf4 xltg2ad xss6m8b x1kbjp2h x1ezks3f xeuugli x10y07nz x1qtbwip xh8yej3 xolhmmf xuz5hiu x1dz38l1 x609gy3 xi5y0ii"
+        },
+        2: {
+          className: "xjbqb8w xng3xce xc342km x9f619 x7ohnf4 xltg2ad xss6m8b x1kbjp2h x1ezks3f xeuugli x10y07nz x1qtbwip xh8yej3 xolhmmf xuz5hiu x1dz38l1 x609gy3 xi5y0ii x1mgtvnk xov7yna"
+        },
+        1: {
+          className: "xjbqb8w xng3xce xc342km x9f619 x7ohnf4 xltg2ad xss6m8b x1kbjp2h x1ezks3f xeuugli x10y07nz x1qtbwip xh8yej3 xolhmmf xuz5hiu x1dz38l1 x609gy3 xi5y0ii x1y4yzzg"
+        },
+        3: {
+          className: "xjbqb8w xng3xce xc342km x9f619 x7ohnf4 xltg2ad xss6m8b x1kbjp2h x1ezks3f xeuugli x10y07nz x1qtbwip xh8yej3 xolhmmf xuz5hiu x1dz38l1 x609gy3 xi5y0ii xov7yna x1y4yzzg"
+        }
+      }[!!(shown === '' && !disabled) << 1 | !!(readOnly && !disabled) << 0],
+      type: type,
+      value: shown
+    }), opensPicker ? /*#__PURE__*/_jsx("button", {
+      "aria-label": pickerLabel ?? defaultPickerLabels[type],
+      onClick: openPicker,
+      type: "button",
+      ...(onPickerOpen ? {} : {
+        tabIndex: -1
+      }),
+      ...{
+        className: "x6s0dn4 xjbqb8w x1d7crt5 xb2q83l x1rclw80 x17y7oyd x1ypdohk x78zum5 x2lah0s x1y0kk5z xl56j7k x1717udv x1elc2ff xs2xxs2 xxjumz x15nsxps x15meki4 xhsp9t9 x1p22nma x17lds6u x1c0aqn8 x1t0gddj"
+      },
+      children: /*#__PURE__*/_jsx(Icon, {
+        size: "sm",
+        tone: "inherit",
+        children: type === 'time' ? /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("circle", {
+            cx: "12",
+            cy: "12",
+            fill: "none",
+            r: "9",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          }), /*#__PURE__*/_jsx("path", {
+            d: "M12 7v5l3 2",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeWidth: "2"
+          })]
+        }) : /*#__PURE__*/_jsxs(_Fragment, {
+          children: [/*#__PURE__*/_jsx("rect", {
+            fill: "none",
+            height: "16",
+            rx: "2",
+            stroke: "currentColor",
+            strokeWidth: "2",
+            width: "18",
+            x: "3",
+            y: "5"
+          }), /*#__PURE__*/_jsx("path", {
+            d: "M3 10h18M8 3v4M16 3v4",
+            fill: "none",
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeWidth: "2"
+          })]
+        })
+      })
+    }) : null]
+  });
+}

package/dist/DateInput/index.d.ts

@@ -0,0 +1,2 @@
+export { DateInput, type DateInputProps } from './DateInput.js';
+export { TemporalInput, type TemporalInputProps, type TemporalInputType, } from './TemporalInput.js';

package/dist/DateInput/index.js

@@ -0,0 +1,3 @@
+import "../styles/stylex.css";
+export { DateInput } from './DateInput.js';
+export { TemporalInput } from './TemporalInput.js';

package/dist/DatePicker/DatePicker.d.ts

@@ -0,0 +1,38 @@
+import { type HTMLAttributes } from 'react';
+type SharedDatePickerProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children' | 'className' | 'defaultValue' | 'onChange'> & {
+    readonly disabled?: boolean;
+    /**
+     * Given to the field, not to the wrapper — a `<label for>` beside this
+     * control has to reach the input the reader types into.
+     */
+    readonly id?: string;
+    /** Names the month grid for assistive technology. */
+    readonly label: string;
+    readonly max?: string;
+    readonly min?: string;
+    readonly onValueChange?: (value: string) => void;
+    readonly pickerLabel?: string;
+    readonly readOnly?: boolean;
+};
+type ControlledDatePickerProps = SharedDatePickerProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: string) => void;
+    readonly value: string;
+};
+type UncontrolledDatePickerProps = SharedDatePickerProps & {
+    readonly defaultValue?: string;
+    readonly value?: never;
+};
+/** Props for a date field whose picker this system draws. */
+export type DatePickerProps = ControlledDatePickerProps | UncontrolledDatePickerProps;
+/**
+ * A date field with a month grid of this system's own instead of the engine's.
+ *
+ * `DateInput` remains the right choice for a lone date: leaving the platform
+ * picker in place is what keeps the wheel on a phone, the reader's own date
+ * order and the whole accessibility tree for free. Reach for this one when the
+ * sheet itself has to belong to the page — a range, a set of shortcuts, two
+ * months side by side — because none of those exist in any engine's picker.
+ */
+export declare function DatePicker({ 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, defaultValue, disabled, id, label, max, min, onValueChange, pickerLabel, readOnly, value, ...props }: DatePickerProps): import("react").JSX.Element;
+export {};

package/dist/{components/AsyncState.doc.d.ts → DatePicker/DatePicker.doc.d.ts}

@@ -1,4 +1,4 @@
-export declare const asyncStateDoc: {
+export declare const datePickerDoc: {
     name: string;
     description: string;
     props: ({

package/dist/DatePicker/DatePicker.doc.js

@@ -0,0 +1,31 @@
+import "../styles/stylex.css";
+export const datePickerDoc = {
+  name: 'DatePicker',
+  description: "Picks a date from this system's own month grid.",
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled date.'
+  }, {
+    name: 'id',
+    description: 'Names the field a label points at.'
+  }, {
+    name: 'label',
+    description: 'Names the month grid.',
+    required: true
+  }, {
+    name: 'max',
+    description: 'Refuses days after this ISO date.'
+  }, {
+    name: 'min',
+    description: 'Refuses days before this ISO date.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the ISO date string.'
+  }, {
+    name: 'value',
+    description: 'Controls the current ISO date string.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLSpanElement> except children, className, defaultValue, and onChange'],
+  example: '<DatePicker label="Release date" onValueChange={setDate} value={date} />',
+  storyId: 'core-date-picker--default'
+};

package/dist/DatePicker/DatePicker.js

@@ -0,0 +1,111 @@
+import * as stylex from '@stylexjs/stylex';
+import { useRef, useState } from 'react';
+import { Calendar } from '../Calendar/index.js';
+import { DateInput } from '../DateInput/index.js';
+import { Popover } from '../Popover/index.js';
+import "../styles/stylex.css";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/** Props for a date field whose picker this system draws. */
+
+/**
+ * A date field with a month grid of this system's own instead of the engine's.
+ *
+ * `DateInput` remains the right choice for a lone date: leaving the platform
+ * picker in place is what keeps the wheel on a phone, the reader's own date
+ * order and the whole accessibility tree for free. Reach for this one when the
+ * sheet itself has to belong to the page — a range, a set of shortcuts, two
+ * months side by side — because none of those exist in any engine's picker.
+ */
+export function DatePicker({
+  'aria-label': ariaLabel,
+  'aria-labelledby': ariaLabelledBy,
+  defaultValue = '',
+  disabled,
+  id,
+  label,
+  max,
+  min,
+  onValueChange,
+  pickerLabel,
+  readOnly,
+  value,
+  ...props
+}) {
+  // `label` names the grid, and a reader who never opens the grid would meet
+  // an unnamed field. An explicit name wins; an `id` means the caller has
+  // wired a `<label for>` of its own, which anything set here would override.
+  const fieldLabel = ariaLabel ?? (ariaLabelledBy === undefined && id === undefined ? label : undefined);
+  const anchorRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const shown = value ?? internalValue;
+  function commit(next) {
+    if (value === undefined) {
+      setInternalValue(next);
+    }
+    onValueChange?.(next);
+  }
+
+  // Closing returns the reader to the field they left, whether the sheet was
+  // dismissed or a day was chosen. A picker that drops focus on the document
+  // costs a keyboard reader the whole form.
+  function close() {
+    setOpen(false);
+    anchorRef.current?.querySelector('input')?.focus();
+  }
+  return /*#__PURE__*/_jsxs("span", {
+    ...props,
+    ref: anchorRef,
+    ...{
+      className: "x1lliihq x1n2onr6 xh8yej3"
+    },
+    children: [/*#__PURE__*/_jsx(DateInput, {
+      ...(fieldLabel === undefined ? {} : {
+        'aria-label': fieldLabel
+      }),
+      ...(ariaLabelledBy === undefined ? {} : {
+        'aria-labelledby': ariaLabelledBy
+      }),
+      disabled: disabled,
+      ...(id === undefined ? {} : {
+        id
+      }),
+      ...(max === undefined ? {} : {
+        max
+      }),
+      ...(min === undefined ? {} : {
+        min
+      }),
+      onPickerOpen: () => {
+        setOpen(true);
+      },
+      onValueChange: commit,
+      ...(pickerLabel === undefined ? {} : {
+        pickerLabel
+      }),
+      readOnly: readOnly,
+      value: shown
+    }), /*#__PURE__*/_jsx(Popover, {
+      alignment: "start",
+      anchorRef: anchorRef,
+      onDismiss: close,
+      open: open,
+      placement: "bottom",
+      role: "presentation",
+      children: /*#__PURE__*/_jsx(Calendar, {
+        label: label,
+        ...(max === undefined ? {} : {
+          max
+        }),
+        ...(min === undefined ? {} : {
+          min
+        }),
+        onValueChange: next => {
+          commit(next);
+          close();
+        },
+        value: shown
+      })
+    })]
+  });
+}

package/dist/DatePicker/index.d.ts

@@ -0,0 +1 @@
+export { DatePicker, type DatePickerProps } from './DatePicker.js';

package/dist/DatePicker/index.js

@@ -0,0 +1,2 @@
+import "../styles/stylex.css";
+export { DatePicker } from './DatePicker.js';

package/dist/DateRangeInput/DateRangeInput.d.ts

@@ -0,0 +1,34 @@
+import { type HTMLAttributes } from 'react';
+/** A start and end date, either of which may still be empty. */
+export interface DateRange {
+    readonly end: string;
+    readonly start: string;
+}
+type SharedRangeProps = Omit<HTMLAttributes<HTMLFieldSetElement>, 'children' | 'className' | 'defaultValue' | 'onChange'> & {
+    readonly endLabel?: string;
+    readonly legend: string;
+    readonly onValueChange?: (value: DateRange) => void;
+    readonly startLabel?: string;
+};
+type ControlledRangeProps = SharedRangeProps & {
+    readonly defaultValue?: never;
+    readonly onValueChange: (value: DateRange) => void;
+    readonly value: DateRange;
+};
+type UncontrolledRangeProps = SharedRangeProps & {
+    readonly defaultValue?: DateRange;
+    readonly value?: never;
+};
+/** Props for a start-to-end date range. */
+export type DateRangeInputProps = ControlledRangeProps | UncontrolledRangeProps;
+/**
+ * Accepts a start and an end date. The end control refuses dates before the
+ * start, so an impossible range cannot be entered in the first place.
+ *
+ * Each bound is a `DatePicker` rather than a `DateInput`: no engine offers a
+ * range picker, and two platform pickers side by side cannot show the reader
+ * that the second is bounded by the first. Two grids of this system's own can,
+ * because the bound is passed to them as `min` and `max`.
+ */
+export declare function DateRangeInput({ defaultValue, endLabel, legend, onValueChange, startLabel, value, ...props }: DateRangeInputProps): import("react").JSX.Element;
+export {};

package/dist/DateRangeInput/DateRangeInput.doc.d.ts

@@ -0,0 +1,11 @@
+export declare const dateRangeInputDoc: {
+    name: string;
+    description: string;
+    props: {
+        name: string;
+        description: string;
+    }[];
+    inheritedProps: string[];
+    example: string;
+    storyId: string;
+};

package/dist/DateRangeInput/DateRangeInput.doc.js

@@ -0,0 +1,27 @@
+import "../styles/stylex.css";
+export const dateRangeInputDoc = {
+  name: 'DateRangeInput',
+  description: 'Accepts a start and end date that cannot cross.',
+  props: [{
+    name: 'defaultValue',
+    description: 'Sets the initial uncontrolled range.'
+  }, {
+    name: 'endLabel',
+    description: 'Names the end control.'
+  }, {
+    name: 'legend',
+    description: 'States what the range covers.'
+  }, {
+    name: 'onValueChange',
+    description: 'Receives the next range.'
+  }, {
+    name: 'startLabel',
+    description: 'Names the start control.'
+  }, {
+    name: 'value',
+    description: 'Controls the current range.'
+  }],
+  inheritedProps: ['HTMLAttributes<HTMLFieldSetElement> except children, className, defaultValue, and onChange'],
+  example: '<DateRangeInput legend="Reporting period" onValueChange={setRange} value={range} />',
+  storyId: 'core-date-range-input--default'
+};