4e:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 4f:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 50:T3bb8,"use client" import * as React from "react" import { Activity, AlertTriangle, CheckCircle2, Clock3, Info, Server, ShieldCheck, WifiOff, } from "lucide-react" import { motion, useReducedMotion } from "motion/react" import { AnimatedNumber } from "./animated-number" import { Badge } from "@/components/ui/badge" import { Button } from "@/components/ui/button" import { Card, CardAction, CardContent, CardDescription, CardHeader, CardTitle, } from "@/components/ui/card" import { Separator } from "@/components/ui/separator" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { Filters, type Filter, type FilterFieldsConfig, } from "./filters" import { cn } from "@/lib/utils" export type StatusPageState = | "operational" | "degraded" | "incident" | "down" | "maintenance" export interface StatusPageDay { date: string status: StatusPageState uptime?: number label?: string } export interface StatusPageService { id: string name: string description?: string group?: string status: StatusPageState uptime: number latency?: string days: StatusPageDay[] } export interface StatusPageIncident { id: string title: string status: Exclude startedAt: string resolvedAt?: string description?: string services?: string[] } export interface StatusPageProps { title?: string description?: string updatedAt?: string services: StatusPageService[] incidents?: StatusPageIncident[] showFilters?: boolean className?: string } const statusConfig: Record< StatusPageState, { label: string summary: string icon: React.ElementType badgeClassName: string barClassName: string panelClassName: string } > = { operational: { label: "Operational", summary: "All systems operational", icon: CheckCircle2, badgeClassName: "border-emerald-500/20 bg-emerald-500/10 text-emerald-700 dark:text-emerald-300", barClassName: "bg-emerald-500", panelClassName: "border-emerald-500/20 bg-emerald-500/5 text-emerald-700 dark:text-emerald-300", }, degraded: { label: "Degraded", summary: "Degraded performance", icon: Activity, badgeClassName: "border-amber-500/20 bg-amber-500/10 text-amber-700 dark:text-amber-300", barClassName: "bg-amber-500", panelClassName: "border-amber-500/20 bg-amber-500/5 text-amber-700 dark:text-amber-300", }, incident: { label: "Incident", summary: "Incident active", icon: AlertTriangle, badgeClassName: "border-orange-500/20 bg-orange-500/10 text-orange-700 dark:text-orange-300", barClassName: "bg-orange-500", panelClassName: "border-orange-500/20 bg-orange-500/5 text-orange-700 dark:text-orange-300", }, down: { label: "Down", summary: "Service disruption", icon: WifiOff, badgeClassName: "border-destructive/20 bg-destructive/10 text-destructive", barClassName: "bg-destructive", panelClassName: "border-destructive/20 bg-destructive/5 text-destructive", }, maintenance: { label: "Maintenance", summary: "Maintenance window", icon: Clock3, badgeClassName: "border-sky-500/20 bg-sky-500/10 text-sky-700 dark:text-sky-300", barClassName: "bg-sky-500", panelClassName: "border-sky-500/20 bg-sky-500/5 text-sky-700 dark:text-sky-300", }, } const statusPriority: StatusPageState[] = [ "down", "incident", "degraded", "maintenance", "operational", ] function getWorstStatus(services: StatusPageService[]): StatusPageState { return ( statusPriority.find((status) => services.some((service) => service.status === status) ) ?? "operational" ) } function getFilterValues( filters: Filter[], field: string ): string[] { return filters .filter((filter) => filter.field === field) .flatMap((filter) => filter.values) .filter(Boolean) } export function StatusPage({ title = "Status", description = "Live availability across core services.", updatedAt = "Updated just now", services, incidents = [], showFilters = true, className, }: StatusPageProps) { const groups = React.useMemo( () => Array.from( new Set(services.flatMap((service) => (service.group ? [service.group] : []))) ), [services] ) const [filters, setFilters] = React.useState[]>([]) const activeStatuses = getFilterValues(filters, "status") const activeGroups = getFilterValues(filters, "group") const filteredServices = services.filter((service) => { const matchesStatus = activeStatuses.length === 0 || activeStatuses.includes(service.status) const matchesGroup = activeGroups.length === 0 || (service.group ? activeGroups.includes(service.group) : false) return matchesStatus && matchesGroup }) const visibleServices = showFilters ? filteredServices : services const overallStatus = getWorstStatus(services) const overallConfig = statusConfig[overallStatus] const OverallIcon = overallConfig.icon const overallUptime = services.reduce((total, service) => total + service.uptime, 0) / Math.max(services.length, 1) const activeIncidentCount = incidents.filter( (incident) => incident.status !== "maintenance" ).length const fields = React.useMemo>( () => [ { key: "status", label: "Status", type: "multiselect", icon: , options: Object.entries(statusConfig).map(([value, config]) => ({ value, label: config.label, })), }, { key: "group", label: "Service group", type: "multiselect", icon: , options: groups.map((group) => ({ value: group, label: group, })), }, ], [groups] ) return (

{title} {description}

{overallConfig.summary}

} label="30 day uptime" value={overallUptime} suffix="%" /> } label="Services tracked" value={services.length} /> } label="Open notices" value={activeIncidentCount} />

{updatedAt}

{showFilters ? ( Filter status } /> ) : null}

{visibleServices.map((service, index) => ( ))}

{visibleServices.length === 0 ? (

No services match these filters

Clear or adjust the status filters to bring services back into view.

) : null} {incidents.length > 0 ? ( Incident history Recent notices and service-impacting changes. {incidents.map((incident) => ( ))} ) : null}

) } function StatusMetric({ icon, label, value, suffix, }: { icon: React.ReactNode label: string value: number suffix?: string }) { return (

{label} {icon}

{suffix ? {suffix} : null}

) } function ServiceStatusCard({ service, index, }: { service: StatusPageService index: number }) { const reducedMotion = useReducedMotion() const config = statusConfig[service.status] const StatusIcon = config.icon return (

{service.name} {config.label}

{service.description}

{service.latency ?? "30 day uptime"}

30 days ago Today

) } function StatusBars({ days }: { days: StatusPageDay[] }) { return (

{days.map((day) => { const config = statusConfig[day.status] return (

{day.label ?? day.date}

{config.label} {typeof day.uptime === "number" ? ` · ${day.uptime.toFixed(2)}% uptime` : null}

) })}

) } function IncidentItem({ incident }: { incident: StatusPageIncident }) { const config = statusConfig[incident.status] const Icon = config.icon return (

{incident.title}

{config.label}

{incident.description ? (

{incident.description}

) : null} {incident.services?.length ? (

{incident.services.map((service) => ( {service} ))}

) : null}

{incident.startedAt}

{incident.resolvedAt ? ( <>

Resolved {incident.resolvedAt}

) : null}

) } 51:Te12b,"use client" import * as React from "react" import { cva } from "class-variance-authority" import { AlertCircleIcon, CheckIcon, PlusIcon, XIcon, } from "lucide-react" import { Button } from "@/components/ui/button" import { ButtonGroup, ButtonGroupText } from "@/components/ui/button-group" import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, } from "@/components/ui/dropdown-menu" import { Input } from "@/components/ui/input" import { InputGroup, InputGroupAddon, InputGroupButton, InputGroupInput, InputGroupText, } from "@/components/ui/input-group" import { Kbd } from "@/components/ui/kbd" import { ScrollArea } from "@/components/ui/scroll-area" import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "@/components/ui/tooltip" import { cn } from "@/lib/utils" export interface FilterI18nConfig { addFilter: string searchFields: string noFieldsFound: string noResultsFound: string select: string true: string false: string min: string max: string to: string typeAndPressEnter: string selected: string selectedCount: string percent: string defaultCurrency: string defaultColor: string addFilterTitle: string operators: { is: string isNot: string isAnyOf: string isNotAnyOf: string includesAll: string excludesAll: string before: string after: string between: string notBetween: string contains: string notContains: string startsWith: string endsWith: string isExactly: string equals: string notEquals: string greaterThan: string lessThan: string overlaps: string includes: string excludes: string includesAllOf: string includesAnyOf: string empty: string notEmpty: string } placeholders: { enterField: (fieldType: string) => string selectField: string searchField: (fieldName: string) => string enterKey: string enterValue: string } helpers: { formatOperator: (operator: string) => string } validation: { invalidEmail: string invalidUrl: string invalidTel: string invalid: string } } export const DEFAULT_I18N: FilterI18nConfig = { addFilter: "Filter", searchFields: "Filter...", noFieldsFound: "No filters found.", noResultsFound: "No results found.", select: "Select...", true: "True", false: "False", min: "Min", max: "Max", to: "to", typeAndPressEnter: "Type and press Enter to add tag", selected: "selected", selectedCount: "selected", percent: "%", defaultCurrency: "$", defaultColor: "#000000", addFilterTitle: "Add filter", operators: { is: "is", isNot: "is not", isAnyOf: "is any of", isNotAnyOf: "is not any of", includesAll: "includes all", excludesAll: "excludes all", before: "before", after: "after", between: "between", notBetween: "not between", contains: "contains", notContains: "does not contain", startsWith: "starts with", endsWith: "ends with", isExactly: "is exactly", equals: "equals", notEquals: "not equals", greaterThan: "greater than", lessThan: "less than", overlaps: "overlaps", includes: "includes", excludes: "excludes", includesAllOf: "includes all of", includesAnyOf: "includes any of", empty: "is empty", notEmpty: "is not empty", }, placeholders: { enterField: (fieldType: string) => `Enter ${fieldType}...`, selectField: "Select...", searchField: (fieldName: string) => `Search ${fieldName.toLowerCase()}...`, enterKey: "Enter key...", enterValue: "Enter value...", }, helpers: { formatOperator: (operator: string) => operator.replace(/_/g, " "), }, validation: { invalidEmail: "Invalid email format", invalidUrl: "Invalid URL format", invalidTel: "Invalid phone format", invalid: "Invalid input format", }, } interface FilterContextValue { variant: "solid" | "default" size: "sm" | "default" | "lg" radius: "default" | "full" i18n: FilterI18nConfig className?: string showSearchInput?: boolean trigger?: React.ReactNode allowMultiple?: boolean } const FilterContext = React.createContext({ variant: "default", size: "default", radius: "default", i18n: DEFAULT_I18N, className: undefined, showSearchInput: true, trigger: undefined, allowMultiple: true, }) function useFilterContext() { return React.useContext(FilterContext) } const filtersContainerVariants = cva("flex flex-wrap items-center", { variants: { variant: { solid: "gap-2", default: "", }, size: { sm: "gap-1.5", default: "gap-2.5", lg: "gap-3.5", }, }, defaultVariants: { variant: "default", size: "default", }, }) const filterControlHeight = { sm: "h-6!", default: "h-7!", lg: "h-8!", } as const export interface FilterOption { value: T label: string icon?: React.ReactNode metadata?: Record className?: string } export interface FilterOperator { value: string label: string supportsMultiple?: boolean } export interface CustomRendererProps { field: FilterFieldConfig values: T[] onChange: (values: T[]) => void operator: string } export interface FilterFieldGroup { group?: string fields: FilterFieldConfig[] } export type FilterFieldsConfig = | FilterFieldConfig[] | FilterFieldGroup[] export interface FilterFieldConfig { key?: string label?: string icon?: React.ReactNode type?: "select" | "multiselect" | "text" | "custom" | "separator" group?: string fields?: FilterFieldConfig[] options?: FilterOption[] operators?: FilterOperator[] customRenderer?: (props: CustomRendererProps) => React.ReactNode customValueRenderer?: ( values: T[], options: FilterOption[] ) => React.ReactNode placeholder?: string searchable?: boolean maxSelections?: number min?: number max?: number step?: number prefix?: string | React.ReactNode suffix?: string | React.ReactNode pattern?: string validation?: ( value: unknown ) => boolean | { valid: boolean; message?: string } allowCustomValues?: boolean className?: string menuPopupClassName?: string groupLabel?: string onLabel?: string offLabel?: string onInputChange?: (event: React.ChangeEvent) => void defaultOperator?: string value?: T[] onValueChange?: (values: T[]) => void } export interface Filter { id: string field: string operator: string values: T[] } export interface FilterGroup { id: string label?: string filters: Filter[] fields: FilterFieldConfig[] } function isFieldGroup( item: FilterFieldConfig | FilterFieldGroup ): item is FilterFieldGroup { return "fields" in item && Array.isArray(item.fields) } function isGroupLevelField(field: FilterFieldConfig): boolean { return Boolean(field.group && field.fields) } function flattenFields( fields: FilterFieldsConfig ): FilterFieldConfig[] { return fields.reduce[]>((acc, item) => { if (isFieldGroup(item)) { return [...acc, ...item.fields] } if (isGroupLevelField(item)) { return [...acc, ...(item.fields ?? [])] } return [...acc, item] }, []) } function getFieldsMap( fields: FilterFieldsConfig ): Record> { return flattenFields(fields).reduce( (acc, field) => { if (field.key) { acc[field.key] = field } return acc }, {} as Record> ) } function createOperatorsFromI18n( i18n: FilterI18nConfig ): Record { return { select: [ { value: "is", label: i18n.operators.is }, { value: "is_not", label: i18n.operators.isNot }, { value: "empty", label: i18n.operators.empty }, { value: "not_empty", label: i18n.operators.notEmpty }, ], multiselect: [ { value: "is_any_of", label: i18n.operators.isAnyOf }, { value: "is_not_any_of", label: i18n.operators.isNotAnyOf }, { value: "includes_all", label: i18n.operators.includesAll }, { value: "excludes_all", label: i18n.operators.excludesAll }, { value: "empty", label: i18n.operators.empty }, { value: "not_empty", label: i18n.operators.notEmpty }, ], text: [ { value: "contains", label: i18n.operators.contains }, { value: "not_contains", label: i18n.operators.notContains }, { value: "starts_with", label: i18n.operators.startsWith }, { value: "ends_with", label: i18n.operators.endsWith }, { value: "is", label: i18n.operators.isExactly }, { value: "empty", label: i18n.operators.empty }, { value: "not_empty", label: i18n.operators.notEmpty }, ], custom: [ { value: "is", label: i18n.operators.is }, { value: "after", label: i18n.operators.after }, { value: "between", label: i18n.operators.between }, { value: "empty", label: i18n.operators.empty }, { value: "not_empty", label: i18n.operators.notEmpty }, ], } } export const DEFAULT_OPERATORS: Record = createOperatorsFromI18n(DEFAULT_I18N) function getOperatorsForField( field: FilterFieldConfig, values: T[], i18n: FilterI18nConfig ): FilterOperator[] { if (field.operators) return field.operators const operators = createOperatorsFromI18n(i18n) let fieldType = field.type ?? "select" if (fieldType === "select" && values.length > 1) { fieldType = "multiselect" } if (fieldType === "multiselect") { return operators.multiselect } return operators[fieldType] ?? operators.select } function FilterInput({ field, onBlur, onKeyDown, className, ...props }: React.InputHTMLAttributes & { className?: string field?: FilterFieldConfig }) { const context = useFilterContext() const [isValid, setIsValid] = React.useState(true) const [validationMessage, setValidationMessage] = React.useState("") const inputRef = React.useRef(null) React.useEffect(() => { if (!props.autoFocus) return undefined const timer = window.setTimeout(() => { inputRef.current?.focus() }, 300) return () => window.clearTimeout(timer) }, [props.autoFocus]) function validateInput(value: string, pattern?: string): boolean { if (!pattern || !value) return true return new RegExp(pattern).test(value) } function handleBlur(event: React.FocusEvent) { const value = event.target.value const pattern = field?.pattern ?? props.pattern if (value && (pattern || field?.validation)) { let valid = true let customMessage = "" if (field?.validation) { const result = field.validation(value) if (typeof result === "boolean") { valid = result } else { valid = result.valid customMessage = result.message ?? "" } } else if (pattern) { valid = validateInput(value, pattern) } setIsValid(valid) setValidationMessage( valid ? "" : customMessage || context.i18n.validation.invalid ) } else { setIsValid(true) setValidationMessage("") } onBlur?.(event) } function handleKeyDown(event: React.KeyboardEvent) { if ( !isValid && ![ "Tab", "Escape", "Enter", "ArrowUp", "ArrowDown", "ArrowLeft", "ArrowRight", ].includes(event.key) ) { setIsValid(true) setValidationMessage("") } onKeyDown?.(event) } return ( {field?.prefix ? ( {field.prefix} ) : null} {!isValid && validationMessage ? (

{validationMessage}

) : null} {field?.suffix ? ( {field.suffix} ) : null} ) } function FilterRemoveButton({ icon = , ...props }: React.ButtonHTMLAttributes & { icon?: React.ReactNode }) { const context = useFilterContext() return ( ) } function FilterOperatorDropdown({ field, operator, values, onChange, }: { field: FilterFieldConfig operator: string values: T[] onChange: (operator: string) => void }) { const context = useFilterContext() const operators = getOperatorsForField(field, values, context.i18n) const operatorLabel = operators.find((item) => item.value === operator)?.label ?? context.i18n.helpers.formatOperator(operator) return ( {operators.map((item) => ( onChange(item.value)} className="flex items-center justify-between data-highlighted:bg-accent data-highlighted:text-accent-foreground" > {item.label} ))} ) } function SelectOptionsPopover({ field, values, onChange, onClose, inline = false, }: { field: FilterFieldConfig values: T[] onChange: (values: T[]) => void onClose?: () => void inline?: boolean }) { const [open, setOpen] = React.useState(false) const [searchInput, setSearchInput] = React.useState("") const [highlightedIndex, setHighlightedIndex] = React.useState(-1) const keyboardNavigationRef = React.useRef(false) const inputRef = React.useRef(null) const context = useFilterContext() const baseId = React.useId() const isMultiSelect = field.type === "multiselect" || values.length > 1 const effectiveValues = field.value !== undefined ? field.value : values const selectedOptions = field.options?.filter((item) => effectiveValues.includes(item.value)) ?? [] const unselectedOptions = field.options?.filter((item) => !effectiveValues.includes(item.value)) ?? [] const filteredSelectedOptions = selectedOptions const filteredUnselectedOptions = unselectedOptions.filter((item) => item.label.toLowerCase().includes(searchInput.toLowerCase()) ) const allFilteredOptions = React.useMemo( () => [...filteredSelectedOptions, ...filteredUnselectedOptions], [filteredSelectedOptions, filteredUnselectedOptions] ) React.useEffect(() => { setHighlightedIndex(-1) }, [searchInput, open]) React.useEffect(() => { if (highlightedIndex >= 0 && open && keyboardNavigationRef.current) { document .getElementById(`${baseId}-item-${highlightedIndex}`) ?.scrollIntoView({ block: "nearest" }) } }, [baseId, highlightedIndex, open]) function handleClose() { setOpen(false) onClose?.() } function updateValues(next: T[]) { if (field.onValueChange) { field.onValueChange(next) } else { onChange(next) } } function renderMenuContent() { return ( <> {field.searchable !== false ? ( <> = 0 ? `${baseId}-item-${highlightedIndex}` : undefined } placeholder={context.i18n.placeholders.searchField( field.label ?? "" )} className={cn( "h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none", "focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0" )} value={searchInput} onChange={(event) => setSearchInput(event.target.value)} onClick={(event) => event.stopPropagation()} onKeyDown={(event) => { if (event.key === "ArrowDown") { event.preventDefault() keyboardNavigationRef.current = true if (allFilteredOptions.length > 0) { setHighlightedIndex((previous) => previous < allFilteredOptions.length - 1 ? previous + 1 : 0 ) } } else if (event.key === "ArrowUp") { event.preventDefault() keyboardNavigationRef.current = true if (allFilteredOptions.length > 0) { setHighlightedIndex((previous) => previous > 0 ? previous - 1 : allFilteredOptions.length - 1 ) } } else if (event.key === "ArrowLeft") { event.preventDefault() setOpen(false) } else if (event.key === "Enter" && highlightedIndex >= 0) { event.preventDefault() const option = allFilteredOptions[highlightedIndex] if (option) { const isSelected = effectiveValues.includes(option.value) const next = isSelected ? effectiveValues.filter( (value) => value !== option.value ) : isMultiSelect ? [...effectiveValues, option.value] : [option.value] if ( !isSelected && isMultiSelect && field.maxSelections && next.length > field.maxSelections ) { return } updateValues(next as T[]) if (!isMultiSelect) handleClose() } } event.stopPropagation() }} /> ) : null}

) } if (inline) { return

{renderMenuContent()}

} return ( { setOpen(nextOpen) if (!nextOpen) { window.setTimeout(() => setSearchInput(""), 200) } }} > {renderMenuContent()} ) } function FilterValueSelector({ field, values, onChange, operator, autoFocus, }: { field: FilterFieldConfig values: T[] onChange: (values: T[]) => void operator: string autoFocus?: boolean }) { const context = useFilterContext() if (operator === "empty" || operator === "not_empty") return null if (field.customRenderer) { return ( {field.customRenderer({ field, values, onChange, operator })} ) } if (field.type === "text") { return ( onChange([event.target.value] as T[])} placeholder={field.placeholder} pattern={field.pattern} field={field} className={cn("w-36", field.className)} autoFocus={autoFocus} /> ) } return ( ) } export interface FiltersContentProps { filters: Filter[] fields: FilterFieldsConfig onChange: (filters: Filter[]) => void } export function FiltersContent({ filters, fields, onChange, }: FiltersContentProps) { const context = useFilterContext() const fieldsMap = React.useMemo(() => getFieldsMap(fields), [fields]) const updateFilter = React.useCallback( (filterId: string, updates: Partial>) => { onChange( filters.map((filter) => { if (filter.id !== filterId) return filter const updatedFilter = { ...filter, ...updates } if ( updates.operator === "empty" || updates.operator === "not_empty" ) { updatedFilter.values = [] as T[] } return updatedFilter }) ) }, [filters, onChange] ) const removeFilter = React.useCallback( (filterId: string) => { onChange(filters.filter((filter) => filter.id !== filterId)) }, [filters, onChange] ) return (

{filters.map((filter) => { const field = fieldsMap[filter.field] if (!field) return null return ( {field.icon} {field.label} field={field} operator={filter.operator} values={filter.values} onChange={(operator) => updateFilter(filter.id, { operator })} /> field={field} values={filter.values} onChange={(values) => updateFilter(filter.id, { values })} operator={filter.operator} autoFocus={false} /> removeFilter(filter.id)} /> ) })}

) } export interface FiltersProps { filters: Filter[] fields: FilterFieldsConfig onChange: (filters: Filter[]) => void className?: string variant?: "solid" | "default" size?: "sm" | "default" | "lg" radius?: "default" | "full" i18n?: Partial< Omit< FilterI18nConfig, "operators" | "placeholders" | "helpers" | "validation" > > & { operators?: Partial placeholders?: Partial helpers?: Partial validation?: Partial } showSearchInput?: boolean trigger?: React.ReactNode allowMultiple?: boolean menuPopupClassName?: string collapseAddButton?: boolean enableShortcut?: boolean shortcutKey?: string shortcutLabel?: string } function FilterSubmenuContent({ field, currentValues, isMultiSelect, onToggle, i18n, isActive, onActive, onBack, onClose, }: { field: FilterFieldConfig currentValues: T[] isMultiSelect: boolean onToggle: (value: T, isSelected: boolean) => void i18n: FilterI18nConfig isActive?: boolean onActive?: () => void onBack?: () => void onClose?: () => void }) { const [searchInput, setSearchInput] = React.useState("") const [highlightedIndex, setHighlightedIndex] = React.useState(-1) const keyboardNavigationRef = React.useRef(false) const inputRef = React.useRef(null) const baseId = React.useId() const filteredOptions = React.useMemo(() => { return ( field.options?.filter((option) => { const isSelected = currentValues.includes(option.value) if (isSelected || !searchInput) return true return option.label.toLowerCase().includes(searchInput.toLowerCase()) }) ?? [] ) }, [currentValues, field.options, searchInput]) React.useEffect(() => { setHighlightedIndex(-1) }, [searchInput]) React.useEffect(() => { if (highlightedIndex >= 0 && isActive && keyboardNavigationRef.current) { document .getElementById(`${baseId}-item-${highlightedIndex}`) ?.scrollIntoView({ block: "nearest" }) } }, [baseId, highlightedIndex, isActive]) React.useEffect(() => { if (isActive && filteredOptions.length > 0) { setHighlightedIndex(0) } }, [filteredOptions.length, isActive]) function handleOptionToggle(option: FilterOption) { onToggle(option.value as T, currentValues.includes(option.value)) if (!isMultiSelect) { onBack?.() } } function handleKeyDown(event: React.KeyboardEvent) { if (event.key === "ArrowDown") { event.preventDefault() keyboardNavigationRef.current = true if (filteredOptions.length > 0) { setHighlightedIndex((previous) => previous < filteredOptions.length - 1 ? previous + 1 : 0 ) } } else if (event.key === "ArrowUp") { event.preventDefault() keyboardNavigationRef.current = true if (filteredOptions.length > 0) { setHighlightedIndex((previous) => previous > 0 ? previous - 1 : filteredOptions.length - 1 ) } } else if (event.key === "ArrowLeft") { event.preventDefault() onBack?.() } else if (event.key === "Enter" && highlightedIndex >= 0) { event.preventDefault() const option = filteredOptions[highlightedIndex] if (option) handleOptionToggle(option) } else if (event.key === "Escape") { event.preventDefault() onClose?.() } event.stopPropagation() } return (

{field.searchable !== false ? ( <> = 0 ? `${baseId}-item-${highlightedIndex}` : undefined } placeholder={i18n.placeholders.searchField(field.label ?? "")} className={cn( "h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none", "focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0" )} value={searchInput} onChange={(event) => setSearchInput(event.target.value)} onClick={(event) => event.stopPropagation()} onKeyDown={handleKeyDown} /> ) : null}

) } export function Filters({ filters, fields, onChange, className, variant = "default", size = "default", radius = "default", i18n, showSearchInput = true, trigger, allowMultiple = true, menuPopupClassName, enableShortcut = false, shortcutKey = "f", shortcutLabel = "F", }: FiltersProps) { const [addFilterOpen, setAddFilterOpen] = React.useState(false) const [menuSearchInput, setMenuSearchInput] = React.useState("") const [activeMenu, setActiveMenu] = React.useState("root") const [openSubMenu, setOpenSubMenu] = React.useState(null) const [highlightedIndex, setHighlightedIndex] = React.useState(-1) const keyboardNavigationRef = React.useRef(false) const [lastAddedFilterId, setLastAddedFilterId] = React.useState< string | null >(null) const [sessionFilterIds, setSessionFilterIds] = React.useState< Record >({}) const rootInputRef = React.useRef(null) const rootId = React.useId() const mergedI18n: FilterI18nConfig = { ...DEFAULT_I18N, ...i18n, operators: { ...DEFAULT_I18N.operators, ...i18n?.operators }, placeholders: { ...DEFAULT_I18N.placeholders, ...i18n?.placeholders }, validation: { ...DEFAULT_I18N.validation, ...i18n?.validation }, helpers: { ...DEFAULT_I18N.helpers, ...i18n?.helpers }, } const fieldsMap = React.useMemo(() => getFieldsMap(fields), [fields]) const selectableFields = React.useMemo(() => { return flattenFields(fields).filter((field) => { if (!field.key || field.type === "separator") return false if (allowMultiple) return true return !filters.some((filter) => filter.field === field.key) }) }, [allowMultiple, fields, filters]) const filteredFields = React.useMemo(() => { return selectableFields.filter( (field) => !menuSearchInput || field.label?.toLowerCase().includes(menuSearchInput.toLowerCase()) ) }, [menuSearchInput, selectableFields]) React.useEffect(() => { if (!enableShortcut) return undefined function handleKeyDown(event: KeyboardEvent) { if ( event.key.toLowerCase() === shortcutKey.toLowerCase() && !addFilterOpen && !( document.activeElement instanceof HTMLInputElement || document.activeElement instanceof HTMLTextAreaElement ) ) { event.preventDefault() setAddFilterOpen(true) } } window.addEventListener("keydown", handleKeyDown) return () => window.removeEventListener("keydown", handleKeyDown) }, [addFilterOpen, enableShortcut, shortcutKey]) React.useEffect(() => { setHighlightedIndex(-1) }, [menuSearchInput]) React.useEffect(() => { if (highlightedIndex >= 0 && addFilterOpen && keyboardNavigationRef.current) { document .getElementById(`${rootId}-item-${highlightedIndex}`) ?.scrollIntoView({ block: "nearest" }) } }, [addFilterOpen, highlightedIndex, rootId]) React.useEffect(() => { if (!addFilterOpen) setOpenSubMenu(null) }, [addFilterOpen]) React.useEffect(() => { if (!lastAddedFilterId) return undefined const timer = window.setTimeout(() => setLastAddedFilterId(null), 1000) return () => window.clearTimeout(timer) }, [lastAddedFilterId]) React.useEffect(() => { if (addFilterOpen && filteredFields.length > 0) { setHighlightedIndex(0) } }, [addFilterOpen, filteredFields.length]) const updateFilter = React.useCallback( (filterId: string, updates: Partial>) => { onChange( filters.map((filter) => { if (filter.id !== filterId) return filter const updatedFilter = { ...filter, ...updates } if ( updates.operator === "empty" || updates.operator === "not_empty" ) { updatedFilter.values = [] as T[] } return updatedFilter }) ) }, [filters, onChange] ) const removeFilter = React.useCallback( (filterId: string) => { onChange(filters.filter((filter) => filter.id !== filterId)) }, [filters, onChange] ) const addFilter = React.useCallback( (fieldKey: string) => { const field = fieldsMap[fieldKey] if (!field?.key) return const defaultOperator = field.defaultOperator ?? (field.type === "multiselect" ? "is_any_of" : "is") const defaultValues: unknown[] = field.type === "text" ? [""] : [] const newFilter = createFilter( fieldKey, defaultOperator, defaultValues as T[] ) setLastAddedFilterId(newFilter.id) onChange([...filters, newFilter]) setAddFilterOpen(false) setMenuSearchInput("") }, [fieldsMap, filters, onChange] ) function handleRootKeyDown(event: React.KeyboardEvent) { if (event.key === "ArrowDown") { event.preventDefault() keyboardNavigationRef.current = true if (filteredFields.length > 0) { setHighlightedIndex((previous) => previous < filteredFields.length - 1 ? previous + 1 : 0 ) } } else if (event.key === "ArrowUp") { event.preventDefault() keyboardNavigationRef.current = true if (filteredFields.length > 0) { setHighlightedIndex((previous) => previous > 0 ? previous - 1 : filteredFields.length - 1 ) } } else if ( (event.key === "ArrowRight" || event.key === "ArrowLeft") && highlightedIndex >= 0 ) { const field = filteredFields[highlightedIndex] const hasSubMenu = field && (field.type === "select" || field.type === "multiselect") && field.options?.length if (event.key === "ArrowRight" && hasSubMenu) { event.preventDefault() setOpenSubMenu(field.key ?? null) setActiveMenu(field.key ?? "root") } else if (event.key === "ArrowLeft") { event.preventDefault() if (openSubMenu) { setOpenSubMenu(null) setActiveMenu("root") } } } else if (event.key === "Enter" && highlightedIndex >= 0) { event.preventDefault() const field = filteredFields[highlightedIndex] if (field.key) { const hasSubMenu = (field.type === "select" || field.type === "multiselect") && field.options?.length if (!hasSubMenu) { addFilter(field.key) } else { setOpenSubMenu((previous) => previous === field.key ? null : (field.key ?? null) ) setActiveMenu((previous) => previous === field.key ? "root" : (field.key ?? "root") ) } } } else if (event.key === "Escape") { setAddFilterOpen(false) } event.stopPropagation() } return (

{selectableFields.length > 0 ? ( { setAddFilterOpen(open) if (!open) { setMenuSearchInput("") setSessionFilterIds({}) } else { setActiveMenu("root") } }} > {trigger ?? ( )} {showSearchInput ? ( <>

= 0 ? `${rootId}-item-${highlightedIndex}` : undefined } placeholder={mergedI18n.searchFields} className={cn( "h-8 rounded-none border-0 bg-transparent! px-2 text-sm shadow-none", "focus-visible:border-border focus-visible:ring-0 focus-visible:ring-offset-0" )} value={menuSearchInput} onChange={(event) => setMenuSearchInput(event.target.value) } onClick={(event) => event.stopPropagation()} onKeyDown={handleRootKeyDown} /> {enableShortcut && shortcutLabel ? ( {shortcutLabel} ) : null}

) : null}

) : null} {filters.map((filter) => { const field = fieldsMap[filter.field] if (!field) return null return ( {field.icon} {field.label} field={field} operator={filter.operator} values={filter.values} onChange={(operator) => updateFilter(filter.id, { operator })} /> field={field} values={filter.values} operator={filter.operator} onChange={(values) => updateFilter(filter.id, { values })} autoFocus={filter.id === lastAddedFilterId} /> removeFilter(filter.id)} /> ) })}

) } export function createFilter( field: string, operator?: string, values: T[] = [] ): Filter { return { id: `${Date.now()}-${Math.random().toString(36).substring(2, 11)}`, field, operator: operator ?? "is", values, } } export function createFilterGroup( id: string, label: string, fields: FilterFieldConfig[], initialFilters: Filter[] = [] ): FilterGroup { return { id, label, filters: initialFilters, fields, } } 4d:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","@number-flow/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40number-flow%2Freact","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"@number-flow/react"}]]}]}],["$","li","class-variance-authority",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"class-variance-authority"}]]}]}],["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}],["$","li","motion",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/motion","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"motion"}]]}]}]]}],["$","$L4e",null,{"namespace":"@corr","registryDependencies":["badge","button","card","dropdown-menu","input","input-group","kbd","scroll-area","separator","tooltip"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"registry/corr/components/status-page.tsx","content":"$50","type":"registry:block"},{"path":"registry/corr/components/animated-number.tsx","content":"\"use client\"\n\nimport NumberFlow, { type NumberFlowProps } from \"@number-flow/react\"\n\nimport { cn } from \"@/lib/utils\"\n\nexport type AnimatedNumberProps = Omit & {\n value: number\n}\n\nexport function AnimatedNumber({\n value,\n className,\n willChange = true,\n ...props\n}: AnimatedNumberProps) {\n return (\n \n )\n}\n","type":"registry:component"},{"path":"registry/corr/components/filters.tsx","content":"$51","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]