@giddaa-housing/ui 3.1.0 → 3.3.0

package/dist/editorial-card.js

@@ -1,13 +1,20 @@
 "use client";
+import { ArrowRight, Play, Star } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./avatar.js";
 import { buttonVariants } from "./button.js";
-import { ArrowRight, Play } from "lucide-react";
 import { Fragment, 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";
 //#region src/editorial-card.tsx
+const STAR_INDEXES = [
+	0,
+	1,
+	2,
+	3,
+	4
+];
 const editorialCardVariants = cva("group/editorial-card relative flex w-full min-w-0 flex-col overflow-hidden rounded-2xl border border-line-subtle bg-surface text-fg-primary transition-[background-color,border-color,box-shadow]", {
 	variants: { size: {
 		sm: "gap-2.5 p-4",
@@ -119,6 +126,64 @@ function EditorialCardAttribution({ authorName, brand, className, prefix = "By",
 		state: { slot: "editorial-card-attribution" }
 	});
 }
+function clampRating(rating) {
+	return Math.min(5, Math.max(0, rating));
+}
+function formatRating(rating) {
+	return clampRating(rating).toFixed(1);
+}
+function formatReviewSource({ reviewLabel, source, totalReviews }) {
+	const label = reviewLabel ?? (totalReviews === 1 ? "review" : "reviews");
+	if (source && typeof totalReviews === "number") return /* @__PURE__ */ jsxs(Fragment, { children: [
+		totalReviews.toLocaleString(),
+		" ",
+		source,
+		" ",
+		label
+	] });
+	if (source) return source;
+	if (typeof totalReviews === "number") return `${totalReviews.toLocaleString()} ${label}`;
+	return null;
+}
+function EditorialCardRating({ className, rating, render, reviewLabel, showScore = true, source, totalReviews, ...props }) {
+	const formattedRating = formatRating(rating);
+	const roundedRating = Math.round(clampRating(rating));
+	const reviewSource = formatReviewSource({
+		reviewLabel,
+		source,
+		totalReviews
+	});
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({
+			className: cn("flex min-w-0 flex-wrap items-center gap-gdt-sm text-fg-primary", className),
+			children: /* @__PURE__ */ jsxs(Fragment, { children: [
+				showScore ? /* @__PURE__ */ jsx("span", {
+					className: "font-bold text-gdt-sm group-data-[size=md]/editorial-card:text-gdt-md group-data-[size=lg]/editorial-card:text-gdt-lg",
+					children: formattedRating
+				}) : null,
+				/* @__PURE__ */ jsx("span", {
+					"aria-label": `${formattedRating} out of 5`,
+					className: cn("inline-flex shrink-0 items-center gap-0.5 text-surface-accent", "[&>svg]:size-4 group-data-[size=md]/editorial-card:[&>svg]:size-4.5 group-data-[size=lg]/editorial-card:[&>svg]:size-5"),
+					role: "img",
+					children: STAR_INDEXES.map((index) => /* @__PURE__ */ jsx(Star, {
+						"aria-hidden": "true",
+						fill: index < roundedRating ? "currentColor" : "none"
+					}, index))
+				}),
+				reviewSource ? /* @__PURE__ */ jsx("span", {
+					className: "text-gdt-xs text-fg-secondary group-data-[size=lg]/editorial-card:text-gdt-sm",
+					children: reviewSource
+				}) : null
+			] })
+		}, props),
+		render,
+		state: {
+			rating: formattedRating,
+			slot: "editorial-card-rating"
+		}
+	});
+}
 function EditorialCardExcerpt({ className, render, ...props }) {
 	return useRender({
 		defaultTagName: "p",
@@ -142,4 +207,4 @@ function EditorialCardLink({ className, render, children, ...props }) {
 	});
 }
 //#endregion
-export { EditorialCard, EditorialCardAttribution, EditorialCardCategory, EditorialCardExcerpt, EditorialCardHeader, EditorialCardLink, EditorialCardMedia, EditorialCardMeta, EditorialCardPlayButton, EditorialCardTitle, editorialCardVariants };
+export { EditorialCard, EditorialCardAttribution, EditorialCardCategory, EditorialCardExcerpt, EditorialCardHeader, EditorialCardLink, EditorialCardMedia, EditorialCardMeta, EditorialCardPlayButton, EditorialCardRating, EditorialCardTitle, editorialCardVariants };

package/dist/file-upload.js

@@ -1,7 +1,7 @@
 "use client";
+import { File, X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { CircularProgress, Progress, ProgressValue } from "./progress.js";
-import { File, X } from "lucide-react";
 import { jsx } from "react/jsx-runtime";
 import { createContext, useContext } from "react";
 //#region src/file-upload.tsx

package/dist/filter.js

@@ -1,10 +1,10 @@
 "use client";
+import { Plus, X } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
 import { Field, FieldError } from "./field.js";
-import { Plus, X } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/filter.tsx

package/dist/footer.d.ts

@@ -1,5 +1,6 @@
 import { n as InputSize } from "./input-CfoEJ8A6.js";
 import { useRender } from "@base-ui/react/use-render";
+import { VariantProps } from "class-variance-authority";
 import * as React from "react";
 //#region src/footer.d.ts
 type FooterRootProps = React.ComponentProps<"footer"> & {
@@ -20,10 +21,14 @@ declare function FooterSection({ className, ...props }: React.ComponentProps<"di
 declare function FooterSectionTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
 declare function FooterLinkList({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
 declare function FooterLinkItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
-type FooterLinkProps = useRender.ComponentProps<"a"> & {
+declare const footerLinkVariants: (props?: ({
+  variant?: "brand" | "default" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type FooterLinkVariant = NonNullable<VariantProps<typeof footerLinkVariants>["variant"]>;
+type FooterLinkProps = useRender.ComponentProps<"a"> & VariantProps<typeof footerLinkVariants> & {
   showArrow?: boolean;
 };
-declare function FooterLink({ className, children, render, showArrow, ...props }: FooterLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function FooterLink({ className, children, render, showArrow, variant, ...props }: FooterLinkProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 declare function FooterContactGrid({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FooterContact({ className, ...props }: React.ComponentProps<"address">): React.JSX.Element;
 declare function FooterContactTitle({ className, ...props }: React.ComponentProps<"h3">): React.JSX.Element;
@@ -39,4 +44,4 @@ declare function FooterNewsletterControl({ className, children, size, ...props }
 declare function FooterBottom({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function FooterLegalLinks({ className, ...props }: React.ComponentProps<"nav">): React.JSX.Element;
 //#endregion
-export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, type FooterLinkProps, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, type FooterRootProps, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle };
+export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, type FooterLinkProps, type FooterLinkVariant, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, type FooterRootProps, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle, footerLinkVariants };

package/dist/footer.js

@@ -1,11 +1,12 @@
 "use client";
+import { ChevronRight } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
-import { ChevronRight } from "lucide-react";
 import { Fragment, 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";
 //#region src/footer.tsx
 function FooterRoot({ className, containerClassName, children, ...props }) {
 	return /* @__PURE__ */ jsx("footer", {
@@ -117,18 +118,28 @@ function FooterLinkItem({ className, ...props }) {
 		...props
 	});
 }
-function FooterLink({ className, children, render, showArrow = false, ...props }) {
+const footerLinkVariants = cva("inline-flex items-center gap-gdt-sm underline-offset-4 transition-colors hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2", {
+	variants: { variant: {
+		default: "text-fg-secondary hover:text-fg-brand",
+		brand: "text-fg-brand"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function FooterLink({ className, children, render, showArrow = false, variant = "default", ...props }) {
 	return useRender({
 		defaultTagName: "a",
 		props: mergeProps({
-			className: cn("inline-flex items-center gap-gdt-sm text-fg-secondary underline-offset-4 transition-colors hover:text-fg-brand hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-line-focus focus-visible:ring-offset-2", className),
+			className: cn(footerLinkVariants({ variant }), className),
 			children: /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("span", { children }), showArrow && /* @__PURE__ */ jsx(ChevronRight, {
 				"aria-hidden": "true",
 				className: "size-3.5"
 			})] })
 		}, props),
 		render,
-		state: { slot: "footer-link" }
+		state: {
+			slot: "footer-link",
+			variant
+		}
 	});
 }
 function FooterContactGrid({ className, ...props }) {
@@ -229,4 +240,4 @@ function FooterLegalLinks({ className, ...props }) {
 	});
 }
 //#endregion
-export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle };
+export { FooterBody, FooterBottom, FooterContact, FooterContactGrid, FooterContactTitle, FooterCta, FooterCtaActions, FooterCtaContent, FooterCtaDescription, FooterCtaTitle, FooterDescription, FooterHeader, FooterLegalLinks, FooterLink, FooterLinkItem, FooterLinkList, FooterNav, FooterNewsletter, FooterNewsletterControl, FooterNewsletterDescription, FooterNewsletterTitle, FooterRoot, FooterSection, FooterSectionTitle, FooterSocialItem, FooterSocialLink, FooterSocialList, FooterTitle, footerLinkVariants };

package/dist/icons.d.ts

@@ -0,0 +1,93 @@
+import { ReactElement, ReactNode, SVGProps } from "react";
+//#region src/icons.d.ts
+type IconProps = Omit<SVGProps<SVGSVGElement>, "children"> & {
+  /** Square edge length applied to `width` and `height`. Defaults to `24`. */
+  size?: number | string;
+};
+type IconComponent = (props: IconProps) => ReactElement;
+/**
+ * Bare SVG frame shared by every glyph. Exported so apps can draw a one-off
+ * icon that inherits the same sizing, stroke, and colour behaviour.
+ */
+declare function Icon({ name, size, strokeWidth, children, ...props }: IconProps & {
+  name?: string;
+  children: ReactNode;
+}): import("react").JSX.Element;
+declare function AlignCenter(props: IconProps): import("react").JSX.Element;
+declare function AlignJustify(props: IconProps): import("react").JSX.Element;
+declare function AlignLeft(props: IconProps): import("react").JSX.Element;
+declare function AlignRight(props: IconProps): import("react").JSX.Element;
+declare function ArrowDown(props: IconProps): import("react").JSX.Element;
+declare function ArrowRight(props: IconProps): import("react").JSX.Element;
+declare function ArrowUp(props: IconProps): import("react").JSX.Element;
+declare function ArrowUpRight(props: IconProps): import("react").JSX.Element;
+declare function Baseline(props: IconProps): import("react").JSX.Element;
+declare function Bold(props: IconProps): import("react").JSX.Element;
+declare function Calendar(props: IconProps): import("react").JSX.Element;
+declare function Captions(props: IconProps): import("react").JSX.Element;
+declare function CaptionsOff(props: IconProps): import("react").JSX.Element;
+declare function Check(props: IconProps): import("react").JSX.Element;
+declare function CheckCheck(props: IconProps): import("react").JSX.Element;
+declare function ChevronDown(props: IconProps): import("react").JSX.Element;
+declare function ChevronLeft(props: IconProps): import("react").JSX.Element;
+declare function ChevronRight(props: IconProps): import("react").JSX.Element;
+declare function ChevronUp(props: IconProps): import("react").JSX.Element;
+declare function ChevronsUpDown(props: IconProps): import("react").JSX.Element;
+declare function Clock(props: IconProps): import("react").JSX.Element;
+declare function Code2(props: IconProps): import("react").JSX.Element;
+declare function Eye(props: IconProps): import("react").JSX.Element;
+declare function EyeOff(props: IconProps): import("react").JSX.Element;
+declare function File(props: IconProps): import("react").JSX.Element;
+declare function FileText(props: IconProps): import("react").JSX.Element;
+declare function Fullscreen(props: IconProps): import("react").JSX.Element;
+declare function Image(props: IconProps): import("react").JSX.Element;
+declare function Info(props: IconProps): import("react").JSX.Element;
+declare function Italic(props: IconProps): import("react").JSX.Element;
+declare function Link2(props: IconProps): import("react").JSX.Element;
+declare function List(props: IconProps): import("react").JSX.Element;
+declare function ListOrdered(props: IconProps): import("react").JSX.Element;
+declare function ListVideo(props: IconProps): import("react").JSX.Element;
+declare function Loader(props: IconProps): import("react").JSX.Element;
+declare function Loader2(props: IconProps): import("react").JSX.Element;
+declare function Maximize(props: IconProps): import("react").JSX.Element;
+declare function Maximize2(props: IconProps): import("react").JSX.Element;
+declare function Menu(props: IconProps): import("react").JSX.Element;
+declare function Mic(props: IconProps): import("react").JSX.Element;
+declare function MicOff(props: IconProps): import("react").JSX.Element;
+declare function Minimize(props: IconProps): import("react").JSX.Element;
+declare function Minimize2(props: IconProps): import("react").JSX.Element;
+declare function Minus(props: IconProps): import("react").JSX.Element;
+declare function Monitor(props: IconProps): import("react").JSX.Element;
+declare function Moon(props: IconProps): import("react").JSX.Element;
+declare function MoreHorizontal(props: IconProps): import("react").JSX.Element;
+declare function Pause(props: IconProps): import("react").JSX.Element;
+declare function Phone(props: IconProps): import("react").JSX.Element;
+declare function PictureInPicture2(props: IconProps): import("react").JSX.Element;
+declare function Pin(props: IconProps): import("react").JSX.Element;
+declare function Play(props: IconProps): import("react").JSX.Element;
+declare function Plus(props: IconProps): import("react").JSX.Element;
+declare function Quote(props: IconProps): import("react").JSX.Element;
+declare function Redo2(props: IconProps): import("react").JSX.Element;
+declare function RefreshCcw(props: IconProps): import("react").JSX.Element;
+declare function Repeat2(props: IconProps): import("react").JSX.Element;
+declare function RotateCcw(props: IconProps): import("react").JSX.Element;
+declare function RotateCw(props: IconProps): import("react").JSX.Element;
+declare function Search(props: IconProps): import("react").JSX.Element;
+declare function SearchX(props: IconProps): import("react").JSX.Element;
+declare function Send(props: IconProps): import("react").JSX.Element;
+declare function Settings(props: IconProps): import("react").JSX.Element;
+declare function SlidersHorizontal(props: IconProps): import("react").JSX.Element;
+declare function Star(props: IconProps): import("react").JSX.Element;
+declare function Sun(props: IconProps): import("react").JSX.Element;
+declare function TriangleAlert(props: IconProps): import("react").JSX.Element;
+declare function Underline(props: IconProps): import("react").JSX.Element;
+declare function Undo2(props: IconProps): import("react").JSX.Element;
+declare function UploadCloud(props: IconProps): import("react").JSX.Element;
+declare function User(props: IconProps): import("react").JSX.Element;
+declare function Video(props: IconProps): import("react").JSX.Element;
+declare function Volume1(props: IconProps): import("react").JSX.Element;
+declare function Volume2(props: IconProps): import("react").JSX.Element;
+declare function VolumeX(props: IconProps): import("react").JSX.Element;
+declare function X(props: IconProps): import("react").JSX.Element;
+//#endregion
+export { AlignCenter, AlignJustify, AlignLeft, AlignRight, ArrowDown, ArrowRight, ArrowUp, ArrowUpRight, Baseline, Bold, Calendar, Captions, CaptionsOff, Check, CheckCheck, ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, Clock, Code2, Eye, EyeOff, File, FileText, Fullscreen, Icon, type IconComponent, type IconProps, Image, Info, Italic, Link2, List, ListOrdered, ListVideo, Loader, Loader2, Maximize, Maximize2, Menu, Mic, MicOff, Minimize, Minimize2, Minus, Monitor, Moon, MoreHorizontal, Pause, Phone, PictureInPicture2, Pin, Play, Plus, Quote, Redo2, RefreshCcw, Repeat2, RotateCcw, RotateCw, Search, SearchX, Send, Settings, SlidersHorizontal, Star, Sun, TriangleAlert, Underline, Undo2, UploadCloud, User, Video, Volume1, Volume2, VolumeX, X };