{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "editable",
  "title": "Editable",
  "description": "A shadcn-style editable component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react"],
  "registryDependencies": ["button"],
  "files": [
    {
      "path": "src/components/ui/editable.tsx",
      "content": "\"use client\";\n\nimport {\n  Editable as EditablePrimitive,\n  type EditableRootProviderProps,\n} from \"@ark-ui/react/editable\";\nimport type { ComponentProps } from \"react\";\nimport { buttonVariants } from \"@/components/ui/button\";\nimport { cn } from \"@/lib/utils\";\n\nexport const Editable = ({\n  className,\n  selectOnFocus = false,\n  ...props\n}: EditablePrimitive.RootProps) => {\n  return (\n    <EditablePrimitive.Root\n      className={cn(\n        \"flex w-full max-w-md flex-col gap-1.5 text-foreground\",\n        className,\n      )}\n      data-slot=\"editable\"\n      selectOnFocus={selectOnFocus}\n      {...props}\n    />\n  );\n};\n\nexport const EditableLabel = ({\n  className,\n  ...props\n}: EditablePrimitive.LabelProps) => {\n  return (\n    <EditablePrimitive.Label\n      className={cn(\n        \"font-medium text-foreground text-sm leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-64\",\n        className,\n      )}\n      data-slot=\"editable-label\"\n      {...props}\n    />\n  );\n};\n\nexport const EditableArea = ({\n  className,\n  style,\n  ...rest\n}: EditablePrimitive.AreaProps) => {\n  return (\n    <EditablePrimitive.Area\n      className={cn(\n        \"relative max-w-full min-h-8.5 w-full min-w-0 sm:min-h-7.5\",\n        className,\n      )}\n      data-slot=\"editable-area\"\n      style={{\n        width: \"100%\",\n        display: \"grid\",\n        gridTemplateColumns: \"minmax(0, 1fr)\",\n        ...style,\n      }}\n      {...rest}\n    />\n  );\n};\n\nconst editableFieldShell =\n  \"box-border w-full min-w-0 rounded-lg border px-3 py-2 text-base sm:text-sm\";\n\n/** Same fixed block size as native text input — preview must match or swap will jump. */\nconst editableSingleLineHeight =\n  \"h-8.5 sm:h-7.5 data-autoresize:h-auto data-autoresize:min-h-20\";\n\nexport const EditableInput = ({\n  className,\n  ...props\n}: EditablePrimitive.InputProps) => {\n  return (\n    <EditablePrimitive.Input\n      className={cn(\n        editableFieldShell,\n        \"border-input bg-background text-foreground outline-none ring-ring/24 transition-[border-color,box-shadow] duration-150 placeholder:text-muted-foreground/72 focus-visible:border-ring focus-visible:ring-[3px] data-invalid:border-destructive/36 data-invalid:ring-destructive/16 dark:bg-input/32 dark:data-invalid:ring-destructive/24\",\n        editableSingleLineHeight,\n        \"data-autoresize:resize-none data-autoresize:wrap-break-word data-autoresize:field-sizing-content\",\n        className,\n      )}\n      data-slot=\"editable-input\"\n      {...props}\n    />\n  );\n};\n\nexport const EditablePreview = ({\n  className,\n  ...props\n}: EditablePrimitive.PreviewProps) => {\n  return (\n    <EditablePrimitive.Preview\n      className={cn(\n        editableFieldShell,\n        \"flex cursor-text items-center overflow-hidden text-foreground outline-none transition-[border-color,box-shadow] duration-150 focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/24 not-data-readonly:not-data-disabled:hover:dark:bg-input/32\",\n        \"border-transparent\",\n        editableSingleLineHeight,\n        \"text-ellipsis whitespace-nowrap\",\n        \"data-placeholder-shown:text-muted-foreground\",\n        \"data-autoresize:items-start data-autoresize:justify-start data-autoresize:overflow-visible data-autoresize:wrap-break-word data-autoresize:whitespace-pre-wrap!\",\n        className,\n      )}\n      data-slot=\"editable-preview\"\n      {...props}\n    />\n  );\n};\n\nexport const EditableControl = ({\n  className,\n  ...props\n}: EditablePrimitive.ControlProps) => {\n  return (\n    <EditablePrimitive.Control\n      className={cn(\"flex flex-wrap items-center gap-2 pt-0.5\", className)}\n      data-slot=\"editable-control\"\n      {...props}\n    />\n  );\n};\n\nconst triggerClass = buttonVariants({ size: \"sm\", variant: \"secondary\" });\n\nexport const EditableEditTrigger = ({\n  className,\n  ...props\n}: EditablePrimitive.EditTriggerProps) => {\n  return (\n    <EditablePrimitive.EditTrigger\n      className={cn(triggerClass, className)}\n      data-slot=\"editable-edit-trigger\"\n      {...props}\n    />\n  );\n};\n\nexport const EditableSubmitTrigger = ({\n  className,\n  ...props\n}: EditablePrimitive.SubmitTriggerProps) => {\n  return (\n    <EditablePrimitive.SubmitTrigger\n      className={cn(triggerClass, className)}\n      data-slot=\"editable-submit-trigger\"\n      {...props}\n    />\n  );\n};\n\nexport const EditableCancelTrigger = ({\n  className,\n  ...props\n}: EditablePrimitive.CancelTriggerProps) => {\n  return (\n    <EditablePrimitive.CancelTrigger\n      className={cn(\n        buttonVariants({ size: \"sm\", variant: \"outline\" }),\n        className,\n      )}\n      data-slot=\"editable-cancel-trigger\"\n      {...props}\n    />\n  );\n};\n\nexport const EditableContext = EditablePrimitive.Context;\n\nexport const EditableRootProvider = ({\n  className,\n  ...props\n}: EditableRootProviderProps) => {\n  return (\n    <EditablePrimitive.RootProvider\n      className={cn(\n        \"flex w-full max-w-md flex-col gap-1.5 text-foreground\",\n        className,\n      )}\n      data-slot=\"editable\"\n      {...props}\n    />\n  );\n};\n\nexport type {\n  EditableEditChangeDetails,\n  EditableValueChangeDetails,\n} from \"@ark-ui/react/editable\";\nexport { useEditable, useEditableContext } from \"@ark-ui/react/editable\";\n\nexport type EditableRootProps = ComponentProps<typeof Editable>;\n",
      "type": "registry:ui",
      "target": "src/components/ui/editable.tsx"
    }
  ],
  "type": "registry:ui"
}