@parallelworks/ui 0.44.0 → 0.46.0

package/dist/components/ContextMenu.js

@@ -1,37 +1,10 @@
+import { toPositionerAnchor } from "./floating.js";
 import { MenuPopup } from "./Menu.js";
 import { MenuEntries, MenuFilter } from "./MenuEntries.js";
 import { Menu } from "@base-ui/react/menu";
 import { jsx } from "react/jsx-runtime";
 import { useCallback, useRef, useState } from "react";
 //#region src/components/ContextMenu.tsx
-function pointRect(x, y) {
-	return {
-		x,
-		y,
-		left: x,
-		top: y,
-		right: x,
-		bottom: y,
-		width: 0,
-		height: 0
-	};
-}
-function toAnchor(at) {
-	if (at instanceof Element) return at;
-	const { clientX, clientY } = at;
-	const on = at.currentTarget instanceof Element ? at.currentTarget : null;
-	if (!on) return { getBoundingClientRect: () => pointRect(clientX, clientY) };
-	const start = on.getBoundingClientRect();
-	const dx = clientX - start.left;
-	const dy = clientY - start.top;
-	return {
-		contextElement: on,
-		getBoundingClientRect: () => {
-			const now = on.getBoundingClientRect();
-			return pointRect(now.left + dx, now.top + dy);
-		}
-	};
-}
 /**
 * One menu that any number of rows, buttons or a canvas open with their own
 * items, so a long list holds a single menu rather than one per row. Render
@@ -51,7 +24,7 @@ function useContextMenu() {
 		release();
 		const next = {
 			...options,
-			anchor: toAnchor(at),
+			anchor: toPositionerAnchor(at),
 			items
 		};
 		owner.current = next;

package/dist/components/CopyToClipboard.js

@@ -1,29 +1,18 @@
-import { FaCheck } from "../icons/fa/FaCheck.js";
-import { FaEye } from "../icons/fa/FaEye.js";
-import { FaEyeSlash } from "../icons/fa/FaEyeSlash.js";
-import { FiCopy } from "../icons/fi/FiCopy.js";
-import { HiOutlineClipboardCopy } from "../icons/hi/HiOutlineClipboardCopy.js";
-import { useNotify, useStrings } from "./Provider.js";
+import { CheckIcon, CopyIcon, EyeIcon, EyeOffIcon } from "../icons.js";
+import { useStrings } from "./Provider.js";
+import { useCopy } from "./useCopy.js";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useState } from "react";
 //#region src/components/CopyToClipboard.tsx
 function CopyToClipboard({ as = "div", text, className, children, showIcon = true }) {
-	const notify = useNotify();
-	const strings = useStrings();
-	const handleCopy = async () => {
-		try {
-			await navigator.clipboard.writeText(text);
-			notify.info("Copied to clipboard");
-		} catch {
-			notify.error("Failed to copy to clipboard");
-		}
-	};
+	const { common } = useStrings();
+	const { copy } = useCopy();
+	const handleCopy = () => void copy(text);
 	return /* @__PURE__ */ jsxs(as, {
 		className,
 		onClick: handleCopy,
 		...as === "button" ? { type: "button" } : {
 			role: "button",
-			"aria-label": strings.common.copy,
+			"aria-label": common.copy,
 			tabIndex: 0,
 			onKeyDown: (e) => {
 				if (e.key === "Enter" || e.key === " ") {
@@ -32,22 +21,14 @@ function CopyToClipboard({ as = "div", text, className, children, showIcon = tru
 				}
 			}
 		},
-		children: [showIcon && /* @__PURE__ */ jsx(HiOutlineClipboardCopy, {}), children]
+		children: [showIcon && /* @__PURE__ */ jsx(CopyIcon, {}), children]
 	});
 }
 function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = false, onRevealToggle }) {
-	const notify = useNotify();
-	const [copied, setCopied] = useState(false);
-	const handleCopy = async () => {
-		if (copied) return;
-		try {
-			await navigator.clipboard.writeText(textToCopy);
-			setCopied(true);
-			notify.info("Copied to clipboard");
-			setTimeout(() => setCopied(false), 2e3);
-		} catch {
-			notify.error("Failed to copy to clipboard");
-		}
+	const { common } = useStrings();
+	const { copy, copied } = useCopy();
+	const handleCopy = () => {
+		if (!copied) copy(textToCopy);
 	};
 	return /* @__PURE__ */ jsxs("div", {
 		className: "group relative",
@@ -65,9 +46,9 @@ function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = fals
 					onRevealToggle?.();
 				},
 				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": isRevealed ? "Hide secret" : "Reveal secret",
-				title: isRevealed ? "Hide secret" : "Reveal secret",
-				children: isRevealed ? /* @__PURE__ */ jsx(FaEye, {}) : /* @__PURE__ */ jsx(FaEyeSlash, {})
+				"aria-label": isRevealed ? common.hideValue : common.showValue,
+				title: isRevealed ? common.hideValue : common.showValue,
+				children: isRevealed ? /* @__PURE__ */ jsx(EyeIcon, {}) : /* @__PURE__ */ jsx(EyeOffIcon, {})
 			}), /* @__PURE__ */ jsx("button", {
 				type: "button",
 				onClick: (e) => {
@@ -75,8 +56,8 @@ function CopyCodeBlock({ textToCopy, children, secret = false, isRevealed = fals
 					handleCopy();
 				},
 				className: "p-2 rounded-md opacity-0 group-hover:opacity-100 transition-all duration-150",
-				"aria-label": copied ? "Copied" : "Copy to clipboard",
-				children: copied ? /* @__PURE__ */ jsx(FaCheck, { className: "text-green-400" }) : /* @__PURE__ */ jsx(FiCopy, {})
+				"aria-label": copied ? common.copied : common.copyToClipboard,
+				children: copied ? /* @__PURE__ */ jsx(CheckIcon, { className: "text-green-400" }) : /* @__PURE__ */ jsx(CopyIcon, {})
 			})]
 		})]
 	});

package/dist/components/CreateModal.d.ts

@@ -1,4 +1,4 @@
-import type { InputHTMLAttributes, ReactNode, TextareaHTMLAttributes } from 'react';
+import type { ReactNode } from 'react';
 import { type ComboboxItems } from './comboboxItems.js';
 import type { MenuEntry } from './MenuEntries.js';
 interface CreateModalProps {
@@ -19,7 +19,9 @@ interface CreateModalProps {
     /** Normalize the name as the user types (e.g. strip disallowed characters). */
     sanitizeName?: (name: string) => string;
     nameHint?: ((name: string) => ReactNode) | undefined;
+    /** The dialog's fields: an `Input`, or a `Field` around any other control. */
     children?: ReactNode;
+    /** Compact pills, such as `CreateModalSelect` and `CreateModalSwitch`, in a row under the name. */
     properties?: ReactNode;
     advanced?: ReactNode;
     submitDisabled?: boolean;
@@ -37,29 +39,6 @@ interface CreateModalProps {
 }
 /** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
 export declare function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceholder, hideName, initialName, showDescription, descriptionPlaceholder, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled, hideSubmit, nameOptional, onNameChange, dirty, showFavorite, onSubmit, }: CreateModalProps): import("react").JSX.Element;
-/** Labeled single-line input row for the dialog's extra fields. */
-export declare function CreateModalField({ label, tooltip, id, ...props }: InputHTMLAttributes<HTMLInputElement> & {
-    label: string;
-    /** Help text surfaced via an info icon next to the label. */
-    tooltip?: string | undefined;
-}): import("react").JSX.Element;
-/** Labeled multi-line field for credential blobs (JSON keys, PEM keys). */
-export declare function CreateModalTextarea({ label, tooltip, rows, id, ...props }: TextareaHTMLAttributes<HTMLTextAreaElement> & {
-    label: string;
-    /** Help text surfaced via an info icon next to the label. */
-    tooltip?: string | undefined;
-}): import("react").JSX.Element;
-/** Labeled input with suggestions; any text is allowed. */
-export declare function CreateModalAutocompleteField({ label, tooltip, value, onValueChange, items, placeholder, }: {
-    label: string;
-    /** Help text surfaced via an info icon next to the label. */
-    tooltip?: string;
-    value: string;
-    onValueChange: (value: string) => void;
-    /** Suggestions, filtered by what's typed. */
-    items: string[];
-    placeholder?: string;
-}): import("react").JSX.Element;
 /** Compact property pill with an on/off switch. */
 export declare function CreateModalSwitch({ label, checked, onCheckedChange, tooltip, }: {
     label: string;

package/dist/components/CreateModal.js

@@ -1,32 +1,29 @@
-import { FaChevronDown } from "../icons/fa/FaChevronDown.js";
-import { IoHeart } from "../icons/io5/IoHeart.js";
-import { IoHeartOutline } from "../icons/io5/IoHeartOutline.js";
-import { LuChevronRight } from "../icons/lu/LuChevronRight.js";
+import { cx } from "../cx.js";
+import { ChevronDownIcon, FavoriteIcon, FavoriteOutlineIcon } from "../icons.js";
+import { buttonClasses } from "./buttonClasses.js";
 import { Tooltip } from "./Tooltip.js";
 import { useStrings } from "./Provider.js";
 import { ActionMenu } from "./ActionMenu.js";
+import { Button } from "./Button.js";
 import { comboboxLeaves } from "./comboboxItems.js";
-import { Autocomplete, Combobox } from "./Combobox.js";
-import { ghostButtonClasses } from "./ghostButton.js";
+import { Combobox } from "./Combobox.js";
 import { Modal } from "./Modal.js";
-import { InfoTip } from "./InfoTip.js";
+import { Disclosure } from "./Disclosure.js";
 import { Switch } from "./Switch.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useId, useRef, useState } from "react";
-import { Button } from "@base-ui/react/button";
+import { useEffect, useRef, useState } from "react";
 import { Toggle } from "@base-ui/react/toggle";
 //#region src/components/CreateModal.tsx
 /** Submits on Enter in the name field or ⌘/Ctrl+Enter from anywhere in the panel. */
 function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceholder, hideName = false, initialName, showDescription = true, descriptionPlaceholder, submitLabel, submittingLabel, validateName, sanitizeName, nameHint, children, properties, advanced, submitDisabled = false, hideSubmit = false, nameOptional = false, onNameChange, dirty = false, showFavorite = false, onSubmit }) {
 	const t = useStrings().modal;
-	const submitText = submitLabel ?? t.create;
+	const { common } = useStrings();
+	const submitText = submitLabel ?? common.create;
 	const submittingText = submittingLabel ?? t.creating;
 	const descriptionText = descriptionPlaceholder ?? t.addDescription;
 	const [name, setName] = useState("");
 	const [description, setDescription] = useState("");
 	const [submitting, setSubmitting] = useState(false);
-	const [advancedOpen, setAdvancedOpen] = useState(false);
 	const [favorite, setFavorite] = useState(false);
 	const [nameFlash, setNameFlash] = useState(false);
 	const [nameTouched, setNameTouched] = useState(false);
@@ -37,7 +34,6 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 			setName(initialName ?? "");
 			setDescription("");
 			setSubmitting(false);
-			setAdvancedOpen(false);
 			setFavorite(false);
 			setNameTouched(false);
 			setInteracted(false);
@@ -97,7 +93,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 							children: [
 								typeIcon,
 								typeLabel,
-								/* @__PURE__ */ jsx(FaChevronDown, { className: "w-3 h-3 opacity-60" })
+								/* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3 opacity-60" })
 							]
 						}) : /* @__PURE__ */ jsxs("div", {
 							className: "inline-flex items-center gap-1.5 px-1.5 py-1 rounded-md bg-(--theme-muted-panel-bg) text-xs font-medium text-(--theme-muted-text-color)",
@@ -128,7 +124,7 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 								placeholder: namePlaceholder,
 								"aria-label": namePlaceholder,
 								onAnimationEnd: () => setNameFlash(false),
-								className: clsx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
+								className: cx("mt-2 -mb-1 -mx-1.5 w-[calc(100%+0.75rem)] rounded-md border-0 px-1.5 py-1 bg-transparent shadow-none text-lg font-medium text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none", nameFlash && "animate-field-flash", nameMissing ? "ring-1 ring-(--theme-error)" : "focus:ring-0")
 							}),
 							nameError && /* @__PURE__ */ jsx("p", {
 								className: "mt-1 text-xs text-(--theme-error)",
@@ -149,24 +145,24 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 								className: "mt-1.5 w-full border-0 p-0 bg-transparent shadow-none resize-none text-sm text-(--theme-app) placeholder:text-(--theme-muted-text-color) focus:outline-none focus:ring-0"
 							}) : /* @__PURE__ */ jsx("div", { className: "mt-3" })
 						] }),
-						children
+						children && /* @__PURE__ */ jsx("div", {
+							className: "mb-3 flex flex-col gap-3",
+							children
+						})
 					]
 				}),
 				properties && /* @__PURE__ */ jsx("div", {
 					className: "flex flex-wrap items-center gap-1.5 px-4 pt-1 pb-3",
 					children: properties
 				}),
-				advanced && /* @__PURE__ */ jsxs("div", {
+				advanced && /* @__PURE__ */ jsx("div", {
 					className: "px-4 pb-3",
-					children: [/* @__PURE__ */ jsxs("button", {
-						type: "button",
-						onClick: () => setAdvancedOpen((o) => !o),
-						className: "inline-flex items-center gap-1 text-xs font-medium text-(--theme-muted-text-color) hover:text-(--theme-app) transition-colors",
-						children: [/* @__PURE__ */ jsx(LuChevronRight, { className: clsx("w-3 h-3 transition-transform", advancedOpen && "rotate-90") }), t.advanced]
-					}), advancedOpen && /* @__PURE__ */ jsx("div", {
-						className: "mt-2",
+					children: /* @__PURE__ */ jsx(Disclosure, {
+						summary: t.advanced,
+						summaryClassName: "text-xs font-medium text-(--theme-muted-text-color) transition-colors hover:text-(--theme-app)",
+						panelClassName: "pt-2",
 						children: advanced
-					})]
+					})
 				})
 			]
 		}), /* @__PURE__ */ jsxs("div", {
@@ -177,105 +173,41 @@ function CreateModal({ open, onClose, typeIcon, typeLabel, typeMenu, namePlaceho
 					pressed: favorite,
 					onPressedChange: setFavorite,
 					"aria-label": t.favorite,
-					className: clsx("inline-flex h-8 items-center gap-1.5 px-2.5 rounded-md text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring)", favorite ? "text-(--theme-favorite) bg-(--theme-favorite-muted)" : "text-(--theme-muted-text-color) hover:text-(--theme-app) hover:bg-(--theme-muted-panel-bg)"),
-					children: [favorite ? /* @__PURE__ */ jsx(IoHeart, { className: "w-4 h-4 scale-110 transition-transform" }) : /* @__PURE__ */ jsx(IoHeartOutline, { className: "w-4 h-4 transition-transform" }), favorite ? t.favorited : t.favorite]
+					className: buttonClasses({
+						variant: "ghost",
+						size: "md"
+					}),
+					children: [favorite ? /* @__PURE__ */ jsx(FavoriteIcon, { className: "text-(--theme-favorite)" }) : /* @__PURE__ */ jsx(FavoriteOutlineIcon, {}), favorite ? t.favorited : t.favorite]
 				})
 			}) : /* @__PURE__ */ jsx("span", {}), /* @__PURE__ */ jsxs("div", {
 				className: "flex items-center gap-2",
-				children: [/* @__PURE__ */ jsx("button", {
-					type: "button",
+				children: [/* @__PURE__ */ jsx(Button, {
+					variant: "ghost",
+					size: "sm",
 					onClick: onClose,
-					className: ghostButtonClasses,
-					children: hideSubmit ? t.close : t.cancel
-				}), !hideSubmit && /* @__PURE__ */ jsx("button", {
-					type: "button",
+					children: hideSubmit ? common.close : common.cancel
+				}), !hideSubmit && /* @__PURE__ */ jsx(Button, {
+					variant: "primary",
+					size: "sm",
 					onClick: handleSubmit,
 					"aria-disabled": !canSubmit,
-					className: `inline-flex cursor-pointer items-center gap-1.5 h-7 px-2.5 rounded-md text-[12.5px] font-medium bg-(--theme-element) text-(--theme-element-text) hover:opacity-90 transition-opacity aria-disabled:opacity-50 aria-disabled:cursor-not-allowed aria-disabled:hover:opacity-50`,
+					loading: submitting,
 					children: submitting ? submittingText : submitText
 				})]
 			})]
 		})]
 	});
 }
-var fieldInputClasses = "w-full h-8 px-2.5 rounded-md border border-(--theme-border) bg-(--theme-input-bg) shadow-none text-sm text-(--theme-app) placeholder:text-(--theme-muted-text-color) transition-colors focus:outline-none focus:ring-0 focus:border-(--theme-element)";
-var fieldLabelClasses = "block mb-1 text-xs font-medium text-(--theme-muted-text-color)";
-/** A field's label, with its help beside it rather than inside the label, so
-*  the label names the field and not the help button. */
-function FieldLabel({ id, label, tooltip }) {
-	return /* @__PURE__ */ jsxs("div", {
-		className: clsx(fieldLabelClasses, "flex items-center gap-1"),
-		children: [/* @__PURE__ */ jsx("label", {
-			htmlFor: id,
-			children: label
-		}), tooltip && /* @__PURE__ */ jsx(InfoTip, { text: tooltip })]
-	});
-}
-/** Labeled single-line input row for the dialog's extra fields. */
-function CreateModalField({ label, tooltip, id, ...props }) {
-	const fallbackId = useId();
-	const fieldId = id ?? fallbackId;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mb-3",
-		children: [/* @__PURE__ */ jsx(FieldLabel, {
-			id: fieldId,
-			label,
-			tooltip
-		}), /* @__PURE__ */ jsx("input", {
-			type: "text",
-			autoComplete: "off",
-			"data-1p-ignore": true,
-			...props,
-			id: fieldId,
-			className: fieldInputClasses
-		})]
-	});
-}
-/** Labeled multi-line field for credential blobs (JSON keys, PEM keys). */
-function CreateModalTextarea({ label, tooltip, rows = 4, id, ...props }) {
-	const fallbackId = useId();
-	const fieldId = id ?? fallbackId;
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mb-3",
-		children: [/* @__PURE__ */ jsx(FieldLabel, {
-			id: fieldId,
-			label,
-			tooltip
-		}), /* @__PURE__ */ jsx("textarea", {
-			autoComplete: "off",
-			"data-1p-ignore": true,
-			rows,
-			...props,
-			id: fieldId,
-			className: clsx(fieldInputClasses, "h-auto py-2 font-mono text-xs leading-relaxed resize-y")
-		})]
-	});
-}
-/** Labeled input with suggestions; any text is allowed. */
-function CreateModalAutocompleteField({ label, tooltip, value, onValueChange, items, placeholder }) {
-	const id = useId();
-	return /* @__PURE__ */ jsxs("div", {
-		className: "mb-3",
-		children: [/* @__PURE__ */ jsx(FieldLabel, {
-			id,
-			label,
-			tooltip
-		}), /* @__PURE__ */ jsx(Autocomplete, {
-			id,
-			items,
-			value,
-			onValueChange,
-			placeholder
-		})]
-	});
-}
-var pillClasses = "inline-flex h-7 items-center gap-1.5 rounded-md border border-(--theme-border) px-2 text-xs font-medium transition-colors";
+var pillClasses = (set) => buttonClasses({
+	variant: set ? "secondary" : "outline",
+	size: "sm"
+});
 /** Compact property pill with an on/off switch. */
 function CreateModalSwitch({ label, checked, onCheckedChange, tooltip }) {
 	return /* @__PURE__ */ jsx(Tooltip, {
 		content: tooltip,
 		children: /* @__PURE__ */ jsxs("label", {
-			className: clsx(pillClasses, "cursor-pointer hover:bg-(--theme-muted-panel-bg)", checked ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
+			className: pillClasses(checked),
 			children: [/* @__PURE__ */ jsx(Switch, {
 				size: "sm",
 				checked,
@@ -287,7 +219,7 @@ function CreateModalSwitch({ label, checked, onCheckedChange, tooltip }) {
 /** Compact property pill that picks one value from a searchable list. Items may carry
 * icons, descriptions and group headings (e.g. Clusters vs Kubernetes). */
 function CreateModalSelect({ label, icon, value, items, onValueChange, disabled = false, disabledReason, tooltip }) {
-	const t = useStrings().modal;
+	const { common } = useStrings();
 	const selected = comboboxLeaves(items).map((item) => typeof item === "string" ? {
 		value: item,
 		label: item
@@ -299,7 +231,7 @@ function CreateModalSelect({ label, icon, value, items, onValueChange, disabled
 			className: "font-normal text-(--theme-muted-text-color)",
 			children: label
 		}), selectedLabel] }) : label,
-		/* @__PURE__ */ jsx(FaChevronDown, { className: "w-3 h-3 opacity-60" })
+		/* @__PURE__ */ jsx(ChevronDownIcon, { className: "w-3 h-3 opacity-60" })
 	] });
 	if (disabled) return /* @__PURE__ */ jsx(Tooltip, {
 		content: disabledReason ?? tooltip,
@@ -307,7 +239,8 @@ function CreateModalSelect({ label, icon, value, items, onValueChange, disabled
 			disabled: true,
 			focusableWhenDisabled: true,
 			"aria-label": label,
-			className: clsx(pillClasses, "opacity-50 cursor-not-allowed text-(--theme-muted-text-color)"),
+			variant: "outline",
+			size: "sm",
 			children: pillContent
 		})
 	});
@@ -319,14 +252,14 @@ function CreateModalSelect({ label, icon, value, items, onValueChange, disabled
 		},
 		itemToStringLabel: (next) => next,
 		"aria-label": label,
-		placeholder: t.filter,
+		placeholder: common.filter,
 		triggerTooltip: tooltip,
 		trigger: /* @__PURE__ */ jsx("button", {
 			type: "button",
-			className: clsx(pillClasses, "cursor-pointer hover:bg-(--theme-muted-panel-bg)", selectedLabel ? "text-(--theme-app)" : "text-(--theme-muted-text-color)"),
+			className: pillClasses(!!selectedLabel),
 			children: pillContent
 		})
 	});
 }
 //#endregion
-export { CreateModal, CreateModalAutocompleteField, CreateModalField, CreateModalSelect, CreateModalSwitch, CreateModalTextarea };
+export { CreateModal, CreateModalSelect, CreateModalSwitch };

package/dist/components/DatePicker.d.ts

@@ -0,0 +1,31 @@
+export interface DatePickerProps {
+    /** As a native date input holds it: `yyyy-MM-dd`, or with `withTime` the local
+     *  `yyyy-MM-ddTHH:mm` of `datetime-local`. Empty while nothing is chosen. */
+    value: string;
+    onValueChange: (value: string) => void;
+    /** A time beside the date. */
+    withTime?: boolean | undefined;
+    /** The earliest and latest days, and with `withTime` times, that can be chosen, in the value's
+     *  format. */
+    min?: string | undefined;
+    max?: string | undefined;
+    /** Seconds the time steps by, such as 900 for quarter hours. */
+    timeStep?: number | undefined;
+    /** Leaves out the clear button, for a field that always holds a date. */
+    required?: boolean | undefined;
+    disabled?: boolean | undefined;
+    placeholder?: string | undefined;
+    id?: string | undefined;
+    'aria-label'?: string | undefined;
+    'aria-labelledby'?: string | undefined;
+    'aria-describedby'?: string | undefined;
+    'aria-invalid'?: boolean | undefined;
+    'aria-required'?: boolean | undefined;
+    className?: string | undefined;
+}
+/**
+ * A day from a calendar, and with `withTime` a time beside it. The value is a string as a native
+ * date or datetime-local input holds it, so it reads the same in forms and URLs; months, weekdays
+ * and the shown date follow the reader's locale.
+ */
+export declare function DatePicker({ value, onValueChange, withTime, min, max, timeStep, required, disabled, placeholder, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, 'aria-describedby': ariaDescribedBy, 'aria-invalid': ariaInvalid, 'aria-required': ariaRequired, className, }: DatePickerProps): import("react").JSX.Element;