@giddaa-housing/ui 3.1.0 → 3.2.0

package/css/giddaa.css

@@ -144,7 +144,10 @@
 	--color-action-danger: var(--color-clay-500);
 	--color-action-danger-hover: var(--color-clay-600);
 	--color-action-danger-pressed: var(--color-clay-700);
-	--color-whatsapp-button: #00d158;
+	--color-whatsapp-green: #00d158;
+	/* Deprecated alias for --color-whatsapp-green. Kept so `bg-whatsapp-button`
+	   keeps resolving for consumers on 3.x; remove in the next major. */
+	--color-whatsapp-button: var(--color-whatsapp-green);
 
 	--color-status-success: var(--color-forest-500);
 	--color-status-warning: var(--color-brass-400);
@@ -324,7 +327,10 @@
 	--color-action-danger: var(--color-clay-500);
 	--color-action-danger-hover: var(--color-clay-600);
 	--color-action-danger-pressed: var(--color-clay-700);
-	--color-whatsapp-button: #00d158;
+	--color-whatsapp-green: #00d158;
+	/* Deprecated alias for --color-whatsapp-green. Kept so `bg-whatsapp-button`
+	   keeps resolving for consumers on 3.x; remove in the next major. */
+	--color-whatsapp-button: var(--color-whatsapp-green);
 
 	--color-status-success: var(--color-forest-500);
 	--color-status-warning: var(--color-brass-400);
@@ -479,7 +485,10 @@
 	--color-action-danger: var(--color-clay-400);
 	--color-action-danger-hover: var(--color-clay-500);
 	--color-action-danger-pressed: var(--color-clay-600);
-	--color-whatsapp-button: #00d158;
+	--color-whatsapp-green: #00d158;
+	/* Deprecated alias for --color-whatsapp-green. Kept so `bg-whatsapp-button`
+	   keeps resolving for consumers on 3.x; remove in the next major. */
+	--color-whatsapp-button: var(--color-whatsapp-green);
 
 	--color-status-success: var(--color-forest-dark-300);
 	--color-status-warning: var(--color-brass-200);

package/css/theme.css

@@ -115,7 +115,10 @@
 	--color-action-danger: #ef4444;
 	--color-action-danger-hover: #dc2626;
 	--color-action-danger-pressed: #b91c1c;
-	--color-whatsapp-button: #00d158;
+	--color-whatsapp-green: #00d158;
+	/* Deprecated alias for --color-whatsapp-green. Kept so `bg-whatsapp-button`
+	   keeps resolving for consumers on 3.x; remove in the next major. */
+	--color-whatsapp-button: var(--color-whatsapp-green);
 
 	--color-status-success: #16a34a;
 	--color-status-warning: #d97706;

package/dist/accordion.js

@@ -1,6 +1,6 @@
+import { ChevronRight } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Accordion as Accordion$1 } from "@base-ui/react/accordion";
-import { ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/accordion.tsx
 function Accordion({ className, variant = "surface", ...props }) {
@@ -26,7 +26,7 @@ function AccordionTrigger({ className, children, ...props }) {
 			"data-slot": "accordion-trigger",
 			className: cn("group/accordion-trigger flex w-full items-center gap-3 px-4 sm:px-5 py-5.5 aria-expanded:pb-2 text-left text-gdt-md font-semibold text-fg-primary outline-none transition-[padding] aria-disabled:pointer-events-none aria-disabled:opacity-50", className),
 			...props,
-			children: [/* @__PURE__ */ jsx(ChevronRightIcon, {
+			children: [/* @__PURE__ */ jsx(ChevronRight, {
 				"data-slot": "accordion-trigger-icon",
 				className: "pointer-events-none size-5 shrink-0 text-fg-primary transition-[rotate] duration-200 ease-out motion-reduce:transition-none group-aria-expanded/accordion-trigger:rotate-90"
 			}), children]

package/dist/activity-timeline.js

@@ -1,8 +1,8 @@
 "use client";
+import { ChevronRight } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { Badge } from "./badge.js";
-import { ChevronRightIcon } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 //#region src/activity-timeline.tsx
 function ActivityTimeline({ className, ...props }) {
@@ -82,7 +82,7 @@ function ActivityTimelineBadge({ className, icon, children, variant = "default",
 		children: [/* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "inline-flex shrink-0 items-center [&>svg]:size-3.5",
-			children: icon ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" })
+			children: icon ?? /* @__PURE__ */ jsx(ChevronRight, { className: "cn-rtl-flip" })
 		}), children]
 	});
 }

package/dist/alert.js

@@ -1,5 +1,5 @@
+import { X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { X } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/alert.tsx

package/dist/breadcrumb.js

@@ -1,6 +1,6 @@
 "use client";
+import { ChevronRight, MoreHorizontal } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -50,7 +50,7 @@ function BreadcrumbSeparator({ children, className, ...props }) {
 		"aria-hidden": "true",
 		className: cn("inline-flex shrink-0 items-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0", className),
 		...props,
-		children: children ?? /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" })
+		children: children ?? /* @__PURE__ */ jsx(ChevronRight, { className: "cn-rtl-flip" })
 	});
 }
 function BreadcrumbEllipsis({ className, ...props }) {
@@ -60,7 +60,7 @@ function BreadcrumbEllipsis({ className, ...props }) {
 		"aria-hidden": "true",
 		className: cn("inline-flex items-center justify-center text-fg-caption-placeholder [&>svg]:size-4 [&>svg]:shrink-0", className),
 		...props,
-		children: [/* @__PURE__ */ jsx(MoreHorizontalIcon, {}), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(MoreHorizontal, {}), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "More"
 		})]

package/dist/button.js

@@ -1,7 +1,7 @@
 "use client";
+import { Loader } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { useComponentSize } from "./size-context.js";
-import { Loader } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { mergeProps } from "@base-ui/react/merge-props";
 import { useRender } from "@base-ui/react/use-render";
@@ -20,7 +20,7 @@ const buttonVariants = cva("group/button inline-flex shrink-0 items-center justi
 			"tertiary-outline": "border border-line-strong bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
 			ghost: "bg-transparent text-fg-primary hover:bg-surface active:bg-surface-raised data-focused:bg-surface data-pressed:bg-surface-raised",
 			danger: "bg-action-danger text-fg-on-brand hover:bg-action-danger-hover active:bg-action-danger-pressed data-focused:bg-action-danger-hover data-pressed:bg-action-danger-pressed",
-			whatsapp: "bg-whatsapp-button text-black [&_svg]:text-white hover:brightness-95 active:brightness-90 data-focused:brightness-95 data-pressed:brightness-90",
+			whatsapp: "bg-whatsapp-green text-black [&_svg]:text-white hover:brightness-95 active:brightness-90 data-focused:brightness-95 data-pressed:brightness-90",
 			"glass-overlay": "bg-surface-glass-overlay-button text-fg-on-brand shadow-2 backdrop-blur-sm active:scale-[0.97] motion-reduce:active:scale-100",
 			"link-brand": "border-transparent bg-transparent px-0 text-fg-brand hover:underline active:underline active:opacity-70",
 			"link-neutral": "border-transparent bg-transparent px-0 text-fg-secondary hover:underline active:underline active:opacity-70"

package/dist/calendar.js

@@ -1,8 +1,8 @@
 "use client";
+import { ChevronLeft, ChevronRight } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Button } from "./button.js";
 import { Combobox, ComboboxContent, ComboboxEmpty, ComboboxInput, ComboboxItem, ComboboxList, ComboboxTrigger, ComboboxValue } from "./combobox.js";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DayPicker, getDefaultClassNames } from "react-day-picker";
@@ -52,11 +52,11 @@ function Calendar({ className, classNames, showOutsideDays = false, weekStartsOn
 				});
 			},
 			Chevron: ({ className, orientation, ...props }) => {
-				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRightIcon, {
+				if (orientation === "right") return /* @__PURE__ */ jsx(ChevronRight, {
 					className: cn("size-4", className),
 					...props
 				});
-				return /* @__PURE__ */ jsx(ChevronLeftIcon, {
+				return /* @__PURE__ */ jsx(ChevronLeft, {
 					className: cn("size-4", className),
 					...props
 				});

package/dist/call-card.js

@@ -1,7 +1,7 @@
 "use client";
+import { Maximize2, Mic, MicOff, Minimize2, Phone, User } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
-import { Maximize2, Mic, MicOff, Minimize2, Phone, User } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";

package/dist/carousel.js

@@ -1,8 +1,8 @@
 "use client";
+import { ChevronLeft, ChevronRight } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { useComponentSize } from "./size-context.js";
 import { t as useReducedMotion } from "./use-reduced-motion-BDvOK14x.js";
-import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
@@ -201,7 +201,7 @@ function CarouselPrevious({ className, ...props }) {
 		disabled: !canScrollPrev,
 		onClick: scrollPrev,
 		...props,
-		children: [/* @__PURE__ */ jsx(ChevronLeftIcon, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(ChevronLeft, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Previous slide"
 		})]
@@ -219,7 +219,7 @@ function CarouselNext({ className, ...props }) {
 		disabled: !canScrollNext,
 		onClick: scrollNext,
 		...props,
-		children: [/* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
+		children: [/* @__PURE__ */ jsx(ChevronRight, { className: "cn-rtl-flip" }), /* @__PURE__ */ jsx("span", {
 			className: "sr-only",
 			children: "Next slide"
 		})]

package/dist/chart.js

@@ -1,7 +1,7 @@
 "use client";
+import { ArrowDown, ArrowUp } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
-import { ArrowDown, ArrowUp } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";

package/dist/chat.js

@@ -1,9 +1,9 @@
 "use client";
+import { FileText, Image, Plus, Send, Video } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
-import { FileText, Image, Plus, Send, Video } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/chat.tsx

package/dist/checkbox.js

@@ -1,7 +1,7 @@
 "use client";
+import { Check } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { useComponentSize } from "./size-context.js";
-import { CheckIcon } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Checkbox as Checkbox$1 } from "@base-ui/react/checkbox";
@@ -79,7 +79,7 @@ function Checkbox({ className, size, ...props }) {
 		children: /* @__PURE__ */ jsx(Checkbox$1.Indicator, {
 			"data-slot": "checkbox-indicator",
 			className: "grid place-content-center text-current transition-none [&>svg]:size-(--checkbox-icon-size)",
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
+			children: /* @__PURE__ */ jsx(Check, {})
 		})
 	});
 }

package/dist/combobox.js

@@ -1,9 +1,9 @@
 "use client";
+import { Check, ChevronDown, X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
 import { Button } from "./button.js";
 import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput } from "./input-group.js";
-import { CheckIcon, ChevronDownIcon, XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import * as React from "react";
@@ -85,7 +85,7 @@ function ComboboxTrigger({ className, children, ...props }) {
 		"data-size": resolvedSize,
 		className: cn(comboboxTriggerVariants({ size: resolvedSize }), className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(Combobox$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDownIcon, { className: "text-line-strong transition-transform group-data-disabled/combobox-trigger:text-fg-caption-placeholder group-data-popup-open/combobox-trigger:rotate-180" }) })]
+		children: [children, /* @__PURE__ */ jsx(Combobox$1.Icon, { render: /* @__PURE__ */ jsx(ChevronDown, { className: "text-line-strong transition-transform group-data-disabled/combobox-trigger:text-fg-caption-placeholder group-data-popup-open/combobox-trigger:rotate-180" }) })]
 	});
 }
 function ComboboxClear({ className, ...props }) {
@@ -96,7 +96,7 @@ function ComboboxClear({ className, ...props }) {
 		render: /* @__PURE__ */ jsx(InputGroupButton, {
 			variant: "ghost",
 			size: "icon-xs",
-			children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+			children: /* @__PURE__ */ jsx(X, { className: "pointer-events-none" })
 		})
 	});
 }
@@ -158,9 +158,9 @@ function ComboboxItem({ className, children, ...props }) {
 		children: [multiple ? /* @__PURE__ */ jsx(Combobox$1.ItemIndicator, {
 			keepMounted: true,
 			className: "flex size-5 shrink-0 items-center justify-center rounded-sm border border-line bg-canvas text-transparent transition-[background-color,border-color,color] group-data-selected/combobox-item:border-action-primary group-data-selected/combobox-item:bg-action-primary group-data-selected/combobox-item:text-fg-on-brand group-data-disabled/combobox-item:border-line-subtle group-data-disabled/combobox-item:bg-surface group-data-disabled/combobox-item:text-fg-caption-placeholder [&>svg]:size-3",
-			children: /* @__PURE__ */ jsx(CheckIcon, {})
+			children: /* @__PURE__ */ jsx(Check, {})
 		}) : null, /* @__PURE__ */ jsx("span", {
-			className: "flex min-w-0 flex-1 shrink-0 gap-2 whitespace-nowrap",
+			className: "flex min-w-0 flex-1 shrink-0 items-center gap-2",
 			children
 		})]
 	});
@@ -219,7 +219,7 @@ function ComboboxChip({ className, children, showRemove = true, ...props }) {
 			render: /* @__PURE__ */ jsx(Button, {
 				variant: "ghost",
 				size: "icon-xs",
-				children: /* @__PURE__ */ jsx(XIcon, { className: "pointer-events-none" })
+				children: /* @__PURE__ */ jsx(X, { className: "pointer-events-none" })
 			})
 		})]
 	});

package/dist/cta.js

@@ -59,9 +59,9 @@ function CTAContent({ className, render, ...props }) {
 function CTATag({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "span",
-		props: mergeProps({ className: cn("text-fg-brand text-gdt-capitalized uppercase font-semibold", className) }, props),
+		props: mergeProps({ className: cn("text-fg-brand text-gdt-capitalized uppercase font-semibold", "group-data-[variant=brand]/cta-card:text-fg-on-brand", className) }, props),
 		render,
-		state: { slot: "cta-title" }
+		state: { slot: "cta-tag" }
 	});
 }
 function CTATitle({ className, render, ...props }) {
@@ -130,7 +130,7 @@ function CTAListItem({ children, className, icon, render, ...props }) {
 function CTACard({ className, render, variant = "default", ...props }) {
 	return useRender({
 		defaultTagName: "div",
-		props: mergeProps({ className: cn("group/cta-card min-w-0 flex flex-col gap-3.5  py-6.5 px-6 rounded-2xl text", { "bg-canvas border shadow-1": variant === "default" }, { "bg-surface-brand shadow-2": variant === "brand" }) }, props),
+		props: mergeProps({ className: cn("group/cta-card min-w-0 flex flex-col gap-3.5  py-6.5 px-6 rounded-2xl text", { "bg-canvas border border-line shadow-1": variant === "default" }, { "bg-surface-brand shadow-2": variant === "brand" }) }, props),
 		render,
 		state: {
 			slot: "cta-card",

package/dist/currency-selector.d.ts

@@ -1,15 +1,17 @@
 import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/currency-selector.d.ts
-type CurrencyFlagStripe = {
-  color: string;
-  size?: number;
-};
 type CurrencySelectorOption = {
   code: string;
   label: string;
+  /**
+   * ISO 3166-1 alpha-2 code used to pick the flag. Defaults to the first two
+   * letters of `code`, which is how ISO 4217 currency codes are built —
+   * `NGN` → `NG`, `USD` → `US`, `EUR` → `EU`.
+   */
   countryCode?: string;
-  flag?: readonly CurrencyFlagStripe[];
+  /** Custom artwork, for a currency the built-in flag set does not cover. */
+  flag?: React.ReactNode;
 };
 type CurrencySelectorSize = NonNullable<VariantProps<typeof currencySelectorTriggerVariants>["size"]>;
 type CurrencySelectorProps = Omit<React.ComponentProps<"button">, "children" | "defaultValue" | "onChange" | "value"> & {
@@ -31,11 +33,11 @@ declare const currencySelectorTriggerVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
   withBackground?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-declare function CurrencyFlag({ flag, label, className }: {
-  flag?: readonly CurrencyFlagStripe[];
+declare function CurrencyFlag({ countryCode, label, className }: {
+  countryCode?: string;
   label?: string;
   className?: string;
 }): React.JSX.Element;
 declare function CurrencySelector({ options, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, size, withBackground, showFlag, showOptionFlags, contentClassName, className, placeholder, type, ...props }: CurrencySelectorProps): React.JSX.Element;
 //#endregion
-export { CurrencyFlag, type CurrencyFlagStripe, CurrencySelector, type CurrencySelectorOption, type CurrencySelectorProps, type CurrencySelectorSize, currencySelectorTriggerVariants };
+export { CurrencyFlag, CurrencySelector, type CurrencySelectorOption, type CurrencySelectorProps, type CurrencySelectorSize, currencySelectorTriggerVariants };