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/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"] 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/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"] 52:T1133,'use client'; import { Button, Collection, Column as AriaColumn, type ColumnProps as AriaColumnProps, Row as AriaRow, type RowProps, Table as AriaTable, TableHeader as AriaTableHeader, type TableHeaderProps, type TableProps, useTableOptions, type TableBodyProps, TableBody as AriaTableBody, type CellProps, Cell as AriaCell, ColumnResizer, TableLoadMoreItem as AriaTableLoadMoreItem, type TableLoadMoreItemProps, 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 {Checkbox} from '@/registry/react-aria/ui/Checkbox'; import {ProgressCircle} from '@/registry/react-aria/ui/ProgressCircle'; import {ChevronUp, ChevronDown, GripVertical, ChevronRight} from 'lucide-react'; import './Table.css'; export function Table(props: TableProps) { return ; } interface ColumnProps extends AriaColumnProps { allowsResizing?: boolean; } export function Column(props: Omit & {children?: React.ReactNode}) { return ( {({allowsSorting, sortDirection}) => (

{props.children} {allowsSorting && ( )} {props.allowsResizing && }

)} ); } export function TableHeader({columns, children, ...otherProps}: TableHeaderProps) { let {selectionBehavior, selectionMode, allowsDragging} = useTableOptions(); return ( {/* Add extra columns for drag and drop and selection. */} {allowsDragging && ( )} {selectionBehavior === 'toggle' && ( {selectionMode === 'multiple' && } )} {children} ); } export function Row({id, columns, children, ...otherProps}: RowProps) { let {selectionBehavior, allowsDragging} = useTableOptions(); return ( {allowsDragging && ( )} {selectionBehavior === 'toggle' && ( )} {children} ); } export function TableBody(props: TableBodyProps) { return ; } export function TableFooter(props: TableFooterProps) { return ; } export function Cell(props: CellProps) { return ( {composeRenderProps(props.children, (children, {hasChildItems, isTreeColumn}) => ( <> {isTreeColumn && hasChildItems && ( )} {children} ))} ); } export function TableLoadMoreItem(props: TableLoadMoreItemProps) { return (

); } 53:T1d2d,@import './theme.css'; @import './utilities.css'; .react-aria-Table { border: 0.5px solid var(--border-color); border-radius: var(--radius); background: var(--overlay-background); overflow: clip; outline: none; border-spacing: 0; align-self: start; width: 100%; word-break: break-word; forced-color-adjust: none; font: var(--font-size) system-ui; div& { padding: 0; } &[data-focus-visible] { outline: 2px solid var(--focus-ring-color); } &[data-drop-target] { outline: 2px solid var(--highlight-background); background: var(--highlight-overlay); } &:has(.react-aria-TableBody[data-empty]) { height: 100%; min-height: 100px; } .react-aria-TableHeader { color: var(--text-color); } .react-aria-TableBody { padding: var(--spacing-1); &[data-empty] { text-align: center; font-style: italic; } } } .react-aria-Row { outline: none; cursor: default; color: var(--text-color); position: relative; transform: scale(1); transition-property: background, color; transition-duration: 200ms; -webkit-tap-highlight-color: transparent; tr:last-child& { border-radius: 0 0 var(--radius) var(--radius); } &[data-focus-visible] { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; } &[data-pressed] { background: var(--gray-100); } &:nth-child(2n) { background: var(--gray-100); &[data-pressed] { background: var(--gray-200); } } &[data-selected] { background: var(--highlight-background); color: var(--highlight-foreground); --focus-ring-color: var(--highlight-foreground); &[data-focus-visible], .react-aria-Cell[data-focus-visible] { outline-offset: -4px; } &[data-pressed] { background: var(--highlight-background-pressed); } } &[data-disabled] { color: var(--text-color-disabled); } &[data-href] { cursor: pointer; } &[data-dragging] { opacity: 0.6; transform: translateZ(0); } &[data-drop-target] { outline: 2px solid var(--highlight-background); background: var(--highlight-overlay); z-index: 4; } .drag-button { all: unset; display: flex; align-items: center; justify-content: center; width: 15px; text-align: center; svg { width: var(--spacing-4); height: var(--spacing-4); } &[data-focus-visible] { border-radius: 4px; outline: 2px solid var(--focus-ring-color); } } .react-aria-DropIndicator[data-drop-target] { outline: 1px solid var(--highlight-background); transform: translateZ(0); } } .react-aria-Cell, .react-aria-Column { padding: var(--spacing-2); text-align: left; outline: none; box-sizing: border-box; -webkit-tap-highlight-color: transparent; div& { display: flex; align-items: center; height: 100%; } &:is(.react-aria-Row:last-child > :first-child) { border-end-start-radius: var(--radius); } &:is(.react-aria-Row:last-child > :last-child) { border-end-end-radius: var(--radius); } &[data-focus-visible] { outline: 2px solid var(--focus-ring-color); outline-offset: -2px; } } .react-aria-Column { --button-color: var(--gray); --button-border: transparent; --button-shadow: transparent; --button-border-size: 0px; cursor: default; border-bottom: 0.5px solid var(--border-color); border-inline-end: 0.5px solid var(--border-color); position: relative; z-index: calc(sibling-count() - sibling-index()); &:last-child { border-inline-end: none; } &[data-pressed] { background: var(--gray-200); } &[data-sort-direction] { --button-color: var(--tint); &[data-pressed] { background: var(--tint-200); } } .column-header { display: flex; align-items: center; font-weight: 600; } .column-name { flex: 1; font: inherit; text-align: start; color: inherit; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-color: transparent; border-radius: var(--radius-sm); &[data-focus-visible] { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } } .sort-indicator { padding: 0 2px; display: inline-flex; align-items: center; justify-content: center; } &:not([data-sort-direction]) .sort-indicator { visibility: hidden; } } .react-aria-ColumnResizer { width: 1px; border-radius: var(--radius-sm); background-color: var(--gray-500); padding: 0 var(--spacing-2); translate: var(--spacing-4) 0; height: 32px; margin: -16px 0; flex: 0 0 auto; touch-action: none; box-sizing: content-box; background-clip: content-box; &[data-resizable-direction='both'] { cursor: ew-resize; } &[data-resizable-direction='left'] { cursor: e-resize; } &[data-resizable-direction='right'] { cursor: w-resize; } &[data-focus-visible] { background-color: var(--focus-ring-color); outline: 2px solid var(--focus-ring-color); outline-offset: -2px; } &[data-resizing] { width: 2px; background-color: var(--highlight-background); } } .react-aria-Cell { transform: translateZ(0); --border-color: var(--gray-300); tr:not(:last-child) & { border-bottom: 0.5px solid var(--border-color); } [data-selected]:has(+ [data-selected]) & { --border-color: rgb(255 255 255 / 0.3); } @media (forced-colors: active) { --border-color: ButtonBorder; } &[data-tree-column] { --chevron-placeholder: var(--spacing-5); padding-inline-start: calc( var(--spacing-2) + (var(--table-row-level) - 1) * var(--spacing-4) + var(--chevron-placeholder) ); &[data-has-child-items] { --chevron-placeholder: 0px; } } .react-aria-Button[slot='chevron'] { all: unset; vertical-align: middle; margin-inline-end: var(--spacing-1); svg { rotate: 0deg; transition: rotate 200ms; fill: none; stroke: currentColor; stroke-width: 3px; width: var(--spacing-4); height: var(--spacing-4); } } &[data-expanded] .react-aria-Button[slot='chevron'] svg { rotate: 90deg; } } .react-aria-DropIndicator[data-drop-target] { outline: 1px solid var(--highlight-background); transform: translateZ(0); translate: calc(68px + (var(--table-row-level) - 1) * var(--spacing-4)) 0; } .react-aria-Row .react-aria-CheckboxButton { --checkmark-color: var(--highlight-background); &[data-selected] .indicator { --indicator-color: var(--highlight-foreground); --indicator-shadow: transparent; } } .react-aria-ResizableTableContainer { width: 100%; overflow: auto; position: relative; border: 0.5px solid var(--border-color); border-radius: var(--radius); background: var(--overlay-background); .react-aria-Table { border: none; border-radius: 0; &:has(.react-aria-TableBody[data-empty]) { height: 100%; } } .react-aria-TableHeader { position: sticky; top: 0; z-index: 10; } .react-aria-Cell { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } } .react-aria-Cell img { height: 30px; width: 30px; object-fit: cover; display: block; } .react-aria-TableLoadingIndicator { height: 32px; position: relative; } .react-aria-TableFooter { font-weight: bold; background: var(--gray-200); } 54:T2028,/* colors */ :root { /* Change this variable to set the theme color for all components. */ /* You can use the below presets, or choose a custom color. */ --tint: var(--indigo); /* theme colors */ /* lightness channel is only used as a multiplier for chroma (see below) */ --gray: oklch(0.5 0 0); --red: oklch(0.6 0.181447 27.0726); --orange: oklch(0.7 0.150492 54); --yellow: oklch(0.8 0.128516 73.8032); --turquoise: oklch(0.5 0.081146 205.114); --cyan: oklch(0.4 0.142107 243.926); --green: oklch(0.5 0.121276 155.372); --blue: oklch(0.5 0.22049 266.315); --indigo: oklch(1 0.25049 284.23); --purple: oklch(0.7 0.223324 302); --pink: oklch(0.6 0.177717 347.813); /** tint color scale */ --tint-100: oklch(from var(--tint) var(--lightness-100) var(--chroma-100) h); --tint-200: oklch(from var(--tint) var(--lightness-200) var(--chroma-200) h); --tint-300: oklch(from var(--tint) var(--lightness-300) var(--chroma-300) h); --tint-400: oklch(from var(--tint) var(--lightness-400) var(--chroma-400) h); --tint-500: oklch(from var(--tint) var(--lightness-500) var(--chroma-500) h); --tint-600: oklch(from var(--tint) var(--lightness-600) var(--chroma-600) h); --tint-700: oklch(from var(--tint) var(--lightness-700) var(--chroma-700) h); --tint-800: oklch(from var(--tint) var(--lightness-800) var(--chroma-800) h); --tint-900: oklch(from var(--tint) var(--lightness-900) var(--chroma-900) h); --tint-1000: oklch(from var(--tint) var(--lightness-1000) var(--chroma-1000) h); --tint-1100: oklch(from var(--tint) var(--lightness-1100) var(--chroma-1100) h); --tint-1200: oklch(from var(--tint) var(--lightness-1200) var(--chroma-1200) h); --tint-1300: oklch(from var(--tint) var(--lightness-1300) var(--chroma-1300) h); --tint-1400: oklch(from var(--tint) var(--lightness-1400) var(--chroma-1400) h); --tint-1500: oklch(from var(--tint) var(--lightness-1500) var(--chroma-1500) h); --tint-1600: oklch(from var(--tint) var(--lightness-1600) var(--chroma-1600) h); /* gray scale */ --gray-100: oklch(from var(--gray) var(--lightness-100) c h); --gray-200: oklch(from var(--gray) var(--lightness-200) c h); --gray-300: oklch(from var(--gray) var(--lightness-300) c h); --gray-400: oklch(from var(--gray) var(--lightness-400) c h); --gray-500: oklch(from var(--gray) var(--lightness-500) c h); --gray-600: oklch(from var(--gray) var(--lightness-600) c h); --gray-700: oklch(from var(--gray) var(--lightness-700) c h); --gray-800: oklch(from var(--gray) var(--lightness-800) c h); --gray-900: oklch(from var(--gray) var(--lightness-900) c h); --gray-1000: oklch(from var(--gray) var(--lightness-1000) c h); --gray-1100: oklch(from var(--gray) var(--lightness-1100) c h); --gray-1200: oklch(from var(--gray) var(--lightness-1200) c h); --gray-1300: oklch(from var(--gray) var(--lightness-1300) c h); --gray-1400: oklch(from var(--gray) var(--lightness-1400) c h); --gray-1500: oklch(from var(--gray) var(--lightness-1500) c h); --gray-1600: oklch(from var(--gray) var(--lightness-1600) c h); } /* light mode colors */ :root { --background-color: #f8f8f8; --gray-50: #ffffff; --lightness-100: 98.1187%; --lightness-200: 95.2045%; --lightness-300: 91.1434%; --lightness-400: 85.1751%; --lightness-500: 79.1773%; --lightness-600: 72.3297%; --lightness-700: 67.0121%; --lightness-800: 62.3039%; --lightness-900: 57.9699%; --lightness-1000: 51.9076%; --lightness-1100: 46.9058%; --lightness-1200: 41.0821%; --lightness-1300: 35.3616%; --lightness-1400: 29.6725%; --lightness-1500: 24.5366%; --lightness-1600: 16.6959%; /* lower chroma at low lightness levels */ --chroma-100: calc(l * c * 0.5); --chroma-200: calc(l * c * 0.6); --chroma-300: calc(l * c * 0.7); --chroma-400: calc(l * c * 0.8); --chroma-500: calc(l * c * 0.9); --chroma-600: c; --chroma-700: c; --chroma-800: c; --chroma-900: c; --chroma-1000: c; --chroma-1100: c; --chroma-1200: c; --chroma-1300: c; --chroma-1400: c; --chroma-1500: c; --chroma-1600: c; --highlight-hover: rgb(0 0 0 / 0.07); --highlight-pressed: rgb(0 0 0 / 0.15); --overlay-background: var(--gray-50); --overlay-border: rgb(0 0 0 / 0.06); --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.12); } /* dark mode colors */ @media (prefers-color-scheme: dark) { :root { --background-color: #1b1b1b; --gray-50: oklch(22% 0 0); --lightness-100: 29.6725%; --lightness-200: 35.3616%; --lightness-300: 41.0821%; --lightness-400: 46.9058%; --lightness-500: 51.9076%; --lightness-600: 57.9699%; --lightness-700: 56.1347%; --lightness-800: 59.2866%; --lightness-900: 62.3039%; --lightness-1000: 67.0121%; --lightness-1100: 72.3297%; --lightness-1200: 79.1773%; --lightness-1300: 85.1751%; --lightness-1400: 91.1434%; --lightness-1500: 95.2045%; --lightness-1600: 100%; --highlight-hover: rgb(255 255 255 / 0.1); --highlight-pressed: rgb(255 255 255 / 0.2); --overlay-background: var(--gray-100); --overlay-border: rgb(255 255 255 / 0.2); --popover-shadow: 0 8px 20px rgba(0 0 0 / 0.5); } } /* Semantic colors */ :root { --focus-ring-color: var(--tint-1000); --text-color: var(--gray-1200); --text-color-hover: var(--gray-1300); --text-color-disabled: var(--gray-600); --text-color-placeholder: var(--gray-1000); --link-color: var(--tint-1200); --link-color-secondary: var(--gray-1200); --link-color-pressed: var(--tint-1300); --border-color: var(--gray-400); --border-color-hover: var(--gray-500); --border-color-disabled: var(--gray-300); --field-text-color: var(--gray-1400); --button-background: var(--tint-100); --button-background-pressed: var(--tint-200); /* these colors are the same between light and dark themes * to ensure contrast with the foreground color */ --highlight-background: oklch(from var(--tint) 55% c h); --highlight-background-pressed: oklch(from var(--tint) 50% c h); --highlight-background-invalid: oklch(from var(--red) var(--lightness-900) c h); --highlight-foreground: white; --highlight-overlay: oklch(from var(--tint-1000) l c h / 15%); --invalid-color: oklch(from var(--red) var(--lightness-1000) c h); --field-background: var(--gray-50); } /* Windows high contrast mode overrides */ @media (forced-colors: active) { :root { --background-color: Canvas; --focus-ring-color: Highlight; --text-color: ButtonText; --text-color-hover: ButtonText; --text-color-disabled: GrayText; --text-color-placeholder: ButtonText; --link-color: LinkText; --link-color-secondary: LinkText; --link-color-pressed: LinkText; --border-color: ButtonBorder; --border-color-hover: ButtonBorder; --border-color-pressed: ButtonBorder; --border-color-disabled: GrayText; --field-background: Field; --field-text-color: FieldText; --overlay-background: Canvas; --overlay-border: ButtonBorder; --button-background: ButtonFace; --button-background-pressed: ButtonFace; --highlight-background: Highlight; --highlight-background-pressed: Highlight; --highlight-background-invalid: LinkText; --highlight-foreground: HighlightText; --invalid-color: LinkText; } } /* typography and spacing scale */ :root { --font-size: 0.875rem; /* 14px */ --font-size-sm: 0.75rem; /* 12px */ --font-size-lg: 1rem; /* 16px */ --radius: 8px; --radius-sm: 6px; --radius-lg: 10px; --radius-xl: 16px; --spacing: 0.25rem; /* 4px */ --spacing-1: var(--spacing); --spacing-2: calc(2 * var(--spacing)); --spacing-3: calc(3 * var(--spacing)); --spacing-4: calc(4 * var(--spacing)); --spacing-5: calc(5 * var(--spacing)); --spacing-6: calc(6 * var(--spacing)); --spacing-7: calc(7 * var(--spacing)); --spacing-8: calc(8 * var(--spacing)); --spacing-9: calc(9 * var(--spacing)); --spacing-10: calc(10 * var(--spacing)); } /* Scale up hit targets on high resolution mobile devices. */ @media (min-resolution: 200dpi) { :root { --spacing: calc(0.25rem * 1.25); --font-size: 1.0625rem; /* 17px */ --font-size-sm: 0.9375rem; /* 15px */ --font-size-lg: 1.25rem; /* 20px */ } } 55:T283a,@layer utilities { /* utility that creates a button-like element, which can be optionally selected */ .button-base { --button-color: var(--tint); --button-background: oklch(from var(--button-color) var(--lightness-100) var(--chroma-100) h); --button-gradient: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h); --button-border: oklch(from var(--button-color) var(--lightness-300) var(--chroma-300) h); --button-highlight: rgb(255 255 255 / 0.8); --button-shadow: oklch(from var(--button-color) var(--lightness-400) var(--chroma-400) h); --button-border-size: 1px; --button-text: oklch(from var(--button-color) var(--lightness-1400) var(--chroma-1400) h); --button-gradient-size: 8px; background: var(--button-background); color: var(--button-text); box-shadow: inset 0 -1px 0 var(--button-shadow), /* bottom shadow */ inset 0 0 0 var(--button-border-size) var(--button-border), /* border */ inset 0px calc(var(--button-border-size) + 1px) 0px var(--button-highlight), /* top specular highlight */ inset 0px calc(-1 * var(--button-gradient-size)) var(--button-gradient-size) -2px var(--button-gradient); /* inner gradient */ outline: none; transition-property: background, color, scale, box-shadow; transition-duration: 200ms; will-change: scale; forced-color-adjust: none; -webkit-tap-highlight-color: transparent; @media (prefers-color-scheme: dark) { --button-shadow: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h); --button-highlight: rgb(255 255 255 / 0.15); box-shadow: inset 0 var(--button-border-size) 0 var(--button-highlight), /* top specular highlight */ inset 0 calc(-1 * var(--button-border-size)) 0 var(--button-shadow), /* bottom shadow */ inset 0 0 0 var(--button-border-size) var(--button-border), /* border */ inset 0 var(--button-gradient-size) var(--button-gradient-size) -2px var(--button-gradient); /* inner gradient */ } &:where([data-pressed]) { --button-background: oklch(from var(--button-color) var(--lightness-200) var(--chroma-200) h); } &:where([data-focus-visible]) { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } &:where([data-variant='secondary']) { --button-color: var(--gray); } &:where([data-variant='quiet']) { --button-background: none; --button-text: var(--text-color); box-shadow: 0 0 0 1px transparent; &:where([data-hovered], [data-pressed]) { --button-background: var(--tint-200); --button-text: var(--tint-1400); box-shadow: 0 0 0 1px var(--tint-200); } } &:where([data-selected]) { --button-background: oklch(from var(--button-color) 55% c h); --button-border: oklch(from var(--button-color) 50% c h); --button-gradient: var(--button-border); --button-highlight: rgb(255 255 255 / 0.2); --button-shadow: oklch(from var(--button-color) 30% c h); --button-text: var(--highlight-foreground); box-shadow: inset 0 -1px 0 var(--button-shadow), /* bottom shadow */ inset 0 0 0 1px var(--button-border), /* border */ inset 0 2px 0 var(--button-highlight), /* top specular highlight */ inset 0 calc(-1 * var(--button-gradient-size)) var(--button-gradient-size) var(--button-gradient); /* inner gradient */ @media (prefers-color-scheme: dark) { --button-highlight: rgb(255 255 255 / 0.4); --button-gradient: rgb(255 255 255 / 0.2); --button-shadow: var(--button-border); box-shadow: inset 0 1px 0 var(--button-highlight), /* top specular highlight */ inset 0 var(--button-gradient-size) var(--button-gradient-size) var(--button-gradient), /* inner gradient */ inset 0 0 0 1px var(--button-border); /* border */ } &:where([data-pressed]) { --button-background: oklch(from var(--button-color) 50% c h); } } &:where([data-disabled]) { box-shadow: none; --button-background: var(--border-color-disabled); --button-text: var(--text-color-disabled); &:where([data-variant='quiet']) { --button-background: none; } } @media (forced-colors: active) { --button-background: ButtonFace; --button-text: ButtonText; --button-border: ButtonBorder; box-shadow: inset 0 0 0 var(--button-border-size) var(--button-border); &:where([data-variant='quiet']) { --button-border: transparent; &:where([data-hovered], [data-pressed]) { --button-border: ButtonBorder; } } &:where([data-selected]) { --button-background: Highlight; --button-text: HighlightText; --button-border: Highlight; } &:where([data-disabled]) { --button-background: ButtonFace; --button-text: GrayText; --button-border: GrayText; &:where([data-variant='quiet']) { --button-border: transparent; } } } } /* utility that creates a small indicator, such as a checkbox, radio, switch, or slider thumb */ .indicator { --indicator-color: var(--gray); --indicator-background: oklch( from var(--indicator-color) var(--lightness-100) var(--chroma-100) h ); --indicator-border: oklch(from var(--indicator-color) var(--lightness-800) var(--chroma-800) h); --indicator-drop-shadow: 0 0; background: var(--indicator-background); box-shadow: inset 0 0 0 1px var(--indicator-border), /* border */ inset 0 2px 0 white, /* top specular highlight */ inset 0 -4px 2px oklch(from var(--indicator-color) 30% c h / 0.08), /* inner gradient */ var(--indicator-drop-shadow); /* optional drop shadow */ will-change: scale; @media (prefers-color-scheme: dark) { box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4), /* top specular highlight */ inset 0 4px 2px rgb(255 255 255 / 0.1), /* inner shadow */ inset 0 0 0 1px var(--indicator-border), /* border */ var(--indicator-drop-shadow); /* optional drop shadow */ } @media (forced-colors: active) { --indicator-background: ButtonFace; --indicator-border: ButtonBorder; box-shadow: inset 0 0 0 1px var(--indicator-border); } &[data-pressed], [data-pressed] & { scale: 0.9; } [data-selected] > &, [data-indeterminate] > & { --indicator-color: var(--highlight-background); --indicator-background: var(--indicator-color); --indicator-highlight: rgb(255 255 255 / 0.3); --indicator-shadow: oklch(from var(--indicator-color) 45% c h); --indicator-border: var(--indicator-background); box-shadow: inset 0 -1px 0 var(--indicator-shadow), /* bottom shadow */ inset 0 0 0 1px var(--indicator-border), /* border */ inset 0 2px 0 var(--indicator-highlight), /* top specular highlight */ var(--indicator-drop-shadow); /* optional drop shadow */ @media (prefers-color-scheme: dark) { --indicator-highlight: rgb(255 255 255 / 0.5); --indicator-gradient: rgb(255 255 255 / 0.12); box-shadow: inset 0 1px 0 var(--indicator-highlight), /* top specular highlight */ inset 0 4px 2px var(--indicator-gradient), /* inner gradient */ inset 0 0 0 1px var(--indicator-border), /* border */ var(--indicator-drop-shadow); /* optional drop shadow */ } @media (forced-colors: active) { box-shadow: none; } } &[data-invalid], [data-invalid] > & { --indicator-color: var(--invalid-color); @media (forced-colors: active) { --indicator-border: var(--invalid-color); } } &[data-focus-visible], [data-focus-visible] > & { outline: 2px solid var(--focus-ring-color); outline-offset: 2px; } &[data-disabled], [data-disabled] > & { background: var(--field-background); box-shadow: inset 0 0 0 1px var(--border-color-disabled); } } /* utility that creates an inset effect, used for form fields, slider/progress tracks, etc. */ .inset { --inset-background: var(--field-background); --inset-border: var(--border-color); --inset-border-size: 1px; --inset-shadow-offset: 2px; --inset-shadow-size: 4px; background: var(--inset-background); box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border), /* border */ inset 0 var(--inset-shadow-offset) var(--inset-shadow-size) rgb(0 0 0 / 0.15), /* inner shadow */ 0 1px 0 var(--gray-50); /* bottom specular highlight */ transition: box-shadow 200ms; forced-color-adjust: none; @media (prefers-color-scheme: dark) { --inset-border: var(--gray-200); --border-color-hover: var(--gray-300); --inset-highlight: var(--gray-400); --inset-shadow-size: 6px; box-shadow: inset 0 calc(-1 * var(--inset-border-size)) 0 var(--inset-highlight), /* bottom specular highlight */ inset 0 0 0 var(--inset-border-size) var(--inset-border), /* border */ inset 0 1px var(--inset-shadow-size) rgb(0 0 0); /* inner shadow */ } &:where([data-hovered], [data-pressed]) { --inset-border: var(--border-color-hover); } @media (forced-colors: active) { --inset-border: ButtonBorder; box-shadow: inset 0 0 0 var(--inset-border-size) var(--inset-border); } &:where([data-invalid]) { --inset-border: var(--invalid-color); --inset-highlight: var(--inset-border); } &:where([data-disabled]) { box-shadow: inset 0 0 0 1px var(--border-color-disabled); } &.track { --inset-shadow-offset: 1px; --inset-shadow-size: 3px; @media (prefers-color-scheme: light) { --inset-background: var(--gray-300); --inset-border: var(--gray-500); --inset-border-size: 0.5px; } @media (forced-colors: active) { --inset-background: Field; --inset-border: ButtonBorder; --inset-border-size: 1px; } } } } 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","react-aria-components",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/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":"react-aria-components"}]]}]}],["$","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"}]]}]}]]}],["$","$L50",null,{"namespace":"@react-aria","registryDependencies":["https://react-aria.adobe.com/registry/css-checkbox.json","https://react-aria.adobe.com/registry/css-progresscircle.json"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"components/ui/Table.tsx","content":"$52","type":"registry:ui"},{"path":"components/ui/Table.css","content":"$53","type":"registry:component"},{"path":"components/ui/theme.css","content":"$54","type":"registry:component"},{"path":"components/ui/utilities.css","content":"$55","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]