@api7/ui-components 0.7.0 → 0.8.0

package/dist/components/description-list/description-list.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 import { VariantProps } from "class-variance-authority";
 declare const descriptionListVariants: (props?: ({
-  variant?: "default" | "outline" | null | undefined;
+  variant?: "outline" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type DescriptionListProps = Omit<ComponentProps<'dl'>, 'className'> & VariantProps<typeof descriptionListVariants> & {
   className?: string;

package/dist/components/dialog/dialog.js

@@ -1,7 +1,7 @@
 "use client";
+import { Button } from "../button/button.js";
 import { useMessages } from "../../config/config-provider.js";
 import { cn } from "../../lib/cn.js";
-import { Button } from "../button/button.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";

package/dist/components/drawer/drawer.js

@@ -1,7 +1,7 @@
 "use client";
+import { Button } from "../button/button.js";
 import { useMessages } from "../../config/config-provider.js";
 import { cn } from "../../lib/cn.js";
-import { Button } from "../button/button.js";
 import { createContext, useContext } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { XIcon } from "lucide-react";

package/dist/components/empty/empty.d.ts

@@ -1,7 +1,7 @@
 import { ComponentProps } from "react";
 import { VariantProps } from "class-variance-authority";
 declare const emptyMediaVariants: (props?: ({
-  variant?: "default" | "icon" | null | undefined;
+  variant?: "icon" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type EmptyProps = ComponentProps<'div'>;
 export type EmptyHeaderProps = ComponentProps<'div'>;

package/dist/components/field/labeled-field.js

@@ -1,7 +1,7 @@
 "use client";
-import { useMessages } from "../../config/config-provider.js";
 import { Field, FieldDescription, FieldError, FieldLabel, Fieldset, FieldsetLegend } from "./field.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { useMessages } from "../../config/config-provider.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { InfoIcon } from "lucide-react";
 // src/components/field/labeled-field.tsx

package/dist/components/file-upload/file-upload.d.ts

@@ -0,0 +1,44 @@
+import { ButtonProps } from "../button/button.js";
+import { ReactNode } from "react";
+export type FileUploadRejectionCode = 'file-invalid-type' | 'file-too-large' | 'file-too-small' | 'too-many-files' | 'custom';
+export interface FileUploadRejection {
+  file: File;
+  code: FileUploadRejectionCode;
+  message: string;
+}
+export interface FileUploadProps {
+  /** Controlled selection. Pass an empty array to clear it. */
+  value?: readonly File[];
+  defaultValue?: readonly File[];
+  onValueChange?: (files: File[]) => void;
+  onFileReject?: (rejections: FileUploadRejection[]) => void;
+  /** Native accept syntax, also checked after selection: extensions, MIME types or MIME wildcards. */
+  accept?: string;
+  /** Appends files to the selection. The default single-file mode replaces the selected file. */
+  multiple?: boolean;
+  /** Maximum total number of files in multiple mode. */
+  maxFiles?: number;
+  /** Inclusive per-file size limits, in bytes. */
+  minSize?: number;
+  maxSize?: number;
+  /** Return an error message to reject a file. Async content checks belong to the caller. */
+  validateFile?: (file: File) => string | null | undefined;
+  disabled?: boolean;
+  /** Prevents selection and removal while the caller reads, validates or uploads files. */
+  loading?: boolean;
+  /** Upload percentage while loading. Omit it or pass null for indeterminate progress. */
+  progress?: number | null;
+  /** Trigger content. Defaults to the translated "Select file" or "Select files". */
+  children?: ReactNode;
+  /** Set false for a standalone upload button beside an editor or a custom preview. */
+  showFileList?: boolean;
+  /** Replaces the file icon and filename, while keeping the built-in remove button. */
+  renderFile?: (file: File) => ReactNode;
+  /** An external error, for example from reading or uploading a file. */
+  error?: ReactNode;
+  /** Props for the visible trigger, including id, ref, aria-label and onBlur. */
+  triggerProps?: Omit<ButtonProps, 'children' | 'disabled' | 'loading' | 'render' | 'nativeButton' | 'type' | 'onClick' | 'value' | 'defaultValue' | 'name'>;
+  className?: string;
+}
+declare function FileUpload(props: FileUploadProps): import("react").JSX.Element;
+export { FileUpload };

package/dist/components/file-upload/file-upload.js

@@ -0,0 +1,195 @@
+"use client";
+import { Button } from "../button/button.js";
+import { Progress } from "../progress/progress.js";
+import { useMessages } from "../../config/config-provider.js";
+import { useFieldLabelWithText } from "../../hooks/use-field-label-with-text.js";
+import { cn } from "../../lib/cn.js";
+import { useId, useRef, useState } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { FileIcon, UploadIcon, XIcon } from "lucide-react";
+import { Field } from "@base-ui/react/field";
+// src/components/file-upload/file-upload.tsx
+function acceptsFile(file, accept) {
+	const rules = accept?.split(",").map((rule) => rule.trim().toLowerCase()).filter(Boolean);
+	if (!rules?.length) return true;
+	const name = file.name.toLowerCase();
+	const type = file.type.toLowerCase();
+	return rules.some((rule) => {
+		if (rule.startsWith(".")) return name.endsWith(rule);
+		if (rule.endsWith("/*")) return type.startsWith(rule.slice(0, -1));
+		return type === rule;
+	});
+}
+function isSameFile(a, b) {
+	return a.name === b.name && a.size === b.size && a.type === b.type && a.lastModified === b.lastModified;
+}
+function FileUpload(props) {
+	const { value, defaultValue = [], onValueChange, onFileReject, accept, multiple = false, maxFiles = Infinity, minSize, maxSize, validateFile, disabled = false, loading = false, progress = null, children, showFileList = true, renderFile, error, triggerProps, className } = props;
+	const { id: triggerId, ref: forwardedRef, "aria-describedby": ariaDescribedby, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledby, ...buttonProps } = triggerProps ?? {};
+	const messages = useMessages().fileUpload;
+	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+	const [rejections, setRejections] = useState([]);
+	const inputRef = useRef(null);
+	const { ref: triggerRef, textId, labelledBy } = useFieldLabelWithText(ariaLabelledby);
+	const errorId = useId();
+	const listId = useId();
+	const controlled = "value" in props;
+	const files = (controlled ? value : uncontrolledValue) ?? [];
+	const unavailable = disabled || loading;
+	const hasError = Boolean(error) || rejections.length > 0;
+	function updateValue(next) {
+		if (!controlled) setUncontrolledValue(next);
+		onValueChange?.(next);
+	}
+	function selectFiles(selected) {
+		if (unavailable || selected.length === 0) return;
+		const next = multiple ? [...files] : [];
+		const rejected = [];
+		const limit = multiple ? maxFiles : 1;
+		let added = false;
+		for (const file of selected) {
+			let rejection;
+			if (!acceptsFile(file, accept)) rejection = {
+				code: "file-invalid-type",
+				message: messages.invalidType({
+					name: file.name,
+					accept
+				})
+			};
+			else if (maxSize !== void 0 && file.size > maxSize) rejection = {
+				code: "file-too-large",
+				message: messages.tooLarge({
+					name: file.name,
+					maxSize
+				})
+			};
+			else if (minSize !== void 0 && file.size < minSize) rejection = {
+				code: "file-too-small",
+				message: messages.tooSmall({
+					name: file.name,
+					minSize
+				})
+			};
+			else {
+				const message = validateFile?.(file);
+				if (message) rejection = {
+					code: "custom",
+					message
+				};
+			}
+			if (!rejection && multiple && next.some((existing) => isSameFile(existing, file))) continue;
+			if (!rejection && next.length >= limit) rejection = {
+				code: "too-many-files",
+				message: messages.tooMany({ maxFiles: limit })
+			};
+			if (rejection) rejected.push({
+				file,
+				...rejection
+			});
+			else {
+				next.push(file);
+				added = true;
+			}
+		}
+		setRejections(rejected);
+		if (added) updateValue(next);
+		if (rejected.length) onFileReject?.(rejected);
+	}
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex min-w-0 flex-col gap-2 text-sm text-foreground", className),
+		"data-slot": "file-upload",
+		"aria-busy": loading || void 0,
+		children: [
+			/* @__PURE__ */ jsx("input", {
+				ref: inputRef,
+				type: "file",
+				hidden: true,
+				accept,
+				multiple,
+				disabled: unavailable,
+				"data-slot": "file-upload-input",
+				onChange: (event) => {
+					const selected = Array.from(event.currentTarget.files ?? []);
+					event.currentTarget.value = "";
+					selectFiles(selected);
+				}
+			}),
+			/* @__PURE__ */ jsx(Field.Control, {
+				id: triggerId,
+				ref: forwardedRef,
+				value: files.map((file) => file.name).join(", "),
+				disabled: unavailable,
+				"aria-invalid": hasError || ariaInvalid || void 0,
+				"aria-describedby": [
+					ariaDescribedby,
+					showFileList && files.length ? listId : void 0,
+					hasError ? errorId : void 0
+				].filter(Boolean).join(" ") || void 0,
+				render: /* @__PURE__ */ jsxs(Button, {
+					variant: "outline",
+					...buttonProps,
+					"aria-labelledby": labelledBy,
+					ref: triggerRef,
+					type: "button",
+					className: cn("self-start aria-invalid:border-destructive aria-invalid:ring-destructive/40", triggerProps?.className),
+					disabled: unavailable,
+					loading,
+					onClick: () => inputRef.current?.click(),
+					"data-slot": "file-upload-trigger",
+					children: [!loading && /* @__PURE__ */ jsx(UploadIcon, { "aria-hidden": "true" }), /* @__PURE__ */ jsx("span", {
+						id: textId,
+						children: children ?? (multiple ? messages.selectFiles : messages.selectFile)
+					})]
+				})
+			}),
+			showFileList && files.length > 0 && /* @__PURE__ */ jsx("ul", {
+				id: listId,
+				"aria-label": messages.selectedFiles,
+				className: "flex min-w-0 flex-col gap-1",
+				"data-slot": "file-upload-list",
+				children: files.map((file, index) => /* @__PURE__ */ jsxs("li", {
+					className: "flex min-w-0 items-center gap-2 rounded-sm border border-input px-3 py-1",
+					"data-slot": "file-upload-item",
+					children: [/* @__PURE__ */ jsx("div", {
+						className: "flex min-w-0 flex-1 items-center gap-2",
+						children: renderFile ? renderFile(file) : /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(FileIcon, {
+							"aria-hidden": "true",
+							className: "size-3.5 shrink-0 text-muted-foreground"
+						}), /* @__PURE__ */ jsx("span", {
+							className: "min-w-0 break-all",
+							children: file.name
+						})] })
+					}), /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: "ghost",
+						size: "icon",
+						className: "size-6",
+						"aria-label": messages.remove({ name: file.name }),
+						disabled: unavailable,
+						"data-slot": "file-upload-remove",
+						onClick: () => {
+							if (unavailable) return;
+							setRejections([]);
+							updateValue(files.filter((_, fileIndex) => fileIndex !== index));
+							triggerRef.current?.focus();
+						},
+						children: /* @__PURE__ */ jsx(XIcon, { "aria-hidden": "true" })
+					})]
+				}, `${file.name}-${file.size}-${file.lastModified}-${index}`))
+			}),
+			loading && /* @__PURE__ */ jsx(Progress, {
+				value: progress,
+				size: "xs",
+				"aria-label": messages.progress
+			}),
+			hasError && /* @__PURE__ */ jsx("div", {
+				id: errorId,
+				role: "alert",
+				className: "text-sm break-all text-destructive-text",
+				"data-slot": "file-upload-error",
+				children: error || rejections.map((rejection, index) => /* @__PURE__ */ jsx("p", { children: rejection.message }, index))
+			})
+		]
+	});
+}
+export { FileUpload };

package/dist/components/form/choice-fields.js

@@ -1,9 +1,9 @@
 "use client";
 import { Combobox, ComboboxChip, ComboboxChips, ComboboxChipsInput, ComboboxContent, ComboboxInput, ComboboxItem, ComboboxValue } from "../combobox/combobox.js";
-import { NumberField } from "../number-field/number-field.js";
-import { Select, SelectContent, SelectTrigger, SelectValue } from "../select/select.js";
 import { useFieldContext } from "./form-context.js";
 import { FormItem } from "./form-item.js";
+import { NumberField } from "../number-field/number-field.js";
+import { Select, SelectContent, SelectTrigger, SelectValue } from "../select/select.js";
 import { useRef } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/components/form/choice-fields.tsx

package/dist/components/form/date-fields.d.ts

@@ -1,5 +1,5 @@
-import { FormItemProps } from "./form-item.js";
 import { DatePickerProps, DateRangePickerProps } from "../date-picker/date-picker.js";
+import { FormItemProps } from "./form-item.js";
 type BoundPickerProps = 'value' | 'defaultValue' | 'onValueChange' | 'onOpenChange' | 'onBlur' | 'className';
 export type DatePickerFieldProps = Omit<FormItemProps, 'layout'> & Omit<DatePickerProps, BoundPickerProps>;
 export type DateRangePickerFieldProps = Omit<FormItemProps, 'layout'> & Omit<DateRangePickerProps, BoundPickerProps>;

package/dist/components/form/date-fields.js

@@ -1,7 +1,7 @@
 "use client";
-import { Skeleton } from "../skeleton/skeleton.js";
 import { useFieldContext } from "./form-context.js";
 import { FormItem } from "./form-item.js";
+import { Skeleton } from "../skeleton/skeleton.js";
 import { Suspense, lazy, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/components/form/date-fields.tsx

package/dist/components/form/form-item.js

@@ -1,7 +1,7 @@
 "use client";
 import { LabeledField } from "../field/labeled-field.js";
-import { useFieldContext } from "./form-context.js";
 import { formatFieldErrors } from "./errors.js";
+import { useFieldContext } from "./form-context.js";
 import { jsx } from "react/jsx-runtime";
 // src/components/form/form-item.tsx
 /** Reads the bound field and returns what FormItem and controls need. */

package/dist/components/form/form.js

@@ -1,6 +1,6 @@
 "use client";
-import { fieldContext, formContext } from "./form-context.js";
 import { DatePickerField, DateRangePickerField } from "./date-fields.js";
+import { fieldContext, formContext } from "./form-context.js";
 import { LazyComboboxField, LazyFormNumberField, LazySelectField } from "./lazy-field-components.js";
 import { SubmitButton } from "./submit-button.js";
 import { TextField, TextareaField } from "./text-field.js";

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

@@ -1,10 +1,10 @@
-import { FormItem, FormItemLayout, FormItemProps, useFieldState } from "./form-item.js";
 import { ComboboxField, ComboboxFieldProps, FormNumberField, NumberFieldFieldProps, SelectField, SelectFieldProps } from "./choice-fields.js";
 import { DatePickerField, DatePickerFieldProps, DateRangePickerField, DateRangePickerFieldProps } from "./date-fields.js";
 import { formatFieldErrors } from "./errors.js";
 import { fieldContext, formContext, useFieldContext, useFormContext } from "./form-context.js";
+import { FormItem, FormItemLayout, FormItemProps, useFieldState } from "./form-item.js";
+import { fieldComponents, formComponents, useAppForm, withFieldGroup, withForm } from "./form.js";
 import { SubmitButton, SubmitButtonProps } from "./submit-button.js";
 import { TextField, TextFieldProps, TextareaField, TextareaFieldProps } from "./text-field.js";
 import { CheckboxField, CheckboxFieldProps, RadioGroupField, RadioGroupFieldProps, SwitchField, SwitchFieldProps } from "./toggle-fields.js";
-import { fieldComponents, formComponents, useAppForm, withFieldGroup, withForm } from "./form.js";
 export { CheckboxField, type CheckboxFieldProps, ComboboxField, type ComboboxFieldProps, DatePickerField, type DatePickerFieldProps, DateRangePickerField, type DateRangePickerFieldProps, FormItem, type FormItemLayout, type FormItemProps, FormNumberField, type NumberFieldFieldProps, RadioGroupField, type RadioGroupFieldProps, SelectField, type SelectFieldProps, SubmitButton, type SubmitButtonProps, SwitchField, type SwitchFieldProps, TextField, type TextFieldProps, TextareaField, type TextareaFieldProps, fieldComponents, fieldContext, formComponents, formContext, formatFieldErrors, useAppForm, useFieldContext, useFieldState, useFormContext, withFieldGroup, withForm };

package/dist/components/form/index.js

@@ -1,10 +1,10 @@
-import { fieldContext, formContext, useFieldContext, useFormContext } from "./form-context.js";
-import { formatFieldErrors } from "./errors.js";
-import { FormItem, useFieldState } from "./form-item.js";
 import { ComboboxField, FormNumberField, SelectField } from "./choice-fields.js";
 import { DatePickerField, DateRangePickerField } from "./date-fields.js";
+import { formatFieldErrors } from "./errors.js";
+import { fieldContext, formContext, useFieldContext, useFormContext } from "./form-context.js";
+import { FormItem, useFieldState } from "./form-item.js";
+import { fieldComponents, formComponents, useAppForm, withFieldGroup, withForm } from "./form.js";
 import { SubmitButton } from "./submit-button.js";
 import { TextField, TextareaField } from "./text-field.js";
 import { CheckboxField, RadioGroupField, SwitchField } from "./toggle-fields.js";
-import { fieldComponents, formComponents, useAppForm, withFieldGroup, withForm } from "./form.js";
 export { CheckboxField, ComboboxField, DatePickerField, DateRangePickerField, FormItem, FormNumberField, RadioGroupField, SelectField, SubmitButton, SwitchField, TextField, TextareaField, fieldComponents, fieldContext, formComponents, formContext, formatFieldErrors, useAppForm, useFieldContext, useFieldState, useFormContext, withFieldGroup, withForm };

package/dist/components/form/text-field.js

@@ -1,8 +1,8 @@
 "use client";
-import { Input } from "../input/input.js";
-import { Textarea } from "../textarea/textarea.js";
 import { useFieldContext } from "./form-context.js";
 import { FormItem } from "./form-item.js";
+import { Input } from "../input/input.js";
+import { Textarea } from "../textarea/textarea.js";
 import { jsx } from "react/jsx-runtime";
 // src/components/form/text-field.tsx
 function TextField({ label, description, labelTooltip, optional, optionalLabel, moreInfoLabel, className, ...inputProps }) {

package/dist/components/form/toggle-fields.d.ts

@@ -1,5 +1,5 @@
-import { FormItemProps } from "./form-item.js";
 import { CheckboxProps } from "../checkbox/checkbox.js";
+import { FormItemProps } from "./form-item.js";
 import { SwitchProps } from "../switch/switch.js";
 import { ReactNode } from "react";
 export type CheckboxFieldProps = Omit<FormItemProps, 'layout'> & Omit<CheckboxProps, 'name' | 'checked' | 'defaultChecked' | 'onCheckedChange' | 'onBlur' | 'className'>;

package/dist/components/form/toggle-fields.js

@@ -1,11 +1,11 @@
 "use client";
-import { cn } from "../../lib/cn.js";
 import { Checkbox } from "../checkbox/checkbox.js";
 import { FieldLabel } from "../field/field.js";
-import { RadioGroup, RadioGroupItem } from "../radio-group/radio-group.js";
-import { Switch } from "../switch/switch.js";
 import { useFieldContext } from "./form-context.js";
 import { FormItem } from "./form-item.js";
+import { RadioGroup, RadioGroupItem } from "../radio-group/radio-group.js";
+import { Switch } from "../switch/switch.js";
+import { cn } from "../../lib/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Field } from "@base-ui/react/field";
 // src/components/form/toggle-fields.tsx

package/dist/components/pagination/pagination.d.ts

@@ -6,10 +6,9 @@
  * directly instead of collapsing it behind an ellipsis.
  */
 export declare function getPageItems(pageIndex: number, pageCount: number): Array<number | 'ellipsis'>;
-export interface PaginationProps {
+interface PaginationBaseProps {
   pageIndex: number;
   pageSize: number;
-  rowCount: number;
   /** @default [10, 20, 50, 100] */
   pageSizeOptions?: number[];
   onPageIndexChange: (pageIndex: number) => void;
@@ -18,5 +17,22 @@ export interface PaginationProps {
   label?: string;
   className?: string;
 }
-/** Renders nothing when `rowCount` is 0, matching the legacy footer's `total > 0` guard. */
-export declare function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions, onPageIndexChange, onPageSizeChange, label, className }: PaginationProps): import("react").JSX.Element | null;
+/**
+ * A list with a known total: the range, a window of page numbers, Previous and Next, and the page size.
+ * Renders nothing when `rowCount` is 0, matching the legacy footer's `total > 0` guard.
+ */
+export interface PaginationProps extends PaginationBaseProps {
+  rowCount: number;
+  hasNextPage?: never;
+}
+/**
+ * A list read by position, which has no total and cannot jump to a page. Shows the current page, Previous and Next, and the page
+ * size, and neither the range nor page numbers. `hasNextPage` says whether a page follows the current one. It renders for an empty
+ * page too, so the person can still step back.
+ */
+export interface PaginationByPositionProps extends PaginationBaseProps {
+  hasNextPage: boolean;
+  rowCount?: never;
+}
+export declare function Pagination(props: PaginationProps | PaginationByPositionProps): import("react").JSX.Element;
+export {};

package/dist/components/pagination/pagination.js

@@ -1,7 +1,7 @@
 "use client";
+import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select/select.js";
 import { useLocale, useMessages } from "../../config/config-provider.js";
 import { cn } from "../../lib/cn.js";
-import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "../select/select.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 // src/components/pagination/pagination.tsx
@@ -43,8 +43,44 @@ function getPageItems(pageIndex, pageCount) {
 	}
 	return items;
 }
-/** Renders nothing when `rowCount` is 0, matching the legacy footer's `total > 0` guard. */
-function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, onPageIndexChange, onPageSizeChange, label, className }) {
+function Pagination(props) {
+	return props.hasNextPage === void 0 ? /* @__PURE__ */ jsx(PaginationWithTotal, { ...props }) : /* @__PURE__ */ jsx(PaginationByPosition, { ...props });
+}
+function PaginationByPosition({ pageIndex, pageSize, hasNextPage, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, onPageIndexChange, onPageSizeChange, label, className }) {
+	const messages = useMessages();
+	const locale = useLocale();
+	const formatter = new Intl.NumberFormat(locale);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("flex h-11 items-center justify-between px-[22px] py-3", className),
+		"data-slot": "pagination",
+		children: [/* @__PURE__ */ jsx("span", {
+			className: "text-sm text-foreground",
+			children: messages.pagination.page({ page: formatter.format(pageIndex + 1) })
+		}), /* @__PURE__ */ jsxs("nav", {
+			"aria-label": label ?? messages.pagination.label,
+			className: "flex items-center gap-1.5",
+			"data-slot": "pagination-nav",
+			children: [
+				/* @__PURE__ */ jsx(PageStepButton, {
+					direction: "previous",
+					disabled: pageIndex <= 0,
+					onClick: () => onPageIndexChange(pageIndex - 1)
+				}),
+				/* @__PURE__ */ jsx(PageStepButton, {
+					direction: "next",
+					disabled: !hasNextPage,
+					onClick: () => onPageIndexChange(pageIndex + 1)
+				}),
+				/* @__PURE__ */ jsx(PageSizeSelect, {
+					pageSize,
+					pageSizeOptions,
+					onPageSizeChange
+				})
+			]
+		})]
+	});
+}
+function PaginationWithTotal({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_PAGE_SIZE_OPTIONS, onPageIndexChange, onPageSizeChange, label, className }) {
 	const messages = useMessages();
 	const locale = useLocale();
 	if (rowCount === 0) return null;
@@ -54,7 +90,6 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 	const from = currentPage * pageSize + 1;
 	const to = Math.min(rowCount, (currentPage + 1) * pageSize);
 	const pageItems = getPageItems(currentPage, pageCount);
-	const effectivePageSizeOptions = pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
 	return /* @__PURE__ */ jsxs("div", {
 		className: cn("flex h-11 items-center justify-between px-[22px] py-3", className),
 		"data-slot": "pagination",
@@ -73,14 +108,10 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 			className: "flex items-center gap-1.5",
 			"data-slot": "pagination-nav",
 			children: [
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": messages.pagination.previous,
+				/* @__PURE__ */ jsx(PageStepButton, {
+					direction: "previous",
 					disabled: currentPage <= 0,
-					onClick: () => onPageIndexChange(currentPage - 1),
-					className: cn("flex size-6 items-center justify-center rounded-sm border border-input outline-none focus-visible:ring-2 focus-visible:ring-ring/40", currentPage <= 0 && "cursor-not-allowed opacity-50"),
-					"data-slot": "pagination-previous",
-					children: /* @__PURE__ */ jsx(ChevronLeft, { className: "size-3.5" })
+					onClick: () => onPageIndexChange(currentPage - 1)
 				}),
 				pageItems.map((item, index) => item === "ellipsis" ? /* @__PURE__ */ jsx("span", {
 					"aria-hidden": "true",
@@ -89,40 +120,60 @@ function Pagination({ pageIndex, pageSize, rowCount, pageSizeOptions = DEFAULT_P
 					children: "…"
 				}, `ellipsis-${index}`) : /* @__PURE__ */ jsx("button", {
 					type: "button",
-					"aria-label": messages.pagination.page({ page: formatter.format(item + 1) }),
+					"aria-label": messages.pagination.page({ page: String(item + 1) }),
 					"aria-current": item === currentPage ? "page" : void 0,
 					onClick: () => onPageIndexChange(item),
 					className: cn("size-6 rounded-sm text-sm outline-none focus-visible:ring-2 focus-visible:ring-ring/40", item === currentPage ? "bg-primary text-primary-foreground" : "hover:bg-accent-hover"),
 					"data-slot": "pagination-page",
 					children: item + 1
 				}, item)),
-				/* @__PURE__ */ jsx("button", {
-					type: "button",
-					"aria-label": messages.pagination.next,
+				/* @__PURE__ */ jsx(PageStepButton, {
+					direction: "next",
 					disabled: currentPage >= pageCount - 1,
-					onClick: () => onPageIndexChange(currentPage + 1),
-					className: cn("flex size-6 items-center justify-center rounded-sm border border-input outline-none focus-visible:ring-2 focus-visible:ring-ring/40", currentPage >= pageCount - 1 && "cursor-not-allowed opacity-50"),
-					"data-slot": "pagination-next",
-					children: /* @__PURE__ */ jsx(ChevronRight, { className: "size-3.5" })
+					onClick: () => onPageIndexChange(currentPage + 1)
 				}),
-				/* @__PURE__ */ jsxs(Select, {
-					items: pageSizeItems(effectivePageSizeOptions, messages, formatter),
-					value: String(pageSize),
-					onValueChange: (value) => onPageSizeChange(Number(value)),
-					children: [/* @__PURE__ */ jsx(SelectTrigger, {
-						size: "sm",
-						className: "w-[110px]",
-						"aria-label": messages.pagination.pageSizeLabel,
-						children: /* @__PURE__ */ jsx(SelectValue, { className: "flex-1 text-center" })
-					}), /* @__PURE__ */ jsx(SelectContent, { children: effectivePageSizeOptions.map((size) => /* @__PURE__ */ jsx(SelectItem, {
-						value: String(size),
-						children: messages.pagination.pageSize({ size: formatter.format(size) })
-					}, size)) })]
+				/* @__PURE__ */ jsx(PageSizeSelect, {
+					pageSize,
+					pageSizeOptions,
+					onPageSizeChange
 				})
 			]
 		})]
 	});
 }
+function PageStepButton({ direction, disabled, onClick }) {
+	const messages = useMessages();
+	const Icon = direction === "previous" ? ChevronLeft : ChevronRight;
+	return /* @__PURE__ */ jsx("button", {
+		type: "button",
+		"aria-label": messages.pagination[direction],
+		disabled,
+		onClick,
+		className: cn("flex size-6 items-center justify-center rounded-sm border border-input outline-none focus-visible:ring-2 focus-visible:ring-ring/40", disabled && "cursor-not-allowed opacity-50"),
+		"data-slot": `pagination-${direction}`,
+		children: /* @__PURE__ */ jsx(Icon, { className: "size-3.5" })
+	});
+}
+function PageSizeSelect({ pageSize, pageSizeOptions, onPageSizeChange }) {
+	const messages = useMessages();
+	const locale = useLocale();
+	const formatter = new Intl.NumberFormat(locale);
+	const options = pageSizeOptions.includes(pageSize) ? pageSizeOptions : [...pageSizeOptions, pageSize].sort((a, b) => a - b);
+	return /* @__PURE__ */ jsxs(Select, {
+		items: pageSizeItems(options, messages, formatter),
+		value: String(pageSize),
+		onValueChange: (value) => onPageSizeChange(Number(value)),
+		children: [/* @__PURE__ */ jsx(SelectTrigger, {
+			size: "sm",
+			className: "w-[110px]",
+			"aria-label": messages.pagination.pageSizeLabel,
+			children: /* @__PURE__ */ jsx(SelectValue, { className: "flex-1 text-center" })
+		}), /* @__PURE__ */ jsx(SelectContent, { children: options.map((size) => /* @__PURE__ */ jsx(SelectItem, {
+			value: String(size),
+			children: messages.pagination.pageSize({ size: formatter.format(size) })
+		}, size)) })]
+	});
+}
 function pageSizeItems(pageSizeOptions, messages, formatter) {
 	return Object.fromEntries(pageSizeOptions.map((size) => [String(size), messages.pagination.pageSize({ size: formatter.format(size) })]));
 }

package/dist/components/relative-date-range-picker/relative-date-range-picker.d.ts

@@ -0,0 +1,14 @@
+import { RelativeDateRangeValue } from "./relative-date-range.js";
+/** A quick range: its label and the two ends it fills in. */
+export type RelativeDateRangePreset = RelativeDateRangeValue & {
+  label: string;
+};
+export type RelativeDateRangePickerProps = {
+  value: RelativeDateRangeValue;
+  onChange: (value: RelativeDateRangeValue) => void;
+  presets: readonly RelativeDateRangePreset[];
+  maxSpanSeconds: number;
+  now: () => number;
+  className?: string;
+};
+export declare function RelativeDateRangePicker({ value, onChange, presets, maxSpanSeconds, now, className }: RelativeDateRangePickerProps): import("react").JSX.Element;