@diwauhris/ui 1.7.22 → 1.7.24

package/lib/assets/ui.css

@@ -378,6 +378,10 @@
   right: 0.5rem;
 }
 
+.right-2\.5 {
+  right: 0.625rem;
+}
+
 .right-3 {
   right: 0.75rem;
 }

package/lib/index.cjs

@@ -1398,7 +1398,7 @@ function getScrollParent(el) {
 	if (["auto", "scroll"].includes(overflowY) || ["auto", "scroll"].includes(overflow)) return el;
 	return getScrollParent(el.parentElement);
 }
-function computePopupStyle(rect) {
+function computePopupStyle(rect, placement = "auto") {
 	const spaceBelow = window.innerHeight - rect.bottom;
 	const spaceAbove = rect.top;
 	const isNarrow = window.innerWidth < 368;
@@ -1407,17 +1407,23 @@ function computePopupStyle(rect) {
 		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
 		width: isNarrow ? `calc(100vw - 16px)` : void 0
 	};
-	if (spaceAbove > spaceBelow && spaceBelow < CALENDAR_HEIGHT / 3) style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
-	else style.top = rect.bottom + 6;
+	if (placement === "below" ? true : placement === "above" ? false : spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = Math.min(rect.bottom + 6, window.innerHeight - CALENDAR_HEIGHT - 8);
+	else style.top = Math.max(rect.top - CALENDAR_HEIGHT - 6, 8);
 	return style;
 }
-function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required }) {
-	const [isOpen, setIsOpen] = (0, react.useState)(false);
+function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required, dateFormat = "MMM d, yyyy", clearable = false, onOpenChange, placement = "auto", locale, name }) {
+	const [isOpen, setIsOpenState] = (0, react.useState)(false);
 	const [popupStyle, setPopupStyle] = (0, react.useState)({});
 	const wrapperRef = (0, react.useRef)(null);
 	const popoverRef = (0, react.useRef)(null);
 	const inputRef = (0, react.useRef)(null);
 	const internalId = (0, react.useId)();
+	const setIsOpen = (0, react.useCallback)((next) => {
+		setIsOpenState((prev) => {
+			if (prev !== next) onOpenChange?.(next);
+			return next;
+		});
+	}, [onOpenChange]);
 	const ctx = useFieldContext();
 	const inputId = id ?? ctx?.inputId ?? internalId;
 	const resolvedRequired = required ?? ctx?.required ?? false;
@@ -1429,7 +1435,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		const d2 = new Date(value);
 		return isNaN(d2.getTime()) ? void 0 : d2;
 	})() : void 0;
-	const displayValue = selectedDate ? (0, date_fns.format)(selectedDate, "MMM d, yyyy") : "";
+	const displayValue = selectedDate ? (0, date_fns.format)(selectedDate, dateFormat) : "";
 	const skipNextOpen = (0, react.useRef)(false);
 	const openPopup = (0, react.useCallback)(() => {
 		if (disabled) return;
@@ -1441,12 +1447,16 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			if (!wrapperRef.current) return;
 			requestAnimationFrame(() => {
 				if (!wrapperRef.current) return;
-				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect());
+				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
 				setPopupStyle(style);
 				setIsOpen(true);
 			});
 		}, 50);
-	}, [disabled]);
+	}, [
+		disabled,
+		placement,
+		setIsOpen
+	]);
 	(0, react.useEffect)(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1504,6 +1514,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
 				ref: inputRef,
 				id: inputId,
+				name,
 				type: "text",
 				readOnly: true,
 				value: displayValue,
@@ -1521,7 +1532,21 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				"aria-expanded": isOpen,
 				role: "combobox",
 				className: inputClasses
-			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarDays, {
+			}), clearable && value && !disabled ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				"aria-label": "Clear date",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+				onClick: () => {
+					onChange("");
+					setIsOpen(false);
+					inputRef.current?.focus();
+				},
+				className: "absolute right-2.5 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full text-slate-300 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, { size: 14 })
+			}) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.CalendarDays, {
 				size: 16,
 				className: `absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none ${isOpen ? "text-brand-blue" : "text-slate-300"}`,
 				"aria-hidden": "true"
@@ -1546,6 +1571,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				defaultActiveStartDate: selectedDate ?? minDate,
 				minDate,
 				maxDate,
+				locale,
 				defaultView: "month",
 				showNeighboringDecade: true,
 				showNeighboringCentury: true,
@@ -2100,12 +2126,42 @@ var STYLES = {
 	warning: "border-amber-200  bg-amber-50  text-amber-800",
 	info: "border-sky-200    bg-sky-50    text-sky-800"
 };
-function ErrorBanner({ message, tone = "error", className = "" }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+function ErrorBanner({ message, title, tone = "error", className = "", icon, action, onDismiss, dismissLabel = "Dismiss" }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
 		role: tone === "error" ? "alert" : void 0,
 		"aria-live": tone !== "error" ? "polite" : void 0,
-		className: cn("rounded-2xl border px-5 py-4 text-sm font-bold", STYLES[tone], className),
-		children: message
+		className: cn("flex items-start gap-3 rounded-2xl border px-5 py-4 text-sm font-bold", STYLES[tone], className),
+		children: [
+			icon && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+				className: "mt-0.5 shrink-0",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "min-w-0 flex-1",
+				children: [title && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+					className: "mb-0.5",
+					children: title
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
+					className: cn(title && "font-medium"),
+					children: message
+				})]
+			}),
+			action && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: "shrink-0",
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+				type: "button",
+				onClick: onDismiss,
+				className: "shrink-0 rounded-lg p-1 transition-colors hover:bg-black/5",
+				"aria-label": dismissLabel,
+				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(lucide_react.X, {
+					size: 16,
+					"aria-hidden": "true"
+				})
+			})
+		]
 	});
 }
 //#endregion

package/lib/index.mjs

@@ -1374,7 +1374,7 @@ function getScrollParent(el) {
 	if (["auto", "scroll"].includes(overflowY) || ["auto", "scroll"].includes(overflow)) return el;
 	return getScrollParent(el.parentElement);
 }
-function computePopupStyle(rect) {
+function computePopupStyle(rect, placement = "auto") {
 	const spaceBelow = window.innerHeight - rect.bottom;
 	const spaceAbove = rect.top;
 	const isNarrow = window.innerWidth < 368;
@@ -1383,17 +1383,23 @@ function computePopupStyle(rect) {
 		left: isNarrow ? 8 : Math.max(8, Math.min(rect.left, window.innerWidth - POPOVER_WIDTH - 8)),
 		width: isNarrow ? `calc(100vw - 16px)` : void 0
 	};
-	if (spaceAbove > spaceBelow && spaceBelow < CALENDAR_HEIGHT / 3) style.top = Math.max(8, rect.top - CALENDAR_HEIGHT - 6);
-	else style.top = rect.bottom + 6;
+	if (placement === "below" ? true : placement === "above" ? false : spaceBelow >= CALENDAR_HEIGHT || spaceBelow >= spaceAbove) style.top = Math.min(rect.bottom + 6, window.innerHeight - CALENDAR_HEIGHT - 8);
+	else style.top = Math.max(rect.top - CALENDAR_HEIGHT - 6, 8);
 	return style;
 }
-function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required }) {
-	const [isOpen, setIsOpen] = useState(false);
+function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, required, dateFormat = "MMM d, yyyy", clearable = false, onOpenChange, placement = "auto", locale, name }) {
+	const [isOpen, setIsOpenState] = useState(false);
 	const [popupStyle, setPopupStyle] = useState({});
 	const wrapperRef = useRef(null);
 	const popoverRef = useRef(null);
 	const inputRef = useRef(null);
 	const internalId = useId();
+	const setIsOpen = useCallback((next) => {
+		setIsOpenState((prev) => {
+			if (prev !== next) onOpenChange?.(next);
+			return next;
+		});
+	}, [onOpenChange]);
 	const ctx = useFieldContext();
 	const inputId = id ?? ctx?.inputId ?? internalId;
 	const resolvedRequired = required ?? ctx?.required ?? false;
@@ -1405,7 +1411,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 		const d2 = new Date(value);
 		return isNaN(d2.getTime()) ? void 0 : d2;
 	})() : void 0;
-	const displayValue = selectedDate ? format(selectedDate, "MMM d, yyyy") : "";
+	const displayValue = selectedDate ? format(selectedDate, dateFormat) : "";
 	const skipNextOpen = useRef(false);
 	const openPopup = useCallback(() => {
 		if (disabled) return;
@@ -1417,12 +1423,16 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			if (!wrapperRef.current) return;
 			requestAnimationFrame(() => {
 				if (!wrapperRef.current) return;
-				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect());
+				const style = computePopupStyle(wrapperRef.current.getBoundingClientRect(), placement);
 				setPopupStyle(style);
 				setIsOpen(true);
 			});
 		}, 50);
-	}, [disabled]);
+	}, [
+		disabled,
+		placement,
+		setIsOpen
+	]);
 	useEffect(() => {
 		function handleClickOutside(e) {
 			const target = e.target;
@@ -1480,6 +1490,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 			children: [/* @__PURE__ */ jsx("input", {
 				ref: inputRef,
 				id: inputId,
+				name,
 				type: "text",
 				readOnly: true,
 				value: displayValue,
@@ -1497,7 +1508,21 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				"aria-expanded": isOpen,
 				role: "combobox",
 				className: inputClasses
-			}), /* @__PURE__ */ jsx(CalendarDays, {
+			}), clearable && value && !disabled ? /* @__PURE__ */ jsx("button", {
+				type: "button",
+				"aria-label": "Clear date",
+				onMouseDown: (e) => {
+					e.preventDefault();
+					e.stopPropagation();
+				},
+				onClick: () => {
+					onChange("");
+					setIsOpen(false);
+					inputRef.current?.focus();
+				},
+				className: "absolute right-2.5 top-1/2 -translate-y-1/2 flex h-5 w-5 items-center justify-center rounded-full text-slate-300 transition hover:bg-slate-100 hover:text-slate-600 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-blue/30",
+				children: /* @__PURE__ */ jsx(X, { size: 14 })
+			}) : /* @__PURE__ */ jsx(CalendarDays, {
 				size: 16,
 				className: `absolute right-3 top-1/2 -translate-y-1/2 pointer-events-none ${isOpen ? "text-brand-blue" : "text-slate-300"}`,
 				"aria-hidden": "true"
@@ -1522,6 +1547,7 @@ function DatePicker({ value, onChange, placeholder, className, disabled, error,
 				defaultActiveStartDate: selectedDate ?? minDate,
 				minDate,
 				maxDate,
+				locale,
 				defaultView: "month",
 				showNeighboringDecade: true,
 				showNeighboringCentury: true,
@@ -2076,12 +2102,42 @@ var STYLES = {
 	warning: "border-amber-200  bg-amber-50  text-amber-800",
 	info: "border-sky-200    bg-sky-50    text-sky-800"
 };
-function ErrorBanner({ message, tone = "error", className = "" }) {
-	return /* @__PURE__ */ jsx("div", {
+function ErrorBanner({ message, title, tone = "error", className = "", icon, action, onDismiss, dismissLabel = "Dismiss" }) {
+	return /* @__PURE__ */ jsxs("div", {
 		role: tone === "error" ? "alert" : void 0,
 		"aria-live": tone !== "error" ? "polite" : void 0,
-		className: cn("rounded-2xl border px-5 py-4 text-sm font-bold", STYLES[tone], className),
-		children: message
+		className: cn("flex items-start gap-3 rounded-2xl border px-5 py-4 text-sm font-bold", STYLES[tone], className),
+		children: [
+			icon && /* @__PURE__ */ jsx("span", {
+				className: "mt-0.5 shrink-0",
+				"aria-hidden": "true",
+				children: icon
+			}),
+			/* @__PURE__ */ jsxs("div", {
+				className: "min-w-0 flex-1",
+				children: [title && /* @__PURE__ */ jsx("div", {
+					className: "mb-0.5",
+					children: title
+				}), /* @__PURE__ */ jsx("span", {
+					className: cn(title && "font-medium"),
+					children: message
+				})]
+			}),
+			action && /* @__PURE__ */ jsx("div", {
+				className: "shrink-0",
+				children: action
+			}),
+			onDismiss && /* @__PURE__ */ jsx("button", {
+				type: "button",
+				onClick: onDismiss,
+				className: "shrink-0 rounded-lg p-1 transition-colors hover:bg-black/5",
+				"aria-label": dismissLabel,
+				children: /* @__PURE__ */ jsx(X, {
+					size: 16,
+					"aria-hidden": "true"
+				})
+			})
+		]
 	});
 }
 //#endregion

package/lib/types/ui-library/gallery/date-picker/DatePicker.d.ts

@@ -12,6 +12,27 @@ interface DatePickerProps {
     'aria-label'?: string;
     'aria-labelledby'?: string;
     required?: boolean;
+    /**
+     * date-fns format string for the text shown in the trigger.
+     * The committed `onChange` value is always ISO `yyyy-MM-dd` regardless of this.
+     * Default: 'MMM d, yyyy'.
+     */
+    dateFormat?: string;
+    /** Show a clear (×) button that resets the value to '' when a date is set. */
+    clearable?: boolean;
+    /** Notified whenever the calendar popover opens or closes. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Popover placement relative to the trigger.
+     * 'auto' (default) flips above/below based on viewport space;
+     * 'below'/'above' force a side (still clamped to stay on-screen).
+     */
+    placement?: 'auto' | 'below' | 'above';
+    /** BCP-47 locale forwarded to the calendar (e.g. 'en-US', 'fr-FR'). */
+    locale?: string;
+    /** Name forwarded to the trigger input for form association. */
+    name?: string;
 }
-export declare function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, required, }: DatePickerProps): import("react").JSX.Element;
+export declare function computePopupStyle(rect: DOMRect, placement?: 'auto' | 'below' | 'above'): React.CSSProperties;
+export declare function DatePicker({ value, onChange, placeholder, className, disabled, error, minDate, maxDate, id, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, required, dateFormat, clearable, onOpenChange, placement, locale, name, }: DatePickerProps): import("react").JSX.Element;
 export {};

package/lib/types/ui-library/gallery/error-banner/ErrorBanner.d.ts

@@ -16,13 +16,25 @@
  *   <ErrorBanner message="Failed to save changes." />
  *   <ErrorBanner message="Draft saved." tone="info" />
  *   <ErrorBanner message="This action cannot be undone." tone="warning" />
+ *   <ErrorBanner message="Failed to save." onDismiss={clearError} />
+ *   <ErrorBanner title="Upload failed" message="The file was too large." icon={<AlertTriangle size={18} />} action={<Button onClick={retry}>Retry</Button>} />
  */
 import type { ReactNode } from 'react';
 export type ErrorBannerTone = 'error' | 'warning' | 'info';
 export interface ErrorBannerProps {
     /** Primary message text */
     message: ReactNode;
+    /** Optional bold heading rendered above the message. */
+    title?: ReactNode;
     tone?: ErrorBannerTone;
     className?: string;
+    /** Optional leading icon rendered before the text. */
+    icon?: ReactNode;
+    /** Optional trailing action (e.g. a Retry button) rendered before the close button. */
+    action?: ReactNode;
+    /** When provided, renders a close button that invokes this handler. */
+    onDismiss?: () => void;
+    /** Accessible label for the close button. Defaults to "Dismiss". */
+    dismissLabel?: string;
 }
-export declare function ErrorBanner({ message, tone, className }: ErrorBannerProps): import("react").JSX.Element;
+export declare function ErrorBanner({ message, title, tone, className, icon, action, onDismiss, dismissLabel, }: ErrorBannerProps): import("react").JSX.Element;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@diwauhris/ui",
   "private": false,
-  "version": "1.7.22",
+  "version": "1.7.24",
   "type": "module",
   "description": "DIWA UHRIS UI component library — React + Tailwind CSS",
   "keywords": [