@parallelworks/ui 0.44.0 → 0.45.0

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;

package/dist/components/DatePicker.js

@@ -0,0 +1,191 @@
+import { cx } from "../cx.js";
+import { CalendarIcon, ChevronLeftIcon, ChevronRightIcon } from "../icons.js";
+import { panelClassName, positionerClassName } from "./floating.js";
+import { buttonClasses } from "./buttonClasses.js";
+import { useStrings } from "./Provider.js";
+import { fieldBox } from "./fieldBox.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { Popover } from "@base-ui/react/popover";
+import { DayPicker } from "@daypicker/react";
+//#region src/components/DatePicker.tsx
+var pad = (n) => String(n).padStart(2, "0");
+var toDay = (date) => `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+/** The local calendar day a value names, or undefined for none or nonsense. */
+function parseDay(value) {
+	const match = value?.match(/^(\d{4})-(\d{2})-(\d{2})/);
+	if (!match) return;
+	const [, y, m, d] = match.map(Number);
+	const date = new Date(y, m - 1, d);
+	return Number.isNaN(date.getTime()) ? void 0 : date;
+}
+var timeOf = (value) => value?.match(/T(\d{2}:\d{2}(?::\d{2})?)/)?.[1];
+/** The locale's first day of the week, where the browser reports it; Sunday otherwise. */
+function firstWeekday() {
+	try {
+		const locale = new Intl.Locale(navigator.language);
+		const firstDay = (locale.getWeekInfo?.() ?? locale.weekInfo)?.firstDay;
+		return firstDay === void 0 ? 0 : firstDay % 7;
+	} catch {
+		return 0;
+	}
+}
+var caption = new Intl.DateTimeFormat(void 0, {
+	month: "long",
+	year: "numeric"
+});
+var weekday = new Intl.DateTimeFormat(void 0, { weekday: "narrow" });
+var longDay = new Intl.DateTimeFormat(void 0, { dateStyle: "full" });
+var shownDay = new Intl.DateTimeFormat(void 0, { dateStyle: "medium" });
+var calendarClassNames = {
+	root: "relative p-3",
+	months: "flex flex-col",
+	month: "flex flex-col gap-2",
+	month_caption: "flex h-7 items-center px-1",
+	caption_label: "text-sm font-semibold",
+	nav: "absolute top-3 right-3 flex items-center gap-1",
+	button_previous: buttonClasses({
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true
+	}),
+	button_next: buttonClasses({
+		variant: "ghost",
+		size: "sm",
+		iconOnly: true
+	}),
+	month_grid: "border-collapse",
+	weekdays: "",
+	weekday: "size-9 text-center text-xs font-normal text-(--theme-muted-text-color)",
+	week: "",
+	day: "size-9 p-0 text-center text-sm",
+	day_button: "size-9 rounded-md cursor-pointer outline-none hover:bg-(--theme-hover) focus-visible:ring-2 focus-visible:ring-(--theme-focus-ring) disabled:cursor-not-allowed disabled:hover:bg-transparent",
+	selected: "[&>button]:bg-(--theme-accent) [&>button]:text-(--theme-accent-text) [&>button]:hover:bg-(--theme-accent)",
+	today: "font-semibold [&>button]:underline [&>button]:underline-offset-4",
+	outside: "text-(--theme-muted-text-color) opacity-60",
+	disabled: "text-(--theme-muted-text-color) opacity-40"
+};
+var triggerClassName = cx(fieldBox(), "flex flex-1 min-w-40 cursor-pointer items-center gap-2 text-left");
+/**
+* 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.
+*/
+function DatePicker({ value, onValueChange, withTime = false, min, max, timeStep = 60, required = false, disabled = false, placeholder, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "aria-invalid": ariaInvalid, "aria-required": ariaRequired, className }) {
+	const t = useStrings().datePicker;
+	const { common } = useStrings();
+	const [open, setOpen] = useState(false);
+	const [weekStartsOn] = useState(firstWeekday);
+	const day = parseDay(value);
+	const time = timeOf(value) ?? timeOf(min) ?? "00:00";
+	const earliest = parseDay(min);
+	const latest = parseDay(max);
+	const outOfRange = [...earliest ? [{ before: earliest }] : [], ...latest ? [{ after: latest }] : []];
+	const emit = (next, nextTime = time) => {
+		if (!next) {
+			onValueChange("");
+			return;
+		}
+		onValueChange(withTime ? `${toDay(next)}T${nextTime}` : toDay(next));
+	};
+	const opensOn = day ?? earliest;
+	const pick = (next) => {
+		emit(next);
+		setOpen(false);
+	};
+	const sameDay = (bound) => day !== void 0 && parseDay(bound)?.getTime() === day.getTime();
+	return /* @__PURE__ */ jsxs("div", {
+		className: cx("flex w-full items-center gap-2", className),
+		children: [/* @__PURE__ */ jsxs(Popover.Root, {
+			open,
+			onOpenChange: setOpen,
+			children: [/* @__PURE__ */ jsxs(Popover.Trigger, {
+				id,
+				disabled,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledBy,
+				"aria-describedby": ariaDescribedBy,
+				"aria-invalid": ariaInvalid || void 0,
+				"aria-required": ariaRequired || void 0,
+				className: triggerClassName,
+				children: [/* @__PURE__ */ jsx(CalendarIcon, {
+					"aria-hidden": "true",
+					className: "size-3.5 shrink-0 text-(--theme-muted-text-color)"
+				}), /* @__PURE__ */ jsx("span", {
+					className: cx("truncate", !day && "text-(--theme-muted-text-color)"),
+					children: day ? shownDay.format(day) : placeholder ?? t.pickDate
+				})]
+			}), /* @__PURE__ */ jsx(Popover.Portal, { children: /* @__PURE__ */ jsx(Popover.Positioner, {
+				align: "start",
+				sideOffset: 4,
+				className: positionerClassName,
+				children: /* @__PURE__ */ jsxs(Popover.Popup, {
+					className: panelClassName,
+					children: [/* @__PURE__ */ jsx(DayPicker, {
+						...required ? {
+							mode: "single",
+							required: true,
+							selected: day,
+							onSelect: pick
+						} : {
+							mode: "single",
+							selected: day,
+							onSelect: pick
+						},
+						...opensOn && { defaultMonth: opensOn },
+						...earliest && { startMonth: earliest },
+						...latest && { endMonth: latest },
+						disabled: outOfRange,
+						weekStartsOn,
+						autoFocus: true,
+						showOutsideDays: true,
+						fixedWeeks: true,
+						classNames: calendarClassNames,
+						formatters: {
+							formatCaption: (month) => caption.format(month),
+							formatWeekdayName: (date) => weekday.format(date)
+						},
+						labels: {
+							labelDayButton: (date) => longDay.format(date),
+							labelPrevious: () => t.previousMonth,
+							labelNext: () => t.nextMonth,
+							labelGrid: (month) => caption.format(month),
+							labelWeekday: (date) => new Intl.DateTimeFormat(void 0, { weekday: "long" }).format(date)
+						},
+						components: { Chevron: ({ orientation }) => orientation === "left" ? /* @__PURE__ */ jsx(ChevronLeftIcon, { "aria-hidden": "true" }) : /* @__PURE__ */ jsx(ChevronRightIcon, { "aria-hidden": "true" }) }
+					}), !required && day && /* @__PURE__ */ jsx("div", {
+						className: "flex justify-end border-t border-(--theme-border) px-3 py-2",
+						children: /* @__PURE__ */ jsx("button", {
+							type: "button",
+							className: buttonClasses({
+								variant: "ghost",
+								size: "xs"
+							}),
+							onClick: () => {
+								emit(void 0);
+								setOpen(false);
+							},
+							children: common.clear
+						})
+					})]
+				})
+			}) })]
+		}), withTime && /* @__PURE__ */ jsx("input", {
+			type: "time",
+			"aria-label": t.time,
+			value: day ? time : "",
+			step: timeStep,
+			min: sameDay(min) ? timeOf(min) : void 0,
+			max: sameDay(max) ? timeOf(max) : void 0,
+			disabled,
+			"aria-invalid": ariaInvalid || void 0,
+			onChange: (event) => {
+				const next = event.target.value;
+				if (next) emit(day ?? earliest ?? /* @__PURE__ */ new Date(), next);
+			},
+			className: cx(fieldBox(), "w-auto tabular-nums")
+		})]
+	});
+}
+//#endregion
+export { DatePicker };

package/dist/components/DescriptionList.js

@@ -1,11 +1,11 @@
+import { cx } from "../cx.js";
 import { InfoTip } from "./InfoTip.js";
-import { clsx } from "clsx";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import React from "react";
 //#region src/components/DescriptionList.tsx
 function DescriptionListItem({ label, children, tooltip, className, ...props }) {
 	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("dt", {
-		className: clsx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
+		className: cx("text-[13px] leading-6 col-span-1 font-normal flex gap-1", className),
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "min-w-0 truncate",
 			children: label
@@ -21,7 +21,7 @@ function DescriptionListItem({ label, children, tooltip, className, ...props })
 }
 function DescriptionList({ children, title, separators = true, subtitle, className, wrapperClassName, vertical = false }) {
 	return /* @__PURE__ */ jsxs("div", {
-		className: clsx("w-full", wrapperClassName),
+		className: cx("w-full", wrapperClassName),
 		children: [
 			title && /* @__PURE__ */ jsx("h2", {
 				className: "text-sm font-semibold w-full mb-1",
@@ -32,7 +32,7 @@ function DescriptionList({ children, title, separators = true, subtitle, classNa
 				children: subtitle
 			}),
 			/* @__PURE__ */ jsx("dl", {
-				className: clsx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
+				className: cx("grid", separators && "*:not-last-of-type:border-b-1", vertical ? "grid-cols-1" : "grid-cols-5 gap-x-4 gap-y-0.5 *:pb-0.5", className),
 				children: Array.isArray(children) ? React.Children.toArray(children) : children
 			})
 		]

package/dist/components/Disclosure.d.ts

@@ -0,0 +1,34 @@
+import type { ReactNode } from 'react';
+/** The height a collapsible panel animates as it opens and closes. It clips
+ *  only while it moves, so focus rings and overflowing content show once open. */
+export declare const collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,opacity] duration-200 ease-out motion-reduce:transition-none data-starting-style:h-0 data-starting-style:overflow-hidden data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:overflow-hidden data-ending-style:opacity-0";
+export interface DisclosureProps {
+    /** The line that toggles the detail: a label, or a row of status and label. */
+    summary: ReactNode;
+    open?: boolean | undefined;
+    onOpenChange?: ((open: boolean) => void) | undefined;
+    defaultOpen?: boolean | undefined;
+    /** Nothing to reveal: the summary shows without a toggle. */
+    disabled?: boolean | undefined;
+    /** Keep the detail mounted while folded, so its own state survives. */
+    keepMounted?: boolean | undefined;
+    className?: string | undefined;
+    /** On the toggle: its width (`w-full` for a whole row), text size and color. */
+    summaryClassName?: string | undefined;
+    /** On the revealed detail: its indent and spacing. */
+    panelClassName?: string | undefined;
+    children: ReactNode;
+}
+/** A line inside content that reveals more detail beneath it, such as a tool
+ *  call's arguments or a model's reasoning. For a titled part of a page or
+ *  form, which belongs in the page's outline, use Section. */
+export declare function Disclosure({ summary, open, onOpenChange, defaultOpen, disabled, keepMounted, className, summaryClassName, panelClassName, children, }: DisclosureProps): import("react").JSX.Element;
+/** The revealing panel alone, for a toggle that lives elsewhere, such as a
+ *  tree row's chevron that names this panel with `aria-controls`. */
+export declare function DisclosurePanel({ open, id, keepMounted, className, children, }: {
+    open: boolean;
+    id?: string | undefined;
+    keepMounted?: boolean | undefined;
+    className?: string | undefined;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/components/Disclosure.js

@@ -0,0 +1,46 @@
+import { cx } from "../cx.js";
+import { ChevronRightIcon } from "../icons.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Collapsible } from "@base-ui/react/collapsible";
+//#region src/components/Disclosure.tsx
+/** The height a collapsible panel animates as it opens and closes. It clips
+*  only while it moves, so focus rings and overflowing content show once open. */
+var collapsePanelClassName = "h-(--collapsible-panel-height) transition-[height,opacity] duration-200 ease-out motion-reduce:transition-none data-starting-style:h-0 data-starting-style:overflow-hidden data-starting-style:opacity-0 data-ending-style:h-0 data-ending-style:overflow-hidden data-ending-style:opacity-0";
+/** A line inside content that reveals more detail beneath it, such as a tool
+*  call's arguments or a model's reasoning. For a titled part of a page or
+*  form, which belongs in the page's outline, use Section. */
+function Disclosure({ summary, open, onOpenChange, defaultOpen = false, disabled = false, keepMounted = false, className, summaryClassName, panelClassName, children }) {
+	return /* @__PURE__ */ jsxs(Collapsible.Root, {
+		open,
+		onOpenChange: (next) => onOpenChange?.(next),
+		defaultOpen,
+		disabled,
+		className,
+		children: [/* @__PURE__ */ jsxs(Collapsible.Trigger, {
+			className: cx("group/disclosure flex min-w-0 items-start gap-2 text-left", disabled ? "cursor-default" : "cursor-pointer", summaryClassName),
+			children: [summary, !disabled && /* @__PURE__ */ jsx(ChevronRightIcon, {
+				"aria-hidden": "true",
+				className: "mt-1 h-3.5 w-3.5 shrink-0 opacity-70 transition-transform group-data-panel-open/disclosure:rotate-90 motion-reduce:transition-none"
+			})]
+		}), /* @__PURE__ */ jsx(Collapsible.Panel, {
+			keepMounted,
+			className: cx(collapsePanelClassName, panelClassName),
+			children
+		})]
+	});
+}
+/** The revealing panel alone, for a toggle that lives elsewhere, such as a
+*  tree row's chevron that names this panel with `aria-controls`. */
+function DisclosurePanel({ open, id, keepMounted = false, className, children }) {
+	return /* @__PURE__ */ jsx(Collapsible.Root, {
+		open,
+		children: /* @__PURE__ */ jsx(Collapsible.Panel, {
+			id,
+			keepMounted,
+			className: cx(collapsePanelClassName, className),
+			children
+		})
+	});
+}
+//#endregion
+export { Disclosure, DisclosurePanel, collapsePanelClassName };

package/dist/components/Drawer.d.ts

@@ -0,0 +1,47 @@
+import { Drawer as BaseDrawer } from '@base-ui/react/drawer';
+import { type ReactNode } from 'react';
+export interface DrawerProps extends Omit<BaseDrawer.Popup.Props, 'className' | 'children' | 'render' | 'title'> {
+    open: boolean;
+    onClose: () => void;
+    /** The header's heading, which names the drawer. Without one, name it with `aria-label`. */
+    title?: ReactNode;
+    /** A line under the title. */
+    description?: ReactNode;
+    /** Actions along the bottom edge, such as Cancel and Save; they stay in view as the body scrolls. */
+    footer?: ReactNode;
+    /** The edge it slides in from, and the way a swipe dismisses it. */
+    side?: 'left' | 'right';
+    /** Its width: pixels, or any CSS length such as `'100%'` for as wide as the space allows. */
+    width?: number | string;
+    /** Adds a handle on the inner edge that drags, or arrow keys move, to change the width. */
+    resizable?: boolean;
+    /** The narrowest a drag leaves it, in pixels. */
+    minWidth?: number;
+    /** False ignores the backdrop and Escape, so typed input isn't lost to a stray
+     *  click; the drawer's own buttons still close it. */
+    dismissible?: boolean;
+    /** True dims the page behind it, locks its scroll and keeps focus inside;
+     *  `'trap-focus'` dims and keeps focus but leaves the page's scroll alone, as an
+     *  embedded panel wants; false is a side panel the page stays usable beside. */
+    modal?: boolean | 'trap-focus';
+    /** False drops the header's close button, for a drawer whose footer closes it. */
+    closeButton?: boolean;
+    /** Covers its nearest positioned ancestor instead of the window, as a drawer
+     *  inside an embedded panel does. */
+    contained?: boolean;
+    /** Keeps the content mounted while closed, so its scroll and state survive. */
+    keepMounted?: boolean;
+    /** False drops the body's padding, for content that fills the drawer edge to edge. */
+    padded?: boolean;
+    /** On the body. */
+    className?: string;
+    children: ReactNode;
+}
+/** A panel that slides in from an edge over the page. A swipe toward that edge,
+ *  Escape or a press outside closes it, and focus returns where it was.
+ *
+ *  It leaves the host's fixed chrome uncovered: it starts below
+ *  `--app-inset-top` (a top bar's height), and at its widest leaves the strip
+ *  `--app-inset-start` (a start-side sidebar's width, at least 2.5rem). Set both
+ *  on the document root. */
+export declare function Drawer({ open, onClose, title, description, footer, side, width, resizable, minWidth, dismissible, modal, closeButton, contained, keepMounted, padded, className, children, ...popupProps }: DrawerProps): import("react").JSX.Element;