56: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"] 57:I[544296,["/_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"],"ItemStyles"] 58:I[34002,["/_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"],"CodeEditor"] 59: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:["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"tailwind-variants"}] 51:["$","li","tailwindcss-react-aria-components",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tailwindcss-react-aria-components","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":"tailwindcss-react-aria-components"}]]}]}] 52:["$","li","tw-animate-css",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/tw-animate-css","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":"tw-animate-css"}]]}]}] 53:["$","$L56",null,{"namespace":"@react-aria","registryDependencies":["https://react-aria.adobe.com/registry/tailwind-checkbox.json","https://react-aria.adobe.com/registry/tailwind-utils.json"]}] 54:["$","$L57",null,{"children":["$","div",null,{"className":"@container","children":["$","div",null,{"className":"grid grid-cols-1 gap-4 @xl:grid-cols-2","children":[null,null,null,["$","div",null,{"className":"flex flex-col border rounded-md","children":[["$","p",null,{"className":"text-sm font-medium border-b p-2","children":"CSS"}],["$","div",null,{"children":["$","$L58",null,{"lang":"css","copyButton":true,"writing":false,"className":"rounded-none w-full max-h-80","header":false,"children":"@plugin \"tailwindcss-react-aria-components\" {\n\n}\n\n@import \"tw-animate-css\" {\n\n}"}]}]]}]]}]}]}] 5a:T1da3,'use client'; import {ArrowUp, ChevronRight} from 'lucide-react'; import React from 'react'; import { Cell as AriaCell, Column as AriaColumn, Row as AriaRow, Table as AriaTable, TableHeader as AriaTableHeader, TableBody as AriaTableBody, Button, type CellProps, Collection, type ColumnProps, ColumnResizer, ResizableTableContainer, type RowProps, type TableHeaderProps, type TableProps as AriaTableProps, useTableOptions, type TableBodyProps, TableFooter as AriaTableFooter, type TableFooterProps } from 'react-aria-components/Table'; import {Group} from 'react-aria-components/Group'; import {composeRenderProps} from 'react-aria-components/composeRenderProps'; import {twMerge} from 'tailwind-merge'; import {tv} from 'tailwind-variants'; import {Checkbox} from '@/registry/react-aria/ui/Checkbox'; import {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils'; interface TableProps extends Omit { className?: string; } export function Table(props: TableProps) { return ( ); } const columnStyles = tv({ extend: focusRing, base: 'px-2 h-5 box-border flex-1 flex gap-1 items-center overflow-hidden' }); const resizerStyles = tv({ extend: focusRing, base: 'w-px px-[8px] translate-x-[8px] box-content py-1 h-5 bg-clip-content bg-neutral-400 dark:bg-neutral-500 forced-colors:bg-[ButtonBorder] cursor-col-resize rounded-xs resizing:bg-blue-600 forced-colors:resizing:bg-[Highlight] resizing:w-[2px] resizing:pl-[7px] -outline-offset-2' }); export function Column(props: ColumnProps) { return ( {composeRenderProps(props.children, (children, {allowsSorting, sortDirection}) => (

{children} {allowsSorting && ( {sortDirection && ( )} )} {!props.width && }

))} ); } export function TableHeader(props: TableHeaderProps) { let {selectionBehavior, selectionMode, allowsDragging} = useTableOptions(); return ( {/* Add extra columns for drag and drop and selection. */} {allowsDragging && } {selectionBehavior === 'toggle' && ( {selectionMode === 'multiple' && } )} {props.children} ); } export function TableBody(props: TableBodyProps) { return ; } export function TableFooter(props: TableFooterProps) { return ; } const rowStyles = tv({ extend: focusRing, base: 'group/row relative cursor-default select-none -outline-offset-2 text-neutral-900 disabled:text-neutral-300 dark:text-neutral-200 dark:disabled:text-neutral-600 text-sm hover:bg-neutral-100 pressed:bg-neutral-100 dark:hover:bg-neutral-800 dark:pressed:bg-neutral-800 selected:bg-blue-100 selected:hover:bg-blue-200 selected:pressed:bg-blue-200 dark:selected:bg-blue-700/30 dark:selected:hover:bg-blue-700/40 dark:selected:pressed:bg-blue-700/40 last:rounded-b-lg' }); export function Row({id, columns, children, ...otherProps}: RowProps) { let {selectionBehavior, allowsDragging} = useTableOptions(); return ( {allowsDragging && ( )} {selectionBehavior === 'toggle' && ( )} {children} ); } const cellStyles = tv({ extend: focusRing, base: 'box-border [-webkit-tap-highlight-color:transparent] border-b border-b-neutral-200 dark:border-b-neutral-700 group-last/row:border-b-0 [--selected-border:var(--color-blue-200)] dark:[--selected-border:var(--color-blue-900)] group-selected/row:border-(--selected-border) [:is(:has(+[data-selected])_*)]:border-(--selected-border) p-2 truncate -outline-offset-2 group-last/row:first:rounded-bl-lg group-last/row:last:rounded-br-lg' }); const expandButton = tv({ extend: focusRing, base: 'border-0 p-0 pr-1 bg-transparent shrink-0 align-middle cursor-default [-webkit-tap-highlight-color:transparent]', variants: { isDisabled: { true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]' } } }); const chevron = tv({ base: 'w-4.5 h-4.5 text-neutral-500 dark:text-neutral-400 transition-transform duration-200 ease-in-out', variants: { isExpanded: { true: 'transform rotate-90' }, isDisabled: { true: 'text-neutral-300 dark:text-neutral-600 forced-colors:text-[GrayText]' } } }); export function Cell(props: CellProps) { return ( ({ paddingInlineStart: isTreeColumn ? 4 + (hasChildItems ? 0 : 20) + (level - 1) * 16 : undefined })}> {composeRenderProps( props.children, (children, {hasChildItems, isTreeColumn, isExpanded, isDisabled}) => ( <> {hasChildItems && isTreeColumn && ( )} {children} ) )} ); } 55:["$","$L59",null,{"files":[{"path":"components/ui/Table.tsx","content":"$5a","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]