@giddaa-housing/ui 3.1.0 → 3.3.0

package/dist/currency-selector.js

@@ -1,17 +1,235 @@
 "use client";
+import { Check } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { t as useUncontrolled } from "./use-uncontrolled-CLfM1XbB.js";
 import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from "./select.js";
-import { CheckIcon } from "lucide-react";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
+//#region src/lib/country-flags.tsx
+/**
+* Hand-drawn flags for the currencies the design system ships with. They are
+* simplified for a 24×16 pill — recognisable at icon size rather than exact
+* heraldry — and inlined so no icon or flag package is needed at runtime.
+*
+* Every flag draws into a `0 0 24 16` viewBox. Add a country by dropping a new
+* entry into `COUNTRY_FLAGS`, keyed by its ISO 3166-1 alpha-2 code.
+*/
+/** Points of a five-pointed star, so the EU/US/Ghana stars stay real stars. */
+function starPath(cx, cy, radius) {
+	return `M${Array.from({ length: 10 }, (_, index) => {
+		const distance = index % 2 === 0 ? radius : radius * .382;
+		const angle = index * Math.PI / 5 - Math.PI / 2;
+		return `${(cx + Math.cos(angle) * distance).toFixed(2)} ${(cy + Math.sin(angle) * distance).toFixed(2)}`;
+	}).join("L")}Z`;
+}
+const US_STRIPE_HEIGHT = 16 / 13;
+const US_STRIPES = Array.from({ length: 7 }, (_, index) => index * 2 * US_STRIPE_HEIGHT);
+const US_STARS = Array.from({ length: 9 }, (_, index) => ({
+	x: 2.2 + index % 3 * 2.6,
+	y: 2 + Math.floor(index / 3) * 2.3
+}));
+const EU_STARS = Array.from({ length: 12 }, (_, index) => {
+	const angle = index * Math.PI / 6 - Math.PI / 2;
+	return {
+		x: 12 + Math.cos(angle) * 5,
+		y: 8 + Math.sin(angle) * 5
+	};
+});
+const MAPLE_LEAF = "M12 3.45L12.71 5.25L14.23 4.83L13.85 6.54L16.09 6.96L15.52 7.68L15.94 9.05L13.95 8.72L13.76 9.67L12.59 9.01L12.9 12.19L11.1 12.19L11.41 9.01L10.24 9.67L10.05 8.72L8.06 9.05L8.48 7.68L7.92 6.96L10.15 6.54L9.77 4.83L11.29 5.25Z";
+const COUNTRY_FLAGS = {
+	/** Nigeria */
+	NG: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "16",
+			fill: "#ffffff"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: "8",
+			height: "16",
+			fill: "#008751"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "16",
+			width: "8",
+			height: "16",
+			fill: "#008751"
+		})
+	] }),
+	/** United States */
+	US: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "16",
+			fill: "#ffffff"
+		}),
+		US_STRIPES.map((y) => /* @__PURE__ */ jsx("rect", {
+			y,
+			width: "24",
+			height: US_STRIPE_HEIGHT,
+			fill: "#b22234"
+		}, y)),
+		/* @__PURE__ */ jsx("rect", {
+			width: "9.6",
+			height: US_STRIPE_HEIGHT * 7,
+			fill: "#3c3b6e"
+		}),
+		US_STARS.map((star) => /* @__PURE__ */ jsx("path", {
+			d: starPath(star.x, star.y, .85),
+			fill: "#ffffff"
+		}, `${star.x}-${star.y}`))
+	] }),
+	/** United Kingdom */
+	GB: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "16",
+			fill: "#012169"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M0 0 24 16M24 0 0 16",
+			stroke: "#ffffff",
+			strokeWidth: "3.2"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M0 0 24 16M24 0 0 16",
+			stroke: "#c8102e",
+			strokeWidth: "1.6"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M12 0V16M0 8H24",
+			stroke: "#ffffff",
+			strokeWidth: "5.3"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M12 0V16M0 8H24",
+			stroke: "#c8102e",
+			strokeWidth: "3.2"
+		})
+	] }),
+	/** European Union */
+	EU: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+		width: "24",
+		height: "16",
+		fill: "#003399"
+	}), EU_STARS.map((star) => /* @__PURE__ */ jsx("path", {
+		d: starPath(star.x, star.y, 1),
+		fill: "#ffcc00"
+	}, `${star.x.toFixed(2)}-${star.y.toFixed(2)}`))] }),
+	/** Canada */
+	CA: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "16",
+			fill: "#ffffff"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: "6",
+			height: "16",
+			fill: "#d52b1e"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "18",
+			width: "6",
+			height: "16",
+			fill: "#d52b1e"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: MAPLE_LEAF,
+			fill: "#d52b1e"
+		})
+	] }),
+	/** Japan */
+	JP: () => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("rect", {
+		width: "24",
+		height: "16",
+		fill: "#ffffff"
+	}), /* @__PURE__ */ jsx("circle", {
+		cx: "12",
+		cy: "8",
+		r: "4.6",
+		fill: "#bc002d"
+	})] }),
+	/** Ghana */
+	GH: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "16",
+			fill: "#fcd116"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "5.33",
+			fill: "#ce1126"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			y: "10.67",
+			width: "24",
+			height: "5.33",
+			fill: "#006b3f"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: starPath(12, 8, 2.3),
+			fill: "#000000"
+		})
+	] }),
+	/** United Arab Emirates */
+	AE: () => /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "16",
+			fill: "#ffffff"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "6",
+			width: "18",
+			height: "5.33",
+			fill: "#00732f"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			x: "6",
+			y: "10.67",
+			width: "18",
+			height: "5.33",
+			fill: "#000000"
+		}),
+		/* @__PURE__ */ jsx("rect", {
+			width: "6",
+			height: "16",
+			fill: "#ff0000"
+		})
+	] })
+};
+/** Neutral placeholder for a currency we have no flag for yet. */
+function FallbackFlag() {
+	return /* @__PURE__ */ jsxs(Fragment, { children: [
+		/* @__PURE__ */ jsx("rect", {
+			width: "24",
+			height: "16",
+			fill: "currentColor",
+			opacity: "0.1"
+		}),
+		/* @__PURE__ */ jsx("circle", {
+			cx: "12",
+			cy: "8",
+			r: "4",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1",
+			opacity: "0.45"
+		}),
+		/* @__PURE__ */ jsx("path", {
+			d: "M8 8h8M12 4c1.8 1.9 1.8 6.1 0 8M12 4c-1.8 1.9-1.8 6.1 0 8",
+			fill: "none",
+			stroke: "currentColor",
+			strokeWidth: "1",
+			opacity: "0.45"
+		})
+	] });
+}
+//#endregion
 //#region src/currency-selector.tsx
-const DEFAULT_FLAG = [
-	{ color: "#1f8f55" },
-	{ color: "#ffffff" },
-	{ color: "#1f8f55" }
-];
-const currencySelectorTriggerVariants = cva("group/currency-selector inline-flex w-fit shrink-0 items-center rounded-full border-0 font-bold whitespace-nowrap outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 data-popup-open:text-fg-primary [&_svg]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-current", {
+const currencySelectorTriggerVariants = cva("group/currency-selector inline-flex w-fit shrink-0 items-center rounded-full border-0 font-bold whitespace-nowrap outline-none transition-[background-color,color,box-shadow] focus-visible:shadow-[0_0_0_2px_var(--color-line-focus)] disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-60 data-popup-open:text-fg-primary [&_svg:not([data-slot=currency-flag])]:size-3.5 [&_svg]:shrink-0 [&_svg]:text-current", {
 	variants: {
 		size: {
 			sm: "h-8 gap-1.5 px-3 text-gdt-xs",
@@ -31,20 +249,27 @@ const currencySelectorTriggerVariants = cva("group/currency-selector inline-flex
 function findOption(options, value) {
 	return options.find((option) => option.code === value);
 }
-function CurrencyFlag({ flag = DEFAULT_FLAG, label, className }) {
-	const total = flag.reduce((sum, stripe) => sum + (stripe.size ?? 1), 0);
-	let cursor = 0;
-	const stops = flag.flatMap((stripe) => {
-		const start = cursor;
-		cursor += (stripe.size ?? 1) / total * 100;
-		return [`${stripe.color} ${start.toFixed(2)}%`, `${stripe.color} ${cursor.toFixed(2)}%`];
-	});
-	return /* @__PURE__ */ jsx("span", {
+/** `USD` → `US`, `EUR` → `EU`: ISO 4217 codes lead with their country code. */
+function toCountryCode(option) {
+	return (option.countryCode ?? option.code.slice(0, 2)).toUpperCase();
+}
+function CurrencyFlag({ countryCode, label, className }) {
+	const Flag = (countryCode ? COUNTRY_FLAGS[countryCode.toUpperCase()] : void 0) ?? FallbackFlag;
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 0 24 16",
 		role: "img",
 		"aria-label": label ?? "Currency flag",
 		"data-slot": "currency-flag",
-		className: cn("inline-block h-4 w-6 shrink-0 overflow-hidden rounded-[3px] bg-cover shadow-[inset_0_0_0_1px_rgb(0_0_0/0.04)]", className),
-		style: { backgroundImage: `linear-gradient(90deg, ${stops.join(", ")})` }
+		className: cn("inline-block size-4 w-6 shrink-0 overflow-hidden rounded-[3px] shadow-[inset_0_0_0_1px_rgb(0_0_0/0.08)]", className),
+		children: /* @__PURE__ */ jsx(Flag, {})
+	});
+}
+/** Renders the option's own artwork when it has any, else the built-in flag. */
+function OptionFlag({ option }) {
+	if (option.flag) return option.flag;
+	return /* @__PURE__ */ jsx(CurrencyFlag, {
+		countryCode: toCountryCode(option),
+		label: `${toCountryCode(option)} flag`
 	});
 }
 function CurrencySelector({ options, value, defaultValue, onValueChange, open, defaultOpen, onOpenChange, size = "md", withBackground = true, showFlag = true, showOptionFlags = true, contentClassName, className, placeholder = "Select currency", type = "button", ...props }) {
@@ -77,10 +302,7 @@ function CurrencySelector({ options, value, defaultValue, onValueChange, open, d
 				withBackground
 			}), className),
 			...props,
-			children: [showFlag && selectedOption ? /* @__PURE__ */ jsx(CurrencyFlag, {
-				flag: selectedOption.flag,
-				label: `${selectedOption.countryCode ?? selectedOption.code} flag`
-			}) : null, /* @__PURE__ */ jsx(SelectValue, {
+			children: [showFlag && selectedOption ? /* @__PURE__ */ jsx(OptionFlag, { option: selectedOption }) : null, /* @__PURE__ */ jsx(SelectValue, {
 				placeholder,
 				children: selectedOption?.code ?? placeholder
 			})]
@@ -92,10 +314,7 @@ function CurrencySelector({ options, value, defaultValue, onValueChange, open, d
 				value: option.code,
 				className: "min-h-12 rounded-lg px-3 text-gdt-sm data-selected:bg-surface-brand-subtle data-selected:font-normal data-selected:text-fg-brand data-highlighted:bg-surface-brand-subtle",
 				children: [
-					showOptionFlags ? /* @__PURE__ */ jsx(CurrencyFlag, {
-						flag: option.flag,
-						label: `${option.countryCode ?? option.code} flag`
-					}) : null,
+					showOptionFlags ? /* @__PURE__ */ jsx(OptionFlag, { option }) : null,
 					/* @__PURE__ */ jsxs("span", {
 						className: "min-w-0 flex-1 truncate",
 						children: [
@@ -104,7 +323,7 @@ function CurrencySelector({ options, value, defaultValue, onValueChange, open, d
 							option.label
 						]
 					}),
-					option.code === selectedValue ? /* @__PURE__ */ jsx(CheckIcon, { className: "ml-auto size-4 text-fg-brand" }) : null
+					option.code === selectedValue ? /* @__PURE__ */ jsx(Check, { className: "ml-auto size-4 text-fg-brand" }) : null
 				]
 			}, option.code))
 		})]

package/dist/data-table.js

@@ -1,4 +1,5 @@
 "use client";
+import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, Pin, SearchX, SlidersHorizontal } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
@@ -11,7 +12,6 @@ import { Popover, PopoverBody, PopoverContent, PopoverFooter, PopoverHeader, Pop
 import { Skeleton } from "./skeleton.js";
 import { Table as Table$1, TableBody, TableCell, TableHead, TableHeader, TableRow } from "./table.js";
 import { TableCard, TableCardAction } from "./table-card.js";
-import { ChevronDown, ChevronLeft, ChevronRight, ChevronUp, ChevronsUpDown, PinIcon, SearchX, SlidersHorizontal } from "lucide-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { flexRender, getCoreRowModel, getSortedRowModel, useReactTable } from "@tanstack/react-table";
@@ -258,7 +258,7 @@ function DataTable({ className, containerClassName, emptyState, interactiveColum
 								type: "button",
 								className: "shrink-0 cursor-pointer border-none bg-transparent p-0 outline-none",
 								onClick: () => isPinned ? header.column.pin(false) : header.column.pin("left"),
-								children: /* @__PURE__ */ jsx(PinIcon, { className: cn("size-3.5", isPinned && "text-fg-brand") })
+								children: /* @__PURE__ */ jsx(Pin, { className: cn("size-3.5", isPinned && "text-fg-brand") })
 							}) : null,
 							header.column.getCanResize() ? /* @__PURE__ */ jsx("button", {
 								"aria-label": "Resize column",

package/dist/date-picker.js

@@ -1,9 +1,9 @@
 "use client";
+import { Calendar } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { Calendar } from "./calendar.js";
+import { Calendar as Calendar$1 } from "./calendar.js";
 import { Popover, PopoverContent } from "./popover.js";
 import { n as PickerFooter, r as PickerTrigger, t as PICKER_COLLISION_AVOIDANCE } from "./picker-xSTzeYhc.js";
-import { CalendarIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 //#region src/date-picker.tsx
@@ -36,7 +36,7 @@ function DatePicker({ value, onChange, disabled = false, size, placeholder = "Se
 		open,
 		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsx(PickerTrigger, {
-			icon: CalendarIcon,
+			icon: Calendar,
 			displayValue: value ? formatDate(value) : "",
 			placeholder,
 			disabled,
@@ -49,7 +49,7 @@ function DatePicker({ value, onChange, disabled = false, size, placeholder = "Se
 			side: "bottom",
 			collisionAvoidance: PICKER_COLLISION_AVOIDANCE,
 			className: PANEL_CLASSES,
-			children: [/* @__PURE__ */ jsx(Calendar, {
+			children: [/* @__PURE__ */ jsx(Calendar$1, {
 				mode: "single",
 				selected: pending,
 				onSelect: setPending,
@@ -89,7 +89,7 @@ function DateRangePicker({ value, onChange, disabled = false, size, placeholder
 		open,
 		onOpenChange: handleOpenChange,
 		children: [/* @__PURE__ */ jsx(PickerTrigger, {
-			icon: CalendarIcon,
+			icon: Calendar,
 			displayValue: (() => {
 				if (value?.from && value?.to) return `${formatDate(value.from)} — ${formatDate(value.to)}`;
 				if (value?.from) return formatDate(value.from);
@@ -106,7 +106,7 @@ function DateRangePicker({ value, onChange, disabled = false, size, placeholder
 			side: "bottom",
 			collisionAvoidance: PICKER_COLLISION_AVOIDANCE,
 			className: cn(PANEL_CLASSES, "w-auto"),
-			children: [/* @__PURE__ */ jsx(Calendar, {
+			children: [/* @__PURE__ */ jsx(Calendar$1, {
 				mode: "range",
 				selected: pending,
 				onSelect: setPending,

package/dist/dialog.js

@@ -1,9 +1,9 @@
 "use client";
+import { 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 { DialogNestingProvider, useDialogNestingDepth } from "./dialog-nesting.js";
-import { XIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 import { Dialog as Dialog$1 } from "@base-ui/react/dialog";
@@ -84,7 +84,7 @@ function DialogContent({ className, children, size, showCloseButton = true, ...p
 					variant: "tertiary",
 					className: "absolute -top-10 right-0 z-10 group-data-[nested-dialog-open]/dialog-content:hidden",
 					size: "icon-sm",
-					children: [/* @__PURE__ */ jsx(XIcon, {}), /* @__PURE__ */ jsx("span", {
+					children: [/* @__PURE__ */ jsx(X, {}), /* @__PURE__ */ jsx("span", {
 						className: "sr-only",
 						children: "Close"
 					})]

package/dist/dropdown-menu.js

@@ -1,15 +1,15 @@
 "use client";
+import { Check, ChevronRight } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
 import { SizeProvider, useComponentSize } from "./size-context.js";
-import { CheckIcon, ChevronRightIcon } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
-import { Menu as Menu$1 } from "@base-ui/react/menu";
+import { Menu } from "@base-ui/react/menu";
 //#region src/dropdown-menu.tsx
 function DropdownMenu({ children, size, ...props }) {
 	return /* @__PURE__ */ jsx(SizeProvider, {
 		size,
-		children: /* @__PURE__ */ jsx(Menu$1.Root, {
+		children: /* @__PURE__ */ jsx(Menu.Root, {
 			"data-slot": "dropdown-menu",
 			...props,
 			children
@@ -17,13 +17,13 @@ function DropdownMenu({ children, size, ...props }) {
 	});
 }
 function DropdownMenuPortal({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.Portal, {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
 		"data-slot": "dropdown-menu-portal",
 		...props
 	});
 }
 function DropdownMenuTrigger({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.Trigger, {
+	return /* @__PURE__ */ jsx(Menu.Trigger, {
 		"data-slot": "dropdown-menu-trigger",
 		...props
 	});
@@ -54,15 +54,15 @@ const dropdownMenuLabelVariants = cva("font-medium text-fg-secondary data-inset:
 });
 function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom", sideOffset = 6, className, container, ...props }) {
 	const resolvedSize = useComponentSize();
-	return /* @__PURE__ */ jsx(Menu$1.Portal, {
+	return /* @__PURE__ */ jsx(Menu.Portal, {
 		container,
-		children: /* @__PURE__ */ jsx(Menu$1.Positioner, {
+		children: /* @__PURE__ */ jsx(Menu.Positioner, {
 			className: "isolate z-50 outline-none",
 			align,
 			alignOffset,
 			side,
 			sideOffset,
-			children: /* @__PURE__ */ jsx(Menu$1.Popup, {
+			children: /* @__PURE__ */ jsx(Menu.Popup, {
 				"data-slot": "dropdown-menu-content",
 				"data-size": resolvedSize,
 				className: cn(dropdownMenuContentVariants({ size: resolvedSize }), className),
@@ -72,7 +72,7 @@ function DropdownMenuContent({ align = "start", alignOffset = 0, side = "bottom"
 	});
 }
 function DropdownMenuGroup({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.Group, {
+	return /* @__PURE__ */ jsx(Menu.Group, {
 		"data-slot": "dropdown-menu-group",
 		className: cn("scroll-my-1 space-y-0.5", className),
 		...props
@@ -80,7 +80,7 @@ function DropdownMenuGroup({ className, ...props }) {
 }
 function DropdownMenuLabel({ className, inset, ...props }) {
 	const resolvedSize = useComponentSize();
-	return /* @__PURE__ */ jsx(Menu$1.GroupLabel, {
+	return /* @__PURE__ */ jsx(Menu.GroupLabel, {
 		"data-slot": "dropdown-menu-label",
 		"data-inset": inset,
 		className: cn(dropdownMenuLabelVariants({ size: resolvedSize }), className),
@@ -89,7 +89,7 @@ function DropdownMenuLabel({ className, inset, ...props }) {
 }
 function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 	const resolvedSize = useComponentSize();
-	return /* @__PURE__ */ jsx(Menu$1.Item, {
+	return /* @__PURE__ */ jsx(Menu.Item, {
 		"data-slot": "dropdown-menu-item",
 		"data-inset": inset,
 		"data-size": resolvedSize,
@@ -99,20 +99,20 @@ function DropdownMenuItem({ className, inset, variant = "default", ...props }) {
 	});
 }
 function DropdownMenuSub({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.SubmenuRoot, {
+	return /* @__PURE__ */ jsx(Menu.SubmenuRoot, {
 		"data-slot": "dropdown-menu-sub",
 		...props
 	});
 }
 function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
 	const resolvedSize = useComponentSize();
-	return /* @__PURE__ */ jsxs(Menu$1.SubmenuTrigger, {
+	return /* @__PURE__ */ jsxs(Menu.SubmenuTrigger, {
 		"data-slot": "dropdown-menu-sub-trigger",
 		"data-inset": inset,
 		"data-size": resolvedSize,
 		className: cn(dropdownMenuItemVariants({ size: resolvedSize }), "data-inset:pl-8 data-open:bg-surface data-open:text-fg-primary data-popup-open:bg-surface data-popup-open:text-fg-primary", className),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(ChevronRightIcon, { className: "cn-rtl-flip ml-auto" })]
+		children: [children, /* @__PURE__ */ jsx(ChevronRight, { className: "cn-rtl-flip ml-auto" })]
 	});
 }
 function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "right", sideOffset = 4, className, ...props }) {
@@ -128,7 +128,7 @@ function DropdownMenuSubContent({ align = "start", alignOffset = -3, side = "rig
 }
 function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }) {
 	const resolvedSize = useComponentSize();
-	return /* @__PURE__ */ jsxs(Menu$1.CheckboxItem, {
+	return /* @__PURE__ */ jsxs(Menu.CheckboxItem, {
 		"data-slot": "dropdown-menu-checkbox-item",
 		"data-inset": inset,
 		"data-size": resolvedSize,
@@ -138,19 +138,19 @@ function DropdownMenuCheckboxItem({ className, children, checked, inset, ...prop
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand",
 			"data-slot": "dropdown-menu-checkbox-item-indicator",
-			children: /* @__PURE__ */ jsx(Menu$1.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+			children: /* @__PURE__ */ jsx(Menu.CheckboxItemIndicator, { children: /* @__PURE__ */ jsx(Check, {}) })
 		}), children]
 	});
 }
 function DropdownMenuRadioGroup({ ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.RadioGroup, {
+	return /* @__PURE__ */ jsx(Menu.RadioGroup, {
 		"data-slot": "dropdown-menu-radio-group",
 		...props
 	});
 }
 function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 	const resolvedSize = useComponentSize();
-	return /* @__PURE__ */ jsxs(Menu$1.RadioItem, {
+	return /* @__PURE__ */ jsxs(Menu.RadioItem, {
 		"data-slot": "dropdown-menu-radio-item",
 		"data-inset": inset,
 		"data-size": resolvedSize,
@@ -159,12 +159,12 @@ function DropdownMenuRadioItem({ className, children, inset, ...props }) {
 		children: [/* @__PURE__ */ jsx("span", {
 			className: "pointer-events-none absolute right-3 flex items-center justify-center text-fg-brand",
 			"data-slot": "dropdown-menu-radio-item-indicator",
-			children: /* @__PURE__ */ jsx(Menu$1.RadioItemIndicator, { children: /* @__PURE__ */ jsx(CheckIcon, {}) })
+			children: /* @__PURE__ */ jsx(Menu.RadioItemIndicator, { children: /* @__PURE__ */ jsx(Check, {}) })
 		}), children]
 	});
 }
 function DropdownMenuSeparator({ className, ...props }) {
-	return /* @__PURE__ */ jsx(Menu$1.Separator, {
+	return /* @__PURE__ */ jsx(Menu.Separator, {
 		"data-slot": "dropdown-menu-separator",
 		className: cn("pointer-events-none my-1 h-px bg-line-subtle", className),
 		...props

package/dist/dropzone.js

@@ -1,6 +1,6 @@
 "use client";
+import { UploadCloud } from "./icons.js";
 import { t as cn } from "./cn-BI_4DMBf.js";
-import { UploadCloud } from "lucide-react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { createContext, use, useCallback, useRef, useState } from "react";
 //#region src/lib/use-file-picker.ts

package/dist/editorial-card.d.ts

@@ -1,17 +1,18 @@
 import { useRender } from "@base-ui/react/use-render";
 import { VariantProps } from "class-variance-authority";
+import * as React from "react";
 //#region src/editorial-card.d.ts
 declare const editorialCardVariants: (props?: ({
   size?: "lg" | "md" | "sm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 type EditorialCardProps = useRender.ComponentProps<"article"> & VariantProps<typeof editorialCardVariants>;
-declare function EditorialCard({ className, render, size, ...props }: EditorialCardProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function EditorialCardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function EditorialCardMeta({ className, render, ...props }: useRender.ComponentProps<"p">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function EditorialCardTitle({ className, render, ...props }: useRender.ComponentProps<"h3">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function EditorialCardMedia({ className, render, ...props }: useRender.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function EditorialCardCategory({ className, render, ...props }: useRender.ComponentProps<"span">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function EditorialCardPlayButton({ className, render, children, "aria-label": ariaLabel, ...props }: useRender.ComponentProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCard({ className, render, size, ...props }: EditorialCardProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function EditorialCardHeader({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function EditorialCardMeta({ className, render, ...props }: useRender.ComponentProps<"p">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function EditorialCardTitle({ className, render, ...props }: useRender.ComponentProps<"h3">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function EditorialCardMedia({ className, render, ...props }: useRender.ComponentProps<"div">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function EditorialCardCategory({ className, render, ...props }: useRender.ComponentProps<"span">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function EditorialCardPlayButton({ className, render, children, "aria-label": ariaLabel, ...props }: useRender.ComponentProps<"button">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 type EditorialCardAttributionProps = Omit<useRender.ComponentProps<"div">, "children"> & {
   authorName: string;
   brand?: {
@@ -20,8 +21,16 @@ type EditorialCardAttributionProps = Omit<useRender.ComponentProps<"div">, "chil
   };
   prefix?: string;
 };
-declare function EditorialCardAttribution({ authorName, brand, className, prefix, render, ...props }: EditorialCardAttributionProps): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function EditorialCardExcerpt({ className, render, ...props }: useRender.ComponentProps<"p">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
-declare function EditorialCardLink({ className, render, children, ...props }: useRender.ComponentProps<"a">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
+declare function EditorialCardAttribution({ authorName, brand, className, prefix, render, ...props }: EditorialCardAttributionProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+type EditorialCardRatingProps = Omit<useRender.ComponentProps<"div">, "children"> & {
+  rating: number;
+  source?: React.ReactNode;
+  totalReviews?: number;
+  reviewLabel?: string;
+  showScore?: boolean;
+};
+declare function EditorialCardRating({ className, rating, render, reviewLabel, showScore, source, totalReviews, ...props }: EditorialCardRatingProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function EditorialCardExcerpt({ className, render, ...props }: useRender.ComponentProps<"p">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+declare function EditorialCardLink({ className, render, children, ...props }: useRender.ComponentProps<"a">): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
 //#endregion
-export { EditorialCard, EditorialCardAttribution, type EditorialCardAttributionProps, EditorialCardCategory, EditorialCardExcerpt, EditorialCardHeader, EditorialCardLink, EditorialCardMedia, EditorialCardMeta, EditorialCardPlayButton, type EditorialCardProps, EditorialCardTitle, editorialCardVariants };
+export { EditorialCard, EditorialCardAttribution, type EditorialCardAttributionProps, EditorialCardCategory, EditorialCardExcerpt, EditorialCardHeader, EditorialCardLink, EditorialCardMedia, EditorialCardMeta, EditorialCardPlayButton, type EditorialCardProps, EditorialCardRating, type EditorialCardRatingProps, EditorialCardTitle, editorialCardVariants };