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:T17bf,"use client"; import { memo, useCallback, useEffect, useMemo, useState } from "react"; import { cn } from "@/lib/utils"; import { defaultFormatDate, defaultFormatDateRange, } from "./lib/format-default"; import { ChipRow } from "./parts/chip-row"; import { DateRangePicker } from "./parts/date-range-picker"; import { SearchInput } from "./parts/search-input"; import { DEFAULT_LABELS, type DateRange, type FilterBarCategoryItem, type FilterBarProps, type FilterBarValue, } from "./types"; const ALIGN_CLASSES = { left: "items-start text-left", center: "items-center text-center", right: "items-end text-right", } as const; const normalizeCategories = ( input: FilterBarCategoryItem[] | string[] | undefined, ): FilterBarCategoryItem[] => { if (!input) return []; return input.map((entry) => typeof entry === "string" ? { value: entry, label: entry } : entry, ); }; /** * FilterBar — composite filter bar with search + category chips + date-range * + optional results count. Each sub-control is independently controlled-or- * uncontrolled; a combined `onChange` fires on any change. */ function FilterBarImpl(props: FilterBarProps) { const { categories, search: controlledSearch, defaultSearch = "", onSearchChange, searchDebounceMs = 250, category: controlledCategory, defaultCategory = null, onCategoryChange, dateRange: controlledDateRange, defaultDateRange = { from: undefined, to: undefined }, onDateRangeChange, onChange, resultsCount, align = "center", hideSearch = false, hideCategories = false, hideDateRange = false, labels: labelsProp, formatDateRange = defaultFormatDateRange, formatDate = defaultFormatDate, className, } = props; const labels = useMemo( () => ({ ...DEFAULT_LABELS, ...labelsProp }), [labelsProp], ); const normalizedCategories = useMemo( () => normalizeCategories(categories), [categories], ); // ─── Search state ──────────────────────────────────────── const [internalSearch, setInternalSearch] = useState(defaultSearch); const isSearchControlled = controlledSearch !== undefined; const search = isSearchControlled ? controlledSearch : internalSearch; const handleSearchChange = useCallback( (next: string) => { if (!isSearchControlled) setInternalSearch(next); onSearchChange?.(next); }, [isSearchControlled, onSearchChange], ); // ─── Category state ────────────────────────────────────── const [internalCategory, setInternalCategory] = useState( defaultCategory, ); const isCategoryControlled = controlledCategory !== undefined; const category = isCategoryControlled ? controlledCategory : internalCategory; const handleCategoryChange = useCallback( (next: string | null) => { if (!isCategoryControlled) setInternalCategory(next); onCategoryChange?.(next); }, [isCategoryControlled, onCategoryChange], ); // ─── Date range state ──────────────────────────────────── const [internalDateRange, setInternalDateRange] = useState(defaultDateRange); const isDateRangeControlled = controlledDateRange !== undefined; const dateRange = isDateRangeControlled ? controlledDateRange : internalDateRange; const handleDateRangeChange = useCallback( (next: DateRange) => { if (!isDateRangeControlled) setInternalDateRange(next); onDateRangeChange?.(next); }, [isDateRangeControlled, onDateRangeChange], ); // ─── Combined onChange ─────────────────────────────────── useEffect(() => { if (!onChange) return; onChange({ search, category, dateRange }); // We intentionally fire on every change (including initial mount). // Consumers wanting initial-render skip should track it themselves. }, [search, category, dateRange, onChange]); const filtersRowVisible = !hideCategories || !hideDateRange; return (

{!hideSearch ? ( ) : null} {filtersRowVisible ? (

{!hideCategories && normalizedCategories.length > 0 ? ( ) : null} {!hideDateRange ? ( ) : null}

) : null} {resultsCount !== undefined ? (

{labels.resultsCountText(resultsCount)}

) : null}

); } export const FilterBar = memo(FilterBarImpl); FilterBar.displayName = "FilterBar"; export default FilterBar; // Re-export the value type for consumers importing from the root file. export type { FilterBarValue }; 51:Tc72,export interface DateRange { from?: Date; to?: Date; } export interface FilterBarValue { search: string; category: string | null; dateRange: DateRange; } export interface FilterBarCategoryItem { value: string; label?: string; } export interface FilterBarLabels { /** Search placeholder. Default: 'Search…'. */ searchPlaceholder?: string; /** Search input aria-label. Default: 'Search'. */ searchAriaLabel?: string; /** "All" chip label. Default: 'All'. */ allLabel?: string; /** Date trigger label when no range set. Default: 'Filter by date'. */ dateButtonText?: string; /** Aria-label on the clear-date button. Default: 'Clear date filter'. */ clearDateLabel?: string; /** Visible text on the clear-date button. Default: 'Clear date'. */ clearDateText?: string; /** Results count formatter. Default: (n) => `${n} items found`. */ resultsCountText?: (count: number) => string; /** ARIA group label for the chip row. Default: 'Filter by category'. */ categoriesAriaLabel?: string; } export type FilterBarAlign = "left" | "center" | "right"; export interface FilterBarProps { /** Categories to render in the chip row. Pass `string[]` as shorthand. */ categories?: FilterBarCategoryItem[] | string[]; // ─── Search (controlled-or-uncontrolled) ────────────── search?: string; defaultSearch?: string; onSearchChange?: (search: string) => void; /** Debounce in ms for uncontrolled mode. Default: 250. */ searchDebounceMs?: number; // ─── Category (controlled-or-uncontrolled) ──────────── category?: string | null; defaultCategory?: string | null; onCategoryChange?: (category: string | null) => void; // ─── Date range (controlled-or-uncontrolled) ────────── dateRange?: DateRange; defaultDateRange?: DateRange; onDateRangeChange?: (range: DateRange) => void; // ─── Combined emitter ───────────────────────────────── onChange?: (value: FilterBarValue) => void; // ─── Display ────────────────────────────────────────── resultsCount?: number; align?: FilterBarAlign; hideSearch?: boolean; hideCategories?: boolean; hideDateRange?: boolean; // ─── i18n + theming ─────────────────────────────────── labels?: FilterBarLabels; formatDateRange?: (range: { from: Date; to: Date }) => string; formatDate?: (date: Date) => string; // ─── Overrides ──────────────────────────────────────── className?: string; } export const DEFAULT_LABELS: Required = { searchPlaceholder: "Search…", searchAriaLabel: "Search", allLabel: "All", dateButtonText: "Filter by date", clearDateLabel: "Clear date filter", clearDateText: "Clear date", resultsCountText: (count) => `${count} items found`, categoriesAriaLabel: "Filter by category", }; 52:T769,"use client"; import { useEffect, useState } from "react"; import { Search } from "lucide-react"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; /** * Search input with magnifier icon. Internal debounce when running in * uncontrolled mode (`isControlled = false`); controlled mode passes * value through immediately. */ export function SearchInput({ value, onChange, isControlled, debounceMs, placeholder, ariaLabel, className, }: { value: string; onChange: (next: string) => void; isControlled: boolean; debounceMs: number; placeholder: string; ariaLabel: string; className?: string; }) { // Local state is the source of truth for keystrokes in uncontrolled mode. // In controlled mode the prop is the source of truth and `localValue` // is unused (so its initial seed doesn't matter). const [localValue, setLocalValue] = useState(value); // Debounce localValue → upstream onChange in uncontrolled mode only. useEffect(() => { if (isControlled) return; if (localValue === value) return; const id = setTimeout(() => onChange(localValue), debounceMs); return () => clearTimeout(id); }, [localValue, value, isControlled, debounceMs, onChange]); return ( ); } 53:T5bc,import { Button } from "@/components/ui/button"; import { cn } from "@/lib/utils"; import type { FilterBarCategoryItem } from "../types"; /** * Pill-row of category chips. The first chip is the "All" sentinel — * clicking it sets value to null (clears the category filter). * * Active chip uses Button `variant="default"` (filled lime), inactive uses * `variant="outline"`. Each chip is a real button with `aria-pressed`. */ export function ChipRow({ items, value, onChange, allLabel, ariaLabel, className, }: { items: FilterBarCategoryItem[]; value: string | null; onChange: (value: string | null) => void; allLabel: string; ariaLabel: string; className?: string; }) { return (

{items.map((item) => ( ))}

); } 54:Ta49,"use client"; import { Calendar as CalendarIcon, ChevronDown, X } from "lucide-react"; import { Button, buttonVariants } from "@/components/ui/button"; import { Calendar } from "@/components/ui/calendar"; import { Popover, PopoverContent, PopoverTrigger, } from "@/components/ui/popover"; import { cn } from "@/lib/utils"; import type { DateRange } from "../types"; /** * Date-range Popover. Renders a 2-month calendar in range mode. * Conditional clear-X button appears next to the trigger when a range is set. * * Composes shadcn Popover + Calendar primitives. Calendar wraps * react-day-picker; date-fns is a transitive peer. */ export function DateRangePicker({ value, onChange, buttonText, clearLabel, clearText, formatRange, formatDate, }: { value: DateRange; onChange: (next: DateRange) => void; buttonText: string; clearLabel: string; clearText: string; formatRange: (range: { from: Date; to: Date }) => string; formatDate: (date: Date) => string; }) { const hasRange = value.from !== undefined || value.to !== undefined; let triggerText = buttonText; if (value.from && value.to) { triggerText = formatRange({ from: value.from, to: value.to }); } else if (value.from) { triggerText = formatDate(value.from); } return (

{/* F-cross-13: no `asChild` — render the trigger as the button directly (both Radix + Base UI pass native props through to a ) : null}

); } 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","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","react-day-picker",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/react-day-picker","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":"react-day-picker"}]]}]}],["$","li","date-fns",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/date-fns","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":"date-fns"}]]}]}]]}],["$","$L4e",null,{"namespace":"@ilinxa","registryDependencies":["input","button","popover","calendar"]}]]}],null]}],["$","$L4f",null,{"files":[{"path":"src/registry/components/forms/filter-bar/filter-bar.tsx","content":"$50","type":"registry:component","target":"components/filter-bar/filter-bar.tsx"},{"path":"src/registry/components/forms/filter-bar/index.ts","content":"export { FilterBar, default } from \"./filter-bar\";\nexport type {\n DateRange,\n FilterBarAlign,\n FilterBarCategoryItem,\n FilterBarLabels,\n FilterBarProps,\n FilterBarValue,\n} from \"./types\";\n","type":"registry:component","target":"components/filter-bar/index.ts"},{"path":"src/registry/components/forms/filter-bar/types.ts","content":"$51","type":"registry:component","target":"components/filter-bar/types.ts"},{"path":"src/registry/components/forms/filter-bar/lib/format-default.ts","content":"/**\n * Default date formatters using native `Intl.DateTimeFormat`. Browser-locale\n * aware by default; consumers override via `formatDate` / `formatDateRange`\n * props for full control.\n */\n\nconst SHORT = new Intl.DateTimeFormat(undefined, {\n day: \"numeric\",\n month: \"short\",\n});\n\nconst LONG = new Intl.DateTimeFormat(undefined, {\n day: \"numeric\",\n month: \"long\",\n year: \"numeric\",\n});\n\nexport const defaultFormatDate = (date: Date): string => LONG.format(date);\n\nexport const defaultFormatDateRange = ({\n from,\n to,\n}: {\n from: Date;\n to: Date;\n}): string => `${SHORT.format(from)} - ${SHORT.format(to)}`;\n","type":"registry:component","target":"components/filter-bar/lib/format-default.ts"},{"path":"src/registry/components/forms/filter-bar/parts/search-input.tsx","content":"$52","type":"registry:component","target":"components/filter-bar/parts/search-input.tsx"},{"path":"src/registry/components/forms/filter-bar/parts/chip-row.tsx","content":"$53","type":"registry:component","target":"components/filter-bar/parts/chip-row.tsx"},{"path":"src/registry/components/forms/filter-bar/parts/date-range-picker.tsx","content":"$54","type":"registry:component","target":"components/filter-bar/parts/date-range-picker.tsx"}],"className":"h-[70svh] min-h-80"}]]}]