@nsaa/core 0.1.0-alpha.3 → 0.1.0-alpha.5

package/LICENSE

@@ -25,4 +25,4 @@ SOFTWARE.
 This licence covers the free packages in this repository. The Pro package
 (`packages/blocks`, when it exists) ships under its own commercial licence,
 stated in that folder. Third-party code adapted into Nsaa keeps its original
-notice in the file header; colour scales come from Radix Colors (MIT).
+notice in the file header; colour scales come from Tailwind CSS (MIT).

package/NOTICE

@@ -152,3 +152,30 @@ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 SOFTWARE.
+
+-------------------------------------------------------------------------------
+Tailwind CSS (https://github.com/tailwindlabs/tailwindcss), v4.3.3. Its default colour palette
+(theme.css) is the source of the colour primitives in packages/tokens (src/primitives.json and
+dist/), #149.
+
+MIT License
+
+Copyright (c) Tailwind Labs, Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/alert/alert.d.ts

@@ -1,10 +1,22 @@
 
+import { Button } from "../button/button.js";
+import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 declare const alertVariants: (props?: ({
   variant?: "success" | "warning" | "default" | "destructive" | "info" | null | undefined;
+  appearance?: "soft" | "outline" | "solid" | null | undefined;
+  size?: "default" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function Alert({ className, variant, announce, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+type AlertAppearance = NonNullable<VariantProps<typeof alertVariants>["appearance"]>;
+declare function Alert({ className, variant, appearance, size, announce, open, defaultOpen, onOpenChange, ref, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants> & {
+  /**
+   * How loud it is: `outline`, `soft` or `solid`. Defaults by variant: outline for default and
+   * destructive (base-nova), soft for success, warning and info.
+   */
+  appearance?: AlertAppearance | null;
+  /** `default`, or `sm`: one compact line (icon, title, description, close) for tight places. */
+  size?: "default" | "sm" | null;
   /**
    * The error sound (feedback.error) when the Alert appears (#114). Left unset it's automatic: a
    * destructive Alert plays it when a person's action caused it (within the browser's transient
@@ -12,8 +24,20 @@ declare function Alert({ className, variant, announce, ...props }: React.Compone
    * warning are silent unless `announce` is set, then play feedback.success / feedback.warning.
    */
   announce?: boolean;
-}): React.JSX.Element;
+  /** Whether the Alert is shown (controlled). Only matters with an `AlertClose`. */
+  open?: boolean;
+  /** Whether the Alert starts shown when uncontrolled. Defaults to `true`. */
+  defaultOpen?: boolean;
+  /** Called with `false` when `AlertClose` is pressed. */
+  onOpenChange?: (open: boolean) => void;
+}): React.JSX.Element | null;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function AlertAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
-export { Alert, AlertAction, AlertDescription, AlertTitle };
+/** Nsaa (#148): dismisses the Alert. A ghost icon Button named "Dismiss", at the inline end. */
+declare function AlertClose({ className, children, onClick, ...props }: Omit<React.ComponentProps<typeof Button>, "variant" | "size">): React.JSX.Element;
+/** Nsaa (#148): a row of `AlertLink`s under the description. The ∙ between them is CSS, never read. */
+declare function AlertLinks({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
+/** Nsaa (#148): a real link in the Alert's own text colour, medium weight, underlined. */
+declare function AlertLink({ className, render, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle };

package/dist/alert/alert.js

@@ -1,22 +1,123 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { recentUserAction } from "../lib/user-action.js";
 import { useCue } from "../sound/sound-map.js";
-import { jsx } from "react/jsx-runtime";
+import { Button } from "../button/button.js";
+import { mergeRefs } from "../lib/merge-refs.js";
+import { recentUserAction } from "../lib/user-action.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import * as React from "react";
 // src/alert/alert.tsx
 const alertVariants = cva("group/alert relative grid w-full gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4", {
-	variants: { variant: {
-		default: "bg-card text-card-foreground",
-		destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
-		success: "border-positive-subtle-active bg-positive-subtle text-on-positive-subtle-foreground *:data-[slot=alert-description]:text-on-positive-subtle-foreground",
-		warning: "border-warning-subtle-active bg-warning-subtle text-on-warning-subtle-foreground *:data-[slot=alert-description]:text-on-warning-subtle-foreground",
-		info: "border-info-subtle-active bg-info-subtle text-on-info-subtle-foreground *:data-[slot=alert-description]:text-on-info-subtle-foreground"
-	} },
-	defaultVariants: { variant: "default" }
+	variants: {
+		variant: {
+			default: "bg-card text-card-foreground",
+			destructive: "bg-card text-destructive *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current",
+			success: "",
+			warning: "",
+			info: ""
+		},
+		appearance: {
+			outline: "",
+			soft: "",
+			solid: ""
+		},
+		size: {
+			default: "has-data-[slot=alert-close]:pr-10 has-data-[slot=alert-action]:has-data-[slot=alert-close]:pr-25 rtl:has-data-[slot=alert-close]:pr-2.5 rtl:has-data-[slot=alert-close]:pl-10 rtl:has-data-[slot=alert-action]:has-data-[slot=alert-close]:pl-25",
+			sm: "block rounded-md px-2 py-1.5 text-xs has-data-[slot=alert-close]:pr-8 rtl:has-data-[slot=alert-close]:pr-2 rtl:has-data-[slot=alert-close]:pl-8 *:[svg]:float-start *:[svg]:me-2 *:[svg]:translate-y-0 *:data-[slot=alert-title]:inline *:data-[slot=alert-description]:ms-1 *:data-[slot=alert-description]:inline *:data-[slot=alert-description]:text-xs"
+		}
+	},
+	compoundVariants: [
+		{
+			variant: "default",
+			appearance: "soft",
+			className: "bg-muted border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-muted-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "soft",
+			className: "bg-danger-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-danger-foreground)"
+		},
+		{
+			variant: "success",
+			appearance: "soft",
+			className: "bg-positive-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-positive-foreground)"
+		},
+		{
+			variant: "warning",
+			appearance: "soft",
+			className: "bg-warning-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-warning-foreground)"
+		},
+		{
+			variant: "info",
+			appearance: "soft",
+			className: "bg-info-subtle border-transparent text-foreground *:data-[slot=alert-description]:text-foreground *:data-[slot=alert-close]:text-muted-foreground *:[svg]:text-(--nsaa-color-info-foreground)"
+		},
+		{
+			variant: "default",
+			appearance: "solid",
+			className: "border-inverted-solid bg-inverted-solid text-on-inverted-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-background *:data-[slot=alert-action]:text-foreground *:data-[slot=alert-description]:text-on-inverted-foreground"
+		},
+		{
+			variant: "destructive",
+			appearance: "outline",
+			className: "border-danger-border-default bg-card"
+		},
+		{
+			variant: "success",
+			appearance: "outline",
+			className: "border-positive-border-default bg-card text-card-foreground *:[svg]:text-(--nsaa-color-positive-foreground)"
+		},
+		{
+			variant: "warning",
+			appearance: "outline",
+			className: "border-warning-border-default bg-card text-card-foreground *:[svg]:text-(--nsaa-color-warning-foreground)"
+		},
+		{
+			variant: "info",
+			appearance: "outline",
+			className: "border-info-border-default bg-card text-card-foreground *:[svg]:text-(--nsaa-color-info-foreground)"
+		},
+		{
+			variant: "destructive",
+			appearance: "solid",
+			className: "border-transparent bg-danger-solid text-on-danger-solid-foreground *:data-[slot=alert-description]:text-on-danger-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-danger-solid-foreground *:data-[slot=alert-action]:text-danger-solid **:data-[slot=button]:text-danger-solid!"
+		},
+		{
+			variant: "success",
+			appearance: "solid",
+			className: "border-transparent bg-positive-solid text-on-positive-solid-foreground *:data-[slot=alert-description]:text-on-positive-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-positive-solid-foreground *:data-[slot=alert-action]:text-positive-solid **:data-[slot=button]:text-positive-solid!"
+		},
+		{
+			variant: "warning",
+			appearance: "solid",
+			className: "border-transparent bg-warning-solid text-on-warning-solid-foreground *:data-[slot=alert-description]:text-on-warning-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-warning-solid-foreground *:data-[slot=alert-action]:text-warning-solid **:data-[slot=button]:text-warning-solid!"
+		},
+		{
+			variant: "info",
+			appearance: "solid",
+			className: "border-transparent bg-info-solid text-on-info-solid-foreground *:data-[slot=alert-description]:text-on-info-solid-foreground *:data-[slot=alert-action]:rounded-[min(var(--radius-md),10px)] *:data-[slot=alert-action]:bg-on-info-solid-foreground *:data-[slot=alert-action]:text-info-solid **:data-[slot=button]:text-info-solid!"
+		},
+		{
+			appearance: ["soft", "solid"],
+			className: "[&_a:hover]:text-current!"
+		}
+	],
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
 });
-function Alert({ className, variant, announce, ...props }) {
+const AlertContext = React.createContext(null);
+const FOCUSABLE = "a[href], button:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"])";
+/** The next focusable element after `el` in the page, or the previous one if there is none. */
+function neighbour(el) {
+	const all = [...el.ownerDocument.querySelectorAll(FOCUSABLE)].filter((node) => !el.contains(node) && (node.checkVisibility?.() ?? true));
+	return all.find((node) => el.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_FOLLOWING) ?? all.filter((node) => el.compareDocumentPosition(node) & Node.DOCUMENT_POSITION_PRECEDING).at(-1) ?? null;
+}
+function Alert({ className, variant, appearance, size, announce, open, defaultOpen = true, onOpenChange, ref, ...props }) {
 	const cue = useCue("alert");
 	const destructive = variant === "destructive";
 	const announceCue = variant === "success" || variant === "warning" ? variant : "destructive";
@@ -27,11 +128,47 @@ function Alert({ className, variant, announce, ...props }) {
 	React.useEffect(() => {
 		if (announce !== false && (destructive || announce)) appear();
 	}, [destructive, announce]);
-	return /* @__PURE__ */ jsx("div", {
-		"data-slot": "alert",
-		role: "alert",
-		className: cn(alertVariants({ variant }), className),
-		...props
+	const [uncontrolled, setUncontrolled] = React.useState(defaultOpen);
+	const shown = open ?? uncontrolled;
+	const [mounted, setMounted] = React.useState(shown);
+	const node = React.useRef(null);
+	if (shown && !mounted) setMounted(true);
+	React.useLayoutEffect(() => {
+		const el = node.current;
+		if (shown || !el) return;
+		let live = true;
+		const running = el.getAnimations?.() ?? [];
+		Promise.allSettled(running.map((a) => a.finished)).then(() => {
+			if (!live) return;
+			if (el.contains(el.ownerDocument.activeElement)) neighbour(el)?.focus();
+			setMounted(false);
+		});
+		return () => {
+			live = false;
+		};
+	}, [shown]);
+	const context = React.useMemo(() => ({ close: () => {
+		if (open === void 0) setUncontrolled(false);
+		onOpenChange?.(false);
+	} }), [open, onOpenChange]);
+	if (!mounted) return null;
+	const status = variant ?? "default";
+	const look = appearance ?? (status === "success" || status === "warning" || status === "info" ? "soft" : "outline");
+	return /* @__PURE__ */ jsx(AlertContext.Provider, {
+		value: context,
+		children: /* @__PURE__ */ jsx("div", {
+			ref: mergeRefs(node, ref),
+			"data-slot": "alert",
+			"data-size": size ?? "default",
+			"data-ending-style": shown ? void 0 : "",
+			role: destructive || status === "warning" ? "alert" : "status",
+			className: cn(alertVariants({
+				variant,
+				appearance: look,
+				size
+			}), "rtl:text-right rtl:has-data-[slot=alert-action]:pr-2.5 rtl:has-data-[slot=alert-action]:pl-18 rtl:*:data-[slot=alert-action]:right-auto rtl:*:data-[slot=alert-action]:left-2", "has-data-[slot=alert-close]:*:data-[slot=alert-action]:right-10 rtl:has-data-[slot=alert-close]:*:data-[slot=alert-action]:left-10", className),
+			...props
+		})
 	});
 }
 function AlertTitle({ className, ...props }) {
@@ -55,4 +192,48 @@ function AlertAction({ className, ...props }) {
 		...props
 	});
 }
-export { Alert, AlertAction, AlertDescription, AlertTitle };
+/** Nsaa (#148): dismisses the Alert. A ghost icon Button named "Dismiss", at the inline end. */
+function AlertClose({ className, children, onClick, ...props }) {
+	const alert = React.useContext(AlertContext);
+	return /* @__PURE__ */ jsx(Button, {
+		"data-slot": "alert-close",
+		variant: "ghost",
+		size: "icon-xs",
+		"aria-label": "Dismiss",
+		className: cn("absolute top-2 right-2 text-current rtl:right-auto rtl:left-2 group-data-[size=sm]/alert:top-1 group-data-[size=sm]/alert:right-1 rtl:group-data-[size=sm]/alert:right-auto rtl:group-data-[size=sm]/alert:left-1", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (!event.defaultPrevented) alert?.close();
+		},
+		...props,
+		children: children ?? /* @__PURE__ */ jsxs("svg", {
+			xmlns: "http://www.w3.org/2000/svg",
+			viewBox: "0 0 24 24",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "2",
+			strokeLinecap: "round",
+			strokeLinejoin: "round",
+			"aria-hidden": "true",
+			children: [/* @__PURE__ */ jsx("path", { d: "M18 6 6 18" }), /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })]
+		})
+	});
+}
+/** Nsaa (#148): a row of `AlertLink`s under the description. The ∙ between them is CSS, never read. */
+function AlertLinks({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "alert-links",
+		className: cn("mt-1 flex flex-wrap items-center gap-x-4 gap-y-1 group-has-[>svg]/alert:col-start-2", className),
+		...props
+	});
+}
+/** Nsaa (#148): a real link in the Alert's own text colour, medium weight, underlined. */
+function AlertLink({ className, render, ...props }) {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn("relative font-medium text-current underline underline-offset-3 hover:decoration-2", "not-first:before:pointer-events-none not-first:before:absolute not-first:before:-start-2.5 not-first:before:no-underline not-first:before:content-['∙'_/_'']", className) }, props),
+		render,
+		state: { slot: "alert-link" }
+	});
+}
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle };

package/dist/alert/index.d.ts

@@ -1,3 +1,3 @@
 
-import { Alert, AlertAction, AlertDescription, AlertTitle } from "./alert.js";
-export { Alert, AlertAction, AlertDescription, AlertTitle };
+import { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle } from "./alert.js";
+export { Alert, AlertAction, AlertClose, AlertDescription, AlertLink, AlertLinks, AlertTitle };

package/dist/badge/badge.d.ts

@@ -1,8 +1,8 @@
 
-import { VariantProps } from "class-variance-authority";
 import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<"span"> & VariantProps<typeof badgeVariants>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
 export { Badge, badgeVariants };

package/dist/badge/badge.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { cva } from "class-variance-authority";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
+import { cva } from "class-variance-authority";
 // src/badge/badge.tsx
 const badgeVariants = cva("group/badge inline-flex h-5 w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-4xl border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
 	variants: { variant: {

package/dist/button/button.d.ts

@@ -2,8 +2,8 @@
 import { VariantProps } from "class-variance-authority";
 import { Button } from "@base-ui/react/button";
 declare const buttonVariants: (props?: ({
-  variant?: "default" | "destructive" | "link" | "secondary" | "outline" | "ghost" | null | undefined;
-  size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+  variant?: "default" | "destructive" | "link" | "outline" | "secondary" | "ghost" | null | undefined;
+  size?: "default" | "sm" | "xs" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type LoadingPlacement = "auto" | "start" | "center";
 declare function Button$1({ className, variant, size, loading, loadingLabel, loadingPlacement, children, onClick, onPointerDown, onPointerUp, onPointerLeave, onPointerCancel, ...props }: Button.Props & VariantProps<typeof buttonVariants> & {

package/dist/button/button.js

@@ -1,8 +1,8 @@
 "use client";
 import { cn } from "../lib/cn.js";
-import { useCue } from "../sound/sound-map.js";
 import { useControlDefaults } from "../lib/control-defaults.js";
 import { usePress } from "../lib/use-press.js";
+import { useCue } from "../sound/sound-map.js";
 import { Spinner } from "../spinner/spinner.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
@@ -95,6 +95,7 @@ function Button$1({ className, variant = "default", size = "default", loading =
 	const placement = loading ? resolvePlacement(loadingPlacement, children, size ?? "default") : null;
 	return /* @__PURE__ */ jsx(Button, {
 		"data-slot": "button",
+		"data-variant": variant ?? "default",
 		className: cn(buttonVariants({
 			variant,
 			size

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

@@ -0,0 +1,55 @@
+
+import { DateRangePreset, DateRangeValue, WeekDay } from "./presets.js";
+import * as React from "react";
+import { Locale, Matcher } from "react-day-picker";
+export type DateRangePickerLabels = {
+  /** Trigger text when there is no range. */
+  placeholder: string;
+  /** The presetsOnly option that opens the calendar. */
+  custom: string;
+  /** The presets listbox's name. */
+  presets: string;
+  /** The panel's name (Popover) and the Drawer's title. */
+  title: string;
+};
+export type DateRangePickerProps = Omit<React.ComponentProps<"div">, "defaultValue" | "onChange" | "children"> & {
+  /** The selected range (controlled), or null for none. */
+  value?: DateRangeValue | null | undefined;
+  /** The range it starts with when uncontrolled. */
+  defaultValue?: DateRangeValue | null | undefined;
+  /** `preset` is the id of the picked preset, or of the preset a custom range matches; else null. */
+  onValueChange?: ((range: DateRangeValue, details: {
+    preset: string | null;
+  }) => void) | undefined;
+  /** Default: every built-in preset, in the order of `presets`. Pass `[]` for none. */
+  presets?: readonly DateRangePreset[] | undefined;
+  /** Presets in a Select-like menu; "Custom…" opens the calendar. */
+  presetsOnly?: boolean | undefined;
+  /** Default: the locale's first day (`Intl.Locale` week info), else Monday. */
+  weekStartsOn?: WeekDay | undefined;
+  /** IANA zone that decides what "today" is. Default: the device zone. */
+  timeZone?: string | undefined;
+  /**
+   * A BCP 47 tag (formats the trigger and the announcement, sets the week start) or a date-fns locale
+   * (`import { fr } from "date-fns/locale"`), which also translates the calendar's month and day
+   * names. Default: `<html lang>`, else the runtime's; the calendar's names stay English unless a
+   * date-fns locale is passed.
+   */
+  locale?: string | Partial<Locale> | undefined;
+  /** The current instant. Default: now. Pin it for tests and stable screenshots. */
+  now?: Date | undefined;
+  /** The earliest day that can be picked; presets ending before it are disabled. */
+  min?: Date | undefined;
+  /** The latest day that can be picked; presets starting after it are disabled. */
+  max?: Date | undefined;
+  /** Days that cannot be picked (react-day-picker matchers). */
+  disabled?: Matcher | Matcher[] | undefined;
+  /** Default: 2 on containers at least 600 px wide, else 1. 2 also puts presets in a side list. */
+  numberOfMonths?: 1 | 2 | undefined;
+  /** The trigger Button's size. */
+  size?: "default" | "sm" | undefined;
+  /** Overrides for the visible and spoken strings: placeholder, custom, preset labels and the panel title. */
+  labels?: Partial<DateRangePickerLabels> | undefined;
+};
+declare function DateRangePicker({ value: valueProp, defaultValue, onValueChange, presets: presetList, presetsOnly, weekStartsOn: weekStartsOnProp, timeZone, locale: localeProp, now, min, max, disabled, numberOfMonths: monthsProp, size, labels: labelsProp, id, "aria-label": ariaLabel, className, ...props }: DateRangePickerProps): React.JSX.Element;
+export { DateRangePicker };