50: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/1o6_421saitt-.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"] 51: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/1o6_421saitt-.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"] 52:T54fe,"use client"; import { mergeProps } from "@base-ui/react/merge-props"; import { useRender } from "@base-ui/react/use-render"; import { cn } from "cn"; import * as React from "react"; import { ScrollArea } from "@/components/ui/scroll-area"; export type TableProps = { bordered?: boolean; striped?: boolean; stripedRows?: boolean; hoverable?: boolean; rowDividers?: boolean; resizable?: boolean; roundedInset?: boolean; hideScrollbar?: boolean; scrollShadow?: "vertical" | "horizontal" | "both" | "none"; fadeColor?: string; viewportClassName?: string; } & React.ComponentProps<"table">; type TableInsetStyle = React.CSSProperties & Record<`--${string}`, string>; const tableContainerStyle: TableInsetStyle = { "--table-inset-radius": "var(--radius-lg)", "--table-scrollbar-bottom": "0px", "--table-scrollbar-top": "0px", }; const tableInsetOverlayStyle: React.CSSProperties = { bottom: "var(--table-scrollbar-bottom)", top: "var(--table-scrollbar-top)", }; const tableHorizontalScrollbarStyle: React.CSSProperties = { bottom: "var(--table-scrollbar-bottom)", }; const tableScrollbarCornerStyle: React.CSSProperties = { bottom: "var(--table-scrollbar-bottom)", }; const tableVerticalScrollbarStyle: React.CSSProperties = { bottom: "var(--table-scrollbar-bottom)", top: "var(--table-scrollbar-top)", }; const tableInsetCornerStyle: React.CSSProperties = { height: "var(--table-inset-radius)", width: "var(--table-inset-radius)", }; const tableInsetCornerBackgrounds = { bottomLeft: "radial-gradient(circle var(--table-inset-radius) at 100% 0, transparent calc(100% - 0.5px), var(--table-inset-mask) 100%)", bottomRight: "radial-gradient(circle var(--table-inset-radius) at 0 0, transparent calc(100% - 0.5px), var(--table-inset-mask) 100%)", topLeft: "radial-gradient(circle var(--table-inset-radius) at 100% 100%, transparent calc(100% - 0.5px), var(--table-inset-mask) 100%)", topRight: "radial-gradient(circle var(--table-inset-radius) at 0 100%, transparent calc(100% - 0.5px), var(--table-inset-mask) 100%)", } as const; type TableContextValue = { bordered: boolean; hoverable: boolean; rowDividers: boolean; resizable?: boolean; striped: boolean; }; const TableContext = React.createContext({ bordered: false, hoverable: true, rowDividers: true, resizable: false, striped: false, }); type TableSection = "header" | "body" | "footer"; const TableSectionContext = React.createContext("body"); function Table({ className, bordered = false, striped = false, stripedRows, hoverable = true, rowDividers = true, resizable = false, roundedInset = true, hideScrollbar = false, scrollShadow, fadeColor, viewportClassName, children, ...props }: TableProps) { const containerRef = React.useRef(null); const isStriped = Boolean(striped || stripedRows); const resolvedScrollShadow = scrollShadow ?? "none"; React.useLayoutEffect(() => { const container = containerRef.current; if (!container) return; const inset = container.querySelector( '[data-slot="table-inset"]' ); const table = container.querySelector( 'table[data-slot="table"]' ); const body = table?.tBodies[0]; if (!inset || !table || !body) { container.style.setProperty("--table-scrollbar-bottom", "100%"); return; } const measureBody = () => { const insetRect = inset.getBoundingClientRect(); const bodyRect = body.getBoundingClientRect(); const headerBottom = table.tHead?.getBoundingClientRect().bottom; const footerCell = table.tFoot?.querySelector("th, td"); const footerTop = footerCell?.getBoundingClientRect().top; const visibleBodyTop = Math.max( insetRect.top, bodyRect.top, headerBottom ?? insetRect.top ); const visibleBodyBottom = Math.min( insetRect.bottom, bodyRect.bottom, footerTop ?? insetRect.bottom ); const clampedBodyBottom = Math.max(visibleBodyTop, visibleBodyBottom); container.style.setProperty( "--table-scrollbar-top", `${Math.max(0, visibleBodyTop - insetRect.top)}px` ); container.style.setProperty( "--table-scrollbar-bottom", `${Math.max(0, insetRect.bottom - clampedBodyBottom)}px` ); }; measureBody(); let frame = 0; const scheduleMeasure = () => { if (frame) return; frame = requestAnimationFrame(() => { frame = 0; measureBody(); }); }; const viewport = container.querySelector( '[data-slot="scroll-area-viewport"]' ); const observer = new ResizeObserver(scheduleMeasure); observer.observe(inset); observer.observe(table); observer.observe(body); if (table.tHead) observer.observe(table.tHead); if (table.tFoot) observer.observe(table.tFoot); viewport?.addEventListener("scroll", scheduleMeasure, { passive: true }); return () => { observer.disconnect(); viewport?.removeEventListener("scroll", scheduleMeasure); if (frame) cancelAnimationFrame(frame); }; }); return (

{children}

{roundedInset ? (

) : null}

); } export type TableHeaderProps = useRender.ComponentProps<"thead">; function TableHeader({ className, render, ...props }: TableHeaderProps) { const defaultProps = { "data-slot": "table-header", className: cn( "[&_tr]:border-0", "[&_tr_th:has(+_th[data-empty])]:after:hidden", "sticky top-0 z-20", className ), }; return ( {useRender({ defaultTagName: "thead", render, props: mergeProps<"thead">(defaultProps, props), })} ); } export type TableBodyProps = useRender.ComponentProps<"tbody">; function TableBody({ className, render, ...props }: TableBodyProps) { const { bordered, rowDividers } = React.useContext(TableContext); const defaultProps = { "data-slot": "table-body", className: cn( "group-data-[rounded-inset=false]/table:[&_tr:first-child_td]:border-t", "group-data-[rounded-inset=false]/table:[&_tr:last-child_td]:border-b", "group-data-[rounded-inset=false]/table:[&_tr:has(+_tr:last-child[hidden])_td]:border-b", "group-data-[rounded-inset=false]/table:[&_tr_td:first-child]:border-l", "group-data-[rounded-inset=false]/table:[&_tr_td:last-child]:border-r", rowDividers && "[&_tr:not(:last-child)_td]:border-b", bordered && "[&_tr:not(:last-child)_td]:border-b [&_tr_td:not(:last-child)]:border-r", className ), }; return ( {useRender({ defaultTagName: "tbody", render, props: mergeProps<"tbody">(defaultProps, props), })} ); } export type TableFooterProps = useRender.ComponentProps<"tfoot">; function TableFooter({ className, render, ...props }: TableFooterProps) { const defaultProps = { "data-slot": "table-footer", className: cn("[&_tr]:border-0", "text-sm font-medium", className), }; return ( {useRender({ defaultTagName: "tfoot", render, props: mergeProps<"tfoot">(defaultProps, props), })} ); } export type TableRowSticky = "top" | "bottom"; export type TableRowProps = { selected?: boolean; sticky?: TableRowSticky; } & useRender.ComponentProps<"tr">; function TableRow({ className, render, selected, sticky, ...props }: TableRowProps) { const { hoverable, striped } = React.useContext(TableContext); const section = React.useContext(TableSectionContext); const defaultProps = { "data-slot": "table-row", "data-state": selected ? "selected" : undefined, "data-sticky": sticky, className: cn( "group/table-row transition-colors duration-100 hover:transition-none", section === "body" && striped && "even:bg-muted/40 dark:even:bg-card/30", section === "body" && hoverable && "[@media(hover:hover)]:hover:bg-secondary/70 dark:[@media(hover:hover)]:hover:bg-muted/50", selected && "data-[state=selected]:bg-secondary/60 dark:data-[state=selected]:bg-muted/30", sticky === "top" && "[&>th]:sticky [&>th]:top-0 [&>th]:z-20 [&>td]:sticky [&>td]:top-0 [&>td]:z-20", sticky === "bottom" && "[&>th]:sticky [&>th]:bottom-0 [&>th]:z-20 [&>td]:sticky [&>td]:bottom-0 [&>td]:z-20", className ), }; return useRender({ defaultTagName: "tr", render, props: mergeProps<"tr">(defaultProps, props), }); } export type TableColumnResizerProps = { indicatorClassName?: string; isResizing?: boolean; minWidth?: number; } & React.ComponentProps<"div">; function TableColumnResizer({ className, indicatorClassName, isResizing: isResizingProp, minWidth = 48, onMouseDown, onTouchStart, onKeyDown, ...props }: TableColumnResizerProps) { const [internalResizing, setInternalResizing] = React.useState(false); const isResizing = isResizingProp ?? internalResizing; const selfRef = React.useRef(null); React.useEffect(() => { if (isResizing) { const originalCursor = document.body.style.cursor; const originalUserSelect = document.body.style.userSelect; document.body.style.cursor = "col-resize"; document.body.style.userSelect = "none"; return () => { document.body.style.cursor = originalCursor; document.body.style.userSelect = originalUserSelect; }; } }, [isResizing]); const handlePointerDown = (e: React.PointerEvent) => { if (onMouseDown || onTouchStart) { return; } const th = e.currentTarget.closest("th"); if (!th) return; e.preventDefault(); e.stopPropagation(); const table = th.closest("table"); const container = table?.parentElement; const containerWidth = container ? container.getBoundingClientRect().width : 0; const row = th.parentElement; if (row) { const cells = Array.from(row.children) as HTMLElement[]; for (const cell of cells) { if (!cell.style.width) { const w = Math.round(cell.getBoundingClientRect().width); cell.style.width = `${w}px`; cell.style.minWidth = `${w}px`; } } } const startX = e.clientX; const startWidth = th.getBoundingClientRect().width; const startTableWidth = table ? table.getBoundingClientRect().width : 0; const target = e.currentTarget; try { target.setPointerCapture(e.pointerId); } catch { // pointer capture might fail if detached } setInternalResizing(true); const onPointerMove = (moveEvent: PointerEvent) => { const delta = moveEvent.clientX - startX; const newWidth = Math.max(minWidth, Math.round(startWidth + delta)); th.style.width = `${newWidth}px`; th.style.minWidth = `${newWidth}px`; if (table && startTableWidth > 0) { const deltaWidth = newWidth - startWidth; const newTableWidth = Math.max( startTableWidth + deltaWidth, containerWidth ); table.style.width = `${newTableWidth}px`; } }; const onPointerUp = (upEvent: PointerEvent) => { try { target.releasePointerCapture(upEvent.pointerId); } catch { // ignore } setInternalResizing(false); target.removeEventListener("pointermove", onPointerMove); target.removeEventListener("pointerup", onPointerUp); target.removeEventListener("pointercancel", onPointerUp); }; target.addEventListener("pointermove", onPointerMove); target.addEventListener("pointerup", onPointerUp); target.addEventListener("pointercancel", onPointerUp); }; const handleKeyDown = (e: React.KeyboardEvent) => { onKeyDown?.(e); if (e.defaultPrevented) return; if (e.key === "ArrowLeft" || e.key === "ArrowRight") { e.preventDefault(); const th = e.currentTarget.closest("th"); if (!th) return; const table = th.closest("table"); const container = table?.parentElement; const containerWidth = container ? container.getBoundingClientRect().width : 0; const currentWidth = th.getBoundingClientRect().width; const startTableWidth = table ? table.getBoundingClientRect().width : 0; const delta = e.key === "ArrowRight" ? 12 : -12; const newWidth = Math.max(minWidth, Math.round(currentWidth + delta)); th.style.width = `${newWidth}px`; th.style.minWidth = `${newWidth}px`; if (table && startTableWidth > 0) { const deltaWidth = newWidth - currentWidth; const newTableWidth = Math.max( startTableWidth + deltaWidth, containerWidth ); table.style.width = `${newTableWidth}px`; } } }; return (

); } export type TableColumnSticky = "left" | "right"; export type TableHeadProps = { resizable?: boolean; resizer?: React.ReactNode; sticky?: TableColumnSticky; } & useRender.ComponentProps<"th">; function TableHead({ className, render, children, resizable: resizableProp, resizer, sticky, ...props }: TableHeadProps) { const context = React.useContext(TableContext); const isResizable = resizableProp ?? context.resizable; const hasResizer = resizer !== undefined ? Boolean(resizer) : isResizable; const hasLabel = children !== null && children !== undefined && children !== false; const defaultProps = { "data-slot": "table-head", "data-empty": hasLabel ? undefined : "", className: cn( "relative overflow-hidden bg-muted px-3 py-2 text-left text-muted-foreground text-ellipsis align-middle text-sm font-medium whitespace-nowrap dark:bg-card [[align=center]]:text-center [[align=right]]:text-right", "[&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:px-3 [&>[role=checkbox]]:translate-y-[2px]", "after:absolute after:right-0 after:top-1/2 after:h-4 after:w-px after:-translate-y-1/2 after:bg-border after:content-['']", "last:after:hidden", "group-data-[bordered]/table:after:hidden group-data-bordered/table:after:hidden", !hasLabel && "after:hidden", hasResizer && "after:hidden select-none", sticky === "left" && "sticky left-0 z-20", sticky === "right" && "sticky right-0 z-20", className ), children: ( <> {children} {resizer !== undefined ? ( resizer ) : isResizable ? ( ) : null} ), }; return useRender({ defaultTagName: "th", render, props: mergeProps<"th">(defaultProps, props), }); } export type TableCellProps = { sticky?: TableColumnSticky; } & useRender.ComponentProps<"td">; function TableCell({ className, render, sticky, ...props }: TableCellProps) { const { hoverable } = React.useContext(TableContext); const section = React.useContext(TableSectionContext); const defaultProps = { "data-slot": "table-cell", className: cn( "overflow-hidden px-3 py-2.5 text-ellipsis align-middle whitespace-nowrap [[align=center]]:text-center [[align=right]]:text-right", section === "header" && "bg-muted text-muted-foreground dark:bg-card", section === "footer" && "bg-muted px-3 pt-2 pb-1 align-middle dark:bg-card", "border-border/70 dark:border-border", "[&:has([role=checkbox])]:w-12 [&:has([role=checkbox])]:px-3 [&>[role=checkbox]]:translate-y-[2px]", sticky === "left" && "sticky left-0 z-[1] bg-card dark:bg-background", sticky === "right" && "sticky right-0 z-[1] bg-card dark:bg-background", section === "body" && hoverable && sticky && "[@media(hover:hover)]:group-hover/table-row:bg-inherit", className ), }; return useRender({ defaultTagName: "td", render, props: mergeProps<"td">(defaultProps, props), }); } export type TableCaptionProps = useRender.ComponentProps<"caption">; function TableCaption({ className, render, ...props }: TableCaptionProps) { const defaultProps = { "data-slot": "table-caption", className: cn("text-muted-foreground px-3 pt-2 pb-1 text-xs", className), }; return useRender({ defaultTagName: "caption", render, props: mergeProps<"caption">(defaultProps, props), }); } export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, TableColumnResizer, }; 4f:["$","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","@base-ui/react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/%40base-ui%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":"@base-ui/react"}]]}]}],["$","li","cn",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/cn","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":"cn"}]]}]}]]}],["$","$L50",null,{"namespace":"@iandefined","registryDependencies":["https://ui.iandefined.com/r/scroll-area.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"src/registry/base/table.tsx","content":"$52","type":"registry:ui","target":"components/ui/table.tsx"}],"className":"h-[70svh] min-h-80"}]]}]