"use client"; import { useId } from "react"; import { Label } from "@/components/registry/primitives/core/label"; import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "@/components/registry/primitives/core/select"; import { cn } from "@/lib/registry/cn"; type ResultsPerPageSurface = "plain" | "field"; type ResultsPerPageVariant = "default" | "soft" | "minimal"; type ResultsPerPageDensity = "comfortable" | "compact"; type ResultsPerPageProps = { /** Controlled value. When omitted, falls back to defaultItemsPerPage or first option. */ value?: number; /** Uncontrolled initial value for backward compatibility. */ defaultItemsPerPage?: number; options: number[]; onChange?: (value: number) => void; /** Show "Results Per Page" label. When false, use for inline alignment with other controls. */ showLabel?: boolean; surface?: ResultsPerPageSurface; variant?: ResultsPerPageVariant; density?: ResultsPerPageDensity; label?: string; className?: string; }; const ResultsPerPage = ({ value, defaultItemsPerPage, options, onChange, showLabel = true, surface = "plain", variant = "default", density = "comfortable", label = "Results Per Page", className, }: ResultsPerPageProps) => { const triggerId = useId(); const firstOption = options.length > 0 ? options[0] : 10; const fallbackValue = defaultItemsPerPage != null && options.includes(defaultItemsPerPage) ? defaultItemsPerPage : firstOption; const selectedValue = value != null && options.includes(value) ? value : fallbackValue; const isCompact = density === "compact"; const wrapperVariantClassName = variant === "soft" ? "rounded-md bg-muted/40 px-2" : variant === "minimal" ? "px-0" : undefined; const triggerVariantClassName = variant === "soft" ? "rounded-sm hover:bg-background/70" : variant === "minimal" ? "hover:bg-transparent" : "hover:bg-muted/40"; return (

{showLabel ? ( {label} ) : ( {label} )}

); }; export { ResultsPerPage }; export default ResultsPerPage;

Results Per Page

Showcase

Results Per Page