51: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"] 52: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"] 53:T10d3,'use client'; import { cva, type VariantProps } from 'class-variance-authority'; import { forwardRef, useId, useRef, useState, type InputHTMLAttributes, type KeyboardEvent } from 'react'; import { focusRingField, invalidRing } from '@/lib/recipes'; import { cn } from '@/lib/utils'; import { usePreset } from '@/components/ui/labels-context'; const inlineEditVariants = cva( [ 'typography-ui w-full min-w-0 border border-solid border-transparent bg-transparent text-foreground outline-none', 'transition-[color,background-color,border-color,box-shadow] duration-150 motion-reduce:transition-none', 'placeholder:text-muted-foreground', 'hover:border-hairline hover:bg-background', 'read-only:cursor-default read-only:hover:border-transparent read-only:hover:bg-transparent', 'focus-visible:bg-background', ], { variants: { // attribute is a field in a detail aside, cell fills a table cell row. variant: { attribute: 'h-control-sm rounded-input px-2', cell: 'h-row rounded-none px-2', }, // Product preset (DesignSystemProvider `preset`): `zero` pads with the control token and shows the input border on hover. preset: { default: '', zero: 'px-control-px-sm hover:border-input' }, }, defaultVariants: { variant: 'attribute', preset: 'default' }, }, ); export interface InlineEditProps extends Omit, 'value' | 'defaultValue' | 'onChange' | 'size'>, Omit, 'preset'> { // Accessible name of the field. Required because there is no visible label. 'aria-label': string; value?: string; defaultValue?: string; onValueChange?: (value: string) => void; // Called on Enter or blur with the changed draft. Throwing is not handled: use `invalid` and `errorMessage`. onCommit?: (value: string) => void; // Called when Escape reverts the draft. onCancel?: () => void; invalid?: boolean; errorMessage?: string; } // Text that edits in place. Always a real input, so keyboard and assistive tech need no extra mode. const InlineEdit = forwardRef( ({ className, variant, value, defaultValue = '', onValueChange, onCommit, onCancel, invalid, errorMessage, readOnly, onBlur, onKeyDown, ...props }, ref) => { const zero = usePreset() === 'zero'; const controlled = value !== undefined; const [inner, setInner] = useState(defaultValue); const draft = controlled ? value : inner; const committed = useRef(draft); const errorId = useId(); const hasError = Boolean(invalid || errorMessage); const set = (next: string) => { if (!controlled) setInner(next); onValueChange?.(next); }; const commit = () => { if (draft !== committed.current) { committed.current = draft; onCommit?.(draft); } }; const handleKeyDown = (event: KeyboardEvent) => { onKeyDown?.(event); if (event.defaultPrevented || readOnly) return; if (event.key === 'Enter') { event.preventDefault(); commit(); } else if (event.key === 'Escape') { event.preventDefault(); set(committed.current); onCancel?.(); } }; return (

set(event.target.value)} onBlur={(event) => { onBlur?.(event); if (!readOnly) commit(); }} onKeyDown={handleKeyDown} className={cn(inlineEditVariants({ variant, preset: zero ? 'zero' : 'default' }), focusRingField, invalidRing, hasError && 'border-border-destructive', className)} {...props} /> {errorMessage ? (

{errorMessage}

) : null}

); }, ); InlineEdit.displayName = 'InlineEdit'; export { InlineEdit, inlineEditVariants }; 50:["$","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","class-variance-authority@^0.7.0",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/class-variance-authority","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":"class-variance-authority@^0.7.0"}]]}]}]]}],["$","$L51",null,{"namespace":"@getitdone","registryDependencies":["https://zero-design.itdone.de/r/labels-context.json","https://zero-design.itdone.de/r/recipes.json","https://zero-design.itdone.de/r/utils.json","https://zero-design.itdone.de/r/theme.json"]}]]}],null]}],["$","$L52",null,{"files":[{"path":"registry/ui/inline-edit.tsx","content":"$53","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]