{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "item",
  "title": "Item",
  "description": "A ledger line: what it is, a dotted leader, what you can do. Point at it and the leader inks across. Or every fifth line numbered in the margin; or the description running along the leader.",
  "registryDependencies": [
    "https://thedirectors.agency/ui/r/0nlytype.json"
  ],
  "files": [
    {
      "path": "registry/0nlytype/ui/item.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\ntype ItemGroupProps = React.ComponentProps<\"ul\"> & {\n  /**\n   * leader: a dotted leader joins what it is to its value. lineation: as in a critical edition, every\n   * fifth line carries its number in the margin, and the line you point at shows its own. words: the\n   * description runs in along the leader, small, and runs out in an ellipsis before the value.\n   */\n  variant?: \"leader\" | \"lineation\" | \"words\"\n}\n\n/** A ledger of items. */\nfunction ItemGroup({ className, variant = \"leader\", ...props }: ItemGroupProps) {\n  return <ul data-slot=\"item-group\" data-variant={variant === \"leader\" ? undefined : variant} className={cn(\"ot-items\", className)} {...props} />\n}\n\ntype ItemProps = React.ComponentProps<\"li\"> & {\n  /** Pins a state for documentation (\"hover\"); set on the root. */\n  \"data-force\"?: string\n}\n\n/** A ledger line: what it is, a dotted leader, what you can do. Point at it and the leader inks across. */\nfunction Item({ className, ...props }: ItemProps) {\n  return <li data-slot=\"item\" className={cn(\"ot-item\", className)} {...props} />\n}\n\n/** An avatar or other small picture at the start of the line. */\nfunction ItemMedia({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"item-media\" className={cn(\"ot-item-media\", className)} {...props} />\n}\n\nfunction ItemContent({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"item-content\" className={cn(\"ot-item-body\", className)} {...props} />\n}\n\nfunction ItemTitle({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"item-title\" className={cn(\"ot-item-title\", className)} {...props} />\n}\n\nfunction ItemDescription({ className, ...props }: React.ComponentProps<\"span\">) {\n  return <span data-slot=\"item-description\" className={cn(\"ot-item-desc\", className)} {...props} />\n}\n\n/** A value or an action at the end of the line, joined to the content by the leader. */\nfunction ItemActions({ className, ...props }: React.ComponentProps<\"span\">) {\n  return (\n    <>\n      <span data-slot=\"item-leader\" className=\"ot-item-leader\" aria-hidden=\"true\" />\n      <span data-slot=\"item-actions\" className={cn(\"ot-item-end\", className)} {...props} />\n    </>\n  )\n}\n\nexport { ItemGroup, Item, ItemMedia, ItemContent, ItemTitle, ItemDescription, ItemActions }\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/0nlytype/styles/item.css",
      "content": "@layer components {\n  /* ── ot-item ── a ledger line: what it is, a dotted leader, what you can do. As on a contents page, the dots sit on the\n     baseline the title and the value share. */\n  .ot-items { list-style: none; margin: 0; padding: 0; border-top: var(--ot-hairline) solid var(--ot-rule); }\n  .ot-item { display: flex; align-items: baseline; gap: var(--ot-space-4); padding-block: var(--ot-space-4); border-bottom: var(--ot-hairline) solid var(--ot-rule); }\n  .ot-item-media { flex: none; display: inline-flex; align-self: center; }\n  .ot-item-body { display: grid; min-width: 0; }\n  .ot-item-title { color: var(--ot-ink); }\n  .ot-item-desc { font-size: var(--ot-pp); line-height: var(--ot-pp-lh); color: var(--ot-pencil); }\n  .ot-item-end { font-variant-numeric: tabular-nums; color: var(--ot-ink); }\n  .ot-item-leader { position: relative; flex: 1; min-width: var(--ot-space-5); height: 2px; }\n  .ot-item-leader::before, .ot-item-leader::after { content: \"\"; position: absolute; inset: 0; background: radial-gradient(circle, currentColor 0.8px, transparent 1.1px) 0 50% / 6px 2px repeat-x; }\n  .ot-item-leader::before { color: var(--ot-rule-strong); }\n  .ot-item-leader::after {\n    color: var(--ot-ink);\n    mask: linear-gradient(#000, #000) no-repeat 100% 0 / 0% 100%;\n    transition: mask-size var(--ot-andante) var(--ot-exhale), mask-position 0s;\n  }\n  .ot-item:is(:hover, :focus-within, [data-force~=\"hover\"]) .ot-item-leader::after { mask-position: 0 0; mask-size: 100% 100%; }\n\n  /* ── lineation ── a critical edition's line numbers: every fifth line carries its number in the margin, in pencil; the line\n     you point at or focus shows its own, in ink. The figure hangs into the margin and steps in where the margin is too narrow. */\n  .ot-items[data-variant=\"lineation\"] { counter-reset: ot-line; }\n  .ot-items[data-variant=\"lineation\"] > .ot-item { counter-increment: ot-line; }\n  .ot-items[data-variant=\"lineation\"] > .ot-item::before {\n    content: \"\"; order: -1; flex: none; width: 2em; margin-inline-start: calc(-2em - var(--ot-space-4)); text-align: end;\n    font-size: var(--ot-pp); line-height: var(--ot-pp-lh); font-variant-numeric: tabular-nums; color: var(--ot-pencil); transition: color var(--ot-allegro);\n  }\n  .ot-items[data-variant=\"lineation\"] > .ot-item:nth-child(5n)::before { content: counter(ot-line) / \"\"; }\n  .ot-items[data-variant=\"lineation\"] > .ot-item:is(:hover, :focus-within, [data-force~=\"hover\"])::before { content: counter(ot-line) / \"\"; color: var(--ot-ink); }\n  @media (max-width: 40rem) { .ot-items[data-variant=\"lineation\"] > .ot-item::before { margin-inline-start: 0; } }\n\n  /* ── words ── SPECTRA's small print run along a contents line: the description runs in after the title, small, where the\n     dots would be, and runs out in an ellipsis before the value; a short one leaves the dots to finish the line. Pointing inks it\n     with its leader. */\n  .ot-items[data-variant=\"words\"] { min-width: 0; } /* the unbroken sentences mustn't widen whatever holds the list */\n  .ot-items[data-variant=\"words\"] .ot-item-body { display: contents; }\n  .ot-items[data-variant=\"words\"] .ot-item-leader { flex-basis: 0; min-width: 0; } /* only what the words leave; none when they run out */\n  .ot-items[data-variant=\"words\"] .ot-item-title { flex: none; }\n  .ot-items[data-variant=\"words\"] .ot-item-desc { flex: 0 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; transition: color var(--ot-allegro); }\n  .ot-items[data-variant=\"words\"] .ot-item:is(:hover, :focus-within, [data-force~=\"hover\"]) .ot-item-desc { color: var(--ot-graphite); }\n}\n",
      "type": "registry:file",
      "target": "styles/0nlytype/item.css"
    }
  ],
  "css": {
    "@import \"../styles/0nlytype/item.css\"": {}
  },
  "meta": {
    "movement": "X",
    "underneath": "native",
    "contract": "ot-item"
  },
  "type": "registry:ui"
}