49: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"] 4a: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"] 4b:T17dd,"use client"; // easeui.dev/components/motion/tabs import { MotionConfig, motion, useReducedMotion } from "motion/react"; import { createContext, type KeyboardEvent, type ReactNode, useCallback, useContext, useId, useMemo, useState, } from "react"; import { cn } from "@/lib/utils"; type Variant = "pill" | "segment" | "underline"; interface TabsContextValue { value: string; select: (value: string) => void; baseId: string; variant: Variant; } const TabsContext = createContext(null); function useTabs(part: string) { const ctx = useContext(TabsContext); if (!ctx) throw new Error(`${part} must be used inside `); return ctx; } const EASE = [0.23, 1, 0.32, 1] as const; // The indicator glides between tabs. A tween with no bounce, so a scrolling // tab list never overshoots and flashes a scrollbar. const INDICATOR_TRANSITION = { duration: 0.2, ease: EASE } as const; const LIST_CLASS: Record = { pill: "inline-flex items-center gap-1 rounded-full bg-muted p-1 shadow-[0_0_0_1px_var(--border)]", segment: "inline-flex items-center gap-0.5 rounded-lg bg-muted p-0.5 shadow-[0_0_0_1px_var(--border)]", underline: "flex items-center gap-5 border-b border-border", }; const TRIGGER_CLASS: Record = { pill: "min-h-9 rounded-full px-3.5", segment: "min-h-8 rounded-md px-3", underline: "-mb-px min-h-11 px-0.5", }; const INDICATOR_CLASS: Record = { pill: "absolute inset-0 rounded-full bg-background shadow-[0_1px_2px_rgb(0_0_0/0.12)]", segment: "absolute inset-0 rounded-md bg-background shadow-[0_1px_2px_rgb(0_0_0/0.12)]", underline: "absolute inset-x-0 bottom-0 h-0.5 rounded-full bg-foreground", }; export interface TabsProps { value?: string; defaultValue?: string; onValueChange?: (value: string) => void; /** Visual style. Default "pill". */ variant?: Variant; className?: string; children: ReactNode; } export function Tabs({ value, defaultValue, onValueChange, variant = "pill", className, children, }: TabsProps) { const [inner, setInner] = useState(defaultValue ?? ""); const baseId = useId(); const reduce = useReducedMotion(); const current = value ?? inner; const select = useCallback( (next: string) => { if (value === undefined) setInner(next); onValueChange?.(next); }, [value, onValueChange], ); const ctx = useMemo( () => ({ value: current, select, baseId, variant }), [current, select, baseId, variant], ); return ( {/* layoutRoot keeps the indicator measuring inside this component, so a fixed or scrolled parent never turns scroll offset into movement. */} {children} ); } const NAV_KEYS = new Set(["ArrowRight", "ArrowLeft", "Home", "End"]); export function TabsList({ className, children }: { className?: string; children: ReactNode }) { const { variant } = useTabs("TabsList"); // Arrow keys, Home, and End move between tabs and select them. const onKeyDown = (event: KeyboardEvent) => { if (!NAV_KEYS.has(event.key)) return; const tabs = Array.from( event.currentTarget.querySelectorAll('[role="tab"]:not(:disabled)'), ); const index = tabs.indexOf(document.activeElement as HTMLButtonElement); if (index < 0) return; event.preventDefault(); const next = event.key === "Home" ? 0 : event.key === "End" ? tabs.length - 1 : (index + (event.key === "ArrowRight" ? 1 : -1) + tabs.length) % tabs.length; tabs[next].focus(); tabs[next].click(); }; return (

{children}

); } export interface TabsTriggerProps { value: string; className?: string; indicatorClassName?: string; children: ReactNode; } export function TabsTrigger({ value, className, indicatorClassName, children }: TabsTriggerProps) { const ctx = useTabs("TabsTrigger"); const active = ctx.value === value; return ( ); } export interface TabsContentProps { value: string; className?: string; children: ReactNode; } export function TabsContent({ value, className, children }: TabsContentProps) { const ctx = useTabs("TabsContent"); const reduce = useReducedMotion(); const active = ctx.value === value; // Inactive panels stay in the DOM, hidden, so their content is still in the // server HTML. The active panel fades in. return ( ); } 48:["$","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","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"}]]}]}],["$","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"}]]}]}]]}],["$","$L49",null,{"namespace":"@easeui","registryDependencies":[]}]]}],null]}],["$","$L4a",null,{"files":[{"path":"components/motion/tabs.tsx","content":"$4b","type":"registry:component","target":"@components/motion/tabs.tsx"},{"path":"lib/utils.ts","content":"import { clsx, type ClassValue } from \"clsx\"\nimport { twMerge } from \"tailwind-merge\"\n\nexport function cn(...inputs: ClassValue[]) {\n return twMerge(clsx(inputs))\n}\n","type":"registry:lib","target":"@lib/utils.ts"}],"className":"h-[70svh] min-h-80"}]]}]