@giddaa-housing/ui 3.4.0 → 3.5.0

package/dist/radio-group.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 { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/review-block.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/rich-text-editor.js

@@ -1,6 +1,6 @@
 "use client";
 import { AlignCenter, AlignJustify, AlignLeft, AlignRight, Baseline, Bold, ChevronDown, Code2, Image as Image$1, Italic, Link2, List, ListOrdered, Quote, Redo2, Underline, Undo2 } 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 { Button } from "./button.js";
 import { Input } from "./input.js";

package/dist/scatter-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 { ChartContainer, cartesianAxisProps } from "./chart.js";
 import { jsx, jsxs } from "react/jsx-runtime";

package/dist/scroll-spy.js

@@ -1,8 +1,8 @@
 "use client";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { useComponentSize } from "./size-context.js";
-import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
-import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { useReducedMotion } from "./utils/use-reduced-motion.js";
+import { useUncontrolled } from "./utils/use-uncontrolled.js";
 import { resolveTabsListVariant, tabsIndicatorClassName, tabsListVariants, tabsTriggerClassName } from "./tabs.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";

package/dist/search-input.js

@@ -1,6 +1,6 @@
 "use client";
 import { Search, X } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";

package/dist/select.js

@@ -1,6 +1,6 @@
 "use client";
 import { Check, ChevronDown, ChevronUp } from "./icons.js";
-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/separator.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";
 import { Separator as Separator$1 } from "@base-ui/react/separator";
 //#region src/separator.tsx

package/dist/sheet.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 { SizeProvider } from "./size-context.js";
 import { Button } from "./button.js";
 import { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";

package/dist/sidebar.js

@@ -1,32 +1,19 @@
 "use client";
 import { Menu } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { Separator } from "./separator.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
-import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
+import { useUncontrolled } from "./utils/use-uncontrolled.js";
 import { Skeleton } from "./skeleton.js";
 import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
 import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "./sheet.js";
+import { useIsMobile } from "./utils/use-is-mobile.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
 import * as React from "react";
-//#region src/lib/use-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
 //#region src/sidebar.tsx
 const SIDEBAR_LS_KEY = "sidebar_state";
 const SIDEBAR_WIDTH = "17.5rem";

package/dist/skeleton.js

@@ -1,4 +1,4 @@
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx } from "react/jsx-runtime";
 //#region src/skeleton.tsx
 function Skeleton({ className, ...props }) {

package/dist/slider.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 } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

package/dist/sonar.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 { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

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

package/dist/stepper.js

@@ -1,6 +1,6 @@
 "use client";
 import { Check } from "./icons.js";
-import { t as cn } from "./cn-BI_4DMBf.js";
+import { cn } from "./utils/cn.js";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";

package/dist/styles.css

@@ -480,6 +480,15 @@
   .bottom-16 {
     bottom: calc(var(--spacing) * 16);
   }
+  .bottom-20 {
+    bottom: calc(var(--spacing) * 20);
+  }
+  .bottom-24 {
+    bottom: calc(var(--spacing) * 24);
+  }
+  .bottom-28 {
+    bottom: calc(var(--spacing) * 28);
+  }
   .bottom-\[18px\] {
     bottom: 18px;
   }
@@ -6463,6 +6472,16 @@
       }
     }
   }
+  .hover\:bg-black\/60 {
+    &:hover {
+      @media (hover: hover) {
+        background-color: color-mix(in srgb, #000 60%, transparent);
+        @supports (color: color-mix(in lab, red, red)) {
+          background-color: color-mix(in oklab, var(--color-black) 60%, transparent);
+        }
+      }
+    }
+  }
   .hover\:bg-black\/80 {
     &:hover {
       @media (hover: hover) {
@@ -7159,9 +7178,19 @@
       border-radius: var(--radius-xl);
     }
   }
-  .has-data-\[slot\=combobox-chip\]\:px-1 {
+  .has-data-\[slot\=combobox-chip\]\:px-1\.5 {
     &:has(*[data-slot="combobox-chip"]) {
-      padding-inline: var(--spacing);
+      padding-inline: calc(var(--spacing) * 1.5);
+    }
+  }
+  .has-data-\[slot\=combobox-chip\]\:px-2 {
+    &:has(*[data-slot="combobox-chip"]) {
+      padding-inline: calc(var(--spacing) * 2);
+    }
+  }
+  .has-data-\[slot\=combobox-chip\]\:px-2\.5 {
+    &:has(*[data-slot="combobox-chip"]) {
+      padding-inline: calc(var(--spacing) * 2.5);
     }
   }
   .has-data-\[slot\=combobox-chip-remove\]\:pr-0 {
@@ -8342,6 +8371,11 @@
       box-shadow: var(--tw-inset-shadow), var(--tw-inset-ring-shadow), var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow);
     }
   }
+  .data-\[grown\=true\]\:rounded-2xl {
+    &[data-grown="true"] {
+      border-radius: var(--radius-2xl);
+    }
+  }
   .data-\[interactive\=true\]\:cursor-pointer {
     &[data-interactive="true"] {
       cursor: pointer;
@@ -11240,6 +11274,12 @@
       pointer-events: none;
     }
   }
+  .\[\&_svg\]\:size-3 {
+    & svg {
+      width: calc(var(--spacing) * 3);
+      height: calc(var(--spacing) * 3);
+    }
+  }
   .\[\&_svg\]\:size-3\.5 {
     & svg {
       width: calc(var(--spacing) * 3.5);

package/dist/switch.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 { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

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.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.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.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 { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";

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,7 +1,8 @@
 import { n as InputSize } from "./input-CfoEJ8A6.js";
+import { t as PickerPlacementProps } from "./picker-CsnHtbe4.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";
@@ -11,6 +12,6 @@ interface TimePickerProps {
   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-DmIiQKLJ.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.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 };