4c: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"RegistryDependencies"] 4d: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/3upr08c9vtj8w.js","/_next/static/immutable/chunks/2rwy6tq861e-y.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/2hlz_ivp-qrnh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2zoahorp76dll.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1d0aij627lbx2.js","/_next/static/immutable/chunks/1ud4fi_ghnsx-.js"],"FilesView"] 4e:T190e,import { useCallback, useRef, useState, type ChangeEvent, type ComponentProps, type FormEvent, } from "react" import { SearchIcon, XIcon } from "lucide-react" import { cn } from "@/lib/utils" import { Button } from "./button" import { InputGroup, InputGroupAddon, InputGroupInput } from "./input-group" import { SearchBarContext, useSearchBar } from "./search-bar-context" type SearchBarBaseProps = Omit< ComponentProps<"form">, "defaultValue" | "onSubmit" > & { disabled?: boolean invalid?: boolean onClear?: () => void onSubmit?: (value: string, event: FormEvent) => void readOnly?: boolean } type SearchBarValueProps = | { defaultValue?: string onValueChange?: (value: string) => void value?: never } | { defaultValue?: never onValueChange: (value: string) => void value: string } type SearchBarProps = SearchBarBaseProps & SearchBarValueProps type SearchBarInputAccessibleName = | { "aria-label": string; "aria-labelledby"?: string } | { "aria-label"?: never; "aria-labelledby": string } type SearchBarInputProps = Omit< ComponentProps, | "aria-label" | "aria-labelledby" | "defaultValue" | "disabled" | "onChange" | "readOnly" | "type" | "value" > & SearchBarInputAccessibleName & { onChange?: (event: ChangeEvent) => void } function assignInputRef( ref: SearchBarInputProps["ref"], node: HTMLInputElement | null, ) { if (typeof ref === "function") ref(node) else if (ref) ref.current = node } function SearchBar({ "aria-label": ariaLabel = "Search", children, className, defaultValue = "", disabled = false, invalid = false, onClear, onSubmit, onValueChange, readOnly = false, value: valueProp, ...props }: SearchBarProps) { const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue) const inputRef = useRef(null) const value = valueProp ?? uncontrolledValue const setValue = useCallback( (nextValue: string) => { if (valueProp === undefined) setUncontrolledValue(nextValue) onValueChange?.(nextValue) }, [onValueChange, valueProp], ) const clear = useCallback(() => { setValue("") onClear?.() inputRef.current?.focus() }, [onClear, setValue]) const setInputNode = useCallback((node: HTMLInputElement | null) => { inputRef.current = node }, []) return ( ) } function SearchBarInput({ className, onChange, ref, ...props }: SearchBarInputProps) { const context = useSearchBar() return ( { context.setInputNode(node) assignInputRef(ref, node) }} type="search" value={context.value} disabled={context.disabled} readOnly={context.readOnly} aria-invalid={context.invalid || undefined} className={cn( "h-full appearance-none px-1 text-m3-body-lg text-foreground placeholder:text-muted-foreground disabled:text-m3-on-surface/38", "[&::-webkit-search-cancel-button]:hidden", className, )} onChange={(event) => { onChange?.(event) if (!event.defaultPrevented) context.setValue(event.currentTarget.value) }} /> ) } function SearchBarLeading({ className, ...props }: ComponentProps<"div">) { return ( svg]:size-6", className)} /> ) } function SearchBarTrailing({ className, ...props }: ComponentProps<"div">) { return ( svg]:size-6", className)} /> ) } function SearchBarClear({ "aria-label": ariaLabel = "Clear search", onClick, ...props }: ComponentProps) { const context = useSearchBar() if (!context.value) return null return ( ) } function SearchBarSubmit({ "aria-label": ariaLabel = "Submit search", children, disabled, ...props }: ComponentProps) { const context = useSearchBar() return ( ) } export { SearchBar, SearchBarClear, SearchBarInput, SearchBarLeading, SearchBarSubmit, SearchBarTrailing, } export type { SearchBarInputProps, SearchBarProps } 4b:["$","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@^1.33.0",{"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@^1.33.0"}]]}]}]]}],["$","$L4c",null,{"namespace":"@materialcn","registryDependencies":["https://guillermo-rebolledo.github.io/materialcn/r/button.json","https://guillermo-rebolledo.github.io/materialcn/r/input-group.json","https://guillermo-rebolledo.github.io/materialcn/r/materialcn-theme.json","https://guillermo-rebolledo.github.io/materialcn/r/utils.json"]}]]}],null]}],["$","$L4d",null,{"files":[{"path":"src/components/ui/search-bar.tsx","content":"$4e","type":"registry:ui"},{"path":"src/components/ui/search-bar-context.ts","content":"import { createContext, useContext } from \"react\"\n\ntype SearchBarContextValue = {\n clear: () => void\n disabled: boolean\n invalid: boolean\n readOnly: boolean\n setInputNode: (node: HTMLInputElement | null) => void\n setValue: (value: string) => void\n value: string\n}\n\nconst SearchBarContext = createContext(null)\n\nfunction useSearchBar() {\n const context = useContext(SearchBarContext)\n if (!context) {\n throw new Error(\"SearchBar components must be used within \")\n }\n return context\n}\n\nexport { SearchBarContext, useSearchBar }\nexport type { SearchBarContextValue }\n","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]