{"version":3,"sources":["../src/components/inputs/mode/DisplayValue.tsx"],"names":["jsxs","cn","inputSizeClasses","jsx"],"mappings":";;;;;;AAsBA,SAAS,QAAQ,KAAA,EAA2B;AAC1C,EAAA,OAAO,KAAA,KAAU,IAAA,IAAQ,KAAA,KAAU,MAAA,IAAa,KAAA,KAAU,EAAA;AAC5D;AAgBO,SAAS,YAAA,CAAa;AAAA,EAC3B,QAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,OAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA,GAAQ,QAAA;AAAA,EACR,WAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAAsB;AACpB,EAAA,MAAM,OAAA,GAAU,QAAQ,QAAQ,CAAA;AAEhC,EAAA,MAAM,SAAA,GAAY,WAAA,GACd,CAAC,CAAA,KAAqC;AACpC,IAAA,IAAI,CAAA,CAAE,GAAA,KAAQ,OAAA,IAAW,CAAA,CAAE,QAAQ,GAAA,EAAK;AACtC,MAAA,CAAA,CAAE,cAAA,EAAe;AACjB,MAAA,UAAA,IAAa;AAAA,IACf;AAAA,EACF,CAAA,GACA,MAAA;AAEJ,EAAA,uBACEA,eAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,0BAAA,EAAyB,EAAA;AAAA,MACzB,WAAA,EAAU,MAAA;AAAA,MACV,IAAA,EAAM,cAAc,QAAA,GAAW,MAAA;AAAA,MAC/B,QAAA,EAAU,cAAc,CAAA,GAAI,MAAA;AAAA,MAC5B,KAAA,EAAO,cAAc,eAAA,GAAkB,MAAA;AAAA,MACvC,OAAA,EAAS,cAAc,UAAA,GAAa,MAAA;AAAA,MACpC,SAAA;AAAA,MACA,SAAA,EAAWC,oBAAA;AAAA,QACT,iEAAA;AAAA,QACAC,mCAAiB,IAAI,CAAA;AAAA;AAAA,QAErB,8BAAA;AAAA,QACA,WAAA,IACE,+JAAA;AAAA,QACF,OAAA,IAAW,kCAAA;AAAA,QACX;AAAA,OACF;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,OAAA,oBAAWC,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,kCAAA,EAAoC,QAAA,EAAA,OAAA,EAAQ,CAAA;AAAA,uCACvE,MAAA,EAAA,EAAK,SAAA,EAAU,kBAAA,EAAoB,QAAA,EAAA,OAAA,GAAU,QAAQ,QAAA,EAAS,CAAA;AAAA,QAC9D,QAAA,oBAAYA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,oCAAoC,QAAA,EAAA,QAAA,EAAS;AAAA;AAAA;AAAA,GAC5E;AAEJ","file":"chunk-XKDW6B7X.cjs","sourcesContent":["import type { KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport type { Size } from \"../../../utils/types\";\nimport { inputSizeClasses } from \"../inputs.utils\";\n\nexport interface DisplayValueProps {\n  /** The formatted value to show. Empty / null / undefined renders `empty`. */\n  children?: ReactNode;\n  size?: Size;\n  /** Static adornment rendered before the value (mirrors an input's `leading`/`prefix`). */\n  leading?: ReactNode;\n  /** Static adornment rendered after the value (mirrors an input's `trailing`/`suffix`). */\n  trailing?: ReactNode;\n  /** Shown when the value is empty. Default `—`. */\n  empty?: ReactNode;\n  /** When true the value is clickable to enter edit mode (inline click-to-edit). */\n  interactive?: boolean;\n  /** Called when an interactive value is activated (click / Enter / Space). */\n  onActivate?: () => void;\n  className?: string;\n}\n\nfunction isEmpty(value: ReactNode): boolean {\n  return value === null || value === undefined || value === \"\";\n}\n\n/**\n * The read-only counterpart to an `<input>`. Renders a non-interactive value\n * with the same size rhythm as the editable control (reusing\n * {@link inputSizeClasses}) but without the border / background / focus ring.\n *\n * When `interactive` (inline click-to-edit), the value becomes a focusable,\n * hoverable target that calls `onActivate` on click / Enter / Space to swap in\n * the real control. Dropped into the SAME `Field` wrapper the editable control\n * uses, so label / description / error chrome stays byte-identical between the\n * display and the editor.\n *\n * Carries `data-react-fancy-display` / `data-mode=\"view\"` stable handles for\n * agents and tests (Human+ contract).\n */\nexport function DisplayValue({\n  children,\n  size = \"md\",\n  leading,\n  trailing,\n  empty = \"—\",\n  interactive,\n  onActivate,\n  className,\n}: DisplayValueProps) {\n  const empties = isEmpty(children);\n\n  const onKeyDown = interactive\n    ? (e: KeyboardEvent<HTMLDivElement>) => {\n        if (e.key === \"Enter\" || e.key === \" \") {\n          e.preventDefault();\n          onActivate?.();\n        }\n      }\n    : undefined;\n\n  return (\n    <div\n      data-react-fancy-display=\"\"\n      data-mode=\"view\"\n      role={interactive ? \"button\" : undefined}\n      tabIndex={interactive ? 0 : undefined}\n      title={interactive ? \"Click to edit\" : undefined}\n      onClick={interactive ? onActivate : undefined}\n      onKeyDown={onKeyDown}\n      className={cn(\n        \"flex w-full items-center gap-2 text-zinc-900 dark:text-zinc-100\",\n        inputSizeClasses[size],\n        // Strip the editable box look — keep only the size/padding rhythm.\n        \"border-0 bg-transparent px-0\",\n        interactive &&\n          \"-mx-2 cursor-text rounded-md px-2 outline-none transition-colors hover:bg-zinc-100 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:bg-zinc-800\",\n        empties && \"text-zinc-400 dark:text-zinc-500\",\n        className,\n      )}\n    >\n      {leading && <span className=\"text-zinc-400 dark:text-zinc-500\">{leading}</span>}\n      <span className=\"min-w-0 truncate\">{empties ? empty : children}</span>\n      {trailing && <span className=\"text-zinc-400 dark:text-zinc-500\">{trailing}</span>}\n    </div>\n  );\n}\n"]}