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