@giddaa-housing/ui 3.4.0 → 3.5.0

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 };

package/dist/utils/phone.js

@@ -0,0 +1,93 @@
+import { getCountries, getCountryCallingCode, parsePhoneNumberFromString } from "libphonenumber-js";
+//#region src/utils/phone.ts
+/**
+* Reads a value into a phone number, or `undefined` if it is not one.
+*
+* Deliberately tolerant about its argument: the exported helpers are written
+* to be handed straight to `zod`'s `refine` or `yup`'s `test`, both of which
+* call a validator with a second argument of their own, and to survive the
+* `null` a database hands back.
+*/
+function readPhoneNumber(value, options) {
+	if (typeof value !== "string" || value.trim() === "") return;
+	const country = typeof options === "object" && options !== null && "country" in options ? options.country : void 0;
+	const parsed = parsePhoneNumberFromString(value.trim(), country);
+	return parsed?.isValid() ? parsed : void 0;
+}
+/**
+* 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.
+*/
+function validatePhoneNumber(value, options) {
+	return readPhoneNumber(value, options) !== void 0;
+}
+/**
+* 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");                         // ""
+* ```
+*/
+function parsePhoneNumber(value, options) {
+	return readPhoneNumber(value, options)?.number ?? "";
+}
+/**
+* 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.
+*/
+function formatPhoneNumber(value, options) {
+	const parsed = readPhoneNumber(value, options);
+	if (!parsed) return "";
+	switch (options?.format ?? "international") {
+		case "national": return parsed.formatNational();
+		case "e164": return parsed.number;
+		case "rfc3966": return parsed.getURI();
+		default: return parsed.formatInternational();
+	}
+}
+/** The country a valid number belongs to, or `undefined`. */
+function getPhoneNumberCountry(value, options) {
+	return readPhoneNumber(value, options)?.country;
+}
+/**
+* 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.
+*/
+function getPhoneCountries(locale = "en") {
+	const regionNames = typeof Intl !== "undefined" && "DisplayNames" in Intl ? new Intl.DisplayNames([locale], { type: "region" }) : void 0;
+	return getCountries().map((code) => ({
+		code,
+		name: regionNames?.of(code) ?? code,
+		callingCode: getCountryCallingCode(code)
+	})).sort((a, b) => a.name.localeCompare(b.name, locale));
+}
+//#endregion
+export { formatPhoneNumber, getPhoneCountries, getPhoneNumberCountry, parsePhoneNumber, validatePhoneNumber };

package/dist/utils/use-intersection.d.ts

@@ -0,0 +1,9 @@
+import { RefCallback } from "react";
+//#region src/utils/use-intersection.d.ts
+interface UseIntersectionReturnValue<T> {
+  ref: RefCallback<T | null>;
+  entry: IntersectionObserverEntry | null;
+}
+declare function useIntersection<T extends Element>(options?: IntersectionObserverInit): UseIntersectionReturnValue<T>;
+//#endregion
+export { UseIntersectionReturnValue, useIntersection };

package/dist/utils/use-intersection.js

@@ -0,0 +1,29 @@
+import { useCallback, useRef, useState } from "react";
+//#region src/utils/use-intersection.ts
+function useIntersection(options) {
+	const [entry, setEntry] = useState(null);
+	const observer = useRef(null);
+	return {
+		ref: useCallback((element) => {
+			if (observer.current) {
+				observer.current.disconnect();
+				observer.current = null;
+			}
+			if (element === null) {
+				setEntry(null);
+				return;
+			}
+			if (typeof IntersectionObserver === "undefined") {
+				setEntry(null);
+				return;
+			}
+			observer.current = new IntersectionObserver(([_entry]) => {
+				setEntry(_entry ?? null);
+			}, options);
+			observer.current.observe(element);
+		}, [options]),
+		entry
+	};
+}
+//#endregion
+export { useIntersection };

package/dist/utils/use-is-mobile.d.ts

@@ -0,0 +1,5 @@
+//#region src/utils/use-is-mobile.d.ts
+declare const DEFAULT_MOBILE_BREAKPOINT = 1024;
+declare function useIsMobile(breakpoint?: number): boolean;
+//#endregion
+export { DEFAULT_MOBILE_BREAKPOINT, useIsMobile };

package/dist/utils/use-is-mobile.js

@@ -0,0 +1,16 @@
+import * as React from "react";
+//#region src/utils/use-is-mobile.ts
+const DEFAULT_MOBILE_BREAKPOINT = 1024;
+function useIsMobile(breakpoint = DEFAULT_MOBILE_BREAKPOINT) {
+	const [isMobile, setIsMobile] = React.useState(false);
+	React.useEffect(() => {
+		const mediaQuery = window.matchMedia(`(max-width: ${breakpoint - 1}px)`);
+		const update = () => setIsMobile(window.innerWidth < breakpoint);
+		update();
+		mediaQuery.addEventListener("change", update);
+		return () => mediaQuery.removeEventListener("change", update);
+	}, [breakpoint]);
+	return isMobile;
+}
+//#endregion
+export { DEFAULT_MOBILE_BREAKPOINT, useIsMobile };

package/dist/utils/use-reduced-motion.d.ts

@@ -0,0 +1,5 @@
+//#region src/utils/use-reduced-motion.d.ts
+declare function subscribeToReducedMotion(onChange: (reduced: boolean) => void): () => void;
+declare function useReducedMotion(): boolean;
+//#endregion
+export { subscribeToReducedMotion, useReducedMotion };

package/dist/{use-reduced-motion-BDvOK14x.js → utils/use-reduced-motion.js}

@@ -1,5 +1,5 @@
 import * as React from "react";
-//#region src/lib/use-reduced-motion.ts
+//#region src/utils/use-reduced-motion.ts
 const QUERY = "(prefers-reduced-motion: reduce)";
 function subscribeToReducedMotion(onChange) {
 	const media = window.matchMedia(QUERY);
@@ -14,4 +14,4 @@ function useReducedMotion() {
 	return reduced;
 }
 //#endregion
-export { useReducedMotion as t };
+export { subscribeToReducedMotion, useReducedMotion };

package/dist/utils/use-uncontrolled.d.ts

@@ -0,0 +1,11 @@
+//#region src/utils/use-uncontrolled.d.ts
+interface UseUncontrolledOptions<T> {
+  value?: T;
+  defaultValue?: T;
+  finalValue?: T;
+  onChange?: (value: T, ...payload: unknown[]) => void;
+}
+type UseUncontrolledReturnValue<T> = [T, (value: T, ...payload: unknown[]) => void, boolean];
+declare function useUncontrolled<T>({ value, defaultValue, finalValue, onChange }: UseUncontrolledOptions<T>): UseUncontrolledReturnValue<T>;
+//#endregion
+export { type UseUncontrolledOptions, type UseUncontrolledReturnValue, useUncontrolled };

package/dist/{use-uncontrolled-CLfM1XbB.js → utils/use-uncontrolled.js}

@@ -1,5 +1,5 @@
 import { useState } from "react";
-//#region src/lib/use-uncontrolled.ts
+//#region src/utils/use-uncontrolled.ts
 function useUncontrolled({ value, defaultValue, finalValue, onChange = () => {} }) {
 	const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue !== void 0 ? defaultValue : finalValue);
 	const handleUncontrolledChange = (nextValue, ...payload) => {
@@ -18,4 +18,4 @@ function useUncontrolled({ value, defaultValue, finalValue, onChange = () => {}
 	];
 }
 //#endregion
-export { useUncontrolled as t };
+export { useUncontrolled };

package/dist/video-player-dialog.d.ts

@@ -34,11 +34,21 @@ type VideoPlayerDialogTitleProps = React.ComponentProps<typeof DialogTitle>;
 declare function VideoPlayerDialogTitle({ className, ...props }: VideoPlayerDialogTitleProps): React.JSX.Element;
 type VideoPlayerDialogDescriptionProps = React.ComponentProps<typeof DialogDescription>;
 declare function VideoPlayerDialogDescription({ className, ...props }: VideoPlayerDialogDescriptionProps): React.JSX.Element;
-interface VideoPlayerDialogPlaylistIndicatorProps extends React.ComponentProps<"span"> {
+interface VideoPlayerDialogPlaylistIndicatorProps extends Omit<React.ComponentProps<"button">, "type"> {
   current: number;
   total: number;
 }
-declare function VideoPlayerDialogPlaylistIndicator({ current, total, className, ...props }: VideoPlayerDialogPlaylistIndicatorProps): React.JSX.Element;
+/**
+ * Position in the playlist, and the way down to it. Clicking scrolls the
+ * dialog's surface to the playlist — the count is the only sign the playlist
+ * exists when the media fills the viewport, so it should be the thing that
+ * takes you there.
+ *
+ * A consumer's `onClick` runs first; calling `preventDefault` on the event
+ * keeps the scroll from happening, for a dialog that reveals its playlist some
+ * other way.
+ */
+declare function VideoPlayerDialogPlaylistIndicator({ current, total, className, onClick, ...props }: VideoPlayerDialogPlaylistIndicatorProps): React.JSX.Element;
 type VideoPlayerDialogPlaylistProps = React.ComponentProps<"section">;
 declare function VideoPlayerDialogPlaylist({ className, ...props }: VideoPlayerDialogPlaylistProps): React.JSX.Element;
 type VideoPlayerDialogPlaylistHeaderProps = React.ComponentProps<"h3">;

package/dist/video-player-dialog.js

@@ -1,7 +1,9 @@
 "use client";
-import { ListVideo } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { ChevronDown, ListVideo } from "./icons.js";
+import { cn } from "./utils/cn.js";
+import { useReducedMotion } from "./utils/use-reduced-motion.js";
 import { Dialog, DialogContent, DialogDescription, DialogTitle, DialogTrigger } from "./dialog.js";
+import { Image } from "./image.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
@@ -105,10 +107,42 @@ function VideoPlayerDialogDescription({ className, ...props }) {
 		...props
 	});
 }
-function VideoPlayerDialogPlaylistIndicator({ current, total, className, ...props }) {
-	return /* @__PURE__ */ jsxs("span", {
+/**
+* Brings the playlist into view from the indicator.
+*
+* The playlist is found through the DOM rather than a ref because the two
+* parts sit in unrelated branches of the tree — the indicator is inside the
+* media's controls, the playlist is a sibling of the media — and the search is
+* bounded by the dialog surface, so a second dialog on the page can't be the
+* one that scrolls.
+*/
+function scrollToPlaylist(from, smooth) {
+	(from.closest("[data-slot=video-player-dialog-surface]") ?? document).querySelector("[data-slot=video-player-dialog-playlist]")?.scrollIntoView({
+		behavior: smooth ? "smooth" : "auto",
+		block: "start"
+	});
+}
+/**
+* Position in the playlist, and the way down to it. Clicking scrolls the
+* dialog's surface to the playlist — the count is the only sign the playlist
+* exists when the media fills the viewport, so it should be the thing that
+* takes you there.
+*
+* A consumer's `onClick` runs first; calling `preventDefault` on the event
+* keeps the scroll from happening, for a dialog that reveals its playlist some
+* other way.
+*/
+function VideoPlayerDialogPlaylistIndicator({ current, total, className, onClick, ...props }) {
+	const reducedMotion = useReducedMotion();
+	return /* @__PURE__ */ jsxs("button", {
+		type: "button",
 		"data-slot": "video-player-dialog-playlist-indicator",
-		className: cn("pointer-events-none absolute top-3 right-3 z-20 inline-flex h-9 items-center gap-2 rounded-full bg-black/40 px-3 text-gdt-xs font-bold whitespace-nowrap text-white shadow-[0_0_4px_rgb(0_0_0/0.1)] backdrop-blur-[15px]", className),
+		className: cn("absolute top-3 right-3 z-20 inline-flex h-9 cursor-pointer items-center gap-2 rounded-full bg-black/40 px-3 text-gdt-xs font-bold whitespace-nowrap text-white shadow-[0_0_4px_rgb(0_0_0/0.1)] backdrop-blur-[15px] transition-[background-color,transform] duration-(--duration-motion-press) ease-gdt-out outline-none hover:bg-black/60 focus-visible:shadow-[0px_0px_0px_2px_var(--color-line-focus)] active:scale-[0.97] motion-reduce:active:scale-100", className),
+		onClick: (event) => {
+			onClick?.(event);
+			if (event.defaultPrevented) return;
+			scrollToPlaylist(event.currentTarget, !reducedMotion);
+		},
 		...props,
 		children: [
 			/* @__PURE__ */ jsx(ListVideo, {
@@ -123,13 +157,18 @@ function VideoPlayerDialogPlaylistIndicator({ current, total, className, ...prop
 					total
 				]
 			}),
+			/* @__PURE__ */ jsx(ChevronDown, {
+				"aria-hidden": "true",
+				className: "size-4"
+			}),
 			/* @__PURE__ */ jsxs("span", {
 				className: "sr-only",
 				children: [
 					"Video ",
 					current,
 					" of ",
-					total
+					total,
+					". Go to the playlist."
 				]
 			})
 		]
@@ -168,7 +207,8 @@ function VideoPlayerDialogPlaylistItem({ active = false, index, poster, title, d
 				className: "w-5 shrink-0 text-center text-gdt-xs font-semibold text-fg-caption-placeholder",
 				children: index
 			}) : null,
-			poster ? /* @__PURE__ */ jsx("img", {
+			poster ? /* @__PURE__ */ jsx(Image, {
+				slot: "video-player-dialog-playlist-poster",
 				src: poster,
 				alt: "",
 				className: "aspect-video w-20 shrink-0 rounded-md object-cover"

package/dist/waterfall-chart.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 { ChartCard, ChartContainer, ChartDescription, ChartHeader, ChartTitle, ChartTooltip, ChartTooltipContent } from "./chart.js";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@giddaa-housing/ui",
-  "version": "3.4.0",
+  "version": "3.5.0",
   "description": "Giddaa reusable UI component library.",
   "type": "module",
   "private": false,
@@ -17,6 +17,10 @@
       "types": "./dist/logo.d.ts",
       "import": "./dist/logo.js"
     },
+    "./utils/*": {
+      "types": "./dist/utils/*.d.ts",
+      "import": "./dist/utils/*.js"
+    },
     "./accordion": {
       "types": "./dist/accordion.d.ts",
       "import": "./dist/accordion.js"
@@ -169,6 +173,10 @@
       "types": "./dist/icons.d.ts",
       "import": "./dist/icons.js"
     },
+    "./image": {
+      "types": "./dist/image.d.ts",
+      "import": "./dist/image.js"
+    },
     "./infotip": {
       "types": "./dist/infotip.d.ts",
       "import": "./dist/infotip.js"

package/dist/cn-BI_4DMBf.js

@@ -1,23 +0,0 @@
-import { clsx } from "clsx";
-import { extendTailwindMerge } from "tailwind-merge";
-//#region src/lib/cn.ts
-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 as t };