52: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"] 53: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"] 54:T3ec2,"use client"; import * as React from "react"; import { AnimatePresence, MotionConfig, motion, useIsPresent, type HTMLMotionProps, } from "motion/react"; import { CheckIcon, ChevronDownIcon, GlobeIcon, SearchIcon, XIcon } from "lucide-react"; import { cn } from "@/lib/utils"; import { useControllableState } from "@/lib/use-controllable-state"; import { useListboxNavigation } from "@/lib/use-listbox-navigation"; import type { Locale } from "./types"; import { getFlag, getLanguageName, isRtl } from "./locale-data"; export type { Locale }; /** Per-part class overrides, merged after the defaults with `cn`. */ export interface LanguageSwitcherClassNames { /** The button that opens the menu */ trigger?: string; /** The floating menu panel */ content?: string; /** The search row, including its icon */ search?: string; /** The scrolling option list */ list?: string; /** Each option row */ item?: string; /** The empty-state message */ empty?: string; } /** State passed to `renderOption`. */ export interface LanguageSwitcherOptionState { /** The option is the selected locale */ selected: boolean; /** The option is highlighted by the keyboard or pointer */ active: boolean; /** Resolved display label */ label: string; /** Resolved flag emoji */ flag: string; } export interface LanguageSwitcherProps extends Omit< React.ComponentPropsWithoutRef<"div">, "defaultValue" | "onChange" > { /** Array of available locales — only `code` is required */ locales: Locale[]; /** Selected locale code. Provide this to control the component. */ value?: string; /** Initial selected locale code when uncontrolled (default: first locale's code) */ defaultValue?: string; /** Callback when locale changes */ onValueChange?: (code: string) => void; /** Show flag emojis next to locale names (default: false) */ showFlags?: boolean; /** Show the locale code beside each option, e.g. `fr` (default: false) */ showCode?: boolean; /** Display labels in native language or English (default: "english") */ label?: "native" | "english"; /** Max height of the scrolling option list, before it scrolls (default: "15rem") */ maxHeight?: number | string; /** Trigger style (default: "outline") */ variant?: "outline" | "ghost" | "secondary"; /** Trigger size (default: "default") */ size?: "sm" | "default" | "lg"; /** Edge of the trigger the menu lines up with, in reading direction (default: "start") */ align?: "start" | "end"; /** * Preferred side for the menu (default: "bottom"). It flips to the other side * when there is not enough room in the viewport. */ side?: "top" | "bottom"; /** Show the search field (default: true) */ searchable?: boolean; /** Placeholder for the search field (default: "Search languages...") */ searchPlaceholder?: string; /** Content shown when the search matches nothing (default: "No languages found.") */ emptyMessage?: React.ReactNode; /** Disable the trigger */ disabled?: boolean; /** Replace the content of each option row. The row keeps its button, role and state. */ renderOption?: (locale: Locale, state: LanguageSwitcherOptionState) => React.ReactNode; /** Per-part class overrides */ classNames?: LanguageSwitcherClassNames; } /** * The menu panel. While it plays its exit animation it is still mounted, so it * leaves the accessibility tree first: a closing menu is not a menu. */ const MenuPanel = React.forwardRef>( function MenuPanel(props, ref) { const isPresent = useIsPresent(); return ( ); }, ); const TRIGGER_VARIANTS = { outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:bg-input/30 dark:hover:bg-input/50 dark:aria-expanded:bg-input/50", ghost: "hover:bg-accent hover:text-accent-foreground aria-expanded:bg-accent aria-expanded:text-accent-foreground dark:hover:bg-accent/50", secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80 aria-expanded:bg-secondary/80", } as const; const TRIGGER_SIZES = { sm: "h-8 gap-1.5 rounded-md px-2.5", default: "h-9 gap-2 rounded-md px-3", lg: "h-10 gap-2 rounded-md px-4", } as const; export const LanguageSwitcher = React.forwardRef( function LanguageSwitcher( { locales, value, defaultValue, onValueChange, showFlags = false, showCode = false, label: labelMode = "english", maxHeight = "15rem", variant = "outline", size = "default", align = "start", side: preferredSide = "bottom", searchable = true, searchPlaceholder = "Search languages...", emptyMessage = "No languages found.", disabled = false, renderOption, classNames, className, onKeyDown, ...rest }, forwardedRef, ) { const [locale, setLocale] = useControllableState( value, defaultValue ?? locales[0]?.code ?? "", onValueChange, ); const [open, setOpen] = React.useState(false); const [search, setSearch] = React.useState(""); const [side, setSide] = React.useState(preferredSide); const ref = React.useRef(null); const inputRef = React.useRef(null); const triggerRef = React.useRef(null); const popupRef = React.useRef(null); React.useImperativeHandle(forwardedRef, () => ref.current as HTMLDivElement); const resolveLabel = (l: Locale) => l.label ?? getLanguageName(l.code, labelMode) ?? l.code; const activeLocale = locales.find((l) => l.code === locale); const activeLabel = activeLocale ? resolveLabel(activeLocale) : locale; const query = search.trim().toLowerCase(); const filtered = locales.filter( (l) => resolveLabel(l).toLowerCase().includes(query) || l.code.toLowerCase().includes(query), ); const nav = useListboxNavigation({ count: filtered.length, open, // Without a search field there is nothing to hold `aria-activedescendant`, // so focus moves onto the options themselves. strategy: searchable ? "activedescendant" : "roving", // Land on the current selection when the popup opens. initialIndex: filtered.findIndex((l) => l.code === locale), onClose: () => { setOpen(false); setSearch(""); }, onOpen: () => !disabled && setOpen(true), onSelect: (index) => { const picked = filtered[index]; if (picked) setLocale(picked.code); }, triggerRef: () => triggerRef.current, }); const dir = (activeLocale?.rtl ?? isRtl(locale)) ? "rtl" : "ltr"; React.useEffect(() => { function handleClickOutside(e: MouseEvent) { if (ref.current && !ref.current.contains(e.target as Node)) { setOpen(false); setSearch(""); } } document.addEventListener("mousedown", handleClickOutside); return () => document.removeEventListener("mousedown", handleClickOutside); }, []); React.useEffect(() => { if (open && searchable) inputRef.current?.focus(); }, [open, searchable]); // Flip to the other side when the preferred one has no room. Measured before // paint, so the menu never flashes on the wrong side. React.useLayoutEffect(() => { if (!open) return; const trigger = triggerRef.current; const popup = popupRef.current; if (!trigger || !popup) return; const rect = trigger.getBoundingClientRect(); const needed = popup.offsetHeight + 8; const below = window.innerHeight - rect.bottom; const above = rect.top; if (preferredSide === "bottom" && below < needed && above > below) setSide("top"); else if (preferredSide === "top" && above < needed && below > above) setSide("bottom"); else setSide(preferredSide); }, [open, preferredSide]); const offset = side === "bottom" ? -4 : 4; return (

{ nav.onKeyDown(event); onKeyDown?.(event); }} {...rest} > {open && ( {searchable && (

{ setSearch(e.target.value); nav.resetActive(); }} {...nav.comboboxProps} className="h-10 w-full min-w-0 bg-transparent py-3 text-sm outline-none placeholder:text-muted-foreground" /> {search && ( )}

)} {/* The listbox owns the options only — the search field above sits outside it, per ARIA. It scrolls on its own: the page never does. */} )}

); }, ); 51:["$","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","clsx",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/clsx","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":"clsx"}]]}]}],["$","li","tailwind-merge",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwind-merge","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":"tailwind-merge"}]]}]}],["$","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"}]]}]}]]}],["$","$L52",null,{"namespace":"@babelize","registryDependencies":["https://elements.babelize.co/r/locale-types.json","https://elements.babelize.co/r/locale-data.json","https://elements.babelize.co/r/use-controllable-state.json","https://elements.babelize.co/r/use-listbox-navigation.json"]}]]}],null]}],["$","$L53",null,{"files":[{"path":"ui/language-switcher.tsx","content":"$54","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]