@giddaa-housing/ui 3.4.0 → 3.6.0

package/dist/switch.d.ts

@@ -1,10 +1,10 @@
-import { VariantProps } from "class-variance-authority";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/switch.d.ts
 declare const switchVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-type SwitchSize = NonNullable<VariantProps<typeof switchVariants>["size"]>;
+type SwitchSize = ComponentSizeValue;
 type SwitchProps = Omit<Switch$1.Root.Props, "children"> & {
   loading?: boolean;
   size?: SwitchSize;

package/dist/switch.js

@@ -1,15 +1,16 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { useComponentSize } from "./size-context.js";
+import { cn } from "./utils/cn.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Switch as Switch$1 } from "@base-ui/react/switch";
 //#region src/switch.tsx
-const switchVariants = cva("peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:scale-100 h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem] group-data-[size=sm]/field:h-5 group-data-[size=sm]/field:w-8 group-data-[size=sm]/field:[--switch-spinner-size:0.625rem] group-data-[size=sm]/field:[--switch-thumb-size:14px] group-data-[size=sm]/field:[--switch-track-width:2rem] group-data-[size=md]/field:h-6 group-data-[size=md]/field:w-10 group-data-[size=md]/field:[--switch-spinner-size:0.75rem] group-data-[size=md]/field:[--switch-thumb-size:18px] group-data-[size=md]/field:[--switch-track-width:2.5rem] group-data-[size=lg]/field:h-7 group-data-[size=lg]/field:w-12 group-data-[size=lg]/field:[--switch-spinner-size:0.875rem] group-data-[size=lg]/field:[--switch-thumb-size:22px] group-data-[size=lg]/field:[--switch-track-width:3rem]", { variants: { size: {
+const switchSizeVariants = {
 	sm: "h-5 w-8 [--switch-spinner-size:0.625rem] [--switch-thumb-size:14px] [--switch-track-width:2rem]",
 	md: "h-6 w-10 [--switch-spinner-size:0.75rem] [--switch-thumb-size:18px] [--switch-track-width:2.5rem]",
 	lg: "h-7 w-12 [--switch-spinner-size:0.875rem] [--switch-thumb-size:22px] [--switch-track-width:3rem]"
-} } });
+};
+const switchVariants = cva("peer group/switch relative inline-flex shrink-0 items-center rounded-full border bg-clip-padding p-0.5 transition-[background-color,border-color,box-shadow,opacity,scale] duration-[var(--duration-motion-press)] ease-gdt-out active:scale-[0.97] motion-reduce:active:scale-100 outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-line-focus focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] aria-invalid:border-line-danger aria-invalid:ring-3 aria-invalid:ring-line-danger/20 aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-danger)] data-checked:border-action-primary data-checked:bg-action-primary data-unchecked:border-line data-unchecked:bg-transparent data-[loading=true]:border-action-primary data-[loading=true]:bg-action-primary data-disabled:border-line-subtle! data-disabled:bg-transparent! data-disabled:cursor-not-allowed data-disabled:opacity-60 data-disabled:active:scale-100", { variants: { size: switchSizeVariants } });
 /**
 * Compose with the shared field primitives for label and helper text.
 *
@@ -24,17 +25,17 @@ const switchVariants = cva("peer group/switch relative inline-flex shrink-0 item
 * ```
 */
 function Switch({ className, disabled = false, loading = false, readOnly = false, size, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(size), responsiveSwitchSizes);
 	const isDisabled = disabled;
 	const isReadOnly = readOnly || loading;
 	return /* @__PURE__ */ jsx(Switch$1.Root, {
 		"aria-busy": loading || void 0,
 		"data-slot": "switch",
 		"data-loading": loading,
-		"data-size": resolvedSize,
+		"data-size": resolvedSize.base,
 		disabled: isDisabled,
 		readOnly: isReadOnly,
-		className: cn(switchVariants({ size: resolvedSize }), className),
+		className: cn(switchVariants({ size: null }), resolvedSize.className, className),
 		...props,
 		children: /* @__PURE__ */ jsx(Switch$1.Thumb, {
 			"data-slot": "switch-thumb",
@@ -47,5 +48,18 @@ function Switch({ className, disabled = false, loading = false, readOnly = false
 		})
 	});
 }
+const responsiveSwitchSizes = {
+	base: switchSizeVariants,
+	md: {
+		sm: "md:h-5 md:w-8 md:[--switch-spinner-size:0.625rem] md:[--switch-thumb-size:14px] md:[--switch-track-width:2rem]",
+		md: "md:h-6 md:w-10 md:[--switch-spinner-size:0.75rem] md:[--switch-thumb-size:18px] md:[--switch-track-width:2.5rem]",
+		lg: "md:h-7 md:w-12 md:[--switch-spinner-size:0.875rem] md:[--switch-thumb-size:22px] md:[--switch-track-width:3rem]"
+	},
+	lg: {
+		sm: "lg:h-5 lg:w-8 lg:[--switch-spinner-size:0.625rem] lg:[--switch-thumb-size:14px] lg:[--switch-track-width:2rem]",
+		md: "lg:h-6 lg:w-10 lg:[--switch-spinner-size:0.75rem] lg:[--switch-thumb-size:18px] lg:[--switch-track-width:2.5rem]",
+		lg: "lg:h-7 lg:w-12 lg:[--switch-spinner-size:0.875rem] lg:[--switch-thumb-size:22px] lg:[--switch-track-width:3rem]"
+	}
+};
 //#endregion
 export { Switch, switchVariants };

package/dist/table-card.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";

package/dist/table.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/table.tsx
 function getPinnedDividerClassName(pinnedSide) {

package/dist/tabs.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ComponentPropsWithoutRef } from "react";
 import { Tabs as Tabs$1 } from "@base-ui/react/tabs";
 //#region src/tabs.d.ts

package/dist/tabs.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/tag.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ButtonHTMLAttributes, MouseEvent, ReactNode } from "react";
 //#region src/tag.d.ts
 declare const tagVariants: (props?: ({

package/dist/tag.js

@@ -1,6 +1,6 @@
 "use client";
 import { X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/testimonial-block.js

@@ -1,6 +1,6 @@
 "use client";
 import { ArrowUpRight, Play, Star } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { buttonVariants } from "./button.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/dist/textarea.d.ts

@@ -1,2 +1,18 @@
-import { n as TextareaSize, r as textareaVariants, t as Textarea } from "./textarea-IS_D8pXf.js";
+import { n as ComponentSizeValue } from "./size-context-BVhHduLi.js";
+import * as React from "react";
+//#region src/textarea.d.ts
+declare const textareaSizeVariants: {
+  readonly sm: "min-h-22 px-3 py-2 text-gdt-xs";
+  readonly md: "min-h-26 px-3.5 py-2.5 text-gdt-sm";
+  readonly lg: "min-h-31 px-4 py-3 text-gdt-md";
+};
+declare const textareaVariants: (props?: ({
+  size?: "lg" | "md" | "sm" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TextareaProps = Omit<React.ComponentProps<"textarea">, "size"> & {
+  size?: ComponentSizeValue;
+};
+type TextareaSize = keyof typeof textareaSizeVariants;
+declare function Textarea({ className, size, ...props }: TextareaProps): React.JSX.Element;
+//#endregion
 export { Textarea, type TextareaSize, textareaVariants };

package/dist/textarea.js

@@ -1,25 +1,39 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { useComponentSize } from "./size-context.js";
+import { cn } from "./utils/cn.js";
+import { responsiveValueClasses, useComponentSizeValue } from "./size-context.js";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/textarea.tsx
+const textareaSizeVariants = {
+	sm: "min-h-22 px-3 py-2 text-gdt-xs",
+	md: "min-h-26 px-3.5 py-2.5 text-gdt-sm",
+	lg: "min-h-31 px-4 py-3 text-gdt-md"
+};
 const textareaVariants = cva("flex field-sizing-content w-full min-w-0 resize-y rounded-xl border border-line bg-canvas text-fg-primary transition-[background-color,border-color,box-shadow,color] outline-none placeholder:text-fg-caption-placeholder hover:border-line-strong focus-visible:border-line-focus focus-visible:inset-ring-1 focus-visible:inset-ring-line-focus disabled:pointer-events-none disabled:cursor-not-allowed disabled:border-line-subtle disabled:bg-surface disabled:text-fg-caption-placeholder disabled:placeholder:text-fg-caption-placeholder aria-invalid:border-line-danger aria-invalid:text-fg-danger aria-invalid:placeholder:text-fg-danger aria-invalid:shadow-none aria-invalid:focus-visible:border-line-danger aria-invalid:focus-visible:inset-ring-line-danger", {
-	variants: { size: {
-		sm: "min-h-22 px-3 py-2 text-gdt-xs",
-		md: "min-h-26 px-3.5 py-2.5 text-gdt-sm",
-		lg: "min-h-31 px-4 py-3 text-gdt-md"
-	} },
+	variants: { size: textareaSizeVariants },
 	defaultVariants: { size: "md" }
 });
 function Textarea({ className, size, ...props }) {
-	const resolvedSize = useComponentSize(size);
+	const resolvedSize = responsiveValueClasses(useComponentSizeValue(size), responsiveTextareaSizes);
 	return /* @__PURE__ */ jsx("textarea", {
 		"data-slot": "textarea",
-		"data-size": resolvedSize,
-		className: cn(textareaVariants({ size: resolvedSize }), className),
+		"data-size": resolvedSize.base,
+		className: cn(textareaVariants({ size: null }), resolvedSize.className, className),
 		...props
 	});
 }
+const responsiveTextareaSizes = {
+	base: textareaSizeVariants,
+	md: {
+		sm: "md:min-h-22 md:px-3 md:py-2 md:text-gdt-xs",
+		md: "md:min-h-26 md:px-3.5 md:py-2.5 md:text-gdt-sm",
+		lg: "md:min-h-31 md:px-4 md:py-3 md:text-gdt-md"
+	},
+	lg: {
+		sm: "lg:min-h-22 lg:px-3 lg:py-2 lg:text-gdt-xs",
+		md: "lg:min-h-26 lg:px-3.5 lg:py-2.5 lg:text-gdt-sm",
+		lg: "lg:min-h-31 lg:px-4 lg:py-3 lg:text-gdt-md"
+	}
+};
 //#endregion
 export { Textarea, textareaVariants };

package/dist/theme-switcher.js

@@ -1,6 +1,6 @@
 "use client";
 import { ChevronDown, Monitor, Moon, Sun } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuTrigger } from "./dropdown-menu.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/time-picker.d.ts

@@ -1,16 +1,17 @@
-import { n as InputSize } from "./input-CfoEJ8A6.js";
+import { InputSizeValue } from "./input.js";
+import { t as PickerPlacementProps } from "./picker-j3txxA5t.js";
 import * as React from "react";
 //#region src/time-picker.d.ts
-interface TimePickerProps {
+interface TimePickerProps extends PickerPlacementProps {
   value?: string;
   onChange?: (time: string | undefined) => void;
   format?: "12h" | "24h";
   disabled?: boolean;
   /** Controls the trigger size. The time selection panel is not resized. */
-  size?: InputSize;
+  size?: InputSizeValue;
   placeholder?: string;
   className?: string;
 }
-declare function TimePicker({ value, onChange, format, disabled, size, placeholder, className }: TimePickerProps): React.JSX.Element;
+declare function TimePicker({ value, onChange, format, disabled, size, placeholder, className, ...placement }: TimePickerProps): React.JSX.Element;
 //#endregion
 export { TimePicker, type TimePickerProps };

package/dist/time-picker.js

@@ -1,9 +1,9 @@
 "use client";
 import { Clock } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
-import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
+import { cn } from "./utils/cn.js";
+import { useReducedMotion } from "./utils/use-reduced-motion.js";
 import { Popover, PopoverContent } from "./popover.js";
-import { n as PickerFooter, r as PickerTrigger, t as PICKER_COLLISION_AVOIDANCE } from "./picker-xSTzeYhc.js";
+import { n as PickerTrigger, t as PickerFooter } from "./picker-BTXBrsl4.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/lib/time-picker-paint.ts
@@ -239,7 +239,7 @@ function TimeColumn({ label, items, value, onChange }) {
 		})]
 	});
 }
-function TimePicker({ value, onChange, format = "12h", disabled = false, size, placeholder = "Select time", className }) {
+function TimePicker({ value, onChange, format = "12h", disabled = false, size, placeholder = "Select time", className, ...placement }) {
 	const [open, setOpen] = React.useState(false);
 	const [pending, setPending] = React.useState(() => parseTimeString(value, format));
 	function handleOpenChange(next) {
@@ -273,10 +273,8 @@ function TimePicker({ value, onChange, format = "12h", disabled = false, size, p
 			className
 		}), /* @__PURE__ */ jsxs(PopoverContent, {
 			showArrow: false,
-			align: "center",
-			side: "bottom",
-			collisionAvoidance: PICKER_COLLISION_AVOIDANCE,
 			className: "min-w-(--anchor-width) gap-0 overflow-hidden rounded-2xl p-0 border border-line-subtle",
+			...placement,
 			children: [
 				/* @__PURE__ */ jsx("div", {
 					className: "flex w-full items-center justify-center gap-2 border-b border-line-subtle",

package/dist/toast.js

@@ -1,6 +1,6 @@
 "use client";
 import { Check, Info, X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Button } from "./button.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Toast } from "@base-ui/react/toast";

package/dist/tooltip.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Tooltip as Tooltip$1 } from "@base-ui/react/tooltip";
 //#region src/tooltip.tsx

package/dist/top-navbar.js

@@ -1,6 +1,6 @@
 "use client";
 import { ArrowUpRight, ChevronDown } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { MobileSidebar } from "./mobile-sidebar.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";

package/dist/tree-map.d.ts

@@ -1,4 +1,4 @@
-import { t as ComponentSize } from "./size-context-BX6kAdVj.js";
+import { t as ComponentSize } from "./size-context-BVhHduLi.js";
 import { ChartCard, ChartValueType } from "./chart.js";
 import * as React from "react";
 //#region src/tree-map.d.ts

package/dist/tree-map.js

@@ -1,5 +1,5 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
 import { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartTitle, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/utils/cn.d.ts

@@ -0,0 +1,5 @@
+import { ClassValue } from "clsx";
+//#region src/utils/cn.d.ts
+declare function cn(...inputs: ClassValue[]): string;
+//#endregion
+export { cn };

package/dist/utils/cn.js

@@ -0,0 +1,33 @@
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+//#region src/utils/cn.ts
+/**
+* The class merger every component in this package uses.
+*
+* Published because overriding a component's classes safely means merging them
+* the same way it does. `clsx` alone leaves both `text-gdt-sm` and your
+* `text-gdt-lg` on the element and lets source order decide; a stock
+* `tailwind-merge` does not know the `text-gdt-*` scale is a font size and
+* keeps both for a different reason. This one is configured for the design
+* tokens, so the last class wins the way you meant it to.
+*/
+const twMerge = extendTailwindMerge({ extend: { classGroups: { "font-size": [{ text: [
+	"gdt-display",
+	"gdt-h1",
+	"gdt-h2",
+	"gdt-h3",
+	"gdt-h4",
+	"gdt-h5",
+	"gdt-xl",
+	"gdt-lg",
+	"gdt-md",
+	"gdt-sm",
+	"gdt-xs",
+	"gdt-subtext",
+	"gdt-capitalized"
+] }] } } });
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+//#endregion
+export { cn };

package/dist/utils/format.d.ts

@@ -0,0 +1,45 @@
+//#region src/utils/format.d.ts
+/**
+ * Formatters the components here already use, published because the same
+ * values get written outside a component as often as inside one — a duration
+ * in a table cell, initials on a server-rendered avatar, a date in an export.
+ *
+ * Every one is a pure function with no React and no styling, so a server-only
+ * module can import them.
+ */
+/**
+ * Seconds as a clock: `3723` → `"1:02:03"`, `95` → `"1:35"`. The hours part is
+ * dropped below an hour rather than padded to `0:01:35`, so a short clip does
+ * not read as if it might be long.
+ *
+ * Anything that is not a finite number is `"0:00"` — a media element reports
+ * `NaN` for its duration until it has loaded metadata, and the alternative is
+ * `NaN:NaN` on screen for the first few frames.
+ */
+declare function formatDuration(value: number | undefined): string;
+/**
+ * A date written out in full: `"08 August 2026"`. Day before month, because
+ * the product's audience reads it that way and `"8/8/2026"` is ambiguous
+ * between two conventions where a spelled month is not.
+ */
+declare function formatDate(value: Date, locale?: string): string;
+/**
+ * A time of day, 24-hour: `"14:05"`. A string passes through untouched, so a
+ * caller that already has the wording it wants — `"Yesterday"`, `"just now"` —
+ * can hand it over without this second-guessing it.
+ */
+declare function formatTimestamp(value: Date | string, locale?: string): string;
+/**
+ * A `datetime` attribute's value for a `<time>` element. A `Date` becomes ISO;
+ * a string is assumed to already be in a machine-readable form and passes
+ * through, matching {@link formatTimestamp}.
+ */
+declare function toDateTimeAttribute(value: Date | string): string;
+/**
+ * The first letter of the first two words: `"Daniel Ikoyo"` → `"DI"`. Two and
+ * not three, because a monogram is a fallback for a missing photo and a third
+ * letter starts to compete with the name beside it.
+ */
+declare function getInitials(name: string): string;
+//#endregion
+export { formatDate, formatDuration, formatTimestamp, getInitials, toDateTimeAttribute };

package/dist/utils/format.js

@@ -0,0 +1,70 @@
+//#region src/utils/format.ts
+/**
+* Formatters the components here already use, published because the same
+* values get written outside a component as often as inside one — a duration
+* in a table cell, initials on a server-rendered avatar, a date in an export.
+*
+* Every one is a pure function with no React and no styling, so a server-only
+* module can import them.
+*/
+/**
+* Seconds as a clock: `3723` → `"1:02:03"`, `95` → `"1:35"`. The hours part is
+* dropped below an hour rather than padded to `0:01:35`, so a short clip does
+* not read as if it might be long.
+*
+* Anything that is not a finite number is `"0:00"` — a media element reports
+* `NaN` for its duration until it has loaded metadata, and the alternative is
+* `NaN:NaN` on screen for the first few frames.
+*/
+function formatDuration(value) {
+	if (!Number.isFinite(value)) return "0:00";
+	const safeValue = Math.max(0, Math.floor(value ?? 0));
+	const hours = Math.floor(safeValue / 3600);
+	const minutes = Math.floor(safeValue % 3600 / 60);
+	const seconds = safeValue % 60;
+	if (hours > 0) return `${hours}:${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+	return `${minutes}:${String(seconds).padStart(2, "0")}`;
+}
+/**
+* A date written out in full: `"08 August 2026"`. Day before month, because
+* the product's audience reads it that way and `"8/8/2026"` is ambiguous
+* between two conventions where a spelled month is not.
+*/
+function formatDate(value, locale = "en-GB") {
+	return value.toLocaleDateString(locale, {
+		day: "2-digit",
+		month: "long",
+		year: "numeric"
+	});
+}
+/**
+* A time of day, 24-hour: `"14:05"`. A string passes through untouched, so a
+* caller that already has the wording it wants — `"Yesterday"`, `"just now"` —
+* can hand it over without this second-guessing it.
+*/
+function formatTimestamp(value, locale) {
+	if (typeof value === "string") return value;
+	return value.toLocaleTimeString(locale ? [locale] : [], {
+		hour: "2-digit",
+		minute: "2-digit",
+		hour12: false
+	});
+}
+/**
+* A `datetime` attribute's value for a `<time>` element. A `Date` becomes ISO;
+* a string is assumed to already be in a machine-readable form and passes
+* through, matching {@link formatTimestamp}.
+*/
+function toDateTimeAttribute(value) {
+	return value instanceof Date ? value.toISOString() : value;
+}
+/**
+* The first letter of the first two words: `"Daniel Ikoyo"` → `"DI"`. Two and
+* not three, because a monogram is a fallback for a missing photo and a third
+* letter starts to compete with the name beside it.
+*/
+function getInitials(name) {
+	return name.trim().split(/\s+/).slice(0, 2).map((part) => part[0]?.toUpperCase()).join("");
+}
+//#endregion
+export { formatDate, formatDuration, formatTimestamp, getInitials, toDateTimeAttribute };

package/dist/utils/phone.d.ts

@@ -0,0 +1,98 @@
+import { CountryCode } from "libphonenumber-js";
+//#region src/utils/phone.d.ts
+/**
+ * Phone number helpers, shared by `PhoneInput` and by the forms around it.
+ *
+ * These are here because a phone number is validated in more places than it is
+ * typed — a zod schema, a server action, a CSV import, a table cell — and every
+ * one of those was otherwise reaching for its own regex. They carry no React
+ * and no styling, so a server-only module can import them.
+ *
+ * One rule runs through all of them: **invalid in, empty out**. Anything that
+ * is not a real, dialable number formats and parses to `""` rather than to
+ * `null`, to `undefined`, or to a half-cleaned version of what you passed. A
+ * caller then has one thing to check instead of three.
+ */
+/** How a number should read once it is formatted. */
+type PhoneNumberFormat =
+/** `+234 801 234 5678` — the one to show when the country matters. */
+"international" |
+/** `0801 234 5678` — the one to show to someone in that country. */
+"national" |
+/** `+2348012345678` — the one to store. */
+"e164" |
+/** `tel:+234-801-234-5678` — the one to put in an `href`. */
+"rfc3966";
+interface PhoneNumberOptions {
+  /**
+   * The country to read a number against when it does not carry its own
+   * calling code. `"08012345678"` is a valid Nigerian number and nothing at
+   * all without this; `"+2348012345678"` needs it either way.
+   */
+  country?: CountryCode;
+}
+/**
+ * Whether a value is a phone number that could actually be dialed. Stricter
+ * than "has the right number of digits" — it checks the number against the
+ * ranges its country has assigned.
+ *
+ * Written to be passed by reference to a schema:
+ *
+ * ```ts
+ * z.string().refine(validatePhoneNumber, "Enter a valid phone number");
+ * yup.string().test("phone", "Enter a valid phone number", validatePhoneNumber);
+ * ```
+ *
+ * Empty and `null` are invalid. Mark the field optional in the schema rather
+ * than asking this to have an opinion about whether a missing number is a
+ * problem, which is the schema's business and not this function's.
+ */
+declare function validatePhoneNumber(value: unknown, options?: PhoneNumberOptions): boolean;
+/**
+ * The E.164 form of a valid number — `+2348012345678`, the one to store — or
+ * `""` if the value is not a valid number.
+ *
+ * ```ts
+ * parsePhoneNumber("0801 234 5678", { country: "NG" }); // "+2348012345678"
+ * parsePhoneNumber("0801 234");                         // ""
+ * ```
+ */
+declare function parsePhoneNumber(value: unknown, options?: PhoneNumberOptions): string;
+/**
+ * A valid number written for a reader, or `""` if the value is not a valid
+ * number. Defaults to `international`, which is the form that does not depend
+ * on knowing where the reader is.
+ *
+ * ```ts
+ * formatPhoneNumber("+2348012345678");                       // "+234 801 234 5678"
+ * formatPhoneNumber("+2348012345678", { format: "national" }); // "0801 234 5678"
+ * ```
+ *
+ * Blanking an invalid number is the point rather than an oversight: a value
+ * that cannot be formatted is a value that should be fixed, and showing a
+ * half-formatted one hides that.
+ */
+declare function formatPhoneNumber(value: unknown, options?: PhoneNumberOptions & {
+  format?: PhoneNumberFormat;
+}): string;
+/** The country a valid number belongs to, or `undefined`. */
+declare function getPhoneNumberCountry(value: unknown, options?: PhoneNumberOptions): CountryCode | undefined;
+interface PhoneCountry {
+  /** ISO 3166-1 alpha-2, e.g. `"NG"`. */
+  code: CountryCode;
+  /** Localised display name, falling back to the code where `Intl` is absent. */
+  name: string;
+  /** Calling code without the `+`, e.g. `"234"`. */
+  callingCode: string;
+}
+/**
+ * Every country a number can be entered for, sorted by name in `locale`.
+ *
+ * `PhoneInput` builds its own list from this. It is exported because the
+ * country a phone number belongs to tends to be asked for elsewhere in the
+ * same form — an address, a nationality — and a second, differently-sorted
+ * list of countries in one form is a bug people notice.
+ */
+declare function getPhoneCountries(locale?: string): PhoneCountry[];
+//#endregion
+export { type CountryCode, type PhoneCountry, type PhoneNumberFormat, type PhoneNumberOptions, formatPhoneNumber, getPhoneCountries, getPhoneNumberCountry, parsePhoneNumber, validatePhoneNumber };