@salesforce/ui-bundle-template-app-react-sample-b2x 1.117.2

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/properties/PropertySearchFilters.tsx

@@ -0,0 +1,315 @@
+/**
+ * Search and filter bar for property search: area search, price range, number of bedrooms.
+ */
+import { Popover } from "radix-ui";
+import { Search, ChevronDown } from "lucide-react";
+
+const SEARCH_INPUT_CLASS =
+	"h-10 rounded-full border-2 border-primary/50 bg-background px-4 text-sm outline-none transition-colors placeholder:text-muted-foreground focus:border-primary focus:ring-2 focus:ring-primary/20";
+
+const FILTER_PILL_CLASS =
+	"inline-flex h-10 items-center gap-1.5 rounded-full border-2 border-primary/50 bg-background px-4 text-sm font-medium text-foreground outline-none transition-colors hover:border-primary/70 focus:ring-2 focus:ring-primary/20";
+
+const SAVE_BUTTON_CLASS =
+	"mt-3 w-full rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground transition-colors hover:bg-primary/90 focus:outline-none focus:ring-2 focus:ring-primary/20";
+
+const DEFAULT_PRICE_MIN = 0;
+const DEFAULT_PRICE_MAX = 100_000;
+
+/** Bedroom filter buckets: ≤2, exactly 3, or ≥4 */
+export type BedroomFilter = "le2" | "3" | "ge4" | null;
+
+const BEDROOM_OPTIONS: { value: BedroomFilter; label: string }[] = [
+	{ value: "le2", label: "≤2" },
+	{ value: "3", label: "3" },
+	{ value: "ge4", label: "≥4" },
+];
+
+/** Sort by price or number of bedrooms, ascending or descending */
+export type SortBy = "price_asc" | "price_desc" | "beds_asc" | "beds_desc" | null;
+
+const SORT_OPTIONS: { value: NonNullable<SortBy>; label: string }[] = [
+	{ value: "price_asc", label: "Price (low to high)" },
+	{ value: "price_desc", label: "Price (high to low)" },
+	{ value: "beds_asc", label: "Number of bedrooms (low to high)" },
+	{ value: "beds_desc", label: "Number of bedrooms (high to low)" },
+];
+
+export interface PropertySearchFiltersProps {
+	searchQuery: string;
+	onSearchQueryChange: (value: string) => void;
+	priceMin: string;
+	onPriceMinChange: (value: string) => void;
+	priceMax: string;
+	onPriceMaxChange: (value: string) => void;
+	/** Called when user clicks Save in the Price popover; use this to commit filters and run search. */
+	onPriceSave?: (min: string, max: string) => void;
+	bedrooms: BedroomFilter;
+	onBedroomsChange: (value: BedroomFilter) => void;
+	/** Called when user clicks Save in the Beds popover; use this to commit filters and run search. */
+	onBedsSave?: (value: BedroomFilter) => void;
+	sortBy: SortBy;
+	onSortChange: (value: SortBy) => void;
+	/** Called when user clicks Save in the Sort popover; use this to apply sort. */
+	onSortSave?: (value: SortBy) => void;
+	/** When set, pill shows this as the applied sort (e.g. after Save); otherwise pill shows sortBy. */
+	appliedSortBy?: SortBy | null;
+	onSubmit?: () => void;
+}
+
+export default function PropertySearchFilters({
+	searchQuery,
+	onSearchQueryChange,
+	priceMin,
+	onPriceMinChange,
+	priceMax,
+	onPriceMaxChange,
+	onPriceSave,
+	bedrooms,
+	onBedroomsChange,
+	onBedsSave,
+	sortBy,
+	onSortChange,
+	onSortSave,
+	appliedSortBy,
+	onSubmit,
+}: PropertySearchFiltersProps) {
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === "Enter") onSubmit?.();
+	};
+
+	const rangeMin = DEFAULT_PRICE_MIN;
+	const rangeMax = DEFAULT_PRICE_MAX;
+
+	const minNum = priceMin.trim() ? Number(priceMin.replace(/[^0-9.]/g, "")) : NaN;
+	const maxNum = priceMax.trim() ? Number(priceMax.replace(/[^0-9.]/g, "")) : NaN;
+	const hasMin = Number.isFinite(minNum) && minNum > 0;
+	const hasMax = Number.isFinite(maxNum) && maxNum > 0;
+	const formatPrice = (n: number) =>
+		new Intl.NumberFormat("en-US", {
+			style: "currency",
+			currency: "USD",
+			maximumFractionDigits: 0,
+		}).format(n);
+	const priceValueLabel =
+		hasMin && hasMax
+			? `${formatPrice(minNum)} – ${formatPrice(maxNum)}`
+			: hasMin
+				? `${formatPrice(minNum)}+`
+				: hasMax
+					? `– ${formatPrice(maxNum)}`
+					: null;
+	const priceLabel = priceValueLabel != null ? `Price: ${priceValueLabel}` : "Price";
+
+	const bedsLabel = bedrooms
+		? `Number of bedrooms: ${BEDROOM_OPTIONS.find((o) => o.value === bedrooms)?.label ?? ""}`
+		: "Number of bedrooms";
+
+	const sortForPill = appliedSortBy ?? sortBy;
+	const sortOptionLabel = sortForPill
+		? (SORT_OPTIONS.find((o) => o.value === sortForPill)?.label ?? null)
+		: null;
+	const sortLabel = sortOptionLabel != null ? `Sort By: ${sortOptionLabel}` : "Sort By";
+
+	return (
+		<div className="flex w-full shrink-0 flex-col items-stretch gap-3 border-b border-border px-4 py-4 lg:flex-row lg:items-center">
+			<div className="relative min-w-0 w-full lg:w-1/2 lg:shrink-0">
+				<Search
+					className="pointer-events-none absolute left-3 top-1/2 size-5 -translate-y-1/2 text-muted-foreground"
+					aria-hidden
+				/>
+				<input
+					type="text"
+					value={searchQuery}
+					onChange={(e) => onSearchQueryChange(e.target.value)}
+					onKeyDown={handleKeyDown}
+					placeholder="Area or search"
+					className={`${SEARCH_INPUT_CLASS} w-full pl-10`}
+					aria-label="Search property listings"
+				/>
+			</div>
+			<div className="flex flex-wrap items-center gap-3 lg:flex-1 lg:min-w-0 lg:flex-nowrap">
+				<div className="min-w-0 lg:flex-1">
+					<Popover.Root>
+						<Popover.Trigger asChild>
+							<button
+								type="button"
+								className={`${FILTER_PILL_CLASS} w-full justify-center`}
+								aria-label={priceValueLabel == null ? "Price filter" : priceLabel}
+							>
+								{priceLabel}
+								<ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+							</button>
+						</Popover.Trigger>
+						<Popover.Portal>
+							<Popover.Content
+								sideOffset={8}
+								align="start"
+								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
+							>
+								<div className="space-y-3">
+									<p className="text-sm font-medium text-foreground">Price range</p>
+									<div className="flex items-center gap-2">
+										<div className="flex flex-1 items-center rounded-full border-2 border-primary/50 bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
+											<span className="pl-4 text-sm text-muted-foreground">$</span>
+											<input
+												type="number"
+												min={rangeMin}
+												max={rangeMax}
+												step={1000}
+												value={priceMin}
+												onChange={(e) => onPriceMinChange(e.target.value)}
+												onKeyDown={handleKeyDown}
+												className="h-10 flex-1 border-0 bg-transparent px-2 py-0 text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+												aria-label="Minimum price"
+											/>
+										</div>
+										<span className="text-muted-foreground">–</span>
+										<div className="flex flex-1 items-center rounded-full border-2 border-primary/50 bg-background focus-within:border-primary focus-within:ring-2 focus-within:ring-primary/20">
+											<span className="pl-4 text-sm text-muted-foreground">$</span>
+											<input
+												type="number"
+												min={rangeMin}
+												max={rangeMax}
+												step={1000}
+												value={priceMax}
+												onChange={(e) => onPriceMaxChange(e.target.value)}
+												onKeyDown={handleKeyDown}
+												className="h-10 flex-1 border-0 bg-transparent px-2 py-0 text-sm outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
+												aria-label="Maximum price"
+											/>
+										</div>
+									</div>
+									<Popover.Close asChild>
+										<button
+											type="button"
+											className={SAVE_BUTTON_CLASS}
+											onClick={() => onPriceSave?.(priceMin, priceMax)}
+										>
+											Save
+										</button>
+									</Popover.Close>
+								</div>
+							</Popover.Content>
+						</Popover.Portal>
+					</Popover.Root>
+				</div>
+
+				<div className="min-w-0 lg:flex-1">
+					<Popover.Root>
+						<Popover.Trigger asChild>
+							<button
+								type="button"
+								className={`${FILTER_PILL_CLASS} w-full justify-center`}
+								aria-label={bedrooms ? bedsLabel : "Number of bedrooms filter"}
+							>
+								{bedsLabel}
+								<ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+							</button>
+						</Popover.Trigger>
+						<Popover.Portal>
+							<Popover.Content
+								sideOffset={8}
+								align="start"
+								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
+							>
+								<div className="space-y-3">
+									<p className="text-sm font-medium text-foreground">Number of bedrooms</p>
+									<div
+										className="flex overflow-hidden rounded-full border-2 border-primary/40"
+										role="group"
+										aria-label="Number of bedrooms"
+									>
+										{BEDROOM_OPTIONS.map(({ value, label }) => (
+											<button
+												key={value}
+												type="button"
+												onClick={() => onBedroomsChange(bedrooms === value ? null : value)}
+												className={`min-w-[4rem] flex-1 border-r border-primary/40 px-4 py-2 text-sm font-medium transition-colors last:border-r-0 ${
+													bedrooms === value
+														? "bg-primary text-primary-foreground"
+														: "bg-background text-primary hover:bg-primary/10"
+												}`}
+												aria-pressed={bedrooms === value}
+												aria-label={
+													value === "le2"
+														? "2 or fewer bedrooms"
+														: value === "3"
+															? "3 bedrooms"
+															: "4 or more bedrooms"
+												}
+											>
+												{label}
+											</button>
+										))}
+									</div>
+									<Popover.Close asChild>
+										<button
+											type="button"
+											className={SAVE_BUTTON_CLASS}
+											onClick={() => onBedsSave?.(bedrooms)}
+										>
+											Save
+										</button>
+									</Popover.Close>
+								</div>
+							</Popover.Content>
+						</Popover.Portal>
+					</Popover.Root>
+				</div>
+
+				<div className="min-w-0 lg:flex-1">
+					<Popover.Root>
+						<Popover.Trigger asChild>
+							<button
+								type="button"
+								className={`${FILTER_PILL_CLASS} w-full justify-center`}
+								aria-label={sortBy ? sortLabel : "Sort By"}
+							>
+								{sortLabel}
+								<ChevronDown className="size-4 shrink-0 text-muted-foreground" aria-hidden />
+							</button>
+						</Popover.Trigger>
+						<Popover.Portal>
+							<Popover.Content
+								sideOffset={8}
+								align="start"
+								className="z-[1100] w-[min(20rem,90vw)] rounded-xl border border-border bg-background p-4 shadow-lg outline-none"
+							>
+								<div className="space-y-3">
+									<p className="text-sm font-medium text-foreground">Sort by</p>
+									<div className="flex flex-col gap-1">
+										{SORT_OPTIONS.map(({ value, label }) => (
+											<button
+												key={value}
+												type="button"
+												onClick={() => onSortChange(value)}
+												className={`rounded-lg px-3 py-2 text-left text-sm font-medium transition-colors ${
+													sortBy === value
+														? "bg-primary text-primary-foreground"
+														: "bg-background text-foreground hover:bg-muted"
+												}`}
+												aria-pressed={sortBy === value}
+											>
+												{label}
+											</button>
+										))}
+									</div>
+									<Popover.Close asChild>
+										<button
+											type="button"
+											className={SAVE_BUTTON_CLASS}
+											onClick={() => onSortSave?.(sortBy)}
+										>
+											Save
+										</button>
+									</Popover.Close>
+								</div>
+							</Popover.Content>
+						</Popover.Portal>
+					</Popover.Root>
+				</div>
+			</div>
+		</div>
+	);
+}

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/alert.tsx

@@ -0,0 +1,76 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+
+import { cn } from '../../lib/utils';
+
+const alertVariants = cva(
+  "grid gap-0.5 rounded-lg border px-2.5 py-2 text-left text-sm has-data-[slot=alert-action]:relative has-data-[slot=alert-action]:pr-18 has-[>svg]:grid-cols-[auto_1fr] has-[>svg]:gap-x-2 *:[svg]:row-span-2 *:[svg]:translate-y-0.5 *:[svg]:text-current *:[svg:not([class*='size-'])]:size-4 w-full relative group/alert",
+  {
+    variants: {
+      variant: {
+        default: 'bg-card text-card-foreground',
+        destructive:
+          'text-destructive bg-card *:data-[slot=alert-description]:text-destructive/90 *:[svg]:text-current',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function Alert({
+  className,
+  variant,
+  ...props
+}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {
+  return (
+    <div
+      data-slot="alert"
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+function AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-title"
+      className={cn(
+        'font-medium group-has-[>svg]/alert:col-start-2 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertDescription({
+  className,
+  ...props
+}: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-description"
+      className={cn(
+        'text-muted-foreground text-sm text-balance md:text-pretty [&_p:not(:last-child)]:mb-4 [&_a]:hover:text-foreground [&_a]:underline [&_a]:underline-offset-3',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function AlertAction({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      data-slot="alert-action"
+      className={cn('absolute top-2 right-2', className)}
+      {...props}
+    />
+  );
+}
+
+export { Alert, AlertTitle, AlertDescription, AlertAction };

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/badge.tsx

@@ -0,0 +1,48 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border border-transparent px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a&]:hover:bg-primary/90',
+        secondary:
+          'bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',
+        destructive:
+          'bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',
+        outline:
+          'border-border text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        ghost: '[a&]:hover:bg-accent [a&]:hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 [a&]:hover:underline',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+function Badge({
+  className,
+  variant = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'span'> &
+  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
+  const Comp = asChild ? Slot.Root : 'span';
+
+  return (
+    <Comp
+      data-slot="badge"
+      data-variant={variant}
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+}
+
+export { Badge, badgeVariants };

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/breadcrumb.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { ChevronRight, MoreHorizontal } from 'lucide-react';
+import { Slot } from 'radix-ui';
+
+import { cn } from '@/lib/utils';
+
+function Breadcrumb({ ...props }: React.ComponentProps<'nav'>) {
+  return <nav aria-label="breadcrumb" data-slot="breadcrumb" {...props} />;
+}
+
+function BreadcrumbList({ className, ...props }: React.ComponentProps<'ol'>) {
+  return (
+    <ol
+      data-slot="breadcrumb-list"
+      className={cn(
+        'flex flex-wrap items-center gap-1.5 text-sm break-words text-muted-foreground sm:gap-2.5',
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbItem({ className, ...props }: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-item"
+      className={cn('inline-flex items-center gap-1.5', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbLink({
+  asChild,
+  className,
+  ...props
+}: React.ComponentProps<'a'> & {
+  asChild?: boolean;
+}) {
+  const Comp = asChild ? Slot.Root : 'a';
+
+  return (
+    <Comp
+      data-slot="breadcrumb-link"
+      className={cn('transition-colors hover:text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbPage({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-page"
+      role="link"
+      aria-disabled="true"
+      aria-current="page"
+      className={cn('font-normal text-foreground', className)}
+      {...props}
+    />
+  );
+}
+
+function BreadcrumbSeparator({
+  children,
+  className,
+  ...props
+}: React.ComponentProps<'li'>) {
+  return (
+    <li
+      data-slot="breadcrumb-separator"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('[&>svg]:size-3.5', className)}
+      {...props}
+    >
+      {children ?? <ChevronRight />}
+    </li>
+  );
+}
+
+function BreadcrumbEllipsis({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span
+      data-slot="breadcrumb-ellipsis"
+      role="presentation"
+      aria-hidden="true"
+      className={cn('flex size-9 items-center justify-center', className)}
+      {...props}
+    >
+      <MoreHorizontal className="size-4" />
+      <span className="sr-only">More</span>
+    </span>
+  );
+}
+
+export {
+  Breadcrumb,
+  BreadcrumbList,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+  BreadcrumbEllipsis,
+};

package/dist/force-app/main/default/uiBundles/propertyrentalapp/src/components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { cva, type VariantProps } from 'class-variance-authority';
+import { Slot } from 'radix-ui';
+
+import { cn } from '../../lib/utils';
+
+const buttonVariants = cva(
+  "focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 rounded-lg border border-transparent bg-clip-padding text-sm font-medium focus-visible:ring-3 aria-invalid:ring-3 [&_svg:not([class*='size-'])]:size-4 inline-flex items-center justify-center whitespace-nowrap transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none shrink-0 [&_svg]:shrink-0 outline-none group/button select-none",
+  {
+    variants: {
+      variant: {
+        default: 'bg-primary text-primary-foreground [a]:hover:bg-primary/80',
+        outline:
+          'border-border bg-background hover:bg-muted hover:text-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        secondary:
+          'bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground',
+        ghost:
+          'hover:bg-muted hover:text-foreground dark:hover:bg-muted/50 aria-expanded:bg-muted aria-expanded:text-foreground',
+        destructive:
+          'bg-destructive/10 hover:bg-destructive/20 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/20 text-destructive focus-visible:border-destructive/40 dark:hover:bg-destructive/30',
+        link: 'text-primary underline-offset-4 hover:underline',
+      },
+      size: {
+        default:
+          'h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2',
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: 'h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3',
+        icon: 'size-8',
+        'icon-xs':
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        'icon-sm':
+          'size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg',
+        'icon-lg': 'size-9',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+      size: 'default',
+    },
+  }
+);
+
+function Button({
+  className,
+  variant = 'default',
+  size = 'default',
+  asChild = false,
+  ...props
+}: React.ComponentProps<'button'> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : 'button';
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...(props as any)}
+    />
+  );
+}
+
+export { Button, buttonVariants };