@igne-agency/react-web-ui 0.5.0 → 0.6.0

package/dist/data-table/data-table.js

@@ -1,6 +1,6 @@
 import { Pagination } from "../components/pagination/pagination.js";
 import { DataTableContent } from "./data-table-content.js";
-import { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, StaleOverlay, StateRow, SubRow, Table } from "./data-table-parts.js";
+import { Body, Cell, ErrorMessage, Frame, Head, HeaderCell, HeaderRow, LoadingCaption, PlaceholderRows, RefreshFailed, Row, Scroller, SortButton, SortIcon, StaleOverlay, StateRow, SubRow, Table } from "./data-table-parts.js";
 import { DataTableContext, useDataTable } from "./data-table-context.js";
 import { DataTableSelectionBar } from "./data-table-selection.js";
 import { PAGE_SIZE_OPTIONS } from "./table-features.js";
@@ -82,11 +82,16 @@ var Toolbar = (t0) => {
 	return t2;
 };
 /**
-* The pager driven by the instance's pagination API (built with
-* `manualPagination` + server `rowCount`): the ready-made `Pagination` from its
-* labels and icons, or a `Pagination.Root` holding the parts it is given. The
-* page sizes come from the table's `meta.pageSizeOptions`, and picking one
-* returns to the first page.
+* The `Pagination.Root` driven by the instance's pagination API (built with
+* `manualPagination` + server `rowCount`), holding the `Pagination` parts it is
+* given. The page sizes come from the table's `meta.pageSizeOptions`, and
+* picking one returns to the first page.
+*
+* @example
+* <DataTable.Pagination>
+* 	<Pagination.Index label={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`} />
+* 	<Pagination.Controls>…</Pagination.Controls>
+* </DataTable.Pagination>
 */
 var DataTablePagination = (props) => {
 	const $ = c(18);
@@ -148,10 +153,7 @@ var DataTablePagination = (props) => {
 	const bound = t6;
 	let t7;
 	if ($[15] !== bound || $[16] !== props) {
-		t7 = props.indexLabel === void 0 ? /* @__PURE__ */ jsx(Pagination.Root, {
-			...props,
-			...bound
-		}) : /* @__PURE__ */ jsx(Pagination, {
+		t7 = /* @__PURE__ */ jsx(Pagination.Root, {
 			...props,
 			...bound
 		});
@@ -185,19 +187,13 @@ var DataTablePagination = (props) => {
 * 		sortAscendingIcon={<ArrowUpwardIcon />}
 * 		sortDescendingIcon={<ArrowDownwardIcon />}
 * 	/>
-* 	<DataTable.Pagination
-* 		pageSizeLabel="Rows per page"
-* 		indexLabel={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`}
-* 		firstLabel="First page"
-* 		previousLabel="Previous page"
-* 		nextLabel="Next page"
-* 		lastLabel="Last page"
-* 		firstIcon={<FirstPageIcon />}
-* 		previousIcon={<ChevronLeftIcon />}
-* 		nextIcon={<ChevronRightIcon />}
-* 		lastIcon={<LastPageIcon />}
-* 		checkIcon={<CheckIcon />}
-* 	/>
+* 	<DataTable.Pagination>
+* 		<Pagination.Index label={page => `Page ${page.pageIndex + 1} of ${page.pageCount}`} />
+* 		<Pagination.Controls>
+* 			<Pagination.Previous render={<IconButton label="Previous page" variant="tertiary"><ChevronLeftIcon /></IconButton>} />
+* 			<Pagination.Next render={<IconButton label="Next page" variant="tertiary"><ChevronRightIcon /></IconButton>} />
+* 		</Pagination.Controls>
+* 	</DataTable.Pagination>
 * </DataTable.Root>
 */
 var DataTable = {
@@ -216,6 +212,7 @@ var DataTable = {
 	HeaderRow,
 	HeaderCell,
 	SortButton,
+	SortIcon,
 	Body,
 	Row,
 	Cell,

package/dist/data-table/data-table.module.js

@@ -1,41 +1,39 @@
 import './data-table.css';// src/data-table/data-table.module.scss
-var root = "_root_k21i7_3";
-var toolbar = "_toolbar_k21i7_77";
-var scrollFrame = "_scrollFrame_k21i7_84";
-var stale = "_stale_k21i7_92";
-var staleOverlay = "_staleOverlay_k21i7_98";
-var contentWrap = "_contentWrap_k21i7_101";
-var th = "_th_k21i7_132";
-var edgeStart = "_edgeStart_k21i7_1";
-var edgeEnd = "_edgeEnd_k21i7_1";
-var refreshFailed = "_refreshFailed_k21i7_165";
-var table = "_table_k21i7_177";
-var thead = "_thead_k21i7_185";
-var sortToggle = "_sortToggle_k21i7_200";
-var sortIcon = "_sortIcon_k21i7_251";
-var td = "_td_k21i7_260";
-var row = "_row_k21i7_285";
-var subRow = "_subRow_k21i7_307";
-var skeletonBar = "_skeletonBar_k21i7_316";
-var busyCaption = "_busyCaption_k21i7_319";
-var stateCell = "_stateCell_k21i7_327";
-var errorState = "_errorState_k21i7_332";
-var pagination = "_pagination_k21i7_335";
-var selectionContainer = "_selectionContainer_k21i7_339";
-var selectionBar = "_selectionBar_k21i7_343";
-var selectionSummary = "_selectionSummary_k21i7_413";
-var selectionTotal = "_selectionTotal_k21i7_428";
-var selectionCount = "_selectionCount_k21i7_429";
-var selectionMeasure = "_selectionMeasure_k21i7_430";
-var selectionStatus = "_selectionStatus_k21i7_462";
-var selectionActions = "_selectionActions_k21i7_470";
-var selectionSelectAll = "_selectionSelectAll_k21i7_500";
-var selectionBulk = "_selectionBulk_k21i7_503";
+var root = "_root_ywjb2_3";
+var toolbar = "_toolbar_ywjb2_77";
+var scrollFrame = "_scrollFrame_ywjb2_84";
+var staleOverlay = "_staleOverlay_ywjb2_92";
+var contentWrap = "_contentWrap_ywjb2_95";
+var th = "_th_ywjb2_126";
+var edgeStart = "_edgeStart_ywjb2_1";
+var edgeEnd = "_edgeEnd_ywjb2_1";
+var refreshFailed = "_refreshFailed_ywjb2_159";
+var table = "_table_ywjb2_171";
+var thead = "_thead_ywjb2_179";
+var sortToggle = "_sortToggle_ywjb2_194";
+var sortIcon = "_sortIcon_ywjb2_245";
+var td = "_td_ywjb2_254";
+var row = "_row_ywjb2_279";
+var subRow = "_subRow_ywjb2_301";
+var skeletonBar = "_skeletonBar_ywjb2_310";
+var busyCaption = "_busyCaption_ywjb2_313";
+var stateCell = "_stateCell_ywjb2_321";
+var errorState = "_errorState_ywjb2_326";
+var pagination = "_pagination_ywjb2_329";
+var selectionContainer = "_selectionContainer_ywjb2_333";
+var selectionBar = "_selectionBar_ywjb2_337";
+var selectionSummary = "_selectionSummary_ywjb2_410";
+var selectionTotal = "_selectionTotal_ywjb2_425";
+var selectionCount = "_selectionCount_ywjb2_426";
+var selectionMeasure = "_selectionMeasure_ywjb2_427";
+var selectionStatus = "_selectionStatus_ywjb2_459";
+var selectionActions = "_selectionActions_ywjb2_467";
+var selectionSelectAll = "_selectionSelectAll_ywjb2_497";
+var selectionBulk = "_selectionBulk_ywjb2_500";
 var data_table_module_default = {
 	root,
 	toolbar,
 	scrollFrame,
-	stale,
 	staleOverlay,
 	contentWrap,
 	th,
@@ -65,4 +63,4 @@ var data_table_module_default = {
 	selectionSelectAll,
 	selectionBulk
 };
-export { busyCaption, contentWrap, data_table_module_default as default, edgeEnd, edgeStart, errorState, pagination, refreshFailed, root, row, scrollFrame, selectionActions, selectionBar, selectionBulk, selectionContainer, selectionCount, selectionMeasure, selectionSelectAll, selectionStatus, selectionSummary, selectionTotal, skeletonBar, sortIcon, sortToggle, stale, staleOverlay, stateCell, subRow, table, td, th, thead, toolbar };
+export { busyCaption, contentWrap, data_table_module_default as default, edgeEnd, edgeStart, errorState, pagination, refreshFailed, root, row, scrollFrame, selectionActions, selectionBar, selectionBulk, selectionContainer, selectionCount, selectionMeasure, selectionSelectAll, selectionStatus, selectionSummary, selectionTotal, skeletonBar, sortIcon, sortToggle, staleOverlay, stateCell, subRow, table, td, th, thead, toolbar };

package/dist/data-table/index.d.ts

@@ -1,7 +1,7 @@
 export * from "./data-table.tsx";
 export type { DataTableContentProps } from "./data-table-content.tsx";
 export { type DataTableState, useDataTable, } from "./data-table-context.tsx";
-export { type DataTableBodyProps, type DataTableCellProps, type DataTableErrorMessageProps, type DataTableFrameProps, type DataTableHeadProps, type DataTableHeaderCellProps, type DataTableHeaderRowProps, type DataTableLoadingCaptionProps, type DataTableRefreshFailedProps, type DataTableRowProps, type DataTableScrollerProps, type DataTableSortButtonProps, type DataTableStateRowProps, type DataTableSubRowProps, type DataTableTableProps, useDataTableView, } from "./data-table-parts.tsx";
-export { type DataTableSelectionBarProps, type SelectionColumnOptions, selectionColumn, } from "./data-table-selection.tsx";
+export { type DataTableBodyProps, type DataTableCellProps, type DataTableErrorMessageProps, type DataTableFrameProps, type DataTableHeadProps, type DataTableHeaderCellProps, type DataTableHeaderRowProps, type DataTableLoadingCaptionProps, type DataTableRefreshFailedProps, type DataTableRowProps, type DataTableScrollerProps, type DataTableSort, type DataTableSortButtonProps, type DataTableSortIconProps, type DataTableStateRowProps, type DataTableSubRowProps, type DataTableTableProps, useDataTableView, } from "./data-table-parts.tsx";
+export { type DataTableSelectionBarActionsProps, type DataTableSelectionBarBulkProps, type DataTableSelectionBarClearProps, type DataTableSelectionBarParts, type DataTableSelectionBarProps, type DataTableSelectionBarRootProps, type DataTableSelectionBarSelectAllProps, type DataTableSelectionBarStatusProps, type DataTableSelectionBarSummaryProps, type SelectionColumnOptions, selectionColumn, } from "./data-table-selection.tsx";
 export type { DataTableStatus, ResolvedView, TableView, } from "./resolve-view.ts";
 export * from "./table-features.ts";

package/dist/index.js

@@ -7,7 +7,7 @@ import { ActiveFilters, useActiveFilterChips } from "./components/active-filters
 import { useBusyPhase } from "./lib/hooks/use-busy-phase.js";
 import { Skeleton } from "./components/skeleton/skeleton.js";
 import { useAttachmentPreview } from "./components/attachment-tile/attachment-preview.js";
-import { Button } from "./components/button/button.js";
+import { Button, IconButton } from "./components/button/button.js";
 import { AttachmentTile, SentAttachmentTile } from "./components/attachment-tile/attachment-tile.js";
 import { Avatar } from "./components/avatar/avatar.js";
 import { LocaleProvider, useLocale } from "./components/locale-provider/locale-provider.js";
@@ -19,7 +19,6 @@ import { useFold } from "./components/breadcrumbs/use-fold.js";
 import { Breadcrumbs } from "./components/breadcrumbs/breadcrumbs.js";
 import { getFieldErrors, normalizeFieldErrors } from "./lib/forms/errors.js";
 import { ErrorText } from "./components/error-text/error-text.js";
-import { Spinner } from "./components/spinner/spinner.js";
 import { useFieldContext, useFormContext } from "./lib/forms/context.js";
 import { Field } from "./components/field/field.js";
 import { fieldStateAttributes } from "./components/field/field-state.js";
@@ -35,6 +34,7 @@ import { CheckboxGroup } from "./components/checkbox-group-field/checkbox-group.
 import { CheckboxGroupField } from "./components/checkbox-group-field/checkbox-group-field.js";
 import { TSFCheckboxGroupField } from "./components/checkbox-group-field/tsf-checkbox-group-field.js";
 import { Collapsible } from "./components/collapsible/collapsible.js";
+import { Spinner } from "./components/spinner/spinner.js";
 import { Combobox } from "./components/combobox-field/combobox.js";
 import { ComboboxField } from "./components/combobox-field/combobox-field.js";
 import { TSFComboboxField } from "./components/combobox-field/tsf-combobox-field.js";
@@ -132,4 +132,4 @@ import { useTheme } from "./lib/hooks/use-theme.js";
 import { storedPageSize, tableStoredValue } from "./lib/table-storage.js";
 import { useBeforeUnload } from "./lib/unsaved-changes/before-unload.js";
 import { LeaveGuardDialog, useLeaveGuard } from "./lib/unsaved-changes/leave-guard.js";
-export { Accordion, ActiveFilters, AttachmentTile, Avatar, AvatarGroup, Badge, Breadcrumbs, Button, Checkbox, CheckboxField, CheckboxGroup, CheckboxGroupField, Collapsible, Combobox, ComboboxField, ConfirmDialog, Conversation, DateField, DateInput, DateRangeField, DateRangeInput, DetailList, Dialog, Divider, Drawer, EmailField, EmptyMessage, ErrorBoundary, ErrorMessage, ErrorText, Field, FieldGroup, FieldPlaceholder, Fieldset, FileField, FileInput, FilterBar, Form, Icon, LeaveGuardDialog, Link, LinkButton, LoadingMessage, LocaleProvider, Menu, Nav, NavItemView, NumberField, NumberInput, OtpField, OtpInput, Pagination, PasswordField, PasswordStrength, PhoneField, PhotoField, PhotoInput, Popover, RadioGroup, RadioGroupField, SearchField, SegmentedControl, SegmentedControlField, Select, SelectField, SentAttachmentTile, Skeleton, Spinner, Stale, StatusMessage, Switch, SwitchField, TSFCheckboxField, TSFCheckboxGroupField, TSFComboboxField, TSFDateField, TSFDateRangeField, TSFEmailField, TSFFieldGroup, TSFFileField, TSFNumberField, TSFOtpField, TSFPasswordField, TSFPhoneField, TSFPhotoField, TSFRadioGroupField, TSFSearchField, TSFSegmentedControlField, TSFSelectField, TSFSwitchField, TSFTextField, TSFTextareaField, TSFTimeField, TSFToggleGroupField, Tabs, Tag, TagGroup, TextField, TextInput, Textarea, TextareaField, TimeField, TimeInput, TimeZoneProvider, Toast, ToastProvider, ToggleGroup, ToggleGroupField, Tooltip, connectTextPreset, createAppForm, currencyFormat, describeFlag, describeList, describeValue, fieldStateAttributes, getFieldErrors, groupByBurst, groupByDay, isoDateRangeToInstants, never, normalizeFieldErrors, optionsLoad, percentFormat, storedPageSize, tableStoredValue, toast, toastManager, unitFormat, useActiveFilterChips, useAttachmentPreview, useBeforeUnload, useBusyPhase, useConnectedField, useFieldContext, useFieldFocus, useFieldState, useFilterView, useFold, useFormContext, useFormDisabled, useLeaveGuard, useLocale, useMediaQuery, usePresence, useReportUnsavedChanges, useRowSelection, useTheme, useTimeZone, useUnsavedChanges, whenDirty };
+export { Accordion, ActiveFilters, AttachmentTile, Avatar, AvatarGroup, Badge, Breadcrumbs, Button, Checkbox, CheckboxField, CheckboxGroup, CheckboxGroupField, Collapsible, Combobox, ComboboxField, ConfirmDialog, Conversation, DateField, DateInput, DateRangeField, DateRangeInput, DetailList, Dialog, Divider, Drawer, EmailField, EmptyMessage, ErrorBoundary, ErrorMessage, ErrorText, Field, FieldGroup, FieldPlaceholder, Fieldset, FileField, FileInput, FilterBar, Form, Icon, IconButton, LeaveGuardDialog, Link, LinkButton, LoadingMessage, LocaleProvider, Menu, Nav, NavItemView, NumberField, NumberInput, OtpField, OtpInput, Pagination, PasswordField, PasswordStrength, PhoneField, PhotoField, PhotoInput, Popover, RadioGroup, RadioGroupField, SearchField, SegmentedControl, SegmentedControlField, Select, SelectField, SentAttachmentTile, Skeleton, Spinner, Stale, StatusMessage, Switch, SwitchField, TSFCheckboxField, TSFCheckboxGroupField, TSFComboboxField, TSFDateField, TSFDateRangeField, TSFEmailField, TSFFieldGroup, TSFFileField, TSFNumberField, TSFOtpField, TSFPasswordField, TSFPhoneField, TSFPhotoField, TSFRadioGroupField, TSFSearchField, TSFSegmentedControlField, TSFSelectField, TSFSwitchField, TSFTextField, TSFTextareaField, TSFTimeField, TSFToggleGroupField, Tabs, Tag, TagGroup, TextField, TextInput, Textarea, TextareaField, TimeField, TimeInput, TimeZoneProvider, Toast, ToastProvider, ToggleGroup, ToggleGroupField, Tooltip, connectTextPreset, createAppForm, currencyFormat, describeFlag, describeList, describeValue, fieldStateAttributes, getFieldErrors, groupByBurst, groupByDay, isoDateRangeToInstants, never, normalizeFieldErrors, optionsLoad, percentFormat, storedPageSize, tableStoredValue, toast, toastManager, unitFormat, useActiveFilterChips, useAttachmentPreview, useBeforeUnload, useBusyPhase, useConnectedField, useFieldContext, useFieldFocus, useFieldState, useFilterView, useFold, useFormContext, useFormDisabled, useLeaveGuard, useLocale, useMediaQuery, usePresence, useReportUnsavedChanges, useRowSelection, useTheme, useTimeZone, useUnsavedChanges, whenDirty };

package/dist/lib/calendar/calendar-navigation.d.ts

@@ -1,3 +1,4 @@
+import { useRender } from "@base-ui/react/use-render";
 import { type ReactNode } from "react";
 /** The copy the month and year controls in a calendar header announce. */
 export type CalendarNavigationLabels = Readonly<{
@@ -15,12 +16,45 @@ export type CalendarNavigationIcons = Readonly<{
     /** The chevron on the month and year controls. Left out, none shows. */
     expandIcon?: ReactNode;
 }>;
+export type CalendarPickersProps = useRender.ComponentProps<"div">;
 /**
- * The month and year controls in a calendar header, driven by whichever
- * calendar state is above them. The month list holds the months the focused
- * year actually has; the year list is every year in its era.
+ * The space between the month steppers that holds the month and year pickers,
+ * and the year list while it is open.
  *
  * @example
- * <CalendarNavigation monthLabel="Month" yearLabel="Year" noMatchingYearLabel="No matching year." checkIcon={<CheckIcon />} />
+ * <DateInput.Pickers>
+ * 	<DateInput.MonthPicker label="Month" checkIcon={<CheckIcon />} />
+ * 	<DateInput.YearPicker label="Year" noMatchingYearLabel="No matching year." checkIcon={<CheckIcon />} />
+ * </DateInput.Pickers>
  */
-export declare const CalendarNavigation: ({ monthLabel, yearLabel, noMatchingYearLabel, checkIcon, expandIcon, }: CalendarNavigationLabels & CalendarNavigationIcons) => ReactNode;
+export declare const CalendarPickers: ({ render, className, ref, ...props }: CalendarPickersProps) => ReactNode;
+export type CalendarMonthPickerProps = CalendarNavigationIcons & Readonly<{
+    /** Accessible name of the month list, such as "Month". */
+    label: string;
+    /** Applied to the month control. */
+    className?: string;
+}>;
+/**
+ * The month control in a calendar header: a list of the months the focused
+ * year has, driven by whichever calendar state is above it.
+ *
+ * @example
+ * <DateInput.MonthPicker label="Month" checkIcon={<CheckIcon />} expandIcon={<ExpandMoreIcon />} />
+ */
+export declare const CalendarMonthPicker: ({ label, checkIcon, expandIcon, className, }: CalendarMonthPickerProps) => ReactNode;
+export type CalendarYearPickerProps = CalendarNavigationIcons & Readonly<{
+    /** Accessible name of the year input, such as "Year". */
+    label: string;
+    /** What the year list says when no year matches the typed text. */
+    noMatchingYearLabel: string;
+    /** Applied to the year control. */
+    className?: string;
+}>;
+/**
+ * The year control in a calendar header: every year in the focused date's era,
+ * filtered by typing, driven by whichever calendar state is above it.
+ *
+ * @example
+ * <DateInput.YearPicker label="Year" noMatchingYearLabel="No matching year." checkIcon={<CheckIcon />} expandIcon={<ExpandMoreIcon />} />
+ */
+export declare const CalendarYearPicker: ({ label, noMatchingYearLabel, checkIcon, expandIcon, className, }: CalendarYearPickerProps) => ReactNode;

package/dist/lib/calendar/calendar-navigation.js

@@ -6,30 +6,18 @@ import { CalendarYear } from "./calendar-year.js";
 import { dayToPlainDate } from "./temporal-value.js";
 import temporal_module_default from "./temporal.module.js";
 import { c } from "react/compiler-runtime";
+import { useRender } from "@base-ui/react/use-render";
+import { clsx } from "clsx";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useRef } from "react";
 import { Field } from "@base-ui/react/field";
 import { Intl } from "temporal-polyfill";
-import { startOfYear } from "@internationalized/date";
 import { Select } from "@base-ui/react/select";
+import { startOfYear } from "@internationalized/date";
 // src/lib/calendar/calendar-navigation.tsx
-var OwnField = (t0) => {
-	const $ = c(2);
-	const { children } = t0;
-	let t1;
-	if ($[0] !== children) {
-		t1 = /* @__PURE__ */ jsx(Field.Root, {
-			className: temporal_module_default.navField,
-			children
-		});
-		$[0] = children;
-		$[1] = t1;
-	} else t1 = $[1];
-	return t1;
-};
 var CalendarMonthSelect = (t0) => {
-	const $ = c(29);
-	const { state, label, checkIcon, expandIcon } = t0;
+	const $ = c(32);
+	const { state, label, checkIcon, expandIcon, className } = t0;
 	const locale = useLocale();
 	const timeZone = useTimeZone();
 	const { ref, collisionPadding } = usePopupEdgePadding();
@@ -63,47 +51,54 @@ var CalendarMonthSelect = (t0) => {
 		$[6] = t3;
 	} else t3 = $[6];
 	let t4;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t4 = /* @__PURE__ */ jsx(Select.Value, { className: temporal_module_default.navValue });
-		$[7] = t4;
-	} else t4 = $[7];
+	if ($[7] !== className) {
+		t4 = clsx(temporal_module_default.navTrigger, className);
+		$[7] = className;
+		$[8] = t4;
+	} else t4 = $[8];
 	let t5;
-	if ($[8] !== options) {
-		t5 = /* @__PURE__ */ jsxs("span", {
+	if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = /* @__PURE__ */ jsx(Select.Value, { className: temporal_module_default.navValue });
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== options) {
+		t6 = /* @__PURE__ */ jsxs("span", {
 			className: temporal_module_default.navLabel,
-			children: [t4, /* @__PURE__ */ jsx("span", {
+			children: [t5, /* @__PURE__ */ jsx("span", {
 				className: temporal_module_default.navSizer,
 				"aria-hidden": "true",
 				children: options.map(_temp)
 			})]
 		});
-		$[8] = options;
-		$[9] = t5;
-	} else t5 = $[9];
-	let t6;
-	if ($[10] !== expandIcon) {
-		t6 = expandIcon !== void 0 && /* @__PURE__ */ jsx(Select.Icon, {
-			className: temporal_module_default.navIcon,
-			children: expandIcon
-		});
-		$[10] = expandIcon;
+		$[10] = options;
 		$[11] = t6;
 	} else t6 = $[11];
 	let t7;
-	if ($[12] !== label || $[13] !== t5 || $[14] !== t6) {
-		t7 = /* @__PURE__ */ jsxs(Select.Trigger, {
-			"aria-label": label,
-			className: temporal_module_default.navTrigger,
-			children: [t5, t6]
+	if ($[12] !== expandIcon) {
+		t7 = expandIcon !== void 0 && /* @__PURE__ */ jsx(Select.Icon, {
+			className: temporal_module_default.navIcon,
+			children: expandIcon
 		});
-		$[12] = label;
-		$[13] = t5;
-		$[14] = t6;
-		$[15] = t7;
-	} else t7 = $[15];
+		$[12] = expandIcon;
+		$[13] = t7;
+	} else t7 = $[13];
 	let t8;
-	if ($[16] !== checkIcon || $[17] !== options) {
-		t8 = /* @__PURE__ */ jsx(Select.Popup, {
+	if ($[14] !== label || $[15] !== t4 || $[16] !== t6 || $[17] !== t7) {
+		t8 = /* @__PURE__ */ jsxs(Select.Trigger, {
+			"aria-label": label,
+			className: t4,
+			children: [t6, t7]
+		});
+		$[14] = label;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
+	let t9;
+	if ($[19] !== checkIcon || $[20] !== options) {
+		t9 = /* @__PURE__ */ jsx(Select.Popup, {
 			className: temporal_module_default.navPopup,
 			children: /* @__PURE__ */ jsx(Select.List, { children: options.map((option_0) => /* @__PURE__ */ jsxs(Select.Item, {
 				value: option_0.value,
@@ -115,101 +110,173 @@ var CalendarMonthSelect = (t0) => {
 				}), /* @__PURE__ */ jsx(Select.ItemText, { children: option_0.label })]
 			}, option_0.value)) })
 		});
-		$[16] = checkIcon;
-		$[17] = options;
-		$[18] = t8;
-	} else t8 = $[18];
-	let t9;
-	if ($[19] !== collisionPadding || $[20] !== ref || $[21] !== t8) {
-		t9 = /* @__PURE__ */ jsx(Select.Positioner, {
+		$[19] = checkIcon;
+		$[20] = options;
+		$[21] = t9;
+	} else t9 = $[21];
+	let t10;
+	if ($[22] !== collisionPadding || $[23] !== ref || $[24] !== t9) {
+		t10 = /* @__PURE__ */ jsx(Select.Positioner, {
 			ref,
 			className: temporal_module_default.navPositioner,
 			sideOffset: 4,
 			alignItemWithTrigger: false,
 			collisionPadding,
-			children: t8
+			children: t9
 		});
-		$[19] = collisionPadding;
-		$[20] = ref;
-		$[21] = t8;
-		$[22] = t9;
-	} else t9 = $[22];
-	let t10;
-	if ($[23] !== options || $[24] !== t2 || $[25] !== t3 || $[26] !== t7 || $[27] !== t9) {
-		t10 = /* @__PURE__ */ jsxs(Select.Root, {
+		$[22] = collisionPadding;
+		$[23] = ref;
+		$[24] = t9;
+		$[25] = t10;
+	} else t10 = $[25];
+	let t11;
+	if ($[26] !== options || $[27] !== t10 || $[28] !== t2 || $[29] !== t3 || $[30] !== t8) {
+		t11 = /* @__PURE__ */ jsxs(Select.Root, {
 			items: options,
 			value: t2,
 			onValueChange: t3,
-			children: [t7, t9]
+			children: [t8, t10]
 		});
-		$[23] = options;
-		$[24] = t2;
-		$[25] = t3;
-		$[26] = t7;
-		$[27] = t9;
-		$[28] = t10;
-	} else t10 = $[28];
-	return t10;
+		$[26] = options;
+		$[27] = t10;
+		$[28] = t2;
+		$[29] = t3;
+		$[30] = t8;
+		$[31] = t11;
+	} else t11 = $[31];
+	return t11;
 };
 /**
-* The month and year controls in a calendar header, driven by whichever
-* calendar state is above them. The month list holds the months the focused
-* year actually has; the year list is every year in its era.
+* The space between the month steppers that holds the month and year pickers,
+* and the year list while it is open.
 *
 * @example
-* <CalendarNavigation monthLabel="Month" yearLabel="Year" noMatchingYearLabel="No matching year." checkIcon={<CheckIcon />} />
+* <DateInput.Pickers>
+* 	<DateInput.MonthPicker label="Month" checkIcon={<CheckIcon />} />
+* 	<DateInput.YearPicker label="Year" noMatchingYearLabel="No matching year." checkIcon={<CheckIcon />} />
+* </DateInput.Pickers>
 */
-var CalendarNavigation = (t0) => {
+var CalendarPickers = (t0) => {
 	const $ = c(14);
-	const { monthLabel, yearLabel, noMatchingYearLabel, checkIcon, expandIcon } = t0;
-	const containerRef = useRef(null);
-	const state = useCalendarNavigationState();
-	if (state === null) return null;
+	let className;
+	let props;
+	let ref;
+	let render;
+	if ($[0] !== t0) {
+		({render, className, ref, ...props} = t0);
+		$[0] = t0;
+		$[1] = className;
+		$[2] = props;
+		$[3] = ref;
+		$[4] = render;
+	} else {
+		className = $[1];
+		props = $[2];
+		ref = $[3];
+		render = $[4];
+	}
 	let t1;
-	if ($[0] !== checkIcon || $[1] !== expandIcon || $[2] !== monthLabel || $[3] !== state) {
-		t1 = /* @__PURE__ */ jsx(OwnField, { children: /* @__PURE__ */ jsx(CalendarMonthSelect, {
-			state,
-			label: monthLabel,
-			checkIcon,
-			expandIcon
-		}) });
-		$[0] = checkIcon;
-		$[1] = expandIcon;
-		$[2] = monthLabel;
-		$[3] = state;
-		$[4] = t1;
-	} else t1 = $[4];
+	if ($[5] !== className) {
+		t1 = clsx(temporal_module_default.navigation, className);
+		$[5] = className;
+		$[6] = t1;
+	} else t1 = $[6];
 	let t2;
-	if ($[5] !== checkIcon || $[6] !== expandIcon || $[7] !== noMatchingYearLabel || $[8] !== state || $[9] !== yearLabel) {
-		t2 = /* @__PURE__ */ jsx(OwnField, { children: /* @__PURE__ */ jsx(CalendarYear, {
-			state,
-			container: containerRef,
-			label: yearLabel,
-			noMatchLabel: noMatchingYearLabel,
-			checkIcon,
-			expandIcon
-		}) });
-		$[5] = checkIcon;
-		$[6] = expandIcon;
-		$[7] = noMatchingYearLabel;
-		$[8] = state;
-		$[9] = yearLabel;
-		$[10] = t2;
-	} else t2 = $[10];
+	if ($[7] !== props || $[8] !== t1) {
+		t2 = {
+			...props,
+			className: t1
+		};
+		$[7] = props;
+		$[8] = t1;
+		$[9] = t2;
+	} else t2 = $[9];
 	let t3;
-	if ($[11] !== t1 || $[12] !== t2) {
-		t3 = /* @__PURE__ */ jsxs("div", {
-			ref: containerRef,
-			className: temporal_module_default.navigation,
-			children: [t1, t2]
-		});
-		$[11] = t1;
+	if ($[10] !== ref || $[11] !== render || $[12] !== t2) {
+		t3 = {
+			render,
+			ref,
+			props: t2
+		};
+		$[10] = ref;
+		$[11] = render;
 		$[12] = t2;
 		$[13] = t3;
 	} else t3 = $[13];
-	return t3;
+	return useRender(t3);
+};
+/**
+* The month control in a calendar header: a list of the months the focused
+* year has, driven by whichever calendar state is above it.
+*
+* @example
+* <DateInput.MonthPicker label="Month" checkIcon={<CheckIcon />} expandIcon={<ExpandMoreIcon />} />
+*/
+var CalendarMonthPicker = (t0) => {
+	const $ = c(6);
+	const { label, checkIcon, expandIcon, className } = t0;
+	const state = useCalendarNavigationState();
+	if (state === null) return null;
+	let t1;
+	if ($[0] !== checkIcon || $[1] !== className || $[2] !== expandIcon || $[3] !== label || $[4] !== state) {
+		t1 = /* @__PURE__ */ jsx(Field.Root, {
+			className: temporal_module_default.navField,
+			children: /* @__PURE__ */ jsx(CalendarMonthSelect, {
+				state,
+				label,
+				checkIcon,
+				expandIcon,
+				className
+			})
+		});
+		$[0] = checkIcon;
+		$[1] = className;
+		$[2] = expandIcon;
+		$[3] = label;
+		$[4] = state;
+		$[5] = t1;
+	} else t1 = $[5];
+	return t1;
+};
+/**
+* The year control in a calendar header: every year in the focused date's era,
+* filtered by typing, driven by whichever calendar state is above it.
+*
+* @example
+* <DateInput.YearPicker label="Year" noMatchingYearLabel="No matching year." checkIcon={<CheckIcon />} expandIcon={<ExpandMoreIcon />} />
+*/
+var CalendarYearPicker = (t0) => {
+	const $ = c(7);
+	const { label, noMatchingYearLabel, checkIcon, expandIcon, className } = t0;
+	const containerRef = useRef(null);
+	const state = useCalendarNavigationState();
+	if (state === null) return null;
+	let t1;
+	if ($[0] !== checkIcon || $[1] !== className || $[2] !== expandIcon || $[3] !== label || $[4] !== noMatchingYearLabel || $[5] !== state) {
+		t1 = /* @__PURE__ */ jsx(Field.Root, {
+			ref: containerRef,
+			className: temporal_module_default.navField,
+			children: /* @__PURE__ */ jsx(CalendarYear, {
+				state,
+				container: containerRef,
+				label,
+				noMatchLabel: noMatchingYearLabel,
+				checkIcon,
+				expandIcon,
+				className
+			})
+		});
+		$[0] = checkIcon;
+		$[1] = className;
+		$[2] = expandIcon;
+		$[3] = label;
+		$[4] = noMatchingYearLabel;
+		$[5] = state;
+		$[6] = t1;
+	} else t1 = $[6];
+	return t1;
 };
 function _temp(option) {
 	return /* @__PURE__ */ jsx("span", { children: option.label }, option.value);
 }
-export { CalendarNavigation };
+export { CalendarMonthPicker, CalendarPickers, CalendarYearPicker };